@ledgerhq/lumen-ui-react 0.1.11 → 0.1.12

package/dist/lib/Components/Table/Table.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { jsx as l, jsxs as m } from "react/jsx-runtime";
 import { createSafeContext as N, cn as c } from "../../../libs/utils-shared/dist/index.js";
 import { cva as s } from "class-variance-authority";
 import { useThrottledScrollBottom as T } from "./utils/useThrottledScrollBottom.js";
@@ -23,16 +23,16 @@ const [A, u] = N("Table"), I = s(
   children: t,
   appearance: e = "no-background",
   className: a,
-  onScrollBottom: l,
+  onScrollBottom: n,
   loading: r,
   ref: o,
   ...i
 }) => {
   const d = T({
-    onScrollBottom: l,
+    onScrollBottom: n,
     loading: r
   });
-  return /* @__PURE__ */ n(A, { value: { appearance: e, loading: r }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(A, { value: { appearance: e, loading: r }, children: /* @__PURE__ */ l(
     "div",
     {
       ...i,
@@ -44,10 +44,10 @@ const [A, u] = N("Table"), I = s(
   ) });
 };
 L.displayName = "TableRoot";
-const S = ({ children: t, className: e, ref: a, ...l }) => /* @__PURE__ */ n(
+const S = ({ children: t, className: e, ref: a, ...n }) => /* @__PURE__ */ l(
   "table",
   {
-    ...l,
+    ...n,
     className: c("w-full max-w-full table-fixed", e),
     ref: a,
     children: t
@@ -58,28 +58,28 @@ const V = ({
   children: t,
   className: e,
   ref: a,
-  ...l
-}) => /* @__PURE__ */ n("thead", { ref: a, className: e, ...l, children: t });
+  ...n
+}) => /* @__PURE__ */ l("thead", { ref: a, className: e, ...n, children: t });
 V.displayName = "TableHeader";
 const k = ({
   children: t,
   className: e,
   ref: a,
-  ...l
-}) => /* @__PURE__ */ n("tbody", { ref: a, className: e, ...l, children: t });
+  ...n
+}) => /* @__PURE__ */ l("tbody", { ref: a, className: e, ...n, children: t });
 k.displayName = "TableBody";
 const z = ({
   children: t,
   className: e,
   clickable: a = !1,
-  onClick: l,
+  onClick: n,
   ref: r,
   ...o
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ l(
   "tr",
   {
     ref: r,
-    onClick: l,
+    onClick: n,
     role: a ? "button" : void 0,
     className: c(
       a && "cursor-pointer outline-none select-none hover:bg-base-transparent-hover active:bg-base-transparent-pressed",
@@ -101,18 +101,18 @@ const q = s("sticky top-0", {
   children: t,
   className: e,
   ref: a,
-  ...l
+  ...n
 }) => {
   const { appearance: r } = u({
     consumerName: "TableHeaderRow",
     contextRequired: !0
   });
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(
     "tr",
     {
       ref: a,
       className: q({ appearance: r, className: e }),
-      ...l,
+      ...n,
       children: t
     }
   );
@@ -122,14 +122,14 @@ const M = ({
   children: t,
   className: e,
   colSpan: a = 1,
-  ref: l,
+  ref: n,
   ...r
 }) => {
   const { appearance: o } = u({
     consumerName: "TableGroupHeaderRow",
     contextRequired: !0
   });
-  return /* @__PURE__ */ n("tr", { ref: l, className: c("h-40", e), ...r, children: /* @__PURE__ */ n("td", { colSpan: a, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ l("tr", { ref: n, className: c("h-40", e), ...r, children: /* @__PURE__ */ l("td", { colSpan: a, children: /* @__PURE__ */ l(
     "div",
     {
       className: c(
@@ -168,16 +168,16 @@ const p = {
   children: t,
   className: e,
   hideBelow: a,
-  align: l = "start",
+  align: n = "start",
   ref: r,
   ...o
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ l(
   "td",
   {
     ref: r,
     className: p.root({ hideBelow: a, className: e }),
     ...o,
-    children: /* @__PURE__ */ n("div", { className: p.inner({ align: l }), children: t })
+    children: /* @__PURE__ */ l("div", { className: p.inner({ align: n }), children: t })
   }
 );
 P.displayName = "TableCell";
@@ -192,7 +192,7 @@ const U = s("flex items-center gap-12 truncate", {
   className: t,
   align: e = "start",
   leadingContent: a,
-  title: l,
+  title: n,
   description: r,
   ref: o,
   ...i
@@ -203,10 +203,10 @@ const U = s("flex items-center gap-12 truncate", {
     className: U({ align: e, className: t }),
     ...i,
     children: [
-      /* @__PURE__ */ n("div", { children: a }),
+      /* @__PURE__ */ l("div", { children: a }),
       /* @__PURE__ */ m("div", { className: "flex flex-col gap-4 truncate", children: [
-        /* @__PURE__ */ n("div", { className: "truncate body-2 text-base", children: l }),
-        /* @__PURE__ */ n("div", { className: "truncate body-3 text-muted", children: r })
+        /* @__PURE__ */ l("div", { className: "truncate body-2 text-base", children: n }),
+        /* @__PURE__ */ l("div", { className: "truncate body-3 text-muted", children: r })
       ] })
     ]
   }
@@ -239,21 +239,21 @@ const f = {
   children: t,
   className: e,
   scope: a = "col",
-  hideBelow: l,
+  hideBelow: n,
   align: r = "start",
   trailingContent: o,
   ref: i,
   ...d
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ l(
   "th",
   {
     ref: i,
     scope: a,
-    className: f.root({ hideBelow: l, className: e }),
+    className: f.root({ hideBelow: n, className: e }),
     ...d,
-    children: /* @__PURE__ */ n("div", { className: "min-w-0", children: /* @__PURE__ */ m("div", { className: f.content({ align: r }), children: [
-      /* @__PURE__ */ n("span", { className: c("truncate", r === "end" && "order-1"), children: t }),
-      /* @__PURE__ */ n("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
+    children: /* @__PURE__ */ l("div", { className: "min-w-0", children: /* @__PURE__ */ m("div", { className: f.content({ align: r }), children: [
+      /* @__PURE__ */ l("span", { className: c("truncate", r === "end" && "order-1"), children: t }),
+      /* @__PURE__ */ l("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
     ] }) })
   }
 );
@@ -262,13 +262,13 @@ const J = ({
   children: t,
   className: e,
   ref: a,
-  ...l
-}) => /* @__PURE__ */ n(
+  ...n
+}) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
     className: c("flex items-center gap-8 py-12", e),
-    ...l,
+    ...n,
     children: t
   }
 );
@@ -277,13 +277,13 @@ const K = ({
   children: t,
   className: e,
   ref: a,
-  ...l
-}) => /* @__PURE__ */ n(
+  ...n
+}) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
     className: c("flex items-center gap-8", e),
-    ...l,
+    ...n,
     children: t
   }
 );
@@ -292,13 +292,13 @@ const O = ({
   children: t,
   className: e,
   ref: a,
-  ...l
-}) => /* @__PURE__ */ n(
+  ...n
+}) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
     className: c("ml-auto flex items-center gap-8", e),
-    ...l,
+    ...n,
     children: t
   }
 );
@@ -308,11 +308,11 @@ const Q = ({
   ref: e,
   ...a
 }) => {
-  const { loading: l } = u({
+  const { loading: n } = u({
     consumerName: "TableLoadingRow",
     contextRequired: !0
   });
-  return l ? /* @__PURE__ */ n(
+  return n ? /* @__PURE__ */ l(
     "div",
     {
       ...a,
@@ -321,7 +321,7 @@ const Q = ({
         "flex h-80 w-full items-center justify-center p-12",
         t
       ),
-      children: /* @__PURE__ */ n(g, { appearance: "loader", size: 48 })
+      children: /* @__PURE__ */ l(g, { appearance: "loader", size: 48 })
     }
   ) : null;
 };
@@ -330,14 +330,14 @@ const W = ({
   className: t,
   ref: e,
   ...a
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ l(
   H,
   {
     ...a,
     iconType: "filled",
     className: t,
     ref: e,
-    children: /* @__PURE__ */ n(w, { size: 20 })
+    children: /* @__PURE__ */ l(w, { size: 20 })
   }
 );
 W.displayName = "TableInfoIcon";
@@ -372,7 +372,7 @@ const X = {
   children: t,
   sortDirection: e,
   align: a = "start",
-  onToggleSort: l,
+  onToggleSort: n,
   className: r,
   onClick: o,
   ref: i,
@@ -391,11 +391,11 @@ const X = {
       className: v.root({ align: a, className: r }),
       "aria-label": e ? h[e] : void 0,
       onClick: (y) => {
-        o?.(y), l?.(e === "asc" ? "desc" : "asc");
+        o?.(y), n?.(e === "asc" ? "desc" : "asc");
       },
       children: [
-        /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: t }),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ l("span", { className: "min-w-0 truncate", children: t }),
+        /* @__PURE__ */ l(
           x,
           {
             size: 20,

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

@@ -1,6 +1,6 @@
 import { TagProps } from './types';
 export declare const Tag: {
-    ({ ref, className, appearance, size, icon, label, disabled, ...props }: TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, className, appearance, size, icon, label, disabled: disabledProp, ...props }: TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA+BnC,eAAO,MAAM,GAAG;4EASb,QAAQ;;CAqBV,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA+BnC,eAAO,MAAM,GAAG;0FASb,QAAQ;;CAyBV,CAAC"}

package/dist/lib/Components/Tag/Tag.js

@@ -1,7 +1,7 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { cn as l } from "../../../libs/utils-shared/dist/index.js";
-import { cva as b } from "class-variance-authority";
-const g = b(
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useDisabledContext as b, cn as g } from "../../../libs/utils-shared/dist/index.js";
+import { cva as x } from "class-variance-authority";
+const u = x(
   "inline-flex items-center justify-center gap-4 rounded-xs",
   {
     variants: {
@@ -28,34 +28,37 @@ const g = b(
       disabled: !1
     }
   }
-), x = ({
+), f = ({
   ref: s,
   className: n,
   appearance: r,
   size: e,
   icon: c,
   label: i,
-  disabled: o,
-  ...d
+  disabled: d,
+  ...o
 }) => {
-  const p = e ? {
+  const m = b({
+    consumerName: "Tag",
+    mergeWith: { disabled: d }
+  }), l = e ? {
     md: 16,
     sm: 12
   }[e] : 16, a = c;
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: l(n, g({ appearance: r, size: e, disabled: o })),
+      className: g(n, u({ appearance: r, size: e, disabled: m })),
       ref: s,
-      ...d,
+      ...o,
       children: [
-        a && /* @__PURE__ */ t(a, { size: p, className: "shrink-0" }),
+        a && /* @__PURE__ */ t(a, { size: l, className: "shrink-0" }),
         /* @__PURE__ */ t("span", { children: i })
       ]
     }
   );
 };
-x.displayName = "Tag";
+f.displayName = "Tag";
 export {
-  x as Tag
+  f as Tag
 };

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

@@ -1,4 +1,4 @@
-import { TileContentProps, TileDescriptionProps, TileProps, TileSecondaryActionProps, TileSpotProps, TileTitleProps, TileTrailingContentProps } from './types';
+import { TileContentProps, TileDescriptionProps, TileProps, TileSecondaryActionProps, 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.
@@ -9,17 +9,17 @@ import { TileContentProps, TileDescriptionProps, TileProps, TileSecondaryActionP
  * @example
  * import {
  *   Tile,
- *   TileSpot,
  *   TileContent,
  *   TileTitle,
  *   TileSecondaryAction,
  *   Tag
  * } from '@ledgerhq/lumen-ui-react';
+ * import { Spot } from '@ledgerhq/lumen-ui-react';
  * import { Bitcoin, MoreVertical } from '@ledgerhq/lumen-ui-react/symbols';
  *
  * <Tile appearance="card">
  *   <TileSecondaryAction icon={MoreVertical} onClick={() => console.log('More')} />
- *   <TileSpot appearance="icon" icon={Bitcoin} />
+ *   <Spot appearance="icon" icon={Bitcoin} />
  *   <TileContent>
  *     <TileTitle>Bitcoin</TileTitle>
  *   </TileContent>
@@ -27,14 +27,7 @@ import { TileContentProps, TileDescriptionProps, TileProps, TileSecondaryActionP
  * </Tile>
  */
 export declare const Tile: {
-    ({ ref, className, onClick, secondaryAction, appearance, disabled, centered, children, style, ...props }: TileProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-/**
- * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
- */
-export declare const TileSpot: {
-    ({ size, ...props }: TileSpotProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, className, onClick, secondaryAction, appearance, disabled: disabledProp, centered, children, style, ...props }: TileProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
@@ -68,7 +61,7 @@ export declare const TileDescription: {
  *
  * @example
  * <Tile>
- *   <TileSpot appearance="icon" icon={Settings} />
+ *   <Spot appearance="icon" icon={Settings} />
  *   <TileContent>
  *     <TileTitle>My Title</TileTitle>
  *     <TileDescription>Description</TileDescription>

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,EACpB,SAAS,EACT,wBAAwB,EACxB,aAAa,EACb,cAAc,EACd,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAuCjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;8GAWd,SAAS;;CA0BX,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;2EAO7B,wBAAwB;;CAmC1B,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,wBAAwB,EACxB,cAAc,EACd,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAoCjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;4HAWd,SAAS;;CA+BX,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;2EAO7B,wBAAwB;;CAqC1B,CAAC"}

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

@@ -1,14 +1,13 @@
-import { jsx as i, jsxs as b } from "react/jsx-runtime";
-import { createSafeContext as T, cn as l } from "../../../libs/utils-shared/dist/index.js";
-import { cva as f } from "class-variance-authority";
-import { useCallback as x } from "react";
-import { Spot as v } from "../Spot/Spot.js";
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { useDisabledContext as o, DisabledProvider as m, cn as s } from "../../../libs/utils-shared/dist/index.js";
+import { cva as p } from "class-variance-authority";
+import { useCallback as T } from "react";
 import { InteractiveIcon as y } from "../InteractiveIcon/InteractiveIcon.js";
-const [N, s] = T("Tile"), m = {
-  root: f([
+const v = {
+  root: p([
     "group relative flex flex-col items-center rounded-md text-base transition-colors focus-visible:outline-2 focus-visible:outline-focus"
   ]),
-  inner: f(
+  inner: p(
     [
       "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,77 +38,75 @@ const [N, s] = T("Tile"), m = {
   ref: t,
   className: e,
   onClick: a,
-  secondaryAction: o,
+  secondaryAction: r,
   appearance: c = "no-background",
-  disabled: r = !1,
-  centered: d = !1,
-  children: u,
-  style: p,
+  disabled: d = !1,
+  centered: u = !1,
+  children: b,
+  style: f,
   ...n
-}) => /* @__PURE__ */ i(N, { value: { disabled: r }, children: /* @__PURE__ */ b(
-  "div",
-  {
-    ref: t,
-    style: p,
-    className: m.root({
-      className: e
-    }),
-    children: [
-      /* @__PURE__ */ i(
-        "button",
-        {
-          ...n,
-          onClick: a,
-          disabled: r,
-          className: m.inner({
-            appearance: c,
-            disabled: r,
-            centered: d
-          }),
-          children: u
-        }
-      ),
-      o
-    ]
-  }
-) });
-g.displayName = "Tile";
-const h = ({ size: t = 48, ...e }) => {
-  const { disabled: a } = s({
-    consumerName: "TileSpot",
-    contextRequired: !0
+}) => {
+  const l = o({
+    consumerName: "Tile",
+    mergeWith: { disabled: d }
   });
-  return /* @__PURE__ */ i(v, { ...e, size: t, disabled: a });
+  return /* @__PURE__ */ i(m, { value: { disabled: l }, children: /* @__PURE__ */ x(
+    "div",
+    {
+      ref: t,
+      style: f,
+      className: v.root({
+        className: e
+      }),
+      children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            ...n,
+            onClick: a,
+            disabled: l,
+            className: v.inner({
+              appearance: c,
+              disabled: l,
+              centered: u
+            }),
+            children: /* @__PURE__ */ i(m, { value: { disabled: l }, children: b })
+          }
+        ),
+        r
+      ]
+    }
+  ) });
 };
-h.displayName = "TileSpot";
-const C = ({
+g.displayName = "Tile";
+const N = ({
   children: t,
   className: e,
   ...a
 }) => /* @__PURE__ */ i(
   "div",
   {
-    className: l("flex w-full flex-col items-center text-center", e),
+    className: s("flex w-full flex-col items-center text-center", e),
     ...a,
     children: t
   }
 );
-C.displayName = "TileContent";
-const S = ({
+N.displayName = "TileContent";
+const h = ({
   children: t,
   className: e,
   ...a
 }) => {
-  const { disabled: o } = s({
+  const r = o({
     consumerName: "TileTitle",
     contextRequired: !0
   });
   return /* @__PURE__ */ i(
     "div",
     {
-      className: l(
+      className: s(
         "w-full truncate body-2-semi-bold",
-        o && "text-disabled",
+        r && "text-disabled",
         e
       ),
       ...a,
@@ -117,22 +114,22 @@ const S = ({
     }
   );
 };
-S.displayName = "TileTitle";
-const k = ({
+h.displayName = "TileTitle";
+const C = ({
   children: t,
   className: e,
   ...a
 }) => {
-  const { disabled: o } = s({
+  const r = o({
     consumerName: "TileDescription",
     contextRequired: !0
   });
   return /* @__PURE__ */ i(
     "div",
     {
-      className: l(
+      className: s(
         "w-full truncate body-3",
-        o ? "text-disabled" : "text-muted",
+        r ? "text-disabled" : "text-muted",
         e
       ),
       ...a,
@@ -140,63 +137,63 @@ const k = ({
     }
   );
 };
-k.displayName = "TileDescription";
-const w = ({
+C.displayName = "TileDescription";
+const k = ({
   children: t,
   className: e,
   ...a
 }) => /* @__PURE__ */ i(
   "div",
   {
-    className: l("mt-4 flex w-full flex-col items-center gap-8", e),
+    className: s("mt-4 flex w-full flex-col items-center gap-8", e),
     ...a,
     children: t
   }
 );
-w.displayName = "TileTrailingContent";
-const q = ({
+k.displayName = "TileTrailingContent";
+const w = ({
   ref: t,
   onClick: e,
   icon: a,
-  className: o,
+  className: r,
   "aria-label": c,
-  ...r
+  ...d
 }) => {
-  const { disabled: d } = s({
+  const u = o({
     consumerName: "TileSecondaryAction",
     contextRequired: !0
-  }), u = x(
+  }), b = T(
     (n) => {
       n.stopPropagation(), n.preventDefault(), e?.(n);
     },
     [e]
   );
-  if (d) return null;
-  const p = a;
+  if (u)
+    return null;
+  const f = a;
   return /* @__PURE__ */ i(
     y,
     {
-      className: l(
+      className: s(
         "absolute top-8 right-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100",
-        o
+        r
       ),
       "data-secondary-button-container": !0,
       iconType: "stroked",
-      onClick: u,
+      onClick: b,
       "aria-label": c,
       ref: t,
-      ...r,
-      children: /* @__PURE__ */ i(p, { size: 24 })
+      ...d,
+      children: /* @__PURE__ */ i(f, { size: 24 })
     }
   );
 };
-q.displayName = "TileSecondaryAction";
+w.displayName = "TileSecondaryAction";
 export {
   g as Tile,
-  C as TileContent,
-  k as TileDescription,
-  q as TileSecondaryAction,
-  h as TileSpot,
-  S as TileTitle,
-  w as TileTrailingContent
+  N as TileContent,
+  C as TileDescription,
+  w as TileSecondaryAction,
+  h as TileTitle,
+  k as TileTrailingContent
 };