@coinbase/cds-web 9.9.0 → 9.10.0

package/dts/controls/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAOpE,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF;;;GAGG;AACH,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,UAAU,GACV,cAAc,GACd,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,oBAAoB,GACpB,uCAAuC,GACvC,MAAM,GACN,WAAW,GACX,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,cAAc,GAAG;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,mGA8FvB,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAOpE,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,UAAU,GACV,cAAc,GACd,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,oBAAoB,GACpB,uCAAuC,GACvC,MAAM,GACN,WAAW,GACX,YAAY,GACZ,aAAa,GACb,MAAM,GACN,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,cAAc,GAAG;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,mGAsGvB,CAAC"}

package/dts/controls/TextInput.d.ts

@@ -2,8 +2,12 @@ import React from 'react';
 import type { SharedInputProps } from '@coinbase/cds-common/types/InputBaseProps';
 import type { InputStackBaseProps } from './InputStack';
 import { type NativeInputBaseProps, type NativeInputProps } from './NativeInput';
-export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor'> &
-  SharedInputProps &
+export type TextInputSize = 's' | 'm' | 'l';
+export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor' | 'compact'> &
+  Pick<
+    SharedInputProps,
+    'label' | 'labelFont' | 'labelColor' | 'placeholder' | 'helperText' | 'readOnly'
+  > &
   Pick<
     InputStackBaseProps,
     | 'height'
@@ -12,7 +16,6 @@ export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor'> &
     | 'disabled'
     | 'borderRadius'
     | 'enableColorSurge'
-    | 'labelVariant'
     | 'inputBackground'
   > & {
     /**
@@ -27,6 +30,25 @@ export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor'> &
      * Supplying a `ref` on the `inputNode` element is redundant; if present, it will be merged with the component's ref.
      * */
     inputNode?: React.ReactElement;
+    /**
+     * Controls overall density of the input field, inside of the border.
+     * @default 'l'
+     */
+    size?: TextInputSize;
+    /**
+     * Enables compact variation. Prefer `size="s"` or `size="m"` with an explicit `labelVariant`.
+     *
+     * @deprecated Unset and use `size="s"` instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
+    compact?: boolean;
+    /**
+     * Determines where the provided label/labelNode is rendered.
+     * By default, the label is rendered outisde, above the input element.
+     * When size is `l` (the default), an `inside` label is stacked vertically with the input; otherwise is rendered horizontally.
+     * @default 'outside'
+     */
+    labelVariant?: InputStackBaseProps['labelVariant'];
     /**
      * Adds border to input.
      * When set to `false`, focus border styling is disabled by default.
@@ -66,7 +88,8 @@ export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor'> &
      */
     labelNode?: React.ReactNode;
   };
-export type TextInputProps = TextInputBaseProps & Omit<NativeInputProps, 'caretColor'>;
+export type TextInputProps = TextInputBaseProps &
+  Omit<NativeInputProps, 'caretColor' | 'compact' | 'size'>;
 export declare const TextInput: React.NamedExoticComponent<
   Omit<TextInputProps, 'ref'> & React.RefAttributes<HTMLInputElement>
 >;

package/dts/controls/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAahG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAe,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA4C9F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,YAAY,CAAC,GACvE,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;;;;;;;;SAUK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAWvF,eAAO,MAAM,SAAS,iGAiRrB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAahG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAe,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAqD9F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,YAAY,GAAG,SAAS,CAAC,GACnF,IAAI,CACF,gBAAgB,EAChB,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CACjF,GACD,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,iBAAiB,CACpB,GAAG;IACF;;;;;;;;;;SAUK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAW5D,eAAO,MAAM,SAAS,iGAmSrB,CAAC"}

package/dts/dates/DateInput.d.ts

@@ -1,13 +1,28 @@
 import React from 'react';
 import { type DateInputOptions } from '@coinbase/cds-common/dates/useDateInput';
-import { type TextInputBaseProps, type TextInputProps } from '../controls/TextInput';
+import {
+  type TextInputBaseProps,
+  type TextInputProps,
+  type TextInputSize,
+} from '../controls/TextInput';
 export type DateInputBaseProps = Omit<DateInputOptions, 'intlDateFormat'> &
-  Omit<TextInputBaseProps, 'inputNode' | 'value' | 'defaultValue' | 'style'> & {
+  Omit<TextInputBaseProps, 'inputNode' | 'value' | 'defaultValue' | 'style' | 'compact'> & {
     /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
     separator?: string;
+    /**
+     * Controls the vertical density (size) of the input field.
+     * @default 'l'
+     */
+    size?: TextInputSize;
+    /**
+     * Enables a smaller, compact input.
+     * @deprecated Use `size="s"` instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
+    compact?: boolean;
   };
 export type DateInputProps = DateInputBaseProps &
-  Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue' | 'style'> & {
+  Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue' | 'style' | 'compact'> & {
     className?: string;
     style?: React.CSSProperties;
   };

package/dts/dates/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIhG,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG;IAC3E,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,eAAO,MAAM,SAAS,iGAoGrB,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,eAAO,MAAM,SAAS,iGAoGrB,CAAC"}

package/dts/dates/DatePicker.d.ts

@@ -1,4 +1,5 @@
 import type { DateInputValidationError } from '@coinbase/cds-common/dates/DateInputValidationError';
+import type { TextInputSize } from '../controls/TextInput';
 import { type PopoverProps } from '../overlays/popover/PopoverProps';
 import { type CalendarBaseProps } from './Calendar';
 import { type DateInputProps } from './DateInput';
@@ -47,6 +48,17 @@ export type DatePickerBaseProps = Pick<
    * @default 'Close calendar'
    */
   closeCalendarAccessibilityLabel?: string;
+  /**
+   * Controls the vertical density (size) of the DatePicker's input field.
+   * @default 'l'
+   */
+  size?: TextInputSize;
+  /**
+   * Enables a smaller, compact input.
+   * @deprecated Use `size="s"` instead. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  compact?: boolean;
 };
 export type DatePickerProps = DatePickerBaseProps &
   Pick<PopoverProps, 'showOverlay'> &
@@ -61,6 +73,7 @@ export type DatePickerProps = DatePickerBaseProps &
     | 'disabledDateError'
     | 'className'
     | 'style'
+    | 'compact'
   > & {
     /** Control the default open state of the Calendar popover. */
     defaultOpen?: boolean;

package/dts/dates/DatePicker.d.ts.map

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

package/dts/pagination/DefaultPaginationNavigationTextButton.d.ts

@@ -1,15 +1,6 @@
 import React from 'react';
 import type { ButtonProps } from '../buttons/Button';
 export declare const DefaultPaginationNavigationTextButton: React.ForwardRefExoticComponent<
-  Omit<
-    ButtonProps<
-      (<AsComponent extends React.ElementType = 'button'>(
-        props: ButtonProps<AsComponent>,
-      ) => import('..').Polymorphic.ReactReturn) &
-        import('..').Polymorphic.ReactNamed
-    >,
-    'ref'
-  > &
-    React.RefAttributes<HTMLButtonElement>
+  Omit<ButtonProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
 >;
 //# sourceMappingURL=DefaultPaginationNavigationTextButton.d.ts.map

package/dts/pagination/DefaultPaginationNavigationTextButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultPaginationNavigationTextButton.d.ts","sourceRoot":"","sources":["../../src/pagination/DefaultPaginationNavigationTextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,eAAO,MAAM,qCAAqC,yQAgCjD,CAAC"}
+{"version":3,"file":"DefaultPaginationNavigationTextButton.d.ts","sourceRoot":"","sources":["../../src/pagination/DefaultPaginationNavigationTextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,eAAO,MAAM,qCAAqC,oGA6BjD,CAAC"}

package/dts/tabs/Paddle.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import { type IconButtonSize } from '../buttons/IconButton';
 import type { TabLabelBaseProps } from '../tabs/TabLabel';
 export declare const paddleWidth = 80;
 export type PaddleProps = {
@@ -14,6 +15,11 @@ export type PaddleProps = {
    * Web only. Styling for the paddle icon button. Mobile does not have paddles.
    */
   paddleStyle?: React.CSSProperties;
+  /**
+   * Size of the paddle icon button, so the paddle can track the size of the
+   * content it scrolls. Defaults to the `IconButton` default size.
+   */
+  size?: IconButtonSize;
 } & SharedProps &
   SharedAccessibilityProps;
 /**
@@ -28,6 +34,7 @@ export declare const Paddle: {
     testID,
     accessibilityLabel,
     paddleStyle,
+    size,
   }: PaddleProps): import('react/jsx-runtime').JSX.Element;
   displayName: string;
 };

package/dts/tabs/Paddle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paddle.d.ts","sourceRoot":"","sources":["../../src/tabs/Paddle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAS1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,eAAO,MAAM,WAAW,KAAK,CAAC;AAwB9B,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnC,GAAG,WAAW,GACb,wBAAwB,CAAC;AA8B3B;;GAEG;AACH,eAAO,MAAM,MAAM;yFAQhB,WAAW;;CAuDb,CAAC"}
+{"version":3,"file":"Paddle.d.ts","sourceRoot":"","sources":["../../src/tabs/Paddle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,eAAO,MAAM,WAAW,KAAK,CAAC;AAwB9B,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,GAAG,WAAW,GACb,wBAAwB,CAAC;AA8B3B;;GAEG;AACH,eAAO,MAAM,MAAM;+FAShB,WAAW;;CAwDb,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["role", "type", "options", "value", "onChange", "open", "placeholder", "disabled", "readOnly", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "blendStyles", "align", "font", "labelColor", "labelFont", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "borderRadius", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessibilityLabel", "ariaHaspopup", "tabIndex", "onKeyDown", "styles", "classNames"];
+const _excluded = ["role", "type", "options", "value", "onChange", "open", "placeholder", "disabled", "readOnly", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "size", "blendStyles", "align", "font", "labelColor", "labelFont", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "borderRadius", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessibilityLabel", "ariaHaspopup", "tabIndex", "onKeyDown", "styles", "classNames"];
 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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -19,7 +19,25 @@ import { Pressable } from '../../system/Pressable';
 import { Text } from '../../typography/Text';
 import { findClosestNonDisabledNodeIndex } from '../../utils/findClosestNonDisabledNodeIndex';
 import { isSelectOptionGroup } from './Select';
+import { defaultSelectSize } from './types';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const selectSizeVerticalSpaceVar = {
+  s: 'var(--space-1)',
+  m: 'var(--space-1_5)',
+  l: 'var(--space-2)'
+};
+
+// A multi-select's selected-value chips add their own height, so the vertical padding is
+// tightened per size to keep the overall field height aligned with the single-select scale.
+const multiSelectVerticalSpaceVar = {
+  s: 'var(--space-0_5)',
+  m: 'var(--space-1)',
+  l: 'var(--space-1_5)'
+};
+
+// Multi-select value chips always use the compact `xs` size (even at size `l`) so several chips —
+// and a stacked inside label — stay within the field's natural height.
+const multiSelectValueChipSize = 'xs';
 const noFocusOutlineCss = "noFocusOutlineCss-n1gl6kcn";
 const selectedOptionChipContentCss = "selectedOptionChipContentCss-s1kle8pq";
 const variantColor = {
@@ -50,6 +68,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       startNode,
       endNode: customEndNode,
       compact,
+      size,
       blendStyles,
       align = 'start',
       font = 'body',
@@ -78,12 +97,23 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     setOpen(currentOpen => !currentOpen);
   }, [isInteractionBlocked, setOpen]);
   const isMultiSelect = type === 'multi';
-  // When compact, labelVariant is ignored
-  const labelVariant = compact ? undefined : labelVariantProp;
-  // 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 shouldShowInsideLabel = labelVariant === 'inside' && !compact && label;
+  // `size` wins over the deprecated `compact` for geometry.
+  const resolvedSize = size !== null && size !== void 0 ? size : compact ? 's' : defaultSelectSize;
+  // The deprecated `compact` only forces label placement when the caller did NOT set an explicit
+  // `size`; once `size` is provided, placement follows the normal `labelVariant` rules.
+  const useLegacyCompact = Boolean(compact) && size === undefined;
+  const labelVariant = useLegacyCompact ? undefined : labelVariantProp;
+  const hasLabel = !!label;
+
+  // Label placement mirrors TextInput: `compact` (set alone) forces an inside label; otherwise
+  // placement follows `labelVariant`. An inside label sits horizontally in the start slot at every
+  // size EXCEPT `l`, where it stacks vertically above the value. Multi-select is the one exception:
+  // its value chips can't share a row with an inline label, so legacy compact multi-select keeps
+  // its label outside (only an explicit `inside` labelVariant places a multi-select's label inside).
+  const isCompactLabel = useLegacyCompact && !isMultiSelect;
+  const wantsInsideLabel = hasLabel && (isCompactLabel || labelVariant === 'inside');
+  const insideVerticalLabel = wantsInsideLabel && !isCompactLabel && resolvedSize === 'l';
+  const insideHorizontalLabel = wantsInsideLabel && !insideVerticalLabel;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
   // Map of options to their values
   // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
@@ -175,7 +205,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     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(() => {
-    if (shouldShowInsideLabel || shouldShowCompactLabel) return null;
+    if (insideVerticalLabel || insideHorizontalLabel) return null;
     if (typeof label === 'string') {
       return /*#__PURE__*/_jsx(InputLabel, {
         className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
@@ -187,9 +217,9 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       });
     }
     return label;
-  }, [shouldShowInsideLabel, shouldShowCompactLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, labelColor, labelFont]);
+  }, [insideVerticalLabel, insideHorizontalLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, labelColor, labelFont]);
   const inlineLabelNode = useMemo(() => {
-    if (!shouldShowInsideLabel && !shouldShowCompactLabel) return null;
+    if (!insideVerticalLabel && !insideHorizontalLabel) return null;
     if (typeof label === 'string') {
       return /*#__PURE__*/_jsx(InputLabel, {
         className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
@@ -201,7 +231,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       });
     }
     return label;
-  }, [shouldShowInsideLabel, shouldShowCompactLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, labelColor, labelFont]);
+  }, [insideVerticalLabel, insideHorizontalLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, labelColor, labelFont]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
       const valuesToShow = value.length <= maxSelectedOptionsToShow ? value : value.slice(0, maxSelectedOptionsToShow);
@@ -213,7 +243,6 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
           var _option$value, _ref6, _ref7, _option$label2;
           const accessibilityLabel = typeof option.label === 'string' ? option.label : typeof option.description === 'string' ? option.description : (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : '';
           return /*#__PURE__*/_jsx(InputChip, {
-            compact: true,
             "data-selected-value": true,
             accessibilityLabel: "".concat(removeSelectedOptionAccessibilityLabel, " ").concat(accessibilityLabel),
             borderWidth: 0,
@@ -224,19 +253,14 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
             invertColorScheme: false,
             maxWidth: 200,
             onClick: isInteractionBlocked ? undefined : event => handleUnselectValue(event, index),
-            children: /*#__PURE__*/_jsx(Text, {
-              color: "fg",
-              flexShrink: 1,
-              font: "label1",
-              overflow: "truncate",
-              children: (_ref6 = (_ref7 = (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.description) !== null && _ref7 !== void 0 ? _ref7 : option.value) !== null && _ref6 !== void 0 ? _ref6 : ''
-            })
+            size: multiSelectValueChipSize,
+            children: (_ref6 = (_ref7 = (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.description) !== null && _ref7 !== void 0 ? _ref7 : option.value) !== null && _ref6 !== void 0 ? _ref6 : ''
           }, option.value);
         }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(InputChip, {
-          compact: true,
           borderWidth: 0,
           end: null,
           invertColorScheme: false,
+          size: multiSelectValueChipSize,
           children: "+".concat(value.length - maxSelectedOptionsToShow, " ").concat(hiddenSelectedOptionsLabel)
         })]
       });
@@ -283,11 +307,12 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       paddingEnd: 2,
       style: styles === null || styles === void 0 ? void 0 : styles.controlStartNode,
       children: startNode
-    }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
+    }), insideHorizontalLabel ? /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
+      flexShrink: 0,
       paddingEnd: 1,
       children: inlineLabelNode
-    }) : null, shouldShowInsideLabel ? /*#__PURE__*/_jsxs(VStack, {
+    }) : null, insideVerticalLabel ? /*#__PURE__*/_jsxs(VStack, {
       flexGrow: 1,
       minWidth: 0,
       width: "100%",
@@ -334,7 +359,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         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, readOnly, 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, shouldShowInsideLabel, inlineLabelNode, align, valueNode, contentNode, handleToggleOpen]);
+  }), [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, readOnly, 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, insideHorizontalLabel, insideVerticalLabel, inlineLabelNode, align, valueNode, contentNode, handleToggleOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     "aria-hidden": true,
     flexShrink: 0,
@@ -345,7 +370,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       className: classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode,
       flexGrow: 1,
       height: "100%",
-      justifyContent: labelVariant === 'inside' ? 'flex-end' : undefined,
+      justifyContent: insideVerticalLabel ? 'flex-end' : undefined,
       paddingStart: 2,
       style: styles === null || styles === void 0 ? void 0 : styles.controlEndNode,
       children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
@@ -353,13 +378,26 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         rotate: open ? 0 : 180
       })
     })
-  }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, labelVariant, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, customEndNode, open, handleToggleOpen]);
-  const inputStackStyles = useMemo(() => ({
-    paddingTop: compact || labelVariant === 'inside' ? 'var(--space-1)' : 'var(--space-2)',
-    paddingBottom: compact || labelVariant === 'inside' ? 'var(--space-1)' : 'var(--space-2)',
-    paddingLeft: 'var(--space-2)',
-    paddingRight: 'var(--space-2)'
-  }), [compact, labelVariant]);
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, insideVerticalLabel, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, customEndNode, open, handleToggleOpen]);
+  const inputStackStyles = useMemo(() => {
+    let verticalSpaceVar;
+    if (insideVerticalLabel) {
+      // A vertically-stacked inside label (size `l`) tightens the padding so the stacked label +
+      // value fit the same 58px field an outside label produces. A multi-select with chips
+      // (taller than a single text line) tightens further.
+      verticalSpaceVar = isMultiSelect && hasValue ? 'var(--space-0_25)' : 'var(--space-0_75)';
+    } else if (isMultiSelect && hasValue) {
+      verticalSpaceVar = multiSelectVerticalSpaceVar[resolvedSize];
+    } else {
+      verticalSpaceVar = selectSizeVerticalSpaceVar[resolvedSize];
+    }
+    return {
+      paddingTop: verticalSpaceVar,
+      paddingBottom: verticalSpaceVar,
+      paddingLeft: 'var(--space-2)',
+      paddingRight: 'var(--space-2)'
+    };
+  }, [insideVerticalLabel, resolvedSize, isMultiSelect, hasValue]);
   return /*#__PURE__*/_jsx(InputStack, _objectSpread({
     ref: ref,
     blendStyles: interactableBlendStyles,
@@ -374,7 +412,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     inputBackground: inputBackground,
     inputNode: inputNode,
     labelNode: labelNode,
-    labelVariant: labelVariant,
+    labelVariant: insideVerticalLabel ? 'inside' : 'outside',
     styles: {
       input: inputStackStyles
     },

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -219,10 +219,13 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
               compact: compact,
               disabled: disabled,
               end: end !== null && end !== void 0 ? end : /*#__PURE__*/_jsx(Button, {
-                compact: true,
                 transparent: true,
                 onClick: handleClearAll,
-                role: "option",
+                role: "option"
+                // Intentionally always the densest size: the dropdown's inline
+                // affordances stay compact regardless of the control's size.
+                ,
+                size: "s",
                 style: {
                   margin: 'var(--space-0_5)'
                 },

package/esm/alpha/select/Select.js

@@ -18,6 +18,7 @@ import { DefaultSelectDropdown } from './DefaultSelectDropdown';
 import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdownContents';
 import { DefaultSelectOption } from './DefaultSelectOption';
 import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
+import { defaultSelectSize } from './types';
 
 // Re-export all types for backward compatibility
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,6 +43,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     placeholder,
     helperText,
     compact,
+    size,
     label,
     labelVariant,
     accessibilityLabel = typeof label === 'string' ? label : 'Select dropdown',
@@ -83,6 +85,10 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     testID
   } = mergedProps;
   const hasMounted = useHasMounted();
+  // The dropdown keeps a binary density toggle instead of the t-shirt scale, so Select owns
+  // the translation: only the smallest control size renders a compact dropdown. The control
+  // still receives the raw `compact` because it needs it for legacy label placement.
+  const dropdownCompact = (size !== null && size !== void 0 ? size : compact ? 's' : defaultSelectSize) === 's';
   const [openInternal, setOpenInternal] = useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
   const open = openProp !== null && openProp !== void 0 ? openProp : openInternal;
   const setOpen = setOpenProp !== null && setOpenProp !== void 0 ? setOpenProp : setOpenInternal;
@@ -213,6 +219,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       readOnly: readOnly,
       removeSelectedOptionAccessibilityLabel: removeSelectedOptionAccessibilityLabel,
       setOpen: setOpen,
+      size: size,
       startNode: startNode,
       style: styles === null || styles === void 0 ? void 0 : styles.control,
       styles: controlStyles,
@@ -232,7 +239,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
         accessory: accessory,
         classNames: dropdownClassNames,
         clearAllLabel: clearAllLabel,
-        compact: compact,
+        compact: dropdownCompact,
         controlRef: refs.reference,
         disabled: disabled,
         emptyOptionsLabel: emptyOptionsLabel,

package/esm/alpha/select/types.js

@@ -1,3 +1,11 @@
+/**
+ * T-shirt size scale for the Select control. The Figma Select component set exposes
+ * three sizes (`s | m | l`); there is intentionally no `xs`.
+ */
+
+/** Size the Select control resolves to when neither `size` nor the deprecated `compact` is set. */
+export const defaultSelectSize = 'l';
+
 /**
  * Configuration for a single option in the Select component
  */

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

@@ -1,4 +1,4 @@
-const _excluded = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue"];
+const _excluded = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue", "size", "compact"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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; }
 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; }
@@ -21,15 +21,19 @@ function createSelectChipControlWrapper(_ref) {
     invertColorScheme,
     numberOfLines,
     maxWidth,
-    displayValue
+    displayValue,
+    size,
+    compact
   } = _ref;
   return /*#__PURE__*/memo(/*#__PURE__*/forwardRef((controlProps, controlRef) => {
     return /*#__PURE__*/_jsx(SelectChipControl, _objectSpread(_objectSpread({}, controlProps), {}, {
       ref: controlRef,
+      compact: compact,
       displayValue: displayValue,
       invertColorScheme: invertColorScheme,
       maxWidth: maxWidth,
-      numberOfLines: numberOfLines
+      numberOfLines: numberOfLines,
+      size: size
     }));
   }));
 }
@@ -44,15 +48,19 @@ const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, r
       invertColorScheme,
       numberOfLines,
       maxWidth,
-      displayValue
+      displayValue,
+      size,
+      compact
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper({
     invertColorScheme,
     numberOfLines,
     maxWidth,
-    displayValue
-  }), [displayValue, invertColorScheme, numberOfLines, maxWidth]);
+    displayValue,
+    size,
+    compact
+  }), [displayValue, invertColorScheme, numberOfLines, maxWidth, size, compact]);
   return /*#__PURE__*/_jsx(Select, _objectSpread({
     ref: ref,
     SelectControlComponent: WrappedSelectChipControl,

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

@@ -21,6 +21,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     hiddenSelectedOptionsLabel = 'more',
     label,
     compact,
+    size,
     invertColorScheme,
     numberOfLines,
     disabled,
@@ -112,6 +113,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onClick: () => setOpen(s => !s),
+    size: size,
     start: startNode,
     style: style,
     children: labelContent