@shopgate/pwa-ui-ios 7.30.0-alpha.10 → 7.30.0-alpha.12

package/AppBar/components/Below/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_BELOW, APP_BAR_BELOW_BEFORE, APP_BAR_BELOW_AFTER } from '@shopg
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Below({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "below"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_BELOW_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_BELOW
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_BELOW_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_BELOW_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_BELOW,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_BELOW_AFTER
+    })]
+  }, "below");
 }
 Below.defaultProps = {
   elements: null

package/AppBar/components/Center/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_CENTER, APP_BAR_CENTER_BEFORE, APP_BAR_CENTER_AFTER } from '@sh
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Center({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "center"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_CENTER_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_CENTER
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_CENTER_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_CENTER_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_CENTER,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_CENTER_AFTER
+    })]
+  }, "center");
 }
 Center.defaultProps = {
   elements: null

package/AppBar/components/Field/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styles from "./style";
@@ -5,11 +6,17 @@ import styles from "./style";
 /**
  * The AppBarField component.
  */
-class AppBarField extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let AppBarField = /*#__PURE__*/function (_PureComponent) {
+  function AppBarField() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(AppBarField, _PureComponent);
+  var _proto = AppBarField.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       fieldRef,
       onChange,
@@ -18,17 +25,19 @@ class AppBarField extends PureComponent {
     const {
       __
     } = this.context.i18n();
-    return /*#__PURE__*/React.createElement("form", {
+    return /*#__PURE__*/_jsx("form", {
       className: styles.form,
-      onSubmit: onSubmit
-    }, /*#__PURE__*/React.createElement("input", {
-      className: styles.field,
-      onChange: onChange,
-      placeholder: __('search.placeholder'),
-      ref: fieldRef
-    }));
-  }
-}
+      onSubmit: onSubmit,
+      children: /*#__PURE__*/_jsx("input", {
+        className: styles.field,
+        onChange: onChange,
+        placeholder: __('search.placeholder'),
+        ref: fieldRef
+      })
+    });
+  };
+  return AppBarField;
+}(PureComponent);
 AppBarField.defaultProps = {
   fieldRef: null,
   onChange: null,

package/AppBar/components/Icon/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styles from "./style";
@@ -6,11 +6,17 @@ import styles from "./style";
 /**
  * The AppBarIcon component.
  */
-class AppBarIcon extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let AppBarIcon = /*#__PURE__*/function (_PureComponent) {
+  function AppBarIcon() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(AppBarIcon, _PureComponent);
+  var _proto = AppBarIcon.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       background,
       badge: Badge,
@@ -22,7 +28,7 @@ class AppBarIcon extends PureComponent {
       'aria-label': ariaLabel,
       ...iconProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       onKeyDown: onClick,
       tabIndex: 0,
       role: "button",
@@ -34,14 +40,14 @@ class AppBarIcon extends PureComponent {
         background,
         color
       },
-      "data-test-id": testId
-    }, /*#__PURE__*/React.createElement(Icon, _extends({
-      key: "icon"
-    }, iconProps)), Badge && /*#__PURE__*/React.createElement(Badge, {
-      key: "badge"
-    }));
-  }
-}
+      "data-test-id": testId,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        ...iconProps
+      }, "icon"), Badge && /*#__PURE__*/_jsx(Badge, {}, "badge")]
+    });
+  };
+  return AppBarIcon;
+}(PureComponent);
 AppBarIcon.defaultProps = {
   'aria-hidden': false,
   'aria-label': null,

package/AppBar/components/Left/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_LEFT, APP_BAR_LEFT_BEFORE, APP_BAR_LEFT_AFTER } from '@shopgate
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Left({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "left"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_LEFT_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_LEFT
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_LEFT_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_LEFT_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_LEFT,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_LEFT_AFTER
+    })]
+  }, "left");
 }
 Left.defaultProps = {
   elements: null

package/AppBar/components/Right/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_RIGHT, APP_BAR_RIGHT_BEFORE, APP_BAR_RIGHT_AFTER } from '@shopg
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Right({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "right"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_RIGHT_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_RIGHT
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_RIGHT_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_RIGHT_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_RIGHT,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_RIGHT_AFTER
+    })]
+  }, "right");
 }
 Right.defaultProps = {
   elements: null

package/AppBar/components/Title/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -6,16 +7,22 @@ import styles from "./style";
 /**
  * The AppBarTitle component.
  */
-class AppBarTitle extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let AppBarTitle = /*#__PURE__*/function (_PureComponent) {
+  function AppBarTitle() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(AppBarTitle, _PureComponent);
+  var _proto = AppBarTitle.prototype;
   /**
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       title
     } = this.props;
     if (!title) return null;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: classNames(styles, 'theme__app-bar__title'),
       role: "heading",
       "aria-level": "1",
@@ -26,6 +33,7 @@ class AppBarTitle extends PureComponent {
         __html: title
       }
     });
-  }
-}
+  };
+  return AppBarTitle;
+}(PureComponent);
 export default AppBarTitle;

package/AppBar/index.js

@@ -19,6 +19,7 @@ import styles from "./style";
  * Updates the --app-bar-height custom property
  * @param {Object} ref The app bar ref.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const updateAppBarHeight = ref => {
   if (!ref.current) {
     return;
@@ -59,25 +60,28 @@ const AppBar = ({
     };
   }, [contentRef, observer]);
   const sectionClasses = classnames(styles.outer, classes.outer, 'ui-ios__app-bar');
-  return /*#__PURE__*/React.createElement("section", {
+  return /*#__PURE__*/_jsxs("section", {
     className: sectionClasses,
     "data-test-id": "Navigator",
     style: style,
     "aria-hidden": ariaHidden,
-    ref: contentRef
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: APP_BAR_CONTENT
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.inner, classes.inner)
-  }, /*#__PURE__*/React.createElement(Left, {
-    elements: left
-  }), /*#__PURE__*/React.createElement(Center, {
-    elements: center
-  }), /*#__PURE__*/React.createElement(Right, {
-    elements: right
-  }))), /*#__PURE__*/React.createElement(Below, {
-    elements: below
-  }));
+    ref: contentRef,
+    children: [/*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: APP_BAR_CONTENT,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classnames(styles.inner, classes.inner),
+        children: [/*#__PURE__*/_jsx(Left, {
+          elements: left
+        }), /*#__PURE__*/_jsx(Center, {
+          elements: center
+        }), /*#__PURE__*/_jsx(Right, {
+          elements: right
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Below, {
+      elements: below
+    })]
+  });
 };
 AppBar.defaultProps = {
   'aria-hidden': null,

package/BaseDialog/components/Buttons/index.js

@@ -8,6 +8,7 @@ import styles from "../../style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Buttons = ({
   actions
 }) => actions.map(({
@@ -15,17 +16,17 @@ const Buttons = ({
   action,
   type = 'normal',
   disabled = false
-}) => /*#__PURE__*/React.createElement(Button, {
-  key: label,
+}) => /*#__PURE__*/_jsx(Button, {
   className: `${styles.button} ${type === 'primary' ? styles.buttonPrimary : ''}`,
   type: "primary",
   onClick: action,
   disabled: disabled,
-  flat: true
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  className: styles.buttonText,
-  string: label
-})));
+  flat: true,
+  children: /*#__PURE__*/_jsx(I18n.Text, {
+    className: styles.buttonText,
+    string: label
+  })
+}, label));
 Buttons.defaultProps = {
   actions: []
 };

package/BaseDialog/components/Buttons/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Button from '@shopgate/pwa-ui-shared/Button';
 import Buttons from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const actions = [{
   label: 'action0',
   action: jest.fn()
@@ -14,12 +15,12 @@ const actions = [{
 }];
 describe('<Buttons />', () => {
   it('should not render if no actions are passed', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Buttons, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance()).toEqual(null);
   });
   it('should render buttons', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Buttons, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {
       actions: actions
     }));
     expect(wrapper).toMatchSnapshot();

package/BaseDialog/components/Content/index.js

@@ -6,16 +6,18 @@ import styles from "../../style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Content = ({
   content
 }) => {
   if (!content) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: styles.body,
-    id: "basicDialogDesc"
-  }, content);
+    id: "basicDialogDesc",
+    children: content
+  });
 };
 Content.defaultProps = {
   content: null

package/BaseDialog/components/Content/spec.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Content from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Content />', () => {
   it('should not render if no content is passed', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Content, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance()).toEqual(null);
   });
   it('should render content components', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Content, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {
       content: "Hello World"
     }));
     expect(wrapper).toMatchSnapshot();

package/BaseDialog/components/Title/index.js

@@ -8,22 +8,25 @@ import styles from "../../style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Title = ({
   title
 }) => {
   if (!title) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: styles.title,
     id: "basicDialogTitle",
     role: "heading",
-    "aria-level": "2"
-  }, /*#__PURE__*/React.createElement(Ellipsis, {
-    rows: 3
-  }, typeof title === 'string' ? /*#__PURE__*/React.createElement(I18n.Text, {
-    string: title
-  }) : title));
+    "aria-level": "2",
+    children: /*#__PURE__*/_jsx(Ellipsis, {
+      rows: 3,
+      children: typeof title === 'string' ? /*#__PURE__*/_jsx(I18n.Text, {
+        string: title
+      }) : title
+    })
+  });
 };
 Title.defaultProps = {
   title: null

package/BaseDialog/components/Title/spec.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Title from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Title />', () => {
   it('should not render without a title', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Title, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance()).toEqual(null);
   });
   it('should render with a title', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Title, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {
       title: "Some test title"
     }));
     expect(wrapper).toMatchSnapshot();

package/BaseDialog/index.js

@@ -15,27 +15,33 @@ import styles from "./style";
  * @param {string | ReactNode} props.title The title of the dialog.
  * @return {JSX.Element} The rendered dialog.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicDialog = ({
   children,
   actions,
   title
-}) => /*#__PURE__*/React.createElement(FocusTrap, null, /*#__PURE__*/React.createElement("div", {
-  className: `${styles.container} ui-ios__base-dialog`,
-  "data-test-id": "basicDialog",
-  role: "alertdialog",
-  "aria-modal": true,
-  "aria-labelledby": "basicDialogTitle basicDialogDesc"
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles.content
-}, /*#__PURE__*/React.createElement(Title, {
-  title: title
-}), /*#__PURE__*/React.createElement(Content, {
-  content: children
-})), /*#__PURE__*/React.createElement("div", {
-  className: styles.actions
-}, /*#__PURE__*/React.createElement(Buttons, {
-  actions: actions
-}))));
+}) => /*#__PURE__*/_jsx(FocusTrap, {
+  children: /*#__PURE__*/_jsxs("div", {
+    className: `${styles.container} ui-ios__base-dialog`,
+    "data-test-id": "basicDialog",
+    role: "alertdialog",
+    "aria-modal": true,
+    "aria-labelledby": "basicDialogTitle basicDialogDesc",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.content,
+      children: [/*#__PURE__*/_jsx(Title, {
+        title: title
+      }), /*#__PURE__*/_jsx(Content, {
+        content: children
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx(Buttons, {
+        actions: actions
+      })
+    })]
+  })
+});
 BasicDialog.defaultProps = {
   children: null,
   actions: [],

package/BaseDialog/spec.js

@@ -4,9 +4,12 @@ import Title from "./components/Title";
 import Content from "./components/Content";
 import Buttons from "./components/Buttons";
 import BasicDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const props = {
   title: 'Hello World',
-  children: /*#__PURE__*/React.createElement("div", null, "Hello World"),
+  children: /*#__PURE__*/_jsx("div", {
+    children: "Hello World"
+  }),
   actions: [{
     label: 'action0',
     action: jest.fn()
@@ -21,13 +24,15 @@ const props = {
 jest.mock('@shopgate/engage/a11y/components');
 describe('<BasicDialog />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(BasicDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
       actions: []
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as expected', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(BasicDialog, props));
+    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
+      ...props
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Title).length).toBe(1);
     expect(wrapper.find(Title).props().title).toEqual(props.title);

package/icons/CartIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const CartIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.cart
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const CartIcon = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.cart,
+  ...props
+});
 export default CartIcon;

package/icons/FilterIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const Filter = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.filter
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const Filter = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.filter,
+  ...props
+});
 export default Filter;

package/icons/HomeIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const Home = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.home
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const Home = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.home,
+  ...props
+});
 export default Home;

package/icons/ShareIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const ShareIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.share
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const ShareIcon = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.share,
+  ...props
+});
 export default ShareIcon;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@shopgate/pwa-ui-ios",
-  "version": "7.30.0-alpha.10",
+  "version": "7.30.0-alpha.12",
   "description": "Shopgate's iOS UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.30.0-alpha.10",
-    "react": "~16.14.0"
+    "@shopgate/pwa-common": "7.30.0-alpha.12",
+    "react": "^17.0.2"
   },
   "peerDependencies": {
-    "react": "~16.14.0"
+    "react": "^16.0.0 || ^17.0.0"
   }
 }