@transferwise/components 46.77.0 → 46.79.0

package/src/common/circle/Circle.less

@@ -3,4 +3,10 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+
+  // circle like components has custom icon sizes
+  .tw-icon > svg {
+    height: var(--circle-icon-size);
+    width: var(--circle-icon-size);
+  }
 }

package/src/common/circle/Circle.story.tsx

@@ -30,14 +30,14 @@ export const Sizes: Story = storyConfig(
   {
     render: () => {
       const content = <Profile size={16} />;
-      const sizes: CircleProps['size'][] = [32, 40, 48, 56, 72];
+      const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
       return (
         <div
           style={{
             gap: '1em',
             display: 'grid',
             justifyContent: 'space-between',
-            gridTemplate: 'auto auto / repeat(5, min-content)',
+            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
           }}
         >
           {sizes.map((size) => (

package/src/common/circle/Circle.tsx

@@ -1,7 +1,9 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useMedia } from '../hooks/useMedia';
+import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -19,6 +21,19 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36,
+};
+
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -31,11 +46,19 @@ const Circle = forwardRef(function Circle(
   }: Props,
   ref,
 ) {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      style={{
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size':
+          isTinyViewport && !fixedSize
+            ? `${MAP_ICON_SIZE[size] / 2}px`
+            : `${MAP_ICON_SIZE[size]}px`,
+        ...style,
+      }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/common/{fakeEvents.js → fakeEvents.ts}

@@ -4,7 +4,7 @@ export const fakeEvent = () => ({
   preventDefault() {},
 });
 
-export const fakeKeyDownEventForKey = (key) => ({
+export const fakeKeyDownEventForKey = (key: string) => ({
   ...fakeEvent(),
   key,
 });

package/src/common/hooks/useHasIntersected/{useHasIntersected.js → useHasIntersected.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-const ObserverParams = {
+const ObserverParams: IntersectionObserverInit = {
   threshold: 0.1,
 };
 
@@ -9,13 +9,19 @@ const ObserverParams = {
  * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
  * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
  *
- * @param elRef.elRef
- * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
- * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
+ * @param {object} params
+ * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.
+ * @param {string} [params.loading = 'eager'] - string that contains the type of loading.
  * @param elRef.loading
  * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
  */
-export const useHasIntersected = ({ elRef, loading }) => {
+export const useHasIntersected = ({
+  elRef,
+  loading = 'eager',
+}: {
+  elRef: React.RefObject<HTMLElement>;
+  loading?: 'eager' | 'lazy';
+}) => {
   const [hasIntersected, setHasIntersected] = useState(false);
 
   const { current } = elRef || {};
@@ -24,29 +30,32 @@ export const useHasIntersected = ({ elRef, loading }) => {
     return elRef && current;
   };
 
-  const handleOnIntersect = (entries, observer) => {
+  const handleOnIntersect: IntersectionObserverCallback = (entries, observer) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
         setHasIntersected(true);
-        observer.unobserve(current);
+
+        if (current) {
+          observer.unobserve(current);
+        }
       }
     });
   };
 
   useEffect(() => {
-    let observer;
+    let observer: IntersectionObserver | undefined;
     let didCancel = false;
 
-    // Check if window is define for SSR and Old browsers fallback
+    // Check if window is defined for SSR and Old browsers fallback
     if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
       setHasIntersected(true);
-    } else if (!didCancel) {
+    } else if (current && !didCancel) {
       observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
       observer.observe(current);
     }
     return () => {
       didCancel = true;
-      if (observer) {
+      if (observer && current) {
         observer.unobserve(current);
       }
     };

package/src/flowNavigation/{FlowNavigation.story.js → FlowNavigation.story.tsx}

@@ -24,6 +24,10 @@ const avatarProfiles = {
   Business: <BriefcaseIcon />,
   Profile: <ProfileIcon />,
 };
+type ProfileTypeKeys = keyof typeof ProfileType;
+
+const getAvatarProfile = (showAvatar: string) =>
+  showAvatar in avatarProfiles ? avatarProfiles[showAvatar as keyof typeof avatarProfiles] : null;
 
 export const Variants = () => {
   const [activeStep, setActiveStep] = useState(2);
@@ -32,7 +36,11 @@ export const Variants = () => {
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
-  const profileType = select('profileType', Object.keys(ProfileType));
+  const profileType: ProfileTypeKeys | undefined = select(
+    'profileType',
+    Object.keys(ProfileType) as ProfileTypeKeys[],
+    undefined,
+  );
   const avatarURL = text(
     'avatarURL',
     'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
@@ -44,7 +52,7 @@ export const Variants = () => {
         avatar={
           !showAvatar ? null : (
             <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-              {avatarProfiles[showAvatar]}
+              {getAvatarProfile(showAvatar)}
             </Avatar>
           )
         }
@@ -70,9 +78,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -112,9 +122,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -155,9 +167,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -171,9 +185,11 @@ export const Variants = () => {
           { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(1) },
           { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => setActiveStep(2) },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -216,7 +232,7 @@ export const SendFlow = () => {
       ...(activeStep > 3 && { onClick: handleStepClick(3) }),
     },
   ];
-  function handleStepClick(step) {
+  function handleStepClick(step: number) {
     return () => {
       setActiveStep(step);
     };
@@ -268,16 +284,18 @@ export const WithOverlayHeaderComparison = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {avatarProfiles[showAvatar]}
+                {getAvatarProfile(showAvatar)}
               </Avatar>
             ) : null
           }
           activeStep={activeStep}
           done={done}
           steps={[]}
-          onClose={showCloseButton && (() => setClosed(true))}
+          onClose={showCloseButton ? () => setClosed(true) : undefined}
           onGoBack={
-            showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+            showMobileBackButton
+              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+              : undefined
           }
         />
       </div>
@@ -286,11 +304,11 @@ export const WithOverlayHeaderComparison = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {avatarProfiles[showAvatar]}
+                {getAvatarProfile(showAvatar)}
               </Avatar>
             ) : null
           }
-          onClose={showCloseButton && (() => setClosed(true))}
+          onClose={showCloseButton ? () => setClosed(true) : undefined}
         />
       </div>
     </>

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -21,12 +21,10 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>
@@ -138,12 +136,10 @@ exports[`FlowNavigation renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>

package/src/i18n/de.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.SelectOption.action.label": "Auswählen",
   "neptune.SelectOption.selected.action.label": "Ausgewählte Option ändern",
+  "neptune.StatusIcon.iconLabel.error": "Fehler:",
+  "neptune.StatusIcon.iconLabel.information": "Auskünfte:",
+  "neptune.StatusIcon.iconLabel.pending": "Ausstehend:",
+  "neptune.StatusIcon.iconLabel.success": "Erfolgreich:",
+  "neptune.StatusIcon.iconLabel.warning": "Warnung:",
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",

package/src/i18n/es.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
   "neptune.SelectOption.action.label": "Elegir",
   "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
+  "neptune.StatusIcon.iconLabel.error": "Error:",
+  "neptune.StatusIcon.iconLabel.information": "Información:",
+  "neptune.StatusIcon.iconLabel.pending": "Pendiente:",
+  "neptune.StatusIcon.iconLabel.success": "Éxito:",
+  "neptune.StatusIcon.iconLabel.warning": "Advertencia:",
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",
   "neptune.Summary.statusPending": "Apartado pendiente",

package/src/i18n/fr.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.SelectOption.action.label": "Sélectionner",
   "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
+  "neptune.StatusIcon.iconLabel.error": "Erreur:",
+  "neptune.StatusIcon.iconLabel.information": "Informations:",
+  "neptune.StatusIcon.iconLabel.pending": "En attente :",
+  "neptune.StatusIcon.iconLabel.success": "Terminé:",
+  "neptune.StatusIcon.iconLabel.warning": "Attention:",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",

package/src/i18n/hu.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nincs találat",
   "neptune.SelectOption.action.label": "Kiválasztás",
   "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
+  "neptune.StatusIcon.iconLabel.error": "Hiba:",
+  "neptune.StatusIcon.iconLabel.information": "Információ:",
+  "neptune.StatusIcon.iconLabel.pending": "Függőben:",
+  "neptune.StatusIcon.iconLabel.success": "Siker:",
+  "neptune.StatusIcon.iconLabel.warning": "Figyelmeztetés:",
   "neptune.Summary.statusDone": "Kész",
   "neptune.Summary.statusNotDone": "Hátravan",
   "neptune.Summary.statusPending": "Függőben",

package/src/i18n/id.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
   "neptune.SelectOption.action.label": "Pilih",
   "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
+  "neptune.StatusIcon.iconLabel.error": "Kesalahan:",
+  "neptune.StatusIcon.iconLabel.information": "Informasi:",
+  "neptune.StatusIcon.iconLabel.pending": "Tertunda:",
+  "neptune.StatusIcon.iconLabel.success": "Berhasil:",
+  "neptune.StatusIcon.iconLabel.warning": "Peringatan:",
   "neptune.Summary.statusDone": "Item selesai",
   "neptune.Summary.statusNotDone": "Item yang harus dilakukan",
   "neptune.Summary.statusPending": "Item tertunda",

package/src/i18n/it.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
   "neptune.SelectOption.action.label": "Scegli",
   "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
+  "neptune.StatusIcon.iconLabel.error": "Errore:",
+  "neptune.StatusIcon.iconLabel.information": "Informazioni:",
+  "neptune.StatusIcon.iconLabel.pending": "In attesa:",
+  "neptune.StatusIcon.iconLabel.success": "Fatto:",
+  "neptune.StatusIcon.iconLabel.warning": "Attenzione:",
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",
   "neptune.Summary.statusPending": "In corso",

package/src/i18n/ja.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
   "neptune.SelectOption.action.label": "選択してください",
   "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
+  "neptune.StatusIcon.iconLabel.error": "エラー：",
+  "neptune.StatusIcon.iconLabel.information": "情報：",
+  "neptune.StatusIcon.iconLabel.pending": "保留中：",
+  "neptune.StatusIcon.iconLabel.success": "完了：",
+  "neptune.StatusIcon.iconLabel.warning": "警告：",
   "neptune.Summary.statusDone": "完了",
   "neptune.Summary.statusNotDone": "未完了",
   "neptune.Summary.statusPending": "保留中",

package/src/i18n/pl.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
   "neptune.SelectOption.action.label": "Wybierz",
   "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
+  "neptune.StatusIcon.iconLabel.error": "Błąd:",
+  "neptune.StatusIcon.iconLabel.information": "Informacje:",
+  "neptune.StatusIcon.iconLabel.pending": "W toku:",
+  "neptune.StatusIcon.iconLabel.success": "Gotowe:",
+  "neptune.StatusIcon.iconLabel.warning": "Ostrzeżenie:",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",
   "neptune.Summary.statusPending": "Czynność oczekująca",

package/src/i18n/pt.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
   "neptune.SelectOption.action.label": "Selecionar",
   "neptune.SelectOption.selected.action.label": "Altere a opção escolhida",
+  "neptune.StatusIcon.iconLabel.error": "Erro:",
+  "neptune.StatusIcon.iconLabel.information": "Informação:",
+  "neptune.StatusIcon.iconLabel.pending": "Pendente:",
+  "neptune.StatusIcon.iconLabel.success": "Concluído:",
+  "neptune.StatusIcon.iconLabel.warning": "Aviso:",
   "neptune.Summary.statusDone": "Pronto",
   "neptune.Summary.statusNotDone": "Não iniciado",
   "neptune.Summary.statusPending": "Pendente",

package/src/i18n/ro.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
   "neptune.SelectOption.action.label": "Alege",
   "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
+  "neptune.StatusIcon.iconLabel.error": "Eroare:",
+  "neptune.StatusIcon.iconLabel.information": "Informații:",
+  "neptune.StatusIcon.iconLabel.pending": "În așteptare:",
+  "neptune.StatusIcon.iconLabel.success": "Gata:",
+  "neptune.StatusIcon.iconLabel.warning": "Avertisment:",
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",
   "neptune.Summary.statusPending": "În așteptare",

package/src/i18n/ru.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
   "neptune.SelectOption.action.label": "Выбрать",
   "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
+  "neptune.StatusIcon.iconLabel.error": "Ошибка:",
+  "neptune.StatusIcon.iconLabel.information": "Информация:",
+  "neptune.StatusIcon.iconLabel.pending": "В ожидании:",
+  "neptune.StatusIcon.iconLabel.success": "Готово:",
+  "neptune.StatusIcon.iconLabel.warning": "Внимание:",
   "neptune.Summary.statusDone": "Этап завершен",
   "neptune.Summary.statusNotDone": "Этап к выполнению",
   "neptune.Summary.statusPending": "Этап в процессе",

package/src/i18n/tr.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
   "neptune.SelectOption.action.label": "Seç",
   "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
+  "neptune.StatusIcon.iconLabel.error": "Hata:",
+  "neptune.StatusIcon.iconLabel.information": "Bilgi:",
+  "neptune.StatusIcon.iconLabel.pending": "Bekliyor:",
+  "neptune.StatusIcon.iconLabel.success": "Başarılı:",
+  "neptune.StatusIcon.iconLabel.warning": "Uyarı:",
   "neptune.Summary.statusDone": "Tamamlanan aşama",
   "neptune.Summary.statusNotDone": "Yapılacak",
   "neptune.Summary.statusPending": "Bekliyor",

package/src/index.ts

@@ -59,6 +59,7 @@ export type {
   MoneyInputProps,
 } from './moneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
+export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
 export type { PanelProps } from './common/panel';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -0,0 +1,78 @@
+import { userEvent, within, fn } from '@storybook/test';
+
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
+import { Field, FieldProps } from '../field/Field';
+import { Meta, type StoryObj } from '@storybook/react';
+
+type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
+
+const meta = {
+  title: 'Forms/InputWithDisplayFormat',
+  component: InputWithDisplayFormat,
+  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
+    return (
+      <Field label={label} id={args.id}>
+        <InputWithDisplayFormat id={args.id} {...args} />
+      </Field>
+    );
+  },
+  args: {
+    onFocus: fn(),
+    onBlur: fn(),
+    onChange: fn(),
+  },
+} satisfies Meta<typeof InputWithDisplayFormat>;
+export default meta;
+
+export const Basic: Story = {
+  args: {
+    label: 'Sort Code',
+    placeholder: '**-**-**',
+    displayPattern: '**-**-**',
+  },
+};
+
+export const CardNumber: Story = {
+  args: {
+    label: 'Card Number',
+    placeholder: '**** **** **** **** ***',
+    displayPattern: '**** **** **** **** ***',
+  },
+};
+
+export const CVC: Story = {
+  args: {
+    label: 'CVC',
+    placeholder: '***',
+    displayPattern: '***',
+    value: '',
+  },
+};
+
+export const ExpiryDate: Story = {
+  args: {
+    label: 'Expiry Date',
+    placeholder: '** / **',
+    displayPattern: '** / **',
+  },
+};
+
+export const SecurityPin: Story = {
+  args: {
+    label: 'Security Pin',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+};
+
+export const SecurityPinPlay: Story = {
+  args: {
+    label: 'Security Pin Play',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
+  },
+};