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

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

@@ -17,11 +17,13 @@ export const SUPPORTED_FORMATS = [
   "image/jpg",
   "image/jpeg",
   "image/gif",
-  "image/png"
+  "image/png",
+  "image/webp"
 ];
-
 export interface WithUploadToIpfsProps {
-  saveToIpfs: (e: React.ChangeEvent<HTMLInputElement>) => FileProps[];
+  saveToIpfs: (
+    files: File[] | null
+  ) => Promise<false | FileProps[] | undefined>;
   loadMedia: (src: string) => string;
   removeFile: (src: string) => void;
 }
@@ -32,16 +34,16 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
     props: Omit<P & UploadProps, keyof WithUploadToIpfsProps>
   ) => {
     const withUpload = props?.withUpload || false;
-
+    const accept: string = props.accept
+      ? props.accept
+      : SUPPORTED_FORMATS.join(",");
     const { saveFile, loadMedia, removeFile } = useSaveImageToIpfs();
 
-    const saveToIpfs = useCallback(
-      async (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (!e.target.files) {
+    const saveToIpfs: WithUploadToIpfsProps["saveToIpfs"] = useCallback(
+      async (filesArray: File[] | null) => {
+        if (!filesArray) {
           return;
         }
-        const { files } = e.target;
-        const filesArray = Object.values(files);
         const filesErrors: string[] = [];
 
         for (const file of filesArray) {
@@ -105,12 +107,12 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
     const newProps = useMemo(
       () => ({
         maxSize: MAX_FILE_SIZE,
-        supportFormats: SUPPORTED_FORMATS,
+        accept,
         saveToIpfs,
         loadMedia,
         removeFile
       }),
-      [saveToIpfs, loadMedia, removeFile]
+      [saveToIpfs, loadMedia, removeFile, accept]
     );
 
     if (withUpload) {

package/src/components/form/index.ts

@@ -1,11 +1,11 @@
 export { default as Checkbox } from "./Checkbox";
 export { default as Datepicker } from "./Datepicker";
 export { default as Error } from "./Error";
-export { default as FormField } from "./FormField";
+export { FormField } from "./FormField";
 export * from "./BaseInput";
 export { default as Input, InputProps } from "./Input";
 export { default as Phone } from "./Phone";
 export { default as Select } from "./Select";
 export * from "./BaseTagsInput";
-export { default as Textarea } from "./Textarea";
+export * from "./BaseTextArea";
 export { default as Upload } from "./Upload/Upload";

package/src/components/form/types.ts

@@ -1,4 +1,8 @@
+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;
@@ -19,7 +23,7 @@ export interface CheckboxProps extends BaseProps {
 }
 
 export type TextareaProps = BaseProps &
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+  React.TextareaHTMLAttributes<HTMLTextAreaElement> & { theme?: TextAreaTheme };
 
 export interface ErrorProps {
   display?: boolean;
@@ -28,12 +32,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
     | {
@@ -86,7 +91,7 @@ export interface SelectProps extends BaseProps {
   label?: string;
 }
 
-export interface UploadProps extends BaseProps {
+export type UploadProps = BaseProps & {
   accept?: string;
   multiple?: boolean;
   trigger?: React.ReactNode | JSX.Element;
@@ -97,7 +102,18 @@ 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; // for example: "redeemeum.png"

package/src/components/license/License.tsx

@@ -7,7 +7,7 @@ import remarkGfm from "remark-gfm";
 import { useRenderTemplate } from "../../hooks/useRenderTemplate";
 import { ProgressStatus } from "../../lib/progress/progressStatus";
 import { useBosonContext } from "../boson/BosonProvider";
-import SimpleError from "../error/SimpleError";
+import { SimpleError } from "../error/SimpleError";
 import Loading from "../ui/loading/LoadingWrapper";
 
 interface Props {

package/src/components/modal/ModalComponents.tsx

@@ -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";
@@ -10,5 +11,6 @@ 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
 } as const;

package/src/components/modal/ModalContext.tsx

@@ -12,6 +12,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";
@@ -25,9 +26,9 @@ export type Store = {
   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];
+  Parameters<(typeof MODAL_COMPONENTS)[T]> extends [infer P, ...any[]]
+    ? ModalProps & P
+    : ModalProps;
 
 export interface ModalContextType {
   showModal: <T extends keyof typeof MODAL_TYPES>(

package/src/components/modal/ModalTypes.ts

@@ -3,5 +3,6 @@ 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"
 } as const;

package/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx

@@ -24,7 +24,7 @@ import {
   IRedeemButton
 } from "../../../../cta/exchange/RedeemButton";
 import { useEnvContext } from "../../../../environment/EnvironmentContext";
-import SimpleError from "../../../../error/SimpleError";
+import { SimpleError } from "../../../../error/SimpleError";
 import SuccessTransactionToast from "../../../../toasts/SuccessTransactionToast";
 import { Grid } from "../../../../ui/Grid";
 import { Spinner } from "../../../../ui/loading/Spinner";

package/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx

@@ -18,7 +18,7 @@ import {
   ICancelButton
 } from "../../../../../cta/exchange/CancelButton";
 import { useEnvContext } from "../../../../../environment/EnvironmentContext";
-import SimpleError from "../../../../../error/SimpleError";
+import { SimpleError } from "../../../../../error/SimpleError";
 import SuccessTransactionToast from "../../../../../toasts/SuccessTransactionToast";
 import { Grid } from "../../../../../ui/Grid";
 import ThemedButton from "../../../../../ui/ThemedButton";

package/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx

@@ -16,7 +16,7 @@ import {
   IExpireButton
 } from "../../../../../cta/exchange/ExpireButton";
 import { useEnvContext } from "../../../../../environment/EnvironmentContext";
-import SimpleError from "../../../../../error/SimpleError";
+import { SimpleError } from "../../../../../error/SimpleError";
 import { Grid } from "../../../../../ui/Grid";
 import ThemedButton from "../../../../../ui/ThemedButton";
 import { Typography } from "../../../../../ui/Typography";

package/src/components/modal/components/common/VariationSelects.tsx

@@ -12,7 +12,7 @@ import { isNumeric } from "../../../../lib/numbers/numbers";
 import { theme } from "../../../../theme";
 import { isTruthy } from "../../../../types/helpers";
 import { VariantV1, Variation } from "../../../../types/variants";
-import SimpleError from "../../../error/SimpleError";
+import { SimpleError } from "../../../error/SimpleError";
 import { Select } from "../../../form";
 import { SelectDataProps } from "../../../form/types";
 import { Grid } from "../../../ui/Grid";

package/src/components/step/MultiSteps.tsx

@@ -0,0 +1,187 @@
+import { ArrowLeft, ArrowRight } from "phosphor-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { Grid } from "../ui/Grid";
+import { Step, StepColorProps, StepState } from "./Step";
+import { MultiStepStyle, MultiStepWrapper, StepWrapper } from "./Step.styles";
+import { useBreakpoints } from "../../hooks/useBreakpoints";
+import { CSSProperties } from "styled-components";
+import { theme } from "../../theme";
+const colors = theme.colors.light;
+type StepData = {
+  name?: string;
+  steps: number;
+};
+
+export type MultiStepsProps = {
+  disableInactiveSteps?: boolean;
+  active?: number;
+  data: Array<StepData> | Readonly<Array<StepData>>;
+  callback?: (cur: number) => void;
+  isRightArrowEnabled?: boolean;
+  enabledArrowColor?: CSSProperties["color"];
+  disabledArrowColor?: CSSProperties["color"];
+  hideArrows?: boolean;
+} & StepColorProps;
+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
+}: MultiStepsProps) {
+  const [current, setCurrent] = useState<number>(active || 0);
+  const { isLteS } = useBreakpoints();
+
+  useEffect(() => {
+    setCurrent(active || 0);
+  }, [active]);
+  const stepWidthRef = useRef<number>(50);
+  return (
+    <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 && (
+        <Grid alignItems="center" width="auto">
+          <ArrowLeft
+            size={32}
+            style={{ cursor: active && callback ? "pointer" : "not-allowed" }}
+            color={active === 0 ? disabledArrowColor : enabledArrowColor}
+            onClick={() => {
+              if (active && callback) {
+                callback(active - 1);
+              }
+            }}
+          />
+        </Grid>
+      )}
+      <div
+        style={{
+          width: `${stepWidthRef.current}px`
+        }}
+      />
+      <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 (
+              <MultiStepWrapper $isLteS={isLteS} key={`multi_${i}`}>
+                <StepWrapper>
+                  {steps.map((_: number, key: number) => {
+                    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 (
+                        <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;
+                  })}
+                </StepWrapper>
+                <p>{el.name}</p>
+              </MultiStepWrapper>
+            );
+          }
+          return null;
+        })}
+      </MultiStepStyle>
+      {isLteS && !hideArrows && (
+        <Grid alignItems="flex-end" width="auto">
+          <ArrowRight
+            size={32}
+            color={isRightArrowEnabled ? enabledArrowColor : disabledArrowColor}
+            style={{ cursor: isRightArrowEnabled ? "pointer" : "not-allowed" }}
+            onClick={() => {
+              if (
+                isRightArrowEnabled &&
+                typeof active === "number" &&
+                callback
+              ) {
+                callback(active + 1);
+              }
+            }}
+          />
+        </Grid>
+      )}
+    </Grid>
+  );
+}

package/src/components/step/Step.styles.ts

@@ -0,0 +1,209 @@
+import styled, { CSSProperties, css } from "styled-components";
+
+import { transition } from "../../components/ui/styles";
+import { StepState } from "./Step";
+import { theme } from "../../theme";
+const colors = theme.colors.light;
+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 const StepStyle = styled.div<
+  {
+    $state: StepState;
+    disabled: boolean;
+    $isLteS?: boolean;
+  } & StepColorProps
+>`
+  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<{ $isLteS: boolean }>`
+  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<{ $isLteS: boolean }>`
+  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;
+  }
+`;

package/src/components/step/Step.tsx

@@ -0,0 +1,67 @@
+import { CSSProperties } from "styled-components";
+import { StepStyle } from "./Step.styles";
+import React from "react";
+
+export 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 function Step({
+  state = StepState.Inactive,
+  className,
+  disabled,
+  onClick,
+  stepInactiveDotColor,
+  stepInactiveBackgroundColor,
+  stepInactiveHoverDotColor,
+  stepInactiveHoverBackgroundColor,
+  stepActiveBackgroundColor,
+  stepActiveDotsColor,
+  stepDoneBackgroundColor,
+  stepDoneCheckColor,
+  stepDoneHoverBackgroundColor,
+  stepDoneHoverCheckColor,
+  ...props
+}: StepProps) {
+  return (
+    <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}
+    >
+      <div />
+    </StepStyle>
+  );
+}