@coinbase/cds-web 9.3.0 → 9.4.0

package/esm/themes/coinbaseTheme.js

@@ -580,6 +580,7 @@ export const coinbaseTheme = {
     gray: "rgb(".concat(lightSpectrum.gray20, ")"),
     gray2: "rgb(10, 11, 15)",
     gray3: "rgb(206, 210, 220)",
+    gray4: "rgb(200, 203, 210)",
     positive: "rgb(".concat(lightSpectrum.green30, ")"),
     negative: "rgb(".concat(lightSpectrum.red50, ")"),
     accent1: "rgb(255, 210, 0)",
@@ -596,6 +597,7 @@ export const coinbaseTheme = {
     gray: "rgb(".concat(darkSpectrum.gray30, ")"),
     gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
     gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray4: "rgb(".concat(darkSpectrum.gray100, ")"),
     positive: "rgb(".concat(darkSpectrum.green70, ")"),
     negative: "rgb(".concat(darkSpectrum.red60, ")"),
     accent1: "rgb(236, 208, 105)",

package/esm/themes/defaultHighContrastTheme.js

@@ -576,6 +576,7 @@ export const defaultHighContrastTheme = {
     gray: "rgb(".concat(lightSpectrum.gray20, ")"),
     gray2: "rgb(10, 11, 15)",
     gray3: "rgb(206, 210, 220)",
+    gray4: "rgb(200, 203, 210)",
     positive: "rgb(".concat(lightSpectrum.green30, ")"),
     negative: "rgb(".concat(lightSpectrum.red50, ")"),
     accent1: "rgb(255, 210, 0)",
@@ -592,6 +593,7 @@ export const defaultHighContrastTheme = {
     gray: "rgb(".concat(darkSpectrum.gray30, ")"),
     gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
     gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray4: "rgb(".concat(darkSpectrum.gray100, ")"),
     positive: "rgb(".concat(darkSpectrum.green70, ")"),
     negative: "rgb(".concat(darkSpectrum.red60, ")"),
     accent1: "rgb(236, 208, 105)",

package/esm/themes/defaultTheme.js

@@ -402,6 +402,7 @@ export const defaultTheme = {
     gray: "rgb(".concat(lightSpectrum.gray20, ")"),
     gray2: "rgb(10, 11, 15)",
     gray3: "rgb(206, 210, 220)",
+    gray4: "rgb(200, 203, 210)",
     positive: "rgb(".concat(lightSpectrum.green30, ")"),
     negative: "rgb(".concat(lightSpectrum.red50, ")"),
     accent1: "rgb(255, 210, 0)",
@@ -418,6 +419,7 @@ export const defaultTheme = {
     gray: "rgb(".concat(darkSpectrum.gray30, ")"),
     gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
     gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray4: "rgb(".concat(darkSpectrum.gray100, ")"),
     positive: "rgb(".concat(darkSpectrum.green70, ")"),
     negative: "rgb(".concat(darkSpectrum.red60, ")"),
     accent1: "rgb(236, 208, 105)",

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";

package/esm/visualizations/chart/CartesianChart.js

@@ -7,13 +7,14 @@ 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, useCallback, useMemo, useRef } from 'react';
+import { cx } from '../../cx';
 import { useDimensions } from '../../hooks/useDimensions';
-import { cx } from '../../index';
-import { Box } from '../../layout';
+import { Box } from '../../layout/Box';
+import { Legend } from './legend/Legend';
 import { ScrubberProvider } from './scrubber/ScrubberProvider';
+import { defaultAxisId, getAxisConfig, getAxisRange, getCartesianAxisDomain, getCartesianAxisScale, useTotalAxisPadding } from './utils/axis';
+import { defaultHorizontalLayoutChartInset, defaultVerticalLayoutChartInset, getChartInset, getStackedSeriesData as calculateStackedSeriesData } from './utils/chart';
 import { CartesianChartProvider } from './ChartProvider';
-import { Legend } from './legend';
-import { defaultAxisId, defaultHorizontalLayoutChartInset, defaultVerticalLayoutChartInset, getAxisConfig, getAxisRange, getCartesianAxisDomain, getCartesianAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const focusStylesCss = "focusStylesCss-fm8hd7g";
 export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {

package/esm/visualizations/chart/PeriodSelector.js

@@ -10,11 +10,12 @@ 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, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
-import { cx } from '../../index';
-import { Box } from '../../layout';
-import { SegmentedTabs, tabsTransitionConfig } from '../../tabs';
+import { cx } from '../../cx';
+import { Box } from '../../layout/Box';
 import { SegmentedTab } from '../../tabs/SegmentedTab';
-import { Text } from '../../typography';
+import { SegmentedTabs } from '../../tabs/SegmentedTabs';
+import { tabsTransitionConfig } from '../../tabs/Tabs';
+import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MotionBox = motion(Box);
 

package/esm/visualizations/chart/area/Area.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getAreaPath } from '../utils';
+import { getAreaPath } from '../utils/path';
 import { DottedArea } from './DottedArea';
 import { GradientArea } from './GradientArea';
 import { SolidArea } from './SolidArea';

package/esm/visualizations/chart/area/AreaChart.js

@@ -11,10 +11,12 @@ 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, useMemo } from 'react';
-import { XAxis, YAxis } from '../axis';
+import { XAxis } from '../axis/XAxis';
+import { YAxis } from '../axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
 import { Line } from '../line/Line';
-import { defaultStackId, withBaselineDomain } from '../utils';
+import { withBaselineDomain } from '../utils/axis';
+import { defaultStackId } from '../utils/chart';
 import { Area } from './Area';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {

package/esm/visualizations/chart/area/DottedArea.js

@@ -8,9 +8,9 @@ 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 { memo, useId, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
-import { Gradient } from '../gradient';
+import { Gradient } from '../gradient/Gradient';
 import { Path } from '../Path';
-import { createGradient, getBaseline } from '../utils';
+import { createGradient, getBaseline } from '../utils/gradient';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A customizable dotted area gradient component.

package/esm/visualizations/chart/area/GradientArea.js

@@ -8,9 +8,9 @@ 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 { memo, useId, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
-import { Gradient } from '../gradient';
+import { Gradient } from '../gradient/Gradient';
 import { Path } from '../Path';
-import { createGradient, getBaseline } from '../utils';
+import { createGradient, getBaseline } from '../utils/gradient';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A customizable gradient area component which uses Path with SVG linearGradient.

package/esm/visualizations/chart/area/SolidArea.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, useId } from 'react';
-import { Gradient } from '../gradient';
+import { Gradient } from '../gradient/Gradient';
 import { Path } from '../Path';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/visualizations/chart/axis/Axis.js

@@ -1,4 +1,4 @@
-import { accessoryFadeTransitionDuration } from '../utils';
+import { accessoryFadeTransitionDuration } from '../utils/transition';
 export const axisLineStyles = "\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n";
 export const axisTickMarkStyles = "\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n";
 

package/esm/visualizations/chart/axis/DefaultAxisTickLabel.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); }
 import { memo } from 'react';
-import { ChartText } from '../text';
+import { ChartText } from '../text/ChartText';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * DefaultAxisTickLabel is the default label component for axis tick labels.

package/esm/visualizations/chart/axis/XAxis.js

@@ -8,13 +8,16 @@ 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 { memo, useCallback, useEffect, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
-import { cx } from '../../../index';
+import { cx } from '../../../cx';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { SolidLine } from '../line/SolidLine';
 import { ChartText } from '../text/ChartText';
 import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
+import { getAxisTicksData, toPointAnchor } from '../utils/axis';
+import { lineToPath } from '../utils/path';
+import { getPointOnScale } from '../utils/point';
+import { isCategoricalScale } from '../utils/scale';
 import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/chart/axis/YAxis.js

@@ -8,13 +8,16 @@ 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 { memo, useCallback, useEffect, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
-import { cx } from '../../../index';
+import { cx } from '../../../cx';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { SolidLine } from '../line/SolidLine';
 import { ChartText } from '../text/ChartText';
 import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
+import { getAxisTicksData, toPointAnchor } from '../utils/axis';
+import { lineToPath } from '../utils/path';
+import { getPointOnScale } from '../utils/point';
+import { isCategoricalScale } from '../utils/scale';
 import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/chart/bar/Bar.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
-import { DefaultBar } from './';
+import { getBarPath } from '../utils/path';
+import { DefaultBar } from './DefaultBar';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Simple bar component that renders a single bar at the specified position.

package/esm/visualizations/chart/bar/BarChart.js

@@ -9,9 +9,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 { forwardRef, memo, useMemo } from 'react';
-import { XAxis, YAxis } from '../axis';
+import { XAxis } from '../axis/XAxis';
+import { YAxis } from '../axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
-import { defaultStackId, withBaselineDomain } from '../utils';
+import { withBaselineDomain } from '../utils/axis';
+import { defaultStackId } from '../utils/chart';
 import { BarPlot } from './BarPlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {

package/esm/visualizations/chart/bar/BarPlot.js

@@ -1,7 +1,8 @@
 import { memo, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getStackGroups, instantTransition } from '../utils';
+import { getStackGroups } from '../utils/bar';
+import { instantTransition } from '../utils/transition';
 import { BarStackGroup } from './BarStackGroup';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/visualizations/chart/bar/DefaultBar.js

@@ -9,8 +9,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Path } from '../Path';
-import { defaultBarEnterOpacityTransition, defaultBarEnterTransition, defaultTransition, getBarPath, getTransition, withStaggerDelayTransition } from '../utils';
+import { defaultBarEnterOpacityTransition, defaultBarEnterTransition, withStaggerDelayTransition } from '../utils/bar';
 import { getNormalizedStagger } from '../utils/bar';
+import { getBarPath } from '../utils/path';
+import { defaultTransition, getTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Default bar component that renders a solid bar with animation.

package/esm/visualizations/chart/bar/DefaultBarStack.js

@@ -1,8 +1,9 @@
 import { memo, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultBarEnterTransition, defaultTransition, getBarPath, getNormalizedStagger, getStackInitialClipRect, getTransition, withStaggerDelayTransition } from '../utils';
-import { usePathTransition } from '../utils/transition';
+import { defaultBarEnterTransition, getNormalizedStagger, getStackInitialClipRect, withStaggerDelayTransition } from '../utils/bar';
+import { getBarPath } from '../utils/path';
+import { defaultTransition, getTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Default stack component that renders children in a group with animated clip path.

package/esm/visualizations/chart/gradient/Gradient.js

@@ -1,8 +1,8 @@
 import { memo, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultTransition, instantTransition } from '../utils';
 import { getGradientAxis, getGradientConfig } from '../utils/gradient';
+import { defaultTransition, instantTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Renders an SVG linearGradient element based on a GradientDefinition.

package/esm/visualizations/chart/legend/DefaultLegendEntry.js

@@ -7,9 +7,9 @@ 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 { cx } from '../../../index';
-import { HStack } from '../../../layout';
-import { Text } from '../../../typography';
+import { cx } from '../../../cx';
+import { HStack } from '../../../layout/HStack';
+import { Text } from '../../../typography/Text';
 import { DefaultLegendShape } from './DefaultLegendShape';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const legendEntryCss = "legendEntryCss-l1593xwx";

package/esm/visualizations/chart/legend/DefaultLegendShape.js

@@ -7,8 +7,8 @@ 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, { memo } from 'react';
-import { cx } from '../../../index';
-import { Box } from '../../../layout';
+import { cx } from '../../../cx';
+import { Box } from '../../../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 const containerCss = "containerCss-c4vlres";
 const pillCss = "pillCss-p19f3sqs";

package/esm/visualizations/chart/legend/Legend.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, useMemo } from 'react';
-import { Box } from '../../../layout';
+import { Box } from '../../../layout/Box';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DefaultLegendEntry } from './DefaultLegendEntry';
 import { DefaultLegendShape } from './DefaultLegendShape';

package/esm/visualizations/chart/line/DefaultReferenceLineLabel.js

@@ -8,8 +8,8 @@ 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 { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
-import { ChartText } from '../text';
-import { getChartInset } from '../utils';
+import { ChartText } from '../text/ChartText';
+import { getChartInset } from '../utils/chart';
 import { jsx as _jsx } from "react/jsx-runtime";
 const elevatedInset = {
   top: 8,

package/esm/visualizations/chart/line/DottedLine.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, useId } from 'react';
-import { Gradient } from '../gradient';
+import { Gradient } from '../gradient/Gradient';
 import { Path } from '../Path';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/visualizations/chart/line/Line.js

@@ -9,8 +9,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo, useMemo } from 'react';
 import { Area } from '../area/Area';
 import { useCartesianChartContext } from '../ChartProvider';
-import { Point } from '../point';
-import { evaluateGradientAtValue, getGradientAxis, getGradientConfig, getLineData, getLinePath } from '../utils';
+import { Point } from '../point/Point';
+import { getLineData } from '../utils/chart';
+import { evaluateGradientAtValue, getGradientAxis, getGradientConfig } from '../utils/gradient';
+import { getLinePath } from '../utils/path';
 import { DottedLine } from './DottedLine';
 import { SolidLine } from './SolidLine';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/chart/line/ReferenceLine.js

@@ -4,9 +4,9 @@ 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); }
 import React, { memo } from 'react';
-import { cx } from '../../../index';
+import { cx } from '../../../cx';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getPointOnScale } from '../utils';
+import { getPointOnScale } from '../utils/point';
 import { DefaultReferenceLineLabel } from './DefaultReferenceLineLabel';
 import { DottedLine } from './DottedLine';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/chart/line/SolidLine.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, useId } from 'react';
-import { Gradient } from '../gradient';
+import { Gradient } from '../gradient/Gradient';
 import { Path } from '../Path';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/visualizations/chart/point/DefaultPointLabel.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, useMemo } from 'react';
-import { ChartText } from '../text';
+import { ChartText } from '../text/ChartText';
 import { getAlignmentFromPosition, getLabelCoordinates } from '../utils/point';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/esm/visualizations/chart/point/Point.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, { memo, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
-import { cx } from '../../../index';
+import { cx } from '../../../cx';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultAccessoryEnterTransition, defaultTransition, getTransition, projectPoint } from '../utils';
+import { projectPoint } from '../utils/point';
+import { defaultAccessoryEnterTransition, defaultTransition, getTransition } from '../utils/transition';
 import { DefaultPointLabel } from './DefaultPointLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const containerCss = "containerCss-c1av2uu0";

package/esm/visualizations/chart/scrubber/DefaultScrubberBeacon.js

@@ -7,7 +7,8 @@ import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { m as motion, useAnimate } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultTransition, getTransition, instantTransition, projectPoint } from '../utils';
+import { projectPoint } from '../utils/point';
+import { defaultTransition, getTransition, instantTransition } from '../utils/transition';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultRadius = 5;
 const defaultStrokeWidth = 2;

package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.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 { memo } from 'react';
 import { m as motion } from 'framer-motion';
-import { ChartText } from '../text';
+import { ChartText } from '../text/ChartText';
 import { jsx as _jsx } from "react/jsx-runtime";
 const labelVerticalInset = 3.5;
 const labelHorizontalInset = 4;

package/esm/visualizations/chart/scrubber/DefaultScrubberLabel.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 { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
-import { DefaultReferenceLineLabel } from '../line';
+import { DefaultReferenceLineLabel } from '../line/DefaultReferenceLineLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * DefaultScrubberLabel is the default label component for the scrubber line.

package/esm/visualizations/chart/scrubber/Scrubber.js

@@ -6,8 +6,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { ReferenceLine } from '../line';
-import { defaultAccessoryEnterTransition, getPointOnScale, getTransition, useScrubberContext } from '../utils';
+import { ReferenceLine } from '../line/ReferenceLine';
+import { useScrubberContext } from '../utils/context';
+import { getPointOnScale } from '../utils/point';
+import { defaultAccessoryEnterTransition, getTransition } from '../utils/transition';
 import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from './DefaultScrubberLabel';
 import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';

package/esm/visualizations/chart/scrubber/ScrubberBeaconGroup.js

@@ -1,7 +1,8 @@
 import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from 'react';
 import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
 import { useCartesianChartContext } from '../ChartProvider';
-import { evaluateGradientAtValue, getGradientAxis, getGradientConfig, useScrubberContext } from '../utils';
+import { useScrubberContext } from '../utils/context';
+import { evaluateGradientAtValue, getGradientAxis, getGradientConfig } from '../utils/gradient';
 import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { jsx as _jsx } from "react/jsx-runtime";
 // Helper component to calculate beacon data for a specific series

package/esm/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -6,8 +6,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import { memo, useCallback, useMemo, useState } from 'react';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultTransition, getPointOnScale, getTransition, instantTransition, useScrubberContext } from '../utils';
+import { useScrubberContext } from '../utils/context';
+import { getPointOnScale } from '../utils/point';
 import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
+import { defaultTransition, getTransition, instantTransition } from '../utils/transition';
 import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PositionedLabel = /*#__PURE__*/memo(_ref => {

package/esm/visualizations/chart/scrubber/ScrubberProvider.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
-import { isCategoricalScale, ScrubberContext } from '../utils';
+import { ScrubberContext } from '../utils/context';
+import { isCategoricalScale } from '../utils/scale';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A component which encapsulates the ScrubberContext.

package/esm/visualizations/chart/text/ChartText.js

@@ -5,11 +5,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { m as motion } from 'framer-motion';
-import { cx } from '../../../index';
-import { Box } from '../../../layout';
-import { Text } from '../../../typography';
+import { cx } from '../../../cx';
+import { Box } from '../../../layout/Box';
+import { Text } from '../../../typography/Text';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getChartInset } from '../utils';
+import { getChartInset } from '../utils/chart';
 import { accessoryFadeTransitionDuration } from '../utils/transition';
 
 /**

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractive.js

@@ -12,15 +12,18 @@ import { chartCompactHeight, chartHeight } from '@coinbase/cds-common/tokens/spa
 import { debounce } from '@coinbase/cds-common/utils/debounce';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { useSparklineCoordinates } from '@coinbase/cds-common/visualizations/useSparklineCoordinates';
+// eslint-disable-next-line internal/no-cds-barrel-imports -- cds-lottie-files subpaths are the deepest available exports
 import { chartFallbackNegative, chartFallbackPositive } from '@coinbase/cds-lottie-files';
 import { emptyArray, isStorybook, noop } from '@coinbase/cds-utils';
 import isEqual from 'lodash/isEqual';
 import isObject from 'lodash/isObject';
-import { Lottie } from '../../../animation';
+import { Lottie } from '../../../animation/Lottie';
+import { cx } from '../../../cx';
 import { useDimensions } from '../../../hooks/useDimensions';
-import { cx, useTheme } from '../../../index';
-import { HStack, VStack } from '../../../layout';
+import { useTheme } from '../../../hooks/useTheme';
 import { Box } from '../../../layout/Box';
+import { HStack } from '../../../layout/HStack';
+import { VStack } from '../../../layout/VStack';
 import { getBrowserGlobals } from '../../../utils/browser';
 import { VisualizationContainer } from '../../VisualizationContainer';
 import { InnerSparklineInteractiveProvider } from './InnerSparklineInteractiveProvider';

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import { cx } from '../../../index';
+import { cx } from '../../../cx';
 import { Text } from '../../../typography/Text';
 import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import { cx } from '../../../index';
+import { cx } from '../../../cx';
 import { Text } from '../../../typography/Text';
 import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.js

@@ -5,7 +5,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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, { memo, useCallback } from 'react';
 import { borderWidth, lineDashArray } from '@coinbase/cds-common/tokens/sparkline';
-import { cx } from '../../../index';
+import { cx } from '../../../cx';
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js

@@ -3,7 +3,7 @@ import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
 import { useDateLookup } from '@coinbase/cds-common/visualizations/useDateLookup';
 import times from 'lodash/times';
 import { cubicBezier } from '../../../animation/convertMotionConfig';
-import { HStack } from '../../../layout';
+import { HStack } from '../../../layout/HStack';
 import { Text } from '../../../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 const fadeInCss = "fadeInCss-f128m5n3";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.js

@@ -2,7 +2,8 @@ import React, { memo, useCallback, useMemo } from 'react';
 import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { useTheme } from '../../../hooks/useTheme';
-import { Box, HStack } from '../../../layout';
+import { Box } from '../../../layout/Box';
+import { HStack } from '../../../layout/HStack';
 import { Pressable } from '../../../system/Pressable';
 import { Text } from '../../../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";