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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+type SparklineInteractiveScrubContextInterface = {
+  setLineDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setMaskDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setHoverDateDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  setHoverPriceDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  lineDOMNode: HTMLDivElement | null;
+  maskDOMNode: HTMLDivElement | null;
+  hoverDateDOMNode: HTMLSpanElement | null;
+  hoverPriceDOMNode: HTMLSpanElement | null;
+};
+export declare const SparklineInteractiveScrubProvider: React.MemoExoticComponent<
+  ({ children }: { children: React.ReactNode }) => import('react/jsx-runtime').JSX.Element
+>;
+export declare function useSparklineInteractiveScrubContext(): SparklineInteractiveScrubContextInterface;
+export {};
+//# sourceMappingURL=SparklineInteractiveScrubProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveScrubProvider.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,yCAAyC,GAAG;IAC/C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAC;IAChE,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAC;IAChE,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IACtE,oBAAoB,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IACvE,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC,iBAAiB,EAAE,eAAe,GAAG,IAAI,CAAC;CAC3C,CAAC;AAaF,eAAO,MAAM,iCAAiC,2CAC7B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,6CA0B7C,CAAC;AAEF,wBAAgB,mCAAmC,8CAElD"}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types';
+import type { Area, Line } from 'd3-shape';
+export type TimeseriesPathOnRenderParams = {
+  path: string;
+  area: string;
+};
+export type TimeseriesPathProps = {
+  lineFn: Line<ChartDataPoint>;
+  areaFn: Area<ChartDataPoint>;
+  timeseries: ChartTimeseries;
+  initialPath: string;
+  onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+};
+export type SparklineInteractiveTimeseriesPathsProps = {
+  initialPath: string;
+  data: ChartTimeseries[];
+  width: number;
+  height: number;
+  onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+};
+export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<
+  ({
+    data,
+    width,
+    height,
+    initialPath,
+    onRender,
+  }: SparklineInteractiveTimeseriesPathsProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveTimeseriesPaths.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAMlF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAO3C,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC7B,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC7B,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,4BAA4B,KAAK,IAAI,CAAC;CACnE,CAAC;AA8CF,MAAM,MAAM,wCAAwC,GAAG;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,eAAO,MAAM,mCAAmC,6EACG,wCAAwC,6CA2B1F,CAAC"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export declare function fadeOut(domNode?: HTMLElement | null): void;
+export declare function fadeIn(domNode?: HTMLElement | null): void;
+//# sourceMappingURL=fade.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fade.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/sparkline/sparkline-interactive/fade.ts"],"names":[],"mappings":"AAsCA,wBAAgB,OAAO,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAGnD;AAED,wBAAgB,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAGlD"}

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

@@ -0,0 +1,13 @@
+export declare function useSparklineInteractiveConstants(): {
+  chartWidth: number;
+  chartHeight: number;
+  chartDimensionStyles: {
+    height: number;
+    width: number;
+  };
+  xRange: number[];
+  yRange: number[];
+  startX: number;
+  endX: number;
+};
+//# 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":"AASA,wBAAgB,gCAAgC;;;;;;;;;;;EAuB/C"}

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

@@ -0,0 +1,110 @@
+import React 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<
+  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,KAA8E,MAAM,OAAO,CAAC;AAGnG,OAAO,KAAK,EACV,WAAW,EACX,qCAAqC,EACrC,iCAAiC,EAClC,MAAM,4BAA4B,CAAC;AAOpC,cAAc,gEAAgE,CAAC;AAQ/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;AA+KF,eAAO,MAAM,0BAA0B;IA7MrC;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;mBACY,MAAM;IACrB;;OAEG;qBACc,2BAA2B;IAC5C;;OAEG;gBACS,KAAK,CAAC,SAAS;IAC3B;;OAEG;cACO,OAAO;uDA8MlB,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/esm/alpha/combobox/DefaultComboboxControl.js

@@ -87,8 +87,11 @@ export const DefaultComboboxControl = /*#__PURE__*/memo(_ref => {
         },
         placeholder: typeof placeholder === 'string' ? placeholder : undefined,
         style: {
-          padding: 0,
-          height: !hasValue ? compact ? 40 : 48 : undefined,
+          // unset default padding to let DefaultSelectControl handle layout/spacing
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
           minWidth: 0,
           flexGrow: 1,
           width: '100%',
@@ -116,10 +119,7 @@ export const DefaultComboboxControl = /*#__PURE__*/memo(_ref => {
       controlEndNode: _objectSpread(_objectSpread({}, (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.controlEndNode), {}, {
         alignItems: hasValue && shouldShowSearchInput ? 'flex-end' : 'center'
       }),
-      controlValueNode: _objectSpread(_objectSpread({}, (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.controlValueNode), {}, {
-        paddingTop: hasValue ? compact ? 'var(--space-1)' : 'var(--space-1_5)' : 0,
-        paddingBottom: hasValue ? compact ? 'var(--space-1)' : 'var(--space-1_5)' : 0
-      })
+      controlValueNode: _objectSpread({}, (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.controlValueNode)
     }),
     tabIndex: shouldShowSearchInput ? -1 : 0
   }));

package/esm/alpha/select/DefaultSelectControl.js

@@ -12,6 +12,7 @@ import { HelperText } from '../../controls/HelperText';
 import { InputLabel } from '../../controls/InputLabel';
 import { InputStack } from '../../controls/InputStack';
 import { cx } from '../../cx';
+import { useTheme } from '../../hooks/useTheme';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
@@ -19,13 +20,7 @@ import { Pressable } from '../../system/Pressable';
 import { Text } from '../../typography/Text';
 import { findClosestNonDisabledNodeIndex } from '../../utils/findClosestNonDisabledNodeIndex';
 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 = 32;
-const COMPACT_HEIGHT = 40;
-const DEFAULT_HEIGHT = 56;
 const noFocusOutlineCss = "noFocusOutlineCss-n1gl6kcn";
 const selectedOptionChipContentCss = "selectedOptionChipContentCss-s1kle8pq";
 const variantColor = {
@@ -72,7 +67,10 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       classNames
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const theme = useTheme();
   const isMultiSelect = type === 'multi';
+  // horizontal/inline label is used for compact selesct exepct for multi-selects
+  // multi-selects render their label outside of the control unless labelVariant is set to 'inside'
   const shouldShowCompactLabel = compact && label && !isMultiSelect;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
   // Map of options to their values
@@ -160,24 +158,27 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     style: styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode,
     children: helperText
   }) : helperText, [helperText, variant, classNames === null || classNames === void 0 ? void 0 : classNames.controlHelperTextNode, styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode]);
-  const labelNode = useMemo(() => labelVariant === 'inside' ? /*#__PURE__*/_jsx(Pressable, {
+  const labelNode = useMemo(() =>
+  // labelVariant has no effect when compact is true
+  labelVariant === 'inside' && !compact ? /*#__PURE__*/_jsx(Pressable, {
     noScaleOnPress: true,
     onClick: () => setOpen(s => !s),
     tabIndex: -1,
     children: /*#__PURE__*/_jsx(InputLabel, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
       color: "fg",
-      paddingBottom: 0,
-      paddingStart: 2,
       style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
       children: label
     })
   }) : typeof label === 'string' ? /*#__PURE__*/_jsx(InputLabel, {
     className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
-    color: "fg",
+    color: "fg"
+    // remove default vertical padding when label is the compact/inline version
+    ,
+    paddingY: shouldShowCompactLabel ? 0 : 0.5,
     style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
     children: label
-  }) : label, [labelVariant, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, setOpen]);
+  }) : label, [labelVariant, compact, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, shouldShowCompactLabel, setOpen]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
       const valuesToShow = value.length <= maxSelectedOptionsToShow ? value : value.slice(0, maxSelectedOptionsToShow);
@@ -243,11 +244,9 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     flexGrow: 1,
     flexShrink: 1,
     focusable: false,
-    minHeight: labelVariant === 'inside' ? LABEL_VARIANT_INSIDE_HEIGHT : compact ? COMPACT_HEIGHT : DEFAULT_HEIGHT,
     minWidth: 0,
     onClick: () => setOpen(s => !s),
     onKeyDown: onKeyDown,
-    paddingStart: 1,
     role: role,
     style: styles === null || styles === void 0 ? void 0 : styles.controlInputNode,
     tabIndex: tabIndex,
@@ -257,12 +256,12 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       height: "100%",
       justifyContent: "center",
       minWidth: 0,
-      paddingX: 1,
+      paddingEnd: 2,
       style: styles === null || styles === void 0 ? void 0 : styles.controlStartNode,
       children: startNode
     }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
-      paddingX: 1,
+      paddingEnd: 1,
       children: labelNode
     }) : null, /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
@@ -283,13 +282,11 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         justifyContent: "flex-start",
         minWidth: 0,
         overflow: "hidden",
-        paddingX: 1,
-        paddingY: labelVariant === 'inside' && !isMultiSelect ? 0 : compact ? 1 : 1.5,
         style: styles === null || styles === void 0 ? void 0 : styles.controlValueNode,
         children: [valueNode, contentNode]
       })
     })]
-  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, labelVariant, compact, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, onKeyDown, startNode, shouldShowCompactLabel, labelNode, align, isMultiSelect, valueNode, contentNode, setOpen]);
+  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, onKeyDown, startNode, shouldShowCompactLabel, labelNode, align, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     "aria-hidden": true,
     flexShrink: 0,
@@ -301,15 +298,22 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       flexGrow: 1,
       height: "100%",
       justifyContent: labelVariant === 'inside' ? 'flex-end' : undefined,
-      paddingX: 2,
-      paddingY: compact ? 1 : 1.5,
+      paddingStart: 2,
       style: styles === null || styles === void 0 ? void 0 : styles.controlEndNode,
       children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
         color: !open ? 'fg' : variant ? variantColor[variant] : 'fgPrimary',
         rotate: open ? 0 : 180
       })
     })
-  }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, labelVariant, compact, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, customEndNode, open, variant, setOpen]);
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, labelVariant, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, 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.space, labelVariant]);
   return /*#__PURE__*/_jsx(InputStack, _objectSpread({
     ref: ref,
     blendStyles: interactableBlendStyles,
@@ -321,6 +325,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     inputNode: inputNode,
     labelNode: shouldShowCompactLabel ? null : labelNode,
     labelVariant: labelVariant,
+    styles: inputStackStyles,
     variant: variant
   }, props));
 }));

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "className", "classNames", "compact", "label", "header", "footer", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityLabel", "accessibilityRoles"],
+const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "className", "classNames", "compact", "label", "header", "footer", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityLabel", "accessibilityRoles", "maxHeight"],
   _excluded2 = ["Component", "media", "accessory", "end", "disabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,7 +21,11 @@ import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdown
 import { DefaultSelectOption } from './DefaultSelectOption';
 import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
 import { defaultAccessibilityRoles, isSelectOptionGroup } from './Select';
+
+// intentional design decision to set max height to this value
+// will cut off an option midway to afford scrolling action
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_SELECT_DROPDOWN_MAX_HEIGHT = 252;
 const initialStyle = {
   opacity: 0,
   y: 0
@@ -60,7 +64,8 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
       SelectOptionGroupComponent = DefaultSelectOptionGroup,
       accessibilityLabel = 'Select dropdown',
-      accessibilityRoles = defaultAccessibilityRoles
+      accessibilityRoles = defaultAccessibilityRoles,
+      maxHeight = DEFAULT_SELECT_DROPDOWN_MAX_HEIGHT
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [containerWidth, setContainerWidth] = useState(null);
@@ -168,7 +173,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
   useEffect(() => {
     if (!controlRef.current) return;
     const resizeObserver = new ResizeObserver(entries => {
-      setContainerWidth(entries[0].contentRect.width);
+      setContainerWidth(entries[0].target.getBoundingClientRect().width);
     });
     resizeObserver.observe(controlRef.current);
     return () => resizeObserver.disconnect();
@@ -204,7 +209,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
             borderRadius: 400,
             elevation: 2,
             flexDirection: "column",
-            maxHeight: 252,
+            maxHeight: maxHeight,
             overflow: "auto",
             children: [shouldShowSelectAll && /*#__PURE__*/_jsx(SelectAllOptionComponent, {
               accessibilityRole: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option,

package/esm/alpha/select/DefaultSelectOption.css

@@ -1,2 +1,2 @@
-@layer cds{.selectOptionCss-s1n0butf{--bookendRadius:var(--borderRadius-400);position:relative;padding:0;margin:0;border:none;}.selectOptionCss-s1n0butf:first-child{border-top-right-radius:var(--bookendRadius);border-top-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:last-child{border-bottom-right-radius:var(--bookendRadius);border-bottom-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:focus{outline:none;}.selectOptionCss-s1n0butf:focus-visible{outline:none;}.selectOptionCss-s1n0butf:focus-visible::after{content:'';position:absolute;inset:0;border-radius:var(--bookendRadius);border:2px solid var(--color-bgLinePrimary);}.selectOptionCss-s1n0butf:focus-visible:first-child::after{border-top-right-radius:var(--bookendRadius);border-top-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:focus-visible:last-child::after{border-bottom-right-radius:var(--bookendRadius);border-bottom-left-radius:var(--bookendRadius);}
+@layer cds{.selectOptionCss-s1n0butf{--bookendRadius:var(--borderRadius-400);position:relative;padding:0;margin:0;border:none;}.selectOptionCss-s1n0butf:first-child{border-top-right-radius:var(--bookendRadius);border-top-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:last-child{border-bottom-right-radius:var(--bookendRadius);border-bottom-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:focus{outline:none;}.selectOptionCss-s1n0butf:focus-visible{outline:none;}.selectOptionCss-s1n0butf:focus-visible::after{content:'';position:absolute;inset:0;border-radius:var(--bookendRadius);border:var(--borderWidth-200) solid var(--color-bgLinePrimary);}.selectOptionCss-s1n0butf:focus-visible:first-child::after{border-top-right-radius:var(--bookendRadius);border-top-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:focus-visible:last-child::after{border-bottom-right-radius:var(--bookendRadius);border-bottom-left-radius:var(--bookendRadius);}
 .multilineTextCss-m1dfwwjg{overflow:auto;text-overflow:unset;white-space:normal;}}

package/esm/alpha/select/DefaultSelectOption.js

@@ -77,7 +77,6 @@ const DefaultSelectOptionComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       end: end,
       innerSpacing: selectCellSpacingConfig.innerSpacing,
       media: media,
-      minHeight: compact ? 40 : 56,
       outerSpacing: selectCellSpacingConfig.outerSpacing,
       priority: "end",
       selected: selected,

package/esm/animation/LottieStatusAnimation.js

@@ -22,7 +22,7 @@ export const LottieStatusAnimation = /*#__PURE__*/memo(_ref => {
     } = _ref,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   const [, forceUpdate] = useState(0);
-  const lottie = useRef();
+  const lottie = useRef(undefined);
   const handlePolling = useStatusAnimationPoller({
     status,
     playMarkers: (_lottie$current = lottie.current) === null || _lottie$current === void 0 ? void 0 : _lottie$current.playMarkers,

package/esm/animation/useLottieLoader.js

@@ -17,7 +17,7 @@ export const useLottieLoader = _ref => {
   const sourceWidth = source.w;
   const sourceHeight = source.h;
   const containerRef = useRef(null);
-  const animationRef = useRef();
+  const animationRef = useRef(undefined);
   const [, setAnimationLoaded] = useState(false);
   const preserveAspectRatio = useMemo(() => {
     switch (resizeMode) {