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

package/dist/components/Modal/SuccessModal/SuccessModal.js

@@ -2,29 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import PropTypes from "prop-types";
-import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { Modal } from "../Modal.js";
+import { LottieAnimation } from "../../Lottie/LottieAnimation.js";
 import { SuccessModalContent, AnimationContainer, Title, Subtitle, ContentWrapper } from "./SuccessModal.styles.js";
-import successAnimation from "../../../static/animations/checked.lottie.js";
-import progressAnimation from "../../../static/animations/progress.lottie.js";
-import uploadAnimation from "../../../static/animations/upload.lottie.js";
-const variantConfig = {
-  success: {
-    animation: successAnimation,
-    segment: [0, 50],
-    loop: false
-  },
-  progress: {
-    animation: progressAnimation,
-    segment: null,
-    loop: false
-  },
-  upload: {
-    animation: uploadAnimation,
-    segment: null,
-    loop: false
-  }
-};
 const SuccessModalComponent = ({
   isOpen,
   onClose,
@@ -40,10 +20,6 @@ const SuccessModalComponent = ({
   modalProps = {},
   maxWidth = "800px"
 }) => {
-  const config = variantConfig[variant] || variantConfig.success;
-  const animationSource = animationSrc || config.animation;
-  const animationLoop = loop !== void 0 ? loop : config.loop;
-  const animationSegment = segment || config.segment;
   useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
@@ -65,14 +41,15 @@ const SuccessModalComponent = ({
       ...modalProps,
       children: /* @__PURE__ */ jsxs(SuccessModalContent, { children: [
         /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsx(
-          DotLottieReact,
+          LottieAnimation,
           {
-            src: animationSource,
-            loop: animationLoop,
+            variant,
+            src: animationSrc,
+            loop,
             autoplay,
+            segment,
             speed,
-            segment: animationSegment,
-            style: { width: "100%", height: "100%" }
+            size: "100%"
           }
         ) }),
         title && /* @__PURE__ */ jsx(Title, { children: title }),

package/dist/components/Newsletter/Newsletter.styles.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import rwd, { rwdMax } from "../../styles/rwd.js";
 import { RED_BASE_HEX, BASE_MARGIN, MAX_WIDTH, GRAY_BASE_HEX, WHITE_HEX } from "../../constants/style.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default from "../Button/Button.styles.js";
 const withMarginsCss = css`
   padding-left: ${BASE_MARGIN * 2}px;
   padding-right: ${BASE_MARGIN * 2}px;
@@ -126,7 +126,7 @@ const SubscribeInputError = styled.p`
   text-transform: uppercase;
   top: 39px;
 `;
-const SubscribeSubmit = styled(Button).withConfig({
+const SubscribeSubmit = styled(stdin_default).withConfig({
   shouldForwardProp: (props) => !["submitSuccess"].includes(props)
 })`
   padding-left: 40px;

package/dist/components/Pagination/PaginationControls.js

@@ -5,7 +5,7 @@ import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js
 import stdin_default$1 from "./Pagination.js";
 import { Card, CardTitle } from "../Card/Card.styles.js";
 import stdin_default$2 from "../Input/InputWithButton.js";
-import { Button } from "../Button/Button.styles.js";
+import stdin_default$3 from "../Button/Button.styles.js";
 const PaginationControls = ({
   currentPage,
   totalCount,
@@ -68,7 +68,7 @@ const PaginationControls = ({
                 setInputPageSize(value);
               },
               children: /* @__PURE__ */ jsx(
-                Button,
+                stdin_default$3,
                 {
                   onClick: () => {
                     const newPageSize = Math.max(1, Number(inputPageSize) || 1);

package/dist/components/Payment/DetailRows.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import { DetailItem } from "./PaymentDetailsCard.js";
+const Rows = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const RowDivider = styled.div`
+  height: 1px;
+  background: ${colors.lightGrey};
+  width: 100%;
+`;
+const DetailRows = ({ rows = [] }) => {
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ jsx(Rows, { children: rows.map((row, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DetailItem,
+      {
+        label: row.label,
+        value: row.value,
+        href: row.href,
+        target: row.target,
+        tooltip: row.tooltip,
+        placeholder: row.placeholder,
+        isCustom: row.isCustom
+      }
+    ),
+    index < rows.length - 1 && /* @__PURE__ */ jsx(RowDivider, {})
+  ] }, row.key ?? index)) });
+};
+export {
+  DetailRows
+};

package/dist/components/Payment/DetailsToggle.js

@@ -0,0 +1,68 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import { DetailRows } from "./DetailRows.js";
+const ToggleButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 10px 0;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: ${colors.black};
+
+  &:hover {
+    color: ${colors.blue};
+  }
+`;
+const Chevron = styled.svg`
+  transform: ${(props) => props.$expanded ? "rotate(180deg)" : "none"};
+  transition: transform 0.2s;
+`;
+const DetailsToggle = ({
+  rows = [],
+  defaultOpen = false,
+  open: controlledOpen,
+  onToggle,
+  showLabel = "show details",
+  hideLabel = "hide details"
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleClick = () => {
+    const next = !open;
+    if (onToggle) onToggle(next);
+    if (!isControlled) setUncontrolledOpen(next);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(ToggleButton, { type: "button", onClick: handleClick, "aria-expanded": open, children: [
+      open ? hideLabel : showLabel,
+      /* @__PURE__ */ jsx(
+        Chevron,
+        {
+          $expanded: open,
+          width: "14",
+          height: "10",
+          viewBox: "0 0 14 10",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("path", { d: "M1 2L7 8L13 2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsx(DetailRows, { rows })
+  ] });
+};
+export {
+  DetailsToggle
+};

package/dist/components/Payment/PaymentDisplay.js

@@ -2,24 +2,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import styled from "styled-components";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import { Text } from "../Text/Text.styles.js";
 import { colors } from "../../styles/colors.js";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Tooltip } from "react-tippy";
 import { CopyToClipboardButton } from "../CryptoAddress/CryptoAddress.styles.js";
 import stdin_default from "../QRCode/QRCode.js";
 import { SectionTitle } from "../SectionTitle/SectionTitle.styles.js";
-import { FlexContainer } from "../Grid/Grid.styles.js";
-import rwd from "../../styles/rwd.js";
+import { StatusDot } from "../StatusDot/StatusDot.js";
 import { getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
 const CodeWrapper = styled.div.withConfig({
   shouldForwardProp: (props) => !["maxWidth"].includes(props)
 })`
-  background: ${colors.grey3};
-  border: 1px solid ${colors.grey3};
-  box-shadow: 2px 4px 14px 0px rgb(196, 196, 196, 0.25);
-  border-radius: 5px;
-  padding: 32px 64px;
+  background: ${colors.white};
+  border: 1px solid ${colors.grey4};
+  border-radius: 8px;
+  box-shadow: none;
+  padding: 48px 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -27,67 +25,82 @@ const CodeWrapper = styled.div.withConfig({
   margin: auto;
   max-width: ${(props) => props.maxWidth || "550px"};
 `;
-const AmountSection = styled.div`
+const AmountBlock = styled.div`
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: 16px;
-  margin: 14px 0 8px 0;
-
-  > :nth-child(3) {
-    margin-left: -8px;
-  }
-
-  span {
-    font-weight: 400;
-    text-transform: uppercase;
-    line-height: 28px;
-    font-size: 18px;
-    letter-spacing: 0.8px;
-
-    ${rwd.XLarge`
-    font-size: 22px;
-  `}
-  }
+  width: 100%;
+`;
+const AmountRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const AmountValueGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
-const AmountText = styled(Text)`
-  font-size: 24px;
+const AmountValue = styled.p`
+  margin: 0;
+  font-size: 34px;
   font-weight: 800;
   text-transform: uppercase;
   line-height: 40px;
   letter-spacing: 1.5px;
+  color: ${colors.black};
   word-wrap: break-word;
-
-  ${rwd.XLarge`
-    font-size: 34px;
-  `}
+`;
+const AmountCurrency = styled.p`
+  margin: 0;
+  font-size: 34px;
+  font-weight: 300;
+  line-height: 40px;
+  color: ${colors.black};
 `;
 const AmountIcon = styled.img`
-  width: 24px;
-  height: 24px;
-
-  ${rwd.XLarge`
-    width:32px;
-    height:32px;
-  `}
+  width: 32px;
+  height: 32px;
+`;
+const AddressBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+`;
+const AddressGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+`;
+const AddressRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 `;
 const AddressText = styled.p`
-  letter-spacing: 0.6%;
-  word-break: break-all;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  letter-spacing: 0.1;
   margin: 0;
-  margin-top: 14px;
-`;
-const AddressDescription = styled.p`
   font-size: 14px;
-  font-weight: 300;
+  font-weight: 600;
   line-height: 20px;
   letter-spacing: 0.5px;
+  text-align: center;
+  word-break: break-all;
+  color: ${colors.black};
+`;
+const AddressDescription = styled.p`
   margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.6px;
+  text-align: center;
+  color: ${colors.grey2};
 `;
 const CopyToClipBoardTooltip = ({ value, buttonStyle, onCopy }) => {
   const [copied, setCopied] = useState(false);
@@ -122,6 +135,9 @@ const PaymentDisplay = ({
   addressDescription = "",
   qrCodeSize = 200,
   qrCodeStyle,
+  // Waiting/status indicator — e.g. "Waiting to detect your transaction…"
+  statusMessage,
+  statusDotColor,
   // Style props
   containerStyle,
   codeWrapperStyle,
@@ -138,62 +154,66 @@ const PaymentDisplay = ({
   customCurrencyIcon,
   onAmountCopy,
   onAddressCopy,
-  copyButtonStyle
+  copyButtonStyle,
+  // Arbitrary extra content (e.g. a "show details" toggle + table, extra
+  // buttons) — rendered last, inside the card.
+  children
 }) => {
-  const defaultQRCodeStyle = {
-    backgroundColor: "#000000",
-    padding: 18,
-    borderRadius: 8,
-    margin: "16px 0"
-  };
   return /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, center: true, style: containerStyle, className, children: /* @__PURE__ */ jsxs(CodeWrapper, { style: codeWrapperStyle, maxWidth, className: codeWrapperClassName, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(AmountBlock, { children: [
       /* @__PURE__ */ jsx(SectionTitle, { children: amountTitle }),
-      /* @__PURE__ */ jsxs(AmountSection, { style: amountSectionStyle, children: [
-        /* @__PURE__ */ jsx(AmountIcon, { src: getCurrencyIcon(currency, customCurrencyIcon), style: amountIconStyle, alt: currency }),
-        /* @__PURE__ */ jsx(AmountText, { style: amountTextStyle, children: amount }),
-        /* @__PURE__ */ jsxs(AmountText, { style: amountTextStyle, children: [
-          " ",
-          currency
+      /* @__PURE__ */ jsxs(AmountRow, { style: amountSectionStyle, children: [
+        /* @__PURE__ */ jsxs(AmountValueGroup, { children: [
+          /* @__PURE__ */ jsx(AmountIcon, { src: getCurrencyIcon(currency, customCurrencyIcon), style: amountIconStyle, alt: currency }),
+          /* @__PURE__ */ jsx(AmountValue, { style: amountTextStyle, children: amount }),
+          /* @__PURE__ */ jsx(AmountCurrency, { style: amountTextStyle, children: currency })
         ] }),
         showCopyIcons && /* @__PURE__ */ jsx(
           CopyToClipBoardTooltip,
           {
             value: amount.toString(),
-            buttonStyle: copyButtonStyle || { height: 18, width: 18 },
+            buttonStyle: copyButtonStyle || { height: 22, width: 22 },
             onCopy: onAmountCopy
           }
         )
+      ] }),
+      showQRCode && qrCodeValue && /* @__PURE__ */ jsx(stdin_default, { size: qrCodeSize, padding: 0, backgroundColor: "transparent", style: qrCodeStyle, value: qrCodeValue })
+    ] }),
+    showAddress && address && /* @__PURE__ */ jsxs(AddressBlock, { style: addressSectionStyle, children: [
+      /* @__PURE__ */ jsx(SectionTitle, { children: addressTitle }),
+      /* @__PURE__ */ jsxs(AddressGroup, { children: [
+        /* @__PURE__ */ jsxs(AddressRow, { children: [
+          /* @__PURE__ */ jsx(AddressText, { style: addressTextStyle, children: address }),
+          showCopyIcons && /* @__PURE__ */ jsx(
+            CopyToClipBoardTooltip,
+            {
+              value: address,
+              buttonStyle: copyButtonStyle || { height: 16, width: 16 },
+              onCopy: onAddressCopy
+            }
+          )
+        ] }),
+        addressDescription && /* @__PURE__ */ jsx(AddressDescription, { style: addressDescriptionStyle, children: addressDescription })
       ] })
     ] }),
-    showQRCode && qrCodeValue && /* @__PURE__ */ jsx(
-      stdin_default,
+    statusMessage && /* @__PURE__ */ jsx(
+      StatusDot,
       {
-        size: qrCodeSize,
-        bgColor: "#000000",
-        fgColor: "#ffffff",
-        style: qrCodeStyle || defaultQRCodeStyle,
-        value: qrCodeValue
+        color: statusDotColor || colors.blue,
+        labelColor: colors.grayBlue,
+        dotSize: 8,
+        pulse: true,
+        style: { width: "100%", whiteSpace: "normal" },
+        children: statusMessage
       }
     ),
-    showAddress && address && /* @__PURE__ */ jsxs("div", { style: addressSectionStyle, children: [
-      /* @__PURE__ */ jsx(SectionTitle, { children: addressTitle }),
-      /* @__PURE__ */ jsxs(FlexContainer, { style: { gap: 16, margin: "12px 0" }, children: [
-        /* @__PURE__ */ jsx(AddressText, { style: addressTextStyle, children: address }),
-        showCopyIcons && /* @__PURE__ */ jsx(
-          CopyToClipBoardTooltip,
-          {
-            value: address,
-            buttonStyle: copyButtonStyle || { height: 16, width: 16, marginTop: 4 },
-            onCopy: onAddressCopy
-          }
-        )
-      ] }),
-      addressDescription && /* @__PURE__ */ jsx(AddressDescription, { style: addressDescriptionStyle, children: addressDescription })
-    ] })
+    children
   ] }) });
 };
 export {
+  AmountCurrency,
+  AmountIcon,
+  AmountValue,
   CodeWrapper,
   PaymentDisplay
 };

package/dist/components/Payment/PaymentPendingCard.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import styled, { keyframes } from "styled-components";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { colors } from "../../styles/colors.js";
+import { Button } from "../Button/Button.styles.js";
+import { DetailRows } from "./DetailRows.js";
+import { CodeWrapper } from "./PaymentDisplay.js";
+import externalLinkIcon from "../../static/images/external-link-icon.svg.js";
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+const Spinner = styled.div`
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: 3px solid ${colors.lightGrey};
+  border-top-color: ${colors.blue};
+  animation: ${spin} 0.9s linear infinite;
+`;
+const TextBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  width: 100%;
+`;
+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 ButtonIcon = styled.img`
+  width: 12px;
+  height: 12px;
+  margin-left: 8px;
+  vertical-align: -1px;
+`;
+const FooterNote = styled.p`
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.6px;
+  text-align: center;
+  color: ${colors.grayBlue};
+`;
+const PaymentPendingCard = ({
+  title,
+  description,
+  rows = [],
+  explorerLabel = "View on explorer",
+  explorerHref,
+  onExplorerClick,
+  footerNote,
+  maxWidth,
+  containerStyle,
+  codeWrapperStyle,
+  className,
+  codeWrapperClassName,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, center: true, style: containerStyle, className, children: /* @__PURE__ */ jsxs(CodeWrapper, { style: { gap: "40px", ...codeWrapperStyle }, maxWidth, className: codeWrapperClassName, children: [
+    /* @__PURE__ */ jsx(Spinner, {}),
+    (title || description) && /* @__PURE__ */ jsxs(TextBlock, { children: [
+      title && /* @__PURE__ */ jsx(Title, { children: title }),
+      description && /* @__PURE__ */ jsx(Description, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(DetailRows, { rows }),
+    (explorerHref || onExplorerClick) && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        as: explorerHref ? "a" : "button",
+        href: explorerHref,
+        target: explorerHref ? "_blank" : void 0,
+        rel: explorerHref ? "noopener noreferrer" : void 0,
+        onClick: onExplorerClick,
+        outlineBlack: true,
+        fluid: true,
+        children: [
+          explorerLabel,
+          /* @__PURE__ */ jsx(ButtonIcon, { src: externalLinkIcon, alt: "" })
+        ]
+      }
+    ),
+    footerNote && /* @__PURE__ */ jsx(FooterNote, { children: footerNote }),
+    children
+  ] }) });
+};
+export {
+  PaymentPendingCard
+};