@shopgate/pwa-ui-material 7.32.0-beta.1 → 7.32.0-beta.2

package/AppBar/index.js

@@ -12,11 +12,11 @@ import Center from "./components/Center";
 import Left from "./components/Left";
 import Below from "./components/Below";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   outer: {
     boxSizing: 'content-box',
     left: 0,
-    paddingTop: 'var(--safe-area-inset-top)',
+    paddingTop: theme.layout.safeArea.top,
     position: 'sticky',
     top: 0,
     width: '100%',
@@ -30,7 +30,7 @@ const useStyles = makeStyles()({
     position: 'relative',
     zIndex: 14
   }
-});
+}));
 
 /**
  * Updates the --app-bar-height custom property

package/BaseDialog/components/Title/index.js

@@ -1,12 +1,11 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { I18n, Ellipsis, Typography } from '@shopgate/engage/components';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   title: {
-    lineHeight: themeConfig.typography.lineHeight,
+    lineHeight: theme.typography.body2.lineHeight,
     paddingBottom: theme.spacing(1),
     marginTop: '-.25em'
   }

package/NavDrawer/components/Item/index.js

@@ -17,7 +17,7 @@ const useStyles = makeStyles()(theme => ({
     width: '1px',
     zIndex: -1000,
     '&:first-of-type': {
-      marginTop: 'calc(16px + var(--safe-area-inset-top))'
+      marginTop: `calc(16px + ${theme.layout.safeArea.top})`
     }
   },
   button: {
@@ -30,7 +30,7 @@ const useStyles = makeStyles()(theme => ({
     position: 'relative',
     width: '100%',
     '&:first-of-type': {
-      paddingTop: 'calc(16px + var(--safe-area-inset-top))'
+      paddingTop: `calc(16px + ${theme.layout.safeArea.top})`
     }
   },
   label: {

package/NavDrawer/index.js

@@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => ({
     fontSize: theme.typography.body2.fontSize,
     height: '100%',
     overflowY: 'scroll',
-    paddingBottom: 'var(--safe-area-inset-bottom)',
+    paddingBottom: theme.layout.safeArea.bottom,
     WebkitOverflowScrolling: 'touch'
   },
   drawer: {

package/SnackBar/index.js

@@ -11,7 +11,7 @@ const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     height: 'var(--snack-bar-height, 80px)',
-    bottom: 'max(var(--footer-height), var(--safe-area-inset-bottom))',
+    bottom: `max(var(--footer-height), ${theme.layout.safeArea.bottom})`,
     transition: 'bottom 0.3s ease',
     overflow: 'hidden',
     zIndex: 6,

package/icons/ShareIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 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;
+declare const ShareIcon: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default ShareIcon;
 //# sourceMappingURL=ShareIcon.d.ts.map

package/icons/ShareIcon.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"ShareIcon.d.ts","sourceRoot":"","sources":["../../icons/ShareIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBACI,CAAC;AAEzD,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.32.0-beta.1",
+  "version": "7.32.0-beta.2",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.0-beta.1",
+    "@shopgate/pwa-common": "7.32.0-beta.2",
     "@types/color": "^4.2.0",
     "@types/react-transition-group": "^4.4.12",
     "react": "^17.0.2",
@@ -19,7 +19,7 @@
     "prop-types": "~15.8.1",
     "react-spring": "^8.0.27",
     "react-transition-group": "^4.4.5",
-    "react-use": "^17.6.0"
+    "react-use": "^17.6.1"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0"