@ledgerhq/lumen-ui-react 0.1.47 → 0.1.49

package/dist/lib/Components/DataTable/DataTable.js

@@ -2,8 +2,8 @@ import { jsx as o, jsxs as m } from "react/jsx-runtime";
 import { createSafeContext as f, cn as w } from "../../../libs/utils-shared/dist/index.js";
 import { flexRender as d } from "@tanstack/react-table";
 import { useCallback as R, Fragment as x } from "react";
-import { TableRoot as B, Table as N, TableLoadingRow as k, TableColGroup as y, TableCol as H, TableHeader as S, TableHeaderRow as G, TableHeaderCell as q, TableSortButton as v, TableBody as b, TableGroupHeaderRow as I, TableRow as F, TableCell as M } from "../Table/Table.js";
-import { SearchInput as V } from "../SearchInput/SearchInput.js";
+import { TableRoot as B, Table as N, TableLoadingRow as k, TableColGroup as y, TableCol as H, TableHeader as S, TableHeaderRow as G, TableHeaderCell as q, TableSortButton as v, TableBody as b, TableGroupHeaderRow as I, TableRow as V, TableCell as F } from "../Table/Table.js";
+import { SearchInput as M } from "../SearchInput/SearchInput.js";
 const [j, i] = f("DataTableContext"), X = ({
   table: l,
   appearance: n = "no-background",
@@ -114,19 +114,19 @@ const [j, i] = f("DataTableContext"), X = ({
         /* @__PURE__ */ m(N, { children: [
           /* @__PURE__ */ o(L, {}),
           !s && /* @__PURE__ */ o(P, {}),
-          u ? /* @__PURE__ */ o(A, {}) : /* @__PURE__ */ o(U, {})
+          u ? /* @__PURE__ */ o(E, {}) : /* @__PURE__ */ o(z, {})
         ] }),
         a === "infinite-scroll" && /* @__PURE__ */ o(k, {})
       ]
     }
   );
-}, U = ({ className: l, ref: n, ...t }) => {
+}, z = ({ className: l, ref: n, ...t }) => {
   const { table: e } = i({
     consumerName: "DataTableBody",
     contextRequired: !0
   });
   return /* @__PURE__ */ o(b, { ref: n, className: l, ...t, children: e.getRowModel().rows.map((a) => /* @__PURE__ */ o(g, { row: a }, a.id)) });
-}, z = (l, n) => {
+}, A = (l, n) => {
   const t = [];
   let e = null;
   for (const a of l) {
@@ -134,7 +134,7 @@ const [j, i] = f("DataTableContext"), X = ({
     (!e || e.key !== s) && (e = { key: s, rows: [], count: 0 }, t.push(e)), e.rows.push(a), e.count++;
   }
   return t;
-}, A = ({
+}, E = ({
   className: l,
   ref: n,
   ...t
@@ -142,7 +142,7 @@ const [j, i] = f("DataTableContext"), X = ({
   const { table: e, groupBy: a, renderGroupHeader: s } = i({
     consumerName: "DataTableGroupedBody",
     contextRequired: !0
-  }), r = z(e.getRowModel().rows, a);
+  }), r = A(e.getRowModel().rows, a);
   return /* @__PURE__ */ o(b, { ref: n, className: l, ...t, children: r.map((c) => /* @__PURE__ */ m(x, { children: [
     /* @__PURE__ */ o(I, { colSpan: c.rows[0].getVisibleCells().length, children: s ? s({ row: c.rows[0], count: c.count }) : c.key }),
     c.rows.map((u) => /* @__PURE__ */ o(g, { row: u }, u.id))
@@ -153,14 +153,14 @@ const [j, i] = f("DataTableContext"), X = ({
     contextRequired: !0
   }), t = !!n;
   return /* @__PURE__ */ o(
-    F,
+    V,
     {
       clickable: t,
       onClick: t ? () => n?.(l) : void 0,
       children: l.getVisibleCells().map((e) => {
         const a = e.column.columnDef.meta;
         return /* @__PURE__ */ o(
-          M,
+          F,
           {
             align: a?.align,
             hideBelow: a?.hideBelow,
@@ -186,7 +186,7 @@ const [j, i] = f("DataTableContext"), X = ({
     [t, l]
   );
   return /* @__PURE__ */ o(
-    V,
+    M,
     {
       value: t.getState().globalFilter ?? "",
       onChange: e,

package/dist/lib/Components/Divider/Divider.js

@@ -1,17 +1,17 @@
-import { jsx as l } from "react/jsx-runtime";
-import { cn as a } from "../../../libs/utils-shared/dist/index.js";
+import { jsx as a } from "react/jsx-runtime";
+import { cn as l } from "../../../libs/utils-shared/dist/index.js";
 const d = ({
   ref: o,
   className: t,
   orientation: r = "horizontal",
   ...e
-}) => /* @__PURE__ */ l(
+}) => /* @__PURE__ */ a(
   "div",
   {
     ref: o,
     role: "separator",
     "aria-orientation": r,
-    className: a(
+    className: l(
       "border-muted-subtle",
       r === "horizontal" ? "w-full border-t" : "h-full border-l",
       t

package/dist/lib/Components/DotIcon/DotIcon.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { useDisabledContext as x, DisabledProvider as v, cn as i } from "../../../libs/utils-shared/dist/index.js";
+import { useDisabledContext as x, DisabledProvider as v, cn as n } from "../../../libs/utils-shared/dist/index.js";
 import { cva as c } from "class-variance-authority";
 import { useMemo as z } from "react";
 const g = c("relative inline-flex w-fit", {
@@ -64,9 +64,9 @@ const g = c("relative inline-flex w-fit", {
   "top-end": ["top", "right"],
   "bottom-start": ["bottom", "left"],
   "bottom-end": ["bottom", "right"]
-}, n = -3, q = (s) => {
+}, i = -3, q = (s) => {
   const [t, o] = I[s];
-  return { [t]: n, [o]: n };
+  return { [t]: i, [o]: i };
 }, M = ({
   children: s,
   icon: t,
@@ -87,14 +87,14 @@ const g = c("relative inline-flex w-fit", {
     "div",
     {
       ref: p,
-      className: i(g({ disabled: f, className: l })),
+      className: n(g({ disabled: f, className: l })),
       ...b,
       children: [
         /* @__PURE__ */ e("div", { className: "inline-flex", children: s }),
         /* @__PURE__ */ e(
           "div",
           {
-            className: i(N({ size: r, shape: d, pin: a, appearance: o })),
+            className: n(N({ size: r, shape: d, pin: a, appearance: o })),
             style: u,
             children: /* @__PURE__ */ e(t, { size: D[r], className: "text-on-interactive" })
           }

package/dist/lib/Components/DotIndicator/getDotIndicatorProps.d.ts

@@ -1,5 +1,9 @@
 export declare const getDotIndicatorProps: <Context extends "avatar", Variant extends keyof {
     avatar: {
+        xs: {
+            size: "sm";
+            appearance: "red";
+        };
         sm: {
             size: "lg";
             appearance: "red";
@@ -8,9 +12,25 @@ export declare const getDotIndicatorProps: <Context extends "avatar", Variant ex
             size: "xl";
             appearance: "red";
         };
+        lg: {
+            size: "xl";
+            appearance: "red";
+        };
+        xl: {
+            size: "xl";
+            appearance: "red";
+        };
+        '2xl': {
+            size: "xl";
+            appearance: "red";
+        };
     };
 }[Context]>(context: Context, variant: Variant) => {
     avatar: {
+        xs: {
+            size: "sm";
+            appearance: "red";
+        };
         sm: {
             size: "lg";
             appearance: "red";
@@ -19,6 +39,18 @@ export declare const getDotIndicatorProps: <Context extends "avatar", Variant ex
             size: "xl";
             appearance: "red";
         };
+        lg: {
+            size: "xl";
+            appearance: "red";
+        };
+        xl: {
+            size: "xl";
+            appearance: "red";
+        };
+        '2xl': {
+            size: "xl";
+            appearance: "red";
+        };
     };
 }[Context][Variant];
 //# sourceMappingURL=getDotIndicatorProps.d.ts.map

package/dist/lib/Components/DotIndicator/getDotIndicatorProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getDotIndicatorProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/DotIndicator/getDotIndicatorProps.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;mBAM/B,CAAC"}
+{"version":3,"file":"getDotIndicatorProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/DotIndicator/getDotIndicatorProps.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAS/B,CAAC"}

package/dist/lib/Components/DotIndicator/getDotIndicatorProps.js

@@ -1,11 +1,14 @@
 import { createPropsResolver as e } from "../../../libs/utils-shared/dist/index.js";
-const a = e({
-  // larger avatars (`lg`, `xl`) don't render a dot indicator
+const r = e({
   avatar: {
+    xs: { size: "sm", appearance: "red" },
     sm: { size: "lg", appearance: "red" },
-    md: { size: "xl", appearance: "red" }
+    md: { size: "xl", appearance: "red" },
+    lg: { size: "xl", appearance: "red" },
+    xl: { size: "xl", appearance: "red" },
+    "2xl": { size: "xl", appearance: "red" }
   }
 });
 export {
-  a as getDotIndicatorProps
+  r as getDotIndicatorProps
 };

package/dist/lib/Components/Icon/createIcon.js

@@ -1,20 +1,20 @@
-import { toPascalCase as c, useDisabledContext as i, cn as l } from "../../../libs/utils-shared/dist/index.js";
+import { toPascalCase as c, useDisabledContext as l, cn as i } from "../../../libs/utils-shared/dist/index.js";
 import { createElement as p } from "react";
 import { Icon as d } from "./Icon.js";
 const b = (e, t) => {
   const r = ({
     ref: o,
-    className: s,
-    disabled: a,
+    className: a,
+    disabled: s,
     ...m
   }) => {
-    const n = i({
+    const n = l({
       consumerName: e,
-      mergeWith: { disabled: a }
+      mergeWith: { disabled: s }
     });
     return p(d, {
       ref: o,
-      className: l(s, n && "text-disabled"),
+      className: i(a, n && "text-disabled"),
       viewBox: t.props.viewBox,
       ...m,
       children: t.props.children

package/dist/lib/Components/Link/Link.js

@@ -36,7 +36,7 @@ const w = k(
 ), V = ({
   ref: d,
   className: m,
-  children: s,
+  children: a,
   appearance: f,
   size: i = "inherit",
   underline: p = !0,
@@ -46,7 +46,7 @@ const w = k(
   disabled: b,
   ...v
 }) => {
-  const a = x({
+  const s = x({
     consumerName: "Link",
     mergeWith: { disabled: b }
   }), r = i ? {
@@ -62,17 +62,17 @@ const w = k(
           appearance: f,
           size: i,
           underline: p,
-          disabled: a
+          disabled: s
         }),
         m
       ),
-      "aria-disabled": a || void 0,
+      "aria-disabled": s || void 0,
       target: n && !t ? "_blank" : void 0,
       rel: n && !t ? "noopener noreferrer" : void 0,
       ...v,
-      children: t ? s : /* @__PURE__ */ l(c, { children: [
+      children: t ? a : /* @__PURE__ */ l(c, { children: [
         o && /* @__PURE__ */ e(o, { size: r }),
-        /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: s }),
+        /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: a }),
         n && /* @__PURE__ */ l(c, { children: [
           /* @__PURE__ */ e(z, { size: r, "aria-hidden": "true" }),
           /* @__PURE__ */ e("span", { className: "sr-only", children: "(opens in a new tab)" })

package/dist/lib/Components/ListItem/ListItem.js

@@ -59,14 +59,14 @@ const [L, l] = b("ListItemTrailing", {
     className: r,
     disabled: n = !1,
     density: f = "expanded",
-    priority: v = "end",
+    priority: x = "end",
     active: u = !1,
-    ...x
+    ...v
   } = s, c = d({
     consumerName: "ListItem",
     mergeWith: { disabled: n }
   });
-  return /* @__PURE__ */ a(p, { value: { disabled: c }, children: /* @__PURE__ */ a(N, { value: { priority: v }, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(p, { value: { disabled: c }, children: /* @__PURE__ */ a(N, { value: { priority: x }, children: /* @__PURE__ */ a(
     "div",
     {
       ref: t,
@@ -81,7 +81,7 @@ const [L, l] = b("ListItemTrailing", {
         }),
         r
       ),
-      ...x,
+      ...v,
       children: i
     }
   ) }) });

package/dist/lib/Components/MediaBanner/MediaBanner.d.ts

@@ -4,7 +4,7 @@ import { MediaBannerDescriptionProps, MediaBannerProps, MediaBannerTitleProps }
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/react-mediabanner--docs Storybook}
  */
-export declare const MediaBanner: ({ ref, imageUrl, onClose, closeAriaLabel, children, className, ...props }: MediaBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MediaBanner: ({ ref, imageUrl, onClose, closeAriaLabel, children, className, onClick, ...props }: MediaBannerProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * The title of the MediaBanner. Clamps at 1 line.
  */

package/dist/lib/Components/MediaBanner/MediaBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBanner.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/MediaBanner/MediaBanner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,2BAA2B,EAC3B,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,2EAQzB,gBAAgB,4CAmDlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAUvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAU7B,CAAC"}
+{"version":3,"file":"MediaBanner.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/MediaBanner/MediaBanner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,2BAA2B,EAC3B,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAejB;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,oFASzB,gBAAgB,4CAuDlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAUvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAU7B,CAAC"}

package/dist/lib/Components/MediaBanner/MediaBanner.js

@@ -1,94 +1,113 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { cn as s } from "../../../libs/utils-shared/dist/index.js";
-import { useState as u, useEffect as v } from "react";
-import { useCommonTranslation as x } from "../../../i18n/useCommonTranslation.js";
-import { Close as h } from "../../Symbols/Icons/Close.js";
-import { InteractiveIcon as N } from "../InteractiveIcon/InteractiveIcon.js";
-const j = ({
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { cn as n, getButtonA11yProps as v } from "../../../libs/utils-shared/dist/index.js";
+import { cva as b } from "class-variance-authority";
+import { useState as x, useEffect as g } from "react";
+import { useCommonTranslation as h } from "../../../i18n/useCommonTranslation.js";
+import { Close as N } from "../../Symbols/Icons/Close.js";
+import { InteractiveIcon as w } from "../InteractiveIcon/InteractiveIcon.js";
+const y = b(
+  "flex h-72 w-full flex-row overflow-hidden rounded-md bg-surface text-start select-none",
+  {
+    variants: {
+      interactive: {
+        true: "group relative cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+        false: "cursor-default"
+      }
+    },
+    defaultVariants: { interactive: !1 }
+  }
+), k = ({
   ref: r,
-  imageUrl: e,
-  onClose: o,
-  closeAriaLabel: t,
-  children: l,
-  className: c,
+  imageUrl: t,
+  onClose: a,
+  closeAriaLabel: s,
+  children: c,
+  className: d,
+  onClick: o,
   ...m
 }) => {
-  const { t: d } = x(), [p, i] = u(!1);
-  v(() => {
-    i(!1);
-  }, [e]);
-  const f = e && !p;
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      ref: r,
-      className: s(
-        "relative flex h-72 flex-row overflow-hidden rounded-md bg-surface",
-        c
-      ),
-      ...m,
-      children: [
-        /* @__PURE__ */ a("div", { className: "flex flex-1 items-center px-12 py-2", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 py-12", children: l }) }),
-        /* @__PURE__ */ n("div", { className: "relative w-128", children: [
-          f && /* @__PURE__ */ a(
-            "img",
+  const { t: u } = h(), [f, l] = x(!1);
+  g(() => {
+    l(!1);
+  }, [t]);
+  const p = t && !f;
+  return /* @__PURE__ */ i("div", { className: n("relative w-full", d), children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: r,
+        ...v({ onClick: o }),
+        className: y({ interactive: !!o }),
+        ...m,
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex flex-1 items-center px-12 py-2", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-4 py-12", children: c }) }),
+          /* @__PURE__ */ i("div", { className: "relative w-128", children: [
+            p && /* @__PURE__ */ e(
+              "img",
+              {
+                src: t,
+                alt: "",
+                "aria-hidden": !0,
+                className: "absolute inset-0 size-full object-cover",
+                onError: () => l(!0)
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-linear-[45deg] from-black/0 from-67% to-black/80" })
+          ] }),
+          !!o && /* @__PURE__ */ e(
+            "div",
             {
-              src: e,
-              alt: "",
               "aria-hidden": !0,
-              className: "absolute inset-0 size-full object-cover",
-              onError: () => i(!0)
+              className: "pointer-events-none absolute inset-0 group-hover:bg-base-transparent-hover group-active:bg-base-transparent-pressed"
             }
-          ),
-          /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-linear-[45deg] from-black/0 from-67% to-black/80" })
-        ] }),
-        o && /* @__PURE__ */ a(
-          N,
-          {
-            type: "button",
-            iconType: "stroked",
-            appearance: "white",
-            icon: h,
-            size: 16,
-            className: "absolute top-8 right-8",
-            onClick: (b) => {
-              b.stopPropagation(), o();
-            },
-            "aria-label": t || d("components.banner.closeAriaLabel")
-          }
-        )
-      ]
-    }
-  );
-}, B = ({
+          )
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ e(
+      w,
+      {
+        "data-testid": "media-banner-close-button",
+        type: "button",
+        iconType: "stroked",
+        appearance: "white",
+        icon: N,
+        size: 16,
+        className: "absolute top-8 right-8",
+        onClick: a,
+        "aria-label": s || u("components.banner.closeAriaLabel")
+      }
+    )
+  ] });
+}, z = ({
   ref: r,
-  children: e,
-  className: o,
-  ...t
-}) => /* @__PURE__ */ a(
+  children: t,
+  className: a,
+  ...s
+}) => /* @__PURE__ */ e(
   "div",
   {
     ref: r,
-    className: s("line-clamp-1 body-2-semi-bold text-base", o),
-    ...t,
-    children: e
+    className: n("line-clamp-1 body-2-semi-bold text-base", a),
+    ...s,
+    children: t
   }
-), L = ({
+), A = ({
   ref: r,
-  children: e,
-  className: o,
-  ...t
-}) => /* @__PURE__ */ a(
+  children: t,
+  className: a,
+  ...s
+}) => /* @__PURE__ */ e(
   "div",
   {
     ref: r,
-    className: s("line-clamp-2 body-3 text-muted", o),
-    ...t,
-    children: e
+    className: n("line-clamp-2 body-3 text-muted", a),
+    ...s,
+    children: t
   }
 );
 export {
-  j as MediaBanner,
-  L as MediaBannerDescription,
-  B as MediaBannerTitle
+  k as MediaBanner,
+  A as MediaBannerDescription,
+  z as MediaBannerTitle
 };

package/dist/lib/Components/MediaCard/MediaCard.js

@@ -67,8 +67,8 @@ const r = {
   onClick: a,
   onClose: l,
   closeAriaLabel: u,
-  className: p,
-  ...f
+  className: f,
+  ...p
 }) => {
   const { t: v } = z(), [g, c] = x(!1), b = t && !g;
   return N(() => {
@@ -79,10 +79,10 @@ const r = {
       ...y({ onClick: a }),
       className: m(
         r.root({ interactive: !!a }),
-        p
+        f
       ),
       ref: i,
-      ...f,
+      ...p,
       children: [
         b && /* @__PURE__ */ e(
           "img",

package/dist/lib/Components/MediaImage/MediaImage.js

@@ -47,7 +47,7 @@ const S = {
   className: n,
   src: r,
   alt: l,
-  size: i = 48,
+  size: a = 48,
   shape: u = "square",
   imgLoading: m = "eager",
   fallback: t,
@@ -55,18 +55,18 @@ const S = {
   disabled: c = !1,
   ...f
 }) => {
-  const [p, a] = v(!1), o = !r || p, z = x({
+  const [p, i] = v(!1), o = !r || p, z = x({
     consumerName: "MediaImage",
     mergeWith: { disabled: c }
   });
   return N(() => {
-    a(!1);
+    i(!1);
   }, [r]), /* @__PURE__ */ h(
     "div",
     {
       ref: d,
       className: b(
-        y.root({ size: i, shape: u, disabled: z }),
+        y.root({ size: a, shape: u, disabled: z }),
         n
       ),
       role: "img",
@@ -78,7 +78,7 @@ const S = {
           "span",
           {
             className: "text-base select-none",
-            style: { fontSize: S[i] },
+            style: { fontSize: S[a] },
             "aria-hidden": "true",
             children: t[0]?.toUpperCase()
           }
@@ -90,7 +90,7 @@ const S = {
             src: r,
             alt: "",
             loading: m,
-            onError: () => a(!0),
+            onError: () => i(!0),
             className: "size-full object-cover",
             "aria-hidden": "true"
           }