@coinbase/cds-mobile 9.9.0 → 9.10.0

package/esm/buttons/__stories__/Button.stories.js

@@ -34,9 +34,7 @@ const buttonStories = [{
 }, {
   block: true
 }, {
-  compact: true
-}, {
-  compact: true,
+  size: 's',
   block: true
 }, {
   transparent: true
@@ -46,35 +44,35 @@ const buttonStories = [{
   loading: true
 }, {
   loading: true,
-  compact: true
+  size: 's'
 }, {
   loading: true,
   transparent: true
 }, {
   loading: true,
   transparent: true,
-  compact: true
+  size: 's'
 }, {
   loading: true,
   variant: 'secondary'
 }, {
   loading: true,
   variant: 'secondary',
-  compact: true
+  size: 's'
 }, {
   loading: true,
   variant: 'positive'
 }, {
   loading: true,
   variant: 'positive',
-  compact: true
+  size: 's'
 }, {
   loading: true,
   variant: 'negative'
 }, {
   loading: true,
   variant: 'negative',
-  compact: true
+  size: 's'
 }, {
   startIcon: 'backArrow'
 }, {
@@ -89,12 +87,12 @@ const buttonStories = [{
 }, {
   transparent: true,
   flush: 'start',
-  compact: true,
+  size: 's',
   endIcon: 'forwardArrow'
 }, {
   transparent: true,
   flush: 'end',
-  compact: true,
+  size: 's',
   endIcon: 'forwardArrow'
 }, {
   flush: 'start',
@@ -105,13 +103,13 @@ const buttonStories = [{
 }, {
   startIcon: 'backArrow',
   endIcon: 'forwardArrow',
-  compact: true
+  size: 's'
 }, {
   startIcon: 'backArrow',
-  compact: true
+  size: 's'
 }, {
   endIcon: 'forwardArrow',
-  compact: true
+  size: 's'
 }];
 const ButtonScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
@@ -119,8 +117,8 @@ const ButtonScreen = () => {
       inline: true,
       title: "Complex example",
       children: /*#__PURE__*/_jsx(Button, {
-        compact: true,
         endIcon: "caretDown",
+        size: "s",
         variant: "secondary",
         children: /*#__PURE__*/_jsxs(HStack, {
           alignItems: "center",
@@ -243,20 +241,52 @@ const ButtonScreen = () => {
       }), /*#__PURE__*/_jsxs(HStack, {
         gap: 2,
         children: [/*#__PURE__*/_jsx(Button, {
-          compact: true,
           height: 24,
           paddingY: 0,
           progressCircleSize: 16,
+          size: "s",
           children: "I am a button"
         }), /*#__PURE__*/_jsx(Button, {
-          compact: true,
           loading: true,
           height: 24,
           paddingY: 0,
           progressCircleSize: 16,
+          size: "s",
           children: "I am a button"
         })]
       })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Sizes",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          size: "xs",
+          children: "Extra small (xs)"
+        }), /*#__PURE__*/_jsx(Button, {
+          size: "s",
+          children: "Small (s)"
+        }), /*#__PURE__*/_jsx(Button, {
+          size: "m",
+          children: "Medium (m)"
+        }), /*#__PURE__*/_jsx(Button, {
+          size: "l",
+          children: "Large (l)"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Deprecated compact (use size='s')",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          compact: true,
+          children: "Compact (deprecated)"
+        }), /*#__PURE__*/_jsx(Button, {
+          size: "s",
+          children: "Equivalent size=\"s\""
+        })]
+      })
     })]
   });
 };

package/esm/buttons/__stories__/IconButton.stories.js

@@ -147,6 +147,53 @@ const IconButtonScreen = () => {
           }), variant.title]
         }, index);
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "T-shirt sizes",
+      children: /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: 350,
+        children: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Extra small",
+            name: iconName,
+            size: "xs"
+          }), /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Small",
+            name: iconName,
+            size: "s"
+          }), /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Medium",
+            name: iconName,
+            size: "m"
+          }), /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Large",
+            name: iconName,
+            size: "l"
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Deprecated compact (renders as size \"s\")",
+      children: /*#__PURE__*/_jsxs(Box, {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: 350,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          compact: true,
+          accessibilityLabel: accessibilityLabel,
+          name: iconName
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "compact"
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Icon sizes",
@@ -171,9 +218,9 @@ const IconButtonScreen = () => {
             name: iconName
           }), /*#__PURE__*/_jsx(IconButton, {
             accessibilityLabel: "Large icon",
-            compact: false,
             iconSize: "l",
-            name: iconName
+            name: iconName,
+            size: "l"
           })]
         })
       })
@@ -314,9 +361,9 @@ const IconButtonScreen = () => {
             }), /*#__PURE__*/_jsx(IconButton, {
               loading: true,
               accessibilityLabel: "Loading",
-              compact: false,
               iconSize: "l",
-              name: iconName
+              name: iconName,
+              size: "l"
             })]
           })]
         }), /*#__PURE__*/_jsxs(Box, {
@@ -325,20 +372,20 @@ const IconButtonScreen = () => {
             style: {
               marginBottom: 8
             },
-            children: "Loading compact vs regular"
+            children: "Loading size s vs size l"
           }), /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             gap: 2,
             children: [/*#__PURE__*/_jsx(IconButton, {
-              compact: true,
               loading: true,
               accessibilityLabel: "Loading",
-              name: iconName
+              name: iconName,
+              size: "s"
             }), /*#__PURE__*/_jsx(IconButton, {
               loading: true,
               accessibilityLabel: "Loading",
-              compact: false,
-              name: iconName
+              name: iconName,
+              size: "l"
             })]
           })]
         })]
@@ -395,19 +442,19 @@ const IconButtonScreen = () => {
         onPress: onPress,
         width: 32
       }), /*#__PURE__*/_jsx(IconButton, {
-        compact: true,
         accessibilityLabel: accessibilityLabel,
         height: 24,
         name: iconName,
         onPress: onPress,
+        size: "s",
         width: 24
       }), /*#__PURE__*/_jsx(IconButton, {
-        compact: true,
         loading: true,
         accessibilityLabel: accessibilityLabel,
         height: 24,
         name: iconName,
         onPress: onPress,
+        size: "s",
         width: 24
       })]
     })]

package/esm/buttons/__stories__/SlideButton.stories.js

@@ -32,9 +32,9 @@ const SlideButtonExample = _ref => {
         font: "label1",
         children: "Reset"
       }), /*#__PURE__*/_jsx(IconButton, {
-        compact: true,
         name: "refresh",
-        onPress: toggleOff
+        onPress: toggleOff,
+        size: "s"
       })]
     }), /*#__PURE__*/_jsx(SlideButton, _extends({
       checked: checked,
@@ -104,9 +104,9 @@ export const SlideButtonStories = () => {
         uncheckedLabel: "Super long label that will get truncated when it exceeds the available space"
       })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Compact & long label",
+      title: 'size="s" & long label',
       children: /*#__PURE__*/_jsx(SlideButtonExample, {
-        compact: true,
+        size: "s",
         uncheckedLabel: "Super long label that will get truncated when it exceeds the available space"
       })
     }), /*#__PURE__*/_jsx(Example, {
@@ -167,16 +167,25 @@ export const SlideButtonStories = () => {
         checked: true,
         disabled: true
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Sizes",
+      children: [/*#__PURE__*/_jsx(SlideButtonExample, {
+        size: "s"
+      }), /*#__PURE__*/_jsx(SlideButtonExample, {
+        size: "m"
+      }), /*#__PURE__*/_jsx(SlideButtonExample, {
+        size: "l"
+      })]
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Compact",
+      title: 'size="s" and disabled',
       children: /*#__PURE__*/_jsx(SlideButtonExample, {
-        compact: true
+        disabled: true,
+        size: "s"
       })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Compact and disabled",
+      title: "Deprecated compact (renders as size s)",
       children: /*#__PURE__*/_jsx(SlideButtonExample, {
-        compact: true,
-        disabled: true
+        compact: true
       })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Custom components",

package/esm/cards/CardBody.js

@@ -9,6 +9,9 @@ import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { CardMedia } from './CardMedia';
+
+// Cards are not sizable, so `size` stays off this wrapper's API and density remains a card feature
+// under `compact`, translated onto Button's size scale below.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CardBodyAction = /*#__PURE__*/memo(function CardBodyAction(_ref) {
   let {
@@ -22,9 +25,11 @@ const CardBodyAction = /*#__PURE__*/memo(function CardBodyAction(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(Button, _extends({
     noScaleOnPress: true,
-    compact: compact,
     flush: flush,
-    numberOfLines: numberOfLines,
+    numberOfLines: numberOfLines
+    // `undefined` rather than a hardcoded `l` so Button keeps owning its own default size.
+    ,
+    size: compact ? 's' : undefined,
     transparent: transparent,
     variant: variant
   }, props, {

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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useMemo } from 'react';
@@ -36,6 +37,25 @@ export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
       elevation = 0
     } = _ref,
     cardProps = _objectWithoutPropertiesLoose(_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 = _objectWithoutPropertiesLoose(cta, _excluded2);
+    return /*#__PURE__*/_jsx(Button, _extends({
+      transparent: true,
+      flush: "end",
+      size: size != null ? size : (compact != null ? compact : true) ? 's' : undefined,
+      variant: "secondary"
+    }, ctaProps));
+  }, [cta]);
   const footer = useMemo(() => {
     var _ref2, _ref3;
     const hasFooterActions = Boolean((_ref2 = (_ref3 = like != null ? like : comment) != null ? _ref3 : share) != null ? _ref2 : cta);
@@ -59,16 +79,11 @@ export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
             name: "share",
             testID: testID + "-share"
           }, share))]
-        }), cta && /*#__PURE__*/_jsx(Button, _extends({
-          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, _extends({
     borderRadius: borderRadius,
     elevation: elevation,

package/esm/cards/MessagingCard/MessagingCardLayout.js

@@ -61,9 +61,9 @@ export const MessagingCardLayout = /*#__PURE__*/memo(_ref => {
     if (typeof action === 'string') {
       if (type === 'upsell') {
         return /*#__PURE__*/_jsx(Button, {
-          compact: true,
           accessibilityLabel: actionButtonAccessibilityLabel != null ? actionButtonAccessibilityLabel : action,
           onPress: onActionButtonPress,
+          size: "s",
           variant: "secondary",
           children: action
         });
@@ -101,10 +101,10 @@ export const MessagingCardLayout = /*#__PURE__*/memo(_ref => {
         style: styles == null ? void 0 : styles.dismissButtonContainer,
         top: 0,
         children: /*#__PURE__*/_jsx(IconButton, {
-          compact: true,
           accessibilityLabel: computedDismissButtonAccessibilityLabel,
           name: "close",
           onPress: onDismissButtonPress,
+          size: "s",
           variant: "secondary"
         })
       });

package/esm/cards/NudgeCard.js

@@ -31,7 +31,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   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

@@ -29,7 +29,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"
  * />
@@ -88,10 +88,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,
             onPress: onActionPress,
+            size: "s",
             variant: "secondary",
             children: action
           })

package/esm/carousel/DefaultCarouselNavigation.js

@@ -3,6 +3,8 @@ import { IconButton } from '../buttons/IconButton';
 import { useTheme } from '../hooks/useTheme';
 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';
 export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarouselNavigation(_ref) {
   var _testIDMap$autoplayBu, _testIDMap$previousBu, _testIDMap$nextButton;
   let {
@@ -18,6 +20,7 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     startAutoplayAccessibilityLabel = 'Play Carousel',
     stopAutoplayAccessibilityLabel = 'Pause Carousel',
     variant = 'secondary',
+    iconButtonSize,
     compact,
     previousIcon = 'caretLeft',
     nextIcon = 'caretRight',
@@ -33,32 +36,37 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
   const rootStyles = useMemo(() => [{
     paddingVertical: theme.space[0.5]
   }, style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root, theme.space]);
+
+  // `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 : (compact != null ? compact : true) ? defaultIconButtonSize : 'l';
   return /*#__PURE__*/_jsxs(HStack, {
     gap: 1,
     style: rootStyles,
     children: [autoplay && /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: isAutoplayStopped ? startAutoplayAccessibilityLabel : stopAutoplayAccessibilityLabel,
-      compact: compact,
       name: isAutoplayStopped ? startIcon : stopIcon,
       onPress: onToggleAutoplay,
+      size: resolvedIconButtonSize,
       style: styles == null ? void 0 : styles.autoplayButton,
       testID: (_testIDMap$autoplayBu = testIDMap == null ? void 0 : testIDMap.autoplayButton) != null ? _testIDMap$autoplayBu : 'carousel-autoplay-button',
       variant: variant
     }), /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: previousPageAccessibilityLabel,
-      compact: compact,
       disabled: disableGoPrevious,
       name: previousIcon,
       onPress: onGoPrevious,
+      size: resolvedIconButtonSize,
       style: styles == null ? void 0 : styles.previousButton,
       testID: (_testIDMap$previousBu = testIDMap == null ? void 0 : testIDMap.previousButton) != null ? _testIDMap$previousBu : 'carousel-previous-button',
       variant: variant
     }), /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: nextPageAccessibilityLabel,
-      compact: compact,
       disabled: disableGoNext,
       name: nextIcon,
       onPress: onGoNext,
+      size: resolvedIconButtonSize,
       style: styles == null ? void 0 : styles.nextButton,
       testID: (_testIDMap$nextButton = testIDMap == null ? void 0 : testIDMap.nextButton) != null ? _testIDMap$nextButton : 'carousel-next-button',
       variant: variant

package/esm/chips/Chip.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
+  _excluded2 = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "size", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { Fragment, memo } from 'react';
@@ -11,15 +11,34 @@ 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';
+
 /**
  * This is a basic Chip component used to create all Chip components.
  */
 export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
+  var _mergedProps$size;
   let {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   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 : mergedProps.compact ? 'xs' : defaultChipSize];
   const {
       alignSelf = 'flex-start',
       children,
@@ -28,10 +47,9 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       invertColorScheme,
       inverted,
       maxWidth = chipMaxWidth,
-      compact,
       gap = 1,
-      paddingX = compact ? 1.5 : 2,
-      paddingY = compact ? 0.5 : 1,
+      paddingX = sizeConfig.paddingX,
+      paddingY = sizeConfig.paddingY,
       alignItems = 'center',
       justifyContent,
       padding,
@@ -42,13 +60,13 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       numberOfLines = 1,
       testID,
       contentStyle,
-      borderRadius = 700,
+      borderRadius = sizeConfig.borderRadius,
       background = 'bgSecondary',
       style,
       styles,
       onPress,
       color = 'fg',
-      font = compact ? 'label1' : 'headline'
+      font = sizeConfig.font
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const WrapperComponent = (invertColorScheme != null ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;

package/esm/chips/MediaChip.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["start", "children", "end", "compact", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
+  _excluded2 = ["start", "children", "end", "compact", "size", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
@@ -18,6 +18,7 @@ export const MediaChip = /*#__PURE__*/memo(function MediaChip(_ref) {
       children,
       end,
       compact,
+      size,
       padding,
       paddingX,
       paddingY,
@@ -27,9 +28,11 @@ export const MediaChip = /*#__PURE__*/memo(function MediaChip(_ref) {
       paddingEnd
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+  // Spacing is driven by `size`; deprecated `compact` falls back to its legacy `xs` size.
+  const resolvedSize = size != null ? 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(function MediaChip(_ref) {
       paddingStart: paddingStart != null ? paddingStart : defaults.paddingStart,
       paddingEnd: paddingEnd != null ? 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, _extends({
     ref: ref,
     compact: compact,
     end: end,
+    size: size,
     start: start
   }, spacingProps, props, {
     children: children

package/esm/chips/__stories__/Chip.stories.js

@@ -18,8 +18,9 @@ const ChipExamples = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const ref = useRef(null);
-  const mediaSize = props.compact ? 16 : 24;
-  const textFont = props.compact ? 'label1' : 'headline';
+  const isCompactSize = props.compact || props.size === 'xs';
+  const mediaSize = isCompactSize ? 16 : 24;
+  const textFont = isCompactSize ? 'label1' : 'headline';
   const assetIconProps = {
     height: mediaSize,
     shape: 'circle',
@@ -111,7 +112,12 @@ const ChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
       inverted: true
     })
   }), /*#__PURE__*/_jsx(Example, {
-    title: "Compact",
+    title: "Size xs",
+    children: /*#__PURE__*/_jsx(ChipExamples, {
+      size: "xs"
+    })
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Compact (deprecated)",
     children: /*#__PURE__*/_jsx(ChipExamples, {
       compact: true
     })