@adyen/adyen-platform-experience-web 1.7.1 → 1.8.0

package/dist/es/components/external/TransactionDetails/hooks/useTransactionRefundMetadata/useTransactionRefundMetadata.js

@@ -1,126 +1,124 @@
-import { useMemo as a } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import W from "../../../../../core/Context/useCoreContext.js";
-import { AlertTypeOption as A } from "../../../../internal/Alert/types.js";
-import { RefundMode as p, RefundStatus as b, RefundedState as g } from "../../context/types.js";
-import { checkRefundStatusCollection as j } from "./helpers.js";
-import { boolOrFalse as z } from "../../../../../utils/value/bool.js";
-import { isFunction as q, isUndefined as J } from "../../../../../utils/value/is.js";
-import { useConfigContext as K } from "../../../../../core/ConfigContext/context.js";
-const H = ["completed", "in_progress", "failed"], te = (t) => {
-  var S, v, F;
-  const { i18n: o } = W(), e = t == null ? void 0 : t.refundDetails, s = (e == null ? void 0 : e.refundMode) ?? p.FULL_AMOUNT, E = z(e == null ? void 0 : e.refundLocked), G = s !== p.NON_REFUNDABLE, c = (S = t == null ? void 0 : t.originalAmount) == null ? void 0 : S.value, f = a(() => {
-    var r;
-    return t ? Math.max(0, ((r = e == null ? void 0 : e.refundableAmount) == null ? void 0 : r.value) ?? 0) : 0;
-  }, [e, t]), M = q(K().endpoints.initiateRefund), O = M && G && f > 0, N = ((v = e == null ? void 0 : e.refundableAmount) == null ? void 0 : v.currency) ?? (t == null ? void 0 : t.amount.currency) ?? "", x = !O || E, u = a(() => {
-    var I;
-    const r = ((I = t == null ? void 0 : t.refundDetails) == null ? void 0 : I.refundStatuses) ?? [];
-    return (r == null ? void 0 : r.filter((n) => n.amount.value !== 0).sort((n, d) => H.includes(n.status) && H.includes(d.status) && H.indexOf(n.status) > H.indexOf(d.status) ? 0 : -1).reduce((n, d) => {
-      var T;
-      const l = d.status, R = ~d.amount.value + 1;
-      return n != null && n[l] ? ((T = n == null ? void 0 : n[l]) == null || T.amounts.push(R), n) : { ...n, [l]: { amounts: [R], currency: d.amount.currency } };
-    }, {})) ?? {};
-  }, [(F = t == null ? void 0 : t.refundDetails) == null ? void 0 : F.refundStatuses]), m = a(() => {
-    var I, n;
-    const r = (n = (I = u.completed) == null ? void 0 : I.amounts) == null ? void 0 : n.reduce((d, l) => d + l, 0);
-    return r ? Math.max(0, r ?? 0) : 0;
-  }, [u]), { some: h, every: i } = a(
-    () => j(({ status: r }) => r === b.COMPLETED, e == null ? void 0 : e.refundStatuses),
+import { useMemo as c } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import x from "../../../../../core/Context/useCoreContext.js";
+import { AlertTypeOption as f } from "../../../../internal/Alert/types.js";
+import { RefundMode as i, RefundStatus as T, RefundedState as N } from "../../context/types.js";
+import { checkRefundStatusCollection as w } from "./helpers.js";
+import { boolOrFalse as k } from "../../../../../utils/value/bool.js";
+import { isFunction as j, isUndefined as B } from "../../../../../utils/value/is.js";
+import { useConfigContext as W } from "../../../../../core/ConfigContext/context.js";
+const b = ["completed", "in_progress", "failed"], $ = (u) => {
+  var F, v, P;
+  const { i18n: r } = x(), e = u == null ? void 0 : u.refundDetails, a = (e == null ? void 0 : e.refundMode) ?? i.FULL_AMOUNT, M = k(e == null ? void 0 : e.refundLocked), E = a !== i.NON_REFUNDABLE, d = (F = u == null ? void 0 : u.originalAmount) == null ? void 0 : F.value, s = c(() => {
+    var n;
+    return u ? Math.max(0, ((n = e == null ? void 0 : e.refundableAmount) == null ? void 0 : n.value) ?? 0) : 0;
+  }, [e, u]), G = j(W().endpoints.initiateRefund), g = G && E && s > 0, R = ((v = e == null ? void 0 : e.refundableAmount) == null ? void 0 : v.currency) ?? (u == null ? void 0 : u.amount.currency) ?? "", U = !g || M, L = c(() => {
+    var A;
+    const n = ((A = u == null ? void 0 : u.refundDetails) == null ? void 0 : A.refundStatuses) ?? [];
+    return (n == null ? void 0 : n.filter((t) => t.amount.value !== 0).sort((t, o) => b.includes(t.status) && b.includes(o.status) && b.indexOf(t.status) > b.indexOf(o.status) ? 0 : -1).reduce(
+      (t, o) => {
+        var p;
+        const m = o.status, y = ~o.amount.value + 1;
+        return t != null && t[m] ? ((p = t == null ? void 0 : t[m]) == null || p.amounts.push(y), t) : { ...t, [m]: { amounts: [y], currency: o.amount.currency } };
+      },
+      {}
+    )) ?? {};
+  }, [(P = u == null ? void 0 : u.refundDetails) == null ? void 0 : P.refundStatuses]), l = c(() => {
+    var A, t;
+    const n = (t = (A = L.completed) == null ? void 0 : A.amounts) == null ? void 0 : t.reduce((o, m) => o + m, 0);
+    return n ? Math.max(0, n ?? 0) : 0;
+  }, [L]), { some: O, every: I } = c(
+    () => w(({ status: n }) => n === T.COMPLETED, e == null ? void 0 : e.refundStatuses),
     [e == null ? void 0 : e.refundStatuses]
-  ), $ = a(() => {
-    var r;
-    return f === 0 && m > 0 && i && m === c ? [{ type: A.HIGHLIGHT, label: o.get("refund.fullAmountRefunded") }] : ((r = Object.keys(u)) == null ? void 0 : r.map((n) => {
-      var T, U;
-      const d = n, l = (T = u == null ? void 0 : u[d]) == null ? void 0 : T.amounts.reduce((L, y, B) => {
-        var C, D, P;
-        const _ = (C = u == null ? void 0 : u[d]) == null ? void 0 : C.amounts.length;
-        return _ > 1 && B === _ - 1 ? `${L ? `${L}` : ""} ${o.get("and")} ${o.amount(y, (D = u == null ? void 0 : u[d]) == null ? void 0 : D.currency)}` : `${L ? `${L},` : ""} ${o.amount(y, (P = u == null ? void 0 : u[d]) == null ? void 0 : P.currency)}`;
-      }, ""), R = (U = u == null ? void 0 : u[d]) == null ? void 0 : U.amounts.reduce((L, y) => L + y, 0);
-      switch (n) {
-        case b.COMPLETED:
+  ), _ = c(() => {
+    var n;
+    return s === 0 && l > 0 && I && l === d ? [{ type: f.HIGHLIGHT, label: r.get("transactions.details.refund.alerts.refundedFull") }] : ((n = Object.keys(L)) == null ? void 0 : n.map((t) => {
+      const { amounts: o, currency: m } = L[t], p = new Intl.ListFormat(r.locale, { type: "conjunction" }).format(o.map((H) => r.amount(H, m))), S = o.reduce((H, D) => H + D, 0);
+      switch (t) {
+        case T.COMPLETED:
           return {
-            type: A.HIGHLIGHT,
-            label: o.get("refund.amountAlreadyRefunded", { values: { amount: l } })
+            type: f.HIGHLIGHT,
+            label: r.get("transactions.details.refund.alerts.refundedAmount", { values: { amount: p } })
           };
-        case b.IN_PROGRESS:
-          return R === c ? {
-            type: A.HIGHLIGHT,
-            label: o.get("refund.theRefundIsBeingProcessed")
+        case T.IN_PROGRESS:
+          return S === d ? {
+            type: f.HIGHLIGHT,
+            label: r.get("transactions.details.refund.alerts.inProgress")
           } : {
-            type: A.HIGHLIGHT,
-            label: o.get("refund.amountInProgress", { values: { amount: l } })
+            type: f.HIGHLIGHT,
+            label: r.get("transactions.details.refund.alerts.inProgressAmount", { values: { amount: p } })
           };
-        case b.FAILED:
-          return R === c ? {
-            type: A.WARNING,
-            label: o.get("refund.fullAmountFailed")
+        case T.FAILED:
+          return S === d ? {
+            type: f.WARNING,
+            label: r.get("transactions.details.refund.alerts.notPossible")
           } : {
-            type: A.WARNING,
-            label: o.get("refund.amountFailed", { values: { amount: l } })
+            type: f.WARNING,
+            label: r.get("transactions.details.refund.alerts.notPossibleAmount", { values: { amount: p } })
           };
         default:
           return;
       }
     })) ?? [];
-  }, [f, c, o, m, u, i]), k = a(() => {
-    if (f > 0) {
-      const r = o.amount(f, N);
-      switch (s) {
-        case p.FULL_AMOUNT:
+  }, [s, d, r, l, L, I]), h = c(() => {
+    if (s > 0) {
+      const n = r.amount(s, R);
+      switch (a) {
+        case i.FULL_AMOUNT:
           return {
-            type: A.HIGHLIGHT,
-            description: o.get("refund.onlyRefundable", { values: { amount: r } })
+            type: f.HIGHLIGHT,
+            description: r.get("transactions.details.refund.alerts.refundableAmount", { values: { amount: n } })
           };
-        case p.PARTIAL_AMOUNT:
+        case i.PARTIAL_AMOUNT:
           return {
-            type: A.HIGHLIGHT,
-            description: o.get("refund.maximumRefundable", { values: { amount: r } })
+            type: f.HIGHLIGHT,
+            description: r.get("transactions.details.refund.alerts.refundableMaximum", { values: { amount: n } })
           };
         default:
           return null;
       }
     }
     return null;
-  }, [o, f, N, s]), w = a(() => {
-    switch (s) {
-      case p.NON_REFUNDABLE:
-        if (f === 0 && m > 0 && i && m === c)
-          return g.FULL;
+  }, [r, s, R, a]), C = c(() => {
+    switch (a) {
+      case i.NON_REFUNDABLE:
+        if (s === 0 && l > 0 && I && l === d)
+          return N.FULL;
     }
-    switch (s) {
-      case p.PARTIAL_AMOUNT:
-      case p.PARTIAL_LINE_ITEMS:
-        if (f > 0 && h && m > 0 && !J(c) && m < c)
-          return g.PARTIAL;
+    switch (a) {
+      case i.PARTIAL_AMOUNT:
+      case i.PARTIAL_LINE_ITEMS:
+        if (s > 0 && O && l > 0 && !B(d) && l < d)
+          return N.PARTIAL;
     }
-    return g.INDETERMINATE;
-  }, [f, m, s, c, h, i]);
+    return N.INDETERMINATE;
+  }, [s, l, a, d, O, I]);
   return {
-    refundableAmount: f,
+    refundableAmount: s,
     // the maximum amount still available for refund
-    refundable: G,
+    refundable: E,
     // whether the refund mode of the payment allows for refund
-    refundableAmountLabel: k,
-    refundAvailable: O,
+    refundableAmountLabel: h,
+    refundAvailable: g,
     // whether a refund can be initiated for the payment
-    refundAuthorization: M,
+    refundAuthorization: G,
     // whether the authenticated user has sufficient permission to initiate refunds
-    refundCurrency: N,
+    refundCurrency: R,
     // the payment currency for any initiated refund
-    refundDisabled: x,
+    refundDisabled: U,
     // whether refund action for the payment is disabled (refund view should be prevented)
-    refundedAmount: m,
+    refundedAmount: l,
     // the total amount already refunded
-    refundedState: w,
+    refundedState: C,
     // whether the payment is yet to be, partially or fully refunded
-    refundStatuses: $,
+    refundStatuses: _,
     //the refund statuses
-    refundLocked: E,
+    refundLocked: M,
     // whether refund action for the payment is temporarily locked
-    refundMode: s
+    refundMode: a
     // the refund mode of the payment
   };
 };
 export {
-  te as default,
-  te as useTransactionRefundMetadata
+  $ as default,
+  $ as useTransactionRefundMetadata
 };

package/dist/es/components/external/TransactionsOverview/TransactionsOverviewElement.js

@@ -1,25 +1,18 @@
 var r = Object.defineProperty;
-var s = (e, t, o) => t in e ? r(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var n = (e, t, o) => s(e, typeof t != "symbol" ? t + "" : t, o);
-import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import i from "./components/TransactionsOverviewContainer/TransactionsOverviewContainer.js";
+var s = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => s(o, typeof t != "symbol" ? t + "" : t, e);
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import p from "./components/TransactionsOverviewContainer/TransactionsOverviewContainer.js";
 import { UIElement as a } from "../UIElement/UIElement.js";
-class p extends a {
-  constructor(o) {
-    super(o);
-    n(this, "componentToRender", () => /* @__PURE__ */ c(
-      i,
-      {
-        ...this.props,
-        balanceAccountId: this.props.balanceAccountId,
-        ref: (o) => void (this.componentRef = o)
-      }
-    ));
+class m extends a {
+  constructor(e) {
+    super(e);
+    n(this, "componentToRender", () => /* @__PURE__ */ i(p, { ...this.props }));
     this.componentToRender = this.componentToRender.bind(this);
   }
 }
-n(p, "type", "transactions");
+n(m, "type", "transactions");
 export {
-  p as TransactionsElement,
-  p as default
+  m as TransactionsElement,
+  m as default
 };

package/dist/es/components/external/TransactionsOverview/components/BalanceItem/BalanceItem.js

@@ -1,38 +1,51 @@
-import { jsx as y } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "../../../../../core/Context/useCoreContext.js";
-import { useRef as r, useMemo as p } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { SummaryItem as g } from "../SummaryItem/SummaryItem.js";
-const S = ({ balance: e, isHeader: s = !1, isSkeleton: u = !1, isLoading: m = !1, widths: n, onWidthsSet: l, isEmpty: f }) => {
-  const { i18n: t } = a(), o = r(null), i = r(null), c = p(
+import { jsx as g } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import y from "../../../../../core/Context/useCoreContext.js";
+import { useRef as s, useMemo as p } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { SummaryItem as h } from "../SummaryItem/SummaryItem.js";
+const x = ({
+  balance: e,
+  isHeader: o = !1,
+  isSkeleton: u = !1,
+  isLoading: l = !1,
+  widths: n,
+  onWidthsSet: m,
+  isEmpty: i,
+  balanceElemId: a
+}) => {
+  const { i18n: t } = y(), r = s(null), f = s(null), c = p(
     () => [
       {
-        labelKey: "accountBalance",
-        ref: o,
+        elemId: a,
+        labelKey: "transactions.overview.balances.tags.balance",
+        ref: r,
         skeletonWidth: 80,
-        getValue: () => e && t.amount(e.value, e.currency)
+        getValue: () => e && t.amount(e.value, e.currency),
+        get ariaLabel() {
+          return `${t.get(this.labelKey)}: ${this.getValue()}`;
+        }
       },
       {
-        ref: i,
+        ref: f,
         skeletonWidth: 40,
         valueHasLabelStyle: !0,
         getValue: () => e == null ? void 0 : e.currency
       }
     ],
-    [e, o, t]
+    [e, r, t]
   );
-  return /* @__PURE__ */ y(
-    g,
+  return /* @__PURE__ */ g(
+    h,
     {
-      isEmpty: f,
+      isEmpty: i,
       columnConfigs: c,
-      isHeader: s,
+      isHeader: o,
       isSkeletonVisible: u,
-      isLoading: m,
+      isLoading: l,
       widths: n,
-      onWidthsSet: l
+      onWidthsSet: m
     }
   );
 };
 export {
-  S as BalanceItem
+  x as BalanceItem
 };

package/dist/es/components/external/TransactionsOverview/components/Balances/Balances.js

@@ -1,51 +1,78 @@
-import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useCallback as k, useMemo as p, useEffect as y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useFetch as W } from "../../../../../hooks/useFetch.js";
-import { memo as g } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { BASE_CLASS as w } from "./constants.js";
-import F from "../../../../internal/ExpandableCard/ExpandableCard.js";
-import { BaseList as L } from "../../../../internal/BaseList/BaseList.js";
-import { BalanceItem as u } from "../BalanceItem/BalanceItem.js";
-import { useMaxWidthsState as O } from "../../hooks/useMaxWidths.js";
-import { useConfigContext as T } from "../../../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as q } from "../../../../../utils/value/constants.js";
-const G = g(({ balanceAccountId: o, defaultCurrencyCode: m, onCurrenciesChange: f, fullWidth: S }) => {
-  const { getBalances: s } = T().endpoints, x = k(async () => s == null ? void 0 : s(q, {
-    path: { balanceAccountId: o }
-  }), [o, s]), { data: t, error: B, isFetching: a } = W({
-    fetchOptions: p(() => ({ enabled: !!o && !!s }), [o, s]),
-    queryFn: x
-  }), h = !o || a, E = !!B || !(t != null && t.data.length), e = p(() => (t == null ? void 0 : t.data) && [...t.data].sort(({ currency: r }, { currency: n }) => {
-    if (m) {
-      if (r === m) return -1;
-      if (n === m) return 1;
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as s, useCallback as B, useEffect as M } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as F } from "../../../../../hooks/useFetch.js";
+import { memo as I } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { BASE_CLASS as W } from "./constants.js";
+import O from "../../../../../core/Context/useCoreContext.js";
+import T from "../../../../internal/ExpandableCard/ExpandableCard.js";
+import { BalanceItem as y } from "../BalanceItem/BalanceItem.js";
+import { useMaxWidthsState as q } from "../../hooks/useMaxWidths.js";
+import { Fragment as L } from "../../../../../external/preact/dist/preact.module.js";
+import { useConfigContext as C } from "../../../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as P } from "../../../../../utils/value/constants.js";
+import { uniqueId as _ } from "../../../../../utils/random/uniqueId.js";
+const X = I(({ balanceAccountId: n, defaultCurrencyCode: c, onCurrenciesChange: v, fullWidth: x }) => {
+  const { i18n: l } = O(), { getBalances: o } = C().endpoints, g = s(() => l.get("transactions.overview.balances.labels.default"), [l]), d = s(() => l.get("transactions.overview.balances.currency.label"), [l]), S = B(async () => o == null ? void 0 : o(P, {
+    path: { balanceAccountId: n }
+  }), [n, o]), { data: r, error: $, isFetching: u } = F({
+    fetchOptions: s(() => ({ enabled: !!n && !!o }), [n, o]),
+    queryFn: S
+  }), m = !n || u, E = !!$ || !(r != null && r.data.length), i = s(() => (r == null ? void 0 : r.data) && [...r.data].sort(({ currency: e }, { currency: h }) => {
+    if (c) {
+      if (e === c) return -1;
+      if (h === c) return 1;
     }
-    return r.localeCompare(n);
-  }), [t == null ? void 0 : t.data, m]), [M, ...l] = p(() => (e == null ? void 0 : e.map((r) => (r.key = `${r.currency}-${Math.random()}`, r))) ?? [], [e]), [c, d] = O();
-  return y(() => {
-    const r = new Set((e == null ? void 0 : e.map(({ currency: n }) => n)) || []);
-    f(Array.from(r), a);
-  }, [e, a, f]), /* @__PURE__ */ i("div", { className: w, children: /* @__PURE__ */ i(
-    F,
+    return e.localeCompare(h);
+  }), [r == null ? void 0 : r.data, c]), [t, ...b] = s(() => (i == null ? void 0 : i.map((e) => (e.key = `${e.currency}-${Math.random()}`, e.balanceElemId = _("elem"), e))) ?? [], [i]), [p, f] = q(), k = s(
+    () => /* @__PURE__ */ a(
+      "div",
+      {
+        role: "listitem",
+        "aria-label": t ? `${d}: ${t.currency}` : void 0,
+        "aria-describedby": t ? `${t.balanceElemId}` : void 0,
+        children: /* @__PURE__ */ a(
+          y,
+          {
+            isEmpty: E,
+            balance: t,
+            widths: p,
+            isHeader: !0,
+            isSkeleton: m,
+            isLoading: m,
+            onWidthsSet: f,
+            balanceElemId: t == null ? void 0 : t.balanceElemId
+          }
+        )
+      }
+    ),
+    [E, t, p, m, f, d]
+  ), w = s(() => !m && b.length ? /* @__PURE__ */ a(L, { children: b.map((e) => /* @__PURE__ */ a(
+    "div",
     {
-      renderHeader: /* @__PURE__ */ i(
-        u,
-        {
-          isEmpty: E,
-          balance: M,
-          widths: c,
-          isHeader: !0,
-          isSkeleton: h,
-          isLoading: h,
-          onWidthsSet: d
-        }
-      ),
+      role: "listitem",
+      "aria-label": `${d}: ${e.currency}`,
+      "aria-describedby": `${e.balanceElemId}`,
+      children: /* @__PURE__ */ a(y, { balance: e, widths: p, onWidthsSet: f, balanceElemId: e.balanceElemId })
+    },
+    e.key
+  )) }) : void 0, [m, b, p, f, d]);
+  return M(() => {
+    const e = new Set((i == null ? void 0 : i.map(({ currency: h }) => h)) || []);
+    v(Array.from(e), u);
+  }, [i, u, v]), /* @__PURE__ */ a("div", { className: W, children: /* @__PURE__ */ a(
+    T,
+    {
+      "aria-label": g,
+      renderContent: ({ collapsibleContent: e }) => /* @__PURE__ */ a("div", { role: "list", "aria-label": l.get("transactions.overview.balances.lists.default"), children: [
+        k,
+        e
+      ] }),
       filled: !0,
-      fullWidth: S,
-      children: l.length && /* @__PURE__ */ i(L, { children: l.map((r) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(u, { balance: r, widths: c, onWidthsSet: d }) }, r.key)) })
+      fullWidth: x,
+      children: w
     }
   ) });
 });
 export {
-  G as Balances
+  X as Balances
 };

package/dist/es/components/external/TransactionsOverview/components/MultiSelectionFilter/MultiSelectionFilter.js

@@ -1,18 +1,20 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as c } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { memo as u } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useResponsiveContainer as t, containerQueries as o } from "../../../../../hooks/useResponsiveContainer.js";
-import c from "../../../../internal/FormFields/Select/Select.js";
-const y = u(
+import f from "../../../../internal/FormFields/Select/Select.js";
+const h = u(
   ({
     placeholder: n,
     selection: r,
     selectionOptions: e,
-    updateSelection: i
+    updateSelection: i,
+    onResetAction: s
   }) => {
-    const l = t(o.down.xs), s = t(o.only.sm), m = t(o.only.md);
-    return e && e.length > 1 ? /* @__PURE__ */ a(
-      c,
+    const a = t(o.down.xs), l = t(o.only.sm), m = t(o.only.md);
+    return e && e.length > 1 && /* @__PURE__ */ c(
+      f,
       {
+        onResetAction: s,
         onChange: i,
         filterable: !1,
         multiSelect: !0,
@@ -20,12 +22,13 @@ const y = u(
         selected: r,
         withoutCollapseIndicator: !0,
         items: e,
-        showOverlay: l,
-        fitPosition: m || s
+        showOverlay: a,
+        fitPosition: m || l,
+        "aria-label": n
       }
-    ) : null;
+    );
   }
 );
 export {
-  y as default
+  h as default
 };

package/dist/es/components/external/TransactionsOverview/components/SummaryItem/SummaryItem.js

@@ -1,46 +1,47 @@
-import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { AmountSkeleton as d } from "../AmountSkeleton/AmountSkeleton.js";
-import { BASE_CLASS as y, PLACEHOLDER_CLASS as T, AMOUNT_CLASS as E, LABEL_CLASS as b, BODY_CLASS as B } from "./constants.js";
-import { SummaryItemLabel as C } from "./SummaryItemLabel.js";
-import { Tooltip as N } from "../../../../internal/Tooltip/Tooltip.js";
-import { TypographyVariant as n } from "../../../../internal/Typography/types.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { AmountSkeleton as f } from "../AmountSkeleton/AmountSkeleton.js";
+import { BASE_CLASS as S, PLACEHOLDER_CLASS as T, AMOUNT_CLASS as b, LABEL_CLASS as E, BODY_CLASS as N } from "./constants.js";
+import { SummaryItemLabel as h } from "./SummaryItemLabel.js";
+import { Tooltip as B } from "../../../../internal/Tooltip/Tooltip.js";
+import { TypographyVariant as s, TypographyElement as I } from "../../../../internal/Typography/types.js";
 import O from "../../../../internal/Typography/Typography.js";
 import _ from "../../../../../core/Context/useCoreContext.js";
 import p from "classnames";
 import { useEffect as x, useCallback as H } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 /* empty css                 */
-import { useResponsiveContainer as I, containerQueries as D } from "../../../../../hooks/useResponsiveContainer.js";
-const W = ({
+import { useResponsiveContainer as D, containerQueries as M } from "../../../../../hooks/useResponsiveContainer.js";
+const $ = ({
   columnConfigs: i,
   isHeader: u = !1,
-  isHovered: h = !1,
+  isHovered: C = !1,
   isSkeletonVisible: l = !1,
-  isLoading: c = !1,
+  isLoading: d = !1,
   widths: m,
   onWidthsSet: L,
   isEmpty: A
 }) => {
-  const { i18n: s } = _();
+  const { i18n: n } = _();
   x(() => {
-    const t = i.map((r) => {
+    const e = i.map((r) => {
       var a, o;
       return ((o = (a = r.ref) == null ? void 0 : a.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0;
     });
-    L(t);
+    L(e);
   }, [L]);
-  const f = (t) => ({ width: m && m[t] ? m[t] : "auto" }), S = I(D.only.xs), v = H(
-    (t, r) => t.valueHasLabelStyle ? n.CAPTION : r && !S ? n.BODY : n.TITLE,
-    [S]
+  const c = (e) => ({ width: m && m[e] ? m[e] : "auto" }), y = D(M.only.xs), v = H(
+    (e, r) => e.valueHasLabelStyle ? s.CAPTION : r && !y ? s.BODY : s.TITLE,
+    [y]
   );
-  return /* @__PURE__ */ e("div", { className: p(y, { [B]: !u }), children: i.map((t, r) => {
-    const a = t.getValue(), o = !!a && a.length > 12;
-    return /* @__PURE__ */ e("div", { children: [
-      u && (t.tooltipLabel ? /* @__PURE__ */ e(N, { content: s.get(`${t.tooltipLabel}`), isContainerHovered: h, children: /* @__PURE__ */ e(C, { config: t, i18n: s, isSkeletonVisible: l }) }) : /* @__PURE__ */ e(C, { config: t, i18n: s, isSkeletonVisible: l })),
-      l ? /* @__PURE__ */ e(d, { isLoading: c, hasMargin: t.hasSkeletonMargin, width: t.skeletonWidth + "px" }) : A ? /* @__PURE__ */ e("span", { className: p([y, T]) }) : /* @__PURE__ */ e("div", { ref: t.ref, style: f(r), children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ t("div", { className: p(S, { [N]: !u }), children: i.map((e, r) => {
+    const a = e.getValue(), o = !!a && a.length > 12;
+    return /* @__PURE__ */ t("div", { children: [
+      u && /* @__PURE__ */ t("div", { role: "presentation", children: e.tooltipLabel ? /* @__PURE__ */ t(B, { content: n.get(`${e.tooltipLabel}`), isContainerHovered: C, children: /* @__PURE__ */ t(h, { config: e, i18n: n, isSkeletonVisible: l }) }) : /* @__PURE__ */ t(h, { config: e, i18n: n, isSkeletonVisible: l }) }),
+      l ? /* @__PURE__ */ t(f, { isLoading: d, hasMargin: e.hasSkeletonMargin, width: e.skeletonWidth + "px" }) : A ? /* @__PURE__ */ t("span", { className: p([S, T]) }) : /* @__PURE__ */ t("div", { id: e.elemId, ref: e.ref, style: c(r), "aria-label": e.ariaLabel, role: "presentation", children: /* @__PURE__ */ t(
         O,
         {
-          variant: v(t, o),
-          className: p({ [b]: t.valueHasLabelStyle, [E]: !t.valueHasLabelStyle }),
+          el: I.SPAN,
+          variant: v(e, o),
+          className: p({ [E]: e.valueHasLabelStyle, [b]: !e.valueHasLabelStyle }),
           children: a
         }
       ) })
@@ -48,5 +49,5 @@ const W = ({
   }) });
 };
 export {
-  W as SummaryItem
+  $ as SummaryItem
 };

package/dist/es/components/external/TransactionsOverview/components/SummaryItem/SummaryItemLabel.js

@@ -1,21 +1,21 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { LABEL_CLASS as l, LABEL_CONTAINER_CLASS as L, LABEL_CONTAINER_CLASS_LOADING as i } from "./constants.js";
-import { TypographyVariant as s } from "../../../../internal/Typography/types.js";
-import A from "../../../../internal/Typography/Typography.js";
-import f from "classnames";
-import { fixedForwardRef as y } from "../../../../../utils/preact/fixedForwardRef.js";
-const d = y(
-  ({ config: r, i18n: e, isSkeletonVisible: m, className: o, ...t }, p) => /* @__PURE__ */ a(
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { LABEL_CLASS as l, LABEL_CONTAINER_CLASS as A, LABEL_CONTAINER_CLASS_LOADING as L } from "./constants.js";
+import { TypographyVariant as i, TypographyElement as s } from "../../../../internal/Typography/types.js";
+import y from "../../../../internal/Typography/Typography.js";
+import N from "classnames";
+import { fixedForwardRef as f } from "../../../../../utils/preact/fixedForwardRef.js";
+const _ = f(
+  ({ config: r, i18n: a, isSkeletonVisible: m, className: o, ...t }, p) => /* @__PURE__ */ e(
     "span",
     {
-      className: f(L, o, { [i]: m }),
+      className: N(A, o, { [L]: m }),
       style: { cursor: "default" },
       ref: p,
       ...t,
-      children: r.labelKey && /* @__PURE__ */ a(A, { variant: s.CAPTION, className: l, children: e.get(r.labelKey) })
+      children: r.labelKey && /* @__PURE__ */ e(y, { el: s.SPAN, variant: i.CAPTION, className: l, children: a.get(r.labelKey) })
     }
   )
 );
 export {
-  d as SummaryItemLabel
+  _ as SummaryItemLabel
 };