@coinbase/cds-web 8.66.2 → 9.0.0-rc.1

package/esm/system/PressableOpacity.js

@@ -34,9 +34,9 @@ export const PressableOpacity = /*#__PURE__*/forwardRef((_ref, ref) => {
   const Component = as !== null && as !== void 0 ? as : pressableOpacityDefaultElement;
   return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
     ref: ref,
-    as: Component
+    as: Component,
+    background: "transparent"
   }, props), {}, {
-    background: "transparent",
     children: children
   }));
 });

package/esm/system/ThemeProvider.js

@@ -4,7 +4,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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); }
 /* eslint-disable @typescript-eslint/no-empty-object-type */
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, memo, useContext, useMemo } from 'react';
 import { createThemeCssVars } from '../core/createThemeCssVars';
 import { cx } from '../cx';
 import { FramerMotionProvider } from './FramerMotionProvider';
@@ -16,7 +16,9 @@ export const useThemeProviderStyles = theme => {
   const style = useMemo(() => createThemeCssVars(theme), [theme]);
   return style;
 };
-const ThemeManager = _ref => {
+
+/** Injects theme CSS variables into the DOM by calling `createThemeCssVars` via `useThemeProviderStyles`. */
+const ThemeManager = /*#__PURE__*/memo(_ref => {
   let {
     display,
     className,
@@ -33,8 +35,31 @@ const ThemeManager = _ref => {
     style: styles,
     children: children
   });
+});
+
+/**
+ * Diff two themes and return a new partial theme with only the differences.
+ */
+export const diffThemes = (theme, parentTheme) => {
+  if (!parentTheme) return theme;
+  const themeDiff = {
+    id: theme.id,
+    activeColorScheme: theme.activeColorScheme
+  };
+  Object.keys(theme).forEach(key => {
+    var _theme$key;
+    if (key === 'id' || key === 'activeColorScheme') return;
+    themeDiff[key] = {};
+    Object.keys((_theme$key = theme[key]) !== null && _theme$key !== void 0 ? _theme$key : {}).forEach(value => {
+      var _theme$key2, _parentTheme$key;
+      if (((_theme$key2 = theme[key]) === null || _theme$key2 === void 0 ? void 0 : _theme$key2[value]) !== ((_parentTheme$key = parentTheme[key]) === null || _parentTheme$key === void 0 ? void 0 : _parentTheme$key[value])) {
+        themeDiff[key][value] = theme[key][value];
+      }
+    });
+  });
+  return themeDiff;
 };
-export const ThemeProvider = _ref2 => {
+export const ThemeProvider = /*#__PURE__*/memo(_ref2 => {
   let {
     theme,
     activeColorScheme,
@@ -42,25 +67,26 @@ export const ThemeProvider = _ref2 => {
     className,
     display,
     style,
-    motionFeatures
+    motionFeatures,
+    isolated
   } = _ref2;
   const themeApi = useMemo(() => {
     const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
     const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
     const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
-
-    // TO DO: Link to color / theme docs in these error messages
-    if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeColorScheme, " colors are defined for the theme"));
-    if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeSpectrumKey, " values are defined for the theme"));
-    if (theme[inverseSpectrumKey] && !theme[inverseColorKey]) throw Error("ThemeProvider theme has ".concat(inverseSpectrumKey, " values defined but no ").concat(inverseColorKey, " colors are defined for the theme"));
-    if (theme[inverseColorKey] && !theme[inverseSpectrumKey]) throw Error("ThemeProvider theme has ".concat(inverseColorKey, " colors defined but no ").concat(inverseSpectrumKey, " values are defined for the theme"));
+    if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeColorScheme, " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
+    if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeSpectrumKey, " values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
+    if (theme[inverseSpectrumKey] && !theme[inverseColorKey]) throw Error("ThemeProvider theme has ".concat(inverseSpectrumKey, " values defined but no ").concat(inverseColorKey, " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
+    if (theme[inverseColorKey] && !theme[inverseSpectrumKey]) throw Error("ThemeProvider theme has ".concat(inverseColorKey, " colors defined but no ").concat(inverseSpectrumKey, " values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
     return _objectSpread(_objectSpread({}, theme), {}, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
       color: theme[activeColorKey]
     });
   }, [theme, activeColorScheme]);
+  const parentTheme = useContext(ThemeContext);
+  const partialTheme = useMemo(() => isolated ? themeApi : diffThemes(themeApi, parentTheme), [themeApi, parentTheme, isolated]);
   return /*#__PURE__*/_jsx(FramerMotionProvider, {
     motionFeatures: motionFeatures,
     children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
@@ -69,19 +95,20 @@ export const ThemeProvider = _ref2 => {
         className: className,
         display: display,
         style: style,
-        theme: themeApi,
+        theme: partialTheme,
         children: children
       })
     })
   });
-};
+});
 /** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
-export const InvertedThemeProvider = _ref3 => {
+export const InvertedThemeProvider = /*#__PURE__*/memo(_ref3 => {
   let {
     children,
     display,
     className,
-    style
+    style,
+    isolated
   } = _ref3;
   const context = useContext(ThemeContext);
   if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
@@ -92,8 +119,9 @@ export const InvertedThemeProvider = _ref3 => {
     activeColorScheme: newColorScheme,
     className: className,
     display: display,
+    isolated: isolated,
     style: style,
     theme: context,
     children: children
   });
-};
+});

package/esm/system/interactableCSSProperties.js

@@ -1,14 +1,14 @@
-export const interactableBorderRadius = '--interactable-border-radius';
-export const interactableBackground = '--interactable-background';
-export const interactableBorderColor = '--interactable-border-color';
+export const interactableBorderRadius = '--inter-borderRadius';
+export const interactableBackground = '--inter-bg';
+export const interactableBorderColor = '--inter-borderColor';
 // Pressed:
-export const interactablePressedBackground = '--interactable-pressed-background';
-export const interactablePressedBorderColor = '--interactable-pressed-border-color';
-export const interactablePressedOpacity = '--interactable-pressed-opacity';
+export const interactablePressedBackground = '--inter-press-bg';
+export const interactablePressedBorderColor = '--inter-press-borderColor';
+export const interactablePressedOpacity = '--inter-press-opacity';
 // Hovered:
-export const interactableHoveredBackground = '--interactable-hovered-background';
-export const interactableHoveredBorderColor = '--interactable-hovered-border-color';
-export const interactableHoveredOpacity = '--interactable-hovered-opacity';
+export const interactableHoveredBackground = '--inter-hover-bg';
+export const interactableHoveredBorderColor = '--inter-hover-borderColor';
+export const interactableHoveredOpacity = '--inter-hover-opacity';
 // Disabled:
-export const interactableDisabledBackground = '--interactable-disabled-background';
-export const interactableDisabledBorderColor = '--interactable-disabled-border-color';
+export const interactableDisabledBackground = '--inter-disable-bg';
+export const interactableDisabledBorderColor = '--inter-disable-borderColor';

package/esm/tabs/Paddle.js

@@ -66,9 +66,9 @@ export const Paddle = _ref => {
       className: cx(paddleCss, direction === 'left' ? paddleLeftCss : paddleRightCss),
       color: background,
       "data-testid": "".concat(testID, "--container"),
-      children: [/*#__PURE__*/_jsx(motion.span, _objectSpread(_objectSpread({
+      children: [/*#__PURE__*/_jsx(motion.span, _objectSpread(_objectSpread({}, _objectSpread({
         className: buttonCss
-      }, buttonMotionProps), {}, {
+      }, buttonMotionProps)), {}, {
         children: /*#__PURE__*/_jsx(IconButton, {
           accessibilityLabel: accessibilityLabel,
           name: direction === 'left' ? 'caretLeft' : 'caretRight',
@@ -77,9 +77,9 @@ export const Paddle = _ref => {
           testID: testID,
           variant: "secondary"
         })
-      })), /*#__PURE__*/_jsx(motion.span, _objectSpread({
+      })), /*#__PURE__*/_jsx(motion.span, _objectSpread({}, _objectSpread({
         className: cx(gradientCss, direction === 'left' ? gradientLeftCss : gradientRightCss)
-      }, gradientMotionProps))]
+      }, gradientMotionProps)))]
     })
   });
 };

package/esm/tabs/TabLabel.js

@@ -89,29 +89,27 @@ export const TabLabel = /*#__PURE__*/memo(_ref => {
           color: color,
           display: "block",
           font: font
-        }, props)), /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+        }, props)), /*#__PURE__*/_jsx(Text, _objectSpread({
+          "aria-hidden": "true",
           as: "h2",
+          className: hiddenCss,
           color: color,
           display: "block",
           font: font
-        }, props), {}, {
-          "aria-hidden": "true",
-          className: hiddenCss
-        }))]
+        }, props))]
       })
     }), !shouldMeasureElement && (Component ? /*#__PURE__*/_jsx(Component, {
       active: active,
       id: id,
       label: props.children
-    }) : /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+    }) : /*#__PURE__*/_jsx(Text, _objectSpread({
       as: "h2",
+      className: variant === 'primary' ? primaryTabLabelCss : undefined,
       color: color,
       display: "block",
       font: font,
       id: accessibilityLabelId
-    }, props), {}, {
-      className: variant === 'primary' ? primaryTabLabelCss : undefined
-    }))), /*#__PURE__*/_jsx(Collapsible, {
+    }, props))), /*#__PURE__*/_jsx(Collapsible, {
       collapsed: !count,
       direction: "horizontal",
       paddingStart: 0.5,

package/esm/tabs/TabNavigation.js

@@ -55,12 +55,6 @@ const fallbackLayout = {
   width: 0,
   x: 0
 };
-/**
- * TabNavigation renders a horizontal, tab-based navigation bar.
- * This component has a opinionated default style, but allows for customization through custom Component props.
- * @deprecated Use Tabs instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
 const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
   let {
@@ -308,9 +302,9 @@ const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
       onScroll: handleOnScroll,
       position: "relative",
       children: /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+        padding: 0,
         testID: testID
       }, props), {}, {
-        padding: 0,
         children: [/*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({
           accessibilityLabel: accessibilityLabel,
           accessibilityLabelledBy: accessibilityLabelledBy,
@@ -337,5 +331,12 @@ const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
   });
 }));
 TabNavigationComponent.displayName = 'TabNavigation';
+
+/**
+ * TabNavigation renders a horizontal, tab-based navigation bar.
+ * This component has a opinionated default style, but allows for customization through custom Component props.
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 export const TabNavigation = TabNavigationComponent;
 import "./TabNavigation.css";

package/esm/tabs/Tabs.js

@@ -31,7 +31,9 @@ const TabContainer = _ref => {
       registerRef
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const refCallback = useCallback(ref => ref && registerRef(id, ref), [id, registerRef]);
+  const refCallback = useCallback(ref => {
+    if (ref) registerRef(id, ref);
+  }, [id, registerRef]);
   return /*#__PURE__*/_jsx("div", _objectSpread({
     ref: refCallback
   }, props));

package/esm/tour/Tour.js

@@ -232,7 +232,10 @@ const TourComponent = _props => {
           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, {
+          children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) !== null && _activeTourStep$hideO !== void 0 ? _activeTourStep$hideO : hideOverlay) && activeTourStepTarget &&
+          /*#__PURE__*/
+          // TODO: Remove type assertion after replacing @react-spring/web with framer-motion v11+ for React 19 compatibility
+          _jsx(animated.div, {
             className: cx(tourClassNames.mask, classNames === null || classNames === void 0 ? void 0 : classNames.mask),
             style: tourMaskStyles,
             children: /*#__PURE__*/_jsx(TourMaskComponent, {

package/esm/tour/TourStep.js

@@ -24,7 +24,11 @@ export const TourStep = _ref => {
     activeTourStep,
     setActiveTourStepTarget
   } = useTourContext();
-  const refCallback = useCallback(ref => (activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.id) === id && ref && setActiveTourStepTarget(ref), [activeTourStep, id, setActiveTourStepTarget]);
+  const refCallback = useCallback(ref => {
+    if ((activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.id) === id && ref) {
+      setActiveTourStepTarget(ref);
+    }
+  }, [activeTourStep, id, setActiveTourStepTarget]);
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     ref: refCallback
   }, props), {}, {

package/esm/typography/TextBody.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textBodyDefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextBody = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextCaption.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textCaptionDefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextCaption = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextDisplay1.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textDisplay1DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay1 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextDisplay2.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textDisplay2DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay2 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextDisplay3.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textDisplay3DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay3 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextHeadline.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textHeadlineDefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextHeadline = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextInherited.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textInheritDefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextInherited = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextLabel1.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textLabel1DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLabel1 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextLabel2.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textLabel2DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLabel2 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextLegal.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textLegalDefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLegal = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextTitle1.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textTitle1DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle1 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextTitle2.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textTitle2DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle2 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextTitle3.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textTitle3DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle3 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/typography/TextTitle4.js

@@ -10,6 +10,21 @@ import React, { forwardRef } from 'react';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textTitle4DefaultElement = 'span';
+
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle4 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,

package/esm/visualizations/chart/CartesianChart.css

@@ -0,0 +1 @@
+@layer cds{.focusStylesCss-fm8hd7g:focus{outline:none;}.focusStylesCss-fm8hd7g:focus-visible{outline:2px solid var(--color-bgPrimary);outline-offset:2px;}}