@coinbase/cds-web 9.2.2 → 9.3.1

package/esm/chips/TabbedChips.js

@@ -11,8 +11,9 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useSt
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useHorizontalScrollToTarget } from '../hooks/useHorizontalScrollToTarget';
-import { HStack } from '../layout';
-import { Paddle, Tabs } from '../tabs';
+import { HStack } from '../layout/HStack';
+import { Paddle } from '../tabs/Paddle';
+import { Tabs } from '../tabs/Tabs';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const scrollContainerCss = "scrollContainerCss-s19l7spv";

package/esm/coachmark/Coachmark.js

@@ -9,8 +9,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { IconButton } from '../buttons/IconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack, VStack } from '../layout';
-import { InvertedThemeProvider } from '../system';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { InvertedThemeProvider } from '../system/ThemeProvider';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {

package/esm/controls/Checkbox.js

@@ -12,7 +12,7 @@ import { m as motion } from 'framer-motion';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { useMotionProps } from '../motion/useMotionProps';
 import { Control } from './Control';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/controls/CheckboxCell.js

@@ -9,7 +9,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { forwardRef, memo, useId, useMemo } from 'react';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { Checkbox } from './Checkbox';

package/esm/controls/ControlGroup.js

@@ -10,8 +10,8 @@ import React, { forwardRef, memo, useId } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box } from '../layout';
-import { Text } from '../typography';
+import { Box } from '../layout/Box';
+import { Text } from '../typography/Text';
 
 // Styles for container reset
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/controls/NativeInput.js

@@ -9,7 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { cx } from '../cx';
 import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 const baseCss = "baseCss-bgba8xt";
 const originalContainerPaddingCss = "originalContainerPaddingCss-o1mz6a5p";

package/esm/controls/Radio.js

@@ -11,7 +11,7 @@ import { checkboxOpacityEnterConfig, checkboxOpacityExitConfig, checkboxScaleEnt
 import { m as motion } from 'framer-motion';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { useMotionProps } from '../motion/useMotionProps';
 import { Control } from './Control';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/controls/RadioCell.js

@@ -9,8 +9,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { forwardRef, memo, useId, useMemo } from 'react';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack, VStack } from '../layout';
-import { Pressable } from '../system';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { Radio } from './Radio';
 import { useSelectionCellControlHeight } from './useSelectionCellControlHeight';

package/esm/controls/SelectTrigger.js

@@ -9,8 +9,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
-import { VStack } from '../layout';
 import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { AnimatedCaret } from '../motion/AnimatedCaret';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';

package/esm/dates/DatePicker.js

@@ -14,7 +14,8 @@ import { m as motion } from 'framer-motion';
 import { InputIconButton } from '../controls/InputIconButton';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { getMotionProps } from '../motion/useMotionProps';
 import { Popover } from '../overlays/popover/Popover';
 import { Calendar } from './Calendar';

package/esm/multi-content-module/MultiContentModule.js

@@ -8,9 +8,10 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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, isValidElement, memo, useMemo } from 'react';
 import { defaultMaxWidth } from '@coinbase/cds-common/tokens/multiContentModule';
-import { Button } from '../buttons';
-import { Pictogram } from '../illustrations';
-import { Box, VStack } from '../layout';
+import { Button } from '../buttons/Button';
+import { Pictogram } from '../illustrations/Pictogram';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiContentModuleDefaultElement = 'div';

package/esm/navigation/NavigationBar.js

@@ -12,7 +12,8 @@ import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Collapsible } from '../collapsible/Collapsible';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { HStack, VStack } from '../layout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const navigationBarDefaultElement = 'nav';
 /**

package/esm/navigation/NavigationTitleSelect.js

@@ -12,8 +12,8 @@ import { Cell } from '../cells/Cell';
 import { Dropdown } from '../dropdown/Dropdown';
 import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
-import { Pressable } from '../system';
+import { Icon } from '../icons/Icon';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { navigationTitleDefaultElement } from './NavigationTitle';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/navigation/Sidebar.js

@@ -11,7 +11,8 @@ import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDimensions } from '../hooks/useDimensions';
-import { Box, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { breakpoints } from '../styles/media';
 import { SidebarProvider } from './SidebarContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/navigation/SidebarItem.js

@@ -9,11 +9,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
-import { Box } from '../layout';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
 import { Tooltip } from '../overlays/tooltip/Tooltip';
 import { Pressable } from '../system/Pressable';
-import { Text } from '../typography';
+import { Text } from '../typography/Text';
 import { useSidebarContext } from './SidebarContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pressableCss = "pressableCss-p1t38snu";

package/esm/navigation/SidebarMoreMenu.js

@@ -8,7 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { sidebarMenuMaxWidth, sidebarMenuMinWidth } from '@coinbase/cds-common/tokens/menu';
-import { Dropdown } from '../dropdown';
+import { Dropdown } from '../dropdown/Dropdown';
 import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Tooltip } from '../overlays/tooltip/Tooltip';

package/esm/numbers/RollingNumber/DefaultRollingNumberDigit.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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 { forwardRef, memo, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
-import { getWidthInEm } from '@coinbase/cds-common';
+import { getWidthInEm } from '@coinbase/cds-common/utils/getWidthInEm';
 import { animate, m } from 'framer-motion';
 import { cx } from '../../cx';
 import { Text } from '../../typography/Text';

package/esm/overlays/Alert.js

@@ -7,10 +7,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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 { forwardRef, memo, useCallback, useMemo } from 'react';
-import { Button } from '../buttons';
+import { Button } from '../buttons/Button';
 import { useA11yLabels } from '../hooks/useA11yLabels';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Pictogram } from '../illustrations';
+import { Pictogram } from '../illustrations/Pictogram';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { Modal } from './modal/Modal';

package/esm/overlays/FullscreenAlert.js

@@ -1,8 +1,8 @@
 import { memo, useMemo } from 'react';
-import { Button } from '../buttons';
+import { Button } from '../buttons/Button';
 import { useA11yLabels } from '../hooks/useA11yLabels';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { HeroSquare } from '../illustrations';
+import { HeroSquare } from '../illustrations/HeroSquare';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { breakpoints } from '../styles/media';

package/esm/overlays/handlebar/HandleBar.js

@@ -9,7 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo, useMemo } from 'react';
 import { handleBarHeight } from '@coinbase/cds-common/tokens/drawer';
 import { cx } from '../../cx';
-import { Box } from '../../layout';
+import { Box } from '../../layout/Box';
 import { Pressable } from '../../system/Pressable';
 
 // Fixed pixel values used intentionally — handle size should not scale with theme density.

package/esm/overlays/modal/FullscreenModal.js

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { cx } from '../../cx';
 import { useA11yLabels } from '../../hooks/useA11yLabels';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
-import { VStack } from '../../layout';
+import { VStack } from '../../layout/VStack';
 import { breakpoints } from '../../styles/media';
 import { FullscreenModalHeader } from './FullscreenModalHeader';
 import { FullscreenModalLayout } from './FullscreenModalLayout';

package/esm/overlays/modal/FullscreenModalHeader.js

@@ -7,10 +7,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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 } from 'react';
-import { IconButton } from '../../buttons';
+import { IconButton } from '../../buttons/IconButton';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { LogoMark } from '../../icons/LogoMark';
-import { Box, HStack } from '../../layout';
+import { Box } from '../../layout/Box';
+import { HStack } from '../../layout/HStack';
 import { breakpoints } from '../../styles/media';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/overlays/modal/Modal.js

@@ -15,7 +15,7 @@ import { m as motion } from 'framer-motion';
 import { cx } from '../../cx';
 import { useA11yLabels } from '../../hooks/useA11yLabels';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
-import { Box } from '../../layout';
+import { Box } from '../../layout/Box';
 import { VStack } from '../../layout/VStack';
 import { useMotionProps } from '../../motion/useMotionProps';
 import { media } from '../../styles/media';

package/esm/overlays/modal/ModalWrapper.js

@@ -11,8 +11,8 @@ import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
 import { cx } from '../../cx';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
-import { VStack } from '../../layout';
 import { Box } from '../../layout/Box';
+import { VStack } from '../../layout/VStack';
 import { media } from '../../styles/media';
 import { Overlay } from '../overlay/Overlay';
 import { Portal } from '../Portal';

package/esm/overlays/tooltip/Tooltip.js

@@ -1,4 +1,13 @@
+const _excluded = ["children", "content", "elevation", "placement", "gap", "testID", "zIndex", "tooltipId", "visible", "hasInteractiveContent", "invertColorScheme", "disableAutoFocus", "disableFocusTrap", "disablePortal", "disableTypeFocus", "focusTabIndexElements", "respectNegativeTabIndex", "autoFocusDelay", "openDelay", "closeDelay", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
+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, { cloneElement, memo, useCallback, useMemo, useRef } from 'react';
+import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Popover } from '../popover/Popover';
 import { TooltipContent } from './TooltipContent';
@@ -11,27 +20,39 @@ const preventMouseDown = event => {
 export const Tooltip = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('Tooltip', _props);
   const {
-    children,
-    content,
-    elevation,
-    placement = 'top',
-    gap = 1,
-    testID,
-    zIndex,
-    tooltipId: tooltipIdDefault,
-    visible,
-    hasInteractiveContent,
-    invertColorScheme = true,
-    disableAutoFocus = hasInteractiveContent,
-    disableFocusTrap = hasInteractiveContent,
-    disablePortal = hasInteractiveContent,
-    disableTypeFocus,
-    focusTabIndexElements,
-    respectNegativeTabIndex,
-    autoFocusDelay = 20,
-    openDelay,
-    closeDelay
-  } = mergedProps;
+      children,
+      content,
+      elevation,
+      placement = 'top',
+      gap = 1,
+      testID,
+      zIndex,
+      tooltipId: tooltipIdDefault,
+      visible,
+      hasInteractiveContent,
+      invertColorScheme = true,
+      disableAutoFocus = hasInteractiveContent,
+      disableFocusTrap = hasInteractiveContent,
+      disablePortal = hasInteractiveContent,
+      disableTypeFocus,
+      focusTabIndexElements,
+      respectNegativeTabIndex,
+      autoFocusDelay = 20,
+      openDelay,
+      closeDelay,
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     isOpen,
     handleOnMouseEnter,
@@ -74,16 +95,27 @@ export const Tooltip = /*#__PURE__*/memo(_props => {
   }, [handleOnBlur]);
   return /*#__PURE__*/_jsx(Popover, {
     autoFocusDelay: autoFocusDelay,
-    content: /*#__PURE__*/_jsx(TooltipContent, {
+    content: /*#__PURE__*/_jsx(TooltipContent, _objectSpread({
       ref: tooltipContentRef,
+      background: background,
+      borderRadius: borderRadius,
+      color: color,
       content: content,
       elevation: elevation,
+      font: font,
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
       gap: gap,
+      lineHeight: lineHeight,
+      maxWidth: maxWidth,
+      paddingX: paddingX,
+      paddingY: paddingY,
       placement: placement,
       testID: testID,
       tooltipId: tooltipId,
       zIndex: zIndex
-    }),
+    }, props)),
     contentPosition: contentPosition,
     disableAutoFocus: disableAutoFocus,
     disableFocusTrap: disableFocusTrap,

package/esm/overlays/tooltip/TooltipContent.js

@@ -1,8 +1,11 @@
+const _excluded = ["content", "elevation", "gap", "testID", "zIndex", "tooltipId", "placement", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 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, useMemo } from 'react';
 import { animateInOpacityConfig, animateOutOpacityConfig, getTranslateConfigByPlacement } from '@coinbase/cds-common/animation/tooltip';
 import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
@@ -15,19 +18,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const textCss = "textCss-t15dzixe";
 export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    content,
-    elevation,
-    gap,
-    testID,
-    zIndex,
-    tooltipId,
-    placement = 'top',
-    background = 'bg',
-    borderRadius = 200,
-    maxWidth = tooltipMaxWidth,
-    paddingX = tooltipPaddingX,
-    paddingY = tooltipPaddingY
-  } = _ref;
+      content,
+      elevation,
+      gap,
+      testID,
+      zIndex,
+      tooltipId,
+      placement = 'top',
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const outerStyle = useMemo(() => ({
     padding: "var(--space-".concat(gap, ")"),
     zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip
@@ -45,7 +55,7 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
   });
   return /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
     "data-testid": "".concat(testID, "-motion"),
-    children: /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
       ref: ref,
       background: background,
       borderRadius: borderRadius,
@@ -55,16 +65,21 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       maxWidth: maxWidth,
       paddingX: paddingX,
       paddingY: paddingY,
-      role: "tooltip",
+      role: "tooltip"
+    }, props), {}, {
       children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
         className: textCss,
-        color: "fg",
-        font: "label2",
+        color: color,
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
         children: content
       }) : /*#__PURE__*/_jsx("div", {
         children: content
       })
-    })
+    }))
   }));
 }));
 import "./TooltipContent.css";

package/esm/overlays/tray/Tray.js

@@ -7,13 +7,14 @@ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, u
 import { DISMISSAL_DRAG_THRESHOLD, DISMISSAL_VELOCITY_THRESHOLD } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { domMax, LazyMotion, m as motion, MotionConfig, useAnimate, useDragControls } from 'framer-motion';
-import { IconButton } from '../../buttons';
+import { IconButton } from '../../buttons/IconButton';
 import { cx } from '../../cx';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useDimensions } from '../../hooks/useDimensions';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
 import { useTheme } from '../../hooks/useTheme';
-import { Box, HStack } from '../../layout';
+import { Box } from '../../layout/Box';
+import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
 import { FocusTrap } from '../FocusTrap';

package/esm/section-header/SectionHeader.js

@@ -8,7 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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 } from 'react';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';

package/esm/stepper/DefaultStepperStepHorizontal.js

@@ -9,7 +9,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo, useMemo } from 'react';
 import { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import { cx } from '../cx';
-import { HStack, VStack } from '../layout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { DefaultStepperLabelHorizontal } from './DefaultStepperLabelHorizontal';
 import { DefaultStepperProgressHorizontal } from './DefaultStepperProgressHorizontal';
 import { DefaultStepperSubstepContainerHorizontal } from './DefaultStepperSubstepContainerHorizontal';

package/esm/stepper/DefaultStepperStepVertical.js

@@ -9,7 +9,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo, useMemo } from 'react';
 import { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import { cx } from '../cx';
-import { HStack, VStack } from '../layout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { DefaultStepperIconVertical } from './DefaultStepperIconVertical';
 import { DefaultStepperLabelVertical } from './DefaultStepperLabelVertical';
 import { DefaultStepperProgressVertical } from './DefaultStepperProgressVertical';

package/esm/stepper/DefaultStepperSubstepContainerHorizontal.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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 { HStack } from '../layout';
+import { HStack } from '../layout/HStack';
 import { horizontalStepGap } from './Stepper';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultStepperSubstepContainerHorizontal = /*#__PURE__*/memo(_ref => {

package/esm/stepper/DefaultStepperSubstepContainerVertical.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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 { VStack } from '../layout';
+import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultStepperSubstepContainerVertical = /*#__PURE__*/memo(_ref => {
   let {

package/esm/tables/TableCellFallback.js

@@ -11,7 +11,7 @@ import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVari
 import { Cell } from '../cells/Cell';
 import { MediaFallback } from '../cells/MediaFallback';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Fallback } from '../layout';
+import { Fallback } from '../layout/Fallback';
 import { useTableCellSpacing, useTableCellTag, useTableContext } from './hooks/useTable';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const visuallyHiddenCss = "visuallyHiddenCss-v1l01hi5";

package/esm/tabs/DefaultTab.js

@@ -10,7 +10,7 @@ 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 { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 

package/esm/tabs/TabLabel.js

@@ -8,11 +8,11 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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, { memo, useCallback, useId, useMemo } from 'react';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
-import { Collapsible } from '../collapsible';
+import { Collapsible } from '../collapsible/Collapsible';
 import { DotCount } from '../dots/DotCount';
 import { useDimensions } from '../hooks/useDimensions';
 import { useIsoEffect } from '../hooks/useIsoEffect';
-import { HStack } from '../layout';
+import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const primaryTabLabelCss = "primaryTabLabelCss-p22pu9k";

package/esm/visualizations/ProgressBar.js

@@ -9,7 +9,8 @@ import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgress
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
 import { useMotionProps } from '../motion/useMotionProps';
 import { isRtl } from '../utils/isRtl';
 import { jsx as _jsx } from "react/jsx-runtime";