@stokr/components-library 3.0.72-beta.3 → 3.0.72-beta.5

package/dist/components/Lottie/LottieAnimation.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
-import { DotLottieReact, setWasmUrl } from "@lottiefiles/dotlottie-react";
+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";
-import dotLottiePlayerWasm from "@lottiefiles/dotlottie-web/dotlottie-player.wasm?url";
-setWasmUrl(dotLottiePlayerWasm);
 const LOTTIE_ANIMATIONS = {
   progress: { src: progressAnimation, segment: null, loop: false },
   upload: { src: uploadAnimation, segment: null, loop: false },

package/dist/components/Payment/DetailRows.js

@@ -28,7 +28,9 @@ const DetailRows = ({ rows = [] }) => {
         target: row.target,
         tooltip: row.tooltip,
         placeholder: row.placeholder,
-        isCustom: row.isCustom
+        isCustom: row.isCustom,
+        labelIcon: row.labelIcon,
+        valueIcon: row.valueIcon
       }
     ),
     index < rows.length - 1 && /* @__PURE__ */ jsx(RowDivider, {})

package/dist/components/Payment/DetailsToggle.js

@@ -27,6 +27,16 @@ const Chevron = styled.svg`
   transform: ${(props) => props.$expanded ? "rotate(180deg)" : "none"};
   transition: transform 0.2s;
 `;
+const AnimatedRows = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["$open"].includes(prop)
+})`
+  width: 100%;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: ${(props) => props.$open ? 1 : 0};
+  transform: ${(props) => props.$open ? "translateY(0)" : "translateY(-10px)"};
+  max-height: ${(props) => props.$open ? "1000px" : "0"};
+`;
 const DetailsToggle = ({
   rows = [],
   defaultOpen = false,
@@ -44,6 +54,7 @@ const DetailsToggle = ({
     if (!isControlled) setUncontrolledOpen(next);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimatedRows, { $open: open, "aria-hidden": !open, children: /* @__PURE__ */ jsx(DetailRows, { rows }) }),
     /* @__PURE__ */ jsxs(ToggleButton, { type: "button", onClick: handleClick, "aria-expanded": open, children: [
       open ? hideLabel : showLabel,
       /* @__PURE__ */ jsx(
@@ -59,8 +70,7 @@ const DetailsToggle = ({
           children: /* @__PURE__ */ jsx("path", { d: "M1 2L7 8L13 2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
         }
       )
-    ] }),
-    open && /* @__PURE__ */ jsx(DetailRows, { rows })
+    ] })
   ] });
 };
 export {

package/dist/components/Payment/PaymentDetailsCard.js

@@ -168,6 +168,10 @@ const DetailLabel = styled.div`
   }
 `;
 const DetailValue = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
@@ -214,7 +218,7 @@ const ExternalLinkIconImg = styled.img`
   height: 12px;
   flex-shrink: 0;
 `;
-const DetailItem = ({ label, value, tooltip, placeholder, isCustom, href, target }) => {
+const DetailItem = ({ label, value, tooltip, placeholder, isCustom, href, target, labelIcon, valueIcon }) => {
   const renderValue = () => {
     if (isCustom && value) {
       return value;
@@ -236,9 +240,13 @@ const DetailItem = ({ label, value, tooltip, placeholder, isCustom, href, target
   return /* @__PURE__ */ jsxs(DetailRow, { children: [
     /* @__PURE__ */ jsxs(DetailLabel, { children: [
       label,
-      tooltip && /* @__PURE__ */ jsx(InfoIcon, { containerStyle: { width: 14, height: 14 }, title: tooltip, noMargin: true })
+      tooltip && /* @__PURE__ */ jsx(InfoIcon, { containerStyle: { width: 14, height: 14 }, title: tooltip, noMargin: true }),
+      labelIcon
     ] }),
-    /* @__PURE__ */ jsx(DetailValue, { children: renderValue() })
+    /* @__PURE__ */ jsxs(DetailValue, { children: [
+      valueIcon,
+      renderValue()
+    ] })
   ] });
 };
 const AmountBlock = ({ config }) => {
@@ -295,7 +303,9 @@ const DetailGroup = ({ group, isLast }) => {
         placeholder: detail.placeholder,
         isCustom: detail.isCustom,
         href: detail.href,
-        target: detail.target
+        target: detail.target,
+        labelIcon: detail.labelIcon,
+        valueIcon: detail.valueIcon
       },
       detail.key || index
     ))
@@ -342,7 +352,9 @@ const PaymentDetailsCard = ({
           placeholder: detail.placeholder,
           isCustom: detail.isCustom,
           href: detail.href,
-          target: detail.target
+          target: detail.target,
+          labelIcon: detail.labelIcon,
+          valueIcon: detail.valueIcon
         },
         detail.key || index
       )) });

package/dist/components/Payment/PaymentDisplay.js

@@ -155,11 +155,15 @@ const PaymentDisplay = ({
   onAmountCopy,
   onAddressCopy,
   copyButtonStyle,
+  // Optional chip rendered at the top of the card (e.g. an expiry countdown
+  // pill) — a plain slot, the card has no opinion on what it contains.
+  chip,
   // Arbitrary extra content (e.g. a "show details" toggle + table, extra
   // buttons) — rendered last, inside the card.
   children
 }) => {
   return /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, center: true, style: containerStyle, className, children: /* @__PURE__ */ jsxs(CodeWrapper, { style: codeWrapperStyle, maxWidth, className: codeWrapperClassName, children: [
+    chip,
     /* @__PURE__ */ jsxs(AmountBlock, { children: [
       /* @__PURE__ */ jsx(SectionTitle, { children: amountTitle }),
       /* @__PURE__ */ jsxs(AmountRow, { style: amountSectionStyle, children: [

package/dist/components/Payment/PaymentPendingCard.js

@@ -6,7 +6,6 @@ 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); }
 `;
@@ -44,12 +43,6 @@ const Description = styled.p`
   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;
@@ -63,10 +56,13 @@ const PaymentPendingCard = ({
   title,
   description,
   rows = [],
-  explorerLabel = "View on explorer",
-  explorerHref,
-  onExplorerClick,
+  actionLabel,
+  actionHref,
+  onActionClick,
   footerNote,
+  // Optional chip rendered at the top of the card (e.g. an expiry countdown
+  // pill) — a plain slot, the card has no opinion on what it contains.
+  chip,
   maxWidth,
   containerStyle,
   codeWrapperStyle,
@@ -75,26 +71,24 @@ const PaymentPendingCard = ({
   children
 }) => {
   return /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, center: true, style: containerStyle, className, children: /* @__PURE__ */ jsxs(CodeWrapper, { style: { gap: "40px", ...codeWrapperStyle }, maxWidth, className: codeWrapperClassName, children: [
+    chip,
     /* @__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(
+    (actionHref || onActionClick) && actionLabel && /* @__PURE__ */ jsx(
       Button,
       {
-        as: explorerHref ? "a" : "button",
-        href: explorerHref,
-        target: explorerHref ? "_blank" : void 0,
-        rel: explorerHref ? "noopener noreferrer" : void 0,
-        onClick: onExplorerClick,
+        as: actionHref ? "a" : "button",
+        href: actionHref,
+        target: actionHref ? "_blank" : void 0,
+        rel: actionHref ? "noopener noreferrer" : void 0,
+        onClick: onActionClick,
         outlineBlack: true,
         fluid: true,
-        children: [
-          explorerLabel,
-          /* @__PURE__ */ jsx(ButtonIcon, { src: externalLinkIcon, alt: "" })
-        ]
+        children: actionLabel
       }
     ),
     footerNote && /* @__PURE__ */ jsx(FooterNote, { children: footerNote }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.72-beta.3",
+  "version": "3.0.72-beta.5",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",
@@ -55,7 +55,6 @@
   },
   "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",