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

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "focusedBorderWidth", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
+const _excluded = ["label", "labelFont", "labelColor", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "focusedBorderWidth", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { cloneElement, forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
 import { mergeReactElementRef, mergeRefs } from '@coinbase/cds-common/utils/mergeRefs';
 import { cx } from '../cx';
@@ -32,9 +33,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const nativeInputContainerCss = "nativeInputContainerCss-nvfk24";
 const insideLabelCss = "insideLabelCss-i1dqgbcz";
 const insideLabelCssStartCss = "insideLabelCssStartCss-i1scwjk";
-const useInputVariant = (focused, variant) => {
-  return useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
-};
 const variantColorMap = {
   primary: 'fgPrimary',
   positive: 'fgPositive',
@@ -48,6 +46,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
+      labelFont = 'label1',
+      labelColor = 'fg',
       accessibilityLabel,
       helperText = '',
       variant = 'foregroundMuted',
@@ -139,6 +139,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label,
       align: align,
       "aria-invalid": variant === 'negative',
+      caretColor: variantColorMap[focusedVariant],
       compact: compact,
       containerSpacing: nativeInputContainerCss,
       "data-compact": compact,
@@ -151,7 +152,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       onFocus: handleOnFocus,
       testID: testID
     }, nativeInputRestProps));
-  }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, hasLabel, align, font, variant, compact, labelVariant, start, disabled, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
+  }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, align, variant, focusedVariant, compact, hasLabel, labelVariant, start, disabled, font, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
   return /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
     value: focused ? focusedVariant : undefined,
     children: /*#__PURE__*/_jsx(InputStack, {
@@ -202,6 +203,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       }) : labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
         background: labelVariant === 'inside' ? readOnlyInputBackground : undefined,
         className: cx(labelVariant === 'inside' && insideLabelCss, labelVariant === 'inside' && !!start && insideLabelCssStartCss),
+        color: labelColor,
+        font: labelFont,
         htmlFor: shouldSetLabelId ? labelId : undefined,
         testID: (_testIDMap$label = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.label) !== null && _testIDMap$label !== void 0 ? _testIDMap$label : '',
         children: label
@@ -216,6 +219,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
         paddingStart: compact && hasLabel ? 2 : undefined,
         testID: (_testIDMap$start = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.start) !== null && _testIDMap$start !== void 0 ? _testIDMap$start : '',
         children: [compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
+          color: labelColor,
+          font: labelFont,
           htmlFor: shouldSetLabelId ? labelId : undefined,
           children: label
         })), !!start && /*#__PURE__*/_jsx(_Fragment, {

package/esm/core/createThemeCssVars.js

@@ -1,6 +1,10 @@
 import { styleVarPrefixes } from './theme';
 const periodsRegex = /\./g;
 
+// Converts a camelCase illustration theme key to the kebab-case CSS var suffix that
+// the generated themeable SVGs expect: accent1 → accent-1, gray2 → gray-2.
+const toIllustrationVarSuffix = key => key.replace(/([a-z])(\d+)$/i, '$1-$2');
+
 /** Takes a theme object and formats its keys as CSS variables to be used in inline styles. */
 export const createThemeCssVars = theme => {
   const themeCss = {};
@@ -14,6 +18,25 @@ export const createThemeCssVars = theme => {
       themeCss['--activeColorScheme'] = theme.activeColorScheme;
       continue;
     }
+
+    // lightIllustrationColor/darkIllustrationColor are resolved into theme.illustrationColor by ThemeProvider.
+    // Skip them here to avoid emitting --lightIllustrationColor-* / --darkIllustrationColor-* vars.
+    if (key === 'lightIllustrationColor' || key === 'darkIllustrationColor') {
+      continue;
+    }
+
+    // Illustration colors use a kebab-converted key format to match the var(--illustration-accent-1)
+    // tokens in the generated themeable SVGs, so they need special handling rather than the default
+    // period-to-underscore substitution.
+    if (key === 'illustrationColor') {
+      for (const varName of Object.keys(themeVars)) {
+        const value = themeVars[varName];
+        if (value !== undefined) {
+          themeCss["--illustration-".concat(toIllustrationVarSuffix(varName))] = value;
+        }
+      }
+      continue;
+    }
     const prefix = styleVarPrefixes[key];
     const cssVarPrefix = prefix ? "--".concat(prefix, "-") : '--';
     const varNames = Object.keys(themeVars);

package/esm/core/theme.js

@@ -4,6 +4,9 @@ export const styleVarPrefixes = {
   darkSpectrum: 'dark',
   lightColor: 'lightColor',
   darkColor: 'darkColor',
+  lightIllustrationColor: 'lightIllustrationColor',
+  darkIllustrationColor: 'darkIllustrationColor',
+  illustrationColor: 'illustration',
   spectrum: '',
   color: 'color',
   space: 'space',

package/esm/illustrations/HeroSquare.js

@@ -1,3 +1,4 @@
+import heroSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/svgEsmMap';
 import heroSquareVersionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap);
+export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap, heroSquareSvgEsmMap);

package/esm/illustrations/Pictogram.js

@@ -1,3 +1,4 @@
+import pictogramSvgEsmMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/svgEsmMap';
 import pictogramVersionMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const Pictogram = createIllustration('pictogram', pictogramVersionMap);
+export const Pictogram = createIllustration('pictogram', pictogramVersionMap, pictogramSvgEsmMap);

package/esm/illustrations/SpotIcon.js

@@ -1,3 +1,4 @@
+import spotIconSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/svgEsmMap';
 import spotIconVersionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap);
+export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap, spotIconSvgEsmMap);

package/esm/illustrations/SpotRectangle.js

@@ -1,3 +1,4 @@
+import spotRectangleSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/svgEsmMap';
 import spotRectangleVersionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap);
+export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap, spotRectangleSvgEsmMap);

package/esm/illustrations/SpotSquare.js

@@ -1,3 +1,4 @@
+import spotSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/svgEsmMap';
 import spotSquareVersionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap);
+export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap, spotSquareSvgEsmMap);

package/esm/illustrations/createIllustration.css

@@ -0,0 +1 @@
+@layer cds{.inlineSvgCss-ip1tc09{display:inline-block;-webkit-flex:none;-ms-flex:none;flex:none;}}

package/esm/illustrations/createIllustration.js

@@ -1,11 +1,19 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import { convertDimensionToSize } from '@coinbase/cds-common/utils/convertDimensionToSize';
 import { convertSizeWithMultiplier } from '@coinbase/cds-common/utils/convertSizeWithMultiplier';
 import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/getDefaultSizeObjectForIllustration';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useTheme } from '../hooks/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function createIllustration(variant, config) {
+const inlineSvgCss = "inlineSvgCss-ip1tc09";
+const STATIC_ASSETS_CDN = 'https://static-assets.coinbase.com/ui-infra/illustration/v1';
+
+/**
+ * ESM-compatible lazy loader map. Each entry uses a relative dynamic import so
+ * any bundler (Vite, webpack, esbuild) can code-split without CORS or bare-specifier issues.
+ */
+
+export function createIllustration(variant, versionMap, svgEsmConfig) {
   const defaultSize = getDefaultSizeObjectForIllustration(variant);
   const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
     let {
@@ -14,40 +22,80 @@ export function createIllustration(variant, config) {
       scaleMultiplier,
       testID,
       alt = '',
-      fallback = null
+      fallback,
+      applyTheme
     } = _ref;
     const {
-      activeColorScheme
+      activeColorScheme,
+      illustrationColor
     } = useTheme();
-    const version = config[name];
-    const src = "https://static-assets.coinbase.com/ui-infra/illustration/v1/".concat(variant, "/svg/").concat(activeColorScheme, "/").concat(name, "-").concat(version, ".svg");
+    const version = versionMap[name];
+
+    // null = not yet loaded (or load failed), string = loaded inline SVG
+    const [svgMarkup, setSvgMarkup] = useState(null);
+    useEffect(() => {
+      var _svgEsmConfig$name;
+      let cancelled = false;
+      const themeableLoader = svgEsmConfig === null || svgEsmConfig === void 0 || (_svgEsmConfig$name = svgEsmConfig[name]) === null || _svgEsmConfig$name === void 0 ? void 0 : _svgEsmConfig$name.themeable;
+      if (applyTheme && themeableLoader) {
+        themeableLoader().then(svg => {
+          if (!cancelled) setSvgMarkup(svg);
+        }).catch(err => {
+          if (isDevelopment()) {
+            console.error("Failed to load themeable illustration ".concat(name, ":"), err);
+          }
+          // Clear stale markup on failure so we don't display the wrong illustration.
+          if (!cancelled) setSvgMarkup(null);
+        });
+      }
+      return () => {
+        cancelled = true;
+      };
+      // The SVG source is the same regardless of the active palette — illustrationColor
+      // only affects the CSS variables emitted by ThemeProvider, not the file to load.
+    }, [name, version, applyTheme]);
     const {
       width,
       height
     } = useMemo(() => {
       let size = defaultSize;
-      if (dimension) {
-        size = convertDimensionToSize(dimension);
-      }
-      if (scaleMultiplier) {
-        size = convertSizeWithMultiplier(size, scaleMultiplier);
-      }
+      if (dimension) size = convertDimensionToSize(dimension);
+      if (scaleMultiplier) size = convertSizeWithMultiplier(size, scaleMultiplier);
       return size;
     }, [dimension, scaleMultiplier]);
-    if (version === undefined) {
-      if (isDevelopment()) {
-        console.error("Unable to find illustration with name: ".concat(name));
+    if (applyTheme && illustrationColor) {
+      if (svgMarkup) {
+        // The SVG retains its var(--illustration-*) tokens. ThemeProvider emits the resolved
+        // --illustration-* CSS vars so the browser applies them through normal cascade.
+        return /*#__PURE__*/_jsx("div", {
+          dangerouslySetInnerHTML: {
+            __html: svgMarkup
+          },
+          "aria-label": alt || undefined,
+          className: inlineSvgCss,
+          "data-testid": testID,
+          role: alt ? 'img' : 'presentation',
+          style: {
+            width,
+            height
+          }
+        });
       }
-      return fallback;
+
+      // Still loading or failed — return fallback (defaults to null).
+      return fallback !== null && fallback !== void 0 ? fallback : null;
     }
-    return /*#__PURE__*/_jsx("img", {
+
+    // Default CDN path — used when applyTheme is false.
+    return version !== undefined ? /*#__PURE__*/_jsx("img", {
       alt: alt,
       "data-testid": testID,
       height: height,
-      src: src,
+      src: "".concat(STATIC_ASSETS_CDN, "/").concat(variant, "/svg/").concat(activeColorScheme, "/").concat(name, "-").concat(version, ".svg"),
       width: width
-    });
+    }) : fallback !== null && fallback !== void 0 ? fallback : null;
   });
   Illustration.displayName = 'Illustration';
   return Illustration;
-}
+}
+import "./createIllustration.css";

package/esm/navigation/NavigationBar.js

@@ -77,10 +77,6 @@ export const NavigationBar = /*#__PURE__*/memo(_props => {
   }, props), {}, {
     children: [/*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
-      gap: columnGap !== null && columnGap !== void 0 ? columnGap : {
-        base: 2,
-        phone: 1
-      },
       overflow: "auto",
       children: [/*#__PURE__*/_jsx(Collapsible, {
         collapsed: !start,
@@ -96,14 +92,22 @@ export const NavigationBar = /*#__PURE__*/memo(_props => {
           style: styles === null || styles === void 0 ? void 0 : styles.start,
           children: startNode
         })
-      }), /*#__PURE__*/_jsx(HStack, {
+      }), /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",
-        className: cx(navigationBarClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
         flexGrow: 1,
-        gap: 1,
-        style: styles === null || styles === void 0 ? void 0 : styles.content,
-        children: children
-      }), end]
+        gap: columnGap !== null && columnGap !== void 0 ? columnGap : {
+          base: 2,
+          phone: 1
+        },
+        children: [/*#__PURE__*/_jsx(HStack, {
+          alignItems: "center",
+          className: cx(navigationBarClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+          flexGrow: 1,
+          gap: 1,
+          style: styles === null || styles === void 0 ? void 0 : styles.content,
+          children: children
+        }), end]
+      })]
     }), bottom]
   }));
 });

package/esm/overlays/tray/Tray.js

@@ -285,7 +285,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_pro
       children: /*#__PURE__*/_jsxs(Box, {
         ref: trayRef,
         className: cx(trayClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
-        height: "100vh",
+        height: "100dvh",
         pin: "all",
         position: "fixed",
         style: styles === null || styles === void 0 ? void 0 : styles.root,

package/esm/page/PageFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["action", "height", "justifyContent", "paddingX", "paddingY", "role"];
+const _excluded = ["action", "legalText", "height", "justifyContent", "paddingX", "paddingY", "role"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -10,7 +10,9 @@ 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 pageFooterPaddingX = {
   phone: 3,
   tablet: 4,
@@ -21,11 +23,17 @@ export const pageFooterJustifyContent = {
   tablet: 'flex-end',
   desktop: 'flex-end'
 };
+const legalTextAlignItems = {
+  phone: 'center',
+  tablet: 'flex-end',
+  desktop: 'flex-end'
+};
 export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('PageFooter', _props);
   const {
       action,
-      height = pageFooterHeight,
+      legalText,
+      height = legalText ? undefined : pageFooterHeight,
       justifyContent = pageFooterJustifyContent,
       paddingX = pageFooterPaddingX,
       paddingY = 1.5,
@@ -40,6 +48,14 @@ export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     paddingY: paddingY,
     role: role
   }, props), {}, {
-    children: action
+    children: legalText ? /*#__PURE__*/_jsxs(VStack, {
+      alignItems: legalTextAlignItems,
+      gap: 2,
+      children: [action, /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "legal",
+        children: legalText
+      })]
+    }) : action
   }));
 }));

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

@@ -1,17 +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-web/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-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'"],
+  variant: {
+    '# of actions': '1'
+  },
   props: {
-    action: figma.children('ButtonGroup')
+    action: figma.children('Button'),
+    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-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'", "import { ButtonGroup } from '@coinbase/cds-web/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, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Back"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Next"
+        })]
+      }),
+      legalText: legalText
     });
   }
 });

package/esm/system/ThemeProvider.js

@@ -73,6 +73,7 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref2 => {
   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 ".concat(activeColorScheme, " but no ").concat(activeColorScheme, " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
@@ -82,7 +83,8 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref2 => {
     return _objectSpread(_objectSpread({}, theme), {}, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
-      color: theme[activeColorKey]
+      color: theme[activeColorKey],
+      illustrationColor: theme[activeIllustrationKey]
     });
   }, [theme, activeColorScheme]);
   const parentTheme = useContext(ThemeContext);

package/esm/tabs/DefaultTab.css

@@ -1,3 +1,2 @@
 @layer cds{.pressableCss-p1gyavxu{margin:0;padding:0;white-space:nowrap;}
-.insetFocusRingCss-i14sq9yf{position:relative;}.insetFocusRingCss-i14sq9yf:focus{outline:none;}.insetFocusRingCss-i14sq9yf:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;border-radius:4px;}
-.labelPaddingCss-lu2xm1d{padding-top:var(--space-2);padding-bottom:calc(var(--space-2) - 2px);}}
+.insetFocusRingCss-i14sq9yf{position:relative;}.insetFocusRingCss-i14sq9yf:focus{outline:none;}.insetFocusRingCss-i14sq9yf:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;border-radius:4px;}}

package/esm/tabs/DefaultTab.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "label", "disabled", "onClick", "count", "max", "accessibilityLabel", "className"];
+const _excluded = ["id", "label", "disabled", "onClick", "count", "max", "accessibilityLabel", "className", "color", "activeColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -18,7 +18,6 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pressableCss = "pressableCss-p1gyavxu";
 const insetFocusRingCss = "insetFocusRingCss-i14sq9yf";
-const labelPaddingCss = "labelPaddingCss-lu2xm1d";
 const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -28,7 +27,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       count,
       max,
       accessibilityLabel,
-      className
+      className,
+      color = 'fg',
+      activeColor = 'fgPrimary'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -59,10 +60,10 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       gap: 0.5,
       children: [/*#__PURE__*/_jsx(Text, {
         as: "h2",
-        className: labelPaddingCss,
-        color: isActive ? 'fgPrimary' : 'fg',
+        color: isActive ? activeColor : color,
         display: "block",
         font: "headline",
+        paddingY: 2,
         children: label
       }), !!count && /*#__PURE__*/_jsx(DotCount, {
         accessibilityLabel: "".concat(accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : typeof label === 'string' ? label : '', " count: ").concat(count),

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style", "testID"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeColor", "activeTab", "color", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style", "testID"],
   _excluded3 = ["activeTabRect", "position", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -52,7 +52,9 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       TabComponent = DefaultTab,
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
+      activeColor,
       activeTab,
+      color,
       onActiveTabElementChange,
       disabled,
       onChange,
@@ -144,6 +146,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderTopLeftRadius: borderTopLeftRadius,
     borderTopRightRadius: borderTopRightRadius,
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    color: color,
     onKeyDown: handleTabsContainerKeyDown,
     opacity: disabled ? accessibleOpacityDisabled : 1,
     position: position,
@@ -168,7 +171,10 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       }), tabs.map(props => {
         var _props$Component;
         const RenderedTab = (_props$Component = props.Component) !== null && _props$Component !== void 0 ? _props$Component : TabComponent;
-        const renderedTabProps = _objectSpread(_objectSpread({}, props), {}, {
+        const renderedTabProps = _objectSpread(_objectSpread({
+          activeColor,
+          color
+        }, props), {}, {
           'data-rendered-tab': true,
           className: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
           role: 'tab',

package/esm/tag/Tag.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "display", "alignItems", "gap", "justifyContent", "paddingY", "testID"];
+const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "display", "alignItems", "gap", "justifyContent", "paddingX", "paddingY", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -35,7 +35,13 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       alignItems = 'center',
       gap = 0.5,
       justifyContent = 'center',
+      paddingX,
       paddingY = 0.25,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       testID = tagStaticClassName
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
@@ -58,7 +64,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     display: display,
     gap: gap,
     justifyContent: justifyContent,
-    paddingX: tagHorizontalSpacing[intent],
+    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : tagHorizontalSpacing[intent],
     paddingY: paddingY,
     style: boxStyles,
     testID: testID
@@ -77,7 +83,11 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     }) : null, /*#__PURE__*/_jsx(Text, {
       color: "currentColor",
       display: "inline",
-      font: tagFontMap[intent],
+      font: font !== null && font !== void 0 ? font : tagFontMap[intent],
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      lineHeight: lineHeight,
       overflow: "truncate",
       testID: "".concat(testID, "--text"),
       children: children

package/esm/themes/coinbaseHighContrastTheme.js

@@ -569,6 +569,38 @@ export const coinbaseHighContrastTheme = {
     caption: 'uppercase',
     legal: 'none'
   },
+  lightIllustrationColor: {
+    primary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    black: "rgb(".concat(lightSpectrum.gray100, ")"),
+    white: "rgb(".concat(lightSpectrum.gray0, ")"),
+    gray: "rgb(".concat(lightSpectrum.gray20, ")"),
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(".concat(lightSpectrum.green30, ")"),
+    negative: "rgb(".concat(lightSpectrum.red50, ")"),
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
+    accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
+    accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    black: "rgb(".concat(darkSpectrum.gray0, ")"),
+    white: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    positive: "rgb(".concat(darkSpectrum.green70, ")"),
+    negative: "rgb(".concat(darkSpectrum.red60, ")"),
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
+    accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
+    accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
+    invert: "rgb(".concat(darkSpectrum.gray100, ")"),
+    invert2: "rgb(".concat(darkSpectrum.gray50, ")")
+  },
   shadow: {
     elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
     elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'