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

package/dist/esm/components/step/MultiSteps.js

@@ -0,0 +1,82 @@
+import { ArrowLeft, ArrowRight } from "phosphor-react";
+import React, { useEffect, useRef, useState } from "react";
+import { Grid } from "../ui/Grid";
+import { Step, StepState } from "./Step";
+import { MultiStepStyle, MultiStepWrapper, StepWrapper } from "./Step.styles";
+import { useBreakpoints } from "../../hooks/useBreakpoints";
+import { theme } from "../../theme";
+const colors = theme.colors.light;
+const dataStepsWrapper = "data-steps-wrapper";
+export function MultiSteps({ data, active, callback, disableInactiveSteps = false, isRightArrowEnabled = false, hideArrows = false, enabledArrowColor = colors.darkGrey, disabledArrowColor = colors.lightArrowColor, stepInactiveDotColor = "#d3d5db", stepInactiveBackgroundColor = colors.white, stepInactiveHoverDotColor = colors.darkGrey, stepInactiveHoverBackgroundColor = colors.lightGrey, stepActiveBackgroundColor = colors.black, stepActiveDotsColor = colors.green, // TODO: var(--primary) in boson Dapp
+stepDoneBackgroundColor = colors.green, // TODO: var(--primary) in boson Dapp
+stepDoneCheckColor = colors.black, stepDoneHoverBackgroundColor = colors.black, stepDoneHoverCheckColor = colors.green, // TODO: var(--primary) in boson Dapp
+...props }) {
+    const [current, setCurrent] = useState(active || 0);
+    const { isLteS } = useBreakpoints();
+    useEffect(() => {
+        setCurrent(active || 0);
+    }, [active]);
+    const stepWidthRef = useRef(50);
+    return (React.createElement(Grid, { justifyContent: "space-evenly", ref: (element) => {
+            const children = element?.querySelectorAll(`[${dataStepsWrapper}] > *`);
+            children?.forEach((child) => {
+                const isVisible = child.checkVisibility({ checkVisibilityCSS: true });
+                if (isVisible) {
+                    if (child.clientWidth &&
+                        stepWidthRef.current !== child.clientWidth) {
+                        stepWidthRef.current = child.clientWidth;
+                    }
+                }
+            });
+        } },
+        isLteS && !hideArrows && (React.createElement(Grid, { alignItems: "center", width: "auto" },
+            React.createElement(ArrowLeft, { size: 32, style: { cursor: active && callback ? "pointer" : "not-allowed" }, color: active === 0 ? disabledArrowColor : enabledArrowColor, onClick: () => {
+                    if (active && callback) {
+                        callback(active - 1);
+                    }
+                } }))),
+        React.createElement("div", { style: {
+                width: `${stepWidthRef.current}px`
+            } }),
+        React.createElement(MultiStepStyle, { ...props, [dataStepsWrapper]: true, "$isLteS": isLteS }, data.map((el, i) => {
+            const steps = Array.from(Array(el.steps).keys());
+            const newData = data.slice(0, i);
+            const previousLength = newData.reduce((acc, cur) => (acc += cur.steps), 0);
+            if ((isLteS &&
+                current >= previousLength &&
+                current <= previousLength + steps.length) ||
+                !isLteS) {
+                return (React.createElement(MultiStepWrapper, { "$isLteS": isLteS, key: `multi_${i}` },
+                    React.createElement(StepWrapper, null, steps.map((_, key) => {
+                        const currentKey = previousLength + key;
+                        const state = currentKey === current
+                            ? StepState.Active
+                            : currentKey < current
+                                ? StepState.Done
+                                : StepState.Inactive;
+                        const isStepDisabled = !callback ||
+                            (disableInactiveSteps && StepState.Inactive === state);
+                        if ((isLteS && active === currentKey) || !isLteS) {
+                            return (React.createElement(Step, { disabled: isStepDisabled, state: state, onClick: () => {
+                                    if (!isStepDisabled) {
+                                        setCurrent(currentKey);
+                                        callback(currentKey);
+                                    }
+                                }, key: `multi-step_${currentKey}`, stepInactiveDotColor: stepInactiveDotColor, stepInactiveBackgroundColor: stepInactiveBackgroundColor, stepInactiveHoverDotColor: stepInactiveHoverDotColor, stepInactiveHoverBackgroundColor: stepInactiveHoverBackgroundColor, stepActiveBackgroundColor: stepActiveBackgroundColor, stepActiveDotsColor: stepActiveDotsColor, stepDoneBackgroundColor: stepDoneBackgroundColor, stepDoneCheckColor: stepDoneCheckColor, stepDoneHoverBackgroundColor: stepDoneHoverBackgroundColor, stepDoneHoverCheckColor: stepDoneHoverCheckColor }));
+                        }
+                        return null;
+                    })),
+                    React.createElement("p", null, el.name)));
+            }
+            return null;
+        })),
+        isLteS && !hideArrows && (React.createElement(Grid, { alignItems: "flex-end", width: "auto" },
+            React.createElement(ArrowRight, { size: 32, color: isRightArrowEnabled ? enabledArrowColor : disabledArrowColor, style: { cursor: isRightArrowEnabled ? "pointer" : "not-allowed" }, onClick: () => {
+                    if (isRightArrowEnabled &&
+                        typeof active === "number" &&
+                        callback) {
+                        callback(active + 1);
+                    }
+                } })))));
+}
+//# sourceMappingURL=MultiSteps.js.map

package/dist/esm/components/step/MultiSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSteps.js","sourceRoot":"","sources":["../../../../src/components/step/MultiSteps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,IAAI,EAAkB,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAgBlC,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAC9C,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,oBAAoB,GAAG,KAAK,EAC5B,mBAAmB,GAAG,KAAK,EAC3B,UAAU,GAAG,KAAK,EAClB,iBAAiB,GAAG,MAAM,CAAC,QAAQ,EACnC,kBAAkB,GAAG,MAAM,CAAC,eAAe,EAC3C,oBAAoB,GAAG,SAAS,EAChC,2BAA2B,GAAG,MAAM,CAAC,KAAK,EAC1C,yBAAyB,GAAG,MAAM,CAAC,QAAQ,EAC3C,gCAAgC,GAAG,MAAM,CAAC,SAAS,EACnD,yBAAyB,GAAG,MAAM,CAAC,KAAK,EACxC,mBAAmB,GAAG,MAAM,CAAC,KAAK,EAAE,qCAAqC;AACzE,uBAAuB,GAAG,MAAM,CAAC,KAAK,EAAE,qCAAqC;AAC7E,kBAAkB,GAAG,MAAM,CAAC,KAAK,EACjC,4BAA4B,GAAG,MAAM,CAAC,KAAK,EAC3C,uBAAuB,GAAG,MAAM,CAAC,KAAK,EAAE,qCAAqC;AAC7E,GAAG,KAAK,EACQ;IAChB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAS,MAAM,IAAI,CAAC,CAAC,CAAC;IAC5D,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,MAAM,YAAY,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IACxC,OAAO,CACL,oBAAC,IAAI,IACH,cAAc,EAAC,cAAc,EAC7B,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,MAAM,QAAQ,GAAG,OAAO,EAAE,gBAAgB,CAAC,IAAI,gBAAgB,OAAO,CAAC,CAAC;YACxE,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC1B,MAAM,SAAS,GAAG,KAAK,CAAC,eAAe,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC;gBACtE,IAAI,SAAS,EAAE;oBACb,IACE,KAAK,CAAC,WAAW;wBACjB,YAAY,CAAC,OAAO,KAAK,KAAK,CAAC,WAAW,EAC1C;wBACA,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC;qBAC1C;iBACF;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAEA,MAAM,IAAI,CAAC,UAAU,IAAI,CACxB,oBAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM;YACpC,oBAAC,SAAS,IACR,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,EACjE,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAC5D,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,MAAM,IAAI,QAAQ,EAAE;wBACtB,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBACtB;gBACH,CAAC,GACD,CACG,CACR;QACD,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,YAAY,CAAC,OAAO,IAAI;aACnC,GACD;QACF,oBAAC,cAAc,OACT,KAAK,EACH,CAAC,gBAAgB,CAAC,EAAE,IAAI,aACrB,MAAM,IAEd,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YAClB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YACjD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACjC,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CACnC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,EAChC,CAAC,CACF,CAAC;YACF,IACE,CAAC,MAAM;gBACL,OAAO,IAAI,cAAc;gBACzB,OAAO,IAAI,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC3C,CAAC,MAAM,EACP;gBACA,OAAO,CACL,oBAAC,gBAAgB,eAAU,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE;oBAClD,oBAAC,WAAW,QACT,KAAK,CAAC,GAAG,CAAC,CAAC,CAAS,EAAE,GAAW,EAAE,EAAE;wBACpC,MAAM,UAAU,GAAG,cAAc,GAAG,GAAG,CAAC;wBACxC,MAAM,KAAK,GACT,UAAU,KAAK,OAAO;4BACpB,CAAC,CAAC,SAAS,CAAC,MAAM;4BAClB,CAAC,CAAC,UAAU,GAAG,OAAO;gCACpB,CAAC,CAAC,SAAS,CAAC,IAAI;gCAChB,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;wBAE3B,MAAM,cAAc,GAClB,CAAC,QAAQ;4BACT,CAAC,oBAAoB,IAAI,SAAS,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC;wBAEzD,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE;4BAChD,OAAO,CACL,oBAAC,IAAI,IACH,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,CAAC,cAAc,EAAE;wCACnB,UAAU,CAAC,UAAU,CAAC,CAAC;wCACvB,QAAQ,CAAC,UAAU,CAAC,CAAC;qCACtB;gCACH,CAAC,EACD,GAAG,EAAE,cAAc,UAAU,EAAE,EAC/B,oBAAoB,EAAE,oBAAoB,EAC1C,2BAA2B,EACzB,2BAA2B,EAE7B,yBAAyB,EAAE,yBAAyB,EACpD,gCAAgC,EAC9B,gCAAgC,EAElC,yBAAyB,EAAE,yBAAyB,EACpD,mBAAmB,EAAE,mBAAmB,EACxC,uBAAuB,EAAE,uBAAuB,EAChD,kBAAkB,EAAE,kBAAkB,EACtC,4BAA4B,EAC1B,4BAA4B,EAE9B,uBAAuB,EAAE,uBAAuB,GAChD,CACH,CAAC;yBACH;wBACD,OAAO,IAAI,CAAC;oBACd,CAAC,CAAC,CACU;oBACd,+BAAI,EAAE,CAAC,IAAI,CAAK,CACC,CACpB,CAAC;aACH;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CACa;QAChB,MAAM,IAAI,CAAC,UAAU,IAAI,CACxB,oBAAC,IAAI,IAAC,UAAU,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM;YACtC,oBAAC,UAAU,IACT,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EACnE,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,EAClE,OAAO,EAAE,GAAG,EAAE;oBACZ,IACE,mBAAmB;wBACnB,OAAO,MAAM,KAAK,QAAQ;wBAC1B,QAAQ,EACR;wBACA,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBACtB;gBACH,CAAC,GACD,CACG,CACR,CACI,CACR,CAAC;AACJ,CAAC"}

package/dist/esm/components/step/Step.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { CSSProperties } from "styled-components";
+export declare enum StepState {
+    Inactive = "inactive",
+    Active = "active",
+    Done = "done"
+}
+export type StepColorProps = {
+    stepInactiveDotColor?: CSSProperties["color"];
+    stepInactiveBackgroundColor?: CSSProperties["color"];
+    stepInactiveHoverDotColor?: CSSProperties["color"];
+    stepInactiveHoverBackgroundColor?: CSSProperties["color"];
+    stepActiveBackgroundColor?: CSSProperties["color"];
+    stepActiveDotsColor?: CSSProperties["color"];
+    stepDoneBackgroundColor?: CSSProperties["color"];
+    stepDoneCheckColor?: CSSProperties["color"];
+    stepDoneHoverBackgroundColor?: CSSProperties["color"];
+    stepDoneHoverCheckColor?: CSSProperties["color"];
+};
+type StepProps = StepColorProps & {
+    className?: string;
+    onClick?: () => void;
+    state?: StepState;
+    disabled?: boolean;
+};
+export declare function Step({ state, className, disabled, onClick, stepInactiveDotColor, stepInactiveBackgroundColor, stepInactiveHoverDotColor, stepInactiveHoverBackgroundColor, stepActiveBackgroundColor, stepActiveDotsColor, stepDoneBackgroundColor, stepDoneCheckColor, stepDoneHoverBackgroundColor, stepDoneHoverCheckColor, ...props }: StepProps): JSX.Element;
+export {};
+//# sourceMappingURL=Step.d.ts.map

package/dist/esm/components/step/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/step/Step.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIlD,oBAAY,SAAS;IACnB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,oBAAoB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,2BAA2B,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACrD,yBAAyB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnD,gCAAgC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1D,yBAAyB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnD,mBAAmB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,uBAAuB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACjD,kBAAkB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5C,4BAA4B,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACtD,uBAAuB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAClD,CAAC;AAEF,KAAK,SAAS,GAAG,cAAc,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,KAA0B,EAC1B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,oBAAoB,EACpB,2BAA2B,EAC3B,yBAAyB,EACzB,gCAAgC,EAChC,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,4BAA4B,EAC5B,uBAAuB,EACvB,GAAG,KAAK,EACT,EAAE,SAAS,eAoBX"}

package/dist/esm/components/step/Step.js

@@ -0,0 +1,13 @@
+import { StepStyle } from "./Step.styles";
+import React from "react";
+export var StepState;
+(function (StepState) {
+    StepState["Inactive"] = "inactive";
+    StepState["Active"] = "active";
+    StepState["Done"] = "done";
+})(StepState || (StepState = {}));
+export function Step({ state = StepState.Inactive, className, disabled, onClick, stepInactiveDotColor, stepInactiveBackgroundColor, stepInactiveHoverDotColor, stepInactiveHoverBackgroundColor, stepActiveBackgroundColor, stepActiveDotsColor, stepDoneBackgroundColor, stepDoneCheckColor, stepDoneHoverBackgroundColor, stepDoneHoverCheckColor, ...props }) {
+    return (React.createElement(StepStyle, { "$state": state, ...props, "$stepInactiveDotColor": stepInactiveDotColor, "$stepInactiveBackgroundColor": stepInactiveBackgroundColor, "$stepInactiveHoverDotColor": stepInactiveHoverDotColor, "$stepInactiveHoverBackgroundColor": stepInactiveHoverBackgroundColor, "$stepActiveBackgroundColor": stepActiveBackgroundColor, "$stepActiveDotsColor": stepActiveDotsColor, "$stepDoneBackgroundColor": stepDoneBackgroundColor, "$stepDoneCheckColor": stepDoneCheckColor, "$stepDoneHoverBackgroundColor": stepDoneHoverBackgroundColor, "$stepDoneHoverCheckColor": stepDoneHoverCheckColor, disabled: !!disabled },
+        React.createElement("div", null)));
+}
+//# sourceMappingURL=Step.js.map

package/dist/esm/components/step/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../../src/components/step/Step.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,kCAAqB,CAAA;IACrB,8BAAiB,CAAA;IACjB,0BAAa,CAAA;AACf,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAsBD,MAAM,UAAU,IAAI,CAAC,EACnB,KAAK,GAAG,SAAS,CAAC,QAAQ,EAC1B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,oBAAoB,EACpB,2BAA2B,EAC3B,yBAAyB,EACzB,gCAAgC,EAChC,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,4BAA4B,EAC5B,uBAAuB,EACvB,GAAG,KAAK,EACE;IACV,OAAO,CACL,oBAAC,SAAS,cACA,KAAK,KACT,KAAK,2BACc,oBAAoB,kCACb,2BAA2B,gCAC7B,yBAAyB,uCAClB,gCAAgC,gCACvC,yBAAyB,0BAC/B,mBAAmB,8BACf,uBAAuB,yBAC5B,kBAAkB,mCACR,4BAA4B,8BACjC,uBAAuB,EACjD,QAAQ,EAAE,CAAC,CAAC,QAAQ;QAEpB,gCAAO,CACG,CACb,CAAC;AACJ,CAAC"}

package/dist/esm/components/step/Step.styles.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { CSSProperties } from "styled-components";
+import { StepState } from "./Step";
+type StepColorProps = {
+    $stepInactiveDotColor?: CSSProperties["color"];
+    $stepInactiveBackgroundColor?: CSSProperties["color"];
+    $stepInactiveHoverDotColor?: CSSProperties["color"];
+    $stepInactiveHoverBackgroundColor?: CSSProperties["color"];
+    $stepActiveBackgroundColor?: CSSProperties["color"];
+    $stepActiveDotsColor?: CSSProperties["color"];
+    $stepDoneBackgroundColor?: CSSProperties["color"];
+    $stepDoneCheckColor?: CSSProperties["color"];
+    $stepDoneHoverBackgroundColor?: CSSProperties["color"];
+    $stepDoneHoverCheckColor?: CSSProperties["color"];
+};
+export declare const StepStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $state: StepState;
+    disabled: boolean;
+    $isLteS?: boolean | undefined;
+} & StepColorProps>>;
+export declare const MultiStepStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isLteS: boolean;
+}>>;
+export declare const MultiStepWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isLteS: boolean;
+}>>;
+export declare const StepWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export {};
+//# sourceMappingURL=Step.styles.d.ts.map

package/dist/esm/components/step/Step.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/step/Step.styles.ts"],"names":[],"mappings":";AAAA,OAAe,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGnC,KAAK,cAAc,GAAG;IACpB,qBAAqB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/C,4BAA4B,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACtD,0BAA0B,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpD,iCAAiC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3D,0BAA0B,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpD,oBAAoB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,wBAAwB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClD,mBAAmB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,6BAA6B,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACvD,wBAAwB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACnD,CAAC;AACF,eAAO,MAAM,SAAS;YAEV,SAAS;cACP,OAAO;;oBA4IpB,CAAC;AAEF,eAAO,MAAM,cAAc;aAAyB,OAAO;GAoB1D,CAAC;AAEF,eAAO,MAAM,gBAAgB;aAAyB,OAAO;GAO5D,CAAC;AAEF,eAAO,MAAM,WAAW,gNAcvB,CAAC"}

package/dist/esm/components/step/Step.styles.js

@@ -0,0 +1,170 @@
+import styled, { css } from "styled-components";
+import { transition } from "../../components/ui/styles";
+import { StepState } from "./Step";
+import { theme } from "../../theme";
+const colors = theme.colors.light;
+export const StepStyle = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+
+  min-width: 6rem;
+  height: 1.25rem;
+  ${({ $state, disabled }) => $state !== StepState.Active &&
+    !disabled &&
+    css `
+      &:hover {
+        cursor: pointer;
+      }
+    `}
+
+  ${({ $state, disabled, $stepInactiveBackgroundColor, $stepInactiveDotColor, $stepInactiveHoverBackgroundColor, $stepInactiveHoverDotColor }) => $state === StepState.Inactive &&
+    css `
+      background: ${$stepInactiveBackgroundColor};
+      ${transition}
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background: ${$stepInactiveDotColor};
+
+        ${transition}
+
+        width: 0.25rem;
+        height: 0.25rem;
+      }
+      ${!disabled &&
+        css `
+        &:hover {
+          background: ${$stepInactiveHoverBackgroundColor};
+          &:before {
+            background: ${$stepInactiveHoverDotColor};
+            width: 0.5rem;
+            height: 0.5rem;
+          }
+        }
+      `}
+
+      > div {
+        display: none;
+      }
+    `}
+
+  ${({ $state, $stepActiveBackgroundColor, $stepActiveDotsColor }) => $state === StepState.Active &&
+    css `
+      background: ${$stepActiveBackgroundColor};
+
+      &:before {
+        margin-left: -0.75rem;
+      }
+      &:after {
+        margin-left: 0.75rem;
+      }
+      > div,
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        ${transition}
+        width: 0.25rem;
+        height: 0.25rem;
+        border-radius: 50%;
+        background: ${$stepActiveDotsColor};
+      }
+    `}
+
+  ${({ $state, disabled, $stepDoneBackgroundColor, $stepDoneCheckColor, $stepDoneHoverBackgroundColor, $stepDoneHoverCheckColor }) => $state === StepState.Done &&
+    css `
+      background: ${$stepDoneBackgroundColor};
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        ${transition}
+        background: ${$stepDoneCheckColor};
+      }
+      &:before {
+        width: 0.35rem;
+        height: 0.125rem;
+        transform: translate(calc(-50% - 0.35rem), calc(-50% + 0.15rem))
+          rotate(-135deg);
+      }
+      &:after {
+        width: 0.75rem;
+        height: 0.125rem;
+        transform: translate(-50%, -50%) rotate(-45deg);
+      }
+
+      > div {
+        display: none;
+      }
+      ${!disabled &&
+        css `
+        &:hover {
+          background: ${$stepDoneHoverBackgroundColor};
+          &:before,
+          &:after {
+            background: ${$stepDoneHoverCheckColor};
+          }
+        }
+      `}
+    `}
+`;
+export const MultiStepStyle = styled.div `
+  display: flex;
+  gap: 1rem;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  width: 100%;
+  align-items: center;
+  div div {
+    display: ${({ $isLteS }) => $isLteS && "none"};
+  }
+
+  p {
+    text-align: center;
+    margin: 0;
+    font-weight: 600;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: ${colors.darkGrey};
+  }
+`;
+export const MultiStepWrapper = styled.div `
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  position: ${({ $isLteS }) => $isLteS && "absolute"};
+  left: ${({ $isLteS }) => $isLteS && "50%"};
+  transform: ${({ $isLteS }) => $isLteS && "translate(-50%, 0)"};
+`;
+export const StepWrapper = styled.div `
+  display: flex;
+  gap: 0;
+  flex-grow: 1;
+
+  flex-direction: row;
+  flex-wrap: nowrap;
+  border: 1px solid ${colors.border};
+  &:empty + p {
+    display: none;
+  }
+  &:empty {
+    display: none;
+  }
+`;
+//# sourceMappingURL=Step.styles.js.map

package/dist/esm/components/step/Step.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.styles.js","sourceRoot":"","sources":["../../../../src/components/step/Step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAiB,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAalC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAMlC;;;;;;;;;;IAUG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CACzB,MAAM,KAAK,SAAS,CAAC,MAAM;IAC3B,CAAC,QAAQ;IACT,GAAG,CAAA;;;;KAIF;;IAED,CAAC,EACD,MAAM,EACN,QAAQ,EACR,4BAA4B,EAC5B,qBAAqB,EACrB,iCAAiC,EACjC,0BAA0B,EAC3B,EAAE,EAAE,CACH,MAAM,KAAK,SAAS,CAAC,QAAQ;IAC7B,GAAG,CAAA;oBACa,4BAA4B;QACxC,UAAU;;;;;;;;;sBASI,qBAAqB;;UAEjC,UAAU;;;;;QAKZ,CAAC,QAAQ;QACX,GAAG,CAAA;;wBAEe,iCAAiC;;0BAE/B,0BAA0B;;;;;OAK7C;;;;;KAKF;;IAED,CAAC,EAAE,MAAM,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,EAAE,EAAE,CACjE,MAAM,KAAK,SAAS,CAAC,MAAM;IAC3B,GAAG,CAAA;oBACa,0BAA0B;;;;;;;;;;;;;;;;UAgBpC,UAAU;;;;sBAIE,oBAAoB;;KAErC;;IAED,CAAC,EACD,MAAM,EACN,QAAQ,EACR,wBAAwB,EACxB,mBAAmB,EACnB,6BAA6B,EAC7B,wBAAwB,EACzB,EAAE,EAAE,CACH,MAAM,KAAK,SAAS,CAAC,IAAI;IACzB,GAAG,CAAA;oBACa,wBAAwB;;;;;;;;UAQlC,UAAU;sBACE,mBAAmB;;;;;;;;;;;;;;;;;QAiBjC,CAAC,QAAQ;QACX,GAAG,CAAA;;wBAEe,6BAA6B;;;0BAG3B,wBAAwB;;;OAG3C;KACF;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAsB;;;;;;;;;eAS/C,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,MAAM;;;;;;;;;aASpC,MAAM,CAAC,QAAQ;;CAE3B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAsB;;;;cAIlD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,UAAU;UAC1C,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK;eAC5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,oBAAoB;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;sBAOf,MAAM,CAAC,MAAM;;;;;;;CAOlC,CAAC"}

package/dist/esm/index.d.ts

@@ -78,4 +78,7 @@ export * from "./components/wallet2/web3Provider/index";
 export * from "./components/wallet2/accountDrawer/index";
 export * from "./components/portal/Portal";
 export * from "./components/error/ErrorMessage";
+export * from "./components/error/SimpleError";
+export * from "./components/step/MultiSteps";
+export * from "./components/ipfs/IpfsProvider";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,OAAO,EACP,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,qEAAqE,CAAC;AACpF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -78,4 +78,7 @@ export * from "./components/wallet2/web3Provider/index";
 export * from "./components/wallet2/accountDrawer/index";
 export * from "./components/portal/Portal";
 export * from "./components/error/ErrorMessage";
+export * from "./components/error/SimpleError";
+export * from "./components/step/MultiSteps";
+export * from "./components/ipfs/IpfsProvider";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,YAAY,EAEvB,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,qEAAqE,CAAC;AACpF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"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.8",
+  "version": "0.32.0-alpha.9",
   "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.6",
-    "@bosonprotocol/ethers-sdk": "^1.14.4-alpha.6",
+    "@bosonprotocol/core-sdk": "^1.40.4-alpha.7",
+    "@bosonprotocol/ethers-sdk": "^1.14.4-alpha.7",
     "@bosonprotocol/ipfs-storage": "^1.11.3",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
@@ -185,5 +185,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "0c0fdeb8f06fb92dfe6fd903fb2fd75825b76832"
+  "gitHead": "bbc2d285de7252d51efa9007980be0ba83e8fd5e"
 }

package/src/components/contractualAgreement/ContractualAgreement.tsx

@@ -8,7 +8,7 @@ import { ProgressStatus } from "../../lib/progress/progressStatus";
 
 import { subgraph } from "@bosonprotocol/core-sdk";
 import { useBosonContext } from "../boson/BosonProvider";
-import SimpleError from "../error/SimpleError";
+import { SimpleError } from "../error/SimpleError";
 import Loading from "../ui/loading/LoadingWrapper";
 
 interface ContractualAgreementProps {

package/src/components/error/SimpleError.tsx

@@ -18,11 +18,7 @@ interface Props {
   [x: string]: any;
 }
 
-export default function SimpleError({
-  errorMessage,
-  children,
-  ...rest
-}: Props) {
+export function SimpleError({ errorMessage, children, ...rest }: Props) {
   return (
     <StyledGrid
       justifyContent="flex-start"

package/src/components/form/{Textarea.tsx → BaseTextArea.tsx}

@@ -4,15 +4,20 @@ import React from "react";
 import Error from "./Error";
 import { FieldTextArea } from "./Field.styles";
 import type { TextareaProps } from "./types";
-
-export default function Textarea({ name, ...props }: TextareaProps) {
+export type BaseTextAreaProps = TextareaProps;
+export function BaseTextArea({ name, theme, ...props }: TextareaProps) {
   const [field, meta] = useField(name);
   const errorMessage = meta.error && meta.touched ? meta.error : "";
   const displayError =
     typeof errorMessage === typeof "string" && errorMessage !== "";
   return (
     <>
-      <FieldTextArea error={errorMessage} {...field} {...props} />
+      <FieldTextArea
+        $error={errorMessage}
+        {...field}
+        {...props}
+        theme={theme}
+      />
       <Error display={displayError} message={errorMessage} />
     </>
   );

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

@@ -61,7 +61,6 @@ export const FieldInput = styled.input<{
   border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
   border-radius: ${(props) => props.theme?.borderRadius || 0}px;
   outline: none;
-  font-family: "Plus Jakarta Sans";
 
   ${transition}
 
@@ -210,16 +209,38 @@ export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
     background: ${colors.black}80;
   }
 `;
-
-export const FieldTextArea = styled.textarea<{ error: any }>`
+export type TextAreaTheme = {
+  background: CSSProperties["backgroundColor"];
+  borderColor: CSSProperties["borderColor"];
+  borderRadius: CSSProperties["borderRadius"];
+  focus: {
+    caretColor: CSSProperties["caretColor"];
+  };
+  hover: {
+    borderColor: CSSProperties["borderColor"];
+  };
+  error: {
+    borderColor: CSSProperties["borderColor"];
+    hover: {
+      borderColor: CSSProperties["borderColor"];
+    };
+    focus: {
+      borderColor: CSSProperties["borderColor"];
+      caretColor: CSSProperties["caretColor"];
+    };
+    placeholder: {
+      color: CSSProperties["color"];
+    };
+  };
+};
+export const FieldTextArea = styled.textarea<{ $error: any }>`
   width: 100%;
   padding: 1rem;
   gap: 0.5rem;
-  font-family: "Plus Jakarta Sans";
-
-  background: ${colors.lightGrey};
-  border: 1px solid ${colors.border};
-  border-radius: 0;
+  font-family: inherit;
+  background: ${(props) => props.theme?.background || "transparent"};
+  border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
+  border-radius: ${(props) => props.theme?.borderRadius || 0}px;
   outline: none;
 
   ${transition}
@@ -227,7 +248,9 @@ export const FieldTextArea = styled.textarea<{ error: any }>`
   &:not(:disabled) {
     &:focus,
     &:hover {
-      border: 1px solid var(--secondary);
+      border: 1px solid
+        ${(props) => props.theme?.hover?.borderColor || colors.lightGrey};
+      caret-color: ${(props) => props.theme?.focus?.caretColor || "initial"};
     }
   }
 
@@ -236,39 +259,41 @@ export const FieldTextArea = styled.textarea<{ error: any }>`
     opacity: 0.5;
   }
 
-  ${({ error }) =>
-    !checkIfValueIsEmpty(error)
-      ? css`
-          border: 1px solid ${colors.orange};
-          &::placeholder {
-            color: ${colors.orange};
-            opacity: 1;
-          }
-          &:-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-          &::-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-          &:not(:disabled) {
-            &:hover {
-              border: 1px solid ${colors.orange};
-            }
-          }
-          &:not(:disabled) {
-            &:focus {
-              border: 1px solid var(--secondary);
-            }
-          }
-        `
-      : css`
-          &:not(:disabled) {
-            &:focus,
-            &:hover {
-              border: 1px solid var(--secondary);
-            }
-          }
-        `}
+  ${({ $error }) =>
+    !checkIfValueIsEmpty($error) &&
+    css`
+      border: 1px solid
+        ${(props) => props.theme?.error?.borderColor || colors.orange};
+      &:not(:disabled) {
+        &:hover {
+          border: 1px solid
+            ${(props) =>
+              props.theme?.error?.hover?.borderColor || colors.orange};
+        }
+      }
+      &:not(:disabled) {
+        &:focus {
+          border: 1px solid
+            ${(props) =>
+              props.theme?.error?.focus?.borderColor || colors.lightGrey};
+          caret-color: ${(props) =>
+            props.theme?.error?.focus?.caretColor || colors.orange};
+        }
+      }
+      &::placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+        opacity: 1;
+      }
+      &:-ms-input-placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+      }
+      &::-ms-input-placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+      }
+    `}
 `;
 
 export const FormFieldWrapper = styled(Grid)`
@@ -277,31 +302,10 @@ export const FormFieldWrapper = styled(Grid)`
     line-height: 150%;
   }
 
-  // theme white
-  margin-bottom: 0.5rem;
-  input,
-  textarea {
-    background: ${colors.white};
-    &:disabled {
-      opacity: 1;
-    }
-  }
-  input {
-    border-width: 0;
-    &:hover {
-      border-width: 0;
-    }
-  }
-  input + div {
-    background: ${colors.white};
-  }
-  // end theme white
-
   [data-header] {
     margin: 0;
     font-weight: 600;
     font-size: 1rem;
-    color: ${colors.black};
     + div button {
       margin-left: 0.5rem;
       padding: 0;