@transferwise/components 46.165.5 → 46.167.0

package/src/DateInput/_stories/DateInput.rtl.test.story.tsx

@@ -57,6 +57,51 @@ export const Sizes: Story = {
     },
   }),
 };
+export const MobileSizes: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <DateInput
+          size="sm"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          size="md"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          size="lg"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          mode="month-year"
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    viewport: 'smallMobile',
+    fixedRows: { heights: [13, 16, 21] },
+    i18n: {
+      dayLabel: { en: 'Day', ar: 'اليوم' },
+      monthLabel: { en: 'Month', ar: 'الشهر' },
+      yearLabel: { en: 'Year', ar: 'السنة' },
+    },
+  }),
+};
 
 export const OpenDropdown: Story = {
   render: () => {

package/src/Decision/Decision.css

@@ -1,9 +1,10 @@
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small .np-text-title-subsection {
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-title);
+.np-decision__tile--small .np-text-title-subsection,
+.np-decision__tile--small .wds-text-title-subsection {
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
 }
 .np-decision:not(.flex-column) {
   gap: var(--size-24);

package/src/Decision/Decision.less

@@ -4,9 +4,10 @@
   }
 
   &__tile--small {
-    .np-text-title-subsection {
-      font-size: var(--font-size-16);
-      line-height: var(--line-height-title);
+    .np-text-title-subsection,
+    .wds-text-title-subsection {
+      font-size: var(--wds-font-size-body-large);
+      line-height: var(--wds-line-height-body-large);
     }
   }
 

package/src/DefinitionList/_stories/DefinitionList.story.tsx

@@ -32,7 +32,7 @@ const definitions = [
   },
   {
     title: 'Use wrapper elements to style',
-    value: <span className="np-text-title-subsection">89.45GBP</span>,
+    value: <span className="wds-text-title-subsection">89.45GBP</span>,
     key: 'second',
   },
   {

package/src/Display/Display.test.tsx

@@ -0,0 +1,43 @@
+import { Typography } from '../common';
+import { render, screen } from '../test-utils';
+
+import Display from '.';
+
+describe('Display', () => {
+  it('testing default state', () => {
+    render(<Display>Test</Display>);
+    const copy = screen.getByText('Test');
+    expect(copy.tagName).toBe('H1');
+    expect(copy).toHaveClass(
+      'np-display',
+      `np-text-${Typography.DISPLAY_LARGE}`,
+      `wds-text-${Typography.DISPLAY_LARGE}`,
+    );
+  });
+
+  it('renders both typography classes for the given type', () => {
+    render(<Display type={Typography.DISPLAY_NUMBER_MEDIUM}>Test</Display>);
+    expect(screen.getByText('Test')).toHaveClass(
+      `np-text-${Typography.DISPLAY_NUMBER_MEDIUM}`,
+      `wds-text-${Typography.DISPLAY_NUMBER_MEDIUM}`,
+    );
+  });
+
+  it('renders only the legacy class for display-extra-large, which has no locale-aware style', () => {
+    render(<Display type={Typography.DISPLAY_EXTRA_LARGE}>Test</Display>);
+    const copy = screen.getByText('Test');
+    expect(copy).toHaveClass(`np-text-${Typography.DISPLAY_EXTRA_LARGE}`);
+    expect(copy).not.toHaveClass(`wds-text-${Typography.DISPLAY_EXTRA_LARGE}`);
+  });
+
+  it('enforces tag via `as` prop and merges `className`', () => {
+    render(
+      <Display as="h3" className="custom">
+        Test
+      </Display>,
+    );
+    const copy = screen.getByText('Test');
+    expect(copy.tagName).toBe('H3');
+    expect(copy).toHaveClass('custom', `wds-text-${Typography.DISPLAY_LARGE}`);
+  });
+});

package/src/Display/Display.tsx

@@ -18,7 +18,17 @@ function Display({
   id,
 }: DisplayProps) {
   return (
-    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
+    <Heading
+      id={id}
+      className={clsx(
+        'np-display',
+        `np-text-${type}`,
+        // display-extra-large has no locale-aware equivalent
+        type !== Typography.DISPLAY_EXTRA_LARGE && `wds-text-${type}`,
+        'text-primary',
+        className,
+      )}
+    >
       {children}
     </Heading>
   );

package/src/Display/_stories/Display.story.tsx

@@ -118,27 +118,42 @@ export const Basic = () => {
 export const Numbers = () => {
   return (
     <>
-      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1050.6} currency="UAH" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={10.17} currency="JPY" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={0.01} currency="EUR" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1000000} currency="EUR" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1000000} currency="GBP" />
-      </Display>
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number Small</Title>
+        <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+          <Money amount={1050.6} currency="UAH" />
+        </Display>
+        <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+          <Money amount={10.17} currency="JPY" />
+        </Display>
+      </section>
+
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number Medium</Title>
+        <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+          <Money amount={0.01} currency="EUR" />
+        </Display>
+        <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+          <Money amount={1000000} currency="EUR" />
+        </Display>
+      </section>
+
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number Large</Title>
+        <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+          <Money amount={1000000} currency="GBP" />
+        </Display>
+        <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+          <Money amount={1050.6} currency="UAH" />
+        </Display>
+      </section>
+
+      <section className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>Display Number (Deprecated)</Title>
+        <Display type={Typography.DISPLAY_NUMBER}>
+          <Money amount={1050.6} currency="UAH" />
+        </Display>
+      </section>
     </>
   );
 };

package/src/Display/_stories/Display.test.story.tsx

@@ -0,0 +1,108 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { IntlProvider } from 'react-intl';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { getDirectionFromLocale, Typography } from '../../common';
+import type { DisplayTypes } from '../../common/PropsValues/typography';
+import Money from '../../Money/Money';
+import Title from '../../Title/Title';
+import Display from '../Display';
+
+const meta: Meta<typeof Display> = {
+  component: Display,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Typography/Display/Tests',
+};
+export default meta;
+type Story = StoryObj<typeof Display>;
+
+export const RTLDiff: Story = {
+  render: () => {
+    return (
+      <>
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number Small</Title>
+          <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+            <Money amount={1050.6} currency="UAH" />
+          </Display>
+          <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+            <Money amount={10.17} currency="JPY" />
+          </Display>
+        </section>
+
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number Medium</Title>
+          <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+            <Money amount={0.01} currency="EUR" />
+          </Display>
+          <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+            <Money amount={1000000} currency="EUR" />
+          </Display>
+        </section>
+
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number Large</Title>
+          <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+            <Money amount={123456} currency="GBP" />
+          </Display>
+          <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+            <Money amount={1010.6} currency="UAH" />
+          </Display>
+        </section>
+
+        <section className="m-b-2">
+          <Title type={Typography.TITLE_BODY}>Display Number (Deprecated)</Title>
+          <Display type={Typography.DISPLAY_NUMBER}>
+            <Money amount={1050.6} currency="UAH" />
+          </Display>
+        </section>
+      </>
+    );
+  },
+  ...withRTLDiff({ fixedRows: { heights: 'auto' } }),
+};
+
+const LOCALES = [
+  { value: 'fr', label: 'Other Latin' },
+  { value: 'ru', label: 'Cyrillic' },
+  { value: 'el', label: 'Greek' },
+  { value: 'ja', label: 'Japanese' },
+  { value: 'ko', label: 'Korean' },
+  { value: 'th', label: 'Thai' },
+  { value: 'zh-CN', label: 'Chinese' },
+  { value: 'ar', label: 'Arabic' },
+  { value: 'he', label: 'Hebrew' },
+];
+
+// `lang` picks the locale's typography tokens, IntlProvider the locale's number formatting
+const renderAllLocales = (type: DisplayTypes) => (
+  <>
+    {LOCALES.map(({ value, label }) => (
+      <section key={value} className="m-b-2">
+        <Title type={Typography.TITLE_BODY}>{label}</Title>
+        <div lang={value} dir={getDirectionFromLocale(value)}>
+          <IntlProvider locale={value} messages={{}}>
+            <Display type={type}>
+              <Money amount={1235.56} currency="GBP" />
+            </Display>
+          </IntlProvider>
+        </div>
+      </section>
+    ))}
+  </>
+);
+
+export const DisplayNumberSmallLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER_SMALL),
+};
+
+export const DisplayNumberMediumLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER_MEDIUM),
+};
+
+export const DisplayNumberLargeLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER_LARGE),
+};
+
+export const DisplayNumberDeprecatedLocales: Story = {
+  render: () => renderAllLocales(Typography.DISPLAY_NUMBER),
+};

package/src/Emphasis/Emphasis.css

@@ -1,5 +1,5 @@
 .emphasis {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   font-style: normal;
 }
 .emphasis--important {

package/src/Emphasis/Emphasis.less

@@ -1,5 +1,5 @@
 .emphasis {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   font-style: normal;
 }
 

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css

@@ -2,6 +2,7 @@
   inline-size: 100%;
 }
 .wds-amount-input-input-container {
+  font-family: var(--wds-font-family-display-number);
   display: flex;
   justify-content: right;
   inline-size: 100%;
@@ -36,5 +37,5 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
-  line-height: inherit;
+  line-height: 1em;
 }

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less

@@ -4,6 +4,7 @@
   }
 
   &-input-container {
+    font-family: var(--wds-font-family-display-number);
     display: flex;
     justify-content: right;
     width: 100%;
@@ -47,6 +48,6 @@
     flex-grow: 0;
     display: flex;
     align-items: center;
-    line-height: inherit;
+    line-height: 1em;
   }
 }

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx

@@ -297,10 +297,7 @@ export const AmountInput = ({
 
   return (
     <div className="wds-amount-input-container" dir="ltr">
-      <div
-        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
-        style={style}
-      >
+      <div className={clsx('wds-amount-input-input-container')} style={style}>
         <input
           ref={ref}
           dir="auto"

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css

@@ -2,6 +2,7 @@
   inline-size: 100%;
 }
 .wds-amount-input-input-container {
+  font-family: var(--wds-font-family-display-number);
   display: flex;
   justify-content: right;
   inline-size: 100%;
@@ -36,7 +37,7 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
-  line-height: inherit;
+  line-height: 1em;
 }
 .wds-currency-selector:disabled {
   opacity: 1 !important;

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx

@@ -40,7 +40,7 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
                 className={clsx(
                   'np-animated-label',
                   'btn-unstyled',
-                  'np-text-body-large-bold',
+                  'np-text-body-large-bold wds-text-body-large-bold',
                   className,
                 )}
                 onClick={() => setShowSteps(true)}

package/src/Inputs/Input/Input.css

@@ -1,4 +1,91 @@
-.np-form-control {
+.np-form-control--size-lg {
+  margin: 0;color: var(--color-content-primary);word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control--size-lg {
+  margin-block-end: initial;
+}
+.np-form-control--size-sm {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control--size-auto,
+.np-form-control--size-md {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-auto,
+  .np-form-control--size-md {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-auto,
+  .np-form-control--size-md {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -35,10 +122,6 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: var(--size-12);
   padding-block-end: var(--size-12);
@@ -78,12 +161,8 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
-  block-size: var(--size-32) !important;
+  block-size: calc(2 * var(--size-4) + var(--wds-font-size-body) * var(--wds-line-height-body)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-sm {
@@ -115,16 +194,12 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-sm {
-    block-size: var(--size-64) !important;
+    block-size: calc(2 * var(--size-8) + var(--wds-font-size-body) * var(--wds-line-height-body)) !important;
   }
 }
 .np-form-control--size-md {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
-  block-size: var(--size-48) !important;
+  block-size: calc(2 * var(--size-12) + var(--wds-font-size-body-large) * var(--wds-line-height-body-large)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-md {
@@ -156,21 +231,15 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-md {
-    block-size: var(--size-72) !important;
+    block-size: calc(2 * var(--size-12) + var(--wds-font-size-body-large) * var(--wds-line-height-body-large)) !important;
   }
 }
 .np-form-control--size-lg {
   margin: 0;
   color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
-  font-size: var(--font-size-22);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.018em;
-  line-height: 125%;
-  block-size: var(--size-72) !important;
+  block-size: calc(2 * var(--size-24) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
@@ -205,6 +274,11 @@
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-block-start: var(--size-8);
 }
+@media (max-width: 320px) {
+  .np-form-control--size-lg {
+    block-size: calc(2 * var(--size-12) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body)) !important;
+  }
+}
 .np-input::-moz-placeholder {
   color: var(--color-content-tertiary);
 }

package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx

@@ -122,9 +122,11 @@ export function SelectInputBottomSheet({
                         )}
                       >
                         {title ? (
-                          <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                          <h2 className="np-bottom-sheet-v2-title np-text-title-body wds-text-title-body">
+                            {title}
+                          </h2>
                         ) : null}
-                        <div className="np-bottom-sheet-v2-body np-text-body-default">
+                        <div className="np-bottom-sheet-v2-body np-text-body-default wds-text-body-default">
                           {children}
                         </div>
                       </div>

package/src/Inputs/SelectInput/Option/SelectInputOption.tsx

@@ -34,7 +34,7 @@ export function SelectInputOption<T = string>({
       disabled={disabled}
       className={({ active, disabled: uiDisabled }) =>
         clsx(
-          'np-select-input-option-container np-text-body-large',
+          'np-select-input-option-container np-text-body-large wds-text-body-large',
           active && 'np-select-input-option-container--active',
           uiDisabled && 'np-select-input-option-container--disabled',
         )

package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx

@@ -28,7 +28,7 @@ export function SelectInputOptionContent({
     <div
       className={clsx(
         'np-select-input-option-content-container',
-        (note || description) && 'np-text-body-large',
+        (note || description) && 'np-text-body-large wds-text-body-large',
         className,
       )}
     >
@@ -52,7 +52,7 @@ export function SelectInputOptionContent({
         >
           <div className="d-inline np-select-input-option-content-title">{title}</div>
           {note ? (
-            <span className="np-select-input-option-content-text-secondary np-text-body-default">
+            <span className="np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default">
               {note}
             </span>
           ) : null}
@@ -61,7 +61,7 @@ export function SelectInputOptionContent({
         {description ? (
           <div
             className={clsx(
-              'np-select-input-option-content-text-secondary np-text-body-default',
+              'np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default',
               withinTrigger &&
                 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
             )}

package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx

@@ -124,9 +124,13 @@ export function SelectInputPopover({
                     })}
                   >
                     {title ? (
-                      <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
+                      <h2 className="np-popover-v2-title np-text-title-body wds-text-title-body">
+                        {title}
+                      </h2>
                     ) : null}
-                    <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                    <div className="np-popover-v2-content np-text-body-default wds-text-body-default">
+                      {children}
+                    </div>
                   </div>
                 </div>
               </FloatingFocusManager>

package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -1276,7 +1276,7 @@ export const WithBuiltInSearchResultSorting: Story<CountryWithCurrency> = {
   decorators: [
     (Story) => (
       <div>
-        <p className="m-b-3 np-text-body-default" style={{ maxWidth: '600px' }}>
+        <p className="m-b-3 wds-text-body-default" style={{ maxWidth: '600px' }}>
           This example uses the built-in <code>SelectInput.sortByRelevance</code> helper to sort
           filtered results by relevance (You can implement your own). This one prioritises: exact
           matches → starts with → contains → alphabetical.