@ledgerhq/lumen-ui-react 0.1.62 → 0.1.64

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

@@ -2,14 +2,14 @@ import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import { createSafeContext as w, cn as R } from "../../../../libs/utils-shared/dist/index.js";
 import { flexRender as m } from "@tanstack/react-table";
 import { useCallback as x, Fragment as B } from "react";
-import { TableRoot as N, Table as k, TableLoadingRow as y, TableColGroup as H, TableCol as S, TableHeader as G, TableHeaderRow as v, TableHeaderCell as q, TableSortButton as I, TableBody as b, TableGroupHeaderRow as F, TableRow as L, TableCell as M } from "../Table/Table.js";
-import { SearchInput as P } from "../SearchInput/SearchInput.js";
-const [V, i] = w("DataTableContext"), Y = ({
+import { TableRoot as N, Table as k, TableLoadingRow as y, TableColGroup as H, TableCol as S, TableHeader as G, TableHeaderRow as v, TableHeaderCell as q, TableSortButton as I, TableBody as b, TableGroupHeaderRow as F, TableRow as M, TableCell as P } from "../Table/Table.js";
+import { SearchInput as V } from "../SearchInput/SearchInput.js";
+const [j, i] = w("DataTableContext"), Y = ({
   table: l,
   appearance: n = "no-background",
-  paginationMode: o = "none",
+  paginationMode: t = "none",
   loading: e = !1,
-  onScrollBottom: t,
+  onScrollBottom: o,
   onRowClick: r,
   getRowProps: c,
   groupBy: s,
@@ -21,16 +21,16 @@ const [V, i] = w("DataTableContext"), Y = ({
   ref: C,
   ...f
 }) => /* @__PURE__ */ a(
-  V,
+  j,
   {
     value: {
       hideHeader: T,
       stickyHeader: p,
-      paginationMode: o,
+      paginationMode: t,
       table: l,
       appearance: n,
       loading: e,
-      onScrollBottom: t,
+      onScrollBottom: o,
       onRowClick: r,
       getRowProps: c,
       groupBy: s,
@@ -38,18 +38,18 @@ const [V, i] = w("DataTableContext"), Y = ({
     },
     children: /* @__PURE__ */ a("div", { ref: C, className: R("flex flex-col", h), ...f, children: D })
   }
-), j = () => {
+), L = () => {
   const { table: l } = i({
     consumerName: "DataTableColGroup",
     contextRequired: !0
   });
   return /* @__PURE__ */ a(H, { children: l.getVisibleLeafColumns().map((n) => {
-    const o = n.columnDef.meta;
+    const t = n.columnDef.meta;
     return /* @__PURE__ */ a(
       S,
       {
-        hideBelow: o?.hideBelow,
-        className: o?.className
+        hideBelow: t?.hideBelow,
+        className: t?.className
       },
       n.id
     );
@@ -57,13 +57,13 @@ const [V, i] = w("DataTableContext"), Y = ({
 }, z = ({
   className: l,
   ref: n,
-  ...o
+  ...t
 }) => {
-  const { table: e, stickyHeader: t } = i({
+  const { table: e, stickyHeader: o } = i({
     consumerName: "DataTableHeader",
     contextRequired: !0
   });
-  return /* @__PURE__ */ a(G, { ref: n, className: l, ...o, children: e.getHeaderGroups().map((r) => /* @__PURE__ */ a(v, { stickyHeader: t, children: r.headers.map((c) => {
+  return /* @__PURE__ */ a(G, { ref: n, className: l, ...t, children: e.getHeaderGroups().map((r) => /* @__PURE__ */ a(v, { stickyHeader: o, children: r.headers.map((c) => {
     const s = c.column.columnDef.meta;
     return /* @__PURE__ */ a(
       q,
@@ -91,10 +91,10 @@ const [V, i] = w("DataTableContext"), Y = ({
       c.id
     );
   }) }, r.id)) });
-}, Z = ({ className: l, ref: n, ...o }) => {
+}, Z = ({ className: l, ref: n, ...t }) => {
   const {
     appearance: e,
-    paginationMode: t,
+    paginationMode: o,
     hideHeader: r,
     loading: c,
     onScrollBottom: s,
@@ -111,70 +111,70 @@ const [V, i] = w("DataTableContext"), Y = ({
       loading: c,
       onScrollBottom: s,
       className: l,
-      ...o,
+      ...t,
       children: [
         /* @__PURE__ */ d(k, { children: [
-          /* @__PURE__ */ a(j, {}),
+          /* @__PURE__ */ a(L, {}),
           !r && /* @__PURE__ */ a(z, {}),
           u ? /* @__PURE__ */ a(J, {}) : /* @__PURE__ */ a(A, {})
         ] }),
-        t === "infinite-scroll" && /* @__PURE__ */ a(y, {})
+        o === "infinite-scroll" && /* @__PURE__ */ a(y, {})
       ]
     }
   );
-}, A = ({ className: l, ref: n, ...o }) => {
+}, A = ({ className: l, ref: n, ...t }) => {
   const { table: e } = i({
     consumerName: "DataTableBody",
     contextRequired: !0
   });
-  return /* @__PURE__ */ a(b, { ref: n, className: l, ...o, children: e.getRowModel().rows.map((t) => /* @__PURE__ */ a(g, { row: t }, t.id)) });
+  return /* @__PURE__ */ a(b, { ref: n, className: l, ...t, children: e.getRowModel().rows.map((o) => /* @__PURE__ */ a(g, { row: o }, o.id)) });
 }, E = (l, n) => {
-  const o = [];
+  const t = [];
   let e = null;
-  for (const t of l) {
-    const r = n(t);
-    (!e || e.key !== r) && (e = { key: r, rows: [], count: 0 }, o.push(e)), e.rows.push(t), e.count++;
+  for (const o of l) {
+    const r = n(o);
+    (!e || e.key !== r) && (e = { key: r, rows: [], count: 0 }, t.push(e)), e.rows.push(o), e.count++;
   }
-  return o;
+  return t;
 }, J = ({
   className: l,
   ref: n,
-  ...o
+  ...t
 }) => {
-  const { table: e, groupBy: t, renderGroupHeader: r } = i({
+  const { table: e, groupBy: o, renderGroupHeader: r } = i({
     consumerName: "DataTableGroupedBody",
     contextRequired: !0
   }), c = E(
     e.getRowModel().rows,
-    t
+    o
   );
-  return /* @__PURE__ */ a(b, { ref: n, className: l, ...o, children: c.map((s) => /* @__PURE__ */ d(B, { children: [
+  return /* @__PURE__ */ a(b, { ref: n, className: l, ...t, children: c.map((s) => /* @__PURE__ */ d(B, { children: [
     /* @__PURE__ */ a(F, { colSpan: s.rows[0].getVisibleCells().length, children: r ? r({ row: s.rows[0], count: s.count }) : s.key }),
     s.rows.map((u) => /* @__PURE__ */ a(g, { row: u }, u.id))
   ] }, s.key)) });
 }, g = ({ row: l }) => {
-  const { onRowClick: n, getRowProps: o } = i({
+  const { onRowClick: n, getRowProps: t } = i({
     consumerName: "DataTableRow",
     contextRequired: !0
   }), e = !!n;
   return /* @__PURE__ */ a(
-    L,
+    M,
     {
-      ...o?.(l),
+      ...t?.(l),
       clickable: e,
       onClick: e ? () => n?.(l) : void 0,
       role: e ? "button" : void 0,
-      children: l.getVisibleCells().map((t) => {
-        const r = t.column.columnDef.meta;
+      children: l.getVisibleCells().map((o) => {
+        const r = o.column.columnDef.meta;
         return /* @__PURE__ */ a(
-          M,
+          P,
           {
             align: r?.align,
             hideBelow: r?.hideBelow,
             className: r?.className,
-            children: m(t.column.columnDef.cell, t.getContext())
+            children: m(o.column.columnDef.cell, o.getContext())
           },
-          t.id
+          o.id
         );
       })
     }
@@ -183,19 +183,19 @@ const [V, i] = w("DataTableContext"), Y = ({
   onChange: l,
   ...n
 }) => {
-  const { table: o } = i({
+  const { table: t } = i({
     consumerName: "DataTableGlobalSearchInput",
     contextRequired: !0
   }), e = x(
-    (t) => {
-      o.setGlobalFilter(t.target.value), l?.(t);
+    (o) => {
+      t.setGlobalFilter(o.target.value), l?.(o);
     },
-    [o, l]
+    [t, l]
   );
   return /* @__PURE__ */ a(
-    P,
+    V,
     {
-      value: o.getState().globalFilter ?? "",
+      value: t.getState().globalFilter ?? "",
       onChange: e,
       ...n
     }

package/dist/lib/Components/core/Dialog/DialogHeader/DialogHeader.js

@@ -3,7 +3,7 @@ import { cn as s } from "../../../../../libs/utils-shared/dist/index.js";
 import * as h from "@radix-ui/react-dialog";
 import { cva as u } from "class-variance-authority";
 import { DialogClose as N } from "../DialogClose/DialogClose.js";
-import { useCommonTranslation as x } from "../../../../../i18n/useCommonTranslation.js";
+import { useCommonTranslation as x } from "../../../../../translations/translations.js";
 import { IconButton as f } from "../../IconButton/IconButton.js";
 import { ArrowLeft as b } from "../../../symbols/icons/ArrowLeft.js";
 import { Close as v } from "../../../symbols/icons/Close.js";

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

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

package/dist/lib/Components/core/DotCount/DotCount.js

@@ -45,7 +45,7 @@ const h = m(
     disabled: !1
   }
 });
-function C({
+function N({
   value: e,
   size: t = "md",
   max: b = 99,
@@ -86,7 +86,7 @@ function C({
     }
   );
 }
-C.displayName = "DotCount";
+N.displayName = "DotCount";
 export {
-  C as DotCount
+  N as DotCount
 };

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

@@ -1,8 +1,8 @@
 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 { cva as d } from "class-variance-authority";
-import { useMemo as z } from "react";
-const N = d("relative inline-flex w-fit", {
+import { useMemo as N } from "react";
+const z = d("relative inline-flex w-fit", {
   variants: {
     disabled: {
       true: "opacity-30",
@@ -68,7 +68,7 @@ const N = d("relative inline-flex w-fit", {
   ref: p,
   ...b
 }) => {
-  const u = z(() => y(r), [r]), f = x({
+  const u = N(() => y(r), [r]), f = x({
     consumerName: "DotIcon",
     mergeWith: { disabled: m }
   });
@@ -76,7 +76,7 @@ const N = d("relative inline-flex w-fit", {
     "div",
     {
       ref: p,
-      className: i(N({ disabled: f, className: l })),
+      className: i(z({ disabled: f, className: l })),
       ...b,
       children: [
         /* @__PURE__ */ e("div", { className: "inline-flex", children: s }),

package/dist/lib/Components/core/DotSymbol/DotSymbol.js

@@ -1,4 +1,4 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
 import { useDisabledContext as z, DisabledProvider as N, cn as v } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as d } from "class-variance-authority";
 import { useMemo as g, useState as q, useEffect as y } from "react";
@@ -47,7 +47,7 @@ const D = d("relative inline-flex w-fit", {
       { shape: "circle", className: "rounded-full" }
     ]
   }
-), w = {
+), E = {
   8: -2,
   10: -2,
   12: -2,
@@ -55,18 +55,18 @@ const D = d("relative inline-flex w-fit", {
   20: -3,
   24: -3,
   32: -3
-}, E = {
+}, V = {
   "top-start": ["top", "left"],
   "top-end": ["top", "right"],
   "bottom-start": ["bottom", "left"],
   "bottom-end": ["bottom", "right"]
-}, V = (r, o) => {
-  const [t, s] = E[r], e = w[o];
-  return { [t]: e, [s]: e };
-}, j = ({
-  children: r,
-  src: o,
-  alt: t,
+}, j = (a, t) => {
+  const [r, s] = V[a], e = E[t];
+  return { [r]: e, [s]: e };
+}, w = ({
+  children: a,
+  src: t,
+  alt: r,
   pin: s = "bottom-end",
   size: e = 20,
   shape: n = "circle",
@@ -76,25 +76,25 @@ const D = d("relative inline-flex w-fit", {
   ref: p,
   ...u
 }) => {
-  const b = g(() => V(s, e), [s, e]), [f, i] = q(!1), h = z({
+  const b = g(() => j(s, e), [s, e]), [f, i] = q(!1), h = z({
     consumerName: "DotSymbol",
     mergeWith: { disabled: m }
   });
   return y(() => {
     i(!1);
-  }, [o]), /* @__PURE__ */ a(N, { value: { disabled: !1 }, children: /* @__PURE__ */ x(
+  }, [t]), /* @__PURE__ */ o(N, { value: { disabled: !1 }, children: /* @__PURE__ */ x(
     "div",
     {
       ref: p,
       className: v(D({ disabled: h, className: c })),
       ...u,
       children: [
-        /* @__PURE__ */ a("div", { className: "inline-flex", children: r }),
-        /* @__PURE__ */ a("div", { className: S({ size: e, shape: n, pin: s }), style: b, children: !f && /* @__PURE__ */ a(
+        /* @__PURE__ */ o("div", { className: "inline-flex", children: a }),
+        /* @__PURE__ */ o("div", { className: S({ size: e, shape: n, pin: s }), style: b, children: !f && /* @__PURE__ */ o(
           "img",
           {
-            alt: t,
-            src: o,
+            alt: r,
+            src: t,
             loading: l,
             "aria-hidden": "true",
             onError: () => i(!0)
@@ -104,7 +104,7 @@ const D = d("relative inline-flex w-fit", {
     }
   ) });
 };
-j.displayName = "DotSymbol";
+w.displayName = "DotSymbol";
 export {
-  j as DotSymbol
+  w as DotSymbol
 };

package/dist/lib/Components/core/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Link/Link.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoCzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,IAAI,GAAI,wHAYlB,SAAS,4CAgDX,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Link/Link.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoCzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,IAAI,GAAI,wHAYlB,SAAS,4CAmDX,CAAC"}

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

@@ -1,9 +1,10 @@
-import { jsx as e, jsxs as c, Fragment as l } from "react/jsx-runtime";
-import { useDisabledContext as x, cn as h } from "../../../../libs/utils-shared/dist/index.js";
-import { Slot as g } from "@radix-ui/react-slot";
-import { cva as k } from "class-variance-authority";
-import { ExternalLink as y } from "../../symbols/icons/ExternalLink.js";
-const z = k(
+import { jsx as e, jsxs as l, Fragment as c } from "react/jsx-runtime";
+import { useDisabledContext as h, cn as g } from "../../../../libs/utils-shared/dist/index.js";
+import { Slot as k } from "@radix-ui/react-slot";
+import { cva as N } from "class-variance-authority";
+import { useCommonTranslation as y } from "../../../../translations/translations.js";
+import { ExternalLink as z } from "../../symbols/icons/ExternalLink.js";
+const w = N(
   "inline-flex w-fit max-w-full items-center justify-center transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus",
   {
     variants: {
@@ -16,7 +17,7 @@ const z = k(
       size: {
         sm: "gap-4 body-2-semi-bold",
         md: "gap-8 body-1-semi-bold",
-        inherit: ""
+        inherit: "gap-4"
       },
       underline: {
         true: "underline underline-offset-2",
@@ -34,35 +35,35 @@ const z = k(
       disabled: !1
     }
   }
-), M = ({
+), V = ({
   ref: d,
   className: m,
   children: r,
-  appearance: u,
+  appearance: p,
   size: i = "inherit",
-  underline: p = !0,
+  underline: u = !0,
   icon: f,
   isExternal: n = !1,
   asChild: t = !1,
   disabled: b,
   ...v
 }) => {
-  const a = x({
+  const { t: x } = y(), a = h({
     consumerName: "Link",
     mergeWith: { disabled: b }
-  }), s = i ? {
+  }), o = i ? {
     sm: 16,
     md: 20
-  }[i] : 20, o = f;
+  }[i] : 20, s = f;
   return /* @__PURE__ */ e(
-    t ? g : "a",
+    t ? k : "a",
     {
       ref: d,
-      className: h(
-        z({
-          appearance: u,
+      className: g(
+        w({
+          appearance: p,
           size: i,
-          underline: p,
+          underline: u,
           disabled: a
         }),
         m
@@ -71,17 +72,17 @@ const z = k(
       target: n && !t ? "_blank" : void 0,
       rel: n && !t ? "noopener noreferrer" : void 0,
       ...v,
-      children: t ? r : /* @__PURE__ */ c(l, { children: [
-        o && /* @__PURE__ */ e(o, { size: s }),
+      children: t ? r : /* @__PURE__ */ l(c, { children: [
+        s && /* @__PURE__ */ e(s, { size: o }),
         /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: r }),
-        n && /* @__PURE__ */ c(l, { children: [
-          /* @__PURE__ */ e(y, { size: s, "aria-hidden": "true" }),
-          /* @__PURE__ */ e("span", { className: "sr-only", children: "(opens in a new tab)" })
+        n && /* @__PURE__ */ l(c, { children: [
+          /* @__PURE__ */ e(z, { size: o, "aria-hidden": "true" }),
+          /* @__PURE__ */ e("span", { className: "sr-only", children: x("components.link.opensInNewTabAriaLabel") })
         ] })
       ] })
     }
   );
 };
 export {
-  M as Link
+  V as Link
 };

package/dist/lib/Components/core/ListItem/ListItem.d.ts

@@ -9,7 +9,7 @@ import { ListItemContentProps, ListItemDescriptionProps, ListItemLeadingProps, L
  *
  * <ListItem onClick={() => console.log('Clicked!')}>
  *   <ListItemLeading>
- *     <Spot size={48} appearance="icon" icon={Wallet} />
+ *     <Spot size={48} icon={Wallet} />
  *     <ListItemContent>
  *       <ListItemTitle>Balance</ListItemTitle>
  *       <ListItemDescription>Optional description</ListItemDescription>

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

@@ -181,7 +181,7 @@ const [L, l] = b("ListItemTrailing", {
       children: t
     }
   );
-}, D = ({
+}, k = ({
   ref: e,
   children: t,
   className: s,
@@ -208,7 +208,7 @@ const [L, l] = b("ListItemTrailing", {
       children: t
     }
   );
-}, k = ({
+}, D = ({
   ref: e,
   children: t,
   className: s,
@@ -240,8 +240,8 @@ export {
   R as ListItem,
   P as ListItemContent,
   C as ListItemContentRow,
-  D as ListItemDescription,
+  k as ListItemDescription,
   q as ListItemLeading,
   j as ListItemTitle,
-  k as ListItemTrailing
+  D as ListItemTrailing
 };

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

@@ -2,7 +2,7 @@ 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 g, useEffect as h } from "react";
-import { useCommonTranslation as x } from "../../../../i18n/useCommonTranslation.js";
+import { useCommonTranslation as x } from "../../../../translations/translations.js";
 import { Close as N } from "../../symbols/icons/Close.js";
 import { InteractiveIcon as w } from "../InteractiveIcon/InteractiveIcon.js";
 const y = b(
@@ -18,8 +18,8 @@ const y = b(
   }
 ), k = ({
   ref: r,
-  imageUrl: a,
-  onClose: t,
+  imageUrl: t,
+  onClose: a,
   closeAriaLabel: s,
   children: c,
   className: d,
@@ -29,8 +29,8 @@ const y = b(
   const { t: u } = x(), [f, l] = g(!1);
   h(() => {
     l(!1);
-  }, [a]);
-  const p = a && !f;
+  }, [t]);
+  const p = t && !f;
   return /* @__PURE__ */ i("div", { className: n("relative w-full", d), children: [
     /* @__PURE__ */ i(
       "div",
@@ -45,7 +45,7 @@ const y = b(
             p && /* @__PURE__ */ e(
               "img",
               {
-                src: a,
+                src: t,
                 alt: "",
                 "aria-hidden": !0,
                 className: "absolute inset-0 size-full object-cover",
@@ -64,7 +64,7 @@ const y = b(
         ]
       }
     ),
-    t && /* @__PURE__ */ e(
+    a && /* @__PURE__ */ e(
       w,
       {
         "data-testid": "media-banner-close-button",
@@ -74,36 +74,36 @@ const y = b(
         icon: N,
         size: 16,
         className: "absolute top-8 right-8",
-        onClick: t,
+        onClick: a,
         "aria-label": s || u("components.banner.closeAriaLabel")
       }
     )
   ] });
 }, z = ({
   ref: r,
-  children: a,
-  className: t,
+  children: t,
+  className: a,
   ...s
 }) => /* @__PURE__ */ e(
   "div",
   {
     ref: r,
-    className: n("line-clamp-1 body-2-semi-bold text-base", t),
+    className: n("line-clamp-1 body-2-semi-bold text-base", a),
     ...s,
-    children: a
+    children: t
   }
 ), A = ({
   ref: r,
-  children: a,
-  className: t,
+  children: t,
+  className: a,
   ...s
 }) => /* @__PURE__ */ e(
   "div",
   {
     ref: r,
-    className: n("line-clamp-2 body-3 text-muted", t),
+    className: n("line-clamp-2 body-3 text-muted", a),
     ...s,
-    children: a
+    children: t
   }
 );
 export {

package/dist/lib/Components/core/MediaButton/MediaButton.js

@@ -81,7 +81,7 @@ const b = S("gap-8 body-2-semi-bold", {
     leadingContentShape: "none",
     hasChevron: !0
   }
-}), M = ({
+}), k = ({
   ref: r,
   className: p,
   appearance: i = "gray",
@@ -129,5 +129,5 @@ const b = S("gap-8 body-2-semi-bold", {
   );
 };
 export {
-  M as MediaButton
+  k as MediaButton
 };

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

@@ -3,7 +3,7 @@ import { cn as m, getButtonA11yProps as y } from "../../../../libs/utils-shared/
 import { cva as o } from "class-variance-authority";
 import { useState as x, useEffect as N } from "react";
 import { Close as w } from "../../symbols/icons/Close.js";
-import { useCommonTranslation as z } from "../../../../i18n/useCommonTranslation.js";
+import { useCommonTranslation as z } from "../../../../translations/translations.js";
 import { InteractiveIcon as j } from "../InteractiveIcon/InteractiveIcon.js";
 const r = {
   root: o(