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

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
     })]
   });

package/esm/tabs/DefaultTab.js

@@ -1,7 +1,7 @@
-const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID"];
+const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID", "color", "activeColor"];
 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, useCallback, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback } from 'react';
 import { Pressable } from 'react-native';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
@@ -22,7 +22,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       max,
       accessibilityLabel,
       style,
-      testID
+      testID,
+      color = 'fg',
+      activeColor = 'fgPrimary'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -37,10 +39,6 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
     updateActiveTab(id);
     onPress == null || onPress(id, event);
   }, [id, onPress, updateActiveTab]);
-  const labelPaddingStyle = useMemo(() => ({
-    paddingTop: theme.space[2],
-    paddingBottom: theme.space[2] - 2
-  }), [theme.space]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
@@ -60,9 +58,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       alignItems: "center",
       gap: 0.5,
       children: [/*#__PURE__*/_jsx(Text, {
-        color: isActive ? 'fgPrimary' : 'fg',
+        color: isActive ? activeColor : color,
         font: "headline",
-        style: labelPaddingStyle,
+        paddingY: 2,
         children: label
       }), !!count && /*#__PURE__*/_jsx(DotCount, {
         count: count,

package/esm/tabs/DefaultTabsActiveIndicator.js

@@ -7,8 +7,7 @@ import { Box } from '../layout';
 import { tabsSpringConfig } from './Tabs';
 
 /**
- * Default underline-style indicator for mobile `Tabs`. Pass as
- * `TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}` with `TabComponent={DefaultTab}`.
+ * Default underline-style indicator for mobile `Tabs`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedBox = Animated.createAnimatedComponent(Box);

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "color", "activeColor", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
   _excluded3 = ["id", "Component"],
   _excluded4 = ["activeTabRect", "position", "style", "testID"];
 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); }
@@ -44,6 +44,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       TabComponent = DefaultTab,
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
+      color,
+      activeColor,
       activeTab,
       disabled,
       onChange,
@@ -102,6 +104,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderRadius: borderRadius,
     borderTopLeftRadius: borderTopLeftRadius,
     borderTopRightRadius: borderTopRightRadius,
+    color: color,
     onLayout: updateActiveTabRect,
     opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
     position: position,
@@ -121,20 +124,23 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         borderTopRightRadius: borderTopRightRadius,
         style: styles == null ? void 0 : styles.activeIndicator,
         testID: testID ? testID + "-active-indicator" : undefined
-      }), tabs.map(_ref2 => {
-        let {
+      }), tabs.map(tabProps => {
+        const {
             id,
             Component: CustomTabComponent
-          } = _ref2,
-          props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+          } = tabProps,
+          tabRest = _objectWithoutPropertiesLoose(tabProps, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
+        const renderedTabProps = _extends({
+          activeColor,
+          color,
+          id,
+          style: styles == null ? void 0 : styles.tab
+        }, tabRest);
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
           registerRef: registerRef,
-          children: /*#__PURE__*/_jsx(RenderedTab, _extends({
-            id: id,
-            style: styles == null ? void 0 : styles.tab
-          }, props))
+          children: /*#__PURE__*/_jsx(RenderedTab, _extends({}, renderedTabProps))
         }, id);
       })]
     })
@@ -142,14 +148,14 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref3 => {
+export const TabsActiveIndicator = _ref2 => {
   let {
       activeTabRect,
       position = 'absolute',
       style,
       testID = 'tabs-active-indicator'
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
   const newActiveTabRect = {
     x: activeTabRect.x,

package/esm/tabs/__stories__/SegmentedTabs.stories.js

@@ -291,7 +291,14 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     defaultActiveTab: basicSegments[0],
     tabs: basicSegments,
     title: "Border Radius"
-  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {})]
+  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {}), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    activeBackground: "bgPositiveWash",
+    activeColor: "bgPositive",
+    color: "fgMuted",
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Label Colors"
+  })]
 });
 const CustomStylesExample = () => {
   const theme = useTheme();

package/esm/tabs/__stories__/Tabs.stories.js

@@ -97,7 +97,6 @@ const TabsWithPanelsExample = () => {
         children: "Pair tab buttons with content regions that follow the active tab (see panel below)."
       }), /*#__PURE__*/_jsx(Tabs, {
         TabComponent: DefaultTab,
-        TabsActiveIndicatorComponent: DefaultTabsActiveIndicator,
         accessibilityLabel: "Content sections",
         activeBackground: "bg",
         activeTab: activeTab,

package/esm/tag/Tag.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingY", "testID"];
+const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingX", "paddingY", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "testID"];
 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';
@@ -6,7 +6,7 @@ import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpaci
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
@@ -28,7 +28,13 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       flexDirection = 'row',
       gap = 0.5,
       justifyContent = 'center',
+      paddingX,
       paddingY = 0.25,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       testID = 'cds-tag'
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
@@ -47,7 +53,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     flexDirection: flexDirection,
     gap: gap,
     justifyContent: justifyContent,
-    paddingX: tagHorizontalSpacing[intent],
+    paddingX: paddingX != null ? paddingX : tagHorizontalSpacing[intent],
     paddingY: paddingY,
     style: {
       backgroundColor
@@ -60,7 +66,11 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       name: startIcon,
       size: "xs"
     }) : null, /*#__PURE__*/_jsx(Text, {
-      font: tagFontMap[intent],
+      font: font != null ? font : tagFontMap[intent],
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      lineHeight: lineHeight,
       numberOfLines: 1,
       style: {
         color