@ledgerhq/lumen-ui-react 0.1.48 → 0.1.49

package/dist/lib/Components/Avatar/Avatar.js

@@ -1,78 +1,118 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cva as u } from "class-variance-authority";
-import { useState as v, useEffect as b } from "react";
-import { useCommonTranslation as g } from "../../../i18n/useCommonTranslation.js";
-import { User as z } from "../../Symbols/Icons/User.js";
-const x = {
-  root: u(
-    "relative inline-flex items-center justify-center rounded-full transition-colors",
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { cn as c } from "../../../libs/utils-shared/dist/index.js";
+import { cva as m } from "class-variance-authority";
+import { useState as z, useEffect as y } from "react";
+import { useCommonTranslation as N } from "../../../i18n/useCommonTranslation.js";
+import { User as j } from "../../Symbols/Icons/User.js";
+const u = {
+  root: m(
+    "relative inline-flex items-center justify-center rounded-full bg-base-transparent-hover align-middle transition-colors",
     {
       variants: {
-        appearance: {
-          gray: "bg-muted",
-          transparent: "bg-muted-transparent"
-        },
         size: {
-          sm: "size-40 p-4",
-          md: "size-48 p-4",
-          lg: "size-56 p-4",
-          xl: "size-72 p-4"
+          xs: "size-24",
+          sm: "size-40",
+          md: "size-48",
+          lg: "size-56",
+          xl: "size-72",
+          "2xl": "size-128"
         }
       },
       defaultVariants: {
-        appearance: "transparent",
         size: "md"
       }
     }
-  )
-}, h = {
+  ),
+  text: m("select-none", {
+    variants: {
+      size: {
+        xs: "body-4-semi-bold",
+        sm: "body-1-semi-bold",
+        md: "heading-5-semi-bold",
+        lg: "heading-4-semi-bold",
+        xl: "heading-2-semi-bold",
+        "2xl": "heading-1-semi-bold"
+      }
+    }
+  })
+}, C = {
+  xs: 12,
   sm: 16,
   md: 24,
   lg: 32,
-  xl: 40
-}, y = ({
-  ref: o,
-  className: n,
-  src: a,
-  alt: s,
-  appearance: l = "transparent",
-  size: r = "md",
-  imgLoading: i,
-  ...m
+  xl: 40,
+  "2xl": 56
+}, A = ({
+  size: s,
+  fallbackText: o,
+  fallbackColor: e
+}) => {
+  const a = e ? "text-black" : "text-base";
+  return o ? /* @__PURE__ */ t("span", { className: c(u.text({ size: s }), a), children: o }) : /* @__PURE__ */ t(
+    j,
+    {
+      className: a,
+      size: C[s],
+      "aria-hidden": "true"
+    }
+  );
+}, U = ({
+  ref: s,
+  className: o,
+  src: e,
+  alt: a,
+  size: n = "md",
+  imgLoading: b,
+  fallbackText: x,
+  fallbackColor: r,
+  appearance: i,
+  ...v
 }) => {
-  const { t: c } = g(), [d, t] = v(!1), p = !a || d, f = s || c("components.avatar.defaultAriaLabel");
-  return b(() => {
-    t(!1);
-  }, [a]), /* @__PURE__ */ e(
+  const { t: f } = N(), [h, l] = z(!1), d = !e || h, g = a || f("components.avatar.defaultAriaLabel");
+  return y(() => {
+    l(!1);
+  }, [e]), /* @__PURE__ */ p(
     "div",
     {
-      ref: o,
-      className: x.root({ appearance: l, size: r, className: n }),
+      ref: s,
+      className: c(u.root({ size: n }), o),
+      style: d && r ? { backgroundColor: r } : void 0,
       role: "img",
-      "aria-label": f,
-      ...m,
-      children: p ? /* @__PURE__ */ e(
-        z,
-        {
-          className: "text-base",
-          size: h[r],
-          "aria-label": "Fallback Icon",
-          "aria-hidden": "true"
-        }
-      ) : /* @__PURE__ */ e(
-        "img",
-        {
-          src: a,
-          alt: "",
-          loading: i,
-          onError: () => t(!0),
-          className: "size-full overflow-hidden rounded-full object-cover",
-          "aria-hidden": "true"
-        }
-      )
+      "aria-label": g,
+      ...v,
+      children: [
+        d ? /* @__PURE__ */ t(
+          A,
+          {
+            size: n,
+            fallbackText: x,
+            fallbackColor: r
+          }
+        ) : /* @__PURE__ */ t(
+          "img",
+          {
+            src: e,
+            alt: "",
+            loading: b,
+            onError: () => l(!0),
+            className: "size-full overflow-hidden rounded-full object-cover",
+            "aria-hidden": "true"
+          }
+        ),
+        i && /* @__PURE__ */ t(
+          "span",
+          {
+            className: "pointer-events-none absolute inset-0 rounded-full",
+            style: {
+              boxShadow: i === "thin" ? "inset 0 0 0 1px var(--color-border-icon)" : "inset 0 0 0 2px var(--color-border-muted-subtle-transparent)"
+            },
+            "aria-hidden": "true"
+          }
+        )
+      ]
     }
   );
 };
 export {
-  y as Avatar
+  U as Avatar
 };

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

@@ -1,3 +1,4 @@
 export { Avatar } from './Avatar';
+export { resolveAvatarColor } from './resolveAvatarColor';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,SAAS,CAAC"}

package/dist/lib/Components/Avatar/resolveAvatarColor.d.ts

@@ -0,0 +1,9 @@
+import { CSSVarRef } from '@ledgerhq/lumen-design-core';
+/**
+ * Resolves a stable identifier (e.g. a user id) to one of the avatar pastel
+ * color tokens. The same identifier always resolves to the same color.
+ *
+ * Pass the result directly to `<Avatar fallbackColor={resolveAvatarColor(id)} />`.
+ */
+export declare function resolveAvatarColor(identifier: string): CSSVarRef;
+//# sourceMappingURL=resolveAvatarColor.d.ts.map

package/dist/lib/Components/Avatar/resolveAvatarColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveAvatarColor.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/resolveAvatarColor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAiBrE;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAEhE"}

package/dist/lib/Components/Avatar/resolveAvatarColor.js

@@ -0,0 +1,18 @@
+import { resolveAvatarColorKey as o } from "../../../libs/utils-shared/dist/index.js";
+import { cssVar as a } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+const e = {
+  orange: a("var(--background-avatar-orange)"),
+  green: a("var(--background-avatar-green)"),
+  blue: a("var(--background-avatar-blue)"),
+  purple: a("var(--background-avatar-purple)"),
+  red: a("var(--background-avatar-red)"),
+  yellow: a("var(--background-avatar-yellow)"),
+  turquoise: a("var(--background-avatar-turquoise)"),
+  pink: a("var(--background-avatar-pink)")
+};
+function n(r) {
+  return e[o(r)];
+}
+export {
+  n as resolveAvatarColor
+};

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type AvatarProps = {
     /**
      * Image source URL. When undefined or on load error, displays a fallback icon.
@@ -11,17 +12,11 @@ export type AvatarProps = {
      */
     alt?: string;
     /**
-     * The visual appearance of the avatar background: `gray` or `transparent`.
-     * @optional
-     * @default transparent
-     */
-    appearance?: 'gray' | 'transparent';
-    /**
-     * The size variant of the avatar: `sm`, `md`, `lg`, `xl`.
+     * The size variant of the avatar.
      * @optional
      * @default md
      */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: AvatarSize;
     /**
      * Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
      * @optional
@@ -35,5 +30,25 @@ export type AvatarProps = {
      * @default undefined (browser default: eager)
      */
     imgLoading?: 'eager' | 'lazy';
+    /**
+     * Background color behind the fallback when no image is displayed.
+     * Use `resolveAvatarColor` from `@ledgerhq/lumen-ui-react` to derive
+     * a stable pastel color from an identifier such as a user id.
+     * @optional
+     */
+    fallbackColor?: string;
+    /**
+     * Short text shown in place of the fallback icon when no image is displayed,
+     * typically a user's initials.
+     * @optional
+     */
+    fallbackText?: string;
+    /**
+     * Appearance for the avatar.
+     * - `thin`: 1px ring using the icon border color
+     * - `thick`: 2px ring using the muted subtle transparent border color
+     * @optional
+     */
+    appearance?: 'thin' | 'thick';
 } & ComponentPropsWithRef<'div'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAEpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC/B,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+import { AvatarButtonProps } from './types';
+/**
+ * An {@link Avatar} wrapped in a button, for use as an interactive trigger.
+ */
+export declare const AvatarButton: ({ ref, className, src, alt, size, imgLoading, fallbackText, fallbackColor, appearance, disabled: disabledProp, ...buttonProps }: AvatarButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AvatarButton/AvatarButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,iIAY1B,iBAAiB,4CA6BnB,CAAC"}

package/dist/lib/Components/AvatarButton/AvatarButton.js

@@ -0,0 +1,52 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useDisabledContext as f, cn as v } from "../../../libs/utils-shared/dist/index.js";
+import { Avatar as m } from "../Avatar/Avatar.js";
+const A = ({
+  ref: t,
+  className: o,
+  src: s,
+  alt: r,
+  size: a,
+  imgLoading: n,
+  fallbackText: i,
+  fallbackColor: l,
+  appearance: u,
+  disabled: d = !1,
+  ...b
+}) => {
+  const c = f({
+    consumerName: "AvatarButton",
+    mergeWith: { disabled: d }
+  });
+  return /* @__PURE__ */ p(
+    "button",
+    {
+      ref: t,
+      type: "button",
+      disabled: c,
+      className: v(
+        "group relative cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30",
+        o
+      ),
+      ...b,
+      children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            src: s,
+            alt: r,
+            size: a,
+            imgLoading: n,
+            fallbackText: i,
+            fallbackColor: l,
+            appearance: u
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-0 rounded-full transition-colors group-hover:bg-base-transparent-hover group-active:bg-base-transparent-pressed" })
+      ]
+    }
+  );
+};
+export {
+  A as AvatarButton
+};

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

@@ -0,0 +1,3 @@
+export { AvatarButton } from './AvatarButton';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AvatarButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,4 @@
+import { ComponentPropsWithRef } from 'react';
+import { AvatarProps } from '../Avatar/types';
+export type AvatarButtonProps = Pick<AvatarProps, 'src' | 'alt' | 'size' | 'imgLoading' | 'fallbackText' | 'fallbackColor' | 'appearance'> & Omit<ComponentPropsWithRef<'button'>, 'children' | 'type'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AvatarButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,WAAW,EACT,KAAK,GACL,KAAK,GACL,MAAM,GACN,YAAY,GACZ,cAAc,GACd,eAAe,GACf,YAAY,CACf,GACC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC"}

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

@@ -72,12 +72,12 @@ const ne = g(
   inputClassName: B,
   labelClassName: F,
   label: i,
-  id: j,
-  disabled: z,
+  id: P,
+  disabled: j,
   helperText: b,
   maxCount: c,
   status: d,
-  suffix: P,
+  suffix: z,
   prefix: R,
   onClear: D,
   hideClearButton: $ = !1,
@@ -88,8 +88,8 @@ const ne = g(
 }) => {
   const w = Q({
     consumerName: "BaseInput",
-    mergeWith: { disabled: z }
-  }), { t: L } = re(), r = Z(null), A = _(), m = j || `input-${A}`, M = E ?? (d === "error" ? !0 : void 0), p = u.value !== void 0, [O, y] = ee(
+    mergeWith: { disabled: j }
+  }), { t: L } = re(), r = Z(null), A = _(), m = P || `input-${A}`, M = E ?? (d === "error" ? !0 : void 0), p = u.value !== void 0, [O, y] = ee(
     u.defaultValue?.toString() ?? ""
   ), T = te(
     (n) => {
@@ -170,7 +170,7 @@ const ne = g(
               "aria-label": L("components.baseInput.clearInputAriaLabel")
             }
           ),
-          !I && P
+          !I && z
         ]
       }
     ),

package/dist/lib/Components/BaseTag/BaseTag.js

@@ -50,9 +50,9 @@ const u = x(
   label: n,
   disabled: c,
   leadingContent: d,
-  ...b
+  ...l
 }) => {
-  const l = g({
+  const b = g({
     consumerName: i,
     mergeWith: { disabled: c }
   });
@@ -60,11 +60,11 @@ const u = x(
     "div",
     {
       className: o(
-        u({ appearance: t, size: s, variant: r, disabled: !!l }),
+        u({ appearance: t, size: s, variant: r, disabled: !!b }),
         a
       ),
       ref: e,
-      ...b,
+      ...l,
       children: [
         d,
         /* @__PURE__ */ p("span", { className: "truncate", children: n })

package/dist/lib/Components/Button/BaseButton.d.ts

@@ -1,9 +1,9 @@
 import { BaseButtonProps } from './types';
 export declare const baseButtonVariants: (props?: ({
-    appearance?: "base" | "gray" | "transparent" | "accent" | "no-background" | "red" | null | undefined;
+    appearance?: "base" | "gray" | "red" | "transparent" | "accent" | "no-background" | null | undefined;
     disabled?: boolean | null | undefined;
     loading?: boolean | null | undefined;
-    size?: "md" | "sm" | "lg" | "xs" | null | undefined;
+    size?: "md" | "sm" | "xs" | "lg" | null | undefined;
     isFull?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const BaseButton: ({ ref, className, appearance, size, isFull, disabled: disabledProp, asChild, icon: Icon, loading, children, onClick, ...props }: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/Components/Button/Button.js

@@ -15,10 +15,10 @@ const l = e("", {
   }
 }), x = ({
   ref: t,
-  className: s,
-  loading: m,
-  disabled: r,
-  children: a,
+  className: m,
+  loading: s,
+  disabled: a,
+  children: r,
   size: o,
   icon: i,
   ...p
@@ -27,12 +27,12 @@ const l = e("", {
   {
     ref: t,
     size: o,
-    disabled: r,
+    disabled: a,
     icon: i,
-    loading: m,
-    className: d(l({ size: o }), "gap-8", s),
+    loading: s,
+    className: d(l({ size: o }), "gap-8", m),
     ...p,
-    children: a
+    children: r
   }
 );
 export {

package/dist/lib/Components/Card/Card.js

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as f, Fragment as b } from "react/jsx-runtime";
-import { createSafeContext as m, DisabledProvider as p, cn as o, getButtonA11yProps as C } from "../../../libs/utils-shared/dist/index.js";
-import { cva as g } from "class-variance-authority";
+import { createSafeContext as m, DisabledProvider as g, cn as o, getButtonA11yProps as C } from "../../../libs/utils-shared/dist/index.js";
+import { cva as p } from "class-variance-authority";
 import { useMemo as h } from "react";
 import { ChevronUp as N } from "../../Symbols/Icons/ChevronUp.js";
 import { ChevronDown as w } from "../../Symbols/Icons/ChevronDown.js";
@@ -46,7 +46,7 @@ const k = ({
   }
 ), [q, v] = m("CardContentAlign", {
   align: "left"
-}), E = g(
+}), E = p(
   "flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
   {
     variants: {
@@ -96,7 +96,7 @@ const k = ({
     }),
     [r, e, l, i]
   );
-  return /* @__PURE__ */ s(R, { value: u, children: /* @__PURE__ */ s(p, { value: { disabled: i }, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(R, { value: u, children: /* @__PURE__ */ s(g, { value: { disabled: i }, children: /* @__PURE__ */ s(
     "div",
     {
       ref: t,
@@ -203,7 +203,7 @@ const k = ({
       children: a
     }
   );
-}, U = ({
+}, I = ({
   ref: t,
   children: a,
   className: r,
@@ -226,7 +226,7 @@ const k = ({
       children: a
     }
   );
-}, I = ({
+}, L = ({
   ref: t,
   children: a,
   className: r,
@@ -249,7 +249,7 @@ const k = ({
       children: a
     }
   );
-}, L = ({
+}, M = ({
   ref: t,
   children: a,
   className: r,
@@ -272,7 +272,7 @@ const k = ({
       children: a
     }
   ) });
-}, M = ({
+}, S = ({
   ref: t,
   children: a,
   className: r,
@@ -304,7 +304,7 @@ const k = ({
       ) })
     }
   );
-}, S = ({
+}, U = ({
   ref: t,
   children: a,
   className: r,
@@ -321,13 +321,13 @@ const k = ({
 export {
   P as Card,
   z as CardContent,
-  I as CardContentDescription,
+  L as CardContentDescription,
   B as CardContentRow,
-  U as CardContentTitle,
-  M as CardFooter,
-  S as CardFooterActions,
+  I as CardContentTitle,
+  S as CardFooter,
+  U as CardFooterActions,
   T as CardHeader,
   V as CardLeading,
-  L as CardTrailing,
+  M as CardTrailing,
   k as resolveCardInnerContext
 };

package/dist/lib/Components/CardButton/CardButton.js

@@ -17,9 +17,9 @@ const h = f(
   }
 ), w = ({
   ref: i,
-  className: o,
-  appearance: d,
-  icon: l,
+  className: l,
+  appearance: o,
+  icon: d,
   title: r,
   description: t,
   hideChevron: n,
@@ -29,16 +29,16 @@ const h = f(
   const c = m({
     consumerName: "CardButton",
     mergeWith: { disabled: b }
-  }), s = l;
+  }), s = d;
   return /* @__PURE__ */ a(
     "button",
     {
       ref: i,
       className: p(
         h({
-          appearance: d
+          appearance: o
         }),
-        o
+        l
       ),
       disabled: c,
       ...u,