@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/checkout/components/ResponsiveBackButton/ResponsiveBackButton.js

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
+import { I18n, ArrowIcon } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useNavigation } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,21 +10,11 @@ const useStyles = makeStyles()(theme => ({
     display: 'flex',
     padding: theme.spacing(4, 2, 2, 2)
   },
-  button: {
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    padding: '0 !important',
-    ' > div ': {
-      padding: 0,
-      display: 'flex'
-    }
-  },
   buttonIcon: {
     display: 'inline-block',
-    fontSize: `${theme.components.icon.medium} !important`,
+    fontSize: theme.components.icon.medium,
     alignSelf: 'center',
-    marginRight: theme.spacing(0.5),
-    marginLeft: -3,
-    marginTop: -2
+    marginRight: theme.spacing(0.5)
   }
 }));
 
@@ -50,10 +41,9 @@ const ResponsiveBackButton = ({
   }, [onClick, pop]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.container,
-    children: /*#__PURE__*/_jsxs(RippleButton, {
-      flat: true,
-      className: classes.button,
-      type: "secondary",
+    children: /*#__PURE__*/_jsxs(Button, {
+      variant: "link",
+      color: "primary",
       onClick: handleClick,
       children: [/*#__PURE__*/_jsx(ArrowIcon, {
         className: classes.buttonIcon

package/components/Badge/Badge.d.ts

@@ -0,0 +1,30 @@
+export interface BadgeProps {
+    /**
+     * The number to display. The badge renders nothing when this is 0.
+     */
+    count: number;
+    /**
+     * Counts above this are displayed as `{max}+`.
+     */
+    max?: number;
+    /**
+     * Additional CSS classes. Callers own the badge's positioning.
+     */
+    className?: string;
+    /**
+     * Inline style overrides.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Renders an empty bubble when false, to indicate state without a number.
+     */
+    showCount?: boolean;
+    [key: `data-${string}`]: string;
+}
+/**
+ * A counter bubble used to display item counts on icons, e.g. within the tab bar or app bar.
+ * @returns The rendered component.
+ */
+declare const Badge: ({ count, max, className, style, showCount, ...restProps }: BadgeProps) => import("react").JSX.Element | null;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../components/Badge/Badge.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;CACjC;AAED;;;GAGG;AACH,QAAA,MAAM,KAAK,GAAI,2DAOZ,UAAU,uCAqBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Badge/Badge.js

@@ -0,0 +1,49 @@
+import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from "../Typography";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.components.badge.background,
+    color: theme.contrastColor(theme.components.badge.background),
+    lineHeight: 1,
+    borderRadius: theme.spacing(1),
+    height: theme.spacing(2),
+    minWidth: theme.spacing(2),
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5)
+  }
+}));
+/**
+ * A counter bubble used to display item counts on icons, e.g. within the tab bar or app bar.
+ * @returns The rendered component.
+ */
+const Badge = ({
+  count,
+  max,
+  className,
+  style,
+  showCount = true,
+  ...restProps
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  if (!count) {
+    return null;
+  }
+  const label = max !== undefined && count > max ? `${max}+` : `${count}`;
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "caption",
+    component: "div",
+    fontWeight: "bold",
+    style: style,
+    className: cx(classes.root, className, 'theme__badge'),
+    ...restProps,
+    children: showCount ? label : ''
+  });
+};
+export default Badge;

package/components/Badge/index.d.ts

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

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

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

package/components/Badge/index.js

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

package/components/Card/Card.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { ShadowSize } from '@shopgate/engage/styles';
+export type CardVariant = 'elevation' | 'outlined' | 'plain';
+export interface CardOwnProps {
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+    /** Element or component to render as. @default 'div' */
+    component?: React.ElementType;
+    /** Overrides the merchant-configured style. `plain` renders no chrome at all. */
+    variant?: CardVariant;
+    /** Overrides the configured elevation. Ignored unless the resolved variant is `elevation`. */
+    elevation?: number | ShadowSize;
+    /** Removes the rounded corners. */
+    square?: boolean;
+}
+export type CardProps = CardOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof CardOwnProps> & {
+    [key: `data-${string}`]: string;
+};
+/**
+ * A themed content surface built on `Paper`, reading the merchant's card settings.
+ */
+declare const Card: React.ForwardRefExoticComponent<CardOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof CardOwnProps> & {
+    [key: `data-${string}`]: string;
+} & React.RefAttributes<HTMLElement>>;
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

package/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAK1D,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wDAAwD;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,iFAAiF;IACjF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAChC,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,SAAS,GACnB,YAAY,GACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,YAAY,CAAC,GAC3D;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAA;CAAE,CAAC;AAUxC;;GAEG;AACH,QAAA,MAAM,IAAI;;qCA2BR,CAAC;AAIH,eAAe,IAAI,CAAC"}

package/components/Card/Card.js

@@ -0,0 +1,57 @@
+import React, { forwardRef } from 'react';
+import { useTheme, makeStyles } from '@shopgate/engage/styles';
+import Paper from "../Paper";
+import { useCardAppearance } from "./useCardAppearance";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles({
+  name: 'Card'
+})((theme, {
+  variant
+}) => ({
+  root: {
+    ...(variant !== 'plain' && {
+      overflow: 'hidden'
+    })
+  }
+}));
+
+/**
+ * A themed content surface built on `Paper`, reading the merchant's card settings.
+ */
+const Card = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  id,
+  variant,
+  elevation,
+  square,
+  ...rest
+}, ref) => {
+  const theme = useTheme();
+  const appearance = useCardAppearance();
+  const resolvedVariant = variant ?? appearance.variant;
+  const isPlain = resolvedVariant === 'plain';
+  const paperVariant = resolvedVariant === 'outlined' ? 'outlined' : 'elevation';
+  const {
+    classes,
+    cx
+  } = useStyles({
+    variant: resolvedVariant
+  });
+  return /*#__PURE__*/_jsx(Paper, {
+    ref: ref,
+    id: id,
+    variant: paperVariant,
+    elevation: isPlain ? 0 : elevation ?? appearance.elevation,
+    square: square || isPlain,
+    borderRadius: theme.components.cards.borderRadius,
+    background: isPlain ? 'transparent' : theme.components.cards.backgroundColor,
+    border: theme.components.cards.border,
+    shadowColor: theme.components.cards.shadowColor,
+    className: cx(classes.root, 'engage__card', 'ui-shared__card', className),
+    ...rest,
+    children: children
+  });
+});
+Card.displayName = 'Card';
+export default Card;

package/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Card';
+export type { CardProps, CardVariant } from './Card';
+export { useCardAppearance } from './useCardAppearance';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/components/Card/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Card";
+export { useCardAppearance } from "./useCardAppearance";

package/components/Card/useCardAppearance.d.ts

@@ -0,0 +1,11 @@
+import type { ShadowSize } from '@shopgate/engage/styles';
+import type { CardVariant } from './Card';
+/**
+ * Resolves the merchant-configured card appearance from app settings.
+ * @returns The card variant and, for the shadow style, its elevation size.
+ */
+export declare const useCardAppearance: () => {
+    variant: CardVariant;
+    elevation: ShadowSize;
+};
+//# sourceMappingURL=useCardAppearance.d.ts.map

package/components/Card/useCardAppearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardAppearance.d.ts","sourceRoot":"","sources":["../../../components/Card/useCardAppearance.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAQ1C;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAO;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,SAAS,EAAE,UAAU,CAAA;CAQjF,CAAC"}

package/components/Card/useCardAppearance.js

@@ -0,0 +1,22 @@
+import { useSelector } from 'react-redux';
+import { getCardSettings, getCardShadowSize } from '@shopgate/engage/settings/selectors/appSettings';
+const VARIANT_BY_STYLE = {
+  shadow: 'elevation',
+  border: 'outlined',
+  flat: 'elevation'
+};
+
+/**
+ * Resolves the merchant-configured card appearance from app settings.
+ * @returns The card variant and, for the shadow style, its elevation size.
+ */
+export const useCardAppearance = () => {
+  const {
+    style
+  } = useSelector(getCardSettings);
+  const elevation = useSelector(getCardShadowSize);
+  return {
+    variant: VARIANT_BY_STYLE[style] ?? 'elevation',
+    elevation
+  };
+};

package/components/ChipLayout/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
 import { I18n } from '@shopgate/engage/components';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { ButtonBase } from '@shopgate/engage/components/v2';
 import { makeStyles, useTheme } from '@shopgate/engage/styles';
 
 /**
@@ -147,9 +147,7 @@ const ChipLayout = ({
     }), /*#__PURE__*/_jsx("div", {
       ref: moreButtonRef,
       className: classes.moreButtonWrapper,
-      children: /*#__PURE__*/_jsx(RippleButton, {
-        fill: true,
-        type: "plain",
+      children: /*#__PURE__*/_jsx(ButtonBase, {
         className: moreButtonClassName,
         onClick: handleMoreButton,
         children: /*#__PURE__*/_jsx(I18n.Text, {

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/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/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/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/SheetList/components/Item/index.js

@@ -86,8 +86,12 @@ const Item = ({
   testId
 }) => {
   const theme = useTheme();
-  const glowHover = useMemo(() => ({
-    boxShadow: `${theme.spacing(-2.5)}px 0 0 ${theme.palette.grey.light}, ${theme.spacing(2.5)}px 0 0 ${theme.palette.grey.light}`
+  const glowStyles = useMemo(() => ({
+    glow: {
+      left: theme.spacing(-2),
+      right: theme.spacing(-2),
+      width: 'auto'
+    }
   }), [theme]);
   const {
     classes,
@@ -147,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,
@@ -169,9 +171,7 @@ const Item = ({
     "aria-selected": isSelected,
     children: /*#__PURE__*/_jsx(Glow, {
       className: className,
-      styles: {
-        hover: glowHover
-      },
+      styles: glowStyles,
       children: renderContent()
     })
   });

package/components/Tabs/components/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/components/Tab.jsx"],"names":[],"mappings":";AAqCA;;;;GAIG;AACH,4BAHW,MAAM,GACJ,GAAG,CA0Df;;;;;;;;;;;;;;;;;;;;;;;sBAjGqB,YAAY"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/components/Tab.jsx"],"names":[],"mappings":";AAmCA;;;;GAIG;AACH,4BAHW,MAAM,GACJ,GAAG,CA0Df;;;;;;;;;;;;;;;;;;;;;;;sBA/FqB,YAAY"}

package/components/Tabs/components/Tab.js

@@ -1,24 +1,22 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import Button from '@shopgate/pwa-ui-shared/Button';
+import { Button } from '@shopgate/engage/components/v2';
 import { ViewContext } from "../../View";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
-    '&&': {
-      maxWidth: 200,
-      minWidth: 72,
-      position: 'relative',
-      boxSizing: 'border-box',
-      minHeight: 48,
-      flexShrink: 0,
-      flexGrow: 1,
-      padding: '6px 6px',
-      overflow: 'hidden',
-      whiteSpace: 'normal',
-      textAlign: 'center'
-    },
+    maxWidth: 200,
+    minWidth: 72,
+    position: 'relative',
+    boxSizing: 'border-box',
+    minHeight: 48,
+    flexShrink: 0,
+    flexGrow: 1,
+    padding: '6px 6px',
+    overflow: 'hidden',
+    whiteSpace: 'normal',
+    textAlign: 'center',
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
@@ -84,8 +82,8 @@ const Tab = props => {
     }
   };
   return /*#__PURE__*/_jsxs(Button, {
-    flat: true,
-    type: selected ? 'secondary' : 'regular',
+    variant: "text",
+    color: selected ? 'primary' : 'inherit',
     className: cx(classes.root, className),
     role: "tab",
     "aria-selected": selected,

package/components/Typography/Typography.d.ts

@@ -9,7 +9,7 @@ declare const useStyles: (params: void, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "root" | "gutterBottom" | "noWrap" | "paragraph" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "fontWeightLight" | "fontWeightRegular" | "fontWeightMedium" | "fontWeightBold" | "srOnly" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "colorInherit" | "colorPrimary" | "colorSecondary" | "colorTextPrimary" | "colorTextSecondary" | "colorError" | "colorWarning" | "colorSuccess" | "displayInline" | "displayBlock", string>;
+    classes: Record<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "price" | "root" | "fontWeightLight" | "fontWeightRegular" | "fontWeightMedium" | "fontWeightBold" | "gutterBottom" | "noWrap" | "paragraph" | "srOnly" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "colorInherit" | "colorPrimary" | "colorSecondary" | "colorTextPrimary" | "colorTextSecondary" | "colorError" | "colorWarning" | "colorSuccess" | "displayInline" | "displayBlock", string>;
     theme: import("@shopgate/engage/styles").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/components/Typography/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAE/F,KAAK,OAAO,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAUjE,QAAA,MAAM,SAAS;;cA2ET,CAAC;;;;;;CAyDJ,CAAC;AAeJ;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5D,KAAK,CAAC,EACF,SAAS,GACT,SAAS,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,OAAO,GACP,SAAS,GACT,SAAS,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACzC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC7D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAC9D,kBAAkB,CAAC,CAAC,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;wBAgErB,CAC7C,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAEpC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI;AAJ9B,wBAI+B"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAE/F,KAAK,OAAO,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAUjE,QAAA,MAAM,SAAS;;cAyEQ,CAAA;;;;;;CA6DpB,CAAC;AAeJ;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5D,KAAK,CAAC,EACF,SAAS,GACT,SAAS,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,OAAO,GACP,SAAS,GACT,SAAS,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACzC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC7D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAC9D,kBAAkB,CAAC,CAAC,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;wBAgErB,CAC7C,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAEpC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI;AAJ9B,wBAI+B"}

package/components/Typography/Typography.js

@@ -63,6 +63,8 @@ const useStyles = makeStyles({
   subtitle2: theme.typography.subtitle2,
   /* Styles applied to the root element if `variant="overline"`. */
   overline: theme.typography.overline,
+  /* Styles applied to the root element if `variant="price"`. */
+  price: theme.typography.price,
   /* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */
   srOnly: {
     position: 'absolute',

package/components/View/components/Content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAiQe,yDAUd;;kBApQM,OAAO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAoQe,yDAUd;;kBAvQM,OAAO"}

package/components/View/components/Content/index.js

@@ -38,7 +38,10 @@ const useStyles = makeStyles()({
     WebkitOverflowScrolling: 'touch',
     ...(isAdminPreviewActive() && {
       scrollbarWidth: 'thin',
-      backgroundColor: 'var(--page-background-color)'
+      backgroundColor: 'var(--page-background-color)',
+      // Fill the positioned ancestor exactly. In Safari `100vw` (from containerBase)
+      // includes the vertical scrollbar width, causing a spurious horizontal scrollbar.
+      width: '100%'
     })
   },
   containerWindow: {

package/components/constants.d.ts

@@ -0,0 +1,6 @@
+export const PORTAL_PRODUCT_IMAGE: "component.product-image";
+export const PORTAL_PRODUCT_MEDIA: "component.product-media";
+export const PORTAL_PRODUCT_MEDIA_SECTION: "component.product-media-section";
+export const PORTAL_PRODUCT_BADGES: "component.product-badges";
+export const PORTAL_PRODUCT_IMAGE_SLIDER: "component.product-image-slider";
+//# sourceMappingURL=constants.d.ts.map

package/components/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../components/constants.js"],"names":[],"mappings":"AAAA,mCAAoC,yBAAyB,CAAC;AAC9D,mCAAoC,yBAAyB,CAAC;AAC9D,2CAA4C,iCAAiC,CAAC;AAC9E,oCAAqC,0BAA0B,CAAC;AAChE,0CAA2C,gCAAgC,CAAC"}