@stokr/components-library 3.0.71 → 3.0.72-beta.2

package/dist/components/Payment/PaymentSuccessCard.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import styled from "styled-components";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { colors } from "../../styles/colors.js";
+import { Button } from "../Button/Button.styles.js";
+import { CodeWrapper, AmountIcon, AmountValue, AmountCurrency } from "./PaymentDisplay.js";
+import { DetailsToggle } from "./DetailsToggle.js";
+import { LottieAnimation } from "../Lottie/LottieAnimation.js";
+import { getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+import externalLinkIcon from "../../static/images/external-link-icon.svg.js";
+const IconCircle = styled.div`
+  flex-shrink: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: #f0fdf4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const TextBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  max-width: 544px;
+`;
+const Title = styled.h2`
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  color: ${colors.black};
+`;
+const Description = styled.p`
+  margin: 0;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  color: ${colors.black};
+`;
+const AmountRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const ActionsRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 21px;
+  width: 100%;
+
+  > * {
+    flex: 1 1 200px;
+  }
+`;
+const ActionButton = styled(Button)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`;
+const ButtonIcon = styled.img`
+  width: 12px;
+  height: 12px;
+`;
+const PaymentSuccessCard = ({
+  title,
+  description,
+  amount,
+  currency,
+  customCurrencyIcon,
+  rows = [],
+  detailsDefaultOpen = false,
+  showDetailsLabel = "show details",
+  hideDetailsLabel = "hide details",
+  primaryActionLabel,
+  primaryActionHref,
+  onPrimaryActionClick,
+  secondaryActionLabel,
+  secondaryActionHref,
+  onSecondaryActionClick,
+  maxWidth,
+  containerStyle,
+  codeWrapperStyle,
+  className,
+  codeWrapperClassName,
+  children
+}) => {
+  const hasAmount = amount !== void 0 && amount !== null && amount !== "";
+  const hasActions = Boolean(primaryActionLabel || secondaryActionLabel);
+  return /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, center: true, style: containerStyle, className, children: /* @__PURE__ */ jsxs(CodeWrapper, { style: codeWrapperStyle, maxWidth, className: codeWrapperClassName, children: [
+    /* @__PURE__ */ jsx(IconCircle, { children: /* @__PURE__ */ jsx(LottieAnimation, { variant: "success", size: 76 }) }),
+    (title || description) && /* @__PURE__ */ jsxs(TextBlock, { children: [
+      title && /* @__PURE__ */ jsx(Title, { children: title }),
+      description && /* @__PURE__ */ jsx(Description, { children: description })
+    ] }),
+    hasAmount && /* @__PURE__ */ jsxs(AmountRow, { children: [
+      currency && /* @__PURE__ */ jsx(AmountIcon, { src: getCurrencyIcon(currency, customCurrencyIcon), alt: currency }),
+      /* @__PURE__ */ jsx(AmountValue, { children: amount }),
+      currency && /* @__PURE__ */ jsx(AmountCurrency, { children: currency })
+    ] }),
+    rows.length > 0 && /* @__PURE__ */ jsx(DetailsToggle, { rows, defaultOpen: detailsDefaultOpen, showLabel: showDetailsLabel, hideLabel: hideDetailsLabel }),
+    hasActions && /* @__PURE__ */ jsxs(ActionsRow, { children: [
+      secondaryActionLabel && /* @__PURE__ */ jsxs(
+        ActionButton,
+        {
+          as: secondaryActionHref ? "a" : "button",
+          href: secondaryActionHref,
+          target: secondaryActionHref ? "_blank" : void 0,
+          rel: secondaryActionHref ? "noopener noreferrer" : void 0,
+          onClick: onSecondaryActionClick,
+          outlineBlack: true,
+          children: [
+            secondaryActionLabel,
+            secondaryActionHref && /* @__PURE__ */ jsx(ButtonIcon, { src: externalLinkIcon, alt: "" })
+          ]
+        }
+      ),
+      primaryActionLabel && /* @__PURE__ */ jsx(ActionButton, { as: primaryActionHref ? "a" : "button", href: primaryActionHref, onClick: onPrimaryActionClick, children: primaryActionLabel })
+    ] }),
+    children
+  ] }) });
+};
+export {
+  PaymentSuccessCard
+};

package/dist/components/RefreshButton/RefreshButton.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";
 import theme from "../../styles/theme.js";
 const IconWrap = styled.div`
   display: block;
@@ -25,7 +25,7 @@ const IconWrap = styled.div`
     transition: color 0.2s;
   }
 `;
-const StyledButton = styled(Button).attrs((props) => ({
+const StyledButton = styled(stdin_default).attrs((props) => ({
   type: props.type || "button"
 }))`
   position: relative;

package/dist/components/RegisterModal/RegisterModal.js

@@ -11,7 +11,7 @@ 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 { Button } from "../Button/Button.styles.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";
@@ -248,7 +248,7 @@ const RegisterModal = (props) => {
               ] })
             ] }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              Button,
+              stdin_default$4,
               {
                 type: "submit",
                 fluid: true,

package/dist/components/RequestDataBox/RequestDataBox.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 { Box, Title, Subtitle } from "./RequestDataBox.styles.js";
 const RequestDataBox = ({ title, subtitle, onClick = () => {
 } }) => /* @__PURE__ */ jsxs(Box, { children: [
@@ -9,7 +9,7 @@ const RequestDataBox = ({ title, subtitle, onClick = () => {
     /* @__PURE__ */ jsx(Title, { children: title }),
     /* @__PURE__ */ jsx(Subtitle, { children: subtitle })
   ] }),
-  /* @__PURE__ */ jsx(Button, { minWidth: "240px", onClick, children: title })
+  /* @__PURE__ */ jsx(stdin_default, { minWidth: "240px", onClick, children: title })
 ] });
 RequestDataBox.propTypes = {
   title: PropTypes.string.isRequired,

package/dist/components/ResetConfirmModal/ResetConfirmModal.js

@@ -4,7 +4,7 @@ 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 { Button } from "../Button/Button.styles.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";
@@ -25,7 +25,7 @@ const ResetConfirmModal = ({ isModalOpen, onModalClose, onModalSwitch }) => /* @
     ] }),
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx(Button, { "data-cy": "reset-confirm-modal-login", onClick: onModalSwitch, children: "Log in" })
+    /* @__PURE__ */ jsx(stdin_default$1, { "data-cy": "reset-confirm-modal-login", onClick: onModalSwitch, children: "Log in" })
   ] }) }) }) }),
   /* @__PURE__ */ jsx(RedBar, {})
 ] });

package/dist/components/ResetPasswordModal/ResetPasswordModal.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 stdin_default$2 from "../Input/InputPassword.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 { isPasswordValid, PASSWORD_REQUIREMENTS_MESSAGE } from "../../utils/password-validation.js";
@@ -108,7 +108,7 @@ const ResetPasswordModal = ({
               /* @__PURE__ */ jsx(FormError, { show: errors.confirmPassword && touched.confirmPassword, children: errors.confirmPassword })
             ] }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              Button,
+              stdin_default$3,
               {
                 type: "submit",
                 id: "reset-password-submit-btn",

package/dist/components/StatusDot/StatusDot.js

@@ -24,10 +24,12 @@ const StatusDot = ({
   children,
   variant,
   color,
+  labelColor,
   backgroundColor,
   surface = "transparent",
   uppercase = false,
   dotSize = 6,
+  pulse = false,
   className,
   style,
   labelStyle,
@@ -36,6 +38,7 @@ const StatusDot = ({
 }) => {
   const preset = variant && VARIANT_PRESETS[variant] ? VARIANT_PRESETS[variant] : null;
   const resolvedColor = color ?? preset?.color ?? colors.black;
+  const resolvedLabelColor = labelColor ?? resolvedColor;
   const isSubtle = surface === "subtle";
   const resolvedBackground = isSubtle && (backgroundColor !== void 0 ? backgroundColor : preset?.backgroundColor);
   return /* @__PURE__ */ jsxs(
@@ -57,8 +60,8 @@ const StatusDot = ({
       } : void 0,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(Dot, { $size: dotSize, $color: resolvedColor }),
-        /* @__PURE__ */ jsx(Label, { $color: resolvedColor, $uppercase: uppercase, style: labelStyle, children })
+        /* @__PURE__ */ jsx(Dot, { $size: dotSize, $color: resolvedColor, $pulse: pulse }),
+        /* @__PURE__ */ jsx(Label, { $color: resolvedLabelColor, $uppercase: uppercase, style: labelStyle, children })
       ]
     }
   );

package/dist/components/StatusDot/StatusDot.styles.js

@@ -1,4 +1,8 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+const pulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+`;
 const Root = styled.div.withConfig({
   shouldForwardProp: (prop) => !["$subtle", "$backgroundColor", "$hasClick"].includes(prop)
 })`
@@ -20,13 +24,14 @@ const Root = styled.div.withConfig({
   `}
 `;
 const Dot = styled.span.withConfig({
-  shouldForwardProp: (prop) => !["$size", "$color"].includes(prop)
+  shouldForwardProp: (prop) => !["$size", "$color", "$pulse"].includes(prop)
 })`
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
   border-radius: 50%;
   background-color: ${(p) => p.$color};
   flex-shrink: 0;
+  animation: ${(p) => p.$pulse ? pulse : "none"} 1.6s ease-in-out infinite;
 `;
 const Label = styled.span.withConfig({
   shouldForwardProp: (prop) => !["$color", "$uppercase"].includes(prop)

package/dist/components/TermsModal/_styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import rwd from "../../styles/rwd.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default from "../Button/Button.styles.js";
 import "../Form/Form.js";
 import { Row } from "../Grid/Grid.styles.js";
 import { Text } from "../Text/Text.styles.js";
@@ -54,7 +54,7 @@ styled.div`
     margin-right: 0;
   `}
 
-  ${Button}${Button}${Button} {
+  ${stdin_default}${stdin_default}${stdin_default} {
     margin-right: 16px;
 
     &:last-child {
@@ -197,7 +197,7 @@ styled.input.attrs((props) => ({
   height: 0.1px;
   z-index: -1;
 `;
-styled(Button).attrs({
+styled(stdin_default).attrs({
   as: "label",
   type: void 0
 })`

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -6,7 +6,7 @@ import { Text } from "../Text/Text.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { FormField, FormError } from "../Form/Form.styles.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$3 from "../Button/Button.styles.js";
 import { Formik } from "formik";
 import * as Yup from "yup";
 import stdin_default$2 from "../Form/Form.js";
@@ -83,7 +83,7 @@ const RenderErrorModal = (props) => {
               /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
             ] }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-              Button,
+              stdin_default$3,
               {
                 type: "submit",
                 id: "verify-email-submit-btn",

package/dist/components/taxId/complete.js

@@ -5,7 +5,7 @@ import { Text } from "../Text/Text.styles.js";
 import { useNavigate } from "react-router-dom";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { TextButton } from "../TextLink/TextLink.styles.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$1 from "../Button/Button.styles.js";
 const noop = () => {
 };
 const RegisterTaxIdComplete = ({ showBackButton, onClick = noop }) => {
@@ -27,7 +27,7 @@ const RegisterTaxIdComplete = ({ showBackButton, onClick = noop }) => {
       /* @__PURE__ */ jsx("p", { children: "You have successfully submitted your Tax ID information. You will be ready to invest once you have completed all required steps on your checklist. Please continue!" })
     ] }) }),
     /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, children: /* @__PURE__ */ jsx(
-      Button,
+      stdin_default$1,
       {
         "data-cy": "tax-id-complete-continue-button",
         onClick: () => {

package/dist/components/taxId/register-taxid.js

@@ -8,16 +8,16 @@ import * as Yup from "yup";
 import { Formik } from "formik";
 import { Input } from "../Input/Input.js";
 import stdin_default$1 from "../Form/Form.js";
-import stdin_default$4 from "../ToDoList/ToDoListTask.js";
+import stdin_default$5 from "../ToDoList/ToDoListTask.js";
 import { ToDoTaskState } from "../ToDoList/ToDoList.js";
 import { iconsMap } from "../Icon/Icon.style.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { TextButton } from "../TextLink/TextLink.styles.js";
-import { Button } from "../Button/Button.styles.js";
-import stdin_default$2 from "../CryptoAddressWrapper/CryptoAddressWrapper.js";
-import stdin_default$3 from "../RefreshButton/RefreshButton.js";
+import stdin_default$2 from "../Button/Button.styles.js";
+import stdin_default$3 from "../CryptoAddressWrapper/CryptoAddressWrapper.js";
+import stdin_default$4 from "../RefreshButton/RefreshButton.js";
 import { SectionTitle } from "../SectionTitle/SectionTitle.styles.js";
-import stdin_default$5 from "../FAQ/FAQ.js";
+import stdin_default$6 from "../FAQ/FAQ.js";
 import deleteRedirectCookieAndNavigate from "../../utils/delete-redirect-cookie-and-navigate.js";
 import { FormField, FormError } from "../Form/Form.styles.js";
 const noop = () => {
@@ -123,7 +123,7 @@ const RegisterTaxId = ({
         ] }) }),
         /* @__PURE__ */ jsx("br", {}),
         !taxId && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
-          Button,
+          stdin_default$2,
           {
             minWidth: "230px",
             type: "submit",
@@ -136,7 +136,7 @@ const RegisterTaxId = ({
       ] });
     } }) }),
     (isUpdatingUser || error) && /* @__PURE__ */ jsx(ComponentWrapper, { borderTop: true, borderBottom: true, center: true, children: /* @__PURE__ */ jsx(
-      stdin_default$2,
+      stdin_default$3,
       {
         noFailedIcon: true,
         relative: true,
@@ -144,9 +144,9 @@ const RegisterTaxId = ({
         failed: error
       }
     ) }),
-    error && /* @__PURE__ */ jsx(ComponentWrapper, { center: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(stdin_default$3, { "data-cy": "tax-id-try-again", onClick: onRefreshClick, children: "TRY AGAIN" }) }),
+    error && /* @__PURE__ */ jsx(ComponentWrapper, { center: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(stdin_default$4, { "data-cy": "tax-id-try-again", onClick: onRefreshClick, children: "TRY AGAIN" }) }),
     taxId && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, children: /* @__PURE__ */ jsx(
-      stdin_default$4,
+      stdin_default$5,
       {
         title: "Tax ID",
         message: "You tax ID is submitted",
@@ -178,7 +178,7 @@ const RegisterTaxId = ({
       }
     ) }),
     /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, children: /* @__PURE__ */ jsx(SectionTitle, { children: "Frequently Asked Questions" }) }),
-    /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsx(stdin_default$5, { scrollRef, items: faqItems, dataCyPrefix: "tax-id-faq" }) })
+    /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsx(stdin_default$6, { scrollRef, items: faqItems, dataCyPrefix: "tax-id-faq" }) })
   ] });
 };
 var stdin_default = RegisterTaxId;

package/dist/context/AuthContext.js

@@ -8,7 +8,7 @@ import { reset, identify } from "../analytics/index.js";
 import { withRouter } from "../utils/withRouter.js";
 import { Text } from "../components/Text/Text.styles.js";
 import { Auth, DEFAULT_TOKEN_EXPIRY_MS } from "./Auth.js";
-import { Button } from "../components/Button/Button.styles.js";
+import stdin_default from "../components/Button/Button.styles.js";
 import { hasLoggedInSession } from "../utils/user-identity.js";
 import { getConfig, getPlatformURL } from "../runtime-config.js";
 import avatarPlaceholder from "../static/images/avatar-placeholder.png.js";
@@ -920,7 +920,7 @@ class AuthProviderClass extends Component {
               variant: "progress",
               title: "Session is about to expire",
               subtitle: "Your session will expire due to inactivity. Click below to stay signed in.",
-              content: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Button, { onClick: this.extendSessionFromInactivityWarning, children: "To continue, press here" }) }),
+              content: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(stdin_default, { onClick: this.extendSessionFromInactivityWarning, children: "To continue, press here" }) }),
               maxWidth: "600px"
             }
           ),
@@ -934,7 +934,7 @@ class AuthProviderClass extends Component {
               content: /* @__PURE__ */ jsxs(Text, { children: [
                 /* @__PURE__ */ jsx("p", { style: { fontSize: 16 }, children: this.state.sessionExpiryPendingReason === "inactivity" || this.state.loggedOutDueToInactivity ? "You have been logged out due to inactivity." : "Your session has expired. Please log in again." }),
                 /* @__PURE__ */ jsx(
-                  Button,
+                  stdin_default,
                   {
                     onClick: () => {
                       this.dismissSessionExpiryModal();

package/dist/index.js

@@ -3,6 +3,9 @@ import { Table } from "./components/AdminDashboard/Table/Table.js";
 import { ReactTable } from "./components/AdminDashboard/Table/ReactTable.js";
 import { ReactTableWrapper } from "./components/AdminDashboard/Table/ReactTableWrapper.js";
 import { AgreementItem } from "./components/AgreementItem/AgreementItem.js";
+import { Copy } from "./components/Copy/Copy.js";
+import { getCopySource, resolveCopy, setCopySource } from "./components/Copy/copySource.js";
+import { flatten, isCopyKey } from "./components/Copy/flatten.js";
 import { BackButton } from "./components/BackButton/BackButton.js";
 import { Background } from "./components/Background/Background.js";
 import { HeroVideoBlock } from "./components/HeroBlock/HeroVideoBlock.js";
@@ -52,6 +55,7 @@ import { PaymentModal } from "./components/Modal/PaymentModal.js";
 import { NewVentureModal } from "./components/Modal/NewVentureModal/NewVentureModal.js";
 import { SideModal } from "./components/Modal/SideModal.js";
 import { ConfirmModal, confirm } from "./components/ConfirmModal/ConfirmModal.js";
+import { LOTTIE_ANIMATIONS, LottieAnimation } from "./components/Lottie/LottieAnimation.js";
 import { MultiProgressBar } from "./components/MultiProgressBar/MultiProgressBar.js";
 import { NotificationCounter } from "./components/NotificationCounter/NotificationCounter.styles.js";
 import { Number, NumberWithContainer } from "./components/Number/Number.js";
@@ -102,6 +106,10 @@ import { Chip } from "./components/Chips/Chip.js";
 import { ChipsWrapper } from "./components/Chips/ChipWrapper.js";
 import { ChecklistCard } from "./components/Checklist/ChecklistCard.js";
 import { CodeWrapper, PaymentDisplay } from "./components/Payment/PaymentDisplay.js";
+import { PaymentPendingCard } from "./components/Payment/PaymentPendingCard.js";
+import { PaymentSuccessCard } from "./components/Payment/PaymentSuccessCard.js";
+import { DetailsToggle } from "./components/Payment/DetailsToggle.js";
+import { DetailRows } from "./components/Payment/DetailRows.js";
 import { TimerComponent } from "./components/Payment/TimerComponent.js";
 import { CurrencyLogo, DetailItem, DetailsSection, PaymentDetailsCard } from "./components/Payment/PaymentDetailsCard.js";
 import { Timeline } from "./components/Timeline/Timeline.js";
@@ -304,6 +312,7 @@ export {
   ContentInnerText,
   ContentSection,
   ContentText,
+  Copy,
   CopyToClipBoardTooltip,
   CopyToClipboard,
   CountrySelect,
@@ -317,7 +326,9 @@ export {
   DESKTOP_MEDIA,
   DatePickerInput,
   DetailItem,
+  DetailRows,
   DetailsSection,
+  DetailsToggle,
   DisplayOnBreakpoint,
   default13 as DocumentBackSvg,
   default14 as DocumentSmallSvg,
@@ -391,6 +402,7 @@ export {
   IoniconsStyles,
   Item,
   Items,
+  LOTTIE_ANIMATIONS,
   LandingPageTitle,
   LandingPageTitleLink,
   LatestUpdate,
@@ -407,6 +419,7 @@ export {
   default27 as LoginWithOTPFlow,
   Logo,
   default28 as LogoSvg,
+  LottieAnimation,
   MAX_WIDTH,
   default29 as Main2FAFlow,
   MainMenu,
@@ -447,6 +460,8 @@ export {
   PaymentDetailsCard,
   PaymentDisplay,
   PaymentModal,
+  PaymentPendingCard,
+  PaymentSuccessCard,
   Process,
   ProfessionalInvestorStatuses,
   ProfileBadge,
@@ -596,6 +611,7 @@ export {
   copyTextToClipboard,
   emailRegex,
   fixDecimals,
+  flatten,
   default2 as fontFaces,
   format,
   formatCurrencyValue,
@@ -605,6 +621,7 @@ export {
   getAnalyticsIngestUrl,
   getBackofficeAppUrl,
   getConfig,
+  getCopySource,
   getCurrencyConfig,
   getCurrencyIcon,
   getCurrencySymbol,
@@ -623,6 +640,7 @@ export {
   initAnalytics,
   isAccountLockedError,
   isAlreadyOnOnboardingFlow,
+  isCopyKey,
   isExternalUrl,
   isPasswordValid,
   isUSInvestor,
@@ -637,11 +655,13 @@ export {
   default4 as reactTippyStyle,
   reset,
   resetRuntimeConfig,
+  resolveCopy,
   default5 as rwd,
   rwdMax,
   saveAs,
   scrollToElement,
   default6 as semanticUiStyle,
+  setCopySource,
   setUserProperties,
   showAccountLockedModal,
   showProgress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.71",
+  "version": "3.0.72-beta.2",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",
@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "@lottiefiles/dotlottie-react": "^0.19.4",
+    "@lottiefiles/dotlottie-web": "^0.74.0",
     "axios": "^1.13.5",
     "country-flag-icons": "^1.6.17",
     "date-fns": "^4.1.0",