@shopgate/engage 7.32.0-beta.6 → 7.32.0-beta.8

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/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/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/spec.js

@@ -45,7 +45,16 @@ describe('<NavigationHandler />', () => {
   });
   it('should trigger the pop() callbacks on navigation.pop event', async () => {
     await pop();
-    expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP);
+    expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP, undefined);
+    UIEvents.emit.mockClear();
+  });
+  it('should forward pop() params so that multiple routes can be popped', async () => {
+    await pop({
+      steps: 2
+    });
+    expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP, {
+      steps: 2
+    });
     UIEvents.emit.mockClear();
   });
   it('should trigger the replace() callbacks on navigation.replace event', async () => {

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/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"}

package/components/Paper/spec.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider, createTheme } from '@shopgate/engage/styles';
+import Paper from "./Paper";
+
+// 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 renderWithTheme = ui => render(/*#__PURE__*/_jsx(ThemeProvider, {
+  theme: theme,
+  children: ui
+}));
+
+// tss keeps injected rules in the document across tests, so assertions have to be scoped to the
+// element under test — a global sweep would also match rules another test left behind.
+const styleTextFor = element => Array.from(document.styleSheets).flatMap(sheet => {
+  try {
+    return Array.from(sheet.cssRules);
+  } catch {
+    return [];
+  }
+}).filter(rule => rule instanceof CSSStyleRule && element.matches(rule.selectorText)).map(rule => rule.cssText).join('');
+const renderPaper = ui => {
+  renderWithTheme(ui);
+  return styleTextFor(screen.getByTestId('paper'));
+};
+describe('<Paper />', () => {
+  it('renders children and the engage__paper class next to a caller className', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+      className: "custom",
+      "data-testid": "paper",
+      children: "content"
+    }));
+    const el = screen.getByTestId('paper');
+    expect(el).toHaveTextContent('content');
+    expect(el).toHaveClass('engage__paper');
+    expect(el).toHaveClass('custom');
+  });
+  it('renders as the given component', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+      component: "section",
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(screen.getByTestId('paper').tagName).toBe('SECTION');
+  });
+  it('passes data attributes through to the element', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+      "data-testid": "paper",
+      "data-foo": "bar",
+      children: "x"
+    }));
+    expect(screen.getByTestId('paper')).toHaveAttribute('data-foo', 'bar');
+  });
+  it('draws a shadow reading the shadow color variable for the elevation variant', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      elevation: 4,
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('var(--sg-palette-shadow)');
+  });
+  it('sets the shadow color custom property when shadowColor is given', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      shadowColor: "#7a3cff",
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('--sg-palette-shadow: #7a3cff');
+  });
+  it('draws the default border for the outlined variant', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      variant: "outlined",
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('var(--sg-components-border-light)');
+  });
+  it('lets the border prop override the default outlined border', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      variant: "outlined",
+      border: "2px dashed #abc",
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('2px dashed #abc');
+  });
+  it('resolves a palette key to its background color', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      background: "emphasized",
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('var(--sg-palette-background-emphasized)');
+  });
+  it('passes an arbitrary background color through', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      background: "#123456",
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('#123456');
+  });
+  it('applies the given border radius', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      borderRadius: 12,
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('border-radius: 12px');
+  });
+  it('drops the border radius when square', () => {
+    const css = renderPaper(/*#__PURE__*/_jsx(Paper, {
+      square: true,
+      borderRadius: 12,
+      "data-testid": "paper",
+      children: "x"
+    }));
+    expect(css).toContain('border-radius: 0');
+  });
+});

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/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<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "root" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "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;