@bosonprotocol/react-kit 0.32.0-alpha.9 → 0.32.0

package/dist/esm/components/form/types.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 import { SingleValue } from "react-select";
+import { CSSProperties } from "styled-components";
+import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
 import type { TextAreaTheme } from "./Field.styles";
 export interface BaseProps {
     name: string;
@@ -25,12 +27,13 @@ export interface ErrorProps {
 }
 export interface FormFieldProps {
     title: string;
+    titleIcon?: ReactNode;
     subTitle?: string | false;
     required?: boolean;
     tooltip?: string;
     children: React.ReactNode | string;
     style?: React.CSSProperties;
-    theme?: string;
+    copyIconColor?: CSSProperties["backgroundColor"];
     valueToCopy?: string | {
         [key: string]: unknown;
     };
@@ -70,7 +73,7 @@ export interface SelectProps extends BaseProps {
     onChange?: (option: SelectDataProps<string>) => void;
     label?: string;
 }
-export interface UploadProps extends BaseProps {
+export type UploadProps = BaseProps & {
     accept?: string;
     multiple?: boolean;
     trigger?: React.ReactNode | JSX.Element;
@@ -81,7 +84,17 @@ export interface UploadProps extends BaseProps {
     onLoadSinglePreviewImage?: (base64Uri: string) => void;
     withUpload?: boolean;
     onLoading?: (loading: boolean) => void;
-}
+    borderRadius?: number;
+    width?: number;
+    height?: number;
+    imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
+} & ({
+    withEditor: true;
+    saveButtonTheme: ImageEditorModalProps["saveButtonTheme"];
+} | {
+    withEditor: false;
+    saveButtonTheme: undefined;
+});
 export interface FileProps {
     src: string;
     name?: string;

package/dist/esm/components/form/types.d.ts.map

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

package/dist/esm/components/modal/ModalComponents.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import FinanceDeposit from "./components/SellerFinance/FinanceDeposit";
 import FinanceWithdraw from "./components/SellerFinance/FinanceWithdraw";
 import TransactionFailedModal from "./components/Transactions/TransactionFailedModal/TransactionFailedModal";
@@ -9,5 +10,6 @@ export declare const MODAL_COMPONENTS: {
     readonly TRANSACTION_FAILED: typeof TransactionFailedModal;
     readonly TRANSACTION_SUBMITTED: typeof TransactionSubmittedModal;
     readonly WAITING_FOR_CONFIRMATION: typeof WaitingForConfirmationModal;
+    readonly IMAGE_EDITOR: import("react").FC<import("../form/Upload/ImageEditorModal/ImageEditorModal").ImageEditorModalProps>;
 };
 //# sourceMappingURL=ModalComponents.d.ts.map

package/dist/esm/components/modal/ModalComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalComponents.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/ModalComponents.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,MAAM,2CAA2C,CAAC;AACvE,OAAO,eAAe,MAAM,4CAA4C,CAAC;AACzE,OAAO,sBAAsB,MAAM,yEAAyE,CAAC;AAC7G,OAAO,yBAAyB,MAAM,+EAA+E,CAAC;AACtH,OAAO,2BAA2B,MAAM,mFAAmF,CAAC;AAE5H,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC"}
+{"version":3,"file":"ModalComponents.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/ModalComponents.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,MAAM,2CAA2C,CAAC;AACvE,OAAO,eAAe,MAAM,4CAA4C,CAAC;AACzE,OAAO,sBAAsB,MAAM,yEAAyE,CAAC;AAC7G,OAAO,yBAAyB,MAAM,+EAA+E,CAAC;AACtH,OAAO,2BAA2B,MAAM,mFAAmF,CAAC;AAE5H,eAAO,MAAM,gBAAgB;;;;;;;CAOnB,CAAC"}

package/dist/esm/components/modal/ModalComponents.js

@@ -1,3 +1,4 @@
+import { ImageEditorModal } from "../form/Upload/ImageEditorModal/ImageEditorModal";
 import { MODAL_TYPES } from "./ModalTypes";
 import FinanceDeposit from "./components/SellerFinance/FinanceDeposit";
 import FinanceWithdraw from "./components/SellerFinance/FinanceWithdraw";
@@ -9,6 +10,7 @@ export const MODAL_COMPONENTS = {
     [MODAL_TYPES.FINANCE_WITHDRAW_MODAL]: FinanceWithdraw,
     [MODAL_TYPES.TRANSACTION_FAILED]: TransactionFailedModal,
     [MODAL_TYPES.TRANSACTION_SUBMITTED]: TransactionSubmittedModal,
-    [MODAL_TYPES.WAITING_FOR_CONFIRMATION]: WaitingForConfirmationModal
+    [MODAL_TYPES.WAITING_FOR_CONFIRMATION]: WaitingForConfirmationModal,
+    [MODAL_TYPES.IMAGE_EDITOR]: ImageEditorModal
 };
 //# sourceMappingURL=ModalComponents.js.map

package/dist/esm/components/modal/ModalComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalComponents.js","sourceRoot":"","sources":["../../../../src/components/modal/ModalComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,cAAc,MAAM,2CAA2C,CAAC;AACvE,OAAO,eAAe,MAAM,4CAA4C,CAAC;AACzE,OAAO,sBAAsB,MAAM,yEAAyE,CAAC;AAC7G,OAAO,yBAAyB,MAAM,+EAA+E,CAAC;AACtH,OAAO,2BAA2B,MAAM,mFAAmF,CAAC;AAE5H,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,CAAC,WAAW,CAAC,qBAAqB,CAAC,EAAE,cAAc;IACnD,CAAC,WAAW,CAAC,sBAAsB,CAAC,EAAE,eAAe;IACrD,CAAC,WAAW,CAAC,kBAAkB,CAAC,EAAE,sBAAsB;IACxD,CAAC,WAAW,CAAC,qBAAqB,CAAC,EAAE,yBAAyB;IAC9D,CAAC,WAAW,CAAC,wBAAwB,CAAC,EAAE,2BAA2B;CAC3D,CAAC"}
+{"version":3,"file":"ModalComponents.js","sourceRoot":"","sources":["../../../../src/components/modal/ModalComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,cAAc,MAAM,2CAA2C,CAAC;AACvE,OAAO,eAAe,MAAM,4CAA4C,CAAC;AACzE,OAAO,sBAAsB,MAAM,yEAAyE,CAAC;AAC7G,OAAO,yBAAyB,MAAM,+EAA+E,CAAC;AACtH,OAAO,2BAA2B,MAAM,mFAAmF,CAAC;AAE5H,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,CAAC,WAAW,CAAC,qBAAqB,CAAC,EAAE,cAAc;IACnD,CAAC,WAAW,CAAC,sBAAsB,CAAC,EAAE,eAAe;IACrD,CAAC,WAAW,CAAC,kBAAkB,CAAC,EAAE,sBAAsB;IACxD,CAAC,WAAW,CAAC,qBAAqB,CAAC,EAAE,yBAAyB;IAC9D,CAAC,WAAW,CAAC,wBAAwB,CAAC,EAAE,2BAA2B;IACnE,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,gBAAgB;CACpC,CAAC"}

package/dist/esm/components/modal/ModalContext.d.ts

@@ -8,6 +8,7 @@ export type ModalProps = {
     contentStyle?: CSSProperties;
     closable?: boolean;
     onClose?: (data: unknown | undefined | null) => void;
+    hidden?: boolean;
 };
 export type ModalType = keyof typeof MODAL_TYPES | null;
 type ModalSize = "xxs" | "xs" | "s" | "m" | "l" | "xl";
@@ -18,7 +19,7 @@ export type Store = {
     modalMaxWidth?: Partial<Record<ModalSize, React.CSSProperties["maxWidth"]>> | null;
     theme?: "light" | "dark";
 };
-export type GenericModalProps<T extends keyof typeof MODAL_TYPES> = Parameters<(typeof MODAL_COMPONENTS)[T]>[0] extends Record<string, never> ? ModalProps & Record<string, never> : ModalProps & Parameters<(typeof MODAL_COMPONENTS)[T]>[0];
+export type GenericModalProps<T extends keyof typeof MODAL_TYPES> = Parameters<(typeof MODAL_COMPONENTS)[T]> extends [infer P, ...any[]] ? ModalProps & P : ModalProps;
 export interface ModalContextType {
     showModal: <T extends keyof typeof MODAL_TYPES>(modalType: T, modalProps?: GenericModalProps<T>, modalSize?: Store["modalSize"], theme?: Store["theme"], modalMaxWidth?: Store["modalMaxWidth"]) => void;
     hideModal: (data?: unknown | undefined | null) => void;

package/dist/esm/components/modal/ModalContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/ModalContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiB,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,GAAG,IAAI,CAAC;AACxD,KAAK,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;IAC9C,aAAa,CAAC,EAAE,OAAO,CACrB,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CACnD,GAAG,IAAI,CAAC;IACT,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,OAAO,WAAW,IAC9D,UAAU,CAAC,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACrE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GAClC,UAAU,GAAG,UAAU,CAAC,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,CAAC,CAAC,SAAS,MAAM,OAAO,WAAW,EAC5C,SAAS,EAAE,CAAC,EACZ,UAAU,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,EACjC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,EAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EACtB,aAAa,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,KACnC,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvD,WAAW,EAAE,CAAC,CAAC,SAAS,MAAM,OAAO,WAAW,EAC9C,KAAK,EAAE,KAAK,GAAG;QACb,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;QACvC,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KACxB,KACE,IAAI,CAAC;IAEV,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,WAAW,EAAE,gBAWzB,CAAC;AAEF,QAAA,MAAM,YAAY,iCAAiD,CAAC;AAEpE,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/ModalContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiB,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,GAAG,IAAI,CAAC;AACxD,KAAK,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;IAC9C,aAAa,CAAC,EAAE,OAAO,CACrB,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CACnD,GAAG,IAAI,CAAC;IACT,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,OAAO,WAAW,IAC9D,UAAU,CAAC,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,GAChE,UAAU,GAAG,CAAC,GACd,UAAU,CAAC;AAEjB,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,CAAC,CAAC,SAAS,MAAM,OAAO,WAAW,EAC5C,SAAS,EAAE,CAAC,EACZ,UAAU,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,EACjC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,EAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EACtB,aAAa,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,KACnC,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvD,WAAW,EAAE,CAAC,CAAC,SAAS,MAAM,OAAO,WAAW,EAC9C,KAAK,EAAE,KAAK,GAAG;QACb,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;QACvC,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KACxB,KACE,IAAI,CAAC;IAEV,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,WAAW,EAAE,gBAWzB,CAAC;AAEF,QAAA,MAAM,YAAY,iCAAiD,CAAC;AAEpE,eAAe,YAAY,CAAC"}

package/dist/esm/components/modal/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../../../src/components/modal/ModalContext.tsx"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,sDAAsD;AACtD,OAAc,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAmDvE,MAAM,CAAC,MAAM,WAAW,GAAqB;IAC3C,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;IACnB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;IACnB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,EAAS;QACrB,SAAS,EAAE,GAAG;QACd,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,OAAO;KACN;CACX,CAAC;AAEF,MAAM,YAAY,GAAG,aAAa,CAAC,WAA+B,CAAC,CAAC;AAEpE,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../../../src/components/modal/ModalContext.tsx"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,sDAAsD;AACtD,OAAc,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAoDvE,MAAM,CAAC,MAAM,WAAW,GAAqB;IAC3C,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;IACnB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;IACnB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,EAAS;QACrB,SAAS,EAAE,GAAG;QACd,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,OAAO;KACN;CACX,CAAC;AAEF,MAAM,YAAY,GAAG,aAAa,CAAC,WAA+B,CAAC,CAAC;AAEpE,eAAe,YAAY,CAAC"}

package/dist/esm/components/modal/ModalTypes.d.ts

@@ -4,5 +4,6 @@ export declare const MODAL_TYPES: {
     readonly TRANSACTION_FAILED: "TRANSACTION_FAILED";
     readonly TRANSACTION_SUBMITTED: "TRANSACTION_SUBMITTED";
     readonly WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION";
+    readonly IMAGE_EDITOR: "IMAGE_EDITOR";
 };
 //# sourceMappingURL=ModalTypes.d.ts.map

package/dist/esm/components/modal/ModalTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTypes.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/ModalTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}
+{"version":3,"file":"ModalTypes.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/ModalTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC"}

package/dist/esm/components/modal/ModalTypes.js

@@ -3,6 +3,7 @@ export const MODAL_TYPES = {
     FINANCE_WITHDRAW_MODAL: "FINANCE_WITHDRAW_MODAL",
     TRANSACTION_FAILED: "TRANSACTION_FAILED",
     TRANSACTION_SUBMITTED: "TRANSACTION_SUBMITTED",
-    WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION"
+    WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION",
+    IMAGE_EDITOR: "IMAGE_EDITOR"
 };
 //# sourceMappingURL=ModalTypes.js.map

package/dist/esm/components/modal/ModalTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTypes.js","sourceRoot":"","sources":["../../../../src/components/modal/ModalTypes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,qBAAqB,EAAE,uBAAuB;IAC9C,sBAAsB,EAAE,wBAAwB;IAChD,kBAAkB,EAAE,oBAAoB;IACxC,qBAAqB,EAAE,uBAAuB;IAC9C,wBAAwB,EAAE,0BAA0B;CAC5C,CAAC"}
+{"version":3,"file":"ModalTypes.js","sourceRoot":"","sources":["../../../../src/components/modal/ModalTypes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,qBAAqB,EAAE,uBAAuB;IAC9C,sBAAsB,EAAE,wBAAwB;IAChD,kBAAkB,EAAE,oBAAoB;IACxC,qBAAqB,EAAE,uBAAuB;IAC9C,wBAAwB,EAAE,0BAA0B;IACpD,YAAY,EAAE,cAAc;CACpB,CAAC"}

package/dist/esm/components/modal/useModal.d.ts

@@ -5,10 +5,11 @@ export declare function useModal(): {
         readonly TRANSACTION_FAILED: "TRANSACTION_FAILED";
         readonly TRANSACTION_SUBMITTED: "TRANSACTION_SUBMITTED";
         readonly WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION";
+        readonly IMAGE_EDITOR: "IMAGE_EDITOR";
     };
-    showModal: <T extends "FINANCE_DEPOSIT_MODAL" | "FINANCE_WITHDRAW_MODAL" | "TRANSACTION_FAILED" | "TRANSACTION_SUBMITTED" | "WAITING_FOR_CONFIRMATION">(modalType: T, modalProps?: import("./ModalContext").GenericModalProps<T> | undefined, modalSize?: "auto" | ("s" | "m" | "xxs" | "xs" | "l" | "xl") | "fullscreen" | undefined, theme?: "light" | "dark" | undefined, modalMaxWidth?: Partial<Record<"s" | "m" | "xxs" | "xs" | "l" | "xl", import("csstype").Property.MaxWidth<string | number> | undefined>> | null | undefined) => void;
+    showModal: <T extends "FINANCE_DEPOSIT_MODAL" | "FINANCE_WITHDRAW_MODAL" | "TRANSACTION_FAILED" | "TRANSACTION_SUBMITTED" | "WAITING_FOR_CONFIRMATION" | "IMAGE_EDITOR">(modalType: T, modalProps?: import("./ModalContext").GenericModalProps<T> | undefined, modalSize?: "auto" | ("s" | "m" | "xxs" | "xs" | "l" | "xl") | "fullscreen" | undefined, theme?: "light" | "dark" | undefined, modalMaxWidth?: Partial<Record<"s" | "m" | "xxs" | "xs" | "l" | "xl", import("csstype").Property.MaxWidth<string | number> | undefined>> | null | undefined) => void;
     hideModal: (data?: unknown) => void;
-    updateProps: <T_1 extends "FINANCE_DEPOSIT_MODAL" | "FINANCE_WITHDRAW_MODAL" | "TRANSACTION_FAILED" | "TRANSACTION_SUBMITTED" | "WAITING_FOR_CONFIRMATION">(store: import("./ModalContext").Store & {
+    updateProps: <T_1 extends "FINANCE_DEPOSIT_MODAL" | "FINANCE_WITHDRAW_MODAL" | "TRANSACTION_FAILED" | "TRANSACTION_SUBMITTED" | "WAITING_FOR_CONFIRMATION" | "IMAGE_EDITOR">(store: import("./ModalContext").Store & {
         modalProps: import("./ModalContext").GenericModalProps<T_1>;
         modalSize?: "auto" | ("s" | "m" | "xxs" | "xs" | "l" | "xl") | "fullscreen" | undefined;
         modalMaxWidth?: Partial<Record<"s" | "m" | "xxs" | "xs" | "l" | "xl", import("csstype").Property.MaxWidth<string | number> | undefined>> | null | undefined;

package/dist/esm/components/modal/useModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/useModal.ts"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ;;;;;;;;;;;;;;;;;EAOvB"}
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/useModal.ts"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ;;;;;;;;;;;;;;;;;;EAOvB"}

package/dist/esm/hooks/images/useFileImage.d.ts

@@ -0,0 +1,8 @@
+type UseFileImageProps = {
+    file: File | undefined;
+};
+export declare function useFileImage({ file }: UseFileImageProps, options: {
+    enabled: boolean;
+}): import("react-query").UseQueryResult<string | undefined, unknown>;
+export {};
+//# sourceMappingURL=useFileImage.d.ts.map

package/dist/esm/hooks/images/useFileImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileImage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/images/useFileImage.ts"],"names":[],"mappings":"AAGA,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAC1B,EAAE,IAAI,EAAE,EAAE,iBAAiB,EAC3B,OAAO,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,qEAc9B"}

package/dist/esm/hooks/images/useFileImage.js

@@ -0,0 +1,13 @@
+import { useQuery } from "react-query";
+import { loadAndSetImagePromise } from "../../lib/base64/base64";
+export function useFileImage({ file }, options) {
+    return useQuery(["useFileImage", file], async () => {
+        if (!file) {
+            return;
+        }
+        return await loadAndSetImagePromise(file);
+    }, {
+        enabled: !!file && options.enabled
+    });
+}
+//# sourceMappingURL=useFileImage.js.map

package/dist/esm/hooks/images/useFileImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileImage.js","sourceRoot":"","sources":["../../../../src/hooks/images/useFileImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAMjE,MAAM,UAAU,YAAY,CAC1B,EAAE,IAAI,EAAqB,EAC3B,OAA6B;IAE7B,OAAO,QAAQ,CACb,CAAC,cAAc,EAAE,IAAI,CAAC,EACtB,KAAK,IAAI,EAAE;QACT,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,OAAO,MAAM,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC,EACD;QACE,OAAO,EAAE,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,OAAO;KACnC,CACF,CAAC;AACJ,CAAC"}

package/dist/esm/hooks/images/useIpfsImage.d.ts

@@ -0,0 +1,13 @@
+type UseIpfsImageProps = {
+    url: string;
+};
+export declare function useIpfsImage({ url }: UseIpfsImageProps, options: {
+    enabled: boolean;
+}): import("react-query").UseQueryResult<{
+    width: number;
+    height: number;
+    base64: string;
+    blob: Blob;
+}, unknown>;
+export {};
+//# sourceMappingURL=useIpfsImage.d.ts.map

package/dist/esm/hooks/images/useIpfsImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIpfsImage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/images/useIpfsImage.ts"],"names":[],"mappings":"AAIA,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,wBAAgB,YAAY,CAC1B,EAAE,GAAG,EAAE,EAAE,iBAAiB,EAC1B,OAAO,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE;;;;;YAgB9B"}

package/dist/esm/hooks/images/useIpfsImage.js

@@ -0,0 +1,16 @@
+import { useQuery } from "react-query";
+import { fetchImageAsBase64 } from "../../lib/base64/base64";
+import { getImageMetadata } from "../../lib/images/images";
+export function useIpfsImage({ url }, options) {
+    return useQuery(["useIpfsImage", url], async () => {
+        const result = await fetchImageAsBase64(url);
+        const metadata = await getImageMetadata(result.base64);
+        return {
+            ...result,
+            ...metadata
+        };
+    }, {
+        enabled: options.enabled
+    });
+}
+//# sourceMappingURL=useIpfsImage.js.map

package/dist/esm/hooks/images/useIpfsImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIpfsImage.js","sourceRoot":"","sources":["../../../../src/hooks/images/useIpfsImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM3D,MAAM,UAAU,YAAY,CAC1B,EAAE,GAAG,EAAqB,EAC1B,OAA6B;IAE7B,OAAO,QAAQ,CACb,CAAC,cAAc,EAAE,GAAG,CAAC,EACrB,KAAK,IAAI,EAAE;QACT,MAAM,MAAM,GAAG,MAAM,kBAAkB,CAAC,GAAG,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACvD,OAAO;YACL,GAAG,MAAM;YACT,GAAG,QAAQ;SACZ,CAAC;IACJ,CAAC,EACD;QACE,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CACF,CAAC;AACJ,CAAC"}

package/dist/esm/lib/base64/base64.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="node" />
 import { IpfsMetadataStorage } from "@bosonprotocol/ipfs-storage";
-export declare function fetchImageAsBase64(imageUrl: string): Promise<string>;
+export declare function fetchImageAsBase64(imageUrl: string): Promise<{
+    base64: string;
+    blob: Blob;
+}>;
 export declare function fromBase64ToBinary(base64: string): Buffer;
 export declare function blobToBase64(blob: Blob): Promise<string>;
 export declare const loadAndSetMedia: (fileOrBlob: File | Blob, callback: (base64Uri: string) => void, errorCallback?: ((...errorArgs: unknown[]) => void) | undefined) => void;

package/dist/esm/lib/base64/base64.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base64.d.ts","sourceRoot":"","sources":["../../../../src/lib/base64/base64.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,wBAAsB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,mBAIxD;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,wBAAsB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAI9D;AAED,eAAO,MAAM,eAAe,eACd,IAAI,GAAG,IAAI,wBACD,MAAM,KAAK,IAAI,kCACN,OAAO,EAAE,KAAK,IAAI,sBAWlD,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,IAAI,oBAMjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,cACpB,MAAM,EAAE,uBACE,mBAAmB,KACvC,QAAQ,MAAM,EAAE,CAgBlB,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAsB5C"}
+{"version":3,"file":"base64.d.ts","sourceRoot":"","sources":["../../../../src/lib/base64/base64.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,wBAAsB,kBAAkB,CAAC,QAAQ,EAAE,MAAM;;;GAIxD;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,wBAAsB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAI9D;AAED,eAAO,MAAM,eAAe,eACd,IAAI,GAAG,IAAI,wBACD,MAAM,KAAK,IAAI,kCACN,OAAO,EAAE,KAAK,IAAI,sBAWlD,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,IAAI,oBAMjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,cACpB,MAAM,EAAE,uBACE,mBAAmB,KACvC,QAAQ,MAAM,EAAE,CAgBlB,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAsB5C"}

package/dist/esm/lib/base64/base64.js

@@ -1,7 +1,7 @@
 export async function fetchImageAsBase64(imageUrl) {
     const response = await fetch(imageUrl);
     const blob = await response.blob();
-    return blobToBase64(blob);
+    return { base64: await blobToBase64(blob), blob };
 }
 export function fromBase64ToBinary(base64) {
     return Buffer.from(base64.replace(/data:image\/.*;base64,/, ""), "base64");

package/dist/esm/lib/base64/base64.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.32.0-alpha.9",
+  "version": "0.32.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,8 +15,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.40.4-alpha.7",
-    "@bosonprotocol/ethers-sdk": "^1.14.4-alpha.7",
+    "@bosonprotocol/core-sdk": "^1.40.4",
+    "@bosonprotocol/ethers-sdk": "^1.14.4",
     "@bosonprotocol/ipfs-storage": "^1.11.3",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
@@ -54,7 +54,9 @@
     "multihashes": "^4.0.3",
     "phosphor-react": "^1.4.1",
     "polished": "^4.2.2",
+    "react-avatar-editor": "^13.0.2",
     "react-chartjs-2": "^5.2.0",
+    "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-hot-toast": "2.4.0",
     "react-markdown": "8.0.6",
@@ -155,6 +157,7 @@
     "@types/lodash.uniqby": "^4.7.7",
     "@types/node": "^16.11.25",
     "@types/react": "^18.0.3",
+    "@types/react-avatar-editor": "^13.0.2",
     "@types/react-slick": "^0.23.13",
     "@types/react-table": "^7.7.14",
     "@types/storybook__react": "^5.2.1",
@@ -185,5 +188,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "bbc2d285de7252d51efa9007980be0ba83e8fd5e"
+  "gitHead": "bf1e1287fdfa2eafb76eea318eec0cd62a9b491e"
 }

package/src/components/error/SimpleError.tsx

@@ -1,33 +1,42 @@
 import { Warning } from "phosphor-react";
 import React, { ReactNode } from "react";
-import styled from "styled-components";
+import styled, { CSSProperties } from "styled-components";
 
 import { theme } from "../../theme";
-import { Grid } from "../ui/Grid";
+import { Grid, GridProps } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 const colors = theme.colors.light;
 
-const StyledGrid = styled(Grid)`
-  background-color: ${colors.lightGrey};
+const StyledGrid = styled(Grid)<{
+  $background: CSSProperties["backgroundColor"];
+}>`
+  background-color: ${({ $background }) => $background};
 `;
 
-interface Props {
+export type SimpleProps = GridProps & {
   errorMessage?: string;
   children?: ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [x: string]: any;
-}
+  backgroundColor?: CSSProperties["backgroundColor"];
+  warningColor?: CSSProperties["backgroundColor"];
+};
 
-export function SimpleError({ errorMessage, children, ...rest }: Props) {
+export function SimpleError({
+  errorMessage,
+  children,
+  backgroundColor = colors.lightGrey,
+  warningColor = colors.darkOrange,
+  ...rest
+}: SimpleProps) {
   return (
     <StyledGrid
       justifyContent="flex-start"
       gap="0.5rem"
       margin="1.5rem 0 0 0"
       padding="1.5rem"
+      $background={backgroundColor}
       {...rest}
     >
-      <Warning color={colors.darkOrange} size={16} />
+      <Warning color={warningColor} size={16} />
       {children ? (
         children
       ) : (

package/src/components/form/Field.styles.ts

@@ -115,7 +115,7 @@ export const FieldInput = styled.input<{
     `};
 `;
 
-export const FileUploadWrapper = styled.div<{ choosen: any; error: any }>`
+export const FileUploadWrapper = styled.div<{ error: any }>`
   position: relative;
   overflow: hidden;
   display: flex;

package/src/components/form/FormField.tsx

@@ -13,15 +13,16 @@ import type { FormFieldProps } from "./types";
 
 const colors = theme.colors.light;
 
-export default function FormField({
+export function FormField({
   title,
+  titleIcon,
   subTitle = false,
   required = false,
   tooltip,
   children,
   style = {},
-  theme = "",
-  valueToCopy
+  valueToCopy,
+  copyIconColor = colors.secondary
 }: FormFieldProps) {
   return (
     <FormFieldWrapper
@@ -59,10 +60,11 @@ export default function FormField({
                   }
                 }}
               >
-                <Copy size={24} color={colors.secondary} weight="light" />
+                <Copy size={24} color={copyIconColor} weight="light" />
               </CopyButton>
             )}
           </Typography>
+          {titleIcon}
           {tooltip && <Tooltip content={tooltip} size={16} />}
         </Grid>
         {subTitle && (

package/src/components/form/Upload/ImageEditorModal/ImageEditor.tsx

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, forwardRef, useState } from "react";
+import AvatarEditor, { AvatarEditorProps } from "react-avatar-editor";
+import Dropzone from "react-dropzone";
+import styled from "styled-components";
+import { Grid } from "../../../ui/Grid";
+import { useIpfsImage } from "../../../../hooks/images/useIpfsImage";
+
+const StyledCanvasWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  > :first-child {
+    max-width: 100%;
+    object-fit: contain;
+    width: auto !important;
+    height: auto !important;
+  }
+`;
+
+export type ImageEditorProps = Pick<
+  AvatarEditorProps,
+  "borderRadius" | "width" | "height"
+> & {
+  url?: string;
+};
+
+export const ImageEditor = forwardRef<AvatarEditor, ImageEditorProps>(
+  ({ url, borderRadius, width, height }, editorRef) => {
+    const [scale, setScale] = useState<number>();
+    const handleScale = (e: ChangeEvent<HTMLInputElement>) => {
+      const scale = parseFloat(e.target.value);
+      setScale(scale);
+    };
+    const { data } = useIpfsImage({ url: url ?? "" }, { enabled: !!url });
+    const image = data?.base64;
+    const { width: imageWidth, height: imageHeight } = data || {};
+    const w = borderRadius ? width : width || imageWidth;
+    const h = borderRadius ? height : height || imageHeight;
+    return (
+      <>
+        {image && (
+          <div style={{ margin: "2rem 0", maxWidth: "100%" }}>
+            <Dropzone noClick noKeyboard>
+              {({ getRootProps, getInputProps }) => (
+                <StyledCanvasWrapper {...getRootProps()}>
+                  <AvatarEditor
+                    image={image}
+                    ref={editorRef}
+                    width={w}
+                    height={h}
+                    scale={scale}
+                    borderRadius={borderRadius}
+                  />
+                  <input {...getInputProps()} />
+                </StyledCanvasWrapper>
+              )}
+            </Dropzone>
+            <Grid alignItems="center" justifyContent="center">
+              Zoom:
+              <input
+                name="scale"
+                type="range"
+                onChange={handleScale}
+                min={"0.1"}
+                max="2"
+                step="0.01"
+                defaultValue="1"
+              />
+            </Grid>
+          </div>
+        )}
+      </>
+    );
+  }
+);

package/src/components/form/Upload/ImageEditorModal/ImageEditorModal.tsx

@@ -0,0 +1,77 @@
+import * as Sentry from "@sentry/browser";
+import React, { useRef, useState } from "react";
+import AvatarEditor from "react-avatar-editor";
+import { dataURItoBlob } from "../../../../lib/base64/base64";
+import Modal from "../../../modal/Modal";
+import { Grid } from "../../../ui/Grid";
+import { Spinner } from "../../../ui/loading/Spinner";
+import { BaseButton, BaseButtonTheme } from "../../../buttons/BaseButton";
+import { ImageEditor, ImageEditorProps } from "./ImageEditor";
+import { useFileImage } from "../../../../hooks/images/useFileImage";
+
+export type ImageEditorModalProps = Omit<ImageEditorProps, "url"> & {
+  files: File[] | null;
+  hideModal: (files?: File[]) => Promise<void>;
+  saveButtonTheme: BaseButtonTheme;
+};
+
+export const ImageEditorModal: React.FC<ImageEditorModalProps> = ({
+  hideModal,
+  files,
+  saveButtonTheme,
+  ...rest
+}) => {
+  const originalFile = files?.[0];
+  const { data: url } = useFileImage(
+    { file: originalFile },
+    { enabled: !!originalFile }
+  );
+  const editorRef = useRef<AvatarEditor>(null);
+  const [isSaving, setSaving] = useState<boolean>(false);
+  const onClickSave = async () => {
+    setSaving(true);
+    try {
+      const img = editorRef.current?.getImageScaledToCanvas().toDataURL();
+      if (!img) {
+        return;
+      }
+      const blob = dataURItoBlob(img);
+      const file = new File([blob], originalFile?.name ?? "edited", {
+        type: originalFile?.type,
+        lastModified: originalFile?.lastModified
+      });
+      if (!file) {
+        return;
+      }
+      await hideModal([file]);
+    } catch (error) {
+      Sentry.captureException(error);
+    } finally {
+      setSaving(false);
+    }
+  };
+  return (
+    <Modal
+      modalType="IMAGE_EDITOR"
+      hideModal={() => hideModal()}
+      size="auto"
+      maxWidths={{
+        s: "50rem"
+      }}
+      theme="light"
+    >
+      <Grid flexDirection="column">
+        <ImageEditor url={url} {...rest} ref={editorRef} />
+        <BaseButton
+          type="button"
+          theme={saveButtonTheme}
+          onClick={() => onClickSave()}
+          disabled={isSaving}
+        >
+          {isSaving ? "Saving" : "Save"}
+          {isSaving && <Spinner />}
+        </BaseButton>
+      </Grid>
+    </Modal>
+  );
+};