@shopgate/pwa-ui-shared 7.32.0-beta.1 → 7.32.0-beta.11

package/ActionButton/index.js

@@ -21,6 +21,10 @@ const CLICK_DELAY = 300;
 
 /**
  * The action button component.
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` instead. It defaults to
+ * `variant="contained"`, so pass `variant="text"` to match this component's `flat` default. Map
+ * `type="secondary"` to `color="primary"`, and `type="primary"` or the default to
+ * `color="secondary"`.
  * @param {Object} props Props.
  * @returns {JSX.Element}
  */

package/AddToCartButton/index.js

@@ -49,7 +49,10 @@ const useStyles = makeStyles()(theme => ({
   icon: {
     transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
     opacity: 1,
-    position: 'absolute'
+    position: 'absolute',
+    display: 'flex',
+    left: '50%',
+    marginLeft: '-0.5em'
   },
   spinnerIcon: {
     left: '50%',

package/Button/index.js

@@ -7,9 +7,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @param {string} text Text color.
  * @param {string|null} background Fill color.
+ * @param {Object} theme Theme with button border radius.
  * @returns {Object} JSS for root button.
  */
-const baseButton = (text, background) => ({
+const baseButton = (text, background, theme) => ({
   position: 'relative',
   display: 'inline-block',
   outline: 0,
@@ -20,7 +21,9 @@ const baseButton = (text, background) => ({
   ':disabled': {
     cursor: 'not-allowed'
   },
-  ...themeConfig.variables.buttonBase
+  ...themeConfig.variables.buttonBase,
+  borderRadius: theme.components.button.borderRadius,
+  ...theme.typography.button
 });
 
 /**
@@ -30,7 +33,7 @@ const baseButton = (text, background) => ({
  * @returns {Object} Object with `button` and `content` style maps.
  */
 const pairFromColors = (textColor, fillColor, theme) => ({
-  button: baseButton(textColor, fillColor),
+  button: baseButton(textColor, fillColor, theme),
   content: {
     padding: theme.spacing(0, 2, 0),
     color: textColor
@@ -71,6 +74,10 @@ const useStyles = makeStyles()((theme, {
 
 /**
  * The basic button component.
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` instead. Map `flat` to
+ * `variant="text"` and omit it for `variant="contained"`. The colors are named differently:
+ * `type="secondary"` becomes `color="primary"`, while `type="primary"` and the default become
+ * `color="secondary"`. `type="plain"` is unstyled — use `ButtonBase` for it.
  * @param {Object} props Props.
  * @returns {JSX.Element}
  */

package/ButtonLink/index.js

@@ -44,6 +44,10 @@ let ButtonLink = /*#__PURE__*/function (_Component) {
   };
   return ButtonLink;
 }(Component);
+/**
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` with `variant="link"` and
+ * `color="primary"` instead. It takes the same `href` and routes through the app router itself.
+ */
 ButtonLink.defaultProps = {
   disabled: false,
   className: '',

package/Card/index.js

@@ -1,40 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  root: {
-    boxShadow: '0 4px 8px rgba(0,0,0,0.16)',
-    margin: '5px 5px 10px',
-    borderRadius: 10,
-    background: theme.palette.background.surface,
-    overflow: 'hidden',
-    position: 'relative'
-  }
-}));
+import React, { useEffect } from 'react';
+import { logger } from '@shopgate/engage/core/helpers';
+import { Card } from '@shopgate/engage/components';
 
 /**
- * Renders the card component.
- * @param {Object} props The component properties.
+ * @deprecated Use `import { Card } from '@shopgate/engage/components'` instead.
+ * @param {Object} props The component props.
  * @returns {JSX}
  */
-const Card = ({
-  className,
-  children,
-  id
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx("div", {
-    className: cx('ui-shared__card', classes.root, className),
-    id: id,
-    children: children
+import { jsx as _jsx } from "react/jsx-runtime";
+const DeprecatedCard = props => {
+  useEffect(() => {
+    logger.warn('===== Card deprecated =====\n' + 'The Card component ' + '(@shopgate/pwa-ui-shared/Card) is deprecated.\n' + 'Please use: import { Card } from \'@shopgate/engage/components\'.\n' + '===================================');
+  }, []);
+  return /*#__PURE__*/_jsx(Card, {
+    ...props
   });
 };
-Card.defaultProps = {
-  className: '',
-  id: null
-};
-export default Card;
+export default DeprecatedCard;

package/CardList/components/Item/index.js

@@ -1,42 +1,48 @@
-import React, { Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import ListItem from '@shopgate/pwa-common/components/List/components/Item';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  root: {
-    background: theme.palette.background.surface,
-    marginBottom: theme.spacing(0.5),
+const useStyles = makeStyles()({
+  item: {
+    display: 'block',
     position: 'relative'
+  },
+  unselected: {
+    zIndex: 1
+  },
+  selected: {
+    zIndex: 2
   }
-}));
+});
 
 /**
- * The Card List Item component implemented as class so that ref prop is available.
- * @param {Object} props The component props.
- * @return {JSX}
+ * The ListItem component.
+ * @returns {JSX}
  */
-const Item = ({
+const ListItem = ({
   children,
   className,
-  isSelected
+  isSelected,
+  role
 }) => {
   const {
     classes,
     cx
   } = useStyles();
-  if (!Children.count(children)) {
+  if (!React.Children.count(children)) {
     return null;
   }
-  return /*#__PURE__*/_jsx(ListItem, {
-    className: cx(classes.root, className),
-    isSelected: isSelected,
+  return /*#__PURE__*/_jsx("li", {
+    className: cx(classes.item, className, 'common__list__list-item', isSelected ? classes.selected : classes.unselected),
+    "data-test-id": "listItem",
+    role: role,
     children: children
   });
 };
-Item.defaultProps = {
-  children: null,
+ListItem.defaultProps = {
   className: null,
-  isSelected: false
+  children: null,
+  isSelected: false,
+  role: null
 };
-export default Item;
+export default ListItem;

package/CardList/index.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Children, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
+import { cx } from '@shopgate/engage/styles';
 import Item from "./components/Item";
 
 /**
@@ -27,7 +28,7 @@ let CardList = /*#__PURE__*/function (_Component) {
       return null;
     }
     return /*#__PURE__*/_jsx(List, {
-      className: `ui-shared__card-list ${className}`,
+      className: cx('ui-shared__card-list', className),
       children: Children.map(children, child => {
         if (! /*#__PURE__*/isValidElement(child)) {
           return null;

package/CartTotalLine/index.js

@@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
   },
   grandTotal: {
     color: theme.palette.text.primary,
-    fontSize: `${theme.typography.body1.fontSize} !important`
+    fontSize: theme.typography.body1.fontSize
   }
 }));
 

package/Dialog/components/PipelineErrorDialog/index.js

@@ -33,7 +33,8 @@ const PipelineErrorDialog = ({
   params,
   message
 }) => {
-  const [devMode, setDevMode] = useState(false);
+  // May be opened directly in developer detail mode (e.g. via long-pressing an error toast).
+  const [devMode, setDevMode] = useState(!!params.openWithDetails);
   const tapTimeoutRef = useRef(null);
   const tapCounterRef = useRef(0);
   const handleTapTimeout = useCallback(() => {

package/Glow/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { withForwardedRef } from '@shopgate/engage/core';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
@@ -41,6 +41,7 @@ const Glow = ({
     classes,
     cx
   } = useStyles();
+  const theme = useTheme();
   const [hover, setHover] = useState(false);
   const timeoutRef = useRef(null);
   useEffect(() => () => {
@@ -58,7 +59,7 @@ const Glow = ({
   const innerInlineStyles = hover ? {
     ...propStyles.glow,
     ...propStyles.hover,
-    background: color
+    background: color || theme?.palette?.action?.pressed
   } : {
     ...propStyles.glow
   };
@@ -80,7 +81,7 @@ const Glow = ({
   jsx-a11y/click-events-have-key-events */
 };
 Glow.defaultProps = {
-  color: 'var(--sg-palette-grey-light)',
+  color: null,
   className: null,
   forwardedRef: null,
   disabled: false,

package/NoResults/index.js

@@ -48,7 +48,7 @@ const NoResults = props => {
   } = useStyles();
   const imageSRC = useMemo(() => svgToDataUrl(noResultsImage), []);
   return /*#__PURE__*/_jsxs("div", {
-    className: cx(classes.wrapper, props.className, ' ui-shared__no-results'),
+    className: cx(classes.wrapper, props.className, 'ui-shared__no-results'),
     "data-test-id": "noResults",
     children: [/*#__PURE__*/_jsx("div", {
       className: cx(classes.icon, 'no-results__image'),

package/RatingStars/index.js

@@ -15,7 +15,7 @@ const ICON_SIZES = {
 const useStyles = makeStyles()(theme => ({
   container: {
     position: 'relative',
-    display: 'inline-block',
+    display: 'inline-flex',
     verticalAlign: 'middle',
     maxWidth: '100%'
   },
@@ -43,6 +43,11 @@ const useStyles = makeStyles()(theme => ({
     position: 'absolute',
     left: 0,
     top: 0,
+    // 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',
@@ -107,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", {
@@ -124,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/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/ScannerBar/index.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
     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/index.js

@@ -2,7 +2,6 @@ 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";
@@ -15,14 +14,14 @@ const useStyles = makeStyles()(theme => ({
     zIndex: 2
   },
   closePlaceholder: {
-    height: themeConfig.variables.navigator.height,
+    height: theme.components.navigator.height,
     padding: 0
   },
   closeButton: {
     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

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";
@@ -90,7 +89,7 @@ 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'
@@ -99,15 +98,25 @@ const useStyles = makeStyles()(theme => ({
     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

@@ -8,7 +8,6 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   text: {
-    background: theme.palette.background.surface,
     padding: theme.spacing(2.5, 2)
   }
 }));

package/icons/AccountBoxIcon.d.ts

@@ -2,6 +2,6 @@ import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The account box icon component.
  */
-declare const AccountBox: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const AccountBox: (props: Omit<IconProps, "content">) => import("react").JSX.Element;
 export default AccountBox;
 //# sourceMappingURL=AccountBoxIcon.d.ts.map

package/icons/AccountBoxIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountBoxIcon.d.ts","sourceRoot":"","sources":["../../icons/AccountBoxIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAE9D,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AccountBoxIcon.d.ts","sourceRoot":"","sources":["../../icons/AccountBoxIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,gCACQ,CAAC;AAE9D,eAAe,UAAU,CAAC"}

package/icons/AddMoreIcon.d.ts

@@ -2,6 +2,6 @@ import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The add more icon component.
  */
-declare const AddMore: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const AddMore: (props: Omit<IconProps, "content">) => import("react").JSX.Element;
 export default AddMore;
 //# sourceMappingURL=AddMoreIcon.d.ts.map

package/icons/AddMoreIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddMoreIcon.d.ts","sourceRoot":"","sources":["../../icons/AddMoreIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,OAAO,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAE3D,eAAe,OAAO,CAAC"}
+{"version":3,"file":"AddMoreIcon.d.ts","sourceRoot":"","sources":["../../icons/AddMoreIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,OAAO,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,gCACQ,CAAC;AAE3D,eAAe,OAAO,CAAC"}

package/icons/ArrowDropIcon.d.ts

@@ -2,6 +2,6 @@ import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The arrow-drop icon component.
  */
-declare const ArrowDrop: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const ArrowDrop: (props: Omit<IconProps, "content">) => import("react").JSX.Element;
 export default ArrowDrop;
 //# sourceMappingURL=ArrowDropIcon.d.ts.map

package/icons/ArrowDropIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowDropIcon.d.ts","sourceRoot":"","sources":["../../icons/ArrowDropIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAE7D,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ArrowDropIcon.d.ts","sourceRoot":"","sources":["../../icons/ArrowDropIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,gCACQ,CAAC;AAE7D,eAAe,SAAS,CAAC"}

package/icons/ArrowIcon.d.ts

@@ -5,6 +5,6 @@ export interface ArrowIconProps extends Omit<IconProps, 'content'> {
 /**
  * The arrow icon component.
  */
-declare const ArrowIcon: ({ shadow, ...props }: ArrowIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ArrowIcon: ({ shadow, ...props }: ArrowIconProps) => import("react").JSX.Element;
 export default ArrowIcon;
 //# sourceMappingURL=ArrowIcon.d.ts.map

package/icons/ArrowIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowIcon.d.ts","sourceRoot":"","sources":["../../icons/ArrowIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGtE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,sBAA8B,cAAc,4CAG9D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ArrowIcon.d.ts","sourceRoot":"","sources":["../../icons/ArrowIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGtE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,sBAA8B,cAAc,gCAG9D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/icons/BarcodeScannerIcon.d.ts

@@ -2,6 +2,6 @@ import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The barcode icon component.
  */
-declare const BarcodeScanner: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const BarcodeScanner: (props: Omit<IconProps, "content">) => import("react").JSX.Element;
 export default BarcodeScanner;
 //# sourceMappingURL=BarcodeScannerIcon.d.ts.map

package/icons/BarcodeScannerIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarcodeScannerIcon.d.ts","sourceRoot":"","sources":["../../icons/BarcodeScannerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAElE,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BarcodeScannerIcon.d.ts","sourceRoot":"","sources":["../../icons/BarcodeScannerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,gCACQ,CAAC;AAElE,eAAe,cAAc,CAAC"}

package/icons/BoxIcon.d.ts

@@ -2,6 +2,6 @@ import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The box icon component.
  */
-declare const Box: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const Box: (props: Omit<IconProps, "content">) => import("react").JSX.Element;
 export default Box;
 //# sourceMappingURL=BoxIcon.d.ts.map

package/icons/BoxIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxIcon.d.ts","sourceRoot":"","sources":["../../icons/BoxIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGtE;;GAEG;AACH,QAAA,MAAM,GAAG,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CAE7C,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"BoxIcon.d.ts","sourceRoot":"","sources":["../../icons/BoxIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGtE;;GAEG;AACH,QAAA,MAAM,GAAG,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,gCAE7C,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/icons/BrowseIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The browse icon component.
  */
-declare const Browse: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const Browse: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default Browse;
 //# sourceMappingURL=BrowseIcon.d.ts.map

package/icons/BrowseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrowseIcon.d.ts","sourceRoot":"","sources":["../../icons/BrowseIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAE1D,eAAe,MAAM,CAAC"}
+{"version":3,"file":"BrowseIcon.d.ts","sourceRoot":"","sources":["../../icons/BrowseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBACQ,CAAC;AAE1D,eAAe,MAAM,CAAC"}

package/icons/BurgerIcon.d.ts

@@ -2,6 +2,6 @@ import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The burger icon component.
  */
-declare const Burger: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const Burger: (props: Omit<IconProps, "content">) => import("react").JSX.Element;
 export default Burger;
 //# sourceMappingURL=BurgerIcon.d.ts.map

package/icons/BurgerIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BurgerIcon.d.ts","sourceRoot":"","sources":["../../icons/BurgerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAE1D,eAAe,MAAM,CAAC"}
+{"version":3,"file":"BurgerIcon.d.ts","sourceRoot":"","sources":["../../icons/BurgerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,gCACQ,CAAC;AAE1D,eAAe,MAAM,CAAC"}

package/icons/CalendarIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The calendar icon component.
  */
-declare const Calendar: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const Calendar: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default Calendar;
 //# sourceMappingURL=CalendarIcon.d.ts.map

package/icons/CalendarIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarIcon.d.ts","sourceRoot":"","sources":["../../icons/CalendarIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAMtE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACiB,CAAC;AAErE,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CalendarIcon.d.ts","sourceRoot":"","sources":["../../icons/CalendarIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAMtE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBACiB,CAAC;AAErE,eAAe,QAAQ,CAAC"}

package/icons/CartCouponIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * Cart discount default icon
  */
-declare const CartCouponIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const CartCouponIcon: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default CartCouponIcon;
 //# sourceMappingURL=CartCouponIcon.d.ts.map

package/icons/CartCouponIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartCouponIcon.d.ts","sourceRoot":"","sources":["../../icons/CartCouponIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAgEtE;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CAIvD,CAAC;AAEH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CartCouponIcon.d.ts","sourceRoot":"","sources":["../../icons/CartCouponIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAgEtE;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBAIvD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/icons/CartIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The cart icon component.
  */
-declare const CartIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const CartIcon: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default CartIcon;
 //# sourceMappingURL=CartIcon.d.ts.map

package/icons/CartIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartIcon.d.ts","sourceRoot":"","sources":["../../icons/CartIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACI,CAAC;AAExD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CartIcon.d.ts","sourceRoot":"","sources":["../../icons/CartIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBACI,CAAC;AAExD,eAAe,QAAQ,CAAC"}

package/icons/CartPlusIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The cart plus icon component.
  */
-declare const CartPlus: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const CartPlus: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default CartPlus;
 //# sourceMappingURL=CartPlusIcon.d.ts.map