@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/dts/visualizations/sparkline/sparkline-interactive/useMinMaxTransform.d.ts

@@ -0,0 +1,16 @@
+import { Animated } from 'react-native';
+import type { LayoutRectangle } from 'react-native';
+type MinMaxTransformParams = {
+  minMaxLayout: LayoutRectangle;
+  x: number;
+  transform: Animated.ValueXY;
+  opacity: Animated.Value;
+};
+export declare function useMinMaxTransform({
+  minMaxLayout,
+  x,
+  transform,
+  opacity,
+}: MinMaxTransformParams): void;
+export {};
+//# sourceMappingURL=useMinMaxTransform.d.ts.map

package/dts/visualizations/sparkline/sparkline-interactive/useMinMaxTransform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMinMaxTransform.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive/useMinMaxTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQpD,KAAK,qBAAqB,GAAG;IAC3B,YAAY,EAAE,eAAe,CAAC;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC5B,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;CACzB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,qBAAqB,QAiDhG"}

package/dts/visualizations/sparkline/sparkline-interactive/useOpacityAnimation.d.ts

@@ -0,0 +1,6 @@
+import { Animated } from 'react-native';
+export declare function useOpacityAnimation(
+  initialValue?: number | undefined,
+  duration?: number | undefined,
+): [Animated.Value, Animated.CompositeAnimation, Animated.CompositeAnimation];
+//# sourceMappingURL=useOpacityAnimation.d.ts.map

package/dts/visualizations/sparkline/sparkline-interactive/useOpacityAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpacityAnimation.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive/useOpacityAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,wBAAgB,mBAAmB,CACjC,YAAY,GAAE,MAAM,GAAG,SAAa,EACpC,QAAQ,GAAE,MAAM,GAAG,SAAwB,GAC1C,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAwB5E"}

package/dts/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts

@@ -0,0 +1,22 @@
+type Props = {
+  compact?: boolean;
+};
+export declare function useSparklineInteractiveConstants({ compact }: Props): {
+  chartHorizontalGutter: number;
+  chartWidth: number;
+  chartHeight: number;
+  chartDimensionStyles: {
+    height: number;
+    width: number;
+  };
+  chartMarkerSize: number;
+  SparklineInteractiveMinMaxLabelHeight: number;
+  SparklineInteractiveMinMaxVerticalGutter: number;
+  chartVerticalLineWidth: number;
+  xRange: number[];
+  yRange: number[];
+  startX: number;
+  endX: number;
+};
+export {};
+//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

package/dts/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveConstants.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts"],"names":[],"mappings":"AAYA,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,EAAE,OAAe,EAAE,EAAE,KAAK;;;;;;;;;;;;;;;;EAoC1E"}

package/dts/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.d.ts

@@ -0,0 +1,34 @@
+export declare function useSparklineInteractiveLineStyles(): {
+  dotStyle: (
+    | {
+        backgroundColor: string;
+        readonly position?: undefined;
+        readonly top?: undefined;
+        readonly left?: undefined;
+        readonly height?: undefined;
+        readonly width?: undefined;
+        borderRadius?: undefined;
+        opacity?: undefined;
+      }
+    | {
+        position: string;
+        top: number;
+        left: number;
+        height: number;
+        width: number;
+        borderRadius: number;
+        opacity: number;
+        backgroundColor?: undefined;
+      }
+  )[];
+  lineProps: {
+    strokeWidth: number;
+    stroke: string;
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+    strokeDasharray: number[];
+  };
+};
+//# sourceMappingURL=useSparklineInteractiveLineStyles.d.ts.map

package/dts/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveLineStyles.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts"],"names":[],"mappings":"AAaA,wBAAgB,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BhD"}

package/dts/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
+  SharedProps,
+  SparklineInteractiveHeaderSignVariant,
+  SparklineInteractiveHeaderVariant,
+} from '@coinbase/cds-common/types';
+export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
+export type SparklineInteractiveSubHead = {
+  /**
+   * Free form percentage change
+   */
+  percent: string;
+  /**
+   * Sign to denote the change in price
+   */
+  sign: SparklineInteractiveHeaderSignVariant;
+  /**
+   * The variant to use for the price and percentage change
+   */
+  variant: SparklineInteractiveHeaderVariant;
+  /**
+   * Show the dollar amount of price change
+   */
+  priceChange?: string;
+  /**
+   * The accessoryText to show after the price and / or percentage change. An example is "All time"
+   */
+  accessoryText?: string;
+  /**
+   * The accessibilityLabel to show for the price and / or percentage change. This should be localized
+   * @example
+   * // First, configure your i18n strings
+   * const messages = defineMessages({
+   *   subHeadPrefix: {
+   *     id: `${i18nKey}.subHeadPrefix`,
+   *     defaultMessage: 'Price increase in the amount of',
+   *     description: 'A prefix to make it clear which direction the price action was moving',
+   *   }
+   * });
+   *
+   * // then  provide the translated string the accessibilityLabel prop
+   * messages.subHeadPrefix
+   */
+  accessibilityLabel?: string;
+};
+export type SparklineInteractiveHeaderValues = {
+  /**
+   * Describes what the Header represents e.g. Bitcoin Price
+   */
+  label?: string;
+  /**
+   * Main content of header, this is usually the price
+   */
+  title?: React.ReactNode;
+  /**
+   * Provides additional information about the title, such as a price change
+   */
+  subHead?: SparklineInteractiveSubHead;
+};
+export type SparklineInteractiveHeaderRef = {
+  update: (params: SparklineInteractiveHeaderValues) => void;
+};
+export type SparklineInteractiveHeaderProps = SharedProps & {
+  /**
+   * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+   */
+  defaultTitle: React.ReactNode;
+  /**
+   * Default label, changing this prop has no effect once the default is rendered.
+   */
+  defaultLabel?: string;
+  /**
+   * Default SubHead, changing this prop has no effect once the default is rendered.
+   */
+  defaultSubHead?: SparklineInteractiveSubHead;
+  /**
+   * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+   */
+  labelNode?: React.ReactNode;
+  /**
+   * Reduce the font size used for the header itself.
+   */
+  compact?: boolean;
+};
+export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
+export declare const SparklineInteractiveHeader: React.NamedExoticComponent<
+  {
+    /**
+     * Adds content next to the header. This is useful for interactive buttons
+     */
+    trailing?: ReactNode;
+  } & SharedProps & {
+      /**
+       * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+       */
+      defaultTitle: React.ReactNode;
+      /**
+       * Default label, changing this prop has no effect once the default is rendered.
+       */
+      defaultLabel?: string;
+      /**
+       * Default SubHead, changing this prop has no effect once the default is rendered.
+       */
+      defaultSubHead?: SparklineInteractiveSubHead;
+      /**
+       * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+       */
+      labelNode?: React.ReactNode;
+      /**
+       * Reduce the font size used for the header itself.
+       */
+      compact?: boolean;
+    } & React.RefAttributes<SparklineInteractiveHeaderRef>
+>;
+//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map

package/dts/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAE1F,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EACV,WAAW,EACX,qCAAqC,EACrC,iCAAiC,EAClC,MAAM,4BAA4B,CAAC;AAMpC,cAAc,gEAAgE,CAAC;AAE/E,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,qCAAqC,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,iCAAiC,CAAC;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,gCAAgC,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,WAAW,GAAG;IAC1D;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,2BAA2B,WAQ1E,CAAC;AAwNF,eAAO,MAAM,0BAA0B;IANrC;;OAEG;eACQ,SAAS;;IAnPpB;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;mBACY,MAAM;IACrB;;OAEG;qBACc,2BAA2B;IAC5C;;OAEG;gBACS,KAAK,CAAC,SAAS;IAC3B;;OAEG;cACO,OAAO;uDAuPlB,CAAC"}

package/dts/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map

package/dts/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.figma.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx"],"names":[],"mappings":""}

package/dts/visualizations/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts

@@ -0,0 +1,29 @@
+import type { StyleProp, TextStyle } from 'react-native';
+import type { SparklineInteractiveSubHead } from './SparklineInteractiveHeader';
+export type SparklineInteractiveSubHeadIconColor = SparklineInteractiveSubHead['variant'];
+export declare const styles: {
+  inputReset: {
+    padding: number;
+    margin: number;
+    backgroundColor: string;
+    overflow: 'visible';
+    lineHeight: undefined;
+  };
+  fullWidth: {
+    width: '100%';
+  };
+  tabularNumbers: {
+    fontVariant: 'tabular-nums'[];
+  };
+};
+export declare function useSparklineInteractiveHeaderStyles(): {
+  readonly title: (text: string) => StyleProp<TextStyle>;
+  readonly label: StyleProp<TextStyle>;
+  readonly subHeadIcon: (color: SparklineInteractiveSubHeadIconColor) => StyleProp<TextStyle>;
+  readonly subHead: (
+    color: SparklineInteractiveSubHeadIconColor,
+    useFullWidth?: boolean,
+  ) => StyleProp<TextStyle>;
+  readonly subHeadAccessory: () => StyleProp<TextStyle>;
+};
+//# sourceMappingURL=useSparklineInteractiveHeaderStyles.d.ts.map

package/dts/visualizations/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveHeaderStyles.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAEhF,MAAM,MAAM,oCAAoC,GAAG,2BAA2B,CAAC,SAAS,CAAC,CAAC;AA0B1F,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAejB,CAAC;AAEH,wBAAgB,mCAAmC;2BA+B/B,MAAM,KAAG,SAAS,CAAC,SAAS,CAAC;oBA+BtC,SAAS,CAAC,SAAS,CAAC;kCAEJ,oCAAoC,KAAG,SAAS,CAAC,SAAS,CAAC;8BAYvE,oCAAoC,6BAE1C,SAAS,CAAC,SAAS,CAAC;qCASD,SAAS,CAAC,SAAS,CAAC;EAqB/C"}

package/esm/alpha/combobox/Combobox.js

@@ -7,6 +7,7 @@ import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import Fuse from 'fuse.js';
 import { Button } from '../../buttons/Button';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
 import { Box } from '../../layout';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { DefaultSelectControl } from '../select/DefaultSelectControl';
@@ -109,6 +110,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     setOpen
   }));
   const searchInputRef = useRef(null);
+  const safeBottomPadding = useSafeBottomPadding();
   const handleTrayVisibilityChange = useCallback(visibility => {
     if (visibility === 'visible') {
       var _searchInputRef$curre;
@@ -134,7 +136,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       } = _ref2;
       return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
         behavior: "padding",
-        keyboardVerticalOffset: Platform.OS === 'ios' ? 86 : 0,
+        keyboardVerticalOffset: Platform.OS === 'ios' ? 106 : 0,
         children: /*#__PURE__*/_jsx(View, {
           style: Platform.OS === 'android' ? {
             overflow: 'hidden',
@@ -144,11 +146,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
             background: "bgElevation2",
             elevation: 2,
             style: {
-              shadowOffset: {
-                width: 0,
-                height: -32
-              },
-              shadowOpacity: 0.05
+              paddingBottom: safeBottomPadding
             },
             children: /*#__PURE__*/_jsx(Button, {
               compact: true,
@@ -175,7 +173,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       }))
     }),
     onVisibilityChange: handleTrayVisibilityChange
-  })), [ComboboxControl, SelectDropdownComponent, accessibilityLabel, align, closeButtonLabel, endNode, font, handleTrayVisibilityChange, label, placeholder, startNode, variant]);
+  })), [ComboboxControl, SelectDropdownComponent, accessibilityLabel, align, closeButtonLabel, endNode, font, handleTrayVisibilityChange, label, placeholder, safeBottomPadding, startNode, variant]);
   return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
     value: {
       searchText,

package/esm/alpha/combobox/DefaultComboboxControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["SelectControlComponent", "value", "placeholder", "open", "setOpen", "align", "disabled", "options", "searchText", "onSearch", "font", "searchInputRef", "hideSearchInput", "accessibilityLabel"];
+const _excluded = ["SelectControlComponent", "value", "placeholder", "open", "setOpen", "align", "disabled", "options", "searchText", "onSearch", "font", "searchInputRef", "hideSearchInput", "accessibilityLabel", "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 { useMemo } from 'react';
@@ -11,7 +11,6 @@ import { DefaultSelectControl } from '../select/DefaultSelectControl';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const hasSelectedValue = currentValue => currentValue !== null && typeof currentValue !== 'undefined' && !(Array.isArray(currentValue) && currentValue.length === 0);
 export const DefaultComboboxControl = _ref => {
-  var _props$styles, _props$styles2;
   let {
       SelectControlComponent = DefaultSelectControl,
       value,
@@ -26,7 +25,8 @@ export const DefaultComboboxControl = _ref => {
       font = 'body',
       searchInputRef,
       hideSearchInput,
-      accessibilityLabel
+      accessibilityLabel,
+      styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -43,15 +43,12 @@ export const DefaultComboboxControl = _ref => {
   return /*#__PURE__*/_jsx(SelectControlComponent, _extends({
     accessibilityLabel: computedAccessibilityLabel,
     align: align,
-    disabled: disabled,
-    font: font,
-    open: open,
-    options: options,
-    setOpen: setOpen,
-    value: value
-  }, props, {
-    contentNode: shouldRenderSearchInput ? /*#__PURE__*/_jsx(HStack, {
+    contentNode: shouldRenderSearchInput ?
+    /*#__PURE__*/
+    // set gap between input and values with top padding
+    _jsx(HStack, {
       flexWrap: "wrap",
+      paddingTop: hasValue ? 1 : 0,
       children: /*#__PURE__*/_jsx(NativeInput, {
         ref: searchInputRef,
         disabled: disabled || !open,
@@ -60,15 +57,14 @@ export const DefaultComboboxControl = _ref => {
         onPress: () => !disabled && setOpen(true),
         placeholder: typeof placeholder === 'string' ? placeholder : undefined,
         style: {
-          flex: 0,
           flexGrow: 1,
           flexShrink: 1,
           minWidth: 0,
-          padding: 0,
-          height: !hasValue ? 48 : undefined,
-          marginTop: hasValue ? 0 : -24,
-          marginBottom: hasValue ? -12 : -24,
-          paddingTop: hasValue ? 8 : 0,
+          // Zero out padding - let DefaultSelectControl handle spacing via InputStack
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
           // This is constrained by the parent container's width. The width is 100%
           // to ensure it grows to fill the control
           width: open ? '100%' : undefined
@@ -85,13 +81,17 @@ export const DefaultComboboxControl = _ref => {
         children: typeof placeholder === 'string' ? placeholder : ''
       })
     }),
-    styles: _extends({}, props.styles, {
-      controlEndNode: _extends({}, StyleSheet.flatten((_props$styles = props.styles) == null ? void 0 : _props$styles.controlEndNode), {
+    disabled: disabled,
+    font: font,
+    open: open,
+    options: options,
+    setOpen: setOpen,
+    styles: _extends({}, styles, {
+      controlEndNode: _extends({}, StyleSheet.flatten(styles == null ? void 0 : styles.controlEndNode), {
         alignItems: hasValue && shouldRenderSearchInput ? 'flex-end' : 'center'
       }),
-      controlValueNode: _extends({}, StyleSheet.flatten((_props$styles2 = props.styles) == null ? void 0 : _props$styles2.controlValueNode), {
-        paddingBottom: hasValue && shouldRenderSearchInput ? theme.space[1.5] : 0
-      })
-    })
-  }));
+      controlValueNode: _extends({}, StyleSheet.flatten(styles == null ? void 0 : styles.controlValueNode))
+    }),
+    value: value
+  }, props));
 };

package/esm/alpha/data-card/__stories__/DataCard.stories.js

@@ -41,8 +41,10 @@ const DataCardScreen = () => {
           thumbnail: exampleThumbnail,
           title: "Progress Bar Card",
           titleAccessory: /*#__PURE__*/_jsx(Text, {
-            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
             font: "label1",
+            style: {
+              color: "rgb(" + spectrum.green70 + ")"
+            },
             children: "\u2197 25.25%"
           }),
           children: /*#__PURE__*/_jsx(Box, {
@@ -112,8 +114,10 @@ const DataCardScreen = () => {
           thumbnail: exampleThumbnail,
           title: "High Progress",
           titleAccessory: /*#__PURE__*/_jsx(Text, {
-            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
             font: "label1",
+            style: {
+              color: "rgb(" + spectrum.green70 + ")"
+            },
             children: "\u2197 25.25%"
           }),
           children: /*#__PURE__*/_jsx(Box, {
@@ -184,8 +188,10 @@ const DataCardScreen = () => {
           thumbnail: exampleThumbnail,
           title: "Progress Bar with Button",
           titleAccessory: /*#__PURE__*/_jsx(Text, {
-            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
             font: "label1",
+            style: {
+              color: "rgb(" + spectrum.green70 + ")"
+            },
             children: "\u2197 8.5%"
           }),
           children: /*#__PURE__*/_jsx(Box, {
@@ -345,8 +351,10 @@ const DataCardScreen = () => {
           thumbnail: exampleThumbnail,
           title: "Card 2",
           titleAccessory: /*#__PURE__*/_jsx(Text, {
-            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
             font: "label1",
+            style: {
+              color: "rgb(" + spectrum.green70 + ")"
+            },
             children: "\u2197 25.25%"
           }),
           children: /*#__PURE__*/_jsx(Box, {

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "align", "font", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "accessibilityLabel", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles"];
+const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "align", "font", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "accessibilityLabel", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles", "onBlur", "onFocus"];
 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';
@@ -9,18 +9,13 @@ import { HelperText } from '../../controls/HelperText';
 import { InputLabel } from '../../controls/InputLabel';
 import { InputStack } from '../../controls/InputStack';
 import { useInputBorderStyle } from '../../hooks/useInputBorderStyle';
+import { useTheme } from '../../hooks/useTheme';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { Text } from '../../typography/Text';
 import { isSelectOptionGroup } from './Select';
-
-// The height is smaller for the inside label variant since the label takes
-// up space above the input.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const LABEL_VARIANT_INSIDE_HEIGHT = 24;
-const COMPACT_HEIGHT = 40;
-const DEFAULT_HEIGHT = 56;
 const variantColor = {
   foreground: 'fg',
   positive: 'fgPositive',
@@ -56,9 +51,12 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       accessibilityLabel,
       hiddenSelectedOptionsLabel = 'more',
       removeSelectedOptionAccessibilityLabel = 'Remove',
-      styles
+      styles,
+      onBlur,
+      onFocus
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
   const isMultiSelect = type === 'multi';
   const shouldShowCompactLabel = compact && label && !isMultiSelect;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
@@ -135,13 +133,13 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     onPress: () => setOpen(s => !s),
     style: styles == null ? void 0 : styles.controlLabelNode,
     children: /*#__PURE__*/_jsx(InputLabel, {
-      color: "fg",
-      paddingEnd: 0,
-      paddingStart: labelVariant === 'inside' ? 2 : 0,
-      paddingY: labelVariant === 'inside' || compact ? 0 : 0.5,
+      color: "fg"
+      // remove default vertical padding when label is the compact/inline version
+      ,
+      paddingY: shouldShowCompactLabel ? 0 : 0.5,
       children: label
     })
-  }) : label, [compact, disabled, label, labelVariant, setOpen, styles == null ? void 0 : styles.controlLabelNode]);
+  }) : label, [disabled, label, setOpen, shouldShowCompactLabel, styles == null ? void 0 : styles.controlLabelNode]);
   const valueAlignment = useMemo(() => align === 'end' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start', [align]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
@@ -187,11 +185,16 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       children: singleValueContent
     }) : singleValueContent;
   }, [hasValue, isMultiSelect, singleValueContent, font, align, value, maxSelectedOptionsToShow, valueAlignment, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, disabled, onChange]);
+
+  // onBlur/onFocus on ViewProps allow null returns but TouchableOpacity's onBlur/onFocus props do not.
+  // This appears like a type inconsistency in react-native's type definitions.
   const inputNode = useMemo(() => /*#__PURE__*/_jsx(TouchableOpacity, _extends({
     ref: ref,
     accessibilityLabel: computedControlAccessibilityLabel,
     accessibilityRole: "button",
     disabled: disabled,
+    onBlur: onBlur != null ? onBlur : undefined,
+    onFocus: onFocus != null ? onFocus : undefined,
     onPress: () => setOpen(s => !s),
     style: [{
       flexGrow: 1
@@ -202,9 +205,6 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       flexShrink: 1,
       justifyContent: "space-between",
       maxWidth: "100%",
-      minHeight: labelVariant === 'inside' ? LABEL_VARIANT_INSIDE_HEIGHT : compact ? COMPACT_HEIGHT : DEFAULT_HEIGHT,
-      paddingStart: startNode ? 0 : 2,
-      paddingY: labelVariant === 'inside' ? 0 : compact ? 1 : 1.5,
       children: /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",
         flexBasis: 0,
@@ -214,7 +214,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         minWidth: 0,
         children: [!!startNode && /*#__PURE__*/_jsx(HStack, {
           alignItems: "center",
-          paddingX: 2,
+          paddingEnd: 2,
           style: styles == null ? void 0 : styles.controlStartNode,
           children: startNode
         }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
@@ -232,7 +232,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         })]
       })
     })
-  })), [ref, computedControlAccessibilityLabel, 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, valueAlignment, valueNode, contentNode, setOpen]);
+  })), [ref, computedControlAccessibilityLabel, disabled, onBlur, onFocus, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, startNode, shouldShowCompactLabel, labelNode, valueAlignment, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     accessible: customEndNode ? true : false,
     disabled: disabled,
@@ -240,15 +240,22 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     children: /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
       flexGrow: 1,
-      paddingX: 2,
-      paddingY: compact ? 1 : 1.5,
+      paddingStart: 2,
       style: styles == null ? void 0 : styles.controlEndNode,
       children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
         color: !open ? 'fg' : variant ? variantColor[variant] : 'fgPrimary',
         rotate: open ? 0 : 180
       })
     })
-  }), [compact, styles == null ? void 0 : styles.controlEndNode, disabled, customEndNode, open, variant, setOpen]);
+  }), [styles == null ? void 0 : styles.controlEndNode, disabled, customEndNode, open, variant, setOpen]);
+  const inputStackStyles = useMemo(() => ({
+    input: {
+      paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+      paddingBottom: compact ? theme.space[1] : theme.space[2],
+      paddingLeft: theme.space[2],
+      paddingRight: theme.space[2]
+    }
+  }), [compact, theme, labelVariant]);
   return /*#__PURE__*/_jsx(InputStack, _extends({
     borderFocusedStyle: borderFocusedStyle,
     borderStyle: borderUnfocusedStyle,
@@ -261,6 +268,9 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     inputNode: inputNode,
     labelNode: shouldShowCompactLabel ? null : labelNode,
     labelVariant: labelVariant,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    styles: inputStackStyles,
     variant: variant
   }, props));
 }));

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -153,6 +153,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
     ref: ref,
     disableCapturePanGestureToDismiss: true,
     footer: footer,
+    handleBarVariant: "inside",
     header: header,
     onCloseComplete: () => setOpen(false),
     onDismiss: () => setOpen(false),

package/esm/alpha/select/DefaultSelectOption.js

@@ -15,7 +15,6 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
       disabled,
       selected,
       indeterminate,
-      compact,
       description,
       style,
       styles,
@@ -58,7 +57,6 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
     background: background,
     borderRadius: 0,
     disabled: disabled,
-    minHeight: compact ? 40 : 56,
     onPress: handlePress,
     priority: "end",
     selected: selected,

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

@@ -1379,7 +1379,7 @@ const SelectV3Screen = () => {
       title: "Compact",
       children: /*#__PURE__*/_jsx(CompactExample, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Compact with inside label variant",
+      title: "Inside label variant",
       children: /*#__PURE__*/_jsx(InsideLabelVariantExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Helper Text",

package/esm/animation/Lottie.js

@@ -1,4 +1,5 @@
-const _excluded = ["autoplay", "colorFilters", "loop", "progress", "resizeMode", "source", "onAnimationFinish"];
+const _excluded = ["autoplay", "colorFilters", "loop", "progress", "resizeMode", "source", "onAnimationFinish"],
+  _excluded2 = ["colorFilters"];
 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';
@@ -43,13 +44,16 @@ const LottieContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwarded
     })
   }));
 }));
-export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, forwardedRef) => {
-  const colorFilters = useLottieColorFilters(props.source, props.colorFilters);
+export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
+  let {
+      colorFilters: colorFiltersProp
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const colorFilters = useLottieColorFilters(props.source, colorFiltersProp);
   return /*#__PURE__*/_jsx(LottieContent, _extends({
-    ref: forwardedRef
-  }, props, {
+    ref: forwardedRef,
     colorFilters: colorFilters
-  }));
+  }, props));
 }));
 LottieContent.displayName = 'LottieContent';
 Lottie.displayName = 'Lottie';