@coinbase/cds-mobile 9.9.0 → 9.10.1

package/esm/alpha/select-chip/SelectChipControl.js

@@ -21,6 +21,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     hiddenSelectedOptionsLabel = 'more',
     label,
     compact,
+    size,
     invertColorScheme,
     numberOfLines,
     maxWidth,
@@ -109,6 +110,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onPress: () => setOpen(s => !s),
+    size: size,
     start: startNode,
     children: labelContent
   });

package/esm/alpha/select-chip/__stories__/AlphaSelectChip.stories.js

@@ -68,6 +68,33 @@ export const DefaultMulti = () => {
     value: value
   });
 };
+export const SizeXs = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4'
+  }];
+  const [value, setValue] = useState('1');
+  return /*#__PURE__*/_jsx(SelectChip, {
+    onChange: setValue,
+    options: exampleOptions,
+    placeholder: "Choose an option",
+    size: "xs",
+    value: value
+  });
+};
+
+/**
+ * The `compact` prop is deprecated; it renders as `size="xs"`. Prefer `size="xs"`.
+ */
 export const Compact = () => {
   const exampleOptions = [{
     value: '1',
@@ -548,7 +575,10 @@ const SelectChipScreen = () => {
       title: "Default Multi",
       children: /*#__PURE__*/_jsx(DefaultMulti, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Compact",
+      title: 'size="xs"',
+      children: /*#__PURE__*/_jsx(SizeXs, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Deprecated compact (renders as size xs)",
       children: /*#__PURE__*/_jsx(Compact, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Start End Nodes",

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

@@ -1,6 +1,6 @@
 const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
   _excluded2 = ["ref"],
-  _excluded3 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "styles", "autoScrollOffset"];
+  _excluded3 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "size", "styles", "autoScrollOffset"];
 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, useCallback, useMemo, useState } from 'react';
@@ -58,10 +58,13 @@ const TabbedChipsComponent = /*#__PURE__*/memo(function TabbedChips(_ref2) {
       width,
       gap = 1,
       compact,
+      size,
       styles,
       autoScrollOffset = 30
     } = mergedProps,
     accessibilityProps = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
+  // Size is driven by `size`; deprecated `compact` falls back to its legacy `xs` size.
+  const resolvedSize = size != null ? size : compact ? 'xs' : 's';
   const [scrollTarget, setScrollTarget] = useState(null);
   const {
     scrollRef,
@@ -75,11 +78,11 @@ const TabbedChipsComponent = /*#__PURE__*/memo(function TabbedChips(_ref2) {
     activeTarget: scrollTarget,
     autoScrollOffset
   });
-  const TabComponentWithCompact = useCallback(props => {
+  const TabComponentWithSize = useCallback(props => {
     return /*#__PURE__*/_jsx(TabComponent, _extends({
-      compact: compact
+      size: resolvedSize
     }, props));
-  }, [TabComponent, compact]);
+  }, [TabComponent, resolvedSize]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
     overflow: isScrollContentOverflowing ? undefined : 'visible',
@@ -95,7 +98,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(function TabbedChips(_ref2) {
       scrollEventThrottle: 1,
       showsHorizontalScrollIndicator: false,
       children: /*#__PURE__*/_jsx(Tabs, _extends({
-        TabComponent: TabComponentWithCompact,
+        TabComponent: TabComponentWithSize,
         TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
         activeTab: activeTab || null,
         gap: gap,

package/esm/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories.js

@@ -20,7 +20,8 @@ const enumTabs = [{
 const Demo = _ref => {
   let {
     tabs = defaultTabs,
-    compact = false,
+    compact,
+    size,
     width,
     autoScrollOffset
   } = _ref;
@@ -30,6 +31,7 @@ const Demo = _ref => {
     autoScrollOffset: autoScrollOffset,
     compact: compact,
     onChange: setValue,
+    size: size,
     tabs: tabs,
     width: width
   });
@@ -48,7 +50,7 @@ const assetIconProps = {
   source: assets.eth.imageUrl,
   width: 24
 };
-const compactAssetIconProps = {
+const smallAssetIconProps = {
   height: 16,
   shape: 'circle',
   source: assets.eth.imageUrl,
@@ -57,8 +59,8 @@ const compactAssetIconProps = {
 const tabsWithStart = defaultTabs.map(tab => _extends({}, tab, {
   start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps))
 }));
-const compactTabsWithStart = defaultTabs.map(tab => _extends({}, tab, {
-  start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, compactAssetIconProps))
+const smallTabsWithStart = defaultTabs.map(tab => _extends({}, tab, {
+  start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, smallAssetIconProps))
 }));
 const activeBackgroundTabs = defaultTabs.map(tab => _extends({}, tab, {
   activeBackground: 'bgPositive'
@@ -91,17 +93,26 @@ const TabbedChipsScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "With enum values",
       children: /*#__PURE__*/_jsx(EnumDemo, {})
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Sizes",
+      children: [/*#__PURE__*/_jsx(Demo, {
+        size: "s"
+      }), /*#__PURE__*/_jsx(Demo, {
+        size: "xs"
+      })]
     }), /*#__PURE__*/_jsx(Example, {
-      title: "With start",
+      title: "Deprecated compact (renders as size xs)",
       children: /*#__PURE__*/_jsx(Demo, {
-        tabs: tabsWithStart
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Compact with start",
-      children: /*#__PURE__*/_jsx(Demo, {
-        compact: true,
-        tabs: compactTabsWithStart
+        compact: true
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Sizes with start",
+      children: [/*#__PURE__*/_jsx(Demo, {
+        tabs: tabsWithStart
+      }), /*#__PURE__*/_jsx(Demo, {
+        size: "xs",
+        tabs: smallTabsWithStart
+      })]
     }), /*#__PURE__*/_jsx(Example, {
       title: "With auto scroll offset",
       children: /*#__PURE__*/_jsx(Demo, {

package/esm/buttons/Button.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint", "padding", "paddingStart", "paddingEnd", "paddingTop", "paddingBottom", "paddingX", "paddingY"];
+  _excluded2 = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "size", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint", "padding", "paddingStart", "paddingEnd", "paddingTop", "paddingBottom", "paddingX", "paddingY"];
 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, { isValidElement, memo, useCallback, useMemo } from 'react';
@@ -14,6 +14,41 @@ import { Text } from '../typography/Text';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultProgressCircleSize = 24;
+const buttonSizes = {
+  xs: {
+    paddingX: 2,
+    paddingY: 0.75,
+    borderRadius: 700,
+    iconSize: 's',
+    font: 'label1',
+    feedback: 'light'
+  },
+  s: {
+    paddingX: 2,
+    paddingY: 1,
+    borderRadius: 700,
+    iconSize: 's',
+    font: 'headline',
+    feedback: 'light'
+  },
+  m: {
+    paddingX: 3,
+    paddingY: 1.5,
+    borderRadius: 900,
+    iconSize: 'm',
+    font: 'headline',
+    feedback: 'normal'
+  },
+  l: {
+    paddingX: 4,
+    paddingY: 2,
+    borderRadius: 900,
+    iconSize: 'm',
+    font: 'headline',
+    feedback: 'normal'
+  }
+};
+const defaultButtonSize = 'l';
 export const styles = StyleSheet.create({
   inline: {
     width: 'auto'
@@ -42,6 +77,7 @@ export const Button = /*#__PURE__*/memo(function Button(_ref) {
       transparent,
       block,
       compact,
+      size,
       children,
       start,
       startIcon,
@@ -52,7 +88,7 @@ export const Button = /*#__PURE__*/memo(function Button(_ref) {
       flush,
       noScaleOnPress,
       numberOfLines = 1,
-      font = 'headline',
+      font: fontProp,
       fontFamily,
       fontSize,
       fontWeight,
@@ -61,11 +97,11 @@ export const Button = /*#__PURE__*/memo(function Button(_ref) {
       color,
       style,
       wrapperStyles,
-      feedback = compact ? 'light' : 'normal',
+      feedback: feedbackProp,
       borderColor,
       borderWidth = 0,
       // remove Pressable's default transparent border
-      borderRadius = compact ? 700 : 900,
+      borderRadius: borderRadiusProp,
       accessibilityLabel,
       accessibilityHint,
       padding,
@@ -73,12 +109,21 @@ export const Button = /*#__PURE__*/memo(function Button(_ref) {
       paddingEnd,
       paddingTop,
       paddingBottom,
-      paddingX = compact ? 2 : 4,
-      paddingY = compact ? 1 : 2
+      paddingX: paddingXProp,
+      paddingY: paddingYProp
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
-  const iconSize = compact ? 's' : 'm';
+
+  // `size` wins when both `size` and `compact` are set; compact-only maps to `s`.
+  const resolvedSize = size != null ? size : compact ? 's' : defaultButtonSize;
+  const sizeConfig = buttonSizes[resolvedSize];
+  const font = fontProp != null ? fontProp : sizeConfig.font;
+  const feedback = feedbackProp != null ? feedbackProp : sizeConfig.feedback;
+  const borderRadius = borderRadiusProp != null ? borderRadiusProp : sizeConfig.borderRadius;
+  const paddingX = paddingXProp != null ? paddingXProp : sizeConfig.paddingX;
+  const paddingY = paddingYProp != null ? paddingYProp : sizeConfig.paddingY;
+  const iconSize = sizeConfig.iconSize;
   const hasIcon = Boolean(startIcon || endIcon);
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];

package/esm/buttons/DefaultSlideButtonBackground.js

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
+import { defaultSlideButtonSize, slideButtonSizes } from './SlideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultSlideButtonBackground = /*#__PURE__*/memo(_ref => {
   let {
@@ -9,7 +10,7 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(_ref => {
     progress,
     uncheckedLabel,
     disabled,
-    compact,
+    size = defaultSlideButtonSize,
     style,
     borderRadius,
     borderTopLeftRadius,
@@ -17,7 +18,7 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(_ref => {
     borderBottomLeftRadius,
     borderBottomRightRadius
   } = _ref;
-  const horizontalPadding = compact ? 7 : 9;
+  const horizontalPadding = slideButtonSizes[size].backgroundPadding;
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: disabled ? 0.5 : 1 - progress.value
   }), [progress, disabled]);

package/esm/buttons/DefaultSlideButtonHandle.js

@@ -1,4 +1,4 @@
-const _excluded = ["ref", "checked", "compact", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
+const _excluded = ["ref", "checked", "size", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
 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, useEffect, useMemo } from 'react';
@@ -11,6 +11,7 @@ import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
+import { defaultSlideButtonSize, slideButtonSizes } from './SlideButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const slideButtonSpringConfig = {
   stiffness: 300,
@@ -48,11 +49,11 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
   let {
     label,
     end,
-    compact
+    size = defaultSlideButtonSize
   } = _ref;
   const theme = useTheme();
-  const iconSize = compact ? 's' : 'm';
-  const iconSizeValue = theme.iconSize[iconSize];
+  const sizeConfig = slideButtonSizes[size];
+  const iconSizeValue = theme.iconSize[sizeConfig.iconSize];
   return /*#__PURE__*/_jsxs(Box, {
     alignItems: "center",
     height: "100%",
@@ -66,7 +67,7 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
       alignItems: "center",
       height: "100%",
       justifyContent: "center",
-      padding: compact ? 1.5 : 2,
+      padding: sizeConfig.handlePadding,
       pin: "right",
       children: end != null ? end : /*#__PURE__*/_jsx(ProgressCircle, {
         indeterminate: true,
@@ -80,19 +81,19 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
 export const SlideButtonHandleUnchecked = /*#__PURE__*/memo(_ref2 => {
   let {
     start,
-    compact
+    size = defaultSlideButtonSize
   } = _ref2;
-  const iconSize = compact ? 's' : 'm';
+  const sizeConfig = slideButtonSizes[size];
   return /*#__PURE__*/_jsx(Box, {
     alignItems: "center",
     height: "100%",
     justifyContent: "center",
-    padding: compact ? 1.5 : 2,
+    padding: sizeConfig.handlePadding,
     pin: "right",
     children: start != null ? start : /*#__PURE__*/_jsx(Icon, {
       color: "fgInverse",
       name: "forwardArrow",
-      size: iconSize
+      size: sizeConfig.iconSize
     })
   });
 });
@@ -100,7 +101,7 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(_ref3 => {
   let {
       ref,
       checked,
-      compact,
+      size = defaultSlideButtonSize,
       disabled,
       style,
       variant = 'primary',
@@ -149,17 +150,17 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(_ref3 => {
     children: [/*#__PURE__*/_jsx(Animated.View, {
       style: [styles.absoluteContainer, animatedCheckedStyle],
       children: /*#__PURE__*/_jsx(SlideButtonHandleChecked, {
-        compact: compact,
         disabled: disabled,
         end: endCheckedNode,
         label: checkedLabel,
+        size: size,
         variant: variant
       })
     }), /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.absoluteContainer, animatedUncheckedStyle],
       children: /*#__PURE__*/_jsx(SlideButtonHandleUnchecked, {
-        compact: compact,
         disabled: disabled,
+        size: size,
         start: startUncheckedNode,
         variant: variant
       })

package/esm/buttons/IconButton.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["name", "active", "variant", "alignSelf", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
+  _excluded2 = ["name", "active", "variant", "alignSelf", "transparent", "compact", "size", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
 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 } from 'react';
@@ -10,6 +10,29 @@ import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
+const iconButtonSizes = {
+  xs: {
+    padding: 1,
+    iconSize: 's',
+    feedback: 'light'
+  },
+  s: {
+    padding: 1.5,
+    iconSize: 's',
+    feedback: 'light'
+  },
+  m: {
+    padding: 1.5,
+    iconSize: 'm',
+    feedback: 'normal'
+  },
+  l: {
+    padding: 2,
+    iconSize: 'm',
+    feedback: 'normal'
+  }
+};
+const defaultIconButtonSize = 'l';
 export const IconButton = /*#__PURE__*/memo(_ref => {
   let {
       ref
@@ -24,16 +47,18 @@ export const IconButton = /*#__PURE__*/memo(_ref => {
       // prevents stretching when placed in a flex container
       transparent,
       compact = true,
+      size,
       background,
       color,
       borderColor,
-      iconSize = compact ? 's' : 'm',
+      iconSize: iconSizeProp,
       borderWidth = 0,
       // remove Pressable's default transparent border
       borderRadius = 1000,
-      feedback = compact ? 'light' : 'normal',
+      // fully rounded at every size
+      feedback: feedbackProp,
       flush,
-      padding = compact ? 1.5 : 2,
+      padding: paddingProp,
       loading,
       progressCircleSize,
       styles,
@@ -41,6 +66,15 @@ export const IconButton = /*#__PURE__*/memo(_ref => {
       accessibilityLabel
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+
+  // `size` wins when both `size` and `compact` are set. IconButton defaults `compact`
+  // to `true`, so with no explicit `size` the button resolves to `s`. The resolved size
+  // also drives haptic `feedback` (xs/s -> light, m/l -> normal).
+  const resolvedSize = size != null ? size : compact ? 's' : defaultIconButtonSize;
+  const sizeConfig = iconButtonSizes[resolvedSize];
+  const padding = paddingProp != null ? paddingProp : sizeConfig.padding;
+  const iconSize = iconSizeProp != null ? iconSizeProp : sizeConfig.iconSize;
+  const feedback = feedbackProp != null ? feedbackProp : sizeConfig.feedback;
   const theme = useTheme();
   const iconSizeValue = theme.iconSize[iconSize];
   const variantMap = transparent ? transparentVariants : variants;

package/esm/buttons/SlideButton.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["checked", "compact", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
+  _excluded2 = ["checked", "compact", "size", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
 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, useCallback, useEffect, useId, useMemo } from 'react';
@@ -13,17 +13,45 @@ import { DefaultSlideButtonHandle, slideButtonSpringConfig } from './DefaultSlid
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const slideButtonTestID = 'slide-button';
 export const DEFAULT_COMPACT_HEIGHT = 40;
+export const DEFAULT_MEDIUM_HEIGHT = 48;
 export const DEFAULT_REGULAR_HEIGHT = 56;
+export const slideButtonSizes = {
+  s: {
+    height: DEFAULT_COMPACT_HEIGHT,
+    borderRadius: 700,
+    iconSize: 's',
+    handlePadding: 1.5,
+    backgroundPadding: 7
+  },
+  m: {
+    height: DEFAULT_MEDIUM_HEIGHT,
+    borderRadius: 900,
+    iconSize: 'm',
+    handlePadding: 2,
+    backgroundPadding: 9
+  },
+  l: {
+    height: DEFAULT_REGULAR_HEIGHT,
+    borderRadius: 900,
+    iconSize: 'm',
+    handlePadding: 2,
+    backgroundPadding: 9
+  }
+};
+export const defaultSlideButtonSize = 'l';
 export const SlideButton = /*#__PURE__*/memo(_ref => {
+  var _mergedProps$size;
   let {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('SlideButton', _props);
+  // `size` wins when both are set; compact-only maps to `s`.
+  const resolvedSize = (_mergedProps$size = mergedProps.size) != null ? _mergedProps$size : mergedProps.compact ? 's' : defaultSlideButtonSize;
+  const sizeConfig = slideButtonSizes[resolvedSize];
   const {
       checked,
-      compact,
-      borderRadius = compact ? 700 : 900,
+      borderRadius = sizeConfig.borderRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
       borderBottomLeftRadius,
@@ -36,7 +64,7 @@ export const SlideButton = /*#__PURE__*/memo(_ref => {
       onSlideComplete,
       onChange,
       disabled,
-      height = compact ? DEFAULT_COMPACT_HEIGHT : DEFAULT_REGULAR_HEIGHT,
+      height = sizeConfig.height,
       checkThreshold = 0.7,
       SlideButtonHandleComponent = DefaultSlideButtonHandle,
       SlideButtonBackgroundComponent = DefaultSlideButtonBackground,
@@ -126,9 +154,9 @@ export const SlideButton = /*#__PURE__*/memo(_ref => {
       borderTopLeftRadius: borderTopLeftRadius,
       borderTopRightRadius: borderTopRightRadius,
       checked: checked,
-      compact: compact,
       disabled: disabled,
       progress: progress,
+      size: resolvedSize,
       style: styles == null ? void 0 : styles.background,
       uncheckedLabel: uncheckedLabel,
       variant: variant
@@ -151,11 +179,11 @@ export const SlideButton = /*#__PURE__*/memo(_ref => {
           borderTopRightRadius: borderTopRightRadius,
           checked: checked,
           checkedLabel: checkedLabel,
-          compact: compact,
           disabled: disabled,
           endCheckedNode: endCheckedNode,
           onAccessibilityAction: handleAccessibilityAction,
           progress: progress,
+          size: resolvedSize,
           startUncheckedNode: startUncheckedNode,
           style: styles == null ? void 0 : styles.handle,
           testID: testID + "-handle",