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

package/dist/components/CreatableSelect/index.js

@@ -372,15 +372,15 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_cva2 = require("cva");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva2.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",
@@ -519,7 +519,7 @@ var Checkbox = React3.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), {
@@ -551,7 +551,7 @@ var CommandInput = React4.forwardRef((_a, ref) => {
   const [val, setVal] = (0, import_react6.useState)(value);
   const clearInput = () => {
     setVal("");
-    onValueChange && onValueChange("");
+    onValueChange == null ? void 0 : onValueChange("");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
@@ -566,12 +566,12 @@ var CommandInput = React4.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)
         ),
@@ -670,7 +670,7 @@ var CommandItem = React4.forwardRef(
             checkbox && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Checkbox, { checked }),
             icon && React4.cloneElement(icon, {
               size: 16,
-              className: cn("flex-shrink-0", icon.props.className)
+              className: cn("shrink-0", icon.props.className)
             }),
             children
           ] }),
@@ -769,7 +769,7 @@ function CreatableSelect(_a) {
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
-                    className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    className: "ml-1 rounded-full outline-hidden ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
                     onKeyDown: (e) => e.key === "Enter" && handleUnselect(it),
                     onMouseDown: (e) => {
                       e.preventDefault();
@@ -791,7 +791,9 @@ function CreatableSelect(_a) {
                       setOpen(true);
                     }
                     setInputValue(v);
-                    !multiple && onValueChanged([]);
+                    if (!multiple) {
+                      onValueChanged([]);
+                    }
                   },
                   onBlur: () => {
                     setOpen(false);
@@ -805,14 +807,14 @@ function CreatableSelect(_a) {
                     }
                   },
                   placeholder: multiple || value.length === 0 ? placeholder : "",
-                  className: "flex-grow text-sm bg-transparent outline-none text-black placeholder:text-gray-700"
+                  className: "grow text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CommandList, {})
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative", children: open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute z-50 w-full bg-white border rounded-md shadow-md outline-none top-2 text-black animate-in", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CommandLoading, {}) : selectables && selectables.length < 1 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative", children: open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute z-50 w-full bg-white border border-gray-200 rounded-md shadow-md outline-hidden top-2 text-black animate-in", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CommandLoading, {}) : selectables && selectables.length < 1 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
           items && (selectables == null ? void 0 : selectables.map((it) => {
             const itemProps = getItemProps(it);
             return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(

package/dist/components/CreatableSelect/index.mjs

@@ -3,17 +3,17 @@ import {
   CommandItem,
   CommandList,
   CommandLoading
-} from "../../chunk-RN2FGOFK.mjs";
+} from "../../chunk-CBQRH67Z.mjs";
 import {
   XCloseIcon
 } from "../../chunk-FMJFBQTF.mjs";
+import "../../chunk-TU6HU32A.mjs";
+import "../../chunk-AFJWE6PJ.mjs";
 import {
   Badge
 } from "../../chunk-YC4ZDBIC.mjs";
-import "../../chunk-XI3KELZM.mjs";
+import "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
-import "../../chunk-ZMQWNJ3B.mjs";
-import "../../chunk-AFJWE6PJ.mjs";
 import {
   __objRest,
   __spreadValues,
@@ -109,7 +109,7 @@ function CreatableSelect(_a) {
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    className: "ml-1 rounded-full outline-hidden ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
                     onKeyDown: (e) => e.key === "Enter" && handleUnselect(it),
                     onMouseDown: (e) => {
                       e.preventDefault();
@@ -131,7 +131,9 @@ function CreatableSelect(_a) {
                       setOpen(true);
                     }
                     setInputValue(v);
-                    !multiple && onValueChanged([]);
+                    if (!multiple) {
+                      onValueChanged([]);
+                    }
                   },
                   onBlur: () => {
                     setOpen(false);
@@ -145,14 +147,14 @@ function CreatableSelect(_a) {
                     }
                   },
                   placeholder: multiple || value.length === 0 ? placeholder : "",
-                  className: "flex-grow text-sm bg-transparent outline-none text-black placeholder:text-gray-700"
+                  className: "grow text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700"
                 }
               ),
               /* @__PURE__ */ jsx(CommandList, {})
             ] })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "relative", children: open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 w-full bg-white border rounded-md shadow-md outline-none top-2 text-black animate-in", children: isLoading ? /* @__PURE__ */ jsx(CommandLoading, {}) : selectables && selectables.length < 1 ? /* @__PURE__ */ jsx("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ jsxs(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative", children: open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 w-full bg-white border border-gray-200 rounded-md shadow-md outline-hidden top-2 text-black animate-in", children: isLoading ? /* @__PURE__ */ jsx(CommandLoading, {}) : selectables && selectables.length < 1 ? /* @__PURE__ */ jsx("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ jsxs(CommandList, { className: "h-full max-h-[180px] overflow-auto", children: [
           items && (selectables == null ? void 0 : selectables.map((it) => {
             const itemProps = getItemProps(it);
             return /* @__PURE__ */ jsx(

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

@@ -5,8 +5,8 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 declare const Dialog: React.FC<SheetPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    bottomSheet?: boolean | undefined;
-    showClose?: boolean | undefined;
+    bottomSheet?: boolean;
+    showClose?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;

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

@@ -5,8 +5,8 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 declare const Dialog: React.FC<SheetPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    bottomSheet?: boolean | undefined;
-    showClose?: boolean | undefined;
+    bottomSheet?: boolean;
+    showClose?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;

package/dist/components/Dialog/index.js

@@ -159,15 +159,15 @@ var SpinnerIcon = (0, import_react2.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime3 = 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",
@@ -273,7 +273,7 @@ var DialogOverlay = React2.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       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)
@@ -290,12 +290,12 @@ var DialogContent = React2.forwardRef(
         __spreadProps(__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 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 md:w-full",
             {
-              "top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] data-[state=open]:slide-in-from-left-[50%] data-[state=closed]:slide-out-to-left-[50%] rounded-t-3xl": bottomSheet
+              "top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] rounded-t-3xl": bottomSheet
             },
             {
-              "duration-200 rounded-xl 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%]": !bottomSheet
+              "duration-200 rounded-xl 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": !bottomSheet
             },
             className
           )

package/dist/components/Dialog/index.mjs

@@ -4,7 +4,7 @@ import {
 import {
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-XI3KELZM.mjs";
+} from "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
@@ -26,7 +26,7 @@ var DialogOverlay = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       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)
@@ -43,12 +43,12 @@ var DialogContent = React.forwardRef(
         __spreadProps(__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 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 md:w-full",
             {
-              "top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] data-[state=open]:slide-in-from-left-[50%] data-[state=closed]:slide-out-to-left-[50%] rounded-t-3xl": bottomSheet
+              "top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] rounded-t-3xl": bottomSheet
             },
             {
-              "duration-200 rounded-xl 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%]": !bottomSheet
+              "duration-200 rounded-xl 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": !bottomSheet
             },
             className
           )

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

@@ -3,8 +3,8 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 declare const DropdownMenu: React__default.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 interface DropdownMenuItemExtension {
-    icon?: JSX.Element;
-    description?: JSX.Element;
+    icon?: React__default.JSX.Element;
+    description?: React__default.JSX.Element;
     destructive?: boolean;
 }
 declare const DropdownMenuCheckboxItem: React__default.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemExtension & React__default.RefAttributes<HTMLDivElement & DropdownMenuItemExtension>>;

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

@@ -3,8 +3,8 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 declare const DropdownMenu: React__default.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 interface DropdownMenuItemExtension {
-    icon?: JSX.Element;
-    description?: JSX.Element;
+    icon?: React__default.JSX.Element;
+    description?: React__default.JSX.Element;
     destructive?: boolean;
 }
 declare const DropdownMenuCheckboxItem: React__default.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemExtension & React__default.RefAttributes<HTMLDivElement & DropdownMenuItemExtension>>;

package/dist/components/DropdownMenu/index.js

@@ -163,7 +163,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), {
@@ -191,7 +191,7 @@ var DropdownMenuItemBase = ({
     "div",
     {
       className: cn(
-        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-md cursor-pointer group-focus-within:bg-gray-100 group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
+        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-md cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
         { "text-red-700 font-medium": destructive },
         className
       ),
@@ -201,7 +201,7 @@ var DropdownMenuItemBase = ({
           icon && import_react3.default.cloneElement(icon, {
             size: 16,
             className: cn(
-              "flex-shrink-0",
+              "shrink-0",
               { "text-red-700": destructive },
               icon.props.className
             )
@@ -230,7 +230,7 @@ var DropdownMenuCheckboxItem = import_react3.default.forwardRef(
         checked
       }, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({ checkbox: true }, extraProps), { children }))
       })
     );
@@ -256,7 +256,7 @@ var DropdownMenuContent = import_react3.default.forwardRef(
       DropdownMenuPrimitive.Content,
       __spreadProps(__spreadValues({
         className: cn(
-          "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
           className
         ),
         side,
@@ -284,7 +284,7 @@ var DropdownMenuItem = import_react3.default.forwardRef(
       DropdownMenuPrimitive.Item,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
@@ -318,7 +318,7 @@ var DropdownMenuRadioItem = import_react3.default.forwardRef(
       DropdownMenuPrimitive.RadioItem,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
@@ -344,7 +344,7 @@ var DropdownMenuSubContent = import_react3.default.forwardRef((_a, forwardedRef)
     DropdownMenuPrimitive.SubContent,
     __spreadProps(__spreadValues({
       className: cn(
-        "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
         className
       ),
       sideOffset
@@ -368,7 +368,7 @@ var DropdownMenuSubTrigger = import_react3.default.forwardRef(
       DropdownMenuPrimitive.SubTrigger,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({ hasSubNav: true }, extraProps), { children }))
       })
     );

package/dist/components/DropdownMenu/index.mjs

@@ -1,10 +1,10 @@
-import {
-  ChevronRightIcon
-} from "../../chunk-M7XGO7VL.mjs";
 import {
   Checkbox
-} from "../../chunk-ZMQWNJ3B.mjs";
+} from "../../chunk-TU6HU32A.mjs";
 import "../../chunk-AFJWE6PJ.mjs";
+import {
+  ChevronRightIcon
+} from "../../chunk-M7XGO7VL.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -31,7 +31,7 @@ var DropdownMenuItemBase = ({
     "div",
     {
       className: cn(
-        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-md cursor-pointer group-focus-within:bg-gray-100 group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
+        "mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-md cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
         { "text-red-700 font-medium": destructive },
         className
       ),
@@ -41,7 +41,7 @@ var DropdownMenuItemBase = ({
           icon && React.cloneElement(icon, {
             size: 16,
             className: cn(
-              "flex-shrink-0",
+              "shrink-0",
               { "text-red-700": destructive },
               icon.props.className
             )
@@ -70,7 +70,7 @@ var DropdownMenuCheckboxItem = React.forwardRef(
         checked
       }, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ jsx(DropdownMenuItemBase, __spreadProps(__spreadValues({ checkbox: true }, extraProps), { children }))
       })
     );
@@ -96,7 +96,7 @@ var DropdownMenuContent = React.forwardRef(
       DropdownMenuPrimitive.Content,
       __spreadProps(__spreadValues({
         className: cn(
-          "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
           className
         ),
         side,
@@ -124,7 +124,7 @@ var DropdownMenuItem = React.forwardRef(
       DropdownMenuPrimitive.Item,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ jsx(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
@@ -158,7 +158,7 @@ var DropdownMenuRadioItem = React.forwardRef(
       DropdownMenuPrimitive.RadioItem,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ jsx(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
@@ -184,7 +184,7 @@ var DropdownMenuSubContent = React.forwardRef((_a, forwardedRef) => {
     DropdownMenuPrimitive.SubContent,
     __spreadProps(__spreadValues({
       className: cn(
-        "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "min-w-[144px] bg-white rounded-md py-1 shadow-dropdown-sm border border-gray-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",
         className
       ),
       sideOffset
@@ -208,7 +208,7 @@ var DropdownMenuSubTrigger = React.forwardRef(
       DropdownMenuPrimitive.SubTrigger,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
-        className: "outline-none select-none group",
+        className: "outline-hidden select-none group",
         children: /* @__PURE__ */ jsx(DropdownMenuItemBase, __spreadProps(__spreadValues({ hasSubNav: true }, extraProps), { children }))
       })
     );

package/dist/components/FilterButton/index.js

@@ -294,15 +294,15 @@ var SpinnerIcon = (0, import_react2.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva2.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/components/FilterButton/index.mjs

@@ -3,7 +3,7 @@ import {
 } from "../../chunk-YC4ZDBIC.mjs";
 import {
   Button
-} from "../../chunk-XI3KELZM.mjs";
+} from "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,

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

@@ -13,7 +13,8 @@ declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;
     isTouched: boolean;
-    error?: react_hook_form.FieldError | undefined;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
     id: string;
     name: string;
     isDisabled: boolean | undefined;

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

@@ -13,7 +13,8 @@ declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;
     isTouched: boolean;
-    error?: react_hook_form.FieldError | undefined;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
     id: string;
     name: string;
     isDisabled: boolean | undefined;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    button?: JSX.Element;
-    prefixEnchancer?: JSX.Element | string;
-    suffixEnchancer?: JSX.Element | string;
+    button?: React.JSX.Element;
+    prefixEnchancer?: React.JSX.Element | string;
+    suffixEnchancer?: React.JSX.Element | string;
     'data-has-error'?: string;
     'data-is-disabled'?: string;
 }

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    button?: JSX.Element;
-    prefixEnchancer?: JSX.Element | string;
-    suffixEnchancer?: JSX.Element | string;
+    button?: React.JSX.Element;
+    prefixEnchancer?: React.JSX.Element | string;
+    suffixEnchancer?: React.JSX.Element | string;
     'data-has-error'?: string;
     'data-is-disabled'?: string;
 }

package/dist/components/Input/index.js

@@ -122,7 +122,7 @@ var Input = React.forwardRef(
               "input",
               __spreadProps(__spreadValues({}, props), {
                 disabled: isDisabled,
-                className: "w-full px-3 py-2 text-sm bg-transparent outline-none text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
+                className: "w-full px-3 py-2 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
                 type,
                 ref
               })
@@ -143,7 +143,7 @@ var Input = React.forwardRef(
       button && React.cloneElement(button, {
         size: "sm",
         disabled: (_a2 = button.props.disabled) != null ? _a2 : isDisabled,
-        className: cn("flex-shrink-0", button.props.className)
+        className: cn("shrink-0", button.props.className)
       })
     ] });
   }

package/dist/components/Input/index.mjs

@@ -55,7 +55,7 @@ var Input = React.forwardRef(
               "input",
               __spreadProps(__spreadValues({}, props), {
                 disabled: isDisabled,
-                className: "w-full px-3 py-2 text-sm bg-transparent outline-none text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
+                className: "w-full px-3 py-2 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
                 type,
                 ref
               })
@@ -76,7 +76,7 @@ var Input = React.forwardRef(
       button && React.cloneElement(button, {
         size: "sm",
         disabled: (_a2 = button.props.disabled) != null ? _a2 : isDisabled,
-        className: cn("flex-shrink-0", button.props.className)
+        className: cn("shrink-0", button.props.className)
       })
     ] });
   }

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

@@ -6,15 +6,15 @@ type MediaCardProps = {
     description?: string;
     duration?: number;
     type: 'audio' | 'video' | 'image';
-    image?: string | JSX.Element;
-    action?: JSX.Element;
+    image?: string | React.JSX.Element;
+    action?: React.JSX.Element;
     actionBehavior?: 'default' | 'hover';
     moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
     isLoading?: boolean;
     size: 'small' | 'medium' | 'large';
     author?: {
         name: string;
-        image?: JSX.Element;
+        image?: React.JSX.Element;
     };
 } & HTMLAttributes<HTMLDivElement>;
 declare const MediaCard: {

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

@@ -6,15 +6,15 @@ type MediaCardProps = {
     description?: string;
     duration?: number;
     type: 'audio' | 'video' | 'image';
-    image?: string | JSX.Element;
-    action?: JSX.Element;
+    image?: string | React.JSX.Element;
+    action?: React.JSX.Element;
     actionBehavior?: 'default' | 'hover';
     moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
     isLoading?: boolean;
     size: 'small' | 'medium' | 'large';
     author?: {
         name: string;
-        image?: JSX.Element;
+        image?: React.JSX.Element;
     };
 } & HTMLAttributes<HTMLDivElement>;
 declare const MediaCard: {