@transferwise/components 0.0.0-experimental-dad389c → 0.0.0-experimental-5e78062

package/build/alert/Alert.js

@@ -7,10 +7,10 @@ var React = require('react');
 var Body = require('../body/Body.js');
 var StatusIcon = require('../statusIcon/StatusIcon.js');
 var Title = require('../title/Title.js');
+var logActionRequired = require('../utilities/logActionRequired.js');
 var InlineMarkdown = require('./inlineMarkdown/InlineMarkdown.js');
 var Action = require('../common/action/Action.js');
 var jsxRuntime = require('react/jsx-runtime');
-var logActionRequired = require('../utilities/logActionRequired.js');
 var constants = require('../common/constants.js');
 var sentiment = require('../common/propsValues/sentiment.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');

package/build/alert/Alert.mjs

@@ -3,10 +3,10 @@ import { useEffect, useState, useRef } from 'react';
 import Body from '../body/Body.mjs';
 import StatusIcon from '../statusIcon/StatusIcon.mjs';
 import Title from '../title/Title.mjs';
+import { logActionRequired } from '../utilities/logActionRequired.mjs';
 import InlineMarkdown from './inlineMarkdown/InlineMarkdown.mjs';
 import { Action } from '../common/action/Action.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { logActionRequired } from '../utilities/logActionRequired.mjs';
 import { WDS_LIVE_REGION_DELAY_MS } from '../common/constants.mjs';
 import { Sentiment } from '../common/propsValues/sentiment.mjs';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';

package/build/button/legacyUtils/legacyUtils.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var type = require('../../common/propsValues/type.js');
 var logActionRequired = require('../../utilities/logActionRequired.js');
+var type = require('../../common/propsValues/type.js');
 var control = require('../../common/propsValues/control.js');
 var size = require('../../common/propsValues/size.js');
 

package/build/button/legacyUtils/legacyUtils.mjs

@@ -1,5 +1,5 @@
-import { Type } from '../../common/propsValues/type.mjs';
 import { logActionRequiredIf } from '../../utilities/logActionRequired.mjs';
+import { Type } from '../../common/propsValues/type.mjs';
 import { ControlType, Priority } from '../../common/propsValues/control.mjs';
 import { Size } from '../../common/propsValues/size.mjs';
 

package/build/drawer/Drawer.js

@@ -7,8 +7,8 @@ var Dimmer = require('../dimmer/Dimmer.js');
 var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
 var SlidingPanel = require('../slidingPanel/SlidingPanel.js');
 var Title = require('../title/Title.js');
-var jsxRuntime = require('react/jsx-runtime');
 var logActionRequired = require('../utilities/logActionRequired.js');
+var jsxRuntime = require('react/jsx-runtime');
 var useLayout = require('../common/hooks/useLayout/useLayout.js');
 var position = require('../common/propsValues/position.js');
 var typography = require('../common/propsValues/typography.js');

package/build/drawer/Drawer.mjs

@@ -5,8 +5,8 @@ import Dimmer from '../dimmer/Dimmer.mjs';
 import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
 import SlidingPanel from '../slidingPanel/SlidingPanel.mjs';
 import Title from '../title/Title.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { logActionRequiredIf } from '../utilities/logActionRequired.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
 import { Position } from '../common/propsValues/position.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';

package/build/markdown/Markdown.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var commonmark = require('commonmark');
+var logActionRequired = require('../utilities/logActionRequired.js');
 var jsxRuntime = require('react/jsx-runtime');
 var markdownNodeType = require('../common/propsValues/markdownNodeType.js');
-var logActionRequired = require('../utilities/logActionRequired.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/build/markdown/Markdown.mjs

@@ -1,7 +1,7 @@
 import commonmark from 'commonmark';
+import { logActionRequired } from '../utilities/logActionRequired.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { MarkdownNodeType } from '../common/propsValues/markdownNodeType.mjs';
-import { logActionRequired } from '../utilities/logActionRequired.mjs';
 
 const reader = new commonmark.Parser();
 const writer = new commonmark.HtmlRenderer({

package/build/popover/Popover.js

@@ -3,8 +3,8 @@
 var clsx = require('clsx');
 var React = require('react');
 var Title = require('../title/Title.js');
-var jsxRuntime = require('react/jsx-runtime');
 var logActionRequired = require('../utilities/logActionRequired.js');
+var jsxRuntime = require('react/jsx-runtime');
 var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
 var typography = require('../common/propsValues/typography.js');
 var position = require('../common/propsValues/position.js');

package/build/popover/Popover.mjs

@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
 import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
 import Title from '../title/Title.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import { logActionRequired } from '../utilities/logActionRequired.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import { Position } from '../common/propsValues/position.mjs';

package/build/types/test-utils/style-mock.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=style-mock.d.ts.map

package/build/types/test-utils/style-mock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/style-mock.ts"],"names":[],"mappings":""}

package/build/types/utilities/deprecatedProperty/deprecatedProperty.d.ts

@@ -1,8 +1,10 @@
+type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
+type DeprecatedOptionsType = {
+    component: string;
+    message?: string;
+    newProp?: string;
+    expiryDate?: Date;
+};
+declare const deprecated: (validator: ValidatorType, { component, message, newProp: newProperty, expiryDate }: DeprecatedOptionsType) => (props: Record<string, any>, propertyName: string, ...rest: any[]) => Error | null;
 export default deprecated;
-declare function deprecated(validator: any, { component, message, newProp: newProperty, expiryDate }: {
-    component: any;
-    message?: string | undefined;
-    newProp?: null | undefined;
-    expiryDate?: null | undefined;
-}): (props: any, propertyName: any, ...rest: any[]) => any;
 //# sourceMappingURL=deprecatedProperty.d.ts.map

package/build/types/utilities/deprecatedProperty/deprecatedProperty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deprecatedProperty.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/deprecatedProperty.js"],"names":[],"mappings":";AAsBA;;;;;2DAgBG"}
+{"version":3,"file":"deprecatedProperty.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/deprecatedProperty.ts"],"names":[],"mappings":"AASA,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,CAAC;AAEpG,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB,CAAC;AAsBF,QAAA,MAAM,UAAU,cAED,aAAa,4DACuC,qBAAqB,aAE9E,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,gBAAgB,MAAM,WAAW,GAAG,EAAE,iBAchE,CAAC;AAEJ,eAAe,UAAU,CAAC"}

package/build/types/utilities/deprecatedProperty/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./deprecatedProperty";
+export { default } from './deprecatedProperty';
 //# sourceMappingURL=index.d.ts.map

package/build/types/utilities/deprecatedProperty/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -1,3 +1,3 @@
-export { default as deprecated } from "./deprecatedProperty";
-export { logActionRequired, logActionRequiredIf } from "./logActionRequired";
+export { default as deprecated } from './deprecatedProperty';
+export { logActionRequired, logActionRequiredIf } from './logActionRequired';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC"}

package/build/types/utilities/logActionRequired.d.ts

@@ -1,3 +1,3 @@
-export function logActionRequired(message: any): void;
-export function logActionRequiredIf(message: any, conditional: any): void;
+export declare function logActionRequired(message: string): void;
+export declare function logActionRequiredIf(message: string, conditional: boolean): void;
 //# sourceMappingURL=logActionRequired.d.ts.map

package/build/types/utilities/logActionRequired.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logActionRequired.d.ts","sourceRoot":"","sources":["../../../src/utilities/logActionRequired.js"],"names":[],"mappings":"AAAA,sDAKC;AAED,0EAIC"}
+{"version":3,"file":"logActionRequired.d.ts","sourceRoot":"","sources":["../../../src/utilities/logActionRequired.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,QAKhD;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,QAIxE"}

package/build/utilities/logActionRequired.js.map

@@ -1 +1 @@
-{"version":3,"file":"logActionRequired.js","sources":["../../src/utilities/logActionRequired.js"],"sourcesContent":["export function logActionRequired(message) {\n  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn(message);\n  }\n}\n\nexport function logActionRequiredIf(message, conditional) {\n  if (conditional) {\n    logActionRequired(message);\n  }\n}\n"],"names":["logActionRequired","message","process","env","NODE_ENV","console","warn","logActionRequiredIf","conditional"],"mappings":";;AAAO,SAASA,iBAAiBA,CAACC,OAAO,EAAE;AACzC,EAAA,IAAI,OAAOC,OAAO,KAAK,WAAW,IAAIA,OAAO,CAACC,GAAG,EAAEC,QAAQ,KAAK,YAAY,EAAE;AAC5E;AACAC,IAAAA,OAAO,CAACC,IAAI,CAACL,OAAO,CAAC,CAAA;AACvB,GAAA;AACF,CAAA;AAEO,SAASM,mBAAmBA,CAACN,OAAO,EAAEO,WAAW,EAAE;AACxD,EAAA,IAAIA,WAAW,EAAE;IACfR,iBAAiB,CAACC,OAAO,CAAC,CAAA;AAC5B,GAAA;AACF;;;;;"}
+{"version":3,"file":"logActionRequired.js","sources":["../../src/utilities/logActionRequired.ts"],"sourcesContent":["export function logActionRequired(message: string) {\n  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn(message);\n  }\n}\n\nexport function logActionRequiredIf(message: string, conditional: boolean) {\n  if (conditional) {\n    logActionRequired(message);\n  }\n}\n"],"names":["logActionRequired","message","process","env","NODE_ENV","console","warn","logActionRequiredIf","conditional"],"mappings":";;AAAM,SAAUA,iBAAiBA,CAACC,OAAe,EAAA;AAC/C,EAAA,IAAI,OAAOC,OAAO,KAAK,WAAW,IAAIA,OAAO,CAACC,GAAG,EAAEC,QAAQ,KAAK,YAAY,EAAE;AAC5E;AACAC,IAAAA,OAAO,CAACC,IAAI,CAACL,OAAO,CAAC,CAAA;AACvB,GAAA;AACF,CAAA;AAEgB,SAAAM,mBAAmBA,CAACN,OAAe,EAAEO,WAAoB,EAAA;AACvE,EAAA,IAAIA,WAAW,EAAE;IACfR,iBAAiB,CAACC,OAAO,CAAC,CAAA;AAC5B,GAAA;AACF;;;;;"}

package/build/utilities/logActionRequired.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"logActionRequired.mjs","sources":["../../src/utilities/logActionRequired.js"],"sourcesContent":["export function logActionRequired(message) {\n  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn(message);\n  }\n}\n\nexport function logActionRequiredIf(message, conditional) {\n  if (conditional) {\n    logActionRequired(message);\n  }\n}\n"],"names":["logActionRequired","message","process","env","NODE_ENV","console","warn","logActionRequiredIf","conditional"],"mappings":"AAAO,SAASA,iBAAiBA,CAACC,OAAO,EAAE;AACzC,EAAA,IAAI,OAAOC,OAAO,KAAK,WAAW,IAAIA,OAAO,CAACC,GAAG,EAAEC,QAAQ,KAAK,YAAY,EAAE;AAC5E;AACAC,IAAAA,OAAO,CAACC,IAAI,CAACL,OAAO,CAAC,CAAA;AACvB,GAAA;AACF,CAAA;AAEO,SAASM,mBAAmBA,CAACN,OAAO,EAAEO,WAAW,EAAE;AACxD,EAAA,IAAIA,WAAW,EAAE;IACfR,iBAAiB,CAACC,OAAO,CAAC,CAAA;AAC5B,GAAA;AACF;;;;"}
+{"version":3,"file":"logActionRequired.mjs","sources":["../../src/utilities/logActionRequired.ts"],"sourcesContent":["export function logActionRequired(message: string) {\n  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn(message);\n  }\n}\n\nexport function logActionRequiredIf(message: string, conditional: boolean) {\n  if (conditional) {\n    logActionRequired(message);\n  }\n}\n"],"names":["logActionRequired","message","process","env","NODE_ENV","console","warn","logActionRequiredIf","conditional"],"mappings":"AAAM,SAAUA,iBAAiBA,CAACC,OAAe,EAAA;AAC/C,EAAA,IAAI,OAAOC,OAAO,KAAK,WAAW,IAAIA,OAAO,CAACC,GAAG,EAAEC,QAAQ,KAAK,YAAY,EAAE;AAC5E;AACAC,IAAAA,OAAO,CAACC,IAAI,CAACL,OAAO,CAAC,CAAA;AACvB,GAAA;AACF,CAAA;AAEgB,SAAAM,mBAAmBA,CAACN,OAAe,EAAEO,WAAoB,EAAA;AACvE,EAAA,IAAIA,WAAW,EAAE;IACfR,iBAAiB,CAACC,OAAO,CAAC,CAAA;AAC5B,GAAA;AACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-dad389c",
+  "version": "0.0.0-experimental-5e78062",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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');
+  },
+};

package/src/utilities/deprecatedProperty/{deprecatedProperty.spec.js → deprecatedProperty.spec.ts}

@@ -5,6 +5,7 @@ const props = { prop1: 'prop1', prop2: 'prop2' };
 const validator = jest.fn();
 
 describe('deprecated', () => {
+  const component = 'Test';
   const origWarn = console.warn;
   let mockedWarn;
 
@@ -22,11 +23,10 @@ describe('deprecated', () => {
   });
 
   describe('if prop has been listed as deprecated', () => {
+    const propertyName = 'prop1';
+
     it('calls console.warn with the correct message', () => {
-      const component = 'Test';
       const newProperty = 'newProp';
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -42,10 +42,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if newProp is not provided', () => {
-      const component = 'Test';
-
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -61,8 +57,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if message is provided', () => {
-      const component = 'Test';
-      const propertyName = 'prop1';
       const message = 'Some custom message.';
 
       deprecated(validator, { component, message })(props, propertyName);
@@ -74,15 +68,15 @@ describe('deprecated', () => {
   });
 
   describe('if prop has not been listed as deprecated', () => {
+    const propertyName = 'prop3';
+
     it('calls validator with props', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(console.warn).not.toHaveBeenCalled();
     });
 
     it('calls validator with expected args', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(validator).toHaveBeenCalledWith({ prop1: 'prop1', prop2: 'prop2' }, 'prop3');
     });
   });

package/src/utilities/deprecatedProperty/{deprecatedProperty.js → deprecatedProperty.ts}

@@ -1,6 +1,22 @@
 import { logActionRequired } from '../logActionRequired';
 
-const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
+type DeprecatedMessageType = {
+  component: string;
+  propName: string;
+  message: string;
+  expiryDate?: Date;
+};
+
+type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
+
+type DeprecatedOptionsType = {
+  component: string;
+  message?: string;
+  newProp?: string;
+  expiryDate?: Date;
+};
+
+const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -21,11 +37,14 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
 };
 
 const deprecated =
-  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
-  (props, propertyName, ...rest) => {
+  (
+    validator: ValidatorType,
+    { component, message = '', newProp: newProperty, expiryDate }: DeprecatedOptionsType,
+  ) =>
+  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
-    if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
+    if (props[propertyName] !== null && props[propertyName] !== undefined) {
       logActionRequired(
         deprecatedMessage({
           component,

package/src/utilities/{logActionRequired.js → logActionRequired.ts}

@@ -1,11 +1,11 @@
-export function logActionRequired(message) {
+export function logActionRequired(message: string) {
   if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
 }
 
-export function logActionRequiredIf(message, conditional) {
+export function logActionRequiredIf(message: string, conditional: boolean) {
   if (conditional) {
     logActionRequired(message);
   }

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -1,85 +0,0 @@
-import { text } from '@storybook/addon-knobs';
-import { userEvent, within } from '@storybook/test';
-
-import InputWithDisplayFormat from '.';
-import { Field } from '../field/Field';
-
-export default {
-  component: InputWithDisplayFormat,
-  title: 'Forms/InputWithDisplayFormat',
-};
-
-export const Basic = () => {
-  const placeholder = text('Placeholder', '**-**-**');
-  const displayPattern = text('DisplayPattern', '**-**-**');
-
-  return (
-    <Field label="Display pattern is controlled via knobs" id="Basic">
-      <InputWithDisplayFormat
-        id="Basic"
-        placeholder={placeholder}
-        displayPattern={displayPattern}
-        className="form-control"
-        onChange={(v) => console.log(v)}
-        onBlur={(v) => console.log(v)}
-        onFocus={(v) => console.log(v)}
-      />
-    </Field>
-  );
-};
-
-const Template = (args) => {
-  const placeholder = args.pattern;
-  const displayPattern = args.pattern;
-  const label = args.label;
-  const id = label.replaceAll(' ', '-').toLowerCase();
-
-  return (
-    <Field label={label} id={id}>
-      <InputWithDisplayFormat
-        id={id}
-        placeholder={placeholder}
-        displayPattern={displayPattern}
-        className="form-control"
-        onChange={(v) => console.log(v)}
-        onBlur={(v) => console.log(v)}
-        onFocus={(v) => console.log(v)}
-      />
-    </Field>
-  );
-};
-
-export const CardNumber = Template.bind({});
-CardNumber.args = {
-  label: 'Card Number',
-  pattern: '**** **** **** **** ***',
-};
-
-export const CVC = Template.bind({});
-CVC.args = {
-  label: 'CVC',
-  pattern: '***',
-};
-
-export const ExpiryDate = Template.bind({});
-ExpiryDate.args = {
-  label: 'Expiry Date',
-  pattern: '** / **',
-};
-
-export const SecurityPin = Template.bind({});
-SecurityPin.args = {
-  label: 'Security Pin',
-  pattern: '*-*-*-*-*-*',
-};
-
-export const SecurityPinPlay = Template.bind({});
-SecurityPinPlay.args = {
-  label: 'Security Pin',
-  pattern: '*-*-*-*-*-*',
-};
-
-SecurityPinPlay.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
-};