@ledgerhq/lumen-ui-react 0.0.71 → 0.0.73

package/dist/index.js

@@ -4,11 +4,11 @@ import { AmountInput as p } from "./lib/Components/AmountInput/AmountInput.js";
 import { AmountDisplay as m } from "./lib/Components/AmountDisplay/AmountDisplay.js";
 import { Banner as l } from "./lib/Components/Banner/Banner.js";
 import { BaseInput as f } from "./lib/Components/BaseInput/BaseInput.js";
-import { Button as T } from "./lib/Components/Button/Button.js";
+import { Button as S } from "./lib/Components/Button/Button.js";
 import { BaseButton as I } from "./lib/Components/Button/BaseButton.js";
 import { CardButton as d } from "./lib/Components/CardButton/CardButton.js";
 import { Checkbox as B } from "./lib/Components/Checkbox/Checkbox.js";
-import { Dialog as h, DialogBody as M, DialogContent as L, DialogFooter as C, DialogTrigger as D } from "./lib/Components/Dialog/Dialog.js";
+import { Dialog as h, DialogBody as M, DialogContent as C, DialogFooter as L, DialogTrigger as D } from "./lib/Components/Dialog/Dialog.js";
 import { DialogHeader as k } from "./lib/Components/Dialog/DialogHeader/DialogHeader.js";
 import { Divider as N } from "./lib/Components/Divider/Divider.js";
 import { IconButton as y } from "./lib/Components/IconButton/IconButton.js";
@@ -16,19 +16,19 @@ import { InteractiveIcon as P } from "./lib/Components/InteractiveIcon/Interacti
 import { Link as F } from "./lib/Components/Link/Link.js";
 import { ListItem as j, ListItemContent as q, ListItemDescription as z, ListItemIcon as E, ListItemLeading as J, ListItemSpot as K, ListItemTitle as O, ListItemTrailing as Q, ListItemTruncate as U } from "./lib/Components/ListItem/ListItem.js";
 import { Menu as W, MenuCheckboxItem as X, MenuContent as Y, MenuGroup as Z, MenuItem as _, MenuLabel as $, MenuPortal as ee, MenuRadioGroup as oe, MenuRadioItem as te, MenuSeparator as re, MenuSub as ne, MenuSubContent as ie, MenuSubTrigger as pe, MenuTrigger as ae } from "./lib/Components/Menu/Menu.js";
-import { NavBar as ue, NavBarBackButton as le, NavBarCoinCapsule as xe, NavBarTitle as fe, NavBarTrailing as Se } from "./lib/Components/NavBar/NavBar.js";
+import { NavBar as ue, NavBarBackButton as le, NavBarCoinCapsule as xe, NavBarTitle as fe, NavBarTrailing as Te } from "./lib/Components/NavBar/NavBar.js";
 import { SearchInput as ce } from "./lib/Components/SearchInput/SearchInput.js";
-import { Select as ge, SelectContent as de, SelectGroup as se, SelectItem as Be, SelectItemText as be, SelectLabel as he, SelectSeparator as Me, SelectTrigger as Le } from "./lib/Components/Select/Select.js";
+import { Select as ge, SelectContent as de, SelectGroup as se, SelectItem as Be, SelectItemText as be, SelectLabel as he, SelectSeparator as Me, SelectTrigger as Ce } from "./lib/Components/Select/Select.js";
 import { Skeleton as De } from "./lib/Components/Skeleton/Skeleton.js";
 import { Spot as ke } from "./lib/Components/Spot/Spot.js";
 import { Subheader as Ne, SubheaderAction as we, SubheaderCount as ye, SubheaderDescription as Ge, SubheaderInfo as Pe, SubheaderRow as Re, SubheaderShowMore as Fe, SubheaderTitle as He } from "./lib/Components/Subheader/Subheader.js";
 import { Switch as qe } from "./lib/Components/Switch/Switch.js";
 import { Tag as Ee } from "./lib/Components/Tag/Tag.js";
 import { TextInput as Ke } from "./lib/Components/TextInput/TextInput.js";
-import { Tile as Qe, TileContent as Ue, TileDescription as Ve, TileSecondaryAction as We, TileSpot as Xe, TileTitle as Ye } from "./lib/Components/Tile/Tile.js";
-import { TileButton as _e } from "./lib/Components/TileButton/TileButton.js";
-import { Tooltip as eo, TooltipContent as oo, TooltipProvider as to, TooltipTrigger as ro } from "./lib/Components/Tooltip/Tooltip.js";
-import { ThemeProvider as io, useTheme as po } from "./lib/Components/ThemeProvider/ThemeProvider.js";
+import { Tile as Qe, TileContent as Ue, TileDescription as Ve, TileSecondaryAction as We, TileSpot as Xe, TileTitle as Ye, TileTrailingContent as Ze } from "./lib/Components/Tile/Tile.js";
+import { TileButton as $e } from "./lib/Components/TileButton/TileButton.js";
+import { Tooltip as oo, TooltipContent as to, TooltipProvider as ro, TooltipTrigger as no } from "./lib/Components/Tooltip/Tooltip.js";
+import { ThemeProvider as po, useTheme as ao } from "./lib/Components/ThemeProvider/ThemeProvider.js";
 export {
   n as AddressInput,
   m as AmountDisplay,
@@ -36,13 +36,13 @@ export {
   l as Banner,
   I as BaseButton,
   f as BaseInput,
-  T as Button,
+  S as Button,
   d as CardButton,
   B as Checkbox,
   h as Dialog,
   M as DialogBody,
-  L as DialogContent,
-  C as DialogFooter,
+  C as DialogContent,
+  L as DialogFooter,
   k as DialogHeader,
   D as DialogTrigger,
   N as Divider,
@@ -77,7 +77,7 @@ export {
   le as NavBarBackButton,
   xe as NavBarCoinCapsule,
   fe as NavBarTitle,
-  Se as NavBarTrailing,
+  Te as NavBarTrailing,
   ce as SearchInput,
   ge as Select,
   de as SelectContent,
@@ -86,7 +86,7 @@ export {
   be as SelectItemText,
   he as SelectLabel,
   Me as SelectSeparator,
-  Le as SelectTrigger,
+  Ce as SelectTrigger,
   De as Skeleton,
   ke as Spot,
   Ne as Subheader,
@@ -100,17 +100,18 @@ export {
   qe as Switch,
   Ee as Tag,
   Ke as TextInput,
-  io as ThemeProvider,
+  po as ThemeProvider,
   Qe as Tile,
-  _e as TileButton,
+  $e as TileButton,
   Ue as TileContent,
   Ve as TileDescription,
   We as TileSecondaryAction,
   Xe as TileSpot,
   Ye as TileTitle,
-  eo as Tooltip,
-  oo as TooltipContent,
-  to as TooltipProvider,
-  ro as TooltipTrigger,
-  po as useTheme
+  Ze as TileTrailingContent,
+  oo as Tooltip,
+  to as TooltipContent,
+  ro as TooltipProvider,
+  no as TooltipTrigger,
+  ao as useTheme
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmBpC,eAAO,MAAM,IAAI,kHAgBhB,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoBpC,eAAO,MAAM,IAAI,kHAgBhB,CAAC"}

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

@@ -1,12 +1,13 @@
 import { cn as s } from "../../../libs/utils-shared/dist/index.js";
 import { cva as a } from "class-variance-authority";
-import { forwardRef as l, createElement as k } from "react";
-const m = a("inline-block", {
+import { forwardRef as k, createElement as l } from "react";
+const h = a("inline-block", {
   variants: {
     size: {
       12: "icon-w-12 icon-h-12 icon-stroke-12",
       16: "icon-w-16 icon-h-16 icon-stroke-16",
       20: "icon-w-20 icon-h-20 icon-stroke-20",
+      32: "icon-w-32 icon-h-32 icon-stroke-32",
       24: "icon-w-24 icon-h-24 icon-stroke-24",
       40: "icon-w-40 icon-h-40 icon-stroke-40",
       48: "icon-w-48 icon-h-48 icon-stroke-48",
@@ -16,8 +17,8 @@ const m = a("inline-block", {
   defaultVariants: {
     size: 24
   }
-}), h = l(
-  ({ size: o = 24, className: n = "", children: i, viewBox: c, xmlns: e, ...r }, t) => k(
+}), m = k(
+  ({ size: o = 24, className: n = "", children: i, viewBox: c, xmlns: e, ...r }, t) => l(
     "svg",
     {
       ref: t,
@@ -25,13 +26,13 @@ const m = a("inline-block", {
       "aria-hidden": "true",
       xmlns: e,
       viewBox: c,
-      className: s(n, m({ size: o }), "inline-block"),
+      className: s(n, h({ size: o }), "inline-block"),
       ...r
     },
     i
   )
 );
-h.displayName = "Icon";
+m.displayName = "Icon";
 export {
-  h as Icon
+  m as Icon
 };

package/dist/lib/Components/Icon/types.d.ts

@@ -1,4 +1,4 @@
-export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
+export type IconSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
 export type IconProps = {
     /**
      * The size of the icon.

package/dist/lib/Components/Icon/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE7D,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/NavBar/NavBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EACL,qBAAqB,EAGrB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,2GAO5B,CAAC;AAGH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iGAkB3B,CAAC;AAGH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,sFAavB,CAAC;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,4FAczB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;;;yGAalB,CAAC"}
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/NavBar/NavBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EACL,qBAAqB,EAGrB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,2GAO5B,CAAC;AAGH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iGAkB3B,CAAC;AAGH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,sFAgBvB,CAAC;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,4FAczB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;;;yGAalB,CAAC"}

package/dist/lib/Components/NavBar/NavBar.js

@@ -29,7 +29,10 @@ const N = n.forwardRef(
     e,
     {
       ref: t,
-      className: s("min-w-0 flex-1 truncate heading-4-semi-bold", r),
+      className: s(
+        "min-w-0 flex-1 truncate heading-4-semi-bold text-base",
+        r
+      ),
       "data-slot": "navbar-title",
       children: a
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AA6B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAsDpC,CAAC"}
+{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AA8B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAwDpC,CAAC"}

package/dist/lib/Components/Spot/Spot.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { cn as d } from "../../../libs/utils-shared/dist/index.js";
 import { cva as h } from "class-variance-authority";
-import { useMemo as f } from "react";
-import { Spinner as b } from "../Spinner/Spinner.js";
+import { useMemo as b } from "react";
+import { Spinner as f } from "../Spinner/Spinner.js";
 import { InformationFill as g } from "../../Symbols/Icons/InformationFill.js";
 import { WarningFill as x } from "../../Symbols/Icons/WarningFill.js";
 import { DeleteCircleFill as z } from "../../Symbols/Icons/DeleteCircleFill.js";
@@ -27,6 +27,7 @@ const F = h(
       },
       size: {
         32: "spot-w-32 spot-h-32",
+        40: "spot-w-40 spot-h-40",
         48: "spot-w-48 spot-h-48",
         56: "spot-w-56 spot-h-56",
         72: "spot-w-72 spot-h-72"
@@ -34,17 +35,19 @@ const F = h(
     }
   }
 ), D = (r) => {
-  const { appearance: a, className: s, disabled: i, size: o = 48, ...c } = r, l = {
+  const { appearance: s, className: a, disabled: i, size: o = 48, ...c } = r, l = {
     32: 12,
+    40: 16,
     48: 20,
     56: 24,
     72: 40
   }, m = {
     32: "body-2-semi-bold",
+    40: "body-1-semi-bold",
     48: "heading-5",
     56: "heading-4",
     72: "heading-2"
-  }, t = l[o] ?? 20, n = m[o] ?? "heading-5", p = f(() => {
+  }, t = l[o] ?? 20, n = m[o] ?? "heading-5", p = b(() => {
     switch (r.appearance) {
       case "icon": {
         const { icon: u } = r;
@@ -63,13 +66,13 @@ const F = h(
       case "info":
         return /* @__PURE__ */ e(g, { size: t });
       case "loader":
-        return /* @__PURE__ */ e(b, { size: t });
+        return /* @__PURE__ */ e(f, { size: t });
     }
   }, [r, t, n]);
   return /* @__PURE__ */ e(
     "div",
     {
-      className: d(s, F({ appearance: a, disabled: i, size: o })),
+      className: d(a, F({ appearance: s, disabled: i, size: o })),
       ...c,
       children: p
     }

package/dist/lib/Components/Spot/types.d.ts

@@ -38,7 +38,7 @@ type SpotStatusProps = {
  * A discriminated union that enforces type-safe props based on the `appearance`.
  */
 export type DiscriminatedSpotProps = SpotIconProps | SpotNumberProps | SpotStatusProps;
-export type SpotSize = 32 | 48 | 56 | 72;
+export type SpotSize = 32 | 40 | 48 | 56 | 72;
 export type SpotProps = DiscriminatedSpotProps & {
     /**
      * Whether the spot is disabled.

package/dist/lib/Components/Spot/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;;OAGG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AACF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC9B,aAAa,GACb,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,sBAAsB,GAAG;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;;OAGG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AACF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC9B,aAAa,GACb,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG,sBAAsB,GAAG;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

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

@@ -1,4 +1,4 @@
-import { TileContentProps, TileDescriptionProps, TileSpotProps, TileTitleProps } from './types';
+import { TileContentProps, TileDescriptionProps, TileSpotProps, TileTitleProps, TileTrailingContentProps } from './types';
 /**
  * A flexible tile component that uses a composite pattern for maximum customization.
  * Displays content in a vertical layout with support for spots, text, and custom content.
@@ -38,10 +38,9 @@ export declare const Tile: import('react').ForwardRefExoticComponent<{
 } & Omit<import('react').HTMLAttributes<HTMLButtonElement>, "onClick"> & import('react').RefAttributes<HTMLDivElement>>;
 /**
  * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
- * Always renders at a fixed size of 48.
  */
 export declare const TileSpot: {
-    (props: TileSpotProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, ...props }: TileSpotProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
@@ -68,6 +67,27 @@ export declare const TileDescription: {
     ({ children, className, ...props }: TileDescriptionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * A container for trailing content inside TileContent.
+ * Use this to wrap Tags, labels, or other supplementary information after title and description.
+ * Multiple items inside will have 8px spacing between them.
+ *
+ * @example
+ * <Tile>
+ *   <TileSpot appearance="icon" icon={Settings} />
+ *   <TileContent>
+ *     <TileTitle>My Title</TileTitle>
+ *     <TileDescription>Description</TileDescription>
+ *     <TileTrailingContent>
+ *       <Tag label="Active" />
+ *     </TileTrailingContent>
+ *   </TileContent>
+ * </Tile>
+ */
+export declare const TileTrailingContent: {
+    ({ children, className, ...props }: TileTrailingContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 /**
  * A self-contained secondary action button for a Tile. Renders an InteractiveIcon that appears
  * in the top-right corner and is visible on hover/focus. Automatically hidden when the parent Tile is disabled.

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

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAGpB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAuCjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;;;;;;;;;uHAyChB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,WAAW;wCAIrB,gBAAgB;;CASlB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,SAAS;wCAInB,cAAc;;CAiBhB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,eAAe;wCAIzB,oBAAoB;;CAiBtB,CAAC;AAGF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,mBAAmB;;;;0HAsC9B,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAGpB,aAAa,EACb,cAAc,EACd,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAuCjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;;;;;;;;;uHAyChB,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,QAAQ;yBAA6B,aAAa;;CAM9D,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,WAAW;wCAIrB,gBAAgB;;CASlB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,SAAS;wCAInB,cAAc;;CAiBhB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,eAAe;wCAIzB,oBAAoB;;CAiBtB,CAAC;AAGF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,mBAAmB;wCAI7B,wBAAwB;;CAS1B,CAAC;AAGF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,mBAAmB;;;;0HAsC9B,CAAC"}

package/dist/lib/Components/Tile/Tile.js

@@ -1,16 +1,16 @@
-import { jsx as a, jsxs as T } from "react/jsx-runtime";
-import { createSafeContext as v, cn as n } from "../../../libs/utils-shared/dist/index.js";
+import { jsx as r, jsxs as T } from "react/jsx-runtime";
+import { createSafeContext as x, cn as s } from "../../../libs/utils-shared/dist/index.js";
 import { cva as f } from "class-variance-authority";
-import { forwardRef as b, useCallback as x } from "react";
+import { forwardRef as b, useCallback as v } from "react";
 import { Spot as y } from "../Spot/Spot.js";
 import { InteractiveIcon as N } from "../InteractiveIcon/InteractiveIcon.js";
-const [g, l] = v("Tile"), m = {
+const [g, l] = x("Tile"), m = {
   root: f([
     "group relative flex flex-col items-center rounded-md text-base transition-colors focus-visible:outline-2 focus-visible:outline-focus"
   ]),
   inner: f(
     [
-      "flex w-full flex-col items-center gap-8 px-8 py-12",
+      "flex w-full flex-1 flex-col items-center gap-8 px-8 py-12",
       "rounded-md focus-visible:outline-2 focus-visible:outline-focus"
     ],
     {
@@ -39,23 +39,23 @@ const [g, l] = v("Tile"), m = {
   ({
     className: e,
     onClick: t,
-    secondaryAction: r,
+    secondaryAction: a,
     appearance: o = "no-background",
     disabled: i = !1,
     centered: c = !1,
     children: d,
     style: u,
     ...p
-  }, s) => /* @__PURE__ */ a(g, { value: { disabled: i }, children: /* @__PURE__ */ T(
+  }, n) => /* @__PURE__ */ r(g, { value: { disabled: i }, children: /* @__PURE__ */ T(
     "div",
     {
-      ref: s,
+      ref: n,
       style: u,
       className: m.root({
         className: e
       }),
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r(
           "button",
           {
             ...p,
@@ -69,29 +69,29 @@ const [g, l] = v("Tile"), m = {
             children: d
           }
         ),
-        r
+        a
       ]
     }
   ) })
 );
 h.displayName = "Tile";
-const S = (e) => {
-  const { disabled: t } = l({
+const S = ({ size: e = 48, ...t }) => {
+  const { disabled: a } = l({
     consumerName: "TileSpot",
     contextRequired: !0
   });
-  return /* @__PURE__ */ a(y, { ...e, size: 48, disabled: t });
+  return /* @__PURE__ */ r(y, { ...t, size: e, disabled: a });
 };
 S.displayName = "TileSpot";
 const w = ({
   children: e,
   className: t,
-  ...r
-}) => /* @__PURE__ */ a(
+  ...a
+}) => /* @__PURE__ */ r(
   "div",
   {
-    className: n("flex w-full flex-col items-center text-center", t),
-    ...r,
+    className: s("flex w-full flex-col items-center text-center", t),
+    ...a,
     children: e
   }
 );
@@ -99,21 +99,21 @@ w.displayName = "TileContent";
 const R = ({
   children: e,
   className: t,
-  ...r
+  ...a
 }) => {
   const { disabled: o } = l({
     consumerName: "TileTitle",
     contextRequired: !0
   });
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: n(
+      className: s(
         "w-full truncate body-2-semi-bold",
         o && "text-disabled",
         t
       ),
-      ...r,
+      ...a,
       children: e
     }
   );
@@ -122,44 +122,57 @@ R.displayName = "TileTitle";
 const j = ({
   children: e,
   className: t,
-  ...r
+  ...a
 }) => {
   const { disabled: o } = l({
     consumerName: "TileDescription",
     contextRequired: !0
   });
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: n(
+      className: s(
         "w-full truncate body-3",
         o ? "text-disabled" : "text-muted",
         t
       ),
-      ...r,
+      ...a,
       children: e
     }
   );
 };
 j.displayName = "TileDescription";
-const q = b(({ onClick: e, icon: t, className: r, "aria-label": o, ...i }, c) => {
+const q = ({
+  children: e,
+  className: t,
+  ...a
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: s("mt-4 flex w-full flex-col items-center gap-8", t),
+    ...a,
+    children: e
+  }
+);
+q.displayName = "TileTrailingContent";
+const C = b(({ onClick: e, icon: t, className: a, "aria-label": o, ...i }, c) => {
   const { disabled: d } = l({
     consumerName: "TileSecondaryAction",
     contextRequired: !0
-  }), u = x(
-    (s) => {
-      s.stopPropagation(), s.preventDefault(), e == null || e(s);
+  }), u = v(
+    (n) => {
+      n.stopPropagation(), n.preventDefault(), e == null || e(n);
     },
     [e]
   );
   if (d) return null;
   const p = t;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ r(
     N,
     {
-      className: n(
+      className: s(
         "absolute top-8 right-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100",
-        r
+        a
       ),
       "data-secondary-button-container": !0,
       iconType: "stroked",
@@ -167,16 +180,17 @@ const q = b(({ onClick: e, icon: t, className: r, "aria-label": o, ...i }, c) =>
       "aria-label": o,
       ref: c,
       ...i,
-      children: /* @__PURE__ */ a(p, { size: 24 })
+      children: /* @__PURE__ */ r(p, { size: 24 })
     }
   );
 });
-q.displayName = "TileSecondaryAction";
+C.displayName = "TileSecondaryAction";
 export {
   h as Tile,
   w as TileContent,
   j as TileDescription,
-  q as TileSecondaryAction,
+  C as TileSecondaryAction,
   S as TileSpot,
-  R as TileTitle
+  R as TileTitle,
+  q as TileTrailingContent
 };

package/dist/lib/Components/Tile/index.d.ts

@@ -1,3 +1,3 @@
-export { Tile, TileSpot, TileContent, TileTitle, TileDescription, TileSecondaryAction, } from './Tile';
+export { Tile, TileSpot, TileContent, TileTitle, TileDescription, TileTrailingContent, TileSecondaryAction, } from './Tile';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/Tile/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,SAAS,EACT,eAAe,EACf,mBAAmB,GACpB,MAAM,QAAQ,CAAC;AAChB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,SAAS,EACT,eAAe,EACf,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,QAAQ,CAAC;AAChB,cAAc,SAAS,CAAC"}

package/dist/lib/Components/Tile/types.d.ts

@@ -1,9 +1,10 @@
 import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 import { IconProps } from '../Icon';
-import { DiscriminatedSpotProps } from '../Spot/types';
+import { DiscriminatedSpotProps, SpotSize } from '../Spot/types';
 export type TileContextValue = {
     disabled: boolean;
 };
+export type TileSpotSize = Extract<SpotSize, 40 | 48>;
 export type TileProps = {
     /**
      * The visual appearance of the tile background.
@@ -48,7 +49,13 @@ export type TileProps = {
      */
     secondaryAction?: ReactNode;
 } & Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
-export type TileSpotProps = DiscriminatedSpotProps;
+export type TileSpotProps = {
+    /**
+     * The size of the spot.
+     * @default 48
+     */
+    size?: 40 | 48;
+} & DiscriminatedSpotProps;
 export type TileContentProps = {
     /**
      * The children to display inside the tile content area.
@@ -80,6 +87,17 @@ export type TileDescriptionProps = {
      */
     className?: string;
 } & HTMLAttributes<HTMLDivElement>;
+export type TileTrailingContentProps = {
+    /**
+     * The trailing content to display after title and description.
+     * Typically contains Tags, custom labels, or other supplementary information.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for the trailing content container.
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
 export type TileSecondaryActionProps = {
     /**
      * The function to call when the secondary action is clicked.

package/dist/lib/Components/Tile/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEjE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;CAChB,GAAG,sBAAsB,CAAC;AAE3B,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC"}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [