@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.2

package/product/components/Characteristics/Characteristic/index.js

@@ -2,19 +2,15 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
-import { ResponsiveContainer, ArrowDropIcon } from '@shopgate/engage/components';
+import { ResponsiveContainer, ArrowDropIcon, Typography } from '@shopgate/engage/components';
 import { withStyles, cx } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import Sheet from "./components/Sheet";
 import transition from "../transition";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors: themeColors
-} = themeConfig;
 
 /**
  * A single characteristic.
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 let Characteristic = /*#__PURE__*/function (_PureComponent) {
   /**
    * @param {Object} props The component props
@@ -103,7 +99,9 @@ let Characteristic = /*#__PURE__*/function (_PureComponent) {
         ref: charRef,
         style: transition[state],
         "data-test-id": label,
-        children: [selected && /*#__PURE__*/_jsx("div", {
+        children: [selected && /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
           className: `${classes.label} theme__product__characteristic__label`,
           children: label
         }), /*#__PURE__*/_jsx("div", {
@@ -183,7 +181,7 @@ Characteristic.defaultProps = {
 };
 export default withStyles(Characteristic, theme => ({
   button: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     color: theme.palette.text.primary,
     position: 'relative',
     cursor: 'pointer',
@@ -197,20 +195,19 @@ export default withStyles(Characteristic, theme => ({
     transition: 'background 250ms ease-in, color 250ms ease-in'
   },
   buttonDisabled: {
-    color: `${themeColors.shade4} !important`
+    color: `${theme.palette.grey.medium} !important`
   },
   label: {
-    fontSize: 12,
     marginTop: -2,
     marginBottom: 4
   },
   selection: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   },
   arrow: {
     position: 'absolute',
     right: 32,
-    fontSize: 20
+    fontSize: theme.components.icon.small
   }
 }));

package/product/components/Characteristics/Swatch/index.js

@@ -3,13 +3,9 @@ import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import { VariantSwatch } from '@shopgate/engage/product/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import transition from "../transition";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   label: {
     display: 'flex',
     flexDirection: 'column',
@@ -18,11 +14,11 @@ const useStyles = makeStyles()(() => ({
     outline: 0,
     padding: '12px 16px',
     transition: 'background 250ms ease-in, color 250ms ease-in',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   },
   labelDisabled: {
-    color: colors.shade4
+    color: theme.palette.action.disabled
   },
   items: {
     padding: '0 16px',

package/product/components/Characteristics/transition.js

@@ -1,10 +1,10 @@
 export default {
   entering: {
-    background: 'var(--color-primary)',
-    color: 'var(--color-primary-contrast)'
+    background: 'var(--sg-palette-primary-main)',
+    color: 'var(--sg-palette-primary-contrastText)'
   },
   entered: {
-    background: 'var(--color-primary)',
-    color: 'var(--color-primary-contrast)'
+    background: 'var(--sg-palette-primary-main)',
+    color: 'var(--sg-palette-primary-contrastText)'
   }
 };

package/product/components/Description/index.js

@@ -1,20 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n } from '@shopgate/engage/components';
+import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n, Typography } from '@shopgate/engage/components';
 import { PRODUCT_DESCRIPTION } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.875rem',
     padding: '0.8125rem 1rem 1rem'
   },
   title: {
-    fontSize: '1rem',
-    fontWeight: 500,
-    marginBottom: '0.5rem',
-    color: theme.palette.text.primary
+    marginBottom: '0.5rem'
   },
   content: {
     lineHeight: 1.7,
@@ -69,8 +65,11 @@ function Description({
     },
     children: html !== '' && /*#__PURE__*/_jsxs("div", {
       className: cx(classes.container, 'engage__product__description'),
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        component: "div",
         className: cx(classes.title, 'theme__description_heading'),
+        color: "textPrimary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.description_heading"
         })

package/product/components/EffectivityDates/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { I18n, TimeBoundary, SurroundPortals } from '@shopgate/engage/components';
+import { TimeBoundary, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { PRODUCT_EFFECTIVITY_DATES } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { showExpiringLabel, showScheduledLabel } from "./helpers";
 import connect from "./connector";
@@ -12,12 +13,10 @@ const useStyles = makeStyles()((theme, {
 }) => ({
   hint: {
     color: theme.palette.success.main,
-    fontSize: '0.75rem',
     ...(hintStyle || {})
   },
   notAvailable: {
-    color: theme.palette.error.main,
-    fontSize: '0.75rem'
+    color: theme.palette.error.main
   }
 }));
 
@@ -60,30 +59,37 @@ const EffectivityDates = ({
         after
       }) => {
         if (before) {
-          return showScheduledLabel(startDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
-            string: "product.available.at",
-            params: {
+          return showScheduledLabel(startDate, settings) ? /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            component: "span",
+            color: "success",
+            className: classes.hint,
+            children: i18n.text('product.available.at', {
               startDate
-            },
-            className: classes.hint
+            })
           }) : children;
         }
         if (between) {
           return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [children, showExpiringLabel(endDate, settings) && /*#__PURE__*/_jsx(I18n.Text, {
-              string: "product.available.until",
-              params: {
+            children: [children, showExpiringLabel(endDate, settings) && /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              component: "span",
+              color: "success",
+              className: classes.hint,
+              children: i18n.text('product.available.until', {
                 endDate
-              },
-              className: classes.hint
+              })
             })]
           });
         }
         if (after) {
           productNotAvailable();
-          return showExpiringLabel(endDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
-            string: "product.available.not",
-            className: cx(classes.hint, classes.notAvailable)
+          return showExpiringLabel(endDate, settings) ? /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            component: "span",
+            color: "error",
+            className: cx(classes.hint, classes.notAvailable),
+            children: i18n.text('product.available.not')
           }) : children;
         }
         return children;

package/product/components/FilterBar/components/Content/components/FilterButton/index.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { Grid, I18n, Ripple, FilterIcon } from '@shopgate/engage/components';
+import { Grid, I18n, Ripple, FilterIcon, Typography } from '@shopgate/engage/components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   button: {
     color: 'inherit',
-    fontSize: '1.5rem',
-    lineHeight: 1,
+    fontSize: theme.components.icon.medium,
     outline: 0,
     padding: 0,
-    minWidth: variables.navigator.height,
-    height: variables.filterbar.height,
+    minWidth: theme.components.navigator.height,
+    height: theme.components.filterBar.height,
     position: 'relative',
     zIndex: 1,
     overflow: 'hidden'
@@ -25,9 +20,6 @@ const useStyles = makeStyles()(theme => ({
   },
   filterButtonLabel: {
     alignSelf: 'center',
-    fontSize: '0.875rem',
-    fontWeight: '500',
-    lineHeight: 1,
     paddingRight: theme.spacing(1)
   },
   filterButtonRipple: {
@@ -66,7 +58,9 @@ function FilterButton({
         children: [/*#__PURE__*/_jsx(Grid.Item, {
           className: classes.filterButton,
           component: "div",
-          children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            component: "span",
             className: classes.filterButtonLabel,
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: "titles.filter"

package/product/components/FilterBar/components/Content/components/Sort/index.js

@@ -2,13 +2,8 @@ import React from 'react';
 import { SelectBox, ArrowDropIcon, SurroundPortals } from '@shopgate/engage/components';
 import { useSort, PORTAL_FILTER_SORT_OPTIONS } from '@shopgate/engage/filter';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Item from "./components/Item";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  shadows,
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   button: {
     color: 'inherit',
@@ -18,18 +13,17 @@ const useStyles = makeStyles()(theme => ({
     alignItems: 'center',
     textOverflow: 'ellipsis',
     justifyContent: 'center',
-    height: variables.filterbar.height,
+    height: theme.components.filterBar.height,
     whiteSpace: 'nowrap'
   },
   selection: {
-    fontSize: '0.875rem',
-    fontWeight: '500',
-    lineHeight: 1,
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     paddingTop: 1,
     alignSelf: 'center'
   },
   icon: {
-    fontSize: '1.5rem'
+    fontSize: theme.components.icon.medium
   },
   iconOpen: {
     transform: 'rotate(180deg)'
@@ -40,8 +34,8 @@ const useStyles = makeStyles()(theme => ({
     zIndex: 2,
     top: '100%',
     left: 0,
-    background: 'var(--color-background-accent)',
-    boxShadow: shadows.filter.sort,
+    background: theme.palette.background.emphasized,
+    boxShadow: 'rgba(0, 0, 0, 0.16) 0 2px 2px',
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
@@ -63,7 +57,7 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   selectItemSelected: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   selectBox: {
     flexGrow: 2

package/product/components/FilterBar/components/FilterModal/FilterModalContent.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useFilterPage } from '@shopgate/engage/filter/hooks';
 import FilterPageContent from '@shopgate/engage/filter/components/FilterPageContent';
 import Title from "./FilterModalTitle";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     zIndex: 1,
-    background: colors.light,
+    background: theme.palette.background.surface,
     borderRadius: 4,
     minWidth: 300,
     [responsiveMediaQuery('>=md')]: {
@@ -29,7 +25,7 @@ const useStyles = makeStyles()({
     overflow: 'auto',
     flex: 1
   }
-});
+}));
 
 /**
  * Filter modal content component

package/product/components/FilterBar/components/FilterModal/FilterModalTitle.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { Ripple, CrossIcon } from '@shopgate/engage/components';
+import { Ripple, CrossIcon, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     display: 'flex',
     flexDirection: 'row',
@@ -15,30 +15,29 @@ const useStyles = makeStyles()({
     paddingBottom: 16
   },
   title: {
-    flex: 1,
-    fontSize: '1.25rem'
+    flex: 1
   },
   closeButton: {
-    fontSize: 21,
+    fontSize: theme.components.icon.small,
     marginRight: 12,
     cursor: 'pointer',
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   },
   actionButton: {
     cursor: 'pointer',
     marginLeft: 16,
-    color: 'var(--color-primary)',
-    fontWeight: '600',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold,
     padding: 8
   },
   actionButtonSecondary: {
     cursor: 'pointer',
     marginLeft: 16,
-    color: 'var(--color-primary)',
-    fontWeight: '500',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightMedium,
     padding: 8
   }
-});
+}));
 
 /**
  * Filter Modal Title
@@ -59,7 +58,9 @@ const FilterModalTitle = ({
       onClick: close,
       className: classes.closeButton,
       children: /*#__PURE__*/_jsx(CrossIcon, {})
-    }), /*#__PURE__*/_jsx("span", {
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "span",
       className: classes.title,
       children: i18n.text('titles.filter')
     }), /*#__PURE__*/_jsx(Ripple, {

package/product/components/FilterBar/index.js

@@ -2,16 +2,12 @@ import React, { useState, useMemo, memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveContainer } from '@shopgate/engage/components';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/engage';
 import { SortProvider, SORT_SCOPE_CATEGORY, SORT_SCOPE_SEARCH } from '@shopgate/engage/filter';
 import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import Provider from "./FilterBarProvider";
 import Content from "./components/Content";
 import Modal from "./components/FilterModal";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()({
   root: {
     transition: 'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)'
@@ -37,11 +33,11 @@ const FilterBar = ({
     setActive(count > 0);
   }, []);
   const style = useMemo(() => hasNewServices() ? {
-    background: active ? 'var(--color-background-accent)' : 'var(--color-background-accent)',
-    color: active ? 'var(--color-primary)' : theme.palette.text.primary
+    background: theme.palette.background.emphasized,
+    color: active ? theme.palette.primary.main : theme.palette.text.primary
   } : {
-    background: active ? 'var(--color-secondary)' : colors.background,
-    color: active ? 'var(--color-secondary-contrast)' : colors.dark
+    background: active ? theme.palette.secondary.main : theme.palette.background.emphasized,
+    color: active ? theme.palette.secondary.contrastText : theme.palette.text.primary
   }, [active, theme]);
   const sortScope = useMemo(() => categoryId ? SORT_SCOPE_CATEGORY : SORT_SCOPE_SEARCH, [categoryId]);
   return /*#__PURE__*/_jsx("div", {

package/product/components/Header/PriceStriked/index.js

@@ -5,12 +5,8 @@ import { PRODUCT_PRICE_STRIKED, PRODUCT_PRICE_STRIKED_AFTER, PRODUCT_PRICE_STRIK
 import { withPriceCalculation } from '@shopgate/engage/product/hocs';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   placeholder: {
     height: 16,
@@ -19,13 +15,13 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: 2
   },
   msrp: {
-    color: colors.shade11,
-    fontSize: '0.875rem',
-    marginRight: theme.spacing(0.5)
+    color: theme.palette.grey.dark,
+    marginRight: theme.spacing(0.5),
+    fontSize: theme.typography.body2.fontSize
   },
   msrpStriked: {
     display: 'inline',
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   }
 }));
 

package/product/components/Header/Shipping/index.js

@@ -7,7 +7,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import Label from "./components/Label";
 import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   placeholder: {
     height: 16,
     width: '70%',
@@ -15,9 +15,9 @@ const useStyles = makeStyles()({
     marginBottom: 2
   },
   shipping: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   }
-});
+}));
 
 /**
  * The Shipping Info component.

package/product/components/Header/Shipping/spec.js

@@ -1,9 +1,8 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Shipping from "./index";
 import { mockedStoreWithShippingPrice, mockedStoreWithFreeShipping, mockedStoreWithUnknownShipping } from "./mock";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +13,7 @@ describe('Shipping label', () => {
    * @param {Object} state The mocked redux state
    * @return {ReactWrapper}
    */
-  const createComponent = state => mount(/*#__PURE__*/_jsx(Provider, {
+  const createComponent = state => render(/*#__PURE__*/_jsx(Provider, {
     store: mockedStore(state),
     children: /*#__PURE__*/_jsx(Shipping, {
       productId: "fakeId"
@@ -22,16 +21,16 @@ describe('Shipping label', () => {
   }), mockRenderOptions);
   it('should render shipping price', () => {
     const component = createComponent(mockedStoreWithShippingPrice);
-    expect(component).toMatchSnapshot();
-    expect(component.html().includes('shipping.cost')).toBe(true);
+    expect(component.container.firstChild).toMatchSnapshot();
+    expect(component.container.textContent).toContain('shipping.cost');
   });
   it('should render free shipping', () => {
     const component = createComponent(mockedStoreWithFreeShipping);
-    expect(component).toMatchSnapshot();
-    expect(component.html().includes('shipping.free')).toBe(true);
+    expect(component.container.firstChild).toMatchSnapshot();
+    expect(component.container.textContent).toContain('shipping.free');
   });
   it('should not render when shipping is unknown', () => {
     const component = createComponent(mockedStoreWithUnknownShipping);
-    expect(component.isEmptyRender()).toBe(true);
+    expect(component.container.firstChild).toBeNull();
   });
 });

package/product/components/Header/Tiers/components/Tier/index.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import { I18n } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   tier: {
     display: 'block',
     lineHeight: 1.35
   },
   price: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   }
-});
+}));
 
 /**
  * @param {Object} props The component props.

package/product/components/Header/Tiers/components/Tier/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Tier from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Tier />', () => {
@@ -26,11 +26,11 @@ describe('<Tier />', () => {
         to: 5,
         unitPrice: 77.5
       };
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tier, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tier, {
         price: price,
         tier: tier
       }));
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.asFragment()).toMatchSnapshot();
     });
   });
   describe('Rendering without data', () => {
@@ -38,7 +38,7 @@ describe('<Tier />', () => {
       const tier = {
         from: 1
       };
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tier, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tier, {
         tier: tier,
         price: {}
       }));

package/product/components/Header/Tiers/index.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@shopgate/pwa-common/components/Portal';
+import { Typography } from '@shopgate/engage/components';
 import { PRODUCT_TIERS, PRODUCT_TIERS_AFTER, PRODUCT_TIERS_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { makeStyles } from '@shopgate/engage/styles';
 import Tier from "./components/Tier";
@@ -8,8 +9,7 @@ import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   wrapper: {
-    marginTop: 4,
-    fontSize: '0.875rem'
+    marginTop: 4
   }
 });
 
@@ -33,7 +33,9 @@ const Tiers = ({
       name: PRODUCT_TIERS_BEFORE
     }), /*#__PURE__*/_jsx(Portal, {
       name: PRODUCT_TIERS,
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
         className: cx(classes.wrapper, 'engage__product__header__tiers'),
         children: price.tiers.map(tier => /*#__PURE__*/_jsx(Tier, {
           tier: tier,