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

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/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/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.3",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",