@wise/dynamic-flow-client 3.22.2 → 3.23.1-experimental-3a3c1f1

package/build/types/revamp/domain/components/AllOfComponent.d.ts

@@ -1,5 +1,6 @@
 import type { Model } from '@wise/dynamic-flow-types/build/next';
 import type { BaseComponent, LocalValue, RepeatableSummary, DomainComponent } from '../types';
+import { Icon, Image } from '@wise/dynamic-flow-types/build/next';
 export type AllOfComponent = BaseComponent & {
     type: 'all-of';
     components: DomainComponent[];
@@ -7,11 +8,13 @@ export type AllOfComponent = BaseComponent & {
     description?: string;
     help?: string;
     hidden: boolean;
+    icon?: Icon;
+    image?: Image;
     title?: string;
     getChildren: () => DomainComponent[];
     getLocalValue: () => LocalValue;
 };
-export declare const createAllOfComponent: (allOfProps: Pick<AllOfComponent, "control" | "description" | "components" | "title" | "help" | "hidden"> & {
+export declare const createAllOfComponent: (allOfProps: Pick<AllOfComponent, "control" | "description" | "components" | "help" | "hidden" | "icon" | "image" | "title"> & {
     uid: string;
     analyticsId?: string;
     summariser: (value: Model | null) => RepeatableSummary;

package/build/types/revamp/domain/components/BooleanInputComponent.d.ts

@@ -8,7 +8,7 @@ export type BooleanInputComponent = InputComponent<boolean> & {
     validationAsyncState: ValidationAsyncState;
     onChange: (value: boolean) => void;
 };
-export declare const createBooleanInputComponent: (booleanInputProps: Pick<BooleanInputComponent, "uid" | "id" | "analyticsId" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "persistedState" | "required" | "title" | "value" | "validationAsyncState"> & {
+export declare const createBooleanInputComponent: (booleanInputProps: Pick<BooleanInputComponent, "uid" | "id" | "analyticsId" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "icon" | "image" | "persistedState" | "required" | "title" | "value" | "validationAsyncState"> & {
     performPersistAsync: PerformPersistAsync | undefined;
     performRefresh: PerformRefresh | undefined;
     performValidationAsync: PerformValidationAsync | undefined;

package/build/types/revamp/domain/components/DateInputComponent.d.ts

@@ -11,7 +11,7 @@ export type DateInputComponent = InputComponent<string | null> & {
     validationAsyncState: ValidationAsyncState;
     onChange: (value: string | null) => void;
 };
-export declare const createDateInputComponent: (textInputProps: Pick<DateInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "help" | "hidden" | "minimumDate" | "maximumDate" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
+export declare const createDateInputComponent: (textInputProps: Pick<DateInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "help" | "hidden" | "icon" | "image" | "minimumDate" | "maximumDate" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
     checks: IsInvalidCheck<string | null>[];
     performPersistAsync: PerformPersistAsync | undefined;
     performRefresh: PerformRefresh | undefined;

package/build/types/revamp/domain/components/IntegerInputComponent.d.ts

@@ -11,7 +11,7 @@ export type IntegerInputComponent = InputComponent<number | null> & {
     validationAsyncState: ValidationAsyncState;
     onChange: (value: number | null) => void;
 };
-export declare const createIntegerInputComponent: (integerInputProps: Pick<IntegerInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "maximum" | "minimum" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
+export declare const createIntegerInputComponent: (integerInputProps: Pick<IntegerInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "icon" | "image" | "maximum" | "minimum" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
     checks: IsInvalidCheck<number | null>[];
     performPersistAsync: PerformPersistAsync | undefined;
     performRefresh: PerformRefresh | undefined;

package/build/types/revamp/domain/components/MultiSelectInputComponent.d.ts

@@ -15,7 +15,7 @@ export type MultiSelectComponent = InputComponent<LocalValueArray | null> & {
     getSelectedChildren: () => DomainComponent[] | null;
     onSelect: (indices: number[]) => void;
 };
-export declare const createMultiSelectComponent: (multiSelectProps: Pick<MultiSelectComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "description" | "disabled" | "errors" | "hidden" | "maxItems" | "minItems" | "required" | "title" | "validationAsyncState"> & {
+export declare const createMultiSelectComponent: (multiSelectProps: Pick<MultiSelectComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "description" | "disabled" | "errors" | "hidden" | "icon" | "image" | "maxItems" | "minItems" | "required" | "title" | "validationAsyncState"> & {
     checks: IsInvalidCheck<LocalValueArray | null>[];
     initialValue: LocalValue;
     options: (SelectInputOption & {

package/build/types/revamp/domain/components/MultiUploadInputComponent.d.ts

@@ -16,7 +16,7 @@ export type MultiUploadInputComponent = InputComponent<File[]> & {
     onDelete: (fileId: string) => Promise<void>;
     onUpload: (file: File, fileId: string) => Promise<void>;
 };
-export declare const createMultiUploadInputComponent: (uploadInputProps: Pick<MultiUploadInputComponent, "uid" | "id" | "accepts" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "format" | "help" | "hidden" | "maxSize" | "minItems" | "maxItems" | "persistedState" | "placeholder" | "required" | "title" | "uploadLabel" | "value"> & {
+export declare const createMultiUploadInputComponent: (uploadInputProps: Pick<MultiUploadInputComponent, "uid" | "id" | "accepts" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "format" | "help" | "hidden" | "icon" | "image" | "maxSize" | "minItems" | "maxItems" | "persistedState" | "placeholder" | "required" | "title" | "uploadLabel" | "value"> & {
     checks: IsInvalidCheck<File[]>[];
     fileChecks: IsInvalidCheck<File>[];
     performPersistAsync: PerformPersistAsync | undefined;

package/build/types/revamp/domain/components/NumberInputComponent.d.ts

@@ -11,7 +11,7 @@ export type NumberInputComponent = InputComponent<number | null> & {
     validationAsyncState: ValidationAsyncState;
     onChange: (value: number | null) => void;
 };
-export declare const createNumberInputComponent: (numberInputProps: Pick<NumberInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "maximum" | "minimum" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
+export declare const createNumberInputComponent: (numberInputProps: Pick<NumberInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "icon" | "image" | "maximum" | "minimum" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
     checks: IsInvalidCheck<number | null>[];
     performPersistAsync: PerformPersistAsync | undefined;
     performRefresh: PerformRefresh | undefined;

package/build/types/revamp/domain/components/ObjectComponent.d.ts

@@ -5,7 +5,7 @@ export type ObjectComponent = ComponentWithTitle & {
     getChildren: () => DomainComponent[];
     getLocalValue: () => LocalValueObject;
 };
-export declare const createObjectComponent: (objectProps: Pick<ObjectComponent, "control" | "description" | "componentMap" | "title" | "help" | "hidden"> & {
+export declare const createObjectComponent: (objectProps: Pick<ObjectComponent, "control" | "description" | "componentMap" | "help" | "hidden" | "icon" | "image" | "title"> & {
     uid: string;
     analyticsId?: string;
     displayOrder: string[];

package/build/types/revamp/domain/components/RepeatableComponent.d.ts

@@ -20,7 +20,7 @@ export type RepeatableComponent = ComponentWithTitle & {
     onRemove: () => void;
     onSave: () => boolean;
 };
-export declare const createRepeatableComponent: (repeatableProps: Pick<RepeatableComponent, "uid" | "id" | "addItemTitle" | "components" | "control" | "description" | "editItemTitle" | "errors" | "hidden" | "maxItems" | "minItems" | "title"> & {
+export declare const createRepeatableComponent: (repeatableProps: Pick<RepeatableComponent, "uid" | "id" | "addItemTitle" | "components" | "control" | "description" | "editItemTitle" | "errors" | "hidden" | "icon" | "image" | "maxItems" | "minItems" | "title"> & {
     analyticsId?: string;
     checks: IsInvalidCheck<LocalValueArray | null>[];
     summary?: SummarySummariser;

package/build/types/revamp/domain/components/SelectInputComponent.d.ts

@@ -21,7 +21,7 @@ export type SelectInputOption = {
     keywords?: string[];
     disabled: boolean;
 };
-export declare const createSelectInputComponent: (selectProps: Pick<SelectInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "help" | "hidden" | "placeholder" | "required" | "title"> & {
+export declare const createSelectInputComponent: (selectProps: Pick<SelectInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "help" | "hidden" | "icon" | "image" | "placeholder" | "required" | "title"> & {
     initialModel: Model;
     options: (SelectInputOption & {
         component: DomainComponent;

package/build/types/revamp/domain/components/TextInputComponent.d.ts

@@ -12,7 +12,7 @@ export type TextInputComponent = InputComponent<string | null> & {
     validationAsyncState: ValidationAsyncState;
     onChange: (value: string | null) => void;
 };
-export declare const createTextInputComponent: (textInputProps: Pick<TextInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "displayFormat" | "help" | "hidden" | "maxLength" | "minLength" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
+export declare const createTextInputComponent: (textInputProps: Pick<TextInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "displayFormat" | "help" | "hidden" | "icon" | "image" | "maxLength" | "minLength" | "persistedState" | "placeholder" | "required" | "title" | "value" | "validationAsyncState"> & {
     checks: IsInvalidCheck<string | null>[];
     performPersistAsync: PerformPersistAsync | undefined;
     performValidationAsync: PerformValidationAsync | undefined;

package/build/types/revamp/domain/components/TupleComponent.d.ts

@@ -5,7 +5,7 @@ export type TupleComponent = ComponentWithTitle & {
     getChildren: () => DomainComponent[];
     getLocalValue: () => LocalValueArray;
 };
-export declare const createTupleComponent: (tupleProps: Pick<TupleComponent, "control" | "description" | "components" | "title" | "help" | "hidden"> & {
+export declare const createTupleComponent: (tupleProps: Pick<TupleComponent, "control" | "description" | "components" | "help" | "hidden" | "icon" | "image" | "title"> & {
     uid: string;
     analyticsId?: string;
     summariser: (value: LocalValue | null) => RepeatableSummary;

package/build/types/revamp/domain/components/UploadInputComponent.d.ts

@@ -11,7 +11,7 @@ export type UploadInputComponent = InputComponent<File | null> & {
     validationAsyncState?: undefined;
     onUpload: (value: File | null) => Promise<void>;
 };
-export declare const createUploadInputComponent: (uploadInputProps: Pick<UploadInputComponent, "uid" | "id" | "accepts" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "format" | "help" | "hidden" | "maxSize" | "persistedState" | "placeholder" | "required" | "title" | "value"> & {
+export declare const createUploadInputComponent: (uploadInputProps: Pick<UploadInputComponent, "uid" | "id" | "accepts" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "format" | "help" | "hidden" | "icon" | "image" | "maxSize" | "persistedState" | "placeholder" | "required" | "title" | "value"> & {
     checks: IsInvalidCheck<File | null>[];
     performPersistAsync: PerformPersistAsync | undefined;
     performRefresh?: PerformRefresh | undefined;

package/build/types/revamp/domain/mappers/schema/utils/mapCommonSchemaProps.d.ts

@@ -10,6 +10,8 @@ export declare const mapCommonSchemaProps: (schemaMapperProps: SchemaMapperProps
     disabled: boolean;
     errors: string[] | undefined;
     hidden: boolean;
+    icon: import("@wise/dynamic-flow-types/build/next").Icon | undefined;
+    image: import("@wise/dynamic-flow-types/build/next").Image | undefined;
     keywords: string[] | undefined;
     required: boolean;
     title: string | undefined;

package/build/types/revamp/domain/types.d.ts

@@ -60,6 +60,8 @@ export type ComponentWithTitle = BaseComponent & {
     description?: string;
     help?: string;
     hidden: boolean;
+    icon?: Icon;
+    image?: Image;
     title?: string;
 };
 export type InputComponent<V extends LocalValue> = ComponentWithTitle & {

package/build/types/revamp/renderers/mappers/allOfComponentToProps.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { AllOfComponent } from '../../domain/components/AllOfComponent';
 import type { FormSectionRendererProps } from '@wise/dynamic-flow-renderers';
-export declare const allOfComponentToProps: ({ control, description, help, title }: AllOfComponent, children: ReactNode) => FormSectionRendererProps;
+export declare const allOfComponentToProps: ({ control, description, help, icon, image, title }: AllOfComponent, children: ReactNode) => FormSectionRendererProps;

package/build/types/revamp/renderers/mappers/objectComponentToProps.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { ObjectComponent } from '../../domain/components/ObjectComponent';
 import type { FormSectionRendererProps } from '@wise/dynamic-flow-renderers';
-export declare const objectComponentToProps: ({ control, description, help, title }: ObjectComponent, children: ReactNode) => FormSectionRendererProps;
+export declare const objectComponentToProps: ({ control, description, help, icon, image, title }: ObjectComponent, children: ReactNode) => FormSectionRendererProps;

package/build/types/revamp/renderers/mappers/tupleComponentToProps.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { TupleComponent } from '../../domain/components/TupleComponent';
 import { FormSectionRendererProps } from '@wise/dynamic-flow-renderers';
-export declare const tupleComponentToProps: ({ control, description, help, title }: TupleComponent, children: ReactNode) => FormSectionRendererProps;
+export declare const tupleComponentToProps: ({ control, description, help, icon, image, title }: TupleComponent, children: ReactNode) => FormSectionRendererProps;

package/build/types/revamp/renderers/mappers/utils/inputComponentToProps.d.ts

@@ -8,7 +8,9 @@ export declare const inputComponentToProps: <T extends string, V extends LocalVa
     disabled: boolean;
     error: string | undefined;
     help: string | undefined;
+    icon: import("@wise/dynamic-flow-renderers").Icon | undefined;
     id: string;
+    image: import("@wise/dynamic-flow-renderers").Image | undefined;
     label: string | undefined;
     placeholder: string | undefined;
     required: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.22.2",
+  "version": "3.23.1-experimental-3a3c1f1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -34,33 +34,33 @@
     "@babel/preset-react": "7.25.7",
     "@babel/preset-typescript": "7.25.7",
     "@chromatic-com/storybook": "2.0.2",
-    "@formatjs/cli": "^6.2.15",
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-actions": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
+    "@formatjs/cli": "^6.3.0",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-webpack5": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/types": "^8.3.5",
+    "@storybook/manager-api": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@storybook/types": "^8.3.6",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@transferwise/components": "46.71.3",
+    "@transferwise/components": "46.71.6",
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.13.1",
-    "@transferwise/neptune-css": "14.19.0",
-    "@types/node": "22.7.5",
+    "@transferwise/neptune-css": "14.19.1",
+    "@types/node": "22.7.7",
     "@types/jest": "29.5.13",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@types/react-intl": "3.0.0",
-    "@wise/art": "2.15.0",
-    "@wise/components-theming": "^1.6.0",
+    "@wise/art": "2.16.2",
+    "@wise/components-theming": "^1.6.1",
     "babel-jest": "29.7.0",
     "esbuild": "0.24.0",
     "jest": "29.7.0",
@@ -68,14 +68,14 @@
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^2.2.2",
     "nanoid": "5.0.7",
-    "npm-run-all2": "6.2.3",
+    "npm-run-all2": "6.2.4",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^15.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.0",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "stylelint": "16.10.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.1",
@@ -83,8 +83,8 @@
     "tsx": "4.19.1",
     "typescript": "5.6.3",
     "webpack": "5.95.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.31",
@@ -101,7 +101,7 @@
     "nanoid": "5.0.7",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.24.1"
+    "@wise/dynamic-flow-types": "2.25.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",