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

package/cart/components/PaymentBar/PaymentBarPromotionalText.js

@@ -10,6 +10,7 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { spacer } from "./PaymentBarContent.style";
 import { CartContext } from "../../cart.context";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const mapDispatchToProps = {
   showModal: showModalAction
 };
@@ -81,30 +82,34 @@ const PaymentBarPromotionalText = ({
     return null;
   }
   if (!renderIcon) {
-    return /*#__PURE__*/React.createElement(CartTotalLine, {
-      className: styles.line
-    }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles.textWrapper, {
-        [styles.loading]: isLoading
-      }),
-      dangerouslySetInnerHTML: {
-        __html: nl2br(text)
-      }
-    }), /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-      className: spacer
-    })));
+    return /*#__PURE__*/_jsx(CartTotalLine, {
+      className: styles.line,
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classNames(styles.textWrapper, {
+            [styles.loading]: isLoading
+          }),
+          dangerouslySetInnerHTML: {
+            __html: nl2br(text)
+          }
+        }), /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+          className: spacer
+        })]
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/_jsx("span", {
     onClick: showText,
     onKeyDown: showText,
     className: classNames(styles.iconWrapper, {
       [styles.loading]: isLoading
     }),
     role: "button",
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(InfoIcon, {
-    className: styles.icon
-  }));
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsx(InfoIcon, {
+      className: styles.icon
+    })
+  });
 };
 PaymentBarPromotionalText.defaultProps = {
   text: null,

package/cart/components/PaymentBar/PaymentBarReserveButton.js

@@ -14,6 +14,7 @@ import connect from "./PaymentBarReserveButton.connector";
  * @param {Function} props.historyReset The history reset function.
  * @return {JSX.Element} The rendered component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PaymentBarReserveButton = ({
   historyReset
 }) => {
@@ -26,7 +27,7 @@ const PaymentBarReserveButton = ({
   /**
    * Handles the click on the button.
    */
-  function handleClick() {
+  const handleClick = React.useCallback(() => {
     FulfillmentSheet.open({
       stage: STAGE_RESERVE_FORM,
       callback: (_location, _product, orderSuccess) => {
@@ -35,19 +36,21 @@ const PaymentBarReserveButton = ({
         }
       }
     });
-  }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  }, [historyReset]);
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: CART_CHECKOUT_BUTTON,
     portalProps: {
       isActive: orderable
-    }
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    onClick: handleClick,
-    disabled: !orderable,
-    type: "regular",
-    className: orderable ? button : disabledButton
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.reserve"
-  })));
+    },
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      onClick: handleClick,
+      disabled: !orderable,
+      type: "regular",
+      className: orderable ? button : disabledButton,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.reserve"
+      })
+    })
+  });
 };
 export default connect(PaymentBarReserveButton);

package/cart/components/PaymentBar/PaymentBarShippingCost.js

@@ -15,6 +15,7 @@ import connect from "./PaymentBarShippingCost.connector";
  * @param {string|null} [props.className=null] Additional class names.
  * @returns {JSX.Element|null} The rendered component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarShippingCost = ({
   shippingCost,
   showSeparator,
@@ -28,23 +29,25 @@ const PaymentBarShippingCost = ({
     hasPromotionCoupons
   } = React.useContext(CartContext);
   const shippingLine = React.useMemo(() => getShippingLine(config, isUserLoggedIn, shippingCost), [config, isUserLoggedIn, shippingCost]);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_PAYMENT_BAR_TOTALS_SHIPPING
-  }, shippingLine && /*#__PURE__*/React.createElement(CartTotalLine, {
-    isDisabled: isLoading,
-    type: "shipping",
-    className: className
-  }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
-    label: shippingLine.label,
-    showSeparator: showSeparator !== null ? showSeparator : !!shippingLine.amount
-  }), /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
-    amount: shippingLine.amount,
-    currency: currency
-  }), /*#__PURE__*/React.createElement(CartTotalLine.Hint, {
-    hint: shippingLine.hint
-  }), hasPromotionCoupons && /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-    className: spacer
-  })));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CART_PAYMENT_BAR_TOTALS_SHIPPING,
+    children: shippingLine && /*#__PURE__*/_jsxs(CartTotalLine, {
+      isDisabled: isLoading,
+      type: "shipping",
+      className: className,
+      children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
+        label: shippingLine.label,
+        showSeparator: showSeparator !== null ? showSeparator : !!shippingLine.amount
+      }), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
+        amount: shippingLine.amount,
+        currency: currency
+      }), /*#__PURE__*/_jsx(CartTotalLine.Hint, {
+        hint: shippingLine.hint
+      }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+        className: spacer
+      })]
+    })
+  });
 };
 PaymentBarShippingCost.defaultProps = {
   className: null,

package/cart/components/PaymentBar/PaymentBarSubTotal.js

@@ -16,6 +16,7 @@ import connect from "./PaymentBarSubTotal.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarSubTotal = ({
   amount,
   label,
@@ -27,21 +28,23 @@ const PaymentBarSubTotal = ({
     isLoading,
     hasPromotionCoupons
   } = React.useContext(CartContext);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_PAYMENT_BAR_TOTALS_SUB_TOTAL
-  }, amount && /*#__PURE__*/React.createElement(CartTotalLine, {
-    isDisabled: isLoading,
-    type: "subTotal",
-    className: className
-  }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
-    label: label,
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
-    amount: amount,
-    currency: currency
-  }), hasPromotionCoupons && /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-    className: spacer
-  })));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CART_PAYMENT_BAR_TOTALS_SUB_TOTAL,
+    children: amount && /*#__PURE__*/_jsxs(CartTotalLine, {
+      isDisabled: isLoading,
+      type: "subTotal",
+      className: className,
+      children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
+        label: label,
+        showSeparator: showSeparator
+      }), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
+        amount: amount,
+        currency: currency
+      }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+        className: spacer
+      })]
+    })
+  });
 };
 PaymentBarSubTotal.defaultProps = {
   className: null,

package/cart/components/PaymentBar/PaymentBarTax.js

@@ -15,6 +15,7 @@ import connect from "./PaymentBarTax.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarTax = ({
   taxData,
   showSeparator,
@@ -33,23 +34,25 @@ const PaymentBarTax = ({
   if (!taxLine) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_PAYMENT_BAR_TOTALS_TAX
-  }, /*#__PURE__*/React.createElement(CartTotalLine, {
-    isDisabled: isLoading,
-    type: "tax",
-    className: className
-  }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
-    label: taxLine.label,
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
-    amount: taxLine.amount,
-    currency: currency
-  }), /*#__PURE__*/React.createElement(CartTotalLine.Hint, {
-    hint: taxLine.hint
-  }), hasPromotionCoupons && /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-    className: spacer
-  })));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CART_PAYMENT_BAR_TOTALS_TAX,
+    children: /*#__PURE__*/_jsxs(CartTotalLine, {
+      isDisabled: isLoading,
+      type: "tax",
+      className: className,
+      children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
+        label: taxLine.label,
+        showSeparator: showSeparator
+      }), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
+        amount: taxLine.amount,
+        currency: currency
+      }), /*#__PURE__*/_jsx(CartTotalLine.Hint, {
+        hint: taxLine.hint
+      }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+        className: spacer
+      })]
+    })
+  });
 };
 PaymentBarTax.defaultProps = {
   taxData: null,

package/cart/components/Substitution/index.js

@@ -10,6 +10,7 @@ import connect from "./connector";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Substitution = ({
   id,
   onChange,
@@ -17,22 +18,25 @@ const Substitution = ({
   className,
   label,
   disabled
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classNames(root, className)
-}, /*#__PURE__*/React.createElement("label", {
-  "aria-hidden": true,
-  className: text,
-  htmlFor: id,
-  id: `${id}-label`
-}, label), /*#__PURE__*/React.createElement("div", {
-  className: rightSpace
-}, /*#__PURE__*/React.createElement(Toggle, {
-  className: checkbox,
-  checked: checked,
-  id: id,
-  onChange: onChange,
-  disabled: disabled
-})));
+}) => /*#__PURE__*/_jsxs("div", {
+  className: classNames(root, className),
+  children: [/*#__PURE__*/_jsx("label", {
+    "aria-hidden": true,
+    className: text,
+    htmlFor: id,
+    id: `${id}-label`,
+    children: label
+  }), /*#__PURE__*/_jsx("div", {
+    className: rightSpace,
+    children: /*#__PURE__*/_jsx(Toggle, {
+      className: checkbox,
+      checked: checked,
+      id: id,
+      onChange: onChange,
+      disabled: disabled
+    })
+  })]
+});
 Substitution.defaultProps = {
   className: undefined,
   disabled: false,
@@ -49,6 +53,7 @@ const Wrapper = ({
   children
 }) => substitutionPreferencesEnabled ? children : null;
 Wrapper.propTypes = {
+  children: PropTypes.node.isRequired,
   substitutionPreferencesEnabled: PropTypes.bool.isRequired
 };
 const ConnectedWrapper = connect(Wrapper);

package/cart/components/SupplementalContent/SupplementalContent.js

@@ -9,6 +9,7 @@ import connect from "./SupplementalContent.connector";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SupplementalContent = ({
   text,
   className
@@ -18,7 +19,7 @@ const SupplementalContent = ({
   }
 
   /* eslint-disable react/no-danger */
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(wrapper, className),
     dangerouslySetInnerHTML: {
       __html: text

package/category/components/CategoryImage/index.js

@@ -8,6 +8,7 @@ import connect from "./connector";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CategoryImage = ({
   className,
   src,
@@ -18,7 +19,7 @@ const CategoryImage = ({
     setShowPlaceholder(true);
   }, [setShowPlaceholder]);
   if (!showPlaceholder) {
-    return /*#__PURE__*/React.createElement(Image, {
+    return /*#__PURE__*/_jsx(Image, {
       className: className,
       src: src,
       onError: onImageError
@@ -27,11 +28,10 @@ const CategoryImage = ({
   if (!placeholderSrc) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Image, {
-    key: "placeholder",
+  return /*#__PURE__*/_jsx(Image, {
     className: className,
     src: placeholderSrc
-  });
+  }, "placeholder");
 };
 CategoryImage.defaultProps = {
   src: null,

package/category/components/CategoryList/index.js

@@ -23,6 +23,7 @@ import styles from "./style";
  * @param {boolean} props.showLeftSideImages Whether to show category images on the left side
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CategoryList = ({
   categories,
   parentCategory,
@@ -35,65 +36,67 @@ const CategoryList = ({
     if (prerender === 0) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(SheetList, {
-      className: classNames(styles.sheet, 'engage__category__category-list')
-    }, Array(Math.min(prerender, 8)).fill('').map((val, index) => {
-      const key = `placeholder-${index}`;
-      return /*#__PURE__*/React.createElement(Placeholder, {
-        height: 20,
-        key: key,
-        left: 0,
-        top: 18,
-        width: 220
-      });
-    }));
+    return /*#__PURE__*/_jsx(SheetList, {
+      className: classNames(styles.sheet, 'engage__category__category-list'),
+      children: Array(Math.min(prerender, 8)).fill('').map((val, index) => {
+        const key = `placeholder-${index}`;
+        return /*#__PURE__*/_jsx(Placeholder, {
+          height: 20,
+          left: 0,
+          top: 18,
+          width: 220
+        }, key);
+      })
+    });
   }
   const filters = getShowAllProductsFilters(parentCategory);
-  return /*#__PURE__*/React.createElement(SheetList, {
-    className: classNames(styles.sheet, 'engage__category__category-list')
-  }, showAllProducts ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.showAllProducts, 'engage__category__category-show-all-products')
-  }, /*#__PURE__*/React.createElement(Portal, {
-    key: parentCategory.id,
-    name: "category.show-all-products",
-    props: {
-      categoryId: parentCategory.id
-    }
-  }, /*#__PURE__*/React.createElement(SheetList.Item, {
-    link: `${CATEGORY_PATH}/${bin2hex(parentCategory.id)}/all`,
-    title: i18n.text('category.showAllProducts.label'),
-    linkState: {
-      categoryName: parentCategory.name,
-      categoryId: parentCategory.id,
-      filters
-    },
-    testId: "showAllProducts",
-    linkComponent: TextLink
-  }))) : null, categories.map(category => /*#__PURE__*/React.createElement(Portal, {
-    key: category.id,
-    name: CATEGORY_ITEM,
-    props: {
-      categoryId: category.id
-    }
-  }, /*#__PURE__*/React.createElement(SheetList.Item, {
-    link: `${CATEGORY_PATH}/${bin2hex(category.id)}`,
-    title: category.name,
-    description: category.description,
-    linkState: {
-      categoryId: category.id,
-      title: category.name
-    },
-    testId: category.name,
-    rightComponent: showImages ? /*#__PURE__*/React.createElement(CategoryImage, {
-      className: styles.image,
-      src: category.imageUrl
-    }) : null,
-    leftComponent: showLeftSideImages ? /*#__PURE__*/React.createElement(CategoryImage, {
-      className: styles.image,
-      src: category.imageUrl
-    }) : null,
-    linkComponent: TextLink
-  }))));
+  return /*#__PURE__*/_jsxs(SheetList, {
+    className: classNames(styles.sheet, 'engage__category__category-list'),
+    children: [showAllProducts ? /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.showAllProducts, 'engage__category__category-show-all-products'),
+      children: /*#__PURE__*/_jsx(Portal, {
+        name: "category.show-all-products",
+        props: {
+          categoryId: parentCategory.id
+        },
+        children: /*#__PURE__*/_jsx(SheetList.Item, {
+          link: `${CATEGORY_PATH}/${bin2hex(parentCategory.id)}/all`,
+          title: i18n.text('category.showAllProducts.label'),
+          linkState: {
+            categoryName: parentCategory.name,
+            categoryId: parentCategory.id,
+            filters
+          },
+          testId: "showAllProducts",
+          linkComponent: TextLink
+        })
+      }, parentCategory.id)
+    }) : null, categories.map(category => /*#__PURE__*/_jsx(Portal, {
+      name: CATEGORY_ITEM,
+      props: {
+        categoryId: category.id
+      },
+      children: /*#__PURE__*/_jsx(SheetList.Item, {
+        link: `${CATEGORY_PATH}/${bin2hex(category.id)}`,
+        title: category.name,
+        description: category.description,
+        linkState: {
+          categoryId: category.id,
+          title: category.name
+        },
+        testId: category.name,
+        rightComponent: showImages ? /*#__PURE__*/_jsx(CategoryImage, {
+          className: styles.image,
+          src: category.imageUrl
+        }) : null,
+        leftComponent: showLeftSideImages ? /*#__PURE__*/_jsx(CategoryImage, {
+          className: styles.image,
+          src: category.imageUrl
+        }) : null,
+        linkComponent: TextLink
+      })
+    }, category.id))]
+  });
 };
 CategoryList.defaultProps = {
   categories: null,

package/checkout/components/AddressBook/AddressBook.js

@@ -8,5 +8,10 @@ import AddressList from "./AddressList";
  * @param {Object} props The component props
  * @returns {JSX}
  */
-const AddressBook = () => /*#__PURE__*/React.createElement(AddressBookProvider, null, /*#__PURE__*/React.createElement(ProfileProvider, null, /*#__PURE__*/React.createElement(AddressList, null)));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AddressBook = () => /*#__PURE__*/_jsx(AddressBookProvider, {
+  children: /*#__PURE__*/_jsx(ProfileProvider, {
+    children: /*#__PURE__*/_jsx(AddressList, {})
+  })
+});
 export default AddressBook;

package/checkout/components/AddressBook/AddressList.js

@@ -17,6 +17,7 @@ import { ADDRESS_TYPE_SHIPPING, ADDRESS_TYPE_BILLING, CHECKOUT_ADDRESS_BOOK_CONT
  * @param {Object} state State.
  * @returns {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const mapStateToProps = state => ({
   shippingAddress: getCheckoutShippingAddress(state),
   billingAddress: getCheckoutBillingAddress(state)
@@ -115,30 +116,36 @@ const AddressList = ({
     }
     return null;
   }, [billingAddress, shippingAddress, type]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(ResponsiveBackButton, null), /*#__PURE__*/React.createElement("h1", {
-    className: styles.headline
-  }, title)), /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, contacts && contacts.map(contact => /*#__PURE__*/React.createElement(AddressCard, {
-    key: contact.id,
-    contact: contact,
-    selected: contact.id === selectedContactId,
-    selectContact: () => updateOrderWithContact(contact.id),
-    deleteContact: () => deleteContact(contact.id),
-    editContact: () => editContact(contact)
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles.actions
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: styles.button,
-    rippleClassName: styles.ripple,
-    type: "primary",
-    onClick: () => push({
-      pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)
-    })
-  }, i18n.text('account.profile.address_book.add'))));
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
+      webOnly: true,
+      breakpoint: ">xs",
+      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
+        className: styles.headline,
+        children: title
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.container,
+      children: contacts && contacts.map(contact => /*#__PURE__*/_jsx(AddressCard, {
+        contact: contact,
+        selected: contact.id === selectedContactId,
+        selectContact: () => updateOrderWithContact(contact.id),
+        deleteContact: () => deleteContact(contact.id),
+        editContact: () => editContact(contact)
+      }, contact.id))
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        className: styles.button,
+        rippleClassName: styles.ripple,
+        type: "primary",
+        onClick: () => push({
+          pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)
+        }),
+        children: i18n.text('account.profile.address_book.add')
+      })
+    })]
+  });
 };
 AddressList.defaultProps = {
   shippingAddress: null,

package/checkout/components/AddressBookContact/AddressBookContact.js

@@ -6,6 +6,7 @@ import { ResponsiveBackButton } from "../ResponsiveBackButton";
 import ProfileContact from "../../../account/components/ProfileContact";
 import AddressBookProvider from "../../providers/AddressBookProvider";
 import { ADDRESS_TYPE_BILLING } from "../../constants";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
   headline: css({
     padding: 16,
@@ -34,11 +35,17 @@ const AddressBookContact = () => {
     const mode = contact ? 'edit' : 'add';
     return i18n.text(`titles.checkout_addresses_${mode}_${type}`);
   }, [contact, type]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(ResponsiveBackButton, null), /*#__PURE__*/React.createElement("h1", {
-    className: styles.headline
-  }, title)), /*#__PURE__*/React.createElement(AddressBookProvider, null, /*#__PURE__*/React.createElement(ProfileContact, null)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
+      webOnly: true,
+      breakpoint: ">xs",
+      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
+        className: styles.headline,
+        children: title
+      })]
+    }), /*#__PURE__*/_jsx(AddressBookProvider, {
+      children: /*#__PURE__*/_jsx(ProfileContact, {})
+    })]
+  });
 };
 export default AddressBookContact;