@coinbase/cds-web 9.8.0 → 9.10.0

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

@@ -1,5 +1,5 @@
 const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
-  _excluded2 = ["tabs", "activeTab", "onChange", "TabComponent", "testID", "background", "gap", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width", "TabsActiveIndicatorComponent", "disabled", "compact", "styles", "classNames", "autoScrollOffset"];
+  _excluded2 = ["tabs", "activeTab", "onChange", "TabComponent", "testID", "background", "gap", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width", "TabsActiveIndicatorComponent", "disabled", "compact", "size", "styles", "classNames", "autoScrollOffset"];
 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; }
@@ -77,11 +77,14 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicatorComponent,
       disabled,
       compact,
+      size,
       styles,
       classNames,
       autoScrollOffset = 50
     } = mergedProps,
     accessibilityProps = _objectWithoutProperties(mergedProps, _excluded2);
+  // Size is driven by `size`; deprecated `compact` falls back to its legacy `xs` size.
+  const resolvedSize = size !== null && size !== void 0 ? size : compact ? 'xs' : 's';
   const [scrollTarget, setScrollTarget] = useState(null);
   const {
     scrollRef,
@@ -107,11 +110,11 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       behavior: 'smooth'
     });
   }, [scrollRef]);
-  const TabComponentWithCompact = useCallback(props => {
+  const TabComponentWithSize = useCallback(props => {
     return /*#__PURE__*/_jsx(TabComponent, _objectSpread({
-      compact: compact
+      size: resolvedSize
     }, props));
-  }, [TabComponent, compact]);
+  }, [TabComponent, resolvedSize]);
   return /*#__PURE__*/_jsxs(HStack, {
     alignItems: "center",
     className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.root),
@@ -126,6 +129,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       onClick: handleScrollLeft,
       paddleStyle: styles === null || styles === void 0 ? void 0 : styles.paddle,
       show: isScrollContentOffscreenLeft,
+      size: resolvedSize,
       variant: "secondary"
     }), /*#__PURE__*/_jsx(HStack, {
       ref: scrollRef,
@@ -136,7 +140,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       style: styles === null || styles === void 0 ? void 0 : styles.scrollContainer,
       children: /*#__PURE__*/_jsx(Tabs, _objectSpread({
         ref: ref,
-        TabComponent: TabComponentWithCompact,
+        TabComponent: TabComponentWithSize,
         TabsActiveIndicatorComponent: DefaultTabsActiveIndicatorComponent,
         activeTab: activeTab || null,
         background: background,
@@ -155,6 +159,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       onClick: handleScrollRight,
       paddleStyle: styles === null || styles === void 0 ? void 0 : styles.paddle,
       show: isScrollContentOffscreenRight,
+      size: resolvedSize,
       variant: "secondary"
     })]
   });

package/esm/buttons/Button.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "height", "lineHeight", "background", "color", "className", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "paddingY", "margin", "minWidth", "style", "textAlign"];
+const _excluded = ["as", "variant", "loading", "progressCircleSize", "transparent", "block", "compact", "size", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "height", "lineHeight", "background", "color", "className", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "paddingY", "margin", "minWidth", "style", "textAlign"];
 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; }
@@ -24,6 +24,37 @@ const COMPONENT_STATIC_CLASSNAME = 'cds-Button';
  */
 export const spinnerHeight = 2.5;
 const defaultProgressCircleSize = 24;
+const buttonSizes = {
+  xs: {
+    paddingX: 2,
+    paddingY: 0.75,
+    borderRadius: 700,
+    iconSize: 's',
+    font: 'label1'
+  },
+  s: {
+    paddingX: 2,
+    paddingY: 1,
+    borderRadius: 700,
+    iconSize: 's',
+    font: 'headline'
+  },
+  m: {
+    paddingX: 3,
+    paddingY: 1.5,
+    borderRadius: 900,
+    iconSize: 'm',
+    font: 'headline'
+  },
+  l: {
+    paddingX: 4,
+    paddingY: 2,
+    borderRadius: 900,
+    iconSize: 'm',
+    font: 'headline'
+  }
+};
+const defaultButtonSize = 'l';
 const baseCss = "baseCss-b99zquh";
 const blockCss = "blockCss-b9yox33";
 const spinnerContainerCss = "spinnerContainerCss-s1bhvbb9";
@@ -36,6 +67,7 @@ const middleNodeCss = "middleNodeCss-m1avpq52";
 const flushCss = "flushCss-f69rtgb";
 export const buttonDefaultElement = 'button';
 export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  var _ref, _ref2;
   const mergedProps = useComponentConfig('Button', _props);
   const {
       as,
@@ -45,6 +77,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       transparent,
       block,
       compact,
+      size,
       children,
       start,
       startIcon,
@@ -55,7 +88,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       flush,
       noScaleOnPress,
       numberOfLines,
-      font = 'headline',
+      font: fontProp,
       fontFamily,
       fontSize,
       fontWeight,
@@ -67,11 +100,11 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       borderColor,
       borderWidth = 0,
       // remove Pressable's default transparent border
-      borderRadius = compact ? 700 : 900,
+      borderRadius: borderRadiusProp,
       accessibilityLabel,
       padding,
-      paddingX = padding !== null && padding !== void 0 ? padding : compact ? 2 : 4,
-      paddingY = padding !== null && padding !== void 0 ? padding : compact ? 1 : 2,
+      paddingX: paddingXProp,
+      paddingY: paddingYProp,
       margin = 0,
       minWidth = 'auto',
       style,
@@ -80,7 +113,15 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     props = _objectWithoutProperties(mergedProps, _excluded);
   const theme = useTheme();
   const Component = as !== null && as !== void 0 ? as : buttonDefaultElement;
-  const iconSize = compact ? 's' : 'm';
+
+  // `size` wins when both `size` and `compact` are set; compact-only maps to `s`.
+  const resolvedSize = size !== null && size !== void 0 ? size : compact ? 's' : defaultButtonSize;
+  const sizeConfig = buttonSizes[resolvedSize];
+  const font = fontProp !== null && fontProp !== void 0 ? fontProp : sizeConfig.font;
+  const borderRadius = borderRadiusProp !== null && borderRadiusProp !== void 0 ? borderRadiusProp : sizeConfig.borderRadius;
+  const paddingX = (_ref = paddingXProp !== null && paddingXProp !== void 0 ? paddingXProp : padding) !== null && _ref !== void 0 ? _ref : sizeConfig.paddingX;
+  const paddingY = (_ref2 = paddingYProp !== null && paddingYProp !== void 0 ? paddingYProp : padding) !== null && _ref2 !== void 0 ? _ref2 : sizeConfig.paddingY;
+  const iconSize = sizeConfig.iconSize;
   const hasIcon = Boolean(startIcon !== null && startIcon !== void 0 ? startIcon : endIcon);
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "className", "style", "padding", "name", "iconSize", "active", "flush", "loading", "progressCircleSize", "accessibilityLabel", "accessibilityHint", "styles", "classNames"];
+const _excluded = ["as", "variant", "transparent", "compact", "size", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "className", "style", "padding", "name", "iconSize", "active", "flush", "loading", "progressCircleSize", "accessibilityLabel", "accessibilityHint", "styles", "classNames"];
 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; }
@@ -29,6 +29,25 @@ export const iconButtonClassNames = {
   progressCircle: 'cds-IconButton-progressCircle'
 };
 export const iconButtonDefaultElement = 'button';
+const iconButtonSizes = {
+  xs: {
+    padding: 1,
+    iconSize: 's'
+  },
+  s: {
+    padding: 1.5,
+    iconSize: 's'
+  },
+  m: {
+    padding: 1.5,
+    iconSize: 'm'
+  },
+  l: {
+    padding: 2,
+    iconSize: 'm'
+  }
+};
+const defaultIconButtonSize = 'l';
 const baseCss = "baseCss-b1po8mo6";
 export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('IconButton', _props);
@@ -37,19 +56,21 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       variant = 'secondary',
       transparent,
       compact = true,
+      size,
       background,
       color,
       borderColor,
       borderRadius = 1000,
+      // fully rounded at every size
       borderWidth = 0,
       // remove Pressable's default transparent border
       alignItems = 'center',
       justifyContent = 'center',
       className,
       style,
-      padding = compact ? 1.5 : 2,
+      padding: paddingProp,
       name,
-      iconSize = compact ? 's' : 'm',
+      iconSize: iconSizeProp,
       active,
       flush,
       loading,
@@ -62,6 +83,13 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : iconButtonDefaultElement;
   const theme = useTheme();
+
+  // `size` wins when both `size` and `compact` are set. IconButton defaults `compact`
+  // to `true`, so with no explicit `size` the button resolves to `s`.
+  const resolvedSize = size !== null && size !== void 0 ? size : compact ? 's' : defaultIconButtonSize;
+  const sizeConfig = iconButtonSizes[resolvedSize];
+  const padding = paddingProp !== null && paddingProp !== void 0 ? paddingProp : sizeConfig.padding;
+  const iconSize = iconSizeProp !== null && iconSizeProp !== void 0 ? iconSizeProp : sizeConfig.iconSize;
   const iconSizeValue = theme.iconSize[iconSize];
   const spinnerSize = iconSizeValue / 10;
   const resolvedPadding = useResolveResponsiveProp(padding);

package/esm/cards/CardBody.js

@@ -79,7 +79,6 @@ export const CardBody = /*#__PURE__*/memo(function CardBody(_ref) {
   const action = useMemo(() => {
     if (actionLabel && onActionPress) {
       return /*#__PURE__*/_jsx(Button, {
-        compact: true,
         noScaleOnPress: true,
         transparent: true,
         accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : actionLabel,
@@ -87,6 +86,7 @@ export const CardBody = /*#__PURE__*/memo(function CardBody(_ref) {
         flush: "start",
         numberOfLines: 3,
         onClick: onActionPress,
+        size: "s",
         testID: "".concat(testID, "-action"),
         variant: "primary",
         children: actionLabel

package/esm/cards/FeedCard.js

@@ -1,4 +1,5 @@
-const _excluded = ["testID", "avatar", "author", "metadata", "pictogram", "spotSquare", "image", "mediaPlacement", "title", "description", "headerAction", "like", "comment", "share", "cta", "borderRadius", "elevation"];
+const _excluded = ["testID", "avatar", "author", "metadata", "pictogram", "spotSquare", "image", "mediaPlacement", "title", "description", "headerAction", "like", "comment", "share", "cta", "borderRadius", "elevation"],
+  _excluded2 = ["compact", "size"];
 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; }
@@ -41,6 +42,25 @@ export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
       elevation = 0
     } = _ref,
     cardProps = _objectWithoutProperties(_ref, _excluded);
+  const ctaNode = useMemo(() => {
+    if (!cta) return null;
+
+    // `compact` and `size` are lifted out of the spread so a consumer-supplied `cta` cannot clobber
+    // the footer's dense default. Precedence matches the pre-`size` behaviour: an explicit `size`
+    // wins, otherwise `compact` decides and defaults to dense. Collapses to `size={size ?? 's'}`
+    // in v10 once `compact` is dropped from Button.
+    const {
+        compact,
+        size
+      } = cta,
+      ctaProps = _objectWithoutProperties(cta, _excluded2);
+    return /*#__PURE__*/_jsx(Button, _objectSpread({
+      transparent: true,
+      flush: "end",
+      size: size !== null && size !== void 0 ? size : (compact !== null && compact !== void 0 ? compact : true) ? 's' : undefined,
+      variant: "secondary"
+    }, ctaProps));
+  }, [cta]);
   const footer = useMemo(() => {
     var _ref2, _ref3;
     const hasFooterActions = Boolean((_ref2 = (_ref3 = like !== null && like !== void 0 ? like : comment) !== null && _ref3 !== void 0 ? _ref3 : share) !== null && _ref2 !== void 0 ? _ref2 : cta);
@@ -64,16 +84,11 @@ export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
             name: "share",
             testID: "".concat(testID, "-share")
           }, share))]
-        }), cta && /*#__PURE__*/_jsx(Button, _objectSpread({
-          compact: true,
-          transparent: true,
-          flush: "end",
-          variant: "secondary"
-        }, cta))]
+        }), ctaNode]
       });
     }
     return null;
-  }, [comment, cta, like, share, testID]);
+  }, [comment, cta, ctaNode, like, share, testID]);
   return /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({
     borderRadius: borderRadius,
     elevation: elevation,

package/esm/cards/MessagingCard/MessagingCardLayout.js

@@ -74,9 +74,9 @@ export const MessagingCardLayout = /*#__PURE__*/memo(_ref => {
       };
       if (type === 'upsell') {
         return /*#__PURE__*/_jsx(Button, {
-          compact: true,
           accessibilityLabel: actionButtonAccessibilityLabel !== null && actionButtonAccessibilityLabel !== void 0 ? actionButtonAccessibilityLabel : action,
           onClick: handleActionClick,
+          size: "s",
           variant: "secondary",
           children: action
         });
@@ -121,10 +121,10 @@ export const MessagingCardLayout = /*#__PURE__*/memo(_ref => {
         style: styles === null || styles === void 0 ? void 0 : styles.dismissButtonContainer,
         top: 0,
         children: /*#__PURE__*/_jsx(IconButton, {
-          compact: true,
           accessibilityLabel: computedDismissButtonAccessibilityLabel,
           name: "close",
           onClick: handleDismiss,
+          size: "s",
           variant: "secondary"
         })
       });

package/esm/cards/NudgeCard.js

@@ -66,7 +66,7 @@ const getCardBodyPaddingProps = _ref => {
  *   title="Title"
  *   description="Description"
  *   media={<Pictogram dimension="48x48" name="addToWatchlist" />}
- *   actions={<Button compact variant="secondary">Learn more</Button>}
+ *   actions={<Button size="s" variant="secondary">Learn more</Button>}
  *   onDismiss={handleDismiss}
  *   mediaPlacement="end"
  * />

package/esm/cards/UpsellCard.js

@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   title="Title"
  *   description="Description"
  *   media={<RemoteImage ... />}
- *   actions={<Button compact variant="secondary">Get Started</Button>}
+ *   actions={<Button size="s" variant="secondary">Get Started</Button>}
  *   onDismiss={handleDismiss}
  *   mediaPlacement="end"
  * />
@@ -102,10 +102,10 @@ export const UpsellCard = /*#__PURE__*/memo(_ref => {
         }), !!action && /*#__PURE__*/_jsx(HStack, {
           paddingStart: 2,
           children: /*#__PURE__*/isValidElement(action) ? action : /*#__PURE__*/_jsx(Button, {
-            compact: true,
             flush: "start",
             numberOfLines: 1,
             onClick: onActionPress,
+            size: "s",
             variant: "secondary",
             children: action
           })

package/esm/carousel/DefaultCarouselNavigation.js

@@ -8,6 +8,8 @@ import { IconButton } from '../buttons/IconButton';
 import { cx } from '../cx';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Size the navigation buttons render at when neither `iconButtonSize` nor `compact` is set. */
+const defaultIconButtonSize = 's';
 const navigationCss = "navigationCss-n15h1fxo";
 export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarouselNavigation(_ref) {
   var _testIDMap$autoplayBu, _testIDMap$previousBu, _testIDMap$nextButton;
@@ -28,6 +30,7 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     startIcon = 'play',
     stopIcon = 'pause',
     variant = 'secondary',
+    iconButtonSize,
     compact,
     className,
     classNames,
@@ -36,6 +39,10 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     testIDMap,
     hideUnlessFocused
   } = _ref;
+  // `compact` was forwarded straight to `IconButton`, which defaults its own `compact` to `true` —
+  // so these buttons have always rendered dense unless a caller explicitly passed `compact={false}`,
+  // which then fell back to IconButton's `l`. `iconButtonSize` wins when set.
+  const resolvedIconButtonSize = iconButtonSize !== null && iconButtonSize !== void 0 ? iconButtonSize : (compact !== null && compact !== void 0 ? compact : true) ? defaultIconButtonSize : 'l';
   return /*#__PURE__*/_jsxs(HStack, {
     className: cx(navigationCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-hiddenunlessfocused": hideUnlessFocused,
@@ -44,29 +51,29 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     children: [autoplay && /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: isAutoplayStopped ? startAutoplayAccessibilityLabel : stopAutoplayAccessibilityLabel,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.autoplayButton,
-      compact: compact,
       name: isAutoplayStopped ? startIcon : stopIcon,
       onClick: onToggleAutoplay,
+      size: resolvedIconButtonSize,
       style: styles === null || styles === void 0 ? void 0 : styles.autoplayButton,
       testID: (_testIDMap$autoplayBu = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.autoplayButton) !== null && _testIDMap$autoplayBu !== void 0 ? _testIDMap$autoplayBu : 'carousel-autoplay-button',
       variant: variant
     }), /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: previousPageAccessibilityLabel,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.previousButton,
-      compact: compact,
       disabled: disableGoPrevious,
       name: previousIcon,
       onClick: onGoPrevious,
+      size: resolvedIconButtonSize,
       style: styles === null || styles === void 0 ? void 0 : styles.previousButton,
       testID: (_testIDMap$previousBu = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.previousButton) !== null && _testIDMap$previousBu !== void 0 ? _testIDMap$previousBu : 'carousel-previous-button',
       variant: variant
     }), /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: nextPageAccessibilityLabel,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.nextButton,
-      compact: compact,
       disabled: disableGoNext,
       name: nextIcon,
       onClick: onGoNext,
+      size: resolvedIconButtonSize,
       style: styles === null || styles === void 0 ? void 0 : styles.nextButton,
       testID: (_testIDMap$nextButton = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.nextButton) !== null && _testIDMap$nextButton !== void 0 ? _testIDMap$nextButton : 'carousel-next-button',
       variant: variant

package/esm/chips/Chip.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "alignItems", "width", "height", "compact", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "invertColorScheme", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "color", "onClick"];
+const _excluded = ["as", "alignItems", "width", "height", "compact", "size", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "invertColorScheme", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "color", "onClick"];
 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; }
@@ -17,6 +17,21 @@ import { Pressable } from '../system/Pressable';
 import { InvertedThemeProvider } from '../system/ThemeProvider';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const chipSizes = {
+  xs: {
+    paddingX: 1.5,
+    paddingY: 0.75,
+    font: 'label1',
+    borderRadius: 700
+  },
+  s: {
+    paddingX: 2,
+    paddingY: 1,
+    font: 'headline',
+    borderRadius: 700
+  }
+};
+const defaultChipSize = 's';
 const transitionCss = "transitionCss-thdcix9";
 
 /**
@@ -25,18 +40,22 @@ const transitionCss = "transitionCss-thdcix9";
  * When onClick is not provided, the ref will be typed as HTMLDivElement.
  */
 export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_props, ref) {
+  var _mergedProps$size;
   const mergedProps = useComponentConfig('Chip', _props);
+  // Geometry is driven by `size`; deprecated `compact` falls back to its legacy `xs` size.
+  const sizeConfig = chipSizes[(_mergedProps$size = mergedProps.size) !== null && _mergedProps$size !== void 0 ? _mergedProps$size : mergedProps.compact ? 'xs' : defaultChipSize];
   const {
       as,
       alignItems = 'center',
       width = 'fit-content',
       height = 'fit-content',
       compact,
+      size: _size,
       gap = 1,
       start,
       end,
-      paddingX = compact ? 1.5 : 2,
-      paddingY = compact ? 0.5 : 1,
+      paddingX = sizeConfig.paddingX,
+      paddingY = sizeConfig.paddingY,
       padding,
       paddingTop,
       paddingBottom,
@@ -50,13 +69,13 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_pro
       numberOfLines = 1,
       testID,
       contentStyle,
-      borderRadius = 700,
+      borderRadius = sizeConfig.borderRadius,
       background = 'bgSecondary',
       style,
       className,
       styles,
       classNames,
-      font = compact ? 'label1' : 'headline',
+      font = sizeConfig.font,
       color = 'fg',
       onClick
     } = mergedProps,

package/esm/chips/MediaChip.js

@@ -1,4 +1,4 @@
-const _excluded = ["start", "children", "end", "compact", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
+const _excluded = ["start", "children", "end", "compact", "size", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
 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,6 +18,7 @@ export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Medi
       children,
       end,
       compact,
+      size,
       padding,
       paddingX,
       paddingY,
@@ -27,9 +28,11 @@ export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Medi
       paddingEnd
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
+  // Spacing is driven by `size`; deprecated `compact` falls back to its legacy `xs` size.
+  const resolvedSize = size !== null && size !== void 0 ? size : compact ? 'xs' : 's';
   const spacingProps = useMemo(() => {
     const defaults = getMediaChipSpacingProps({
-      compact: !!compact,
+      size: resolvedSize,
       start: !!start,
       end: !!end,
       children: !!children
@@ -43,11 +46,12 @@ export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Medi
       paddingStart: paddingStart !== null && paddingStart !== void 0 ? paddingStart : defaults.paddingStart,
       paddingEnd: paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : defaults.paddingEnd
     };
-  }, [compact, start, end, children, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd]);
+  }, [resolvedSize, start, end, children, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd]);
   return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread(_objectSpread({
     ref: ref,
     compact: compact,
     end: end,
+    size: size,
     start: start
   }, spacingProps), props), {}, {
     children: children

package/esm/controls/NativeInput.js

@@ -37,6 +37,9 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Na
   const {
     activeColorScheme
   } = useTheme();
+  // NativeInput has no `size` prop, so the deprecated `compact` still drives its own
+  // padding here. When rendered inside TextInput, `containerSpacing` (size-derived) is
+  // passed and overrides this fallback.
   const defaultContainerPadding = compact ? compactContainerPaddingCss : originalContainerPaddingCss;
   const dynamicStyles = useMemo(() => _objectSpread({
     textAlign: align,

package/esm/controls/SearchInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["onChange", "onClear", "onChangeText", "onSearch", "testID", "value", "compact", "hideStartIcon", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel", "borderRadius", "height"];
+const _excluded = ["onChange", "onClear", "onChangeText", "onSearch", "testID", "value", "compact", "size", "hideStartIcon", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel", "borderRadius"];
 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; }
@@ -15,7 +15,7 @@ import { InputIconButton } from './InputIconButton';
 import { TextInput } from './TextInput';
 
 /**
- * @deprecated Use local constants or the `compact` prop instead. This will be removed in a future major release.
+ * @deprecated Use local constants or the `size` prop instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,6 +23,9 @@ export const scales = {
   regular: 56,
   compact: 40
 };
+
+/** T-shirt size for SearchInput. Aliases the TextInput size union. */
+
 export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('SearchInput', _props);
   const {
@@ -33,18 +36,22 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       testID,
       value,
       compact,
+      size,
       hideStartIcon = false,
       hideEndIcon,
       startIcon,
       end,
       startIconAccessibilityLabel = 'Back',
       clearIconAccessibilityLabel = 'Clear search query',
-      borderRadius = 1000,
-      height = compact ? scales.compact : scales.regular
+      borderRadius = 1000
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const internalRef = useRef(null);
   const refs = useMergeRefs(ref, internalRef);
+
+  // Field geometry is handled by TextInput; this only drives SearchInput's own clear-button
+  // spacing. `size` wins over the deprecated `compact`, which maps to its legacy `s` size.
+  const resolvedSize = size !== null && size !== void 0 ? size : compact ? 's' : 'l';
   const handleOnChange = useCallback(e => {
     onChange === null || onChange === void 0 || onChange(e);
     onChangeText === null || onChangeText === void 0 || onChangeText(e.target.value);
@@ -66,9 +73,10 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
   return /*#__PURE__*/_jsx(TextInput, _objectSpread({
     ref: refs,
     borderRadius: borderRadius,
+    compact: compact,
     end: end !== null && end !== void 0 ? end : !!value && !hideEndIcon && /*#__PURE__*/_jsx(Box, {
-      marginEnd: compact ? -0.5 : 0,
-      paddingEnd: compact ? 0 : 0.5,
+      marginEnd: resolvedSize === 's' ? -0.5 : 0,
+      paddingEnd: resolvedSize === 's' ? 0 : 0.5,
       children: /*#__PURE__*/_jsx(InputIconButton, {
         accessibilityLabel: clearIconAccessibilityLabel,
         name: "close",
@@ -76,10 +84,10 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
         testID: testID && "".concat(testID, "-close-iconbtn")
       })
     }),
-    height: height,
     onChange: handleOnChange,
     onKeyUp: handleOnKeyUp,
     role: "searchbox",
+    size: size,
     start: !hideStartIcon && /*#__PURE__*/_jsx(InputIcon, {
       accessibilityLabel: determineStartIconAccessibilityLabel,
       name: startIcon !== null && startIcon !== void 0 ? startIcon : 'search',

package/esm/controls/TextInput.css

@@ -1,3 +1,3 @@
-@layer cds{.nativeInputContainerCss-nvfk24{padding-top:var(--space-2);padding-bottom:var(--space-2);padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}.nativeInputContainerCss-nvfk24[data-labelvariant='inside']{padding-top:0;padding-bottom:var(--space-1);}.nativeInputContainerCss-nvfk24[data-start='true']{padding-inline-start:var(--space-0_5);}.nativeInputContainerCss-nvfk24[data-compact='true']{padding-top:var(--space-1);padding-bottom:var(--space-1);padding-inline-start:var(--space-1);padding-inline-end:var(--space-1);}
-.insideLabelCss-i1dqgbcz{padding-top:var(--space-1);padding-bottom:0;padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}
+@layer cds{.nativeInputContainerCss-nvfk24{padding-top:var(--space-2);padding-bottom:var(--space-2);padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}.nativeInputContainerCss-nvfk24[data-size='m']{padding-top:var(--space-1_5);padding-bottom:var(--space-1_5);}.nativeInputContainerCss-nvfk24[data-size='s']{padding-top:var(--space-1);padding-bottom:var(--space-1);}.nativeInputContainerCss-nvfk24[data-labelvariant='inside']{padding-top:0;padding-bottom:var(--space-0_75);}.nativeInputContainerCss-nvfk24[data-inlinelabel='true']{padding-inline-start:var(--space-1);}.nativeInputContainerCss-nvfk24[data-start='true']{padding-inline-start:var(--space-0_5);}
+.insideLabelCss-i1dqgbcz{padding-top:var(--space-0_75);padding-bottom:0;padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}
 .insideLabelCssStartCss-i1scwjk{padding-inline-start:var(--space-0_5);}}