@transferwise/components 0.0.0-experimental-8a855e9 → 0.0.0-experimental-841c8df

package/build/types/inputs/{SelectInput/SelectInput.types.d.ts → SelectInput.d.ts}

@@ -1,6 +1,7 @@
-import React, { ReactNode } from 'react';
-import { ButtonProps } from '../../button/Button.types';
-import { WithInputAttributesProps } from './SelectInput.contexts';
+import { ReactNode } from 'react';
+import { Merge } from '../utils';
+import { WithInputAttributesProps } from './contexts';
+import { ButtonProps } from '../button/Button.types';
 export interface SelectInputOptionItem<T = string> {
     type: 'option';
     value: T;
@@ -20,6 +21,22 @@ export interface SelectInputSeparatorItem {
     type: 'separator';
 }
 export type SelectInputItem<T = string> = SelectInputOptionItem<T> | SelectInputGroupItem<T> | SelectInputSeparatorItem;
+/**
+ * A prebuilt sort function for `sortFilteredOptions` that sorts options by relevance to the search query.
+ * Prioritizes: exact matches > starts with > contains > alphabetical.
+ *
+ * @param getLabel - Function to extract the label string from the option value. Defaults to using `title` property.
+ *
+ * @example
+ * ```tsx
+ * <SelectInput
+ *   filterable
+ *   sortFilteredOptions={sortByRelevance((value) => value.name)}
+ *   // ...
+ * />
+ * ```
+ */
+export declare function sortByRelevance<T>(getLabel?: (value: T) => string): (a: SelectInputOptionItem<T>, b: SelectInputOptionItem<T>, searchQuery: string) => number;
 export interface SelectInputProps<T = string, M extends boolean = false> {
     id?: string;
     /**
@@ -86,12 +103,21 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     onClose?: () => void;
     onClear?: () => void;
 }
-export type { SelectInputTriggerButtonElementType, SelectInputTriggerButtonProps, } from './TriggerButton';
-export type { SelectInputClearButtonProps } from './ClearButton';
-export type { SelectInputOptionContentProps } from './OptionContent';
-export type { SelectInputOptionProps } from './Option';
-export type { SelectInputItemViewProps } from './ItemView';
-export type { SelectInputGroupItemViewProps } from './ItemView/GroupItemView';
-export type { SelectInputOptionsProps } from './Options';
-export type { SelectInputOptionsContainerProps } from './Options/OptionsContainer';
-//# sourceMappingURL=SelectInput.types.d.ts.map
+export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, autocomplete, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, sortFilteredOptions, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
+export declare namespace SelectInput {
+    var sortByRelevance: typeof import("./SelectInput").sortByRelevance;
+}
+type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
+export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
+    as?: T;
+}>;
+export declare function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({ as, ...restProps }: SelectInputTriggerButtonProps<T>): import("react").JSX.Element;
+export interface SelectInputOptionContentProps {
+    title: React.ReactNode;
+    note?: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+export declare function SelectInputOptionContent({ title, note, description, icon, }: SelectInputOptionContentProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SelectInput.d.ts.map

package/build/types/inputs/SelectInput.d.ts.map

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

package/build/types/inputs/SelectInput.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.messages.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.messages.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAMG"}

package/build/types/inputs/{SelectInput/BottomSheet/SelectInputBottomSheet.d.ts → _BottomSheet.d.ts}

@@ -1,4 +1,4 @@
-export interface SelectInputBottomSheetProps {
+export interface BottomSheetProps {
     open: boolean;
     renderTrigger?: (args: {
         ref: React.RefCallback<Element>;
@@ -13,5 +13,5 @@ export interface SelectInputBottomSheetProps {
     onClose?: () => void;
     onCloseEnd?: () => void;
 }
-export declare function SelectInputBottomSheet({ open, renderTrigger, title, initialFocusRef, padding, children, onClose, onCloseEnd, }: SelectInputBottomSheetProps): import("react").JSX.Element;
-//# sourceMappingURL=SelectInputBottomSheet.d.ts.map
+export declare function BottomSheet({ open, renderTrigger, title, initialFocusRef, padding, children, onClose, onCloseEnd, }: BottomSheetProps): import("react").JSX.Element;
+//# sourceMappingURL=_BottomSheet.d.ts.map

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA4FlB"}

package/build/types/inputs/_ButtonInput.d.ts

@@ -0,0 +1,5 @@
+export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const ButtonInput: import("react").ForwardRefExoticComponent<Omit<ButtonInputProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | null>>;
+//# sourceMappingURL=_ButtonInput.d.ts.map

package/build/types/inputs/_ButtonInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_ButtonInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/_ButtonInput.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC;IAC7E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,oIAetB,CAAC"}

package/build/types/inputs/{SelectInput/Popover/SelectInputPopover.d.ts → _Popover.d.ts}

@@ -1,5 +1,5 @@
 import { type Placement } from '@floating-ui/react';
-export interface SelectInputPopoverProps {
+export interface PopoverProps {
     placement?: Placement;
     open: boolean;
     renderTrigger: (args: {
@@ -15,5 +15,5 @@ export interface SelectInputPopoverProps {
     onClose?: () => void;
     onCloseEnd?: () => void;
 }
-export declare function SelectInputPopover({ placement, open, renderTrigger, title, size, padding, children, onClose, onCloseEnd, }: SelectInputPopoverProps): import("react").JSX.Element;
-//# sourceMappingURL=SelectInputPopover.d.ts.map
+export declare function Popover({ placement, open, renderTrigger, title, size, padding, children, onClose, onCloseEnd, }: PopoverProps): import("react").JSX.Element;
+//# sourceMappingURL=_Popover.d.ts.map

package/build/types/inputs/_Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+BAmFd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8a855e9",
+  "version": "0.0.0-experimental-841c8df",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -88,8 +88,8 @@
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.26.3",
-    "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,34 +1,51 @@
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
+}
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);

package/src/criticalBanner/CriticalCommsBanner.less

@@ -1,51 +1,60 @@
-.np-theme-personal {
-  .critical-comms {
-    .alert-warning {
-      color: var(--color-contrast-overlay);
-      background-color: var(--color-sentiment-negative);
-
-      .np-text-title-body {
-        color: var(--color-contrast-overlay);
-      }
-    }
+.critical-comms {
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 
-    .status-circle.warning {
-      background-color: var(--color-background-screen);
+  .alert {
+    background-color: var(--color-sentiment-background-surface);
+    color: var(--color-sentiment-content-primary);
 
-      .status-icon {
-        color: var(--color-contrast-theme);
-      }
+    .np-text-title-body {
+      color: var(--color-sentiment-content-primary);
     }
+  }
 
-    .alert__message {
-      .alert__action {
-        margin-top: var(--size-16);
-      }
+  .status-circle.negative {
+    background-color: var(--color-background-screen);
+
+    .status-icon {
+      color: var(--color-content-primary);
     }
+  }
 
-    .wds-Button {
-      --Button-background: var(--color-contrast-overlay);
-      --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-      --Button-background-active: var(--color-sentiment-negative-secondary-active);
+  .alert__message {
+    .alert__action {
+      margin-top: var(--size-16);
     }
   }
 
+  .wds-Button {
+    --Button-color: var(--color-content-primary);
+    --Button-color-hover: var(--color-content-primary);
+    --Button-color-active: var(--color-content-primary);
+
+    --Button-background: var(--color-background-screen);
+    --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+    --Button-background-active: var(--color-sentiment-interactive-primary-active);
+  }
+
+  .alert-warning .wds-Button {
+    --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+    --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
+  }
 
   @media (--screen-md) {
-    .critical-comms {
-      .alert-warning {
-        .alert__message {
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-          width: 100%;
-
-          .alert__action {
-            margin-top: 0;
-            margin-left: var(--padding-small);
-          }
+    .alert-warning,
+    .alert-negative,
+    .alert-neutral {
+      .alert__message {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        .alert__action {
+          margin-top: 0;
+          margin-left: var(--padding-small);
         }
       }
     }
   }
-}
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -18,6 +18,21 @@ export const Basic = {
   },
 };
 
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" title="Your account is overdrawn" />
+      <CriticalCommsBanner {...args} sentiment="warning" title="Your account needs attention" />
+      <CriticalCommsBanner {...args} sentiment="neutral" title="Your transfer is being processed" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+};
+
 export const Variants: Story = {
   args: {
     title: 'Your account is overdrawn',

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,5 +1,16 @@
+import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';
+import { PropsWithChildren } from 'react';
+
 import Alert from '../alert';
 import { clsx } from 'clsx';
+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,64 @@ 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 iconConfig: {
+  sentiment: CriticalCommsBannerSentiment;
+  Icon: React.ElementType;
+  iconColor: 'light' | 'dark';
+}[] = [
+  { sentiment: Sentiment.NEGATIVE, Icon: AlertIcon, iconColor: 'light' },
+  { sentiment: Sentiment.WARNING, Icon: AlertIcon, iconColor: 'dark' },
+  { sentiment: Sentiment.NEUTRAL, Icon: ClockIcon, iconColor: 'dark' },
+];
+
+const iconBySentiment = Object.fromEntries(
+  iconConfig.map(({ sentiment, Icon, iconColor }) => [
+    sentiment,
+    <Circle
+      key={sentiment}
+      as={makeSurface(sentiment)}
+      size={32}
+      className={`status-circle ${sentiment}`}
+    >
+      <Icon className={`status-icon ${iconColor}`} />
+    </Circle>,
+  ]),
+) as Record<CriticalCommsBannerSentiment, React.ReactNode>;
+
+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, CriticalCommsBannerSentiment } from './CriticalCommsBanner';

package/src/inputs/{SelectInput/_stories/SelectInput.docs.mdx → SelectInput.docs.mdx}

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import { MoneyInput } from '..';
 
 <Meta title="Forms/SelectInput/Accessibility" />
 

package/src/inputs/SelectInput.less

@@ -0,0 +1,219 @@
+@import "./_BottomSheet.less";
+@import "./_ButtonInput.less";
+@import "./_Popover.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.np-select-input-placeholder {
+  color: var(--color-content-tertiary);
+}
+
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (--screen-sm) {
+    & {
+      max-height: 28rem /* 448px */;
+    }
+  }
+}
+
+.np-select-input-options-status {
+  display: flex;
+  align-items: center;
+  column-gap: var(--size-8);
+  padding: var(--size-8) var(--size-24) 0px;
+}
+
+.np-select-input-options-status-icon {
+  padding: 0 var(--size-4);
+  color: var(--color-content-tertiary);
+}
+
+.np-select-input-query-container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-8);
+}
+
+.np-select-input-listbox-container {
+  position: relative;
+  height: var(--initial-height);
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: var(--size-8);
+  overflow-y: auto;
+
+  @media (--screen-sm) {
+    & {
+      height: auto;
+    }
+  }
+
+  &--virtualized {
+    /* The wrapping element shrinks this as needed */
+    height: 100vh;
+  }
+
+  &--has-group {
+    scroll-padding-top: var(--size-32);
+  }
+}
+
+.np-select-input-listbox {
+  border-radius: var(--radius-small);
+  padding: var(--size-8);
+
+  .focus-ring();
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+
+  .np-select-input-listbox-container--virtualized & {
+    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+    overflow-y: auto;
+    contain: strict;
+    height: 100%;
+  }
+}
+
+.np-select-input-separator-item {
+  margin: var(--size-8);
+  border-top-width: 1px;
+}
+
+.np-select-input-group-item {
+  &--without-needle:first-child {
+    margin-top: calc(-1 * var(--size-8));
+  }
+}
+
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: var(--color-background-elevated);
+}
+
+.np-select-input-option-container {
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  column-gap: var(--size-8);
+  border-radius: var(--radius-small);
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
+
+  &:focus {
+    outline: none;
+  }
+
+  &--active {
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  }
+
+  &--disabled {
+    opacity: 0.45;
+  }
+}
+
+.np-select-input-option-check {
+  &--not-selected {
+    visibility: hidden;
+  }
+}
+
+.np-select-input-option {
+  flex: 1;
+}
+
+.np-select-input-option-content-container {
+  display: flex;
+  align-items: center;
+  column-gap: var(--size-8);
+  color: var(--color-content-primary);
+}
+
+.np-select-input-option-content-icon {
+  display: flex;
+
+  &--not-within-trigger {
+    align-self: flex-start;
+  }
+}
+
+.np-select-input-option-content-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.np-select-input-option-content-text-secondary {
+  color: var(--color-content-secondary);
+}
+
+.np-select-input-option-content-text-within-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.np-select-input-option-content-text-line-1 {
+  > :not([hidden]) ~ :not([hidden]) {
+    margin-right: var(--size-8);
+    margin-left: var(--size-8);
+  }
+}
+
+.np-select-input-footer {
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
+
+.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);
+}