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

package/dist/components/Copy/Copy.js

@@ -1,15 +1,17 @@
 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 });
+import { resolveCopy, interpolate } from "./copySource.js";
+const Copy = ({ id, fallback, values }) => {
+  const value = resolveCopy(id) ?? fallback ?? id;
+  return /* @__PURE__ */ jsx(Fragment, { children: interpolate(value, values) });
 };
 Copy.propTypes = {
   id: PropTypes.string.isRequired,
   /** Shown when the copy source has no value for this id (or none is registered). */
-  fallback: PropTypes.string
+  fallback: PropTypes.string,
+  /** Values for `{token}` placeholders in the copy string, e.g. { amount: '1,000' }. */
+  values: PropTypes.object
 };
 export {
   Copy

package/dist/components/Copy/copySource.js

@@ -9,8 +9,17 @@ function resolveCopy(id) {
 function getCopySource() {
   return source;
 }
+function interpolate(str, values) {
+  if (!values || typeof str !== "string") return str;
+  return str.replace(/\{(\w+)\}/g, (_, k) => k in values ? String(values[k]) : `{${k}}`);
+}
+function t(id, values) {
+  return interpolate(resolveCopy(id) ?? id, values);
+}
 export {
   getCopySource,
+  interpolate,
   resolveCopy,
-  setCopySource
+  setCopySource,
+  t
 };

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

@@ -14,7 +14,7 @@ const CodeWrapper = styled.div.withConfig({
   shouldForwardProp: (props) => !["maxWidth"].includes(props)
 })`
   background: ${colors.white};
-  border: 1px solid ${colors.grey4};
+  border: 1px solid ${colors.lightGrey};
   border-radius: 8px;
   box-shadow: none;
   padding: 48px 40px;

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,9 +56,9 @@ const PaymentPendingCard = ({
   title,
   description,
   rows = [],
-  explorerLabel = "View on explorer",
-  explorerHref,
-  onExplorerClick,
+  actionLabel,
+  actionHref,
+  onActionClick,
   footerNote,
   maxWidth,
   containerStyle,
@@ -81,20 +74,17 @@ const PaymentPendingCard = ({
       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/dist/index.js

@@ -4,7 +4,7 @@ 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 { getCopySource, interpolate, resolveCopy, setCopySource, t } 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";
@@ -638,6 +638,7 @@ export {
   iconsMap,
   identify,
   initAnalytics,
+  interpolate,
   isAccountLockedError,
   isAlreadyOnOnboardingFlow,
   isCopyKey,
@@ -668,6 +669,7 @@ export {
   showSuccess,
   sizes,
   default7 as spacing,
+  t,
   default8 as theme,
   timeEvent,
   track,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.72-beta.2",
+  "version": "3.0.72-beta.4",
   "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",