@coinbase/cds-web 9.13.0 → 9.15.0

package/dts/visualizations/chart/text/ChartText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,gBAAgB,CAAC;AAGhE,KAAK,2BAA2B,GAC5B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,GAC5D,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,MAAM,GACN,IAAI,GACJ,SAAS,GACT,2BAA2B,GAC3B,2BAA2B,EAAE,CAAC;AAElC;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,GAAG;IACnF;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACtC,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH,CAAC;AAkCJ,eAAO,MAAM,SAAS,4CA4MrB,CAAC"}
+{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"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"}

package/esm/accordion/Accordion.js

@@ -1,11 +1,25 @@
-import React, { Children } from 'react';
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Children, memo } from 'react';
 import { AccordionProvider } from '@coinbase/cds-common/accordion/AccordionProvider';
 import { join } from '@coinbase/cds-common/utils/join';
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Divider } from '../layout/Divider';
 import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Accordion = _props => {
+/**
+ * Static class names for Accordion component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const accordionClassNames = {
+  /** Root element */
+  root: 'cds-Accordion'
+};
+export const Accordion = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('Accordion', _props);
   const {
     activeKey,
@@ -14,7 +28,12 @@ export const Accordion = _props => {
     onChange,
     setActiveKey,
     testID,
-    style
+    style,
+    styles,
+    className,
+    classNames,
+    borderRadius,
+    showItemSeparators = true
   } = mergedProps;
   return /*#__PURE__*/_jsx(AccordionProvider, {
     activeKey: activeKey,
@@ -22,10 +41,13 @@ export const Accordion = _props => {
     onChange: onChange,
     setActiveKey: setActiveKey,
     children: /*#__PURE__*/_jsx(VStack, {
-      style: style,
+      borderRadius: borderRadius,
+      className: cx(accordionClassNames.root, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      overflow: borderRadius !== undefined ? 'hidden' : undefined,
+      style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
       testID: testID,
       width: "100%",
-      children: join(Children.toArray(children), /*#__PURE__*/_jsx(Divider, {}))
+      children: showItemSeparators ? join(Children.toArray(children), /*#__PURE__*/_jsx(Divider, {})) : children
     })
   });
-};
+});

package/esm/accordion/AccordionHeader.js

@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { forwardRef, memo, useCallback } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
 import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
 import { accordionIconHiddenRotate, accordionIconVisibleRotate } from '@coinbase/cds-common/animation/accordion';
 import { listHeight } from '@coinbase/cds-common/tokens/cell';
@@ -16,25 +16,33 @@ import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { getAccordionHeaderId, getAccordionPanelId } from './utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const compactPaddingProps = paddingProps => {
+  const entries = Object.entries(paddingProps).filter(_ref => {
+    let [, value] = _ref;
+    return value !== undefined;
+  });
+  if (entries.length === 0) return undefined;
+  return Object.fromEntries(entries);
+};
 const baseCss = "baseCss-bt1rln1";
 const subtitleCss = "subtitleCss-sve89pn";
 const titleCss = "titleCss-t166a7nm";
-export const AccordionMedia = /*#__PURE__*/memo(_ref => {
+export const AccordionMedia = /*#__PURE__*/memo(_ref2 => {
   let {
     media
-  } = _ref;
+  } = _ref2;
   return /*#__PURE__*/_jsx(Box, {
     flexGrow: 0,
     flexShrink: 0,
     children: media
   });
 });
-export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
+export const AccordionTitle = /*#__PURE__*/memo(_ref3 => {
   let {
     title,
     subtitle,
     tertiaryTitle
-  } = _ref2;
+  } = _ref3;
   return /*#__PURE__*/_jsx(Box, {
     className: titleCss,
     flexGrow: 1,
@@ -67,22 +75,25 @@ export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
     })
   });
 });
-export const AccordionIcon = /*#__PURE__*/memo(_ref3 => {
+export const AccordionIcon = /*#__PURE__*/memo(_ref4 => {
   let {
-    collapsed
-  } = _ref3;
+    collapsed,
+    caretSize = 's'
+  } = _ref4;
   return /*#__PURE__*/_jsx(Box, {
     justifyContent: "flex-end",
     children: /*#__PURE__*/_jsx(AnimatedCaret, {
-      rotate: collapsed ? accordionIconHiddenRotate : accordionIconVisibleRotate
+      rotate: collapsed ? accordionIconHiddenRotate : accordionIconVisibleRotate,
+      size: caretSize
     })
   });
 });
+
 /**
  * Renders a Pressable element to use as the header to an AccordionItem.
  * Composes an Accordion Media, Title, and Icon.
  */
-export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, forwardedRef) => {
+export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref5, forwardedRef) => {
   let {
     itemKey,
     title,
@@ -91,13 +102,36 @@ export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4,
     onClick,
     media,
     collapsed = false,
-    testID
-  } = _ref4;
+    testID,
+    className,
+    style,
+    background = 'bg',
+    caretSize,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  } = _ref5;
   const {
     setActiveKey,
     activeKey
   } = useAccordionContext();
-  const spacing = useCellSpacing();
+  const outerSpacing = useMemo(() => compactPaddingProps({
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd]);
+  // Header padding follows the same outer spacing rules as Cell.
+  const spacing = useCellSpacing({
+    outerSpacing
+  });
   const handleClick = useCallback(() => {
     onClick === null || onClick === void 0 || onClick(itemKey);
     setActiveKey(itemKey === activeKey ? null : itemKey);
@@ -111,9 +145,11 @@ export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4,
       "aria-controls": getAccordionPanelId(itemKey),
       "aria-expanded": !collapsed // a11y guideline: https://www.w3.org/TR/wai-aria-practices/#accordion
       ,
-      background: "bg",
+      background: background,
+      className: className,
       id: getAccordionHeaderId(itemKey),
       onClick: handleClick,
+      style: style,
       testID: testID,
       width: "100%",
       children: /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
@@ -129,6 +165,7 @@ export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4,
           tertiaryTitle: tertiaryTitle,
           title: title
         }), /*#__PURE__*/_jsx(AccordionIcon, {
+          caretSize: caretSize,
           collapsed: collapsed
         })]
       }))

package/esm/accordion/AccordionItem.js

@@ -1,17 +1,39 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { memo } from 'react';
 import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
 import { accordionMinWidth } from '@coinbase/cds-common/tokens/accordion';
+import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
+import { Divider } from '../layout/Divider';
 import { VStack } from '../layout/VStack';
 import { AccordionHeader } from './AccordionHeader';
 import { AccordionPanel } from './AccordionPanel';
+
+/**
+ * Static class names for AccordionItem component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const accordionItemClassNames = {
+  /** Root element */
+  root: 'cds-AccordionItem',
+  /** Header pressable element */
+  header: 'cds-AccordionItem-header',
+  /** Collapsible panel container element */
+  panel: 'cds-AccordionItem-panel'
+};
 /**
  * A component that represents a single item within an Accordion.
  * It composes together an AccordionHeader and a collapsible AccordionPanel.
  * Accepts a unique `itemKey` prop to uniquely identify one item from another within the same Accordion.
  */
-export const AccordionItem = /*#__PURE__*/memo(_ref => {
-  let {
+export const AccordionItem = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('AccordionItem', _props);
+  const {
     itemKey,
     title,
     subtitle,
@@ -23,31 +45,67 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
     headerRef,
     panelRef,
     maxHeight,
-    style
-  } = _ref;
+    style,
+    styles,
+    className,
+    classNames,
+    showHeaderBorder = false,
+    background,
+    caretSize,
+    borderRadius,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  } = mergedProps;
   const {
     activeKey
   } = useAccordionContext();
   const collapsed = activeKey !== itemKey;
   return /*#__PURE__*/_jsxs(VStack, {
+    borderRadius: borderRadius,
+    className: cx(accordionItemClassNames.root, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     minWidth: accordionMinWidth,
-    style: style,
+    overflow: borderRadius !== undefined ? 'hidden' : undefined,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
     testID: testID,
+    width: "100%",
     children: [/*#__PURE__*/_jsx(AccordionHeader, {
       ref: headerRef,
+      background: background,
+      caretSize: caretSize,
+      className: cx(accordionItemClassNames.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
       collapsed: collapsed,
       itemKey: itemKey,
       media: media,
       onClick: onClick,
+      padding: padding,
+      paddingBottom: paddingBottom,
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      paddingY: paddingY,
+      style: styles === null || styles === void 0 ? void 0 : styles.header,
       subtitle: subtitle,
       tertiaryTitle: tertiaryTitle,
       testID: testID && "".concat(testID, "-header"),
       title: title
-    }), /*#__PURE__*/_jsx(AccordionPanel, {
+    }), showHeaderBorder ? /*#__PURE__*/_jsx(Divider, {
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingX: paddingX,
+      testID: testID && "".concat(testID, "-divider")
+    }) : null, /*#__PURE__*/_jsx(AccordionPanel, {
       ref: panelRef,
+      className: cx(accordionItemClassNames.panel, classNames === null || classNames === void 0 ? void 0 : classNames.panel),
       collapsed: collapsed,
       itemKey: itemKey,
       maxHeight: maxHeight,
+      style: styles === null || styles === void 0 ? void 0 : styles.panel,
       testID: testID && "".concat(testID, "-panel"),
       children: children
     })]

package/esm/accordion/AccordionPanel.js

@@ -19,12 +19,16 @@ export const AccordionPanel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, f
     collapsed = true,
     itemKey,
     testID,
-    maxHeight: maxHeightParam
+    maxHeight: maxHeightParam,
+    className,
+    style
   } = _ref;
   return /*#__PURE__*/_jsx(Collapsible, _objectSpread(_objectSpread({
     ref: forwardedRef,
+    className: className,
     collapsed: collapsed,
     maxHeight: maxHeightParam !== null && maxHeightParam !== void 0 ? maxHeightParam : accordionVisibleMaxHeight,
+    style: style,
     testID: testID
   }, accordionSpacing), {}, {
     // a11y guideline: https://www.w3.org/TR/wai-aria-practices/#accordion

package/esm/collapsible/Collapsible.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import { m as motion } from 'framer-motion';
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { useCollapsibleMotionProps } from './useCollapsibleMotionProps';
@@ -26,6 +27,8 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
     id,
     role = 'region',
     dangerouslyDisableOverflowHidden = false,
+    className,
+    style: styleProp,
     // Spacing
     padding,
     paddingBottom,
@@ -67,17 +70,18 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
     }
   }, [collapsed]);
   const style = useMemo(() => {
-    return isDisplayNone ? _objectSpread(_objectSpread({}, motionStyle), {}, {
+    const nextStyle = isDisplayNone ? _objectSpread(_objectSpread({}, motionStyle), {}, {
       display: 'none'
     }) : motionStyle;
-  }, [motionStyle, isDisplayNone]);
+    return styleProp ? _objectSpread(_objectSpread({}, nextStyle), styleProp) : nextStyle;
+  }, [motionStyle, isDisplayNone, styleProp]);
   return (
     /*#__PURE__*/
     // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
     _jsx(motion.div, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, motionProps), {}, {
       ref: forwardedRef,
       'aria-labelledby': accessibilityLabelledBy,
-      className: COMPONENT_STATIC_CLASSNAME,
+      className: cx(COMPONENT_STATIC_CLASSNAME, className),
       'data-testid': testID,
       id: id,
       onAnimationComplete: handleAnimationComplete,

package/esm/controls/Switch.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "checked", "disabled", "elevation", "controlColor", "background", "borderColor", "borderRadius", "borderWidth", "value", "className", "style", "classNames", "styles"];
+const _excluded = ["children", "checked", "disabled", "elevation", "controlColor", "variant", "background", "borderColor", "borderRadius", "borderWidth", "value", "className", "style", "classNames", "styles"];
 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; }
@@ -33,6 +33,15 @@ export const switchClassNames = {
 };
 const trackCss = "trackCss-t1fng8qd";
 const thumbCss = "thumbCss-t1l9xlcf";
+
+/** Semantic color variants for Switch, matching the semantics used by other control components. */
+
+/** Track background color applied when Switch is checked, keyed by `variant`. */
+const switchVariantBackground = {
+  primary: 'bgPrimary',
+  positive: 'bgPositive',
+  negative: 'bgNegative'
+};
 const MotionBox = motion(Box);
 const thumbMotionVariants = {
   checked: {
@@ -52,7 +61,10 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref
       disabled,
       elevation,
       controlColor,
-      background = checked ? 'bgPrimary' : 'bgTertiary',
+      variant = 'primary',
+      // The variant only informs the track color while checked; the background prop is more
+      // specific and always wins when provided.
+      background = checked ? switchVariantBackground[variant] : 'bgTertiary',
       borderColor,
       borderRadius = 1000,
       borderWidth,

package/esm/tabs/SegmentedTabs.css

@@ -0,0 +1,2 @@
+@layer cds{.equalWidthTabContainerCss-eg1j8x0{-webkit-flex:1;-ms-flex:1;flex:1;}
+.equalWidthTabCss-e1aaasyn{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}}

package/esm/tabs/SegmentedTabs.js

@@ -1,4 +1,4 @@
-const _excluded = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius", "className", "classNames", "style", "styles"];
+const _excluded = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius", "equalWidth", "alignSelf", "width", "className", "classNames", "style", "styles"];
 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; }
@@ -6,13 +6,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { SegmentedTab } from './SegmentedTab';
 import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
 import { Tabs } from './Tabs';
 import { jsx as _jsx } from "react/jsx-runtime";
+const equalWidthTabContainerCss = "equalWidthTabContainerCss-eg1j8x0";
+const equalWidthTabCss = "equalWidthTabCss-e1aaasyn";
 const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('SegmentedTabs', _props);
   const {
@@ -21,23 +23,34 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props
       activeBackground = 'bgInverse',
       background = 'bgSecondary',
       borderRadius = 700,
+      equalWidth,
+      alignSelf = equalWidth ? 'stretch' : undefined,
+      width = equalWidth ? '100%' : undefined,
       className,
       classNames,
       style,
       styles
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
+  const resolvedClassNames = useMemo(() => {
+    if (!equalWidth) return classNames;
+    return _objectSpread(_objectSpread({}, classNames), {}, {
+      tabContainer: cx(equalWidthTabContainerCss, classNames === null || classNames === void 0 ? void 0 : classNames.tabContainer),
+      tab: cx(equalWidthTabCss, classNames === null || classNames === void 0 ? void 0 : classNames.tab)
+    });
+  }, [equalWidth, classNames]);
   return /*#__PURE__*/_jsx(Tabs, _objectSpread({
     ref: ref,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
+    alignSelf: alignSelf,
     background: background,
     borderRadius: borderRadius,
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     classNames: {
-      tabContainer: classNames === null || classNames === void 0 ? void 0 : classNames.tabContainer,
-      tab: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
+      tabContainer: resolvedClassNames === null || resolvedClassNames === void 0 ? void 0 : resolvedClassNames.tabContainer,
+      tab: resolvedClassNames === null || resolvedClassNames === void 0 ? void 0 : resolvedClassNames.tab,
       activeIndicator: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator
     },
     role: "tablist",
@@ -46,8 +59,10 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props
       tabContainer: styles === null || styles === void 0 ? void 0 : styles.tabContainer,
       tab: styles === null || styles === void 0 ? void 0 : styles.tab,
       activeIndicator: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
-    }
+    },
+    width: width
   }, props));
 }));
 SegmentedTabsComponent.displayName = 'SegmentedTabs';
-export const SegmentedTabs = SegmentedTabsComponent;
+export const SegmentedTabs = SegmentedTabsComponent;
+import "./SegmentedTabs.css";

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

@@ -0,0 +1,99 @@
+import { memo, useId } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const axisTickLabelOverflowFadeWidth = 30;
+/**
+ * Masks tick-label children so they fade at the chart/SVG outer edges
+ * without painting over other axes.
+ */
+export const AxisTickLabelOverflowMask = /*#__PURE__*/memo(_ref => {
+  let {
+    axis,
+    children,
+    testID
+  } = _ref;
+  const {
+    width: chartWidth,
+    height: chartHeight
+  } = useCartesianChartContext();
+  const reactId = useId();
+  const maskId = "".concat(reactId, "-mask");
+  const fadeWidth = axisTickLabelOverflowFadeWidth;
+  const isXAxis = axis === 'x';
+  if (chartWidth <= 0 || chartHeight <= 0) {
+    return children;
+  }
+  const fadeX = Math.min(fadeWidth, chartWidth / 2) / chartWidth;
+  const fadeY = Math.min(fadeWidth, chartHeight / 2) / chartHeight;
+  return /*#__PURE__*/_jsxs("g", {
+    "data-testid": testID,
+    children: [/*#__PURE__*/_jsxs("defs", {
+      children: [isXAxis ? /*#__PURE__*/_jsxs("linearGradient", {
+        gradientUnits: "userSpaceOnUse",
+        id: "".concat(reactId, "-fade"),
+        x1: 0,
+        x2: chartWidth,
+        y1: 0,
+        y2: 0,
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: 0,
+          stopColor: "#fff",
+          stopOpacity: 0
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: fadeX,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1 - fadeX,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1,
+          stopColor: "#fff",
+          stopOpacity: 0
+        })]
+      }) : /*#__PURE__*/_jsxs("linearGradient", {
+        gradientUnits: "userSpaceOnUse",
+        id: "".concat(reactId, "-fade"),
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: chartHeight,
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: 0,
+          stopColor: "#fff",
+          stopOpacity: 0
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: fadeY,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1 - fadeY,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1,
+          stopColor: "#fff",
+          stopOpacity: 0
+        })]
+      }), /*#__PURE__*/_jsx("mask", {
+        height: chartHeight,
+        id: maskId,
+        maskUnits: "userSpaceOnUse",
+        width: chartWidth,
+        x: 0,
+        y: 0,
+        children: /*#__PURE__*/_jsx("rect", {
+          fill: "url(#".concat(reactId, "-fade)"),
+          height: chartHeight,
+          width: chartWidth,
+          x: 0,
+          y: 0
+        })
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: children
+    })]
+  });
+});