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

package/components/ChipLayout/index.js

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

package/components/NavigationHandler/connector.js

@@ -11,7 +11,7 @@ import { historyReset } from '@shopgate/pwa-common/actions/router/historyReset';
 function mapDispatchToProps(dispatch) {
   return {
     push: params => dispatch(historyPush(params)),
-    pop: () => dispatch(historyPop()),
+    pop: params => dispatch(historyPop(params)),
     replace: params => dispatch(historyReplace(params)),
     reset: () => dispatch(historyReset())
   };

package/components/NavigationHandler/index.d.ts

@@ -1,15 +1,15 @@
 declare const _default: import("react-redux").ConnectedComponent<typeof NavigationHandler, {
-    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
+    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
     store?: import("redux").Store | undefined;
 } | {
-    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
+    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     store?: import("redux").Store | undefined;

package/components/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

@@ -14,8 +14,7 @@ export interface PaperOwnProps {
     /** 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`.
+     * Corner radius per surface, e.g. `components.cards.borderRadius`. Ignored when `square`.
      * @default theme.shape.borderRadius
      */
     borderRadius?: number | string;

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

@@ -1 +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"}
+{"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/spec.js

@@ -1,28 +1,11 @@
 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.
+import { jsx as _jsx } from "react/jsx-runtime";
 const styleTextFor = element => Array.from(document.styleSheets).flatMap(sheet => {
   try {
     return Array.from(sheet.cssRules);
@@ -31,12 +14,12 @@ const styleTextFor = element => Array.from(document.styleSheets).flatMap(sheet =
   }
 }).filter(rule => rule instanceof CSSStyleRule && element.matches(rule.selectorText)).map(rule => rule.cssText).join('');
 const renderPaper = ui => {
-  renderWithTheme(ui);
+  render(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, {
+    render(/*#__PURE__*/_jsx(Paper, {
       className: "custom",
       "data-testid": "paper",
       children: "content"
@@ -47,7 +30,7 @@ describe('<Paper />', () => {
     expect(el).toHaveClass('custom');
   });
   it('renders as the given component', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+    render(/*#__PURE__*/_jsx(Paper, {
       component: "section",
       "data-testid": "paper",
       children: "x"
@@ -55,7 +38,7 @@ describe('<Paper />', () => {
     expect(screen.getByTestId('paper').tagName).toBe('SECTION');
   });
   it('passes data attributes through to the element', () => {
-    renderWithTheme(/*#__PURE__*/_jsx(Paper, {
+    render(/*#__PURE__*/_jsx(Paper, {
       "data-testid": "paper",
       "data-foo": "bar",
       children: "x"

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

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

package/components/Tabs/components/Tab.js

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

package/components/Typography/Typography.d.ts

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

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

@@ -1,36 +1,38 @@
 import React from 'react';
 import type { PaletteColorsWithMain } from '@shopgate/engage/styles';
 import type { ButtonBaseProps } from '../ButtonBase';
-/**
- * The Button component is a versatile UI element that can be used to trigger actions or navigate users.
- * It supports multiple variants, colors, and sizes, making it suitable for a wide range of use cases.
- */
-declare const Button: React.ForwardRefExoticComponent<ButtonOwnProps & import("../ButtonBase").ButtonBaseOwnProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 declare const useStyles: (params: ButtonOwnProps, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"text" | "icon" | "small" | "large" | "label" | "root" | "disabled" | "outlined" | "contained" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loader" | "loadingPlaceholder" | "loadingIndicator", string>;
+    classes: Record<"small" | "large" | "text" | "icon" | "label" | "link" | "root" | "disabled" | "dense" | "denseSmall" | "denseLarge" | "outlined" | "contained" | "enableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loader" | "loadingPlaceholder" | "loadingIndicator", string>;
     theme: import("@shopgate/engage/styles").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
 export interface ButtonOwnProps {
     /**
-     * The variant to use.
+     * The variant to use. `link` renders a sentence case button without padding or decoration, and
+     * dims on press instead of showing a ripple.
      * @default 'contained'
      */
-    variant?: 'contained' | 'outlined' | 'text';
+    variant?: 'contained' | 'outlined' | 'text' | 'link';
+    /**
+     * If true, the ripple effect is disabled. Defaults to true for `variant="link"`, which dims on
+     * press instead.
+     * @default false
+     */
+    disableRipple?: boolean;
     /**
      * The color of the component.
      * @default 'inherit'
      */
-    color?: PaletteColorsWithMain | 'inherit';
+    color?: PaletteColorsWithMain | 'inherit' | 'cta';
     /**
-     * If `true`, no elevation is used for contained buttons.
+     * If `true`, a drop shadow is added to the button. Buttons are flat by default.
      * @default false
      */
-    disableElevation?: boolean;
+    enableElevation?: boolean;
     /**
      * Element placed before the children.
      */
@@ -64,11 +66,20 @@ export interface ButtonOwnProps {
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * If `true`, the button uses reduced padding. Combines with `size`, which keeps controlling the
+     * font size.
+     * @default false
+     */
+    dense?: boolean;
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ReturnType<typeof useStyles>['classes']>;
 }
-export type ButtonProps = ButtonOwnProps & ButtonBaseProps;
-export default Button;
+export type ButtonProps<C extends React.ElementType = 'button'> = ButtonOwnProps & ButtonBaseProps<C>;
+declare const _default: <C extends React.ElementType = "button">(props: ButtonProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>["ref"];
+}) => React.ReactElement | null;
+export default _default;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/v2/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD;;;GAGG;AACH,QAAA,MAAM,MAAM,uLAoFV,CAAC;AAEH,QAAA,MAAM,SAAS;;cAqBU,CAAC;;;;;;CA4NxB,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,eAAe,CAAC;AAE3D,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/v2/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,eAAe,CAAC;AAsIzE,QAAA,MAAM,SAAS;;cAlCI,CAAC;;;;;;CAkVlB,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACrD;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,CAAC;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5D;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAC5D,cAAc,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;wBAON,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACrE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACpE,KAAK,CAAC,YAAY,GAAG,IAAI;AAF9B,wBAE+B"}

package/components/v2/Button/Button.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The Button component is a versatile UI element that can be used to trigger actions or navigate users.
  * It supports multiple variants, colors, and sizes, making it suitable for a wide range of use cases.
  */
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
+function Button(props, ref) {
   const {
     variant = 'contained',
     color = 'inherit',
@@ -17,10 +17,13 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     loadingPosition = 'center',
     loadingIndicator: loadingIndicatorProp,
     size = 'medium',
+    dense = false,
     disabled = false,
+    disableRipple = variant === 'link',
     fullWidth = false,
-    disableElevation = false,
+    enableElevation = false,
     className,
+    classes: classesProp,
     children,
     ...other
   } = props;
@@ -36,9 +39,10 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     fullWidth
   }, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
+  const staticClassNames = ['engage__button', 'common__button', 'ui-shared__button', !disableRipple && 'ui-shared__ripple-button'].filter(Boolean).join(' ');
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
     color: "inherit",
     size: 16
@@ -70,16 +74,29 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
   }) : null;
   return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
-    className: cx(classes.root, className, {
+    className: cx(classes.root, {
       [classes.text]: variant === 'text',
       [classes.outlined]: variant === 'outlined',
       [classes.contained]: variant === 'contained',
       [classes.small]: size === 'small',
       [classes.large]: size === 'large',
+      [classes.dense]: dense && size === 'medium',
+      [classes.denseSmall]: dense && size === 'small',
+      [classes.denseLarge]: dense && size === 'large',
+      [classes.link]: variant === 'link',
       [classes.disabled]: disabled || loading,
       [classes.fullWidth]: fullWidth,
-      [classes.disableElevation]: disableElevation
-    }),
+      [classes.enableElevation]: enableElevation
+    }, staticClassNames, className),
+    disableRipple: disableRipple,
+    disableBaseClassName: true,
+    "data-variant": variant,
+    "data-color": color,
+    "data-size": size,
+    "data-dense": dense || undefined,
+    "data-full-width": fullWidth || undefined,
+    "data-enable-elevation": enableElevation || undefined,
+    "data-loading": loading || undefined,
     disabled: disabled || loading,
     ...other,
     children: /*#__PURE__*/_jsxs("span", {
@@ -87,7 +104,23 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
     })
   });
-});
+}
+
+/**
+ * Opacity of the overlay that the text and outlined variants tint themselves with on hover. The
+ * dark scheme needs more of it: the overlay takes the color of the label, and a light tint over a
+ * dark surface reads as a far smaller change than a dark tint over a light one.
+ */
+const HOVER_OVERLAY_OPACITY = 0.1;
+const HOVER_OVERLAY_OPACITY_DARK = 0.28;
+
+/**
+ * Opacity the outlined border rests at, leaving it somewhere to go on hover where it returns to the
+ * full color. The dark scheme keeps more of it: fading toward a dark backdrop cuts the brightness
+ * of the border, where fading toward a light one mostly cuts its saturation.
+ */
+const OUTLINED_BORDER_OPACITY = 0.5;
+const OUTLINED_BORDER_OPACITY_DARK = 0.7;
 const useStyles = makeStyles({
   name: 'Button'
 })((theme, props) => {
@@ -101,113 +134,174 @@ const useStyles = makeStyles({
   } = props;
   let cssColor = '';
   let contrastText = '';
-  if (color !== 'inherit') {
+  let darkCssColor = '';
+  if (color === 'cta') {
+    // The call to action color is not part of the palette. It's a component token so that merchants
+    // can configure it separately from the primary color via `--color-button-cta`.
+    cssColor = theme.components.ctaButton.background;
+    contrastText = theme.components.ctaButton.color;
+  } else if (color !== 'inherit') {
     cssColor = color && theme.palette?.[color]?.main ? theme.palette[color].main : theme.palette.primary.main;
     contrastText = color && theme.palette?.[color]?.contrastText ? theme.palette[color].contrastText : theme.palette.primary.contrastText;
   } else if (variant === 'contained') {
+    // The numeric grey scale is absolute rather than per scheme, so it stays light in both. The
+    // light value is kept as it is and only the dark scheme swaps in a surface that its inherited
+    // text color can be read on.
     // eslint-disable-next-line prefer-destructuring
     cssColor = theme.palette.grey[200];
+    darkCssColor = theme.palette.background.emphasized;
     contrastText = 'inherit';
   } else {
     cssColor = 'currentColor';
   }
   return {
     root: {
+      // The `components.button` vars are override hooks for CSS injection and are intentionally
+      // left unseeded, so these fallbacks are what render by default. Don't "fix" the empty values
+      // by skipping their generation - that would also drop them from `theme.vars`, which would
+      // turn these into `var(undefined, ...)`.
       '--button-color': `var(${theme.vars.components.button.color}, ${cssColor})`,
       '--text-color': `var(${theme.vars.components.button.textColor}, ${contrastText})`,
-      '--border-radius': `var(${theme.vars.components.button.borderRadius}, ${theme.shape.borderRadius})`,
+      // A single `applyStyles` call for the whole scheme. A second one would land on the same
+      // object key and quietly replace this one.
+      ...theme.applyStyles('dark', {
+        ...(darkCssColor ? {
+          '--button-color': `var(${theme.vars.components.button.color}, ${darkCssColor})`
+        } : {}),
+        '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY_DARK)
+      }),
+      '--border-radius': theme.components.button.borderRadius,
       '--font-size': theme.typography.button.fontSize,
       '--variant-textColor': 'var(--button-color)',
       '--variant-textDisabledColor': theme.palette.action.disabled,
       '--variant-outlinedColor': 'var(--button-color)',
-      '--variant-outlinedBorder': 'var(--button-color)',
+      '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY),
       '--variant-outlinedDisabledColor': theme.palette.action.disabled,
       '--variant-outlinedDisabledBorder': theme.palette.action.disabled,
       '--variant-containedColor': 'var(--text-color)',
       '--variant-containedBg': 'var(--button-color)',
       '--variant-containedDisabledColor': theme.palette.action.disabled,
       '--variant-containedDisabledBg': theme.palette.action.disabledBackground,
-      '--icon-size': theme.vars.typography.button.fontSize,
       ...theme.typography.button,
       fontSize: 'var(--font-size)',
       boxSizing: 'border-box',
       minWidth: 64,
-      padding: '6px 16px',
+      // Every variant reserves the same 1px border box, so that an outlined button doesn't render
+      // 2px larger than a contained one. The paddings are 1px smaller than they look because of it.
+      border: '1px solid transparent',
+      padding: '5px 15px',
       transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
         duration: theme.transitions.duration.short
       }),
       borderRadius: 'var(--border-radius)',
       '&:hover': {
-        '--variant-textBg': theme.alpha(cssColor, 0.1),
-        '--variant-outlinedBg': theme.alpha(cssColor, 0.1),
         textDecoration: 'none',
-        '&:disabled': {
-          backgroundColor: 'transparent'
-        },
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       },
-      ...(loading && loadingPosition === 'center' && {})
+      // A disabled button keeps taking pointer events so that it can show a not-allowed cursor,
+      // which leaves it matching `:hover`. Its hover backgrounds stay unset instead, so the colors
+      // the variants give it while disabled are what remains visible.
+      '&:hover:not(:disabled):not([aria-disabled="true"])': {
+        '--variant-textBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY),
+        '--variant-outlinedBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY),
+        // The resting border sits at a fraction of the color, so hover brings it back to the full
+        // one. The root transition covers `border`, which carries the change over.
+        '--variant-outlinedBorder': 'var(--button-color)',
+        ...theme.applyStyles('dark', {
+          '--variant-textBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY_DARK),
+          '--variant-outlinedBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY_DARK)
+        }),
+        '@media (hover: none)': {
+          '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY),
+          ...theme.applyStyles('dark', {
+            '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY_DARK)
+          })
+        }
+      }
     },
     small: {
       '--font-size': `calc(${theme.typography.button.fontSize} * 0.875)`,
-      padding: '4px 10px'
+      padding: '4px 9px'
     },
     large: {
       '--font-size': `calc(${theme.typography.button.fontSize} * 1.125)`,
-      padding: '8px 22px'
+      padding: '7px 21px'
+    },
+    // The dense paddings roughly halve the regular ones. They are applied after the size classes,
+    // so they win by declaration order without needing extra specificity.
+    dense: {
+      padding: '2px 7px'
+    },
+    denseSmall: {
+      padding: '2px 4px'
+    },
+    denseLarge: {
+      padding: '3px 10px'
+    },
+    link: {
+      padding: 0,
+      minWidth: 0,
+      border: 0,
+      textTransform: 'none',
+      color: 'var(--variant-textColor)',
+      // Scoped like the hover backgrounds are: a disabled button stays hit testable for its
+      // not-allowed cursor, so it would otherwise dim on press like an operable one.
+      '&:active:not(:disabled):not([aria-disabled="true"])': {
+        opacity: 0.5
+      },
+      '&:disabled, &[aria-disabled="true"]': {
+        color: 'var(--variant-textDisabledColor)'
+      }
     },
     disabled: {},
     text: {
       color: 'var(--variant-textColor)',
       background: 'var(--variant-textBg)',
-      '&:disabled': {
+      '&:disabled, &[aria-disabled="true"]': {
         color: 'var(--variant-textDisabledColor)'
       }
     },
     outlined: {
       color: 'var(--variant-outlinedColor)',
-      border: '1px solid var(--variant-outlinedBorder)',
+      borderColor: 'var(--variant-outlinedBorder)',
       background: 'var(--variant-outlinedBg)',
-      '&:disabled': {
-        border: '1px solid var(--variant-outlinedDisabledBorder)',
+      '&:disabled, &[aria-disabled="true"]': {
+        borderColor: 'var(--variant-outlinedDisabledBorder)',
         color: 'var(--variant-outlinedDisabledColor)'
       }
     },
     contained: {
       color: 'var(--variant-containedColor)',
       background: 'var(--variant-containedBg)',
-      boxShadow: theme.shadows[2],
       '&:hover': {
         background: theme.darken('var(--variant-containedBg)'),
-        boxShadow: theme.shadows[4],
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          background: 'var(--variant-containedBg)',
-          boxShadow: theme.shadows[2]
+          background: 'var(--variant-containedBg)'
         }
       },
-      '&:active': {
-        boxShadow: theme.shadows[6]
-      },
-      '&:disabled': {
+      '&:disabled, &[aria-disabled="true"]': {
         color: 'var(--variant-containedDisabledColor)',
-        backgroundColor: 'var(--variant-containedDisabledBg)',
-        boxShadow: theme.shadows[0]
+        backgroundColor: 'var(--variant-containedDisabledBg)'
       }
     },
-    disableElevation: {
-      boxShadow: 'none',
+    enableElevation: {
+      boxShadow: theme.shadows[2],
       '&:hover': {
-        boxShadow: 'none'
+        boxShadow: theme.shadows[4],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          boxShadow: theme.shadows[2]
+        }
       },
       '&:active': {
-        boxShadow: 'none'
+        boxShadow: theme.shadows[6]
       },
-      '&$disabled': {
-        boxShadow: 'none'
+      '&:disabled, &[aria-disabled="true"]': {
+        boxShadow: theme.shadows[0]
       }
     },
     label: {
@@ -311,4 +405,8 @@ const useStyles = makeStyles({
     }
   };
 });
-export default Button;
+const ButtonWithRef = /*#__PURE__*/forwardRef(Button);
+ButtonWithRef.displayName = 'Button';
+
+// `forwardRef` erases the generic, so the call signature is restored with a cast.
+export default ButtonWithRef;