@shopgate/pwa-ui-ios 7.30.3 → 7.31.0-alpha.1

package/AppBar/components/Field/index.js

@@ -1,49 +1,47 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  form: {
+    display: 'flex',
+    flexGrow: 1
+  },
+  field: {
+    outline: 0,
+    padding: '0 16px',
+    width: '100%'
+  }
+});
 
 /**
  * The AppBarField component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-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}
-   */
-  _proto.render = function render() {
-    const {
-      fieldRef,
-      onChange,
-      onSubmit
-    } = this.props;
-    const {
-      __
-    } = this.context.i18n();
-    return /*#__PURE__*/_jsx("form", {
-      className: styles.form,
-      onSubmit: onSubmit,
-      children: /*#__PURE__*/_jsx("input", {
-        className: styles.field,
-        onChange: onChange,
-        placeholder: __('search.placeholder'),
-        ref: fieldRef
-      })
-    });
-  };
-  return AppBarField;
-}(PureComponent);
+const AppBarField = ({
+  fieldRef,
+  onChange,
+  onSubmit
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("form", {
+    className: classes.form,
+    onSubmit: onSubmit,
+    children: /*#__PURE__*/_jsx("input", {
+      className: classes.field,
+      onChange: onChange,
+      placeholder: i18n.text('search.placeholder'),
+      ref: fieldRef
+    })
+  });
+};
 AppBarField.defaultProps = {
   fieldRef: null,
   onChange: null,
   onSubmit: null
 };
-AppBarField.contextTypes = {
-  i18n: PropTypes.func
-};
 export default AppBarField;

package/AppBar/components/Icon/index.js

@@ -1,53 +1,62 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  root: {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    flexShrink: 0,
+    fontSize: 24,
+    height: 44,
+    justifyContent: 'center',
+    outline: 0,
+    padding: 0,
+    position: 'relative',
+    width: 44,
+    zIndex: 1
+  }
+});
 
 /**
  * The AppBarIcon component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-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}
-   */
-  _proto.render = function render() {
-    const {
+const AppBarIcon = props => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    background,
+    badge: Badge,
+    color,
+    icon: Icon,
+    onClick,
+    testId,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    ...iconProps
+  } = props;
+  return /*#__PURE__*/_jsxs("div", {
+    onKeyDown: onClick,
+    tabIndex: 0,
+    role: "button",
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    className: classes.root,
+    onClick: onClick,
+    style: {
       background,
-      badge: Badge,
-      color,
-      icon: Icon,
-      onClick,
-      testId,
-      'aria-hidden': ariaHidden,
-      'aria-label': ariaLabel,
+      color
+    },
+    "data-test-id": testId,
+    children: [/*#__PURE__*/_jsx(Icon, {
       ...iconProps
-    } = this.props;
-    return /*#__PURE__*/_jsxs("div", {
-      onKeyDown: onClick,
-      tabIndex: 0,
-      role: "button",
-      "aria-hidden": ariaHidden,
-      "aria-label": ariaLabel,
-      className: styles,
-      onClick: onClick,
-      style: {
-        background,
-        color
-      },
-      "data-test-id": testId,
-      children: [/*#__PURE__*/_jsx(Icon, {
-        ...iconProps
-      }, "icon"), Badge && /*#__PURE__*/_jsx(Badge, {}, "badge")]
-    });
-  };
-  return AppBarIcon;
-}(PureComponent);
+    }, "icon"), Badge && /*#__PURE__*/_jsx(Badge, {}, "badge")]
+  });
+};
 AppBarIcon.defaultProps = {
   'aria-hidden': false,
   'aria-label': null,

package/AppBar/components/Title/index.js

@@ -1,39 +1,51 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  root: {
+    fontSize: 17,
+    fontWeight: 600,
+    flexGrow: 1,
+    lineHeight: '44px',
+    left: 90,
+    overflow: 'hidden',
+    position: 'absolute',
+    right: 90,
+    textAlign: 'center',
+    textOverflow: 'ellipsis',
+    top: 0,
+    whiteSpace: 'nowrap'
+  }
+});
 
 /**
  * The AppBarTitle component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element|null}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let AppBarTitle = /*#__PURE__*/function (_PureComponent) {
-  function AppBarTitle() {
-    return _PureComponent.apply(this, arguments) || this;
+const AppBarTitle = ({
+  title
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  if (!title) {
+    return null;
   }
-  _inheritsLoose(AppBarTitle, _PureComponent);
-  var _proto = AppBarTitle.prototype;
-  /**
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      title
-    } = this.props;
-    if (!title) return null;
-    return /*#__PURE__*/_jsx("div", {
-      className: classNames(styles, 'theme__app-bar__title'),
-      role: "heading",
-      "aria-level": "1",
-      "aria-live": "polite",
-      tabIndex: -1,
-      "data-test-id": `title: ${title}`,
-      dangerouslySetInnerHTML: {
-        __html: title
-      }
-    });
-  };
-  return AppBarTitle;
-}(PureComponent);
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.root, 'theme__app-bar__title'),
+    role: "heading",
+    "aria-level": "1",
+    "aria-live": "polite",
+    tabIndex: -1,
+    "data-test-id": `title: ${title}`
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: title
+    }
+  });
+};
 export default AppBarTitle;

package/AppBar/index.js

@@ -1,9 +1,8 @@
 import React, { useMemo, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
 import { themeColors } from '@shopgate/pwa-common/helpers/config';
-import { setCSSCustomProp } from '@shopgate/engage/styles';
+import { makeStyles, setCSSCustomProp } from '@shopgate/engage/styles';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { APP_BAR_CONTENT } from '@shopgate/engage/core/constants';
 import Field from "./components/Field";
@@ -13,13 +12,25 @@ import Right from "./components/Right";
 import Center from "./components/Center";
 import Left from "./components/Left";
 import Below from "./components/Below";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  outer: {
+    boxSizing: 'content-box',
+    minHeight: 44,
+    paddingTop: 'var(--safe-area-inset-top)'
+  },
+  inner: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    position: 'relative',
+    zIndex: 1
+  }
+});
 
 /**
  * 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;
@@ -37,11 +48,15 @@ const AppBar = ({
   center,
   left,
   right,
-  classes,
+  classes: parentClasses,
   'aria-hidden': ariaHidden,
   backgroundColor,
   textColor
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const contentRef = useRef(null);
   const style = useMemo(() => ({
     background: backgroundColor,
@@ -59,7 +74,7 @@ const AppBar = ({
       observer.disconnect();
     };
   }, [contentRef, observer]);
-  const sectionClasses = classnames(styles.outer, classes.outer, 'ui-ios__app-bar');
+  const sectionClasses = cx(classes.outer, parentClasses.outer, 'ui-ios__app-bar');
   return /*#__PURE__*/_jsxs("section", {
     className: sectionClasses,
     "data-test-id": "Navigator",
@@ -69,7 +84,7 @@ const AppBar = ({
     children: [/*#__PURE__*/_jsx(SurroundPortals, {
       portalName: APP_BAR_CONTENT,
       children: /*#__PURE__*/_jsxs("div", {
-        className: classnames(styles.inner, classes.inner),
+        className: cx(classes.inner, parentClasses.inner),
         children: [/*#__PURE__*/_jsx(Left, {
           elements: left
         }), /*#__PURE__*/_jsx(Center, {

package/BaseDialog/components/Buttons/index.js

@@ -1,32 +1,69 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import Button from '@shopgate/pwa-ui-shared/Button';
-import styles from "../../style";
+import { I18n, Button } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const borderColor = 'rgba(0,0,0,0.2)';
+const useStyles = makeStyles()(theme => ({
+  button: {
+    '&& > *': {
+      color: 'var(--color-button-dialog-ios, #1a73e8)'
+    },
+    '&&': {
+      fontWeight: 400,
+      minWidth: '50%',
+      flexGrow: 1,
+      paddingTop: 10,
+      paddingBottom: 10
+    },
+    marginBottom: -1,
+    marginRight: theme.spacing(-0.5),
+    '&:not(:last-child)': {
+      borderRadius: '0 !important',
+      borderRight: `0.5px solid ${borderColor}`,
+      borderBottom: `0.5px solid ${borderColor}`
+    }
+  },
+  buttonPrimary: {
+    '&&': {
+      fontWeight: 400
+    }
+  },
+  buttonText: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'block'
+  }
+}));
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Buttons = ({
   actions
-}) => actions.map(({
-  label,
-  action,
-  type = 'normal',
-  disabled = false
-}) => /*#__PURE__*/_jsx(Button, {
-  className: `${styles.button} ${type === 'primary' ? styles.buttonPrimary : ''}`,
-  type: "primary",
-  onClick: action,
-  disabled: disabled,
-  flat: true,
-  children: /*#__PURE__*/_jsx(I18n.Text, {
-    className: styles.buttonText,
-    string: label
-  })
-}, label));
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return actions.map(({
+    label,
+    action,
+    type = 'normal',
+    disabled = false
+  }) => /*#__PURE__*/_jsx(Button, {
+    className: cx(classes.button, type === 'primary' && classes.buttonPrimary),
+    type: "primary",
+    onClick: action,
+    disabled: disabled,
+    flat: true,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      className: classes.buttonText,
+      string: label
+    })
+  }, label));
+};
 Buttons.defaultProps = {
   actions: []
 };

package/BaseDialog/components/Content/index.js

@@ -1,20 +1,33 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import styles from "../../style";
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  body: {
+    color: themeColors.dark,
+    flexGrow: 1,
+    fontSize: '13px',
+    textAlign: 'center',
+    overflow: 'auto'
+  }
+});
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Content = ({
   content
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (!content) {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.body,
+    className: classes.body,
     id: "basicDialogDesc",
     children: content
   });

package/BaseDialog/components/Title/index.js

@@ -1,22 +1,30 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "../../style";
+import { I18n, Ellipsis } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  title: {
+    textAlign: 'center',
+    fontWeight: 600
+  }
+});
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Title = ({
   title
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (!title) {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.title,
+    className: classes.title,
     id: "basicDialogTitle",
     role: "heading",
     "aria-level": "2",

package/BaseDialog/index.js

@@ -1,10 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FocusTrap } from '@shopgate/engage/a11y/components';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import Title from "./components/Title";
 import Content from "./components/Content";
 import Buttons from "./components/Buttons";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const outerGap = 40;
+const borderColor = 'rgba(0,0,0,0.2)';
+const useStyles = makeStyles()({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    width: 270,
+    maxHeight: `calc(100vh - ${outerGap * 2}px)`,
+    borderRadius: 14,
+    background: themeColors.lightTransparent,
+    backdropFilter: 'blur(20px)'
+  },
+  content: {
+    padding: '16px',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  actions: {
+    borderTop: `0.5px solid ${borderColor}`,
+    display: 'flex',
+    flexWrap: 'wrap'
+  }
+});
 
 /**
  * This component renders a basic dialog in Google Material Design.
@@ -15,33 +42,38 @@ 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__*/_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
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx(FocusTrap, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cx(classes.container, 'ui-ios__base-dialog'),
+      "data-test-id": "basicDialog",
+      role: "alertdialog",
+      "aria-modal": true,
+      "aria-labelledby": "basicDialogTitle basicDialogDesc",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.content,
+        children: [/*#__PURE__*/_jsx(Title, {
+          title: title
+        }), /*#__PURE__*/_jsx(Content, {
+          content: children
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.actions,
+        children: /*#__PURE__*/_jsx(Buttons, {
+          actions: actions
+        })
       })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: styles.actions,
-      children: /*#__PURE__*/_jsx(Buttons, {
-        actions: actions
-      })
-    })]
-  })
-});
+    })
+  });
+};
 BasicDialog.defaultProps = {
   children: null,
   actions: [],

package/icons/CartIcon.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '@shopgate/pwa-common/components/Icon';
+/**
+ * The cart icon component.
+ */
+declare const CartIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+export default CartIcon;
+//# sourceMappingURL=CartIcon.d.ts.map

package/icons/CartIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartIcon.d.ts","sourceRoot":"","sources":["../../icons/CartIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACI,CAAC;AAExD,eAAe,QAAQ,CAAC"}

package/icons/CartIcon.js

@@ -1,11 +1,8 @@
-import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 
 /**
  * The cart icon component.
- * @param {Object} props The icon component properties.
- * @returns {JSX}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const CartIcon = props => /*#__PURE__*/_jsx(Icon, {

package/icons/FilterIcon.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '@shopgate/pwa-common/components/Icon';
+/**
+ * The filter icon component.
+ */
+declare const Filter: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+export default Filter;
+//# sourceMappingURL=FilterIcon.d.ts.map

package/icons/FilterIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterIcon.d.ts","sourceRoot":"","sources":["../../icons/FilterIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAE1D,eAAe,MAAM,CAAC"}

package/icons/FilterIcon.js

@@ -4,8 +4,6 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 
 /**
  * The filter icon component.
- * @param {Object} props The icon component properties.
- * @returns {JSX}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const Filter = props => /*#__PURE__*/_jsx(Icon, {

package/icons/HomeIcon.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '@shopgate/pwa-common/components/Icon';
+/**
+ * The home icon component.
+ */
+declare const Home: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+export default Home;
+//# sourceMappingURL=HomeIcon.d.ts.map

package/icons/HomeIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomeIcon.d.ts","sourceRoot":"","sources":["../../icons/HomeIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGtE;;GAEG;AACH,QAAA,MAAM,IAAI,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CAE9C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/icons/HomeIcon.js

@@ -4,8 +4,6 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 
 /**
  * The home icon component.
- * @param {Object} props The icon component properties.
- * @returns {JSX}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const Home = props => /*#__PURE__*/_jsx(Icon, {

package/icons/ShareIcon.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '@shopgate/pwa-common/components/Icon';
+/**
+ * The Share icon component.
+ */
+declare const ShareIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+export default ShareIcon;
+//# sourceMappingURL=ShareIcon.d.ts.map

package/icons/ShareIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareIcon.d.ts","sourceRoot":"","sources":["../../icons/ShareIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACI,CAAC;AAEzD,eAAe,SAAS,CAAC"}

package/icons/ShareIcon.js

@@ -4,8 +4,6 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 
 /**
  * The Share icon component.
- * @param {Object} props The icon component properties.
- * @returns {JSX}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const ShareIcon = props => /*#__PURE__*/_jsx(Icon, {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-ios",
-  "version": "7.30.3",
+  "version": "7.31.0-alpha.1",
   "description": "Shopgate's iOS UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.30.3",
+    "@shopgate/pwa-common": "7.31.0-alpha.1",
     "react": "^17.0.2"
   },
   "peerDependencies": {

package/tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@shopgate/engage/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "."
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "**/*.spec.*",
+    "**/__tests__/**",
+    "**/__snapshots__/**",
+    "coverage"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@shopgate/engage/tsconfig.json",
+}

package/AppBar/components/Field/style.js

@@ -1,14 +0,0 @@
-import { css } from 'glamor';
-const form = css({
-  display: 'flex',
-  flexGrow: 1
-});
-const field = css({
-  outline: 0,
-  padding: '0 16px',
-  width: '100%'
-});
-export default {
-  form,
-  field
-};

package/AppBar/components/Icon/style.js

@@ -1,15 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  alignItems: 'center',
-  color: 'inherit',
-  display: 'flex',
-  flexShrink: 0,
-  fontSize: 24,
-  height: 44,
-  justifyContent: 'center',
-  outline: 0,
-  padding: 0,
-  position: 'relative',
-  width: 44,
-  zIndex: 1
-});

package/AppBar/components/Title/style.js

@@ -1,15 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  fontSize: 17,
-  fontWeight: 600,
-  flexGrow: 1,
-  lineHeight: '44px',
-  left: 90,
-  overflow: 'hidden',
-  position: 'absolute',
-  right: 90,
-  textAlign: 'center',
-  textOverflow: 'ellipsis',
-  top: 0,
-  whiteSpace: 'nowrap'
-});

package/AppBar/style.js

@@ -1,16 +0,0 @@
-import { css } from 'glamor';
-const outer = css({
-  boxSizing: 'content-box',
-  minHeight: 44,
-  paddingTop: 'var(--safe-area-inset-top)'
-}).toString();
-const inner = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  position: 'relative',
-  zIndex: 1
-}).toString();
-export default {
-  outer,
-  inner
-};

package/BaseDialog/style.js

@@ -1,80 +0,0 @@
-import { css } from 'glamor';
-import { themeColors, themeVariables } from '@shopgate/pwa-common/helpers/config';
-const outerGap = 40;
-const borderColor = 'rgba(0,0,0,0.2)';
-const container = css({
-  position: 'relative',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  width: 270,
-  maxHeight: `calc(100vh - ${outerGap * 2}px)`,
-  borderRadius: 14,
-  background: themeColors.lightTransparent,
-  backdropFilter: 'blur(20px)'
-}).toString();
-const content = css({
-  padding: '16px',
-  display: 'flex',
-  flexDirection: 'column'
-}).toString();
-const title = css({
-  textAlign: 'center',
-  fontWeight: 600
-}).toString();
-const body = css({
-  color: themeColors.dark,
-  flexGrow: 1,
-  fontSize: '13px',
-  textAlign: 'center',
-  overflow: 'auto'
-}).toString();
-const actions = css({
-  borderTop: `0.5px solid ${borderColor}`,
-  display: 'flex',
-  flexWrap: 'wrap'
-}).toString();
-const button = css({
-  '&& > *': {
-    color: 'var(--color-button-dialog-ios, #1a73e8)'
-  },
-  // Increases specificity to allow button customization.
-  '&&': {
-    fontWeight: 400,
-    minWidth: '50%',
-    flexGrow: 1,
-    paddingTop: 10,
-    paddingBottom: 10
-  },
-  /*
-   * Due to overflow hidden this will cause the bottom border to be
-   * not visible in vertical button mode.
-   */
-  marginBottom: -1,
-  marginRight: `-${themeVariables.gap.small / 2}px`,
-  '&:not(:last-child)': {
-    borderRadius: '0 !important',
-    borderRight: `0.5px solid ${borderColor}`,
-    borderBottom: `0.5px solid ${borderColor}`
-  }
-}).toString();
-const buttonPrimary = css({
-  '&&': {
-    fontWeight: 400
-  }
-}).toString();
-const buttonText = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  display: 'block'
-}).toString();
-export default {
-  container,
-  content,
-  title,
-  body,
-  actions,
-  button,
-  buttonPrimary,
-  buttonText
-};