@snapcall/design-system 1.5.0 → 1.6.0

package/dist/index.mjs

@@ -141,7 +141,7 @@ var buttonVariants = cva(
         primary: "bg-blue-700 text-white hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
         secondary: "bg-gray-50 text-gray-1000 hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-gray-1000",
         tertiary: "bg-gray-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
-        outline: "bg-transparent ring-1 ring-offset-0 ring-gray-200 text-gray-1000 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-gray-1000",
+        outline: "bg-white ring-1 ring-offset-0 ring-gray-200 text-gray-1000 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-gray-1000",
         outlineBlue: "bg-transparent ring-1 ring-offset-0 ring-blue-700 text-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700",
         destructive: "bg-red-700 text-white hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
         ghostBlue: "bg-transparent text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
@@ -333,8 +333,93 @@ var AlertDialogCancel = React3.forwardRef((_a, ref) => {
 });
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
-// src/components/Badge/Badge.tsx
+// src/components/Avatar/Avatar.tsx
+import { forwardRef as forwardRef4 } from "react";
 import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var avatarSizes = cva2("", {
+  variants: {
+    size: {
+      xs: "w-[16px] h-[16px] rounded-[3px] text-[10px]",
+      sm: "w-[24px] h-[24px] rounded-[4px] text-md",
+      md: "w-[36px] h-[36px] rounded-[6px] text-md",
+      lg: "w-[45px] h-[45px] rounded-[8px] text-md",
+      xl: "w-[72px] h-[72px] rounded-[10px] text-[30px]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var avatarColors = {
+  amber: "bg-amber-200 text-amber-700",
+  red: "bg-red-300 text-red-700",
+  green: "bg-green-300 text-green-700",
+  plum: "bg-plum-300 text-plum-700",
+  crimson: "bg-crimson-300 text-crimson-700",
+  blue: "bg-blue-300 text-blue-700",
+  purple: "bg-purple-300 text-purple-700",
+  violet: "bg-violet-300 text-violet-700",
+  indigo: "bg-indigo-300 text-indigo-700",
+  cyan: "bg-cyan-300 text-cyan-700",
+  teal: "bg-teal-300 text-teal-700",
+  grass: "bg-grass-300 text-grass-700",
+  brown: "bg-brown-300 text-brown-700",
+  lime: "bg-lime-300 text-lime-700",
+  yellow: "bg-yellow-300 text-yellow-700",
+  gold: "bg-gold-300 text-gold-700",
+  bronze: "bg-bronze-300 text-bronze-700",
+  gray: "bg-gray-300 text-gray-700"
+};
+var avatarVariants = cva2("", {
+  variants: {
+    variant: avatarColors
+  },
+  defaultVariants: {
+    variant: "blue"
+  }
+});
+var getNameInitials = (name) => {
+  const initial = name[0].toUpperCase();
+  return initial;
+};
+var getColorFromName = (name) => {
+  const nameValue = Array.from(name).reduce(
+    (total, current) => current.charCodeAt(0) + total,
+    0
+  );
+  const colorIndex = nameValue % Object.keys(avatarColors).length;
+  return Object.keys(avatarColors)[colorIndex];
+};
+var Avatar = forwardRef4(function Avatar2(_a, forwardedRef) {
+  var _b = _a, { size, className, icon, name, variant, image } = _b, other = __objRest(_b, ["size", "className", "icon", "name", "variant", "image"]);
+  const color = getColorFromName(name);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: forwardedRef,
+      className: cn(
+        "flex items-center justify-center font-semibold relative overflow-hidden shrink-0",
+        variant ? avatarVariants({ variant }) : avatarVariants({
+          variant: color
+        }),
+        avatarSizes({ size }),
+        {
+          relative: Boolean(icon)
+        },
+        className
+      )
+    }, other), {
+      children: [
+        image ? image : name ? getNameInitials(name) : null,
+        icon && /* @__PURE__ */ jsx5("span", { className: "absolute bottom-0 right-0", children: icon })
+      ]
+    })
+  );
+});
+
+// src/components/Badge/Badge.tsx
+import { cva as cva3 } from "class-variance-authority";
 
 // src/utils/getLabelFromChildren.ts
 import React4 from "react";
@@ -362,7 +447,7 @@ var randomPickFromArray = ({
 };
 
 // src/components/Badge/Badge.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var colors = {
   gray: "text-gray-900",
   green: "text-green-700",
@@ -377,7 +462,7 @@ var colors = {
   orange: "text-orange-700"
 };
 var colorsArray = Object.keys(colors);
-var badgeVariants = cva2(
+var badgeVariants = cva3(
   "inline-flex items-center justify-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold transition-colors",
   {
     variants: {
@@ -497,7 +582,7 @@ function Badge(_a) {
       array: colorsArray
     });
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     __spreadValues({
       className: cn(badgeVariants({ variant, color }), className)
@@ -509,12 +594,12 @@ function Badge(_a) {
 import { DayPicker } from "react-day-picker";
 
 // src/icons/activity.tsx
-import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ActivityIcon = forwardRef4(
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ActivityIcon = forwardRef5(
   function ActivityIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -525,7 +610,7 @@ var ActivityIcon = forwardRef4(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           "path",
           {
             d: "M22 12H18L15 21L9 3L6 12H2",
@@ -541,12 +626,12 @@ var ActivityIcon = forwardRef4(
 );
 
 // src/icons/alertCircle.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var AlertCircleIcon = forwardRef5(
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var AlertCircleIcon = forwardRef6(
   function AlertCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -558,7 +643,7 @@ var AlertCircleIcon = forwardRef5(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx7(
+          duotone && /* @__PURE__ */ jsx8(
             "path",
             {
               opacity: "0.12",
@@ -566,7 +651,7 @@ var AlertCircleIcon = forwardRef5(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "path",
             {
               d: "M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -583,12 +668,12 @@ var AlertCircleIcon = forwardRef5(
 );
 
 // src/icons/arrowCircleUp.tsx
-import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var ArrowCircleUpIcon = forwardRef6(
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var ArrowCircleUpIcon = forwardRef7(
   function ArrowCircleUpIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -600,7 +685,7 @@ var ArrowCircleUpIcon = forwardRef6(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx8(
+          duotone && /* @__PURE__ */ jsx9(
             "path",
             {
               opacity: "0.12",
@@ -608,7 +693,7 @@ var ArrowCircleUpIcon = forwardRef6(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "path",
             {
               d: "M16 12L12 8M12 8L8 12M12 8V16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -625,12 +710,12 @@ var ArrowCircleUpIcon = forwardRef6(
 );
 
 // src/icons/arrowDown.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var ArrowDownIcon = forwardRef7(
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ArrowDownIcon = forwardRef8(
   function ArrowDownIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -641,7 +726,7 @@ var ArrowDownIcon = forwardRef7(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx9(
+        children: /* @__PURE__ */ jsx10(
           "path",
           {
             d: "M12 5V19M12 19L19 12M12 19L5 12",
@@ -657,12 +742,12 @@ var ArrowDownIcon = forwardRef7(
 );
 
 // src/icons/arrowLeft.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ArrowLeftIcon = forwardRef8(
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ArrowLeftIcon = forwardRef9(
   function ArrowLeftIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -673,7 +758,7 @@ var ArrowLeftIcon = forwardRef8(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           "path",
           {
             d: "M19 12H5M5 12L12 19M5 12L12 5",
@@ -689,12 +774,12 @@ var ArrowLeftIcon = forwardRef8(
 );
 
 // src/icons/arrowRight.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ArrowRightIcon = forwardRef9(
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ArrowRightIcon = forwardRef10(
   function ArrowRightIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -705,7 +790,7 @@ var ArrowRightIcon = forwardRef9(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           "path",
           {
             d: "M5 12H19M19 12L12 5M19 12L12 19",
@@ -721,12 +806,12 @@ var ArrowRightIcon = forwardRef9(
 );
 
 // src/icons/arrowUp.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ArrowUpIcon = forwardRef10(
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ArrowUpIcon = forwardRef11(
   function ArrowUpIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -737,7 +822,7 @@ var ArrowUpIcon = forwardRef10(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx13(
           "path",
           {
             d: "M12 19V5M12 5L5 12M12 5L19 12",
@@ -753,12 +838,12 @@ var ArrowUpIcon = forwardRef10(
 );
 
 // src/icons/attachment.tsx
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var AttachmentIcon = forwardRef11(
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var AttachmentIcon = forwardRef12(
   function AttachmentIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -769,7 +854,7 @@ var AttachmentIcon = forwardRef11(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx14(
           "path",
           {
             d: "M17.5 5.25581V16.5C17.5 19.5376 15.0376 22 12 22C8.96243 22 6.5 19.5376 6.5 16.5V5.66667C6.5 3.64162 8.14162 2 10.1667 2C12.1917 2 13.8333 3.64162 13.8333 5.66667V16.4457C13.8333 17.4583 13.0125 18.2791 12 18.2791C10.9875 18.2791 10.1667 17.4583 10.1667 16.4457V6.65116",
@@ -785,11 +870,11 @@ var AttachmentIcon = forwardRef11(
 );
 
 // src/icons/bell.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
-var BellIcon = forwardRef12(function BellIcon2(_a, ref) {
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var BellIcon = forwardRef13(function BellIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -801,7 +886,7 @@ var BellIcon = forwardRef12(function BellIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx14(
+        duotone && /* @__PURE__ */ jsx15(
           "path",
           {
             opacity: "0.12",
@@ -809,7 +894,7 @@ var BellIcon = forwardRef12(function BellIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M9.35419 21C10.0593 21.6224 10.9856 22 12 22C13.0145 22 13.9407 21.6224 14.6458 21M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z",
@@ -825,12 +910,12 @@ var BellIcon = forwardRef12(function BellIcon2(_a, ref) {
 });
 
 // src/icons/calendar.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-var CalendarIcon = forwardRef13(
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var CalendarIcon = forwardRef14(
   function CalendarIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -842,7 +927,7 @@ var CalendarIcon = forwardRef13(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx15(
+          duotone && /* @__PURE__ */ jsx16(
             "path",
             {
               opacity: "0.12",
@@ -850,7 +935,7 @@ var CalendarIcon = forwardRef13(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "path",
             {
               d: "M21 10H3M16 2V6M8 2V6M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z",
@@ -867,12 +952,12 @@ var CalendarIcon = forwardRef13(
 );
 
 // src/icons/calendarCheck.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
-var CalendarCheckIcon = forwardRef14(
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var CalendarCheckIcon = forwardRef15(
   function CalendarCheckIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -884,7 +969,7 @@ var CalendarCheckIcon = forwardRef14(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx16(
+          duotone && /* @__PURE__ */ jsx17(
             "path",
             {
               opacity: "0.12",
@@ -892,7 +977,7 @@ var CalendarCheckIcon = forwardRef14(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "path",
             {
               d: "M21 10H3M16 2V6M8 2V6M9 16L11 18L15.5 13.5M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z",
@@ -909,12 +994,12 @@ var CalendarCheckIcon = forwardRef14(
 );
 
 // src/icons/calendarPlus.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
-var CalendarPlusIcon = forwardRef15(
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var CalendarPlusIcon = forwardRef16(
   function CalendarPlusIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -926,7 +1011,7 @@ var CalendarPlusIcon = forwardRef15(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx17(
+          duotone && /* @__PURE__ */ jsx18(
             "path",
             {
               opacity: "0.12",
@@ -934,7 +1019,7 @@ var CalendarPlusIcon = forwardRef15(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             "path",
             {
               d: "M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z",
@@ -951,12 +1036,12 @@ var CalendarPlusIcon = forwardRef15(
 );
 
 // src/icons/camera.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
-var CameraIcon = forwardRef16(
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var CameraIcon = forwardRef17(
   function CameraIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -968,7 +1053,7 @@ var CameraIcon = forwardRef16(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx18(
+          duotone && /* @__PURE__ */ jsx19(
             "path",
             {
               opacity: "0.12",
@@ -976,7 +1061,7 @@ var CameraIcon = forwardRef16(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             "path",
             {
               d: "M2 8.37722C2 8.0269 2 7.85174 2.01462 7.70421C2.1556 6.28127 3.28127 5.1556 4.70421 5.01462C4.85174 5 5.03636 5 5.40558 5C5.54785 5 5.61899 5 5.67939 4.99634C6.45061 4.94963 7.12595 4.46288 7.41414 3.746C7.43671 3.68986 7.45781 3.62657 7.5 3.5C7.54219 3.37343 7.56329 3.31014 7.58586 3.254C7.87405 2.53712 8.54939 2.05037 9.32061 2.00366C9.38101 2 9.44772 2 9.58114 2H14.4189C14.5523 2 14.619 2 14.6794 2.00366C15.4506 2.05037 16.126 2.53712 16.4141 3.254C16.4367 3.31014 16.4578 3.37343 16.5 3.5C16.5422 3.62657 16.5633 3.68986 16.5859 3.746C16.874 4.46288 17.5494 4.94963 18.3206 4.99634C18.381 5 18.4521 5 18.5944 5C18.9636 5 19.1483 5 19.2958 5.01462C20.7187 5.1556 21.8444 6.28127 21.9854 7.70421C22 7.85174 22 8.0269 22 8.37722V16.2C22 17.8802 22 18.7202 21.673 19.362C21.3854 19.9265 20.9265 20.3854 20.362 20.673C19.7202 21 18.8802 21 17.2 21H6.8C5.11984 21 4.27976 21 3.63803 20.673C3.07354 20.3854 2.6146 19.9265 2.32698 19.362C2 18.7202 2 17.8802 2 16.2V8.37722Z",
@@ -987,7 +1072,7 @@ var CameraIcon = forwardRef16(
             }
           ),
           ",",
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             "path",
             {
               d: "M12 16.5C14.2091 16.5 16 14.7091 16 12.5C16 10.2909 14.2091 8.5 12 8.5C9.79086 8.5 8 10.2909 8 12.5C8 14.7091 9.79086 16.5 12 16.5Z",
@@ -1004,12 +1089,12 @@ var CameraIcon = forwardRef16(
 );
 
 // src/icons/cameraOff.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
-var CameraOffIcon = forwardRef17(
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var CameraOffIcon = forwardRef18(
   function CameraOffIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1021,7 +1106,7 @@ var CameraOffIcon = forwardRef17(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx19(
+          duotone && /* @__PURE__ */ jsx20(
             "path",
             {
               opacity: "0.12",
@@ -1029,7 +1114,7 @@ var CameraOffIcon = forwardRef17(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "path",
             {
               d: "M5 5H5.41886C5.55228 5 5.61899 5 5.67939 4.99634C6.45061 4.94963 7.12595 4.46288 7.41414 3.746C7.43671 3.68986 7.45781 3.62657 7.5 3.5C7.54219 3.37343 7.56329 3.31014 7.58586 3.254C7.87405 2.53712 8.54939 2.05037 9.32061 2.00366C9.38101 2 9.44772 2 9.58114 2H14.4189C14.5523 2 14.619 2 14.6794 2.00366C15.4506 2.05037 16.126 2.53712 16.4141 3.254C16.4367 3.31014 16.4578 3.37343 16.5 3.5C16.5422 3.62657 16.5633 3.68986 16.5859 3.746C16.874 4.46288 17.5494 4.94963 18.3206 4.99634C18.381 5 18.4521 5 18.5944 5C18.9636 5 19.1483 5 19.2958 5.01462C20.7187 5.1556 21.8444 6.28127 21.9854 7.70421C22 7.85174 22 8.0269 22 8.37722V18C22 19.0849 21.4241 20.0353 20.5613 20.5622M15.0641 15.0714C15.6482 14.3761 16 13.4791 16 12.5C16 10.2909 14.2091 8.5 12 8.5C11.0216 8.5 10.1252 8.8513 9.43012 9.43464M22 22L2 2M2 7.5V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21H15.5M12 16.5C9.79086 16.5 8 14.7091 8 12.5",
@@ -1046,12 +1131,12 @@ var CameraOffIcon = forwardRef17(
 );
 
 // src/icons/check.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var CheckIcon = forwardRef18(
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var CheckIcon = forwardRef19(
   function CheckIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1062,7 +1147,7 @@ var CheckIcon = forwardRef18(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx20(
+        children: /* @__PURE__ */ jsx21(
           "path",
           {
             d: "M20 6L9 17L4 12",
@@ -1078,12 +1163,12 @@ var CheckIcon = forwardRef18(
 );
 
 // src/icons/checkCircle.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var CheckCircleIcon = forwardRef19(
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var CheckCircleIcon = forwardRef20(
   function CheckCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1095,7 +1180,7 @@ var CheckCircleIcon = forwardRef19(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx21(
+          duotone && /* @__PURE__ */ jsx22(
             "path",
             {
               opacity: "0.12",
@@ -1103,7 +1188,7 @@ var CheckCircleIcon = forwardRef19(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "path",
             {
               d: "M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -1120,12 +1205,12 @@ var CheckCircleIcon = forwardRef19(
 );
 
 // src/icons/chevronLeft.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var ChevronLeftIcon = forwardRef20(
+import { forwardRef as forwardRef21 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var ChevronLeftIcon = forwardRef21(
   function ChevronLeftIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1136,7 +1221,7 @@ var ChevronLeftIcon = forwardRef20(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           "path",
           {
             d: "M15 18L9 12L15 6",
@@ -1151,13 +1236,55 @@ var ChevronLeftIcon = forwardRef20(
   }
 );
 
+// src/icons/chevronLeftDouble.tsx
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+var ChevronLeftDoubleIcon = forwardRef22(
+  function ChevronLeftDoubleIcon2(_a, ref) {
+    var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+    return /* @__PURE__ */ jsxs13(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          /* @__PURE__ */ jsx24(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M18.7071 6.29289C19.0976 6.68342 19.0976 7.31658 18.7071 7.70711L14.4142 12L18.7071 16.2929C19.0976 16.6834 19.0976 17.3166 18.7071 17.7071C18.3166 18.0976 17.6834 18.0976 17.2929 17.7071L12.2929 12.7071C11.9024 12.3166 11.9024 11.6834 12.2929 11.2929L17.2929 6.29289C17.6834 5.90237 18.3166 5.90237 18.7071 6.29289Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx24(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M11.7071 6.29289C12.0976 6.68342 12.0976 7.31658 11.7071 7.70711L7.41421 12L11.7071 16.2929C12.0976 16.6834 12.0976 17.3166 11.7071 17.7071C11.3166 18.0976 10.6834 18.0976 10.2929 17.7071L5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929L10.2929 6.29289C10.6834 5.90237 11.3166 5.90237 11.7071 6.29289Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
 // src/icons/chevronRight.tsx
-import { forwardRef as forwardRef21 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var ChevronRightIcon = forwardRef21(
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var ChevronRightIcon = forwardRef23(
   function ChevronRightIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx25(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1168,7 +1295,7 @@ var ChevronRightIcon = forwardRef21(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx25(
           "path",
           {
             d: "M9 18L15 12L9 6",
@@ -1183,13 +1310,55 @@ var ChevronRightIcon = forwardRef21(
   }
 );
 
+// src/icons/chevronRightDouble.tsx
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var ChevronRightDoubleIcon = forwardRef24(
+  function ChevronRightDoubleIcon2(_a, ref) {
+    var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+    return /* @__PURE__ */ jsxs14(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          /* @__PURE__ */ jsx26(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M5.29289 6.29289C5.68342 5.90237 6.31658 5.90237 6.70711 6.29289L11.7071 11.2929C12.0976 11.6834 12.0976 12.3166 11.7071 12.7071L6.70711 17.7071C6.31658 18.0976 5.68342 18.0976 5.29289 17.7071C4.90237 17.3166 4.90237 16.6834 5.29289 16.2929L9.58579 12L5.29289 7.70711C4.90237 7.31658 4.90237 6.68342 5.29289 6.29289Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx26(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M12.2929 6.29289C12.6834 5.90237 13.3166 5.90237 13.7071 6.29289L18.7071 11.2929C19.0976 11.6834 19.0976 12.3166 18.7071 12.7071L13.7071 17.7071C13.3166 18.0976 12.6834 18.0976 12.2929 17.7071C11.9024 17.3166 11.9024 16.6834 12.2929 16.2929L16.5858 12L12.2929 7.70711C11.9024 7.31658 11.9024 6.68342 12.2929 6.29289Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
 // src/icons/chevronSelectorVertical.tsx
-import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var ChevronSelectorVerticalIcon = forwardRef22(
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ChevronSelectorVerticalIcon = forwardRef25(
   function ChevronSelectorVerticalIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx27(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1200,7 +1369,7 @@ var ChevronSelectorVerticalIcon = forwardRef22(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsx27(
           "path",
           {
             d: "M7 15L12 20L17 15M7 9L12 4L17 9",
@@ -1216,12 +1385,12 @@ var ChevronSelectorVerticalIcon = forwardRef22(
 );
 
 // src/icons/chevronUp.tsx
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ChevronUpIcon = forwardRef23(
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var ChevronUpIcon = forwardRef26(
   function ChevronUpIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx28(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1232,7 +1401,7 @@ var ChevronUpIcon = forwardRef23(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsx28(
           "path",
           {
             d: "M18 15L12 9L6 15",
@@ -1248,11 +1417,11 @@ var ChevronUpIcon = forwardRef23(
 );
 
 // src/icons/copy.tsx
-import { forwardRef as forwardRef24 } from "react";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-var CopyIcon = forwardRef24(function CopyIcon2(_a, ref) {
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+var CopyIcon = forwardRef27(function CopyIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs15(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -1264,7 +1433,7 @@ var CopyIcon = forwardRef24(function CopyIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx26(
+        duotone && /* @__PURE__ */ jsx29(
           "path",
           {
             opacity: "0.12",
@@ -1272,7 +1441,7 @@ var CopyIcon = forwardRef24(function CopyIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M8 16V18.8C8 19.9201 8 20.4802 8.21799 20.908C8.40973 21.2843 8.71569 21.5903 9.09202 21.782C9.51984 22 10.0799 22 11.2 22H18.8C19.9201 22 20.4802 22 20.908 21.782C21.2843 21.5903 21.5903 21.2843 21.782 20.908C22 20.4802 22 19.9201 22 18.8V11.2C22 10.0799 22 9.51984 21.782 9.09202C21.5903 8.71569 21.2843 8.40973 20.908 8.21799C20.4802 8 19.9201 8 18.8 8H16M5.2 16H12.8C13.9201 16 14.4802 16 14.908 15.782C15.2843 15.5903 15.5903 15.2843 15.782 14.908C16 14.4802 16 13.9201 16 12.8V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V12.8C2 13.9201 2 14.4802 2.21799 14.908C2.40973 15.2843 2.71569 15.5903 3.09202 15.782C3.51984 16 4.07989 16 5.2 16Z",
@@ -1288,12 +1457,12 @@ var CopyIcon = forwardRef24(function CopyIcon2(_a, ref) {
 });
 
 // src/icons/cursorClick.tsx
-import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
-var CursorClickIcon = forwardRef25(
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+var CursorClickIcon = forwardRef28(
   function CursorClickIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs16(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1305,7 +1474,7 @@ var CursorClickIcon = forwardRef25(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx27(
+          duotone && /* @__PURE__ */ jsx30(
             "path",
             {
               opacity: "0.12",
@@ -1313,7 +1482,7 @@ var CursorClickIcon = forwardRef25(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx30(
             "path",
             {
               d: "M9 3.5V2M5.06066 5.06066L4 4M5.06066 13L4 14.0607M13 5.06066L14.0607 4M3.5 9H2M15.8645 16.1896L13.3727 20.817C13.0881 21.3457 12.9457 21.61 12.7745 21.6769C12.6259 21.7349 12.4585 21.7185 12.324 21.6328C12.1689 21.534 12.0806 21.2471 11.9038 20.6733L8.44519 9.44525C8.3008 8.97651 8.2286 8.74213 8.28669 8.58383C8.33729 8.44595 8.44595 8.33729 8.58383 8.2867C8.74213 8.22861 8.9765 8.3008 9.44525 8.44519L20.6732 11.9038C21.247 12.0806 21.5339 12.169 21.6327 12.324C21.7185 12.4586 21.7348 12.6259 21.6768 12.7745C21.61 12.9458 21.3456 13.0881 20.817 13.3728L16.1896 15.8645C16.111 15.9068 16.0717 15.9279 16.0374 15.9551C16.0068 15.9792 15.9792 16.0068 15.9551 16.0374C15.9279 16.0717 15.9068 16.111 15.8645 16.1896Z",
@@ -1330,12 +1499,12 @@ var CursorClickIcon = forwardRef25(
 );
 
 // src/icons/dotsHorizontal.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
-var DotsHorizontalIcon = forwardRef26(
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var DotsHorizontalIcon = forwardRef29(
   function DotsHorizontalIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs17(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1347,7 +1516,7 @@ var DotsHorizontalIcon = forwardRef26(
         className
       }, other), {
         children: [
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx31(
             "path",
             {
               d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
@@ -1357,7 +1526,7 @@ var DotsHorizontalIcon = forwardRef26(
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx31(
             "path",
             {
               d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
@@ -1367,7 +1536,7 @@ var DotsHorizontalIcon = forwardRef26(
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx31(
             "path",
             {
               d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
@@ -1383,13 +1552,125 @@ var DotsHorizontalIcon = forwardRef26(
   }
 );
 
+// src/icons/dotsGrid.tsx
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+var DotsGrid = forwardRef30(function DotsGrid2(_a, ref) {
+  var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+  return /* @__PURE__ */ jsxs18(
+    "svg",
+    __spreadProps(__spreadValues({
+      ref,
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, other), {
+      children: [
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M19 6C19.5523 6 20 5.55228 20 5C20 4.44772 19.5523 4 19 4C18.4477 4 18 4.44772 18 5C18 5.55228 18.4477 6 19 6Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M19 20C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18C18.4477 18 18 18.4477 18 19C18 19.5523 18.4477 20 19 20Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            d: "M5 20C5.55228 20 6 19.5523 6 19C6 18.4477 5.55228 18 5 18C4.44772 18 4 18.4477 4 19C4 19.5523 4.44772 20 5 20Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+});
+
 // src/icons/download.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
-var DownloadIcon = forwardRef27(
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+var DownloadIcon = forwardRef31(
   function DownloadIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs19(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1401,7 +1682,7 @@ var DownloadIcon = forwardRef27(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx29(
+          duotone && /* @__PURE__ */ jsx33(
             "path",
             {
               opacity: "0.12",
@@ -1409,7 +1690,7 @@ var DownloadIcon = forwardRef27(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx33(
             "path",
             {
               d: "M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -1426,11 +1707,11 @@ var DownloadIcon = forwardRef27(
 );
 
 // src/icons/edit.tsx
-import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
-var EditIcon = forwardRef28(function EditIcon2(_a, ref) {
+import { forwardRef as forwardRef32 } from "react";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+var EditIcon = forwardRef32(function EditIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs20(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -1442,7 +1723,7 @@ var EditIcon = forwardRef28(function EditIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx30(
+        duotone && /* @__PURE__ */ jsx34(
           "path",
           {
             opacity: "0.12",
@@ -1450,7 +1731,7 @@ var EditIcon = forwardRef28(function EditIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx34(
           "path",
           {
             d: "M11 3.99998H6.8C5.11984 3.99998 4.27976 3.99998 3.63803 4.32696C3.07354 4.61458 2.6146 5.07353 2.32698 5.63801C2 6.27975 2 7.11983 2 8.79998V17.2C2 18.8801 2 19.7202 2.32698 20.362C2.6146 20.9264 3.07354 21.3854 3.63803 21.673C4.27976 22 5.11984 22 6.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9264 19.673 20.362C20 19.7202 20 18.8801 20 17.2V13M7.99997 16H9.67452C10.1637 16 10.4083 16 10.6385 15.9447C10.8425 15.8957 11.0376 15.8149 11.2166 15.7053C11.4184 15.5816 11.5914 15.4086 11.9373 15.0627L21.5 5.49998C22.3284 4.67156 22.3284 3.32841 21.5 2.49998C20.6716 1.67156 19.3284 1.67155 18.5 2.49998L8.93723 12.0627C8.59133 12.4086 8.41838 12.5816 8.29469 12.7834C8.18504 12.9624 8.10423 13.1574 8.05523 13.3615C7.99997 13.5917 7.99997 13.8363 7.99997 14.3255V16Z",
@@ -1466,12 +1747,12 @@ var EditIcon = forwardRef28(function EditIcon2(_a, ref) {
 });
 
 // src/icons/expand.tsx
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var ExpandIcon = forwardRef29(
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var ExpandIcon = forwardRef33(
   function ExpandIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx35(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1482,7 +1763,7 @@ var ExpandIcon = forwardRef29(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx31(
+        children: /* @__PURE__ */ jsx35(
           "path",
           {
             d: "M16 8L21 3M21 3H16M21 3V8M8 8L3 3M3 3L3 8M3 3L8 3M8 16L3 21M3 21H8M3 21L3 16M16 16L21 21M21 21V16M21 21H16",
@@ -1498,12 +1779,12 @@ var ExpandIcon = forwardRef29(
 );
 
 // src/icons/fileQuestion.tsx
-import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
-var FileQuestionIcon = forwardRef30(
+import { forwardRef as forwardRef34 } from "react";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+var FileQuestionIcon = forwardRef34(
   function FileQuestionIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs21(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1515,7 +1796,7 @@ var FileQuestionIcon = forwardRef30(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx32(
+          duotone && /* @__PURE__ */ jsx36(
             "path",
             {
               opacity: "0.12",
@@ -1523,7 +1804,7 @@ var FileQuestionIcon = forwardRef30(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx36(
             "path",
             {
               d: "M20 9.5V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H14M14 11H8M10 15H8M16 7H8M16.5 15.0022C16.6762 14.5014 17.024 14.079 17.4817 13.81C17.9395 13.5409 18.4777 13.4426 19.001 13.5324C19.5243 13.6221 19.999 13.8942 20.3409 14.3004C20.6829 14.7066 20.87 15.2207 20.8692 15.7517C20.8692 17.2506 18.6209 18 18.6209 18M18.6499 21H18.6599",
@@ -1540,12 +1821,12 @@ var FileQuestionIcon = forwardRef30(
 );
 
 // src/icons/filterLines.tsx
-import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var FilterLinesIcon = forwardRef31(
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var FilterLinesIcon = forwardRef35(
   function FilterLinesIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx37(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1556,7 +1837,7 @@ var FilterLinesIcon = forwardRef31(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx33(
+        children: /* @__PURE__ */ jsx37(
           "path",
           {
             d: "M6 12H18M3 6H21M9 18H15",
@@ -1572,12 +1853,12 @@ var FilterLinesIcon = forwardRef31(
 );
 
 // src/icons/flipBackward.tsx
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var FlipBackwardIcon = forwardRef32(
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var FlipBackwardIcon = forwardRef36(
   function FlipBackwardIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx38(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1588,7 +1869,7 @@ var FlipBackwardIcon = forwardRef32(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx38(
           "path",
           {
             d: "M3 9H16.5C18.9853 9 21 11.0147 21 13.5C21 15.9853 18.9853 18 16.5 18H12M3 9L7 5M3 9L7 13",
@@ -1604,12 +1885,12 @@ var FlipBackwardIcon = forwardRef32(
 );
 
 // src/icons/flipForward.tsx
-import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var FlipForwardIcon = forwardRef33(
+import { forwardRef as forwardRef37 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var FlipForwardIcon = forwardRef37(
   function FlipForwardIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx39(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1620,7 +1901,7 @@ var FlipForwardIcon = forwardRef33(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsx39(
           "path",
           {
             d: "M21 9H7.5C5.01472 9 3 11.0147 3 13.5C3 15.9853 5.01472 18 7.5 18H12M21 9L17 5M21 9L17 13",
@@ -1636,12 +1917,12 @@ var FlipForwardIcon = forwardRef33(
 );
 
 // src/icons/helpCircle.tsx
-import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
-var HelpCircleIcon = forwardRef34(
+import { forwardRef as forwardRef38 } from "react";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+var HelpCircleIcon = forwardRef38(
   function HelpCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs22(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1653,7 +1934,7 @@ var HelpCircleIcon = forwardRef34(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx36(
+          duotone && /* @__PURE__ */ jsx40(
             "path",
             {
               opacity: "0.12",
@@ -1661,7 +1942,7 @@ var HelpCircleIcon = forwardRef34(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx40(
             "path",
             {
               d: "M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13M12 17H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -1678,11 +1959,11 @@ var HelpCircleIcon = forwardRef34(
 );
 
 // src/icons/home.tsx
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
-var HomeIcon = forwardRef35(function HomeIcon2(_a, ref) {
+import { forwardRef as forwardRef39 } from "react";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+var HomeIcon = forwardRef39(function HomeIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs23(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -1694,8 +1975,8 @@ var HomeIcon = forwardRef35(function HomeIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx37("path", { opacity: "0.12", d: "M9 21V12H15V21", fill: "currentColor" }),
-        /* @__PURE__ */ jsx37(
+        duotone && /* @__PURE__ */ jsx41("path", { opacity: "0.12", d: "M9 21V12H15V21", fill: "currentColor" }),
+        /* @__PURE__ */ jsx41(
           "path",
           {
             d: "M9 21V13.6C9 13.0399 9 12.7599 9.10899 12.546C9.20487 12.3578 9.35785 12.2049 9.54601 12.109C9.75992 12 10.0399 12 10.6 12H13.4C13.9601 12 14.2401 12 14.454 12.109C14.6422 12.2049 14.7951 12.3578 14.891 12.546C15 12.7599 15 13.0399 15 13.6V21M11.0177 2.764L4.23539 8.03912C3.78202 8.39175 3.55534 8.56806 3.39203 8.78886C3.24737 8.98444 3.1396 9.20478 3.07403 9.43905C3 9.70352 3 9.9907 3 10.5651V17.8C3 18.9201 3 19.4801 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4801 21 18.9201 21 17.8V10.5651C21 9.9907 21 9.70352 20.926 9.43905C20.8604 9.20478 20.7526 8.98444 20.608 8.78886C20.4447 8.56806 20.218 8.39175 19.7646 8.03913L12.9823 2.764C12.631 2.49075 12.4553 2.35412 12.2613 2.3016C12.0902 2.25526 11.9098 2.25526 11.7387 2.3016C11.5447 2.35412 11.369 2.49075 11.0177 2.764Z",
@@ -1711,12 +1992,12 @@ var HomeIcon = forwardRef35(function HomeIcon2(_a, ref) {
 });
 
 // src/icons/image.tsx
-import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
-var ImageIcon = forwardRef36(
+import { forwardRef as forwardRef40 } from "react";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+var ImageIcon = forwardRef40(
   function ImageIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs24(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1728,15 +2009,15 @@ var ImageIcon = forwardRef36(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsxs20("g", { opacity: "0.12", children: [
-            /* @__PURE__ */ jsx38(
+          duotone && /* @__PURE__ */ jsxs24("g", { opacity: "0.12", children: [
+            /* @__PURE__ */ jsx42(
               "path",
               {
                 d: "M6.36567 19.6343L14.8686 11.1314C15.2646 10.7354 15.4626 10.5373 15.691 10.4632C15.8918 10.3979 16.1082 10.3979 16.309 10.4632C16.5373 10.5373 16.7353 10.7354 17.1314 11.1314L21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9264 20.3854 19.362 20.673C18.7202 21 17.8801 21 16.2 21H6.93136C6.32554 21 6.02264 21 5.88237 20.8802C5.76067 20.7763 5.69608 20.6203 5.70864 20.4608C5.72311 20.2769 5.9373 20.0627 6.36567 19.6343Z",
                 fill: "currentColor"
               }
             ),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx42(
               "path",
               {
                 d: "M8.49999 10.5C9.60456 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60456 6.5 8.49999 6.5C7.39542 6.5 6.49999 7.39543 6.49999 8.5C6.49999 9.60457 7.39542 10.5 8.49999 10.5Z",
@@ -1744,7 +2025,7 @@ var ImageIcon = forwardRef36(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx42(
             "path",
             {
               d: "M16.2 21H6.93137C6.32555 21 6.02265 21 5.88238 20.8802C5.76068 20.7763 5.69609 20.6203 5.70865 20.4608C5.72312 20.2769 5.93731 20.0627 6.36569 19.6343L14.8686 11.1314C15.2646 10.7354 15.4627 10.5373 15.691 10.4632C15.8918 10.3979 16.1082 10.3979 16.309 10.4632C16.5373 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2M16.2 21C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2M16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5Z",
@@ -1761,12 +2042,12 @@ var ImageIcon = forwardRef36(
 );
 
 // src/icons/imageDown.tsx
-import { forwardRef as forwardRef37 } from "react";
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
-var ImageDownIcon = forwardRef37(
+import { forwardRef as forwardRef41 } from "react";
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+var ImageDownIcon = forwardRef41(
   function ImageDownIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs25(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1778,15 +2059,15 @@ var ImageDownIcon = forwardRef37(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsxs21("g", { opacity: "0.12", children: [
-            /* @__PURE__ */ jsx39(
+          duotone && /* @__PURE__ */ jsxs25("g", { opacity: "0.12", children: [
+            /* @__PURE__ */ jsx43(
               "path",
               {
                 d: "M8.50004 10.5C9.60461 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60461 6.5 8.50004 6.5C7.39547 6.5 6.50004 7.39543 6.50004 8.5C6.50004 9.60457 7.39547 10.5 8.50004 10.5Z",
                 fill: "currentColor"
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx43(
               "path",
               {
                 d: "M6.53118 19.608L14.9901 11.9181C15.3487 11.5921 15.528 11.4291 15.7326 11.3627C15.9129 11.3041 16.1062 11.298 16.2898 11.3451C16.4982 11.3985 16.6874 11.5499 17.0659 11.8527L19.8631 14.0905C20.2412 14.3929 20.4303 14.5442 20.5733 14.7264C20.753 14.9554 20.8806 15.2208 20.9471 15.5042C21 15.7296 21 15.9717 21 16.456C21 17.8951 21 18.6147 20.7583 19.1799C20.4547 19.8894 19.8895 20.4547 19.18 20.7582C18.6148 21 17.8952 21 16.456 21H7.06932C6.42632 21 6.10481 21 5.96322 20.8755C5.84049 20.7676 5.77822 20.6066 5.79646 20.4442C5.81751 20.2568 6.0554 20.0406 6.53118 19.608Z",
@@ -1794,7 +2075,7 @@ var ImageDownIcon = forwardRef37(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx43(
             "path",
             {
               d: "M16 5L19 8M19 8L22 5M19 8V2M12.5 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H17C17.93 21 18.395 21 18.7765 20.8978C19.8117 20.6204 20.6204 19.8117 20.8978 18.7765C21 18.395 21 17.93 21 17M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5ZM14.99 11.9181L6.53115 19.608C6.05536 20.0406 5.81747 20.2568 5.79643 20.4442C5.77819 20.6066 5.84045 20.7676 5.96319 20.8755C6.10478 21 6.42628 21 7.06929 21H16.456C17.8951 21 18.6147 21 19.1799 20.7582C19.8894 20.4547 20.4547 19.8894 20.7582 19.1799C21 18.6147 21 17.8951 21 16.456C21 15.9717 21 15.7296 20.9471 15.5042C20.8805 15.2208 20.753 14.9554 20.5733 14.7264C20.4303 14.5442 20.2412 14.3929 19.8631 14.0905L17.0658 11.8527C16.6874 11.5499 16.4982 11.3985 16.2898 11.3451C16.1061 11.298 15.9129 11.3041 15.7325 11.3627C15.5279 11.4291 15.3486 11.5921 14.99 11.9181Z",
@@ -1811,12 +2092,12 @@ var ImageDownIcon = forwardRef37(
 );
 
 // src/icons/imageX.tsx
-import { forwardRef as forwardRef38 } from "react";
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
-var ImageXIcon = forwardRef38(
+import { forwardRef as forwardRef42 } from "react";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+var ImageXIcon = forwardRef42(
   function ImageXIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs26(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1828,15 +2109,15 @@ var ImageXIcon = forwardRef38(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsxs22("g", { opacity: "0.12", children: [
-            /* @__PURE__ */ jsx40(
+          duotone && /* @__PURE__ */ jsxs26("g", { opacity: "0.12", children: [
+            /* @__PURE__ */ jsx44(
               "path",
               {
                 d: "M8.50016 10.5C9.60473 10.5 10.5002 9.60457 10.5002 8.5C10.5002 7.39543 9.60473 6.5 8.50016 6.5C7.39559 6.5 6.50016 7.39543 6.50016 8.5C6.50016 9.60457 7.39559 10.5 8.50016 10.5Z",
                 fill: "currentColor"
               }
             ),
-            /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx44(
               "path",
               {
                 d: "M6.53131 19.608L14.9902 11.9181C15.3488 11.5921 15.5281 11.4291 15.7327 11.3627C15.913 11.3041 16.1063 11.298 16.29 11.3451C16.4983 11.3985 16.6875 11.5499 17.066 11.8527L19.8632 14.0905C20.2413 14.3929 20.4304 14.5442 20.5734 14.7264C20.7531 14.9554 20.8807 15.2208 20.9472 15.5042C21.0002 15.7296 21.0002 15.9717 21.0002 16.456C21.0002 17.8951 21.0002 18.6147 20.7584 19.1799C20.4549 19.8894 19.8896 20.4547 19.1801 20.7582C18.6149 21 17.8953 21 16.4561 21H7.06944C6.42644 21 6.10494 21 5.96334 20.8755C5.84061 20.7676 5.77835 20.6066 5.79659 20.4442C5.81763 20.2568 6.05552 20.0406 6.53131 19.608Z",
@@ -1844,7 +2125,7 @@ var ImageXIcon = forwardRef38(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx44(
             "path",
             {
               d: "M16.5 2.5L21.5 7.5M21.5 2.5L16.5 7.5M12.5 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H17C17.93 21 18.395 21 18.7765 20.8978C19.8117 20.6204 20.6204 19.8117 20.8978 18.7765C21 18.395 21 17.93 21 17M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5ZM14.99 11.9181L6.53115 19.608C6.05536 20.0406 5.81747 20.2568 5.79643 20.4442C5.77819 20.6066 5.84045 20.7676 5.96319 20.8755C6.10478 21 6.42628 21 7.06929 21H16.456C17.8951 21 18.6147 21 19.1799 20.7582C19.8894 20.4547 20.4547 19.8894 20.7582 19.1799C21 18.6147 21 17.8951 21 16.456C21 15.9717 21 15.7296 20.9471 15.5042C20.8805 15.2208 20.753 14.9554 20.5733 14.7264C20.4303 14.5442 20.2412 14.3929 19.8631 14.0905L17.0658 11.8527C16.6874 11.5499 16.4982 11.3985 16.2898 11.3451C16.1061 11.298 15.9129 11.3041 15.7325 11.3627C15.5279 11.4291 15.3486 11.5921 14.99 11.9181Z",
@@ -1861,12 +2142,12 @@ var ImageXIcon = forwardRef38(
 );
 
 // src/icons/infoCircle.tsx
-import { forwardRef as forwardRef39 } from "react";
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
-var InfoCircleIcon = forwardRef39(
+import { forwardRef as forwardRef43 } from "react";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+var InfoCircleIcon = forwardRef43(
   function InfoCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs27(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1878,7 +2159,7 @@ var InfoCircleIcon = forwardRef39(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx41(
+          duotone && /* @__PURE__ */ jsx45(
             "path",
             {
               opacity: "0.12",
@@ -1886,7 +2167,7 @@ var InfoCircleIcon = forwardRef39(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -1903,12 +2184,12 @@ var InfoCircleIcon = forwardRef39(
 );
 
 // src/icons/lightbulb.tsx
-import { forwardRef as forwardRef40 } from "react";
-import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
-var LightbulbIcon = forwardRef40(
+import { forwardRef as forwardRef44 } from "react";
+import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+var LightbulbIcon = forwardRef44(
   function LightbulbIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs28(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -1920,7 +2201,7 @@ var LightbulbIcon = forwardRef40(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx42(
+          duotone && /* @__PURE__ */ jsx46(
             "path",
             {
               opacity: "0.12",
@@ -1928,7 +2209,7 @@ var LightbulbIcon = forwardRef40(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx46(
             "path",
             {
               d: "M9.5 22H14.5M10 10H14M12 10L12 16M15 15.3264C17.3649 14.2029 19 11.7924 19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 11.7924 6.63505 14.2029 9 15.3264V16C9 16.9319 9 17.3978 9.15224 17.7654C9.35523 18.2554 9.74458 18.6448 10.2346 18.8478C10.6022 19 11.0681 19 12 19C12.9319 19 13.3978 19 13.7654 18.8478C14.2554 18.6448 14.6448 18.2554 14.8478 17.7654C15 17.3978 15 16.9319 15 16V15.3264Z",
@@ -1945,11 +2226,11 @@ var LightbulbIcon = forwardRef40(
 );
 
 // src/icons/link.tsx
-import { forwardRef as forwardRef41 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var LinkIcon = forwardRef41(function LinkIcon2(_a, ref) {
+import { forwardRef as forwardRef45 } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var LinkIcon = forwardRef45(function LinkIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx47(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -1960,7 +2241,7 @@ var LinkIcon = forwardRef41(function LinkIcon2(_a, ref) {
       xmlns: "http://www.w3.org/2000/svg",
       className
     }, other), {
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx47(
         "path",
         {
           d: "M12.7076 18.3639L11.2933 19.7781C9.34072 21.7308 6.1749 21.7308 4.22228 19.7781C2.26966 17.8255 2.26966 14.6597 4.22228 12.7071L5.63649 11.2929M18.3644 12.7071L19.7786 11.2929C21.7312 9.34024 21.7312 6.17441 19.7786 4.22179C17.826 2.26917 14.6602 2.26917 12.7076 4.22179L11.2933 5.636M8.50045 15.4999L15.5005 8.49994",
@@ -1975,11 +2256,11 @@ var LinkIcon = forwardRef41(function LinkIcon2(_a, ref) {
 });
 
 // src/icons/lock.tsx
-import { forwardRef as forwardRef42 } from "react";
-import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
-var LockIcon = forwardRef42(function LockIcon2(_a, ref) {
+import { forwardRef as forwardRef46 } from "react";
+import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
+var LockIcon = forwardRef46(function LockIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs29(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -1991,7 +2272,7 @@ var LockIcon = forwardRef42(function LockIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx44(
+        duotone && /* @__PURE__ */ jsx48(
           "path",
           {
             opacity: "0.12",
@@ -1999,7 +2280,7 @@ var LockIcon = forwardRef42(function LockIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx48(
           "path",
           {
             d: "M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10M12 14.5V16.5M8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C17.7202 10 16.8802 10 15.2 10H8.8C7.11984 10 6.27976 10 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21Z",
@@ -2015,12 +2296,12 @@ var LockIcon = forwardRef42(function LockIcon2(_a, ref) {
 });
 
 // src/icons/logIn.tsx
-import { forwardRef as forwardRef43 } from "react";
-import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
-var LogInIcon = forwardRef43(
+import { forwardRef as forwardRef47 } from "react";
+import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+var LogInIcon = forwardRef47(
   function LogInIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs30(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2032,7 +2313,7 @@ var LogInIcon = forwardRef43(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx45(
+          duotone && /* @__PURE__ */ jsx49(
             "path",
             {
               opacity: "0.12",
@@ -2040,7 +2321,7 @@ var LogInIcon = forwardRef43(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx49(
             "path",
             {
               d: "M6 17C6 17.93 6 18.395 6.10222 18.7765C6.37962 19.8117 7.18827 20.6204 8.22354 20.8978C8.60504 21 9.07003 21 10 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H10C9.07003 3 8.60504 3 8.22354 3.10222C7.18827 3.37962 6.37962 4.18827 6.10222 5.22354C6 5.60504 6 6.07003 6 7M12 8L16 12M16 12L12 16M16 12H3",
@@ -2057,12 +2338,12 @@ var LogInIcon = forwardRef43(
 );
 
 // src/icons/magicWand.tsx
-import { forwardRef as forwardRef44 } from "react";
-import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
-var MagicWandIcon = forwardRef44(
+import { forwardRef as forwardRef48 } from "react";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+var MagicWandIcon = forwardRef48(
   function MagicWandIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs31(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2074,7 +2355,7 @@ var MagicWandIcon = forwardRef44(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx46(
+          duotone && /* @__PURE__ */ jsx50(
             "path",
             {
               opacity: "0.12",
@@ -2082,7 +2363,7 @@ var MagicWandIcon = forwardRef44(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx50(
             "path",
             {
               d: "M13 14L9.99997 11M15.0103 3.5V2M18.9497 5.06066L20.0103 4M18.9497 13L20.0103 14.0607M11.0103 5.06066L9.94966 4M20.5103 9H22.0103M6.13134 20.8686L15.3686 11.6314C15.7646 11.2354 15.9626 11.0373 16.0368 10.809C16.1021 10.6082 16.1021 10.3918 16.0368 10.191C15.9626 9.96265 15.7646 9.76465 15.3686 9.36863L14.6313 8.63137C14.2353 8.23535 14.0373 8.03735 13.809 7.96316C13.6081 7.8979 13.3918 7.8979 13.191 7.96316C12.9626 8.03735 12.7646 8.23535 12.3686 8.63137L3.13134 17.8686C2.73532 18.2646 2.53732 18.4627 2.46313 18.691C2.39787 18.8918 2.39787 19.1082 2.46313 19.309C2.53732 19.5373 2.73533 19.7354 3.13134 20.1314L3.8686 20.8686C4.26462 21.2646 4.46263 21.4627 4.69095 21.5368C4.8918 21.6021 5.10814 21.6021 5.30899 21.5368C5.53732 21.4627 5.73533 21.2646 6.13134 20.8686Z",
@@ -2099,11 +2380,11 @@ var MagicWandIcon = forwardRef44(
 );
 
 // src/icons/mail.tsx
-import { forwardRef as forwardRef45 } from "react";
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
-var MailIcon = forwardRef45(function MailIcon2(_a, ref) {
+import { forwardRef as forwardRef49 } from "react";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+var MailIcon = forwardRef49(function MailIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs32(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -2115,7 +2396,7 @@ var MailIcon = forwardRef45(function MailIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx47(
+        duotone && /* @__PURE__ */ jsx51(
           "path",
           {
             opacity: "0.12",
@@ -2123,7 +2404,7 @@ var MailIcon = forwardRef45(function MailIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx51(
           "path",
           {
             d: "M2 7L10.1649 12.7154C10.8261 13.1783 11.1567 13.4097 11.5163 13.4993C11.8339 13.5785 12.1661 13.5785 12.4837 13.4993C12.8433 13.4097 13.1739 13.1783 13.8351 12.7154L22 7M6.8 20H17.2C18.8802 20 19.7202 20 20.362 19.673C20.9265 19.3854 21.3854 18.9265 21.673 18.362C22 17.7202 22 16.8802 22 15.2V8.8C22 7.11984 22 6.27976 21.673 5.63803C21.3854 5.07354 20.9265 4.6146 20.362 4.32698C19.7202 4 18.8802 4 17.2 4H6.8C5.11984 4 4.27976 4 3.63803 4.32698C3.07354 4.6146 2.6146 5.07354 2.32698 5.63803C2 6.27976 2 7.11984 2 8.8V15.2C2 16.8802 2 17.7202 2.32698 18.362C2.6146 18.9265 3.07354 19.3854 3.63803 19.673C4.27976 20 5.11984 20 6.8 20Z",
@@ -2139,11 +2420,11 @@ var MailIcon = forwardRef45(function MailIcon2(_a, ref) {
 });
 
 // src/icons/menu.tsx
-import { forwardRef as forwardRef46 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
-var MenuIcon = forwardRef46(function MenuIcon2(_a, ref) {
+import { forwardRef as forwardRef50 } from "react";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var MenuIcon = forwardRef50(function MenuIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx52(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -2154,7 +2435,7 @@ var MenuIcon = forwardRef46(function MenuIcon2(_a, ref) {
       xmlns: "http://www.w3.org/2000/svg",
       className
     }, other), {
-      children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsx52(
         "path",
         {
           d: "M3 12H21M3 6H21M3 18H21",
@@ -2169,12 +2450,12 @@ var MenuIcon = forwardRef46(function MenuIcon2(_a, ref) {
 });
 
 // src/icons/messageChatSquare.tsx
-import { forwardRef as forwardRef47 } from "react";
-import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
-var MessageChatSquareIcon = forwardRef47(
+import { forwardRef as forwardRef51 } from "react";
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+var MessageChatSquareIcon = forwardRef51(
   function MessageChatSquareIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs33(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2186,7 +2467,7 @@ var MessageChatSquareIcon = forwardRef47(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx49(
+          duotone && /* @__PURE__ */ jsx53(
             "path",
             {
               opacity: "0.12",
@@ -2194,7 +2475,7 @@ var MessageChatSquareIcon = forwardRef47(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx53(
             "path",
             {
               d: "M10 15L6.92474 18.1137C6.49579 18.548 6.28131 18.7652 6.09695 18.7805C5.93701 18.7938 5.78042 18.7295 5.67596 18.6076C5.55556 18.4672 5.55556 18.162 5.55556 17.5515V15.9916C5.55556 15.444 5.10707 15.0477 4.5652 14.9683V14.9683C3.25374 14.7762 2.22378 13.7463 2.03168 12.4348C2 12.2186 2 11.9605 2 11.4444V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H14.2C15.8802 2 16.7202 2 17.362 2.32698C17.9265 2.6146 18.3854 3.07354 18.673 3.63803C19 4.27976 19 5.11984 19 6.8V11M19 22L16.8236 20.4869C16.5177 20.2742 16.3647 20.1678 16.1982 20.0924C16.0504 20.0255 15.8951 19.9768 15.7356 19.9474C15.5558 19.9143 15.3695 19.9143 14.9969 19.9143H13.2C12.0799 19.9143 11.5198 19.9143 11.092 19.6963C10.7157 19.5046 10.4097 19.1986 10.218 18.8223C10 18.3944 10 17.8344 10 16.7143V14.2C10 13.0799 10 12.5198 10.218 12.092C10.4097 11.7157 10.7157 11.4097 11.092 11.218C11.5198 11 12.0799 11 13.2 11H18.8C19.9201 11 20.4802 11 20.908 11.218C21.2843 11.4097 21.5903 11.7157 21.782 12.092C22 12.5198 22 13.0799 22 14.2V16.9143C22 17.8462 22 18.3121 21.8478 18.6797C21.6448 19.1697 21.2554 19.5591 20.7654 19.762C20.3978 19.9143 19.9319 19.9143 19 19.9143V22Z",
@@ -2211,12 +2492,12 @@ var MessageChatSquareIcon = forwardRef47(
 );
 
 // src/icons/messagePlusSquare.tsx
-import { forwardRef as forwardRef48 } from "react";
-import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
-var MessagePlusSquareIcon = forwardRef48(
+import { forwardRef as forwardRef52 } from "react";
+import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
+var MessagePlusSquareIcon = forwardRef52(
   function MessagePlusSquareIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs34(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2228,7 +2509,7 @@ var MessagePlusSquareIcon = forwardRef48(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx50(
+          duotone && /* @__PURE__ */ jsx54(
             "path",
             {
               opacity: "0.12",
@@ -2236,7 +2517,7 @@ var MessagePlusSquareIcon = forwardRef48(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx54(
             "path",
             {
               d: "M12 13.5V7.5M9 10.5H15M7 18V20.3355C7 20.8684 7 21.1348 7.10923 21.2716C7.20422 21.3906 7.34827 21.4599 7.50054 21.4597C7.67563 21.4595 7.88367 21.2931 8.29976 20.9602L10.6852 19.0518C11.1725 18.662 11.4162 18.4671 11.6875 18.3285C11.9282 18.2055 12.1844 18.1156 12.4492 18.0613C12.7477 18 13.0597 18 13.6837 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V14C3 14.93 3 15.395 3.10222 15.7765C3.37962 16.8117 4.18827 17.6204 5.22354 17.8978C5.60504 18 6.07003 18 7 18Z",
@@ -2253,12 +2534,12 @@ var MessagePlusSquareIcon = forwardRef48(
 );
 
 // src/icons/messageTextSquare.tsx
-import { forwardRef as forwardRef49 } from "react";
-import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
-var MessageTextSquareIcon = forwardRef49(
+import { forwardRef as forwardRef53 } from "react";
+import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
+var MessageTextSquareIcon = forwardRef53(
   function MessageTextSquareIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs35(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2270,7 +2551,7 @@ var MessageTextSquareIcon = forwardRef49(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx51(
+          duotone && /* @__PURE__ */ jsx55(
             "path",
             {
               opacity: "0.12",
@@ -2278,7 +2559,7 @@ var MessageTextSquareIcon = forwardRef49(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx55(
             "path",
             {
               d: "M7 8.5H12M7 12H15M7 18V20.3355C7 20.8684 7 21.1348 7.10923 21.2716C7.20422 21.3906 7.34827 21.4599 7.50054 21.4597C7.67563 21.4595 7.88367 21.2931 8.29976 20.9602L10.6852 19.0518C11.1725 18.662 11.4162 18.4671 11.6875 18.3285C11.9282 18.2055 12.1844 18.1156 12.4492 18.0613C12.7477 18 13.0597 18 13.6837 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V14C3 14.93 3 15.395 3.10222 15.7765C3.37962 16.8117 4.18827 17.6204 5.22354 17.8978C5.60504 18 6.07003 18 7 18Z",
@@ -2295,12 +2576,12 @@ var MessageTextSquareIcon = forwardRef49(
 );
 
 // src/icons/microphone.tsx
-import { forwardRef as forwardRef50 } from "react";
-import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
-var MicrophoneIcon = forwardRef50(
+import { forwardRef as forwardRef54 } from "react";
+import { jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
+var MicrophoneIcon = forwardRef54(
   function MicrophoneIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs36(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2312,7 +2593,7 @@ var MicrophoneIcon = forwardRef50(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx52(
+          duotone && /* @__PURE__ */ jsx56(
             "path",
             {
               opacity: "0.12",
@@ -2320,7 +2601,7 @@ var MicrophoneIcon = forwardRef50(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx56(
             "path",
             {
               d: "M19 10V12C19 15.866 15.866 19 12 19M5 10V12C5 15.866 8.13401 19 12 19M12 19V22M8 22H16M12 15C10.3431 15 9 13.6569 9 12V5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5V12C15 13.6569 13.6569 15 12 15Z",
@@ -2337,12 +2618,12 @@ var MicrophoneIcon = forwardRef50(
 );
 
 // src/icons/microphoneOff.tsx
-import { forwardRef as forwardRef51 } from "react";
-import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
-var MicrophoneOffIcon = forwardRef51(
+import { forwardRef as forwardRef55 } from "react";
+import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
+var MicrophoneOffIcon = forwardRef55(
   function MicrophoneOffIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs37(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2354,7 +2635,7 @@ var MicrophoneOffIcon = forwardRef51(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx53(
+          duotone && /* @__PURE__ */ jsx57(
             "path",
             {
               opacity: "0.12",
@@ -2362,7 +2643,7 @@ var MicrophoneOffIcon = forwardRef51(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx57(
             "path",
             {
               d: "M15 9.4V5C15 3.34315 13.6569 2 12 2C10.8224 2 9.80325 2.67852 9.3122 3.66593M12 19V22M12 19C8.13401 19 5 15.866 5 12V10M12 19C15.866 19 19 15.866 19 12V10M8 22H16M2 2L22 22M12 15C10.3431 15 9 13.6569 9 12V9L14.1226 14.12C13.5796 14.6637 12.8291 15 12 15Z",
@@ -2379,12 +2660,12 @@ var MicrophoneOffIcon = forwardRef51(
 );
 
 // src/icons/monitor.tsx
-import { forwardRef as forwardRef52 } from "react";
-import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
-var MonitorIcon = forwardRef52(
+import { forwardRef as forwardRef56 } from "react";
+import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
+var MonitorIcon = forwardRef56(
   function MonitorIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs38(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2396,7 +2677,7 @@ var MonitorIcon = forwardRef52(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx54(
+          duotone && /* @__PURE__ */ jsx58(
             "path",
             {
               opacity: "0.12",
@@ -2404,7 +2685,7 @@ var MonitorIcon = forwardRef52(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx58(
             "path",
             {
               d: "M7.57181 21C8.90661 20.3598 10.41 20 12 20C13.59 20 15.0934 20.3598 16.4282 21M6.8 17H17.2C18.8802 17 19.7202 17 20.362 16.673C20.9265 16.3854 21.3854 15.9265 21.673 15.362C22 14.7202 22 13.8802 22 12.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V12.2C2 13.8802 2 14.7202 2.32698 15.362C2.6146 15.9265 3.07354 16.3854 3.63803 16.673C4.27976 17 5.11984 17 6.8 17Z",
@@ -2421,12 +2702,12 @@ var MonitorIcon = forwardRef52(
 );
 
 // src/icons/notificationBox.tsx
-import { forwardRef as forwardRef53 } from "react";
-import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
-var NotificationBoxIcon = forwardRef53(
+import { forwardRef as forwardRef57 } from "react";
+import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
+var NotificationBoxIcon = forwardRef57(
   function NotificationBoxIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs39(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2438,7 +2719,7 @@ var NotificationBoxIcon = forwardRef53(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx55(
+          duotone && /* @__PURE__ */ jsx59(
             "path",
             {
               opacity: "0.12",
@@ -2446,7 +2727,7 @@ var NotificationBoxIcon = forwardRef53(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx59(
             "path",
             {
               d: "M11 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V13M20.1213 3.87868C21.2929 5.05025 21.2929 6.94975 20.1213 8.12132C18.9497 9.29289 17.0503 9.29289 15.8787 8.12132C14.7071 6.94975 14.7071 5.05025 15.8787 3.87868C17.0503 2.70711 18.9497 2.70711 20.1213 3.87868Z",
@@ -2463,12 +2744,12 @@ var NotificationBoxIcon = forwardRef53(
 );
 
 // src/icons/pauseCircle.tsx
-import { forwardRef as forwardRef54 } from "react";
-import { jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
-var PauseCircleIcon = forwardRef54(
+import { forwardRef as forwardRef58 } from "react";
+import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
+var PauseCircleIcon = forwardRef58(
   function PauseCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs40(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2480,7 +2761,7 @@ var PauseCircleIcon = forwardRef54(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx56(
+          duotone && /* @__PURE__ */ jsx60(
             "path",
             {
               opacity: "0.12",
@@ -2488,7 +2769,7 @@ var PauseCircleIcon = forwardRef54(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx60(
             "path",
             {
               d: "M9.5 15V9M14.5 15V9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -2505,12 +2786,12 @@ var PauseCircleIcon = forwardRef54(
 );
 
 // src/icons/phone.tsx
-import { forwardRef as forwardRef55 } from "react";
-import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
-var PhoneIcon = forwardRef55(
+import { forwardRef as forwardRef59 } from "react";
+import { jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
+var PhoneIcon = forwardRef59(
   function PhoneIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs41(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2522,7 +2803,7 @@ var PhoneIcon = forwardRef55(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx57(
+          duotone && /* @__PURE__ */ jsx61(
             "path",
             {
               opacity: "0.12",
@@ -2530,7 +2811,7 @@ var PhoneIcon = forwardRef55(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx61(
             "path",
             {
               d: "M12 17.5H12.01M8.2 22H15.8C16.9201 22 17.4802 22 17.908 21.782C18.2843 21.5903 18.5903 21.2843 18.782 20.908C19 20.4802 19 19.9201 19 18.8V5.2C19 4.07989 19 3.51984 18.782 3.09202C18.5903 2.71569 18.2843 2.40973 17.908 2.21799C17.4802 2 16.9201 2 15.8 2H8.2C7.0799 2 6.51984 2 6.09202 2.21799C5.71569 2.40973 5.40973 2.71569 5.21799 3.09202C5 3.51984 5 4.0799 5 5.2V18.8C5 19.9201 5 20.4802 5.21799 20.908C5.40973 21.2843 5.71569 21.5903 6.09202 21.782C6.51984 22 7.07989 22 8.2 22ZM12.5 17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5C11.5 17.2239 11.7239 17 12 17C12.2761 17 12.5 17.2239 12.5 17.5Z",
@@ -2547,12 +2828,12 @@ var PhoneIcon = forwardRef55(
 );
 
 // src/icons/phoneCall.tsx
-import { forwardRef as forwardRef56 } from "react";
-import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
-var PhoneCallIcon = forwardRef56(
+import { forwardRef as forwardRef60 } from "react";
+import { jsx as jsx62, jsxs as jsxs42 } from "react/jsx-runtime";
+var PhoneCallIcon = forwardRef60(
   function PhoneCallIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs42(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2564,7 +2845,7 @@ var PhoneCallIcon = forwardRef56(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx58(
+          duotone && /* @__PURE__ */ jsx62(
             "path",
             {
               opacity: "0.12",
@@ -2572,7 +2853,7 @@ var PhoneCallIcon = forwardRef56(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx62(
             "path",
             {
               d: "M14.05 6C15.0268 6.19057 15.9244 6.66826 16.6281 7.37194C17.3318 8.07561 17.8095 8.97326 18 9.95M14.05 2C16.0793 2.22544 17.9716 3.13417 19.4163 4.57701C20.8609 6.01984 21.772 7.91101 22 9.94M10.227 13.8631C9.02543 12.6615 8.07664 11.3028 7.38064 9.85323C7.32078 9.72854 7.29084 9.66619 7.26785 9.5873C7.18612 9.30695 7.24482 8.96269 7.41483 8.72526C7.46268 8.65845 7.51983 8.60129 7.63414 8.48698C7.98375 8.13737 8.15855 7.96257 8.27284 7.78679C8.70383 7.1239 8.70383 6.26932 8.27284 5.60643C8.15855 5.43065 7.98375 5.25585 7.63414 4.90624L7.43927 4.71137C6.90783 4.17993 6.64211 3.91421 6.35673 3.76987C5.78917 3.4828 5.1189 3.4828 4.55134 3.76987C4.26596 3.91421 4.00024 4.17993 3.4688 4.71137L3.31116 4.86901C2.78154 5.39863 2.51673 5.66344 2.31448 6.02348C2.09006 6.42298 1.9287 7.04347 1.93006 7.5017C1.93129 7.91464 2.01139 8.19687 2.1716 8.76131C3.03257 11.7947 4.65705 14.6571 7.04503 17.045C9.43301 19.433 12.2954 21.0575 15.3288 21.9185C15.8932 22.0787 16.1754 22.1588 16.5884 22.16C17.0466 22.1614 17.6671 22 18.0666 21.7756C18.4266 21.5733 18.6914 21.3085 19.2211 20.7789L19.3787 20.6213C19.9101 20.0898 20.1759 19.8241 20.3202 19.5387C20.6073 18.9712 20.6073 18.3009 20.3202 17.7333C20.1759 17.448 19.9101 17.1822 19.3787 16.6508L19.1838 16.4559C18.8342 16.1063 18.6594 15.9315 18.4836 15.8172C17.8208 15.3862 16.9662 15.3862 16.3033 15.8172C16.1275 15.9315 15.9527 16.1063 15.6031 16.4559C15.4888 16.5702 15.4316 16.6274 15.3648 16.6752C15.1274 16.8453 14.7831 16.904 14.5028 16.8222C14.4239 16.7992 14.3615 16.7693 14.2368 16.7094C12.7872 16.0134 11.4286 15.0646 10.227 13.8631Z",
@@ -2589,12 +2870,12 @@ var PhoneCallIcon = forwardRef56(
 );
 
 // src/icons/pieChart.tsx
-import { forwardRef as forwardRef57 } from "react";
-import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
-var PieChartIcon = forwardRef57(
+import { forwardRef as forwardRef61 } from "react";
+import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
+var PieChartIcon = forwardRef61(
   function PieChartIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs43(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2606,7 +2887,7 @@ var PieChartIcon = forwardRef57(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx59(
+          duotone && /* @__PURE__ */ jsx63(
             "path",
             {
               opacity: "0.12",
@@ -2614,7 +2895,7 @@ var PieChartIcon = forwardRef57(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx63(
             "path",
             {
               d: "M17.2 14C17.477 14 17.6155 14 17.7278 14.0615C17.8204 14.1122 17.9065 14.2075 17.9478 14.3047C17.9978 14.4225 17.9852 14.5479 17.96 14.7987C17.8296 16.0987 17.3822 17.3514 16.6518 18.4445C15.7727 19.7601 14.5233 20.7855 13.0615 21.391C11.5997 21.9965 9.99113 22.155 8.43928 21.8463C6.88743 21.5376 5.46197 20.7757 4.34315 19.6568C3.22433 18.538 2.4624 17.1126 2.15372 15.5607C1.84504 14.0089 2.00347 12.4003 2.60897 10.9385C3.21447 9.47671 4.23985 8.22728 5.55544 7.34823C6.64856 6.61783 7.90125 6.17039 9.20131 6.03995C9.45207 6.01479 9.57745 6.00221 9.69528 6.0522C9.79249 6.09344 9.88776 6.17964 9.9385 6.27224C10 6.38449 10 6.52299 10 6.79999V13.2C10 13.48 10 13.62 10.0545 13.727C10.1024 13.8211 10.1789 13.8976 10.273 13.9455C10.38 14 10.52 14 10.8 14H17.2Z",
@@ -2625,7 +2906,7 @@ var PieChartIcon = forwardRef57(
             }
           ),
           ",",
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx63(
             "path",
             {
               d: "M14 2.79999C14 2.52298 14 2.38448 14.0615 2.27223C14.1122 2.17963 14.2075 2.09344 14.3047 2.0522C14.4225 2.0022 14.5479 2.01478 14.7987 2.03993C16.6271 2.22333 18.346 3.03229 19.6569 4.34313C20.9677 5.65398 21.7767 7.37289 21.9601 9.20129C21.9852 9.45206 21.9978 9.57744 21.9478 9.69527C21.9066 9.79248 21.8204 9.88774 21.7278 9.93848C21.6155 9.99998 21.477 9.99999 21.2 9.99999L14.8 9.99999C14.52 9.99999 14.38 9.99999 14.273 9.94549C14.1789 9.89755 14.1024 9.82106 14.0545 9.72698C14 9.62003 14 9.48001 14 9.19999V2.79999Z",
@@ -2641,13 +2922,42 @@ var PieChartIcon = forwardRef57(
   }
 );
 
+// src/icons/play.tsx
+import { forwardRef as forwardRef62 } from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var PlayIcon = forwardRef62(function PlayIcon2(_a, ref) {
+  var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+  return /* @__PURE__ */ jsx64(
+    "svg",
+    __spreadProps(__spreadValues({
+      ref,
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, other), {
+      children: /* @__PURE__ */ jsx64(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M10.6752 3.73624C10.6911 3.74687 10.7071 3.75753 10.7231 3.76823L24.7881 13.1449C25.1951 13.4161 25.5724 13.6676 25.8622 13.9014C26.1647 14.1453 26.5212 14.4835 26.7264 14.9783C26.9976 15.6323 26.9976 16.3673 26.7264 17.0214C26.5212 17.5162 26.1647 17.8544 25.8622 18.0983C25.5724 18.332 25.1951 18.5835 24.7882 18.8547L10.6752 28.2634C10.1778 28.5951 9.73045 28.8933 9.35089 29.099C8.97108 29.3049 8.44973 29.5401 7.84123 29.5037C7.06289 29.4573 6.34389 29.0725 5.87347 28.4506C5.50571 27.9645 5.41223 27.4002 5.37281 26.97C5.33342 26.5401 5.33346 26.0025 5.3335 25.4047L5.3335 6.65267C5.3335 6.63339 5.3335 6.61417 5.3335 6.59501C5.33346 5.99715 5.33342 5.45955 5.37281 5.02966C5.41223 4.59945 5.50571 4.03519 5.87347 3.54904C6.34389 2.9272 7.06289 2.5424 7.84123 2.49593C8.44973 2.4596 8.97108 2.69481 9.3509 2.90065C9.73044 3.10634 10.1777 3.40458 10.6752 3.73624Z",
+          fill: "currentColor"
+        }
+      )
+    })
+  );
+});
+
 // src/icons/playCircle.tsx
-import { forwardRef as forwardRef58 } from "react";
-import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
-var PlayCircleIcon = forwardRef58(
+import { forwardRef as forwardRef63 } from "react";
+import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
+var PlayCircleIcon = forwardRef63(
   function PlayCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs44(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2659,7 +2969,7 @@ var PlayCircleIcon = forwardRef58(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx60(
+          duotone && /* @__PURE__ */ jsx65(
             "path",
             {
               opacity: "0.12",
@@ -2667,7 +2977,7 @@ var PlayCircleIcon = forwardRef58(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx65(
             "path",
             {
               d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
@@ -2678,7 +2988,7 @@ var PlayCircleIcon = forwardRef58(
             }
           ),
           ",",
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx65(
             "path",
             {
               d: "M9.5 8.96533C9.5 8.48805 9.5 8.24941 9.59974 8.11618C9.68666 8.00007 9.81971 7.92744 9.96438 7.9171C10.1304 7.90525 10.3311 8.03429 10.7326 8.29239L15.4532 11.3271C15.8016 11.551 15.9758 11.663 16.0359 11.8054C16.0885 11.9298 16.0885 12.0702 16.0359 12.1946C15.9758 12.337 15.8016 12.449 15.4532 12.6729L10.7326 15.7076C10.3311 15.9657 10.1304 16.0948 9.96438 16.0829C9.81971 16.0726 9.68666 15.9999 9.59974 15.8838C9.5 15.7506 9.5 15.512 9.5 15.0347V8.96533Z",
@@ -2695,11 +3005,11 @@ var PlayCircleIcon = forwardRef58(
 );
 
 // src/icons/plus.tsx
-import { forwardRef as forwardRef59 } from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var PlusIcon = forwardRef59(function PlusIcon2(_a, ref) {
+import { forwardRef as forwardRef64 } from "react";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var PlusIcon = forwardRef64(function PlusIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx66(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -2710,7 +3020,7 @@ var PlusIcon = forwardRef59(function PlusIcon2(_a, ref) {
       xmlns: "http://www.w3.org/2000/svg",
       className
     }, other), {
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx66(
         "path",
         {
           d: "M12 5V19M5 12H19",
@@ -2725,12 +3035,12 @@ var PlusIcon = forwardRef59(function PlusIcon2(_a, ref) {
 });
 
 // src/icons/plusCircle.tsx
-import { forwardRef as forwardRef60 } from "react";
-import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
-var PlusCircleIcon = forwardRef60(
+import { forwardRef as forwardRef65 } from "react";
+import { jsx as jsx67, jsxs as jsxs45 } from "react/jsx-runtime";
+var PlusCircleIcon = forwardRef65(
   function PlusCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsxs45(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2742,7 +3052,7 @@ var PlusCircleIcon = forwardRef60(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx62(
+          duotone && /* @__PURE__ */ jsx67(
             "path",
             {
               opacity: "0.12",
@@ -2750,7 +3060,7 @@ var PlusCircleIcon = forwardRef60(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx67(
             "path",
             {
               d: "M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -2767,12 +3077,12 @@ var PlusCircleIcon = forwardRef60(
 );
 
 // src/icons/puzzlePiece.tsx
-import { forwardRef as forwardRef61 } from "react";
-import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
-var PuzzlePieceIcon = forwardRef61(
+import { forwardRef as forwardRef66 } from "react";
+import { jsx as jsx68, jsxs as jsxs46 } from "react/jsx-runtime";
+var PuzzlePieceIcon = forwardRef66(
   function PuzzlePieceIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsxs46(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2784,7 +3094,7 @@ var PuzzlePieceIcon = forwardRef61(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx63(
+          duotone && /* @__PURE__ */ jsx68(
             "path",
             {
               opacity: "0.12",
@@ -2792,7 +3102,7 @@ var PuzzlePieceIcon = forwardRef61(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx68(
             "path",
             {
               d: "M7.5 4.5C7.5 3.11929 8.61929 2 10 2C11.3807 2 12.5 3.11929 12.5 4.5V6H13.5C14.8978 6 15.5967 6 16.1481 6.22836C16.8831 6.53284 17.4672 7.11687 17.7716 7.85195C18 8.40326 18 9.10218 18 10.5H19.5C20.8807 10.5 22 11.6193 22 13C22 14.3807 20.8807 15.5 19.5 15.5H18V17.2C18 18.8802 18 19.7202 17.673 20.362C17.3854 20.9265 16.9265 21.3854 16.362 21.673C15.7202 22 14.8802 22 13.2 22H12.5V20.25C12.5 19.0074 11.4926 18 10.25 18C9.00736 18 8 19.0074 8 20.25V22H6.8C5.11984 22 4.27976 22 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8802 2 17.2V15.5H3.5C4.88071 15.5 6 14.3807 6 13C6 11.6193 4.88071 10.5 3.5 10.5H2C2 9.10218 2 8.40326 2.22836 7.85195C2.53284 7.11687 3.11687 6.53284 3.85195 6.22836C4.40326 6 5.10218 6 6.5 6H7.5V4.5Z",
@@ -2809,12 +3119,12 @@ var PuzzlePieceIcon = forwardRef61(
 );
 
 // src/icons/qrCode.tsx
-import { forwardRef as forwardRef62 } from "react";
-import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
-var QrCodeIcon = forwardRef62(
+import { forwardRef as forwardRef67 } from "react";
+import { jsx as jsx69, jsxs as jsxs47 } from "react/jsx-runtime";
+var QrCodeIcon = forwardRef67(
   function QrCodeIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs43(
+    return /* @__PURE__ */ jsxs47(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2826,7 +3136,7 @@ var QrCodeIcon = forwardRef62(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx64(
+          duotone && /* @__PURE__ */ jsx69(
             "path",
             {
               opacity: "0.4",
@@ -2837,7 +3147,7 @@ var QrCodeIcon = forwardRef62(
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx69(
             "path",
             {
               d: "M7 12H12V17M17.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V17.6C21 17.0399 21 16.7599 20.891 16.546C20.7951 16.3578 20.6422 16.2049 20.454 16.109C20.2401 16 19.9601 16 19.4 16H17.6C17.0399 16 16.7599 16 16.546 16.109C16.3578 16.2049 16.2049 16.3578 16.109 16.546C16 16.7599 16 17.0399 16 17.6V19.4C16 19.9601 16 20.2401 16.109 20.454C16.2049 20.6422 16.3578 20.7951 16.546 20.891C16.7599 21 17.0399 21 17.6 21ZM17.6 8H19.4C19.9601 8 20.2401 8 20.454 7.89101C20.6422 7.79513 20.7951 7.64215 20.891 7.45399C21 7.24008 21 6.96005 21 6.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3H17.6C17.0399 3 16.7599 3 16.546 3.10899C16.3578 3.20487 16.2049 3.35785 16.109 3.54601C16 3.75992 16 4.03995 16 4.6V6.4C16 6.96005 16 7.24008 16.109 7.45399C16.2049 7.64215 16.3578 7.79513 16.546 7.89101C16.7599 8 17.0399 8 17.6 8ZM4.6 8H6.4C6.96005 8 7.24008 8 7.45399 7.89101C7.64215 7.79513 7.79513 7.64215 7.89101 7.45399C8 7.24008 8 6.96005 8 6.4V4.6C8 4.03995 8 3.75992 7.89101 3.54601C7.79513 3.35785 7.64215 3.20487 7.45399 3.10899C7.24008 3 6.96005 3 6.4 3H4.6C4.03995 3 3.75992 3 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3 3.75992 3 4.03995 3 4.6V6.4C3 6.96005 3 7.24008 3.10899 7.45399C3.20487 7.64215 3.35785 7.79513 3.54601 7.89101C3.75992 8 4.03995 8 4.6 8Z",
@@ -2854,12 +3164,12 @@ var QrCodeIcon = forwardRef62(
 );
 
 // src/icons/receiptCheck.tsx
-import { forwardRef as forwardRef63 } from "react";
-import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
-var ReceiptCheckIcon = forwardRef63(
+import { forwardRef as forwardRef68 } from "react";
+import { jsx as jsx70, jsxs as jsxs48 } from "react/jsx-runtime";
+var ReceiptCheckIcon = forwardRef68(
   function ReceiptCheckIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs48(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2871,7 +3181,7 @@ var ReceiptCheckIcon = forwardRef63(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx65(
+          duotone && /* @__PURE__ */ jsx70(
             "path",
             {
               opacity: "0.12",
@@ -2879,7 +3189,7 @@ var ReceiptCheckIcon = forwardRef63(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx65(
+          /* @__PURE__ */ jsx70(
             "path",
             {
               d: "M9 10.5L11 12.5L15.5 8M20 21V7.8C20 6.11984 20 5.27976 19.673 4.63803C19.3854 4.07354 18.9265 3.6146 18.362 3.32698C17.7202 3 16.8802 3 15.2 3H8.8C7.11984 3 6.27976 3 5.63803 3.32698C5.07354 3.6146 4.6146 4.07354 4.32698 4.63803C4 5.27976 4 6.11984 4 7.8V21L6.75 19L9.25 21L12 19L14.75 21L17.25 19L20 21Z",
@@ -2896,12 +3206,12 @@ var ReceiptCheckIcon = forwardRef63(
 );
 
 // src/icons/recording.tsx
-import { forwardRef as forwardRef64 } from "react";
-import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
-var RecordingIcon = forwardRef64(
+import { forwardRef as forwardRef69 } from "react";
+import { jsx as jsx71, jsxs as jsxs49 } from "react/jsx-runtime";
+var RecordingIcon = forwardRef69(
   function RecordingIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs49(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2913,7 +3223,7 @@ var RecordingIcon = forwardRef64(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx66(
+          duotone && /* @__PURE__ */ jsx71(
             "path",
             {
               opacity: "0.12",
@@ -2921,7 +3231,7 @@ var RecordingIcon = forwardRef64(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx71(
             "path",
             {
               d: "M6 11V13M10 9V15M14 7V17M18 11V13M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -2938,12 +3248,12 @@ var RecordingIcon = forwardRef64(
 );
 
 // src/icons/refreshCcw.tsx
-import { forwardRef as forwardRef65 } from "react";
-import { jsx as jsx67 } from "react/jsx-runtime";
-var RefreshCcwIcon = forwardRef65(
+import { forwardRef as forwardRef70 } from "react";
+import { jsx as jsx72 } from "react/jsx-runtime";
+var RefreshCcwIcon = forwardRef70(
   function RefreshCcwIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx72(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2954,7 +3264,7 @@ var RefreshCcwIcon = forwardRef65(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx67(
+        children: /* @__PURE__ */ jsx72(
           "path",
           {
             d: "M2 10C2 10 4.00498 7.26822 5.63384 5.63824C7.26269 4.00827 9.5136 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.89691 21 4.43511 18.2543 3.35177 14.5M2 10V4M2 10H8",
@@ -2970,12 +3280,12 @@ var RefreshCcwIcon = forwardRef65(
 );
 
 // src/icons/refreshCw.tsx
-import { forwardRef as forwardRef66 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
-var RefreshCwIcon = forwardRef66(
+import { forwardRef as forwardRef71 } from "react";
+import { jsx as jsx73 } from "react/jsx-runtime";
+var RefreshCwIcon = forwardRef71(
   function RefreshCwIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsx73(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -2986,7 +3296,7 @@ var RefreshCwIcon = forwardRef66(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx68(
+        children: /* @__PURE__ */ jsx73(
           "path",
           {
             d: "M14 22C14 22 14.8492 21.8787 18.364 18.364C21.8787 14.8492 21.8787 9.15076 18.364 5.63604C17.1187 4.39077 15.5993 3.58669 14 3.22383M14 22H20M14 22L14 16M10 2.00019C10 2.00019 9.15076 2.12152 5.63604 5.63624C2.12132 9.15095 2.12132 14.8494 5.63604 18.3642C6.88131 19.6094 8.40072 20.4135 10 20.7764M10 2.00019L4 2M10 2.00019L10 8",
@@ -3002,12 +3312,12 @@ var RefreshCwIcon = forwardRef66(
 );
 
 // src/icons/rocket.tsx
-import { forwardRef as forwardRef67 } from "react";
-import { jsx as jsx69, jsxs as jsxs46 } from "react/jsx-runtime";
-var RocketIcon = forwardRef67(
+import { forwardRef as forwardRef72 } from "react";
+import { jsx as jsx74, jsxs as jsxs50 } from "react/jsx-runtime";
+var RocketIcon = forwardRef72(
   function RocketIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs46(
+    return /* @__PURE__ */ jsxs50(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3019,7 +3329,7 @@ var RocketIcon = forwardRef67(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx69(
+          duotone && /* @__PURE__ */ jsx74(
             "path",
             {
               opacity: "0.12",
@@ -3027,7 +3337,7 @@ var RocketIcon = forwardRef67(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx69(
+          /* @__PURE__ */ jsx74(
             "path",
             {
               d: "M12 15L9 12M12 15C13.3968 14.4687 14.7369 13.7987 16 13M12 15V20C12 20 15.03 19.45 16 18C17.08 16.38 16 13 16 13M9 12C9.53214 10.6194 10.2022 9.29607 11 8.05C12.1652 6.18699 13.7876 4.65305 15.713 3.5941C17.6384 2.53514 19.8027 1.98637 22 2C22 4.72 21.22 9.5 16 13M9 12H4C4 12 4.55 8.97 6 8C7.62 6.92 11 8 11 8M4.5 16.5C3 17.76 2.5 21.5 2.5 21.5C2.5 21.5 6.24 21 7.5 19.5C8.21 18.66 8.2 17.37 7.41 16.59C7.02131 16.219 6.50929 16.0046 5.97223 15.988C5.43516 15.9714 4.91088 16.1537 4.5 16.5Z",
@@ -3044,11 +3354,11 @@ var RocketIcon = forwardRef67(
 );
 
 // src/icons/save.tsx
-import { forwardRef as forwardRef68 } from "react";
-import { jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
-var SaveIcon = forwardRef68(function SaveIcon2(_a, ref) {
+import { forwardRef as forwardRef73 } from "react";
+import { jsx as jsx75, jsxs as jsxs51 } from "react/jsx-runtime";
+var SaveIcon = forwardRef73(function SaveIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs51(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -3060,15 +3370,15 @@ var SaveIcon = forwardRef68(function SaveIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsxs47("g", { opacity: "0.12", children: [
-          /* @__PURE__ */ jsx70(
+        duotone && /* @__PURE__ */ jsxs51("g", { opacity: "0.12", children: [
+          /* @__PURE__ */ jsx75(
             "path",
             {
               d: "M7 3H15.2929C15.7456 3 16.1799 3.17986 16.5 3.5C16.8201 3.82014 17 4.25435 17 4.70711V6.4C17 6.96005 17 7.24008 16.891 7.45399C16.7951 7.64215 16.6422 7.79513 16.454 7.89101C16.2401 8 15.9601 8 15.4 8H8.6C8.03995 8 7.75992 8 7.54601 7.89101C7.35785 7.79513 7.20487 7.64215 7.10899 7.45399C7 7.24008 7 6.96005 7 6.4V3Z",
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx70(
+          /* @__PURE__ */ jsx75(
             "path",
             {
               d: "M7 14.6C7 14.0399 7 13.7599 7.10899 13.546C7.20487 13.3578 7.35785 13.2049 7.54601 13.109C7.75992 13 8.03995 13 8.6 13H15.4C15.9601 13 16.2401 13 16.454 13.109C16.6422 13.2049 16.7951 13.3578 16.891 13.546C17 13.7599 17 14.0399 17 14.6V21H7V14.6Z",
@@ -3076,7 +3386,7 @@ var SaveIcon = forwardRef68(function SaveIcon2(_a, ref) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx70(
+        /* @__PURE__ */ jsx75(
           "path",
           {
             d: "M7 3V6.4C7 6.96005 7 7.24008 7.10899 7.45399C7.20487 7.64215 7.35785 7.79513 7.54601 7.89101C7.75992 8 8.03995 8 8.6 8H15.4C15.9601 8 16.2401 8 16.454 7.89101C16.6422 7.79513 16.7951 7.64215 16.891 7.45399C17 7.24008 17 6.96005 17 6.4V4M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z",
@@ -3092,12 +3402,12 @@ var SaveIcon = forwardRef68(function SaveIcon2(_a, ref) {
 });
 
 // src/icons/search.tsx
-import { forwardRef as forwardRef69 } from "react";
-import { jsx as jsx71, jsxs as jsxs48 } from "react/jsx-runtime";
-var SearchMdIcon = forwardRef69(
+import { forwardRef as forwardRef74 } from "react";
+import { jsx as jsx76, jsxs as jsxs52 } from "react/jsx-runtime";
+var SearchMdIcon = forwardRef74(
   function SearchMdIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs48(
+    return /* @__PURE__ */ jsxs52(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3109,7 +3419,7 @@ var SearchMdIcon = forwardRef69(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx71(
+          duotone && /* @__PURE__ */ jsx76(
             "path",
             {
               opacity: "0.12",
@@ -3117,7 +3427,7 @@ var SearchMdIcon = forwardRef69(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx76(
             "path",
             {
               d: "M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z",
@@ -3134,11 +3444,11 @@ var SearchMdIcon = forwardRef69(
 );
 
 // src/icons/send.tsx
-import { forwardRef as forwardRef70 } from "react";
-import { jsx as jsx72, jsxs as jsxs49 } from "react/jsx-runtime";
-var SendIcon = forwardRef70(function SendIcon2(_a, ref) {
+import { forwardRef as forwardRef75 } from "react";
+import { jsx as jsx77, jsxs as jsxs53 } from "react/jsx-runtime";
+var SendIcon = forwardRef75(function SendIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs53(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -3150,7 +3460,7 @@ var SendIcon = forwardRef70(function SendIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx72(
+        duotone && /* @__PURE__ */ jsx77(
           "path",
           {
             opacity: "0.12",
@@ -3158,7 +3468,7 @@ var SendIcon = forwardRef70(function SendIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx72(
+        /* @__PURE__ */ jsx77(
           "path",
           {
             d: "M10.5 12H5M4.91534 12.2915L2.58042 19.2662C2.39699 19.8141 2.30527 20.0881 2.37109 20.2568C2.42825 20.4033 2.55102 20.5144 2.7025 20.5567C2.87693 20.6054 3.1404 20.4868 3.66733 20.2497L20.3788 12.7295C20.8931 12.4981 21.1503 12.3823 21.2298 12.2216C21.2988 12.0819 21.2988 11.918 21.2298 11.7784C21.1503 11.6176 20.8931 11.5019 20.3788 11.2704L3.66151 3.7477C3.13616 3.51129 2.87349 3.39309 2.69923 3.44158C2.54789 3.48369 2.42514 3.59448 2.36778 3.74072C2.30174 3.90911 2.39247 4.18249 2.57395 4.72924L4.91599 11.7855C4.94716 11.8794 4.96275 11.9264 4.9689 11.9744C4.97436 12.017 4.9743 12.0601 4.96873 12.1027C4.96246 12.1507 4.94675 12.1976 4.91534 12.2915Z",
@@ -3174,12 +3484,12 @@ var SendIcon = forwardRef70(function SendIcon2(_a, ref) {
 });
 
 // src/icons/settings.tsx
-import { forwardRef as forwardRef71 } from "react";
-import { jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
-var SettingsIcon = forwardRef71(
+import { forwardRef as forwardRef76 } from "react";
+import { jsx as jsx78, jsxs as jsxs54 } from "react/jsx-runtime";
+var SettingsIcon = forwardRef76(
   function SettingsIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs50(
+    return /* @__PURE__ */ jsxs54(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3191,7 +3501,7 @@ var SettingsIcon = forwardRef71(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx73(
+          duotone && /* @__PURE__ */ jsx78(
             "path",
             {
               opacity: "0.12",
@@ -3201,7 +3511,7 @@ var SettingsIcon = forwardRef71(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx73(
+          /* @__PURE__ */ jsx78(
             "path",
             {
               d: "M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z",
@@ -3212,7 +3522,7 @@ var SettingsIcon = forwardRef71(
             }
           ),
           ",",
-          /* @__PURE__ */ jsx73(
+          /* @__PURE__ */ jsx78(
             "path",
             {
               d: "M18.7273 14.7273C18.6063 15.0015 18.5702 15.3056 18.6236 15.6005C18.6771 15.8954 18.8177 16.1676 19.0273 16.3818L19.0818 16.4364C19.2509 16.6052 19.385 16.8057 19.4765 17.0265C19.568 17.2472 19.6151 17.4838 19.6151 17.7227C19.6151 17.9617 19.568 18.1983 19.4765 18.419C19.385 18.6397 19.2509 18.8402 19.0818 19.0091C18.913 19.1781 18.7124 19.3122 18.4917 19.4037C18.271 19.4952 18.0344 19.5423 17.7955 19.5423C17.5565 19.5423 17.3199 19.4952 17.0992 19.4037C16.8785 19.3122 16.678 19.1781 16.5091 19.0091L16.4545 18.9545C16.2403 18.745 15.9682 18.6044 15.6733 18.5509C15.3784 18.4974 15.0742 18.5335 14.8 18.6545C14.5311 18.7698 14.3018 18.9611 14.1403 19.205C13.9788 19.4489 13.8921 19.7347 13.8909 20.0273V20.1818C13.8909 20.664 13.6994 21.1265 13.3584 21.4675C13.0174 21.8084 12.5549 22 12.0727 22C11.5905 22 11.1281 21.8084 10.7871 21.4675C10.4461 21.1265 10.2545 20.664 10.2545 20.1818V20.1C10.2475 19.7991 10.1501 19.5073 9.97501 19.2625C9.79991 19.0176 9.55521 18.8312 9.27273 18.7273C8.99853 18.6063 8.69437 18.5702 8.39947 18.6236C8.10456 18.6771 7.83244 18.8177 7.61818 19.0273L7.56364 19.0818C7.39478 19.2509 7.19425 19.385 6.97353 19.4765C6.7528 19.568 6.51621 19.6151 6.27727 19.6151C6.03834 19.6151 5.80174 19.568 5.58102 19.4765C5.36029 19.385 5.15977 19.2509 4.99091 19.0818C4.82186 18.913 4.68775 18.7124 4.59626 18.4917C4.50476 18.271 4.45766 18.0344 4.45766 17.7955C4.45766 17.5565 4.50476 17.3199 4.59626 17.0992C4.68775 16.8785 4.82186 16.678 4.99091 16.5091L5.04545 16.4545C5.25503 16.2403 5.39562 15.9682 5.4491 15.6733C5.50257 15.3784 5.46647 15.0742 5.34545 14.8C5.23022 14.5311 5.03887 14.3018 4.79497 14.1403C4.55107 13.9788 4.26526 13.8921 3.97273 13.8909H3.81818C3.33597 13.8909 2.87351 13.6994 2.53253 13.3584C2.19156 13.0174 2 12.5549 2 12.0727C2 11.5905 2.19156 11.1281 2.53253 10.7871C2.87351 10.4461 3.33597 10.2545 3.81818 10.2545H3.9C4.2009 10.2475 4.49273 10.1501 4.73754 9.97501C4.98236 9.79991 5.16883 9.55521 5.27273 9.27273C5.39374 8.99853 5.42984 8.69437 5.37637 8.39947C5.3229 8.10456 5.18231 7.83244 4.97273 7.61818L4.91818 7.56364C4.74913 7.39478 4.61503 7.19425 4.52353 6.97353C4.43203 6.7528 4.38493 6.51621 4.38493 6.27727C4.38493 6.03834 4.43203 5.80174 4.52353 5.58102C4.61503 5.36029 4.74913 5.15977 4.91818 4.99091C5.08704 4.82186 5.28757 4.68775 5.50829 4.59626C5.72901 4.50476 5.96561 4.45766 6.20455 4.45766C6.44348 4.45766 6.68008 4.50476 6.9008 4.59626C7.12152 4.68775 7.32205 4.82186 7.49091 4.99091L7.54545 5.04545C7.75971 5.25503 8.03183 5.39562 8.32674 5.4491C8.62164 5.50257 8.9258 5.46647 9.2 5.34545H9.27273C9.54161 5.23022 9.77093 5.03887 9.93245 4.79497C10.094 4.55107 10.1807 4.26526 10.1818 3.97273V3.81818C10.1818 3.33597 10.3734 2.87351 10.7144 2.53253C11.0553 2.19156 11.5178 2 12 2C12.4822 2 12.9447 2.19156 13.2856 2.53253C13.6266 2.87351 13.8182 3.33597 13.8182 3.81818V3.9C13.8193 4.19253 13.906 4.47834 14.0676 4.72224C14.2291 4.96614 14.4584 5.15749 14.7273 5.27273C15.0015 5.39374 15.3056 5.42984 15.6005 5.37637C15.8954 5.3229 16.1676 5.18231 16.3818 4.97273L16.4364 4.91818C16.6052 4.74913 16.8057 4.61503 17.0265 4.52353C17.2472 4.43203 17.4838 4.38493 17.7227 4.38493C17.9617 4.38493 18.1983 4.43203 18.419 4.52353C18.6397 4.61503 18.8402 4.74913 19.0091 4.91818C19.1781 5.08704 19.3122 5.28757 19.4037 5.50829C19.4952 5.72901 19.5423 5.96561 19.5423 6.20455C19.5423 6.44348 19.4952 6.68008 19.4037 6.9008C19.3122 7.12152 19.1781 7.32205 19.0091 7.49091L18.9545 7.54545C18.745 7.75971 18.6044 8.03183 18.5509 8.32674C18.4974 8.62164 18.5335 8.9258 18.6545 9.2V9.27273C18.7698 9.54161 18.9611 9.77093 19.205 9.93245C19.4489 10.094 19.7347 10.1807 20.0273 10.1818H20.1818C20.664 10.1818 21.1265 10.3734 21.4675 10.7144C21.8084 11.0553 22 11.5178 22 12C22 12.4822 21.8084 12.9447 21.4675 13.2856C21.1265 13.6266 20.664 13.8182 20.1818 13.8182H20.1C19.8075 13.8193 19.5217 13.906 19.2778 14.0676C19.0339 14.2291 18.8425 14.4584 18.7273 14.7273Z",
@@ -3229,12 +3539,12 @@ var SettingsIcon = forwardRef71(
 );
 
 // src/icons/share.tsx
-import { forwardRef as forwardRef72 } from "react";
-import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
-var ShareIcon = forwardRef72(
+import { forwardRef as forwardRef77 } from "react";
+import { jsx as jsx79, jsxs as jsxs55 } from "react/jsx-runtime";
+var ShareIcon = forwardRef77(
   function ShareIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs51(
+    return /* @__PURE__ */ jsxs55(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3246,22 +3556,22 @@ var ShareIcon = forwardRef72(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsxs51("g", { opacity: "0.12", children: [
-            /* @__PURE__ */ jsx74(
+          duotone && /* @__PURE__ */ jsxs55("g", { opacity: "0.12", children: [
+            /* @__PURE__ */ jsx79(
               "path",
               {
                 d: "M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z",
                 fill: "currentColor"
               }
             ),
-            /* @__PURE__ */ jsx74(
+            /* @__PURE__ */ jsx79(
               "path",
               {
                 d: "M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z",
                 fill: "currentColor"
               }
             ),
-            /* @__PURE__ */ jsx74(
+            /* @__PURE__ */ jsx79(
               "path",
               {
                 d: "M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z",
@@ -3269,7 +3579,7 @@ var ShareIcon = forwardRef72(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx74(
+          /* @__PURE__ */ jsx79(
             "path",
             {
               d: "M8.59 13.51L15.42 17.49M15.41 6.51L8.59 10.49M21 5C21 6.65685 19.6569 8 18 8C16.3431 8 15 6.65685 15 5C15 3.34315 16.3431 2 18 2C19.6569 2 21 3.34315 21 5ZM9 12C9 13.6569 7.65685 15 6 15C4.34315 15 3 13.6569 3 12C3 10.3431 4.34315 9 6 9C7.65685 9 9 10.3431 9 12ZM21 19C21 20.6569 19.6569 22 18 22C16.3431 22 15 20.6569 15 19C15 17.3431 16.3431 16 18 16C19.6569 16 21 17.3431 21 19Z",
@@ -3286,12 +3596,12 @@ var ShareIcon = forwardRef72(
 );
 
 // src/icons/shareArrow.tsx
-import { forwardRef as forwardRef73 } from "react";
-import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
-var ShareArrowIcon = forwardRef73(
+import { forwardRef as forwardRef78 } from "react";
+import { jsx as jsx80, jsxs as jsxs56 } from "react/jsx-runtime";
+var ShareArrowIcon = forwardRef78(
   function ShareArrowIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs52(
+    return /* @__PURE__ */ jsxs56(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3303,7 +3613,7 @@ var ShareArrowIcon = forwardRef73(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx75(
+          duotone && /* @__PURE__ */ jsx80(
             "path",
             {
               opacity: "0.12",
@@ -3311,7 +3621,7 @@ var ShareArrowIcon = forwardRef73(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsx80(
             "path",
             {
               d: "M21 9.00001L21 3.00001M21 3.00001H15M21 3.00001L12 12M10 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V14",
@@ -3328,12 +3638,12 @@ var ShareArrowIcon = forwardRef73(
 );
 
 // src/icons/skipBack.tsx
-import { forwardRef as forwardRef74 } from "react";
-import { jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
-var SkipBackIcon = forwardRef74(
+import { forwardRef as forwardRef79 } from "react";
+import { jsx as jsx81, jsxs as jsxs57 } from "react/jsx-runtime";
+var SkipBackIcon = forwardRef79(
   function SkipBackIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs53(
+    return /* @__PURE__ */ jsxs57(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3345,7 +3655,7 @@ var SkipBackIcon = forwardRef74(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx76(
+          duotone && /* @__PURE__ */ jsx81(
             "path",
             {
               opacity: "0.12",
@@ -3353,7 +3663,7 @@ var SkipBackIcon = forwardRef74(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx81(
             "path",
             {
               d: "M5 19V5M16.4005 6.07961L10.5617 10.7506C10.0279 11.1777 9.76097 11.3912 9.66433 11.6492C9.5796 11.8754 9.5796 12.1246 9.66433 12.3508C9.76097 12.6088 10.0279 12.8223 10.5617 13.2494L16.4005 17.9204C17.2327 18.5861 17.6487 18.919 17.9989 18.9194C18.3035 18.9197 18.5916 18.7812 18.7815 18.5432C19 18.2695 19 17.7367 19 16.671V7.329C19 6.2633 19 5.73045 18.7815 5.45677C18.5916 5.21876 18.3035 5.0803 17.9989 5.08063C17.6487 5.081 17.2327 5.41387 16.4005 6.07961Z",
@@ -3370,12 +3680,12 @@ var SkipBackIcon = forwardRef74(
 );
 
 // src/icons/skipForward.tsx
-import { forwardRef as forwardRef75 } from "react";
-import { jsx as jsx77, jsxs as jsxs54 } from "react/jsx-runtime";
-var SkipForwardIcon = forwardRef75(
+import { forwardRef as forwardRef80 } from "react";
+import { jsx as jsx82, jsxs as jsxs58 } from "react/jsx-runtime";
+var SkipForwardIcon = forwardRef80(
   function SkipForwardIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs54(
+    return /* @__PURE__ */ jsxs58(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3387,7 +3697,7 @@ var SkipForwardIcon = forwardRef75(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx77(
+          duotone && /* @__PURE__ */ jsx82(
             "path",
             {
               opacity: "0.12",
@@ -3395,7 +3705,7 @@ var SkipForwardIcon = forwardRef75(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx77(
+          /* @__PURE__ */ jsx82(
             "path",
             {
               d: "M19 5V19M7.59951 17.9204L13.4383 13.2494C13.9721 12.8223 14.239 12.6088 14.3357 12.3508C14.4204 12.1246 14.4204 11.8754 14.3357 11.6492C14.239 11.3912 13.9721 11.1777 13.4383 10.7506L7.59951 6.07961C6.76734 5.41387 6.35125 5.081 6.00108 5.08063C5.69654 5.0803 5.40845 5.21876 5.21846 5.45677C5 5.73045 5 6.2633 5 7.329V16.671C5 17.7367 5 18.2695 5.21846 18.5432C5.40845 18.7812 5.69654 18.9197 6.00108 18.9194C6.35125 18.919 6.76734 18.5861 7.59951 17.9204Z",
@@ -3411,13 +3721,52 @@ var SkipForwardIcon = forwardRef75(
   }
 );
 
+// src/icons/spinner.tsx
+import { forwardRef as forwardRef81 } from "react";
+import { jsx as jsx83, jsxs as jsxs59 } from "react/jsx-runtime";
+var SpinnerIcon = forwardRef81(
+  function SpinnerIcon2(_a, ref) {
+    var _b = _a, { size = 24, className = "animate-spin text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ jsxs59(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 25 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          /* @__PURE__ */ jsx83(
+            "path",
+            {
+              opacity: "0.12",
+              d: "M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.668 12C3.668 16.8778 7.62222 20.832 12.5 20.832C17.3778 20.832 21.332 16.8778 21.332 12C21.332 7.12222 17.3778 3.168 12.5 3.168C7.62222 3.168 3.668 7.12222 3.668 12Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx83(
+            "path",
+            {
+              d: "M22.916 12C23.7908 12 24.5108 12.7122 24.3956 13.5794C24.1641 15.323 23.5512 17.0011 22.5928 18.4912C21.3476 20.4272 19.5719 21.9643 17.4774 22.919C15.3829 23.8738 13.058 24.206 10.7799 23.8761C8.50179 23.5461 6.36667 22.5679 4.62912 21.0581C2.89158 19.5483 1.62494 17.5706 0.98025 15.3609C0.335563 13.1511 0.340035 10.8026 0.993131 8.5953C1.64623 6.38803 2.92039 4.41517 4.66367 2.91199C6.00545 1.75501 7.58156 0.913857 9.27571 0.441275C10.1184 0.206218 10.9241 0.819698 11.0462 1.68595C11.1683 2.55221 10.5575 3.33995 9.72694 3.61463C8.63201 3.97673 7.61359 4.55146 6.73246 5.31122C5.44941 6.41757 4.51162 7.86959 4.03094 9.49414C3.55027 11.1187 3.54697 12.8472 4.02146 14.4736C4.49595 16.1 5.4282 17.5555 6.70703 18.6668C7.98587 19.778 9.55732 20.4979 11.234 20.7408C12.9107 20.9836 14.6218 20.7391 16.1634 20.0364C17.7049 19.3337 19.0119 18.2024 19.9283 16.7775C20.5576 15.799 20.9846 14.7103 21.1903 13.5755C21.3464 12.7148 22.0412 12 22.916 12Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
 // src/icons/stars.tsx
-import { forwardRef as forwardRef76 } from "react";
-import { jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
-var StarsIcon = forwardRef76(
+import { forwardRef as forwardRef82 } from "react";
+import { jsx as jsx84, jsxs as jsxs60 } from "react/jsx-runtime";
+var StarsIcon = forwardRef82(
   function StarsIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs55(
+    return /* @__PURE__ */ jsxs60(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3429,7 +3778,7 @@ var StarsIcon = forwardRef76(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx78(
+          duotone && /* @__PURE__ */ jsx84(
             "path",
             {
               opacity: "0.12",
@@ -3437,7 +3786,7 @@ var StarsIcon = forwardRef76(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx78(
+          /* @__PURE__ */ jsx84(
             "path",
             {
               d: "M4.5 22V17M4.5 7V2M2 4.5H7M2 19.5H7M13 3L11.2658 7.50886C10.9838 8.24209 10.8428 8.60871 10.6235 8.91709C10.4292 9.1904 10.1904 9.42919 9.91709 9.62353C9.60871 9.8428 9.24209 9.98381 8.50886 10.2658L4 12L8.50886 13.7342C9.24209 14.0162 9.60871 14.1572 9.91709 14.3765C10.1904 14.5708 10.4292 14.8096 10.6235 15.0829C10.8428 15.3913 10.9838 15.7579 11.2658 16.4911L13 21L14.7342 16.4911C15.0162 15.7579 15.1572 15.3913 15.3765 15.0829C15.5708 14.8096 15.8096 14.5708 16.0829 14.3765C16.3913 14.1572 16.7579 14.0162 17.4911 13.7342L22 12L17.4911 10.2658C16.7579 9.98381 16.3913 9.8428 16.0829 9.62353C15.8096 9.42919 15.5708 9.1904 15.3765 8.91709C15.1572 8.60871 15.0162 8.24209 14.7342 7.50886L13 3Z",
@@ -3454,12 +3803,12 @@ var StarsIcon = forwardRef76(
 );
 
 // src/icons/trash.tsx
-import { forwardRef as forwardRef77 } from "react";
-import { jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
-var TrashIcon = forwardRef77(
+import { forwardRef as forwardRef83 } from "react";
+import { jsx as jsx85, jsxs as jsxs61 } from "react/jsx-runtime";
+var TrashIcon = forwardRef83(
   function TrashIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs56(
+    return /* @__PURE__ */ jsxs61(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3471,7 +3820,7 @@ var TrashIcon = forwardRef77(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx79(
+          duotone && /* @__PURE__ */ jsx85(
             "path",
             {
               opacity: "0.12",
@@ -3479,7 +3828,7 @@ var TrashIcon = forwardRef77(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx79(
+          /* @__PURE__ */ jsx85(
             "path",
             {
               d: "M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5",
@@ -3496,12 +3845,12 @@ var TrashIcon = forwardRef77(
 );
 
 // src/icons/trendDown.tsx
-import { forwardRef as forwardRef78 } from "react";
-import { jsx as jsx80 } from "react/jsx-runtime";
-var TrendDownIcon = forwardRef78(
+import { forwardRef as forwardRef84 } from "react";
+import { jsx as jsx86 } from "react/jsx-runtime";
+var TrendDownIcon = forwardRef84(
   function TrendDownIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx80(
+    return /* @__PURE__ */ jsx86(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3512,7 +3861,7 @@ var TrendDownIcon = forwardRef78(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx80(
+        children: /* @__PURE__ */ jsx86(
           "path",
           {
             d: "M22 17L14.1314 9.13137C13.7354 8.73535 13.5373 8.53735 13.309 8.46316C13.1082 8.3979 12.8918 8.3979 12.691 8.46316C12.4627 8.53735 12.2646 8.73535 11.8686 9.13137L9.13137 11.8686C8.73535 12.2646 8.53735 12.4627 8.30902 12.5368C8.10817 12.6021 7.89183 12.6021 7.69098 12.5368C7.46265 12.4627 7.26465 12.2646 6.86863 11.8686L2 7M22 17H15M22 17V10",
@@ -3528,12 +3877,12 @@ var TrendDownIcon = forwardRef78(
 );
 
 // src/icons/trendUp.tsx
-import { forwardRef as forwardRef79 } from "react";
-import { jsx as jsx81 } from "react/jsx-runtime";
-var TrendUpIcon = forwardRef79(
+import { forwardRef as forwardRef85 } from "react";
+import { jsx as jsx87 } from "react/jsx-runtime";
+var TrendUpIcon = forwardRef85(
   function TrendUpIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx81(
+    return /* @__PURE__ */ jsx87(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3544,7 +3893,7 @@ var TrendUpIcon = forwardRef79(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx81(
+        children: /* @__PURE__ */ jsx87(
           "path",
           {
             d: "M22 7L14.1314 14.8686C13.7354 15.2646 13.5373 15.4627 13.309 15.5368C13.1082 15.6021 12.8918 15.6021 12.691 15.5368C12.4627 15.4627 12.2646 15.2646 11.8686 14.8686L9.13137 12.1314C8.73535 11.7354 8.53735 11.5373 8.30902 11.4632C8.10817 11.3979 7.89183 11.3979 7.69098 11.4632C7.46265 11.5373 7.26465 11.7354 6.86863 12.1314L2 17M22 7H15M22 7V14",
@@ -3560,11 +3909,11 @@ var TrendUpIcon = forwardRef79(
 );
 
 // src/icons/user.tsx
-import { forwardRef as forwardRef80 } from "react";
-import { jsx as jsx82, jsxs as jsxs57 } from "react/jsx-runtime";
-var UserIcon = forwardRef80(function UserIcon2(_a, ref) {
+import { forwardRef as forwardRef86 } from "react";
+import { jsx as jsx88, jsxs as jsxs62 } from "react/jsx-runtime";
+var UserIcon = forwardRef86(function UserIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs62(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -3576,7 +3925,7 @@ var UserIcon = forwardRef80(function UserIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx82(
+        duotone && /* @__PURE__ */ jsx88(
           "path",
           {
             opacity: "0.12",
@@ -3584,7 +3933,7 @@ var UserIcon = forwardRef80(function UserIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx88(
           "path",
           {
             d: "M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z",
@@ -3600,12 +3949,12 @@ var UserIcon = forwardRef80(function UserIcon2(_a, ref) {
 });
 
 // src/icons/userPlus.tsx
-import { forwardRef as forwardRef81 } from "react";
-import { jsx as jsx83, jsxs as jsxs58 } from "react/jsx-runtime";
-var UserPlusIcon = forwardRef81(
+import { forwardRef as forwardRef87 } from "react";
+import { jsx as jsx89, jsxs as jsxs63 } from "react/jsx-runtime";
+var UserPlusIcon = forwardRef87(
   function UserPlusIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs58(
+    return /* @__PURE__ */ jsxs63(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3617,7 +3966,7 @@ var UserPlusIcon = forwardRef81(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx83(
+          duotone && /* @__PURE__ */ jsx89(
             "path",
             {
               opacity: "0.12",
@@ -3625,7 +3974,7 @@ var UserPlusIcon = forwardRef81(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx83(
+          /* @__PURE__ */ jsx89(
             "path",
             {
               d: "M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M19 21V15M16 18H22M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z",
@@ -3642,12 +3991,12 @@ var UserPlusIcon = forwardRef81(
 );
 
 // src/icons/userX.tsx
-import { forwardRef as forwardRef82 } from "react";
-import { jsx as jsx84, jsxs as jsxs59 } from "react/jsx-runtime";
-var UserXIcon = forwardRef82(
+import { forwardRef as forwardRef88 } from "react";
+import { jsx as jsx90, jsxs as jsxs64 } from "react/jsx-runtime";
+var UserXIcon = forwardRef88(
   function UserXIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs59(
+    return /* @__PURE__ */ jsxs64(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3659,7 +4008,7 @@ var UserXIcon = forwardRef82(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx84(
+          duotone && /* @__PURE__ */ jsx90(
             "path",
             {
               opacity: "0.12",
@@ -3667,7 +4016,7 @@ var UserXIcon = forwardRef82(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx84(
+          /* @__PURE__ */ jsx90(
             "path",
             {
               d: "M16.5 16L21.5 21M21.5 16L16.5 21M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z",
@@ -3684,12 +4033,12 @@ var UserXIcon = forwardRef82(
 );
 
 // src/icons/users.tsx
-import { forwardRef as forwardRef83 } from "react";
-import { jsx as jsx85, jsxs as jsxs60 } from "react/jsx-runtime";
-var UsersIcon = forwardRef83(
+import { forwardRef as forwardRef89 } from "react";
+import { jsx as jsx91, jsxs as jsxs65 } from "react/jsx-runtime";
+var UsersIcon = forwardRef89(
   function UsersIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs60(
+    return /* @__PURE__ */ jsxs65(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3701,7 +4050,7 @@ var UsersIcon = forwardRef83(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx85(
+          duotone && /* @__PURE__ */ jsx91(
             "path",
             {
               opacity: "0.12",
@@ -3709,7 +4058,7 @@ var UsersIcon = forwardRef83(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx85(
+          /* @__PURE__ */ jsx91(
             "path",
             {
               d: "M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z",
@@ -3726,12 +4075,12 @@ var UsersIcon = forwardRef83(
 );
 
 // src/icons/usersPlus.tsx
-import { forwardRef as forwardRef84 } from "react";
-import { jsx as jsx86, jsxs as jsxs61 } from "react/jsx-runtime";
-var UsersPlusIcon = forwardRef84(
+import { forwardRef as forwardRef90 } from "react";
+import { jsx as jsx92, jsxs as jsxs66 } from "react/jsx-runtime";
+var UsersPlusIcon = forwardRef90(
   function UsersPlusIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs61(
+    return /* @__PURE__ */ jsxs66(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3743,7 +4092,7 @@ var UsersPlusIcon = forwardRef84(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx86(
+          duotone && /* @__PURE__ */ jsx92(
             "path",
             {
               opacity: "0.12",
@@ -3751,7 +4100,7 @@ var UsersPlusIcon = forwardRef84(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx86(
+          /* @__PURE__ */ jsx92(
             "path",
             {
               d: "M19 21V15M16 18H22M12 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z",
@@ -3768,12 +4117,12 @@ var UsersPlusIcon = forwardRef84(
 );
 
 // src/icons/usersX.tsx
-import { forwardRef as forwardRef85 } from "react";
-import { jsx as jsx87, jsxs as jsxs62 } from "react/jsx-runtime";
-var UsersXIcon = forwardRef85(
+import { forwardRef as forwardRef91 } from "react";
+import { jsx as jsx93, jsxs as jsxs67 } from "react/jsx-runtime";
+var UsersXIcon = forwardRef91(
   function UsersXIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs62(
+    return /* @__PURE__ */ jsxs67(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3785,7 +4134,7 @@ var UsersXIcon = forwardRef85(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx87(
+          duotone && /* @__PURE__ */ jsx93(
             "path",
             {
               opacity: "0.12",
@@ -3793,7 +4142,7 @@ var UsersXIcon = forwardRef85(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx93(
             "path",
             {
               d: "M16.5 16L21.5 21M21.5 16L16.5 21M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M12 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z",
@@ -3810,12 +4159,12 @@ var UsersXIcon = forwardRef85(
 );
 
 // src/icons/videoRecorder.tsx
-import { forwardRef as forwardRef86 } from "react";
-import { jsx as jsx88, jsxs as jsxs63 } from "react/jsx-runtime";
-var VideoRecorderIcon = forwardRef86(
+import { forwardRef as forwardRef92 } from "react";
+import { jsx as jsx94, jsxs as jsxs68 } from "react/jsx-runtime";
+var VideoRecorderIcon = forwardRef92(
   function VideoRecorderIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsxs68(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3827,7 +4176,7 @@ var VideoRecorderIcon = forwardRef86(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx88(
+          duotone && /* @__PURE__ */ jsx94(
             "path",
             {
               opacity: "0.12",
@@ -3839,7 +4188,7 @@ var VideoRecorderIcon = forwardRef86(
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx88(
+          /* @__PURE__ */ jsx94(
             "path",
             {
               d: "M22 8.93137C22 8.32555 22 8.02265 21.8802 7.88238C21.7763 7.76068 21.6203 7.69609 21.4608 7.70865C21.2769 7.72312 21.0627 7.93731 20.6343 8.36569L17 12L20.6343 15.6343C21.0627 16.0627 21.2769 16.2769 21.4608 16.2914C21.6203 16.3039 21.7763 16.2393 21.8802 16.1176C22 15.9774 22 15.6744 22 15.0686V8.93137Z",
@@ -3850,7 +4199,7 @@ var VideoRecorderIcon = forwardRef86(
             }
           ),
           ",",
-          /* @__PURE__ */ jsx88(
+          /* @__PURE__ */ jsx94(
             "path",
             {
               d: "M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z",
@@ -3867,12 +4216,12 @@ var VideoRecorderIcon = forwardRef86(
 );
 
 // src/icons/videoRecorderOff.tsx
-import { forwardRef as forwardRef87 } from "react";
-import { jsx as jsx89, jsxs as jsxs64 } from "react/jsx-runtime";
-var VideoRecorderOffIcon = forwardRef87(
+import { forwardRef as forwardRef93 } from "react";
+import { jsx as jsx95, jsxs as jsxs69 } from "react/jsx-runtime";
+var VideoRecorderOffIcon = forwardRef93(
   function VideoRecorderOffIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs64(
+    return /* @__PURE__ */ jsxs69(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3884,7 +4233,7 @@ var VideoRecorderOffIcon = forwardRef87(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx89(
+          duotone && /* @__PURE__ */ jsx95(
             "path",
             {
               opacity: "0.12",
@@ -3896,7 +4245,7 @@ var VideoRecorderOffIcon = forwardRef87(
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx89(
+          /* @__PURE__ */ jsx95(
             "path",
             {
               d: "M5 5C3.34315 5 2 6.34315 2 8V16C2 17.6569 3.34315 19 5 19H14C15.3527 19 16.4962 18.1048 16.8705 16.8745M17 12L20.6343 8.36569C21.0627 7.93731 21.2769 7.72312 21.4608 7.70865C21.6203 7.69609 21.7763 7.76068 21.8802 7.88238C22 8.02265 22 8.32556 22 8.93137V15.0686C22 15.6744 22 15.9774 21.8802 16.1176C21.7763 16.2393 21.6203 16.3039 21.4608 16.2914C21.2769 16.2769 21.0627 16.0627 20.6343 15.6343L17 12ZM17 12V9.8C17 8.11984 17 7.27976 16.673 6.63803C16.3854 6.07354 15.9265 5.6146 15.362 5.32698C14.7202 5 13.8802 5 12.2 5H9.5M2 2L22 22",
@@ -3913,12 +4262,12 @@ var VideoRecorderOffIcon = forwardRef87(
 );
 
 // src/icons/volumeMax.tsx
-import { forwardRef as forwardRef88 } from "react";
-import { jsx as jsx90, jsxs as jsxs65 } from "react/jsx-runtime";
-var VolumeMaxIcon = forwardRef88(
+import { forwardRef as forwardRef94 } from "react";
+import { jsx as jsx96, jsxs as jsxs70 } from "react/jsx-runtime";
+var VolumeMaxIcon = forwardRef94(
   function VolumeMaxIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs65(
+    return /* @__PURE__ */ jsxs70(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3930,7 +4279,7 @@ var VolumeMaxIcon = forwardRef88(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx90(
+          duotone && /* @__PURE__ */ jsx96(
             "path",
             {
               opacity: "0.12",
@@ -3938,7 +4287,7 @@ var VolumeMaxIcon = forwardRef88(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx90(
+          /* @__PURE__ */ jsx96(
             "path",
             {
               d: "M19.7479 4.99999C21.1652 6.97023 22 9.38762 22 12C22 14.6124 21.1652 17.0298 19.7479 19M15.7453 7.99999C16.5362 9.13382 17 10.5127 17 12C17 13.4872 16.5362 14.8662 15.7453 16M9.63432 4.36567L6.46863 7.53136C6.29568 7.70431 6.2092 7.79079 6.10828 7.85263C6.01881 7.90746 5.92127 7.94786 5.81923 7.97236C5.70414 7.99999 5.58185 7.99999 5.33726 7.99999H3.6C3.03995 7.99999 2.75992 7.99999 2.54601 8.10898C2.35785 8.20485 2.20487 8.35784 2.10899 8.546C2 8.75991 2 9.03994 2 9.59999V14.4C2 14.96 2 15.2401 2.10899 15.454C2.20487 15.6421 2.35785 15.7951 2.54601 15.891C2.75992 16 3.03995 16 3.6 16H5.33726C5.58185 16 5.70414 16 5.81923 16.0276C5.92127 16.0521 6.01881 16.0925 6.10828 16.1473C6.2092 16.2092 6.29568 16.2957 6.46863 16.4686L9.63431 19.6343C10.0627 20.0627 10.2769 20.2769 10.4608 20.2913C10.6203 20.3039 10.7763 20.2393 10.8802 20.1176C11 19.9773 11 19.6744 11 19.0686V4.93136C11 4.32554 11 4.02264 10.8802 3.88237C10.7763 3.76067 10.6203 3.69608 10.4608 3.70864C10.2769 3.72311 10.0627 3.9373 9.63432 4.36567Z",
@@ -3955,12 +4304,12 @@ var VolumeMaxIcon = forwardRef88(
 );
 
 // src/icons/volumeX.tsx
-import { forwardRef as forwardRef89 } from "react";
-import { jsx as jsx91, jsxs as jsxs66 } from "react/jsx-runtime";
-var VolumeXIcon = forwardRef89(
+import { forwardRef as forwardRef95 } from "react";
+import { jsx as jsx97, jsxs as jsxs71 } from "react/jsx-runtime";
+var VolumeXIcon = forwardRef95(
   function VolumeXIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs66(
+    return /* @__PURE__ */ jsxs71(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -3972,7 +4321,7 @@ var VolumeXIcon = forwardRef89(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx91(
+          duotone && /* @__PURE__ */ jsx97(
             "path",
             {
               opacity: "0.12",
@@ -3980,7 +4329,7 @@ var VolumeXIcon = forwardRef89(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx91(
+          /* @__PURE__ */ jsx97(
             "path",
             {
               d: "M22 8.99999L16 15M16 8.99999L22 15M9.63432 4.36567L6.46863 7.53136C6.29568 7.70431 6.2092 7.79079 6.10828 7.85263C6.01881 7.90746 5.92127 7.94786 5.81923 7.97236C5.70414 7.99999 5.58185 7.99999 5.33726 7.99999H3.6C3.03995 7.99999 2.75992 7.99999 2.54601 8.10898C2.35785 8.20485 2.20487 8.35784 2.10899 8.546C2 8.75991 2 9.03994 2 9.59999V14.4C2 14.96 2 15.2401 2.10899 15.454C2.20487 15.6421 2.35785 15.7951 2.54601 15.891C2.75992 16 3.03995 16 3.6 16H5.33726C5.58185 16 5.70414 16 5.81923 16.0276C5.92127 16.0521 6.01881 16.0925 6.10828 16.1473C6.2092 16.2092 6.29568 16.2957 6.46863 16.4686L9.63431 19.6343C10.0627 20.0627 10.2769 20.2769 10.4608 20.2913C10.6203 20.3039 10.7763 20.2393 10.8802 20.1176C11 19.9773 11 19.6744 11 19.0686V4.93136C11 4.32554 11 4.02264 10.8802 3.88237C10.7763 3.76067 10.6203 3.69608 10.4608 3.70864C10.2769 3.72311 10.0627 3.9373 9.63432 4.36567Z",
@@ -3997,12 +4346,12 @@ var VolumeXIcon = forwardRef89(
 );
 
 // src/icons/xCircle.tsx
-import { forwardRef as forwardRef90 } from "react";
-import { jsx as jsx92, jsxs as jsxs67 } from "react/jsx-runtime";
-var XCircleIcon = forwardRef90(
+import { forwardRef as forwardRef96 } from "react";
+import { jsx as jsx98, jsxs as jsxs72 } from "react/jsx-runtime";
+var XCircleIcon = forwardRef96(
   function XCircleIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs67(
+    return /* @__PURE__ */ jsxs72(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -4014,7 +4363,7 @@ var XCircleIcon = forwardRef90(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx92(
+          duotone && /* @__PURE__ */ jsx98(
             "path",
             {
               opacity: "0.12",
@@ -4022,7 +4371,7 @@ var XCircleIcon = forwardRef90(
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx92(
+          /* @__PURE__ */ jsx98(
             "path",
             {
               d: "M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
@@ -4039,12 +4388,12 @@ var XCircleIcon = forwardRef90(
 );
 
 // src/icons/xClose.tsx
-import { forwardRef as forwardRef91 } from "react";
-import { jsx as jsx93 } from "react/jsx-runtime";
-var XCloseIcon = forwardRef91(
+import { forwardRef as forwardRef97 } from "react";
+import { jsx as jsx99 } from "react/jsx-runtime";
+var XCloseIcon = forwardRef97(
   function XCloseIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsx93(
+    return /* @__PURE__ */ jsx99(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -4055,7 +4404,7 @@ var XCloseIcon = forwardRef91(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx93(
+        children: /* @__PURE__ */ jsx99(
           "path",
           {
             d: "M18 6L6 18M6 6L18 18",
@@ -4071,7 +4420,7 @@ var XCloseIcon = forwardRef91(
 );
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 function Calendar(_a) {
   var _b = _a, {
     className,
@@ -4082,7 +4431,7 @@ function Calendar(_a) {
     "classNames",
     "showOutsideDays"
   ]);
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx100(
     DayPicker,
     __spreadValues({
       showOutsideDays,
@@ -4112,8 +4461,8 @@ function Calendar(_a) {
         day_hidden: "invisible"
       }, classNames),
       components: {
-        IconLeft: () => /* @__PURE__ */ jsx94(ChevronLeftIcon, { className: "h-3 w-3" }),
-        IconRight: () => /* @__PURE__ */ jsx94(ChevronRightIcon, { className: "h-3 w-3" })
+        IconLeft: () => /* @__PURE__ */ jsx100(ChevronLeftIcon, { className: "w-3 h-3" }),
+        IconRight: () => /* @__PURE__ */ jsx100(ChevronRightIcon, { className: "w-3 h-3" })
       }
     }, props)
   );
@@ -4123,10 +4472,10 @@ Calendar.displayName = "Calendar";
 // src/components/Checkbox/Checkbox.tsx
 import * as React5 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var Checkbox = React5.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx101(
     CheckboxPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
@@ -4135,16 +4484,171 @@ var Checkbox = React5.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ jsx95(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx95(CheckIcon, { size: 10, className: "text-white" }) })
+      children: /* @__PURE__ */ jsx101(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx101(CheckIcon, { size: 10, className: "text-white" }) })
     })
   );
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-// src/components/Dialog/Dialog.tsx
+// src/components/Command/Command.tsx
 import * as React6 from "react";
+import { useState } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { jsx as jsx102, jsxs as jsxs73 } from "react/jsx-runtime";
+var Command = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx102(
+    CommandPrimitive,
+    __spreadValues({
+      ref,
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-white",
+        className
+      )
+    }, props)
+  );
+});
+Command.displayName = CommandPrimitive.displayName;
+var CommandInput = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, value, onValueChange } = _b, props = __objRest(_b, ["className", "value", "onValueChange"]);
+  const [val, setVal] = useState(value);
+  const clearInput = () => {
+    setVal("");
+    onValueChange && onValueChange("");
+  };
+  return /* @__PURE__ */ jsxs73(
+    "div",
+    {
+      className: "flex items-center gap-2 px-3 border-b border-gray-200",
+      "cmdk-input-wrapper": "",
+      children: [
+        /* @__PURE__ */ jsx102(SearchMdIcon, { size: 16, className: "text-gray-900 shrink-0" }),
+        /* @__PURE__ */ jsx102(
+          CommandPrimitive.Input,
+          __spreadValues({
+            ref,
+            value: val,
+            className: cn(
+              "flex w-full py-2 rounded-md bg-transparent text-sm font-normal text-gray-1000 outline-none placeholder:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            onValueChange: (val2) => {
+              setVal(val2);
+              onValueChange && onValueChange(val2);
+            }
+          }, props)
+        ),
+        value !== "" && /* @__PURE__ */ jsx102(Button, { variant: "ghostGray", size: "xs", icon: true, className: "-mr-2", children: /* @__PURE__ */ jsx102(
+          XCloseIcon,
+          {
+            size: "16",
+            className: "text-gray-700",
+            onClick: () => {
+              clearInput();
+            }
+          }
+        ) })
+      ]
+    }
+  );
+});
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx102(
+    CommandPrimitive.List,
+    __spreadValues({
+      ref,
+      className: cn(
+        "max-h-[300px] overflow-y-auto p-1 overflow-x-hidden",
+        className
+      )
+    }, props)
+  );
+});
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React6.forwardRef((_a, ref) => {
+  var _b = _a, { children, title, description } = _b, props = __objRest(_b, ["children", "title", "description"]);
+  return /* @__PURE__ */ jsxs73(
+    CommandPrimitive.Empty,
+    __spreadProps(__spreadValues({
+      ref,
+      className: "flex flex-col gap-4 p-4 text-center"
+    }, props), {
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs73("div", { className: "flex flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsx102("span", { className: "text-sm font-medium text-gray-1000", children: title }),
+          description && /* @__PURE__ */ jsx102("span", { className: "text-sm font-normal text-gray-700", children: description })
+        ] }),
+        children && /* @__PURE__ */ jsx102("div", { children })
+      ]
+    })
+  );
+});
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandLoading = React6.forwardRef((_a, ref) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx102(CommandPrimitive.Loading, __spreadProps(__spreadValues({ ref }, props), { children: /* @__PURE__ */ jsx102("div", { className: "flex justify-center p-4 text-center", children: /* @__PURE__ */ jsx102(SpinnerIcon, { className: "text-blue-700 animate-spin" }) }) }));
+});
+CommandLoading.displayName = CommandPrimitive.Loading.displayName;
+var CommandGroup = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx102(
+    CommandPrimitive.Group,
+    __spreadValues({
+      ref,
+      className: cn(
+        "overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )
+    }, props)
+  );
+});
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx102(
+    CommandPrimitive.Separator,
+    __spreadValues({
+      ref,
+      className: cn("-mx-1 h-px bg-border", className)
+    }, props)
+  );
+});
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { icon, checkbox, className, checked, children, description } = _b, props = __objRest(_b, ["icon", "checkbox", "className", "checked", "children", "description"]);
+    return /* @__PURE__ */ jsxs73(
+      CommandPrimitive.Item,
+      __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",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-2", children: [
+            checkbox && /* @__PURE__ */ jsx102(Checkbox, { checked }),
+            icon && React6.cloneElement(icon, {
+              size: 16,
+              className: cn("flex-shrink-0", icon.props.className)
+            }),
+            children
+          ] }),
+          description && /* @__PURE__ */ jsx102("div", { className: "text-xs text-gray-700", children: description })
+        ]
+      })
+    );
+  }
+);
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+// src/components/Dialog/Dialog.tsx
+import * as React7 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx96, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs74 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = (_a) => {
@@ -4153,12 +4657,12 @@ var DialogPortal = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx96(DialogPrimitive.Portal, __spreadValues({ className: cn(className) }, props));
+  return /* @__PURE__ */ jsx103(DialogPrimitive.Portal, __spreadValues({ className: cn(className) }, props));
 };
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React6.forwardRef((_a, ref) => {
+var DialogOverlay = React7.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx103(
     DialogPrimitive.Overlay,
     __spreadValues({
       ref,
@@ -4170,11 +4674,11 @@ var DialogOverlay = React6.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React6.forwardRef((_a, ref) => {
+var DialogContent = React7.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs68(DialogPortal, { children: [
-    /* @__PURE__ */ jsx96(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs74(DialogPortal, { children: [
+    /* @__PURE__ */ jsx103(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs74(
       DialogPrimitive.Content,
       __spreadProps(__spreadValues({
         ref,
@@ -4185,7 +4689,7 @@ var DialogContent = React6.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxs68(
+          /* @__PURE__ */ jsxs74(
             DialogPrimitive.Close,
             {
               className: cn(
@@ -4194,8 +4698,8 @@ var DialogContent = React6.forwardRef((_a, ref) => {
                 "absolute right-6 top-6"
               ),
               children: [
-                /* @__PURE__ */ jsx96(XCloseIcon, { className: "h-3 w-3" }),
-                /* @__PURE__ */ jsx96("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx103(XCloseIcon, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx103("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -4211,7 +4715,7 @@ var DialogHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx103(
     "div",
     __spreadValues({
       className: cn(
@@ -4228,7 +4732,7 @@ var DialogFooter = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx103(
     "div",
     __spreadValues({
       className: cn(
@@ -4239,9 +4743,9 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React6.forwardRef((_a, ref) => {
+var DialogTitle = React7.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx103(
     DialogPrimitive.Title,
     __spreadValues({
       ref,
@@ -4250,9 +4754,9 @@ var DialogTitle = React6.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React6.forwardRef((_a, ref) => {
+var DialogDescription = React7.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx103(
     DialogPrimitive.Description,
     __spreadValues({
       ref,
@@ -4263,9 +4767,9 @@ var DialogDescription = React6.forwardRef((_a, ref) => {
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/DropdownMenu/DropdownMenu.tsx
+import React8 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import React7 from "react";
-import { jsx as jsx97, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs75 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuItemBase = ({
   icon,
@@ -4277,7 +4781,7 @@ var DropdownMenuItemBase = ({
   description,
   hasSubNav
 }) => {
-  return /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs75(
     "div",
     {
       className: cn(
@@ -4286,9 +4790,9 @@ var DropdownMenuItemBase = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs69("div", { className: "flex items-center gap-2", children: [
-          checkbox && /* @__PURE__ */ jsx97(Checkbox, { checked }),
-          icon && React7.cloneElement(icon, {
+        /* @__PURE__ */ jsxs75("div", { className: "flex items-center gap-2", children: [
+          checkbox && /* @__PURE__ */ jsx104(Checkbox, { checked }),
+          icon && React8.cloneElement(icon, {
             size: 16,
             className: cn(
               "flex-shrink-0",
@@ -4296,15 +4800,15 @@ var DropdownMenuItemBase = ({
               icon.props.className
             )
           }),
-          children,
-          hasSubNav && /* @__PURE__ */ jsx97("div", { className: "inline-flex items-center justify-end grow", children: /* @__PURE__ */ jsx97(ChevronRightIcon, { size: 16, className: "text-gray-1000" }) })
+          /* @__PURE__ */ jsx104("span", { className: "flex gap-2 grow", children }),
+          hasSubNav && /* @__PURE__ */ jsx104("div", { className: "inline-flex items-center justify-end", children: /* @__PURE__ */ jsx104(ChevronRightIcon, { size: 16, className: "text-gray-1000" }) })
         ] }),
-        description && /* @__PURE__ */ jsx97("div", { className: "text-xs text-gray-700", children: description })
+        description && /* @__PURE__ */ jsx104("div", { className: "text-xs text-gray-700", children: description })
       ]
     }
   );
 };
-var DropdownMenuCheckboxItem = React7.forwardRef(
+var DropdownMenuCheckboxItem = React8.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, checked, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "checked", "icon", "description", "destructive"]);
     const extraProps = {
@@ -4314,20 +4818,20 @@ var DropdownMenuCheckboxItem = React7.forwardRef(
       checked,
       className
     };
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx104(
       DropdownMenuPrimitive.CheckboxItem,
       __spreadProps(__spreadValues({
         checked
       }, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ jsx97(DropdownMenuItemBase, __spreadProps(__spreadValues({ checkbox: true }, extraProps), { children }))
+        children: /* @__PURE__ */ jsx104(DropdownMenuItemBase, __spreadProps(__spreadValues({ checkbox: true }, extraProps), { children }))
       })
     );
   }
 );
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuContent = React7.forwardRef(
+var DropdownMenuContent = React8.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, {
       children,
@@ -4342,7 +4846,7 @@ var DropdownMenuContent = React7.forwardRef(
       "sideOffset",
       "align"
     ]);
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx104(
       DropdownMenuPrimitive.Content,
       __spreadProps(__spreadValues({
         className: cn(
@@ -4361,7 +4865,7 @@ var DropdownMenuContent = React7.forwardRef(
 );
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
-var DropdownMenuItem = React7.forwardRef(
+var DropdownMenuItem = React8.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "icon", "description", "destructive"]);
     const extraProps = {
@@ -4370,20 +4874,20 @@ var DropdownMenuItem = React7.forwardRef(
       icon,
       className
     };
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx104(
       DropdownMenuPrimitive.Item,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ jsx97(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
+        children: /* @__PURE__ */ jsx104(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
   }
 );
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = React7.forwardRef((_a, forwardedRef) => {
+var DropdownMenuLabel = React8.forwardRef((_a, forwardedRef) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx104(
     DropdownMenuPrimitive.Label,
     __spreadProps(__spreadValues({
       className: cn(
@@ -4398,7 +4902,7 @@ var DropdownMenuLabel = React7.forwardRef((_a, forwardedRef) => {
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuRadioItem = React7.forwardRef(
+var DropdownMenuRadioItem = React8.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "icon", "description", "destructive"]);
     const extraProps = {
@@ -4407,20 +4911,20 @@ var DropdownMenuRadioItem = React7.forwardRef(
       icon,
       className
     };
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx104(
       DropdownMenuPrimitive.RadioItem,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ jsx97(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
+        children: /* @__PURE__ */ jsx104(DropdownMenuItemBase, __spreadProps(__spreadValues({}, extraProps), { children }))
       })
     );
   }
 );
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuSeparator = React7.forwardRef((_a, forwardedRef) => {
+var DropdownMenuSeparator = React8.forwardRef((_a, forwardedRef) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx104(
     DropdownMenuPrimitive.Separator,
     __spreadProps(__spreadValues({
       className: cn("my-1 border-b border-gray-200", className)
@@ -4431,9 +4935,9 @@ var DropdownMenuSeparator = React7.forwardRef((_a, forwardedRef) => {
 });
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuSubContent = React7.forwardRef((_a, forwardedRef) => {
+var DropdownMenuSubContent = React8.forwardRef((_a, forwardedRef) => {
   var _b = _a, { children, className, sideOffset = 8 } = _b, props = __objRest(_b, ["children", "className", "sideOffset"]);
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx104(
     DropdownMenuPrimitive.SubContent,
     __spreadProps(__spreadValues({
       className: cn(
@@ -4448,7 +4952,7 @@ var DropdownMenuSubContent = React7.forwardRef((_a, forwardedRef) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuSubTrigger = React7.forwardRef(
+var DropdownMenuSubTrigger = React8.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { className, children, icon, description, destructive } = _b, props = __objRest(_b, ["className", "children", "icon", "description", "destructive"]);
     const extraProps = {
@@ -4457,12 +4961,12 @@ var DropdownMenuSubTrigger = React7.forwardRef(
       icon,
       className
     };
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx104(
       DropdownMenuPrimitive.SubTrigger,
       __spreadProps(__spreadValues({}, props), {
         ref: forwardedRef,
         className: "outline-none select-none group",
-        children: /* @__PURE__ */ jsx97(DropdownMenuItemBase, __spreadProps(__spreadValues({ hasSubNav: true }, extraProps), { children }))
+        children: /* @__PURE__ */ jsx104(DropdownMenuItemBase, __spreadProps(__spreadValues({ hasSubNav: true }, extraProps), { children }))
       })
     );
   }
@@ -4470,8 +4974,25 @@ var DropdownMenuSubTrigger = React7.forwardRef(
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
+// src/components/FilterButton/FilterButton.tsx
+import React9 from "react";
+import { Fragment, jsx as jsx105, jsxs as jsxs76 } from "react/jsx-runtime";
+var FilterButton = React9.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { selectedCount, children, size = "sm", variant = "outline" } = _b, props = __objRest(_b, ["selectedCount", "children", "size", "variant"]);
+    return /* @__PURE__ */ jsxs76(Button, __spreadProps(__spreadValues({ ref, variant, size }, props), { children: [
+      children,
+      selectedCount !== void 0 && selectedCount > 0 && /* @__PURE__ */ jsxs76(Fragment, { children: [
+        /* @__PURE__ */ jsx105("span", { className: "h-4 border-l border-gray-200" }),
+        /* @__PURE__ */ jsx105(Badge, { variant: "fill", color: "blue", children: selectedCount })
+      ] })
+    ] }));
+  }
+);
+FilterButton.displayName = "FilterButton";
+
 // src/components/Form/Form.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import {
   Controller,
@@ -4480,12 +5001,12 @@ import {
 } from "react-hook-form";
 
 // src/components/Label/Label.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx98 } from "react/jsx-runtime";
-var Label2 = React8.forwardRef((_a, ref) => {
+import { jsx as jsx106 } from "react/jsx-runtime";
+var Label2 = React10.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx106(
     LabelPrimitive.Root,
     __spreadValues({
       ref,
@@ -4499,24 +5020,24 @@ var Label2 = React8.forwardRef((_a, ref) => {
 Label2.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/Form/Form.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var Form = FormProvider;
-var FormFieldContext = React9.createContext(
+var FormFieldContext = React11.createContext(
   {}
 );
 var FormField = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx107(
     FormFieldContext.Provider,
     {
       value: { name: props.name, isDisabled: props.disabled },
-      children: /* @__PURE__ */ jsx99(Controller, __spreadValues({}, props))
+      children: /* @__PURE__ */ jsx107(Controller, __spreadValues({}, props))
     }
   );
 };
 var useFormField = () => {
-  const fieldContext = React9.useContext(FormFieldContext);
-  const itemContext = React9.useContext(FormItemContext);
+  const fieldContext = React11.useContext(FormFieldContext);
+  const itemContext = React11.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
@@ -4532,13 +5053,13 @@ var useFormField = () => {
     formMessageId: `${id}-form-item-message`
   }, fieldState);
 };
-var FormItemContext = React9.createContext(
+var FormItemContext = React11.createContext(
   {}
 );
-var FormItem = React9.forwardRef((_a, ref) => {
+var FormItem = React11.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const id = React9.useId();
-  return /* @__PURE__ */ jsx99(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx99(
+  const id = React11.useId();
+  return /* @__PURE__ */ jsx107(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx107(
     "div",
     __spreadValues({
       ref,
@@ -4547,10 +5068,10 @@ var FormItem = React9.forwardRef((_a, ref) => {
   ) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React9.forwardRef((_a, ref) => {
+var FormLabel = React11.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { isDisabled, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx107(
     Label2,
     __spreadValues({
       ref,
@@ -4560,10 +5081,10 @@ var FormLabel = React9.forwardRef((_a, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React9.forwardRef((_a, ref) => {
+var FormControl = React11.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   const { error, isDisabled, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx107(
     Slot2,
     __spreadValues({
       ref,
@@ -4576,10 +5097,10 @@ var FormControl = React9.forwardRef((_a, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React9.forwardRef((_a, ref) => {
+var FormDescription = React11.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { formDescriptionId, isDisabled } = useFormField();
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx107(
     "p",
     __spreadValues({
       ref,
@@ -4593,12 +5114,12 @@ var FormDescription = React9.forwardRef((_a, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React9.forwardRef((_a, ref) => {
+var FormMessage = React11.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__ */ jsx99(
+  return /* @__PURE__ */ jsx107(
     "p",
     __spreadProps(__spreadValues({
       ref,
@@ -4617,10 +5138,10 @@ var FormMessage = React9.forwardRef((_a, ref) => {
 FormMessage.displayName = "FormMessage";
 
 // src/components/Input/Input.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { jsx as jsx100, jsxs as jsxs70 } from "react/jsx-runtime";
-var Input = React10.forwardRef(
+import { jsx as jsx108, jsxs as jsxs77 } from "react/jsx-runtime";
+var Input = React12.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4638,8 +5159,8 @@ var Input = React10.forwardRef(
       "suffixEnchancer"
     ]);
     const isDisabled = !!props["data-is-disabled"] || disabled;
-    return /* @__PURE__ */ jsxs70("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxs70(
+    return /* @__PURE__ */ jsxs77("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs77(
         "div",
         {
           className: cn(
@@ -4651,7 +5172,7 @@ var Input = React10.forwardRef(
             className
           ),
           children: [
-            prefixEnchancer && /* @__PURE__ */ jsx100(
+            prefixEnchancer && /* @__PURE__ */ jsx108(
               Slot3,
               {
                 className: cn(
@@ -4661,7 +5182,7 @@ var Input = React10.forwardRef(
                 children: prefixEnchancer
               }
             ),
-            /* @__PURE__ */ jsx100(
+            /* @__PURE__ */ jsx108(
               "input",
               __spreadProps(__spreadValues({}, props), {
                 disabled: isDisabled,
@@ -4670,7 +5191,7 @@ var Input = React10.forwardRef(
                 ref
               })
             ),
-            suffixEnchancer && /* @__PURE__ */ jsx100(
+            suffixEnchancer && /* @__PURE__ */ jsx108(
               Slot3,
               {
                 className: cn(
@@ -4683,7 +5204,7 @@ var Input = React10.forwardRef(
           ]
         }
       ),
-      button && React10.cloneElement(button, {
+      button && React12.cloneElement(button, {
         size: "sm",
         disabled: isDisabled,
         className: cn("flex-shrink-0", button.props.className)
@@ -4693,15 +5214,86 @@ var Input = React10.forwardRef(
 );
 Input.displayName = "Input";
 
+// src/components/Pagination/Pagination.tsx
+import { jsx as jsx109, jsxs as jsxs78 } from "react/jsx-runtime";
+var PaginationPageChoice = /* @__PURE__ */ ((PaginationPageChoice2) => {
+  PaginationPageChoice2["FIRST"] = "FIRST";
+  PaginationPageChoice2["PREVIOUS"] = "PREVIOUS";
+  PaginationPageChoice2["NEXT"] = "NEXT";
+  PaginationPageChoice2["LAST"] = "LAST";
+  return PaginationPageChoice2;
+})(PaginationPageChoice || {});
+var Pagination = ({
+  totalRowsCaption,
+  nextPageAvailable,
+  previousPageAvailable,
+  currentPageCation,
+  onPageChange,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs78("div", { className: cn("flex items-center justify-between px-2", className), children: [
+    totalRowsCaption && /* @__PURE__ */ jsx109("div", { className: "flex-1 text-sm text-gray-700", children: totalRowsCaption }),
+    /* @__PURE__ */ jsxs78("div", { className: "flex items-center gap-4", children: [
+      currentPageCation && /* @__PURE__ */ jsx109("div", { className: "flex items-center justify-center text-sm font-medium text-gray-1000", children: currentPageCation }),
+      /* @__PURE__ */ jsxs78("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx109(
+          Button,
+          {
+            variant: "outline",
+            icon: true,
+            size: "sm",
+            onClick: () => onPageChange("FIRST" /* FIRST */),
+            disabled: !previousPageAvailable,
+            children: /* @__PURE__ */ jsx109(ChevronLeftDoubleIcon, { size: "16" })
+          }
+        ),
+        /* @__PURE__ */ jsx109(
+          Button,
+          {
+            variant: "outline",
+            icon: true,
+            size: "sm",
+            onClick: () => onPageChange("PREVIOUS" /* PREVIOUS */),
+            disabled: !previousPageAvailable,
+            children: /* @__PURE__ */ jsx109(ChevronLeftIcon, { size: "16" })
+          }
+        ),
+        /* @__PURE__ */ jsx109(
+          Button,
+          {
+            variant: "outline",
+            icon: true,
+            size: "sm",
+            onClick: () => onPageChange("NEXT" /* NEXT */),
+            disabled: !nextPageAvailable,
+            children: /* @__PURE__ */ jsx109(ChevronRightIcon, { size: "16" })
+          }
+        ),
+        /* @__PURE__ */ jsx109(
+          Button,
+          {
+            variant: "outline",
+            icon: true,
+            size: "sm",
+            onClick: () => onPageChange("LAST" /* LAST */),
+            disabled: !nextPageAvailable,
+            children: /* @__PURE__ */ jsx109(ChevronRightDoubleIcon, { size: "16" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
 // src/components/Popover/Popover.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React11.forwardRef((_a, ref) => {
+var PopoverContent = React13.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
-  return /* @__PURE__ */ jsx101(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx110(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx110(
     PopoverPrimitive.Content,
     __spreadValues({
       ref,
@@ -4717,16 +5309,16 @@ var PopoverContent = React11.forwardRef((_a, ref) => {
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/Select/Select.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { jsx as jsx102, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs79 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React12.forwardRef((_a, ref) => {
+var SelectTrigger = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   const isDisabled = props["data-is-disabled"];
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs79(
     SelectPrimitive.Trigger,
     __spreadProps(__spreadValues({
       ref,
@@ -4743,15 +5335,15 @@ var SelectTrigger = React12.forwardRef((_a, ref) => {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsx102(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx102(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
+        /* @__PURE__ */ jsx111(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx111(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
       ]
     })
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React12.forwardRef((_a, ref) => {
+var SelectContent = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
-  return /* @__PURE__ */ jsx102(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx111(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx111(
     SelectPrimitive.Content,
     __spreadProps(__spreadValues({
       ref,
@@ -4762,7 +5354,7 @@ var SelectContent = React12.forwardRef((_a, ref) => {
       ),
       position
     }, props), {
-      children: /* @__PURE__ */ jsx102(
+      children: /* @__PURE__ */ jsx111(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -4776,9 +5368,9 @@ var SelectContent = React12.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React12.forwardRef((_a, ref) => {
+var SelectLabel = React14.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx111(
     SelectPrimitive.Label,
     __spreadValues({
       ref,
@@ -4787,9 +5379,9 @@ var SelectLabel = React12.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React12.forwardRef((_a, ref) => {
+var SelectItem = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx111(
     SelectPrimitive.Item,
     __spreadProps(__spreadValues({
       ref,
@@ -4798,14 +5390,14 @@ var SelectItem = React12.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx102(SelectPrimitive.ItemText, { children })
+      children: /* @__PURE__ */ jsx111(SelectPrimitive.ItemText, { children })
     })
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React12.forwardRef((_a, ref) => {
+var SelectSeparator = React14.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx111(
     SelectPrimitive.Separator,
     __spreadValues({
       ref,
@@ -4816,12 +5408,12 @@ var SelectSeparator = React12.forwardRef((_a, ref) => {
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/Switch/Switch.tsx
-import * as React13 from "react";
+import * as React15 from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { jsx as jsx103 } from "react/jsx-runtime";
-var Switch = React13.forwardRef((_a, ref) => {
+import { jsx as jsx112 } from "react/jsx-runtime";
+var Switch = React15.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx112(
     SwitchPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
@@ -4830,20 +5422,119 @@ var Switch = React13.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ jsx103(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__ */ jsx112(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
+import * as React16 from "react";
+import { jsx as jsx113, jsxs as jsxs80 } from "react/jsx-runtime";
+var Table = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx113("div", { className: "w-full overflow-auto border rounded-lg", children: /* @__PURE__ */ jsx113(
+    "table",
+    __spreadValues({
+      ref,
+      className: cn("w-full caption-bottom text-xs", className)
+    }, props)
+  ) });
+});
+Table.displayName = "Table";
+var TableHeader = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx113(
+    "thead",
+    __spreadValues({
+      ref,
+      className: cn("[&_tr]:border-b bg-gray-50 text-sm", className)
+    }, props)
+  );
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx113(
+    "tbody",
+    __spreadValues({
+      ref,
+      className: cn(
+        "[&_tr:last-child]:border-0 [&_tr:hover]:bg-gray-25 [&_tr:active]:bg-gray-50 [&_tr:hover:active]:bg-gray-50",
+        className
+      )
+    }, props)
+  );
+});
+TableBody.displayName = "TableBody";
+var TableRow = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx113(
+    "tr",
+    __spreadValues({
+      ref,
+      className: cn(
+        "border-b transition-colors data-[state=selected]:bg-gray-50",
+        className
+      )
+    }, props)
+  );
+});
+TableRow.displayName = "TableRow";
+var TableHead = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx113(
+    "th",
+    __spreadValues({
+      ref,
+      className: cn(
+        "h-14 p-4 text-left align-middle font-medium text-gray-900 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )
+    }, props)
+  );
+});
+TableHead.displayName = "TableHead";
+var TableCell = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx113(
+    "td",
+    __spreadValues({
+      ref,
+      className: cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )
+    }, props)
+  );
+});
+TableCell.displayName = "TableCell";
+var TableEmpty = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className, title, description, children } = _b, props = __objRest(_b, ["className", "title", "description", "children"]);
+  return /* @__PURE__ */ jsxs80(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("flex flex-col gap-6 items-center py-12", className)
+    }, props), {
+      children: [
+        title && /* @__PURE__ */ jsx113("span", { className: "text-lg font-semibold text-gray-1000", children: title }),
+        description && /* @__PURE__ */ jsx113("span", { className: "text-sm font-normal text-gray-900", children: description }),
+        /* @__PURE__ */ jsx113("div", { children })
+      ]
+    })
+  );
+});
+TableEmpty.displayName = "TableEmpty";
+
 // src/components/Tabs/Tabs.tsx
-import * as React14 from "react";
+import * as React17 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React14.forwardRef((_a, ref) => {
+var TabsList = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx114(
     TabsPrimitive.List,
     __spreadValues({
       ref,
@@ -4855,9 +5546,9 @@ var TabsList = React14.forwardRef((_a, ref) => {
   );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React14.forwardRef((_a, ref) => {
+var TabsTrigger = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx114(
     TabsPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -4872,9 +5563,9 @@ var TabsTrigger = React14.forwardRef((_a, ref) => {
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React14.forwardRef((_a, ref) => {
+var TabsContent = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx114(
     TabsPrimitive.Content,
     __spreadValues({
       ref,
@@ -4888,13 +5579,13 @@ var TabsContent = React14.forwardRef((_a, ref) => {
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/Textarea/Textarea.tsx
-import * as React15 from "react";
-import { jsx as jsx105 } from "react/jsx-runtime";
-var Textarea = React15.forwardRef(
+import * as React18 from "react";
+import { jsx as jsx115 } from "react/jsx-runtime";
+var Textarea = React18.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, disabled } = _b, props = __objRest(_b, ["className", "disabled"]);
     const isDisabled = !!props["data-is-disabled"] || disabled;
-    return /* @__PURE__ */ jsx105("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx105(
+    return /* @__PURE__ */ jsx115("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx115(
       "div",
       {
         className: cn(
@@ -4905,7 +5596,7 @@ var Textarea = React15.forwardRef(
           },
           className
         ),
-        children: /* @__PURE__ */ jsx105(
+        children: /* @__PURE__ */ jsx115(
           "textarea",
           __spreadProps(__spreadValues({}, props), {
             disabled: isDisabled,
@@ -4920,22 +5611,22 @@ var Textarea = React15.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/Tooltip/Tooltip.tsx
-import * as React16 from "react";
+import * as React19 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
 var TooltipProvider = (_a) => {
   var _b = _a, {
     delayDuration = 0
   } = _b, props = __objRest(_b, [
     "delayDuration"
   ]);
-  return /* @__PURE__ */ jsx106(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
+  return /* @__PURE__ */ jsx116(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
 };
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React16.forwardRef((_a, ref) => {
+var TooltipContent = React19.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx116(
     TooltipPrimitive.Content,
     __spreadValues({
       ref,
@@ -4970,6 +5661,7 @@ export {
   ArrowRightIcon,
   ArrowUpIcon,
   AttachmentIcon,
+  Avatar,
   Badge,
   BellIcon,
   Button,
@@ -4983,10 +5675,20 @@ export {
   CheckIcon,
   Checkbox,
   ChevronDownIcon,
+  ChevronLeftDoubleIcon,
   ChevronLeftIcon,
+  ChevronRightDoubleIcon,
   ChevronRightIcon,
   ChevronSelectorVerticalIcon,
   ChevronUpIcon,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandLoading,
+  CommandSeparator,
   CopyIcon,
   CursorClickIcon,
   Dialog,
@@ -4996,6 +5698,7 @@ export {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DotsGrid,
   DotsHorizontalIcon,
   DownloadIcon,
   DropdownMenu,
@@ -5015,6 +5718,7 @@ export {
   EditIcon,
   ExpandIcon,
   FileQuestionIcon,
+  FilterButton,
   FilterLinesIcon,
   FlipBackwardIcon,
   FlipForwardIcon,
@@ -5047,11 +5751,14 @@ export {
   MicrophoneOffIcon,
   MonitorIcon,
   NotificationBoxIcon,
+  Pagination,
+  PaginationPageChoice,
   PauseCircleIcon,
   PhoneCallIcon,
   PhoneIcon,
   PieChartIcon,
   PlayCircleIcon,
+  PlayIcon,
   PlusCircleIcon,
   PlusIcon,
   Popover,
@@ -5080,8 +5787,16 @@ export {
   ShareIcon,
   SkipBackIcon,
   SkipForwardIcon,
+  SpinnerIcon,
   StarsIcon,
   Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeader,
+  TableRow,
   Tabs,
   TabsContent,
   TabsList,