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

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/index.d.ts

@@ -1,15 +1,15 @@
 declare const _default: import("react-redux").ConnectedComponent<typeof NavigationHandler, {
+    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
-    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
     store?: import("redux").Store | undefined;
 } | {
+    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
-    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     store?: import("redux").Store | undefined;

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/Picker/spec.js

@@ -1,12 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import Picker from "./index";
-import PickerList from "./components/List";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 describe('<Picker />', () => {
-  let renderedElement;
-  let renderedInstance;
   const mockItems = ['String only', {
     value: 'Value only'
   }, {
@@ -15,71 +12,81 @@ describe('<Picker />', () => {
   }];
   const mockOnChange = jest.fn();
   const mockOnSelect = jest.fn();
-
-  /**
-   * The view component
-   * @param {Object} props The component props.
-   */
-  const renderComponent = props => {
-    renderedElement = mount(/*#__PURE__*/_jsx(Picker, {
-      ...props
-    }));
-    renderedInstance = renderedElement.find('Picker').instance();
-  };
+  const renderComponent = props => render(/*#__PURE__*/_jsx(Picker, {
+    ...props
+  }));
   beforeEach(() => {
-    renderComponent({
-      items: mockItems,
-      onChange: mockOnChange,
-      onSelect: mockOnSelect
-    });
-    renderedElement.update();
+    jest.clearAllMocks();
   });
   describe('Given the component was mounted to the DOM', () => {
     it('should match snapshot', () => {
-      expect(renderedElement).toMatchSnapshot();
+      const renderedElement = renderComponent({
+        items: mockItems,
+        onChange: mockOnChange,
+        onSelect: mockOnSelect
+      });
+      expect(renderedElement.container.firstChild).toMatchSnapshot();
     });
     it('should have no selected value', () => {
-      expect(renderedInstance.selectedItem).toBe(null);
+      renderComponent({
+        items: mockItems,
+        onChange: mockOnChange,
+        onSelect: mockOnSelect
+      });
+      expect(screen.queryByText('String only')).toBeNull();
+      expect(screen.getByText('Pick ...')).toBeTruthy();
     });
     describe('Given picker component gets opened', () => {
-      beforeEach(() => {
-        renderedInstance.toggleOpenState(true);
-        renderedElement.update();
-      });
+      const openPicker = () => {
+        const renderedElement = renderComponent({
+          items: mockItems,
+          onChange: mockOnChange,
+          onSelect: mockOnSelect
+        });
+        fireEvent.click(renderedElement.container.querySelector('button.engage__picker__button'));
+        return renderedElement;
+      };
       it('should have isOpen state', () => {
-        expect(renderedInstance.state.isOpen).toBe(true);
+        openPicker();
+        expect(document.querySelector('.engage__picker_modal')).toBeTruthy();
       });
       it('should render the picker list', () => {
-        expect(renderedElement.find(PickerList).length).toBe(1);
+        openPicker();
+        expect(document.querySelector('ul.engage__picker_list')).toBeTruthy();
       });
       it('should render the picker items', () => {
-        expect(renderedElement.find('li button').length).toBe(mockItems.length);
+        const renderedElement = openPicker();
+        expect(renderedElement.container.querySelectorAll('li button').length).toBe(mockItems.length);
       });
       describe('Given a item gets selected', () => {
         jest.useFakeTimers();
-        beforeEach(() => {
-          jest.clearAllMocks();
-          renderedElement.find('li button').first().simulate('click');
-          jest.runAllTimers();
-        });
         afterEach(() => {
           jest.clearAllTimers();
         });
         it('should trigger onChange when the value changed', () => {
+          const renderedElement = openPicker();
+          fireEvent.click(renderedElement.container.querySelectorAll('li button')[0]);
+          jest.runAllTimers();
           expect(mockOnChange).toHaveBeenCalledTimes(1);
         });
         it('should trigger onSelect when the value changed', () => {
+          const renderedElement = openPicker();
+          fireEvent.click(renderedElement.container.querySelectorAll('li button')[0]);
+          jest.runAllTimers();
           expect(mockOnSelect).toHaveBeenCalledTimes(1);
         });
         it('should not trigger onChange when the value did not change, but trigger onSelect', () => {
-          renderedInstance.setState({
-            selectedIndex: 0
+          const renderedElement = renderComponent({
+            items: mockItems,
+            value: 'String only',
+            onChange: mockOnChange,
+            onSelect: mockOnSelect
           });
-          renderedInstance.toggleOpenState(true);
-          renderedElement.find('li button').first().simulate('click');
+          fireEvent.click(renderedElement.container.querySelector('button.engage__picker__button'));
+          fireEvent.click(renderedElement.container.querySelectorAll('li button')[0]);
           jest.runAllTimers();
-          expect(mockOnChange).toHaveBeenCalledTimes(1);
-          expect(mockOnSelect).toHaveBeenCalledTimes(2);
+          expect(mockOnChange).toHaveBeenCalledTimes(0);
+          expect(mockOnSelect).toHaveBeenCalledTimes(1);
         });
       });
     });

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/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Picker from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components/View');
@@ -13,6 +13,9 @@ jest.mock('@shopgate/engage/components', () => {
     return null;
   };
   return {
+    Typography: ({
+      children
+    }) => children,
     SheetList,
     Sheet: ({
       children
@@ -24,9 +27,9 @@ jest.mock('@shopgate/engage/components', () => {
 describe('<Picker />', () => {
   it('should render the picker', () => {
     const label = 'Picker label';
-    const wrapper = mount(/*#__PURE__*/_jsx(Picker, {
+    const wrapper = render(/*#__PURE__*/_jsx(Picker, {
       label: label
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

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/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)
     }
   },
@@ -93,7 +87,7 @@ const Item = ({
 }) => {
   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}`
+    boxShadow: `${theme.spacing(-2.5)}px 0 0 ${theme.palette.grey.light}, ${theme.spacing(2.5)}px 0 0 ${theme.palette.grey.light}`
   }), [theme]);
   const {
     classes,
@@ -129,10 +123,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
             }

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"}