@transferwise/components 46.155.1 → 46.157.0

package/src/Typeahead/Typeahead.test.tsx

@@ -1,11 +1,18 @@
 import Field from '../Field';
-import { mockMatchMedia, render, screen, fireEvent } from '../test-utils';
+import { mockMatchMedia, render, screen, fireEvent, userEvent } from '../test-utils';
 import { wait } from '../test-utils/wait';
 import Typeahead from './Typeahead';
 
 mockMatchMedia();
 
+const scrollIntoView = jest.fn();
+
 describe('Typeahead', () => {
+  beforeEach(() => {
+    HTMLElement.prototype.scrollIntoView = scrollIntoView;
+    scrollIntoView.mockClear();
+  });
+
   it('supports `Field` for labeling', () => {
     render(
       <Field id="test" label="Tags">
@@ -22,7 +29,7 @@ describe('Typeahead', () => {
           <Typeahead id="test" name="test" options={[]} onChange={() => {}} />
         </Field>,
       );
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
     it('does render a dropdown when only a footer is provided', () => {
       render(
@@ -30,7 +37,7 @@ describe('Typeahead', () => {
           <Typeahead id="test" name="test" options={[]} footer={<p>hello</p>} onChange={() => {}} />
         </Field>,
       );
-      expect(screen.getByRole('menu')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
   });
 
@@ -74,6 +81,76 @@ describe('Typeahead', () => {
     expect(onChange).toHaveBeenCalled();
   });
 
+  it('scrolls options into view when navigating with arrow keys', async () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+        minQueryLength={0}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+
+    await userEvent.click(input);
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}');
+
+    expect(input).toHaveFocus();
+    expect(scrollIntoView).toHaveBeenCalledTimes(2);
+    expect(scrollIntoView).toHaveBeenNthCalledWith(1, { block: 'nearest' });
+    expect(scrollIntoView).toHaveBeenNthCalledWith(2, { block: 'nearest' });
+    expect(scrollIntoView.mock.contexts[0]).toBe(screen.getByText('Option 1').closest('li'));
+    expect(scrollIntoView.mock.contexts[1]).toBe(screen.getByText('Option 2').closest('li'));
+  });
+
+  it('uses one Tab stop for the suggestions', async () => {
+    render(
+      <>
+        <Typeahead
+          id="test"
+          name="test"
+          options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+          minQueryLength={0}
+          onChange={() => {}}
+        />
+        <button type="button">Next control</button>
+      </>,
+    );
+
+    const input = screen.getByRole('combobox');
+    await userEvent.click(input);
+    await userEvent.tab();
+
+    expect(screen.getByRole('listbox')).toHaveFocus();
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('option', { name: 'Option 1' })).toHaveClass(
+      'tw-dropdown-item--focused',
+    );
+    expect(screen.getByRole('listbox')).toHaveFocus();
+    await userEvent.tab();
+    expect(screen.getByRole('button', { name: 'Next control' })).toHaveFocus();
+  });
+
+  it('uses the active option style when hovering a suggestion', async () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+        minQueryLength={0}
+        onChange={() => {}}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.hover(screen.getByRole('option', { name: 'Option 2' }));
+
+    expect(screen.getByRole('option', { name: 'Option 2' })).toHaveClass(
+      'tw-dropdown-item--focused',
+    );
+  });
+
   it('shows clear button when there is a value', () => {
     render(
       <Typeahead

package/src/Typeahead/Typeahead.tsx

@@ -216,31 +216,15 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   };
 
   handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-    const { showSuggestions, allowNew, multiple, chipSeparators, options } = this.props;
-    const { keyboardFocusedOptionIndex, query, selected } = this.state;
+    const { showSuggestions, allowNew, multiple, chipSeparators } = this.props;
+    const { query, selected } = this.state;
     const chipsMode = !showSuggestions && allowNew && multiple;
 
     if (chipsMode && ['Enter', 'Tab', ...chipSeparators].includes(event.key) && query.trim()) {
       event.preventDefault();
       this.selectItem({ label: query });
-    } else {
+    } else if (!this.handleOptionNavigation(event)) {
       switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          this.moveFocusedOption(1);
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          this.moveFocusedOption(-1);
-          break;
-        case 'Enter':
-          event.preventDefault();
-          if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
-            this.selectItem(options[keyboardFocusedOptionIndex]);
-          } else if (allowNew && query.trim()) {
-            this.selectItem({ label: query });
-          }
-          break;
         case 'Backspace':
           if (multiple && !query && selected.length > 0) {
             this.updateSelectedValue(selected.slice(0, -1));
@@ -251,6 +235,36 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
+
+  handleOptionListKeyDown: React.KeyboardEventHandler<HTMLUListElement> = (event) => {
+    this.handleOptionNavigation(event);
+  };
+
+  handleOptionNavigation(event: React.KeyboardEvent<HTMLElement>) {
+    const { allowNew, options } = this.props;
+    const { keyboardFocusedOptionIndex, query } = this.state;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveFocusedOption(1);
+        return true;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveFocusedOption(-1);
+        return true;
+      case 'Enter':
+        event.preventDefault();
+        if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
+          this.selectItem(options[keyboardFocusedOptionIndex]);
+        } else if (allowNew && query.trim()) {
+          this.selectItem({ label: query });
+        }
+        return true;
+      default:
+        return false;
+    }
+  }
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
@@ -261,7 +275,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
       const optionRef = this.optionRefs[index];
       if (optionRef?.current) {
-        optionRef.current.focus(); // Set focus on the option element
+        optionRef.current.scrollIntoView({ block: 'nearest' });
       }
       return {
         keyboardFocusedOptionIndex: index,
@@ -269,6 +283,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     });
   }
 
+  setFocusedOption = (index: number) => {
+    this.setState({ keyboardFocusedOptionIndex: index });
+  };
+
   selectItem = (item: TypeaheadOption<T>) => {
     const { multiple } = this.props;
     let selected = [...this.state.selected];
@@ -423,12 +441,16 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       });
     }
     return (
-      <div
-        className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
-        id={`menu-${id}`}
-      >
+      <div className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}>
         {(!!optionsToRender.length || footer) && (
-          <ul className="dropdown-menu" role="menu">
+          <ul
+            className="dropdown-menu"
+            id={`menu-${id}`}
+            role="listbox"
+            aria-label={this.props?.intl?.formatMessage(messages.suggestionsLabel)}
+            tabIndex={0}
+            onKeyDown={this.handleOptionListKeyDown}
+          >
             {optionsToRender.map((option, idx) => {
               const ref = React.createRef<HTMLLIElement>();
               this.optionRefs[idx] = ref;
@@ -439,7 +461,8 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
                   query={query}
                   option={option}
                   selected={keyboardFocusedOptionIndex === idx}
-                  id={String(option.label.replace(/\s+/g, '-'))}
+                  id={`${id}-${idx}`}
+                  onMouseEnter={() => this.setFocusedOption(idx)}
                   onClick={(event) => {
                     this.onOptionSelected(event, option);
                   }}
@@ -554,7 +577,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               autoComplete={inputAutoComplete}
               ariaActivedescendant={
                 keyboardFocusedOptionIndex !== null && options[keyboardFocusedOptionIndex]
-                  ? `option-${options[keyboardFocusedOptionIndex].label.replace(/\s+/g, '-')}`
+                  ? `option-${id}-${keyboardFocusedOptionIndex}`
                   : undefined
               }
               onChange={this.handleOnChange}

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -82,7 +82,7 @@ export default class TypeaheadInput<T> extends Component<
       onFocus,
       onPaste,
       autoComplete,
-      ariaActivedescendant, // Declare the ariaActivedescendant variable
+      ariaActivedescendant,
     } = this.props;
     const { inputWidth } = this.state;
 
@@ -93,11 +93,7 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
-        aria-activedescendant={
-          ariaActivedescendant
-            ? `menu-${typeaheadId} ${ariaActivedescendant}`
-            : `menu-${typeaheadId}`
-        }
+        aria-activedescendant={ariaActivedescendant}
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"

package/src/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -7,3 +7,8 @@
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):active {
+  box-shadow: none;
+}

package/src/Typeahead/TypeaheadOption/TypeaheadOption.less

@@ -12,3 +12,12 @@
     border-radius: var(--radius-small);
   }
 }
+.dropdown-menu
+  > li.typeahead__option:not(.active):not(.selected)
+  > .dropdown-item:not([disabled]):not(.disabled) {
+  &:hover,
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+}

package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx

@@ -8,12 +8,13 @@ export type TypeaheadOptionProps<T> = {
   option: TypeaheadOption<T>;
   selected?: boolean;
   onClick?: React.MouseEventHandler;
+  onMouseEnter?: React.MouseEventHandler;
   query?: string;
   id?: string;
 };
 
 const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
-  const { option, selected = false, onClick = () => {}, query = '', id } = props;
+  const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;
   const { label, note, secondary } = option;
 
   return (
@@ -25,8 +26,9 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
+      onMouseEnter={onMouseEnter}
     >
-      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <Highlight value={label} query={query} />
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (

package/src/i18n/en.json

@@ -12,6 +12,10 @@
   "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
   "neptune.DateLookup.month": "month",
   "neptune.DateLookup.next": "next",
+  "neptune.DateLookup.notAvailable": "not available",
+  "neptune.DateLookup.outOfRangeAfter": "Please enter {min} or a later date.",
+  "neptune.DateLookup.outOfRangeBefore": "Please enter {max} or an earlier date.",
+  "neptune.DateLookup.outOfRangeBetween": "Please select a date between {min} and {max}.",
   "neptune.DateLookup.previous": "previous",
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",

package/src/i18n/hu.json

@@ -23,7 +23,7 @@
   "neptune.Field.characterCount": "Felhasználva {current}/{max} karakter",
   "neptune.FlowNavigation.back": "vissza az előző lépéshez",
   "neptune.Info.ariaLabel": "További információ",
-  "neptune.Label.optional": "(Válaszható)",
+  "neptune.Label.optional": "(Választható)",
   "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.MoneyInput.Select.searchPlaceholder": "Írj be egy pénznemet vagy országot",

package/src/index.ts

@@ -26,6 +26,8 @@ export type {
   AnchorElementProps,
 } from './Button';
 export type { BodyProps } from './Body';
+export type { CalendarProps } from './Calendar';
+export type { DisabledRules, WeekDayType, DisabledDateRange } from './Calendar';
 export type { CardProps } from './_deprecated/Card';
 export type {
   CarouselProps,
@@ -56,7 +58,6 @@ export type {
 export type { BottomSheetProps } from './common/BottomSheet';
 export type { DateInputProps } from './DateInput';
 export type { DateLookupProps } from './DateLookup';
-export type { CalendarProps } from './Calendar';
 export type { DecisionProps } from './Decision';
 export type {
   DefinitionListProps,
@@ -94,6 +95,7 @@ export type { LegacyListItemProps } from './_deprecated/LegacyListItem';
 export type { LinkProps } from './Link';
 export type { LoaderProps } from './Loader';
 export type { MarkdownProps } from './Markdown';
+export type { MarkupActionHandler, MarkupActions, MarkupNode, MarkupProps } from './Markup';
 export type { ModalProps } from './Modal';
 export type { MoneyProps } from './Money';
 export type {
@@ -205,6 +207,7 @@ export { default as Badge, BadgeAssets } from './_deprecated/Badge';
 export { default as Body } from './Body';
 export { default as Button } from './Button';
 export { default as IconButton } from './IconButton';
+export { default as Calendar } from './Calendar';
 export { default as Carousel } from './Carousel';
 export { default as Card } from './_deprecated/Card';
 export { default as Checkbox } from './Checkbox';
@@ -220,7 +223,6 @@ export { default as BaseCard } from './common/BaseCard';
 export { default as CriticalCommsBanner } from './_deprecated/CriticalBanner';
 export { default as DateInput } from './DateInput';
 export { default as DateLookup } from './DateLookup';
-export { default as Calendar } from './Calendar';
 export { default as Decision } from './Decision';
 export { default as DefinitionList } from './DefinitionList';
 export { default as Dimmer } from './Dimmer';
@@ -253,6 +255,7 @@ export { default as LegacyListItem } from './_deprecated/LegacyListItem';
 export { default as Loader } from './Loader';
 export { default as Logo } from './Logo';
 export { default as Markdown } from './Markdown';
+export { default as Markup } from './Markup';
 export { default as Modal } from './Modal';
 export { default as Money } from './Money';
 export { default as MoneyInput } from './MoneyInput';

package/src/main.css

@@ -27269,46 +27269,12 @@ a[data-toggle="tooltip"] {
   pointer-events: auto;
 }
 
-.tw-date-lookup-calendar {
-  min-width: 300px;
-  text-align: center;
-  table-layout: fixed;
-  border: none;
-  background-color: inherit;
-}
-
-.tw-date-lookup-calendar thead {
-  background-color: transparent;
-  background-color: initial;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-
-.tw-date-lookup-calendar > tbody > tr > td {
-  border: none;
-  padding: 4px;
-  padding: var(--size-4);
-}
-
-@media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td {
-    padding: 0;
-  }
-}
-
-.tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
-  padding: 1px;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td button {
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
   width: 100%;
   padding: 4px 0;
   padding: var(--size-4) 0;
-  color: #0097c7;
-  color: var(--color-content-accent);
   border: transparent;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -27320,12 +27286,92 @@ a[data-toggle="tooltip"] {
 }
 
 @media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td button {
+  .wds-Calendar__option--day,
+  .wds-Calendar__option--month,
+  .wds-Calendar__option--year {
     padding: 0;
   }
 }
 
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
+.wds-Calendar__option--day:focus,
+.wds-Calendar__option--month:focus,
+.wds-Calendar__option--year:focus {
+  background-color: var(--color-background-screen-hover);
+}
+
+.wds-Calendar__option--day.disabled,
+.wds-Calendar__option--month.disabled,
+.wds-Calendar__option--year.disabled,
+.wds-Calendar__option--day[aria-disabled="true"],
+.wds-Calendar__option--month[aria-disabled="true"],
+.wds-Calendar__option--year[aria-disabled="true"] {
+  --ring-outline-color: var(--color-sentiment-content-primary);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+  cursor: not-allowed;
+}
+
+.wds-Calendar__option--day.disabled:hover,
+.wds-Calendar__option--month.disabled:hover,
+.wds-Calendar__option--year.disabled:hover,
+.wds-Calendar__option--day[aria-disabled="true"]:hover,
+.wds-Calendar__option--month[aria-disabled="true"]:hover,
+.wds-Calendar__option--year[aria-disabled="true"]:hover,
+.wds-Calendar__option--day.disabled:focus,
+.wds-Calendar__option--month.disabled:focus,
+.wds-Calendar__option--year.disabled:focus,
+.wds-Calendar__option--day[aria-disabled="true"]:focus,
+.wds-Calendar__option--month[aria-disabled="true"]:focus,
+.wds-Calendar__option--year[aria-disabled="true"]:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
+
+.wds-Calendar__option--day.disabled.active,
+.wds-Calendar__option--month.disabled.active,
+.wds-Calendar__option--year.disabled.active,
+.wds-Calendar__option--day[aria-disabled="true"].active,
+.wds-Calendar__option--month[aria-disabled="true"].active,
+.wds-Calendar__option--year[aria-disabled="true"].active,
+.wds-Calendar__option--day.disabled.active:hover,
+.wds-Calendar__option--month.disabled.active:hover,
+.wds-Calendar__option--year.disabled.active:hover,
+.wds-Calendar__option--day[aria-disabled="true"].active:hover,
+.wds-Calendar__option--month[aria-disabled="true"].active:hover,
+.wds-Calendar__option--year[aria-disabled="true"].active:hover,
+.wds-Calendar__option--day.disabled.active:active,
+.wds-Calendar__option--month.disabled.active:active,
+.wds-Calendar__option--year.disabled.active:active,
+.wds-Calendar__option--day[aria-disabled="true"].active:active,
+.wds-Calendar__option--month[aria-disabled="true"].active:active,
+.wds-Calendar__option--year[aria-disabled="true"].active:active,
+.wds-Calendar__option--day.disabled.active:focus,
+.wds-Calendar__option--month.disabled.active:focus,
+.wds-Calendar__option--year.disabled.active:focus,
+.wds-Calendar__option--day[aria-disabled="true"].active:focus,
+.wds-Calendar__option--month[aria-disabled="true"].active:focus,
+.wds-Calendar__option--year[aria-disabled="true"].active:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-interactive-primary);
+  color: var(--color-sentiment-interactive-secondary);
+}
+
+.wds-Calendar__option--day.disabled.today,
+.wds-Calendar__option--month.disabled.today,
+.wds-Calendar__option--year.disabled.today,
+.wds-Calendar__option--day[aria-disabled="true"].today,
+.wds-Calendar__option--month[aria-disabled="true"].today,
+.wds-Calendar__option--year[aria-disabled="true"].today {
+  text-decoration-color: #768e9c;
+  text-decoration-color: var(--color-content-tertiary);
+}
+
+.wds-Calendar__option--day {
   height: 40px;
   height: var(--size-40);
   border-radius: 9999px;
@@ -27340,19 +27386,53 @@ a[data-toggle="tooltip"] {
   justify-content: center;
 }
 
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
+.wds-Calendar__option--day.today {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
 
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
-.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+.tw-date-lookup-calendar {
+  min-width: 300px;
+  text-align: center;
+  table-layout: fixed;
+  border: none;
+  background-color: inherit;
+}
+
+.tw-date-lookup-calendar thead {
+  background-color: transparent;
+  background-color: initial;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+
+.tw-date-lookup-calendar > tbody > tr > td {
+  border: none;
+  padding: 4px;
+  padding: var(--size-4);
+}
+
+@media (max-width: 320px) {
+  .tw-date-lookup-calendar > tbody > tr > td {
+    padding: 0;
+  }
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:has(.wds-Calendar__option--day) {
+  padding: 1px;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus:not(.disabled):not([aria-disabled="true"]),
+.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-background-screen-hover);
 }
 
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active:not([aria-disabled="true"]) {
   background-color: var(--color-interactive-primary);
   color: var(--color-interactive-contrast);
 }
@@ -30917,6 +30997,41 @@ button.np-link {
   height: var(--wds-logo-height);
 }
 
+.wds-markup-emphasis {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+
+.wds-markup-emphasis--important {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+
+.wds-markup-emphasis--positive {
+  color: #008026;
+  color: var(--color-content-positive);
+}
+
+.wds-markup-emphasis--negative {
+  color: #cf2929;
+  color: var(--color-content-negative);
+}
+
+.wds-markup-strong {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.wds-markup-strikethrough {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+
+.wds-markup-paragraph {
+  margin: 0;
+}
+
 .tw-modal--scrollable {
   max-height: 100%;
   /* mobile viewport bug fix */
@@ -34087,6 +34202,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .typeahead .dropdown-menu {
   max-width: 100%;
   width: 100%;
+  scroll-padding-top: 8px;
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
+  scroll-padding-bottom: var(--size-8);
 }
 
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
@@ -34313,6 +34432,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-radius: var(--radius-small);
 }
 
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):active {
+  box-shadow: none;
+}
+
 .tw-droppable-lg {
   min-height: 346px;
 }

package/src/main.less

@@ -56,6 +56,7 @@
 @import "./Link/Link.less";
 @import "./Loader/Loader.less";
 @import "./Logo/Logo.less";
+@import "./Markup/Markup.less";
 @import "./Modal/Modal.less";
 @import "./MoneyInput/MoneyInput.less";
 @import "./ExpressiveMoneyInput/ExpressiveMoneyInput.less";