@stokr/components-library 3.0.70 → 3.0.72-beta.1

package/dist/components/2FA/Connect2FA.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { sizes } from "../../styles/rwd.js";
 import { Text } from "../Text/Text.styles.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$2 from "../Button/Button.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { ModalWrapper, ModalInner } from "../Modal/Modal.styles.js";
 import { QRCodeSVG } from "qrcode.react";
@@ -38,7 +38,7 @@ const Connect2FA = (props) => {
         )
       ] }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, center: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-        Button,
+        stdin_default$2,
         {
           minWidth: "150px",
           id: "enable-2fa-connect-continue-btn",

package/dist/components/2FA/EnterCode.js

@@ -4,7 +4,7 @@ import { Formik } from "formik";
 import { Modal } from "../Modal/Modal.js";
 import stdin_default$1 from "../Form/Form.js";
 import { Text } from "../Text/Text.styles.js";
-import { Button } from "../Button/Button.styles.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 stdin_default$2 from "../Input/OtpInput.js";
@@ -50,7 +50,7 @@ const EnterCode = (props) => {
               /* @__PURE__ */ jsx(FormError, { show: errors.otpInput && touched.otpInput, children: errors.otpInput })
             ] }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              Button,
+              stdin_default$3,
               {
                 type: "submit",
                 id: "2fa-enter-code-btn",

package/dist/components/2FA/InstallAuthApp.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Text } from "../Text/Text.styles.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$1 from "../Button/Button.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import { ModalWrapper, ModalInner } from "../Modal/Modal.styles.js";
 import GoogleAuthLogo from "../../static/images/google_auth.png.js";
@@ -19,7 +19,7 @@ const InstallAuthApp = (props) => {
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Text, { small: true, children: /* @__PURE__ */ jsx("p", { children: "Click 'Continue' if you already have an app installed." }) }) }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, center: true, children: /* @__PURE__ */ jsxs(
-        Button,
+        stdin_default$1,
         {
           minWidth: "150px",
           id: "enable-2fa-download-app-btn",
@@ -49,7 +49,7 @@ const InstallAuthApp = (props) => {
         }
       ) }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingTop: true, center: true, children: /* @__PURE__ */ jsx(
-        Button,
+        stdin_default$1,
         {
           minWidth: "150px",
           id: "enable-2fa-install-app-continue-btn",

package/dist/components/2FA/Sucess2FA.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import PropTypes from "prop-types";
 import { Text } from "../Text/Text.styles.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$1 from "../Button/Button.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import { ModalWrapper, ModalInner } from "../Modal/Modal.styles.js";
@@ -32,7 +32,7 @@ const Sucess2FA = ({
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: textRight }) }) }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-        Button,
+        stdin_default$1,
         {
           id: continueButtonId,
           minWidth: "240px",

package/dist/components/2FA/disable-2fa-flow.js

@@ -5,7 +5,7 @@ import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js
 import { Modal } from "../Modal/Modal.js";
 import { ModalInner, ModalWrapper } from "../Modal/Modal.styles.js";
 import { Text } from "../Text/Text.styles.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$2 from "../Button/Button.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import stdin_default$1 from "./Sucess2FA.js";
 import fetchData from "../../api/fetchData.js";
@@ -80,7 +80,7 @@ const Disable2FA = ({ showFlow, setShowFlow, onSuccess, onRequiresRecentLoginErr
         /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
           /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: "Do you want to remove your log in 2FA authentication?" }) }) }),
           /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-            Button,
+            stdin_default$2,
             {
               secondary: true,
               style: { marginRight: 20 },
@@ -91,7 +91,7 @@ const Disable2FA = ({ showFlow, setShowFlow, onSuccess, onRequiresRecentLoginErr
               children: "NO"
             }
           ) }),
-          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingTop: true, children: /* @__PURE__ */ jsx(Button, { id: "disable-2fa-confirm-yes-btn", "data-cy": "disable-2fa-confirm-yes", onClick: handleDisableClick, fluid: true, children: "Yes" }) })
+          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingTop: true, children: /* @__PURE__ */ jsx(stdin_default$2, { id: "disable-2fa-confirm-yes-btn", "data-cy": "disable-2fa-confirm-yes", onClick: handleDisableClick, fluid: true, children: "Yes" }) })
         ] }) })
       ] }) }) })
     }

package/dist/components/BlogPost/BlogPost.styles.js

@@ -1,6 +1,6 @@
 import rwd from "../../styles/rwd.js";
 import theme from "../../styles/theme.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default from "../Button/Button.styles.js";
 import styled, { css } from "styled-components";
 import { Breakdown } from "../breakdown/Breakdown.js";
 const Content = styled.div.withConfig({
@@ -190,7 +190,7 @@ const Category = styled(Breakdown).withConfig({
       }
     `}
 `;
-const StyledButton = styled(Button)`
+const StyledButton = styled(stdin_default)`
   opacity: 0;
   transition: opacity 0.3s ease;
 

package/dist/components/Button/Button.styles.js

@@ -41,6 +41,10 @@ const Button = styled.button.withConfig({
   margin: 0;
   outline: 0;
   vertical-align: baseline;
+  /* Rendered as an <a> via the "as" prop should still look like a button —
+     don't rely on the app's global anchor reset (which only strips the
+     underline on :hover, not by default). */
+  text-decoration: none;
   text-shadow: none;
   user-select: none;
   cursor: pointer;
@@ -200,7 +204,8 @@ Button.propTypes = {
   outline: PropTypes.bool,
   outlineBlack: PropTypes.bool
 };
+var stdin_default = Button;
 export {
   Button,
-  Button as default
+  stdin_default as default
 };

package/dist/components/Button/GlareButton.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import { Button } from "./Button.styles.js";
+import stdin_default from "./Button.styles.js";
 import { colors } from "../../styles/colors.js";
 import { useInView } from "react-intersection-observer";
 import { useState, useRef, useId, useEffect } from "react";
@@ -37,7 +37,7 @@ const ButtonWrapper = styled.div.withConfig({
       width: 100%;
     `}
 `;
-const StyledButton = styled(Button).withConfig({
+const StyledButton = styled(stdin_default).withConfig({
   shouldForwardProp: (props) => !["beauty", "backgroundColor", "textColor", "borderColor", "fullWidth", "disabledColor"].includes(props)
 })`
   position: relative;

package/dist/components/ButtonContainer/ButtonContainer.styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default from "../Button/Button.styles.js";
 const ButtonContainer = styled.div.withConfig({
   shouldForwardProp: (props) => !["flexColumn"].includes(props)
 })`
@@ -10,7 +10,7 @@ const ButtonContainer = styled.div.withConfig({
     flex-direction:column;
   `}
 
-  ${Button} {
+  ${stdin_default} {
     min-width: 150px;
     max-width: 300px;
   }
@@ -18,7 +18,7 @@ const ButtonContainer = styled.div.withConfig({
   @media screen and (max-width: 767px) {
     flex-direction: column;
 
-    ${Button} {
+    ${stdin_default} {
       min-width: 150px;
       max-width: 400px;
     }
@@ -31,7 +31,7 @@ const ButtonGridContainer = styled.div`
   justify-items: center;
   align-items: center;
 
-  ${Button} {
+  ${stdin_default} {
     min-width: 150px;
     max-width: 300px;
     width: 100%;
@@ -40,7 +40,7 @@ const ButtonGridContainer = styled.div`
   @media screen and (max-width: 767px) {
     grid-template-columns: repeat(1, 1fr);
 
-    ${Button} {
+    ${stdin_default} {
       max-width: 400px;
     }
   }

package/dist/components/Copy/Copy.js

@@ -0,0 +1,16 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { resolveCopy } from "./copySource.js";
+const Copy = ({ id, fallback }) => {
+  const value = resolveCopy(id);
+  return /* @__PURE__ */ jsx(Fragment, { children: value ?? fallback ?? id });
+};
+Copy.propTypes = {
+  id: PropTypes.string.isRequired,
+  /** Shown when the copy source has no value for this id (or none is registered). */
+  fallback: PropTypes.string
+};
+export {
+  Copy
+};

package/dist/components/Copy/copySource.js

@@ -0,0 +1,16 @@
+import { flatten } from "./flatten.js";
+let source = {};
+function setCopySource(copy) {
+  source = copy ? flatten(copy) : {};
+}
+function resolveCopy(id) {
+  return source[id];
+}
+function getCopySource() {
+  return source;
+}
+export {
+  getCopySource,
+  resolveCopy,
+  setCopySource
+};

package/dist/components/Copy/flatten.js

@@ -0,0 +1,31 @@
+function flatten(obj, prefix = "", out = {}) {
+  if (obj == null) return out;
+  if (typeof obj === "string") {
+    out[prefix] = obj;
+    return out;
+  }
+  if (typeof obj === "number" || typeof obj === "boolean") {
+    out[prefix] = String(obj);
+    return out;
+  }
+  if (Array.isArray(obj)) {
+    obj.forEach((item, i) => flatten(item, prefix ? `${prefix}.${i}` : String(i), out));
+    return out;
+  }
+  if (typeof obj === "object") {
+    for (const [key, value] of Object.entries(obj)) {
+      flatten(value, prefix ? `${prefix}.${key}` : key, out);
+    }
+    return out;
+  }
+  return out;
+}
+const NON_COPY_LEAVES = /* @__PURE__ */ new Set(["id", "buttonId", "link", "href", "to", "order", "image", "eventType", "authorId"]);
+function isCopyKey(key) {
+  const last = key.split(".").pop() ?? key;
+  return !NON_COPY_LEAVES.has(last);
+}
+export {
+  flatten,
+  isCopyKey
+};

package/dist/components/CryptoAddressDetails/CryptoAddressDetails.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import "react";
 import PropTypes from "prop-types";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default from "../Button/Button.styles.js";
 import { Container, Row, Column, Avatar, AvatarImg, Name } from "./CryptoAddressDetails.styles.js";
 const CryptoAddressDetails = ({ data }) => /* @__PURE__ */ jsxs(Container, { children: [
   /* @__PURE__ */ jsxs(Row, { head: true, children: [
@@ -15,7 +15,7 @@ const CryptoAddressDetails = ({ data }) => /* @__PURE__ */ jsxs(Container, { chi
       /* @__PURE__ */ jsx(Name, { children: datum.name })
     ] }),
     /* @__PURE__ */ jsx(Column, { balance: true, balanceText: true, children: datum.balance }),
-    /* @__PURE__ */ jsx(Column, { transfer: true, children: /* @__PURE__ */ jsx(Button, { outline: true, fluid: true, onClick: datum.transferClick, children: "Transfer" }) })
+    /* @__PURE__ */ jsx(Column, { transfer: true, children: /* @__PURE__ */ jsx(stdin_default, { outline: true, fluid: true, onClick: datum.transferClick, children: "Transfer" }) })
   ] }, `${datum.id}-${index.toString()}`))
 ] });
 CryptoAddressDetails.propTypes = {

package/dist/components/DoubleButton/DoubleButton.styles.js

@@ -1,12 +1,12 @@
 import styled from "styled-components";
 import rwd from "../../styles/rwd.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default from "../Button/Button.styles.js";
 const DoubleButtons = styled.div.withConfig({
   shouldForwardProp: (props) => !["column"].includes(props)
 })`
   margin: -12px;
 
-  ${Button} {
+  ${stdin_default} {
     width: 100%;
     margin: 12px;
   }
@@ -16,7 +16,7 @@ const DoubleButtons = styled.div.withConfig({
        flex-direction: ${({ column }) => column ? "column" : "row"};
 
     
-    ${Button} {
+    ${stdin_default} {
       width: auto;
       flex: 1;
     }

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -7,7 +7,7 @@ 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 { Button } from "../Button/Button.styles.js";
+import stdin_default$2 from "../Button/Button.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { emailRegex } from "../../constants/globalVariables.js";
@@ -86,7 +86,7 @@ class ForgotPasswordModal extends PureComponent {
                 /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
               ] }) }),
               /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-                Button,
+                stdin_default$2,
                 {
                   type: "submit",
                   id: "forgot-password-submit-btn",

package/dist/components/Header/Header.js

@@ -2,15 +2,15 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useMemo, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import stdin_default$1 from "../SmartLink/SmartLink.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$3 from "../Button/Button.styles.js";
 import stdin_default$2 from "../SvgIcons/LogoSvg.js";
 import { MenuNav } from "../MenuNav/MenuNav.styles.js";
-import stdin_default$4 from "../MainMenu/MainMenu.js";
+import stdin_default$5 from "../MainMenu/MainMenu.js";
 import { StepsProgressSignup, StepsProgressHeader } from "../StepsProgress/StepsProgress.js";
 import { NotificationCounter } from "../NotificationCounter/NotificationCounter.styles.js";
 import avatarPlaceholder from "../../static/images/avatar-placeholder.png.js";
 import { StyledHeader, SidebarToggle, HamburgerIcon, HeaderInner, MainNavWrap, Logo, HeaderMainNav, ProgressWrap, QuickNavWrap, MobileMenuToggler, HeaderQuickNav, LoginButton, UserAccount, UserButton, SignupButton, MobileMenu, MobileMenuPart, MobileMenuItem, MobileMenuLink, CTAContainer, SocialLinksContainer, UserAvatar, MobileMenuWrapper, StyledSubMenu } from "./Header.styles.js";
-import stdin_default$3 from "../MainMenu/DynamicMainMenu.js";
+import stdin_default$4 from "../MainMenu/DynamicMainMenu.js";
 import { SocialLink, ArrowDown } from "../Footer/FooterMenu.styles.js";
 import { Collapse } from "react-collapse";
 import { usePrevious, useMobileView } from "../../utils/customHooks.js";
@@ -235,7 +235,7 @@ function HeaderView({
           }
         ),
         isMobile && checkTodoStatus(user) > 0 && !signupFlow && /* @__PURE__ */ jsx(NotificationCounter, { mobile: true, isActive: currentActiveMenu === "main", children: checkTodoStatus(user) }),
-        /* @__PURE__ */ jsx(HeaderQuickNav, { isUserLogged: hasLoggedInSession(user), children: /* @__PURE__ */ jsx(Fragment, { children: hasLoggedInSession(user) ? /* @__PURE__ */ jsx(Fragment, { children: signupFlow ? /* @__PURE__ */ jsx(Button, { onClick: logoutUser, children: "Log Out" }) : /* @__PURE__ */ jsxs(FlexContainer, { itemsCenter: true, children: [
+        /* @__PURE__ */ jsx(HeaderQuickNav, { isUserLogged: hasLoggedInSession(user), children: /* @__PURE__ */ jsx(Fragment, { children: hasLoggedInSession(user) ? /* @__PURE__ */ jsx(Fragment, { children: signupFlow ? /* @__PURE__ */ jsx(stdin_default$3, { onClick: logoutUser, children: "Log Out" }) : /* @__PURE__ */ jsxs(FlexContainer, { itemsCenter: true, children: [
           /* @__PURE__ */ jsx(Breakdown, { children: /* @__PURE__ */ jsx(
             LoginButton,
             {
@@ -350,11 +350,11 @@ function HeaderView({
               }
             ) })
           ] }) }) }) }),
-          /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, noPaddingTop: !signupFlow, borderTop: signupFlow, isLast: true, children: /* @__PURE__ */ jsx(Button, { minWidth: "160px", secondary: true, onClick: () => logoutUser(), children: "log out" }) })
+          /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, noPaddingTop: !signupFlow, borderTop: signupFlow, isLast: true, children: /* @__PURE__ */ jsx(stdin_default$3, { minWidth: "160px", secondary: true, onClick: () => logoutUser(), children: "log out" }) })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           withoutLoginSignupButton ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Breakdown, { alignCenter: true, children: /* @__PURE__ */ jsx(
-              Button,
+              stdin_default$3,
               {
                 onClick: () => {
                   track("header_link_clicked", { link: "login" });
@@ -393,10 +393,10 @@ function HeaderView({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx(stdin_default$3, { isMenuActive: currentActiveMenu === "products", options: productMenuItems }),
-      /* @__PURE__ */ jsx(stdin_default$3, { isMenuActive: currentActiveMenu === "media", options: mediaMenuItems }),
+      /* @__PURE__ */ jsx(stdin_default$4, { isMenuActive: currentActiveMenu === "products", options: productMenuItems }),
+      /* @__PURE__ */ jsx(stdin_default$4, { isMenuActive: currentActiveMenu === "media", options: mediaMenuItems }),
       /* @__PURE__ */ jsx(
-        stdin_default$4,
+        stdin_default$5,
         {
           isMenuActive: currentActiveMenu === "main",
           logoutUser,

package/dist/components/Header/Header.styles.js

@@ -3,7 +3,7 @@ import stdin_default from "../SmartLink/SmartLink.js";
 import rwd, { rwdMax } from "../../styles/rwd.js";
 import { colors } from "../../styles/colors.js";
 import spacing from "../../styles/spacing.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$1 from "../Button/Button.styles.js";
 import { WHITE_HEX, BLUE_BASE_RELEASED_HEX, GRAY_BASE_HEX } from "../../constants/style.js";
 import { SocialLink } from "../Footer/FooterMenu.styles.js";
 import { iconsMap, Icon } from "../Icon/Icon.style.js";
@@ -472,7 +472,7 @@ const LoginButton = styled.span`
     display: block;
   }
 `;
-const SignupButton = styled(Button).withConfig({
+const SignupButton = styled(stdin_default$1).withConfig({
   shouldForwardProp: (props) => !["isMobile"].includes(props)
 })`
   padding-right: 32px !important;

package/dist/components/LoginModal/LoginModal.js

@@ -9,7 +9,7 @@ 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 { Button } from "../Button/Button.styles.js";
+import stdin_default$3 from "../Button/Button.styles.js";
 import { TextLink } from "../TextLink/TextLink.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
@@ -115,7 +115,7 @@ const LoginModal = (props) => {
               /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
             ] }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              Button,
+              stdin_default$3,
               {
                 type: "submit",
                 id: "login-submit-btn",

package/dist/components/Lottie/LottieAnimation.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useCallback, useEffect } from "react";
+import PropTypes from "prop-types";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { AnimationWrapper } from "./LottieAnimation.styles.js";
+import progressAnimation from "../../static/animations/progress.lottie.js";
+import uploadAnimation from "../../static/animations/upload.lottie.js";
+import successAnimation from "../../static/animations/checked.lottie.js";
+const LOTTIE_ANIMATIONS = {
+  progress: { src: progressAnimation, segment: null, loop: false },
+  upload: { src: uploadAnimation, segment: null, loop: false },
+  success: { src: successAnimation, segment: [0, 50], loop: false }
+};
+const LottieAnimation = ({
+  variant = "progress",
+  src,
+  loop,
+  autoplay = true,
+  segment,
+  speed = 1,
+  size = 80,
+  style,
+  className
+}) => {
+  const config = LOTTIE_ANIMATIONS[variant] || LOTTIE_ANIMATIONS.progress;
+  const animationSrc = src || config.src;
+  const animationLoop = loop !== void 0 ? loop : config.loop;
+  const animationSegment = segment || config.segment;
+  const dotRef = useRef(null);
+  const timersRef = useRef([]);
+  const clearTimers = () => {
+    timersRef.current.forEach(clearTimeout);
+    timersRef.current = [];
+  };
+  const refCallback = useCallback(
+    (dot) => {
+      clearTimers();
+      dotRef.current = dot || null;
+      if (!dot || animationLoop || !animationSegment) return;
+      const [startFrame, endFrame] = animationSegment;
+      const armHold = () => {
+        const d = dotRef.current;
+        if (!d) return;
+        if (!d.isLoaded || !d.duration || !d.totalFrames) {
+          timersRef.current.push(setTimeout(armHold, 40));
+          return;
+        }
+        const fps = d.totalFrames / d.duration;
+        const playMs = (endFrame - startFrame) / fps / (speed || 1) * 1e3;
+        timersRef.current.push(
+          setTimeout(() => {
+            const dd = dotRef.current;
+            if (!dd) return;
+            dd.pause();
+            dd.setFrame(endFrame);
+          }, playMs)
+        );
+      };
+      armHold();
+    },
+    [animationSegment, animationLoop, speed]
+  );
+  useEffect(() => clearTimers, []);
+  return /* @__PURE__ */ jsx(AnimationWrapper, { $size: size, style, className, children: /* @__PURE__ */ jsx(
+    DotLottieReact,
+    {
+      dotLottieRefCallback: refCallback,
+      src: animationSrc,
+      loop: animationLoop,
+      autoplay,
+      speed,
+      segment: animationSegment,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
+};
+LottieAnimation.propTypes = {
+  variant: PropTypes.oneOf(Object.keys(LOTTIE_ANIMATIONS)),
+  src: PropTypes.string,
+  loop: PropTypes.bool,
+  autoplay: PropTypes.bool,
+  segment: PropTypes.arrayOf(PropTypes.number),
+  speed: PropTypes.number,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+export {
+  LOTTIE_ANIMATIONS,
+  LottieAnimation
+};

package/dist/components/Lottie/LottieAnimation.styles.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+const AnimationWrapper = styled.div`
+  width: ${(props) => typeof props.$size === "number" ? `${props.$size}px` : props.$size};
+  height: ${(props) => typeof props.$size === "number" ? `${props.$size}px` : props.$size};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+export {
+  AnimationWrapper
+};

package/dist/components/MainMenu/MainMenu.js

@@ -3,7 +3,7 @@ import { PureComponent } from "react";
 import PropTypes from "prop-types";
 import { Collapse } from "react-collapse";
 import { StyledMainMenu, MainMenuContainer, MainMenuOptions, MainMenuOption, ExpandArrow, Settings, SettingsOptions, SettingsOption } from "./MainMenu.styles.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$1 from "../Button/Button.styles.js";
 import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
 import { getConfig } from "../../runtime-config.js";
 import { withRouter } from "../../utils/withRouter.js";
@@ -120,7 +120,7 @@ class MainMenuClass extends PureComponent {
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx(MainMenuOption, { children: /* @__PURE__ */ jsx(Button, { negative: true, onClick: () => logoutUser(), children: "log out" }) })
+                /* @__PURE__ */ jsx(MainMenuOption, { children: /* @__PURE__ */ jsx(stdin_default$1, { negative: true, onClick: () => logoutUser(), children: "log out" }) })
               ] }),
               !isAdmin && /* @__PURE__ */ jsx(Settings, { children: /* @__PURE__ */ jsx(Collapse, { isOpened: isSettingsActive, children: /* @__PURE__ */ jsxs(SettingsOptions, { children: [
                 /* @__PURE__ */ jsx(

package/dist/components/Modal/NewVentureModal/NewVentureModal.js

@@ -9,11 +9,11 @@ import { emailRegex, ProjectTypes } from "../../../constants/globalVariables.js"
 import { Modal } from "../Modal.js";
 import { Row, Column } from "../../Grid/Grid.styles.js";
 import { Text } from "../../Text/Text.styles.js";
-import stdin_default from "../../Form/Form.js";
+import stdin_default$1 from "../../Form/Form.js";
 import { ComponentWrapper } from "../../ComponentWrapper/ComponentWrapper.styles.js";
 import { Input } from "../../Input/Input.js";
-import stdin_default$1 from "../../Checkbox/Checkbox.js";
-import { Button } from "../../Button/Button.styles.js";
+import stdin_default$2 from "../../Checkbox/Checkbox.js";
+import stdin_default from "../../Button/Button.styles.js";
 import { useNewVentureForm } from "../../../hooks/useNewVentureForm.js";
 import { getConfig } from "../../../runtime-config.js";
 import { ModalInner } from "../Modal.styles.js";
@@ -94,7 +94,7 @@ const NewVentureModal = (props) => {
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsx("p", { children: errorMessage ? errorMessage : successMessage }),
           successMessage && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-            Button,
+            stdin_default,
             {
               fluid: true,
               id: "private-investor-success-button",
@@ -148,7 +148,7 @@ const NewVentureModal = (props) => {
               };
               const requiresIdentityFields = !isLoggedIn;
               const submitDisabled = requiresIdentityFields && (!values.email || !!errors.email || !values.name || !!errors.name) || isSubmitting || !oneOfCheckbox || !optionalCheckBoxForm;
-              return /* @__PURE__ */ jsxs(stdin_default, { children: [
+              return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
                 /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
                   !isLoggedIn && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
@@ -187,7 +187,7 @@ const NewVentureModal = (props) => {
                     ] })
                   ] }),
                   /* @__PURE__ */ jsx(FormField, { style: { marginTop: "1rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
-                    stdin_default$1,
+                    stdin_default$2,
                     {
                       id: "createPrivateInvestor",
                       name: "privateInvestorList",
@@ -200,7 +200,7 @@ const NewVentureModal = (props) => {
                     }
                   ) }),
                   /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
-                    stdin_default$1,
+                    stdin_default$2,
                     {
                       id: "subscribeToProject",
                       name: "mailingList",
@@ -213,7 +213,7 @@ const NewVentureModal = (props) => {
                     }
                   ) }),
                   optionalCheckBox && /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
-                    stdin_default$1,
+                    stdin_default$2,
                     {
                       id: "optionalCheckBox",
                       name: "optionalCheckBoxChecked",
@@ -237,7 +237,7 @@ const NewVentureModal = (props) => {
                   ) })
                 ] }) }),
                 /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, center: true, children: /* @__PURE__ */ jsx(
-                  Button,
+                  stdin_default,
                   {
                     type: "submit",
                     id: "private-investor-subscribe-button",

package/dist/components/Modal/PaymentModal.js

@@ -7,7 +7,7 @@ import { Text } from "../Text/Text.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import stdin_default from "../CryptoAddress/CryptoAddress.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$1 from "../Button/Button.styles.js";
 import { getCurrencySymbol } from "../../utils/formatCurrencyValue.js";
 import theme from "../../styles/theme.js";
 import { Icon, iconsMap } from "../Icon/Icon.style.js";
@@ -108,7 +108,7 @@ const PaymentModal = ({
           formatInTimeZone(new Date(secondsRemaining * 1e3), "UTC", "mm:ss"),
           " Waiting for payment..."
         ] }) }) }),
-        !noCTA && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { "data-cy": "payment-modal-cta", onClick: onCTAClick, children: CTAText }) })
+        !noCTA && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(stdin_default$1, { "data-cy": "payment-modal-cta", onClick: onCTAClick, children: CTAText }) })
       ] }),
       /* @__PURE__ */ jsx(Column, { part: 8, children: error ? error : /* @__PURE__ */ jsxs(Text, { children: [
         sendTokenTextRight,