@veevarts/design-system 1.16.0 → 1.17.0-beta.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx as i, jsxs as f, Fragment as ye } from "react/jsx-runtime";
-import { HeroUIProvider as ki, Button as Ci, Select as Si, cn as g, SelectItem as at, Alert as Oe, Tooltip as _e, Card as ve, CardBody as Se, Divider as Ye, Dropdown as kn, DropdownTrigger as Cn, DropdownMenu as Sn, DropdownItem as Et, Input as Ae, Popover as $n, PopoverTrigger as An, PopoverContent as Dn, ButtonGroup as $i, useInput as Ai, NumberInput as ta, CardHeader as na, Image as ra, CardFooter as Di, Chip as lt, Skeleton as te, Autocomplete as Ei, AutocompleteItem as Ii, Checkbox as aa, Modal as En, ModalContent as In, ModalHeader as Mn, ModalBody as Fn, ModalFooter as ia, Accordion as Ln, AccordionItem as Tn, Tabs as Mi, Tab as ar, DatePicker as sa, DropdownSection as ir, Spinner as Fi, Switch as Li, CheckboxGroup as Ti, RadioGroup as _i, Radio as zi } from "@heroui/react";
+import { HeroUIProvider as ki, Button as Ci, Select as Si, cn as g, SelectItem as it, Alert as Oe, Tooltip as _e, Card as ve, CardBody as Se, Divider as Ye, Dropdown as kn, DropdownTrigger as Cn, DropdownMenu as Sn, DropdownItem as Et, Input as Ae, Popover as $n, PopoverTrigger as An, PopoverContent as Dn, ButtonGroup as $i, useInput as Ai, NumberInput as ta, CardHeader as na, Image as ra, CardFooter as Di, Chip as ot, Skeleton as te, Autocomplete as Ei, AutocompleteItem as Ii, Checkbox as aa, Modal as En, ModalContent as In, ModalHeader as Mn, ModalBody as Fn, ModalFooter as ia, Accordion as Ln, AccordionItem as Tn, Tabs as Mi, Tab as ar, DatePicker as sa, DropdownSection as ir, Spinner as Fi, Switch as Li, CheckboxGroup as Ti, RadioGroup as _i, Radio as zi } from "@heroui/react";
 export * from "@heroui/react";
-import H, { forwardRef as ot, useRef as ze, useState as W, useEffect as De, useReducer as Oi, useCallback as ee, useMemo as de, createElement as ln, isValidElement as Pi, useId as Ri } from "react";
+import H, { forwardRef as ct, useRef as ze, useState as W, useEffect as De, useReducer as Oi, useCallback as ee, useMemo as de, createElement as ln, isValidElement as Pi, useId as Ri } from "react";
 import { Globe as sr, User as lr, Heading as la, Check as oa, ListTodo as ca, ListOrdered as da, List as _n, AlignJustify as Vi, AlignRight as Bi, AlignCenter as Ui, AlignLeft as ua, CornerDownLeft as ji, Redo2 as Hi, Undo2 as qi, Eraser as or, Minus as Wi, Quote as Yi, CodeSquare as Ki, FileText as Qi, Link2 as Gi, Highlighter as fa, Palette as ma, Code as Zi, Underline as Ji, Strikethrough as Xi, Italic as es, Bold as ts, X as ns, ZoomOut as rs, ZoomIn as as, Link as is, Clock as cr, CheckCircle as ss, AlertCircle as ls, Plus as zn, CircleDollarSign as ha } from "lucide-react";
 import { LazyMotion as os, domAnimation as cs, m as on, motion as It, AnimatePresence as cn } from "framer-motion";
 import { EditorProvider as ds, useCurrentEditor as pa } from "@tiptap/react";
@@ -35,7 +35,7 @@ import { Gapcursor as _s } from "@tiptap/extension-gapcursor";
 function ff({ children: e }) {
   return /* @__PURE__ */ i(ki, { children: e });
 }
-const Q = ot(
+const Q = ct(
   ({ color: e = "primary", radius: t = "full", testId: n = "veevart-button", ...r }, a) => /* @__PURE__ */ i(Ci, { ref: a, color: e, radius: t, "data-testid": n, ...r })
 );
 Q.displayName = "Button";
@@ -43,7 +43,7 @@ function zs(e) {
   const t = e?.closest('[role="dialog"]');
   return t?.parentElement ?? t ?? void 0;
 }
-const Xe = ot(
+const Xe = ct(
   ({ popoverProps: e, ...t }, n) => {
     const r = ze(null), [a, s] = W(void 0), o = {
       ...e,
@@ -95,7 +95,7 @@ function Ps({
         size: "md",
         radius: "full",
         children: e.map((s) => /* @__PURE__ */ i(
-          at,
+          it,
           {
             textValue: s.label,
             "data-testid": `language-select-option-${s.code}`,
@@ -124,7 +124,7 @@ function Ps({
         size: "md",
         radius: "full",
         children: e.map((s) => /* @__PURE__ */ i(
-          at,
+          it,
           {
             textValue: s.code.toUpperCase(),
             "data-testid": `language-select-option-mobile-${s.code}`,
@@ -1183,7 +1183,7 @@ const xe = {
   right: Bi,
   justify: Vi
 };
-function nt(e) {
+function rt(e) {
   return Zs[e];
 }
 function Xs({ value: e, onChange: t, onApply: n, placeholder: r = "#000000" }) {
@@ -1588,7 +1588,7 @@ function il({ editor: e, modifiers: t, onToolbarAction: n }) {
     )
   );
   return s.length === 0 ? null : /* @__PURE__ */ i(nl, { id: "text-formatting", label: "Text formatting", children: s.map((o) => {
-    const l = r[o], c = nt(o);
+    const l = r[o], c = rt(o);
     return /* @__PURE__ */ i(
       Ze,
       {
@@ -1690,7 +1690,7 @@ function sl({
         x && /* @__PURE__ */ i(
           Ze,
           {
-            icon: nt("blockquote"),
+            icon: rt("blockquote"),
             label: "Blockquote",
             isActive: l.blockquote?.isActive,
             isDisabled: l.blockquote?.isDisabled,
@@ -1700,7 +1700,7 @@ function sl({
         w && /* @__PURE__ */ i(
           Ze,
           {
-            icon: nt("codeBlock"),
+            icon: rt("codeBlock"),
             label: "Code block",
             isActive: l.codeBlock?.isActive,
             isDisabled: l.codeBlock?.isDisabled,
@@ -1717,7 +1717,7 @@ function sl({
         E && /* @__PURE__ */ i(
           Ze,
           {
-            icon: nt("horizontalRule"),
+            icon: rt("horizontalRule"),
             label: "Horizontal rule",
             onClick: () => c("horizontalRule")
           }
@@ -1730,7 +1730,7 @@ function sl({
         u.includes("undo") && /* @__PURE__ */ i(
           Ze,
           {
-            icon: nt("undo"),
+            icon: rt("undo"),
             label: "Undo",
             isDisabled: l.undo?.isDisabled,
             onClick: () => c("undo")
@@ -1739,7 +1739,7 @@ function sl({
         u.includes("redo") && /* @__PURE__ */ i(
           Ze,
           {
-            icon: nt("redo"),
+            icon: rt("redo"),
             label: "Redo",
             isDisabled: l.redo?.isDisabled,
             onClick: () => c("redo")
@@ -2230,7 +2230,7 @@ const ml = ({
       " words"
     ] })
   ] });
-}, dn = ot((e, t) => {
+}, dn = ct((e, t) => {
   const {
     minRows: n = 10,
     maxRows: r = 30,
@@ -2323,7 +2323,7 @@ const ml = ({
   ] });
 });
 dn.displayName = "TipTapEditor";
-const pl = ot((e, t) => {
+const pl = ct((e, t) => {
   const { adapter: n = "tiptap", variant: r = "bordered", ...a } = e;
   return n === "tiptap" ? /* @__PURE__ */ i(dn, { ...a, variant: r, ref: t }) : (console.warn(`Adapter "${n}" is not supported. Using TipTap.`), /* @__PURE__ */ i(dn, { ...a, variant: r, ref: t }));
 });
@@ -2718,7 +2718,7 @@ function Al(e, t) {
     missing: /* @__PURE__ */ new Set()
   };
 }
-function it(e, t) {
+function st(e, t) {
   const n = br[e] || (br[e] = /* @__PURE__ */ Object.create(null));
   return n[t] || (n[t] = Al(e, t));
 }
@@ -2776,14 +2776,14 @@ function Ca(e) {
 function yr(e) {
   const t = typeof e == "string" ? Pt(e, !0, xt) : e;
   if (t) {
-    const n = it(t.provider, t.prefix), r = t.name;
+    const n = st(t.provider, t.prefix), r = t.name;
     return n.icons[r] || (n.missing.has(r) ? null : void 0);
   }
 }
 function El(e, t) {
   const n = Pt(e, !0, xt);
   if (!n) return !1;
-  const r = it(n.provider, n.prefix);
+  const r = st(n.provider, n.prefix);
   return t ? Dl(r, n.name, t) : (r.missing.add(n.name), !0);
 }
 function Il(e, t) {
@@ -2799,7 +2799,7 @@ function Il(e, t) {
     prefix: n,
     name: "a"
   })) return !1;
-  const r = it(t, n);
+  const r = st(t, n);
   return !!Na(r, e);
 }
 const Sa = Object.freeze({
@@ -3107,7 +3107,7 @@ function eo(e) {
   return e.forEach((a) => {
     if (r.name === a.name && r.prefix === a.prefix && r.provider === a.provider) return;
     r = a;
-    const s = a.provider, o = a.prefix, l = a.name, c = n[s] || (n[s] = /* @__PURE__ */ Object.create(null)), d = c[o] || (c[o] = it(s, o));
+    const s = a.provider, o = a.prefix, l = a.name, c = n[s] || (n[s] = /* @__PURE__ */ Object.create(null)), d = c[o] || (c[o] = st(s, o));
     let u;
     l in d.icons ? u = t.loaded : o === "" || d.missing.has(l) ? u = t.missing : u = t.pending;
     const p = {
@@ -3387,11 +3387,11 @@ const co = (e, t) => {
   return r.pending.forEach((c) => {
     const { provider: d, prefix: u } = c;
     if (u === l && d === o) return;
-    o = d, l = u, s.push(it(d, u));
+    o = d, l = u, s.push(st(d, u));
     const p = a[d] || (a[d] = /* @__PURE__ */ Object.create(null));
     p[u] || (p[u] = []);
   }), r.pending.forEach((c) => {
-    const { provider: d, prefix: u, name: p } = c, y = it(d, u), m = y.pendingIcons || (y.pendingIcons = /* @__PURE__ */ new Set());
+    const { provider: d, prefix: u, name: p } = c, y = st(d, u), m = y.pendingIcons || (y.pendingIcons = /* @__PURE__ */ new Set());
     m.has(p) || (m.add(p), a[d][u].push(p));
   }), s.forEach((c) => {
     const d = a[c.provider][c.prefix];
@@ -3689,11 +3689,11 @@ function Ma(e) {
     ...y
   }, e, p) : e.children ? e.children : e.fallback ? e.fallback : ln("span", {});
 }
-const j = ot((e, t) => Ma({
+const j = ct((e, t) => Ma({
   ...e,
   _ref: t
 }));
-ot((e, t) => Ma({
+ct((e, t) => Ma({
   inline: !0,
   ...e,
   _ref: t
@@ -3992,7 +3992,7 @@ const $o = {
       )
     ] });
   }, Ke = (le, he) => l?.renderDisabledState ? l.renderDisabledState(le, he) : le === "soldOut" && l?.renderSoldOut ? l.renderSoldOut(he) : le === "maxReached" && l?.renderMaxReachedAlert ? l.renderMaxReachedAlert(he) : /* @__PURE__ */ i(
-    lt,
+    ot,
     {
       "data-testid": se[le],
       color: fe[le],
@@ -4724,12 +4724,12 @@ function yn(e, t = {}) {
   }
   return t;
 }
-function rt(e, t, n) {
+function at(e, t, n) {
   n || (n = yn(t));
   for (const r in e) {
     const a = e[r];
     if (Ra(a))
-      ue(t) || bn(n[r]) ? n[r] = yn(a, Array.isArray(a) ? [] : {}) : rt(a, $e(t) ? {} : t[r], n[r]);
+      ue(t) || bn(n[r]) ? n[r] = yn(a, Array.isArray(a) ? [] : {}) : at(a, $e(t) ? {} : t[r], n[r]);
     else {
       const s = t[r];
       n[r] = !Te(a, s);
@@ -4848,7 +4848,7 @@ function zr(e, t, n = "validate") {
       ref: t
     };
 }
-var tt = (e) => be(e) && !Tt(e) ? e : {
+var nt = (e) => be(e) && !Tt(e) ? e : {
   value: e,
   message: ""
 }, Or = async (e, t, n, r, a, s) => {
@@ -4867,7 +4867,7 @@ var tt = (e) => be(e) && !Tt(e) ? e : {
     };
   };
   if (s ? !Array.isArray(S) || !S.length : c && (!P && (A || $e(S)) || Ie(S) && !S || F && !Va(l).isValid || I && !Ua(l).isValid)) {
-    const { value: $, message: L } = Me(c) ? { value: !!c, message: c } : tt(c);
+    const { value: $, message: L } = Me(c) ? { value: !!c, message: c } : nt(c);
     if ($ && (C[N] = {
       type: Re.required,
       message: L,
@@ -4878,7 +4878,7 @@ var tt = (e) => be(e) && !Tt(e) ? e : {
   }
   if (!A && (!$e(p) || !$e(y))) {
     let $, L;
-    const z = tt(y), U = tt(p);
+    const z = nt(y), U = nt(p);
     if (!$e(S) && !isNaN(S)) {
       const J = o.valueAsNumber || S && +S;
       $e(z.value) || ($ = J > z.value), $e(U.value) || (L = J < U.value);
@@ -4890,12 +4890,12 @@ var tt = (e) => be(e) && !Tt(e) ? e : {
       return b(C[N].message), C;
   }
   if ((d || u) && !A && (Me(S) || s && Array.isArray(S))) {
-    const $ = tt(d), L = tt(u), z = !$e($.value) && S.length > +$.value, U = !$e(L.value) && S.length < +L.value;
+    const $ = nt(d), L = nt(u), z = !$e($.value) && S.length > +$.value, U = !$e(L.value) && S.length < +L.value;
     if ((z || U) && (M(z, $.message, L.message), !r))
       return b(C[N].message), C;
   }
   if (m && !A && Me(S)) {
-    const { value: $, message: L } = tt(m);
+    const { value: $, message: L } = nt(m);
     if (Tt($) && !S.match($) && (C[N] = {
       type: Re.pattern,
       message: L,
@@ -5015,7 +5015,7 @@ function nc(e = {}) {
         const q = D(R(n.touchedFields, h), B.argA, B.argB);
         O && oe(n.touchedFields, h, q);
       }
-      (p.dirtyFields || y.dirtyFields) && (n.dirtyFields = rt(a, s)), m.state.next({
+      (p.dirtyFields || y.dirtyFields) && (n.dirtyFields = at(a, s)), m.state.next({
         name: h,
         isDirty: $(h, v),
         dirtyFields: n.dirtyFields,
@@ -5135,7 +5135,7 @@ function nc(e = {}) {
       values: pe(s)
     }), (p.isDirty || p.dirtyFields || y.isDirty || y.dirtyFields) && D.shouldDirty && m.state.next({
       name: h,
-      dirtyFields: rt(a, s),
+      dirtyFields: at(a, s),
       isDirty: $(h, T)
     })) : B && !B._f && !$e(T) ? J(h, T, D) : U(h, T, D), Tr(h, l) ? m.state.next({
       ...n,
@@ -5349,7 +5349,7 @@ function nc(e = {}) {
       if (v.keepDirtyValues) {
         const q = /* @__PURE__ */ new Set([
           ...l.mount,
-          ...Object.keys(rt(a, s))
+          ...Object.keys(at(a, s))
         ]);
         for (const re of Array.from(q)) {
           const ae = R(n.dirtyFields, re), Ne = R(s, re), Qe = R(T, re);
@@ -5394,7 +5394,7 @@ function nc(e = {}) {
       submitCount: v.keepSubmitCount ? n.submitCount : 0,
       isDirty: O ? !1 : v.keepDirty ? n.isDirty : !!(v.keepDefaultValues && !Te(h, a)),
       isSubmitted: v.keepIsSubmitted ? n.isSubmitted : !1,
-      dirtyFields: O ? {} : v.keepDirtyValues ? v.keepDefaultValues && s ? rt(a, s) : n.dirtyFields : v.keepDefaultValues && h ? rt(a, h) : v.keepDirty ? n.dirtyFields : {},
+      dirtyFields: O ? {} : v.keepDirtyValues ? v.keepDefaultValues && s ? at(a, s) : n.dirtyFields : v.keepDefaultValues && h ? at(a, h) : v.keepDirty ? n.dirtyFields : {},
       touchedFields: v.keepTouched ? n.touchedFields : {},
       errors: v.keepErrors ? n.errors : {},
       isSubmitSuccessful: v.keepIsSubmitSuccessful ? n.isSubmitSuccessful : !1,
@@ -6761,7 +6761,7 @@ function Za(e, t) {
 function Zn(e, t) {
   if (kc(e.calendar, t)) return e;
   let n = t.fromJulianDay(e.calendar.toJulianDay(e)), r = e.copy();
-  return r.calendar = t, r.era = n.era, r.year = n.year, r.month = n.month, r.day = n.day, st(r), r;
+  return r.calendar = t, r.era = n.era, r.year = n.year, r.month = n.month, r.day = n.day, lt(r), r;
 }
 function Jn(e, t) {
   let n = e.copy(), r = "hour" in n ? Lc(n, t) : 0;
@@ -6796,7 +6796,7 @@ function Dc(e) {
 function Ja(e) {
   e.month = Math.max(1, Math.min(e.calendar.getMonthsInYear(e), e.month)), e.day = Math.max(1, Math.min(e.calendar.getDaysInMonth(e), e.day));
 }
-function st(e) {
+function lt(e) {
   e.calendar.constrainDate && e.calendar.constrainDate(e), e.year = Math.max(1, Math.min(e.calendar.getYearsInEra(e), e.year)), Ja(e);
 }
 function Ec(e) {
@@ -6809,7 +6809,7 @@ function Xa(e, t) {
 }
 function ei(e, t) {
   let n = e.copy();
-  return t.era != null && (n.era = t.era), t.year != null && (n.year = t.year), t.month != null && (n.month = t.month), t.day != null && (n.day = t.day), st(n), n;
+  return t.era != null && (n.era = t.era), t.year != null && (n.year = t.year), t.month != null && (n.month = t.month), t.day != null && (n.day = t.day), lt(n), n;
 }
 function Ic(e, t) {
   let n = e.copy();
@@ -6836,7 +6836,7 @@ function ti(e, t, n, r) {
     case "era": {
       let l = e.calendar.getEras(), c = l.indexOf(e.era);
       if (c < 0) throw new Error("Invalid era: " + e.era);
-      c = We(c, n, 0, l.length - 1, r?.round), a.era = l[c], st(a);
+      c = We(c, n, 0, l.length - 1, r?.round), a.era = l[c], lt(a);
       break;
     }
     case "year":
@@ -6852,7 +6852,7 @@ function ti(e, t, n, r) {
     default:
       throw new Error("Unsupported field " + t);
   }
-  return e.calendar.balanceDate && e.calendar.balanceDate(a), st(a), a;
+  return e.calendar.balanceDate && e.calendar.balanceDate(a), lt(a), a;
 }
 function Tc(e, t, n, r) {
   let a = e.copy();
@@ -6978,7 +6978,7 @@ class vt {
       value: void 0
     });
     let [n, r, a, s, o] = ai(t);
-    this.calendar = n, this.era = r, this.year = a, this.month = s, this.day = o, st(this);
+    this.calendar = n, this.era = r, this.year = a, this.month = s, this.day = o, lt(this);
   }
 }
 var Uc = /* @__PURE__ */ new WeakMap();
@@ -7033,7 +7033,7 @@ class _t {
       value: void 0
     });
     let [n, r, a, s, o] = ai(t);
-    this.calendar = n, this.era = r, this.year = a, this.month = s, this.day = o, this.hour = t.shift() || 0, this.minute = t.shift() || 0, this.second = t.shift() || 0, this.millisecond = t.shift() || 0, st(this);
+    this.calendar = n, this.era = r, this.year = a, this.month = s, this.day = o, this.hour = t.shift() || 0, this.minute = t.shift() || 0, this.second = t.shift() || 0, this.millisecond = t.shift() || 0, lt(this);
   }
 }
 const jc = {
@@ -7426,7 +7426,7 @@ function sd({
             });
           },
           classNames: jr,
-          children: Zc.map((l) => /* @__PURE__ */ i(at, { textValue: n[l], children: n[l] }, l))
+          children: Zc.map((l) => /* @__PURE__ */ i(it, { textValue: n[l], children: n[l] }, l))
         }
       ) }, o);
     if (o === "dayOfMonth") {
@@ -7449,7 +7449,7 @@ function sd({
             });
           },
           classNames: jr,
-          children: Jc.map((c) => /* @__PURE__ */ i(at, { textValue: qr(c), children: qr(c) }, String(c)))
+          children: Jc.map((c) => /* @__PURE__ */ i(it, { textValue: qr(c), children: qr(c) }, String(c)))
         }
       ) }, o);
     }
@@ -7508,7 +7508,7 @@ function ld({
           /* @__PURE__ */ i("span", { children: "▪" }),
           /* @__PURE__ */ i("span", { children: td(d.dueDate, a) }),
           u === 0 && t.length > 1 && /* @__PURE__ */ i(
-            lt,
+            ot,
             {
               size: "sm",
               radius: "full",
@@ -7811,7 +7811,7 @@ function If({
             /* @__PURE__ */ i("td", { className: "px-2 py-3", children: x.format(b.amount) }),
             /* @__PURE__ */ i("td", { className: "px-2 py-3", children: Kr(b.dueDate, n) }),
             /* @__PURE__ */ i("td", { className: "px-2 py-3", children: /* @__PURE__ */ i(
-              lt,
+              ot,
               {
                 size: "sm",
                 radius: "full",
@@ -8108,7 +8108,7 @@ const hd = {
               children: /* @__PURE__ */ i("p", { className: "text-center", children: n })
             }
           ),
-          w && /* @__PURE__ */ i(lt, { "data-testid": "item-card-status", color: m, size: "sm", variant: "flat", className: "px-2", children: w })
+          w && /* @__PURE__ */ i(ot, { "data-testid": "item-card-status", color: m, size: "sm", variant: "flat", className: "px-2", children: w })
         ] }),
         o && /* @__PURE__ */ i("p", { className: g("font-semibold text-right", d ? "text-lg" : "text-2xl"), "data-testid": "item-card-price", children: N })
       ] })
@@ -9059,7 +9059,7 @@ const Vd = "No sessions available for this date", Bd = (e) => e === "sold-out" |
                     A.endTime
                   ] }),
                   /* @__PURE__ */ i(
-                    lt,
+                    ot,
                     {
                       size: "sm",
                       color: u ? u(A) : Bd(A.status),
@@ -9426,7 +9426,7 @@ const Qd = {
             ]
           }
         },
-        children: t.map((C) => /* @__PURE__ */ i(at, { "data-testid": `${d}-method-option-${C.value}`, children: C.label }, C.value))
+        children: t.map((C) => /* @__PURE__ */ i(it, { "data-testid": `${d}-method-option-${C.value}`, children: C.label }, C.value))
       }
     ),
     o && /* @__PURE__ */ i(
@@ -9574,7 +9574,7 @@ const au = ({
         /* @__PURE__ */ i("span", { className: "flex-1 truncate", "data-testid": `${d}-label`, children: t.label }),
         /* @__PURE__ */ i("span", { className: "font-semibold tabular-nums", "data-testid": `${d}-amount`, children: et(t.amount, n, r) }),
         /* @__PURE__ */ i(
-          lt,
+          ot,
           {
             size: "sm",
             radius: "full",
@@ -9778,7 +9778,7 @@ const cu = {
           }
         },
         children: e.map((u) => /* @__PURE__ */ i(
-          at,
+          it,
           {
             isDisabled: u.isDisabled,
             startContent: /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "shrink-0", children: sn(u.icon) }),
@@ -10224,7 +10224,7 @@ const xu = 60, vu = (e, t, n = xu) => t ? e > n : e < -n, ci = (e, t) => Math.ma
   onDragEnd: (t, n) => {
     vu(n?.offset?.y ?? 0, e.open) && e.onToggleOpen?.(), e.setDragHeight(null);
   }
-}), ct = (e, t) => et(e.value, t, e.currency), er = ({
+}), tt = (e, t) => et(e.value, t, e.currency), er = ({
   item: e,
   locale: t,
   onRemove: n,
@@ -10250,7 +10250,7 @@ const xu = 60, vu = (e, t, n = xu) => t ? e > n : e < -n, ci = (e, t) => Math.ma
         )
       ] }),
       /* @__PURE__ */ f("div", { className: "flex shrink-0 items-center", children: [
-        e.amount && /* @__PURE__ */ i("span", { "data-testid": `summary-item-amount-${e.id}`, className: "whitespace-nowrap text-base text-foreground", children: ct(e.amount, t) }),
+        e.amount && /* @__PURE__ */ i("span", { "data-testid": `summary-item-amount-${e.id}`, className: "whitespace-nowrap text-base text-foreground", children: tt(e.amount, t) }),
         o && /* @__PURE__ */ i(
           Q,
           {
@@ -10374,7 +10374,7 @@ const di = ({ fee: e, locale: t, className: n }) => /* @__PURE__ */ f("div", { "
       ]
     }
   ),
-  /* @__PURE__ */ i("span", { "data-testid": "summary-service-fee-amount", className: "whitespace-nowrap text-base text-foreground", children: ct(e.amount, t) })
+  /* @__PURE__ */ i("span", { "data-testid": "summary-service-fee-amount", className: "whitespace-nowrap text-base text-foreground", children: tt(e.amount, t) })
 ] });
 di.displayName = "SummaryServiceFeeRow";
 const ui = ({ row: e, locale: t, emphasized: n }) => /* @__PURE__ */ f(
@@ -10391,7 +10391,7 @@ const ui = ({ row: e, locale: t, emphasized: n }) => /* @__PURE__ */ f(
           children: e.label
         }
       ),
-      /* @__PURE__ */ i("span", { "data-testid": `summary-row-amount-${e.key}`, className: "whitespace-nowrap text-base", children: ct(e.amount, t) })
+      /* @__PURE__ */ i("span", { "data-testid": `summary-row-amount-${e.key}`, className: "whitespace-nowrap text-base", children: tt(e.amount, t) })
     ]
   }
 );
@@ -10448,7 +10448,7 @@ const mi = ({ total: e, locale: t, className: n }) => /* @__PURE__ */ f(
     className: g("flex items-center justify-between text-xl font-semibold leading-7 text-foreground", n),
     children: [
       /* @__PURE__ */ i("span", { children: e.label ?? "Total" }),
-      /* @__PURE__ */ i("span", { "data-testid": "summary-total-amount", className: "whitespace-nowrap text-xl font-semibold leading-7", children: ct(e.amount, t) })
+      /* @__PURE__ */ i("span", { "data-testid": "summary-total-amount", className: "whitespace-nowrap text-xl font-semibold leading-7", children: tt(e.amount, t) })
     ]
   }
 );
@@ -10460,7 +10460,7 @@ const hi = ({ secondaryTotal: e, locale: t, className: n }) => /* @__PURE__ */ f
     className: g("flex items-center justify-between text-lg font-semibold leading-7 text-primary", n),
     children: [
       /* @__PURE__ */ i("span", { children: e.label }),
-      /* @__PURE__ */ i("span", { "data-testid": "summary-secondary-total-amount", className: "whitespace-nowrap text-lg font-semibold leading-7", children: ct(e.amount, t) })
+      /* @__PURE__ */ i("span", { "data-testid": "summary-secondary-total-amount", className: "whitespace-nowrap text-lg font-semibold leading-7", children: tt(e.amount, t) })
     ]
   }
 );
@@ -10488,38 +10488,39 @@ Ot.displayName = "SummaryPrimaryCta";
 const pi = ({
   title: e,
   total: t,
-  locale: n,
-  open: r,
-  progress: a,
-  dragging: s,
-  toggleAriaLabel: o,
-  onToggleOpen: l,
-  classNames: c
+  secondaryTotal: n,
+  locale: r,
+  open: a,
+  progress: s,
+  dragging: o,
+  toggleAriaLabel: l,
+  onToggleOpen: c,
+  classNames: d
 }) => /* @__PURE__ */ i("h2", { children: /* @__PURE__ */ f(
   "button",
   {
     type: "button",
     "data-testid": "summary-collapse-toggle",
-    "aria-expanded": r,
-    "aria-label": o,
-    onClick: l,
-    className: g("-mx-4 -mt-4 grid w-[calc(100%_+_32px)] grid-cols-1 px-4 pb-4 pt-4 text-left", c.header),
+    "aria-expanded": a,
+    "aria-label": l,
+    onClick: c,
+    className: g("-mx-4 -mt-4 grid w-[calc(100%_+_32px)] grid-cols-1 px-4 pb-4 pt-4 text-left", d.header),
     children: [
       /* @__PURE__ */ f(
         "span",
         {
-          "aria-hidden": !r,
-          style: { opacity: a },
+          "aria-hidden": !a,
+          style: { opacity: s },
           className: g(
             "col-start-1 row-start-1 flex items-center justify-between",
-            !s && "transition-opacity duration-300"
+            !o && "transition-opacity duration-300"
           ),
           children: [
             /* @__PURE__ */ i(
               "span",
               {
                 "data-testid": "summary-title",
-                className: g("text-xl font-semibold leading-7 text-foreground", c.title),
+                className: g("text-xl font-semibold leading-7 text-foreground", d.title),
                 children: e
               }
             ),
@@ -10528,7 +10529,7 @@ const pi = ({
               {
                 "data-testid": "summary-close",
                 "aria-hidden": "true",
-                className: g("shrink-0 text-foreground", c.closeButton),
+                className: g("shrink-0 text-foreground", d.closeButton),
                 children: /* @__PURE__ */ i(j, { icon: "lucide:x", width: 20, height: 20 })
               }
             )
@@ -10538,15 +10539,21 @@ const pi = ({
       /* @__PURE__ */ f(
         "span",
         {
-          "aria-hidden": r,
-          style: { opacity: 1 - a },
+          "aria-hidden": a,
+          style: { opacity: 1 - s },
           className: g(
-            "col-start-1 row-start-1 flex items-center justify-between text-xl font-semibold leading-7 text-foreground",
-            !s && "transition-opacity duration-300"
+            "col-start-1 row-start-1 flex flex-col gap-2",
+            !o && "transition-opacity duration-300"
           ),
           children: [
-            /* @__PURE__ */ i("span", { children: t.label ?? "Total" }),
-            /* @__PURE__ */ i("span", { className: "whitespace-nowrap", children: ct(t.amount, n) })
+            /* @__PURE__ */ f("span", { className: "flex items-center justify-between text-xl font-semibold leading-7 text-foreground", children: [
+              /* @__PURE__ */ i("span", { children: t.label ?? "Total" }),
+              /* @__PURE__ */ i("span", { className: "whitespace-nowrap", children: tt(t.amount, r) })
+            ] }),
+            n && /* @__PURE__ */ f("span", { className: "flex items-center justify-between text-lg font-semibold leading-7 text-primary", children: [
+              /* @__PURE__ */ i("span", { children: n.label }),
+              /* @__PURE__ */ i("span", { className: "whitespace-nowrap", children: tt(n.amount, r) })
+            ] })
           ]
         }
       )
@@ -10620,7 +10627,7 @@ const bi = ({
             {
               action: r,
               disabledByLoading: a,
-              className: g("flex-1", d.cta),
+              className: g("h-[52px] flex-1", d.cta),
               testId: "summary-cta-compact"
             }
           )
@@ -10642,21 +10649,13 @@ const bi = ({
           {
             action: r,
             disabledByLoading: a,
-            className: g("w-full", d.cta)
+            className: g("h-[52px] w-full", d.cta)
           }
         )
       }
     )
   ] }),
-  l && /* @__PURE__ */ i(
-    "div",
-    {
-      "aria-hidden": !e,
-      style: { opacity: t },
-      className: g(!e && "pointer-events-none", !n && "transition-opacity duration-300"),
-      children: l
-    }
-  )
+  l && /* @__PURE__ */ i("div", { children: l })
 ] });
 bi.displayName = "SummaryActionBar";
 const Au = "(max-width: 767px)", Du = (e) => typeof window < "u" && typeof window.matchMedia == "function" ? window.matchMedia(e).matches : !1, Eu = (e = Au) => {
@@ -10756,6 +10755,7 @@ const Au = "(max-width: 767px)", Du = (e) => typeof window < "u" && typeof windo
           {
             title: e,
             total: l,
+            secondaryTotal: c,
             locale: r,
             open: X,
             progress: Ue,

package/dist/patterns/Summary/components/CollapseHeader.d.ts

@@ -6,6 +6,12 @@ export interface CollapseHeaderProps {
         label?: React.ReactNode;
         amount: Money;
     };
+    /** Optional primary-colored row mirrored under the Total in the compact bar
+     * (e.g. "Due Today"); cross-fades like the Total. */
+    secondaryTotal?: {
+        label: React.ReactNode;
+        amount: Money;
+    };
     locale: string;
     open: boolean;
     /** Open progress 0→1; drives the cross-fade opacity. */

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.16.0",
+    "version": "1.17.0-beta.1",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",