@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/checkout/paymentMethods/paypal/PaypalPayButton.js

@@ -3,19 +3,17 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getThemeSettings, showModal, MODAL_PIPELINE_ERROR } from '@shopgate/engage/core';
 import { connect } from 'react-redux';
+import { Typography } from '@shopgate/engage/components';
 import { i18n } from "../../../core/helpers/i18n";
 import { useCheckoutContext } from "../../hooks/common";
 import { usePaypal } from "./sdk";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
   headline: {
-    fontSize: '1.25rem',
-    fontWeight: 'normal',
     margin: '12px 0 12px 0',
-    color: theme.palette.text.primary,
     textTransform: 'none'
   }
-}));
+});
 
 /**
  * Paypal Pay button
@@ -115,7 +113,10 @@ const PaypalPayButton = ({
     return null;
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("h3", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      color: "textPrimary",
+      fontWeight: "regular",
       className: classes.headline,
       children: i18n.text('checkout.finalizePayment')
     }), /*#__PURE__*/_jsx("div", {

package/checkout/paymentMethods/stripe/StripeCreditCard.js

@@ -1,17 +1,13 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { useContext } from 'react';
-import { themeConfig } from '@shopgate/engage';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { TextField } from '@shopgate/engage/components';
-import { getCSSCustomProp, makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { CardNumberElement, CardCvcElement, CardExpiryElement } from '@stripe/react-stripe-js';
 import Section from "../../components/Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import StripeContext from "./StripeProvider.context";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: '0 16px',
@@ -19,12 +15,12 @@ const useStyles = makeStyles()(theme => ({
     flexDirection: 'column',
     flex: '0 0 auto',
     ' .formElement': {
-      background: 'var(--color-background-accent)',
+      background: theme.palette.background.emphasized,
       padding: 0,
       marginBottom: 38,
       borderTopLeftRadius: 4,
       borderTopRightRadius: 4,
-      borderBottom: `1px solid ${colors.shade12}`
+      borderBottom: `1px solid ${theme.components.border.medium}`
     },
     ' .formElement label': {
       color: theme.palette.text.secondary,
@@ -100,6 +96,7 @@ const StripeCreditCard = () => {
   const {
     classes
   } = useStyles();
+  const theme = useTheme();
   const cardRef = React.useRef();
   const {
     error,
@@ -126,9 +123,9 @@ const StripeCreditCard = () => {
   const textFieldStyles = {
     style: {
       base: {
-        color: getCSSCustomProp('--color-text-high-emphasis'),
+        color: theme.palette.text.primary,
         '::placeholder': {
-          color: getCSSCustomProp('--color-text-low-emphasis')
+          color: theme.palette.text.secondary
         }
       }
     }

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":"AAkBA,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,48 @@
+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),
+    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';
 
 /**
@@ -43,16 +43,16 @@ const useStyles = makeStyles()((theme, {
     marginLeft: 'auto',
     outline: 0,
     padding: 9,
-    fontSize: '0.8rem',
-    fontWeight: 500,
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     textTransform: 'uppercase'
   },
   moreButtonInverted: {
     marginLeft: 'auto',
     outline: 0,
     padding: 9,
-    fontSize: '0.8rem',
-    fontWeight: 500,
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     textTransform: 'uppercase'
   }
 }));
@@ -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/Form/Builder/ElementPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/ElementPhoneNumber.jsx"],"names":[],"mappings":";AA4DA;;;;GAIG;AACH,8EAgLG;uBAjPoB,OAAO"}
+{"version":3,"file":"ElementPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/ElementPhoneNumber.jsx"],"names":[],"mappings":";AAyDA;;;;GAIG;AACH,8EAgLG;uBA9OoB,OAAO"}

package/components/Form/Builder/ElementPhoneNumber.js

@@ -16,14 +16,10 @@ import fr from 'react-phone-number-input/locale/fr';
 import pt from 'react-phone-number-input/locale/pt';
 import flags from 'react-phone-number-input/flags';
 import { useCountriesNames } from '@shopgate/engage/i18n';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import Label from '@shopgate/pwa-ui-shared/TextField/components/Label';
 import FormHelper from "./FormHelper";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   phoneField: {
     position: 'relative',
@@ -32,11 +28,11 @@ const useStyles = makeStyles()(theme => ({
     paddingBottom: theme.spacing(2.5),
     ' input.PhoneInputInput': {
       outline: 'none',
-      fontSize: '1rem',
+      fontSize: theme.typography.body1.fontSize,
       lineHeight: '1.1875rem',
       borderRadius: 0,
       paddingBottom: theme.spacing(0.75),
-      borderBottom: `1px solid ${colors.shade12}`,
+      borderBottom: `1px solid ${theme.components.border.medium}`,
       '&:focus': {
         borderBottom: `2px solid ${theme.palette.primary.main}`,
         paddingBottom: theme.spacing(0.75) - 1

package/components/Form/Builder/stylePresets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylePresets.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/stylePresets.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;EAmBE;AAOK,6CAHI,MAAM,GACJ,MAAM,CA+HjB"}
+{"version":3,"file":"stylePresets.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/stylePresets.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;EAmBE;AAOK,6CAHI,MAAM,GACJ,MAAM,CA8HjB"}

package/components/Form/Builder/stylePresets.js

@@ -1,8 +1,4 @@
-import { themeConfig } from '@shopgate/engage';
 import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const {
-  colors
-} = themeConfig;
 export const TWO_COLUMN_LAYOUT = {
   [responsiveMediaQuery('>=md', {
     webOnly: false
@@ -38,9 +34,8 @@ export const getOutlinedFormFields = theme => ({
       position: 'relative',
       textOverflow: 'unset',
       whiteSpace: 'unset',
-      lineHeight: '15px',
       bottom: 'unset',
-      padding: '8px 8px 8px 16px'
+      padding: '6px 8px 6px 16px'
     }
   },
   ' .formBuilderField': {
@@ -57,34 +52,34 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker': {
     paddingBottom: 8,
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: 0,
     marginBottom: 32,
     borderTopLeftRadius: 4,
     borderTopRightRadius: 4,
-    borderBottom: `1px solid ${colors.shade12}`
+    borderBottom: `1px solid ${theme.components.border.medium}`
   },
   ' .phonePickerError': {
     borderBottom: `2px solid ${theme.palette.error.main}`
   },
   ' .phonePickerFocused:not(.phonePickerError)': {
-    borderBottom: '2px solid var(--color-primary)'
+    borderBottom: `2px solid ${theme.palette.primary.main}`
   },
   ' .formElement:not(.radioGroup) label': {
     paddingLeft: 24,
-    color: 'var(--color-text-low-emphasis)',
+    color: theme.palette.text.secondary,
     transform: 'translate3d(0, -18px, 0) scale3d(0.75, 0.75, 0.75)'
   },
   ' .textField label': {
     paddingLeft: 17,
-    color: 'var(--color-text-low-emphasis)',
+    color: theme.palette.text.secondary,
     '&.floating': {
       transform: 'translate3d(3px, -18px, 0) scale3d(0.75, 0.75, 0.75)'
     }
   },
   ' .formElement:not(.radioGroup) select, .formElement .info-field': {
     paddingLeft: 16,
-    color: 'var(--color-text-high-emphasis)'
+    color: theme.palette.text.primary
   },
   ' .formElement:not(.radioGroup):not(.checkbox) svg': {
     marginTop: 8,
@@ -92,7 +87,7 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .formElement:not(.radioGroup) .placeholder': {
     paddingLeft: 20,
-    color: 'var(--color-text-low-emphasis)'
+    color: theme.palette.text.secondary
   },
   ' .formElement.disabled, .textField.disabled': {
     ' input, select, svg': {
@@ -104,7 +99,7 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .textField input': {
     paddingLeft: 16,
-    color: 'var(--color-text-high-emphasis)'
+    color: theme.palette.text.primary
   },
   ' .underline': {
     marginBottom: 0,
@@ -133,12 +128,12 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .phonePicker .PhoneInputInput': {
     borderBottom: 'none',
-    color: 'var(--color-text-high-emphasis)',
+    color: theme.palette.text.primary,
     '&:focus': {
       borderBottom: 'none'
     },
     '::placeholder': {
-      color: 'var(--color-text-low-emphasis)'
+      color: theme.palette.text.secondary
     }
   },
   ' .phonePicker .errorText': {
@@ -154,6 +149,6 @@ export const getOutlinedFormFields = theme => ({
     marginBottom: 8
   },
   ' .placeholder': {
-    color: colors.shade12
+    color: theme.palette.grey.medium
   }
 });

package/components/Logo/connector.js

@@ -1,5 +1,7 @@
 import { connect } from 'react-redux';
-import { hasWebBridge, makeGetShopSettingByKey, SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP, SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB } from '@shopgate/engage/core';
+import { hasWebBridge } from '@shopgate/engage/core';
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP, SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Logo/index.jsx"],"names":[],"mappings":";;;;;QA2BY,GAAG;;;;;;;;;;;;;;;;;;;sBA1BO,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Logo/index.jsx"],"names":[],"mappings":";;;;;QAyBY,GAAG;;;;;;;;;;;;;;;;;;;sBAxBO,YAAY"}

package/components/Logo/index.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import appConfig from '@shopgate/pwa-common/helpers/config';
 import noop from 'lodash/noop';
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     alignItems: 'center',
@@ -16,8 +13,8 @@ const useStyles = makeStyles()(theme => ({
   },
   image: {
     margin: '0 auto',
-    maxHeight: variables.navigator.height,
-    maxWidth: `calc(var(--page-content-width) - ${variables.navigator.height * 3 + theme.spacing(4)}px)`,
+    maxHeight: theme.components.navigator.height,
+    maxWidth: `calc(var(--page-content-width) - (${theme.components.navigator.height} * 3) - ${theme.spacing(4)}px)`,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'

package/components/Menu/components/Item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Item/index.jsx"],"names":[],"mappings":";AA4BA;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAsCvB;;;;;;;;;;QAUY,oCAAQ;;QACV,kCAAQ;;;;sBA/EG,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Item/index.jsx"],"names":[],"mappings":";AAyBA;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CA+BvB;;;;;;;;;;QAUY,oCAAQ;;QACV,kCAAQ;;;;sBArEG,YAAY"}

package/components/Menu/components/Item/index.js

@@ -2,22 +2,17 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import compose from 'lodash/fp/compose';
 import Glow from '@shopgate/pwa-ui-shared/Glow';
-import Color from 'color';
-import { makeStyles, getCSSCustomProp } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()((theme, {
-  background
-}) => ({
+const useStyles = makeStyles()(theme => ({
   item: {
     position: 'relative',
     whiteSpace: 'nowrap',
-    padding: theme.spacing(1.75, 2.75),
-    lineHeight: 1,
+    padding: theme.spacing(1.3, 2.75),
     zIndex: 1,
     cursor: 'pointer',
     ':hover': {
-      background
+      background: theme.alpha(theme.palette.primary.main, 0.04)
     }
   }
 }));
@@ -38,16 +33,9 @@ const Item = ({
   closeMenu,
   onClick
 }) => {
-  let background = themeConfig.colors.shade8;
-  const customPropColor = getCSSCustomProp('--color-primary');
-  if (customPropColor) {
-    background = Color(customPropColor).alpha(0.04).toString();
-  }
   const {
     classes
-  } = useStyles({
-    background
-  });
+  } = useStyles();
   const handleClick = compose(onClick, () => setTimeout(closeMenu, CLOSE_DELAY));
   const handleKeyPress = useCallback(event => {
     if (event.key === 'Enter' || event.key === ' ') {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Menu/index.jsx"],"names":[],"mappings":";AAgCA;;;;GAIG;AACH,kEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;QAeU,kCAAQ;;;;iBAzFF,mBAAmB;sBANd,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Menu/index.jsx"],"names":[],"mappings":";AA+BA;;;;GAIG;AACH,kEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;QAeU,kCAAS;;;;iBAzFH,mBAAmB;sBALd,YAAY"}

package/components/Menu/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { ConnectedReactPortal } from '@shopgate/engage/components';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Position from "./components/Position";
 import Item from "./components/Item";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,9 +21,9 @@ const useStyles = makeStyles()(theme => ({
     left: 0,
     padding: theme.spacing(1, 0),
     minWidth: 130,
-    background: themeConfig.colors.light,
+    background: theme.palette.background.surface,
     borderRadius: 2,
-    boxShadow: themeConfig.shadows.contextMenu
+    boxShadow: '0 2px 6px rgba(0, 0, 0, .4)'
   }
 }));
 

package/components/MessageBar/MessageBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBar.d.ts","sourceRoot":"","sources":["../../../components/MessageBar/MessageBar.jsx"],"names":[],"mappings":";mDA8IW,MAAM,GAKL,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlJD,YAAY;uBADX,OAAO"}
+{"version":3,"file":"MessageBar.d.ts","sourceRoot":"","sources":["../../../components/MessageBar/MessageBar.jsx"],"names":[],"mappings":";mDA2IW,MAAM,GAKL,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA/ID,YAAY;uBADX,OAAO"}