@contractspec/lib.ui-kit-web 1.56.1 → 1.58.0

package/dist/browser/ui/avatar.js

@@ -0,0 +1,54 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ui/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(AvatarPrimitive.Root, {
+    "data-slot": "avatar",
+    className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(AvatarPrimitive.Image, {
+    "data-slot": "avatar-image",
+    className: cn("aspect-square size-full", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(AvatarPrimitive.Fallback, {
+    "data-slot": "avatar-fallback",
+    className: cn("bg-muted flex size-full items-center justify-center rounded-full", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  AvatarImage,
+  AvatarFallback,
+  Avatar
+};

package/dist/browser/ui/badge.js

@@ -0,0 +1,43 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/badge.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var badgeVariants = cva("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", {
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+      secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+      destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsxDEV(Comp, {
+    "data-slot": "badge",
+    className: cn(badgeVariants({ variant }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  badgeVariants,
+  Badge
+};

package/dist/browser/ui/breadcrumb.js

@@ -0,0 +1,109 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/breadcrumb.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function Breadcrumb({ ...props }) {
+  return /* @__PURE__ */ jsxDEV("nav", {
+    "aria-label": "breadcrumb",
+    "data-slot": "breadcrumb",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function BreadcrumbList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("ol", {
+    "data-slot": "breadcrumb-list",
+    className: cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function BreadcrumbItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("li", {
+    "data-slot": "breadcrumb-item",
+    className: cn("inline-flex items-center gap-1.5", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsxDEV(Comp, {
+    "data-slot": "breadcrumb-link",
+    className: cn("hover:text-foreground transition-colors", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function BreadcrumbPage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("span", {
+    "data-slot": "breadcrumb-page",
+    role: "link",
+    "aria-disabled": "true",
+    "aria-current": "page",
+    className: cn("text-foreground font-normal", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("li", {
+    "data-slot": "breadcrumb-separator",
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("[&>svg]:size-3.5", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxDEV(ChevronRight, {}, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("span", {
+    "data-slot": "breadcrumb-ellipsis",
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("flex size-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV(MoreHorizontal, {
+        className: "size-4"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        className: "sr-only",
+        children: "More"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  BreadcrumbSeparator,
+  BreadcrumbPage,
+  BreadcrumbList,
+  BreadcrumbLink,
+  BreadcrumbItem,
+  BreadcrumbEllipsis,
+  Breadcrumb
+};

package/dist/browser/ui/button.js

@@ -0,0 +1,56 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("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-hidden 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", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 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"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+export {
+  buttonVariants,
+  Button
+};

package/dist/browser/ui/calendar.js

@@ -0,0 +1,181 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("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-hidden 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", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 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"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+// ui/calendar.tsx
+import * as React2 from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "lucide-react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsxDEV2(DayPicker, {
+    showOutsideDays,
+    className: cn2("group/calendar bg-background p-3 [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+    captionLayout,
+    formatters: {
+      formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+      ...formatters
+    },
+    classNames: {
+      root: cn2("w-fit", defaultClassNames.root),
+      months: cn2("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+      month: cn2("flex w-full flex-col gap-4", defaultClassNames.month),
+      nav: cn2("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+      button_previous: cn2(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+      button_next: cn2(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+      month_caption: cn2("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+      dropdowns: cn2("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+      dropdown_root: cn2("has-focus:border-ring has-focus:ring-ring/50 border-input relative rounded-md border shadow-2xs has-focus:ring-[3px]", defaultClassNames.dropdown_root),
+      dropdown: cn2("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+      caption_label: cn2("font-medium select-none", captionLayout === "label" ? "text-sm" : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
+      table: "w-full border-collapse",
+      weekdays: cn2("flex", defaultClassNames.weekdays),
+      weekday: cn2("text-muted-foreground flex-1 rounded-md text-[0.8rem] font-normal select-none", defaultClassNames.weekday),
+      week: cn2("mt-2 flex w-full", defaultClassNames.week),
+      week_number_header: cn2("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+      week_number: cn2("text-muted-foreground text-[0.8rem] select-none", defaultClassNames.week_number),
+      day: cn2("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+      range_start: cn2("bg-accent rounded-l-md", defaultClassNames.range_start),
+      range_middle: cn2("rounded-none", defaultClassNames.range_middle),
+      range_end: cn2("bg-accent rounded-r-md", defaultClassNames.range_end),
+      today: cn2("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+      outside: cn2("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+      disabled: cn2("text-muted-foreground opacity-50", defaultClassNames.disabled),
+      hidden: cn2("invisible", defaultClassNames.hidden),
+      ...classNames
+    },
+    components: {
+      Root: ({ className: className2, rootRef, ...props2 }) => {
+        return /* @__PURE__ */ jsxDEV2("div", {
+          "data-slot": "calendar",
+          ref: rootRef,
+          className: cn2(className2),
+          ...props2
+        }, undefined, false, undefined, this);
+      },
+      Chevron: ({ className: className2, orientation, ...props2 }) => {
+        if (orientation === "left") {
+          return /* @__PURE__ */ jsxDEV2(ChevronLeftIcon, {
+            className: cn2("size-4", className2),
+            ...props2
+          }, undefined, false, undefined, this);
+        }
+        if (orientation === "right") {
+          return /* @__PURE__ */ jsxDEV2(ChevronRightIcon, {
+            className: cn2("size-4", className2),
+            ...props2
+          }, undefined, false, undefined, this);
+        }
+        return /* @__PURE__ */ jsxDEV2(ChevronDownIcon, {
+          className: cn2("size-4", className2),
+          ...props2
+        }, undefined, false, undefined, this);
+      },
+      DayButton: CalendarDayButton,
+      WeekNumber: ({ children, ...props2 }) => {
+        return /* @__PURE__ */ jsxDEV2("td", {
+          ...props2,
+          children: /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex size-(--cell-size) items-center justify-center text-center",
+            children
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      },
+      ...components
+    },
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    if (modifiers.focused)
+      ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsxDEV2(Button, {
+    ref,
+    variant: "ghost",
+    size: "icon",
+    "data-day": day.date.toLocaleDateString(),
+    "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+    "data-range-start": modifiers.range_start,
+    "data-range-end": modifiers.range_end,
+    "data-range-middle": modifiers.range_middle,
+    className: cn2("data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  CalendarDayButton,
+  Calendar
+};

package/dist/browser/ui/card.js

@@ -0,0 +1,87 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/card.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "card",
+    className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-2xs", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CardHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "card-header",
+    className: cn("@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),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CardTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "card-title",
+    className: cn("leading-none font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CardDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "card-description",
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CardAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "card-action",
+    className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CardContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "card-content",
+    className: cn("px-6", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CardFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "card-footer",
+    className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  CardTitle,
+  CardHeader,
+  CardFooter,
+  CardDescription,
+  CardContent,
+  CardAction,
+  Card
+};