@coinbase/cds-mobile 9.3.0 → 9.4.0

package/esm/section-header/SectionHeader.js

@@ -2,8 +2,9 @@ const _excluded = ["title", "start", "icon", "iconActive", "testID", "balance",
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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 { Icon } from '../icons';
-import { HStack, VStack } from '../layout';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SectionHeader(_ref, ref) {

package/esm/stepper/DefaultStepperStepHorizontal.js

@@ -3,7 +3,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
-import { HStack, VStack } from '../layout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { DefaultStepperProgressHorizontal } from './DefaultStepperProgressHorizontal';
 import { DefaultStepperSubstepContainerHorizontal } from './DefaultStepperSubstepContainerHorizontal';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/stepper/DefaultStepperStepVertical.js

@@ -4,7 +4,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 { useTheme } from '../hooks/useTheme';
-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

@@ -2,7 +2,7 @@ const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "vis
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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

@@ -2,7 +2,7 @@ const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "vis
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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/sticky-footer/StickyFooter.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { View } from 'react-native';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StickyFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {

package/esm/system/ThemeProvider.js

@@ -1,5 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { createContext, memo, useContext, useMemo } from 'react';
+import { defaultTheme } from '../themes/defaultTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ThemeContext = /*#__PURE__*/createContext(undefined);
 
@@ -42,11 +43,15 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref => {
     if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + 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 " + inverseSpectrumKey + " values defined but no " + 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 " + inverseColorKey + " colors defined but no " + inverseSpectrumKey + " values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming");
+
+    // All illustration tokens are optional; fill in any omitted tokens from defaultTheme.
+    const consumerIllustrationColor = theme[activeIllustrationKey];
+    const illustrationColor = consumerIllustrationColor ? _extends({}, defaultTheme[activeIllustrationKey], consumerIllustrationColor) : undefined;
     return _extends({}, theme, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
       color: theme[activeColorKey],
-      illustrationColor: theme[activeIllustrationKey]
+      illustrationColor
     });
   }, [theme, activeColorScheme]);
   return /*#__PURE__*/_jsx(ThemeContext.Provider, {

package/esm/tabs/DefaultTab.js

@@ -7,7 +7,7 @@ import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { DotCount } from '../dots/DotCount';
 import { useTheme } from '../hooks/useTheme';
-import { HStack } from '../layout';
+import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
 
 /** Optional dot count and a11y overrides for the default tab row. */

package/esm/tabs/DefaultTabsActiveIndicator.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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, useEffect } from 'react';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { tabsSpringConfig } from './Tabs';
 
 /**

package/esm/tabs/SegmentedTab.js

@@ -7,7 +7,7 @@ import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { tabsSpringConfig } from './Tabs';

package/esm/tabs/TabIndicator.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { Animated } from 'react-native';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { useTabIndicatorStyles } from './hooks/useTabIndicatorStyles';
 import { jsx as _jsx } from "react/jsx-runtime";
 /** @deprecated Use DefaultTabsActiveIndicator instead. This will be removed in a future major release. */

package/esm/tabs/TabLabel.js

@@ -5,7 +5,7 @@ import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { DotCount } from '../dots/DotCount';
 import { useTheme } from '../hooks/useTheme';
-import { HStack } from '../layout';
+import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
 import { useDotAnimation } from './hooks/useDotAnimation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/tabs/TabNavigation.js

@@ -5,9 +5,9 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useState } fr
 import { ScrollView, View } from 'react-native';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useHorizontallyScrollingPressables } from '../hooks/useHorizontallyScrollingPressables';
-import { OverflowGradient } from '../layout';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
+import { OverflowGradient } from '../layout/OverflowGradient';
 import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { TabIndicator } from './TabIndicator';

package/esm/tabs/Tabs.js

@@ -13,7 +13,8 @@ import { useTabs } from '@coinbase/cds-common/tabs/useTabs';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
 import { DefaultTab } from './DefaultTab';
 import { DefaultTabsActiveIndicator } from './DefaultTabsActiveIndicator';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/themes/coinbaseHighContrastTheme.js

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

package/esm/themes/coinbaseTheme.js

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

package/esm/themes/defaultHighContrastTheme.js

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

package/esm/themes/defaultTheme.js

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

package/esm/tour/DefaultTourMask.js

@@ -5,7 +5,7 @@ import { Defs, Mask, Rect as NativeRect, Svg } from 'react-native-svg';
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
 import { useDimensions } from '../hooks/useDimensions';
 import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DefaultTourMask = /*#__PURE__*/memo(_ref => {
   let {

package/esm/visualizations/Counter.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Counter = _ref => {
   let {

package/esm/visualizations/DefaultProgressCircleContent.js

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultProgressCircleContent = /*#__PURE__*/memo(_ref => {

package/esm/visualizations/ProgressBar.js

@@ -6,7 +6,8 @@ import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgress
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Box, HStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
   const mergedProps = useComponentConfig('ProgressBar', _props);

package/esm/visualizations/ProgressBarWithFixedLabels.js

@@ -1,7 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { I18nManager, View } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { getProgressBarLabelParts } from './getProgressBarLabelParts';
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -5,7 +5,8 @@ import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
-import { Box, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { getProgressBarLabelParts } from './getProgressBarLabelParts';
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/ProgressCircle.js

@@ -10,7 +10,7 @@ import { isTest } from '@coinbase/cds-utils';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { DefaultProgressCircleContent } from './DefaultProgressCircleContent';
 import { VisualizationContainer } from './VisualizationContainer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/visualizations/ProgressContainerWithButtons.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { Button } from '../buttons';
-import { VStack } from '../layout';
+import { Button } from '../buttons/Button';
+import { VStack } from '../layout/VStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ProgressContainerWithButtons = _ref => {
   let {

package/esm/visualizations/VisualizationContainer.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { useVisualizationDimensions } from '@coinbase/cds-common/visualizations/useVisualizationDimensions';
 import { useLayout } from '../hooks/useLayout';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 /*
 Some visualizations need a static width to render. This container can be dynamically sized and it will inject its static calculated dimensions into its child

package/esm/visualizations/chart/CartesianChart.js

@@ -3,14 +3,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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, useEffect, useMemo, useRef, useState } from 'react';
 import { Canvas, Skia } from '@shopify/react-native-skia';
-import { Box } from '../../layout';
+import { Box } from '../../layout/Box';
+import { Legend } from './legend/Legend';
 import { ScrubberAccessibilityView } from './scrubber/ScrubberAccessibilityView';
 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 { convertToSerializableScale } from './utils/scale';
 import { useChartContextBridge } from './ChartContextBridge';
 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 ChartCanvas = /*#__PURE__*/memo(_ref => {
   let {

package/esm/visualizations/chart/Path.js

@@ -5,10 +5,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo, useEffect, useMemo } from 'react';
 import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { Group, Path as SkiaPath, Skia, usePathInterpolation } from '@shopify/react-native-skia';
+import { unwrapAnimatedValue } from './utils/chart';
 import { defaultPathEnterTransition } from './utils/path';
 import { buildTransition, defaultTransition, getTransition, usePathTransition } from './utils/transition';
 import { useCartesianChartContext } from './ChartProvider';
-import { unwrapAnimatedValue } from './utils';
 
 /**
  * Duration in milliseconds for path enter transition.

package/esm/visualizations/chart/PeriodSelector.js

@@ -6,10 +6,10 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useTheme } from '../../hooks/useTheme';
-import { SegmentedTabs } from '../../tabs';
 import { SegmentedTab } from '../../tabs/SegmentedTab';
+import { SegmentedTabs } from '../../tabs/SegmentedTabs';
 import { tabsSpringConfig } from '../../tabs/Tabs';
-import { Text } from '../../typography';
+import { Text } from '../../typography/Text';
 
 // Animated active indicator to support smooth transition of background color
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -6,10 +6,12 @@ const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity",
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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

@@ -5,9 +5,9 @@ import { memo, useMemo } from 'react';
 import { Group } from '@shopify/react-native-skia';
 import { useTheme } from '../../../hooks/useTheme';
 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 { getDottedAreaPath } from '../utils/path';
 import { defaultTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -4,9 +4,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo, useMemo } from 'react';
 import { useTheme } from '../../../hooks/useTheme';
 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 } from "react/jsx-runtime";
 /**
  * A customizable gradient area component.

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

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { useTheme } from '../../../hooks/useTheme';
-import { Gradient } from '../gradient';
+import { Gradient } from '../gradient/Gradient';
 import { Path } from '../Path';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

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

@@ -1,4 +1,4 @@
-import { accessoryFadeTransitionDuration } from '../utils';
+import { accessoryFadeTransitionDuration } from '../utils/transition';
 
 /**
  * Animation transition for axis elements (grid lines, tick marks, tick labels).

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

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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,7 +8,10 @@ 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 { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_HEIGHT = 32;

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

@@ -8,7 +8,10 @@ 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 { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_WIDTH = 44;

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

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
+import { getBarPath } from '../utils/path';
 import { DefaultBar } from './DefaultBar';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

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

@@ -4,9 +4,11 @@ const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxi
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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

@@ -2,7 +2,7 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
 import { Group, Skia, usePathInterpolation } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getStackGroups } from '../utils';
+import { getStackGroups } from '../utils/bar';
 import { buildTransition, instantTransition } from '../utils/transition';
 import { BarStackGroup } from './BarStackGroup';
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -3,7 +3,9 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { defaultAxisId, getBarSizeAdjustment, isCategoricalScale } from '../utils';
+import { defaultAxisId } from '../utils/axis';
+import { getBarSizeAdjustment } from '../utils/bar';
+import { isCategoricalScale } from '../utils/scale';
 import { BarStack } from './BarStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

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

@@ -3,8 +3,9 @@ import { memo, useMemo } from 'react';
 import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Path } from '../Path';
-import { defaultBarEnterOpacityTransition, defaultBarEnterTransition, getBarPath, 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";
 /**

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

@@ -1,8 +1,8 @@
 import { memo, useMemo } from 'react';
 import { Group, Skia } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
 import { defaultBarEnterTransition, getNormalizedStagger, getStackInitialClipRect, withStaggerDelayTransition } from '../utils/bar';
+import { getBarPath } from '../utils/path';
 import { defaultTransition, getTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

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

@@ -2,8 +2,8 @@ import { memo, useEffect, useMemo, useRef } from 'react';
 import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { LinearGradient } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
-import { buildTransition, defaultTransition, instantTransition } from '../utils';
 import { getColorWithOpacity, getGradientAxis, getGradientConfig } from '../utils/gradient';
+import { buildTransition, defaultTransition, instantTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Renders a Skia LinearGradient element based on a GradientDefinition.

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

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { StyleSheet } from 'react-native';
-import { HStack } from '../../../layout';
+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";

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

@@ -3,8 +3,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { StyleSheet, View } from 'react-native';
-import { useTheme } from '../../../index';
-import { Box } from '../../../layout';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box } from '../../../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = StyleSheet.create({
   container: {

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

@@ -2,7 +2,7 @@ const _excluded = ["flexDirection", "justifyContent", "alignItems", "flexWrap",
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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';