@ledgerhq/lumen-utils-shared 0.0.20 → 0.1.1

package/dist/index.js

@@ -1,185 +1,203 @@
 import { jsx as k } from "react/jsx-runtime";
-import { createContext as W, useMemo as v, use as F } from "react";
+import { createContext as W, useMemo as D, useContext as F } from "react";
 import { clsx as _ } from "clsx";
 import { twMerge as j } from "tailwind-merge";
 function q(t) {
-  return t ? t.split(/[-_ ]+/).map((n) => n.charAt(0).toUpperCase() + n.slice(1).toLowerCase()).join("") : "";
+  return t ? t.split(/[-_ ]+/).map((e) => e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()).join("") : "";
 }
 const N = 48, R = 17, w = 2;
 function G(t) {
-  const n = t.replace(/\D/g, "").length;
+  const e = t.replace(/\D/g, "").length;
   return Math.max(
     R,
-    N - n * w
+    N - e * w
   );
 }
-function C(t, n = !0) {
+function C(t, e = !0) {
   if (!t) return "";
-  const i = t.includes("."), [l, o] = t.split("."), u = l.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
-  return i && n ? o ? `${u}.${o}` : `${u}.` : u;
+  const o = t.includes("."), [c, r] = t.split("."), u = c.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  return o && e ? r ? `${u}.${r}` : `${u}.` : u;
 }
-function H(t, n = {}) {
+function H(t, e = {}) {
   const {
-    allowDecimals: i = !0,
-    thousandsSeparator: l = !0,
-    maxIntegerLength: o = 9,
+    allowDecimals: o = !0,
+    thousandsSeparator: c = !0,
+    maxIntegerLength: r = 9,
     maxDecimalLength: u = 9
-  } = n, r = t.replace(",", ".").replace(/[^\d.]/g, "");
-  let e = r;
-  if (e = e.replace(/^0+(?=\d)/, ""), !i)
-    return e = e.replace(/\D/g, ""), o > 0 && e.length > o && (e = e.slice(0, o)), l ? C(e) : e;
-  e === "." && (e = "0.");
-  const a = e.indexOf(".");
+  } = e, i = t.replace(",", ".").replace(/[^\d.]/g, "");
+  let n = i;
+  if (n = n.replace(/^0+(?=\d)/, ""), !o)
+    return n = n.replace(/\D/g, ""), r > 0 && n.length > r && (n = n.slice(0, r)), c ? C(n) : n;
+  n === "." && (n = "0.");
+  const a = n.indexOf(".");
   if (a !== -1) {
-    let c = e.slice(0, a), f = e.slice(a + 1).replace(/\./g, "");
-    o > 0 && c.length > o && (c = c.slice(0, o)), f = f.slice(0, u), c === "" && (c = "0");
-    const p = r.endsWith(".") || e.endsWith(".");
-    e = f.length > 0 ? `${c}.${f}` : p ? `${c}.` : c;
+    let s = n.slice(0, a), f = n.slice(a + 1).replace(/\./g, "");
+    r > 0 && s.length > r && (s = s.slice(0, r)), f = f.slice(0, u), s === "" && (s = "0");
+    const h = i.endsWith(".") || n.endsWith(".");
+    n = f.length > 0 ? `${s}.${f}` : h ? `${s}.` : s;
   } else
-    o > 0 && e.length > o && (e = e.slice(0, o));
-  return l ? C(e) : e;
+    r > 0 && n.length > r && (n = n.slice(0, r));
+  return c ? C(n) : n;
 }
-function J(t, n) {
-  const i = W(n), l = ({ children: u, value: r }) => {
-    const e = v(
-      () => r,
-      Object.values(r ?? {})
+function J(t, e) {
+  const o = W(e), c = ({ children: u, value: i }) => {
+    const n = D(
+      () => i,
+      Object.values(i ?? {})
     );
-    return /* @__PURE__ */ k(i, { value: e, children: u });
+    return /* @__PURE__ */ k(o.Provider, { value: n, children: u });
   };
-  l.displayName = t + "Provider";
-  function o({
+  c.displayName = t + "Provider";
+  function r({
     consumerName: u,
-    contextRequired: r
+    contextRequired: i
   }) {
-    const e = F(i);
-    if (e)
-      return e;
-    if (r)
+    const n = F(o);
+    if (n)
+      return n;
+    if (i)
       throw new Error(
         `${u} must be used within ${t}`
       );
-    return n || {};
+    return e || {};
   }
-  return [l, o];
+  return [c, r];
 }
 function K(...t) {
   return j(_(t));
 }
-const I = (t) => typeof t == "string" || typeof t == "number", Q = (t) => Array.isArray(t) ? t.every(I) : I(t);
-function S(t, n) {
+const S = (t) => typeof t == "string" || typeof t == "number", Q = (t) => Array.isArray(t) ? t.every(S) : S(t);
+function I(t, e) {
   if (typeof t == "function")
-    return t(n);
-  typeof t == "object" && t !== null && "current" in t && (t.current = n);
+    return t(e);
+  typeof t == "object" && t !== null && "current" in t && (t.current = e);
 }
 function z(...t) {
-  const n = /* @__PURE__ */ new Map();
-  return (i) => {
-    if (i === null) {
-      t.forEach((l) => {
-        const o = n.get(l);
-        typeof o == "function" && o(), S(l, null);
-      }), n.clear();
+  const e = /* @__PURE__ */ new Map();
+  return (o) => {
+    if (o === null) {
+      t.forEach((c) => {
+        const r = e.get(c);
+        typeof r == "function" && r(), I(c, null);
+      }), e.clear();
       return;
     }
-    t.forEach((l) => {
-      const o = S(l, i);
-      typeof o == "function" && n.set(l, o);
+    t.forEach((c) => {
+      const r = I(c, o);
+      typeof r == "function" && e.set(c, r);
     });
   };
 }
 function Y(...t) {
-  return v(() => z(...t), t);
+  return D(() => z(...t), t);
 }
-const tt = (t, n) => {
-  let i = t;
-  for (const l of n) {
-    if (i == null)
+const tt = (t, e) => {
+  let o = t;
+  for (const c of e) {
+    if (o == null)
       return;
-    i = i[l];
+    o = o[c];
   }
-  return i;
-}, nt = ({
+  return o;
+}, et = ({
   currentStep: t,
-  totalSteps: n,
-  size: i,
-  label: l,
-  strokeWidth: o = 4,
+  totalSteps: e,
+  size: o,
+  label: c,
+  strokeWidth: r = 4,
   arcPercentage: u = 0.75
 }) => {
-  const r = Math.min(Math.max(t, 0), n), e = l ?? `${r}/${n}`, a = n <= 0 ? 0 : r / n, c = (i - o) / 2, f = i / 2, p = i / 2, m = 2 * Math.PI * c, d = m * u, y = d * (1 - a), h = r <= 0, $ = `${d} ${m}`, D = h ? d - 2 : y;
+  const i = Math.min(Math.max(t, 0), e), n = c ?? `${i}/${e}`, a = e <= 0 ? 0 : i / e, s = (o - r) / 2, f = o / 2, h = o / 2, m = 2 * Math.PI * s, g = m * u, T = g * (1 - a), p = i <= 0, A = `${g} ${m}`, $ = p ? g - 2 : T;
   return {
-    displayLabel: e,
+    displayLabel: n,
     progress: a,
-    r: c,
+    r: s,
     cx: f,
-    cy: p,
+    cy: h,
     circumference: m,
-    trackArcLength: d,
-    trackDashArray: `${d} ${m}`,
-    progressDashArray: $,
-    progressDashOffset: D,
-    showMinimalDot: h
+    trackArcLength: g,
+    trackDashArray: `${g} ${m}`,
+    progressDashArray: A,
+    progressDashOffset: $,
+    showMinimalDot: p
   };
+}, nt = (t) => D(
+  () => ({
+    integerPart: Array.from(t.integerPart, (e) => ({
+      value: e,
+      type: e.match(/^\d$/) ? "digit" : "separator"
+    })),
+    decimalPart: t.decimalPart ? Array.from(t.decimalPart, (e) => ({
+      value: e,
+      type: "digit"
+    })) : []
+  }),
+  [t.integerPart, t.decimalPart]
+), rt = (t, e, o) => {
+  if (e) return o;
+  const c = t.decimalPart ? `${t.decimalSeparator}${t.decimalPart}` : "", r = `${t.integerPart}${c}`;
+  return t.currencyPosition === "end" ? `${r} ${t.currencyText}` : `${t.currencyText} ${r}`;
 };
-function V(t, n, i = {}) {
-  const { leading: l = !1, trailing: o = !0, maxWait: u } = i;
-  let r = null, e = null, a = null, c = 0, f = null, p = null, m;
-  const d = u !== void 0, y = d ? Math.max(u, n) : 0, h = (s) => {
-    c = s;
-    const g = f, T = p;
-    return f = null, p = null, m = t.apply(T, g), m;
-  }, $ = (s) => {
-    const g = a ? s - a : 0;
-    return n - g;
-  }, D = (s) => {
-    const g = a ? s - a : n, T = s - c;
-    return a === null || g >= n || g < 0 || d && T >= y;
-  }, A = (s) => (r = null, o && f ? h(s) : (f = null, p = null, m)), x = () => {
-    const s = Date.now();
-    if (D(s)) {
-      A(s);
+function V(t, e, o = {}) {
+  const { leading: c = !1, trailing: r = !0, maxWait: u } = o;
+  let i = null, n = null, a = null, s = 0, f = null, h = null, m;
+  const g = u !== void 0, T = g ? Math.max(u, e) : 0, p = (l) => {
+    s = l;
+    const d = f, y = h;
+    return f = null, h = null, m = t.apply(y, d), m;
+  }, A = (l) => {
+    const d = a ? l - a : 0;
+    return e - d;
+  }, $ = (l) => {
+    const d = a ? l - a : e, y = l - s;
+    return a === null || d >= e || d < 0 || g && y >= T;
+  }, M = (l) => (i = null, r && f ? p(l) : (f = null, h = null, m)), x = () => {
+    const l = Date.now();
+    if ($(l)) {
+      M(l);
       return;
     }
-    r = setTimeout(x, $(s));
-  }, E = () => {
-    const s = Date.now();
-    e = null, f && (h(s), r !== null && (clearTimeout(r), r = setTimeout(x, n)));
-  }, P = (s) => (c = s, r = setTimeout(x, n), d && (e = setTimeout(E, y)), l ? h(s) : m), b = () => {
-    r !== null && clearTimeout(r), e !== null && clearTimeout(e), c = 0, f = null, p = null, a = null, r = null, e = null;
-  }, L = () => r === null && e === null ? m : A(Date.now()), O = () => r !== null || e !== null, M = function(...s) {
-    const g = Date.now(), T = D(g);
-    if (f = s, p = this, a = g, T) {
-      if (r === null)
-        return P(g);
-      if (d)
-        return clearTimeout(r), r = setTimeout(x, n), h(g);
+    i = setTimeout(x, A(l));
+  }, b = () => {
+    const l = Date.now();
+    n = null, f && (p(l), i !== null && (clearTimeout(i), i = setTimeout(x, e)));
+  }, v = (l) => (s = l, i = setTimeout(x, e), g && (n = setTimeout(b, T)), c ? p(l) : m), E = () => {
+    i !== null && clearTimeout(i), n !== null && clearTimeout(n), s = 0, f = null, h = null, a = null, i = null, n = null;
+  }, L = () => i === null && n === null ? m : M(Date.now()), O = () => i !== null || n !== null, P = function(...l) {
+    const d = Date.now(), y = $(d);
+    if (f = l, h = this, a = d, y) {
+      if (i === null)
+        return v(d);
+      if (g)
+        return clearTimeout(i), i = setTimeout(x, e), p(d);
     }
-    return r === null && (r = setTimeout(x, n)), m;
+    return i === null && (i = setTimeout(x, e)), m;
   };
-  return M.cancel = b, M.flush = L, M.pending = O, M;
+  return P.cancel = E, P.flush = L, P.pending = O, P;
 }
-function et(t, n, i = {}) {
-  const { leading: l = !0, trailing: o = !0 } = i;
-  return V(t, n, {
-    leading: l,
-    trailing: o,
-    maxWait: n
+function it(t, e, o = {}) {
+  const { leading: c = !0, trailing: r = !0 } = o;
+  return V(t, e, {
+    leading: c,
+    trailing: r,
+    maxWait: e
   });
 }
 export {
-  S as assignRef,
+  I as assignRef,
+  rt as buildAriaLabel,
   K as cn,
   J as createSafeContext,
   V as debounce,
   C as formatThousands,
   G as getFontSize,
   tt as getObjectPath,
-  nt as getStepperCalculations,
+  et as getStepperCalculations,
   Q as isTextChildren,
   z as mergeRefs,
   H as textFormatter,
-  et as throttle,
+  it as throttle,
   q as toPascalCase,
-  Y as useMergedRef
+  Y as useMergedRef,
+  nt as useSplitText
 };

package/dist/lib/components/amountDisplayHelpers/buildAriaLabel.d.ts

@@ -0,0 +1,3 @@
+import { FormattedValue } from './types';
+export declare const buildAriaLabel: (parts: FormattedValue, hidden: boolean, hiddenLabel: string) => string;
+//# sourceMappingURL=buildAriaLabel.d.ts.map

package/dist/lib/components/amountDisplayHelpers/buildAriaLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildAriaLabel.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/amountDisplayHelpers/buildAriaLabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,cAAc,UAClB,cAAc,UACb,OAAO,eACF,MAAM,KAClB,MAaF,CAAC"}

package/dist/lib/components/amountDisplayHelpers/index.d.ts

@@ -0,0 +1,4 @@
+export { useSplitText } from './useSplitText';
+export { buildAriaLabel } from './buildAriaLabel';
+export type { FormattedValue, SplitChar } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/amountDisplayHelpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/amountDisplayHelpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/lib/components/amountDisplayHelpers/types.d.ts

@@ -0,0 +1,30 @@
+export type SplitChar = {
+    value: string;
+    type: 'digit' | 'separator';
+};
+export type FormattedValue = {
+    /**
+     * The whole number portion of the amount (e.g., "1234" from 1234.56)
+     */
+    integerPart: string;
+    /**
+     * The fractional portion of the amount without the separator (e.g., "56" from 1234.56)
+     * @optional
+     */
+    decimalPart?: string;
+    /**
+     * The currency text or symbol (e.g., "$", "USD", "€", "BTC")
+     */
+    currencyText: string;
+    /**
+     * The character which separates integer and fractional parts.
+     */
+    decimalSeparator: '.' | ',';
+    /**
+     * Position of the currency text relative to the amount.
+     * @optional
+     * @default 'start'
+     */
+    currencyPosition?: 'start' | 'end';
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/components/amountDisplayHelpers/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/amountDisplayHelpers/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,EAAE,GAAG,GAAG,GAAG,CAAC;IAC5B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACpC,CAAC"}

package/dist/lib/components/amountDisplayHelpers/useSplitText.d.ts

@@ -0,0 +1,6 @@
+import { FormattedValue, SplitChar } from './types';
+export declare const useSplitText: (value: FormattedValue) => {
+    integerPart: SplitChar[];
+    decimalPart: SplitChar[];
+};
+//# sourceMappingURL=useSplitText.d.ts.map

package/dist/lib/components/amountDisplayHelpers/useSplitText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitText.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/amountDisplayHelpers/useSplitText.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,YAAY,UAChB,cAAc,KACpB;IACD,WAAW,EAAE,SAAS,EAAE,CAAC;IACzB,WAAW,EAAE,SAAS,EAAE,CAAC;CAiB1B,CAAC"}

package/dist/lib/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './getStepperCalculations';
+export * from './amountDisplayHelpers';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC"}

package/dist/lib/createSafeContext/createSafeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSafeContext.d.ts","sourceRoot":"","sources":["../../../src/lib/createSafeContext/createSafeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,YAAY,SAAS,MAAM,EAC3D,iBAAiB,EAAE,MAAM,EACzB,cAAc,CAAC,EAAE,YAAY;cAKjB,SAAS;WACZ,YAAY;KAaG,eAAe,SAAS,OAAO,gDAGpD;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,eAAe,CAAC;CAClC,KAAG,eAAe,SAAS,IAAI,GAAG,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,EAgBxE"}
+{"version":3,"file":"createSafeContext.d.ts","sourceRoot":"","sources":["../../../src/lib/createSafeContext/createSafeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE1E,wBAAgB,iBAAiB,CAAC,YAAY,SAAS,MAAM,EAC3D,iBAAiB,EAAE,MAAM,EACzB,cAAc,CAAC,EAAE,YAAY;cAKjB,SAAS;WACZ,YAAY;KAaG,eAAe,SAAS,OAAO,gDAGpD;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,eAAe,CAAC;CAClC,KAAG,eAAe,SAAS,IAAI,GAAG,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,EAgBxE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-utils-shared",
-  "version": "0.0.20",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/lib/components/amountDisplayHelpers/buildAriaLabel.ts

@@ -0,0 +1,20 @@
+import { FormattedValue } from './types';
+
+export const buildAriaLabel = (
+  parts: FormattedValue,
+  hidden: boolean,
+  hiddenLabel: string,
+): string => {
+  if (hidden) return hiddenLabel;
+
+  const decimal = parts.decimalPart
+    ? `${parts.decimalSeparator}${parts.decimalPart}`
+    : '';
+  const amount = `${parts.integerPart}${decimal}`;
+
+  if (parts.currencyPosition === 'end') {
+    return `${amount} ${parts.currencyText}`;
+  }
+
+  return `${parts.currencyText} ${amount}`;
+};

package/src/lib/components/amountDisplayHelpers/index.ts

@@ -0,0 +1,3 @@
+export { useSplitText } from './useSplitText';
+export { buildAriaLabel } from './buildAriaLabel';
+export type { FormattedValue, SplitChar } from './types';

package/src/lib/components/amountDisplayHelpers/types.ts

@@ -0,0 +1,30 @@
+export type SplitChar = {
+  value: string;
+  type: 'digit' | 'separator';
+};
+
+export type FormattedValue = {
+  /**
+   * The whole number portion of the amount (e.g., "1234" from 1234.56)
+   */
+  integerPart: string;
+  /**
+   * The fractional portion of the amount without the separator (e.g., "56" from 1234.56)
+   * @optional
+   */
+  decimalPart?: string;
+  /**
+   * The currency text or symbol (e.g., "$", "USD", "€", "BTC")
+   */
+  currencyText: string;
+  /**
+   * The character which separates integer and fractional parts.
+   */
+  decimalSeparator: '.' | ',';
+  /**
+   * Position of the currency text relative to the amount.
+   * @optional
+   * @default 'start'
+   */
+  currencyPosition?: 'start' | 'end';
+};

package/src/lib/components/amountDisplayHelpers/useSplitText.test.ts

@@ -0,0 +1,101 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { FormattedValue } from './types';
+import { useSplitText } from './useSplitText';
+
+const createValue = (
+  overrides: Partial<FormattedValue> = {},
+): FormattedValue => ({
+  integerPart: '1234',
+  decimalPart: '56',
+  currencyText: 'USD',
+  decimalSeparator: '.',
+  currencyPosition: 'start',
+  ...overrides,
+});
+
+describe('useSplitText', () => {
+  it('splits integer part into individual digit characters', () => {
+    const { result } = renderHook(() => useSplitText(createValue()));
+
+    expect(result.current.integerPart).toEqual([
+      { value: '1', type: 'digit' },
+      { value: '2', type: 'digit' },
+      { value: '3', type: 'digit' },
+      { value: '4', type: 'digit' },
+    ]);
+  });
+
+  it('splits decimal part into individual digit characters', () => {
+    const { result } = renderHook(() => useSplitText(createValue()));
+
+    expect(result.current.decimalPart).toEqual([
+      { value: '5', type: 'digit' },
+      { value: '6', type: 'digit' },
+    ]);
+  });
+
+  it('returns empty decimal part when decimalPart is undefined', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ decimalPart: undefined })),
+    );
+
+    expect(result.current.decimalPart).toEqual([]);
+  });
+
+  it('classifies group separators in integer part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ integerPart: '1,234,567' })),
+    );
+
+    expect(result.current.integerPart).toEqual([
+      { value: '1', type: 'digit' },
+      { value: ',', type: 'separator' },
+      { value: '2', type: 'digit' },
+      { value: '3', type: 'digit' },
+      { value: '4', type: 'digit' },
+      { value: ',', type: 'separator' },
+      { value: '5', type: 'digit' },
+      { value: '6', type: 'digit' },
+      { value: '7', type: 'digit' },
+    ]);
+  });
+
+  it('classifies space separators in integer part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ integerPart: '1 234 567' })),
+    );
+
+    expect(result.current.integerPart).toEqual([
+      { value: '1', type: 'digit' },
+      { value: ' ', type: 'separator' },
+      { value: '2', type: 'digit' },
+      { value: '3', type: 'digit' },
+      { value: '4', type: 'digit' },
+      { value: ' ', type: 'separator' },
+      { value: '5', type: 'digit' },
+      { value: '6', type: 'digit' },
+      { value: '7', type: 'digit' },
+    ]);
+  });
+
+  it('handles single digit integer part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ integerPart: '0' })),
+    );
+
+    expect(result.current.integerPart).toEqual([{ value: '0', type: 'digit' }]);
+  });
+
+  it('handles long decimal part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ decimalPart: '00123456' })),
+    );
+
+    expect(result.current.decimalPart).toHaveLength(8);
+    expect(result.current.decimalPart.every((c) => c.type === 'digit')).toBe(
+      true,
+    );
+  });
+});

package/src/lib/components/amountDisplayHelpers/useSplitText.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { FormattedValue, SplitChar } from './types';
+
+export const useSplitText = (
+  value: FormattedValue,
+): {
+  integerPart: SplitChar[];
+  decimalPart: SplitChar[];
+} => {
+  return useMemo(
+    () => ({
+      integerPart: Array.from(value.integerPart, (digit) => ({
+        value: digit,
+        type: digit.match(/^\d$/) ? 'digit' : 'separator',
+      })),
+      decimalPart: value.decimalPart
+        ? Array.from(value.decimalPart, (digit) => ({
+            value: digit,
+            type: 'digit',
+          }))
+        : [],
+    }),
+    [value.integerPart, value.decimalPart],
+  );
+};

package/src/lib/components/index.ts

@@ -1 +1,2 @@
 export * from './getStepperCalculations';
+export * from './amountDisplayHelpers';

package/src/lib/createSafeContext/createSafeContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, ReactNode, use, useMemo } from 'react';
+import { createContext, FC, ReactNode, useContext, useMemo } from 'react';
 
 export function createSafeContext<ContextValue extends object>(
   rootComponentName: string,
@@ -16,7 +16,7 @@ export function createSafeContext<ContextValue extends object>(
       Object.values(context ?? {}),
     ) as ContextValue;
 
-    return <Context value={memoValue}>{children}</Context>;
+    return <Context.Provider value={memoValue}>{children}</Context.Provider>;
   };
 
   Provider.displayName = rootComponentName + 'Provider';
@@ -28,7 +28,7 @@ export function createSafeContext<ContextValue extends object>(
     consumerName: string;
     contextRequired: ContextRequired;
   }): ContextRequired extends true ? ContextValue : Partial<ContextValue> {
-    const context = use(Context);
+    const context = useContext(Context);
 
     if (context) {
       return context;