@coinbase/cds-web 8.62.1 → 8.66.1

package/esm/tabs/DefaultTab.js

@@ -0,0 +1,77 @@
+const _excluded = ["id", "label", "disabled", "onClick", "count", "max", "accessibilityLabel", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback } from 'react';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { cx } from '../cx';
+import { DotCount } from '../dots/DotCount';
+import { HStack } from '../layout';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+
+/** Optional dot count and a11y overrides for the default tab row. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pressableCss = "pressableCss-p1gyavxu";
+const insetFocusRingCss = "insetFocusRingCss-i14sq9yf";
+const labelPaddingCss = "labelPaddingCss-lu2xm1d";
+const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      id,
+      label,
+      disabled: disabledProp,
+      onClick,
+      count,
+      max,
+      accessibilityLabel,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    activeTab,
+    updateActiveTab,
+    disabled: allTabsDisabled
+  } = useTabsContext();
+  const isActive = (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === id;
+  const isDisabled = disabledProp || allTabsDisabled;
+  const handlePress = useCallback(() => {
+    updateActiveTab(id);
+    onClick === null || onClick === void 0 || onClick(id);
+  }, [id, onClick, updateActiveTab]);
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    "data-rendered-tab": true,
+    accessibilityLabel: accessibilityLabel,
+    "aria-controls": "tabpanel--".concat(id),
+    "aria-selected": isActive,
+    background: "transparent",
+    className: cx(pressableCss, insetFocusRingCss, className),
+    disabled: isDisabled,
+    id: "tab--".concat(id),
+    onClick: handlePress
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 0.5,
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "h2",
+        className: labelPaddingCss,
+        color: isActive ? 'fgPrimary' : 'fg',
+        display: "block",
+        font: "headline",
+        children: label
+      }), !!count && /*#__PURE__*/_jsx(DotCount, {
+        accessibilityLabel: "".concat(accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : typeof label === 'string' ? label : '', " count: ").concat(count),
+        count: count,
+        max: max
+      })]
+    })
+  }));
+}));
+DefaultTabComponent.displayName = 'DefaultTab';
+export const DefaultTab = DefaultTabComponent;
+import "./DefaultTab.css";

package/esm/tabs/DefaultTabsActiveIndicator.js

@@ -0,0 +1,58 @@
+const _excluded = ["activeTabRect", "background", "className", "style", "testID"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { m as motion } from 'framer-motion';
+import { Box } from '../layout/Box';
+import { tabsTransitionConfig } from './Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MotionBox = motion(Box);
+
+/**
+ * Default underline-style indicator for `Tabs`. Pass as
+ * `TabsActiveIndicatorComponent={DefaultTabIndicator}` with `TabComponent={DefaultTab}`.
+ */
+export const DefaultTabsActiveIndicator = /*#__PURE__*/memo(_ref => {
+  let {
+      activeTabRect,
+      background = 'bgPrimary',
+      className,
+      style,
+      testID
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    width,
+    x
+  } = activeTabRect;
+  if (!width) return null;
+  return /*#__PURE__*/_jsx(MotionBox, {
+    animate: {
+      width,
+      x
+    },
+    background: background,
+    bottom: 0,
+    className: className,
+    height: 2,
+    initial: {
+      width: 0,
+      x
+    },
+    left: 0,
+    overflow: "hidden",
+    position: "absolute",
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      pointerEvents: 'none'
+    }),
+    testID: testID,
+    transition: tabsTransitionConfig,
+    zIndex: 0
+  });
+});
+DefaultTabsActiveIndicator.displayName = 'DefaultTabsActiveIndicator';

package/esm/tabs/TabIndicator.js

@@ -12,6 +12,8 @@ import { Box } from '../layout/Box';
 import { useAnimateTabIndicator } from './hooks/useAnimateTabIndicator';
 import { jsx as _jsx } from "react/jsx-runtime";
 const MotionBox = motion(Box);
+/** @deprecated Use DefaultTabsActiveIndicator instead. This will be removed in a future major release. */
+/** @deprecationExpectedRemoval v10 */
 export const TabIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       width,

package/esm/tabs/TabLabel.js

@@ -28,6 +28,9 @@ const colorVariantStyle = {
     inactive: 'fgMuted'
   }
 };
+/** @deprecated Use DefaultTab instead. This will be removed in a future major release. */
+/** @deprecationExpectedRemoval v10 */
+
 export const TabLabel = /*#__PURE__*/memo(_ref => {
   var _props$accessibilityL, _ref2;
   let {

package/esm/tabs/TabNavigation.js

@@ -30,6 +30,27 @@ const scrollContainerCss = "scrollContainerCss-sgry0cc";
 const pressableCss = "pressableCss-p1umbmq2";
 const pressableCustomTabCss = "pressableCustomTabCss-p1gi4b8i";
 const insetFocusRingCss = "insetFocusRingCss-i8jdxgz";
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
 const fallbackLayout = {
   width: 0,
   x: 0

package/esm/tabs/Tabs.js

@@ -1,7 +1,6 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style"],
-  _excluded3 = ["id", "Component", "disabled"],
-  _excluded4 = ["activeTabRect", "position"];
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style", "testID"],
+  _excluded3 = ["activeTabRect", "position", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -22,6 +21,8 @@ import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
+import { DefaultTab } from './DefaultTab';
+import { DefaultTabsActiveIndicator } from './DefaultTabsActiveIndicator';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MotionBox = motion(Box);
 const TabContainer = _ref => {
@@ -46,8 +47,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const mergedProps = useComponentConfig('Tabs', _props);
   const {
       tabs,
-      TabComponent,
-      TabsActiveIndicatorComponent,
+      TabComponent = DefaultTab,
+      TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
       activeTab,
       onActiveTabElementChange,
@@ -64,7 +65,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       borderTopRightRadius,
       borderBottomLeftRadius,
       borderBottomRightRadius,
-      style
+      style,
+      testID
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded2);
   const api = useTabs({
@@ -125,9 +127,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       focusableElement === null || focusableElement === void 0 || focusableElement.focus();
     }
   }, [tabs, refMap]);
-  const containerStyle = useMemo(() => _objectSpread(_objectSpread({
-    opacity: disabled ? accessibleOpacityDisabled : 1
-  }, style), styles === null || styles === void 0 ? void 0 : styles.root), [disabled, style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  const containerStyle = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
   const registerRef = useCallback((tabId, ref) => {
     refMap.registerRef(tabId, ref);
     if ((activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === tabId) {
@@ -143,9 +143,11 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderTopRightRadius: borderTopRightRadius,
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     onKeyDown: handleTabsContainerKeyDown,
+    opacity: disabled ? accessibleOpacityDisabled : 1,
     position: position,
     role: role,
     style: containerStyle,
+    testID: testID,
     width: width
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(TabsContext.Provider, {
@@ -159,40 +161,36 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         borderTopLeftRadius: borderTopLeftRadius,
         borderTopRightRadius: borderTopRightRadius,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator,
-        style: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
-      }), tabs.map(_ref2 => {
-        let {
-            id,
-            Component: CustomTabComponent,
-            disabled: tabDisabled
-          } = _ref2,
-          props = _objectWithoutProperties(_ref2, _excluded3);
-        const RenderedTab = CustomTabComponent !== null && CustomTabComponent !== void 0 ? CustomTabComponent : TabComponent;
+        style: styles === null || styles === void 0 ? void 0 : styles.activeIndicator,
+        testID: testID ? "".concat(testID, "-active-indicator") : undefined
+      }), tabs.map(props => {
+        var _props$Component;
+        const RenderedTab = (_props$Component = props.Component) !== null && _props$Component !== void 0 ? _props$Component : TabComponent;
+        const renderedTabProps = _objectSpread(_objectSpread({}, props), {}, {
+          'data-rendered-tab': true,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
+          role: 'tab',
+          style: styles === null || styles === void 0 ? void 0 : styles.tab,
+          tabIndex: (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === props.id || !activeTab ? 0 : -1
+        });
         return /*#__PURE__*/_jsx(TabContainer, {
-          id: id,
+          id: props.id,
           registerRef: registerRef,
-          children: /*#__PURE__*/_jsx(RenderedTab, _objectSpread({
-            "data-rendered-tab": true,
-            className: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
-            disabled: tabDisabled,
-            id: id,
-            role: "tab",
-            style: styles === null || styles === void 0 ? void 0 : styles.tab,
-            tabIndex: (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === id || !activeTab ? 0 : -1
-          }, props))
-        }, id);
+          children: /*#__PURE__*/_jsx(RenderedTab, _objectSpread({}, renderedTabProps))
+        }, props.id);
       })]
     })
   }));
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref3 => {
+export const TabsActiveIndicator = _ref2 => {
   let {
       activeTabRect,
-      position = 'absolute'
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded4);
+      position = 'absolute',
+      testID = 'tabs-active-indicator'
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
   const {
     width,
     height,
@@ -205,12 +203,12 @@ export const TabsActiveIndicator = _ref3 => {
   if (!width) return null;
   return /*#__PURE__*/_jsx(MotionBox, _objectSpread({
     animate: activeAnimation,
-    "data-testid": "tabs-active-indicator",
     height: height,
     initial: false,
     left: 0,
     position: position,
     role: "none",
+    testID: testID,
     transition: tabsTransitionConfig
   }, props));
 };

package/esm/tabs/index.js

@@ -1,3 +1,5 @@
+export * from './DefaultTab';
+export * from './DefaultTabsActiveIndicator';
 export * from './Paddle';
 export * from './SegmentedTab';
 export * from './SegmentedTabs';

package/esm/tour/DefaultTourMask.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DefaultTourMask = /*#__PURE__*/memo(_ref => {
   let {

package/esm/tour/DefaultTourStepArrow.js

@@ -11,7 +11,8 @@ export const DefaultTourStepArrow = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_
   let {
     placement,
     arrow,
-    style
+    style,
+    className
   } = _ref;
   const width = 24;
   const height = 24;
@@ -33,6 +34,7 @@ export const DefaultTourStepArrow = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_
   return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     background: "bgInverse",
+    className: className,
     height: height,
     style: arrowStyles,
     testID: "tour-step-arrow",

package/esm/tour/Tour.js

@@ -3,12 +3,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { TourContext } from '@coinbase/cds-common/tour/TourContext';
 import { useTour } from '@coinbase/cds-common/tour/useTour';
 import { arrow as arrowMiddleware, autoPlacement, autoUpdate, offset, shift, useFloating } from '@floating-ui/react-dom';
 import { animated, config as springConfig, useSpring } from '@react-spring/web';
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useScrollBlocker } from '../hooks/useScrollBlocker';
 import { FocusTrap } from '../overlays/FocusTrap';
@@ -16,11 +17,31 @@ import { Portal } from '../overlays/Portal';
 import { modalContainerId } from '../overlays/PortalProvider';
 import { DefaultTourMask } from './DefaultTourMask';
 import { DefaultTourStepArrow } from './DefaultTourStepArrow';
+
+/**
+ * Static class names for Calendar component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const tourClassNames = {
+  /** Root element */
+  root: 'cds-Tour',
+  /** The opaque overlay/mask that emphasizes current step */
+  mask: 'cds-Tour-mask',
+  /** A step's arrow element */
+  stepArrow: 'cds-Tour-stepArrow',
+  /** A step element's positioned container */
+  stepContainer: 'cds-Tour-stepContainer'
+};
 const overlayContentContextValue = {
   isTour: true
 };
 const containerCss = "containerCss-c1gsy0il";
+
+// ------------ SUBCOMPONENT PROP TYPES ------------
+
+// ------------ SUBCOMPONENT TYPES ------------
+
 const defaultScrollOptions = {
   behavior: 'smooth',
   marginX: 100,
@@ -72,7 +93,7 @@ const scrollIntoView = async (element, scrollOptions) => {
 const defaultTourStepOffset = 24;
 const defaultTourStepShiftPadding = 32;
 const TourComponent = _props => {
-  var _activeTourStep$Arrow, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
+  var _ref, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
   const mergedProps = useComponentConfig('Tour', _props);
   const {
     steps,
@@ -90,14 +111,18 @@ const TourComponent = _props => {
     scrollOptions = defaultScrollOptions,
     disablePortal,
     disableAutoScroll,
+    classNames,
+    styles,
     accessibilityLabel,
     accessibilityLabelledBy,
     id,
     testID
   } = mergedProps;
   const tourStepArrowRef = useRef(null);
+  // let individual step data override global custom components
   const RenderedTourStep = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.Component;
-  const RenderedTourStepArrow = (_activeTourStep$Arrow = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.ArrowComponent) !== null && _activeTourStep$Arrow !== void 0 ? _activeTourStep$Arrow : TourStepArrowComponent;
+  // activeTourStep.ArrowComponent references old, deprecated type in cds-common
+  const RenderedTourStepArrow = (_ref = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.ArrowComponent) !== null && _ref !== void 0 ? _ref : TourStepArrowComponent;
 
   // This state is used to store the active tour step target element.
   // const [activeTourStepTarget, setActiveTourStepTarget] = useState<HTMLElement | null>(null);
@@ -109,6 +134,7 @@ const TourComponent = _props => {
     },
     config: springConfig.slow
   }), []);
+  const tourMaskStyles = useMemo(() => _objectSpread(_objectSpread({}, animation), styles === null || styles === void 0 ? void 0 : styles.mask), [animation, styles === null || styles === void 0 ? void 0 : styles.mask]);
   const {
     refs,
     floatingStyles,
@@ -124,6 +150,7 @@ const TourComponent = _props => {
     })],
     whileElementsMounted: autoUpdate
   });
+  const stepContainerStyle = useMemo(() => _objectSpread(_objectSpread({}, animation), styles === null || styles === void 0 ? void 0 : styles.stepContainer), [animation, styles === null || styles === void 0 ? void 0 : styles.stepContainer]);
   const handleChange = useCallback(tourStep => {
     void animationApi.start({
       to: {
@@ -200,12 +227,14 @@ const TourComponent = _props => {
           "aria-label": accessibilityLabel,
           "aria-labelledby": accessibilityLabelledBy,
           "aria-modal": "true",
-          className: containerCss,
+          className: cx(tourClassNames.root, containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.root),
           "data-testid": testID,
           id: id,
           role: "dialog",
+          style: styles === null || styles === void 0 ? void 0 : styles.root,
           children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) !== null && _activeTourStep$hideO !== void 0 ? _activeTourStep$hideO : hideOverlay) && activeTourStepTarget && /*#__PURE__*/_jsx(animated.div, {
-            style: animation,
+            className: cx(tourClassNames.mask, classNames === null || classNames === void 0 ? void 0 : classNames.mask),
+            style: tourMaskStyles,
             children: /*#__PURE__*/_jsx(TourMaskComponent, {
               activeTourStepTargetRect: activeTourStepTarget.getBoundingClientRect(),
               borderRadius: (_activeTourStep$tourM = activeTourStep.tourMaskBorderRadius) !== null && _activeTourStep$tourM !== void 0 ? _activeTourStep$tourM : tourMaskBorderRadius,
@@ -216,12 +245,14 @@ const TourComponent = _props => {
             style: floatingStyles,
             children: /*#__PURE__*/_jsx(FocusTrap, {
               children: /*#__PURE__*/_jsxs(animated.div, {
-                style: animation,
+                className: cx(tourClassNames.stepContainer, classNames === null || classNames === void 0 ? void 0 : classNames.stepContainer),
+                style: stepContainerStyle,
                 children: [/*#__PURE__*/_jsx(RenderedTourStepArrow, {
                   ref: tourStepArrowRef,
                   arrow: arrow,
+                  className: cx(tourClassNames.stepArrow, classNames === null || classNames === void 0 ? void 0 : classNames.stepArrow),
                   placement: placement,
-                  style: activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.arrowStyle
+                  style: styles === null || styles === void 0 ? void 0 : styles.stepArrow
                 }), /*#__PURE__*/_jsx(RenderedTourStep, _objectSpread({}, activeTourStep))]
               })
             })

package/esm/tour/TourStep.js

@@ -1,3 +1,11 @@
+const _excluded = ["id", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback } from 'react';
 import { useTourContext } from '@coinbase/cds-common/tour/TourContext';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -8,16 +16,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export const TourStep = _ref => {
   let {
-    id,
-    children
-  } = _ref;
+      id,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
     activeTourStep,
     setActiveTourStepTarget
   } = useTourContext();
   const refCallback = useCallback(ref => (activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.id) === id && ref && setActiveTourStepTarget(ref), [activeTourStep, id, setActiveTourStepTarget]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: refCallback,
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    ref: refCallback
+  }, props), {}, {
     children: children
-  });
+  }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.62.1",
+  "version": "8.66.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,9 +207,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.62.1",
-    "@coinbase/cds-icons": "^5.13.0",
-    "@coinbase/cds-illustrations": "^4.36.0",
+    "@coinbase/cds-common": "^8.66.1",
+    "@coinbase/cds-icons": "^5.16.0",
+    "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",