@shopgate/pwa-ui-shared 7.31.6 → 7.32.0-beta.10

package/Price/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.string.replace.js";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import showTaxDisclaimer from '@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';
@@ -15,7 +15,6 @@ const useStyles = makeStyles()({
   },
   disclaimer: {
     color: 'initial',
-    fontSize: 14,
     position: 'absolute',
     right: -10,
     top: 0
@@ -106,7 +105,9 @@ const Price = props => {
         price: ariaPrice
       }),
       children: priceContent
-    }), props.taxDisclaimer && showDisclaimer ? /*#__PURE__*/_jsxs("div", {
+    }), props.taxDisclaimer && showDisclaimer ? /*#__PURE__*/_jsxs(Typography, {
+      variant: "body2",
+      component: "div",
       className: classes.disclaimer,
       children: [/*#__PURE__*/_jsx("span", {
         "aria-hidden": true,

package/PriceInfo/index.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    color: themeConfig.colors.shade3
+    color: theme.palette.grey.medium
   }
-});
+}));
 
 /**
  * The price info component

package/PriceStriked/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { I18n } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 
 /**
  * Calculates the angle for the strike-through line
@@ -23,10 +22,10 @@ const calcAngle = element => {
   document.body.removeChild(cloned);
   return Math.round(90 - Math.atan(width / height) * (180 / Math.PI));
 };
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     whiteSpace: 'nowrap',
-    color: themeColors.shade11,
+    color: theme.palette.grey.dark,
     '& span': {
       position: 'relative',
       '&::before': {
@@ -47,7 +46,7 @@ const useStyles = makeStyles()({
       }
     }
   }
-});
+}));
 
 /**
  * The price striked component

package/ProgressBar/index.js

@@ -1,10 +1,8 @@
 import React, { useEffect, useState, memo } from 'react';
 import PropTypes from 'prop-types';
-import Color from 'color';
 import Transition from 'react-transition-group/Transition';
 import UIEvents from '@shopgate/pwa-core/emitters/ui';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { getCSSCustomProp, makeStyles, keyframes } from '@shopgate/engage/styles';
+import { makeStyles, keyframes, useTheme } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const duration = 150;
 const transitionStyles = {
@@ -21,9 +19,6 @@ const transitionStyles = {
     transform: 'scale(1, 0)'
   }
 };
-const {
-  colors
-} = themeConfig;
 const progressBarHeight = 4;
 const indeterminateLong = keyframes({
   '0%': {
@@ -53,12 +48,12 @@ const indeterminateShort = keyframes({
     right: '-8%'
   }
 });
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   innerElement: {
     ':before': {
       content: '""',
       position: 'absolute',
-      background: 'var(--color-secondary)',
+      background: theme.palette.secondary.main,
       top: 0,
       left: 0,
       bottom: 0,
@@ -67,7 +62,7 @@ const useStyles = makeStyles()({
     ':after': {
       content: '""',
       position: 'absolute',
-      background: 'var(--color-secondary)',
+      background: theme.palette.secondary.main,
       top: 0,
       left: 0,
       bottom: 0,
@@ -83,7 +78,7 @@ const useStyles = makeStyles()({
       animationDelay: '1.15s'
     }
   }
-});
+}));
 
 /**
  * A component for visualizing any kind of progress.
@@ -96,6 +91,7 @@ const ProgressBar = /*#__PURE__*/memo(({
     classes,
     cx
   } = useStyles();
+  const theme = useTheme();
   const [isAnimating, setIsAnimating] = useState(isVisible);
   const [visible, setVisible] = useState(isVisible);
   useEffect(() => {
@@ -106,7 +102,6 @@ const ProgressBar = /*#__PURE__*/memo(({
       setVisible(false);
     }
   }, [isVisible]);
-  const wrapperBackground = Color(getCSSCustomProp('--color-secondary') || colors.accent).fade(0.6);
   return /*#__PURE__*/_jsx(Transition, {
     in: visible,
     timeout: duration,
@@ -118,7 +113,7 @@ const ProgressBar = /*#__PURE__*/memo(({
       style: {
         position: 'absolute',
         bottom: 0,
-        background: wrapperBackground,
+        background: theme.alpha(theme.palette.secondary.main, 0.6),
         width: '100%',
         height: progressBarHeight,
         overflow: 'hidden',

package/RadioButton/index.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import BaseCheckbox from '@shopgate/pwa-common/components/Checkbox';
 import CheckedIcon from "../icons/RadioCheckedIcon";
 import UncheckedIcon from "../icons/RadioUncheckedIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   checkedIcon: {
     width: 24,
     height: 24,
-    color: 'var(--color-secondary)'
+    color: theme.palette.secondary.main
   },
   uncheckedIcon: {
     width: 24,
     height: 24,
-    color: themeConfig.colors.shade6
+    color: theme.palette.grey.dark
   }
 }));
 

package/RatingStars/index.js

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import times from 'lodash/times';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import StarIcon from "../icons/StarIcon";
 import StarHalfIcon from "../icons/StarHalfIcon";
@@ -13,10 +12,10 @@ const ICON_SIZES = {
   big: '1.24em',
   large: '2.3em'
 };
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'relative',
-    display: 'inline-block',
+    display: 'inline-flex',
     verticalAlign: 'middle',
     maxWidth: '100%'
   },
@@ -35,7 +34,7 @@ const useStyles = makeStyles()({
     marginRight: '0.23em'
   },
   emptyStars: {
-    color: themeConfig.colors.shade7,
+    color: theme.components.ratingStars.empty,
     display: 'inline-flex',
     alignItems: 'center',
     flexWrap: 'nowrap'
@@ -44,12 +43,17 @@ const useStyles = makeStyles()({
     position: 'absolute',
     left: 0,
     top: 0,
-    color: 'var(--color-primary)',
+    // Purely decorative overlay: let every pointer event fall through to the
+    // empty-star buttons underneath, which span all slots and handle selection.
+    // Without this, the invisible spacers/half-stars cover the higher-index
+    // buttons and swallow clicks in selectable mode.
+    pointerEvents: 'none',
+    color: theme.components.ratingStars.filled,
     display: 'inline-flex',
     alignItems: 'center',
     flexWrap: 'nowrap'
   }
-});
+}));
 const numStars = 5;
 
 /**
@@ -108,10 +112,10 @@ const RatingStars = ({
     const starProps = {
       className: iconClassName,
       key: numStars + pos,
+      // Decorative duplicate of the underlying empty-star button; hidden from
+      // assistive tech and non-interactive (the empty layer handles clicks).
       ...(isSelectable && {
-        'aria-hidden': true,
-        role: 'button',
-        onClick: e => handleSelection(e, pos)
+        'aria-hidden': true
       })
     };
     return /*#__PURE__*/_jsx("div", {
@@ -125,7 +129,13 @@ const RatingStars = ({
     children: /*#__PURE__*/_jsx(StarHalfIcon, {
       size: size
     })
-  }, i + numFullStars))), [iconClassName, numFullStars, numHalfStars, size, handleSelection, isSelectable]);
+  }, i + numFullStars)), times(Math.max(numStars - numFullStars - numHalfStars, 0), i => /*#__PURE__*/_jsx("div", {
+    className: iconClassName,
+    style: {
+      width: size
+    },
+    "aria-hidden": true
+  }, `placeholder-${i}`))), [iconClassName, numFullStars, numHalfStars, size, isSelectable]);
   return /*#__PURE__*/_jsxs("div", {
     role: isSelectable ? undefined : 'img',
     className: rootClassName,

package/Ripple/components/RippleAnimation/index.js

@@ -1,7 +1,6 @@
 import React, { memo, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(() => ({
@@ -97,7 +96,7 @@ function RippleAnimation({
   });
 }
 RippleAnimation.defaultProps = {
-  color: themeConfig.colors.dark,
+  color: 'var(--sg-palette-common-black)',
   duration: 300,
   onComplete: () => {},
   size: 48,

package/Ripple/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import clamp from 'lodash/clamp';
 import { shift } from '@shopgate/pwa-common/helpers/data';
 import { getOffset } from '@shopgate/pwa-common/helpers/dom';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import RippleAnimation from "./components/RippleAnimation";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -183,7 +182,7 @@ const Ripple = ({
 };
 Ripple.defaultProps = {
   className: '',
-  color: themeConfig.colors.dark,
+  color: 'var(--sg-palette-common-black)',
   disabled: false,
   fill: false,
   onClick: () => {},

package/RippleButton/index.js

@@ -14,6 +14,10 @@ const useStyles = makeStyles()(theme => ({
 /**
  * The ripple button component is a special derivation of the basic button component
  * that adds a ripple effect when clicked.
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` instead — it ripples by default,
+ * so `rippleClassName` and `rippleSize` are gone and `disableRipple` turns the effect off. Map
+ * `flat` to `variant="text"`, `type="secondary"` to `color="primary"`, and `type="primary"` or the
+ * default to `color="secondary"`.
  * @param {Object} props Props.
  * @returns {JSX.Element}
  */
@@ -34,7 +38,7 @@ const RippleButton = ({
     classes
   } = useStyles();
   const buttonProps = {
-    className: `${className} ui-shared__ripple-button`,
+    className: cx(className, 'ui-shared__ripple-button'),
     disabled,
     onClick,
     flat,

package/ScannerOverlay/components/CameraOverlay/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
 import { SCANNER_CAMERA } from '@shopgate/pwa-common-commerce/scanner/constants/Portals';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const edgeHeight = 45;
@@ -18,7 +17,7 @@ const useStyles = makeStyles()(theme => ({
       height: edgeHeight,
       position: 'absolute',
       borderStyle: 'solid',
-      borderColor: themeColors.light
+      borderColor: theme.palette.common.white
     },
     ':before': {
       top: theme.spacing(8),

package/ScannerOverlay/components/ScannerBar/components/FlashlightButton/index.js

@@ -5,13 +5,13 @@ import { SCANNER_FLASH } from '@shopgate/engage/scanner/constants';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     alignItems: 'center',
     color: 'inherit',
     display: 'flex',
     flexShrink: 0,
-    fontSize: 24,
+    fontSize: theme.components.icon.medium,
     height: 44,
     justifyContent: 'center',
     outline: 0,
@@ -22,9 +22,9 @@ const useStyles = makeStyles()({
   },
   icon: {
     boxSizing: 'content-box',
-    color: 'var(--color-secondary)'
+    color: theme.palette.secondary.main
   }
-});
+}));
 
 /**
  * Renders the flashlight button for the scanner bar.

package/ScannerOverlay/components/ScannerBar/index.js

@@ -3,7 +3,6 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Grid, SurroundPortals } from '@shopgate/engage/components';
 import { SCANNER_BAR } from '@shopgate/engage/scanner/constants';
-import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import FlashlightButton from "./components/FlashlightButton";
 import ScannerInstructions from "./components/ScannerInstructions";
@@ -11,11 +10,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
     bottom: 0,
-    backgroundColor: themeColors.overlay,
-    boxShadow: themeShadows.scannerBar,
-    fontSize: 14,
+    backgroundColor: theme.palette.background.emphasized,
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+    fontSize: theme.typography.body2.fontSize,
     alignItems: 'center',
-    paddingBottom: 'var(--safe-area-inset-bottom)'
+    paddingBottom: theme.layout.safeArea.bottom
   },
   column: {
     margin: theme.spacing(2),

package/Sheet/components/Header/components/SearchBar/index.js

@@ -2,11 +2,10 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { I18n } from '@shopgate/engage/components';
 import Input from '@shopgate/pwa-common/components/Input';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import MagnifierIcon from "../../../../../icons/MagnifierIcon";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -27,13 +26,13 @@ const useStyles = makeStyles()({
     padding: '4px 10px 4px 30px',
     lineHeight: '28px',
     outline: 'none',
-    background: themeColors.shade7,
+    background: theme.palette.grey.light,
     verticalAlign: 'middle',
     WebkitAppearance: 'none'
   },
   label: {
     alignItems: 'center',
-    color: themeColors.shade3,
+    color: theme.palette.grey.medium,
     display: 'flex',
     height: '36px',
     position: 'absolute',
@@ -42,10 +41,10 @@ const useStyles = makeStyles()({
   },
   icon: {
     padding: '0 6px',
-    color: themeColors.shade3,
-    fontSize: '1.235rem'
+    color: theme.palette.grey.medium,
+    fontSize: theme.components.icon.small
   }
-});
+}));
 
 /**
  * @param {Object} props Props.

package/Sheet/components/Header/index.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@shopgate/pwa-common/components/Grid';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import Ripple from "../../../Ripple";
 import CrossIcon from "../../../icons/CrossIcon";
@@ -14,16 +14,14 @@ const useStyles = makeStyles()(theme => ({
     zIndex: 2
   },
   closePlaceholder: {
-    height: themeConfig.variables.navigator.height,
-    padding: 0,
-    lineHeight: 1
+    height: theme.components.navigator.height,
+    padding: 0
   },
   closeButton: {
-    lineHeight: 1,
     outline: 0,
     padding: 0,
-    minWidth: themeConfig.variables.navigator.height,
-    height: themeConfig.variables.navigator.height,
+    minWidth: theme.components.navigator.height,
+    height: theme.components.navigator.height,
     position: 'relative',
     zIndex: 2,
     color: theme.palette.text.primary
@@ -36,18 +34,17 @@ const useStyles = makeStyles()(theme => ({
     alignItems: 'center'
   },
   title: {
-    fontSize: '1.25rem',
-    fontWeight: 500,
     position: 'relative',
     alignItems: 'center',
     padding: theme.spacing(0, 2),
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    alignSelf: 'center'
+    alignSelf: 'center',
+    minWidth: 0
+  },
+  titleText: {
+    minWidth: 0
   },
   headerShadow: {
-    boxShadow: themeConfig.shadows.material
+    boxShadow: '0 1px 6px rgba(0, 0, 0, .117647), 0 1px 4px rgba(0, 0, 0, .117647)'
   }
 }));
 
@@ -96,7 +93,13 @@ const Header = ({
         ...(allowClose ? {
           tabIndex: 0
         } : null),
-        children: title
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          component: "div",
+          noWrap: true,
+          className: classes.titleText,
+          children: title
+        })
       })]
     }), showSearch && /*#__PURE__*/_jsx(SearchBar, {
       handleChange: handleChange

package/Sheet/index.js

@@ -4,7 +4,6 @@ import throttle from 'lodash/throttle';
 import UIEvents from '@shopgate/pwa-core/emitters/ui';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
 import Drawer from '@shopgate/pwa-common/components/Drawer';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, keyframes, responsiveMediaQuery } from '@shopgate/engage/styles';
 import ProgressBar from "../ProgressBar";
 import Header from "./components/Header";
@@ -67,7 +66,7 @@ const useStyles = makeStyles()(theme => ({
   },
   container: {
     bottom: 0,
-    background: themeConfig.colors.light,
+    background: theme.palette.background.surface,
     width: '100vw',
     [responsiveMediaQuery('<xl', {
       appOnly: true
@@ -90,24 +89,34 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   containerFullScreen: {
-    height: [`calc(100vh - ${themeConfig.variables.navigator.height}px - 51px)`, `calc(100vh - ${themeConfig.variables.navigator.height}px - 51px - var(--safe-area-inset-top))`]
+    height: [`calc(100vh - ${theme.components.navigator.height} - 51px)`, `calc(100vh - ${theme.components.navigator.height} - 51px - ${theme.layout.safeArea.top})`]
   },
   progressBarContainer: {
     position: 'relative'
   },
   sheetShadow: {
-    boxShadow: themeConfig.shadows.sheet
+    boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.1)'
   },
   content: {
-    maxHeight: [`calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`],
+    maxHeight: [`calc(var(--vh-100, 100vh) - ${theme.components.navigator.height})`, `calc(var(--vh-100, 100vh) - ${theme.components.navigator.height} - ${theme.layout.safeArea.top})`],
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
-      maxHeight: [`calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`]
+      maxHeight: [`calc(var(--vh-80, 80vh) - ${theme.components.navigator.height})`, `calc(var(--vh-80, 80vh) - ${theme.components.navigator.height} - ${theme.layout.safeArea.top})`]
     },
-    paddingBottom: ['var(--safe-area-inset-bottom)'],
+    paddingBottom: [theme.layout.safeArea.bottom],
     overflowY: 'scroll',
-    WebkitOverflowScrolling: 'touch'
+    WebkitOverflowScrolling: 'touch',
+    '@media (hover: hover) and (pointer: fine)': {
+      '::-webkit-scrollbar': {
+        width: 6,
+        background: 'transparent'
+      },
+      '::-webkit-scrollbar-thumb': {
+        background: theme.components.border.medium,
+        borderRadius: 4
+      }
+    }
   },
   drawerAnimIn: {
     [responsiveMediaQuery('<=sm', {

package/TaxDisclaimer/index.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
 import { PRODUCT_TAX_DISCLAIMER } from '@shopgate/pwa-common-commerce/product/constants/Portals';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import showTaxDisclaimer from '@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks/useWidgetSettings';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   text: {
-    background: theme.palette.background.default,
-    display: 'block',
-    fontSize: 12,
-    padding: theme.spacing(2.5, 2),
-    textAlign: 'left'
+    padding: theme.spacing(2.5, 2)
   }
 }));
 
@@ -22,7 +18,8 @@ const useStyles = makeStyles()(theme => ({
  */
 const TaxDisclaimer = () => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
 
   // Added with PWA 6 - CCP-2372
@@ -38,12 +35,15 @@ const TaxDisclaimer = () => {
     portalProps: {
       showTaxDisclaimer: showDisclaimer
     },
-    children: showDisclaimer && /*#__PURE__*/_jsx("div", {
+    children: showDisclaimer && /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      display: "block",
+      align: "left",
+      component: "div",
       "data-test-id": "taxDisclaimer",
       "aria-hidden": true,
-      className: "ui-shared__tax-disclaimer",
+      className: cx(classes.text, 'ui-shared__tax-disclaimer'),
       children: /*#__PURE__*/_jsx(I18n.Text, {
-        className: classes.text,
         string: text || 'product.tax_disclaimer'
       })
     })

package/TextField/components/ErrorText/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ellipsisLine = {
@@ -9,16 +9,13 @@ const ellipsisLine = {
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis'
 };
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
   error: {
     position: 'absolute',
     bottom: 2,
-    fontSize: 12,
-    lineHeight: '14px',
-    color: theme.palette.error.main,
     ...ellipsisLine
   }
-}));
+});
 
 /**
  * Error message component.
@@ -37,7 +34,10 @@ const ErrorText = ({
     classes,
     cx
   } = useStyles();
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Typography, {
+    variant: "caption",
+    component: "div",
+    color: "error",
     id: `ariaError-${elementName}`,
     className: cx(classes.error, className, 'errorText'),
     "aria-live": "assertive",

package/TextField/components/FormElement/index.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import Input from '@shopgate/pwa-common/components/Input';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   input: {
     position: 'relative',
     padding: 0,
     width: '100%',
     marginTop: 24,
     outline: 0,
-    fontSize: 16,
+    fontSize: theme.typography.body1.fontSize,
     lineHeight: '19px'
   },
   multiLine: {
@@ -25,7 +25,7 @@ const useStyles = makeStyles()({
     lineHeight: '19px',
     verticalAlign: 'top'
   }
-});
+}));
 
 /**
  * Creates an input or a multiLine based on the type prop.