@coinbase/cds-mobile 9.3.0 → 9.4.0

package/esm/alpha/tabbed-chips/TabbedChips.js

@@ -8,8 +8,9 @@ import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { MediaChip } from '../../chips/MediaChip';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useHorizontalScrollToTarget } from '../../hooks/useHorizontalScrollToTarget';
-import { Box, OverflowGradient } from '../../layout';
-import { Tabs } from '../../tabs';
+import { Box } from '../../layout/Box';
+import { OverflowGradient } from '../../layout/OverflowGradient';
+import { Tabs } from '../../tabs/Tabs';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DefaultTabComponent = _ref => {
   let {

package/esm/animation/LottieStatusAnimation.js

@@ -4,6 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo, useMemo } from 'react';
 import { lottieStatusToAccessibilityLabel } from '@coinbase/cds-common/lottie/statusToAccessibilityLabel';
 import { useStatusAnimationPoller } from '@coinbase/cds-common/lottie/useStatusAnimationPoller';
+// eslint-disable-next-line internal/no-cds-barrel-imports -- tradeStatus is the deepest available export in cds-lottie-files
 import { tradeStatus } from '@coinbase/cds-lottie-files/tradeStatus';
 import { useLottie } from './useLottie';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/animation/createLottie.js

@@ -1,7 +1,7 @@
 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, { createRef } from 'react';
 import { Animated } from 'react-native';
-import { getLottieDuration, getLottieMarkers } from '@coinbase/cds-common';
+import { getLottieDuration, getLottieMarkers } from '@coinbase/cds-common/lottie/lottieUtils';
 import { Lottie } from './Lottie';
 import { lottieProgressConfig } from './lottieProgresConfig';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/banner/Banner.js

@@ -6,10 +6,12 @@ import { variants } from '@coinbase/cds-common/tokens/banner';
 import { Collapsible } from '../collapsible/Collapsible';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Icon } from '../icons';
-import { Box, HStack, VStack } from '../layout';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
-import { Link } from '../typography';
+import { Link } from '../typography/Link';
 import { Text } from '../typography/Text';
 
 /**

package/esm/buttons/AvatarButton.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, { memo } from 'react';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Avatar } from '../media';
+import { Avatar } from '../media/Avatar';
 import { Pressable } from '../system/Pressable';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const AvatarButton = /*#__PURE__*/memo(_props => {

package/esm/buttons/ButtonGroup.js

@@ -1,7 +1,7 @@
 import React, { Children, cloneElement, memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ButtonGroup = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('ButtonGroup', _props);

package/esm/buttons/IconCounterButton.js

@@ -4,9 +4,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { formatCount } from '@coinbase/cds-common/utils/formatCount';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
-import { HStack } from '../layout';
-import { Pressable } from '../system';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconCounterButton(_props, ref) {

package/esm/cards/CardMedia.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 } from 'react';
 import { defaultMediaDimension, defaultMediaSize, defaultPictogramMediaDimension } from '@coinbase/cds-common/tokens/card';
-import { Pictogram, SpotSquare } from '../illustrations';
+import { Pictogram } from '../illustrations/Pictogram';
+import { SpotSquare } from '../illustrations/SpotSquare';
 import { getSource, RemoteImage } from '../media/RemoteImage';
 
 /**

package/esm/cards/ContainedAssetCard.js

@@ -1,7 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { containedAssetCardLargeDimension, containedAssetCardLargeWidth, containedAssetCardSmallDimension } from '@coinbase/cds-common/tokens/card';
-import { HStack, VStack } from '../layout';
-import { Pressable } from '../system';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/cards/ContentCard/ContentCard.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 { contentCardMaxWidth, contentCardMinWidth } from '@coinbase/cds-common/tokens/card';
-import { VStack } from '../../layout';
+import { VStack } from '../../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ContentCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCard(_ref, ref) {
   let {

package/esm/cards/ContentCard/ContentCardBody.js

@@ -2,7 +2,8 @@ const _excluded = ["body", "label", "media", "mediaPosition", "mediaPlacement",
 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, useMemo } from 'react';
-import { Box, VStack } from '../../layout';
+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";
 const mapMediaPositionToMediaPlacement = {

package/esm/cards/ContentCard/ContentCardFooter.js

@@ -2,7 +2,7 @@ const _excluded = ["children", "justifyContent"];
 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 { HStack } from '../../layout';
+import { HStack } from '../../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ContentCardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/cards/ContentCard/ContentCardHeader.js

@@ -2,8 +2,9 @@ const _excluded = ["avatar", "title", "meta", "end", "subtitle", "actions", "thu
 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, useMemo } from 'react';
-import { HStack, VStack } from '../../layout';
-import { Avatar } from '../../media';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Avatar } from '../../media/Avatar';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ContentCardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCardHeader(_ref, ref) {

package/esm/cards/FeedCard.js

@@ -2,7 +2,8 @@ const _excluded = ["testID", "avatar", "author", "metadata", "pictogram", "spotS
 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, { memo, useMemo } from 'react';
-import { Button, IconButton } from '../buttons';
+import { Button } from '../buttons/Button';
+import { IconButton } from '../buttons/IconButton';
 import { HStack } from '../layout/HStack';
 import { Card } from './Card';
 import { CardBody } from './CardBody';

package/esm/cards/FloatingAssetCard.js

@@ -1,7 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { floatingAssetCardLargeWidth, floatingAssetCardSmallDimension } from '@coinbase/cds-common/tokens/card';
-import { HStack, VStack } from '../layout';
-import { Pressable } from '../system';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/cards/NudgeCard.js

@@ -1,9 +1,11 @@
 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, { isValidElement, memo } from 'react';
 import { getCardBodySpacingProps } from '@coinbase/cds-common/cards/getCardBodySpacingProps';
-import { IconButton } from '../buttons';
+import { IconButton } from '../buttons/IconButton';
 import { Pictogram } from '../illustrations/Pictogram';
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/cards/UpsellCard.js

@@ -1,7 +1,9 @@
 import React, { isValidElement, memo } from 'react';
 import { upsellCardDefaultWidth, upsellCardMinHeight } from '@coinbase/cds-common/tokens/card';
-import { Button, IconButton } from '../buttons';
-import { HStack, VStack } from '../layout';
+import { Button } from '../buttons/Button';
+import { IconButton } from '../buttons/IconButton';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/cells/ContentCell.js

@@ -4,7 +4,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo, useMemo } from 'react';
 import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
 import { isProduction } from '@coinbase/cds-utils';
-import { Box, HStack, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';

package/esm/cells/ContentCellFallback.js

@@ -2,7 +2,8 @@ import React, { memo, useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useTheme } from '../hooks/useTheme';
-import { Box, Fallback } from '../layout';
+import { Box } from '../layout/Box';
+import { Fallback } from '../layout/Fallback';
 import { ContentCell } from './ContentCell';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';

package/esm/cells/ListCellFallback.js

@@ -6,8 +6,8 @@ import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { VStack } from '../layout';
 import { Fallback } from '../layout/Fallback';
+import { VStack } from '../layout/VStack';
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';

package/esm/chips/Chip.js

@@ -4,8 +4,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, Fragment, memo } from 'react';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack } from '../layout';
-import { InvertedThemeProvider, Pressable } from '../system';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { Pressable } from '../system/Pressable';
+import { InvertedThemeProvider } from '../system/ThemeProvider';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/chips/InputChip.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 { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {

package/esm/chips/SelectChip.js

@@ -8,8 +8,8 @@ import { useRotateAnimation } from '../animation/useRotateAnimation';
 import { SelectProvider } from '../controls/SelectContext';
 import { useSelect } from '../controls/useSelect';
 import { useA11y } from '../hooks/useA11y';
-import { Icon } from '../icons';
-import { Tray } from '../overlays';
+import { Icon } from '../icons/Icon';
+import { Tray } from '../overlays/tray/Tray';
 import { MediaChip } from './MediaChip';
 
 /**

package/esm/chips/TabbedChips.js

@@ -7,8 +7,9 @@ import { ScrollView } from 'react-native';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useHorizontalScrollToTarget } from '../hooks/useHorizontalScrollToTarget';
-import { Box, OverflowGradient } from '../layout';
-import { Tabs } from '../tabs';
+import { Box } from '../layout/Box';
+import { OverflowGradient } from '../layout/OverflowGradient';
+import { Tabs } from '../tabs/Tabs';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TabComponent = _ref => {

package/esm/coachmark/Coachmark.js

@@ -3,11 +3,13 @@ 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 { useWindowDimensions } from 'react-native';
-import { IconButton } from '../buttons';
+import { IconButton } from '../buttons/IconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-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/CheckboxCell.js

@@ -7,7 +7,9 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { useSelectionCellBorderStyle } from '../hooks/useSelectionCellBorderStyle';
 import { useTheme } from '../hooks/useTheme';
-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

@@ -4,7 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Group } from '../layout';
+import { Group } from '../layout/Group';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_props, ref) {
   const mergedProps = useComponentConfig('ControlGroup', _props);

package/esm/controls/Radio.js

@@ -6,7 +6,7 @@ import { Animated, StyleSheet } from 'react-native';
 import { Circle, Svg } from 'react-native-svg';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { Interactable } from '../system/Interactable';
 import { Control } from './Control';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/controls/RadioCell.js

@@ -7,7 +7,9 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { useSelectionCellBorderStyle } from '../hooks/useSelectionCellBorderStyle';
 import { useTheme } from '../hooks/useTheme';
-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 { Radio } from './Radio';

package/esm/dates/DatePicker.js

@@ -5,7 +5,8 @@ import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react'
 import { Button } from '../buttons/Button';
 import { InputIconButton } from '../controls/InputIconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { Tray } from '../overlays/tray/Tray';
 import { StickyFooter } from '../sticky-footer/StickyFooter';
 import { Calendar } from './Calendar';

package/esm/illustrations/__stories__/ThemedIllustrations.stories.js

@@ -16,7 +16,7 @@ import { ILLUSTRATION_THEME_TABS, ILLUSTRATION_THEMES } from './illustrationThem
 
 // ─── Illustration samples ────────────────────────────────────────────────────
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const HERO_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'accountUnderReview', 'add2Fa', 'addBankAccount', 'addCreditCard'];
+const HERO_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'accountUnderReview', 'add2Fa', 'addBankAccount', 'filter'];
 const SPOT_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'addCard', 'addEth', 'addMultipleCrypto', 'addPasswordProtection'];
 const PICTOGRAM_SAMPLES = ['accountsNavigation', 'accreditedInvestor', 'add', 'addCard', 'addPayment'];
 const SPOT_ICON_SAMPLES = ['advancedTradeProduct', 'arrowsUpDown', 'assetEmptyStateAa', 'assetEmptyStateAb', 'assetEmptyStateAc'];

package/esm/illustrations/__stories__/illustrationThemes.js

@@ -19,6 +19,7 @@ export const WARM_ILLUSTRATION_THEME = {
     gray: 'rgb(254, 243, 199)',
     gray2: 'rgb(254, 243, 199)',
     gray3: 'rgb(253, 230, 138)',
+    gray4: 'rgb(252, 211, 77)',
     positive: 'rgb(34, 197, 94)',
     negative: 'rgb(239, 68, 68)',
     accent1: 'rgb(250, 204, 21)',
@@ -35,6 +36,7 @@ export const WARM_ILLUSTRATION_THEME = {
     gray: 'rgb(120, 53, 15)',
     gray2: 'rgb(120, 53, 15)',
     gray3: 'rgb(154, 52, 18)',
+    gray4: 'rgb(180, 83, 9)',
     positive: 'rgb(74, 222, 128)',
     negative: 'rgb(248, 113, 113)',
     accent1: 'rgb(253, 224, 71)',
@@ -53,6 +55,7 @@ export const MONOCHROME_ILLUSTRATION_THEME = {
     gray: 'rgb(228, 228, 231)',
     gray2: 'rgb(212, 212, 216)',
     gray3: 'rgb(196, 196, 202)',
+    gray4: 'rgb(180, 180, 186)',
     positive: 'rgb(161, 161, 170)',
     negative: 'rgb(82, 82, 91)',
     accent1: 'rgb(161, 161, 170)',
@@ -69,6 +72,7 @@ export const MONOCHROME_ILLUSTRATION_THEME = {
     gray: 'rgb(63, 63, 70)',
     gray2: 'rgb(63, 63, 70)',
     gray3: 'rgb(82, 82, 91)',
+    gray4: 'rgb(100, 100, 108)',
     positive: 'rgb(113, 113, 122)',
     negative: 'rgb(212, 212, 216)',
     accent1: 'rgb(113, 113, 122)',
@@ -89,6 +93,7 @@ export const GARISH_ILLUSTRATION_THEME = {
     gray: 'rgb(243, 232, 255)',
     gray2: 'rgb(243, 232, 255)',
     gray3: 'rgb(219, 234, 254)',
+    gray4: 'rgb(34, 211, 238)',
     positive: 'rgb(34, 197, 94)',
     negative: 'rgb(185, 28, 28)',
     accent1: 'rgb(249, 115, 22)',
@@ -105,6 +110,7 @@ export const GARISH_ILLUSTRATION_THEME = {
     gray: 'rgb(88, 28, 135)',
     gray2: 'rgb(88, 28, 135)',
     gray3: 'rgb(30, 58, 138)',
+    gray4: 'rgb(103, 232, 249)',
     positive: 'rgb(74, 222, 128)',
     negative: 'rgb(252, 165, 165)',
     accent1: 'rgb(253, 186, 116)',

package/esm/motion/AnimatedCaret.js

@@ -6,7 +6,7 @@ import { Animated } from 'react-native';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { animateRotateConfig } from '@coinbase/cds-common/motion/animatedCaret';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useAnimatedCaretAnimation = () => {

package/esm/motion/ColorSurge.js

@@ -2,7 +2,7 @@ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, u
 import { Animated } from 'react-native';
 import { colorSurgeEnterConfig, colorSurgeExitConfig } from '@coinbase/cds-common/motion/hint';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Please consult with the motion team in #ask-motion before using this component.

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

@@ -2,9 +2,10 @@ const _excluded = ["pictogram", "title", "description", "children", "action", "o
 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, isValidElement, memo } from 'react';
-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 MultiContentModule = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MultiContentModule(_ref, ref) {

package/esm/navigation/BrowserBar.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, { createContext, memo, useContext, useEffect, useState } from 'react';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { HStack } from '../layout';
+import { HStack } from '../layout/HStack';
 import { NavBarEnd, NavBarStart } from './TopNavBar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BrowserBarContext = /*#__PURE__*/createContext({

package/esm/navigation/NavBarIconButton.js

@@ -2,7 +2,7 @@ const _excluded = ["name", "color", "height", "width", "size", "borderWidth", "b
 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, useContext, useEffect } from 'react';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { BrowserBarContext } from './BrowserBar';
 import { TopNavBarContext } from './TopNavBar';

package/esm/navigation/NavigationTitleSelect.js

@@ -6,10 +6,10 @@ import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/selec
 import { Cell } from '../cells/Cell';
 import { CellAccessory } from '../cells/CellAccessory';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
-import { Tray } from '../overlays';
-import { Pressable } from '../system';
+import { Tray } from '../overlays/tray/Tray';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const NavigationTitleSelect = /*#__PURE__*/memo(_props => {

package/esm/navigation/TopNavBar.js

@@ -7,7 +7,8 @@ import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Collapsible } from '../collapsible/Collapsible';
 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 TopNavBarContext = /*#__PURE__*/React.createContext({
   isWithinTopNavBar: false

package/esm/numbers/RollingNumber/DefaultRollingNumberValueSection.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 { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import Animated from 'react-native-reanimated';
-import { HStack } from '../../layout';
+import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { DefaultRollingNumberDigit } from './DefaultRollingNumberDigit';
 import { DefaultRollingNumberMask } from './DefaultRollingNumberMask';

package/esm/numpad/Numpad.js

@@ -5,8 +5,9 @@ import React, { forwardRef, memo, useCallback, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-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 { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/overlays/Alert.js

@@ -1,9 +1,9 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { Modal as RNModal } from 'react-native';
-import { Button } from '../buttons';
+import { Button } from '../buttons/Button';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Pictogram } from '../illustrations';
-import { Box } from '../layout';
+import { Pictogram } from '../illustrations/Pictogram';
+import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { Overlay } from './overlay/Overlay';
 import { useAlertAnimation } from './useAlertAnimation';

package/esm/overlays/Toast.js

@@ -4,10 +4,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
-import { Button } from '../buttons';
+import { Button } from '../buttons/Button';
 import { useA11y } from '../hooks/useA11y';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
 import { ColorSurge } from '../motion/ColorSurge';
 import { Text } from '../typography/Text';
 import { useToastAnimation } from './useToastAnimation';

package/esm/overlays/modal/Modal.js

@@ -8,7 +8,7 @@ import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { ModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
-import { VStack } from '../../layout';
+import { VStack } from '../../layout/VStack';
 import { useModalAnimation } from './useModalAnimation';
 import { jsx as _jsx } from "react/jsx-runtime";
 const overlayContentContextValue = {

package/esm/overlays/modal/ModalHeader.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 from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
-import { IconButton } from '../../buttons';
+import { IconButton } from '../../buttons/IconButton';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { HStack } from '../../layout/HStack';

package/esm/overlays/tray/Tray.js

@@ -7,7 +7,8 @@ import { useWindowDimensions } from 'react-native';
 import { MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
-import { Box, VStack } from '../../layout';
+import { Box } from '../../layout/Box';
+import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
 import { Drawer } from '../drawer/Drawer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";