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

package/favorites/components/ItemFulfillmentMethod/ItemFulfillmentMethod.js

@@ -7,23 +7,27 @@ import { SheetList, SheetDrawer } from '@shopgate/engage/components';
  * @param {Object} props Props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ItemFulfillmentMethod = ({
   isOpen,
   methods,
   onClose,
   onSelect
-}) => /*#__PURE__*/React.createElement(SheetDrawer, {
+}) => /*#__PURE__*/_jsx(SheetDrawer, {
   isOpen: isOpen,
   title: i18n.text('favorites.fo_method_chooser.title'),
-  onDidClose: () => onClose(null)
-}, /*#__PURE__*/React.createElement(SheetList, null, methods.includes('ROPIS') ? /*#__PURE__*/React.createElement(SheetList.Item, {
-  title: i18n.text('locations.method.ropis'),
-  onClick: () => onSelect('ROPIS')
-}) : null, methods.includes('BOPIS') ? /*#__PURE__*/React.createElement(SheetList.Item, {
-  title: i18n.text('locations.method.bopis'),
-  onClick: () => onSelect('BOPIS')
-}) : null, methods.includes('directShip') ? /*#__PURE__*/React.createElement(SheetList.Item, {
-  title: i18n.text('locations.method.direct_ship'),
-  onClick: () => onSelect('directShip')
-}) : null));
+  onDidClose: () => onClose(null),
+  children: /*#__PURE__*/_jsxs(SheetList, {
+    children: [methods.includes('ROPIS') ? /*#__PURE__*/_jsx(SheetList.Item, {
+      title: i18n.text('locations.method.ropis'),
+      onClick: () => onSelect('ROPIS')
+    }) : null, methods.includes('BOPIS') ? /*#__PURE__*/_jsx(SheetList.Item, {
+      title: i18n.text('locations.method.bopis'),
+      onClick: () => onSelect('BOPIS')
+    }) : null, methods.includes('directShip') ? /*#__PURE__*/_jsx(SheetList.Item, {
+      title: i18n.text('locations.method.direct_ship'),
+      onClick: () => onSelect('directShip')
+    }) : null]
+  })
+});
 export default ItemFulfillmentMethod;

package/favorites/components/List/List.js

@@ -15,6 +15,7 @@ import ListAccordionHeader from "./ListAccordionHeader";
  * @param {Object} props Props
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const makeMapStateToProps = (_, {
   id
 }) => {
@@ -98,34 +99,38 @@ const FavoriteList = ({
   useEffect(() => {
     setShowLoadMoreButton(allFavoritesLoaded);
   }, [offset, allFavoritesLoaded]);
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: hasMultipleFavoritesListsSupport,
-    wrapperFalsy: children => /*#__PURE__*/React.createElement("div", {
-      className: styles.rootNoFavoritesLists
-    }, children),
-    wrapper: children => /*#__PURE__*/React.createElement(Card, {
-      className: styles.root
-    }, /*#__PURE__*/React.createElement(Accordion, {
-      className: "",
-      renderAdditionalHeaderContent: () => /*#__PURE__*/React.createElement(ListAccordionHeader, {
-        rename: newName => rename(id, newName),
-        remove: remove,
-        id: id
-      }),
-      renderLabel: () => /*#__PURE__*/React.createElement(ListAccordionLabel, {
-        title: name
-      }),
-      chevronPosition: "left",
-      startOpened: true
-    }, children))
-  }, /*#__PURE__*/React.createElement(ListContent, {
-    listId: id,
-    items: filteredItems,
-    removeItem: removeItem,
-    addToCart: addToCart,
-    onLoadMore: handleLoadMore,
-    showLoadMoreButton: showLoadMoreButton
-  }));
+    wrapperFalsy: children => /*#__PURE__*/_jsx("div", {
+      className: styles.rootNoFavoritesLists,
+      children: children
+    }),
+    wrapper: children => /*#__PURE__*/_jsx(Card, {
+      className: styles.root,
+      children: /*#__PURE__*/_jsx(Accordion, {
+        className: "",
+        renderAdditionalHeaderContent: () => /*#__PURE__*/_jsx(ListAccordionHeader, {
+          rename: newName => rename(id, newName),
+          remove: remove,
+          id: id
+        }),
+        renderLabel: () => /*#__PURE__*/_jsx(ListAccordionLabel, {
+          title: name
+        }),
+        chevronPosition: "left",
+        startOpened: true,
+        children: children
+      })
+    }),
+    children: /*#__PURE__*/_jsx(ListContent, {
+      listId: id,
+      items: filteredItems,
+      removeItem: removeItem,
+      addToCart: addToCart,
+      onLoadMore: handleLoadMore,
+      showLoadMoreButton: showLoadMoreButton
+    })
+  });
 };
 FavoriteList.defaultProps = {
   hasMultipleFavoritesListsSupport: false,

package/favorites/components/List/ListAccordionHeader.js

@@ -12,19 +12,25 @@ import { FAVORITES_LIST_CONTEXT_MENU } from "../../constants";
  * @param {string} props.id The label name
  * @return {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ListAccordionHeader = ({
   rename,
   remove,
   id
-}) => /*#__PURE__*/React.createElement(SurroundPortals, {
+}) => /*#__PURE__*/_jsx(SurroundPortals, {
   portalName: FAVORITES_LIST_CONTEXT_MENU,
   portalProps: {
     id
-  }
-}, /*#__PURE__*/React.createElement(ContextMenu, null, /*#__PURE__*/React.createElement(ContextMenu.Item, {
-  onClick: rename
-}, i18n.text('favorites.rename_list')), /*#__PURE__*/React.createElement(ContextMenu.Item, {
-  onClick: remove,
-  disabled: id === 'DEFAULT'
-}, i18n.text('favorites.remove_list'))));
+  },
+  children: /*#__PURE__*/_jsxs(ContextMenu, {
+    children: [/*#__PURE__*/_jsx(ContextMenu.Item, {
+      onClick: rename,
+      children: i18n.text('favorites.rename_list')
+    }), /*#__PURE__*/_jsx(ContextMenu.Item, {
+      onClick: remove,
+      disabled: id === 'DEFAULT',
+      children: i18n.text('favorites.remove_list')
+    })]
+  })
+});
 export default ListAccordionHeader;

package/favorites/components/List/ListAccordionLabel.js

@@ -7,9 +7,11 @@ import styles from "./styles";
  * @param {string} title The label name
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ListAccordionLabel = ({
   title
-}) => /*#__PURE__*/React.createElement("span", {
-  className: styles.title
-}, title);
+}) => /*#__PURE__*/_jsx("span", {
+  className: styles.title,
+  children: title
+});
 export default ListAccordionLabel;

package/favorites/components/List/ListContent.js

@@ -13,6 +13,7 @@ import styles from "./styles";
  * @param {Object} props Props
  * @returns {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const mapStateToProps = (state, props) => ({
   useGetFavoriteIdsPipeline: getUseGetFavoriteIdsPipeline(state, props)
 });
@@ -29,44 +30,48 @@ const ListContent = ({
   useGetFavoriteIdsPipeline,
   showLoadMoreButton,
   onLoadMore
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-  className: styles.divider
-}), items.length === 0 ? /*#__PURE__*/React.createElement("span", null, i18n.text('favorites.empty')) : null, /*#__PURE__*/React.createElement(ProductListTypeProvider, {
-  type: "favoritesList"
-}, useGetFavoriteIdsPipeline ? items.map(({
-  productId
-}, index) => /*#__PURE__*/React.createElement(ProductProvider, {
-  productId: productId,
-  key: productId
-}, ({
-  product
-}) => product ? /*#__PURE__*/React.createElement(ListItemWrapper, {
-  listId: listId,
-  product: product,
-  items: items,
-  addToCart: addToCart,
-  removeItem: removeItem,
-  index: index,
-  key: product.id
-}) : null)) : null, !useGetFavoriteIdsPipeline && items.filter(({
-  product
-}) => product).map(({
-  product,
-  notes,
-  quantity
-}, index) => /*#__PURE__*/React.createElement(ListItemWrapper, {
-  listId: listId,
-  product: product,
-  notes: notes,
-  quantity: quantity,
-  items: items,
-  addToCart: addToCart,
-  removeItem: removeItem,
-  index: index,
-  key: product.id
-}))), showLoadMoreButton && /*#__PURE__*/React.createElement(RippleButton, {
-  type: "primary",
-  className: styles.loadMoreButton,
-  onClick: onLoadMore
-}, i18n.text('favorites.load_more_button')));
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx("div", {
+    className: styles.divider
+  }), items.length === 0 ? /*#__PURE__*/_jsx("span", {
+    children: i18n.text('favorites.empty')
+  }) : null, /*#__PURE__*/_jsxs(ProductListTypeProvider, {
+    type: "favoritesList",
+    children: [useGetFavoriteIdsPipeline ? items.map(({
+      productId
+    }, index) => /*#__PURE__*/_jsx(ProductProvider, {
+      productId: productId,
+      children: ({
+        product
+      }) => product ? /*#__PURE__*/_jsx(ListItemWrapper, {
+        listId: listId,
+        product: product,
+        items: items,
+        addToCart: addToCart,
+        removeItem: removeItem,
+        index: index
+      }, product.id) : null
+    }, productId)) : null, !useGetFavoriteIdsPipeline && items.filter(({
+      product
+    }) => product).map(({
+      product,
+      notes,
+      quantity
+    }, index) => /*#__PURE__*/_jsx(ListItemWrapper, {
+      listId: listId,
+      product: product,
+      notes: notes,
+      quantity: quantity,
+      items: items,
+      addToCart: addToCart,
+      removeItem: removeItem,
+      index: index
+    }, product.id))]
+  }), showLoadMoreButton && /*#__PURE__*/_jsx(RippleButton, {
+    type: "primary",
+    className: styles.loadMoreButton,
+    onClick: onLoadMore,
+    children: i18n.text('favorites.load_more_button')
+  })]
+});
 export default connect(mapStateToProps)(ListContent);

package/favorites/components/List/ListItemWrapper.js

@@ -9,6 +9,7 @@ import styles from "./styles";
  * @param {Object} props The component props
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ListItemWrapper = ({
   listId,
   product,
@@ -18,25 +19,27 @@ const ListItemWrapper = ({
   removeItem,
   items,
   index
-}) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Item, {
-  product: product,
-  notes: notes,
-  quantity: quantity,
-  listId: listId,
-  productId: product.id,
-  addToCart: e => {
-    e.preventDefault();
-    e.stopPropagation();
-    return addToCart(product, quantity);
-  },
-  remove: e => {
-    e.preventDefault();
-    e.stopPropagation();
-    removeItem(product.id);
-  }
-}), index === items.length - 1 ? null : /*#__PURE__*/React.createElement("div", {
-  className: styles.divider
-}));
+}) => /*#__PURE__*/_jsxs("div", {
+  children: [/*#__PURE__*/_jsx(Item, {
+    product: product,
+    notes: notes,
+    quantity: quantity,
+    listId: listId,
+    productId: product.id,
+    addToCart: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      return addToCart(product, quantity);
+    },
+    remove: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      removeItem(product.id);
+    }
+  }), index === items.length - 1 ? null : /*#__PURE__*/_jsx("div", {
+    className: styles.divider
+  })]
+});
 ListItemWrapper.defaultProps = {
   notes: undefined,
   quantity: 1

package/favorites/components/ListChooser/ListChooser.js

@@ -12,6 +12,7 @@ import ListChooserItem from "./ListChooserItem";
  * @param {Object} state State.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const mapStateToProps = state => ({
   settings: getFavoritesListState(state).chooser,
   lists: getFavoritesLists(state)
@@ -23,7 +24,7 @@ const mapStateToProps = state => ({
  */
 const mapDispatchToProps = dispatch => ({
   close: () => dispatch(closeFavoritesListChooser()),
-  toggle: (...params) => dispatch(toggleFavorite(...params))
+  toggle: (...params) => dispatch(toggleFavorite.apply(void 0, params))
 });
 
 /**
@@ -39,22 +40,24 @@ const ListChooser = ({
   const isVisible = !!settings;
   const productId = settings?.productId;
   const withRelatives = settings?.withRelatives;
-  return /*#__PURE__*/React.createElement(SheetDrawer, {
+  return /*#__PURE__*/_jsx(SheetDrawer, {
     isOpen: isVisible,
     title: i18n.text('favorites.list_chooser.title'),
-    onDidClose: close
-  }, /*#__PURE__*/React.createElement(SheetList, null, lists.map(list => /*#__PURE__*/React.createElement(SheetList.Item, {
-    key: list.id,
-    title: list.name,
-    onClick: () => {
-      close();
-      toggle(productId, list.id, withRelatives);
-    },
-    rightComponent: /*#__PURE__*/React.createElement(ListChooserItem, {
-      listId: list.id,
-      productId: productId
+    onDidClose: close,
+    children: /*#__PURE__*/_jsx(SheetList, {
+      children: lists.map(list => /*#__PURE__*/_jsx(SheetList.Item, {
+        title: list.name,
+        onClick: () => {
+          close();
+          toggle(productId, list.id, withRelatives);
+        },
+        rightComponent: /*#__PURE__*/_jsx(ListChooserItem, {
+          listId: list.id,
+          productId: productId
+        })
+      }, list.id))
     })
-  }))));
+  });
 };
 ListChooser.defaultProps = {
   settings: null,

package/favorites/components/ListChooser/ListChooserItem.js

@@ -9,6 +9,7 @@ import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSett
 /**
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const makeMapStateToProps = () => {
   const getIsOnList = makeIsProductOnSpecificFavoriteList((_, props) => props.productId, (_, props) => props.listId);
   return (state, props) => ({
@@ -35,17 +36,20 @@ const ListChooserItem = ({
   wishlistItemQuantityEnabled
 }) => {
   if (wishlistItemQuantityEnabled && isOnList) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: styles.add
-    }, i18n.text('favorites.list_chooser.add_more'));
+    return /*#__PURE__*/_jsx("span", {
+      className: styles.add,
+      children: i18n.text('favorites.list_chooser.add_more')
+    });
   }
   if (isOnList) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: styles.remove
-    }, i18n.text('favorites.list_chooser.remove'));
+    return /*#__PURE__*/_jsx("span", {
+      className: styles.remove,
+      children: i18n.text('favorites.list_chooser.remove')
+    });
   }
-  return /*#__PURE__*/React.createElement("span", {
-    className: styles.add
-  }, i18n.text('favorites.list_chooser.add'));
+  return /*#__PURE__*/_jsx("span", {
+    className: styles.add,
+    children: i18n.text('favorites.list_chooser.add')
+  });
 };
 export default connect(makeMapStateToProps)(ListChooserItem);

package/favorites/components/Lists/Lists.js

@@ -30,6 +30,7 @@ import { FAVORITES_LIST_ADD_BUTTON, FAVORITES_LIST } from "../../constants/Porta
  * @param {Object} props Props
  * @returns {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const makeMapStateToProps = () => {
   const getFulfillmentMethods = makeGetEnabledFulfillmentMethods();
   return (state, props) => ({
@@ -53,7 +54,7 @@ const mapDispatchToProps = dispatch => ({
   updateList: (id, name) => dispatch(updateFavoritesList(id, name)),
   removeList: id => dispatch(removeFavoritesList(id)),
   removeItem: (listId, productId) => dispatch(removeFavorites(productId, false, listId)),
-  addToCart: (...params) => dispatch(addProductsToCart(...params)),
+  addToCart: (...params) => dispatch(addProductsToCart.apply(void 0, params)),
   fetchLocations: (productId, params) => dispatch(fetchProductLocations(productId, params))
 });
 const styles = {
@@ -244,40 +245,43 @@ const FavoriteLists = ({
   if (isInitializing) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, lists.map(list => /*#__PURE__*/React.createElement(SurroundPortals, {
-    key: list.id,
-    portalName: FAVORITES_LIST,
-    portalProps: list
-  }, /*#__PURE__*/React.createElement(List, {
-    id: list.id,
-    name: list.name,
-    rename: openRenameModal,
-    remove: () => removeList(list.id),
-    removeItem: productId => removeItem(list.id, productId),
-    addToCart: (product, quantity) => handleAddToCart(list.id, product, quantity),
-    hasMultipleFavoritesListsSupport: hasMultipleFavoritesListsSupport
-  }))), modalOpen ? /*#__PURE__*/React.createElement(ListsModal, {
-    type: modalType,
-    onDismiss: closeModal,
-    onConfirm: confirmModal
-  }) : null, activeProductId ? /*#__PURE__*/React.createElement(FulfillmentSheet, {
-    productId: activeProductId,
-    fulfillmentMethod: fulfillmentMethod
-  }) : null, /*#__PURE__*/React.createElement(CommentDialog, null), /*#__PURE__*/React.createElement(ItemFulfillmentMethod, {
-    isOpen: foMethodChooser,
-    methods: fulfillmentMethods,
-    onSelect: handleAddToCartWithMethod,
-    onClose: handleMethodClose
-  }), /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: FAVORITES_LIST_ADD_BUTTON
-  }, hasMultipleFavoritesListsSupport ? /*#__PURE__*/React.createElement(RippleButton, {
-    type: "primary",
-    className: styles.addButton,
-    onClick: openAddModal,
-    disabled: false
-  }, i18n.text('favorites.add_list')) : null));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.root,
+    children: [lists.map(list => /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: FAVORITES_LIST,
+      portalProps: list,
+      children: /*#__PURE__*/_jsx(List, {
+        id: list.id,
+        name: list.name,
+        rename: openRenameModal,
+        remove: () => removeList(list.id),
+        removeItem: productId => removeItem(list.id, productId),
+        addToCart: (product, quantity) => handleAddToCart(list.id, product, quantity),
+        hasMultipleFavoritesListsSupport: hasMultipleFavoritesListsSupport
+      })
+    }, list.id)), modalOpen ? /*#__PURE__*/_jsx(ListsModal, {
+      type: modalType,
+      onDismiss: closeModal,
+      onConfirm: confirmModal
+    }) : null, activeProductId ? /*#__PURE__*/_jsx(FulfillmentSheet, {
+      productId: activeProductId,
+      fulfillmentMethod: fulfillmentMethod
+    }) : null, /*#__PURE__*/_jsx(CommentDialog, {}), /*#__PURE__*/_jsx(ItemFulfillmentMethod, {
+      isOpen: foMethodChooser,
+      methods: fulfillmentMethods,
+      onSelect: handleAddToCartWithMethod,
+      onClose: handleMethodClose
+    }), /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: FAVORITES_LIST_ADD_BUTTON,
+      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(RippleButton, {
+        type: "primary",
+        className: styles.addButton,
+        onClick: openAddModal,
+        disabled: false,
+        children: i18n.text('favorites.add_list')
+      }) : null
+    })]
+  });
 };
 FavoriteLists.defaultProps = {
   lists: [],

package/favorites/components/Lists/ListsModal.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
@@ -6,6 +5,7 @@ import { Dialog, TextField } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core';
 import { themeName } from '@shopgate/pwa-common/helpers/config';
 import { css } from 'glamor';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isIos = themeName.includes('ios');
 const styles = {
   root: css({
@@ -20,7 +20,10 @@ const styles = {
 
 /**
  * @param {Object} props Props
- * @returns {Object}
+ * @param {'add_list'|'rename_list'} [props.type] The modal type
+ * @param {Function} props.onConfirm The confirm handler
+ * @param {Function} props.onDismiss The dismiss handler
+ * @returns {JSX.Element}
  */
 const ListsModal = ({
   type,
@@ -42,28 +45,35 @@ const ListsModal = ({
 
   // Favorites list name was restricted to 25 characters on PWA6 in CCP-2535
   const textFieldMaxLength = useMemo(() => !hasNewServices() ? '25' : undefined, []);
-  return /*#__PURE__*/React.createElement(Dialog, {
+  return /*#__PURE__*/_jsx(Dialog, {
     onConfirm: onConfirmWrapped,
     onDismiss: onDismiss,
     modal: {
       title: i18n.text(`favorites.${type}_modal.title`),
       dismiss: i18n.text(`favorites.${type}_modal.dismiss`),
       confirm: i18n.text(`favorites.${type}_modal.confirm`)
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement("span", null, i18n.text(`favorites.${type}_modal.message`)), /*#__PURE__*/React.createElement(TextField, _extends({
-    name: "name"
-  }, isIos ? {
-    placeholder: i18n.text(`favorites.${type}_modal.label`)
-  } : {
-    label: i18n.text(`favorites.${type}_modal.label`)
-  }, {
-    maxLength: textFieldMaxLength,
-    onChange: onChange,
-    value: input,
-    errorText: error || undefined,
-    className: styles.input
-  }))));
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/_jsx("span", {
+        children: i18n.text(`favorites.${type}_modal.message`)
+      }), /*#__PURE__*/_jsx(TextField, {
+        name: "name",
+        ...(isIos ? {
+          placeholder: i18n.text(`favorites.${type}_modal.label`)
+        } : {
+          label: i18n.text(`favorites.${type}_modal.label`)
+        }),
+        maxLength: textFieldMaxLength,
+        onChange: onChange,
+        value: input,
+        errorText: error || undefined,
+        className: styles.input
+      })]
+    })
+  });
+};
+ListsModal.defaultProps = {
+  type: 'add_list'
 };
 export default ListsModal;

package/favorites/components/RemoveButton/RemoveButton.js

@@ -4,6 +4,7 @@ import { css } from 'glamor';
 import { i18n } from '@shopgate/engage/core';
 import { Ripple } from '@shopgate/engage/components';
 import TrashOutlineIcon from '@shopgate/pwa-ui-shared/icons/TrashOutlineIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -28,12 +29,14 @@ const styles = {
  */
 const RemoveButton = ({
   onClick
-}) => /*#__PURE__*/React.createElement("button", {
+}) => /*#__PURE__*/_jsx("button", {
   className: styles.root,
   onClick: onClick,
   type: "button",
-  "aria-label": i18n.text('favorites.remove')
-}, /*#__PURE__*/React.createElement(Ripple, {
-  className: styles.ripple
-}, /*#__PURE__*/React.createElement(TrashOutlineIcon, null)));
+  "aria-label": i18n.text('favorites.remove'),
+  children: /*#__PURE__*/_jsx(Ripple, {
+    className: styles.ripple,
+    children: /*#__PURE__*/_jsx(TrashOutlineIcon, {})
+  })
+});
 export default RemoveButton;

package/filter/components/FilterItem/index.js

@@ -7,9 +7,11 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FilterItem = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: styles
-}, children);
+}) => /*#__PURE__*/_jsx("div", {
+  className: styles,
+  children: children
+});
 export default FilterItem;

package/filter/components/FilterItem/spec.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Item from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('Filter: <Item />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement("div", null, "Some")));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Item, {
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Some"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
   });
 });