@payfit/unity-components 2.0.0 → 2.2.0

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

@@ -10,38 +10,38 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
     variant: e,
     children: n,
     color: o = "primary",
-    size: u = "default",
-    isDisabled: a = !1,
+    size: c = "default",
+    isDisabled: s = !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 a = { size: c, isDisabled: s, isLoading: t };
       switch (e) {
         case "primary": {
           const r = {
-            ...s,
+            ...a,
             color: o
           };
           return l(j(r));
         }
         case "secondary": {
           const r = {
-            ...s,
+            ...a,
             color: o
           };
           return l(N(r));
         }
         case "ghost": {
           const r = {
-            ...s,
+            ...a,
             color: o
           };
           return l(w(r));
         }
       }
-    }, [e, o, u, a, t]), d = {
+    }, [e, o, c, s, t]), d = {
       ...t && { "data-loading": t }
     };
     return /* @__PURE__ */ m(
@@ -50,11 +50,12 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
         "data-dd-privacy": "allow",
         ...i,
         ref: p,
-        isDisabled: a || t,
+        isDisabled: s || t,
+        isPending: 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
+};

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

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+export interface CardTitleProps extends PropsWithChildren {
+    /** The heading level for the title. Defaults to 3 */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Whether to visually hide the title (still accessible to screen readers) */
+    isHidden?: boolean;
+}
+/**
+ * The `CardTitle` component renders the title for a Card. It provides semantic heading structure
+ * and ensures proper accessibility labeling for the Card container.
+ *
+ * Use CardTitle when you need to give your Card a visible or screen-reader-accessible title.
+ * You can configure the heading level, apply custom styles, or hide it visually while maintaining
+ * accessibility.
+ * @param {CardTitleProps} props - The props for the `CardTitle` component
+ * @example
+ * ```tsx
+ * import { Card, CardTitle } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <CardTitle>My Card Title</CardTitle>
+ *       <p>Card content goes here</p>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Custom heading level
+ * <Card>
+ *   <CardTitle level={2}>Important Section</CardTitle>
+ *   <p>Content...</p>
+ * </Card>
+ * ```
+ * @example
+ * ```tsx
+ * // Hidden title for accessibility
+ * <Card>
+ *   <CardTitle isHidden>Screen reader only title</CardTitle>
+ *   <p>Visual content that describes itself</p>
+ * </Card>
+ * ```
+ * @see {@link CardTitleProps} for all available props
+ * @remarks
+ * - The title is required for accessibility unless the Card has an `aria-label`
+ * - Use `isHidden` to hide the title visually while keeping it accessible
+ * - The default heading level is 3, but you can configure it based on your page structure
+ */
+declare function CardTitle({ children, level, isHidden }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+export { CardTitle };

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

@@ -0,0 +1,33 @@
+import { jsx as s } from "react/jsx-runtime";
+import { uyTv as n } from "@payfit/unity-themes";
+import { Heading as o } from "react-aria-components";
+import { useCardContext as d } from "../Card.context.js";
+const l = n({
+  base: ["uy:typography-h3 uy:text-content-neutral uy:leading-none"],
+  variants: {
+    isHidden: {
+      true: "uy:sr-only",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    isHidden: !1
+  }
+});
+function u({ children: t, level: e = 3, isHidden: a = !1 }) {
+  const { titleId: r } = d(), i = l({ isHidden: a });
+  return /* @__PURE__ */ s(
+    o,
+    {
+      level: e,
+      id: r,
+      className: i,
+      "data-unity-slot": "card.title",
+      children: t
+    }
+  );
+}
+u.displayName = "CardTitle";
+export {
+  u as CardTitle
+};