@coinbase/cds-mobile 8.33.0 → 8.34.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.34.0 (12/19/2025 PST)
+
+#### 🚀 Updates
+
+- Feat: support compact SlideButtons. [[#264](https://github.com/coinbase/cds/pull/264)]
+
+## 8.33.1 (12/19/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix RemoteImageGroup zIndex and trailing space issue. [[#170](https://github.com/coinbase/cds/pull/170)]
+
 ## 8.33.0 (12/18/2025 PST)
 
 #### 🚀 Updates

package/dts/buttons/DefaultSlideButtonBackground.d.ts

@@ -12,7 +12,7 @@ export declare const DefaultSlideButtonBackground: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     Pick<
       import('./SlideButton').SlideButtonBaseProps,
-      'borderRadius' | 'disabled' | 'checked' | 'variant' | 'uncheckedLabel'
+      'borderRadius' | 'disabled' | 'checked' | 'variant' | 'compact' | 'uncheckedLabel'
     > & {
       progress: import('@react-spring/core').SpringValue<number>;
       style?: import('react-native').StyleProp<import('react-native').ViewStyle>;

package/dts/buttons/DefaultSlideButtonBackground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSlideButtonBackground.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAQhD,eAAO,MAAM,MAAM;;;;;;;CAOjB,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;+BAqCxC,CAAC"}
+{"version":3,"file":"DefaultSlideButtonBackground.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAQhD,eAAO,MAAM,MAAM;;;;;;;CAOjB,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;+BA2CxC,CAAC"}

package/dts/buttons/DefaultSlideButtonHandle.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { View } from 'react-native';
-import type { ButtonProps } from './Button';
+import type { SlideButtonBaseProps } from './SlideButton';
 export declare const animationConfig: {
   readonly tension: 300;
   readonly clamp: true;
 };
-export type SlideButtonHandleCheckedProps = Pick<ButtonProps, 'variant'> & {
+export type SlideButtonHandleCheckedProps = Pick<SlideButtonBaseProps, 'variant' | 'compact'> & {
   label?: React.ReactNode;
   end?: React.ReactNode;
   disabled?: boolean;
@@ -13,7 +13,7 @@ export type SlideButtonHandleCheckedProps = Pick<ButtonProps, 'variant'> & {
 export type SlideButtonHandleCheckedComponent = (
   props: SlideButtonHandleCheckedProps,
 ) => React.ReactElement | null;
-export type SlideButtonHandleUncheckedProps = Pick<ButtonProps, 'variant'> & {
+export type SlideButtonHandleUncheckedProps = Pick<SlideButtonBaseProps, 'variant' | 'compact'> & {
   disabled?: boolean;
   start?: React.ReactNode;
 };
@@ -38,10 +38,14 @@ export declare const styles: {
   };
 };
 export declare const SlideButtonHandleChecked: React.MemoExoticComponent<
-  ({ label, end }: SlideButtonHandleCheckedProps) => import('react/jsx-runtime').JSX.Element
+  ({
+    label,
+    end,
+    compact,
+  }: SlideButtonHandleCheckedProps) => import('react/jsx-runtime').JSX.Element
 >;
 export declare const SlideButtonHandleUnchecked: React.MemoExoticComponent<
-  ({ start }: SlideButtonHandleUncheckedProps) => import('react/jsx-runtime').JSX.Element
+  ({ start, compact }: SlideButtonHandleUncheckedProps) => import('react/jsx-runtime').JSX.Element
 >;
 export declare const DefaultSlideButtonHandle: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
@@ -58,10 +62,11 @@ export declare const DefaultSlideButtonHandle: React.MemoExoticComponent<
         disableDebounce?: boolean;
       } & import('react-native').PressableProps &
       Pick<
-        import('./SlideButton').SlideButtonBaseProps,
+        SlideButtonBaseProps,
         | 'disabled'
         | 'checked'
         | 'variant'
+        | 'compact'
         | 'checkedLabel'
         | 'startUncheckedNode'
         | 'endCheckedNode'

package/dts/buttons/DefaultSlideButtonHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSlideButtonHandle.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAiBzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,eAAe;;;CAAgE,CAAC;AAE7F,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,CAC9C,KAAK,EAAE,6BAA6B,KACjC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,CAChD,KAAK,EAAE,+BAA+B,KACnC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEH,eAAO,MAAM,wBAAwB,6CAAyB,6BAA6B,6CAWzF,CAAC;AAEH,eAAO,MAAM,0BAA0B,wCAAoB,+BAA+B,6CAMxF,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;+BA4EpC,CAAC"}
+{"version":3,"file":"DefaultSlideButtonHandle.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAiBzC,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,eAAe,CAAC;AAElF,eAAO,MAAM,eAAe;;;CAAgE,CAAC;AAE7F,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAC9F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,CAC9C,KAAK,EAAE,6BAA6B,KACjC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,CAChD,KAAK,EAAE,+BAA+B,KACnC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEH,eAAO,MAAM,wBAAwB,sDACT,6BAA6B,6CAmBxD,CAAC;AAEF,eAAO,MAAM,0BAA0B,iDAChB,+BAA+B,6CAgBrD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;+BA+EpC,CAAC"}

package/dts/buttons/SlideButton.d.ts

@@ -6,7 +6,7 @@ import type { PressableProps } from '../system/Pressable';
 export declare const slideButtonTestID = 'slide-button';
 export type SlideButtonBackgroundProps = Pick<
   SlideButtonBaseProps,
-  'borderRadius' | 'checked' | 'disabled' | 'uncheckedLabel' | 'variant'
+  'borderRadius' | 'checked' | 'compact' | 'disabled' | 'uncheckedLabel' | 'variant'
 > & {
   progress: SpringValue<number>;
   style?: StyleProp<ViewStyle>;
@@ -14,7 +14,13 @@ export type SlideButtonBackgroundProps = Pick<
 export type SlideButtonHandleProps = PressableProps &
   Pick<
     SlideButtonBaseProps,
-    'checked' | 'checkedLabel' | 'disabled' | 'startUncheckedNode' | 'endCheckedNode' | 'variant'
+    | 'checked'
+    | 'checkedLabel'
+    | 'compact'
+    | 'disabled'
+    | 'startUncheckedNode'
+    | 'endCheckedNode'
+    | 'variant'
   > & {
     progress: SpringValue<number>;
     style?: StyleProp<ViewStyle>;
@@ -65,6 +71,10 @@ export type SlideButtonBaseProps = Omit<PressableProps, 'loading'> & {
    * When true, prevents gesture events from firing.
    */
   disabled?: boolean;
+  /**
+   * Reduces the height, borderRadius and inner padding within the button.
+   */
+  compact?: boolean;
   /**
    * Height of the entire button component (background and handle).
    * If you pass a custom SlideButtonBackgroundComponent or SlideButtonHandleComponent,
@@ -172,6 +182,10 @@ export declare const SlideButton: React.MemoExoticComponent<
        * When true, prevents gesture events from firing.
        */
       disabled?: boolean;
+      /**
+       * Reduces the height, borderRadius and inner padding within the button.
+       */
+      compact?: boolean;
       /**
        * Height of the entire button component (background and handle).
        * If you pass a custom SlideButtonBackgroundComponent or SlideButtonHandleComponent,

package/dts/buttons/SlideButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SlideButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SlideButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SlideButton.tsx"],"names":[],"mappings":"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"}

package/dts/media/RemoteImageGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,UAAU,EACV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAqFvB,CAAC;AAQF,eAAO,MAAM,WAAW,0BAgBtB,CAAC"}
+{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,UAAU,EAEV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAqFvB,CAAC;AAQF,eAAO,MAAM,WAAW,0BAgBtB,CAAC"}

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

@@ -1,10 +1,10 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useMultiSelect } from '@coinbase/cds-common/select/useMultiSelect';
 import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
 import { HStack } from '../../../layout/HStack';
 import { VStack } from '../../../layout/VStack';
-import { RemoteImage } from '../../../media';
+import { RemoteImage, RemoteImageGroup } from '../../../media';
 import { Text } from '../../../typography/Text';
 import { SelectChip } from '../SelectChip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -138,49 +138,58 @@ const assetImageMap = {
   ltc: assets.ltc.imageUrl,
   xrp: assets.xrp.imageUrl
 };
+export const MultiSelectWithAssets = () => {
+  const exampleOptions = [{
+    value: 'btc',
+    label: assets.btc.name
+  }, {
+    value: 'eth',
+    label: assets.eth.name
+  }, {
+    value: 'dai',
+    label: assets.dai.name
+  }, {
+    value: 'ltc',
+    label: assets.ltc.name
+  }, {
+    value: 'xrp',
+    label: assets.xrp.name
+  }];
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['eth', 'btc']
+  });
 
-// TODO: Add multi-select with assets story when RemoteImageGroup is fixed
-// export const MultiSelectWithAssets = () => {
-//   const exampleOptions = [
-//     { value: 'btc', label: assets.btc.name },
-//     { value: 'eth', label: assets.eth.name },
-//     { value: 'dai', label: assets.dai.name },
-//     { value: 'ltc', label: assets.ltc.name },
-//     { value: 'xrp', label: assets.xrp.name },
-//   ];
-//   const { value, onChange } = useMultiSelect({
-//     initialValue: ['eth', 'btc'],
-//   });
-
-//   // Get startNode based on selected assets
-//   const startNode = useMemo(() => {
-//     if (value.length === 0) return null;
-
-//     // Multiple assets selected - use RemoteImageGroup
-//     return (
-//       <RemoteImageGroup shape="circle" size={24}>
-//         {value.map((assetValue) => {
-//           const imageUrl = assetImageMap[assetValue];
-//           if (!imageUrl) return null;
-//           return <RemoteImage key={assetValue} source={imageUrl} />;
-//         })}
-//       </RemoteImageGroup>
-//     );
-//   }, [value]);
-
-//   return (
-//     <SelectChip
-//       accessibilityLabel="Select multiple assets"
-//       onChange={onChange}
-//       options={exampleOptions}
-//       placeholder="Choose assets"
-//       startNode={startNode}
-//       type="multi"
-//       value={value}
-//     />
-//   );
-// };
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
 
+    // Multiple assets selected - use RemoteImageGroup
+    return /*#__PURE__*/_jsx(RemoteImageGroup, {
+      shape: "circle",
+      size: 24,
+      children: value.map(assetValue => {
+        const imageUrl = assetImageMap[assetValue];
+        if (!imageUrl) return null;
+        return /*#__PURE__*/_jsx(RemoteImage, {
+          source: imageUrl
+        }, assetValue);
+      })
+    });
+  }, [value]);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select multiple assets",
+    maxWidth: 400,
+    onChange: onChange,
+    options: exampleOptions,
+    placeholder: "Choose assets",
+    startNode: startNode,
+    type: "multi",
+    value: value
+  });
+};
 export const InvertColorScheme = () => {
   const exampleOptions = [{
     value: '1',
@@ -544,6 +553,9 @@ const SelectChipScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Start End Nodes",
       children: /*#__PURE__*/_jsx(WithStartEndNodes, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi-Select with Assets",
+      children: /*#__PURE__*/_jsx(MultiSelectWithAssets, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Invert Color Scheme",
       children: /*#__PURE__*/_jsx(InvertColorScheme, {})

package/esm/buttons/DefaultSlideButtonBackground.js

@@ -17,10 +17,12 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwa
     progress,
     uncheckedLabel,
     disabled,
+    compact,
     style,
-    borderRadius = 900
+    borderRadius
   } = _ref;
   const theme = useTheme();
+  const horizontalPadding = compact ? 7 : 9;
   const containerStyle = useMemo(() => [styles.base, {
     backgroundColor: theme.color.bgSecondary,
     borderRadius
@@ -36,8 +38,8 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwa
       style: animatedStyle,
       children: typeof uncheckedLabel !== 'string' ? uncheckedLabel : /*#__PURE__*/_jsx(TextHeadline, {
         numberOfLines: 1,
-        paddingEnd: 9,
-        paddingStart: 9,
+        paddingEnd: horizontalPadding,
+        paddingStart: horizontalPadding,
         children: uncheckedLabel
       })
     })

package/esm/buttons/DefaultSlideButtonHandle.js

@@ -1,4 +1,4 @@
-const _excluded = ["checked", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius"];
+const _excluded = ["checked", "compact", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius"];
 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, { forwardRef, memo, useMemo } from 'react';
@@ -36,9 +36,11 @@ export const styles = StyleSheet.create({
 export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
   let {
     label,
-    end
+    end,
+    compact
   } = _ref;
   const theme = useTheme();
+  const handleWidth = compact ? 40 : 56;
   return /*#__PURE__*/_jsxs(Box, {
     alignItems: "center",
     height: "100%",
@@ -49,9 +51,10 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
       children: label
     }), /*#__PURE__*/_jsx(Box, {
       alignItems: "center",
+      height: "100%",
       justifyContent: "center",
-      padding: 2,
       pin: "right",
+      width: handleWidth,
       children: end != null ? end : /*#__PURE__*/_jsx(Spinner, {
         color: theme.color.fgInverse,
         size: "small"
@@ -61,30 +64,35 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
 });
 export const SlideButtonHandleUnchecked = /*#__PURE__*/memo(_ref2 => {
   let {
-    start
+    start,
+    compact
   } = _ref2;
+  const iconSize = compact ? 's' : 'm';
+  const handleWidth = compact ? 40 : 56;
   return /*#__PURE__*/_jsx(Box, {
     alignItems: "center",
+    height: "100%",
     justifyContent: "center",
-    padding: 2,
     pin: "right",
+    width: handleWidth,
     children: start != null ? start : /*#__PURE__*/_jsx(Icon, {
       color: "fgInverse",
       name: "forwardArrow",
-      size: "m"
+      size: iconSize
     })
   });
 });
 export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
       checked,
+      compact,
       disabled,
       style,
       variant = 'primary',
       startUncheckedNode,
       endCheckedNode,
       checkedLabel,
-      borderRadius = 900
+      borderRadius
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded);
   const backgroundColor = variants[variant].background;
@@ -121,6 +129,7 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
     children: [/*#__PURE__*/_jsx(animated.View, {
       style: animatedCheckedStyle,
       children: /*#__PURE__*/_jsx(SlideButtonHandleChecked, {
+        compact: compact,
         disabled: disabled,
         end: endCheckedNode,
         label: checkedLabel,
@@ -129,6 +138,7 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
     }), /*#__PURE__*/_jsx(animated.View, {
       style: animatedUncheckedStyle,
       children: /*#__PURE__*/_jsx(SlideButtonHandleUnchecked, {
+        compact: compact,
         disabled: disabled,
         start: startUncheckedNode,
         variant: variant

package/esm/buttons/SlideButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["borderRadius", "checked", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
+const _excluded = ["checked", "compact", "borderRadius", "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, { forwardRef, memo, useCallback, useId, useMemo } from 'react';
@@ -13,8 +13,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const slideButtonTestID = 'slide-button';
 export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      borderRadius,
       checked,
+      compact,
+      borderRadius = compact ? 700 : 900,
       uncheckedLabel,
       checkedLabel,
       onSlideStart,
@@ -43,7 +44,7 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     progress: checked ? 1 : 0,
     config: animationConfig
   });
-  const buttonMinHeight = interactableHeight.regular;
+  const buttonMinHeight = interactableHeight[compact ? 'compact' : 'regular'];
   const buttonMinWidth = buttonMinHeight;
   const handleComplete = useCallback(() => {
     void progress.start(1);
@@ -110,6 +111,7 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     children: [/*#__PURE__*/_jsx(SlideButtonBackgroundComponent, {
       borderRadius: borderRadius,
       checked: checked,
+      compact: compact,
       disabled: disabled,
       progress: progress,
       style: styles == null ? void 0 : styles.background,
@@ -130,6 +132,7 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
           borderRadius: borderRadius,
           checked: checked,
           checkedLabel: checkedLabel,
+          compact: compact,
           disabled: disabled,
           endCheckedNode: endCheckedNode,
           onAccessibilityAction: handleAccessibilityAction,

package/esm/buttons/__figma__/SlideButton.figma.js

@@ -12,7 +12,8 @@ figma.connect(SlideButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/
       Start: false,
       Middle: false,
       End: true
-    })
+    }),
+    compact: figma.boolean('compact')
   },
   example: _ref => {
     let {

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

@@ -103,6 +103,12 @@ export const SlideButtonStories = () => {
       children: /*#__PURE__*/_jsx(SlideButtonExample, {
         uncheckedLabel: "Super long label that will get truncated when it exceeds the available space"
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact & long label",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        compact: true,
+        uncheckedLabel: "Super long label that will get truncated when it exceeds the available space"
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Auto complete slide on threshold met",
       children: /*#__PURE__*/_jsx(SlideButtonExample, {
@@ -161,6 +167,17 @@ export const SlideButtonStories = () => {
         checked: true,
         disabled: true
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        compact: true
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact and disabled",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        compact: true,
+        disabled: true
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Custom components",
       children: /*#__PURE__*/_jsx(SlideButtonExample, {

package/esm/media/RemoteImageGroup.js

@@ -23,7 +23,7 @@ export const RemoteImageGroup = _ref => {
   } = useTheme();
   const shapeStyle = shapeStyles[shape];
   const sizeAsNumber = typeof size === 'number' ? size : avatarSize[size];
-  const overlapSpacing = sizeAsNumber <= 40 ? 8 : 16;
+  const overlapSpacing = sizeAsNumber <= 40 ? -1 : -2;
   const excess = Children.count(children) - max;
   const groupChildren = useMemo(() => {
     const arrayChildren = Children.toArray(children);
@@ -63,7 +63,7 @@ export const RemoteImageGroup = _ref => {
       // zIndex is progressively lower so that each child is stacked below the previous one
       const zIndex = -index;
       return /*#__PURE__*/_jsx(Box, {
-        left: index === 0 ? 'initial' : overlapSpacing * zIndex,
+        marginStart: index === 0 ? undefined : overlapSpacing,
         position: "relative",
         testID: (testID ? testID + "-" : '') + "inner-box-" + index,
         zIndex: zIndex,
@@ -74,7 +74,7 @@ export const RemoteImageGroup = _ref => {
       background: "bgOverlay",
       height: sizeAsNumber,
       justifyContent: "center",
-      left: groupChildren.length * overlapSpacing * -1,
+      marginStart: overlapSpacing,
       position: "relative",
       style: shapeStyle,
       width: sizeAsNumber,

package/esm/media/__stories__/RemoteImageGroup.stories.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { assets, squareAssets } from '@coinbase/cds-common/internal/data/assets';
 import { avatarSizes } from '@coinbase/cds-common/internal/data/avatars';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.33.0",
+  "version": "8.34.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.33.0",
+    "@coinbase/cds-common": "^8.34.0",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",