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

package/components/Typography/Typography.d.ts

@@ -1,132 +1,95 @@
 import * as React from 'react';
-import { Variant as ThemeVariant } from '../../styles/theme/createTheme/createTypography';
-
+import type { Variant as ThemeVariant } from '../../styles/theme/createTheme/createTypography';
 type Variant = ThemeVariant | 'srOnly';
-
-export type TypographyClassKey =
-  | 'root'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'subtitle1'
-  | 'subtitle2'
-  | 'body1'
-  | 'body2'
-  | 'caption'
-  | 'button'
-  | 'overline'
-  | 'srOnly'
-  | 'alignLeft'
-  | 'alignCenter'
-  | 'alignRight'
-  | 'alignJustify'
-  | 'noWrap'
-  | 'gutterBottom'
-  | 'paragraph'
-  | 'colorInherit'
-  | 'colorPrimary'
-  | 'colorSecondary'
-  | 'colorTextPrimary'
-  | 'colorTextSecondary'
-  | 'colorTextTertiary'
-  | 'colorError'
-  | 'colorWarning'
-  | 'colorSuccess'
-  | 'displayInline'
-  | 'displayBlock';
-
 /**
- * Props for the polymorphic Typography component.
+ * Named font weights mapped to the theme's `fontWeight*` tokens.
+ */
+export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
+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>;
+    theme: import("@shopgate/engage/styles").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+/**
+ * Own props of the polymorphic Typography component.
  *
  * @template C - the element or component type to render (defaults to 'span')
  */
-export type TypographyProps<
-  C extends React.ElementType = 'span'
-> = {
-  /**
-   * Set the text-align on the component.
-   * @default "inherit"
-   */
-  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-  color?:
-    | 'initial'
-    | 'inherit'
-    | 'primary'
-    | 'secondary'
-    | 'textPrimary'
-    | 'textSecondary'
-    | 'textTertiary'
-    | 'error'
-    | 'warning'
-    | 'success';
-  /**
-   * Controls the display type
-   * @default "initial"
-   */
-  display?: 'initial' | 'block' | 'inline';
-  /**
-   * If `true`, the text will have a bottom margin.
-   * @default false
-   */
-  gutterBottom?: boolean;
-  /**
-   * If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
-   * Note that text overflow can only happen with block or inline-block level elements
-   * (the element needs to have a width in order to overflow).
-   * @default false
-   */
-  noWrap?: boolean;
-  /**
-   * 	If true, the text will have a bottom margin.
-   * @default false
-   */
-  paragraph?: boolean;
-  /**
-   * Applies the theme typography styles.
-   * @default "body1"
-   */
-  variant?: Variant | 'inherit';
-  /**
-   * The component used for the root node. Either a string to use a HTML element or a component.
-   * Overrides the behavior of the variantMapping prop.
-   */
-  component?: C;
-  /**
-   * The component maps the variant prop to a range of different HTML element types.
-   * For instance, subtitle1 to <h6>. If you wish to change that mapping, you can provide your own.
-   * Alternatively, you can use the component prop.
-   */
-  variantMapping?: Partial<Record<Variant, string>>;
-  /**
-   * Additional CSS class names to apply to the root element.
-   */
-  className?: string;
-  /**
-   * Override specific variant styles
-   */
-  classes?: Partial<Record<TypographyClassKey, string>>;
-  /**
-   * Content to render inside the component
-   */
-  children?: React.ReactNode;
-  /**
-   * Element type or custom component to render
-   * @internal
-   */
-  as?: C;
-} & Omit<React.ComponentPropsWithRef<C>, 'children' | 'as' | 'component'>;
-
+export type TypographyOwnProps<C extends React.ElementType = 'span'> = {
+    /**
+     * Set the text-align on the component.
+     * @default "inherit"
+     */
+    align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    color?: 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error' | 'warning' | 'success';
+    /**
+     * Controls the display type
+     * @default "initial"
+     */
+    display?: 'initial' | 'block' | 'inline';
+    /**
+     * Overrides the font weight defined by the variant, using the theme's font weight tokens.
+     */
+    fontWeight?: FontWeight;
+    /**
+     * If `true`, the text will have a bottom margin.
+     * @default false
+     */
+    gutterBottom?: boolean;
+    /**
+     * If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     * @default false
+     */
+    noWrap?: boolean;
+    /**
+     * If true, the text will have a bottom margin.
+     * @default false
+     */
+    paragraph?: boolean;
+    /**
+     * Applies the theme typography styles.
+     * @default "body1"
+     */
+    variant?: Variant | 'inherit';
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component.
+     * Overrides the behavior of the variantMapping prop.
+     */
+    component?: C;
+    /**
+     * The component maps the variant prop to a range of different HTML element types.
+     * For instance, subtitle1 to <h6>. If you wish to change that mapping, you can provide your own.
+     * Alternatively, you can use the component prop.
+     */
+    variantMapping?: Partial<Record<Variant, React.ElementType>>;
+    /**
+     * Additional CSS class names to apply to the root element.
+     */
+    className?: string;
+    /**
+     * Override specific variant styles
+     */
+    classes?: Partial<ReturnType<typeof useStyles>['classes']>;
+    /**
+     * Content to render inside the component
+     */
+    children?: React.ReactNode;
+};
 /**
- * The Typography component is used to render text with various styles and alignments.
- * It uses the theme's typography styles and can be customized with props.
+ * Props for the polymorphic Typography component, merged with the props of the
+ * underlying element or component.
+ *
+ * @template C - the element or component type to render (defaults to 'span')
  */
-export declare const Typography: <
-  C extends React.ElementType = 'span'
->(
-  props: TypographyProps<C> & { ref?: React.ComponentPropsWithRef<C>['ref'] }
-) => React.ReactElement | null;
-
-export default Typography;
+export type TypographyProps<C extends React.ElementType = 'span'> = TypographyOwnProps<C> & Omit<React.ComponentPropsWithRef<C>, keyof TypographyOwnProps<C>>;
+declare const _default: <C extends React.ElementType = "span">(props: TypographyProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>["ref"];
+}) => React.ReactElement | null;
+export default _default;
+//# sourceMappingURL=Typography.d.ts.map

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

@@ -0,0 +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"}

package/components/Typography/Typography.js

@@ -1,29 +1,42 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 
 /**
- * Capitalizes the first letter of a string.
- * @param {string} string The string to capitalize.
- * @returns {string} The string with the first letter capitalized.
+ * Named font weights mapped to the theme's `fontWeight*` tokens.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
-
 /**
- * @typedef {import('../../styles').Theme} Theme
+ * Capitalizes the first letter of a string while preserving its literal type.
+ * @param string The string to capitalize.
+ * @returns The string with the first letter capitalized.
  */
-
-/**
- * Creates the styles for the Typography component.
- * @param {Theme} theme The theme object.
- * @returns {Object} The styles object.
- */
-export const styles = theme => ({
+const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
+const useStyles = makeStyles({
+  name: 'Typography'
+})(theme => ({
   /* Styles applied to the root element. */
   root: {
     margin: 0
   },
+  /* Styles applied to the root element if `nowrap={true}`. */
+  noWrap: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  /* Styles applied to the root element if `gutterBottom={true}`. */
+  gutterBottom: {
+    marginBottom: '0.35em'
+  },
+  /* Styles applied to the root element if `paragraph={true}`. */
+  paragraph: {
+    marginBottom: 16
+  },
+  /*
+   * The classes below are applied through props via dynamic keys (e.g. `classes[variant]`,
+   * `classes[`color${capitalize(color)}`]`), which the linter cannot trace statically.
+   */
+  /* eslint-disable tss-unused-classes/unused-classes */
   /* Styles applied to the root element if `variant="body2"`. */
   body2: theme.typography.body2,
   /* Styles applied to the root element if `variant="body1"`. */
@@ -73,20 +86,6 @@ export const styles = theme => ({
   alignJustify: {
     textAlign: 'justify'
   },
-  /* Styles applied to the root element if `nowrap={true}`. */
-  noWrap: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  },
-  /* Styles applied to the root element if `gutterBottom={true}`. */
-  gutterBottom: {
-    marginBottom: '0.35em'
-  },
-  /* Styles applied to the root element if `paragraph={true}`. */
-  paragraph: {
-    marginBottom: 16
-  },
   /* Styles applied to the root element if `color="inherit"`. */
   colorInherit: {
     color: 'inherit'
@@ -126,11 +125,25 @@ export const styles = theme => ({
   /* Styles applied to the root element if `display="block"`. */
   displayBlock: {
     display: 'block'
+  },
+  /* Styles applied to the root element if `fontWeight="light"`. */
+  fontWeightLight: {
+    fontWeight: theme.typography.fontWeightLight
+  },
+  /* Styles applied to the root element if `fontWeight="regular"`. */
+  fontWeightRegular: {
+    fontWeight: theme.typography.fontWeightRegular
+  },
+  /* Styles applied to the root element if `fontWeight="medium"`. */
+  fontWeightMedium: {
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  /* Styles applied to the root element if `fontWeight="bold"`. */
+  fontWeightBold: {
+    fontWeight: theme.typography.fontWeightBold
   }
-});
-const useTypographyStyles = makeStyles({
-  name: 'Typography'
-})(styles);
+  /* eslint-enable tss-unused-classes/unused-classes */
+}));
 const defaultVariantMapping = {
   h1: 'h1',
   h2: 'h2',
@@ -143,7 +156,25 @@ const defaultVariantMapping = {
   body1: 'p',
   body2: 'p'
 };
-const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
+
+/**
+ * Own props of the polymorphic Typography component.
+ *
+ * @template C - the element or component type to render (defaults to 'span')
+ */
+
+/**
+ * Props for the polymorphic Typography component, merged with the props of the
+ * underlying element or component.
+ *
+ * @template C - the element or component type to render (defaults to 'span')
+ */
+
+/**
+ * The Typography component is used to render text with various styles and alignments.
+ * It uses the theme's typography styles and can be customized with props.
+ */
+function Typography(props, ref) {
   const {
     align = 'inherit',
     className,
@@ -151,6 +182,7 @@ const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
     color = 'initial',
     component,
     display = 'initial',
+    fontWeight,
     gutterBottom = false,
     noWrap = false,
     paragraph = false,
@@ -161,41 +193,24 @@ const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classes,
     cx
-  } = useTypographyStyles(undefined, {
+  } = useStyles(undefined, {
     props: {
       classes: classesOverrides
     }
   });
-  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
+  const mappedComponent = variant !== 'inherit' ? variantMapping[variant] ?? defaultVariantMapping[variant] : undefined;
+  const Component = component || (paragraph ? 'p' : mappedComponent) || 'span';
   return /*#__PURE__*/_jsx(Component, {
-    className: cx(classes.root, 'engage__typography', {
-      [classes[variant]]: variant !== 'inherit',
+    className: cx(classes.root, 'engage__typography', variant !== 'inherit' && classes[variant], color !== 'initial' && classes[`color${capitalize(color)}`], align !== 'inherit' && classes[`align${capitalize(align)}`], display !== 'initial' && classes[`display${capitalize(display)}`], fontWeight && classes[`fontWeight${capitalize(fontWeight)}`], {
       [`engage__typography_${variant}`]: variant !== 'inherit',
-      [classes[`color${capitalize(color)}`]]: color !== 'initial',
       [classes.noWrap]: noWrap,
       [classes.gutterBottom]: gutterBottom,
       'engage__typography__gutter-bottom': gutterBottom,
       [classes.paragraph]: paragraph,
-      engage__typography__paragraph: paragraph,
-      [classes[`align${capitalize(align)}`]]: align !== 'inherit',
-      [classes[`display${capitalize(display)}`]]: display !== 'initial'
+      engage__typography__paragraph: paragraph
     }, className),
     ref: ref,
     ...other
   });
-});
-Typography.defaultProps = {
-  align: 'inherit',
-  children: null,
-  classes: undefined,
-  className: undefined,
-  color: 'initial',
-  component: null,
-  display: 'initial',
-  gutterBottom: false,
-  noWrap: false,
-  paragraph: false,
-  variant: 'body1',
-  variantMapping: defaultVariantMapping
-};
-export default Typography;
+}
+export default /*#__PURE__*/React.forwardRef(Typography);

package/components/Typography/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Typography } from './Typography';
-export type { TypographyProps } from './Typography';
+export type { TypographyProps, TypographyOwnProps, FontWeight } from './Typography';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Above/index.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,8BAFa,GAAG,CAmBf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Above/index.jsx"],"names":[],"mappings":";AAIA;;GAEG;AACH,8BAFa,GAAG,CAoBf"}

package/components/View/components/Above/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@shopgate/engage/styles';
 import { ViewContext } from "../../context";
 
 /**
@@ -6,6 +7,7 @@ import { ViewContext } from "../../context";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function ViewAbove() {
+  const theme = useTheme();
   return /*#__PURE__*/_jsx(ViewContext.Consumer, {
     children: ({
       top
@@ -15,7 +17,7 @@ function ViewAbove() {
       }
       const styles = {
         flexShrink: 0,
-        height: `calc(${top}px + var(--safe-area-inset-top))`
+        height: `calc(${top}px + ${theme.layout.safeArea.top})`
       };
       return /*#__PURE__*/_jsx("div", {
         "aria-hidden": true,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Below/index.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,8BAFa,GAAG,CAmBf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Below/index.jsx"],"names":[],"mappings":";AAIA;;GAEG;AACH,8BAFa,GAAG,CAoBf"}

package/components/View/components/Below/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@shopgate/engage/styles';
 import { ViewContext } from "../../context";
 
 /**
@@ -6,6 +7,7 @@ import { ViewContext } from "../../context";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function ViewBelow() {
+  const theme = useTheme();
   return /*#__PURE__*/_jsx(ViewContext.Consumer, {
     children: ({
       bottom
@@ -15,7 +17,7 @@ function ViewBelow() {
       }
       const styles = {
         flexShrink: 0,
-        height: `calc(${bottom}px + var(--safe-area-inset-bottom))`
+        height: `calc(${bottom}px + ${theme.layout.safeArea.bottom})`
       };
       return /*#__PURE__*/_jsx("div", {
         "aria-hidden": true,

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

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

package/components/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,+EAUd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAiQe,yDAUd;;kBApQM,OAAO"}

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

@@ -13,7 +13,7 @@ import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
 import { VIEW_CONTENT } from '@shopgate/pwa-common/constants/Portals';
 import { applyScrollContainer, isIOs } from '@shopgate/engage/core/helpers';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { ConditionalWrapper } from "../../../ConditionalWrapper";
 import Above from "../Above";
 import Below from "../Below";
@@ -36,7 +36,7 @@ const useStyles = makeStyles()({
     overflowScrolling: 'touch',
     position: 'absolute',
     WebkitOverflowScrolling: 'touch',
-    ...(IS_PAGE_PREVIEW_ACTIVE && {
+    ...(isAdminPreviewActive() && {
       scrollbarWidth: 'thin',
       backgroundColor: 'var(--page-background-color)'
     })

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/View/index.jsx"],"names":[],"mappings":"AA4FA;;;GAGG;AACH,oCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAUvB;;4BA/F2B,WAAW"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/View/index.jsx"],"names":[],"mappings":"AAyFA;;;GAGG;AACH,oCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAUvB;;4BA7F2B,WAAW"}

package/components/View/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { applyScrollContainer } from '@shopgate/engage/core/helpers';
 import { RouteContext } from '@shopgate/pwa-common/context';
@@ -9,9 +8,6 @@ import Content from "./components/Content";
 import ViewProvider from "./provider";
 import { ViewContext } from "./context";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(() => ({
   root: applyScrollContainer() ? {
     position: 'absolute',
@@ -74,7 +70,7 @@ function ViewContainer({
 }
 ViewContainer.defaultProps = {
   'aria-hidden': false,
-  background: colors.light,
+  background: 'var(--sg-palette-background-default)',
   children: null,
   noScrollOnKeyboard: false,
   noContentPortal: false,

package/components/v2/Button/Button.d.ts

@@ -10,7 +10,7 @@ declare const useStyles: (params: ButtonOwnProps, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"text" | "label" | "small" | "root" | "icon" | "disabled" | "large" | "outlined" | "contained" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loader" | "loadingPlaceholder" | "loadingIndicator", string>;
+    classes: Record<"text" | "icon" | "small" | "large" | "label" | "root" | "disabled" | "outlined" | "contained" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loader" | "loadingPlaceholder" | "loadingIndicator", string>;
     theme: import("@shopgate/engage/styles").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/components/v2/ButtonBase/Ripple.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { RippleItem as RippleModel } from './hooks';
 interface RippleProps {
     ripples: RippleModel[];
@@ -5,6 +6,6 @@ interface RippleProps {
 /**
  * The Ripple component renders the ripple effect for button interactions.
  */
-declare function Ripple({ ripples }: RippleProps): import("react/jsx-runtime").JSX.Element;
+declare function Ripple({ ripples }: RippleProps): React.JSX.Element;
 export default Ripple;
 //# sourceMappingURL=Ripple.d.ts.map

package/components/v2/ButtonBase/Ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/Ripple.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AAqDzD,UAAU,WAAW;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,WAAW,2CAiBvC;AAwDD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AAqDzD,UAAU,WAAW;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,WAAW,qBAiBvC;AAwDD,eAAe,MAAM,CAAC"}

package/core/action-creators/merchantSettings.d.ts

@@ -1,2 +1,2 @@
-export function receiveMerchantSettings(settings: any[]): Object;
+export * from "../../settings/action-creators/merchantSettings";
 //# sourceMappingURL=merchantSettings.d.ts.map

package/core/action-creators/merchantSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"merchantSettings.d.ts","sourceRoot":"","sources":["../../../core/action-creators/merchantSettings.js"],"names":[],"mappings":"AAOO,0DAFM,MAAM,CAKjB"}
+{"version":3,"file":"merchantSettings.d.ts","sourceRoot":"","sources":["../../../core/action-creators/merchantSettings.js"],"names":[],"mappings":""}

package/core/action-creators/merchantSettings.js

@@ -1,11 +1,3 @@
-import { RECEIVE_MERCHANT_SETTINGS } from "../constants";
-
-/**
- * Creates the dispatched RECEIVE_MERCHANT_SETTINGS action object.
- * @param {Array} settings A list of shop settings.
- * @returns {Object} The dispatched action object.
- */
-export const receiveMerchantSettings = settings => ({
-  type: RECEIVE_MERCHANT_SETTINGS,
-  settings
-});
+// Backwards-compatible shim. The merchant settings action-creators now live in the
+// dedicated `settings` package: @shopgate/engage/settings/action-creators/merchantSettings
+export * from "../../settings/action-creators/merchantSettings";

package/core/action-creators/shopSettings.d.ts

@@ -1,3 +1,2 @@
-export function receiveShopSettings(settings: any[]): Object;
-export function errorShopSettings(error: Object): Object;
+export * from "../../settings/action-creators/shopSettings";
 //# sourceMappingURL=shopSettings.d.ts.map

package/core/action-creators/shopSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shopSettings.d.ts","sourceRoot":"","sources":["../../../core/action-creators/shopSettings.js"],"names":[],"mappings":"AAOO,sDAFM,MAAM,CAKjB;AAOK,yCAHI,MAAM,GACJ,MAAM,CAKjB"}
+{"version":3,"file":"shopSettings.d.ts","sourceRoot":"","sources":["../../../core/action-creators/shopSettings.js"],"names":[],"mappings":""}

package/core/action-creators/shopSettings.js

@@ -1,21 +1,3 @@
-import { RECEIVE_SHOP_SETTINGS, ERROR_SHOP_SETTINGS } from "../constants";
-
-/**
- * Creates the dispatched RECEIVE_SHOP_SETTINGS action object.
- * @param {Array} settings A list of shop settings.
- * @returns {Object} The dispatched action object.
- */
-export const receiveShopSettings = settings => ({
-  type: RECEIVE_SHOP_SETTINGS,
-  settings
-});
-
-/**
- * Creates the dispatched ERROR_SHOP_SETTINGS action object.
- * @param {Object} error An error object.
- * @returns {Object} The dispatched action object.
- */
-export const errorShopSettings = error => ({
-  type: ERROR_SHOP_SETTINGS,
-  error
-});
+// Backwards-compatible shim. The shop settings action-creators now live in the
+// dedicated `settings` package: @shopgate/engage/settings/action-creators/shopSettings
+export * from "../../settings/action-creators/shopSettings";