@bosonprotocol/react-kit 0.33.0-alpha.9 → 0.33.1-alpha.0

package/dist/esm/components/form/Field.styles.js

@@ -103,27 +103,31 @@ export const FileUploadWrapper = styled.div `
     }
   }
 
-  background: ${colors.lightGrey};
-  border-radius: 0;
+  background: ${({ theme }) => theme?.background || colors.lightGrey};
+  ${({ theme }) => theme.borderRadius !== undefined &&
+    css `
+      border-radius: ${theme.borderRadius};
+    `};
   outline: none;
 
-  ${({ error }) => !checkIfValueIsEmpty(error)
+  ${({ $error, theme }) => !checkIfValueIsEmpty($error)
     ? css `
-          border: 1px solid ${colors.orange};
+          border: 1px solid ${theme?.error?.borderColor || colors.orange};
         `
     : css `
-          border: 1px solid ${colors.border};
+          border: 1px solid ${theme?.borderColor || colors.border};
         `}
 
   ${transition};
 
   &:focus,
   &:hover {
-    border: 1px solid var(--secondary);
+    border: 1px solid
+      ${({ theme }) => theme?.hover?.borderColor || colors.lightGrey};
   }
 
   /* prettier-ignore */
-  [data-disabled=true] {
+  :disabled, [data-disabled=true] {
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -258,7 +262,16 @@ export const CheckboxWrapper = styled.label `
       + div {
         cursor: pointer;
         &:hover {
-          border: 1px solid ${colors.secondary};
+          border: 1px solid
+            ${({ theme }) => theme?.hover?.borderColor || colors.border};
+          ${({ theme }) => theme?.hover?.backgroundColor &&
+    css `
+              background-color: ${theme?.hover?.backgroundColor};
+            `};
+          ${({ theme }) => theme?.hover?.color &&
+    css `
+              color: ${theme?.hover?.color};
+            `};
           svg {
             opacity: 0.25;
           }
@@ -278,8 +291,16 @@ export const CheckboxWrapper = styled.label `
     width: 1.5rem;
     height: 1.5rem;
 
-    background: ${colors.lightGrey};
-
+    background-color: ${({ theme }) => theme?.backgroundColor || colors.lightGrey};
+    border: 1px solid ${({ theme }) => theme?.borderColor};
+    ${({ theme }) => theme?.color &&
+    css `
+        color: ${theme?.color};
+      `};
+    ${({ theme }) => theme?.borderRadius !== undefined &&
+    css `
+        border-radius: ${theme?.borderRadius};
+      `};
     margin-right: 0.5rem;
   }
 
@@ -288,6 +309,20 @@ export const CheckboxWrapper = styled.label `
       + div svg {
         opacity: 1;
       }
+      + div {
+        ${({ theme }) => theme?.checked?.backgroundColor &&
+    css `
+            background-color: ${theme?.checked?.backgroundColor};
+          `};
+        ${({ theme }) => theme?.checked?.borderColor &&
+    css `
+            border: 1px solid ${theme?.checked?.borderColor};
+          `};
+        ${({ theme }) => theme?.checked?.color &&
+    css `
+            color: ${theme?.checked?.color};
+          `};
+      }
     }
     &:not(:checked) {
       + div svg {
@@ -296,16 +331,19 @@ export const CheckboxWrapper = styled.label `
     }
   }
 
-  ${({ error }) => !checkIfValueIsEmpty(error)
-    ? css `
-          > div {
-            border: 1px solid ${colors.orange};
-          }
-        `
-    : css `
-          > div {
-            border: 1px solid ${colors.border};
-          }
+  ${({ $error, theme }) => !checkIfValueIsEmpty($error) &&
+    css `
+      > div {
+        border: 1px solid ${theme?.error?.borderColor || colors.orange}};
+        ${theme?.error?.backgroundColor &&
+        css `
+            background-color: ${theme?.error?.backgroundColor};
+          `};
+        ${theme?.error?.color &&
+        css `
+            color: ${theme?.error?.color};
+          `};
+      }
         `}
 `;
 export const VideoPreview = styled.video `

package/dist/esm/components/form/Field.styles.js.map

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

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import type { FormFieldProps } from "./types";
-export declare function FormField({ title, titleIcon, subTitle, required, tooltip, children, style, valueToCopy, copyIconColor }: FormFieldProps): JSX.Element;
+export type { FormFieldProps } from "./types";
+export declare function FormField({ title, titleIcon, subTitle, required, tooltip, children, style, valueToCopy, copyIconColor, ...rest }: FormFieldProps): JSX.Element;
 //# sourceMappingURL=FormField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/FormField.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,QAAQ,EACR,KAAU,EACV,WAAW,EACX,aAAgC,EACjC,EAAE,cAAc,eA0DhB"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/FormField.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,QAAQ,EACR,KAAU,EACV,WAAW,EACX,aAAgC,EAChC,GAAG,IAAI,EACR,EAAE,cAAc,eA2DhB"}

package/dist/esm/components/form/FormField.js

@@ -9,8 +9,8 @@ import { Grid } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 import { CopyButton, FormFieldWrapper } from "./Field.styles";
 const colors = theme.colors.light;
-export function FormField({ title, titleIcon, subTitle = false, required = false, tooltip, children, style = {}, valueToCopy, copyIconColor = colors.secondary }) {
-    return (React.createElement(FormFieldWrapper, { justifyContent: "flex-start", flexDirection: "column", alignItems: "flex-start", flexGrow: "1", style: style },
+export function FormField({ title, titleIcon, subTitle = false, required = false, tooltip, children, style = {}, valueToCopy, copyIconColor = colors.secondary, ...rest }) {
+    return (React.createElement(FormFieldWrapper, { justifyContent: "flex-start", flexDirection: "column", alignItems: "flex-start", flexGrow: "1", style: style, ...rest },
         React.createElement(React.Fragment, null,
             React.createElement(Grid, { justifyContent: "flex-start", margin: "0 0 0.375rem 0" },
                 React.createElement(Typography, { "data-header": true, tag: "p" },

package/dist/esm/components/form/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../../src/components/form/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,KAAK,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG9D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAElC,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,WAAW,EACX,aAAa,GAAG,MAAM,CAAC,SAAS,EACjB;IACf,OAAO,CACL,oBAAC,gBAAgB,IACf,cAAc,EAAC,YAAY,EAC3B,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,YAAY,EACvB,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,KAAK;QAEZ;YACE,oBAAC,IAAI,IAAC,cAAc,EAAC,YAAY,EAAC,MAAM,EAAC,gBAAgB;gBACvD,oBAAC,UAAU,yBAAa,GAAG,EAAC,GAAG;oBAC5B,KAAK;oBACL,IAAI;oBACJ,QAAQ,IAAI,GAAG;oBACf,WAAW,IAAI,CACd,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI;gCACF,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;gCACzC,IAAI,QAAQ,GAAG,EAAE,CAAC;gCAClB,IAAI,UAAU,EAAE;oCACd,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;wCAC/B,QAAQ,IAAI,GAAG,KAAK,IAAI,CAAC;oCAC3B,CAAC,CAAC,CAAC;iCACJ;qCAAM;oCACL,QAAQ,GAAG,WAAW,CAAC;iCACxB;gCAED,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gCACxC,KAAK,CAAC,GAAG,EAAE,CAAC,mCAAmC,CAAC,CAAC;6BAClD;4BAAC,OAAO,KAAK,EAAE;gCACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gCACrB,OAAO,KAAK,CAAC;6BACd;wBACH,CAAC;wBAED,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAC,OAAO,GAAG,CAC5C,CACd,CACU;gBACZ,SAAS;gBACT,OAAO,IAAI,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,GAAI,CAC9C;YACN,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,cAAc,EAAC,YAAY,EAC3B,KAAK,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE;gBAEnC,oBAAC,UAAU,4BAAgB,GAAG,EAAC,GAAG,IAC/B,QAAQ,CACE,CACR,CACR;YACA,QAAQ,CACR,CACc,CACpB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../../src/components/form/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,KAAK,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI9D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAElC,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,WAAW,EACX,aAAa,GAAG,MAAM,CAAC,SAAS,EAChC,GAAG,IAAI,EACQ;IACf,OAAO,CACL,oBAAC,gBAAgB,IACf,cAAc,EAAC,YAAY,EAC3B,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,YAAY,EACvB,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,KAAK,KACR,IAAI;QAER;YACE,oBAAC,IAAI,IAAC,cAAc,EAAC,YAAY,EAAC,MAAM,EAAC,gBAAgB;gBACvD,oBAAC,UAAU,yBAAa,GAAG,EAAC,GAAG;oBAC5B,KAAK;oBACL,IAAI;oBACJ,QAAQ,IAAI,GAAG;oBACf,WAAW,IAAI,CACd,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI;gCACF,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;gCACzC,IAAI,QAAQ,GAAG,EAAE,CAAC;gCAClB,IAAI,UAAU,EAAE;oCACd,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;wCAC/B,QAAQ,IAAI,GAAG,KAAK,IAAI,CAAC;oCAC3B,CAAC,CAAC,CAAC;iCACJ;qCAAM;oCACL,QAAQ,GAAG,WAAW,CAAC;iCACxB;gCAED,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gCACxC,KAAK,CAAC,GAAG,EAAE,CAAC,mCAAmC,CAAC,CAAC;6BAClD;4BAAC,OAAO,KAAK,EAAE;gCACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gCACrB,OAAO,KAAK,CAAC;6BACd;wBACH,CAAC;wBAED,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAC,OAAO,GAAG,CAC5C,CACd,CACU;gBACZ,SAAS;gBACT,OAAO,IAAI,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,GAAI,CAC9C;YACN,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,cAAc,EAAC,YAAY,EAC3B,KAAK,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE;gBAEnC,oBAAC,UAAU,4BAAgB,GAAG,EAAC,GAAG,IAC/B,QAAQ,CACE,CACR,CACR;YACA,QAAQ,CACR,CACc,CACpB,CAAC;AACJ,CAAC"}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import type { SelectProps } from "./types";
-export default function SelectComponent({ name, options, placeholder, isClearable, isSearchable, disabled, errorMessage, onChange, ...props }: SelectProps): JSX.Element;
+export type { SelectProps } from "./types";
+export default function SelectComponent({ name, options, placeholder, isClearable, isSearchable, disabled, errorMessage, onChange, theme, ...props }: SelectProps): JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAmB,WAAW,EAAE,MAAM,SAAS,CAAC;AAgE5D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,OAAO,EACP,WAAyB,EACzB,WAAmB,EACnB,YAAmB,EACnB,QAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,eA4Cb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAmB,WAAW,EAAE,MAAM,SAAS,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA6F3C,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,OAAO,EACP,WAAyB,EACzB,WAAmB,EACnB,YAAmB,EACnB,QAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,WAAW,eA4Cb"}

package/dist/esm/components/form/Select.js

@@ -7,15 +7,7 @@ import { theme } from "../../theme";
 import { zIndex } from "../ui/zIndex";
 import Error from "./Error";
 const colors = theme.colors.light;
-const customStyles = (error) => ({
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    singleValue: (provided, state) => {
-        return {
-            ...provided,
-            color: colors.darkGrey,
-            fontSize: "13.33px"
-        };
-    },
+const customStyles = (error, customTheme) => ({
     control: (provided, state) => {
         const before = state.selectProps.label
             ? {
@@ -31,16 +23,18 @@ const customStyles = (error) => ({
             borderRadius: 0,
             padding: "0.4rem 0.25rem",
             boxShadow: "none",
-            ":hover": {
-                borderColor: colors.secondary,
-                borderWidth: "1px"
-            },
             background: colors.lightGrey,
+            ...customTheme?.control,
             border: state.isFocused
-                ? `1px solid ${colors.secondary}`
+                ? customTheme?.control?.focus?.border ?? `1px solid ${colors.secondary}`
                 : !checkIfValueIsEmpty(error)
-                    ? `1px solid ${colors.orange}`
-                    : `1px solid ${colors.border}`,
+                    ? customTheme?.control?.error?.border ?? `1px solid ${colors.orange}`
+                    : customTheme?.control?.border ?? `1px solid ${colors.border}`,
+            ":hover": {
+                borderColor: colors.secondary,
+                borderWidth: "1px",
+                ...customTheme?.control?.hover
+            },
             ...before
         };
     },
@@ -50,22 +44,50 @@ const customStyles = (error) => ({
         position: "relative",
         width: "100%"
     }),
-    option: (provided, state) => ({
-        ...provided,
-        cursor: state.isDisabled ? "not-allowed" : "pointer",
-        opacity: state.isDisabled ? "0.5" : "1",
-        background: state.isOptionSelected || state.isSelected || state.isFocused
-            ? colors.lightGrey
-            : colors.white,
-        color: state.isOptionSelected || state.isSelected
-            ? colors.secondary
-            : colors.black
-    }),
+    option: (provided, state) => {
+        return {
+            ...provided,
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            opacity: state.isDisabled
+                ? customTheme?.option?.disabled?.opacity ?? "0.5"
+                : customTheme?.option?.opacity ?? "1",
+            background: state.isOptionSelected || state.isSelected || state.isFocused
+                ? customTheme?.option?.selected?.background ?? colors.lightGrey
+                : customTheme?.option?.background ?? colors.white,
+            color: state.isOptionSelected || state.isSelected
+                ? customTheme?.option?.selected?.color ?? colors.secondary
+                : customTheme?.option?.color ?? colors.black,
+            ...(state.isDisabled && customTheme?.option?.disabled),
+            ...((state.isOptionSelected || state.isSelected) &&
+                customTheme?.option?.selected),
+            ...(state.isFocused && customTheme?.option?.focus),
+            ...(!checkIfValueIsEmpty(error) && customTheme?.option?.error)
+        };
+    },
     indicatorSeparator: () => ({
         display: "none"
-    })
+    }),
+    placeholder: (provided) => ({
+        ...provided,
+        ...customTheme?.placeholder,
+        ...(!checkIfValueIsEmpty(error) && customTheme?.placeholder?.error)
+    }),
+    input: (provided) => ({
+        ...provided,
+        ...customTheme?.input,
+        ...(!checkIfValueIsEmpty(error) && customTheme?.input?.error)
+    }),
+    singleValue: (provided) => {
+        return {
+            ...provided,
+            color: colors.darkGrey,
+            fontSize: "13.33px",
+            ...customTheme?.singleValue,
+            ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
+        };
+    }
 });
-export default function SelectComponent({ name, options, placeholder = "Choose...", isClearable = false, isSearchable = true, disabled = false, errorMessage, onChange, ...props }) {
+export default function SelectComponent({ name, options, placeholder = "Choose...", isClearable = false, isSearchable = true, disabled = false, errorMessage, onChange, theme, ...props }) {
     const [field, meta, helpers] = useField(name);
     const displayErrorMessage = meta.error && meta.touched && !errorMessage
         ? meta.error
@@ -86,7 +108,7 @@ export default function SelectComponent({ name, options, placeholder = "Choose..
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { styles: customStyles(displayErrorMessage), ...field, ...props, placeholder: placeholder, options: options, value: field.value, onChange: handleChange, onBlur: handleBlur, isSearchable: isSearchable, isClearable: isClearable, isDisabled: disabled, isOptionDisabled: (option) => option.disabled }),
+        React.createElement(Select, { styles: customStyles(displayErrorMessage, theme), ...field, ...props, placeholder: placeholder, options: options, value: field.value, onChange: handleChange, onBlur: handleBlur, isSearchable: isSearchable, isClearable: isClearable, isDisabled: disabled, isOptionDisabled: (option) => option.disabled }),
         React.createElement(Error, { display: displayError, message: displayErrorMessage }),
         " "));
 }

package/dist/esm/components/form/Select.js.map

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

package/dist/esm/components/form/Upload/BaseUpload.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import type { UploadFileType, UploadProps as UploadPropsWithNoIpfs } from "../types";
+import { WithUploadToIpfsProps } from "./WithUploadToIpfs";
+export type BaseUploadProps = UploadPropsWithNoIpfs;
+declare const _default: (props: Omit<(import("../types").BaseProps & {
+    accept?: string | undefined;
+    multiple?: boolean | undefined;
+    trigger?: React.ReactNode | JSX.Element;
+    maxSize?: number | undefined;
+    onFilesSelect?: ((files: UploadFileType[]) => void) | undefined;
+    files?: File[] | undefined;
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    onLoadSinglePreviewImage?: ((base64Uri: string) => void) | undefined;
+    withUpload?: boolean | undefined;
+    onLoading?: ((loading: boolean) => void) | undefined;
+    borderRadius?: number | undefined;
+    borderRadiusUnit?: "px" | "%" | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    imgPreviewStyle?: Pick<import("styled-components").CSSProperties, "objectFit"> | undefined;
+    theme?: Partial<{
+        triggerTheme: Partial<{
+            borderColor: import("csstype").Property.BorderColor | undefined;
+            borderRadius: import("csstype").Property.BorderRadius<number | (string & {})> | undefined;
+            background: import("csstype").Property.Background<number | (string & {})> | undefined;
+            focus: Partial<{
+                borderColor: import("csstype").Property.BorderColor | undefined;
+            }>;
+            error: Partial<{
+                borderColor: import("csstype").Property.BorderColor | undefined;
+            }>;
+        }>;
+    }> | undefined;
+} & {
+    withEditor: true;
+    saveButtonTheme: import("../../..").BaseButtonTheme;
+} & WithUploadToIpfsProps) | (import("../types").BaseProps & {
+    accept?: string | undefined;
+    multiple?: boolean | undefined;
+    trigger?: React.ReactNode | JSX.Element;
+    maxSize?: number | undefined;
+    onFilesSelect?: ((files: UploadFileType[]) => void) | undefined;
+    files?: File[] | undefined;
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    onLoadSinglePreviewImage?: ((base64Uri: string) => void) | undefined;
+    withUpload?: boolean | undefined;
+    onLoading?: ((loading: boolean) => void) | undefined;
+    borderRadius?: number | undefined;
+    borderRadiusUnit?: "px" | "%" | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    imgPreviewStyle?: Pick<import("styled-components").CSSProperties, "objectFit"> | undefined;
+    theme?: Partial<{
+        triggerTheme: Partial<{
+            borderColor: import("csstype").Property.BorderColor | undefined;
+            borderRadius: import("csstype").Property.BorderRadius<number | (string & {})> | undefined;
+            background: import("csstype").Property.Background<number | (string & {})> | undefined;
+            focus: Partial<{
+                borderColor: import("csstype").Property.BorderColor | undefined;
+            }>;
+            error: Partial<{
+                borderColor: import("csstype").Property.BorderColor | undefined;
+            }>;
+        }>;
+    }> | undefined;
+} & {
+    withEditor: false;
+    saveButtonTheme: undefined;
+} & WithUploadToIpfsProps), keyof WithUploadToIpfsProps>) => JSX.Element;
+export default _default;
+//# sourceMappingURL=BaseUpload.d.ts.map

package/dist/esm/components/form/Upload/BaseUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUpload.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Upload/BaseUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAgBxE,OAAO,KAAK,EACV,cAAc,EACd,WAAW,IAAI,qBAAqB,EAErC,MAAM,UAAU,CAAC;AAElB,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiVpD,wBAA4C"}

package/dist/esm/components/form/Upload/BaseUpload.js

@@ -0,0 +1,226 @@
+import * as Sentry from "@sentry/browser";
+import { useField } from "formik";
+import { Image, Trash, VideoCamera } from "phosphor-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { loadAndSetMedia } from "../../../lib/base64/base64";
+import { bytesToSize } from "../../../lib/bytes/bytesToSize";
+import { theme } from "../../../theme";
+import Loading from "../../ui/loading/LoadingWrapper";
+import ThemedButton from "../../ui/ThemedButton";
+import { Typography } from "../../ui/Typography";
+import Error from "../Error";
+import { FieldFileUploadWrapper, FieldInput, FileUploadWrapper, ImagePreview, VideoPreview } from "../Field.styles";
+import UploadedFiles from "./UploadedFiles";
+import { WithUploadToIpfs } from "./WithUploadToIpfs";
+import { useModal } from "../../modal/useModal";
+import { ImageEditorModal } from "./ImageEditorModal/ImageEditorModal";
+const colors = theme.colors.light;
+function BaseUpload({ name, accept = "image/*", disabled, maxSize, multiple = false, trigger, onFilesSelect, placeholder, wrapperProps, onLoadSinglePreviewImage, withUpload, withEditor, saveToIpfs, loadMedia, onLoading, width, height, borderRadius, borderRadiusUnit = "px", imgPreviewStyle, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+removeFile, saveButtonTheme, theme, ...props }) {
+    const { updateProps, store } = useModal();
+    const [showEditor, setShowEditor] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [preview, setPreview] = useState();
+    const [field, meta, helpers] = useField(name);
+    const handleLoading = useCallback((loadingValue) => {
+        onLoading?.(loadingValue);
+        setIsLoading(loadingValue);
+    }, [onLoading]);
+    const errorMessage = meta.error && meta.touched ? meta.error : "";
+    const displayError = typeof errorMessage === "string" && errorMessage !== "";
+    const inputRef = useRef(null);
+    const [nativeFiles, setNativeFiles] = useState(null);
+    const setFiles = useCallback((value) => {
+        helpers.setValue(value);
+    }, [helpers]);
+    const files = field.value;
+    const mimetypes = accept.split(",").map((acc) => acc.trim());
+    const isImageOnly = mimetypes.every((mimetype) => mimetype.startsWith("image/"));
+    const isVideoOnly = mimetypes.every((mimetype) => mimetype.startsWith("video/"));
+    useEffect(() => {
+        onFilesSelect?.(files);
+        helpers.setValue(files);
+        if (!multiple && files && files?.length !== 0) {
+            if (isImageOnly) {
+                if (withUpload) {
+                    loadIpfsImagePreview(files[0]);
+                }
+                else {
+                    loadAndSetMedia(files[0], (base64Uri) => {
+                        setPreview(base64Uri);
+                        onLoadSinglePreviewImage?.(base64Uri);
+                    });
+                }
+            }
+            else if (isVideoOnly) {
+                if (withUpload) {
+                    loadIpfsVideo(files[0]);
+                }
+                else {
+                    loadAndSetMedia(files[0], (base64Uri) => {
+                        setPreview(base64Uri);
+                    });
+                }
+            }
+        }
+    }, [files]); // eslint-disable-line
+    const loadIpfsVideo = async (file) => {
+        const fileSrc = file && file?.src ? file?.src : false;
+        if (!fileSrc) {
+            return false;
+        }
+        handleLoading(true);
+        try {
+            const imagePreview = await loadMedia(fileSrc || "");
+            if (imagePreview) {
+                setPreview(imagePreview);
+            }
+            else {
+                console.warn(`imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`);
+            }
+        }
+        catch (error) {
+            console.error(error);
+            Sentry.captureException(error);
+        }
+        finally {
+            handleLoading(false);
+        }
+    };
+    const loadIpfsImagePreview = async (file) => {
+        const fileSrc = file && file?.src ? file?.src : false;
+        if (!fileSrc) {
+            return false;
+        }
+        try {
+            handleLoading(true);
+            const imagePreview = await loadMedia(fileSrc || "");
+            if (imagePreview) {
+                setPreview(imagePreview);
+                onLoadSinglePreviewImage?.(imagePreview);
+            }
+            else {
+                console.warn(`imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`);
+            }
+        }
+        catch (error) {
+            console.error(error);
+            Sentry.captureException(error);
+        }
+        finally {
+            handleLoading(false);
+        }
+    };
+    const handleChooseFile = () => {
+        const input = inputRef.current;
+        if (input) {
+            input.click();
+        }
+    };
+    const handleRemoveAllFiles = () => {
+        if (disabled) {
+            return;
+        }
+        setFiles([]);
+        setPreview(null);
+    };
+    const handleRemoveFile = (index) => {
+        const newArray = files.filter((i, k) => k !== index);
+        setFiles(newArray);
+    };
+    const handleChange = useCallback(async (filesArray) => {
+        if (!meta.touched) {
+            helpers.setTouched(true);
+        }
+        if (!filesArray) {
+            return;
+        }
+        for (const file of filesArray) {
+            if (maxSize) {
+                if (file.size > maxSize) {
+                    const error = `File size cannot exceed more than ${bytesToSize(maxSize)}`;
+                    // TODO: change to notification
+                    console.error(error);
+                }
+            }
+        }
+        setFiles(filesArray);
+    }, [helpers, maxSize, meta.touched, setFiles]);
+    const handleSave = useCallback(async (efiles) => {
+        if (!meta.touched) {
+            helpers.setTouched(true);
+        }
+        handleLoading(true);
+        const files = await saveToIpfs(efiles);
+        if (files) {
+            setFiles(files);
+        }
+        else {
+            setFiles([]);
+            console.warn(`There has been an error because 'files' ${files} is falsy in handleSave`);
+        }
+        handleLoading(false);
+    }, [meta.touched, handleLoading, saveToIpfs, helpers, setFiles]);
+    const saveFn = withUpload ? handleSave : handleChange;
+    const style = {
+        borderRadius: borderRadius ? `${borderRadius}${borderRadiusUnit}` : "",
+        width: width ? `100%` : ""
+    };
+    return (React.createElement(React.Fragment, null,
+        withEditor && showEditor && (React.createElement(ImageEditorModal, { saveButtonTheme: saveButtonTheme, files: nativeFiles, borderRadius: borderRadius, width: width, height: height, hideModal: async (fileList) => {
+                if (fileList) {
+                    await saveFn(fileList);
+                }
+                setShowEditor(false);
+                updateProps({
+                    ...store,
+                    modalType: store.modalType,
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    modalProps: {
+                        ...store.modalProps,
+                        hidden: false
+                    }
+                });
+            } })),
+        React.createElement(FieldFileUploadWrapper, { ...wrapperProps, "$disabled": !!disabled },
+            React.createElement(FieldInput, { ...props, hidden: true, type: "file", accept: accept, multiple: multiple, onChange: async (e) => {
+                    const files = e.target.files
+                        ? Object.values(e.target.files)
+                        : e.target.files;
+                    if (files && withEditor) {
+                        setNativeFiles(files);
+                        setShowEditor(true);
+                        updateProps({
+                            ...store,
+                            modalType: store.modalType,
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            modalProps: {
+                                ...store.modalProps,
+                                hidden: true
+                            }
+                        });
+                    }
+                    else {
+                        await saveFn(files);
+                    }
+                    e.target.value = ""; // allow user to select the same file again
+                }, ref: (ref) => {
+                    inputRef.current = ref;
+                }, disabled: disabled }),
+            trigger ? (React.createElement(ThemedButton, { onClick: handleChooseFile, type: "button" },
+                React.createElement(React.Fragment, null, trigger))) : (React.createElement(FileUploadWrapper, { "data-disabled": disabled, onClick: handleChooseFile, "$error": errorMessage, style: style, theme: theme?.triggerTheme }, isLoading ? (React.createElement(Loading, { size: 2 })) : (React.createElement(React.Fragment, null,
+                field.value && field.value?.length !== 0 && preview ? (React.createElement(React.Fragment, null, isVideoOnly ? (React.createElement(VideoPreview, { src: preview?.startsWith("http")
+                        ? preview
+                        : "data:video/mp4;base64," +
+                            preview?.substring("data:application/octet-stream;base64,".length), autoPlay: true, muted: true, loop: true })) : (React.createElement(ImagePreview, { style: { ...imgPreviewStyle }, src: preview })))) : isVideoOnly ? (React.createElement(VideoCamera, { size: 24 })) : (React.createElement(Image, { size: 24 })),
+                placeholder && (React.createElement(Typography, { tag: "p", marginBottom: 0, textAlign: "center" }, placeholder)))))),
+            !disabled && field.value && field.value?.length !== 0 && preview && (React.createElement("div", { onClick: handleRemoveAllFiles, "data-remove": true, style: style },
+                React.createElement(Trash, { size: 24, color: colors.white }))),
+            multiple && (React.createElement(UploadedFiles, { files: files, handleRemoveFile: handleRemoveFile }))),
+        React.createElement(Error, { display: displayError, message: errorMessage })));
+}
+export default WithUploadToIpfs(BaseUpload);
+//# sourceMappingURL=BaseUpload.js.map