@coinbase/cds-mobile 8.28.2 → 8.30.0

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "startNode", "endNode", "compact", "maxSelectedOptionsToShow", "accessibilityLabel", "accessibilityHint", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles"];
+const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "maxSelectedOptionsToShow", "accessibilityLabel", "accessibilityHint", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles"];
 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 { forwardRef, memo, useMemo } from 'react';
@@ -43,6 +43,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       helperText,
       label,
       labelVariant,
+      contentNode,
       startNode,
       endNode: customEndNode,
       compact,
@@ -111,15 +112,13 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     onPress: () => setOpen(s => !s),
     style: styles == null ? void 0 : styles.controlLabelNode,
     children: /*#__PURE__*/_jsx(InputLabel, {
-      alignSelf: labelVariant === 'inside' ? 'flex-start' : undefined,
       color: "fg",
-      ellipsizeMode: "tail",
-      numberOfLines: 2,
-      paddingX: labelVariant === 'inside' ? 2 : 0,
-      paddingY: shouldShowCompactLabel || labelVariant === 'inside' ? 0 : 0.5,
+      paddingEnd: 0,
+      paddingStart: labelVariant === 'inside' ? 2 : 0,
+      paddingY: labelVariant === 'inside' || compact ? 0 : 0.5,
       children: label
     })
-  }) : label, [disabled, label, labelVariant, setOpen, shouldShowCompactLabel, styles == null ? void 0 : styles.controlLabelNode]);
+  }) : label, [compact, disabled, label, labelVariant, setOpen, styles == null ? void 0 : styles.controlLabelNode]);
   const valueNode = useMemo(() => {
     var _ref5, _ref6, _option$label2;
     if (hasValue && isMultiSelect) {
@@ -135,7 +134,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
             compact: true,
             accessibilityLabel: removeSelectedOptionAccessibilityLabel + " " + accessibilityLabel,
             borderWidth: 0,
-            disabled: option.disabled,
+            disabled: disabled || option.disabled,
             invertColorScheme: false,
             maxWidth: 200,
             onPress: event => {
@@ -160,10 +159,10 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       color: hasValue ? 'fg' : 'fgMuted',
       ellipsize: "tail",
       font: "body",
-      textAlign: shouldShowCompactLabel ? 'right' : 'left',
+      textAlign: "left",
       children: content
     }) : content;
-  }, [hasValue, isMultiSelect, optionsMap, placeholder, shouldShowCompactLabel, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, onChange]);
+  }, [hasValue, isMultiSelect, optionsMap, placeholder, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, disabled, onChange]);
   const inputNode = useMemo(() => /*#__PURE__*/_jsx(TouchableOpacity, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,
@@ -180,7 +179,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       justifyContent: "space-between",
       minHeight: labelVariant === 'inside' ? LABEL_VARIANT_INSIDE_HEIGHT : compact ? COMPACT_HEIGHT : DEFAULT_HEIGHT,
       paddingStart: startNode ? 0 : 2,
-      paddingY: labelVariant === 'inside' ? 0 : compact ? 0.5 : 1.5,
+      paddingY: labelVariant === 'inside' ? 0 : compact ? 1 : 1.5,
       children: /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",
         flexGrow: 1,
@@ -191,30 +190,33 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
           children: startNode
         }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
           alignItems: "center",
+          maxWidth: "40%",
           paddingEnd: 1,
-          width: "40%",
           children: labelNode
-        }) : null, /*#__PURE__*/_jsx(VStack, {
+        }) : null, /*#__PURE__*/_jsxs(VStack, {
           justifyContent: "center",
-          maxWidth: shouldShowCompactLabel ? '45%' : startNode ? '70%' : '85%',
+          maxWidth: startNode ? '70%' : '85%',
           style: styles == null ? void 0 : styles.controlValueNode,
-          children: valueNode
+          children: [valueNode, contentNode]
         })]
       })
     })
-  })), [ref, accessibilityHint, accessibilityLabel, disabled, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, startNode, labelVariant, compact, shouldShowCompactLabel, labelNode, valueNode, setOpen]);
-  const endNode = useMemo(() => /*#__PURE__*/_jsx(HStack, {
-    alignItems: "center",
-    paddingX: 2,
-    style: styles == null ? void 0 : styles.controlEndNode,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      onPress: () => setOpen(s => !s),
+  })), [ref, accessibilityHint, accessibilityLabel, disabled, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, labelVariant, compact, startNode, shouldShowCompactLabel, labelNode, valueNode, contentNode, setOpen]);
+  const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
+    disabled: disabled,
+    onPress: () => setOpen(s => !s),
+    children: /*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      flexGrow: 1,
+      paddingX: 2,
+      paddingY: compact ? 1 : 1.5,
+      style: styles == null ? void 0 : styles.controlEndNode,
       children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
         color: !open ? 'fg' : variant ? variantColor[variant] : 'fgPrimary',
         rotate: open ? 0 : 180
       })
     })
-  }), [open, variant, setOpen, customEndNode, styles == null ? void 0 : styles.controlEndNode]);
+  }), [compact, styles == null ? void 0 : styles.controlEndNode, disabled, customEndNode, open, variant, setOpen]);
   return /*#__PURE__*/_jsx(InputStack, _extends({
     borderFocusedStyle: borderFocusedStyle,
     borderStyle: borderUnfocusedStyle,

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityRoles"],
+const _excluded = ["type", "options", "value", "onChange", "onVisibilityChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "header", "footer", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityRoles"],
   _excluded2 = ["Component", "media", "accessory", "end", "disabled"];
 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; }
@@ -21,12 +21,15 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       options,
       value,
       onChange,
+      onVisibilityChange,
       open,
       setOpen,
       disabled,
       style,
       styles,
       compact,
+      header,
+      footer,
       label,
       end,
       selectAllLabel = 'Select all',
@@ -132,6 +135,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
     indeterminate: indeterminate,
     label: selectAllLabel + " (" + flatOptionsForSelectAll.filter(o => o.value !== null).length + ")",
     media: media != null ? media : /*#__PURE__*/_jsx(Checkbox, {
+      accessible: false,
       checked: isAllOptionsSelected,
       indeterminate: indeterminate,
       onPress: toggleSelectAll,
@@ -148,87 +152,88 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
   return /*#__PURE__*/_jsx(Tray, {
     ref: ref,
     disableCapturePanGestureToDismiss: true,
+    footer: footer,
+    header: header,
     onCloseComplete: () => setOpen(false),
     onDismiss: () => setOpen(false),
+    onVisibilityChange: onVisibilityChange,
     style: dropdownStyles,
     title: label,
     verticalDrawerPercentageOfView: 0.9,
-    children: /*#__PURE__*/_jsx(VStack, {
-      children: /*#__PURE__*/_jsx(ScrollView, {
-        showsVerticalScrollIndicator: true,
-        children: /*#__PURE__*/_jsxs(VStack, {
-          children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(optionOrGroup => {
-            var _optionProps$value, _optionProps$value2, _ref3;
-            // Check if it's a group (has 'options' property and 'label')
-            if (isSelectOptionGroup(optionOrGroup)) {
-              var _group$disabled;
-              const group = optionOrGroup;
-              return /*#__PURE__*/_jsx(SelectOptionGroupComponent, {
-                SelectOptionComponent: SelectOptionComponent,
-                accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
-                accessory: accessory,
-                compact: compact,
-                disabled: (_group$disabled = group.disabled) != null ? _group$disabled : disabled,
-                end: end,
-                label: group.label,
-                media: media,
-                onChange: onChange,
-                options: group.options,
-                setOpen: setOpen,
-                styles: optionGroupStyles,
-                type: type,
-                value: value
-              }, "group-" + group.label);
-            }
-            const option = optionOrGroup;
-            const {
-                Component: optionComponent,
-                media: optionMedia,
-                accessory: optionAccessory,
-                end: optionEnd,
-                disabled: optionDisabled
-              } = option,
-              optionProps = _objectWithoutPropertiesLoose(option, _excluded2);
-            const RenderedComponent = optionComponent != null ? optionComponent : SelectOptionComponent;
-            const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
-            /** onPress handlers are passed so that when the media is pressed,
-             * the onChange handler is called. Since the <RenderedSelectOption>
-             * has an accessibilityRole, the inner media won't be detected by a screen reader
-             * so this behavior matches web
-             * */
-            const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
-              "aria-hidden": true,
-              checked: selected,
-              onChange: () => handleOptionPress(optionProps.value),
-              tabIndex: -1,
-              value: (_optionProps$value = optionProps.value) == null ? void 0 : _optionProps$value.toString()
-            }) : /*#__PURE__*/_jsx(Radio, {
-              "aria-hidden": true,
-              checked: selected,
-              onChange: () => handleOptionPress(optionProps.value),
-              tabIndex: -1,
-              value: (_optionProps$value2 = optionProps.value) == null ? void 0 : _optionProps$value2.toString()
-            });
-            return /*#__PURE__*/_jsx(RenderedComponent, _extends({
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      showsVerticalScrollIndicator: true,
+      children: /*#__PURE__*/_jsxs(VStack, _extends({}, props, {
+        children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(optionOrGroup => {
+          var _optionProps$value, _optionProps$value2, _ref3;
+          // Check if it's a group (has 'options' property and 'label')
+          if (isSelectOptionGroup(optionOrGroup)) {
+            var _group$disabled;
+            const group = optionOrGroup;
+            return /*#__PURE__*/_jsx(SelectOptionGroupComponent, {
+              SelectOptionComponent: SelectOptionComponent,
               accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
-              accessory: optionAccessory != null ? optionAccessory : accessory,
-              blendStyles: styles == null ? void 0 : styles.optionBlendStyles,
+              accessory: accessory,
               compact: compact,
-              disabled: optionDisabled || disabled,
-              end: optionEnd != null ? optionEnd : end,
-              media: (_ref3 = optionMedia != null ? optionMedia : media) != null ? _ref3 : defaultMedia,
-              onPress: handleOptionPress,
-              selected: selected,
-              style: styles == null ? void 0 : styles.option,
-              styles: optionStyles,
-              type: type
-            }, optionProps), optionProps.value);
-          }) : /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
-            label: emptyOptionsLabel,
-            styles: emptyDropdownContentsStyles
-          })]
-        })
-      })
+              disabled: (_group$disabled = group.disabled) != null ? _group$disabled : disabled,
+              end: end,
+              label: group.label,
+              media: media,
+              onChange: onChange,
+              options: group.options,
+              setOpen: setOpen,
+              styles: optionGroupStyles,
+              type: type,
+              value: value
+            }, "group-" + group.label);
+          }
+          const option = optionOrGroup;
+          const {
+              Component: optionComponent,
+              media: optionMedia,
+              accessory: optionAccessory,
+              end: optionEnd,
+              disabled: optionDisabled
+            } = option,
+            optionProps = _objectWithoutPropertiesLoose(option, _excluded2);
+          const RenderedComponent = optionComponent != null ? optionComponent : SelectOptionComponent;
+          const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
+          /** onPress handlers are passed so that when the media is pressed,
+           * the onChange handler is called. Since the <RenderedSelectOption>
+           * has an accessibilityRole, the inner media won't be detected by a screen reader
+           * so this behavior matches web
+           * */
+          const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
+            "aria-hidden": true,
+            checked: selected,
+            onChange: () => handleOptionPress(optionProps.value),
+            tabIndex: -1,
+            value: (_optionProps$value = optionProps.value) == null ? void 0 : _optionProps$value.toString()
+          }) : /*#__PURE__*/_jsx(Radio, {
+            "aria-hidden": true,
+            checked: selected,
+            onChange: () => handleOptionPress(optionProps.value),
+            tabIndex: -1,
+            value: (_optionProps$value2 = optionProps.value) == null ? void 0 : _optionProps$value2.toString()
+          });
+          return /*#__PURE__*/_jsx(RenderedComponent, _extends({
+            accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
+            accessory: optionAccessory != null ? optionAccessory : accessory,
+            blendStyles: styles == null ? void 0 : styles.optionBlendStyles,
+            compact: compact,
+            disabled: optionDisabled || disabled,
+            end: optionEnd != null ? optionEnd : end,
+            media: (_ref3 = optionMedia != null ? optionMedia : media) != null ? _ref3 : defaultMedia,
+            onPress: handleOptionPress,
+            selected: selected,
+            style: styles == null ? void 0 : styles.option,
+            styles: optionStyles,
+            type: type
+          }, optionProps), optionProps.value);
+        }) : /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
+          label: emptyOptionsLabel,
+          styles: emptyDropdownContentsStyles
+        })]
+      }))
     })
   });
 }));

package/esm/alpha/select/__stories__/AlphaSelect.stories.js

@@ -324,10 +324,10 @@ const CompactExample = () => {
     value: value
   });
 };
-const LabelVariantExample = () => {
+const InsideLabelVariantExample = () => {
   const [value, setValue] = useState('1');
   return /*#__PURE__*/_jsx(Select, {
-    label: "Single select - label variant inside",
+    label: "Inside label variant",
     labelVariant: "inside",
     onChange: setValue,
     options: exampleOptions,
@@ -720,6 +720,23 @@ const MultiSelectCompactExample = () => {
     value: value
   });
 };
+const MultiSelectInsideLabelVariantExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['1']
+  });
+  return /*#__PURE__*/_jsx(Select, {
+    label: "Multi select - inside label variant",
+    labelVariant: "inside",
+    onChange: onChange,
+    options: exampleOptions,
+    placeholder: "Empty value",
+    type: "multi",
+    value: value
+  });
+};
 const MultiSelectHideSelectAllExample = () => {
   const {
     value,
@@ -1186,8 +1203,8 @@ const SelectV3Screen = () => {
       title: "Compact",
       children: /*#__PURE__*/_jsx(CompactExample, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Label Variant - inside",
-      children: /*#__PURE__*/_jsx(LabelVariantExample, {})
+      title: "Compact with inside label variant",
+      children: /*#__PURE__*/_jsx(InsideLabelVariantExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Helper Text",
       children: /*#__PURE__*/_jsx(WithHelperTextExample, {})
@@ -1269,6 +1286,9 @@ const SelectV3Screen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Multi Select Compact",
       children: /*#__PURE__*/_jsx(MultiSelectCompactExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi Select Inside Label Variant",
+      children: /*#__PURE__*/_jsx(MultiSelectInsideLabelVariantExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Multi Select Hide Select All",
       children: /*#__PURE__*/_jsx(MultiSelectHideSelectAllExample, {})

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

@@ -1,27 +1,30 @@
-const _excluded = ["invertColorScheme", "numberOfLines"];
+const _excluded = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue"];
 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 } from 'react';
 import { Select } from '../select/Select';
 import { SelectChipControl } from './SelectChipControl';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Chip-styled Select control built on top of the Alpha Select.
  * Supports both single and multi selection via Select's `type` prop.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       invertColorScheme,
-      numberOfLines
+      numberOfLines,
+      maxWidth,
+      displayValue
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const SelectChipControlComponent = useCallback(props => {
     return /*#__PURE__*/_jsx(SelectChipControl, _extends({
+      displayValue: displayValue,
       invertColorScheme: invertColorScheme,
+      maxWidth: maxWidth,
       numberOfLines: numberOfLines
     }, props));
-  }, [invertColorScheme, numberOfLines]);
+  }, [displayValue, invertColorScheme, maxWidth, numberOfLines]);
   return /*#__PURE__*/_jsx(Select, _extends({
     ref: ref,
     SelectControlComponent: SelectChipControlComponent

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

@@ -21,7 +21,9 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     label,
     compact,
     invertColorScheme,
-    numberOfLines
+    numberOfLines,
+    maxWidth,
+    displayValue
   } = _ref;
   const isMultiSelect = type === 'multi';
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
@@ -64,6 +66,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
   const labelContent = useMemo(() => {
     var _ref3, _ref6, _ref7, _ref8, _opt$label2;
     if (!hasValue) return (_ref3 = label != null ? label : placeholder) != null ? _ref3 : null;
+    if (displayValue) return displayValue;
     if (isMultiSelect) {
       const values = value;
       const visible = values.slice(0, maxSelectedOptionsToShow);
@@ -77,7 +80,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     }
     const opt = optionsMap.get(value);
     return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt == null ? void 0 : opt.label) != null ? _opt$label2 : opt == null ? void 0 : opt.description) != null ? _ref8 : opt == null ? void 0 : opt.value) != null ? _ref7 : placeholder) != null ? _ref6 : null;
-  }, [hasValue, label, placeholder, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  }, [hasValue, label, placeholder, displayValue, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
   const endNode = useMemo(() => {
     return customEndNode != null ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
       active: true,
@@ -102,6 +105,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     disabled: disabled,
     end: endNode,
     invertColorScheme: invertColorScheme,
+    maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onPress: () => setOpen(s => !s),
     start: startNode,

package/esm/alpha/select-chip/__stories__/{SelectChip.stories.js → AlphaSelectChip.stories.js}

@@ -491,6 +491,45 @@ export const WithDescriptions = () => {
     })]
   });
 };
+export const WithDisplayValue = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4'
+  }, {
+    value: '5',
+    label: 'Option 5'
+  }];
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const displayValue = Array.isArray(value) && value.length > 0 ? value.length + " " + (value.length === 1 ? 'option' : 'options') + " selected" : undefined;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: "Select with custom displayed value:"
+    }), /*#__PURE__*/_jsx(SelectChip, {
+      accessibilityLabel: "Select multiple values",
+      displayValue: displayValue,
+      onChange: onChange,
+      options: exampleOptions,
+      placeholder: "Choose options",
+      type: "multi",
+      value: value
+    })]
+  });
+};
 const SelectChipScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -532,6 +571,9 @@ const SelectChipScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Descriptions",
       children: /*#__PURE__*/_jsx(WithDescriptions, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Display Value",
+      children: /*#__PURE__*/_jsx(WithDisplayValue, {})
     })]
   });
 };

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

@@ -1,5 +1,5 @@
 const _excluded = ["label", "id"],
-  _excluded2 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "styles"];
+  _excluded2 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "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, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
@@ -45,19 +45,22 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       width,
       gap = 1,
       compact,
-      styles
+      styles,
+      autoScrollOffset = 30
     } = _ref2,
     accessibilityProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const [scrollTarget, setScrollTarget] = useState(null);
   const {
     scrollRef,
     isScrollContentOverflowing,
+    isScrollContentOffscreenLeft,
     isScrollContentOffscreenRight,
     handleScroll,
     handleScrollContainerLayout,
     handleScrollContentSizeChange
   } = useHorizontalScrollToTarget({
-    activeTarget: scrollTarget
+    activeTarget: scrollTarget,
+    autoScrollOffset
   });
   const TabComponentWithCompact = useCallback(props => {
     return /*#__PURE__*/_jsx(TabComponent, _extends({
@@ -66,7 +69,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
   }, [TabComponent, compact]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
-    overflow: isScrollContentOverflowing && isScrollContentOffscreenRight ? undefined : 'visible',
+    overflow: isScrollContentOverflowing ? undefined : 'visible',
     style: styles == null ? void 0 : styles.root,
     testID: testID,
     width: width,
@@ -88,7 +91,11 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
         style: styles == null ? void 0 : styles.tabs,
         tabs: tabs
       }, accessibilityProps))
-    }), isScrollContentOverflowing && isScrollContentOffscreenRight ? /*#__PURE__*/_jsx(OverflowGradient, {}) : null]
+    }), isScrollContentOverflowing && isScrollContentOffscreenLeft && /*#__PURE__*/_jsx(OverflowGradient, {
+      pin: "left"
+    }), isScrollContentOverflowing && isScrollContentOffscreenRight && /*#__PURE__*/_jsx(OverflowGradient, {
+      pin: "right"
+    })]
   });
 }));
 TabbedChipsComponent.displayName = 'TabbedChips';

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

@@ -21,11 +21,13 @@ const Demo = _ref => {
   let {
     tabs = defaultTabs,
     compact = false,
-    width
+    width,
+    autoScrollOffset
   } = _ref;
   const [value, setValue] = useState(tabs[0]);
   return /*#__PURE__*/_jsx(TabbedChips, {
     activeTab: value,
+    autoScrollOffset: autoScrollOffset,
     compact: compact,
     onChange: setValue,
     tabs: tabs,
@@ -94,6 +96,12 @@ const TabbedChipsScreen = () => {
         compact: true,
         tabs: compactTabsWithStart
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With auto scroll offset",
+      children: /*#__PURE__*/_jsx(Demo, {
+        autoScrollOffset: 100,
+        tabs: sampleTabs
+      })
     })]
   });
 };

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

@@ -9,7 +9,7 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
 import { HStack, VStack } from '../../layout';
 import { Pressable } from '../../system';
-import { TextHeadline, TextLabel1, TextLabel2 } from '../../typography';
+import { Text } from '../../typography';
 import { SlideButton } from '../SlideButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SlideButtonExample = _ref => {
@@ -28,7 +28,8 @@ const SlideButtonExample = _ref => {
       gap: 1,
       justifyContent: "flex-end",
       paddingBottom: 2,
-      children: [/*#__PURE__*/_jsx(TextLabel1, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
         children: "Reset"
       }), /*#__PURE__*/_jsx(IconButton, {
         compact: true,
@@ -64,7 +65,8 @@ const CustomHandle = _ref2 => {
         height: "100%",
         padding: 2,
         pin: "right",
-        children: /*#__PURE__*/_jsx(TextLabel1, {
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "label1",
           children: "\u27A1\uFE0F"
         })
       })
@@ -85,7 +87,8 @@ const CustomBackground = _ref3 => {
     height: "100%",
     justifyContent: "center",
     width: "100%",
-    children: /*#__PURE__*/_jsx(TextHeadline, {
+    children: /*#__PURE__*/_jsx(Text, {
+      font: "headline",
       children: "Slide me"
     })
   }));
@@ -132,11 +135,13 @@ export const SlideButtonStories = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Labels as nodes",
       children: /*#__PURE__*/_jsx(SlideButtonExample, {
-        checkedLabel: /*#__PURE__*/_jsx(TextLabel2, {
+        checkedLabel: /*#__PURE__*/_jsx(Text, {
           color: "fgInverse",
+          font: "label2",
           children: "Node checked label"
         }),
-        uncheckedLabel: /*#__PURE__*/_jsx(TextLabel2, {
+        uncheckedLabel: /*#__PURE__*/_jsx(Text, {
+          font: "label2",
           children: "Node label"
         })
       })