@transferwise/components 46.106.0 → 46.107.0

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -1,7 +1,5 @@
 import { Fragment } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Bank, FastFlag, MultiCurrency, Receipt, Savings } from '@transferwise/icons';
-import Link from '../../link';
 import List from '../../list';
 import { ListItem, type ListItemProps } from '../ListItem';
 import { lorem10, lorem20, lorem5 } from '../../test-utils';
@@ -9,20 +7,8 @@ import portraitImage from '../../test-utils/assets/placeholder-landscape.svg';
 import landscapeImage from '../../test-utils/assets/placeholder-portrait.svg';
 import { SB_LIST_ITEM_CONTROLS as CONTROLS, SB_LIST_ITEM_MEDIA as MEDIA } from './subcomponents';
 import { ListItemMediaSize } from '../ListItemContext';
-
-const withSizedContainer = (width: number) => (Story: any) => (
-  <List
-    className="list-unstyled"
-    style={{
-      width,
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 16,
-    }}
-  >
-    <Story />
-  </List>
-);
+import { withSizedContainer } from './helpers';
+import { LISTITEM_CQ } from '../constants';
 
 export default {
   title: 'Content/ListItem/tests/layout',
@@ -36,143 +22,6 @@ export default {
 } satisfies Meta<ListItemProps>;
 type Story = StoryObj<ListItemProps>;
 
-const variants = [
-  <ListItem
-    key="button"
-    title="Button only"
-    control={
-      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
-        Click me
-      </ListItem.Button>
-    }
-  />,
-  <ListItem
-    key="media"
-    title="With media"
-    subtitle="Short subtitle"
-    additionalInfo={<ListItem.AdditionalInfo>{lorem5}</ListItem.AdditionalInfo>}
-    media={
-      <ListItem.AvatarView>
-        <FastFlag />
-      </ListItem.AvatarView>
-    }
-  />,
-  <ListItem key="value" title="With value" valueTitle="100 GBP" valueSubtitle="100 USD" />,
-  <ListItem
-    key="prompt"
-    title="With prompt"
-    prompt={
-      <ListItem.Prompt sentiment="positive">
-        This is a prompt with <Link href="https://wise.com">a link</Link>.
-      </ListItem.Prompt>
-    }
-  />,
-  <ListItem
-    key="button-media"
-    title="Button + media"
-    media={
-      <ListItem.AvatarView>
-        <MultiCurrency />
-      </ListItem.AvatarView>
-    }
-    control={
-      <ListItem.Button priority="primary" onClick={() => {}}>
-        Action
-      </ListItem.Button>
-    }
-  />,
-  <ListItem
-    key="button-value"
-    title="Button + value"
-    valueTitle="42 EUR"
-    control={
-      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
-        Pay
-      </ListItem.Button>
-    }
-  />,
-  <ListItem
-    key="media-value"
-    valueColumnWidth={80}
-    title="Media + value"
-    subtitle="this column is 20% wide"
-    media={
-      <ListItem.AvatarView>
-        <Bank />
-      </ListItem.AvatarView>
-    }
-    valueTitle="1,000 USD"
-  />,
-  <ListItem
-    key="prompt-value"
-    title="Prompt + value"
-    valueTitle="10 GBP"
-    prompt={<ListItem.Prompt sentiment="warning">Warning prompt!</ListItem.Prompt>}
-  />,
-  <ListItem
-    key="media-prompt"
-    title="Media + prompt"
-    media={
-      <ListItem.AvatarView>
-        <Receipt />
-      </ListItem.AvatarView>
-    }
-    prompt={<ListItem.Prompt sentiment="positive">Discount available!</ListItem.Prompt>}
-  />,
-  <ListItem
-    key="most"
-    title="Everything but button"
-    subtitle="No control"
-    media={
-      <ListItem.AvatarView>
-        <Savings />
-      </ListItem.AvatarView>
-    }
-    valueTitle="999 GBP"
-    prompt={
-      <ListItem.Prompt sentiment="positive">
-        <Link href="https://wise.com">See details</Link>
-      </ListItem.Prompt>
-    }
-  />,
-  <ListItem
-    key="all"
-    title="All together"
-    subtitle="Everything in one"
-    media={
-      <ListItem.AvatarView>
-        <Savings />
-      </ListItem.AvatarView>
-    }
-    valueTitle="999 GBP"
-    prompt={
-      <ListItem.Prompt sentiment="positive">
-        <Link href="https://wise.com">See details</Link>
-      </ListItem.Prompt>
-    }
-    control={
-      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
-        Go
-      </ListItem.Button>
-    }
-  />,
-];
-
-export const Under320: Story = {
-  render: () => <>{variants}</>,
-  decorators: [withSizedContainer(320)],
-};
-
-export const Between321And399: Story = {
-  render: () => <>{variants}</>,
-  decorators: [withSizedContainer(360)],
-};
-
-export const Over400: Story = {
-  render: () => <>{variants}</>,
-  decorators: [withSizedContainer(400)],
-};
-
 export const LongButton: Story = {
   render: () => (
     <ListItem
@@ -190,7 +39,7 @@ export const LongButton: Story = {
       }
     />
   ),
-  decorators: [withSizedContainer(400)],
+  decorators: [withSizedContainer(400, false)],
 };
 
 export const GapsBetweenItems: Story = {
@@ -317,7 +166,13 @@ const ImageAlignmentStory: StoryObj<PreviewStoryArgs> = {
         )}
         <List
           className="list-unstyled"
-          style={{ display: 'grid', gridTemplateColumns: '340px 400px', gap: '16px' }}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: [LISTITEM_CQ.MAX, LISTITEM_CQ.MAX + 10]
+              .map((size) => `${size}px`)
+              .join(' '),
+            gap: '16px',
+          }}
         >
           <Story />
         </List>

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -235,23 +235,16 @@ export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
   },
 });
 
-export const Summary: Story = {
+export const Summary: Story = storySourceWithoutNoise({
   parameters: {
     docs: {
       canvas: {
         sourceState: 'shown',
       },
     },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#f8f9fa' },
-        { name: 'dark', value: '#343a40' },
-      ],
-    },
   },
-  render: () => {
-    const listItems = (
+  render: function Summary() {
+    return (
       <List>
         <ListItem
           title="System maintenance"
@@ -327,19 +320,5 @@ export const Summary: Story = {
         />
       </List>
     );
-    return (
-      <>
-        <div style={{ padding: '24px', width: '450px' }}>{listItems}</div>
-        <div
-          style={{
-            padding: '24px',
-            width: '450px',
-            backgroundColor: 'var(--color-background-neutral)',
-          }}
-        >
-          {listItems}
-        </div>
-      </>
-    );
   },
-};
+});

package/src/listItem/_stories/ListItem.story.tsx

@@ -3,8 +3,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MultiCurrency, Plus } from '@transferwise/icons';
 import { lorem5, lorem10 } from '../../test-utils';
 import Emphasis from '../../emphasis';
+import Link from '../../link';
 import List from '../../list';
 import { ListItem, type ListItemProps } from '../ListItem';
+import { LISTITEM_CQ } from '../constants';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
   SB_LIST_ITEM_ADDITIONAL_INFO as ADDITIONAL_INFO,
@@ -12,7 +14,6 @@ import {
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from './subcomponents';
 import { disableControls, storySourceWithoutNoise, withoutKey } from './helpers';
-import Link from '../../link';
 
 const hideControls = disableControls([
   'additionalInfo',
@@ -46,7 +47,6 @@ export default {
     'ListItem.Image': ListItem.Image,
   },
   title: 'Content/ListItem',
-  tags: ['early-access'],
   parameters: {
     docs: {
       toc: true,
@@ -274,19 +274,15 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   decorators: [withoutKey],
 };
 
-/**
- * ListItem uses container queries under the hood, which means its layout self-adjusts based on
- * the available space. At the 100% zoom level, these breakpoints correspond to
- * containers under `290px`, those between `291px and 380px`, and finally everything including
- * and above `381px`. <br />
- * This also supports high levels of zoom for assistive tech users.
- */
 export const Responsiveness: StoryObj<PreviewStoryArgs> = {
   parameters: {
     docs: {
       canvas: {
         sourceState: 'hidden',
       },
+      description: {
+        story: `ListItem uses container queries under the hood, which means its layout self-adjusts based on the available space. At the 100% zoom level, these breakpoints correspond to containers under \`${LISTITEM_CQ.MIN}px\`, those between \`${LISTITEM_CQ.MIN + 1}px and ${LISTITEM_CQ.MAX}px\`, and finally everything including and above \`${LISTITEM_CQ.MAX + 1}px\`.\n\nThis also supports high levels of zoom for assistive tech users.`,
+      },
     },
   },
   argTypes: {
@@ -311,7 +307,17 @@ export const Responsiveness: StoryObj<PreviewStoryArgs> = {
       <List
         as="ol"
         className="list-unstyled"
-        style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: [
+            LISTITEM_CQ.MIN,
+            Math.round((LISTITEM_CQ.MAX - LISTITEM_CQ.MIN) / 2 + LISTITEM_CQ.MIN),
+            510,
+          ]
+            .map((width) => `${width}px`)
+            .join(' '),
+          gap: 16,
+        }}
       >
         <ListItem {...props} {...previewProps} />
         <ListItem {...props} {...previewProps} />

package/src/listItem/_stories/helpers.tsx

@@ -1,5 +1,6 @@
 import { StoryObj, type Decorator } from '@storybook/react-webpack5';
 import type { ListItemProps } from '../ListItem';
+import { LISTITEM_CQ } from '../constants';
 
 type Story = StoryObj<ListItemProps>;
 
@@ -49,12 +50,27 @@ export const withoutKey: Decorator = (Story, { args }) => {
 };
 
 export const withSizedContainer =
-  (width: number): Decorator =>
-  (Story, { args }) => (
-    <div style={{ width, border: '1px dashed #ccc', padding: '8px' }}>
-      <Story />
-    </div>
-  );
+  (size: 'small' | 'medium' | 'large' | number = 'large', border = true): Decorator =>
+  (Story, { args }) => {
+    const width =
+      typeof size === 'number'
+        ? size
+        : {
+            small: LISTITEM_CQ.MIN,
+            medium: Math.round((LISTITEM_CQ.MAX - LISTITEM_CQ.MIN) / 2 + LISTITEM_CQ.MIN),
+            large: LISTITEM_CQ.MAX + 1,
+          }[size];
+    return (
+      <div
+        style={{
+          width,
+          border: border ? '1px dashed #ccc' : undefined,
+        }}
+      >
+        <Story />
+      </div>
+    );
+  };
 
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.

package/src/listItem/_stories/subcomponents.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { Edit, Briefcase, Plane } from '@transferwise/icons';
-import { ListItem } from '../ListItem';
 import { fn } from 'storybook/test';
-import Link from '../../link';
 import { Flag } from '@wise/art';
+import { lorem20 } from '../../test-utils';
+import Link from '../../link';
+import { ListItem } from '../ListItem';
 
 export type SB_ListItem_ControlType =
   | 'non-interactive'
@@ -30,6 +31,17 @@ export const SB_LIST_ITEM_TEXT = {
   subtitle: 'And it also has a subtitle',
   valueTitle: '100 GBP',
   valueSubtitle: '200 USD',
+  longTitle: `This is a long title. ${lorem20}`,
+  longSubtitle: `And it also has a long subtitle. ${lorem20}`,
+  longValueTitle: (
+    <>
+      This value title
+      <br />
+      is made to span
+      <br />
+      across few lines
+    </>
+  ),
 };
 
 export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> = {

package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx

@@ -12,7 +12,7 @@ export default {
     actions: { disable: true },
     knobs: { disable: true },
   },
-  decorators: [withSizedContainer(350)],
+  decorators: [withSizedContainer('medium')],
 } satisfies Meta<ListItemProps>;
 
 export const Button = generateVariantsForControl('button');

package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_ListItem_ControlType as ControlType,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/surface: neutral',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+    padding: '0',
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'var(--color-background-neutral)',
+          padding: 80,
+          minHeight: '100%',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+export const OnNeutralBackdrop: Story = {
+  render: () => (
+    <List>
+      <ListItem
+        title={TEXT.title}
+        subtitle={TEXT.subtitle}
+        valueTitle={TEXT.valueTitle}
+        valueSubtitle={TEXT.valueSubtitle}
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.button}
+        prompt={PROMPT.nonInteractive}
+        media={MEDIA.avatarDouble}
+      />
+    </List>
+  ),
+};

package/src/listItem/_stories/variants/ListItem.small.test.story.tsx

@@ -12,7 +12,7 @@ export default {
     actions: { disable: true },
     knobs: { disable: true },
   },
-  decorators: [withSizedContainer(275)],
+  decorators: [withSizedContainer('small')],
 } satisfies Meta<ListItemProps>;
 
 export const Button = generateVariantsForControl('button');

package/src/listItem/_stories/variants/helpers.tsx

@@ -14,7 +14,8 @@ import {
 type Story = StoryObj<ListItemProps>;
 type VariantPartial = { title: string } & Partial<ListItemProps>;
 
-const { title, subtitle, valueTitle, valueSubtitle } = TEXT;
+const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
+  TEXT;
 const prompt = PROMPT.nonInteractive;
 const media = MEDIA.avatarSingle;
 
@@ -32,18 +33,36 @@ export const generateVariantsForControl = (
   const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
   const instances = [
     { title },
+    { title: longTitle },
     { title, valueTitle },
+    { title, valueTitle: longValueTitle },
+    { title: longTitle, valueTitle },
     { title, subtitle },
+    { title, subtitle: longSubtitle },
     { title, additionalInfo },
     { title, valueTitle, valueSubtitle },
+    { title, valueTitle: longValueTitle, valueSubtitle },
     { title, subtitle, inverted: true },
     { title, subtitle, valueTitle },
     { title, subtitle, valueTitle, inverted: true },
     { title, subtitle, valueTitle, valueSubtitle },
+    {
+      title: longTitle,
+      subtitle: longSubtitle,
+      valueTitle,
+      valueSubtitle,
+      additionalInfo: INFO.nonInteractive,
+    },
     { title, subtitle, valueTitle, valueSubtitle, inverted: true },
     { media, title },
+    { media, title: longTitle },
     { media, title, valueTitle },
+    { media, title: longTitle, valueTitle },
+    { media, title: longTitle, valueSubtitle },
+    { media, title, valueTitle: longValueTitle },
+    { media, title, valueTitle: longValueTitle, valueSubtitle },
     { media, title, subtitle },
+    { media, title: longTitle, subtitle },
     { media, title, valueTitle, valueSubtitle },
     { media, title, valueTitle },
     { media, title, valueSubtitle },
@@ -55,6 +74,14 @@ export const generateVariantsForControl = (
     isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
     { media, title, subtitle, additionalInfo, valueTitle },
     { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
+    {
+      media,
+      title: longTitle,
+      subtitle: longSubtitle,
+      valueTitle,
+      valueSubtitle,
+      additionalInfo: INFO.nonInteractive,
+    },
     { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
     {
       media,

package/src/listItem/constants.ts

@@ -0,0 +1,15 @@
+/**
+ * List item has 3 unique layouts managed through container queries:
+ * 1. width <= cq-min
+ * 2. cq-min < width <= cq-max
+ * 3. width > cq-max
+ *
+ * ⚠️ NB: These values must be kept in sync with:
+ * `packages/components/src/listItem/ListItem.vars.less`
+ *
+ * @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
+ */
+export const LISTITEM_CQ = {
+  MIN: 240,
+  MAX: 308,
+} as const;

package/src/main.css

@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 375px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@container (min-width: 241px) and (max-width: 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -2875,8 +2875,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
-@container (max-width: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -3017,6 +3021,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
     text-align: left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
 .wds-list-item-prompt {
   grid-area: prompt;
@@ -3298,7 +3306,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3309,14 +3317,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
+.wds-list-item-titles,
+.wds-list-item-value {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@container (min-width: 309px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
+.wds-list-item-value {
+  text-align: right;
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-value {
-  text-align: right;
-}
 .wds-list-item-body-center {
   display: flex;
   flex-direction: row;

package/src/navigationOption/NavigationOption.story.tsx

@@ -15,10 +15,13 @@ import { fn } from 'storybook/test';
 
 type StoryArgs = NavigationOptionProps & { hasTitleOnly?: boolean };
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 const meta: Meta<StoryArgs> = {
   component: NavigationOption,
   title: 'Option/NavigationOption',
-  tags: ['autodocs'],
+  tags: ['deprecated'],
   argTypes: {
     href: { control: 'text' },
     title: { control: 'text' },

package/src/navigationOption/NavigationOption.tsx

@@ -8,6 +8,14 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
 
 export type NavigationOptionProps = OptionProps;
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {
     if ('href' in rest && rest.href) {

package/src/navigationOptionsList/NavigationOptionsList.story.tsx

@@ -2,9 +2,13 @@ import NavigationOption from '../navigationOption';
 
 import NavigationOptionsList from '.';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [List](?path=/docs/content-list--docs), [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 export default {
   component: NavigationOptionsList,
   title: 'Option/NavigationOptionsList',
+  tags: ['deprecated'],
 };
 
 export const Basic = () => {

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -5,6 +5,15 @@ export interface NavigationOptionListProps {
   children: React.ReactNode;
 }
 
+/**
+ * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [List source](../list/List.tsx)
+ * @see [ListItem source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const NavigationOptionList = ({ children }: NavigationOptionListProps) => {
   return (
     <ul className="np-navigation-options-list">