@transferwise/components 0.0.0-experimental-a18466a → 0.0.0-experimental-d6b038b

package/src/criticalBanner/CriticalCommsBanner.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+
+import CriticalCommsBanner from './CriticalCommsBanner';
+
+mockMatchMedia();
+
+describe('CriticalCommsBanner', () => {
+  const defaultProps = {
+    title: 'Test title',
+    subtitle: 'Test subtitle',
+    action: { label: 'Take action', href: 'https://wise.com' },
+  };
+
+  it('renders with default negative sentiment', () => {
+    render(<CriticalCommsBanner {...defaultProps} />);
+
+    expect(screen.getByText('Test title')).toBeInTheDocument();
+    expect(screen.getByText('Test subtitle')).toBeInTheDocument();
+    expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
+  });
+
+  it('renders the action', () => {
+    render(<CriticalCommsBanner {...defaultProps} />);
+
+    expect(screen.getByText('Take action')).toBeInTheDocument();
+  });
+
+  describe('sentiment variants', () => {
+    it('renders negative sentiment with correct alert type and icon', () => {
+      render(<CriticalCommsBanner {...defaultProps} sentiment="negative" />);
+
+      expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
+      // Custom icon replaces the default StatusIcon
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
+    });
+
+    it('renders warning sentiment with correct alert type and icon', () => {
+      render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);
+
+      expect(screen.getByTestId('alert')).toHaveClass('alert-warning');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
+    });
+
+    it('renders neutral sentiment with correct alert type and icon', () => {
+      render(<CriticalCommsBanner {...defaultProps} sentiment="neutral" />);
+
+      expect(screen.getByTestId('alert')).toHaveClass('alert-neutral');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
+    });
+  });
+
+  it('wraps content in SentimentSurface with elevated emphasis', () => {
+    render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);
+
+    const surface = screen.getByTestId('alert').closest('.critical-comms');
+    expect(surface).toHaveClass('wds-sentiment-surface');
+    expect(surface).toHaveClass('wds-sentiment-surface-warning-elevated');
+  });
+
+  it('applies className to the wrapper', () => {
+    render(<CriticalCommsBanner {...defaultProps} className="custom-class" />);
+
+    const surface = screen.getByTestId('alert').closest('.critical-comms');
+    expect(surface).toHaveClass('custom-class');
+  });
+});

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,5 +1,16 @@
-import Alert from '../alert';
+import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { PropsWithChildren } from 'react';
+
+import Alert from '../alert';
+import { Sentiment } from '../common';
+import Circle, { CircleProps } from '../common/circle';
+import SentimentSurface from '../sentimentSurface';
+
+export type CriticalCommsBannerSentiment =
+  | `${Sentiment.WARNING}`
+  | `${Sentiment.NEGATIVE}`
+  | `${Sentiment.NEUTRAL}`;
 
 export type CriticalCommsBannerProps = {
   title: string;
@@ -9,20 +20,58 @@ export type CriticalCommsBannerProps = {
     href?: string;
     onClick?: () => void;
   };
+  sentiment?: CriticalCommsBannerSentiment;
   className?: string;
 };
 
-function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
+const makeSurface = (sentiment: CriticalCommsBannerSentiment) => {
+  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
+    <SentimentSurface as="span" emphasis="elevated" sentiment={sentiment} {...props} />
+  );
+  Surface.displayName = `CriticalCommsSurface(${sentiment})`;
+  return Surface;
+};
+
+const iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {
+  [Sentiment.NEGATIVE]: (
+    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className="status-circle negative">
+      <AlertIcon className="status-icon light" />
+    </Circle>
+  ),
+  [Sentiment.WARNING]: (
+    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className="status-circle warning">
+      <AlertIcon className="status-icon dark" />
+    </Circle>
+  ),
+  [Sentiment.NEUTRAL]: (
+    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className="status-circle neutral">
+      <ClockIcon className="status-icon dark" />
+    </Circle>
+  ),
+};
+
+function CriticalCommsBanner({
+  title,
+  subtitle,
+  action,
+  sentiment = Sentiment.NEGATIVE,
+  className,
+}: CriticalCommsBannerProps) {
   return (
-    <div className={clsx('critical-comms', className)}>
+    <SentimentSurface
+      sentiment={sentiment}
+      emphasis="elevated"
+      className={clsx('critical-comms', className)}
+    >
       <Alert
         title={title}
         message={subtitle}
         action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
         className={className}
-        type="warning"
+        type={sentiment}
+        icon={iconBySentiment[sentiment]}
       />
-    </div>
+    </SentimentSurface>
   );
 }
 

package/src/criticalBanner/index.ts

@@ -1 +1,2 @@
 export { default } from './CriticalCommsBanner';
+export type { CriticalCommsBannerProps } from './CriticalCommsBanner';

package/src/dateInput/DateInput.tsx

@@ -27,9 +27,7 @@ export interface DateInputProps {
   /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */
   'aria-label'?: string;
   'aria-labelledby'?: string;
-  /** @default false */
   disabled?: boolean;
-  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
@@ -40,9 +38,7 @@ export interface DateInputProps {
   monthLabel?: string;
   yearLabel?: string;
   yearAutoComplete?: string;
-  /** @default 'long' */
   monthFormat?: `${MonthFormat}`;
-  /** @default 'day-month-year' */
   mode?: `${DateMode}`;
   placeholders?: {
     day?: string;
@@ -50,7 +46,6 @@ export interface DateInputProps {
     year?: string;
   };
   id?: string;
-  /** @default {} */
   selectProps?: Partial<SelectInputProps<number | null>>;
 }
 

package/src/dimmer/Dimmer.tsx

@@ -23,18 +23,12 @@ const dimmerManager = new DimmerManager();
 
 export type DimmerProps = CommonProps & {
   children?: ReactNode;
-  /** @default false */
   disableClickToClose?: boolean;
   contentPosition?: PositionTop | PositionCenter | PositionBottom;
-  /** @default false */
   fadeContentOnEnter?: boolean;
-  /** @default false */
   fadeContentOnExit?: boolean;
-  /** @default false */
   open?: boolean;
-  /** @default false */
   scrollable?: boolean;
-  /** @default false */
   transparent?: boolean;
   onClose?: (event: KeyboardEvent | MouseEvent) => void;
   onExited?: () => void;

package/src/drawer/Drawer.tsx

@@ -21,15 +21,9 @@ export type DrawerProps = {
   footerContent?: React.ReactNode;
   /** The content to appear in the drawer header. */
   headerTitle?: React.ReactNode;
-  /**
-   * The status of Drawer either open or not.
-   * @default false
-   */
+  /** The status of Drawer either open or not. */
   open?: boolean;
-  /**
-   * The placement of Drawer on the screen either left or right. On mobile it will default to bottom.
-   * @default 'right'
-   */
+  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
   position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
   /** The action to perform on close click. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;

package/src/field/Field.tsx

@@ -16,9 +16,8 @@ export type FieldProps = {
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
-  /** @default true */
   required?: boolean;
-  /** @deprecated Use `description` prop instead. */
+  /** @deprecated use `description` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
   /**
@@ -28,13 +27,11 @@ export type FieldProps = {
   messageIconLabel?: string;
   /**
    * If true, shows a loading spinner in place of the message icon of the InlinePrompt
-   * @default false
    */
   messageLoading?: boolean;
   description?: React.ReactNode;
-  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */
+  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
-  /** @default Sentiment.NEUTRAL */
   sentiment?: InlinePromptProps['sentiment'];
   className?: string;
   children?: React.ReactNode;

package/src/flowNavigation/FlowNavigation.tsx

@@ -14,12 +14,9 @@ import IconButton from '../iconButton';
 import { ArrowLeft } from '@transferwise/icons';
 
 export interface FlowNavigationProps {
-  /** @default 0 */
   activeStep?: number;
   avatar?: React.ReactNode;
-  /** @default <Logo /> */
   logo?: React.ReactNode;
-  /** @default false */
   done?: boolean;
   /** Called when the close button is clicked. If not provided the close button won't show */
   onClose?: () => void;

package/src/header/Header.tsx

@@ -29,17 +29,13 @@ export interface HeaderProps extends CommonProps {
    *   If this condition is not met, a warning will be logged to the console.
    *
    * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
-   * @default 'h5'
    */
   as?: Heading | 'legend' | 'header';
 
   /** Required prop to set the title of the Header. */
   title: ReactNode;
 
-  /**
-   * Optional prop to specify the level of the Header
-   * @default 'group'
-   */
+  /** Optional prop to specify the level of the Header */
   level?: 'section' | 'group';
 
   className?: string;

package/src/iconButton/IconButton.tsx

@@ -4,11 +4,8 @@ import Circle from '../common/circle';
 import { clsx } from 'clsx';
 
 export type Props = {
-  /** @default 48 */
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
-  /** @default 'primary' */
   priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
-  /** @default 'default' */
   type?: 'default' | 'negative';
   'data-testid'?: string;
 } & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &

package/src/index.ts

@@ -156,6 +156,7 @@ export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/bottomSheet';
 export { default as BaseCard } from './common/baseCard';
 export { default as CriticalCommsBanner } from './criticalBanner';
+export type { CriticalCommsBannerProps } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
 export { default as Decision } from './decision';

package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css

@@ -0,0 +1,96 @@
+.np-bottom-sheet-v2-container {
+  position: relative;
+  z-index: 1060;
+}
+.np-bottom-sheet-v2-backdrop {
+  position: fixed;
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
+}
+.np-bottom-sheet-v2 {
+  position: fixed;
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.np-bottom-sheet-v2-content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-top-left-radius: 32px;
+  /* TODO: Tokenize */
+  border-top-right-radius: 32px;
+  /* TODO: Tokenize */
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.np-bottom-sheet-v2-content:focus {
+  outline: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
+.np-bottom-sheet-v2-header {
+  align-self: flex-end;
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-bottom-sheet-v2-content-inner {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
+  row-gap: 8px;
+  row-gap: var(--size-8);
+  overflow: auto;
+}
+.np-bottom-sheet-v2-content-inner--has-title {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.np-bottom-sheet-v2-content-inner--padding-md {
+  padding: 16px;
+  padding: var(--size-16);
+  padding-top: 0px;
+}
+.np-bottom-sheet-v2-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-bottom-sheet-v2-body {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}

package/src/inputs/{_BottomSheet.tsx → SelectInput/BottomSheet/SelectInputBottomSheet.tsx}

@@ -12,12 +12,12 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { Fragment, useState } from 'react';
 
-import { CloseButton } from '../common/closeButton';
-import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
-import { PreventScroll } from '../common/preventScroll/PreventScroll';
-import { Size } from '../common/propsValues/size';
+import { CloseButton } from '../../../common/closeButton';
+import { useVirtualKeyboard } from '../../../common/hooks/useVirtualKeyboard';
+import { PreventScroll } from '../../../common/preventScroll/PreventScroll';
+import { Size } from '../../../common/propsValues/size';
 
-export interface BottomSheetProps {
+export interface SelectInputBottomSheetProps {
   open: boolean;
   renderTrigger?: (args: {
     ref: React.RefCallback<Element>;
@@ -33,7 +33,7 @@ export interface BottomSheetProps {
   onCloseEnd?: () => void;
 }
 
-export function BottomSheet({
+export function SelectInputBottomSheet({
   open,
   renderTrigger,
   title,
@@ -42,7 +42,7 @@ export function BottomSheet({
   children,
   onClose,
   onCloseEnd,
-}: BottomSheetProps) {
+}: SelectInputBottomSheetProps) {
   useVirtualKeyboard(open);
 
   const { refs, context } = useFloating<Element>({

package/src/inputs/SelectInput/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputBottomSheet } from './SelectInputBottomSheet';
+export type { SelectInputBottomSheetProps } from './SelectInputBottomSheet';

package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css

@@ -0,0 +1,16 @@
+.np-button-input {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+  align-content: center;
+  border-radius: 10px;
+  border-radius: var(--size-10);
+  text-align: start;
+}
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}

package/src/inputs/{_ButtonInput.tsx → SelectInput/ButtonInput/SelectInputButtonInput.tsx}

@@ -1,15 +1,15 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
-import { useInputPaddings } from './InputGroup';
-import { inputClassNameBase } from './_common';
+import { useInputPaddings } from '../../InputGroup';
+import { inputClassNameBase } from '../../_common';
 
-export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
+export interface SelectInputButtonInputProps extends React.ComponentPropsWithRef<'button'> {
   size?: 'sm' | 'md' | 'lg';
 }
 
-export const ButtonInput = forwardRef(function ButtonInput(
-  { size = 'md', className, style, ...restProps }: ButtonInputProps,
+export const SelectInputButtonInput = forwardRef(function ButtonInput(
+  { size = 'md', className, style, ...restProps }: SelectInputButtonInputProps,
   ref: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const inputPaddings = useInputPaddings();

package/src/inputs/SelectInput/ButtonInput/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputButtonInput } from './SelectInputButtonInput';
+export type { SelectInputButtonInputProps } from './SelectInputButtonInput';

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css

@@ -0,0 +1,46 @@
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+}
+.np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+}
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+  display: inline-flex;
+  height: 24px;
+  height: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */;
+  /* TODO: Tokenize */
+}
+.np-select-input-addon--interactive {
+  pointer-events: auto;
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}
+.np-select-input-addon--interactive:hover {
+  color: #b5b7ba;
+  color: var(--color-interactive-secondary-hover);
+}
+.np-select-input-addon--interactive:focus {
+  outline: none;
+}
+.np-select-input-addon--interactive:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less

@@ -0,0 +1,40 @@
+@import (reference) "../../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-inline-start: var(--size-4);
+  }
+}
+
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+
+  display: inline-flex;
+  height: var(--size-24);
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */; /* TODO: Tokenize */
+
+  &--interactive {
+    pointer-events: auto;
+    color: var(--color-interactive-secondary);
+
+    &:hover {
+      color: var(--color-interactive-secondary-hover);
+    }
+
+    .focus-ring();
+  }
+}
+
+.np-select-input-addon-separator {
+  height: var(--size-24);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx

@@ -0,0 +1,29 @@
+import { Cross } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { useIntl } from 'react-intl';
+import dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';
+
+export interface SelectInputClearButtonProps extends Pick<
+  React.ComponentPropsWithoutRef<'button'>,
+  'className' | 'onClick'
+> {}
+
+/**
+ * A button component used to clear the selected value in a SelectInput.
+ */
+export function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
+  const intl = useIntl();
+
+  return (
+    <button
+      type="button"
+      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
+      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
+      onClick={onClick}
+    >
+      <Cross size={16} />
+    </button>
+  );
+}
+
+// Type is already exported above

package/src/inputs/SelectInput/ClearButton/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputClearButton } from './SelectInputClearButton';
+export type { SelectInputClearButtonProps } from './SelectInputClearButton';

package/src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx

@@ -0,0 +1,74 @@
+import { ChevronDown } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { InputGroup } from "../../InputGroup";
+import { SelectInputClearButton } from '../ClearButton';
+import { SelectInputTriggerButton } from '../TriggerButton';
+import { SelectInputProps } from '../SelectInput.types';
+import { SelectInputButtonInput } from '../ButtonInput';
+
+export interface SelectInputDefaultRenderTriggerProps {
+  content: React.ReactNode;
+  placeholderShown: boolean;
+  clear: (() => void) | undefined;
+  disabled: boolean;
+  size: 'sm' | 'md' | 'lg';
+  className: string | undefined;
+}
+
+/**
+ * Default render function for the SelectInput trigger.
+ * Displays the selected value or placeholder with clear button and dropdown indicator.
+ */
+export function SelectInputDefaultRenderTrigger({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  size,
+  className,
+}: SelectInputDefaultRenderTriggerProps) {
+  return (
+    <InputGroup
+      addonEnd={{
+        content: (
+          <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
+            {clear != null && !placeholderShown ? (
+              <>
+                <SelectInputClearButton
+                  onClick={(event) => {
+                    event.preventDefault();
+                    clear();
+                  }}
+                />
+                <span className="np-select-input-addon-separator" />
+              </>
+            ) : null}
+            <span className="np-select-input-addon">
+              <ChevronDown size={16} />
+            </span>
+          </span>
+        ),
+        initialContentWidth: 24 + 4,
+        padding: 'sm',
+      }}
+      disabled={disabled}
+      className={className}
+    >
+      <SelectInputTriggerButton as={SelectInputButtonInput} size={size}>
+        <span
+          className={clsx(
+            'np-select-input-content',
+            placeholderShown && 'np-select-input-placeholder',
+          )}
+        >
+          {content}
+        </span>
+      </SelectInputTriggerButton>
+    </InputGroup>
+  );
+}
+
+export const DefaultRenderTrigger =
+  SelectInputDefaultRenderTrigger satisfies SelectInputProps['renderTrigger'];