@transferwise/components 45.17.0 → 45.18.0

package/src/button/__snapshots__/Button.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`Button alternative states renders as block if block is true 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-block np-btn-block btn-accent btn-priority-1"
     type="button"
   >
@@ -11,24 +12,10 @@ exports[`Button alternative states renders as block if block is true 1`] = `
 </div>
 `;
 
-exports[`Button alternative states renders as loading if loading is true 1`] = `
-<div>
-  <button
-    class="btn btn-md np-btn np-btn-md btn-loading disabled btn-accent btn-priority-1"
-    disabled=""
-    type="button"
-  >
-    Send money
-    <span
-      class="btn-loader m-l-2"
-    />
-  </button>
-</div>
-`;
-
 exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -40,6 +27,7 @@ exports[`Button by default renders a medium button of type accent and priority p
 exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
 <div>
   <a
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     href="#"
   >
@@ -51,6 +39,7 @@ exports[`Button by default renders an anchor tag with button styles of type acce
 exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
   >
@@ -62,6 +51,7 @@ exports[`Button deprecated types renders danger as negative buttons with priorit
 exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
   >
@@ -73,6 +63,7 @@ exports[`Button deprecated types renders link as accent buttons with priority te
 exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
   >
@@ -84,6 +75,7 @@ exports[`Button deprecated types renders pay as positive buttons and logs a warn
 exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -95,6 +87,7 @@ exports[`Button deprecated types renders primary as accent buttons and logs a wa
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
   >
@@ -106,6 +99,7 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
   >
@@ -117,6 +111,7 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities renders primary buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -128,6 +123,7 @@ exports[`Button priorities renders primary buttons 1`] = `
 exports[`Button priorities renders primary buttons 2`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
   >
@@ -139,6 +135,7 @@ exports[`Button priorities renders primary buttons 2`] = `
 exports[`Button priorities renders primary buttons 3`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
   >
@@ -150,6 +147,7 @@ exports[`Button priorities renders primary buttons 3`] = `
 exports[`Button priorities renders secondary buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-2"
     type="button"
   >
@@ -161,6 +159,7 @@ exports[`Button priorities renders secondary buttons 1`] = `
 exports[`Button priorities renders secondary buttons 2`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
   >
@@ -172,6 +171,7 @@ exports[`Button priorities renders secondary buttons 2`] = `
 exports[`Button priorities renders secondary buttons 3`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
   >
@@ -183,6 +183,7 @@ exports[`Button priorities renders secondary buttons 3`] = `
 exports[`Button priorities renders tertiary buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
   >
@@ -194,6 +195,7 @@ exports[`Button priorities renders tertiary buttons 1`] = `
 exports[`Button sizes renders large buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-lg np-btn np-btn-lg btn-accent btn-priority-1"
     type="button"
   >
@@ -205,6 +207,7 @@ exports[`Button sizes renders large buttons 1`] = `
 exports[`Button sizes renders medium buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -216,6 +219,7 @@ exports[`Button sizes renders medium buttons 1`] = `
 exports[`Button sizes renders small buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-sm np-btn np-btn-sm btn-accent btn-priority-1"
     type="button"
   >
@@ -227,6 +231,7 @@ exports[`Button sizes renders small buttons 1`] = `
 exports[`Button types renders accent buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -238,6 +243,7 @@ exports[`Button types renders accent buttons 1`] = `
 exports[`Button types renders negative buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
   >
@@ -249,6 +255,7 @@ exports[`Button types renders negative buttons 1`] = `
 exports[`Button types renders positive buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
   >

package/src/common/Option/Option.css

@@ -1 +1 @@
-.np-option:has(:focus-visible){--ring-outline-offset:0;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-option:has(:focus-visible) :focus-visible{outline:none}.np-option .circle-sm{height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-option__title{color:#37517e;color:var(--color-content-primary);display:inline-block;font-size:1rem;font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;line-height:1.5;line-height:var(--line-height-body);margin:0}.np-option__body{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.42857;margin-top:4px;margin-top:var(--size-4)}.np-option__sm-media.decision .media-left{display:block}.np-option__no-media-circle{display:flex;justify-content:center;max-width:64px;max-width:var(--size-64);min-width:48px;min-width:var(--size-48)}.np-option__no-media-circle>*{max-height:76px}button.np-option{background-color:transparent;text-align:left;width:100%}[dir=rtl] button.np-option{text-align:right}.np-theme-personal .np-option .circle{overflow:visible}.np-theme-personal .np-option .circle-sm{height:48px;height:var(--size-48);line-height:48px;line-height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-option__title{display:inline-block}.np-theme-personal .np-option__body{margin:4px 0 0;margin:var(--size-4) 0 0;text-decoration:none}.np-theme-personal .np-option__container-aligned{margin-left:-16px;margin-left:calc(var(--space-content-horizontal)*-1);margin-right:-16px;margin-right:calc(var(--space-content-horizontal)*-1);max-width:none;width:auto}@media (min-width:576px){.np-theme-personal .np-option{border-radius:10px;border-radius:var(--radius-small)}}
+.np-option:has(:focus-visible){--ring-outline-offset:0;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-option:has(:focus-visible) :focus-visible{outline:none}.np-option .circle-sm{height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-option__title{color:#37517e;color:var(--color-content-primary);font-size:1rem;font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;line-height:1.5;line-height:var(--line-height-body);margin:0}.np-option__body{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.42857;margin-top:4px;margin-top:var(--size-4)}.np-option__sm-media.decision .media-left{display:block}.np-option__no-media-circle{display:flex;justify-content:center;max-width:64px;max-width:var(--size-64);min-width:48px;min-width:var(--size-48)}.np-option__no-media-circle>*{max-height:76px}button.np-option{background-color:transparent;text-align:left;width:100%}[dir=rtl] button.np-option{text-align:right}.np-theme-personal .np-option .circle{overflow:visible}.np-theme-personal .np-option .circle-sm{height:48px;height:var(--size-48);line-height:48px;line-height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-option__body{margin:4px 0 0;margin:var(--size-4) 0 0;text-decoration:none}.np-theme-personal .np-option__container-aligned{margin-left:-16px;margin-left:calc(var(--space-content-horizontal)*-1);margin-right:-16px;margin-right:calc(var(--space-content-horizontal)*-1);max-width:none;width:auto}@media (min-width:576px){.np-theme-personal .np-option{border-radius:10px;border-radius:var(--radius-small)}}

package/src/common/Option/Option.less

@@ -23,7 +23,6 @@
     letter-spacing: 0;
     line-height: var(--line-height-body);
     margin: 0;
-    display: inline-block;
   }
 
   &__body {
@@ -72,10 +71,6 @@ button.np-option {
       line-height: var(--size-48);
     }
 
-    &__title {
-      display: inline-block;
-    }
-
     &__body {
       margin: var(--size-4) 0 0;
       text-decoration: none;

package/src/common/index.js

@@ -24,3 +24,4 @@ export { FileType } from './fileType';
 export { Key } from './key';
 export * from './locale';
 export * from './commonProps';
+export * from './randomId';

package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+
+export interface PolymorphicWithOverridesProps {
+  __overrides: {
+    as: React.ElementType;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+/**
+ * For overcoming the limitations of third-party components with an `as` prop.
+ */
+export const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(
+  { __overrides: { as: Element, ...restOverrides }, ...restProps }: PolymorphicWithOverridesProps,
+  ref: React.ForwardedRef<Element>,
+) {
+  return <Element ref={ref} {...restProps} {...restOverrides} />;
+});

package/src/common/randomId.ts

@@ -0,0 +1,14 @@
+/**
+ * generateRandomId() function
+ *
+ * This function generates a random string of characters that can be used as
+ * an ID.
+ *
+ * @returns {string} A random string of characters.
+ * @example
+ * const id = generateRandomId();
+ * // id will be a random string of characters, such as "id-4711".
+ */
+export const generateRandomId = (): string => {
+  return `id-${Math.random().toString(36).slice(7)}`;
+};

package/src/dateInput/DateInput.story.tsx

@@ -16,9 +16,6 @@ export default {
       buttonProps: {
         'aria-label': 'Select month',
       },
-      dropdownProps: {
-        'aria-label': 'Month options',
-      },
     },
   },
   tags: ['autodocs'],

package/src/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "neptune.Button.loadingAriaLabel": "loading",
   "neptune.Chips.ariaLabel": "Clear {choice}",
   "neptune.ClearButton.ariaLabel": "Clear",
   "neptune.CloseButton.ariaLabel": "Close",

package/src/index.ts

@@ -5,9 +5,12 @@ export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
+  SelectInputGroupItem,
   SelectInputItem,
   SelectInputOptionContentProps,
+  SelectInputOptionItem,
   SelectInputProps,
+  SelectInputSeparatorItem,
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';

package/src/inputs/SelectInput.css

@@ -1 +1 @@
-.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.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:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:-moz-min-content;min-width:min-content;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{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:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.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{border-inline-start-width:1px;height:24px;height:var(--size-24)}
+.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.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:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--selected{box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{color:var(--color-interactive-primary)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--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:#5d7079;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-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.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{border-inline-start-width:1px;height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -93,6 +93,10 @@
   padding: var(--size-12) var(--size-16);
   color: var(--color-content-primary);
 
+  &--selected {
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  }
+
   &--active {
     background-color: var(--color-background-screen-hover);
   }
@@ -103,6 +107,8 @@
 }
 
 .np-select-input-option-check {
+  color: var(--color-interactive-primary);
+  
   &--not-selected {
     visibility: hidden;
   }
@@ -122,7 +128,7 @@
 .np-select-input-option-content-icon {
   display: flex;
 
-  &--not-compact {
+  &--not-within-trigger {
     align-self: flex-start;
   }
 }
@@ -138,7 +144,7 @@
   color: var(--color-content-secondary);
 }
 
-.np-select-input-option-content-text-compact {
+.np-select-input-option-content-text-within-trigger {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/inputs/SelectInput.story.tsx

@@ -1,13 +1,20 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Calendar } from '@transferwise/icons';
+import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
+import classNames from 'classnames';
 import { useState } from 'react';
 
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import Modal from '../modal';
+import { within, userEvent } from '../test-utils';
 
-import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
+import {
+  SelectInput,
+  type SelectInputItem,
+  SelectInputOptionContent,
+  SelectInputTriggerButton,
+} from './SelectInput';
 
 export default {
   component: SelectInput,
@@ -78,11 +85,11 @@ export const Basic: StoryObj<{
             ])
             .slice(0, -1)}
           value={selectedMonth}
-          renderValue={(month, compact) => (
+          renderValue={(month, withinTrigger) => (
             <SelectInputOptionContent
               title={month.name}
               note="Note"
-              description={compact ? undefined : `Month #${month.id}`}
+              description={withinTrigger ? undefined : `Month #${month.id}`}
               icon={<Calendar size={24} />}
             />
           )}
@@ -137,7 +144,7 @@ export const Months: StoryObj<{
   onClear: () => void;
 }> = {
   render: function Story({ onChange, onClear }) {
-    const [selectedMonth, setSelectedMonth] = useState<Month | null>(null);
+    const [selectedMonth, setSelectedMonth] = useState<Month | null>(months[0]);
 
     return (
       <div className="d-flex flex-column">
@@ -171,6 +178,11 @@ export const Months: StoryObj<{
   },
 };
 
+Months.play = ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  userEvent.click(canvas.getByText('January'));
+};
+
 interface Currency {
   code: string;
   name: string;
@@ -265,6 +277,41 @@ export const Currencies: StoryObj<{
   },
 };
 
+export const CustomTrigger: StoryObj = {
+  render: function Story() {
+    return (
+      <div>
+        <SelectInput
+          placeholder="Month"
+          items={months.map((month) => ({
+            type: 'option',
+            value: month,
+          }))}
+          renderValue={(month, withinTrigger) =>
+            withinTrigger ? month.name : <SelectInputOptionContent title={month.name} />
+          }
+          renderTrigger={({ content, className }) => (
+            <SelectInputTriggerButton
+              className={classNames(
+                className,
+                'btn-unstyled np-text-link-large align-items-center',
+              )}
+              style={{ display: 'inline-flex', columnGap: '0.25rem' }}
+            >
+              {content}
+              <ChevronDown size={16} />
+            </SelectInputTriggerButton>
+          )}
+        />
+      </div>
+    );
+  },
+  play: ({ canvasElement }) => {
+    const triggerButton = within(canvasElement).getByRole('button');
+    userEvent.click(triggerButton);
+  },
+};
+
 export const WithinDrawer: StoryObj<{
   onChange: (value: Currency) => void;
 }> = {