@stokr/components-library 3.0.77 → 3.1.0-alpha.1

package/dist/components/RegisterConfirmModal/RegisterConfirmModal.styles.js

@@ -1,20 +0,0 @@
-import styled from "styled-components";
-import { Text } from "../Text/Text.styles.js";
-import { colors } from "../../styles/colors.js";
-const ContainerWithLine = styled(Text)`
-  position: relative;
-  padding-left: 48px;
-
-  &::before {
-    content: '';
-    width: 6px;
-    height: 72px;
-    background: ${colors.blue};
-    position: absolute;
-    left: 0;
-    top: 6px;
-  }
-`;
-export {
-  ContainerWithLine
-};

package/dist/components/RegisterModal/RegisterModal.js

@@ -1,278 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useState, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import parse from "html-react-parser";
-import { styled } from "styled-components";
-import { Formik } from "formik";
-import * as Yup from "yup";
-import { Modal } from "../Modal/Modal.js";
-import stdin_default$1 from "../Form/Form.js";
-import { Text } from "../Text/Text.styles.js";
-import { Input } from "../Input/Input.js";
-import stdin_default$2 from "../Input/InputPassword.js";
-import stdin_default$3 from "../Checkbox/Checkbox.js";
-import stdin_default$4 from "../Button/Button.styles.js";
-import { Row, Column } from "../Grid/Grid.styles.js";
-import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import fetchDataPublic from "../../api/fetchDataPublic.js";
-import { emailRegex } from "../../constants/globalVariables.js";
-import { isPasswordValid, PASSWORD_REQUIREMENTS_MESSAGE } from "../../utils/password-validation.js";
-import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
-import { FormField, FormError } from "../Form/Form.styles.js";
-const TermsStyled = styled.span`
-  cursor: pointer;
-  font-size: 12px;
-  /* margin-left: 4px; */
-  text-decoration: underline;
-
-  &:hover {
-    opacity: 0.7;
-  }
-`;
-const RegisterModal = (props) => {
-  const [email, setemail] = useState(null);
-  const location = useLocation();
-  const [popupErrorWithValue, setpopupErrorWithValue] = useState({});
-  const [privacyTermsCheckbox, setprivacyTermsCheckbox] = useState({
-    agreementText: "By creating this account, I agree with STOKR's Privacy Terms.",
-    label: "privacyTerms",
-    text: "",
-    title: "privacy"
-  });
-  const [newsletterCheckbox, setNewsletterCheckbox] = useState({
-    agreementText: "I would like to receive updates and news from STOKR.",
-    label: "newsletter",
-    text: "",
-    title: "newsletter"
-  });
-  const fetchCheckbox = async () => {
-    try {
-      const response = await fetchDataPublic("compliance/get-checkboxes", {
-        labels: ["privacyTerms", "newsletter"]
-      });
-      if (response?.privacyTerms) {
-        setprivacyTermsCheckbox(response.privacyTerms);
-      }
-      if (response?.newsletter) {
-        setNewsletterCheckbox(response.newsletter);
-      }
-    } catch (error) {
-      console.log("🚀 ~ file: RegisterModal.js:75 ~ error:", error);
-    }
-  };
-  React__default.useEffect(() => {
-    const { search } = location;
-    const query = new URLSearchParams(search);
-    let _email = query.get("email");
-    if (_email) {
-      setemail(_email);
-    }
-    fetchCheckbox();
-  }, []);
-  useEffect(() => {
-    const { popupError: popupError2 } = props;
-    if (popupError2.popup === "register") {
-      setpopupErrorWithValue({
-        ...popupError2
-      });
-    }
-  }, [props.popupError]);
-  const validationSchema = Yup.object().shape({
-    email: Yup.string().matches(emailRegex, "Oops, that's not a valid address").required("Oops, this can‘t be blank"),
-    password: Yup.string().test("password-full", function(val) {
-      if (!val) return this.createError({ message: "Oops, this can’t be blank" });
-      if (!isPasswordValid(val)) return this.createError({ message: PASSWORD_REQUIREMENTS_MESSAGE });
-      return true;
-    }),
-    terms: Yup.bool().oneOf([true], "Please agree to continue"),
-    newsletter: Yup.bool()
-    // .oneOf([true], 'Newsletter accept is required'),
-  });
-  const { isModalOpen, onModalClose, onFormSend, onModalSwitch, onTermsClicked, popupError, isActionLoading } = props;
-  return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsxs(Column, { part: 8, children: [
-      /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx("h3", { children: "CREATE YOUR STOKR ACCOUNT" }),
-        /* @__PURE__ */ jsx("p", { children: "Register on STOKR to access digital securities offerings and manage your investments." })
-      ] }) }),
-      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
-        "Already registered?",
-        " ",
-        /* @__PURE__ */ jsx(
-          ModalLink,
-          {
-            to: "#",
-            as: "button",
-            type: "button",
-            "data-cy": "register-modal-switch-to-login",
-            onClick: onModalSwitch,
-            children: "Log in"
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
-      Formik,
-      {
-        initialValues: {
-          email: "",
-          password: "",
-          newsletter: false,
-          terms: false
-        },
-        validationSchema,
-        onSubmit: (values) => {
-          onFormSend(values);
-        },
-        children: ({ values, errors, touched, handleChange, handleBlur, setFieldValue, setFieldTouched }) => {
-          if (popupError.popup === "register" && !popupErrorWithValue.value) {
-            let value = popupError.field === "email" ? values.email : values.password;
-            setpopupErrorWithValue({ ...popupErrorWithValue, value });
-          }
-          if (email && values.email !== email) {
-            setFieldValue("email", email);
-          }
-          const handleChangeCustom = (e, withTouch = false) => {
-            const { clearPopupError, setPopupError } = props;
-            const field = e.target;
-            if (field.value === popupErrorWithValue.value || field.value.length > 128) {
-              setPopupError("register", popupErrorWithValue.message, field.name);
-            } else {
-              clearPopupError();
-            }
-            if (withTouch) {
-              setFieldValue(field.name, field.value, true);
-              setFieldTouched(field.name, true, false);
-            } else {
-              handleChange(e);
-            }
-          };
-          const submitDisabled = !values.email || !!errors.email || !!errors.terms || !isPasswordValid(values.password) || isActionLoading === "signUp" || popupError.popup === "register";
-          return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "sign-up-email",
-                  name: "email",
-                  type: "email",
-                  label: "Your email",
-                  value: values.email,
-                  onChange: handleChangeCustom,
-                  onBlur: handleBlur,
-                  error: !!errors.email,
-                  touched: !!touched.email,
-                  readOnly: email ? true : false,
-                  autoComplete: "email",
-                  "data-cy": "register-modal-email-input"
-                }
-              ),
-              /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
-            ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
-              /* @__PURE__ */ jsx(
-                stdin_default$2,
-                {
-                  id: "sign-up-password",
-                  name: "password",
-                  type: "password",
-                  label: "Password",
-                  value: values.password,
-                  onChange: (e) => handleChangeCustom(e, true),
-                  onBlur: handleBlur,
-                  error: !!errors.password,
-                  touched: !!touched.password,
-                  info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
-                  autoComplete: "new-password",
-                  "data-cy": "register-modal-password-input",
-                  showStrength: true
-                }
-              ),
-              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
-            ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true }),
-            /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: [
-              /* @__PURE__ */ jsxs(FormField, { children: [
-                /* @__PURE__ */ jsx(
-                  stdin_default$3,
-                  {
-                    id: newsletterCheckbox.title,
-                    name: "newsletter",
-                    text: parse(newsletterCheckbox.agreementText),
-                    value: "yes",
-                    checked: !!values.newsletter,
-                    onChange: handleChange,
-                    onBlur: handleBlur,
-                    error: !!errors.newsletter,
-                    touched: !!touched.newsletter,
-                    "data-cy": "register-modal-newsletter-checkbox"
-                  }
-                ),
-                /* @__PURE__ */ jsx(FormError, { show: errors.newsletter && touched.newsletter, children: errors.newsletter })
-              ] }),
-              /* @__PURE__ */ jsxs(FormField, { children: [
-                privacyTermsCheckbox && /* @__PURE__ */ jsx(
-                  stdin_default$3,
-                  {
-                    id: privacyTermsCheckbox.title,
-                    name: "terms",
-                    "data-cy": "register-modal-terms-checkbox",
-                    text: parse(privacyTermsCheckbox.agreementText, {
-                      replace: (domNode) => {
-                        if (domNode.type === "tag" && domNode.name === "u") {
-                          return /* @__PURE__ */ jsx(
-                            TermsStyled,
-                            {
-                              "data-cy": "register-modal-privacy-terms-link",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                onTermsClicked(privacyTermsCheckbox);
-                              },
-                              children: domNode.children[0]?.data
-                            }
-                          );
-                        }
-                      }
-                    }),
-                    value: "yes",
-                    checked: !!values.terms,
-                    onChange: handleChange,
-                    onBlur: handleBlur,
-                    error: errors.terms && touched.terms,
-                    touched: !!touched.terms,
-                    marginTop: true
-                  }
-                ),
-                /* @__PURE__ */ jsx(FormError, { show: errors.terms && touched.terms, withMarginLeft: true, children: errors.terms })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              stdin_default$4,
-              {
-                type: "submit",
-                fluid: true,
-                disabled: submitDisabled,
-                id: "signup-button",
-                "data-cy": "register-modal-submit",
-                children: isActionLoading === "signUp" ? "Creating account" : "Create account"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "register", children: popupError.message }) })
-          ] });
-        }
-      }
-    ) }) })
-  ] }) });
-};
-RegisterModal.propTypes = {
-  // isModalOpen: PropTypes.bool.isRequired,
-  // onModalClose: PropTypes.func.isRequired,
-  // onFormSend: PropTypes.func.isRequired,
-  // onModalSwitch: PropTypes.func.isRequired,
-};
-var stdin_default = RegisterModal;
-export {
-  RegisterModal,
-  stdin_default as default
-};

package/dist/components/ResetConfirmModal/ResetConfirmModal.js

@@ -1,40 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import { RED_BASE_HEX } from "../../constants/style.js";
-import { Modal } from "../Modal/Modal.js";
-import stdin_default$1 from "../Button/Button.styles.js";
-import { Text } from "../Text/Text.styles.js";
-import { Row, Column } from "../Grid/Grid.styles.js";
-import { ContainerWithLine } from "./ResetConfirmModal.styles.js";
-import { ModalInner } from "../Modal/Modal.styles.js";
-const RedBar = styled.div`
-  background: ${RED_BASE_HEX};
-  bottom: 0;
-  height: 30%;
-  position: absolute;
-  right: 0;
-  width: 50%;
-`;
-const ResetConfirmModal = ({ isModalOpen, onModalClose, onModalSwitch }) => /* @__PURE__ */ jsxs(Modal, { isOpen: isModalOpen, onClose: onModalClose, closeIsFullHeight: true, children: [
-  /* @__PURE__ */ jsx(Row, { isConfirmModal: true, children: /* @__PURE__ */ jsx(Column, { relative: true, part: 10, isConfirmModal: true, children: /* @__PURE__ */ jsx(ModalInner, { isConfirmModal: true, children: /* @__PURE__ */ jsxs(ContainerWithLine, { children: [
-    /* @__PURE__ */ jsxs(Text, { withBorder: true, isConfirm: true, children: [
-      /* @__PURE__ */ jsx("h3", { children: "PASSWORD UPDATED" }),
-      /* @__PURE__ */ jsx("p", { children: "Your password has been updated. You may now sign in with your new credentials." })
-    ] }),
-    /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx(stdin_default$1, { "data-cy": "reset-confirm-modal-login", onClick: onModalSwitch, children: "Log in" })
-  ] }) }) }) }),
-  /* @__PURE__ */ jsx(RedBar, {})
-] });
-ResetConfirmModal.propTypes = {
-  isModalOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-var stdin_default = ResetConfirmModal;
-export {
-  ResetConfirmModal,
-  stdin_default as default
-};

package/dist/components/ResetConfirmModal/ResetConfirmModal.styles.js

@@ -1,41 +0,0 @@
-import styled from "styled-components";
-import { Text } from "../Text/Text.styles.js";
-import { colors } from "../../styles/colors.js";
-const ContainerWithLine = styled(Text)`
-  position: relative;
-  padding-left: 48px;
-
-  &::before {
-    content: '';
-    width: 8px;
-    height: 72px;
-    background: ${colors.blue};
-    position: absolute;
-    left: 0;
-    top: 6px;
-    @media screen and (max-width: 767px) {
-      top: 33px;
-    }
-  }
-
-  // &::after {
-  //   content: '';
-  //   width: 1px;
-  //   height: 800px;
-  //   background: #ededed;
-  //   position: absolute;
-  //   left: 0;
-  //   top: -200px;
-
-  //   @media screen and (max-width: 767px) {
-  //     height: 200vh;
-  //   }
-  // }
-
-  @media screen and (max-width: 767px) {
-    top: -20vh;
-  }
-`;
-export {
-  ContainerWithLine
-};

package/dist/components/ResetPasswordModal/ResetPasswordModal.js

@@ -1,145 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import PropTypes from "prop-types";
-import { Formik } from "formik";
-import * as Yup from "yup";
-import { Modal } from "../Modal/Modal.js";
-import stdin_default$1 from "../Form/Form.js";
-import { Text } from "../Text/Text.styles.js";
-import stdin_default$2 from "../Input/InputPassword.js";
-import stdin_default$3 from "../Button/Button.styles.js";
-import { Row, Column } from "../Grid/Grid.styles.js";
-import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import { isPasswordValid, PASSWORD_REQUIREMENTS_MESSAGE } from "../../utils/password-validation.js";
-import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
-import { FormField, FormError } from "../Form/Form.styles.js";
-const ResetPasswordModal = ({
-  isModalOpen,
-  onModalClose,
-  onFormSend,
-  onModalSwitch,
-  popupError,
-  isActionLoading,
-  onLoad
-}) => {
-  const initialValues = {
-    password: "",
-    confirmPassword: ""
-  };
-  const validationSchema = Yup.object().shape({
-    password: Yup.string().test("password-full", function(val) {
-      if (!val) return this.createError({ message: "Oops, this can’t be blank" });
-      if (!isPasswordValid(val)) return this.createError({ message: PASSWORD_REQUIREMENTS_MESSAGE });
-      return true;
-    }),
-    confirmPassword: Yup.string().required("Oops, this can‘t be blank")
-  });
-  useEffect(() => {
-    onLoad?.();
-  }, []);
-  return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsxs(Column, { part: 8, children: [
-      /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx("h3", { children: "SET A NEW PASSWORD" }),
-        /* @__PURE__ */ jsx("p", { children: "Enter and confirm your new password." })
-      ] }) }),
-      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
-        "Remember your password? ",
-        /* @__PURE__ */ jsx(ModalLink, { "data-cy": "reset-password-modal-switch-to-login", to: "#", onClick: onModalSwitch, children: "Log in" })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
-      Formik,
-      {
-        initialValues,
-        validationSchema,
-        onSubmit: (values) => {
-          onFormSend(values);
-        },
-        children: ({ values, errors, touched, handleBlur, setFieldValue, setFieldTouched }) => {
-          const onChangeWithTouch = (e) => {
-            const field = e.target;
-            setFieldValue(field.name, field.value, true);
-            setFieldTouched(field.name, true, false);
-          };
-          const submitDisabled = !isPasswordValid(values.password) || values.password !== values.confirmPassword || isActionLoading === "resetPassword";
-          return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
-            /* @__PURE__ */ jsx("br", {}),
-            /* @__PURE__ */ jsx("br", {}),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
-              /* @__PURE__ */ jsx(
-                stdin_default$2,
-                {
-                  id: "reset-password",
-                  name: "password",
-                  type: "password",
-                  label: "Password",
-                  value: values.password,
-                  onChange: onChangeWithTouch,
-                  onBlur: handleBlur,
-                  error: !!errors.password,
-                  touched: !!touched.password,
-                  info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
-                  autoComplete: "new-password",
-                  "data-cy": "reset-password-modal-password-input",
-                  showStrength: true
-                }
-              ),
-              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
-            ] }) }),
-            /* @__PURE__ */ jsx("br", {}),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
-              /* @__PURE__ */ jsx(
-                stdin_default$2,
-                {
-                  id: "confirm-reset-password",
-                  name: "confirmPassword",
-                  type: "password",
-                  label: "Confirm password",
-                  value: values.confirmPassword,
-                  onChange: onChangeWithTouch,
-                  onBlur: handleBlur,
-                  error: !!errors.confirmPassword,
-                  touched: !!touched.confirmPassword,
-                  autoComplete: "new-password",
-                  "data-cy": "reset-password-modal-confirm-password-input"
-                }
-              ),
-              /* @__PURE__ */ jsx(FormError, { show: errors.confirmPassword && touched.confirmPassword, children: errors.confirmPassword })
-            ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              stdin_default$3,
-              {
-                type: "submit",
-                id: "reset-password-submit-btn",
-                "data-cy": "reset-password-modal-submit",
-                fluid: true,
-                disabled: submitDisabled,
-                children: isActionLoading === "resetPassword" ? "Resetting" : "Reset"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              FormError,
-              {
-                show: touched.password && touched.confirmPassword && values.password !== values.confirmPassword,
-                children: "The passwords must match"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resetPassword", children: popupError.message }) })
-          ] });
-        }
-      }
-    ) }) })
-  ] }) });
-};
-ResetPasswordModal.propTypes = {
-  isModalOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onFormSend: PropTypes.func.isRequired,
-  onModalSwitch: PropTypes.func.isRequired
-};
-var stdin_default = ResetPasswordModal;
-export {
-  ResetPasswordModal,
-  stdin_default as default
-};

package/dist/components/StepsProgress/StepIndicator.js

@@ -1,40 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default from "react";
-import PropTypes from "prop-types";
-import { StepIndicatorContainer, StepItem, StepCircle, StepLabel, StepConnector } from "./StepIndicator.styles.js";
-import SvgCheckIcon from "../../static/images/check-icon.svg.js";
-const StepIndicator = ({ steps, currentStep, onStepClick = null, showLabels = true, marginBottom = "32px" }) => {
-  return /* @__PURE__ */ jsx(StepIndicatorContainer, { marginBottom, children: steps.map((step, index) => {
-    const isCompleted = index < currentStep;
-    const isActive = index === currentStep;
-    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        StepItem,
-        {
-          onClick: () => onStepClick && onStepClick(index),
-          style: { cursor: onStepClick ? "pointer" : "default" },
-          children: [
-            /* @__PURE__ */ jsx(StepCircle, { isCompleted, isActive, children: isCompleted ? /* @__PURE__ */ jsx(SvgCheckIcon, { width: 14, height: 11 }) : index + 1 }),
-            showLabels && /* @__PURE__ */ jsx(StepLabel, { children: step.label })
-          ]
-        }
-      ),
-      index < steps.length - 1 && /* @__PURE__ */ jsx(StepConnector, { isCompleted })
-    ] }, step.id);
-  }) });
-};
-StepIndicator.propTypes = {
-  steps: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired
-    })
-  ).isRequired,
-  currentStep: PropTypes.number.isRequired,
-  onStepClick: PropTypes.func,
-  showLabels: PropTypes.bool,
-  marginBottom: PropTypes.string
-};
-export {
-  StepIndicator
-};

package/dist/components/StepsProgress/StepIndicator.styles.js

@@ -1,69 +0,0 @@
-import styled, { css } from "styled-components";
-import { colors } from "../../styles/colors.js";
-const StepIndicatorContainer = styled.div.withConfig({
-  shouldForwardProp: (props) => !["marginBottom"].includes(props)
-})`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: ${(props) => props.marginBottom || "32px"};
-`;
-const StepItem = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`;
-const StepCircle = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isCompleted", "isActive"].includes(props)
-})`
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 600;
-  transition: all 0.2s ease;
-
-  ${(props) => props.isCompleted && css`
-      background-color: ${colors.progressGreen};
-      color: ${colors.white};
-
-      svg path {
-        stroke: ${colors.white};
-      }
-    `}
-
-  ${(props) => props.isActive && !props.isCompleted && css`
-      background-color: ${colors.black};
-      color: ${colors.white};
-    `}
-
-  ${(props) => !props.isActive && !props.isCompleted && css`
-      background-color: ${colors.grey};
-      color: ${colors.black};
-    `}
-`;
-const StepLabel = styled.span`
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0.6px;
-  word-wrap: break-word;
-`;
-const StepConnector = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isCompleted"].includes(props)
-})`
-  flex: 1;
-  height: 2px;
-  max-width: 80px;
-  background-color: ${(props) => props.isCompleted ? colors.progressGreen : colors.grey};
-`;
-export {
-  StepCircle,
-  StepConnector,
-  StepIndicatorContainer,
-  StepItem,
-  StepLabel
-};