@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/components/MessageBar/MessageBar.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Color from 'color';
-import { makeStyles, responsiveMediaQuery, getCSSCustomProp } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { Typography } from '@shopgate/engage/components';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { i18n, errorBehavior } from '@shopgate/engage/core/helpers';
 import StopIcon from '@shopgate/pwa-ui-shared/icons/StopIcon';
 import InfoIcon from '@shopgate/pwa-ui-shared/icons/InfoIcon';
@@ -13,22 +12,18 @@ const iconMapping = {
   warning: WarningIcon,
   error: StopIcon
 };
-
-/**
- * @param {string} sourceColor Source color.
- * @param {string} [textColor] Optional text color.
- * @returns {{ background: string, color: string, borderColor: string }}
- */
-const getMessageColors = (sourceColor, textColor) => ({
-  background: Color(sourceColor).fade(0.9).toString(),
-  color: textColor || 'var(--color-text-high-emphasis)',
-  borderColor: `${sourceColor}!important`
-});
-const useStyles = makeStyles()((theme, {
-  secondaryColor
-}) => {
+const useStyles = makeStyles()(theme => {
+  /**
+   * @param {string} sourceColor Source color.
+   * @param {string} [textColor] Optional text color.
+   * @returns {{ background: string, color: string, borderColor: string }}
+   */
+  const getMessageColors = (sourceColor, textColor) => ({
+    background: theme.alpha(sourceColor, 0.1),
+    color: textColor || theme.palette.text.primary,
+    borderColor: `${sourceColor}!important`
+  });
   const containerBase = {
-    background: themeColors.background,
     display: 'flex',
     flexDirection: 'column',
     flexShrink: 0,
@@ -36,7 +31,7 @@ const useStyles = makeStyles()((theme, {
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
-      fontWeight: 'normal',
+      fontWeight: theme.typography.fontWeightRegular,
       border: 'none',
       borderRadius: 'inherit',
       margin: theme.spacing(2),
@@ -46,14 +41,13 @@ const useStyles = makeStyles()((theme, {
   };
   const messageBase = {
     padding: theme.spacing(2, 2),
-    fontSize: '0.875rem',
     lineHeight: 1.3,
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     ':not(:last-child)': {
       marginBottom: theme.spacing(0.5)
     },
     ' > svg': {
-      fontSize: '1.5rem !important'
+      fontSize: `${theme.components.icon.medium} !important`
     }
   };
   return {
@@ -69,17 +63,17 @@ const useStyles = makeStyles()((theme, {
     // eslint-disable-next-line tss-unused-classes/unused-classes
     info: {
       ...messageBase,
-      background: 'var(--color-secondary)',
-      color: 'var(--color-secondary-contrast)',
+      background: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {
-        ...getMessageColors(secondaryColor),
+        ...getMessageColors(theme.palette.secondary.main),
         ' > svg': {
-          color: 'var(--color-secondary)'
+          color: theme.palette.secondary.main
         },
         padding: theme.spacing(1.5, 2),
-        fontWeight: 'normal',
+        fontWeight: theme.typography.fontWeightRegular,
         border: '1px solid',
         borderRadius: 4,
         ':not(:last-child)': {
@@ -90,17 +84,17 @@ const useStyles = makeStyles()((theme, {
     // eslint-disable-next-line tss-unused-classes/unused-classes
     error: {
       ...messageBase,
-      background: themeColors.error,
-      color: themeColors.light,
+      background: theme.palette.error.main,
+      color: theme.palette.error.contrastText,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {
-        ...getMessageColors(themeColors.error),
+        ...getMessageColors(theme.palette.error.main),
         ' > svg': {
-          color: themeColors.error
+          color: theme.palette.error.main
         },
         padding: theme.spacing(1.5, 2),
-        fontWeight: 'normal',
+        fontWeight: theme.typography.fontWeightRegular,
         border: '1px solid',
         borderRadius: 4,
         ':not(:last-child)': {
@@ -111,17 +105,17 @@ const useStyles = makeStyles()((theme, {
     // eslint-disable-next-line tss-unused-classes/unused-classes
     warning: {
       ...messageBase,
-      background: themeColors.warning,
-      color: themeColors.light,
+      background: theme.palette.warning.main,
+      color: theme.palette.warning.contrastText,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {
-        ...getMessageColors(themeColors.warning),
+        ...getMessageColors(theme.palette.warning.main),
         ' > svg': {
-          color: themeColors.warning
+          color: theme.palette.warning.main
         },
         padding: theme.spacing(1.5, 2),
-        fontWeight: 'normal',
+        fontWeight: theme.typography.fontWeightRegular,
         border: '1px solid',
         borderRadius: 4,
         ':not(:last-child)': {
@@ -160,13 +154,10 @@ const MessageBar = ({
   raised,
   showIcons
 }) => {
-  const secondaryColor = getCSSCustomProp('--color-secondary');
   const {
     classes,
     cx
-  } = useStyles({
-    secondaryColor
-  });
+  } = useStyles();
   const containerClass = React.useMemo(() => {
     if (raised) {
       return cx(classes.containerRaised, classNames.containerRaised, 'ui-shared__message-bar');
@@ -200,7 +191,9 @@ const MessageBar = ({
         }), /*#__PURE__*/_jsx("span", {
           className: "sr-only",
           children: `${i18n.text(`cart.message_type_${type}`)}: ${messageOutput}`
-        }), /*#__PURE__*/_jsx("span", {
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
           "aria-hidden": true,
           className: Icon ? classes.messageToIcon : null,
           children: messageOutput

package/components/NavigationHandler/connector.js

@@ -11,7 +11,7 @@ import { historyReset } from '@shopgate/pwa-common/actions/router/historyReset';
 function mapDispatchToProps(dispatch) {
   return {
     push: params => dispatch(historyPush(params)),
-    pop: () => dispatch(historyPop()),
+    pop: params => dispatch(historyPop(params)),
     replace: params => dispatch(historyReplace(params)),
     reset: () => dispatch(historyReset())
   };

package/components/Paper/Paper.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { ShadowSize } from '@shopgate/engage/styles';
+export type PaperVariant = 'elevation' | 'outlined';
+export interface PaperOwnProps {
+    /** Element or component to render as. @default 'div' */
+    component?: React.ElementType;
+    /**
+     * Depth of the drop shadow. A number indexes `theme.shadows` (0–24), a `ShadowSize` resolves
+     * through `theme.shadowSizes`. Ignored unless `variant` is `elevation`. @default 1
+     */
+    elevation?: number | ShadowSize;
+    /** `elevation` draws a shadow, `outlined` a border instead. @default 'elevation' */
+    variant?: PaperVariant;
+    /** Removes the rounded corners. @default false */
+    square?: boolean;
+    /**
+     * Corner radius per surface, e.g. `components.cards.borderRadius`. Ignored when `square`.
+     * @default theme.shape.borderRadius
+     */
+    borderRadius?: number | string;
+    /**
+     * CSS `border` shorthand, drawn only when `variant` is `outlined`.
+     * @default `1px solid ${theme.components.border.light}`
+     */
+    border?: string;
+    /**
+     * A key of `theme.palette.background` (`default` | `surface` | `emphasized`), or any CSS color.
+     * @default 'surface'
+     */
+    background?: 'default' | 'surface' | 'emphasized' | (string & NonNullable<unknown>);
+    /**
+     * CSS color the shadow is drawn in. Sets `--sg-palette-shadow` on this element. Ignored unless
+     * `variant` is `elevation`.
+     */
+    shadowColor?: string;
+}
+export type PaperProps = PaperOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof PaperOwnProps> & {
+    [key: `data-${string}`]: string;
+};
+/**
+ * A surface primitive that owns elevation, variant, corner radius and background — the base the
+ * themed `Card` composes. Settings-free; theme only.
+ */
+declare const Paper: React.ForwardRefExoticComponent<PaperOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof PaperOwnProps> & {
+    [key: `data-${string}`]: string;
+} & React.RefAttributes<HTMLElement>>;
+export default Paper;
+//# sourceMappingURL=Paper.d.ts.map

package/components/Paper/Paper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../components/Paper/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAChC,oFAAoF;IACpF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACpF;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,UAAU,GACpB,aAAa,GACX,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,aAAa,CAAC,GAC5D;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAA;CAAE,CAAC;AA2BxC;;;GAGG;AACH,QAAA,MAAM,KAAK;;qCAkCT,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/components/Paper/Paper.js

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles({
+  name: 'Paper'
+})((theme, p) => {
+  const palette = theme.palette.background[p.background];
+  return {
+    root: {
+      position: 'relative',
+      backgroundColor: typeof palette === 'string' ? palette : p.background,
+      borderRadius: p.square ? 0 : p.borderRadius ?? theme.shape.borderRadius,
+      ...(p.variant === 'elevation' && {
+        boxShadow: typeof p.elevation === 'number' ? theme.shadows[p.elevation] : theme.shadowSizes[p.elevation],
+        ...(p.shadowColor && {
+          [theme.vars.palette.shadow]: p.shadowColor
+        })
+      }),
+      ...(p.variant === 'outlined' && {
+        border: p.border ?? `1px solid ${theme.components.border.light}`
+      })
+    }
+  };
+});
+
+/**
+ * A surface primitive that owns elevation, variant, corner radius and background — the base the
+ * themed `Card` composes. Settings-free; theme only.
+ */
+const Paper = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    component: Component = 'div',
+    elevation = 1,
+    variant = 'elevation',
+    square = false,
+    borderRadius,
+    border,
+    background = 'surface',
+    shadowColor,
+    ...restProps
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles({
+    variant,
+    elevation,
+    square,
+    borderRadius,
+    border,
+    background,
+    shadowColor
+  });
+  return /*#__PURE__*/_jsx(Component, {
+    ref: ref,
+    className: cx(classes.root, 'engage__paper', className),
+    ...restProps,
+    children: children
+  });
+});
+Paper.displayName = 'Paper';
+export default Paper;

package/components/Paper/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Paper';
+export type { PaperProps, PaperOwnProps, PaperVariant } from './Paper';
+//# sourceMappingURL=index.d.ts.map

package/components/Paper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Paper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/components/Paper/index.js

@@ -0,0 +1 @@
+export { default } from "./Paper";

package/components/Picker/components/Button/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 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: {
     display: 'block',
     width: '100%',
@@ -14,9 +14,9 @@ const useStyles = makeStyles()({
   },
   value: {
     display: 'block',
-    fontWeight: 'bold'
+    fontWeight: theme.typography.fontWeightBold
   }
-});
+}));
 
 /**
  * The default button for the Picker component.

package/components/Picker/components/List/index.js

@@ -5,7 +5,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     display: 'block',
     width: '100%',
@@ -15,10 +15,10 @@ const useStyles = makeStyles()({
   },
   active: {
     button: {
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     }
   }
-});
+}));
 
 /**
  * The default button for the Picker component.

package/components/Picker/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Picker/components/Modal/index.jsx"],"names":[],"mappings":";AAkEA;;;;GAIG;AACH,4DAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CA+C5B;;;;;;;;sBAjHqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Picker/components/Modal/index.jsx"],"names":[],"mappings":";AAiEA;;;;GAIG;AACH,4DAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CA+C5B;;;;;;;;sBAhHqB,YAAY"}

package/components/Picker/components/Modal/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, keyframes } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FADE_DURATION = 150;
 const SLIDE_DURATION = 150;
@@ -39,7 +38,7 @@ const fadeOutPickerBackground = keyframes({
     opacity: 0
   }
 });
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   wrapper: {
     zIndex: 1000,
     position: 'fixed',
@@ -65,7 +64,7 @@ const useStyles = makeStyles()(() => ({
     bottom: 0,
     left: 0,
     right: 0,
-    backgroundColor: themeColors.light,
+    backgroundColor: theme.palette.background.surface,
     animation: `${slideInPickerModal} ${SLIDE_DURATION}ms 1 both ${EASING}`
   },
   containerInactive: {

package/components/PickerUtilize/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/PickerUtilize/components/Button/index.jsx"],"names":[],"mappings":";AA2CA;;;;GAIG;AACH,+DAHW,MAAM,GACL,GAAG,CAiBd;;;;;;;;;;;QAcW,mCAAQ;;;;sBA5EE,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/PickerUtilize/components/Button/index.jsx"],"names":[],"mappings":";AAwCA;;;;GAIG;AACH,+DAHW,MAAM,GACL,GAAG,CAiBd;;;;;;;;;;;QAcW,mCAAS;;;;sBAzEC,YAAY"}

package/components/PickerUtilize/components/Button/index.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => {
   const buttonDefaults = {
     display: 'block',
@@ -15,7 +11,7 @@ const useStyles = makeStyles()(theme => {
     textAlign: 'left',
     lineHeight: 1.2,
     outline: 'none',
-    background: colors.shade8
+    background: theme.palette.grey.light
   };
   return {
     button: {
@@ -23,20 +19,20 @@ const useStyles = makeStyles()(theme => {
     },
     buttonDisabled: {
       ...buttonDefaults,
-      color: colors.shade4
+      color: theme.palette.grey.medium
     },
     label: {
       display: 'block',
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       ':not(:only-child)': {
-        fontWeight: 400,
-        fontSize: '0.75rem',
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.typography.caption.fontSize,
         marginBottom: 4
       }
     },
     value: {
       display: 'block',
-      fontWeight: 500
+      fontWeight: theme.typography.fontWeightMedium
     }
   };
 });

package/components/PickerUtilize/index.d.ts

@@ -1,3 +1,4 @@
-declare function _default(props: any): import("react/jsx-runtime").JSX.Element;
+declare function _default(props: any): React.JSX.Element;
 export default _default;
+import React from 'react';
 //# sourceMappingURL=index.d.ts.map

package/components/PickerUtilize/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/PickerUtilize/index.jsx"],"names":[],"mappings":"AAkHe,+EAMd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/PickerUtilize/index.jsx"],"names":[],"mappings":"AAkHe,yDAMd;;kBAxH0C,OAAO"}

package/components/Radio/Radio.js

@@ -6,7 +6,7 @@ import UncheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';
 import { Ripple } from '@shopgate/engage/components';
 import { useRadioGroup } from "../RadioGroup";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     display: 'inline-flex',
     alignItems: 'inherit',
@@ -36,7 +36,7 @@ const useStyles = makeStyles()({
     width: '100%'
   },
   radioChecked: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   },
   radioDisabled: {
     opacity: 0.5,
@@ -45,7 +45,7 @@ const useStyles = makeStyles()({
   ripple: {
     padding: 12
   }
-});
+}));
 
 /**
  * The Radio component
@@ -63,7 +63,8 @@ const Radio = ({
 }) => {
   const {
     classes,
-    cx
+    cx,
+    theme
   } = useStyles();
   const radioGroup = useRadioGroup();
   let name = nameProp;
@@ -88,7 +89,7 @@ const Radio = ({
     className: cx(classes.root, classNamesProp.root),
     children: /*#__PURE__*/_jsxs(Ripple, {
       className: classes.ripple,
-      color: "var(--color-primary)",
+      color: theme.palette.primary.main,
       children: [/*#__PURE__*/_jsx("input", {
         className: classes.input,
         type: "radio",

package/components/RadioCard/RadioCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../components/RadioCard/RadioCard.jsx"],"names":[],"mappings":";AAkDA;;;;GAIG;AACH,yKAHW,MAAM,GACJ,GAAG,CAkDf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAtGqB,YAAY;AA0BlC;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAQf"}
+{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../components/RadioCard/RadioCard.jsx"],"names":[],"mappings":";AAmDA;;;;GAIG;AACH,yKAHW,MAAM,GACJ,GAAG,CAkDf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAvGqB,YAAY;AA2BlC;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAQf"}

package/components/RadioCard/RadioCard.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import Card from '@shopgate/pwa-ui-shared/Card';
+import Card from "../Card";
 import { useRadioGroup } from "../RadioGroup";
 import Radio from "../Radio";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   card: {
+    margin: '5px 5px 10px',
     borderRadius: 4,
     padding: '8px 8px 8px 4px',
     display: 'flex',

package/components/ResponsiveContainer/breakpoints.js

@@ -1,7 +1,7 @@
 // Ugly imports to avoid breaking tests due to circular dependencies
 import { isIOSTheme } from '@shopgate/engage/core/helpers/isIOSTheme';
 import { hasWebBridge } from '@shopgate/engage/core/helpers/bridge';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 const iosThemeActive = isIOSTheme();
 
 /* eslint-disable extra-rules/no-single-line-objects */
@@ -52,7 +52,7 @@ export const parser = (comparators, breakpoint, {
 
   // Web / App config.
   // Handle iOS theme as app for now so that media queries in shared components only work for app
-  const isWeb = hasWebBridge() && !iosThemeActive && !IS_PAGE_PREVIEW_ACTIVE;
+  const isWeb = hasWebBridge() && !iosThemeActive && !isAdminPreviewActive();
 
   // Always mode.
   if (webAlways && isWeb || appAlways && !isWeb) {

package/components/ScrollHeader/index.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useScrollDirectionChange, useRoute } from '@shopgate/engage/core/hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     position: 'sticky',
     left: 0,
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.common.white,
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
@@ -27,7 +27,7 @@ const useStyles = makeStyles()({
   transition: {
     transition: 'transform 0.2s ease,transform 0.2s'
   }
-});
+}));
 
 /* eslint-disable react/prop-types */
 /**

package/components/SheetList/components/Item/index.js

@@ -1,24 +1,21 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { withForwardedRef } from '@shopgate/engage/core';
 import { makeStyles, responsiveMediaQuery, useTheme } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Grid from '@shopgate/pwa-common/components/Grid';
 import Link from '@shopgate/pwa-common/components/Link';
 import Glow from '@shopgate/pwa-ui-shared/Glow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const IMAGE_SPACE = 72;
 const useStyles = makeStyles()(theme => ({
   disabled: {
-    color: colors.shade5,
+    color: theme.palette.grey.medium,
     cursor: 'not-allowed'
   },
   selected: {
-    background: 'var(--color-background-accent)',
-    boxShadow: '-16px 0 0 0 var(--color-background-accent) !important'
+    background: theme.palette.background.emphasized,
+    boxShadow: `-16px 0 0 0 ${theme.palette.background.emphasized} !important`
   },
   title: {
     width: '100%',
@@ -33,7 +30,7 @@ const useStyles = makeStyles()(theme => ({
     })]: {
       padding: theme.spacing(2),
       margin: 0,
-      fontSize: '1.25rem',
+      fontSize: theme.typography.h3.fontSize,
       lineHeight: '1.5rem'
     }
   },
@@ -43,10 +40,7 @@ const useStyles = makeStyles()(theme => ({
       webOnly: true
     })]: {
       display: 'block',
-      color: 'var(--color-text-medium-emphasis)',
-      fontSize: '0.875rem',
       lineHeight: '1.25rem',
-      fontWeight: 'initial',
       paddingTop: theme.spacing(1)
     }
   },
@@ -92,8 +86,12 @@ const Item = ({
   testId
 }) => {
   const theme = useTheme();
-  const glowHover = useMemo(() => ({
-    boxShadow: `${theme.spacing(-2.5)}px 0 0 ${colors.shade8}, ${theme.spacing(2.5)}px 0 0 ${colors.shade8}`
+  const glowStyles = useMemo(() => ({
+    glow: {
+      left: theme.spacing(-2),
+      right: theme.spacing(-2),
+      width: 'auto'
+    }
   }), [theme]);
   const {
     classes,
@@ -129,10 +127,11 @@ const Item = ({
           grow: 1,
           children: [/*#__PURE__*/_jsx("div", {
             children: title
-          }), description && /*#__PURE__*/_jsx("div", {
-            className: classes.description
-            // eslint-disable-next-line react/no-danger
-            ,
+          }), description && /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "div",
+            color: "textSecondary",
+            className: classes.description,
             dangerouslySetInnerHTML: {
               __html: description
             }
@@ -152,9 +151,7 @@ const Item = ({
     return /*#__PURE__*/_jsx(Glow, {
       ref: forwardedRef,
       className: className,
-      styles: {
-        hover: glowHover
-      },
+      styles: glowStyles,
       children: /*#__PURE__*/_jsx(LinkComponent, {
         href: link,
         onClick: onClick,
@@ -174,9 +171,7 @@ const Item = ({
     "aria-selected": isSelected,
     children: /*#__PURE__*/_jsx(Glow, {
       className: className,
-      styles: {
-        hover: glowHover
-      },
+      styles: glowStyles,
       children: renderContent()
     })
   });

package/components/SheetList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SheetList/index.jsx"],"names":[],"mappings":";AAmCA;;;;;GAKG;AACH,wEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CAgD5B;;;;;;;;;;;;;;;;;;;;iBAlFgB,mBAAmB;sBAJd,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SheetList/index.jsx"],"names":[],"mappings":";AAiCA;;;;;GAKG;AACH,wEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CAgD5B;;;;;;;;;;;;;;;;;;;;iBAjFgB,mBAAmB;sBAHd,YAAY"}