fina-react-ds 0.0.1 → 1.0.0

package/README.md

@@ -1,17 +1,7 @@
-# ELSAN REACT PUULSE
+# FINA CONCEPT DS
 
-### Storybook
+## Installation
 
-
-
-### Installation du package dans un projet:
-[Voir instructions](docs/installation-as-dependency.md)
-
-#### Configuration Tailwind >= 4
-[Voir instructions](docs/config-tailwind-4)
-
-#### Configuration Thème personnalisé
-[Voir instructions](docs/config-theme)
-
-### Installation pour développement:
-[Voir instructions](docs/installation-for-dev.md)
+```bash
+npm install fina-react-ds
+```

package/dist/components/alert.js

@@ -1,17 +1,17 @@
-var g = Object.defineProperty;
-var e = (t, r) => g(t, "name", { value: r, configurable: !0 });
-import { jsx as i } from "react/jsx-runtime";
-import { cva as n } from "class-variance-authority";
-import { cn as o } from "../lib/utils.js";
-const a = n(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+var o = Object.defineProperty;
+var c = (t, r) => o(t, "name", { value: r, configurable: !0 });
+import { jsx as e } from "react/jsx-runtime";
+import { cva as s } from "class-variance-authority";
+import { cn as f } from "../lib/utils.js";
+const g = s(
+  "fc:relative fc:w-full fc:rounded-lg fc:border fc:px-4 fc:py-3 fc:text-sm fc:grid fc:has-[>svg]:grid-cols-[calc(var(--fc-spacing)*4)_1fr] fc:grid-cols-[0_1fr] fc:has-[>svg]:gap-x-3 fc:gap-y-0.5 fc:items-start fc:[&>svg]:size-4 fc:[&>svg]:translate-y-0.5 fc:[&>svg]:text-current",
   {
     variants: {
       variant: {
-        info: "bg-info-light *:data-[slot=alert-description]:text-info-light-foreground text-info-light-foreground border-info-light-foreground/20 [&>svg]:text-info-light-foreground",
-        warning: "bg-warning-light text-warning-light-foreground border-warning-light-foreground/20 [&>svg]:text-warning-light-foreground",
-        success: "bg-success-light text-success-light-foreground border-success-light-foreground/20 [&>svg]:text-success-light-foreground",
-        destructive: "bg-destructive-light text-destructive-light-foreground border-destructive-light-foreground/20 [&>svg]:text-destructive-light-foreground"
+        info: "fc:bg-info-light fc:*:data-[slot=alert-description]:text-info-light-foreground fc:text-info-light-foreground fc:border-info-light-foreground/20 fc:[&>svg]:text-info-light-foreground",
+        warning: "fc:bg-warning-light fc:text-warning-light-foreground fc:border-warning-light-foreground/20 fc:[&>svg]:text-warning-light-foreground",
+        success: "fc:bg-success-light fc:text-success-light-foreground fc:border-success-light-foreground/20 fc:[&>svg]:text-success-light-foreground",
+        destructive: "fc:bg-destructive-light fc:text-destructive-light-foreground fc:border-destructive-light-foreground/20 fc:[&>svg]:text-destructive-light-foreground"
       }
     },
     defaultVariants: {
@@ -19,52 +19,55 @@ const a = n(
     }
   }
 );
-function f({
+function u({
   variant: t,
   className: r,
-  ...s
+  ...i
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "alert",
       role: "alert",
-      className: o(a({ variant: t }), r),
-      ...s
+      className: f(g({ variant: t }), r),
+      ...i
     }
   );
 }
-e(f, "Alert");
+c(u, "Alert");
 function v({ className: t, ...r }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "alert-title",
-      className: o(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+      className: f(
+        "fc:col-start-2 fc:line-clamp-1 fc:min-h-4 fc:font-medium fc:tracking-tight",
         t
       ),
       ...r
     }
   );
 }
-e(v, "AlertTitle");
-function h({ className: t, ...r }) {
-  return /* @__PURE__ */ i(
+c(v, "AlertTitle");
+function h({
+  className: t,
+  ...r
+}) {
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "alert-description",
-      className: o(
-        "col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+      className: f(
+        "fc:col-start-2 fc:grid fc:justify-items-start fc:gap-1 fc:text-sm fc:[&_p]:leading-relaxed",
         t
       ),
       ...r
     }
   );
 }
-e(h, "AlertDescription");
+c(h, "AlertDescription");
 export {
-  f as Alert,
+  u as Alert,
   h as AlertDescription,
   v as AlertTitle
 };

package/dist/components/avatar.js

@@ -1,56 +1,56 @@
-var o = Object.defineProperty;
-var e = (a, t) => o(a, "name", { value: t, configurable: !0 });
-import { jsx as r } from "react/jsx-runtime";
-import { Root as s, Image as n, Fallback as f } from "../node_modules/@radix-ui/react-avatar/dist/index.js";
-import { cn as l } from "../lib/utils.js";
+var r = Object.defineProperty;
+var c = (a, t) => r(a, "name", { value: t, configurable: !0 });
+import { jsx as e } from "react/jsx-runtime";
+import { Root as l, Image as o, Fallback as s } from "../node_modules/@radix-ui/react-avatar/dist/index.js";
+import { cn as f } from "../lib/utils.js";
 function d({
   className: a,
   ...t
 }) {
-  return /* @__PURE__ */ r(
-    s,
+  return /* @__PURE__ */ e(
+    l,
     {
       "data-slot": "avatar",
-      className: l(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+      className: f(
+        "fc:relative fc:flex fc:size-8 fc:shrink-0 fc:overflow-hidden fc:rounded-full",
         a
       ),
       ...t
     }
   );
 }
-e(d, "Avatar");
+c(d, "Avatar");
 function v({
   className: a,
   ...t
 }) {
-  return /* @__PURE__ */ r(
-    n,
+  return /* @__PURE__ */ e(
+    o,
     {
       "data-slot": "avatar-image",
-      className: l("aspect-square size-full", a),
+      className: f("fc:aspect-square fc:size-full", a),
       ...t
     }
   );
 }
-e(v, "AvatarImage");
+c(v, "AvatarImage");
 function p({
   className: a,
   ...t
 }) {
-  return /* @__PURE__ */ r(
-    f,
+  return /* @__PURE__ */ e(
+    s,
     {
       "data-slot": "avatar-fallback",
-      className: l(
-        "bg-muted flex size-full items-center justify-center rounded-full",
+      className: f(
+        "fc:bg-accent fc:flex fc:size-full fc:items-center fc:justify-center fc:rounded-full",
         a
       ),
       ...t
     }
   );
 }
-e(p, "AvatarFallback");
+c(p, "AvatarFallback");
 export {
   d as Avatar,
   p as AvatarFallback,

package/dist/components/badge.js

@@ -1,19 +1,19 @@
-var n = Object.defineProperty;
-var e = (r, i) => n(r, "name", { value: i, configurable: !0 });
-import { jsx as s } from "react/jsx-runtime";
-import { Root as g } from "../node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as a } from "class-variance-authority";
-import { cn as d } from "../lib/utils.js";
-const f = a(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+var c = Object.defineProperty;
+var e = (r, i) => c(r, "name", { value: i, configurable: !0 });
+import { jsx as o } from "react/jsx-runtime";
+import { Root as n } from "../node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as s } from "class-variance-authority";
+import { cn as g } from "../lib/utils.js";
+const a = s(
+  "fc:inline-flex fc:items-center fc:justify-center fc:rounded-md fc:border fc:px-2 fc:py-0.5 fc:text-xs fc:font-medium fc:w-fit fc:whitespace-nowrap fc:shrink-0 fc:[&>svg]:size-3 fc:gap-1 fc:[&>svg]:pointer-events-none fc:focus-visible:border-ring fc:focus-visible:ring-ring/50 fc:focus-visible:ring-[3px] fc:aria-invalid:ring-destructive/20 fc:dark:aria-invalid:ring-destructive/40 fc:aria-invalid:border-destructive fc:transition-[color,box-shadow] fc:overflow-hidden",
   {
     variants: {
       variant: {
-        primary: "bg-primary-light text-primary-light-foreground border-primary-light-foreground/20",
-        info: "bg-info-light text-info-light-foreground border-info-light-foreground/20",
-        warning: "bg-warning-light text-warning-light-foreground border-warning-light-foreground/20",
-        success: "bg-success-light text-success-light-foreground border-success-light-foreground/20",
-        destructive: "bg-destructive-light text-destructive-light-foreground border-destructive-light-foreground/20"
+        primary: "fc:bg-primary-light fc:text-primary-light-foreground fc:border-primary-light-foreground/20",
+        info: "fc:bg-info-light fc:text-info-light-foreground fc:border-info-light-foreground/20",
+        warning: "fc:bg-warning-light fc:text-warning-light-foreground fc:border-warning-light-foreground/20",
+        success: "fc:bg-success-light fc:text-success-light-foreground fc:border-success-light-foreground/20",
+        destructive: "fc:bg-destructive-light fc:text-destructive-light-foreground fc:border-destructive-light-foreground/20"
       }
     },
     defaultVariants: {
@@ -25,19 +25,19 @@ function m({
   className: r,
   variant: i,
   asChild: t = !1,
-  ...o
+  ...f
 }) {
-  return /* @__PURE__ */ s(
-    t ? g : "span",
+  return /* @__PURE__ */ o(
+    t ? n : "span",
     {
       "data-slot": "badge",
-      className: d(f({ variant: i }), r),
-      ...o
+      className: g(a({ variant: i }), r),
+      ...f
     }
   );
 }
 e(m, "Badge");
 export {
   m as Badge,
-  f as badgeVariants
+  a as badgeVariants
 };

package/dist/components/button.js

@@ -1,124 +1,124 @@
-var s = Object.defineProperty;
-var o = (r, e) => s(r, "name", { value: e, configurable: !0 });
-import { jsx as c } from "react/jsx-runtime";
-import { Root as d } from "../node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as v } from "class-variance-authority";
-import { cn as g } from "../lib/utils.js";
-const u = v(
-  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+var n = Object.defineProperty;
+var e = (r, c) => n(r, "name", { value: c, configurable: !0 });
+import { jsx as s } from "react/jsx-runtime";
+import { Root as f } from "../node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as d } from "class-variance-authority";
+import { cn as v } from "../lib/utils.js";
+const g = d(
+  "fc:cursor-pointer fc:inline-flex fc:items-center fc:justify-center fc:gap-2 fc:whitespace-nowrap fc:rounded-md fc:text-sm fc:font-medium fc:transition-all fc:disabled:pointer-events-none fc:disabled:opacity-50 fc:[&_svg]:pointer-events-none fc:[&_svg:not([class*='size-'])]:size-4 fc:shrink-0 fc:[&_svg]:shrink-0 fc:outline-none fc:focus-visible:ring-[3px] fc:aria-invalid:ring-destructive/20 fc:dark:aria-invalid:ring-destructive/40 fc:aria-invalid:border-destructive",
   {
     variants: {
       color: {
-        primary: "focus-visible:ring-primary/50",
-        info: "focus-visible:ring-info/50",
-        success: "focus-visible:ring-success/50",
-        warning: "focus-visible:ring-warning/50",
-        destructive: "focus-visible:ring-destructive/50",
-        dark: "focus-visible:ring-black/50"
+        primary: "fc:focus-visible:ring-primary/50",
+        info: "fc:focus-visible:ring-info/50",
+        success: "fc:focus-visible:ring-success/50",
+        warning: "fc:focus-visible:ring-warning/50",
+        destructive: "fc:focus-visible:ring-destructive/50",
+        dark: "fc:focus-visible:ring-black/50"
       },
       variant: {
-        contained: "border",
-        outline: "border bg-transparent",
-        ghost: "border border-transparent",
-        link: "text-primary underline-offset-4 hover:underline"
+        contained: "fc:border",
+        outline: "fc:border fc:bg-transparent",
+        ghost: "fc:border fc:border-transparent",
+        link: "fc:text-primary fc:underline-offset-4 fc:hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
+        default: "fc:h-9 fc:px-4 fc:py-2 fc:has-[>svg]:px-3",
+        sm: "fc:h-8 fc:rounded-md fc:gap-1.5 fc:px-3 fc:has-[>svg]:px-2.5",
+        lg: "fc:h-10 fc:rounded-md fc:px-6 fc:has-[>svg]:px-4",
+        icon: "fc:size-9"
       }
     },
     compoundVariants: [
       {
         color: "primary",
         variant: "contained",
-        className: "bg-primary border-primary text-primary-foreground hover:bg-primary/90"
+        className: "fc:bg-primary fc:border-primary fc:text-primary-foreground fc:hover:bg-primary/90"
       },
       {
         color: "info",
         variant: "contained",
-        className: "bg-info border-info text-info-foreground hover:bg-info/90"
+        className: "fc:bg-info fc:border-info fc:text-info-foreground fc:hover:bg-info/90"
       },
       {
         color: "success",
         variant: "contained",
-        className: "bg-success border-success text-success-foreground hover:bg-success/90"
+        className: "fc:bg-success fc:border-success fc:text-success-foreground fc:hover:bg-success/90"
       },
       {
         color: "warning",
         variant: "contained",
-        className: "bg-warning border-warning text-warning-foreground hover:bg-warning/90"
+        className: "fc:bg-warning fc:border-warning fc:text-warning-foreground fc:hover:bg-warning/90"
       },
       {
         color: "destructive",
         variant: "contained",
-        className: "bg-destructive border-destructive text-destructive-foreground hover:bg-destructive/90"
+        className: "fc:bg-destructive fc:border-destructive fc:text-destructive-foreground fc:hover:bg-destructive/90"
       },
       {
         color: "dark",
         variant: "contained",
-        className: "bg-dark border-dark text-dark-foreground hover:bg-dark/90"
+        className: "fc:bg-dark fc:border-dark fc:text-dark-foreground fc:hover:bg-dark/90"
       },
       {
         color: "primary",
         variant: "outline",
-        className: "border-primary text-primary hover:bg-primary hover:text-primary-foreground"
+        className: "fc:border-primary fc:text-primary fc:hover:bg-primary fc:hover:text-primary-foreground"
       },
       {
         color: "info",
         variant: "outline",
-        className: "border-info text-info hover:bg-info hover:text-info-foreground"
+        className: "fc:border-info fc:text-info fc:hover:bg-info fc:hover:text-info-foreground"
       },
       {
         color: "success",
         variant: "outline",
-        className: "border-success text-success hover:bg-success hover:text-success-foreground"
+        className: "fc:border-success fc:text-success fc:hover:bg-success fc:hover:text-success-foreground"
       },
       {
         color: "warning",
         variant: "outline",
-        className: "border-warning text-warning hover:bg-warning hover:text-warning-foreground"
+        className: "fc:border-warning fc:text-warning fc:hover:bg-warning fc:hover:text-warning-foreground"
       },
       {
         color: "destructive",
         variant: "outline",
-        className: "border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground"
+        className: "fc:border-destructive fc:text-destructive fc:hover:bg-destructive fc:hover:text-destructive-foreground"
       },
       {
         color: "dark",
         variant: "outline",
-        className: "border-dark text-dark hover:bg-dark hover:text-dark-foreground dark:text-dark-foreground"
+        className: "fc:border-dark fc:text-dark fc:hover:bg-dark fc:hover:text-dark-foreground fc:dark:text-dark-foreground"
       },
       {
         color: "primary",
         variant: "ghost",
-        className: "text-primary hover:bg-primary/10"
+        className: "fc:text-primary fc:hover:bg-primary/10"
       },
       {
         color: "info",
         variant: "ghost",
-        className: "text-info hover:bg-info/10"
+        className: "fc:text-info fc:hover:bg-info/10"
       },
       {
         color: "success",
         variant: "ghost",
-        className: "text-success hover:bg-success/10"
+        className: "fc:text-success fc:hover:bg-success/10"
       },
       {
         color: "warning",
         variant: "ghost",
-        className: "text-warning hover:bg-warning/10"
+        className: "fc:text-warning fc:hover:bg-warning/10"
       },
       {
         color: "destructive",
         variant: "ghost",
-        className: "text-destructive hover:bg-destructive/10"
+        className: "fc:text-destructive fc:hover:bg-destructive/10"
       },
       {
         color: "dark",
         variant: "ghost",
-        className: "text-dark dark:text-dark-foreground hover:bg-dark/10 dark:hover:bg-dark"
+        className: "fc:text-dark fc:dark:text-dark-foreground fc:hover:bg-dark/10 fc:dark:hover:bg-dark"
       }
     ],
     defaultVariants: {
@@ -130,23 +130,23 @@ const u = v(
 );
 function x({
   className: r,
-  variant: e,
-  color: t,
-  size: a,
-  asChild: i = !1,
-  ...n
+  variant: c,
+  color: o,
+  size: t,
+  asChild: a = !1,
+  ...i
 }) {
-  return /* @__PURE__ */ c(
-    i ? d : "button",
+  return /* @__PURE__ */ s(
+    a ? f : "button",
     {
       "data-slot": "button",
-      className: g(u({ variant: e, color: t, size: a, className: r })),
-      ...n
+      className: v(g({ variant: c, color: o, size: t, className: r })),
+      ...i
     }
   );
 }
-o(x, "Button");
+e(x, "Button");
 export {
   x as Button,
-  u as buttonVariants
+  g as buttonVariants
 };

package/dist/components/calendar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayButton, DayPicker } from "react-day-picker";
+import { Button } from "../components/button";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: Omit<React.ComponentProps<typeof DayButton>, "color">): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/card.js

@@ -1,99 +1,99 @@
-var d = Object.defineProperty;
-var a = (t, r) => d(t, "name", { value: r, configurable: !0 });
-import { jsx as o } from "react/jsx-runtime";
-import { cn as e } from "../lib/utils.js";
-function i({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
+var e = Object.defineProperty;
+var a = (t, c) => e(t, "name", { value: c, configurable: !0 });
+import { jsx as r } from "react/jsx-runtime";
+import { cn as o } from "../lib/utils.js";
+function s({ className: t, ...c }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "card",
-      className: e(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+      className: o(
+        "fc:bg-card fc:text-card-foreground fc:flex fc:flex-col fc:gap-6 fc:rounded-xl fc:border fc:py-6 fc:shadow-sm",
         t
       ),
-      ...r
+      ...c
     }
   );
 }
-a(i, "Card");
-function l({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
+a(s, "Card");
+function i({ className: t, ...c }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "card-header",
-      className: e(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+      className: o(
+        "fc:@container/card-header fc:grid fc:auto-rows-min fc:grid-rows-[auto_auto] fc:items-start fc:gap-1.5 fc:px-6 fc:has-data-[slot=card-action]:grid-cols-[1fr_auto] fc:[.border-b]:pb-6",
         t
       ),
-      ...r
+      ...c
     }
   );
 }
-a(l, "CardHeader");
-function u({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
+a(i, "CardHeader");
+function l({ className: t, ...c }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "card-title",
-      className: e("leading-none font-semibold", t),
-      ...r
+      className: o("fc:leading-none fc:font-semibold", t),
+      ...c
     }
   );
 }
-a(u, "CardTitle");
-function f({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
+a(l, "CardTitle");
+function u({ className: t, ...c }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "card-description",
-      className: e("text-muted-foreground text-sm", t),
-      ...r
+      className: o("fc:text-muted fc:text-sm", t),
+      ...c
     }
   );
 }
-a(f, "CardDescription");
-function m({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
+a(u, "CardDescription");
+function m({ className: t, ...c }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "card-action",
-      className: e(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+      className: o(
+        "fc:col-start-2 fc:row-span-2 fc:row-start-1 fc:self-start fc:justify-self-end",
         t
       ),
-      ...r
+      ...c
     }
   );
 }
 a(m, "CardAction");
-function p({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
+function p({ className: t, ...c }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "card-content",
-      className: e("px-6", t),
-      ...r
+      className: o("fc:px-6", t),
+      ...c
     }
   );
 }
 a(p, "CardContent");
-function x({ className: t, ...r }) {
-  return /* @__PURE__ */ o(
+function x({ className: t, ...c }) {
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "card-footer",
-      className: e("flex items-center px-6 [.border-t]:pt-6", t),
-      ...r
+      className: o("fc:flex fc:items-center fc:px-6 fc:[.border-t]:pt-6", t),
+      ...c
     }
   );
 }
 a(x, "CardFooter");
 export {
-  i as Card,
+  s as Card,
   m as CardAction,
   p as CardContent,
-  f as CardDescription,
+  u as CardDescription,
   x as CardFooter,
-  l as CardHeader,
-  u as CardTitle
+  i as CardHeader,
+  l as CardTitle
 };