@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/avatar/parts/AvatarFallback.js

@@ -1,12 +1,12 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as p from "react";
-import { uyTv as t, uyMerge as f } from "@payfit/unity-themes";
-import * as l from "@radix-ui/react-avatar";
-import { useAvatarContext as b } from "../Avatar.context.js";
-import { avatarBase as n } from "../Avatar.variants.js";
-import { getInitials as v } from "../utils.js";
-const h = t({
-  extend: n,
+import * as m from "react";
+import { uyTv as n, uyMerge as b } from "@payfit/unity-themes";
+import * as e from "@radix-ui/react-avatar";
+import { useAvatarContext as f } from "../Avatar.context.js";
+import { avatarBase as s } from "../Avatar.variants.js";
+import { getInitials as h } from "../utils.js";
+const v = n({
+  extend: s,
   slots: {
     base: "uy:absolute uy:overflow-hidden",
     background: "",
@@ -28,9 +28,9 @@ const h = t({
       }
     }
   }
-}), w = t({
-  extend: n,
-  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-low",
+}), w = n({
+  extend: s,
+  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-lowest",
   variants: {
     size: {
       xs: "uy:typography-body-small-strong",
@@ -40,47 +40,46 @@ const h = t({
       xl: "uy:typography-h2"
     }
   }
-}), x = p.forwardRef(({ variant: u, color: s, children: i, ...r }, y) => {
-  const c = b(), { size: e, variant: o } = c;
+}), x = m.forwardRef(({ variant: u, color: i, children: y, ...r }, o) => {
+  const c = f(), { size: t, variant: l } = c;
   if (u === "placeholder") {
-    const { base: d, background: g, foreground: m } = h({
-      color: s,
-      size: e,
-      variant: o
+    const { base: d, background: g, foreground: p } = v({
+      color: i,
+      size: t,
+      variant: l
     });
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ a(e.Fallback, { ref: o, role: "presentation", ...r, children: /* @__PURE__ */ a(
       "svg",
       {
         role: "img",
         "aria-hidden": !0,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 16 16",
-        className: f(d(), g()),
-        ...r,
+        className: b(d(), g()),
         children: /* @__PURE__ */ a(
           "path",
           {
-            className: m(),
+            className: p(),
             fillRule: "evenodd",
             d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
             clipRule: "evenodd"
           }
         )
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ a(
-    l.Fallback,
+    e.Fallback,
     {
-      ref: y,
+      ref: o,
       role: "presentation",
-      className: w({ size: e, variant: o }),
+      className: w({ size: t, variant: l }),
       ...r,
-      children: v(i)
+      children: h(y)
     }
   );
 });
-x.displayName = l.Fallback.displayName;
+x.displayName = e.Fallback.displayName;
 export {
   x as AvatarFallback
 };

package/dist/esm/components/badge/Badge.js

@@ -9,7 +9,7 @@ const g = y({
       success: "uy:bg-surface-success-low uy:text-content-success-high",
       warning: "uy:bg-surface-warning-low uy:text-content-warning-high",
       danger: "uy:bg-surface-danger-low uy:text-content-danger-high",
-      neutral: "uy:bg-surface-neutral-low uy:text-content-neutral",
+      neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral",
       promo: "uy:bg-surface-promo-low uy:text-content-promo-high",
       attention: "uy:bg-surface-danger uy:text-content-inverted",
       numeric: "uy:bg-surface-info-low uy:text-content-info-high",

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.js

@@ -2,7 +2,7 @@ import { uyTv as a } from "@payfit/unity-themes";
 const r = a({
   slots: {
     base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action",
-    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:sm:items-center"
+    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:items-center"
   },
   variants: {
     wrap: {

package/dist/esm/components/button/Button.js

@@ -10,14 +10,14 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
     variant: e,
     children: n,
     color: o = "primary",
-    size: u = "default",
+    size: c = "default",
     isDisabled: a = !1,
     isLoading: t = !1,
-    prefixIcon: c = void 0,
+    prefixIcon: u = void 0,
     ...i
   }, p) => {
     const f = x(() => {
-      const s = { size: u, isDisabled: a, isLoading: t };
+      const s = { size: c, isDisabled: a, isLoading: t };
       switch (e) {
         case "primary": {
           const r = {
@@ -41,7 +41,7 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
           return l(w(r));
         }
       }
-    }, [e, o, u, a, t]), d = {
+    }, [e, o, c, a, t]), d = {
       ...t && { "data-loading": t }
     };
     return /* @__PURE__ */ m(
@@ -53,8 +53,8 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
         isDisabled: a || t,
         className: f,
         ...d,
-        children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:leading-[1.75] uy:items-center", children: [
-          I(t, c),
+        children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
+          I(t, u),
           n
         ] })
       }

package/dist/esm/components/button/Button.variants.d.ts

@@ -178,6 +178,7 @@ export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
         warning: string[];
         danger: string[];
         neutral: string[];
+        'neutral.lowest': string[];
         inverted: string[];
     };
     isDisabled: {

package/dist/esm/components/button/Button.variants.js

@@ -2,8 +2,8 @@ import { uyTv as e } from "@payfit/unity-themes";
 const t = e({
   base: [
     "uy:group",
-    "uy:cursor-pointer uy:rounded-75 uy:px-200 uy:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    "uy:cursor-pointer uy:rounded-100 uy:sm:rounded-75 uy:px-200 uy:py-125 uy:sm:py-100 uy:sm:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
+    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-offset-2 uy:data-[focus-visible]:outline-utility-focus-ring"
   ],
   variants: {
     isDisabled: {
@@ -30,28 +30,28 @@ const t = e({
     color: {
       primary: [
         "uy:bg-surface-primary-enabled uy:text-content-inverted-enabled",
-        "uy:hover:bg-surface-primary-hover uy:hover:text-content-inverted-hover",
+        'uy:data-[hovered="true"]:bg-surface-primary-hover uy:data-[hovered="true"]:text-content-inverted-hover',
         "uy:active:bg-surface-primary-active uy:active:text-content-inverted-hover",
         "uy:data-[pressed]:bg-surface-primary-pressed uy:data-[pressed]:text-content-inverted-pressed"
       ],
       warning: [
         "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
-        "uy:hover:bg-surface-warning-hover uy:hover:text-content-neutral-hover",
+        'uy:data-[hovered="true"]:bg-surface-warning-hover uy:data-[hovered="true"]:text-content-neutral-hover',
         "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active",
         "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
       ],
       danger: [
         "uy:bg-surface-danger-enabled uy:text-content-inverted-enabled",
-        "uy:hover:bg-surface-danger-hover uy:hover:text-content-inverted-hover",
+        'uy:data-[hovered="true"]:bg-surface-danger-hover uy:data-[hovered="true"]:text-content-inverted-hover',
         "uy:active:bg-surface-danger-active uy:active:text-content-inverted",
         "uy:data-[pressed]:bg-surface-danger-pressed uy:data-[pressed]:text-content-inverted"
       ],
       inverted: [
         "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
-        "uy:hover:bg-surface-neutral-hover uy:hover:text-content-neutral-hover",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
         "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
         "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
-        "uy:focus-visible:outline-utility-inverted-focus-ring uy:focus-visible:text-content-neutral-focus uy:focus-visible:bg-surface-neutral-focus"
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus"
       ]
     },
     isDisabled: {
@@ -70,14 +70,14 @@ const t = e({
     color: {
       primary: [
         "uy:bg-transparent uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
-        "uy:hover:text-content-neutral-hover uy:hover:border-border-neutral-high-hover",
+        'uy:data-[hovered="true"]:text-content-neutral-hover uy:data-[hovered="true"]:border-border-neutral-high-hover',
         "uy:active:text-content-neutral-active uy:active:border-border-neutral-high-pressed",
         "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:border-border-neutral-high-pressed",
-        "uy:focus-visible:border-border-neutral-high-focus uy:focus-visible:text-content-neutral-focus"
+        "uy:data-[focus-visible]:border-border-neutral-high-focus uy:data-[focus-visible]:text-content-neutral-focus"
       ],
       inverted: [
         "uy:bg-transparent uy:text-content-inverted uy:border-border-inverted-enabled",
-        "uy:focus-visible:outline-utility-inverted-focus-ring"
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring"
       ]
     },
     isDisabled: {
@@ -97,35 +97,42 @@ const t = e({
         "uy:enabled:hover:bg-surface-primary-lowest-hover uy:enabled:hover:text-content-primary-hover",
         "uy:enabled:active:bg-surface-primary-lowest-active uy:enabled:active:text-content-primary-active",
         "uy:enabled:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:enabled:data-[pressed=true]:text-content-primary-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       warning: [
         "uy:bg-transparent uy:text-content-warning-enabled",
         "uy:enabled:hover:bg-surface-warning-lowest-hover uy:enabled:hover:text-content-warning-hover",
         "uy:enabled:active:bg-surface-warning-lowest-active uy:enabled:active:text-content-warning-active",
         "uy:enabled:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:enabled:data-[pressed=true]:text-content-warning-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       danger: [
         "uy:bg-transparent uy:text-content-danger-enabled",
         "uy:enabled:hover:bg-surface-danger-lowest-hover uy:enabled:hover:text-content-danger-hover",
         "uy:enabled:active:bg-surface-danger-lowest-active uy:enabled:active:text-content-danger-active",
         "uy:enabled:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:enabled:data-[pressed=true]:text-content-danger-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       neutral: [
         "uy:bg-transparent uy:text-content-neutral-enabled",
         "uy:enabled:hover:bg-surface-neutral-hover uy:enabled:hover:text-content-neutral-hover",
         "uy:enabled:active:bg-surface-neutral-active uy:enabled:active:text-content-neutral-active",
         "uy:enabled:data-[pressed=true]:bg-surface-neutral-pressed uy:enabled:data-[pressed=true]:text-content-neutral-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      "neutral.lowest": [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        "uy:enabled:hover:bg-surface-neutral-lowest-hover uy:enabled:hover:text-content-neutral-hover",
+        "uy:enabled:active:bg-surface-neutral-lowest-active uy:enabled:active:text-content-neutral-active",
+        "uy:enabled:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:enabled:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       inverted: [
         "uy:bg-transparent uy:text-content-inverted-enabled",
         "uy:enabled:hover:bg-surface-inverted-hover uy:enabled:hover:text-content-inverted-hover",
         "uy:enabled:active:bg-surface-inverted-active uy:enabled:active:text-content-inverted-active",
         "uy:enabled:data-[pressed=true]:bg-surface-inverted-pressed uy:enabled:data-[pressed=true]:text-content-inverted-pressed",
-        "uy:focus-visible:outline-utility-inverted-focus-ring uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent"
       ]
     },
     isDisabled: {

package/dist/esm/components/card/Card.context.d.ts

@@ -0,0 +1,5 @@
+export interface CardContextValue {
+    titleId: string;
+}
+export declare const CardContext: import('react').Context<CardContextValue | null>;
+export declare function useCardContext(): CardContextValue;

package/dist/esm/components/card/Card.context.js

@@ -0,0 +1,14 @@
+import { createContext as o, useContext as n } from "react";
+const e = o(null);
+function c() {
+  const t = n(e);
+  if (!t)
+    throw new Error(
+      "Card compound components must be used within a Card component"
+    );
+  return t;
+}
+export {
+  e as CardContext,
+  c as useCardContext
+};

package/dist/esm/components/card/Card.d.ts

@@ -0,0 +1,210 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentProps, PropsWithChildren } from 'react';
+export declare const card: import('tailwind-variants').TVReturnType<{
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<{
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface CardProps extends PropsWithChildren<VariantProps<typeof card>>, ComponentProps<'section'> {
+    /**
+     * The background color of the card.
+     * @default 'surface.neutral'
+     */
+    bgColor?: VariantProps<typeof card>['bgColor'];
+    /**
+     * The shadow of the card.
+     * @default 'none'
+     */
+    shadow?: VariantProps<typeof card>['shadow'];
+    /**
+     * The aria-label of the card. This is required if the Card does not contain a CardTitle.
+     * @example
+     * ```tsx
+     * <Card aria-label="User statistics">
+     *   <StatWidget />
+     * </Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * The element type of the card.
+     * @default 'section'
+     */
+    asElement?: 'section' | 'article';
+}
+/**
+ * The `Card` component is a container that groups related content and actions. It provides consistent
+ * styling, spacing, and visual hierarchy for content sections within your application.
+ *
+ * Use Card when you need to organize related information, display content in distinct sections,
+ * or create a visual grouping for UI elements.
+ *
+ * The Card uses a compound component pattern with `CardTitle` and optionally `CardContent`:
+ * - `CardTitle`: Provides the heading for the card (required for accessibility, or use aria-label)
+ * - `CardContent`: Optional wrapper for card body content
+ *
+ * Cards must be properly labeled for accessibility. You can either:
+ * - Include a `CardTitle` component as a child, OR
+ * - Provide an `aria-label` prop if the card doesn't need a visible title
+ * @param {CardProps} props - The props for the `Card` component
+ * @example
+ * ```tsx
+ * import { Card, CardTitle, CardContent } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <CardTitle>Employee Information</CardTitle>
+ *       <CardContent>
+ *         <p>Content goes here</p>
+ *       </CardContent>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Card with title after an image
+ * import { Card, CardTitle } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <img src="banner.jpg" alt="Banner" />
+ *       <CardTitle>Featured Content</CardTitle>
+ *       <p>Content goes here</p>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Card without visible title (using aria-label)
+ * import { Card } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card aria-label="User statistics">
+ *       <StatWidget />
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @see {@link CardProps} for all available props
+ * @see {@link CardTitle} for title configuration options
+ * @see {@link CardContent} for content wrapper
+ * @remarks
+ * - Cards require either a CardTitle child or an aria-label for accessibility
+ * - Use shadow variants only with the default 'surface.neutral' background
+ * - CardTitle can be placed anywhere within the Card children
+ * - CardContent is optional but recommended for better structure
+ */
+declare const Card: import('react').ForwardRefExoticComponent<Omit<CardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export { Card };

package/dist/esm/components/card/Card.js

@@ -0,0 +1,93 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as h, useRef as C, useState as E, useLayoutEffect as _ } from "react";
+import { uyTv as S } from "@payfit/unity-themes";
+import { useId as x } from "react-aria";
+import { CardContext as N } from "./Card.context.js";
+var T = {};
+const V = S({
+  slots: {
+    base: ["uy:p-200 uy:sm:p-300 uy:rounded-lg uy:space-y-200"]
+  },
+  variants: {
+    shadow: {
+      none: {
+        base: "uy:shadow-none"
+      },
+      raising: {
+        base: "uy:shadow-raising"
+      },
+      flying: {
+        base: "uy:shadow-flying"
+      }
+    },
+    bgColor: {
+      "surface.neutral": {
+        base: "uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral"
+      },
+      "surface.neutral.low": {
+        base: "uy:bg-surface-neutral-low"
+      },
+      "surface.neutral.lowest": {
+        base: "uy:bg-surface-neutral-lowest"
+      },
+      "surface.decorative-teal.lowest": {
+        base: "uy:bg-surface-decorative-teal-lowest"
+      },
+      "surface.decorative-purple.lowest": {
+        base: "uy:bg-surface-decorative-purple-lowest"
+      },
+      "surface.decorative-plum.lowest": {
+        base: "uy:bg-surface-decorative-plum-lowest"
+      },
+      "surface.decorative-orange.lowest": {
+        base: "uy:bg-surface-decorative-orange-lowest"
+      }
+    }
+  },
+  defaultVariants: {
+    shadow: "none",
+    bgColor: "surface.neutral"
+  }
+}), I = h(
+  ({ shadow: o, bgColor: s, children: l, ...a }, r) => {
+    const n = x(), u = C(null), [c, b] = E(!1), v = a.id ?? `unity-card-${n}`, d = `unity-card-${n}__title`, t = a["aria-label"];
+    _(() => {
+      const e = u.current;
+      if (!e) return;
+      const f = e.querySelector(
+        '[data-unity-slot="card.title"]'
+      );
+      b(!!f), T.NODE_ENV === "development" && !f && !t && console.warn(
+        "Card: A Card must have either a CardTitle child or an aria-label prop for accessibility."
+      );
+    }, [l, t]);
+    const i = (s ?? "surface.neutral") === "surface.neutral" && (o ?? "none") !== "none", w = i ? o : "none", { base: m } = V({
+      shadow: w,
+      bgColor: s
+    }), g = {
+      titleId: d
+    }, p = a.asElement ?? "section";
+    return /* @__PURE__ */ y(N.Provider, { value: g, children: /* @__PURE__ */ y(
+      p,
+      {
+        "data-dd-privacy": "show",
+        ...a,
+        id: v,
+        ref: (e) => {
+          u.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+        },
+        className: m(),
+        "aria-labelledby": c ? d : void 0,
+        "aria-label": c ? void 0 : t,
+        "data-unity-component": "card",
+        "data-unity-variant": i ? "shadow" : void 0,
+        children: l
+      }
+    ) });
+  }
+);
+I.displayName = "Card";
+export {
+  I as Card,
+  V as card
+};

package/dist/esm/components/card/parts/CardContent.d.ts

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+export interface CardContentProps extends PropsWithChildren {
+    /** Additional CSS classes to apply to the content container */
+    className?: string;
+}
+/**
+ * The `CardContent` component provides a container for the main content within a Card.
+ * It ensures consistent spacing and layout for card content.
+ *
+ * Use CardContent to wrap the main body of your card content. This is optional but provides
+ * better semantic structure and consistent styling.
+ * @param {CardContentProps} props - The props for the `CardContent` component
+ * @example
+ * ```tsx
+ * import { Card, CardTitle, CardContent } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <CardTitle>My Card</CardTitle>
+ *       <CardContent>
+ *         <p>This is the main content of the card.</p>
+ *       </CardContent>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @see {@link CardContentProps} for all available props
+ * @remarks
+ * - CardContent is optional but recommended for better structure
+ * - You can also place content directly in the Card without CardContent
+ */
+declare function CardContent({ children, className }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CardContent {
+    var displayName: string;
+}
+export { CardContent };

package/dist/esm/components/card/parts/CardContent.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+function r({ children: t, className: n }) {
+  return /* @__PURE__ */ o("div", { className: n, "data-unity-slot": "card.content", children: t });
+}
+r.displayName = "CardContent";
+export {
+  r as CardContent
+};