@transferwise/components 0.0.0-experimental-333df2c → 0.0.0-experimental-e4e09f5

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

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

package/build/types/label/Label.d.ts

@@ -1,8 +1,17 @@
+import { CommonProps } from '../common';
+import { PropsWithChildren } from 'react';
 export type LabelProps = {
     id?: string;
     htmlFor?: string;
     className?: string;
     children?: React.ReactNode;
 };
-export declare const Label: ({ id, htmlFor, className, children }: LabelProps) => import("react").JSX.Element;
+declare const Label: {
+    ({ id, htmlFor, className, children }: LabelProps): import("react").JSX.Element;
+    Optional: ({ children, className }: LabelOptionalProps) => import("react").JSX.Element;
+    Description: ({ children, className }: LabelDescriptionProps) => import("react").JSX.Element | null;
+};
+export type LabelOptionalProps = PropsWithChildren<CommonProps>;
+export type LabelDescriptionProps = PropsWithChildren<CommonProps>;
+export { Label };
 //# sourceMappingURL=Label.d.ts.map

package/build/types/label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,yCAA0C,UAAU,gCAUrE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,KAAK;2CAA0C,UAAU;wCAsBpB,kBAAkB;2CAkBf,qBAAqB;CAtBlE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAkBhE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAQnE,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/build/types/label/Label.messages.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    optionalLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+    optionalAriaLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Label.messages.d.ts.map

package/build/types/label/Label.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.messages.d.ts","sourceRoot":"","sources":["../../../src/label/Label.messages.tsx"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}

package/build/types/label/index.d.ts

@@ -0,0 +1,3 @@
+export { Label } from './Label';
+export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';
+//# sourceMappingURL=index.d.ts.map

package/build/types/label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-333df2c",
+  "version": "0.0.0-experimental-e4e09f5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.12.1",
+    "@transferwise/neptune-css": "0.0.0-experimental-e4e09f5",
     "@wise/components-theming": "1.5.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.9.6",
+    "@transferwise/neptune-css": "0.0.0-experimental-e4e09f5",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",
@@ -125,8 +125,7 @@
     "merge-props": "^6.0.0",
     "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
-    "react-transition-group": "^4.4.5",
-    "virtua": "^0.33.3"
+    "react-transition-group": "^4.4.5"
   },
   "publishConfig": {
     "access": "public"

package/src/dateInput/DateInput.tests.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, fn } from '@storybook/test';
 
-import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { DateInput, Field, InlineAlert, Label } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
 import Provider from '../provider/Provider';
@@ -39,43 +39,19 @@ export const WithLabel = {
   },
   render: (args) => {
     const id1 = 'date-input-group-label-1';
-    const label = 'Date of Birth';
 
     return (
       <>
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
-          <code>aria-labelledby</code> prop
-        </Title>
-        <div className="control-label" id={id1}>
-          Date of Delivery
-        </div>
-        <DateInput {...args} aria-labelledby={id1} />
+        <Label id={id1}>
+          <Label.Optional>Date of Delivery</Label.Optional>
+        </Label>
+        <DateInput {...args} aria-labelledby={id1} aria-label="" />
 
         <br />
 
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
-          via <code>aria-label</code> attribute
-        </Title>
-        <div className="control-label">
-          {label}{' '}
-          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
-        </div>
-        <DateInput {...args} aria-label={label} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
-          label (rare use case)
-        </Title>
-        <fieldset>
-          <legend className="control-label">
-            Expiry Date for Credit Card (example of MONTH_YEAR mode)
-          </legend>
-          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
-        </fieldset>
+        <Field label="Date of Delivery">
+          <DateInput {...args} />
+        </Field>
       </>
     );
   },

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -28,7 +28,7 @@ describe('DateLookup', () => {
       </Field>,
     );
     // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
-    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
+    expect(screen.getByLabelText(/Date of birth/)).toHaveTextContent(
       initialValue.getFullYear().toString(),
     );
   });

package/src/dateLookup/dateTrigger/DateTrigger.css

@@ -4,18 +4,10 @@
   white-space: nowrap;
   width: 100%;
 }
-.np-date-trigger .control-label {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
-.np-theme-personal .np-date-trigger .control-label + span {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;

package/src/dateLookup/dateTrigger/DateTrigger.less

@@ -7,16 +7,8 @@
   white-space: nowrap;
   width: 100%;
 
-  .control-label {
-    font-weight: var(--font-weight-regular);
-  }
-
   .np-theme-personal & {
     padding-left: var(--size-16);
-
-    .control-label + span {
-      font-weight: var(--font-weight-regular);
-    }
   }
 }
 

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -119,5 +119,5 @@ describe('DateTrigger', () => {
   const button = () => component.find('.np-date-trigger');
   const clearButton = () => component.find('.clear-btn');
   const chevron = () => component.find(Chevron);
-  const label = () => component.find('.control-label');
+  const label = () => component.find('.np-date-trigger-label');
 });

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -2,12 +2,13 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
-import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
+import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 import { useContext } from 'react';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
+import Body from '../../body';
 
 interface DateTriggerProps {
   selectedDate: Date | null;
@@ -45,15 +46,19 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         type="button"
         onClick={onClick}
       >
-        {label && <span className="control-label small m-r-1">{label}</span>}
+        {label && (
+          <Body as="span" className="np-date-trigger-label m-r-1">
+            {label}
+          </Body>
+        )}
         {selectedDate ? (
-          <span className="font-weight-normal">
+          <Body as="span" type={Typography.BODY_LARGE}>
             {formatDate(selectedDate, locale, {
               day: 'numeric',
               month: monthFormat,
               year: 'numeric',
             })}
-          </span>
+          </Body>
         ) : (
           <span
             className="form-control-placeholder visible-xs-inline visible-sm-inline

package/src/field/Field.spec.tsx

@@ -14,7 +14,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
     expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
   });
 
@@ -25,7 +25,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    const textbox = screen.getByRole('textbox', { description: 'This is help text' });
+    const textbox = screen.getByText('This is help text');
     expect(textbox).toBeInTheDocument();
     expect(textbox).not.toBeInvalid();
   });
@@ -50,7 +50,7 @@ describe('Field', () => {
     );
 
     expect(screen.getByRole('textbox', { description: 'This is error text' })).toBeInTheDocument();
-    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
+    expect(screen.getByText('This is help text')).toBeInTheDocument();
   });
 
   it('avoids triggering button within label inadvertently', async () => {

package/src/field/Field.story.tsx

@@ -1,8 +1,15 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import { useState } from 'react';
 
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
 import { Sentiment } from '../common';
+import DateInput from '../dateInput';
+import { fn } from '@storybook/test';
+import { lorem10, lorem40 } from '../test-utils';
+import { TextArea } from '../inputs/TextArea';
+import { SearchInput } from '../inputs/SearchInput';
+import Info from '../info';
 
 export default {
   component: Field,
@@ -13,9 +20,51 @@ export default {
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Field label="Phone number">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
+    <div className="row">
+      <div className="col-md-8 col-md-offset-2">
+        <Field label="Phone number" required>
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Phone number">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Phone number" description="Please provide you primary phone number">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+
+        <Field label="Date Of Birth">
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Date Of Birth" description={lorem10}>
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Search business">
+          <SearchInput />
+        </Field>
+
+        <Field label="Date Of Birth">
+          <TextArea />
+        </Field>
+
+        <Field label="Date Of Birth" message={lorem10} sentiment="negative">
+          <TextArea />
+        </Field>
+
+        <Field
+          label={
+            <>
+              Date Of Birth <Info content={lorem40} />
+            </>
+          }
+          message={lorem10}
+          sentiment="negative"
+        >
+          <TextArea />
+        </Field>
+      </div>
+    </div>
   );
 };
 
@@ -32,6 +81,35 @@ export const WithStatusMessages = () => {
       <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
+
+      {/* instance with deprecated `hint` prop */}
+      <Field
+        label="Phone number"
+        hint="This is a helpful message"
+        sentiment={Sentiment.NEGATIVE}
+        message="Validation error, please take a look"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      {/* instance with deprecated `error` & `hint` props */}
+      <Field
+        label="Phone number"
+        hint="This is a helpful message"
+        error="Validation error, please take a look"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      <Field
+        label="Phone number"
+        description="This is a helpful message"
+        sentiment={Sentiment.NEGATIVE}
+        message="Validation error, please take a look"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
       <Field label="Phone number" message="This is a helpful message">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>

package/src/field/Field.tsx

@@ -9,16 +9,18 @@ import {
   InputIdContextProvider,
   InputInvalidProvider,
 } from '../inputs/contexts';
-import { Label } from '../label/Label';
+import { Label } from '../label';
 
 export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
-  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
+  required?: boolean;
+  /** @deprecated use `description` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
+  description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
   sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
@@ -29,14 +31,17 @@ export type FieldProps = {
 export const Field = ({
   id,
   label,
+  required = false,
   message: propMessage,
+  hint,
+  description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }: FieldProps) => {
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
+  const message = propMessage || props.error;
   const hasError = sentiment === Sentiment.NEGATIVE;
 
   const labelId = useId();
@@ -65,7 +70,8 @@ export const Field = ({
             >
               {label != null ? (
                 <Label id={labelId} htmlFor={inputId}>
-                  {label}
+                  {required ? label : <Label.Optional>{label}</Label.Optional>}
+                  {description && <Label.Description>{description}</Label.Description>}
                   {children}
                 </Label>
               ) : (

package/src/i18n/en.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
+  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -55,5 +56,6 @@
   "neptune.UploadItem.uploaded": "Uploaded",
   "neptune.UploadItem.uploadedFile": "Uploaded file",
   "neptune.UploadItem.uploading": "Uploading...",
-  "neptune.UploadItem.uploadingFailed": "Uploading failed"
+  "neptune.UploadItem.uploadingFailed": "Uploading failed",
+  "neptune.aria.Label.optional": "This field is optional"
 }

package/src/index.ts

@@ -44,7 +44,7 @@ export type {
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
-export type { LabelProps } from './label/Label';
+export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';

package/src/inlineAlert/InlineAlert.story.tsx

@@ -5,6 +5,8 @@ import { Sentiment } from '../common';
 import { Input } from '../inputs/Input';
 
 import InlineAlert, { InlineAlertProps } from './InlineAlert';
+import { Label } from '../label';
+import { lorem40 } from '../test-utils';
 
 export default {
   component: InlineAlert,
@@ -66,41 +68,26 @@ export const Basic = () => {
         this manually.
       </p>
       <div className={`form-group ${typeClass}`}>
-        <label className="control-label" htmlFor="id0">
-          Toggleable
-        </label>
+        <Label htmlFor="id0">Toggleable</Label>
         <Input id="id0" value="Neptune is cool" />
         <InlineAlert type={type}>{message}</InlineAlert>
       </div>
       <div className="form-group has-error">
-        <label className="control-label" htmlFor="id1">
-          Negative
-        </label>
+        <Label htmlFor="id1">Negative</Label>
         <Input id="id1" value="Neptune is cool" />
         <InlineAlert type="negative">{message}</InlineAlert>
       </div>
       <div className="form-group has-success">
-        <label className="control-label" htmlFor="id2">
-          Positive
-        </label>
+        <Label htmlFor="id2">Positive</Label>
         <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </InlineAlert>
+        <InlineAlert type="positive">{lorem40}</InlineAlert>
       </div>
       <div className="form-group has-neutral">
-        <label className="control-label" htmlFor="id3">
-          Neutral
-        </label>
+        <Label htmlFor="id3">Neutral</Label>
         <Input id="id3" value="Neptune is cool" />
-        <InlineAlert type="neutral">{message}</InlineAlert>
       </div>
       <div className="form-group">
-        <label className="control-label" htmlFor="id4">
-          No has-* class
-        </label>
+        <label htmlFor="id4">No has-* class</label>
         <Input id="id4" value="Neptune is cool" />
         <InlineAlert type="negative">{message}</InlineAlert>
       </div>

package/src/inputs/InputGroup.spec.tsx

@@ -26,6 +26,6 @@ describe('InputGroup', () => {
         </InputGroup>
       </Field>,
     );
-    expect(screen.getByLabelText('Search…')).toHaveRole('textbox');
+    expect(screen.getByLabelText(/Search…/)).toHaveRole('textbox');
   });
 });

package/src/inputs/SearchInput.spec.tsx

@@ -11,6 +11,6 @@ describe('SearchInput', () => {
         <SearchInput />
       </Field>,
     );
-    expect(screen.getByLabelText('Search…')).toHaveRole('searchbox');
+    expect(screen.getByLabelText(/Search…/)).toHaveRole('searchbox');
   });
 });

package/src/inputs/SelectInput.css

@@ -206,10 +206,6 @@
     height: auto;
   }
 }
-.np-select-input-listbox-container--virtualized {
-  /* The wrapping element shrinks this as needed */
-  height: 100vh;
-}
 .np-select-input-listbox-container--has-group {
   scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
@@ -228,12 +224,6 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
-.np-select-input-listbox-container--virtualized .np-select-input-listbox {
-  /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
-  overflow-y: auto;
-  contain: strict;
-  height: 100%;
-}
 .np-select-input-separator-item {
   margin: 8px;
   margin: var(--size-8);

package/src/inputs/SelectInput.less

@@ -60,11 +60,6 @@
     }
   }
 
-  &--virtualized {
-    /* The wrapping element shrinks this as needed */
-    height: 100vh;
-  }
-
   &--has-group {
     scroll-padding-top: var(--size-32);
   }
@@ -76,13 +71,6 @@
 
   .focus-ring();
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-
-  .np-select-input-listbox-container--virtualized & {
-    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
-    overflow-y: auto;
-    contain: strict;
-    height: 100%;
-  }
 }
 
 .np-select-input-separator-item {

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
+    expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
   });
 });

package/src/inputs/SelectInput.story.tsx

@@ -322,26 +322,6 @@ export const Advanced: Story<Month> = {
   },
 };
 
-export const ManyItems: Story<string, true> = {
-  args: {
-    multiple: true,
-    items: Array.from({ length: 1000 }, (_, index) => ({
-      type: 'option',
-      value: String(index + 1),
-    })),
-    renderValue: (value, withinTrigger) =>
-      withinTrigger ? (
-        value
-      ) : (
-        <SelectInputOptionContent
-          title={value}
-          description={Number(value) % 10 === 0 ? 'Divisible by 10' : undefined}
-        />
-      ),
-    filterable: true,
-  },
-};
-
 export const WithinDrawer: Story<Currency> = {
   args: CurrenciesArgs,
   decorators: [