@coinbase/cds-mobile 9.0.0-rc.2 → 9.0.0

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

@@ -0,0 +1,214 @@
+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 { useCallback, useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { HStack, VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { SegmentedTabs } from '../../tabs/SegmentedTabs';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { HeroSquare } from '../HeroSquare';
+import { Pictogram } from '../Pictogram';
+import { SpotIcon } from '../SpotIcon';
+import { SpotRectangle } from '../SpotRectangle';
+import { SpotSquare } from '../SpotSquare';
+import { ILLUSTRATION_THEME_TABS, ILLUSTRATION_THEMES } from './illustrationThemes';
+
+// ─── Illustration samples ────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HERO_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'accountUnderReview', 'add2Fa', 'addBankAccount', 'addCreditCard'];
+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'];
+const SPOT_RECTANGLE_SAMPLES = ['accessToAdvancedCharts', 'addBank', 'addPhoneNumber', 'advancedTradeCharts', 'advancedTrading'];
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const resolveTheme = key => key === 'default' ? defaultTheme : _extends({}, defaultTheme, ILLUSTRATION_THEMES[key]);
+
+// ─── Story ───────────────────────────────────────────────────────────────────
+
+const ThemedIllustrationsStory = () => {
+  var _activeTab$id;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const [activeTab, setActiveTab] = useState(ILLUSTRATION_THEME_TABS[0]);
+  const handleChange = useCallback(tab => setActiveTab(tab), []);
+  const themeKey = (_activeTab$id = activeTab == null ? void 0 : activeTab.id) != null ? _activeTab$id : 'default';
+  const theme = resolveTheme(themeKey);
+  const garishTheme = resolveTheme('garish');
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Side-by-side comparison",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: activeColorScheme,
+          theme: defaultTheme,
+          children: /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 2,
+            padding: 2,
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "label2",
+              children: "Default"
+            }), /*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts",
+              scaleMultiplier: 0.35
+            }), /*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts"
+            }), /*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: "add"
+            }), /*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: "advancedTradeProduct"
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: activeColorScheme,
+          theme: garishTheme,
+          children: /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 2,
+            padding: 2,
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "label2",
+              children: "Garish"
+            }), /*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts",
+              scaleMultiplier: 0.35
+            }), /*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts"
+            }), /*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: "add"
+            }), /*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: "advancedTradeProduct"
+            })]
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Theme",
+      children: /*#__PURE__*/_jsx(SegmentedTabs, {
+        accessibilityLabel: "Select illustration theme",
+        activeTab: activeTab,
+        onChange: handleChange,
+        tabs: ILLUSTRATION_THEME_TABS
+      })
+    }), /*#__PURE__*/_jsxs(ThemeProvider, {
+      activeColorScheme: activeColorScheme,
+      theme: theme,
+      children: [/*#__PURE__*/_jsx(Example, {
+        title: "HeroSquare",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: HERO_SQUARE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: name,
+              scaleMultiplier: 0.3
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotSquare",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: SPOT_SQUARE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Pictogram",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: PICTOGRAM_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotIcon",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: SPOT_ICON_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotRectangle",
+        children: /*#__PURE__*/_jsx(VStack, {
+          gap: 2,
+          children: SPOT_RECTANGLE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotRectangle, {
+              applyTheme: true,
+              name: name,
+              scaleMultiplier: 0.5
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      })]
+    })]
+  });
+};
+export default ThemedIllustrationsStory;

package/esm/illustrations/__stories__/illustrationThemes.js

@@ -0,0 +1,122 @@
+export const ILLUSTRATION_THEME_TABS = [{
+  id: 'default',
+  label: 'Default'
+}, {
+  id: 'warm',
+  label: 'Warm'
+}, {
+  id: 'monochrome',
+  label: 'Mono'
+}, {
+  id: 'garish',
+  label: 'Garish'
+}];
+export const WARM_ILLUSTRATION_THEME = {
+  lightIllustrationColor: {
+    primary: 'rgb(234, 88, 12)',
+    black: 'rgb(28, 25, 23)',
+    white: 'rgb(255, 247, 237)',
+    gray: 'rgb(254, 243, 199)',
+    gray2: 'rgb(254, 243, 199)',
+    gray3: 'rgb(253, 230, 138)',
+    positive: 'rgb(34, 197, 94)',
+    negative: 'rgb(239, 68, 68)',
+    accent1: 'rgb(250, 204, 21)',
+    accent2: 'rgb(249, 115, 22)',
+    accent3: 'rgb(239, 68, 68)',
+    accent4: 'rgb(254, 215, 170)',
+    invert: 'rgb(120, 53, 15)',
+    invert2: 'rgb(255, 247, 237)'
+  },
+  darkIllustrationColor: {
+    primary: 'rgb(251, 146, 60)',
+    black: 'rgb(255, 247, 237)',
+    white: 'rgb(28, 25, 23)',
+    gray: 'rgb(120, 53, 15)',
+    gray2: 'rgb(120, 53, 15)',
+    gray3: 'rgb(154, 52, 18)',
+    positive: 'rgb(74, 222, 128)',
+    negative: 'rgb(248, 113, 113)',
+    accent1: 'rgb(253, 224, 71)',
+    accent2: 'rgb(253, 186, 116)',
+    accent3: 'rgb(248, 113, 113)',
+    accent4: 'rgb(154, 52, 18)',
+    invert: 'rgb(255, 237, 213)',
+    invert2: 'rgb(120, 53, 15)'
+  }
+};
+export const MONOCHROME_ILLUSTRATION_THEME = {
+  lightIllustrationColor: {
+    primary: 'rgb(113, 113, 122)',
+    black: 'rgb(9, 9, 11)',
+    white: 'rgb(250, 250, 250)',
+    gray: 'rgb(228, 228, 231)',
+    gray2: 'rgb(212, 212, 216)',
+    gray3: 'rgb(196, 196, 202)',
+    positive: 'rgb(161, 161, 170)',
+    negative: 'rgb(82, 82, 91)',
+    accent1: 'rgb(161, 161, 170)',
+    accent2: 'rgb(113, 113, 122)',
+    accent3: 'rgb(82, 82, 91)',
+    accent4: 'rgb(212, 212, 216)',
+    invert: 'rgb(9, 9, 11)',
+    invert2: 'rgb(244, 244, 245)'
+  },
+  darkIllustrationColor: {
+    primary: 'rgb(161, 161, 170)',
+    black: 'rgb(244, 244, 245)',
+    white: 'rgb(24, 24, 27)',
+    gray: 'rgb(63, 63, 70)',
+    gray2: 'rgb(63, 63, 70)',
+    gray3: 'rgb(82, 82, 91)',
+    positive: 'rgb(113, 113, 122)',
+    negative: 'rgb(212, 212, 216)',
+    accent1: 'rgb(113, 113, 122)',
+    accent2: 'rgb(161, 161, 170)',
+    accent3: 'rgb(212, 212, 216)',
+    accent4: 'rgb(63, 63, 70)',
+    invert: 'rgb(244, 244, 245)',
+    invert2: 'rgb(39, 39, 42)'
+  }
+};
+
+// Maximally distinct colors — ideal for verifying every token is wired correctly
+export const GARISH_ILLUSTRATION_THEME = {
+  lightIllustrationColor: {
+    primary: 'rgb(220, 38, 38)',
+    black: 'rgb(20, 83, 45)',
+    white: 'rgb(254, 249, 195)',
+    gray: 'rgb(243, 232, 255)',
+    gray2: 'rgb(243, 232, 255)',
+    gray3: 'rgb(219, 234, 254)',
+    positive: 'rgb(34, 197, 94)',
+    negative: 'rgb(185, 28, 28)',
+    accent1: 'rgb(249, 115, 22)',
+    accent2: 'rgb(20, 184, 166)',
+    accent3: 'rgb(34, 197, 94)',
+    accent4: 'rgb(147, 197, 253)',
+    invert: 'rgb(127, 29, 29)',
+    invert2: 'rgb(219, 234, 254)'
+  },
+  darkIllustrationColor: {
+    primary: 'rgb(248, 113, 113)',
+    black: 'rgb(187, 247, 208)',
+    white: 'rgb(30, 27, 75)',
+    gray: 'rgb(88, 28, 135)',
+    gray2: 'rgb(88, 28, 135)',
+    gray3: 'rgb(30, 58, 138)',
+    positive: 'rgb(74, 222, 128)',
+    negative: 'rgb(252, 165, 165)',
+    accent1: 'rgb(253, 186, 116)',
+    accent2: 'rgb(94, 234, 212)',
+    accent3: 'rgb(74, 222, 128)',
+    accent4: 'rgb(147, 197, 253)',
+    invert: 'rgb(254, 202, 202)',
+    invert2: 'rgb(30, 58, 138)'
+  }
+};
+export const ILLUSTRATION_THEMES = {
+  warm: WARM_ILLUSTRATION_THEME,
+  monochrome: MONOCHROME_ILLUSTRATION_THEME,
+  garish: GARISH_ILLUSTRATION_THEME
+};

package/esm/illustrations/createIllustration.js

@@ -5,11 +5,12 @@ import { convertSizeWithMultiplier } from '@coinbase/cds-common/utils/convertSiz
 import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/getDefaultSizeObjectForIllustration';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useTheme } from '../hooks/useTheme';
+import { convertThemedSvgToHex } from '../utils/convertThemedSvgToHex';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function createIllustration(variant, config) {
   const defaultSize = getDefaultSizeObjectForIllustration(variant);
   const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
-    var _config$name;
+    var _config$name2, _config$name3;
     let {
       fallback = null,
       name,
@@ -17,13 +18,13 @@ export function createIllustration(variant, config) {
       scaleMultiplier,
       testID,
       accessibilityHint,
-      accessibilityLabel
+      accessibilityLabel,
+      applyTheme
     } = _ref;
     const {
-      activeColorScheme
+      activeColorScheme,
+      illustrationColor
     } = useTheme();
-    const requireFn = (_config$name = config[name]) == null ? void 0 : _config$name[activeColorScheme];
-    const xml = useMemo(() => requireFn == null ? void 0 : requireFn(), [requireFn]);
     const style = useMemo(() => {
       let size = defaultSize;
       if (dimension) {
@@ -34,6 +35,31 @@ export function createIllustration(variant, config) {
       }
       return size;
     }, [dimension, scaleMultiplier]);
+    const themedXml = useMemo(() => {
+      var _config$name, _config$name$themeabl;
+      if (!applyTheme || illustrationColor === undefined) return null;
+      const raw = (_config$name = config[name]) == null || (_config$name$themeabl = _config$name['themeable']) == null ? void 0 : _config$name$themeabl.call(_config$name);
+      return raw ? convertThemedSvgToHex(raw, illustrationColor) : null;
+    }, [name, applyTheme, illustrationColor]);
+    if (applyTheme) {
+      if (themedXml) {
+        return /*#__PURE__*/_jsx(SvgXml, {
+          accessibilityHint: accessibilityHint,
+          accessibilityLabel: accessibilityLabel,
+          accessibilityRole: "image",
+          accessible: !!accessibilityLabel,
+          style: style,
+          testID: testID,
+          xml: themedXml
+        });
+      }
+
+      // No themed variant available or no palette — return fallback.
+      return fallback;
+    }
+
+    // Default light/dark path.
+    const xml = (_config$name2 = config[name]) == null || (_config$name3 = _config$name2[activeColorScheme === 'dark' ? 'dark' : 'light']) == null ? void 0 : _config$name3.call(_config$name2);
     if (!xml) {
       if (isDevelopment()) {
         console.error("Unable to find illustration with name: " + name);

package/esm/page/PageFooter.js

@@ -1,25 +1,36 @@
-const _excluded = ["action"];
+const _excluded = ["action", "legalText"];
 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 { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('PageFooter', _props);
   const {
-      action
+      action,
+      legalText
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Box, _extends({
     ref: ref,
     accessibilityRole: "toolbar",
     alignItems: "center",
-    height: pageFooterHeight,
+    height: legalText ? undefined : pageFooterHeight,
     paddingX: 3,
     paddingY: 1.5
   }, props, {
-    children: action
+    children: legalText ? /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "center",
+      gap: 2,
+      children: [action, /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "legal",
+        children: legalText
+      })]
+    }) : action
   }));
 }));

package/esm/page/__figma__/PageFooter.figma.js

@@ -1,18 +1,61 @@
 import React from 'react';
 import { figma } from '@figma/code-connect';
+import { Button } from '../../buttons/Button';
+import { ButtonGroup } from '../../buttons/ButtonGroup';
 import { PageFooter } from '../PageFooter';
-import { jsx as _jsx } from "react/jsx-runtime";
-figma.connect(PageFooter, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266', {
-  imports: ["import { PageFooter } from '@coinbase/cds-mobile/page/PageFooter'"],
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const url = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266';
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-mobile/page/PageFooter'", "import { Button } from '@coinbase/cds-mobile/buttons/Button'"],
+  variant: {
+    '# of actions': '1'
+  },
   props: {
-    action: figma.children('ButtonGroup')
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
   },
   example: _ref => {
     let {
-      action
+      legalText
     } = _ref;
     return /*#__PURE__*/_jsx(PageFooter, {
-      action: action
+      action: /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
+        children: "Next"
+      }),
+      legalText: legalText
+    });
+  }
+});
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-mobile/page/PageFooter'", "import { Button } from '@coinbase/cds-mobile/buttons/Button'", "import { ButtonGroup } from '@coinbase/cds-mobile/buttons/ButtonGroup'"],
+  variant: {
+    '# of actions': '2'
+  },
+  props: {
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
+  },
+  example: _ref2 => {
+    let {
+      legalText
+    } = _ref2;
+    return /*#__PURE__*/_jsx(PageFooter, {
+      action: /*#__PURE__*/_jsxs(ButtonGroup, {
+        block: true,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Back"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Next"
+        })]
+      }),
+      legalText: legalText
     });
   }
 });

package/esm/system/ThemeProvider.js

@@ -35,6 +35,7 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref => {
   const themeApi = useMemo(() => {
     const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
+    const activeIllustrationKey = activeColorScheme === 'dark' ? 'darkIllustrationColor' : 'lightIllustrationColor';
     const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
     const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
     if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + activeColorScheme + " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming");
@@ -44,7 +45,8 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref => {
     return _extends({}, theme, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
-      color: theme[activeColorKey]
+      color: theme[activeColorKey],
+      illustrationColor: theme[activeIllustrationKey]
     });
   }, [theme, activeColorScheme]);
   return /*#__PURE__*/_jsx(ThemeContext.Provider, {

package/esm/system/__stories__/componentConfigStickerSheet/StickerSheet.js

@@ -16,6 +16,7 @@ import { SearchExample } from './examples/Search';
 import { SegmentedTabsExample } from './examples/SegmentedTabs';
 import { SelectExample } from './examples/Select';
 import { SelectChipExample } from './examples/SelectChip';
+import { TabsExample } from './examples/Tabs';
 import { TagExample } from './examples/Tag';
 import { TextInputExample } from './examples/TextInput';
 import { Container } from './Container';
@@ -38,6 +39,9 @@ export const StickerSheet = /*#__PURE__*/memo(() => {
         }), /*#__PURE__*/_jsx(Container, {
           title: "Segmented Tabs",
           children: /*#__PURE__*/_jsx(SegmentedTabsExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Tabs",
+          children: /*#__PURE__*/_jsx(TabsExample, {})
         }), /*#__PURE__*/_jsx(Container, {
           title: "Select Input (SelectOption)",
           children: /*#__PURE__*/_jsx(SelectExample, {})

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -1,8 +1,6 @@
-const _excluded = ["label", "labelNode"];
+const _excluded = ["label", "labelNode", "readOnly"];
 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; }
 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 { Text } from '../../../typography/Text';
-import { jsx as _jsx } from "react/jsx-runtime";
 export const customComponentConfig = {
   Banner: {
     borderRadius: 0
@@ -29,18 +27,14 @@ export const customComponentConfig = {
   },
   TextInput: _ref => {
     let {
-        label,
-        labelNode
+        readOnly
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
     return {
-      labelNode: (labelNode != null ? labelNode : label) ? /*#__PURE__*/_jsx(Text, {
-        color: "fgMuted",
-        font: "label2",
-        children: label
-      }) : undefined,
+      labelColor: 'fgMuted',
+      labelFont: 'label2',
       bordered: false,
-      inputBackground: 'bgAlternate',
+      inputBackground: readOnly ? 'bgSecondary' : 'bgAlternate',
       font: props.compact ? 'label2' : 'body',
       variant: 'foregroundMuted',
       focusedBorderWidth: 100
@@ -112,5 +106,23 @@ export const customComponentConfig = {
     font: props.compact ? 'label2' : 'body',
     labelColor: 'fgMuted',
     labelFont: props.compact ? props.align === 'end' ? 'label1' : 'label2' : 'body'
-  })
+  }),
+  ListCell: props => {
+    var _props$spacingVariant;
+    const spacingVariant = (_props$spacingVariant = props.spacingVariant) != null ? _props$spacingVariant : props.compact ? 'compact' : 'normal';
+    return _extends({}, spacingVariant === 'normal' ? {
+      minHeight: 36
+    } : {});
+  },
+  Tabs: {
+    activeColor: 'fg',
+    color: 'fgMuted',
+    activeBackground: 'fg'
+  },
+  Tag: {
+    paddingY: 0.5,
+    paddingX: 1,
+    font: 'caption',
+    emphasis: 'low'
+  }
 };

package/esm/system/__stories__/componentConfigStickerSheet/examples/ListCell.js

@@ -43,6 +43,8 @@ export const ListCellExample = /*#__PURE__*/memo(() => {
       onPress: () => undefined,
       subtitle: "XRP",
       title: "XRP"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      title: "Short"
     })]
   });
 });

package/esm/system/__stories__/componentConfigStickerSheet/examples/Tabs.js

@@ -0,0 +1,24 @@
+import React, { memo, useState } from 'react';
+import { Tabs } from '../../../../tabs/Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const tabs = [{
+  id: 'orderBook',
+  label: 'Order book'
+}, {
+  id: 'tradeHistory',
+  label: 'Trade history'
+}, {
+  id: 'orders',
+  label: 'Orders'
+}];
+export const TabsExample = /*#__PURE__*/memo(() => {
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(Tabs, {
+    accessibilityLabel: "Market views",
+    activeTab: activeTab,
+    background: "bg",
+    gap: 4,
+    onChange: setActiveTab,
+    tabs: tabs
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/TextInput.js

@@ -40,6 +40,18 @@ export const TextInputExample = /*#__PURE__*/memo(() => {
       labelVariant: "inside",
       onChangeText: setValue,
       placeholder: "Input with icon button",
+      style: {
+        flexGrow: 1
+      },
+      value: value
+    }), /*#__PURE__*/_jsx(TextInput, {
+      readOnly: true,
+      label: "Label",
+      onChangeText: setValue,
+      placeholder: "Read only input",
+      style: {
+        flexGrow: 1
+      },
       value: value
     })]
   });