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

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;

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<"text" | "icon" | "small" | "large" | "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;AAsHzE,QAAA,MAAM,SAAS;;cAlBI,CAAC;;;;;;CAgSlB,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,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
     })
   });
-});
+}
 const useStyles = makeStyles({
   name: 'Button'
 })((theme, props) => {
@@ -101,7 +118,12 @@ const useStyles = makeStyles({
   } = props;
   let cssColor = '';
   let contrastText = '';
-  if (color !== 'inherit') {
+  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') {
@@ -113,9 +135,13 @@ const useStyles = makeStyles({
   }
   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})`,
+      '--border-radius': theme.components.button.borderRadius,
       '--font-size': theme.typography.button.fontSize,
       '--variant-textColor': 'var(--button-color)',
       '--variant-textDisabledColor': theme.palette.action.disabled,
@@ -127,12 +153,14 @@ const useStyles = makeStyles({
       '--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
       }),
@@ -141,73 +169,93 @@ const useStyles = makeStyles({
         '--variant-textBg': theme.alpha(cssColor, 0.1),
         '--variant-outlinedBg': theme.alpha(cssColor, 0.1),
         textDecoration: 'none',
-        '&:disabled': {
+        '&:disabled, &[aria-disabled="true"]': {
           backgroundColor: 'transparent'
         },
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
-      },
-      ...(loading && loadingPosition === 'center' && {})
+      }
     },
     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)',
+      '&:active': {
+        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 +359,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;

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

@@ -1,10 +1,5 @@
 import React from 'react';
-/**
- * The ButtonBase component serves as a foundational button element that can be extended with
- * additional styles and functionality. It handles basic button behavior, including disabled
- * state and type validation.
- */
-declare const ButtonBase: React.ForwardRefExoticComponent<ButtonBaseOwnProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+import type { NavigationState } from '@shopgate/engage/core/router/helpers';
 declare const useStyles: (params: void, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
@@ -14,9 +9,41 @@ declare const useStyles: (params: void, muiStyleOverridesParams?: {
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
-export interface ButtonBaseOwnProps {
+export interface LinkOptions {
     /**
-     * If true, the button will be disabled and not respond to user interactions.
+     * Meta state to attach to the target route.
+     */
+    state?: NavigationState;
+    /**
+     * Where to open the target, e.g. `_blank`. Read by the router when the target is an external
+     * or a native link.
+     */
+    target?: string;
+    /**
+     * If true, the current route is replaced instead of a new one being pushed.
+     * @default false
+     */
+    replace?: boolean;
+}
+export interface ButtonBaseOwnProps<C extends React.ElementType = 'button'> {
+    /**
+     * The element or component rendered as the root node. Defaults to `button`, or to `a` on web
+     * builds when `href` is set. Note that a non focusable element (e.g. `div`) needs its own
+     * `tabIndex` to stay keyboard operable.
+     */
+    component?: C;
+    /**
+     * Renders the button as a link to this path. Navigation goes through the app router rather than
+     * the browser, so external and native URLs are handled as well.
+     */
+    href?: string;
+    /**
+     * Navigation options. Only meaningful together with `href`.
+     */
+    linkOptions?: LinkOptions;
+    /**
+     * If true, the button will be disabled and not respond to user interactions. Rendered as the
+     * native attribute on a button, and as `aria-disabled` on any other element.
      * @default false
      */
     disabled?: boolean;
@@ -25,16 +52,29 @@ export interface ButtonBaseOwnProps {
      * @default false
      */
     disableRipple?: boolean;
+    /**
+     * If true, the `engage__button-base` css hook is not rendered. Set by wrappers that provide a
+     * hook of their own, such as `Button`.
+     * @default false
+     */
+    disableBaseClassName?: boolean;
     /**
      * Custom class name for the button.
      */
     className?: string;
+    /**
+     * Value for the `data-test-id` attribute of the button.
+     */
+    testId?: string;
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ReturnType<typeof useStyles>['classes']>;
     children: React.ReactNode;
 }
-export type ButtonBaseProps = ButtonBaseOwnProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export default ButtonBase;
+export type ButtonBaseProps<C extends React.ElementType = 'button'> = ButtonBaseOwnProps<C> & Omit<React.ComponentPropsWithRef<C>, keyof ButtonBaseOwnProps<C>>;
+declare const _default: <C extends React.ElementType = "button">(props: ButtonBaseProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>["ref"];
+}) => React.ReactElement | null;
+export default _default;
 //# sourceMappingURL=ButtonBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAQ1C;;;;GAIG;AACH,QAAA,MAAM,UAAU,8IAsEd,CAAC;AAEH,QAAA,MAAM,SAAS;;cAyCP,CAAC;;;;;;CAVP,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;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,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjG,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAkO5E,QAAA,MAAM,SAAS;;cAjJF,CAAC;;;;;;CAmLZ,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ;IACxE;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAChE,kBAAkB,CAAC,CAAC,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;wBAQhC,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACzE,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;AAF9B,wBAE+B"}