@ledgerhq/lumen-ui-react 0.0.64 → 0.0.65

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

@@ -27,6 +27,7 @@ export declare const BaseInput: React.ForwardRefExoticComponent<{
     onClear?: () => void;
     hideClearButton?: boolean;
     className?: string;
+    containerClassName?: string;
     inputClassName?: string;
     labelClassName?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;iHAyLrB,CAAC"}
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;iHA0LrB,CAAC"}

package/dist/lib/Components/BaseInput/BaseInput.js

@@ -1,54 +1,55 @@
 import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { cn as l } from "../../../libs/utils-shared/dist/index.js";
-import s from "react";
-import { useCommonTranslation as O } from "../../../i18n/useCommonTranslation.js";
-import { InteractiveIcon as _ } from "../InteractiveIcon/InteractiveIcon.js";
+import { cn as a } from "../../../libs/utils-shared/dist/index.js";
+import l from "react";
+import { useCommonTranslation as _ } from "../../../i18n/useCommonTranslation.js";
+import { InteractiveIcon as $ } from "../InteractiveIcon/InteractiveIcon.js";
 import { DeleteCircleFill as I } from "../../Symbols/Icons/DeleteCircleFill.js";
-const $ = l(
+const q = a(
   "group relative flex h-48 w-full cursor-text items-center gap-8 rounded-sm bg-muted px-16 transition-colors",
   "focus-within:ring-2 focus-within:ring-active hover:bg-muted-hover",
   "has-disabled:cursor-not-allowed has-disabled:bg-disabled has-disabled:text-disabled",
   "has-invalid:border-error has-invalid:ring-1 has-invalid:ring-error",
   'has-[input[aria-invalid="true"]]:border-error has-[input[aria-invalid="true"]]:ring-1 has-[input[aria-invalid="true"]]:ring-error'
-), q = l(
+), H = a(
   "peer w-full flex-1 bg-muted body-1 text-base caret-active outline-hidden transition-colors",
   "group-hover:bg-muted-hover group-disabled:bg-disabled",
   "group-has-disabled:cursor-not-allowed group-has-disabled:bg-disabled group-has-disabled:text-disabled",
   "placeholder:text-muted group-has-disabled:placeholder:text-disabled",
   "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
   "truncate"
-), H = l(
+), U = a(
   "pointer-events-none absolute top-6 left-16 origin-left body-4 text-muted transition-all duration-300",
   "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:body-2",
   "group-has-disabled:text-disabled",
   "peer-focus:top-6 peer-focus:-translate-y-0 peer-focus:body-4",
   "w-[calc(100%-var(--size-56))] truncate"
-), U = s.forwardRef(
+), G = l.forwardRef(
   ({
     className: N,
-    inputClassName: R,
-    labelClassName: S,
+    containerClassName: R,
+    inputClassName: S,
+    labelClassName: k,
     label: u,
-    id: k,
+    id: z,
     disabled: f,
-    errorMessage: a,
-    suffix: z,
-    prefix: E,
+    errorMessage: i,
+    suffix: E,
+    prefix: j,
     onClear: p,
-    hideClearButton: j = !1,
+    hideClearButton: B = !1,
     "aria-invalid": m,
     onChange: d,
-    ...i
-  }, B) => {
+    ...o
+  }, C) => {
     var x;
-    const { t: C } = O(), r = s.useRef(null), D = s.useId(), b = k || `input-${D}`, F = m || (a ? !0 : void 0), c = i.value !== void 0, [L, v] = s.useState(
-      ((x = i.defaultValue) == null ? void 0 : x.toString()) || ""
-    ), T = s.useCallback(
+    const { t: D } = _(), r = l.useRef(null), F = l.useId(), b = z || `input-${F}`, L = m || (i ? !0 : void 0), c = o.value !== void 0, [T, v] = l.useState(
+      ((x = o.defaultValue) == null ? void 0 : x.toString()) || ""
+    ), V = l.useCallback(
       (t) => {
         c || v(t.target.value), d == null || d(t);
       },
       [c, d]
-    ), g = (c ? !!i.value && i.value.toString().length > 0 : L.length > 0) && !f && !j, w = `${b}-error`, V = () => {
+    ), g = (c ? !!o.value && o.value.toString().length > 0 : T.length > 0) && !f && !B, w = `${b}-error`, A = () => {
       var e;
       if (!r.current) return;
       const t = (e = Object.getOwnPropertyDescriptor(
@@ -56,13 +57,13 @@ const $ = l(
         "value"
       )) == null ? void 0 : e.set;
       t == null || t.call(r.current, ""), c || v("");
-      const o = new Event("input", { bubbles: !0 });
-      r.current.dispatchEvent(o), r.current.focus(), p == null || p();
+      const s = new Event("input", { bubbles: !0 });
+      r.current.dispatchEvent(s), r.current.focus(), p == null || p();
     };
-    function A(...t) {
-      return (o) => {
+    function O(...t) {
+      return (s) => {
         t.forEach((e) => {
-          e && (typeof e == "function" ? e(o) : e.current = o);
+          e && (typeof e == "function" ? e(s) : e.current = s);
         });
       };
     }
@@ -70,7 +71,7 @@ const $ = l(
       /* @__PURE__ */ h(
         "div",
         {
-          className: $,
+          className: a(q, R),
           onPointerDown: (t) => {
             if (t.target.closest("input, button, a")) return;
             const e = r.current;
@@ -85,51 +86,51 @@ const $ = l(
             });
           },
           children: [
-            E,
+            j,
             /* @__PURE__ */ n(
               "input",
               {
-                ref: A(B, r),
+                ref: O(C, r),
                 id: b,
                 disabled: f,
                 placeholder: " ",
-                "aria-invalid": F,
-                "aria-describedby": a ? w : void 0,
-                className: l(
-                  q,
+                "aria-invalid": L,
+                "aria-describedby": i ? w : void 0,
+                className: a(
+                  H,
                   u && "pt-12 body-2",
-                  R
+                  S
                 ),
-                onChange: T,
-                ...i
+                onChange: V,
+                ...o
               }
             ),
             u && /* @__PURE__ */ n(
               "label",
               {
                 htmlFor: b,
-                className: l(
-                  H,
-                  a && "text-error",
-                  S
+                className: a(
+                  U,
+                  i && "text-error",
+                  k
                 ),
                 children: u
               }
             ),
             g && /* @__PURE__ */ n(
-              _,
+              $,
               {
                 iconType: "filled",
-                onClick: V,
-                "aria-label": C("components.baseInput.clearInputAriaLabel"),
+                onClick: A,
+                "aria-label": D("components.baseInput.clearInputAriaLabel"),
                 children: /* @__PURE__ */ n(I, { size: 20 })
               }
             ),
-            !g && z
+            !g && E
           ]
         }
       ),
-      a && /* @__PURE__ */ h(
+      i && /* @__PURE__ */ h(
         "div",
         {
           id: w,
@@ -137,14 +138,14 @@ const $ = l(
           role: "alert",
           children: [
             /* @__PURE__ */ n(I, { size: 16, className: "shrink-0 text-error" }),
-            /* @__PURE__ */ n("span", { children: a })
+            /* @__PURE__ */ n("span", { children: i })
           ]
         }
       )
     ] });
   }
 );
-U.displayName = "BaseInput";
+G.displayName = "BaseInput";
 export {
-  U as BaseInput
+  G as BaseInput
 };

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

@@ -32,9 +32,13 @@ export type BaseInputProps = {
      */
     hideClearButton?: boolean;
     /**
-     * Additional class names to apply to the container element
+     * Additional class names to apply to the outer wrapper element
      */
     className?: string;
+    /**
+     * Additional class names to apply to the inner container element
+     */
+    containerClassName?: string;
     /**
      * Additional class names to apply to the input element
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC"}

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { SearchInputProps } from './types';
 /**
  * A customizable search input component with built-in search icon, automatic clear button, error states, and focus/hover effects.
  *
@@ -54,5 +53,7 @@ import { SearchInputProps } from './types';
  *   }}
  * />
  */
-export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const SearchInput: React.ForwardRefExoticComponent<Omit<import('..').BaseInputProps, "label" | "prefix" | "containerClassName" | "labelClassName"> & {
+    appearance?: "plain" | "transparent";
+} & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=SearchInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,WAAW,2FAcvB,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,WAAW;;0CAuBvB,CAAC"}

package/dist/lib/Components/SearchInput/SearchInput.js

@@ -1,18 +1,50 @@
-import { jsx as e } from "react/jsx-runtime";
-import a from "react";
-import { BaseInput as o } from "../BaseInput/BaseInput.js";
-import { Search as s } from "../../Symbols/Icons/Search.js";
-const c = a.forwardRef(
-  (r, t) => /* @__PURE__ */ e(o, { ref: t, prefix: /* @__PURE__ */ e(
-    s,
+import { jsx as r } from "react/jsx-runtime";
+import { cn as i } from "../../../libs/utils-shared/dist/index.js";
+import { cva as t } from "class-variance-authority";
+import o from "react";
+import { BaseInput as d } from "../BaseInput/BaseInput.js";
+import { Search as c } from "../../Symbols/Icons/Search.js";
+const m = t("", {
+  variants: {
+    appearance: {
+      plain: "",
+      transparent: "bg-muted-transparent hover:bg-muted-transparent-hover has-disabled:bg-muted-transparent-disabled"
+    }
+  },
+  defaultVariants: {
+    appearance: "plain"
+  }
+}), l = t("", {
+  variants: {
+    appearance: {
+      plain: "",
+      transparent: "bg-transparent group-hover:bg-transparent-hover group-has-disabled:bg-transparent-disabled"
+    }
+  },
+  defaultVariants: {
+    appearance: "plain"
+  }
+}), u = o.forwardRef(
+  ({ appearance: a = "plain", className: e, inputClassName: n, ...s }, p) => /* @__PURE__ */ r(
+    d,
     {
-      size: 20,
-      className: "text-muted group-has-disabled:text-disabled",
-      "aria-hidden": "true"
+      ref: p,
+      prefix: /* @__PURE__ */ r(
+        c,
+        {
+          size: 20,
+          className: "text-muted group-has-disabled:text-disabled",
+          "aria-hidden": "true"
+        }
+      ),
+      className: e,
+      containerClassName: m({ appearance: a }),
+      inputClassName: i(l({ appearance: a }), n),
+      ...s
     }
-  ), ...r })
+  )
 );
-c.displayName = "SearchInput";
+u.displayName = "SearchInput";
 export {
-  c as SearchInput
+  u as SearchInput
 };

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

@@ -1,3 +1,9 @@
 import { BaseInputProps } from '../BaseInput/types';
-export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName' | 'inputClassName'>;
+export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName' | 'containerClassName'> & {
+    /**
+     * The visual appearance of the search input
+     * @default 'plain'
+     */
+    appearance?: 'plain' | 'transparent';
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,gBAAgB,CACzD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,oBAAoB,CAC7D,GAAG;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,CAAC"}

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

@@ -1,4 +1,5 @@
-import { TileContentProps, TileDescriptionProps, TileProps, TileSecondaryActionProps, TileSpotProps, TileTitleProps } from './types';
+import { MouseEventHandler } from 'react';
+import { TileContentProps, TileDescriptionProps, TileSpotProps, TileTitleProps } 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.
@@ -26,10 +27,14 @@ import { TileContentProps, TileDescriptionProps, TileProps, TileSecondaryActionP
  *   <div>Custom content</div>
  * </Tile>
  */
-export declare const Tile: {
-    ({ className, onClick, appearance, disabled, "aria-label": ariaLabel, children, onMouseDown, onMouseUp, onMouseLeave, ...props }: TileProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const Tile: import('react').ForwardRefExoticComponent<{
+    appearance?: "no-background" | "card";
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    children: import('react').ReactNode;
+    className?: string;
+    'aria-label'?: string;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "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.
@@ -79,8 +84,9 @@ export declare const TileDescription: {
  *   </TileContent>
  * </Tile>
  */
-export declare const TileSecondaryAction: {
-    ({ onClick, icon, className, "aria-label": ariaLabel, ...props }: TileSecondaryActionProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+export declare const TileSecondaryAction: import('react').ForwardRefExoticComponent<{
+    onClick?: MouseEventHandler;
+    icon: React.ComponentType<Omit<import('../Icon').IconProps, "children">>;
+    className?: string;
+} & Omit<import('react').HTMLAttributes<HTMLButtonElement>, "onClick"> & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Tile.d.ts.map

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":"AASA,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EACpB,SAAS,EACT,wBAAwB,EACxB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAgEjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;sIAWd,SAAS;;CAqFX,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;sEAM7B,wBAAwB;;CAmC1B,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAG7E,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAGpB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAgEjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;;;;;;;oHAsGhB,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;;;;0HAuC9B,CAAC"}

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

@@ -1,11 +1,11 @@
-import { jsx as l, jsxs as k } from "react/jsx-runtime";
-import { extractSlottable as q, createSafeContext as C, cn as d } from "../../../libs/utils-shared/dist/index.js";
-import { cva as b } from "class-variance-authority";
-import { useState as I, useCallback as n } from "react";
-import { Spot as R } from "../Spot/Spot.js";
-import { InteractiveIcon as z } from "../InteractiveIcon/InteractiveIcon.js";
-const [V, u] = C("Tile"), v = {
-  root: b(
+import { jsx as s, jsxs as q } from "react/jsx-runtime";
+import { extractSlottable as C, createSafeContext as I, cn as u } from "../../../libs/utils-shared/dist/index.js";
+import { cva as v } from "class-variance-authority";
+import { forwardRef as x, useState as w, useCallback as d } from "react";
+import { Spot as z } from "../Spot/Spot.js";
+import { InteractiveIcon as V } from "../InteractiveIcon/InteractiveIcon.js";
+const [j, p] = I("Tile"), T = {
+  root: v(
     [
       "group relative flex flex-col items-center gap-8 text-base transition-colors",
       "rounded-md focus-visible:outline-2 focus-visible:outline-focus"
@@ -58,113 +58,116 @@ const [V, u] = C("Tile"), v = {
       }
     }
   ),
-  button: b(
+  button: v(
     "flex w-full cursor-pointer flex-col items-center gap-8 rounded-md px-8 py-12 focus-visible:outline-2 focus-visible:outline-focus"
   )
-}, j = ({
-  className: e,
-  onClick: i,
-  appearance: r = "no-background",
-  disabled: t = !1,
-  "aria-label": p,
-  children: m,
-  onMouseDown: o,
-  onMouseUp: c,
-  onMouseLeave: s,
-  ...x
-}) => {
-  const [y, f] = I(!1), { slotElement: N, remainingChildren: g } = q(
-    m,
-    T
-  ), h = n(
-    (a) => {
-      a.target.closest(
-        "[data-secondary-button-container]"
-      ) || (o == null || o(a), f(!0));
-    },
-    [o]
-  ), A = n(
-    (a) => {
-      f(!1), c == null || c(a);
-    },
-    [c]
-  ), S = n(
-    (a) => {
-      f(!1), s == null || s(a);
-    },
-    [s]
-  );
-  return /* @__PURE__ */ l(V, { value: { disabled: t }, children: /* @__PURE__ */ k(
-    "div",
-    {
-      ...x,
-      className: v.root({
-        appearance: r,
-        isActive: y,
-        disabled: t,
-        className: e
-      }),
-      onMouseDown: t ? void 0 : (a) => {
-        h(a);
+}, P = x(
+  ({
+    className: e,
+    onClick: i,
+    appearance: r = "no-background",
+    disabled: t = !1,
+    "aria-label": f,
+    children: m,
+    onMouseDown: l,
+    onMouseUp: o,
+    onMouseLeave: c,
+    ...n
+  }, N) => {
+    const [g, b] = w(!1), { slotElement: h, remainingChildren: A } = C(
+      m,
+      y
+    ), S = d(
+      (a) => {
+        a.target.closest(
+          "[data-secondary-button-container]"
+        ) || (l == null || l(a), b(!0));
       },
-      onMouseUp: t ? void 0 : (a) => {
-        A(a);
+      [l]
+    ), k = d(
+      (a) => {
+        b(!1), o == null || o(a);
       },
-      onMouseLeave: t ? void 0 : (a) => {
-        S(a);
+      [o]
+    ), R = d(
+      (a) => {
+        b(!1), c == null || c(a);
       },
-      children: [
-        /* @__PURE__ */ l(
-          "button",
-          {
-            "aria-label": p,
-            onClick: t ? void 0 : i,
-            disabled: t,
-            "data-disabled": t || void 0,
-            className: v.button(),
-            children: g
-          }
-        ),
-        N
-      ]
-    }
-  ) });
-};
-j.displayName = "Tile";
-const w = (e) => {
-  const { disabled: i } = u({
+      [c]
+    );
+    return /* @__PURE__ */ s(j, { value: { disabled: t }, children: /* @__PURE__ */ q(
+      "div",
+      {
+        ...n,
+        ref: N,
+        className: T.root({
+          appearance: r,
+          isActive: g,
+          disabled: t,
+          className: e
+        }),
+        onMouseDown: t ? void 0 : (a) => {
+          S(a);
+        },
+        onMouseUp: t ? void 0 : (a) => {
+          k(a);
+        },
+        onMouseLeave: t ? void 0 : (a) => {
+          R(a);
+        },
+        children: [
+          /* @__PURE__ */ s(
+            "button",
+            {
+              "aria-label": f,
+              onClick: t ? void 0 : i,
+              disabled: t,
+              "data-disabled": t || void 0,
+              className: T.button(),
+              children: A
+            }
+          ),
+          h
+        ]
+      }
+    ) });
+  }
+);
+P.displayName = "Tile";
+const D = (e) => {
+  const { disabled: i } = p({
     consumerName: "TileSpot",
     contextRequired: !0
   });
-  return /* @__PURE__ */ l(R, { ...e, size: 48, disabled: i });
+  return /* @__PURE__ */ s(z, { ...e, size: 48, disabled: i });
 };
-w.displayName = "TileSpot";
-const P = ({
+D.displayName = "TileSpot";
+const E = ({
   children: e,
   className: i,
   ...r
-}) => /* @__PURE__ */ l(
+}) => /* @__PURE__ */ s(
   "div",
   {
-    className: d("flex w-full flex-col items-center text-center", i),
+    className: u("flex w-full flex-col items-center text-center", i),
     ...r,
     children: e
   }
 );
-P.displayName = "TileContent";
-const D = ({
+E.displayName = "TileContent";
+const O = ({
   children: e,
   className: i,
   ...r
 }) => {
-  const { disabled: t } = u({
+  const { disabled: t } = p({
     consumerName: "TileTitle",
     contextRequired: !0
   });
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: d(
+      className: u(
         "w-full truncate body-2-semi-bold",
         t && "text-disabled",
         i
@@ -174,20 +177,20 @@ const D = ({
     }
   );
 };
-D.displayName = "TileTitle";
-const E = ({
+O.displayName = "TileTitle";
+const B = ({
   children: e,
   className: i,
   ...r
 }) => {
-  const { disabled: t } = u({
+  const { disabled: t } = p({
     consumerName: "TileDescription",
     contextRequired: !0
   });
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: d(
+      className: u(
         "w-full truncate body-3",
         t ? "text-disabled" : "text-muted",
         i
@@ -197,30 +200,24 @@ const E = ({
     }
   );
 };
-E.displayName = "TileDescription";
-const T = ({
-  onClick: e,
-  icon: i,
-  className: r,
-  "aria-label": t,
-  ...p
-}) => {
-  const { disabled: m } = u({
+B.displayName = "TileDescription";
+const y = x(({ onClick: e, icon: i, className: r, "aria-label": t, ...f }, m) => {
+  const { disabled: l } = p({
     consumerName: "TileSecondaryAction",
     contextRequired: !0
-  }), o = n(
-    (s) => {
-      s.stopPropagation(), s.preventDefault(), e == null || e(s);
+  }), o = d(
+    (n) => {
+      n.stopPropagation(), n.preventDefault(), e == null || e(n);
     },
     [e]
   );
-  if (m) return null;
+  if (l) return null;
   const c = i;
-  return /* @__PURE__ */ l(
-    z,
+  return /* @__PURE__ */ s(
+    V,
     {
       "data-slot": "tile-secondary-action",
-      className: d(
+      className: u(
         "absolute top-8 right-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100",
         r
       ),
@@ -228,17 +225,18 @@ const T = ({
       iconType: "stroked",
       onClick: o,
       "aria-label": t,
-      ...p,
-      children: /* @__PURE__ */ l(c, { size: 24 })
+      ref: m,
+      ...f,
+      children: /* @__PURE__ */ s(c, { size: 24 })
     }
   );
-};
-T.displayName = "TileSecondaryAction";
+});
+y.displayName = "TileSecondaryAction";
 export {
-  j as Tile,
-  P as TileContent,
-  E as TileDescription,
-  T as TileSecondaryAction,
-  w as TileSpot,
-  D as TileTitle
+  P as Tile,
+  E as TileContent,
+  B as TileDescription,
+  y as TileSecondaryAction,
+  D as TileSpot,
+  O as TileTitle
 };

package/dist/package.json

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

package/package.json

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