@snapcall/design-system 1.13.1 → 1.14.1

package/dist/index.js

@@ -422,6 +422,7 @@ __export(src_exports, {
   CornerUpRightIcon: () => CornerUpRightIcon,
   CpuChip1Icon: () => CpuChip1Icon,
   CpuChip2Icon: () => CpuChip2Icon,
+  CreatableSelect: () => CreatableSelect,
   CreditCard1Icon: () => CreditCard1Icon,
   CreditCard2Icon: () => CreditCard2Icon,
   CreditCardCheckIcon: () => CreditCardCheckIcon,
@@ -53302,7 +53303,7 @@ var CommandItem = React6.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         className: cn(
-          "px-2 py-1.5 text-sm flex flex-col gap-1 text-gray-1000 rounded-md cursor-pointer focus-within:bg-gray-100 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 hover:bg-gray-50 active:bg-gray-100 data-[state=checked]:bg-gray-50",
+          "px-2 py-1.5 text-sm flex flex-col gap-1 text-gray-1000 rounded-md cursor-pointer focus-within:bg-gray-100 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 hover:bg-gray-50 active:bg-gray-100 data-[state=checked]:bg-gray-50 data-[selected=true]:bg-gray-50",
           className
         )
       }, props), {
@@ -53323,10 +53324,141 @@ var CommandItem = React6.forwardRef(
 );
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
 
+// src/components/CreatableSelect/CreatableSelect.tsx
+var import_react1228 = require("react");
+var import_cmdk2 = require("cmdk");
+var import_jsx_runtime1232 = require("react/jsx-runtime");
+function CreatableSelect({
+  isLoading,
+  items,
+  multiple,
+  newLabel = "New: ",
+  nothingFoundLabel = "No matches found",
+  placeholder,
+  value,
+  valueKey,
+  onValueChanged,
+  getItemProps
+}) {
+  const inputRef = (0, import_react1228.useRef)(null);
+  const [open, setOpen] = (0, import_react1228.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react1228.useState)("");
+  const handleUnselect = (0, import_react1228.useCallback)(
+    (selected) => {
+      onValueChanged(value.filter((s) => s !== selected));
+    },
+    [onValueChanged, value]
+  );
+  const handleKeyDown = (0, import_react1228.useCallback)(
+    (e) => {
+      const input = inputRef.current;
+      if (input) {
+        if (["Delete", "Backspace"].includes(e.key) && input.value === "") {
+          onValueChanged([...value.slice(0, -1)]);
+        }
+        if (e.key === "Escape") {
+          input.blur();
+        }
+      }
+    },
+    [onValueChanged, value]
+  );
+  const selectables = items.filter(
+    (it) => !value.includes(it[valueKey])
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(
+    Command,
+    {
+      onKeyDown: handleKeyDown,
+      className: "overflow-visible bg-transparent",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("div", { className: "flex px-3 py-2 min-h-9 w-full rounded-md border border-gray-200 bg-transparent focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px]", children: /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)("div", { className: "flex flex-wrap w-full gap-1", children: [
+          multiple && value.map((it) => /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(Badge, { children: [
+            it,
+            /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+              "button",
+              {
+                className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                onKeyDown: (e) => e.key === "Enter" && handleUnselect(it),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onClick: () => handleUnselect(it),
+                children: /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(XCloseIcon, { size: 12, className: "text-current" })
+              }
+            )
+          ] }, it)),
+          !multiple && value.map((it) => /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("span", { className: "text-sm", children: it }, it)),
+          /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+            import_cmdk2.Command.Input,
+            {
+              ref: inputRef,
+              value: inputValue,
+              onValueChange: (v) => {
+                setInputValue(v);
+                !multiple && onValueChanged([]);
+              },
+              onBlur: () => setOpen(false),
+              onFocus: () => setOpen(true),
+              placeholder: multiple || value.length === 0 ? placeholder : "",
+              className: "flex-grow text-sm bg-transparent outline-none text-gray-1000 placeholder:text-gray-700"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("div", { className: "relative", children: open && /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("div", { className: "absolute z-50 w-full bg-white border rounded-md shadow-md outline-none top-2 text-gray-1000 animate-in", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(CommandLoading, {}) : selectables.length < 1 ? /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("span", { className: "flex flex-col gap-4 p-4 text-center text-gray-700", children: nothingFoundLabel }) : /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(CommandList, { className: "h-full overflow-auto", children: [
+          selectables.map((it) => {
+            const itemProps = getItemProps(it);
+            return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+              CommandItem,
+              __spreadValues({
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onSelect: () => {
+                  setInputValue("");
+                  onValueChanged(
+                    multiple ? [...value, it[valueKey]] : [it[valueKey]]
+                  );
+                },
+                className: "cursor-pointer"
+              }, itemProps),
+              it[valueKey]
+            );
+          }),
+          inputValue && !value.includes(inputValue) && /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+            CommandItem,
+            {
+              value: inputValue,
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onSelect: () => {
+                onValueChanged(
+                  multiple ? [
+                    ...value,
+                    ...inputValue.split(",").map((it) => it.trim())
+                  ] : [inputValue]
+                );
+                setInputValue("");
+              },
+              className: "cursor-pointer",
+              children: `${newLabel}${inputValue}`
+            },
+            "new-item"
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}
+
 // src/components/Dialog/Dialog.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime1232 = require("react/jsx-runtime");
+var import_jsx_runtime1233 = require("react/jsx-runtime");
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = (_a) => {
@@ -53335,12 +53467,12 @@ var DialogPortal = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(DialogPrimitive.Portal, __spreadValues({ className: cn(className) }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(DialogPrimitive.Portal, __spreadValues({ className: cn(className) }, props));
 };
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React7.forwardRef((_a, ref) => {
+var DialogOverlay = React8.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
     DialogPrimitive.Overlay,
     __spreadValues({
       ref,
@@ -53352,11 +53484,11 @@ var DialogOverlay = React7.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React7.forwardRef((_a, ref) => {
+var DialogContent = React8.forwardRef((_a, ref) => {
   var _b = _a, { className, children, bottomSheet = false } = _b, props = __objRest(_b, ["className", "children", "bottomSheet"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(DialogPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime1233.jsxs)(
       DialogPrimitive.Content,
       __spreadProps(__spreadValues({
         ref,
@@ -53373,7 +53505,7 @@ var DialogContent = React7.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime1232.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime1233.jsxs)(
             DialogPrimitive.Close,
             {
               className: cn(
@@ -53382,8 +53514,8 @@ var DialogContent = React7.forwardRef((_a, ref) => {
                 "absolute right-6 top-6"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(XCloseIcon, { className: "w-3 h-3" }),
-                /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(XCloseIcon, { className: "w-3 h-3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -53399,7 +53531,7 @@ var DialogHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
     "div",
     __spreadValues({
       className: cn(
@@ -53416,7 +53548,7 @@ var DialogFooter = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
     "div",
     __spreadValues({
       className: cn(
@@ -53427,9 +53559,9 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React7.forwardRef((_a, ref) => {
+var DialogTitle = React8.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
     DialogPrimitive.Title,
     __spreadValues({
       ref,
@@ -53438,9 +53570,9 @@ var DialogTitle = React7.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React7.forwardRef((_a, ref) => {
+var DialogDescription = React8.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1232.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
     DialogPrimitive.Description,
     __spreadValues({
       ref,
@@ -53451,9 +53583,9 @@ var DialogDescription = React7.forwardRef((_a, ref) => {
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_react1228 = __toESM(require("react"));
+var import_react1229 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime1233 = require("react/jsx-runtime");
+var import_jsx_runtime1234 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuItemBase = ({
   icon,
@@ -53465,7 +53597,7 @@ var DropdownMenuItemBase = ({
   description,
   hasSubNav
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1234.jsxs)(
     "div",
     {
       className: cn(
@@ -53474,9 +53606,9 @@ var DropdownMenuItemBase = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime1233.jsxs)("div", { className: "flex items-center gap-2", children: [
-          checkbox && /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(Checkbox, { checked }),
-          icon && import_react1228.default.cloneElement(icon, {
+        /* @__PURE__ */ (0, import_jsx_runtime1234.jsxs)("div", { className: "flex items-center gap-2", children: [
+          checkbox && /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(Checkbox, { checked }),
+          icon && import_react1229.default.cloneElement(icon, {
             size: 16,
             className: cn(
               "flex-shrink-0",
@@ -53484,15 +53616,15 @@ var DropdownMenuItemBase = ({
               icon.props.className
             )
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)("span", { className: "flex gap-2 grow", children }),
-          hasSubNav && /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)("div", { className: "inline-flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(ChevronRightIcon, { size: 16, className: "text-gray-1000" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)("span", { className: "flex gap-2 grow", children }),
+          hasSubNav && /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)("div", { className: "inline-flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(ChevronRightIcon, { size: 16, className: "text-gray-1000" }) })
         ] }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)("div", { className: "text-xs text-gray-700", children: description })
+        description && /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)("div", { className: "text-xs text-gray-700", children: description })
       ]
     }
   );
 };
-var DropdownMenuCheckboxItem = import_react1228.default.forwardRef(
+var DropdownMenuCheckboxItem = import_react1229.default.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, checked, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "checked", "icon", "description", "destructive"]);
     const extraProps = {
@@ -53502,20 +53634,20 @@ var DropdownMenuCheckboxItem = import_react1228.default.forwardRef(
       checked,
       className
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
       DropdownMenuPrimitive.CheckboxItem,
       __spreadProps(__spreadValues({
         checked
       }, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({ checkbox: true }, extraProps), { children }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({ checkbox: true }, extraProps), { children }))
       })
     );
   }
 );
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuContent = import_react1228.default.forwardRef(
+var DropdownMenuContent = import_react1229.default.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, {
       children,
@@ -53530,7 +53662,7 @@ var DropdownMenuContent = import_react1228.default.forwardRef(
       "sideOffset",
       "align"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
       DropdownMenuPrimitive.Content,
       __spreadProps(__spreadValues({
         className: cn(
@@ -53549,7 +53681,7 @@ var DropdownMenuContent = import_react1228.default.forwardRef(
 );
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
-var DropdownMenuItem = import_react1228.default.forwardRef(
+var DropdownMenuItem = import_react1229.default.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "icon", "description", "destructive"]);
     const extraProps = {
@@ -53558,20 +53690,20 @@ var DropdownMenuItem = import_react1228.default.forwardRef(
       icon,
       className
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
       DropdownMenuPrimitive.Item,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
   }
 );
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = import_react1228.default.forwardRef((_a, forwardedRef) => {
+var DropdownMenuLabel = import_react1229.default.forwardRef((_a, forwardedRef) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
     DropdownMenuPrimitive.Label,
     __spreadProps(__spreadValues({
       className: cn(
@@ -53586,7 +53718,7 @@ var DropdownMenuLabel = import_react1228.default.forwardRef((_a, forwardedRef) =
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuRadioItem = import_react1228.default.forwardRef(
+var DropdownMenuRadioItem = import_react1229.default.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "icon", "description", "destructive"]);
     const extraProps = {
@@ -53595,20 +53727,20 @@ var DropdownMenuRadioItem = import_react1228.default.forwardRef(
       icon,
       className
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
       DropdownMenuPrimitive.RadioItem,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
   }
 );
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuSeparator = import_react1228.default.forwardRef((_a, forwardedRef) => {
+var DropdownMenuSeparator = import_react1229.default.forwardRef((_a, forwardedRef) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
     DropdownMenuPrimitive.Separator,
     __spreadProps(__spreadValues({
       className: cn("my-1 border-b border-gray-200", className)
@@ -53619,9 +53751,9 @@ var DropdownMenuSeparator = import_react1228.default.forwardRef((_a, forwardedRe
 });
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuSubContent = import_react1228.default.forwardRef((_a, forwardedRef) => {
+var DropdownMenuSubContent = import_react1229.default.forwardRef((_a, forwardedRef) => {
   var _b = _a, { children, className, sideOffset = 8 } = _b, props = __objRest(_b, ["children", "className", "sideOffset"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
     DropdownMenuPrimitive.SubContent,
     __spreadProps(__spreadValues({
       className: cn(
@@ -53636,7 +53768,7 @@ var DropdownMenuSubContent = import_react1228.default.forwardRef((_a, forwardedR
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuSubTrigger = import_react1228.default.forwardRef(
+var DropdownMenuSubTrigger = import_react1229.default.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "icon", "description", "destructive"]);
     const extraProps = {
@@ -53645,12 +53777,12 @@ var DropdownMenuSubTrigger = import_react1228.default.forwardRef(
       icon,
       className
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(
       DropdownMenuPrimitive.SubTrigger,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ (0, import_jsx_runtime1233.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({ hasSubNav: true }, extraProps), { children }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(DropdownMenuItemBase, __spreadProps(__spreadValues({ hasSubNav: true }, extraProps), { children }))
       })
     );
   }
@@ -53659,16 +53791,16 @@ DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayNam
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
 // src/components/FilterButton/FilterButton.tsx
-var import_react1229 = __toESM(require("react"));
-var import_jsx_runtime1234 = require("react/jsx-runtime");
-var FilterButton = import_react1229.default.forwardRef(
+var import_react1230 = __toESM(require("react"));
+var import_jsx_runtime1235 = require("react/jsx-runtime");
+var FilterButton = import_react1230.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { selectedCount, children, size = "sm", variant = "outline" } = _b, props = __objRest(_b, ["selectedCount", "children", "size", "variant"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime1234.jsxs)(Button, __spreadProps(__spreadValues({ ref, variant, size }, props), { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime1235.jsxs)(Button, __spreadProps(__spreadValues({ ref, variant, size }, props), { children: [
       children,
-      selectedCount !== void 0 && selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime1234.jsxs)(import_jsx_runtime1234.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)("span", { className: "h-4 border-l border-gray-200" }),
-        /* @__PURE__ */ (0, import_jsx_runtime1234.jsx)(Badge, { variant: "fill", color: "blue", children: selectedCount })
+      selectedCount !== void 0 && selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime1235.jsxs)(import_jsx_runtime1235.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime1235.jsx)("span", { className: "h-4 border-l border-gray-200" }),
+        /* @__PURE__ */ (0, import_jsx_runtime1235.jsx)(Badge, { variant: "fill", color: "blue", children: selectedCount })
       ] })
     ] }));
   }
@@ -53676,17 +53808,17 @@ var FilterButton = import_react1229.default.forwardRef(
 FilterButton.displayName = "FilterButton";
 
 // src/components/Form/Form.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_react_hook_form = require("react-hook-form");
 
 // src/components/Label/Label.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
-var import_jsx_runtime1235 = require("react/jsx-runtime");
-var Label2 = React10.forwardRef((_a, ref) => {
+var import_jsx_runtime1236 = require("react/jsx-runtime");
+var Label2 = React11.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1235.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(
     LabelPrimitive.Root,
     __spreadValues({
       ref,
@@ -53700,24 +53832,24 @@ var Label2 = React10.forwardRef((_a, ref) => {
 Label2.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime1236 = require("react/jsx-runtime");
+var import_jsx_runtime1237 = require("react/jsx-runtime");
 var Form = import_react_hook_form.FormProvider;
-var FormFieldContext = React11.createContext(
+var FormFieldContext = React12.createContext(
   {}
 );
 var FormField = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
     FormFieldContext.Provider,
     {
       value: { name: props.name, isDisabled: props.disabled },
-      children: /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(import_react_hook_form.Controller, __spreadValues({}, props))
+      children: /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(import_react_hook_form.Controller, __spreadValues({}, props))
     }
   );
 };
 var useFormField = () => {
-  const fieldContext = React11.useContext(FormFieldContext);
-  const itemContext = React11.useContext(FormItemContext);
+  const fieldContext = React12.useContext(FormFieldContext);
+  const itemContext = React12.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
@@ -53733,13 +53865,13 @@ var useFormField = () => {
     formMessageId: `${id}-form-item-message`
   }, fieldState);
 };
-var FormItemContext = React11.createContext(
+var FormItemContext = React12.createContext(
   {}
 );
-var FormItem = React11.forwardRef((_a, ref) => {
+var FormItem = React12.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const id = React11.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(
+  const id = React12.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
     "div",
     __spreadValues({
       ref,
@@ -53748,10 +53880,10 @@ var FormItem = React11.forwardRef((_a, ref) => {
   ) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React11.forwardRef((_a, ref) => {
+var FormLabel = React12.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { isDisabled, formItemId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
     Label2,
     __spreadValues({
       ref,
@@ -53761,10 +53893,10 @@ var FormLabel = React11.forwardRef((_a, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React11.forwardRef((_a, ref) => {
+var FormControl = React12.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   const { error, isDisabled, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
     import_react_slot2.Slot,
     __spreadValues({
       ref,
@@ -53777,10 +53909,10 @@ var FormControl = React11.forwardRef((_a, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React11.forwardRef((_a, ref) => {
+var FormDescription = React12.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { formDescriptionId, isDisabled } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
     "p",
     __spreadValues({
       ref,
@@ -53794,12 +53926,12 @@ var FormDescription = React11.forwardRef((_a, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React11.forwardRef((_a, ref) => {
+var FormMessage = React12.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   const { error, isDisabled, formMessageId } = useFormField();
   const body = error ? String(error == null ? void 0 : error.message) : children;
   const textColorClassName = error ? "text-red-700" : "text-gray-700";
-  return /* @__PURE__ */ (0, import_jsx_runtime1236.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
     "p",
     __spreadProps(__spreadValues({
       ref,
@@ -53818,10 +53950,10 @@ var FormMessage = React11.forwardRef((_a, ref) => {
 FormMessage.displayName = "FormMessage";
 
 // src/components/Input/Input.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime1237 = require("react/jsx-runtime");
-var Input = React12.forwardRef(
+var import_jsx_runtime1238 = require("react/jsx-runtime");
+var Input = React13.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -53839,8 +53971,8 @@ var Input = React12.forwardRef(
       "suffixEnchancer"
     ]);
     const isDisabled = !!props["data-is-disabled"] || disabled;
-    return /* @__PURE__ */ (0, import_jsx_runtime1237.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime1237.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1238.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime1238.jsxs)(
         "div",
         {
           className: cn(
@@ -53852,7 +53984,7 @@ var Input = React12.forwardRef(
             className
           ),
           children: [
-            prefixEnchancer && /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
+            prefixEnchancer && /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(
               import_react_slot3.Slot,
               {
                 className: cn(
@@ -53862,7 +53994,7 @@ var Input = React12.forwardRef(
                 children: prefixEnchancer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(
               "input",
               __spreadProps(__spreadValues({}, props), {
                 disabled: isDisabled,
@@ -53871,7 +54003,7 @@ var Input = React12.forwardRef(
                 ref
               })
             ),
-            suffixEnchancer && /* @__PURE__ */ (0, import_jsx_runtime1237.jsx)(
+            suffixEnchancer && /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(
               import_react_slot3.Slot,
               {
                 className: cn(
@@ -53884,7 +54016,7 @@ var Input = React12.forwardRef(
           ]
         }
       ),
-      button && React12.cloneElement(button, {
+      button && React13.cloneElement(button, {
         size: "sm",
         disabled: isDisabled,
         className: cn("flex-shrink-0", button.props.className)
@@ -53895,7 +54027,7 @@ var Input = React12.forwardRef(
 Input.displayName = "Input";
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime1238 = require("react/jsx-runtime");
+var import_jsx_runtime1239 = require("react/jsx-runtime");
 var PaginationPageChoice = /* @__PURE__ */ ((PaginationPageChoice2) => {
   PaginationPageChoice2["FIRST"] = "FIRST";
   PaginationPageChoice2["PREVIOUS"] = "PREVIOUS";
@@ -53911,12 +54043,12 @@ var Pagination = ({
   onPageChange,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime1238.jsxs)("div", { className: cn("flex items-center justify-between px-2", className), children: [
-    totalRowsCaption && /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)("div", { className: "flex-1 text-sm text-gray-700", children: totalRowsCaption }),
-    /* @__PURE__ */ (0, import_jsx_runtime1238.jsxs)("div", { className: "flex items-center gap-4", children: [
-      currentPageCation && /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)("div", { className: "flex items-center justify-center text-sm font-medium text-gray-1000", children: currentPageCation }),
-      /* @__PURE__ */ (0, import_jsx_runtime1238.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1239.jsxs)("div", { className: cn("flex items-center justify-between px-2", className), children: [
+    totalRowsCaption && /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)("div", { className: "flex-1 text-sm text-gray-700", children: totalRowsCaption }),
+    /* @__PURE__ */ (0, import_jsx_runtime1239.jsxs)("div", { className: "flex items-center gap-4", children: [
+      currentPageCation && /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)("div", { className: "flex items-center justify-center text-sm font-medium text-gray-1000", children: currentPageCation }),
+      /* @__PURE__ */ (0, import_jsx_runtime1239.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(
           Button,
           {
             variant: "outline",
@@ -53924,10 +54056,10 @@ var Pagination = ({
             size: "sm",
             onClick: () => onPageChange("FIRST" /* FIRST */),
             disabled: !previousPageAvailable,
-            children: /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(ChevronLeftDoubleIcon, { size: "16" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(ChevronLeftDoubleIcon, { size: "16" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(
           Button,
           {
             variant: "outline",
@@ -53935,10 +54067,10 @@ var Pagination = ({
             size: "sm",
             onClick: () => onPageChange("PREVIOUS" /* PREVIOUS */),
             disabled: !previousPageAvailable,
-            children: /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(ChevronLeftIcon, { size: "16" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(ChevronLeftIcon, { size: "16" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(
           Button,
           {
             variant: "outline",
@@ -53946,10 +54078,10 @@ var Pagination = ({
             size: "sm",
             onClick: () => onPageChange("NEXT" /* NEXT */),
             disabled: !nextPageAvailable,
-            children: /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(ChevronRightIcon, { size: "16" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(ChevronRightIcon, { size: "16" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(
           Button,
           {
             variant: "outline",
@@ -53957,7 +54089,7 @@ var Pagination = ({
             size: "sm",
             onClick: () => onPageChange("LAST" /* LAST */),
             disabled: !nextPageAvailable,
-            children: /* @__PURE__ */ (0, import_jsx_runtime1238.jsx)(ChevronRightDoubleIcon, { size: "16" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(ChevronRightDoubleIcon, { size: "16" })
           }
         )
       ] })
@@ -53966,14 +54098,14 @@ var Pagination = ({
 };
 
 // src/components/Popover/Popover.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime1239 = require("react/jsx-runtime");
+var import_jsx_runtime1240 = require("react/jsx-runtime");
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React13.forwardRef((_a, ref) => {
+var PopoverContent = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime1239.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(
     PopoverPrimitive.Content,
     __spreadValues({
       ref,
@@ -53989,16 +54121,16 @@ var PopoverContent = React13.forwardRef((_a, ref) => {
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/Select/Select.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
-var import_jsx_runtime1240 = require("react/jsx-runtime");
+var import_jsx_runtime1241 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React14.forwardRef((_a, ref) => {
+var SelectTrigger = React15.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   const isDisabled = props["data-is-disabled"];
-  return /* @__PURE__ */ (0, import_jsx_runtime1240.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1241.jsxs)(
     SelectPrimitive.Trigger,
     __spreadProps(__spreadValues({
       ref,
@@ -54015,15 +54147,15 @@ var SelectTrigger = React14.forwardRef((_a, ref) => {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
       ]
     })
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React14.forwardRef((_a, ref) => {
+var SelectContent = React15.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(
     SelectPrimitive.Content,
     __spreadProps(__spreadValues({
       ref,
@@ -54034,7 +54166,7 @@ var SelectContent = React14.forwardRef((_a, ref) => {
       ),
       position
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -54048,9 +54180,9 @@ var SelectContent = React14.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React14.forwardRef((_a, ref) => {
+var SelectLabel = React15.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(
     SelectPrimitive.Label,
     __spreadValues({
       ref,
@@ -54059,9 +54191,9 @@ var SelectLabel = React14.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React14.forwardRef((_a, ref) => {
+var SelectItem = React15.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(
     SelectPrimitive.Item,
     __spreadProps(__spreadValues({
       ref,
@@ -54070,14 +54202,14 @@ var SelectItem = React14.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(SelectPrimitive.ItemText, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(SelectPrimitive.ItemText, { children })
     })
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React14.forwardRef((_a, ref) => {
+var SelectSeparator = React15.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1240.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(
     SelectPrimitive.Separator,
     __spreadValues({
       ref,
@@ -54088,12 +54220,12 @@ var SelectSeparator = React14.forwardRef((_a, ref) => {
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/Switch/Switch.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_jsx_runtime1241 = require("react/jsx-runtime");
-var Switch = React15.forwardRef((_a, ref) => {
+var import_jsx_runtime1242 = require("react/jsx-runtime");
+var Switch = React16.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(
     SwitchPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
@@ -54102,18 +54234,18 @@ var Switch = React15.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime1241.jsx)(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white transition-transform ease-linear will-change-transform" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white transition-transform ease-linear will-change-transform" })
     })
   );
 });
 Switch.displayName = SwitchPrimitive.Root.displayName;
 
 // src/components/Table/Table.tsx
-var React16 = __toESM(require("react"));
-var import_jsx_runtime1242 = require("react/jsx-runtime");
-var Table = React16.forwardRef((_a, ref) => {
+var React17 = __toESM(require("react"));
+var import_jsx_runtime1243 = require("react/jsx-runtime");
+var Table = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)("div", { className: "w-full overflow-auto border rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)("div", { className: "w-full overflow-auto border rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
     "table",
     __spreadValues({
       ref,
@@ -54122,9 +54254,9 @@ var Table = React16.forwardRef((_a, ref) => {
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React16.forwardRef((_a, ref) => {
+var TableHeader = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
     "thead",
     __spreadValues({
       ref,
@@ -54133,9 +54265,9 @@ var TableHeader = React16.forwardRef((_a, ref) => {
   );
 });
 TableHeader.displayName = "TableHeader";
-var TableBody = React16.forwardRef((_a, ref) => {
+var TableBody = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
     "tbody",
     __spreadValues({
       ref,
@@ -54147,9 +54279,9 @@ var TableBody = React16.forwardRef((_a, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-var TableRow = React16.forwardRef((_a, ref) => {
+var TableRow = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
     "tr",
     __spreadValues({
       ref,
@@ -54161,9 +54293,9 @@ var TableRow = React16.forwardRef((_a, ref) => {
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React16.forwardRef((_a, ref) => {
+var TableHead = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
     "th",
     __spreadValues({
       ref,
@@ -54175,9 +54307,9 @@ var TableHead = React16.forwardRef((_a, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React16.forwardRef((_a, ref) => {
+var TableCell = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
     "td",
     __spreadValues({
       ref,
@@ -54189,18 +54321,18 @@ var TableCell = React16.forwardRef((_a, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableEmpty = React16.forwardRef((_a, ref) => {
+var TableEmpty = React17.forwardRef((_a, ref) => {
   var _b = _a, { className, title, description, children } = _b, props = __objRest(_b, ["className", "title", "description", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1242.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       ref,
       className: cn("flex flex-col gap-6 items-center py-12", className)
     }, props), {
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)("span", { className: "text-lg font-semibold text-gray-1000", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)("span", { className: "text-sm font-normal text-gray-900", children: description }),
-        /* @__PURE__ */ (0, import_jsx_runtime1242.jsx)("div", { children })
+        title && /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)("span", { className: "text-lg font-semibold text-gray-1000", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)("span", { className: "text-sm font-normal text-gray-900", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)("div", { children })
       ]
     })
   );
@@ -54208,13 +54340,13 @@ var TableEmpty = React16.forwardRef((_a, ref) => {
 TableEmpty.displayName = "TableEmpty";
 
 // src/components/Tabs/Tabs.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
-var import_jsx_runtime1243 = require("react/jsx-runtime");
+var import_jsx_runtime1244 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
-var TabsList = React17.forwardRef((_a, ref) => {
+var TabsList = React18.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(
     TabsPrimitive.List,
     __spreadValues({
       ref,
@@ -54226,9 +54358,9 @@ var TabsList = React17.forwardRef((_a, ref) => {
   );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React17.forwardRef((_a, ref) => {
+var TabsTrigger = React18.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(
     TabsPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -54243,9 +54375,9 @@ var TabsTrigger = React17.forwardRef((_a, ref) => {
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React17.forwardRef((_a, ref) => {
+var TabsContent = React18.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(
     TabsPrimitive.Content,
     __spreadValues({
       ref,
@@ -54259,13 +54391,13 @@ var TabsContent = React17.forwardRef((_a, ref) => {
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/Textarea/Textarea.tsx
-var React18 = __toESM(require("react"));
-var import_jsx_runtime1244 = require("react/jsx-runtime");
-var Textarea = React18.forwardRef(
+var React19 = __toESM(require("react"));
+var import_jsx_runtime1245 = require("react/jsx-runtime");
+var Textarea = React19.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, disabled } = _b, props = __objRest(_b, ["className", "disabled"]);
     const isDisabled = !!props["data-is-disabled"] || disabled;
-    return /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
       "div",
       {
         className: cn(
@@ -54276,7 +54408,7 @@ var Textarea = React18.forwardRef(
           },
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
           "textarea",
           __spreadProps(__spreadValues({}, props), {
             disabled: isDisabled,
@@ -54291,19 +54423,19 @@ var Textarea = React18.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/Toaster/Toast.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var ToastPrimitives = __toESM(require("@radix-ui/react-toast"));
 var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime1245 = require("react/jsx-runtime");
+var import_jsx_runtime1246 = require("react/jsx-runtime");
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React19.forwardRef((_a, ref) => {
+var ToastViewport = React20.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     ToastPrimitives.Viewport,
     __spreadValues({
       ref,
       className: cn(
-        "fixed top-8 left-1/2 -translate-x-1/2 z-[100] flex max-h-screen flex-col-reverse sm:flex-col md:max-w-[420px]",
+        "fixed top-8 left-1/2 -translate-x-1/2 z-[100] flex max-h-screen flex-col-reverse sm:flex-col w-max md:max-w-[420px]",
         className
       )
     }, props)
@@ -54324,9 +54456,9 @@ var toastVariants = (0, import_class_variance_authority4.cva)(
     }
   }
 );
-var Toast = React19.forwardRef((_a, ref) => {
+var Toast = React20.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     ToastPrimitives.Root,
     __spreadValues({
       ref,
@@ -54335,28 +54467,28 @@ var Toast = React19.forwardRef((_a, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React19.forwardRef((_a, ref) => {
+var ToastAction = React20.forwardRef((_a, ref) => {
   var _b = _a, { className, altText } = _b, props = __objRest(_b, ["className", "altText"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(ToastPrimitives.Action, { altText, ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(Button, __spreadValues({ size: "xs" }, props)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(ToastPrimitives.Action, { altText, ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(Button, __spreadValues({ size: "xs" }, props)) });
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React19.forwardRef((_a, ref) => {
+var ToastClose = React20.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     ToastPrimitives.Close,
     __spreadProps(__spreadValues({
       ref,
       className: cn("focus:outline-none focus:ring-1", className),
       "toast-close": ""
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(XCloseIcon, { className: "text-white", size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(XCloseIcon, { className: "text-white", size: 16 })
     })
   );
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React19.forwardRef((_a, ref) => {
+var ToastTitle = React20.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     ToastPrimitives.Title,
     __spreadValues({
       ref,
@@ -54365,9 +54497,9 @@ var ToastTitle = React19.forwardRef((_a, ref) => {
   );
 });
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React19.forwardRef((_a, ref) => {
+var ToastDescription = React20.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     ToastPrimitives.Description,
     __spreadValues({
       ref,
@@ -54378,10 +54510,10 @@ var ToastDescription = React19.forwardRef((_a, ref) => {
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // src/components/Toaster/Toaster.tsx
-var import_react1230 = __toESM(require("react"));
+var import_react1231 = __toESM(require("react"));
 
 // src/components/Toaster/useToast.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var TOAST_LIMIT = 3;
 var TOAST_REMOVE_DELAY = 1e6;
 var count = 0;
@@ -54490,8 +54622,8 @@ var toast = (parentId) => (_a) => {
   };
 };
 function useToast({ toasterId = "default" } = {}) {
-  const [state, setState] = React20.useState(memoryState);
-  React20.useEffect(() => {
+  const [state, setState] = React21.useState(memoryState);
+  React21.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -54507,7 +54639,7 @@ function useToast({ toasterId = "default" } = {}) {
 }
 
 // src/components/Toaster/Toaster.tsx
-var import_jsx_runtime1246 = require("react/jsx-runtime");
+var import_jsx_runtime1247 = require("react/jsx-runtime");
 var ToastContent = ({
   title,
   description,
@@ -54515,19 +54647,19 @@ var ToastContent = ({
   actions,
   hideClose
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime1246.jsxs)("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime1246.jsxs)("div", { className: "flex items-center flex-grow gap-2", children: [
-        icon && import_react1230.default.cloneElement(icon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime1247.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime1247.jsxs)("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime1247.jsxs)("div", { className: "flex items-center flex-grow gap-2", children: [
+        icon && import_react1231.default.cloneElement(icon, {
           size: 16,
           className: cn("shrink-0", icon.props.className)
         }),
-        title && /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(ToastTitle, { children: title })
+        title && /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(ToastTitle, { children: title })
       ] }),
       actions,
-      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(ToastClose, {})
+      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(ToastClose, {})
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(ToastDescription, { children: description })
+    description && /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(ToastDescription, { children: description })
   ] });
 };
 function Toaster(_a) {
@@ -54539,7 +54671,7 @@ function Toaster(_a) {
     "toasterId"
   ]);
   const { toasts } = useToast({ toasterId });
-  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsxs)(ToastProvider, __spreadProps(__spreadValues({}, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime1247.jsxs)(ToastProvider, __spreadProps(__spreadValues({}, props), { children: [
     toasts.filter((t) => t.parentId === toasterId).map(
       (_a2) => {
         var _b2 = _a2, {
@@ -54559,7 +54691,7 @@ function Toaster(_a) {
           "icon",
           "hideClose"
         ]);
-        return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(Toast, __spreadProps(__spreadValues({}, props2), { children: /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(Toast, __spreadProps(__spreadValues({}, props2), { children: /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(
           ToastContent,
           {
             title,
@@ -54571,27 +54703,27 @@ function Toaster(_a) {
         ) }), id);
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(ToastViewport, { className })
+    /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(ToastViewport, { className })
   ] }));
 }
 
 // src/components/Tooltip/Tooltip.tsx
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_jsx_runtime1247 = require("react/jsx-runtime");
+var import_jsx_runtime1248 = require("react/jsx-runtime");
 var TooltipProvider = (_a) => {
   var _b = _a, {
     delayDuration = 0
   } = _b, props = __objRest(_b, [
     "delayDuration"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
 };
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React22.forwardRef((_a, ref) => {
+var TooltipContent = React23.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
     TooltipPrimitive.Content,
     __spreadValues({
       ref,
@@ -54969,6 +55101,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
   CornerUpRightIcon,
   CpuChip1Icon,
   CpuChip2Icon,
+  CreatableSelect,
   CreditCard1Icon,
   CreditCard2Icon,
   CreditCardCheckIcon,