@snapcall/design-system 1.21.3 → 1.22.0-beta.1

package/dist/{chunk-RN2FGOFK.mjs → chunk-CBQRH67Z.mjs}

@@ -1,15 +1,15 @@
 import {
   XCloseIcon
 } from "./chunk-FMJFBQTF.mjs";
+import {
+  Checkbox
+} from "./chunk-TU6HU32A.mjs";
 import {
   Button
-} from "./chunk-XI3KELZM.mjs";
+} from "./chunk-R6W6SKNR.mjs";
 import {
   SpinnerIcon
 } from "./chunk-N65I4EXR.mjs";
-import {
-  Checkbox
-} from "./chunk-ZMQWNJ3B.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -85,7 +85,7 @@ var CommandInput = React.forwardRef((_a, ref) => {
   const [val, setVal] = useState(value);
   const clearInput = () => {
     setVal("");
-    onValueChange && onValueChange("");
+    onValueChange == null ? void 0 : onValueChange("");
   };
   return /* @__PURE__ */ jsxs2(
     "div",
@@ -100,12 +100,12 @@ var CommandInput = React.forwardRef((_a, ref) => {
             ref,
             value: val,
             className: cn(
-              "flex w-full py-2 rounded-md bg-transparent text-sm font-normal text-black outline-none placeholder:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",
+              "flex w-full py-2 rounded-md bg-transparent text-sm font-normal text-black outline-hidden placeholder:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             onValueChange: (val2) => {
               setVal(val2);
-              onValueChange && onValueChange(val2);
+              onValueChange == null ? void 0 : onValueChange(val2);
             }
           }, props)
         ),
@@ -204,7 +204,7 @@ var CommandItem = React.forwardRef(
             checkbox && /* @__PURE__ */ jsx2(Checkbox, { checked }),
             icon && React.cloneElement(icon, {
               size: 16,
-              className: cn("flex-shrink-0", icon.props.className)
+              className: cn("shrink-0", icon.props.className)
             }),
             children
           ] }),

package/dist/{chunk-XI3KELZM.mjs → chunk-R6W6SKNR.mjs}

@@ -14,15 +14,15 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "cva";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",

package/dist/{chunk-ZMQWNJ3B.mjs → chunk-TU6HU32A.mjs}

@@ -18,7 +18,7 @@ var Checkbox = React.forwardRef((_a, ref) => {
     CheckboxPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "flex h-4 w-4 appearance-none items-center justify-center rounded bg-gray-50 border-gray-200 border outline-none data-[state=checked]:bg-blue-700 data-[state=checked]:border-blue-700 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed",
+        "flex h-4 w-4 appearance-none items-center justify-center rounded-sm bg-gray-50 border-gray-200 border outline-hidden data-[state=checked]:bg-blue-700 data-[state=checked]:border-blue-700 data-disabled:opacity-40 data-disabled:cursor-not-allowed",
         className
       )
     }, props), {

package/dist/components/Accordion/index.d.mts

@@ -1,11 +1,6 @@
-import React__default, { SVGProps } from 'react';
+import React__default from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-
-type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
-interface IconProps extends SVGAttributes {
-    size?: string | number;
-    duotone?: boolean;
-}
+import { I as IconProps } from '../types-DBpSTFQy.mjs';
 
 declare const AccordionItem: React__default.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const Accordion: React__default.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/index.d.ts

@@ -1,11 +1,6 @@
-import React__default, { SVGProps } from 'react';
+import React__default from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-
-type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
-interface IconProps extends SVGAttributes {
-    size?: string | number;
-    duotone?: boolean;
-}
+import { I as IconProps } from '../types-DBpSTFQy.js';
 
 declare const AccordionItem: React__default.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const Accordion: React__default.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/index.js

@@ -127,14 +127,14 @@ var AccordionTrigger2 = import_react2.default.forwardRef((_a, forwardedRef) => {
       children: [
         icon && import_react2.default.cloneElement(icon, {
           size: 18,
-          className: cn("flex-shrink-0 mr-2.5", icon.props.className)
+          className: cn("shrink-0 mr-2.5", icon.props.className)
         }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-left truncate grow", children }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           ChevronDownIcon,
           {
             size: 16,
-            className: "flex-shrink-0 transition-transform text-black group-data-[state=open]:rotate-180",
+            className: "shrink-0 transition-transform text-black group-data-[state=open]:rotate-180",
             "aria-hidden": true
           }
         )

package/dist/components/Accordion/index.mjs

@@ -59,14 +59,14 @@ var AccordionTrigger2 = React.forwardRef((_a, forwardedRef) => {
       children: [
         icon && React.cloneElement(icon, {
           size: 18,
-          className: cn("flex-shrink-0 mr-2.5", icon.props.className)
+          className: cn("shrink-0 mr-2.5", icon.props.className)
         }),
         /* @__PURE__ */ jsx2("span", { className: "text-left truncate grow", children }),
         /* @__PURE__ */ jsx2(
           ChevronDownIcon,
           {
             size: 16,
-            className: "flex-shrink-0 transition-transform text-black group-data-[state=open]:rotate-180",
+            className: "shrink-0 transition-transform text-black group-data-[state=open]:rotate-180",
             "aria-hidden": true
           }
         )

package/dist/components/AlertDialog/index.js

@@ -129,15 +129,15 @@ var SpinnerIcon = (0, import_react.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",
@@ -242,7 +242,7 @@ var AlertDialogOverlay = React2.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Overlay,
     __spreadProps(__spreadValues({
       className: cn(
-        "fixed inset-0 z-50 bg-black/25 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-black/25 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )
     }, props), {
@@ -260,7 +260,7 @@ var AlertDialogContent = React2.forwardRef((_a, ref) => {
       __spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl md:w-full",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl md:w-full",
           className
         )
       }, props)

package/dist/components/AlertDialog/index.mjs

@@ -1,7 +1,7 @@
 import {
   buttonSizes,
   buttonVariants
-} from "../../chunk-XI3KELZM.mjs";
+} from "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
@@ -22,7 +22,7 @@ var AlertDialogOverlay = React.forwardRef((_a, ref) => {
     AlertDialogPrimitive.Overlay,
     __spreadProps(__spreadValues({
       className: cn(
-        "fixed inset-0 z-50 bg-black/25 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-black/25 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )
     }, props), {
@@ -40,7 +40,7 @@ var AlertDialogContent = React.forwardRef((_a, ref) => {
       __spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl md:w-full",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl md:w-full",
           className
         )
       }, props)

package/dist/components/Avatar/index.d.mts

@@ -3,14 +3,14 @@ import { VariantProps } from 'cva';
 
 interface AvatarProps extends VariantProps<typeof avatarVariants>, VariantProps<typeof avatarSizes> {
     className?: string;
-    icon?: JSX.Element;
+    icon?: React__default.JSX.Element;
     name: string;
-    image?: JSX.Element;
+    image?: React__default.JSX.Element;
 }
 declare const avatarSizes: (props?: ({
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -35,10 +35,10 @@ declare const avatarSizes: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -67,7 +67,7 @@ declare const avatarSizes: (props?: ({
 declare const avatarVariants: (props?: ({
     variant?: "blue" | "amber" | "red" | "green" | "plum" | "crimson" | "purple" | "violet" | "indigo" | "cyan" | "teal" | "grass" | "brown" | "lime" | "yellow" | "gold" | "bronze" | "gray" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -92,10 +92,10 @@ declare const avatarVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;

package/dist/components/Avatar/index.d.ts

@@ -3,14 +3,14 @@ import { VariantProps } from 'cva';
 
 interface AvatarProps extends VariantProps<typeof avatarVariants>, VariantProps<typeof avatarSizes> {
     className?: string;
-    icon?: JSX.Element;
+    icon?: React__default.JSX.Element;
     name: string;
-    image?: JSX.Element;
+    image?: React__default.JSX.Element;
 }
 declare const avatarSizes: (props?: ({
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -35,10 +35,10 @@ declare const avatarSizes: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -67,7 +67,7 @@ declare const avatarSizes: (props?: ({
 declare const avatarVariants: (props?: ({
     variant?: "blue" | "amber" | "red" | "green" | "plum" | "crimson" | "purple" | "violet" | "indigo" | "cyan" | "teal" | "grass" | "brown" | "lime" | "yellow" | "gold" | "bronze" | "gray" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -92,10 +92,10 @@ declare const avatarVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;

package/dist/components/Badge/index.d.mts

@@ -6,7 +6,7 @@ declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "fill" | undefined;
     color?: "gray" | "green" | "red" | "yellow" | "blue" | "crimson" | "violet" | "cyan" | "teal" | "brown" | "orange" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -31,10 +31,10 @@ declare const badgeVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;

package/dist/components/Badge/index.d.ts

@@ -6,7 +6,7 @@ declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "fill" | undefined;
     color?: "gray" | "green" | "red" | "yellow" | "blue" | "crimson" | "violet" | "cyan" | "teal" | "brown" | "orange" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -31,10 +31,10 @@ declare const badgeVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;

package/dist/components/Banner/index.d.mts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'cva';
+
+declare const bannerVariants: (props?: ({
+    color?: "gray" | "blue" | "green" | "amber" | "red" | "unset" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, VariantProps<typeof bannerVariants> {
+    title?: string;
+    text: React.ReactNode;
+    icon?: React.JSX.Element;
+    action?: React.JSX.Element;
+}
+declare function Banner({ title, text, icon, action, color, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
+
+export { Banner, type BannerProps };

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'cva';
+
+declare const bannerVariants: (props?: ({
+    color?: "gray" | "blue" | "green" | "amber" | "red" | "unset" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, VariantProps<typeof bannerVariants> {
+    title?: string;
+    text: React.ReactNode;
+    icon?: React.JSX.Element;
+    action?: React.JSX.Element;
+}
+declare function Banner({ title, text, icon, action, color, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
+
+export { Banner, type BannerProps };