@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.1

package/a11y/components/LiveMessage/index.js

@@ -1,7 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { I18n } from "../../../components";
-import styles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  hiddenLiveRegion: {
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    margin: 0,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+    zIndex: -1000
+  }
+});
 
 /**
  * The LiveMessage component can be used to broadcast "aria-live" messages to assistive technology.
@@ -10,20 +24,24 @@ import styles from "./styles";
  * @param {string} 'aria-live' The aria-live type.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const LiveMessage = ({
   message,
   params,
   'aria-live': ariaLive
-}) => /*#__PURE__*/_jsx("div", {
-  className: styles,
-  role: "log",
-  "aria-live": ariaLive,
-  children: /*#__PURE__*/_jsx(I18n.Text, {
-    string: message,
-    params: params
-  })
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.hiddenLiveRegion,
+    role: "log",
+    "aria-live": ariaLive,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: message,
+      params: params
+    })
+  });
+};
 LiveMessage.defaultProps = {
   'aria-live': 'polite',
   params: null

package/a11y/components/Navigation/index.js

@@ -1,30 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { Link, I18n } from '@shopgate/engage/components';
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  hiddenNavigation: {
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    margin: 0,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+    zIndex: -1000
+  }
+});
 
 /**
  * @param {Object} props component props.
  * @param {string} props.title Navigation title.
  * @param {Array} props.entries Navigation entries.
- * @param {Object} context  The component context.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Navigation = ({
   title,
   entries
-}, context) => {
+}) => {
   const {
-    __
-  } = context.i18n();
+    classes
+  } = useStyles();
   if (!entries || !entries.length) {
     return null;
   }
   return /*#__PURE__*/_jsx("nav", {
-    "aria-label": title ? __(title) : null,
+    "aria-label": title ? i18n.text(title) : null,
     children: /*#__PURE__*/_jsx("ul", {
-      className: styles,
+      className: classes.hiddenNavigation,
       children: entries.map(({
         title: entryTitle,
         link
@@ -43,7 +56,4 @@ Navigation.defaultProps = {
   title: null,
   entries: []
 };
-Navigation.contextTypes = {
-  i18n: PropTypes.func
-};
 export default Navigation;

package/a11y/components/VisuallyHidden/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-const styles = {
-  root: css({
+import { makeStyles } from '@shopgate/engage/styles';
+const useStyles = makeStyles()({
+  root: {
     position: 'absolute !important',
     height: '1px',
     width: '1px',
     overflow: 'hidden',
     clip: 'rect(1px, 1px, 1px, 1px)',
     whiteSpace: 'nowrap'
-  })
-};
+  }
+});
 
 /**
  * This component surrounds its children with a wrapper that takes care that they are not visible
@@ -23,9 +23,14 @@ const styles = {
 const VisuallyHidden = ({
   tag = 'span',
   children
-}) => /*#__PURE__*/React.createElement(tag, {
-  className: styles.root
-}, children);
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/React.createElement(tag, {
+    className: classes.root
+  }, children);
+};
 VisuallyHidden.defaultProps = {
   tag: 'span'
 };

package/a11y/styles.js

@@ -1,16 +1,18 @@
-import { css } from 'glamor';
+import { injectGlobal } from '@shopgate/engage/styles';
 
 // global class for screen readers only, visually hidden
-css.global('.sr-only', {
-  border: '0',
-  clip: 'rect(0 0 0 0)',
-  height: '1px',
-  margin: '-1px',
-  overflow: 'hidden',
-  padding: '0',
-  position: 'absolute',
-  width: '1px',
-  whiteSpace: 'nowrap',
-  top: 0,
-  left: 0
+injectGlobal({
+  '.sr-only': {
+    border: '0',
+    clip: 'rect(0 0 0 0)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0',
+    position: 'absolute',
+    width: '1px',
+    whiteSpace: 'nowrap',
+    top: 0,
+    left: 0
+  }
 });

package/account/actions/deleteContact.d.ts

@@ -0,0 +1,2 @@
+export function deleteCustomerContact(contactId: Object): Function;
+//# sourceMappingURL=deleteContact.d.ts.map

package/account/actions/deleteContact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deleteContact.d.ts","sourceRoot":"","sources":["../../../account/actions/deleteContact.js"],"names":[],"mappings":"AAYO,iDAHI,MAAM,YAwBhB"}

package/account/actions/deleteCustomer.d.ts

@@ -0,0 +1,2 @@
+export function deleteCustomer(): Function;
+//# sourceMappingURL=deleteCustomer.d.ts.map

package/account/actions/deleteCustomer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deleteCustomer.d.ts","sourceRoot":"","sources":["../../../account/actions/deleteCustomer.js"],"names":[],"mappings":"AAYO,2CAkBN"}

package/account/actions/fetchContacts.d.ts

@@ -0,0 +1,2 @@
+export function fetchCustomerContacts(): Function;
+//# sourceMappingURL=fetchContacts.d.ts.map

package/account/actions/fetchContacts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchContacts.d.ts","sourceRoot":"","sources":["../../../account/actions/fetchContacts.js"],"names":[],"mappings":"AAWO,kDAqBN"}

package/account/actions/fetchCustomer.d.ts

@@ -0,0 +1,2 @@
+export function fetchCustomerData(): Function;
+//# sourceMappingURL=fetchCustomer.d.ts.map

package/account/actions/fetchCustomer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchCustomer.d.ts","sourceRoot":"","sources":["../../../account/actions/fetchCustomer.js"],"names":[],"mappings":"AAYO,8CAsBN"}

package/account/actions/updateCustomer.d.ts

@@ -0,0 +1,2 @@
+export function updateCustomerData(customer: Object): Function;
+//# sourceMappingURL=updateCustomer.d.ts.map

package/account/actions/updateCustomer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateCustomer.d.ts","sourceRoot":"","sources":["../../../account/actions/updateCustomer.js"],"names":[],"mappings":"AAWO,6CAHI,MAAM,YA4BhB"}

package/account/components/Account/Account.connector.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<{
+    historyReplace: (params?: any, options?: {} | undefined) => void;
+}, {}>;
+export default _default;
+//# sourceMappingURL=Account.connector.d.ts.map

package/account/components/Account/Account.connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Account.connector.d.ts","sourceRoot":"","sources":["../../../../account/components/Account/Account.connector.js"],"names":[],"mappings":""}

package/account/components/Account/Account.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("react-redux").ConnectedComponent<{
+    ({ historyReplace }: {
+        historyReplace: any;
+    }): JSX;
+    propTypes: {
+        historyReplace: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}, {
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+}>;
+export default _default;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=Account.d.ts.map

package/account/components/Account/Account.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Account.d.ts","sourceRoot":"","sources":["../../../../account/components/Account/Account.jsx"],"names":[],"mappings":";;;QAwCa,GAAG;;;;;;;;;sBAvCM,YAAY"}

package/account/components/Account/Account.js

@@ -1,26 +1,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n, ResponsiveContainer } from '@shopgate/engage/components';
 import appConfig from '@shopgate/pwa-common/helpers/config';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { i18n, useRoute } from '@shopgate/engage/core';
-import { ResponsiveContainer } from '@shopgate/engage/components';
 import OrderHistory from "../../../orders/components/OrderHistory";
 import OrderHistoryProvider from "../../../orders/providers/OrderHistoryProvider";
 import { Tabs, Tab, TabPanel } from "../../../components/Tabs";
-import { tabs, title, tabPanel } from "./Account.style";
 import Lists from "../../../favorites/components/Lists";
 import connect from "./Account.connector";
 import { TabContext } from "../../../components/Tabs/TabContext";
 import Profile from "../Profile";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  title: {
+    fontSize: '1.5rem',
+    padding: theme.spacing(2)
+  },
+  tabs: {
+    width: '100%',
+    top: 0,
+    [responsiveMediaQuery('>xs', {
+      webOnly: true
+    })]: {
+      top: 64
+    },
+    [responsiveMediaQuery('<=xs', {
+      webOnly: true
+    })]: {
+      top: 56
+    },
+    position: 'sticky',
+    background: 'rgb(255, 255, 255)',
+    boxShadow: '2px 1px 6px rgba(0, 0, 0, 0.118), 2px 1px 4px rgba(0, 0, 0, 0.118)',
+    zIndex: 100
+  },
+  tabPanel: {
+    padding: theme.spacing(1)
+  }
+}));
 
 /**
  * The Tabs components
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Account = ({
   historyReplace
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     params: {
       tab = 'profile'
@@ -29,12 +58,12 @@ const Account = ({
   return /*#__PURE__*/_jsxs(TabContext, {
     value: tab,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: tabs,
+      className: classes.tabs,
       children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
         webOnly: true,
         breakpoint: ">xs",
         children: /*#__PURE__*/_jsx("div", {
-          className: title,
+          className: classes.title,
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: "titles.your_account"
           })
@@ -58,17 +87,17 @@ const Account = ({
         }) : null]
       })]
     }), /*#__PURE__*/_jsx(TabPanel, {
-      className: tabPanel,
+      className: classes.tabPanel,
       value: "profile",
       children: /*#__PURE__*/_jsx(Profile, {})
     }), /*#__PURE__*/_jsx(TabPanel, {
-      className: tabPanel,
+      className: classes.tabPanel,
       value: "orders",
       children: /*#__PURE__*/_jsx(OrderHistoryProvider, {
         children: /*#__PURE__*/_jsx(OrderHistory, {})
       })
     }), appConfig.hasFavorites ? /*#__PURE__*/_jsx(TabPanel, {
-      className: tabPanel,
+      className: classes.tabPanel,
       value: "wish-list",
       children: /*#__PURE__*/_jsx(Lists, {})
     }) : null]

package/account/components/Account/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Account } from "./Account";
+//# sourceMappingURL=index.d.ts.map

package/account/components/Account/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../account/components/Account/index.js"],"names":[],"mappings":""}

package/account/components/Profile/Profile.config.d.ts

@@ -0,0 +1,20 @@
+export default generateFormConfig;
+/**
+ * Generates form configuration.
+ * @param {Object} additionalOptions Options for the customer attributes creation helper
+ * @param {Array} additionalOptions.customerAttributes Customer attributes.
+ * @param {Array} additionalOptions.supportedCountries A list of supported countries.
+ * @param {Array} additionalOptions.countrySortOrder Sort order for supported countries.
+ * @param {Object} additionalOptions.userLocation User location for better phone picker defaults.
+ * @param {boolean} [additionalOptions.allowPleaseChoose] Allows please choose option for required
+ * attributes.
+ * @returns {Object}
+ */
+declare function generateFormConfig(additionalOptions: {
+    customerAttributes: any[];
+    supportedCountries: any[];
+    countrySortOrder: any[];
+    userLocation: Object;
+    allowPleaseChoose?: boolean | undefined;
+}): Object;
+//# sourceMappingURL=Profile.config.d.ts.map

package/account/components/Profile/Profile.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.config.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/Profile.config.js"],"names":[],"mappings":";AAGA;;;;;;;;;;GAUG;AACH,uDARG;IAAiC,kBAAkB;IAClB,kBAAkB;IAClB,gBAAgB;IACf,YAAY,EAAtC,MAAM;IACsB,iBAAiB;CAErD,GAAU,MAAM,CA8BjB"}

package/account/components/Profile/Profile.constraints.d.ts

@@ -0,0 +1,32 @@
+declare function _default(customerAttributes: any): {
+    constructor: Function;
+    toString(): string;
+    toLocaleString(): string;
+    valueOf(): Object;
+    hasOwnProperty(v: PropertyKey): boolean;
+    isPrototypeOf(v: Object): boolean;
+    propertyIsEnumerable(v: PropertyKey): boolean;
+    firstName: {
+        presence: {
+            message: string;
+            allowEmpty: boolean;
+        };
+    };
+    lastName: {
+        presence: {
+            message: string;
+            allowEmpty: boolean;
+        };
+    };
+    emailAddress: {
+        presence: {
+            message: string;
+            allowEmpty: boolean;
+        };
+        email: {
+            message: string;
+        };
+    };
+};
+export default _default;
+//# sourceMappingURL=Profile.constraints.d.ts.map

package/account/components/Profile/Profile.constraints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.constraints.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/Profile.constraints.js"],"names":[],"mappings":"AAEe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBb"}

package/account/components/Profile/Profile.d.ts

@@ -0,0 +1,4 @@
+export default Profile;
+/** @returns {JSX} */
+declare function Profile(): JSX;
+//# sourceMappingURL=Profile.d.ts.map

package/account/components/Profile/Profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/Profile.jsx"],"names":[],"mappings":";AAaA,qBAAqB;AACrB,4BADc,GAAG,CAchB"}

package/account/components/Profile/Profile.js

@@ -1,23 +1,26 @@
 import React, { useRef } from 'react';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import Provider from "./Profile.provider";
 import AddressBook from "./ProfileAddressBook";
 import Header from "./ProfileHeader";
 import Form from "./ProfileForm";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  root: css({
+const useStyles = makeStyles()({
+  root: {
     padding: 8
-  }).toString()
-};
+  }
+});
 
 /** @returns {JSX} */
 const Profile = () => {
+  const {
+    classes
+  } = useStyles();
   const formContainerRef = useRef(null);
   return /*#__PURE__*/_jsx(Provider, {
     formContainerRef: formContainerRef,
     children: /*#__PURE__*/_jsxs("div", {
-      className: styles.root,
+      className: classes.root,
       children: [/*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsx(Form, {
         ref: formContainerRef
       }), /*#__PURE__*/_jsx(AddressBook, {})]

package/account/components/Profile/Profile.provider.d.ts

@@ -0,0 +1,59 @@
+export function useProfileContext(): any[];
+declare const _default: import("react-redux").ConnectedComponent<{
+    ({ fetchContacts, deleteContact, fetchCustomer, updateCustomer, deleteCustomer, push, showDialog, contacts, customer, merchantCustomerAttributes, children, shopSettings, userLocation, formContainerRef, }: {
+        fetchContacts: any;
+        deleteContact: any;
+        fetchCustomer: any;
+        updateCustomer: any;
+        deleteCustomer: any;
+        push: any;
+        showDialog: any;
+        contacts: any;
+        customer: any;
+        merchantCustomerAttributes: any;
+        children: any;
+        shopSettings: any;
+        userLocation: any;
+        formContainerRef: any;
+    }): JSX;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        contacts: PropTypes.Validator<(PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined)[]>;
+        deleteContact: PropTypes.Validator<(...args: any[]) => any>;
+        deleteCustomer: PropTypes.Validator<(...args: any[]) => any>;
+        fetchContacts: PropTypes.Validator<(...args: any[]) => any>;
+        fetchCustomer: PropTypes.Validator<(...args: any[]) => any>;
+        merchantCustomerAttributes: PropTypes.Validator<(PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined)[]>;
+        push: PropTypes.Validator<(...args: any[]) => any>;
+        shopSettings: PropTypes.Validator<NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>>;
+        showDialog: PropTypes.Validator<(...args: any[]) => any>;
+        updateCustomer: PropTypes.Validator<(...args: any[]) => any>;
+        userLocation: PropTypes.Validator<NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>>;
+        customer: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
+        formContainerRef: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
+    };
+    defaultProps: {
+        customer: null;
+        formContainerRef: null;
+    };
+}, {
+    push: (...args: any[]) => any;
+    children: NonNullable<PropTypes.ReactNodeLike>;
+    userLocation: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
+    fetchContacts: (...args: any[]) => any;
+    deleteContact: (...args: any[]) => any;
+    fetchCustomer: (...args: any[]) => any;
+    updateCustomer: (...args: any[]) => any;
+    deleteCustomer: (...args: any[]) => any;
+    showDialog: (...args: any[]) => any;
+    contacts: (PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined)[];
+    customer?: PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined;
+    merchantCustomerAttributes: (PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined)[];
+    shopSettings: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
+    formContainerRef?: PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined;
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+}>;
+export default _default;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=Profile.provider.d.ts.map

package/account/components/Profile/Profile.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.provider.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/Profile.provider.jsx"],"names":[],"mappings":"AAoCO,2CAA0D;;;;;;;;;;;;;;;;;QA6BpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA9DM,YAAY"}

package/account/components/Profile/ProfileAddressBook.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("react-redux").ConnectedComponent<{
+    ({ push }: {
+        push: any;
+    }): JSX;
+    propTypes: {
+        push: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}, {
+    push: (...args: any[]) => any;
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+}>;
+export default _default;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ProfileAddressBook.d.ts.map

package/account/components/Profile/ProfileAddressBook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileAddressBook.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileAddressBook.jsx"],"names":[],"mappings":";;;QA4Da,GAAG;;;;;;;;;;sBA1DM,YAAY"}

package/account/components/Profile/ProfileAddressBook.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
 import { i18n, historyPush } from '@shopgate/engage/core';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { RippleButton } from '@shopgate/engage/components';
 import AddressCard from "./ProfileAddressCard";
 import { useProfileContext } from "./Profile.provider";
@@ -17,20 +16,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const mapDispatchToProps = dispatch => ({
   push: props => dispatch(historyPush(props))
 });
-const styles = {
-  title: css({
-    color: 'var(--color-text-high-emphasis)',
+const useStyles = makeStyles()(theme => ({
+  title: {
+    color: theme.palette.text.primary,
     lineHeight: 2.5,
     fontSize: 17,
     fontWeight: '600'
-  }).toString(),
-  container: css({
+  },
+  container: {
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
     margin: -4
-  }).toString(),
-  button: css({
+  },
+  button: {
     '&&': {
       marginTop: 8,
       marginRight: 16,
@@ -46,11 +45,11 @@ const styles = {
         marginRight: 0
       }
     }
-  }).toString(),
-  ripple: css({
+  },
+  ripple: {
     padding: '8px 16px'
-  }).toString(),
-  actions: css({
+  },
+  actions: {
     display: 'flex',
     justifyContent: 'flex-end',
     flexDirection: 'row',
@@ -59,8 +58,8 @@ const styles = {
     })]: {
       flex: 1
     }
-  }).toString()
-};
+  }
+}));
 
 /**
  * @returns {JSX}
@@ -68,6 +67,9 @@ const styles = {
 const ProfileAddressBook = ({
   push
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     contacts,
     deleteContact,
@@ -75,20 +77,20 @@ const ProfileAddressBook = ({
   } = useProfileContext();
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx("span", {
-      className: styles.title,
+      className: classes.title,
       children: i18n.text('account.profile.address_book.title')
     }), /*#__PURE__*/_jsx("div", {
-      className: styles.container,
+      className: classes.container,
       children: contacts && contacts.map(contact => /*#__PURE__*/_jsx(AddressCard, {
         contact: contact,
         deleteContact: () => deleteContact(contact.id),
         editContact: () => editContact(contact)
       }, contact.id))
     }), /*#__PURE__*/_jsx("div", {
-      className: styles.actions,
+      className: classes.actions,
       children: /*#__PURE__*/_jsx(RippleButton, {
-        className: styles.button,
-        rippleClassName: styles.ripple,
+        className: classes.button,
+        rippleClassName: classes.ripple,
         type: "primary",
         onClick: () => push({
           pathname: PROFILE_ADDRESS_PATH