@transferwise/components 0.0.0-experimental-ad2ab5f → 0.0.0-experimental-c98fba0

package/build/types/button/classMap.d.ts

@@ -1,11 +1,11 @@
-export namespace typeClassMap {
-    let accent: string;
-    let positive: string;
-    let negative: string;
-}
-export namespace priorityClassMap {
-    let primary: string;
-    let secondary: string;
-    let tertiary: string;
-}
+export declare const typeClassMap: {
+    accent: string;
+    positive: string;
+    negative: string;
+};
+export declare const priorityClassMap: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+};
 //# sourceMappingURL=classMap.d.ts.map

package/build/types/button/classMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/button/classMap.js"],"names":[],"mappings":""}
+{"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/button/classMap.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}

package/build/types/button/legacyUtils/index.d.ts

@@ -1,2 +1,2 @@
-export { establishNewPriority, establishNewType, logDeprecationNotices } from "./legacyUtils";
+export { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
 //# sourceMappingURL=index.d.ts.map

package/build/types/button/legacyUtils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC"}

package/build/types/button/legacyUtils/legacyUtils.d.ts

@@ -1,7 +1,21 @@
-export function establishNewType(originalType: any): any;
-export function establishNewPriority(originalPriority: any, originalType: any): any;
-export function logDeprecationNotices({ size, type }: {
-    size: any;
-    type: any;
-}): void;
+import { ControlType, Priority, Size, Type } from '../../common';
+type OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;
+declare const deprecatedTypeMapMessage: {
+    danger: string;
+    link: string;
+    pay: string;
+    primary: string;
+    secondary: string;
+};
+type EstablishNewTypeType = (originalType: Type | (string & Record<never, never>) | null) => `${ControlType}` | string | null;
+export declare const establishNewType: EstablishNewTypeType;
+type EstablishNewPriorityType = (originalPriority?: Priority | (string & Record<never, never>) | null, originalType?: OldTypeKeys | (string & Record<never, never>) | null) => `${ControlType}` | string | null | undefined;
+export declare const establishNewPriority: EstablishNewPriorityType;
+type DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;
+type LogDeprecationNoticesType = (params: {
+    size: `${Size}`;
+    type: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;
+}) => void;
+export declare const logDeprecationNotices: LogDeprecationNoticesType;
+export {};
 //# sourceMappingURL=legacyUtils.d.ts.map

package/build/types/button/legacyUtils/legacyUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legacyUtils.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/legacyUtils.js"],"names":[],"mappings":"AA2BO,yDAA0F;AAE1F,oFAaN;AAEM;;;SASN"}
+{"version":3,"file":"legacyUtils.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/legacyUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAWjE,KAAK,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;AAO5D,QAAA,MAAM,wBAAwB;;;;;;CAM7B,CAAC;AAIF,KAAK,oBAAoB,GAAG,CAC1B,YAAY,EAAE,IAAI,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KACxD,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;AAEtC,eAAO,MAAM,gBAAgB,EAAE,oBAGb,CAAC;AAEnB,KAAK,wBAAwB,GAAG,CAC9B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,EACpE,YAAY,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KAChE,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAElD,eAAO,MAAM,oBAAoB,EAAE,wBAalC,CAAC;AAEF,KAAK,4BAA4B,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAC1E,KAAK,yBAAyB,GAAG,CAAC,MAAM,EAAE;IACxC,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC;IAChB,IAAI,EAAE,4BAA4B,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;CAC7E,KAAK,IAAI,CAAC;AACX,eAAO,MAAM,qBAAqB,EAAE,yBAWnC,CAAC"}

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

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

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

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

package/build/types/stepper/deviceDetection.d.ts

@@ -1,2 +1,2 @@
-export function isTouchDevice(): boolean;
+export declare function isTouchDevice(): boolean;
 //# sourceMappingURL=deviceDetection.d.ts.map

package/build/types/stepper/deviceDetection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deviceDetection.d.ts","sourceRoot":"","sources":["../../../src/stepper/deviceDetection.js"],"names":[],"mappings":"AA2BA,yCAEC"}
+{"version":3,"file":"deviceDetection.d.ts","sourceRoot":"","sources":["../../../src/stepper/deviceDetection.ts"],"names":[],"mappings":"AAuBA,wBAAgB,aAAa,YAE5B"}

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

@@ -1,10 +1,8 @@
-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.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"}
+{"version":3,"file":"deprecatedProperty.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/deprecatedProperty.js"],"names":[],"mappings":";AAsBA;;;;;2DAgBG"}

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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/index.js"],"names":[],"mappings":""}

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

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

@@ -1,3 +1,3 @@
-export declare function logActionRequired(message: string): void;
-export declare function logActionRequiredIf(message: string, conditional: boolean): void;
+export function logActionRequired(message: any): void;
+export function logActionRequiredIf(message: any, conditional: any): 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.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,QAKhD;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,QAIxE"}
+{"version":3,"file":"logActionRequired.d.ts","sourceRoot":"","sources":["../../../src/utilities/logActionRequired.js"],"names":[],"mappings":"AAAA,sDAKC;AAED,0EAIC"}

package/build/utilities/logActionRequired.js.map

@@ -1 +1 @@
-{"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;;;;;"}
+{"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;;;;;"}

package/build/utilities/logActionRequired.mjs.map

@@ -1 +1 @@
-{"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;;;;"}
+{"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;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ad2ab5f",
+  "version": "0.0.0-experimental-c98fba0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.19.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/button/Button.tsx

@@ -72,12 +72,9 @@ const Button = forwardRef<ButtonReferenceType, Props>(
   ) => {
     const intl = useIntl();
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     logDeprecationNotices({ size, type });
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const newType = establishNewType(type);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const newPriority = establishNewPriority(priority, type);
 
     const classes = clsx(

package/src/button/legacyUtils/legacyUtils.ts

@@ -0,0 +1,74 @@
+import { ControlType, Priority, Size, Type } from '../../common';
+import { logActionRequired, logActionRequiredIf } from '../../utilities';
+
+const deprecatedTypeMap: Record<Type, ControlType> = {
+  [Type.PRIMARY]: ControlType.ACCENT,
+  [Type.SECONDARY]: ControlType.ACCENT,
+  [Type.LINK]: ControlType.ACCENT,
+  [Type.PAY]: ControlType.POSITIVE,
+  [Type.DANGER]: ControlType.NEGATIVE,
+};
+
+type OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;
+const oldTypePriorityMap: Record<OldTypeKeys, Priority> = {
+  [Type.DANGER]: Priority.SECONDARY,
+  [Type.LINK]: Priority.TERTIARY,
+  [Type.SECONDARY]: Priority.SECONDARY,
+};
+
+const deprecatedTypeMapMessage = {
+  [Type.DANGER]: 'Type.NEGATIVE',
+  [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',
+  [Type.PAY]: 'ControlType.POSITIVE',
+  [Type.PRIMARY]: 'ControlType.ACCENT',
+  [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',
+};
+
+const deprecatedTypes = Object.keys(deprecatedTypeMap);
+
+type EstablishNewTypeType = (
+  originalType: Type | (string & Record<never, never>) | null,
+) => `${ControlType}` | string | null;
+
+export const establishNewType: EstablishNewTypeType = (originalType) =>
+  originalType && originalType in deprecatedTypeMap
+    ? deprecatedTypeMap[originalType as Type]
+    : originalType;
+
+type EstablishNewPriorityType = (
+  originalPriority?: Priority | (string & Record<never, never>) | null,
+  originalType?: OldTypeKeys | (string & Record<never, never>) | null,
+) => `${ControlType}` | string | null | undefined;
+
+export const establishNewPriority: EstablishNewPriorityType = (originalPriority, originalType) => {
+  const type = originalType ? establishNewType(originalType) : '';
+
+  // The old SECONDARY and LINK types now map to priorities. If they're still using one of
+  // these old types, ignore whatever priority they've passed and use this instead.
+  if (originalType && originalType in oldTypePriorityMap) {
+    return oldTypePriorityMap[originalType as OldTypeKeys];
+  }
+  // Only ControlType.ACCENT supports tertiary styles
+  if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {
+    return Priority.SECONDARY;
+  }
+  return originalPriority;
+};
+
+type DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;
+type LogDeprecationNoticesType = (params: {
+  size: `${Size}`;
+  type: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;
+}) => void;
+export const logDeprecationNotices: LogDeprecationNoticesType = ({ size, type }) => {
+  logActionRequiredIf(
+    'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',
+    size === Size.EXTRA_SMALL,
+  );
+
+  if (type && deprecatedTypes.includes(type) && type in deprecatedTypeMapMessage) {
+    logActionRequired(
+      `Button has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type as DeprecatedTypeMapMessageType]}.`,
+    );
+  }
+};

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/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -0,0 +1,85 @@
+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');
+};