@shopgate/engage 7.32.0-beta.5 → 7.32.0-beta.7

package/account/components/Profile/ProfileAddressCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileAddressCard.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileAddressCard.jsx"],"names":[],"mappings":";AAwEA;;GAEG;AACH;;;;;;IAFa,GAAG,CAkGf;;;;;;;;;;;;;;;;sBA1KqB,YAAY"}
+{"version":3,"file":"ProfileAddressCard.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileAddressCard.jsx"],"names":[],"mappings":";AAyEA;;GAEG;AACH;;;;;;IAFa,GAAG,CAkGf;;;;;;;;;;;;;;;;sBA3KqB,YAAY"}

package/account/components/Profile/ProfileAddressCard.js

@@ -8,6 +8,7 @@ import iso3166 from "../../../components/Form/Builder/helpers/iso-3166-2";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
+    margin: '5px 5px 10px',
     padding: 16,
     display: 'flex',
     flexDirection: 'column',

package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts

@@ -1,4 +1,4 @@
-import type { AppSettings } from '@shopgate/engage/settings/types/appSettings';
+import type { AppSettingsPayload } from '@shopgate/engage/settings/types/appSettings';
 import type { ColorSchemeName } from '@shopgate/engage/styles/theme/createTheme';
 export type CSSDeclarationValue = string | number;
 export type FrontendSettingsStyling = Record<string, Record<string, CSSDeclarationValue>>;
@@ -6,7 +6,7 @@ export type FrontendSettingsPreviewBridgeMessage = {
     type: 'receiveFrontendSettings';
     payload?: {
         styling?: FrontendSettingsStyling;
-        appSettings?: AppSettings;
+        appSettings?: AppSettingsPayload;
     };
 } | {
     type: 'setColorScheme';

package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAEjF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;AAE1F,MAAM,MAAM,oCAAoC,GAC5C;IACA,IAAI,EAAE,yBAAyB,CAAC;IAChC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,uBAAuB,CAAC;QAClC,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;CACH,GACC;IACA,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE;QACP,WAAW,EAAE,eAAe,CAAC;KAC9B,CAAC;CACH,GACC;IACA,IAAI,EAAE,8BAA8B,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAEjF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;AAE1F,MAAM,MAAM,oCAAoC,GAC5C;IACA,IAAI,EAAE,yBAAyB,CAAC;IAChC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,uBAAuB,CAAC;QAClC,WAAW,CAAC,EAAE,kBAAkB,CAAC;KAClC,CAAC;CACH,GACC;IACA,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE;QACP,WAAW,EAAE,eAAe,CAAC;KAC9B,CAAC;CACH,GACC;IACA,IAAI,EAAE,8BAA8B,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC"}

package/back-in-stock/components/Subscriptions/components/Subscription/index.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { getProductRoute, ProductImage } from '@shopgate/engage/product';
 import PropTypes from 'prop-types';
 import { BackInStockButton } from '@shopgate/engage/back-in-stock/components';
-import { getThemeSettings, i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core';
 import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -77,9 +77,6 @@ const Subscription = ({
   const {
     removeBackInStockSubscription
   } = useBackInStockSubscriptions();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
   const specialPrice = product.price?.unitPriceStriked;
@@ -94,7 +91,7 @@ const Subscription = ({
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx(ProductImage, {
         src: product.featuredImageBaseUrl,
-        resolutions: gridResolutions
+        context: "list"
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.infoContainer,

package/cart/components/CartItem/CartItemProductLayout.js

@@ -27,7 +27,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   image: {
     background: theme.palette.background.emphasized,
     marginBottom: theme.spacing(1.25),
-    height: leftColumnWidth,
     width: leftColumnWidth
   },
   content: {
@@ -218,6 +217,7 @@ export function CartItemProductLayout() {
               portalName: CART_ITEM_IMAGE,
               portalProps: portalProps,
               children: /*#__PURE__*/_jsx(ProductImage, {
+                context: "list",
                 src: product.featuredImageBaseUrl || product.featuredImageUrl
               })
             })

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -22,7 +22,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   imageColumn: {
     width: 120,
-    height: 120,
     marginRight: theme.spacing(1),
     flexShrink: 0,
     flexGrow: 0
@@ -163,7 +162,8 @@ const CartItemProductLayoutWide = () => {
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.imageColumn,
         children: /*#__PURE__*/_jsx(ProductImage, {
-          src: product.featuredImageBaseUrl || product.featuredImageUrl
+          src: product.featuredImageBaseUrl || product.featuredImageUrl,
+          context: "list"
         })
       }), /*#__PURE__*/_jsxs("div", {
         className: classes.detailsColumn,

package/cart/components/CartItems/CartItems.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardList, ResponsiveContainer } from '@shopgate/engage/components';
+import { ResponsiveContainer, Card } from '@shopgate/engage/components';
 import { FulfillmentSlotSwitcher } from '@shopgate/engage/locations';
 import { makeStyles } from '@shopgate/engage/styles';
 import PropTypes from 'prop-types';
@@ -14,15 +14,11 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: theme.spacing(-1.5)
   },
   card: {
-    background: theme.palette.background.surface,
     marginBottom: theme.spacing(1.5),
     ':last-of-type': {
       marginBottom: 0
     },
-    border: `1px solid ${theme.components.border.light}`,
-    boxSizing: 'border-box',
-    boxShadow: '0px 4px 2px rgba(0, 0, 0, 0.05)',
-    borderRadius: 5
+    boxSizing: 'border-box'
   }
 }));
 
@@ -54,7 +50,8 @@ const CartItems = ({
   isDirectShipOnly
 }) => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
   if (!cartItems || cartItems.length === 0) {
     return null;
@@ -69,8 +66,8 @@ const CartItems = ({
         isDirectShipOnly: isDirectShipOnly,
         isCheckoutConfirmation: isCheckoutConfirmation
       })
-    }), /*#__PURE__*/_jsxs(CardList, {
-      className: classes.items,
+    }), /*#__PURE__*/_jsxs("ul", {
+      className: cx('ui-shared__card-list', classes.items),
       children: [!isOrderDetails ? /*#__PURE__*/_jsx(ResponsiveContainer, {
         appAlways: true,
         breakpoint: "<=xs",
@@ -87,8 +84,9 @@ const CartItems = ({
           wrapCard: true,
           className: classes.card
         })
-      }), cartItems.map(item => /*#__PURE__*/_jsx(CardList.Item, {
+      }), cartItems.map(item => /*#__PURE__*/_jsx(Card, {
         className: classes.card,
+        component: "li",
         children: /*#__PURE__*/_jsx(CartItemProvider, {
           cartItem: item,
           isEditable: editable,

package/cart/components/CartItems/CartItemsSubstitution.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { CardList } from '@shopgate/engage/components';
+import { Card } from '@shopgate/engage/components';
 import Substitution, { SubstitutionWrapper } from "../Substitution";
 import connect from "./CartItemsSubscription.connector";
 
@@ -24,8 +24,9 @@ const CartItemsSubstitution = ({
   }))), [allAllowed, cartItems, updateProductsInCart]);
   if (wrapCard) {
     return /*#__PURE__*/_jsx(SubstitutionWrapper, {
-      children: /*#__PURE__*/_jsx(CardList.Item, {
+      children: /*#__PURE__*/_jsx(Card, {
         className: className,
+        component: "li",
         children: /*#__PURE__*/_jsx(Substitution, {
           id: "substitution-all",
           label: i18n.text('cart.allow_substitution_all'),

package/category/components/CategoryImage/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Image } from '@shopgate/engage/components';
 import connect from "./connector";
@@ -14,24 +14,20 @@ const CategoryImage = ({
   src,
   placeholderSrc
 }) => {
-  const [showPlaceholder, setShowPlaceholder] = useState(!src);
-  const onImageError = useCallback(() => {
-    setShowPlaceholder(true);
-  }, [setShowPlaceholder]);
-  if (!showPlaceholder) {
-    return /*#__PURE__*/_jsx(Image, {
-      className: className,
-      src: src,
-      onError: onImageError
-    });
-  }
-  if (!placeholderSrc) {
+  if (!src && !placeholderSrc) {
     return null;
   }
   return /*#__PURE__*/_jsx(Image, {
     className: className,
-    src: placeholderSrc
-  }, "placeholder");
+    src: src
+    // Unwrapped, so the fallback renders into the container the outer Image already provides
+    // rather than nesting a second aspect ratio box inside it.
+    ,
+    placeholder: placeholderSrc ? /*#__PURE__*/_jsx(Image, {
+      unwrapped: true,
+      src: placeholderSrc
+    }) : null
+  });
 };
 CategoryImage.defaultProps = {
   src: null,

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.shape.cardsBorderRadius,
+    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/spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spec.d.ts","sourceRoot":"","sources":["../../../components/Card/spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/components/Card/spec.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { ThemeProvider, createTheme } from '@shopgate/engage/styles';
+import Card from "./Card";
+
+// ThemeProvider resolves the active breakpoint via matchMedia, which jsdom doesn't implement.
+import { jsx as _jsx } from "react/jsx-runtime";
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: query => ({
+    matches: false,
+    media: query,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn()
+  })
+});
+const theme = createTheme();
+const styleText = () => Array.from(document.styleSheets).flatMap(sheet => {
+  try {
+    return Array.from(sheet.cssRules);
+  } catch {
+    return [];
+  }
+}).map(rule => rule.cssText).join('');
+const renderCard = (ui, cards = {
+  style: 'shadow',
+  shadow: {
+    size: 'medium'
+  }
+}) => {
+  const store = createStore(() => ({
+    settings: {
+      appSettings: {
+        cards
+      }
+    }
+  }));
+  return render(/*#__PURE__*/_jsx(Provider, {
+    store: store,
+    children: /*#__PURE__*/_jsx(ThemeProvider, {
+      theme: theme,
+      children: ui
+    })
+  }));
+};
+describe('<Card />', () => {
+  it('passes id, className and children through', () => {
+    renderCard(/*#__PURE__*/_jsx(Card, {
+      id: "c1",
+      className: "custom",
+      "data-testid": "card",
+      children: "body"
+    }));
+    const el = screen.getByTestId('card');
+    expect(el).toHaveAttribute('id', 'c1');
+    expect(el).toHaveTextContent('body');
+    expect(el).toHaveClass('custom');
+  });
+  it('emits the engage__card, ui-shared__card and engage__paper classes', () => {
+    renderCard(/*#__PURE__*/_jsx(Card, {
+      "data-testid": "card",
+      children: "x"
+    }));
+    const el = screen.getByTestId('card');
+    expect(el).toHaveClass('engage__card');
+    expect(el).toHaveClass('ui-shared__card');
+    expect(el).toHaveClass('engage__paper');
+  });
+  it('draws a shadow for the configured shadow style', () => {
+    renderCard(/*#__PURE__*/_jsx(Card, {
+      "data-testid": "card",
+      children: "x"
+    }), {
+      style: 'shadow',
+      shadow: {
+        size: 'medium'
+      }
+    });
+    expect(styleText()).toContain('var(--sg-palette-shadow)');
+  });
+  it('draws the card border for the configured border style', () => {
+    renderCard(/*#__PURE__*/_jsx(Card, {
+      "data-testid": "card",
+      children: "x"
+    }), {
+      style: 'border',
+      shadow: {
+        size: 'none'
+      }
+    });
+    expect(styleText()).toContain('var(--sg-components-cards-border)');
+  });
+  it('lets an explicit variant override the configured appearance', () => {
+    renderCard(/*#__PURE__*/_jsx(Card, {
+      variant: "outlined",
+      "data-testid": "card",
+      children: "x"
+    }), {
+      style: 'shadow',
+      shadow: {
+        size: 'medium'
+      }
+    });
+    expect(styleText()).toContain('var(--sg-components-cards-border)');
+  });
+  it('forwards a ref to the rendered element', () => {
+    const ref = /*#__PURE__*/React.createRef();
+    renderCard(/*#__PURE__*/_jsx(Card, {
+      ref: ref,
+      "data-testid": "card",
+      children: "x"
+    }));
+    expect(ref.current).toBe(screen.getByTestId('card'));
+  });
+  it('renders the plain variant', () => {
+    renderCard(/*#__PURE__*/_jsx(Card, {
+      variant: "plain",
+      "data-testid": "card",
+      children: "x"
+    }));
+    const el = screen.getByTestId('card');
+    expect(el).toHaveClass('engage__card');
+    expect(el).toHaveClass('engage__paper');
+  });
+});

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

@@ -0,0 +1,49 @@
+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. The theme carries a dedicated value per surface — `shape.cardsBorderRadius` for
+     * cards. 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;;;;OAIG;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/Paper/spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=spec.d.ts.map

package/components/Paper/spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.d.ts","sourceRoot":"","sources":["../../../components/Paper/spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}