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

package/favorites/components/List/List.d.ts

@@ -0,0 +1,50 @@
+declare const _default: import("react-redux").ConnectedComponent<{
+    ({ id, name, items, rename, remove, removeItem, addToCart, hasMultipleFavoritesListsSupport, useGetFavoriteIdsPipeline, }: {
+        id: any;
+        name: any;
+        items: any;
+        rename: any;
+        remove: any;
+        removeItem: any;
+        addToCart: any;
+        hasMultipleFavoritesListsSupport: any;
+        useGetFavoriteIdsPipeline: any;
+    }): JSX.Element;
+    propTypes: {
+        addToCart: PropTypes.Validator<(...args: any[]) => any>;
+        id: PropTypes.Validator<string>;
+        items: PropTypes.Validator<(PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined)[]>;
+        name: PropTypes.Validator<string>;
+        remove: PropTypes.Validator<(...args: any[]) => any>;
+        removeItem: PropTypes.Validator<(...args: any[]) => any>;
+        rename: PropTypes.Validator<(...args: any[]) => any>;
+        hasMultipleFavoritesListsSupport: PropTypes.Requireable<boolean>;
+        useGetFavoriteIdsPipeline: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        hasMultipleFavoritesListsSupport: boolean;
+        useGetFavoriteIdsPipeline: boolean;
+    };
+}, {
+    id: string;
+    name: string;
+    remove: (...args: any[]) => any;
+    addToCart: (...args: any[]) => any;
+    removeItem: (...args: any[]) => any;
+    items: (PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined)[];
+    useGetFavoriteIdsPipeline?: boolean | null | undefined;
+    rename: (...args: any[]) => any;
+    hasMultipleFavoritesListsSupport?: boolean | null | undefined;
+    constructor: Function;
+    toString: () => string;
+    toLocaleString: () => string;
+    valueOf: () => Object;
+    hasOwnProperty: (v: PropertyKey) => boolean;
+    isPrototypeOf: (v: Object) => boolean;
+    propertyIsEnumerable: (v: PropertyKey) => boolean;
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+}>;
+export default _default;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=List.d.ts.map

package/favorites/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QA2EY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAxED,YAAY"}

package/favorites/components/List/List.js

@@ -1,21 +1,37 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { showModal } from '@shopgate/engage/core/actions';
 import { Accordion, Card, ConditionalWrapper } from '@shopgate/engage/components';
 import { makeGetFavorites, getUseGetFavoriteIdsPipeline } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import { FAVORITES_SHOW_LIMIT } from '@shopgate/engage/favorites/constants';
 import ListAccordionLabel from "./ListAccordionLabel";
 import ListContent from "./ListContent";
-import styles from "./styles";
 import ListAccordionHeader from "./ListAccordionHeader";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  root: {
+    margin: '8px 8px 10px'
+  },
+  rootNoFavoritesLists: {
+    background: colors.light,
+    flexGrow: 1,
+    paddingBottom: theme.spacing(1),
+    paddingLeft: '16px',
+    paddingRight: '16px'
+  }
+}));
 
 /**
  * @param {Object} _ State
  * @param {Object} props Props
  * @returns {Object}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const makeMapStateToProps = (_, {
   id
 }) => {
@@ -62,6 +78,9 @@ const FavoriteList = ({
   hasMultipleFavoritesListsSupport,
   useGetFavoriteIdsPipeline
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [offset, setOffset] = useState(FAVORITES_SHOW_LIMIT);
   const filteredItems = useMemo(() => {
     /**
@@ -102,11 +121,11 @@ const FavoriteList = ({
   return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: hasMultipleFavoritesListsSupport,
     wrapperFalsy: children => /*#__PURE__*/_jsx("div", {
-      className: styles.rootNoFavoritesLists,
+      className: classes.rootNoFavoritesLists,
       children: children
     }),
     wrapper: children => /*#__PURE__*/_jsx(Card, {
-      className: styles.root,
+      className: classes.root,
       children: /*#__PURE__*/_jsx(Accordion, {
         className: "",
         renderAdditionalHeaderContent: () => /*#__PURE__*/_jsx(ListAccordionHeader, {

package/favorites/components/List/ListAccordionHeader.d.ts

@@ -0,0 +1,23 @@
+export default ListAccordionHeader;
+/**
+ * Favorite List Accordion header component
+ * @param {Object} props The component props
+ * @param {Function} props.rename The rename function
+ * @param {Function} props.remove The remove function
+ * @param {string} props.id The label name
+ * @return {JSX.Element}
+ */
+declare function ListAccordionHeader({ rename, remove, id, }: {
+    rename: Function;
+    remove: Function;
+    id: string;
+}): JSX.Element;
+declare namespace ListAccordionHeader {
+    namespace propTypes {
+        let id: PropTypes.Validator<string>;
+        let remove: PropTypes.Validator<(...args: any[]) => any>;
+        let rename: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ListAccordionHeader.d.ts.map

package/favorites/components/List/ListAccordionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListAccordionHeader.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/ListAccordionHeader.jsx"],"names":[],"mappings":";AAMA;;;;;;;GAOG;AACH,8DALG;IAAwB,MAAM;IACN,MAAM;IACR,EAAE,EAAhB,MAAM;CACd,GAAS,GAAG,CAAC,OAAO,CAetB;;;;;;;;sBA1BqB,YAAY"}

package/favorites/components/List/ListAccordionLabel.d.ts

@@ -0,0 +1,14 @@
+export default ListAccordionLabel;
+/**
+ * Favorite List Accordion Label component
+ * @param {string} title The label name
+ * @return {JSX.Element}
+ */
+declare function ListAccordionLabel({ title, }: string): JSX.Element;
+declare namespace ListAccordionLabel {
+    namespace propTypes {
+        let title: PropTypes.Validator<string>;
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ListAccordionLabel.d.ts.map

package/favorites/components/List/ListAccordionLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListAccordionLabel.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/ListAccordionLabel.jsx"],"names":[],"mappings":";AAUA;;;;GAIG;AACH,gDAHW,MAAM,GACL,GAAG,CAAC,OAAO,CAYtB;;;;;;sBAxBqB,YAAY"}

package/favorites/components/List/ListAccordionLabel.js

@@ -1,17 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./styles";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  title: {
+    flex: 1
+  }
+});
 
 /**
  * Favorite List Accordion Label component
  * @param {string} title The label name
  * @return {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const ListAccordionLabel = ({
   title
-}) => /*#__PURE__*/_jsx("span", {
-  className: styles.title,
-  children: title
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("span", {
+    className: classes.title,
+    children: title
+  });
+};
 export default ListAccordionLabel;

package/favorites/components/List/ListContent.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=ListContent.d.ts.map

package/favorites/components/List/ListContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContent.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/ListContent.jsx"],"names":[],"mappings":";;kBAAkB,OAAO"}

package/favorites/components/List/ListContent.js

@@ -1,19 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ProductListTypeProvider, ProductProvider } from '@shopgate/engage/product/providers';
 import { RippleButton } from '@shopgate/engage/components';
 import { getUseGetFavoriteIdsPipeline } from '@shopgate/engage/favorites';
 import ListItemWrapper from "./ListItemWrapper";
-import styles from "./styles";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  divider: {
+    height: 1,
+    width: 'calc(100% + 32px)',
+    backgroundColor: 'rgb(234, 234, 234)',
+    marginLeft: -16,
+    marginRight: -16,
+    marginBottom: 16
+  },
+  loadMoreButton: {
+    width: 'calc(100% - 32px)',
+    margin: '16px 16px 0 16px',
+    borderRadius: 5
+  }
+});
 
 /**
  * @param {Object} state State
  * @param {Object} props Props
  * @returns {Object}
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const mapStateToProps = (state, props) => ({
   useGetFavoriteIdsPipeline: getUseGetFavoriteIdsPipeline(state, props)
 });
@@ -30,48 +45,53 @@ const ListContent = ({
   useGetFavoriteIdsPipeline,
   showLoadMoreButton,
   onLoadMore
-}) => /*#__PURE__*/_jsxs(_Fragment, {
-  children: [/*#__PURE__*/_jsx("div", {
-    className: styles.divider
-  }), items.length === 0 ? /*#__PURE__*/_jsx("span", {
-    children: i18n.text('favorites.empty')
-  }) : null, /*#__PURE__*/_jsxs(ProductListTypeProvider, {
-    type: "favoritesList",
-    children: [useGetFavoriteIdsPipeline ? items.map(({
-      productId
-    }, index) => /*#__PURE__*/_jsx(ProductProvider, {
-      productId: productId,
-      children: ({
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.divider
+    }), items.length === 0 ? /*#__PURE__*/_jsx("span", {
+      children: i18n.text('favorites.empty')
+    }) : null, /*#__PURE__*/_jsxs(ProductListTypeProvider, {
+      type: "favoritesList",
+      children: [useGetFavoriteIdsPipeline ? items.map(({
+        productId
+      }, index) => /*#__PURE__*/_jsx(ProductProvider, {
+        productId: productId,
+        children: ({
+          product
+        }) => product ? /*#__PURE__*/_jsx(ListItemWrapper, {
+          listId: listId,
+          product: product,
+          items: items,
+          addToCart: addToCart,
+          removeItem: removeItem,
+          index: index
+        }, product.id) : null
+      }, productId)) : null, !useGetFavoriteIdsPipeline && items.filter(({
         product
-      }) => product ? /*#__PURE__*/_jsx(ListItemWrapper, {
+      }) => product).map(({
+        product,
+        notes,
+        quantity
+      }, index) => /*#__PURE__*/_jsx(ListItemWrapper, {
         listId: listId,
         product: product,
+        notes: notes,
+        quantity: quantity,
         items: items,
         addToCart: addToCart,
         removeItem: removeItem,
         index: index
-      }, product.id) : null
-    }, productId)) : null, !useGetFavoriteIdsPipeline && items.filter(({
-      product
-    }) => product).map(({
-      product,
-      notes,
-      quantity
-    }, index) => /*#__PURE__*/_jsx(ListItemWrapper, {
-      listId: listId,
-      product: product,
-      notes: notes,
-      quantity: quantity,
-      items: items,
-      addToCart: addToCart,
-      removeItem: removeItem,
-      index: index
-    }, product.id))]
-  }), showLoadMoreButton && /*#__PURE__*/_jsx(RippleButton, {
-    type: "primary",
-    className: styles.loadMoreButton,
-    onClick: onLoadMore,
-    children: i18n.text('favorites.load_more_button')
-  })]
-});
+      }, product.id))]
+    }), showLoadMoreButton && /*#__PURE__*/_jsx(RippleButton, {
+      type: "primary",
+      className: classes.loadMoreButton,
+      onClick: onLoadMore,
+      children: i18n.text('favorites.load_more_button')
+    })]
+  });
+};
 export default connect(mapStateToProps)(ListContent);

package/favorites/components/List/ListItemWrapper.d.ts

@@ -0,0 +1,28 @@
+export default ListItemWrapper;
+/**
+ * Wrapper around the Item component to simplify item rendering based on the two different "items"
+ * lists within ListItemContent.
+ * @param {Object} props The component props
+ * @returns {JSX.Element}
+ */
+declare function ListItemWrapper({ listId, product, notes, quantity, addToCart, removeItem, items, index, }: Object): JSX.Element;
+declare namespace ListItemWrapper {
+    namespace propTypes {
+        let addToCart: PropTypes.Validator<(...args: any[]) => any>;
+        let index: PropTypes.Validator<number>;
+        let items: PropTypes.Validator<(PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined)[]>;
+        let listId: PropTypes.Validator<string>;
+        let product: PropTypes.Validator<NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>>;
+        let removeItem: PropTypes.Validator<(...args: any[]) => any>;
+        let notes: PropTypes.Requireable<string>;
+        let quantity: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        let notes_1: undefined;
+        export { notes_1 as notes };
+        let quantity_1: number;
+        export { quantity_1 as quantity };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ListItemWrapper.d.ts.map

package/favorites/components/List/ListItemWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemWrapper.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/ListItemWrapper.jsx"],"names":[],"mappings":";AAgBA;;;;;GAKG;AACH,6GAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAoCvB;;;;;;;;;;;;;;;;;;;sBAvDqB,YAAY"}

package/favorites/components/List/ListItemWrapper.js

@@ -1,7 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import Item from "../Item";
-import styles from "./styles";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  divider: {
+    height: 1,
+    width: 'calc(100% + 32px)',
+    backgroundColor: 'rgb(234, 234, 234)',
+    marginLeft: -16,
+    marginRight: -16,
+    marginBottom: 16
+  }
+});
 
 /**
  * Wrapper around the Item component to simplify item rendering based on the two different "items"
@@ -9,7 +20,6 @@ import styles from "./styles";
  * @param {Object} props The component props
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ListItemWrapper = ({
   listId,
   product,
@@ -19,27 +29,32 @@ const ListItemWrapper = ({
   removeItem,
   items,
   index
-}) => /*#__PURE__*/_jsxs("div", {
-  children: [/*#__PURE__*/_jsx(Item, {
-    product: product,
-    notes: notes,
-    quantity: quantity,
-    listId: listId,
-    productId: product.id,
-    addToCart: e => {
-      e.preventDefault();
-      e.stopPropagation();
-      return addToCart(product, quantity);
-    },
-    remove: e => {
-      e.preventDefault();
-      e.stopPropagation();
-      removeItem(product.id);
-    }
-  }), index === items.length - 1 ? null : /*#__PURE__*/_jsx("div", {
-    className: styles.divider
-  })]
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(Item, {
+      product: product,
+      notes: notes,
+      quantity: quantity,
+      listId: listId,
+      productId: product.id,
+      addToCart: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        return addToCart(product, quantity);
+      },
+      remove: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        removeItem(product.id);
+      }
+    }), index === items.length - 1 ? null : /*#__PURE__*/_jsx("div", {
+      className: classes.divider
+    })]
+  });
+};
 ListItemWrapper.defaultProps = {
   notes: undefined,
   quantity: 1

package/favorites/components/List/index.d.ts

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

package/favorites/components/List/index.d.ts.map

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

package/favorites/components/ListChooser/ListChooser.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { getFavoritesListState, getFavoritesLists } from '@shopgate/pwa-common-commerce/favorites/selectors';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { SheetList, SheetDrawer } from '@shopgate/engage/components';
 import { closeFavoritesListChooser } from '@shopgate/pwa-common-commerce/favorites/action-creators';
 import { toggleFavorite } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';

package/favorites/components/ListChooser/ListChooserItem.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { css } from 'glamor';
 import { makeIsProductOnSpecificFavoriteList } from '@shopgate/pwa-common-commerce/favorites/selectors';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSettings";
 
 /**
@@ -17,15 +17,15 @@ const makeMapStateToProps = () => {
     wishlistItemQuantityEnabled: getWishlistItemQuantityEnabled(state)
   });
 };
-const styles = {
-  remove: css({
-    color: 'var(--color-state-alert)'
-  }).toString(),
-  add: css({
-    color: 'var(--color-state-ok)',
+const useStyles = makeStyles()(theme => ({
+  remove: {
+    color: theme.palette.error.main
+  },
+  add: {
+    color: theme.palette.success.main,
     whiteSpace: 'noWrap'
-  }).toString()
-};
+  }
+}));
 
 /**
  * @param {Object} props Props.
@@ -35,20 +35,23 @@ const ListChooserItem = ({
   isOnList,
   wishlistItemQuantityEnabled
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (wishlistItemQuantityEnabled && isOnList) {
     return /*#__PURE__*/_jsx("span", {
-      className: styles.add,
+      className: classes.add,
       children: i18n.text('favorites.list_chooser.add_more')
     });
   }
   if (isOnList) {
     return /*#__PURE__*/_jsx("span", {
-      className: styles.remove,
+      className: classes.remove,
       children: i18n.text('favorites.list_chooser.remove')
     });
   }
   return /*#__PURE__*/_jsx("span", {
-    className: styles.add,
+    className: classes.add,
     children: i18n.text('favorites.list_chooser.add')
   });
 };

package/favorites/components/Lists/Lists.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=Lists.d.ts.map

package/favorites/components/Lists/Lists.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lists.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Lists/Lists.jsx"],"names":[],"mappings":";;kBAAqD,OAAO"}

package/favorites/components/Lists/Lists.js

@@ -1,10 +1,8 @@
 import React, { useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { css } from 'glamor';
 import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
-import { hasNewServices } from '@shopgate/engage/core/helpers';
-import { i18n } from '@shopgate/engage/core';
+import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { getFavoritesLists, isInitialLoading, getHasMultipleFavoritesListsSupport } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import addFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/addFavoritesList';
 import updateFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/updateFavoritesList';
@@ -16,7 +14,7 @@ import { openSheet } from '@shopgate/engage/locations/providers/FulfillmentProvi
 import { getWishlistMode } from '@shopgate/engage/core/selectors/shopSettings';
 import { WISHLIST_MODE_PERSIST_ON_ADD } from '@shopgate/engage/core/constants/shopSettings';
 import { getPreferredLocation, getPreferredFulfillmentMethod, getUserSearch } from '@shopgate/engage/locations/selectors';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { makeGetEnabledFulfillmentMethods } from '@shopgate/engage/core/config';
 import { fetchProductLocations } from '@shopgate/engage/locations/actions';
 import List from "../List";
@@ -26,8 +24,6 @@ import ItemFulfillmentMethod from "../ItemFulfillmentMethod";
 import { FAVORITES_LIST_ADD_BUTTON, FAVORITES_LIST } from "../../constants/Portals";
 
 /**
- * @param {Object} state State
- * @param {Object} props Props
  * @returns {Object}
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -57,18 +53,17 @@ const mapDispatchToProps = dispatch => ({
   addToCart: (...params) => dispatch(addProductsToCart.apply(void 0, params)),
   fetchLocations: (productId, params) => dispatch(fetchProductLocations(productId, params))
 });
-const styles = {
-  root: css({
+const useStyles = makeStyles()({
+  root: {
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
       margin: 8
     }
-  }),
-  addButton: css({
+  },
+  addButton: {
     width: 'calc(100% - 32px)',
     margin: 16,
-    backgroundColor: 'var(--color-primary)',
     borderRadius: 5,
     [responsiveMediaQuery('>=md', {
       webOnly: true
@@ -76,8 +71,8 @@ const styles = {
       width: 240,
       float: 'right'
     }
-  }).toString()
-};
+  }
+});
 
 /**
  * @param {Object} props Props
@@ -99,6 +94,9 @@ const FavoriteLists = ({
   fetchLocations,
   hasMultipleFavoritesListsSupport
 }) => {
+  const {
+    classes
+  } = useStyles();
   // Add to cart state.
   const promiseRef = useRef(null);
   const [activeProductId, setActiveProductId] = useState(null);
@@ -246,7 +244,7 @@ const FavoriteLists = ({
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: styles.root,
+    className: classes.root,
     children: [lists.map(list => /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: FAVORITES_LIST,
       portalProps: list,
@@ -275,7 +273,7 @@ const FavoriteLists = ({
       portalName: FAVORITES_LIST_ADD_BUTTON,
       children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(RippleButton, {
         type: "primary",
-        className: styles.addButton,
+        className: classes.addButton,
         onClick: openAddModal,
         disabled: false,
         children: i18n.text('favorites.add_list')

package/favorites/components/Lists/ListsModal.d.ts

@@ -0,0 +1,26 @@
+export default ListsModal;
+/**
+ * @param {Object} props Props
+ * @param {'add_list'|'rename_list'} [props.type] The modal type
+ * @param {Function} props.onConfirm The confirm handler
+ * @param {Function} props.onDismiss The dismiss handler
+ * @returns {JSX.Element}
+ */
+declare function ListsModal({ type, onConfirm, onDismiss }: {
+    type?: "add_list" | "rename_list" | undefined;
+    onConfirm: Function;
+    onDismiss: Function;
+}): JSX.Element;
+declare namespace ListsModal {
+    namespace propTypes {
+        let onConfirm: PropTypes.Validator<(...args: any[]) => any>;
+        let onDismiss: PropTypes.Validator<(...args: any[]) => any>;
+        let type: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let type_1: string;
+        export { type_1 as type };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ListsModal.d.ts.map

package/favorites/components/Lists/ListsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListsModal.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Lists/ListsModal.jsx"],"names":[],"mappings":";AAoBA;;;;;;GAMG;AACH,4DALG;IAAyC,IAAI;IACrB,SAAS;IACT,SAAS;CACjC,GAAU,GAAG,CAAC,OAAO,CAkDvB;;;;;;;;;;;;sBA1EqB,YAAY"}