@undefine-ui/design-system 3.3.0 → 3.4.0

package/dist/index.js

@@ -35,12 +35,19 @@ __export(index_exports, {
   CloudUpload: () => CloudUpload,
   Copy: () => Copy,
   CopyButton: () => CopyButton,
+  CustomDialog: () => CustomDialog,
+  CustomDrawer: () => CustomDrawer,
+  DateRangeDropdown: () => DateRangeDropdown,
+  DateRangePicker: () => DateRangePicker,
   Download: () => Download,
   EmptyContent: () => EmptyContent,
   ErrorToast: () => ErrorToast,
   Eye: () => Eye,
   EyeClosed: () => EyeClosed,
+  FeedbackDialog: () => FeedbackDialog,
   Field: () => Field,
+  FilterDropdown: () => FilterDropdown,
+  FilterList: () => FilterList,
   Form: () => Form,
   HelpCircle: () => HelpCircle,
   Icon: () => Icon,
@@ -65,6 +72,7 @@ __export(index_exports, {
   RHFAutocomplete: () => RHFAutocomplete,
   RHFCheckbox: () => RHFCheckbox,
   RHFDatePicker: () => RHFDatePicker,
+  RHFDateRangePicker: () => RHFDateRangePicker,
   RHFDateTimePicker: () => RHFDateTimePicker,
   RHFMultiCheckbox: () => RHFMultiCheckbox,
   RHFMultiSwitch: () => RHFMultiSwitch,
@@ -83,6 +91,7 @@ __export(index_exports, {
   SettingsContext: () => SettingsContext,
   SettingsProvider: () => SettingsProvider,
   SortDown: () => SortDown,
+  SortDropdown: () => SortDropdown,
   SortUp: () => SortUp,
   SplashScreen: () => SplashScreen,
   StatDown: () => StatDown,
@@ -92,6 +101,14 @@ __export(index_exports, {
   TablePagination: () => TablePagination,
   ThemeProvider: () => ThemeProvider,
   Toast: () => Toast,
+  ToolbarButton: () => ToolbarButton,
+  ToolbarDatePickerButton: () => ToolbarDatePickerButton,
+  ToolbarFilterButton: () => ToolbarFilterButton,
+  ToolbarSearchField: () => ToolbarSearchField,
+  ToolbarSettingsButton: () => ToolbarSettingsButton,
+  ToolbarSortButton: () => ToolbarSortButton,
+  ToolbarTodayButton: () => ToolbarTodayButton,
+  ToolbarViewSwitcher: () => ToolbarViewSwitcher,
   Trash: () => Trash,
   Upload: () => Upload,
   User: () => User,
@@ -118,15 +135,20 @@ __export(index_exports, {
   customShadows: () => customShadows,
   customSpacing: () => customSpacing,
   darkPalette: () => darkPalette,
+  defaultPresets: () => defaultPresets,
   defaultSettings: () => defaultSettings,
+  dialogClasses: () => dialogClasses,
+  drawerClasses: () => drawerClasses,
   error: () => error,
   fCurrency: () => fCurrency,
   fData: () => fData,
   fNumber: () => fNumber,
   fPercent: () => fPercent,
   fShortenNumber: () => fShortenNumber,
+  feedbackDialogClasses: () => feedbackDialogClasses,
   formatFullname: () => formatFullname,
   getCurrencySymbol: () => getCurrencySymbol,
+  getDateRangeFromPreset: () => getDateRangeFromPreset,
   getDefaultChartOptions: () => getDefaultChartOptions,
   getInitials: () => getInitials,
   getStorage: () => getStorage,
@@ -168,6 +190,7 @@ __export(index_exports, {
   tertiaryFont: () => tertiaryFont,
   text: () => text,
   textGradient: () => textGradient,
+  toolbarClasses: () => toolbarClasses,
   typography: () => typography,
   updateComponentsWithSettings: () => updateComponentsWithSettings,
   updateCoreWithSettings: () => updateCoreWithSettings,
@@ -1109,7 +1132,7 @@ var getLineHeight = (lineHeight, fontSize) => {
   return lineHeight;
 };
 var maxLine = ({ line, persistent }) => {
-  const baseStyles2 = {
+  const baseStyles6 = {
     overflow: "hidden",
     display: "-webkit-box",
     textOverflow: "ellipsis",
@@ -1123,7 +1146,7 @@ var maxLine = ({ line, persistent }) => {
     const fontSizeLg = getFontSize(persistent[mediaQueries.upLg]?.fontSize);
     const lineHeight = getLineHeight(persistent.lineHeight, fontSizeBase);
     return {
-      ...baseStyles2,
+      ...baseStyles6,
       ...lineHeight && {
         ...fontSizeBase && { height: fontSizeBase * lineHeight * line },
         ...fontSizeSm && {
@@ -1138,7 +1161,7 @@ var maxLine = ({ line, persistent }) => {
       }
     };
   }
-  return baseStyles2;
+  return baseStyles6;
 };
 function paper({
   theme,
@@ -1159,7 +1182,7 @@ function paper({
     },
     ...dropdown && {
       border: `1px solid ${theme.vars.palette.border.subtle}`,
-      boxShadow: theme.customShadows["shadow-sm"],
+      boxShadow: theme.customShadows["shadow-md"],
       borderRadius: theme.radius["radius-md"]
     }
   };
@@ -2364,6 +2387,7 @@ __export(components_exports, {
   ErrorToast: () => ErrorToast,
   Eye: () => Eye,
   EyeClosed: () => EyeClosed,
+  FilterList: () => FilterList,
   HelpCircle: () => HelpCircle,
   InfoCircle: () => InfoCircle,
   InfoCircleSolid: () => InfoCircleSolid,
@@ -3271,15 +3295,15 @@ var InfoToast = (props) => {
   );
 };
 
-// src/components/Icon/components/UserSolid.tsx
+// src/components/Icon/components/EyeClosed.tsx
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
-var UserSolid = (props) => {
+var EyeClosed = (props) => {
   return /* @__PURE__ */ jsxs18(
     "svg",
     {
-      width: "19",
+      width: "24",
       height: "24",
-      viewBox: "0 0 19 24",
+      viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
@@ -3287,15 +3311,41 @@ var UserSolid = (props) => {
         /* @__PURE__ */ jsx22(
           "path",
           {
-            d: "M9.33333 10.6667C12.2788 10.6667 14.6667 8.2788 14.6667 5.33333C14.6667 2.38781 12.2788 0 9.33333 0C6.38781 0 4 2.38781 4 5.33333C4 8.2788 6.38781 10.6667 9.33333 10.6667Z",
-            fill: "currentColor"
+            d: "M19.4996 16L17.0244 12.6038",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx22(
           "path",
           {
-            d: "M0 23.3334V22C0 16.8454 4.17868 12.6667 9.33333 12.6667C14.488 12.6667 18.6667 16.8454 18.6667 22V23.3334",
-            fill: "currentColor"
+            d: "M12 17.5V14",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "path",
+          {
+            d: "M4.5 16L6.96895 12.6124",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "path",
+          {
+            d: "M3 8C6.6 16 17.4 16 21 8",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         )
       ]
@@ -3303,15 +3353,15 @@ var UserSolid = (props) => {
   );
 };
 
-// src/components/Icon/components/EyeClosed.tsx
+// src/components/Icon/components/UserSolid.tsx
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
-var EyeClosed = (props) => {
+var UserSolid = (props) => {
   return /* @__PURE__ */ jsxs19(
     "svg",
     {
-      width: "24",
+      width: "19",
       height: "24",
-      viewBox: "0 0 24 24",
+      viewBox: "0 0 19 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
@@ -3319,41 +3369,60 @@ var EyeClosed = (props) => {
         /* @__PURE__ */ jsx23(
           "path",
           {
-            d: "M19.4996 16L17.0244 12.6038",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            d: "M9.33333 10.6667C12.2788 10.6667 14.6667 8.2788 14.6667 5.33333C14.6667 2.38781 12.2788 0 9.33333 0C6.38781 0 4 2.38781 4 5.33333C4 8.2788 6.38781 10.6667 9.33333 10.6667Z",
+            fill: "currentColor"
           }
         ),
         /* @__PURE__ */ jsx23(
           "path",
           {
-            d: "M12 17.5V14",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            d: "M0 23.3334V22C0 16.8454 4.17868 12.6667 9.33333 12.6667C14.488 12.6667 18.6667 16.8454 18.6667 22V23.3334",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Icon/components/FilterList.tsx
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+var FilterList = (props) => {
+  return /* @__PURE__ */ jsxs20(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx24(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M2.25 6C2.25 5.58579 2.58579 5.25 3 5.25H21C21.4142 5.25 21.75 5.58579 21.75 6C21.75 6.41421 21.4142 6.75 21 6.75H3C2.58579 6.75 2.25 6.41421 2.25 6Z",
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "path",
           {
-            d: "M4.5 16L6.96895 12.6124",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.25 12C6.25 11.5858 6.58579 11.25 7 11.25L17 11.25C17.4142 11.25 17.75 11.5858 17.75 12C17.75 12.4142 17.4142 12.75 17 12.75L7 12.75C6.58579 12.75 6.25 12.4142 6.25 12Z",
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "path",
           {
-            d: "M3 8C6.6 16 17.4 16 21 8",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10.25 18C10.25 17.5858 10.5858 17.25 11 17.25L13 17.25C13.4142 17.25 13.75 17.5858 13.75 18C13.75 18.4142 13.4142 18.75 13 18.75L11 18.75C10.5858 18.75 10.25 18.4142 10.25 18Z",
+            fill: "currentColor"
           }
         )
       ]
@@ -3362,9 +3431,9 @@ var EyeClosed = (props) => {
 };
 
 // src/components/Icon/components/ErrorToast.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var ErrorToast = (props) => {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "svg",
     {
       width: "30",
@@ -3374,8 +3443,8 @@ var ErrorToast = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx24("rect", { x: "0.5", y: "0.5", width: "29", height: "29", rx: "14.5", stroke: "#EF4444", strokeOpacity: "0.1" }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25("rect", { x: "0.5", y: "0.5", width: "29", height: "29", rx: "14.5", stroke: "#EF4444", strokeOpacity: "0.1" }),
+        /* @__PURE__ */ jsx25(
           "rect",
           {
             x: "3.5",
@@ -3387,7 +3456,7 @@ var ErrorToast = (props) => {
             "stroke-Opacity": "0.3"
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "path",
           {
             fillRule: "evenodd",
@@ -3396,7 +3465,7 @@ var ErrorToast = (props) => {
             fill: "#D93636"
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "path",
           {
             fillRule: "evenodd",
@@ -3411,9 +3480,9 @@ var ErrorToast = (props) => {
 };
 
 // src/components/Icon/components/KeyCommand.tsx
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var KeyCommand = (props) => {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       width: "14",
@@ -3423,7 +3492,7 @@ var KeyCommand = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M5.25 3.5V10.5",
@@ -3433,7 +3502,7 @@ var KeyCommand = (props) => {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M8.75 3.5V10.5",
@@ -3443,7 +3512,7 @@ var KeyCommand = (props) => {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M5.25 3.5C5.25 2.5335 4.4665 1.75 3.5 1.75C2.5335 1.75 1.75 2.5335 1.75 3.5C1.75 4.4665 2.5335 5.25 3.5 5.25H10.5C11.4665 5.25 12.25 4.4665 12.25 3.5C12.25 2.5335 11.4665 1.75 10.5 1.75C9.5335 1.75 8.75 2.5335 8.75 3.5",
@@ -3453,7 +3522,7 @@ var KeyCommand = (props) => {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M5.25 10.5C5.25 11.4665 4.4665 12.25 3.5 12.25C2.5335 12.25 1.75 11.4665 1.75 10.5C1.75 9.5335 2.5335 8.75 3.5 8.75H10.5C11.4665 8.75 12.25 9.5335 12.25 10.5C12.25 11.4665 11.4665 12.25 10.5 12.25C9.5335 12.25 8.75 11.4665 8.75 10.5",
@@ -3469,9 +3538,9 @@ var KeyCommand = (props) => {
 };
 
 // src/components/Icon/components/XMarkSolid.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var XMarkSolid = (props) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "svg",
     {
       width: "24",
@@ -3480,7 +3549,7 @@ var XMarkSolid = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx27(
         "path",
         {
           d: "M12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 6.06294 6.06294 1.25 12 1.25ZM15.3584 8.6416C15.0655 8.34871 14.5907 8.34871 14.2979 8.6416L12 10.9395L9.70117 8.6416C9.40827 8.34876 8.9335 8.34873 8.64062 8.6416C8.34811 8.9345 8.34791 9.40937 8.64062 9.70215L10.9395 12L8.64062 14.2979C8.34791 14.5906 8.34811 15.0655 8.64062 15.3584C8.9335 15.6513 9.40827 15.6512 9.70117 15.3584L12 13.0605L14.2979 15.3584C14.5907 15.6513 15.0655 15.6513 15.3584 15.3584C15.6512 15.0655 15.6512 14.5907 15.3584 14.2979L13.0605 12L15.3584 9.70215C15.6512 9.4093 15.6512 8.93451 15.3584 8.6416Z",
@@ -3492,9 +3561,9 @@ var XMarkSolid = (props) => {
 };
 
 // src/components/Icon/components/Attachment.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Attachment = (props) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "svg",
     {
       width: "20",
@@ -3503,7 +3572,7 @@ var Attachment = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx28(
         "path",
         {
           fillRule: "evenodd",
@@ -3517,9 +3586,9 @@ var Attachment = (props) => {
 };
 
 // src/components/Icon/components/HelpCircle.tsx
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var HelpCircle = (props) => {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "svg",
     {
       width: "16",
@@ -3529,8 +3598,8 @@ var HelpCircle = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsxs22("g", { "clip-path": "url(#clip0_2471_10977)", children: [
-          /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsxs23("g", { "clip-path": "url(#clip0_2471_10977)", children: [
+          /* @__PURE__ */ jsx29(
             "path",
             {
               fillRule: "evenodd",
@@ -3539,7 +3608,7 @@ var HelpCircle = (props) => {
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "path",
             {
               fillRule: "evenodd",
@@ -3548,7 +3617,7 @@ var HelpCircle = (props) => {
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "path",
             {
               fillRule: "evenodd",
@@ -3558,16 +3627,16 @@ var HelpCircle = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx28("defs", { children: /* @__PURE__ */ jsx28("clipPath", { id: "clip0_2471_10977", children: /* @__PURE__ */ jsx28("rect", { width: "16", height: "16", fill: "white" }) }) })
+        /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_2471_10977", children: /* @__PURE__ */ jsx29("rect", { width: "16", height: "16", fill: "white" }) }) })
       ]
     }
   );
 };
 
 // src/components/Icon/components/PlusSquare.tsx
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var PlusSquare = (props) => {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "svg",
     {
       width: "18",
@@ -3577,7 +3646,7 @@ var PlusSquare = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           "path",
           {
             fillRule: "evenodd",
@@ -3586,7 +3655,7 @@ var PlusSquare = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           "path",
           {
             fillRule: "evenodd",
@@ -3601,9 +3670,9 @@ var PlusSquare = (props) => {
 };
 
 // src/components/Icon/components/InfoCircle.tsx
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var InfoCircle = (props) => {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "svg",
     {
       width: "16",
@@ -3613,8 +3682,8 @@ var InfoCircle = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsxs24("g", { "clip-path": "url(#clip0_1881_10590)", children: [
-          /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsxs25("g", { "clip-path": "url(#clip0_1881_10590)", children: [
+          /* @__PURE__ */ jsx31(
             "path",
             {
               fillRule: "evenodd",
@@ -3623,7 +3692,7 @@ var InfoCircle = (props) => {
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             "path",
             {
               fillRule: "evenodd",
@@ -3632,7 +3701,7 @@ var InfoCircle = (props) => {
               fill: "currentColor"
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             "path",
             {
               fillRule: "evenodd",
@@ -3642,16 +3711,16 @@ var InfoCircle = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx30("defs", { children: /* @__PURE__ */ jsx30("clipPath", { id: "clip0_1881_10590", children: /* @__PURE__ */ jsx30("rect", { width: "16", height: "16", fill: "white" }) }) })
+        /* @__PURE__ */ jsx31("defs", { children: /* @__PURE__ */ jsx31("clipPath", { id: "clip0_1881_10590", children: /* @__PURE__ */ jsx31("rect", { width: "16", height: "16", fill: "white" }) }) })
       ]
     }
   );
 };
 
 // src/components/Icon/components/CloudUpload.tsx
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var CloudUpload = (props) => {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "svg",
     {
       width: "32",
@@ -3661,7 +3730,7 @@ var CloudUpload = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "path",
           {
             d: "M16.0007 29.3333V17.3333M16.0007 17.3333L20.6673 21.9999M16.0007 17.3333L11.334 21.9999",
@@ -3671,7 +3740,7 @@ var CloudUpload = (props) => {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "path",
           {
             d: "M26.6673 23.4764C28.6589 22.6963 30.6673 20.9186 30.6673 17.3334C30.6673 12.0001 26.2229 10.6667 24.0006 10.6667C24.0006 8.00008 24.0006 2.66675 16.0007 2.66675C8.00065 2.66675 8.00065 8.00008 8.00065 10.6667C5.77843 10.6667 1.33398 12.0001 1.33398 17.3334C1.33398 20.9186 3.34235 22.6963 5.33399 23.4764",
@@ -3687,9 +3756,9 @@ var CloudUpload = (props) => {
 };
 
 // src/components/Icon/components/RadioSelect.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var RadioSelect = (props) => {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "svg",
     {
       width: "17",
@@ -3698,15 +3767,15 @@ var RadioSelect = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx32("rect", { x: "2.5", y: "2", width: "12", height: "12", rx: "6", stroke: "currentColor", strokeWidth: "4" })
+      children: /* @__PURE__ */ jsx33("rect", { x: "2.5", y: "2", width: "12", height: "12", rx: "6", stroke: "currentColor", strokeWidth: "4" })
     }
   );
 };
 
 // src/components/Icon/components/SuccessToast.tsx
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 var SuccessToast = (props) => {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "svg",
     {
       width: "30",
@@ -3716,7 +3785,7 @@ var SuccessToast = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "rect",
           {
             x: "0.5",
@@ -3728,8 +3797,8 @@ var SuccessToast = (props) => {
             "stroke-opacity": "0.1"
           }
         ),
-        /* @__PURE__ */ jsx33("rect", { x: "3.5", y: "3.5", width: "23", height: "23", rx: "11.5", stroke: "#22C55E", strokeOpacity: "0.3" }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34("rect", { x: "3.5", y: "3.5", width: "23", height: "23", rx: "11.5", stroke: "#22C55E", strokeOpacity: "0.3" }),
+        /* @__PURE__ */ jsx34(
           "path",
           {
             fillRule: "evenodd",
@@ -3738,7 +3807,7 @@ var SuccessToast = (props) => {
             fill: "#1AB04F"
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "path",
           {
             fillRule: "evenodd",
@@ -3753,9 +3822,9 @@ var SuccessToast = (props) => {
 };
 
 // src/components/Icon/components/WarningToast.tsx
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 var WarningToast = (props) => {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "svg",
     {
       width: "30",
@@ -3765,18 +3834,18 @@ var WarningToast = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx34("rect", { x: "0.5", y: "0.5", width: "29", height: "29", rx: "14.5", stroke: "#F59E0B", strokeOpacity: "0.1" }),
-        /* @__PURE__ */ jsx34("rect", { x: "3.5", y: "3.5", width: "23", height: "23", rx: "11.5", stroke: "#F59E0B", strokeOpacity: "0.3" }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("rect", { x: "0.5", y: "0.5", width: "29", height: "29", rx: "14.5", stroke: "#F59E0B", strokeOpacity: "0.1" }),
+        /* @__PURE__ */ jsx35("rect", { x: "3.5", y: "3.5", width: "23", height: "23", rx: "11.5", stroke: "#F59E0B", strokeOpacity: "0.3" }),
+        /* @__PURE__ */ jsx35(
           "path",
           {
-            "fill-rule": "evenodd",
-            "clip-rule": "evenodd",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
             d: "M15 10.2083C15.3452 10.2083 15.625 10.4881 15.625 10.8333V15.8333C15.625 16.1785 15.3452 16.4583 15 16.4583C14.6548 16.4583 14.375 16.1785 14.375 15.8333L14.375 10.8333C14.375 10.4881 14.6548 10.2083 15 10.2083Z",
             fill: "#DB8709"
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "path",
           {
             fillRule: "evenodd",
@@ -3785,7 +3854,7 @@ var WarningToast = (props) => {
             fill: "#DB8709"
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "path",
           {
             fillRule: "evenodd",
@@ -3800,9 +3869,9 @@ var WarningToast = (props) => {
 };
 
 // src/components/Icon/components/RadioDefault.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var RadioDefault = (props) => {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "svg",
     {
       width: "16",
@@ -3811,15 +3880,15 @@ var RadioDefault = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx35("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "7.5", stroke: "currentColor" })
+      children: /* @__PURE__ */ jsx36("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "7.5", stroke: "currentColor" })
     }
   );
 };
 
 // src/components/Icon/components/NavArrowDown.tsx
-import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 var NavArrowDown = (props) => {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "svg",
     {
       width: "16",
@@ -3829,7 +3898,7 @@ var NavArrowDown = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "path",
           {
             d: "M4 6L8 10L12 6",
@@ -3839,7 +3908,7 @@ var NavArrowDown = (props) => {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "path",
           {
             fillRule: "evenodd",
@@ -3854,9 +3923,9 @@ var NavArrowDown = (props) => {
 };
 
 // src/components/Icon/components/NavArrowLeft.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var NavArrowLeft = (props) => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "svg",
     {
       width: "25",
@@ -3865,7 +3934,7 @@ var NavArrowLeft = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(
         "path",
         {
           fillRule: "evenodd",
@@ -3879,9 +3948,9 @@ var NavArrowLeft = (props) => {
 };
 
 // src/components/Icon/components/NavArrowRight.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var NavArrowRight = (props) => {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "svg",
     {
       width: "25",
@@ -3890,7 +3959,7 @@ var NavArrowRight = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(
         "path",
         {
           fillRule: "evenodd",
@@ -3904,9 +3973,9 @@ var NavArrowRight = (props) => {
 };
 
 // src/components/Icon/components/ClipboardCheck.tsx
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var ClipboardCheck = (props) => {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "svg",
     {
       width: "24",
@@ -3916,7 +3985,7 @@ var ClipboardCheck = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "path",
           {
             fillRule: "evenodd",
@@ -3925,7 +3994,7 @@ var ClipboardCheck = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "path",
           {
             fillRule: "evenodd",
@@ -3934,7 +4003,7 @@ var ClipboardCheck = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "path",
           {
             fillRule: "evenodd",
@@ -3943,7 +4012,7 @@ var ClipboardCheck = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "path",
           {
             fillRule: "evenodd",
@@ -3958,9 +4027,9 @@ var ClipboardCheck = (props) => {
 };
 
 // src/components/Icon/components/CheckboxSelect.tsx
-import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var CheckboxSelect = (props) => {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "svg",
     {
       width: "24",
@@ -3970,14 +4039,14 @@ var CheckboxSelect = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           "path",
           {
             d: "M0 8C0 3.58172 3.58172 0 8 0H16C20.4183 0 24 3.58172 24 8V16C24 20.4183 20.4183 24 16 24H8C3.58172 24 0 20.4183 0 16V8Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           "path",
           {
             d: "M6.16602 12.8333L9.49935 16.1666L17.8327 7.83331",
@@ -3993,9 +4062,9 @@ var CheckboxSelect = (props) => {
 };
 
 // src/components/Icon/components/InfoCircleSolid.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var InfoCircleSolid = (props) => {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "svg",
     {
       width: "20",
@@ -4004,7 +4073,7 @@ var InfoCircleSolid = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         "path",
         {
           d: "M10.001 1.04199C14.9485 1.04199 18.959 5.05245 18.959 10C18.959 14.9476 14.9485 18.958 10.001 18.958C5.05343 18.958 1.04297 14.9476 1.04297 10C1.04297 5.05245 5.05343 1.04199 10.001 1.04199ZM10.001 8.95801C9.65591 8.95801 9.37615 9.23798 9.37598 9.58301V13.75C9.37598 14.0952 9.6558 14.375 10.001 14.375C10.3462 14.375 10.626 14.0952 10.626 13.75V9.58301C10.6258 9.23798 10.346 8.95801 10.001 8.95801ZM10.4277 5.78418C10.1712 5.55335 9.77583 5.5746 9.54492 5.83105L9.53613 5.84082C9.30564 6.09736 9.32667 6.49185 9.58301 6.72266C9.83958 6.95357 10.2349 6.93333 10.4658 6.67676L10.4736 6.66699C10.7045 6.41042 10.6843 6.01508 10.4277 5.78418Z",
@@ -4016,9 +4085,9 @@ var InfoCircleSolid = (props) => {
 };
 
 // src/components/Icon/components/CheckboxDefault.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var CheckboxDefault = (props) => {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "svg",
     {
       width: "24",
@@ -4027,7 +4096,7 @@ var CheckboxDefault = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         "path",
         {
           d: "M8 0.5H16C20.1421 0.5 23.5 3.85786 23.5 8V16C23.5 20.1421 20.1421 23.5 16 23.5H8C3.85786 23.5 0.5 20.1421 0.5 16V8C0.5 3.85786 3.85786 0.5 8 0.5Z",
@@ -4039,9 +4108,9 @@ var CheckboxDefault = (props) => {
 };
 
 // src/components/Icon/components/CheckCircleSolid.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var CheckCircleSolid = (props) => {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "svg",
     {
       width: "24",
@@ -4050,7 +4119,7 @@ var CheckCircleSolid = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx44(
         "path",
         {
           d: "M12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 6.06294 6.06294 1.25 12 1.25ZM17.5303 7.96973C17.2374 7.67689 16.7626 7.67685 16.4697 7.96973L10 14.4395L7.53027 11.9697C7.23738 11.6769 6.7626 11.6769 6.46973 11.9697C6.17691 12.2626 6.17691 12.7374 6.46973 13.0303L9.46973 16.0303C9.7626 16.3231 10.2374 16.3231 10.5303 16.0303L17.5303 9.03027C17.8232 8.73738 17.8232 8.26262 17.5303 7.96973Z",
@@ -4062,9 +4131,9 @@ var CheckCircleSolid = (props) => {
 };
 
 // src/components/Icon/components/BellNotification.tsx
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
 var BellNotification = (props) => {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "svg",
     {
       width: "20",
@@ -4074,7 +4143,7 @@ var BellNotification = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "path",
           {
             fillRule: "evenodd",
@@ -4083,7 +4152,7 @@ var BellNotification = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "path",
           {
             fillRule: "evenodd",
@@ -4092,7 +4161,7 @@ var BellNotification = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "path",
           {
             fillRule: "evenodd",
@@ -4101,7 +4170,7 @@ var BellNotification = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "path",
           {
             d: "M15.6937 13.6179C15.8418 13.9075 15.9909 14.1587 16.1344 14.375H10.0001C9.65496 14.375 9.37514 14.6548 9.37514 15C9.37514 15.3452 9.65496 15.625 10.0001 15.625H17.5001C17.7721 15.625 18.0128 15.4492 18.0955 15.1901C18.1775 14.9333 18.0856 14.6531 17.868 14.4947L17.8607 14.4891C17.8513 14.4816 17.8333 14.4669 17.8079 14.4443C17.7573 14.3993 17.6771 14.3229 17.5768 14.21C17.3766 13.9845 17.0943 13.6115 16.8066 13.0488C16.3746 12.2039 15.9239 10.9191 15.7271 9.04612C15.6523 8.33332 14.4002 8.37434 14.483 9.16668C14.6937 11.1836 15.1843 12.6219 15.6937 13.6179Z",
@@ -4114,9 +4183,9 @@ var BellNotification = (props) => {
 };
 
 // src/components/Icon/components/NavArrowDownSolid.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var NavArrowDownSolid = (props) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "svg",
     {
       width: "24",
@@ -4125,7 +4194,7 @@ var NavArrowDownSolid = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx46(
         "path",
         {
           fillRule: "evenodd",
@@ -4139,9 +4208,9 @@ var NavArrowDownSolid = (props) => {
 };
 
 // src/components/Icon/components/LongArrowUpLeftSolid.tsx
-import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
 var LongArrowUpLeftSolid = (props) => {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "svg",
     {
       width: "24",
@@ -4151,7 +4220,7 @@ var LongArrowUpLeftSolid = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           "path",
           {
             fillRule: "evenodd",
@@ -4160,7 +4229,7 @@ var LongArrowUpLeftSolid = (props) => {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           "path",
           {
             fillRule: "evenodd",
@@ -4175,9 +4244,9 @@ var LongArrowUpLeftSolid = (props) => {
 };
 
 // src/components/Icon/components/CheckboxIndeterminate.tsx
-import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
 var CheckboxIndeterminate = (props) => {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "svg",
     {
       width: "24",
@@ -4187,14 +4256,14 @@ var CheckboxIndeterminate = (props) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           "path",
           {
             d: "M0 8C0 3.58172 3.58172 0 8 0H16C20.4183 0 24 3.58172 24 8V16C24 20.4183 20.4183 24 16 24H8C3.58172 24 0 20.4183 0 16V8Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx47("path", { d: "M6 12H18", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx48("path", { d: "M6 12H18", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })
       ]
     }
   );
@@ -4206,10 +4275,10 @@ var iconClasses = {
 };
 
 // src/components/Icon/icon.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var Icon = ({ icon: icon2, className, ...props }) => {
   const IconComponent = components_exports[icon2];
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     Box,
     {
       component: IconComponent,
@@ -4220,7 +4289,7 @@ var Icon = ({ icon: icon2, className, ...props }) => {
 };
 
 // src/theme/core/components/alert.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var COLORS2 = ["info", "success", "warning", "error"];
 function styleColors2(ownerState, styles) {
   const outputStyle = COLORS2.reduce((acc, color) => {
@@ -4238,10 +4307,10 @@ var MuiAlert = {
   defaultProps: {
     variant: "standard",
     iconMapping: {
-      error: /* @__PURE__ */ jsx49(Icon, { icon: "InfoCircleSolid" }),
-      info: /* @__PURE__ */ jsx49(Icon, { icon: "InfoCircleSolid" }),
-      success: /* @__PURE__ */ jsx49(Icon, { icon: "InfoCircleSolid" }),
-      warning: /* @__PURE__ */ jsx49(Icon, { icon: "InfoCircleSolid" })
+      error: /* @__PURE__ */ jsx50(Icon, { icon: "InfoCircleSolid" }),
+      info: /* @__PURE__ */ jsx50(Icon, { icon: "InfoCircleSolid" }),
+      success: /* @__PURE__ */ jsx50(Icon, { icon: "InfoCircleSolid" }),
+      warning: /* @__PURE__ */ jsx50(Icon, { icon: "InfoCircleSolid" })
     }
   },
   /** **************************************
@@ -4450,7 +4519,7 @@ var badge = { MuiBadge };
 
 // src/theme/core/components/radio.tsx
 import { radioClasses } from "@mui/material/Radio";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var MuiRadio = {
   /** **************************************
    * DEFAULT PROPS
@@ -4459,8 +4528,8 @@ var MuiRadio = {
     color: "default",
     size: "small",
     disableRipple: true,
-    icon: /* @__PURE__ */ jsx50(Icon, { icon: "RadioDefault" }),
-    checkedIcon: /* @__PURE__ */ jsx50(Icon, { icon: "RadioSelect" })
+    icon: /* @__PURE__ */ jsx51(Icon, { icon: "RadioDefault" }),
+    checkedIcon: /* @__PURE__ */ jsx51(Icon, { icon: "RadioSelect" })
   },
   /** **************************************
    * STYLE
@@ -4528,8 +4597,9 @@ var MuiDialog = {
    *************************************** */
   styleOverrides: {
     paper: ({ ownerState, theme }) => ({
+      position: "relative",
       boxShadow: theme.customShadows["shadow-sm"],
-      borderRadius: Number(theme.shape.borderRadius) * 2,
+      borderRadius: theme.radius["radius-3xl"],
       ...!ownerState.fullScreen && { margin: theme.spacing(2) }
     }),
     paperFullScreen: { borderRadius: 0 }
@@ -4763,13 +4833,13 @@ var MuiDrawer = {
 var drawer = { MuiDrawer };
 
 // src/theme/core/components/select.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var MuiSelect = {
   /** **************************************
    * DEFAULT PROPS
    *************************************** */
   defaultProps: {
-    IconComponent: () => /* @__PURE__ */ jsx51(Icon, { icon: "NavArrowDown", sx: { width: 18, height: 18, position: "absolute", right: 10 } })
+    IconComponent: () => /* @__PURE__ */ jsx52(Icon, { icon: "NavArrowDown", sx: { width: 18, height: 18, position: "absolute", right: 10 } })
   }
 };
 var MuiNativeSelect = {
@@ -4777,7 +4847,7 @@ var MuiNativeSelect = {
    * DEFAULT PROPS
    *************************************** */
   defaultProps: {
-    IconComponent: () => /* @__PURE__ */ jsx51(Icon, { icon: "NavArrowDown", sx: { width: 18, height: 18, position: "absolute", right: 10 } })
+    IconComponent: () => /* @__PURE__ */ jsx52(Icon, { icon: "NavArrowDown", sx: { width: 18, height: 18, position: "absolute", right: 10 } })
   }
 };
 var select = { MuiSelect, MuiNativeSelect };
@@ -4785,13 +4855,13 @@ var select = { MuiSelect, MuiNativeSelect };
 // src/theme/core/components/rating.tsx
 import { ratingClasses } from "@mui/material/Rating";
 import SvgIcon, { svgIconClasses } from "@mui/material/SvgIcon";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var RatingIcon = (props) => /* @__PURE__ */ jsx52(SvgIcon, { ...props, children: /* @__PURE__ */ jsx52("path", { d: "M17.56,21 C17.4000767,21.0006435 17.2423316,20.9629218 17.1,20.89 L12,18.22 L6.9,20.89 C6.56213339,21.067663 6.15259539,21.0374771 5.8444287,20.8121966 C5.53626201,20.5869161 5.38323252,20.2058459 5.45,19.83 L6.45,14.2 L2.33,10.2 C2.06805623,9.93860108 1.9718844,9.55391377 2.08,9.2 C2.19824414,8.83742187 2.51242293,8.57366684 2.89,8.52 L8.59,7.69 L11.1,2.56 C11.2670864,2.21500967 11.6166774,1.99588989 12,1.99588989 C12.3833226,1.99588989 12.7329136,2.21500967 12.9,2.56 L15.44,7.68 L21.14,8.51 C21.5175771,8.56366684 21.8317559,8.82742187 21.95,9.19 C22.0581156,9.54391377 21.9619438,9.92860108 21.7,10.19 L17.58,14.19 L18.58,19.82 C18.652893,20.2027971 18.4967826,20.5930731 18.18,20.82 C17.9989179,20.9468967 17.7808835,21.010197 17.56,21 L17.56,21 Z" }) });
+import { jsx as jsx53 } from "react/jsx-runtime";
+var RatingIcon = (props) => /* @__PURE__ */ jsx53(SvgIcon, { ...props, children: /* @__PURE__ */ jsx53("path", { d: "M17.56,21 C17.4000767,21.0006435 17.2423316,20.9629218 17.1,20.89 L12,18.22 L6.9,20.89 C6.56213339,21.067663 6.15259539,21.0374771 5.8444287,20.8121966 C5.53626201,20.5869161 5.38323252,20.2058459 5.45,19.83 L6.45,14.2 L2.33,10.2 C2.06805623,9.93860108 1.9718844,9.55391377 2.08,9.2 C2.19824414,8.83742187 2.51242293,8.57366684 2.89,8.52 L8.59,7.69 L11.1,2.56 C11.2670864,2.21500967 11.6166774,1.99588989 12,1.99588989 C12.3833226,1.99588989 12.7329136,2.21500967 12.9,2.56 L15.44,7.68 L21.14,8.51 C21.5175771,8.56366684 21.8317559,8.82742187 21.95,9.19 C22.0581156,9.54391377 21.9619438,9.92860108 21.7,10.19 L17.58,14.19 L18.58,19.82 C18.652893,20.2027971 18.4967826,20.5930731 18.18,20.82 C17.9989179,20.9468967 17.7808835,21.010197 17.56,21 L17.56,21 Z" }) });
 var MuiRating = {
   /** **************************************
    * DEFAULT PROPS
    *************************************** */
-  defaultProps: { emptyIcon: /* @__PURE__ */ jsx52(RatingIcon, {}), icon: /* @__PURE__ */ jsx52(RatingIcon, {}) },
+  defaultProps: { emptyIcon: /* @__PURE__ */ jsx53(RatingIcon, {}), icon: /* @__PURE__ */ jsx53(RatingIcon, {}) },
   /** **************************************
    * STYLE
    *************************************** */
@@ -4916,7 +4986,7 @@ var slider = {
 // src/theme/core/components/button.tsx
 import { buttonClasses } from "@mui/material/Button";
 import { keyframes } from "@mui/material/styles";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -4977,15 +5047,15 @@ var secondaryVariant = {
     props: ({ ownerState }) => ownerState.variant === "secondary" && ownerState.color === color,
     style: ({ theme }) => ({
       color: color === "neutral" ? theme.vars.palette[color][950] : theme.vars.palette[color].main,
-      border: `1px solid ${color === "neutral" ? theme.vars.palette.neutral[950] : theme.vars.palette[color].main}`,
+      border: `1px solid ${color === "neutral" ? theme.vars.palette.neutral[200] : theme.vars.palette[color].main}`,
       backgroundColor: "transparent",
       "&:hover": {
-        backgroundColor: "transparent",
+        backgroundColor: color === "neutral" ? theme.vars.palette.neutral[200] : "transparent",
         borderWidth: "2px"
       },
       [`&.${buttonClasses.loading}`]: {
         color: "transparent",
-        borderColor: color === "neutral" ? theme.vars.palette.neutral[950] : theme.vars.palette[color].main,
+        borderColor: color === "neutral" ? theme.vars.palette.neutral[200] : theme.vars.palette[color].main,
         "& .MuiButton-loadingIndicator": {
           color: color === "neutral" ? theme.vars.palette[color][950] : theme.vars.palette[color].main,
           left: "auto",
@@ -5033,10 +5103,10 @@ var MuiButton = {
    *************************************** */
   defaultProps: {
     color: "primary",
-    variant: "contained",
+    variant: "primary",
     disableElevation: true,
     disableRipple: true,
-    loadingIndicator: /* @__PURE__ */ jsx53(Icon, { icon: "Loader" })
+    loadingIndicator: /* @__PURE__ */ jsx54(Icon, { icon: "Loader" })
   },
   /** **************************************
    * VARIANTS
@@ -5522,7 +5592,7 @@ var MuiBackdrop = {
    *************************************** */
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: varAlpha(theme.vars.palette.grey["800Channel"], 0.48)
+      backgroundColor: varAlpha(theme.vars.palette.common.blackChannel, 0.4)
     }),
     invisible: { background: "transparent" }
   }
@@ -5591,7 +5661,7 @@ var timeline = { MuiTimelineDot, MuiTimelineConnector };
 
 // src/theme/core/components/checkbox.tsx
 import { checkboxClasses as checkboxClasses2 } from "@mui/material/Checkbox";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var MuiCheckbox = {
   /** **************************************
    * DEFAULT PROPS
@@ -5600,9 +5670,9 @@ var MuiCheckbox = {
     color: "default",
     size: "small",
     disableRipple: true,
-    icon: /* @__PURE__ */ jsx54(Icon, { icon: "CheckboxDefault" }),
-    checkedIcon: /* @__PURE__ */ jsx54(Icon, { icon: "CheckboxSelect" }),
-    indeterminateIcon: /* @__PURE__ */ jsx54(Icon, { icon: "CheckboxIndeterminate" })
+    icon: /* @__PURE__ */ jsx55(Icon, { icon: "CheckboxDefault" }),
+    checkedIcon: /* @__PURE__ */ jsx55(Icon, { icon: "CheckboxSelect" }),
+    indeterminateIcon: /* @__PURE__ */ jsx55(Icon, { icon: "CheckboxIndeterminate" })
   },
   /** **************************************
    * STYLE
@@ -6152,7 +6222,7 @@ import { listItemIconClasses } from "@mui/material/ListItemIcon";
 import { circularProgressClasses } from "@mui/material/CircularProgress";
 import { formControlLabelClasses } from "@mui/material/FormControlLabel";
 import SvgIcon2, { svgIconClasses as svgIconClasses2 } from "@mui/material/SvgIcon";
-import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var MuiDataGrid = {
   /** **************************************
    * DEFAULT PROPS
@@ -6160,9 +6230,9 @@ var MuiDataGrid = {
   defaultProps: {
     slots: {
       /* Column */
-      columnSortedAscendingIcon: (props) => /* @__PURE__ */ jsx55(DataGridArrowUpIcon, { sx: { color: "text.primary" }, ...props }),
-      columnSortedDescendingIcon: (props) => /* @__PURE__ */ jsx55(DataGridArrowDownIcon, { sx: { color: "text.primary" }, ...props }),
-      columnUnsortedIcon: (props) => /* @__PURE__ */ jsx55(
+      columnSortedAscendingIcon: (props) => /* @__PURE__ */ jsx56(DataGridArrowUpIcon, { sx: { color: "text.primary" }, ...props }),
+      columnSortedDescendingIcon: (props) => /* @__PURE__ */ jsx56(DataGridArrowDownIcon, { sx: { color: "text.primary" }, ...props }),
+      columnUnsortedIcon: (props) => /* @__PURE__ */ jsx56(
         DataGridArrowUpIcon,
         {
           fontSize: props.fontSize,
@@ -6170,26 +6240,26 @@ var MuiDataGrid = {
           sx: { color: "text.disabled" }
         }
       ),
-      columnMenuIcon: (props) => /* @__PURE__ */ jsx55(DataGridMoreIcon, { width: 20, ...props }),
-      columnMenuSortAscendingIcon: (props) => /* @__PURE__ */ jsx55(DataGridArrowUpIcon, { ...props }),
-      columnMenuSortDescendingIcon: (props) => /* @__PURE__ */ jsx55(DataGridArrowDownIcon, { ...props }),
-      columnMenuFilterIcon: (props) => /* @__PURE__ */ jsx55(DataGridFilterIcon, { ...props }),
-      columnMenuHideIcon: (props) => /* @__PURE__ */ jsx55(DataGridEyeCloseIcon, { ...props }),
-      columnMenuManageColumnsIcon: (props) => /* @__PURE__ */ jsx55(DataGridEyeIcon, { ...props }),
-      columnSelectorIcon: (props) => /* @__PURE__ */ jsx55(DataGridEyeIcon, { ...props }),
+      columnMenuIcon: (props) => /* @__PURE__ */ jsx56(DataGridMoreIcon, { width: 20, ...props }),
+      columnMenuSortAscendingIcon: (props) => /* @__PURE__ */ jsx56(DataGridArrowUpIcon, { ...props }),
+      columnMenuSortDescendingIcon: (props) => /* @__PURE__ */ jsx56(DataGridArrowDownIcon, { ...props }),
+      columnMenuFilterIcon: (props) => /* @__PURE__ */ jsx56(DataGridFilterIcon, { ...props }),
+      columnMenuHideIcon: (props) => /* @__PURE__ */ jsx56(DataGridEyeCloseIcon, { ...props }),
+      columnMenuManageColumnsIcon: (props) => /* @__PURE__ */ jsx56(DataGridEyeIcon, { ...props }),
+      columnSelectorIcon: (props) => /* @__PURE__ */ jsx56(DataGridEyeIcon, { ...props }),
       /* Filter */
-      filterPanelDeleteIcon: (props) => /* @__PURE__ */ jsx55(DataGridCloseIcon, { ...props }),
-      openFilterButtonIcon: (props) => /* @__PURE__ */ jsx55(DataGridFilterIcon, { ...props }),
-      columnFilteredIcon: (props) => /* @__PURE__ */ jsx55(DataGridFilterIcon, { sx: { width: 16, color: "text.primary" }, ...props }),
+      filterPanelDeleteIcon: (props) => /* @__PURE__ */ jsx56(DataGridCloseIcon, { ...props }),
+      openFilterButtonIcon: (props) => /* @__PURE__ */ jsx56(DataGridFilterIcon, { ...props }),
+      columnFilteredIcon: (props) => /* @__PURE__ */ jsx56(DataGridFilterIcon, { sx: { width: 16, color: "text.primary" }, ...props }),
       /* Density */
-      densityCompactIcon: (props) => /* @__PURE__ */ jsx55(DataGridDensityCompactIcon, { ...props }),
-      densityStandardIcon: (props) => /* @__PURE__ */ jsx55(DataGridDensityStandardIcon, { ...props }),
-      densityComfortableIcon: (props) => /* @__PURE__ */ jsx55(DataGridDensityComfortableIcon, { ...props }),
+      densityCompactIcon: (props) => /* @__PURE__ */ jsx56(DataGridDensityCompactIcon, { ...props }),
+      densityStandardIcon: (props) => /* @__PURE__ */ jsx56(DataGridDensityStandardIcon, { ...props }),
+      densityComfortableIcon: (props) => /* @__PURE__ */ jsx56(DataGridDensityComfortableIcon, { ...props }),
       /* Export */
-      exportIcon: (props) => /* @__PURE__ */ jsx55(DataGridExportIcon, { ...props }),
+      exportIcon: (props) => /* @__PURE__ */ jsx56(DataGridExportIcon, { ...props }),
       /*  Quick Filter */
-      quickFilterIcon: (props) => /* @__PURE__ */ jsx55(DataGridSearchIcon, { sx: { width: 24, height: 24, color: "text.secondary" }, ...props }),
-      quickFilterClearIcon: (props) => /* @__PURE__ */ jsx55(DataGridCloseIcon, { ...props })
+      quickFilterIcon: (props) => /* @__PURE__ */ jsx56(DataGridSearchIcon, { sx: { width: 24, height: 24, color: "text.secondary" }, ...props }),
+      quickFilterClearIcon: (props) => /* @__PURE__ */ jsx56(DataGridCloseIcon, { ...props })
     },
     slotProps: {
       basePopper: { placement: "bottom-end" },
@@ -6355,15 +6425,15 @@ var MuiDataGrid = {
   }
 };
 var dataGrid = { MuiDataGrid };
-var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx55(
+var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ jsxs35(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
       d: "m8.303 11.596l3.327-3.431a.499.499 0 0 1 .74 0l6.43 6.63c.401.414.158 1.205-.37 1.205h-5.723z"
     }
   ),
-  /* @__PURE__ */ jsx55(
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6372,15 +6442,15 @@ var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { s
     }
   )
 ] });
-var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx55(
+var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ jsxs35(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
       d: "m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z"
     }
   ),
-  /* @__PURE__ */ jsx55(
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6389,15 +6459,15 @@ var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, {
     }
   )
 ] });
-var DataGridFilterIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx55(
+var DataGridFilterIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx56(
   "path",
   {
     fill: "currentColor",
     d: "M19 3H5c-1.414 0-2.121 0-2.56.412C2 3.824 2 4.488 2 5.815v.69c0 1.037 0 1.556.26 1.986c.26.43.733.698 1.682 1.232l2.913 1.64c.636.358.955.537 1.183.735c.474.411.766.895.898 1.49c.064.284.064.618.064 1.285v2.67c0 .909 0 1.364.252 1.718c.252.355.7.53 1.594.88c1.879.734 2.818 1.101 3.486.683c.668-.417.668-1.372.668-3.282v-2.67c0-.666 0-1 .064-1.285a2.68 2.68 0 0 1 .899-1.49c.227-.197.546-.376 1.182-.735l2.913-1.64c.948-.533 1.423-.8 1.682-1.23c.26-.43.26-.95.26-1.988v-.69c0-1.326 0-1.99-.44-2.402C21.122 3 20.415 3 19 3"
   }
 ) });
-var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx55(
+var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs35(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6406,7 +6476,7 @@ var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { sx
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ jsx55(
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6414,9 +6484,9 @@ var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { sx
     }
   )
 ] });
-var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx55("path", { fill: "currentColor", d: "M9.75 12a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" }),
-  /* @__PURE__ */ jsx55(
+var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ jsxs35(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx56("path", { fill: "currentColor", d: "M9.75 12a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" }),
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6426,7 +6496,7 @@ var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ jsxs34(SvgIcon2, { sx: {
     }
   )
 ] });
-var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx55(
+var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx56(
   "path",
   {
     fill: "currentColor",
@@ -6435,23 +6505,23 @@ var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { s
     clipRule: "evenodd"
   }
 ) });
-var DataGridSearchIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx55(
+var DataGridSearchIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx56(
   "path",
   {
     fill: "currentColor",
     d: "m20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8a7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42M5 11a6 6 0 1 1 6 6a6 6 0 0 1-6-6"
   }
 ) });
-var DataGridCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx55(
+var DataGridCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx56(
   "path",
   {
     fill: "currentColor",
     d: "m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
   }
 ) });
-var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs34("g", { fill: "none", children: [
-  /* @__PURE__ */ jsx55("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
-  /* @__PURE__ */ jsx55(
+var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs35("g", { fill: "none", children: [
+  /* @__PURE__ */ jsx56("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6459,16 +6529,16 @@ var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: {
     }
   )
 ] }) });
-var DataGridDensityCompactIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx55(
+var DataGridDensityCompactIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx56(
   "path",
   {
     fill: "currentColor",
     d: "M4 15.5q-.425 0-.712-.288T3 14.5V14q0-.425.288-.712T4 13h16q.425 0 .713.288T21 14v.5q0 .425-.288.713T20 15.5zM4 11q-.425 0-.712-.288T3 10v-.5q0-.425.288-.712T4 8.5h16q.425 0 .713.288T21 9.5v.5q0 .425-.288.713T20 11zm0-4.5q-.425 0-.712-.288T3 5.5V5q0-.425.288-.712T4 4h16q.425 0 .713.288T21 5v.5q0 .425-.288.713T20 6.5zM4 20q-.425 0-.712-.288T3 19v-.5q0-.425.288-.712T4 17.5h16q.425 0 .713.288T21 18.5v.5q0 .425-.288.713T20 20z"
   }
 ) });
-var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs34("g", { fill: "none", fillRule: "evenodd", children: [
-  /* @__PURE__ */ jsx55("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
-  /* @__PURE__ */ jsx55(
+var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs35("g", { fill: "none", fillRule: "evenodd", children: [
+  /* @__PURE__ */ jsx56("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6476,9 +6546,9 @@ var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ jsx55(Svg
     }
   )
 ] }) });
-var DataGridDensityStandardIcon = ({ ...props }) => /* @__PURE__ */ jsx55(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs34("g", { fill: "none", children: [
-  /* @__PURE__ */ jsx55("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
-  /* @__PURE__ */ jsx55(
+var DataGridDensityStandardIcon = ({ ...props }) => /* @__PURE__ */ jsx56(SvgIcon2, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs35("g", { fill: "none", children: [
+  /* @__PURE__ */ jsx56("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+  /* @__PURE__ */ jsx56(
     "path",
     {
       fill: "currentColor",
@@ -6638,12 +6708,12 @@ var buttonGroup = { MuiButtonGroup };
 // src/theme/core/components/autocomplete.tsx
 import { svgIconClasses as svgIconClasses3 } from "@mui/material/SvgIcon";
 import { autocompleteClasses as autocompleteClasses3 } from "@mui/material/Autocomplete";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var MuiAutocomplete = {
   /** **************************************
    * DEFAULT PROPS
    *************************************** */
-  defaultProps: { popupIcon: /* @__PURE__ */ jsx56(Icon, { icon: "NavArrowDown" }) },
+  defaultProps: { popupIcon: /* @__PURE__ */ jsx57(Icon, { icon: "NavArrowDown" }) },
   /** **************************************
    * STYLE
    *************************************** */
@@ -6767,8 +6837,8 @@ var MuiToggleButtonGroup = {
 var toggleButton = { MuiToggleButton, MuiToggleButtonGroup };
 
 // src/theme/core/components/mui-x-date-picker.tsx
-import IconButton5 from "@mui/material/IconButton";
-import Typography7 from "@mui/material/Typography";
+import IconButton7 from "@mui/material/IconButton";
+import Typography13 from "@mui/material/Typography";
 import { buttonClasses as buttonClasses3 } from "@mui/material/Button";
 import { styled as styled3 } from "@mui/material/styles";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
@@ -6792,12 +6862,19 @@ __export(components_exports2, {
   CloudUpload: () => CloudUpload,
   Copy: () => Copy,
   CopyButton: () => CopyButton,
+  CustomDialog: () => CustomDialog,
+  CustomDrawer: () => CustomDrawer,
+  DateRangeDropdown: () => DateRangeDropdown,
+  DateRangePicker: () => DateRangePicker,
   Download: () => Download,
   EmptyContent: () => EmptyContent,
   ErrorToast: () => ErrorToast,
   Eye: () => Eye,
   EyeClosed: () => EyeClosed,
+  FeedbackDialog: () => FeedbackDialog,
   Field: () => Field,
+  FilterDropdown: () => FilterDropdown,
+  FilterList: () => FilterList,
   Form: () => Form,
   HelpCircle: () => HelpCircle,
   Icon: () => Icon,
@@ -6820,6 +6897,7 @@ __export(components_exports2, {
   RHFAutocomplete: () => RHFAutocomplete,
   RHFCheckbox: () => RHFCheckbox,
   RHFDatePicker: () => RHFDatePicker,
+  RHFDateRangePicker: () => RHFDateRangePicker,
   RHFDateTimePicker: () => RHFDateTimePicker,
   RHFMultiCheckbox: () => RHFMultiCheckbox,
   RHFMultiSwitch: () => RHFMultiSwitch,
@@ -6834,6 +6912,7 @@ __export(components_exports2, {
   Search: () => Search,
   Settings: () => Settings,
   SortDown: () => SortDown,
+  SortDropdown: () => SortDropdown,
   SortUp: () => SortUp,
   SplashScreen: () => SplashScreen,
   StatDown: () => StatDown,
@@ -6842,6 +6921,14 @@ __export(components_exports2, {
   Table: () => Table,
   TablePagination: () => TablePagination,
   Toast: () => Toast,
+  ToolbarButton: () => ToolbarButton,
+  ToolbarDatePickerButton: () => ToolbarDatePickerButton,
+  ToolbarFilterButton: () => ToolbarFilterButton,
+  ToolbarSearchField: () => ToolbarSearchField,
+  ToolbarSettingsButton: () => ToolbarSettingsButton,
+  ToolbarSortButton: () => ToolbarSortButton,
+  ToolbarTodayButton: () => ToolbarTodayButton,
+  ToolbarViewSwitcher: () => ToolbarViewSwitcher,
   Trash: () => Trash,
   Upload: () => Upload,
   User: () => User,
@@ -6849,13 +6936,19 @@ __export(components_exports2, {
   WarningToast: () => WarningToast,
   XMark: () => XMark,
   XMarkSolid: () => XMarkSolid,
-  iconClasses: () => iconClasses
+  defaultPresets: () => defaultPresets,
+  dialogClasses: () => dialogClasses,
+  drawerClasses: () => drawerClasses,
+  feedbackDialogClasses: () => feedbackDialogClasses,
+  getDateRangeFromPreset: () => getDateRangeFromPreset,
+  iconClasses: () => iconClasses,
+  toolbarClasses: () => toolbarClasses
 });
 
 // src/components/Logo/index.tsx
 import Link from "@mui/material/Link";
 import Box2 from "@mui/material/Box";
-import { jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
 var LOGO_MAP = {
   full: {
     black: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077834/define-agency/logos/logo-black-full_mjngwu.png",
@@ -6883,7 +6976,7 @@ var Logo = ({
   const type = isFull ? "full" : "single";
   const color = isWhite ? "white" : isBlack ? "black" : "default";
   const logoImg = src ?? LOGO_MAP[type][color];
-  const logo = /* @__PURE__ */ jsx57(
+  const logo = /* @__PURE__ */ jsx58(
     Box2,
     {
       component: "img",
@@ -6896,10 +6989,10 @@ var Logo = ({
   if (disableLink) {
     return logo;
   }
-  return /* @__PURE__ */ jsx57(Link, { component: LinkComponent, href, sx: { display: "contents" }, children: logo });
+  return /* @__PURE__ */ jsx58(Link, { component: LinkComponent, href, sx: { display: "contents" }, children: logo });
 };
 var AnimatedLogo = () => {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "svg",
     {
       width: "120",
@@ -6908,7 +7001,7 @@ var AnimatedLogo = () => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx57("style", { children: `
+        /* @__PURE__ */ jsx58("style", { children: `
           @keyframes fadeIn {
             from {
               opacity: 0;
@@ -6969,7 +7062,7 @@ var AnimatedLogo = () => {
             transform-origin: center;
           }
         ` }),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           "rect",
           {
             className: "background-rect",
@@ -6980,7 +7073,7 @@ var AnimatedLogo = () => {
             fill: "white"
           }
         ),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           "path",
           {
             className: "bars",
@@ -6988,7 +7081,7 @@ var AnimatedLogo = () => {
             fill: "#5E30EB"
           }
         ),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           "path",
           {
             className: "d-letter",
@@ -7011,7 +7104,7 @@ import { styled } from "@mui/material/styles";
 import Box3 from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
 var EmptyContent = ({
   sx,
   imgUrl,
@@ -7022,7 +7115,7 @@ var EmptyContent = ({
   title = "No data",
   ...rest
 }) => {
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     Stack,
     {
       flexGrow: 1,
@@ -7040,7 +7133,7 @@ var EmptyContent = ({
       },
       ...rest,
       children: [
-        imgUrl && /* @__PURE__ */ jsx58(
+        imgUrl && /* @__PURE__ */ jsx59(
           Box3,
           {
             component: "img",
@@ -7049,7 +7142,7 @@ var EmptyContent = ({
             sx: { width: 1, maxWidth: 160, ...slotProps?.img, mb: 2 }
           }
         ),
-        title && /* @__PURE__ */ jsx58(
+        title && /* @__PURE__ */ jsx59(
           Typography,
           {
             variant: filled ? "h7" : "h6",
@@ -7063,7 +7156,7 @@ var EmptyContent = ({
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx58(
+        description && /* @__PURE__ */ jsx59(
           Typography,
           {
             variant: "h8",
@@ -7083,14 +7176,14 @@ var EmptyContent = ({
 };
 
 // src/components/Table/components/TableNoRows.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var StyledGridOverlay = styled("div")(({ theme }) => ({
   padding: theme.spacing(1.5, 3, 3),
   width: "100%",
   height: "100%"
 }));
 var TableNoRows = (props) => {
-  return /* @__PURE__ */ jsx59(StyledGridOverlay, { children: /* @__PURE__ */ jsx59(EmptyContent, { ...props, sx: { width: "100%" } }) });
+  return /* @__PURE__ */ jsx60(StyledGridOverlay, { children: /* @__PURE__ */ jsx60(EmptyContent, { ...props, sx: { width: "100%" } }) });
 };
 var TableNoRows_default = TableNoRows;
 
@@ -7108,14 +7201,14 @@ import {
   gridPageSizeSelector,
   gridPageCountSelector
 } from "@mui/x-data-grid";
-import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 var TablePagination = () => {
   const theme = useTheme2();
   const apiRef = useGridApiContext();
   const page = useGridSelector(apiRef, gridPageSelector);
   const pageCount = useGridSelector(apiRef, gridPageCountSelector);
   const pageSize = useGridSelector(apiRef, gridPageSizeSelector);
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     Stack2,
     {
       direction: "row",
@@ -7124,7 +7217,7 @@ var TablePagination = () => {
       width: 1,
       p: 1.5,
       children: [
-        /* @__PURE__ */ jsx60(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsx61(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ jsxs38(
           Typography2,
           {
             variant: "h8",
@@ -7136,13 +7229,13 @@ var TablePagination = () => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           Stack2,
           {
             direction: { xs: "column", md: "row" },
             alignItems: { xs: "flex-start", md: "center" },
             spacing: 2,
-            children: /* @__PURE__ */ jsx60(
+            children: /* @__PURE__ */ jsx61(
               Pagination,
               {
                 size: "medium",
@@ -7154,13 +7247,13 @@ var TablePagination = () => {
                 hideNextButton: true,
                 hidePrevButton: true,
                 onChange: (_, value) => apiRef.current.setPage(value - 1),
-                renderItem: (item) => /* @__PURE__ */ jsx60(PaginationItem, { ...item })
+                renderItem: (item) => /* @__PURE__ */ jsx61(PaginationItem, { ...item })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs37(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsxs38(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx61(
             Button,
             {
               color: "inherit",
@@ -7170,7 +7263,7 @@ var TablePagination = () => {
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61(
             Button,
             {
               color: "inherit",
@@ -7187,11 +7280,11 @@ var TablePagination = () => {
 };
 
 // src/components/Table/Table.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var Table = (props) => {
   const { data, showFooter = true, sx, slots, slotProps, ...rest } = props;
   const isEmpty = data.length === 0;
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     DataGrid,
     {
       rowHeight: 56,
@@ -7255,7 +7348,7 @@ var imageClasses = {
 };
 
 // src/components/Image/index.tsx
-import { jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 var Image = forwardRef(function Image2(props, ref) {
   const {
     src,
@@ -7354,7 +7447,7 @@ var Image = forwardRef(function Image2(props, ref) {
   const showLoader = status === "idle" || status === "loading";
   const showError = status === "error";
   const loadingAttr = lazy ? "lazy" : imgLoading ?? "eager";
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     Box4,
     {
       className: imageClasses.root.concat(className ? ` ${className}` : ""),
@@ -7363,13 +7456,13 @@ var Image = forwardRef(function Image2(props, ref) {
         display: "block",
         width: 1,
         lineHeight: 0,
-        overflow: aspectRatio ? "hidden" : void 0,
+        overflow: "hidden",
         ...aspectRatio && { aspectRatio },
         ...sx
       },
       ...rest,
       children: [
-        showLoader && (loadingIndicator ?? /* @__PURE__ */ jsx62(
+        showLoader && (loadingIndicator ?? /* @__PURE__ */ jsx63(
           Skeleton,
           {
             animation: "wave",
@@ -7384,7 +7477,7 @@ var Image = forwardRef(function Image2(props, ref) {
             }
           }
         )),
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           Box4,
           {
             ref: setRefs,
@@ -7413,7 +7506,7 @@ var Image = forwardRef(function Image2(props, ref) {
             }
           }
         ),
-        withOverlay && !showError && /* @__PURE__ */ jsx62(
+        withOverlay && !showError && /* @__PURE__ */ jsx63(
           Box4,
           {
             className: imageClasses.overlay,
@@ -7425,7 +7518,7 @@ var Image = forwardRef(function Image2(props, ref) {
             children: overlay
           }
         ),
-        showError && (renderError ?? /* @__PURE__ */ jsx62(
+        showError && (renderError ?? /* @__PURE__ */ jsx63(
           Box4,
           {
             className: imageClasses.overlay,
@@ -7484,7 +7577,7 @@ var toasterClasses = {
 
 // src/components/Toast/styles.ts
 var StyledToaster = styled2(Toaster)(({ theme }) => {
-  const baseStyles2 = {
+  const baseStyles6 = {
     toastDefault: {
       padding: theme.spacing(1.5),
       boxShadow: theme.customShadows["shadow-lg"],
@@ -7600,7 +7693,7 @@ var StyledToaster = styled2(Toaster)(({ theme }) => {
      */
     "@keyframes rotate": { to: { transform: "rotate(1turn)" } },
     [`& .${toasterClasses.default}`]: {
-      ...baseStyles2.toastDefault,
+      ...baseStyles6.toastDefault,
       [`&:has(${toasterClasses.closeBtnVisible})`]: {
         [`& .${toasterClasses.content}`]: {
           paddingRight: 32
@@ -7611,7 +7704,7 @@ var StyledToaster = styled2(Toaster)(({ theme }) => {
      * Error
      */
     [`& .${toasterClasses.error}`]: {
-      ...baseStyles2.toastColor,
+      ...baseStyles6.toastColor,
       [`& .${toasterClasses.icon}`]: {
         color: theme.vars.palette.error.main
       }
@@ -7620,7 +7713,7 @@ var StyledToaster = styled2(Toaster)(({ theme }) => {
      * Success
      */
     [`& .${toasterClasses.success}`]: {
-      ...baseStyles2.toastColor,
+      ...baseStyles6.toastColor,
       [`& .${toasterClasses.icon}`]: {
         color: theme.vars.palette.success.main
       }
@@ -7629,7 +7722,7 @@ var StyledToaster = styled2(Toaster)(({ theme }) => {
      * Warning
      */
     [`& .${toasterClasses.warning}`]: {
-      ...baseStyles2.toastColor,
+      ...baseStyles6.toastColor,
       [`& .${toasterClasses.icon}`]: {
         color: theme.vars.palette.warning.main
       }
@@ -7638,7 +7731,7 @@ var StyledToaster = styled2(Toaster)(({ theme }) => {
      * Info
      */
     [`& .${toasterClasses.info}`]: {
-      ...baseStyles2.toastColor,
+      ...baseStyles6.toastColor,
       [`& .${toasterClasses.icon}`]: {
         color: theme.vars.palette.info.main
       }
@@ -7649,9 +7742,9 @@ var StyledToaster = styled2(Toaster)(({ theme }) => {
 // src/components/Toast/index.tsx
 __reExport(Toast_exports, sonner_star);
 import * as sonner_star from "sonner";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var Toast = () => {
-  return /* @__PURE__ */ jsx63(Portal, { children: /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(Portal, { children: /* @__PURE__ */ jsx64(
     StyledToaster,
     {
       expand: true,
@@ -7683,12 +7776,12 @@ var Toast = () => {
         }
       },
       icons: {
-        loading: /* @__PURE__ */ jsx63("span", { className: toasterClasses.loadingIcon }),
-        info: /* @__PURE__ */ jsx63(Icon, { className: toasterClasses.iconSvg, icon: "InfoToast" }),
-        success: /* @__PURE__ */ jsx63(Icon, { className: toasterClasses.iconSvg, icon: "SuccessToast" }),
-        warning: /* @__PURE__ */ jsx63(Icon, { className: toasterClasses.iconSvg, icon: "WarningToast" }),
-        error: /* @__PURE__ */ jsx63(Icon, { className: toasterClasses.iconSvg, icon: "ErrorToast" }),
-        close: /* @__PURE__ */ jsx63(Icon, { className: toasterClasses.iconSvg, icon: "XMark" })
+        loading: /* @__PURE__ */ jsx64("span", { className: toasterClasses.loadingIcon }),
+        info: /* @__PURE__ */ jsx64(Icon, { className: toasterClasses.iconSvg, icon: "InfoToast" }),
+        success: /* @__PURE__ */ jsx64(Icon, { className: toasterClasses.iconSvg, icon: "SuccessToast" }),
+        warning: /* @__PURE__ */ jsx64(Icon, { className: toasterClasses.iconSvg, icon: "WarningToast" }),
+        error: /* @__PURE__ */ jsx64(Icon, { className: toasterClasses.iconSvg, icon: "ErrorToast" }),
+        close: /* @__PURE__ */ jsx64(Icon, { className: toasterClasses.iconSvg, icon: "XMark" })
       }
     }
   ) });
@@ -7707,9 +7800,9 @@ import FormHelperText from "@mui/material/FormHelperText";
 // src/components/Upload/components/Placeholder.tsx
 import Stack3 from "@mui/material/Stack";
 import Box5 from "@mui/material/Box";
-import { jsx as jsx64, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs40 } from "react/jsx-runtime";
 var UploadPlaceholder = ({ hasError, ...rest }) => {
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     Box5,
     {
       sx: {
@@ -7720,7 +7813,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx64(
+        /* @__PURE__ */ jsx65(
           Icon,
           {
             icon: "CloudUpload",
@@ -7731,10 +7824,10 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsxs39(Stack3, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
-          /* @__PURE__ */ jsxs39(Box5, { sx: { typography: "h8" }, children: [
+        /* @__PURE__ */ jsxs40(Stack3, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
+          /* @__PURE__ */ jsxs40(Box5, { sx: { typography: "h8" }, children: [
             "Drag files here or",
-            /* @__PURE__ */ jsx64(
+            /* @__PURE__ */ jsx65(
               Box5,
               {
                 component: "span",
@@ -7747,7 +7840,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs39(
+          /* @__PURE__ */ jsxs40(
             Box5,
             {
               sx: {
@@ -7802,12 +7895,12 @@ var fileData = (file) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-import { jsx as jsx65, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs41 } from "react/jsx-runtime";
 var RejectionFiles = ({ files }) => {
   if (!files.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     Paper,
     {
       variant: "outlined",
@@ -7822,13 +7915,13 @@ var RejectionFiles = ({ files }) => {
       },
       children: files.map(({ file, errors }) => {
         const { path, size } = fileData(file);
-        return /* @__PURE__ */ jsxs40(Box6, { sx: { my: 1 }, children: [
-          /* @__PURE__ */ jsxs40(Typography3, { variant: "subtitle2", noWrap: true, children: [
+        return /* @__PURE__ */ jsxs41(Box6, { sx: { my: 1 }, children: [
+          /* @__PURE__ */ jsxs41(Typography3, { variant: "subtitle2", noWrap: true, children: [
             path,
             " - ",
             size ? fData(size) : ""
           ] }),
-          errors.map((error2) => /* @__PURE__ */ jsxs40(Box6, { component: "span", sx: { typography: "caption" }, children: [
+          errors.map((error2) => /* @__PURE__ */ jsxs41(Box6, { component: "span", sx: { typography: "caption" }, children: [
             "- ",
             error2.message
           ] }, error2.code))
@@ -7841,9 +7934,9 @@ var RejectionFiles = ({ files }) => {
 // src/components/Upload/components/UploadProgress.tsx
 import Box7 from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
-import { jsx as jsx66, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs42 } from "react/jsx-runtime";
 var UploadProgress = ({ progress: progress2 = 20 }) => {
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     Box7,
     {
       sx: {
@@ -7854,8 +7947,8 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
         height: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs41(Box7, { sx: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsxs42(Box7, { sx: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ jsx67(
             CircularProgress,
             {
               variant: "determinate",
@@ -7868,7 +7961,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(
             CircularProgress,
             {
               variant: "determinate",
@@ -7880,7 +7973,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(
             Box7,
             {
               sx: {
@@ -7893,11 +7986,11 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx66(Box7, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
+              children: /* @__PURE__ */ jsx67(Box7, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx66(Box7, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
+        /* @__PURE__ */ jsx67(Box7, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
       ]
     }
   );
@@ -7911,11 +8004,11 @@ import IconButton2 from "@mui/material/IconButton";
 // src/components/Upload/components/SingleFilePreview.tsx
 import Box8 from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var SingleFilePreview = ({ file }) => {
   const fileName = typeof file === "string" ? file : file.name;
   const previewUrl = typeof file === "string" ? file : URL.createObjectURL(file);
-  const renderImg = /* @__PURE__ */ jsx67(
+  const renderImg = /* @__PURE__ */ jsx68(
     Box8,
     {
       component: "img",
@@ -7929,7 +8022,7 @@ var SingleFilePreview = ({ file }) => {
       }
     }
   );
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     Box8,
     {
       sx: {
@@ -7945,7 +8038,7 @@ var SingleFilePreview = ({ file }) => {
   );
 };
 var DeleteButton = ({ sx, ...rest }) => {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     IconButton,
     {
       size: "small",
@@ -7964,13 +8057,13 @@ var DeleteButton = ({ sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx67(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
+      children: /* @__PURE__ */ jsx68(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
     }
   );
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
 var MultiFilePreview = ({ files, onRemove }) => {
   const scrollRef = useRef5(null);
   const handleScroll = (direction) => {
@@ -7984,8 +8077,8 @@ var MultiFilePreview = ({ files, onRemove }) => {
     }
   };
   const showNavigation = files.length > 2;
-  return /* @__PURE__ */ jsxs42(Box9, { sx: { position: "relative", width: 1 }, children: [
-    showNavigation && /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs43(Box9, { sx: { position: "relative", width: 1 }, children: [
+    showNavigation && /* @__PURE__ */ jsx69(
       IconButton2,
       {
         size: "small",
@@ -8002,10 +8095,10 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ jsx68(Icon, { icon: "NavArrowLeft", width: 20 })
+        children: /* @__PURE__ */ jsx69(Icon, { icon: "NavArrowLeft", width: 20 })
       }
     ),
-    /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsx69(
       Box9,
       {
         ref: scrollRef,
@@ -8024,7 +8117,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
         children: files.map((file, index) => {
           const fileName = typeof file === "string" ? file : file.name;
           const previewUrl = typeof file === "string" ? file : URL.createObjectURL(file);
-          return /* @__PURE__ */ jsxs42(
+          return /* @__PURE__ */ jsxs43(
             Box9,
             {
               sx: {
@@ -8036,7 +8129,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
                 flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ jsx68(
+                /* @__PURE__ */ jsx69(
                   Box9,
                   {
                     component: "img",
@@ -8050,7 +8143,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
                     }
                   }
                 ),
-                onRemove && /* @__PURE__ */ jsx68(
+                onRemove && /* @__PURE__ */ jsx69(
                   DeleteButton,
                   {
                     onClick: (e) => {
@@ -8066,7 +8159,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
         })
       }
     ),
-    showNavigation && /* @__PURE__ */ jsx68(
+    showNavigation && /* @__PURE__ */ jsx69(
       IconButton2,
       {
         size: "small",
@@ -8083,14 +8176,14 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ jsx68(Icon, { icon: "NavArrowRight", width: 20 })
+        children: /* @__PURE__ */ jsx69(Icon, { icon: "NavArrowRight", width: 20 })
       }
     )
   ] });
 };
 
 // src/components/Upload/Upload.tsx
-import { jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
 var Upload = ({
   sx,
   value,
@@ -8117,19 +8210,19 @@ var Upload = ({
   const hasError = isDragReject || !!error2;
   const renderContent = () => {
     if (isUploading) {
-      return /* @__PURE__ */ jsx69(UploadProgress, { progress: uploadProgress });
+      return /* @__PURE__ */ jsx70(UploadProgress, { progress: uploadProgress });
     }
     if (hasFile) {
-      return /* @__PURE__ */ jsx69(SingleFilePreview, { file: value });
+      return /* @__PURE__ */ jsx70(SingleFilePreview, { file: value });
     }
     if (hasFiles) {
-      return /* @__PURE__ */ jsx69(MultiFilePreview, { files: value, onRemove });
+      return /* @__PURE__ */ jsx70(MultiFilePreview, { files: value, onRemove });
     }
-    return /* @__PURE__ */ jsx69(UploadPlaceholder, { hasError });
+    return /* @__PURE__ */ jsx70(UploadPlaceholder, { hasError });
   };
   const shouldShowDropzone = !hasFile && !hasFiles && !isUploading;
-  return /* @__PURE__ */ jsxs43(Box10, { sx: { width: 1, position: "relative", ...sx }, children: [
-    /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(Box10, { sx: { width: 1, position: "relative", ...sx }, children: [
+    /* @__PURE__ */ jsxs44(
       Box10,
       {
         ...shouldShowDropzone ? getRootProps() : {},
@@ -8168,61 +8261,1353 @@ var Upload = ({
           }
         },
         children: [
-          shouldShowDropzone && /* @__PURE__ */ jsx69("input", { ...getInputProps() }),
+          shouldShowDropzone && /* @__PURE__ */ jsx70("input", { ...getInputProps() }),
           renderContent()
         ]
       }
     ),
-    hasFile && !isUploading && /* @__PURE__ */ jsx69(DeleteButton, { onClick: onDelete }),
-    hasFiles && /* @__PURE__ */ jsxs43(Stack4, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
-      onRemoveAll && /* @__PURE__ */ jsx69(
+    hasFile && !isUploading && /* @__PURE__ */ jsx70(DeleteButton, { onClick: onDelete }),
+    hasFiles && /* @__PURE__ */ jsxs44(Stack4, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
+      onRemoveAll && /* @__PURE__ */ jsx70(
         Button2,
         {
           variant: "outlined",
           color: "inherit",
           size: "small",
           onClick: onRemoveAll,
-          startIcon: /* @__PURE__ */ jsx69(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ jsx70(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
           children: "Remove all"
         }
       ),
-      onUpload && /* @__PURE__ */ jsx69(
+      onUpload && /* @__PURE__ */ jsx70(
         Button2,
         {
           variant: "contained",
           size: "small",
           onClick: onUpload,
-          startIcon: /* @__PURE__ */ jsx69(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ jsx70(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
           children: "Upload files"
         }
       )
     ] }),
-    helperText && /* @__PURE__ */ jsx69(FormHelperText, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
-    /* @__PURE__ */ jsx69(RejectionFiles, { files: [...fileRejections] })
+    helperText && /* @__PURE__ */ jsx70(FormHelperText, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
+    /* @__PURE__ */ jsx70(RejectionFiles, { files: [...fileRejections] })
   ] });
 };
 
-// src/components/HookForm/Form.tsx
-import {
-  FormProvider as RHFForm
-} from "react-hook-form";
+// src/components/Dialog/classes.ts
+var dialogClasses = {
+  root: "undefine__Dialog-root",
+  closeButton: "undefine__Dialog-closeButton"
+};
+var feedbackDialogClasses = {
+  root: "undefine__FeedbackDialog-root",
+  image: "undefine__FeedbackDialog-image",
+  title: "undefine__FeedbackDialog-title",
+  description: "undefine__FeedbackDialog-description",
+  actions: "undefine__FeedbackDialog-actions"
+};
+
+// src/components/Dialog/CustomDialog.tsx
 import Box11 from "@mui/material/Box";
-import { jsx as jsx70 } from "react/jsx-runtime";
-var Form = ({
-  children,
-  onSubmit,
-  methods,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx70(RHFForm, { ...methods, children: /* @__PURE__ */ jsx70(
-    Box11,
+import IconButton3 from "@mui/material/IconButton";
+import Dialog from "@mui/material/Dialog";
+import { jsx as jsx71, jsxs as jsxs45 } from "react/jsx-runtime";
+var CustomDialog = ({ children, onClose, className, ...props }) => {
+  return /* @__PURE__ */ jsxs45(
+    Dialog,
     {
-      component: "form",
-      onSubmit: (e) => {
-        e.preventDefault();
-        if (onSubmit) {
-          methods.handleSubmit(onSubmit)();
-        }
+      className: dialogClasses.root.concat(className ? ` ${className}` : ""),
+      onClose,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx71(
+          IconButton3,
+          {
+            "aria-label": "close",
+            onClick: onClose,
+            className: dialogClasses.closeButton,
+            sx: {
+              position: "absolute",
+              right: 24,
+              top: 24,
+              color: (theme) => theme.vars.palette.text.body,
+              zIndex: 1
+            },
+            children: /* @__PURE__ */ jsx71(Icon, { icon: "XMark", sx: { width: 25, height: 24 } })
+          }
+        ),
+        /* @__PURE__ */ jsx71(Box11, { sx: { p: 4, pt: 9.5 }, children })
+      ]
+    }
+  );
+};
+
+// src/components/Dialog/FeedbackDialog.tsx
+import Stack5 from "@mui/material/Stack";
+import Box12 from "@mui/material/Box";
+import Typography4 from "@mui/material/Typography";
+import { jsx as jsx72, jsxs as jsxs46 } from "react/jsx-runtime";
+var FeedbackDialog = ({
+  image,
+  title,
+  description,
+  actions,
+  feedbackSlotProps,
+  slotProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx72(
+    CustomDialog,
+    {
+      slotProps: {
+        ...slotProps,
+        paper: {
+          sx: { minWidth: 360, maxWidth: 420 },
+          ...slotProps?.paper
+        }
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxs46(Stack5, { className: feedbackDialogClasses.root, alignItems: "center", spacing: 2.5, children: [
+        image && /* @__PURE__ */ jsx72(
+          Box12,
+          {
+            component: "img",
+            alt: "feedback",
+            src: image,
+            className: feedbackDialogClasses.image,
+            sx: {
+              width: 80,
+              height: 80,
+              objectFit: "contain",
+              ...feedbackSlotProps?.image
+            }
+          }
+        ),
+        title && /* @__PURE__ */ jsx72(
+          Typography4,
+          {
+            variant: "h4",
+            className: feedbackDialogClasses.title,
+            sx: {
+              textAlign: "center",
+              fontWeight: 500,
+              color: "text.header",
+              ...feedbackSlotProps?.title
+            },
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx72(
+          Typography4,
+          {
+            variant: "body2",
+            className: feedbackDialogClasses.description,
+            sx: {
+              textAlign: "center",
+              color: "text.body",
+              ...feedbackSlotProps?.description
+            },
+            children: description
+          }
+        ),
+        actions && /* @__PURE__ */ jsx72(
+          Box12,
+          {
+            className: feedbackDialogClasses.actions,
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 1,
+              width: "100%",
+              ...feedbackSlotProps?.actions
+            },
+            children: actions
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/Drawer/classes.ts
+var drawerClasses = {
+  root: "undefine__Drawer-root",
+  header: "undefine__Drawer-header",
+  title: "undefine__Drawer-title",
+  closeButton: "undefine__Drawer-closeButton",
+  content: "undefine__Drawer-content"
+};
+
+// src/components/Drawer/CustomDrawer.tsx
+import Box13 from "@mui/material/Box";
+import IconButton4 from "@mui/material/IconButton";
+import Typography5 from "@mui/material/Typography";
+import MuiDrawer2 from "@mui/material/Drawer";
+import { jsx as jsx73, jsxs as jsxs47 } from "react/jsx-runtime";
+var CustomDrawer = ({
+  title,
+  children,
+  onClose,
+  className,
+  anchor = "right",
+  slotProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs47(
+    MuiDrawer2,
+    {
+      anchor,
+      className: drawerClasses.root.concat(className ? ` ${className}` : ""),
+      onClose,
+      slotProps: {
+        ...slotProps,
+        paper: {
+          sx: {
+            width: { xs: "100%", sm: 400 },
+            display: "flex",
+            flexDirection: "column"
+          },
+          ...slotProps?.paper
+        }
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs47(
+          Box13,
+          {
+            className: drawerClasses.header,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              p: 4,
+              borderBottom: (theme) => `0.5px solid ${theme.vars.palette.border.mute}`,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx73(
+                Typography5,
+                {
+                  variant: "h4",
+                  className: drawerClasses.title,
+                  sx: {
+                    fontWeight: 500,
+                    color: "text.header",
+                    letterSpacing: "-1px",
+                    flex: 1
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx73(
+                IconButton4,
+                {
+                  "aria-label": "close",
+                  onClick: onClose,
+                  className: drawerClasses.closeButton,
+                  sx: {
+                    color: "text.body",
+                    p: 0
+                  },
+                  children: /* @__PURE__ */ jsx73(Icon, { icon: "XMark", sx: { width: 25, height: 24 } })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx73(
+          Box13,
+          {
+            className: drawerClasses.content,
+            sx: {
+              flex: 1,
+              overflow: "auto",
+              p: 4,
+              pt: 3
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toolbar/classes.ts
+var toolbarClasses = {
+  root: "undefine__Toolbar-root",
+  button: "undefine__Toolbar-button",
+  buttonOpen: "undefine__Toolbar-button--open",
+  buttonIcon: "undefine__Toolbar-button-icon",
+  buttonLabel: "undefine__Toolbar-button-label",
+  searchField: "undefine__Toolbar-searchField",
+  searchFieldFocused: "undefine__Toolbar-searchField--focused",
+  searchIcon: "undefine__Toolbar-searchIcon",
+  searchInput: "undefine__Toolbar-searchInput",
+  searchClearButton: "undefine__Toolbar-searchClearButton",
+  viewSwitcher: "undefine__Toolbar-viewSwitcher",
+  viewSwitcherLabel: "undefine__Toolbar-viewSwitcher-label",
+  viewSwitcherIcon: "undefine__Toolbar-viewSwitcher-icon",
+  filterDropdown: "undefine__Toolbar-filterDropdown",
+  sortDropdown: "undefine__Toolbar-sortDropdown",
+  dateRangeDropdown: "undefine__Toolbar-dateRangeDropdown"
+};
+
+// src/components/Toolbar/SortDropdown.tsx
+import { useState as useState10, forwardRef as forwardRef2, useCallback as useCallback9 } from "react";
+import Box14 from "@mui/material/Box";
+import Radio from "@mui/material/Radio";
+import Popover from "@mui/material/Popover";
+import Typography7 from "@mui/material/Typography";
+import ButtonBase2 from "@mui/material/ButtonBase";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+
+// src/components/Toolbar/ToolbarButton.tsx
+import Typography6 from "@mui/material/Typography";
+import ButtonBase from "@mui/material/ButtonBase";
+import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+var baseStyles2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  px: 1.25,
+  py: 0.75,
+  bgcolor: "common.white",
+  border: "0.5px solid",
+  borderColor: "border.mute",
+  borderBottomWidth: "1.5px",
+  cursor: "pointer",
+  "&:hover": {
+    bgcolor: "grey.50"
+  }
+};
+var openStyles = {
+  boxShadow: "0px 0px 0px 1.6px white, 0px 0px 0px 3.2px var(--mui-palette-primary-300)"
+};
+var ToolbarButton = ({
+  icon: icon2,
+  label,
+  open = false,
+  className,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs48(
+    ButtonBase,
+    {
+      className: toolbarClasses.button.concat(
+        open ? ` ${toolbarClasses.buttonOpen}` : "",
+        className ? ` ${className}` : ""
+      ),
+      sx: {
+        ...baseStyles2,
+        borderRadius: (theme) => theme.radius["radius-md"],
+        ...open && openStyles,
+        ...sx
+      },
+      ...props,
+      children: [
+        icon2 && /* @__PURE__ */ jsx74(
+          Icon,
+          {
+            icon: icon2,
+            className: toolbarClasses.buttonIcon,
+            sx: { width: 16, height: 16, color: "text.header" }
+          }
+        ),
+        label && /* @__PURE__ */ jsx74(
+          Typography6,
+          {
+            variant: "body2",
+            className: toolbarClasses.buttonLabel,
+            sx: {
+              fontSize: 14,
+              lineHeight: "22px",
+              color: "text.header",
+              whiteSpace: "nowrap"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toolbar/ToolbarSortButton.tsx
+import { jsx as jsx75 } from "react/jsx-runtime";
+var ToolbarSortButton = ({ label = "Sort", ...props }) => {
+  return /* @__PURE__ */ jsx75(ToolbarButton, { icon: "SortUp", label, ...props });
+};
+
+// src/components/Toolbar/SortDropdown.tsx
+import { jsx as jsx76, jsxs as jsxs49 } from "react/jsx-runtime";
+var SortDropdown = forwardRef2(
+  ({
+    options,
+    value: externalValue,
+    direction: externalDirection = "asc",
+    onChange,
+    onClose,
+    buttonLabel = "Sort",
+    ascLabel = "Ascending",
+    descLabel = "Descending",
+    popoverSx,
+    PopoverProps,
+    disabled
+  }, ref) => {
+    const [anchorEl, setAnchorEl] = useState10(null);
+    const [internalValue, setInternalValue] = useState10(options[0]?.value || "");
+    const [internalDirection, setInternalDirection] = useState10("asc");
+    const open = Boolean(anchorEl);
+    const currentValue = externalValue ?? internalValue;
+    const currentDirection = externalValue !== void 0 ? externalDirection : internalDirection;
+    const handleOpen = useCallback9((event) => {
+      setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = useCallback9(() => {
+      setAnchorEl(null);
+      onClose?.();
+    }, [onClose]);
+    const handleValueChange = useCallback9(
+      (event) => {
+        const newValue = event.target.value;
+        if (externalValue === void 0) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue, currentDirection);
+      },
+      [externalValue, onChange, currentDirection]
+    );
+    const handleDirectionChange = useCallback9(
+      (newDirection) => {
+        if (externalValue === void 0) {
+          setInternalDirection(newDirection);
+        }
+        onChange?.(currentValue, newDirection);
+      },
+      [externalValue, onChange, currentValue]
+    );
+    return /* @__PURE__ */ jsxs49(Box14, { ref, className: toolbarClasses.sortDropdown, children: [
+      /* @__PURE__ */ jsx76(
+        ToolbarSortButton,
+        {
+          label: buttonLabel,
+          open,
+          onClick: handleOpen,
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxs49(
+        Popover,
+        {
+          open,
+          anchorEl,
+          onClose: handleClose,
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: "right" },
+          slotProps: {
+            paper: {
+              sx: {
+                pb: 0,
+                px: 0,
+                ...popoverSx
+              }
+            }
+          },
+          ...PopoverProps,
+          children: [
+            /* @__PURE__ */ jsx76(RadioGroup, { value: currentValue, onChange: handleValueChange, sx: { px: 1, py: 0.5 }, children: options.map((option) => /* @__PURE__ */ jsx76(
+              FormControlLabel,
+              {
+                value: option.value,
+                control: /* @__PURE__ */ jsx76(
+                  Radio,
+                  {
+                    sx: {
+                      p: 0,
+                      mr: 1,
+                      "& .MuiSvgIcon-root": {
+                        width: 16,
+                        height: 16
+                      },
+                      "&.Mui-checked": {
+                        color: "primary.500"
+                      }
+                    }
+                  }
+                ),
+                label: /* @__PURE__ */ jsx76(
+                  Typography7,
+                  {
+                    sx: {
+                      fontSize: 14,
+                      fontWeight: 500,
+                      lineHeight: "22px",
+                      color: "text.header"
+                    },
+                    children: option.label
+                  }
+                ),
+                sx: {
+                  mx: 0,
+                  mb: 1.5,
+                  alignItems: "center"
+                }
+              },
+              option.value
+            )) }),
+            /* @__PURE__ */ jsxs49(
+              Box14,
+              {
+                sx: {
+                  display: "flex",
+                  borderTop: "0.5px solid",
+                  borderColor: "border.mute",
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs49(
+                    ButtonBase2,
+                    {
+                      onClick: () => handleDirectionChange("asc"),
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 0.875,
+                        px: 1,
+                        py: 0.75,
+                        bgcolor: currentDirection === "asc" ? "primary.100" : "transparent",
+                        transition: "background-color 0.2s",
+                        "&:hover": {
+                          bgcolor: currentDirection === "asc" ? "primary.100" : "grey.50"
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx76(
+                          Icon,
+                          {
+                            icon: "SortUp",
+                            sx: {
+                              width: 16,
+                              height: 16,
+                              color: currentDirection === "asc" ? "text.action" : "text.header"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx76(
+                          Typography7,
+                          {
+                            sx: {
+                              fontSize: 12,
+                              lineHeight: "18px",
+                              color: currentDirection === "asc" ? "text.action" : "text.header"
+                            },
+                            children: ascLabel
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs49(
+                    ButtonBase2,
+                    {
+                      onClick: () => handleDirectionChange("desc"),
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 0.875,
+                        px: 1,
+                        py: 0.75,
+                        bgcolor: currentDirection === "desc" ? "primary.100" : "transparent",
+                        transition: "background-color 0.2s",
+                        "&:hover": {
+                          bgcolor: currentDirection === "desc" ? "primary.100" : "grey.50"
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx76(
+                          Icon,
+                          {
+                            icon: "SortDown",
+                            sx: {
+                              width: 16,
+                              height: 16,
+                              color: currentDirection === "desc" ? "text.action" : "text.header"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx76(
+                          Typography7,
+                          {
+                            sx: {
+                              fontSize: 12,
+                              lineHeight: "18px",
+                              color: currentDirection === "desc" ? "text.action" : "text.header"
+                            },
+                            children: descLabel
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+SortDropdown.displayName = "SortDropdown";
+
+// src/components/Toolbar/FilterDropdown.tsx
+import { useState as useState11, forwardRef as forwardRef3, useCallback as useCallback10 } from "react";
+import Box15 from "@mui/material/Box";
+import Popover2 from "@mui/material/Popover";
+
+// src/components/Toolbar/ToolbarFilterButton.tsx
+import { jsx as jsx77 } from "react/jsx-runtime";
+var ToolbarFilterButton = ({ label = "Filter", ...props }) => {
+  return /* @__PURE__ */ jsx77(ToolbarButton, { icon: "FilterList", label, ...props });
+};
+
+// src/components/Toolbar/FilterDropdown.tsx
+import { jsx as jsx78, jsxs as jsxs50 } from "react/jsx-runtime";
+var FilterDropdown = forwardRef3(
+  ({ children, onClose, buttonLabel = "Filter", popoverSx, PopoverProps, disabled }, ref) => {
+    const [anchorEl, setAnchorEl] = useState11(null);
+    const open = Boolean(anchorEl);
+    const handleOpen = useCallback10((event) => {
+      setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = useCallback10(() => {
+      setAnchorEl(null);
+      onClose?.();
+    }, [onClose]);
+    return /* @__PURE__ */ jsxs50(Box15, { ref, className: toolbarClasses.filterDropdown, children: [
+      /* @__PURE__ */ jsx78(
+        ToolbarFilterButton,
+        {
+          label: buttonLabel,
+          open,
+          onClick: handleOpen,
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx78(
+        Popover2,
+        {
+          open,
+          anchorEl,
+          onClose: handleClose,
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: "right" },
+          slotProps: {
+            paper: {
+              sx: {
+                mt: 1,
+                p: 2.5,
+                width: 360,
+                borderRadius: (theme) => theme.radius["radius-2xl"],
+                border: "0.5px solid",
+                borderColor: "border.mute",
+                boxShadow: "-1px 2px 10px 0px rgba(0, 0, 0, 0.1)",
+                display: "flex",
+                flexDirection: "column",
+                gap: 2,
+                ...popoverSx
+              }
+            }
+          },
+          ...PopoverProps,
+          children
+        }
+      )
+    ] });
+  }
+);
+FilterDropdown.displayName = "FilterDropdown";
+
+// src/components/Toolbar/DateRangeDropdown.tsx
+import { useMemo as useMemo9, useState as useState13, useCallback as useCallback12 } from "react";
+import { format as format2 } from "date-fns";
+import Popover3 from "@mui/material/Popover";
+
+// src/components/Toolbar/ToolbarDatePickerButton.tsx
+import { jsx as jsx79 } from "react/jsx-runtime";
+var ToolbarDatePickerButton = ({
+  label = "Last 30 days",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx79(ToolbarButton, { icon: "Calendar", label, ...props });
+};
+
+// src/components/DateRangePicker/index.tsx
+import { useMemo as useMemo8, useState as useState12, forwardRef as forwardRef4, useCallback as useCallback11 } from "react";
+import {
+  format,
+  subDays,
+  isAfter,
+  endOfDay,
+  subYears,
+  subMonths,
+  addMonths,
+  startOfDay
+} from "date-fns";
+import Box16 from "@mui/material/Box";
+import Radio2 from "@mui/material/Radio";
+import Button3 from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Typography8 from "@mui/material/Typography";
+import RadioGroup2 from "@mui/material/RadioGroup";
+import FormControlLabel2 from "@mui/material/FormControlLabel";
+import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { jsx as jsx80, jsxs as jsxs51 } from "react/jsx-runtime";
+var defaultPresets = [
+  { value: "today", label: "Today" },
+  { value: "yesterday", label: "Yesterday" },
+  { value: "last7days", label: "Last 7 Days" },
+  { value: "last30days", label: "Last 30 Days" },
+  { value: "last6months", label: "Last 6 Months" },
+  { value: "lastyear", label: "Last Year" },
+  { value: "alltime", label: "All Time" },
+  { value: "custom", label: "Custom Date" }
+];
+function getDateRangeFromPreset(preset) {
+  const today = /* @__PURE__ */ new Date();
+  switch (preset) {
+    case "today":
+      return { start: startOfDay(today), end: endOfDay(today) };
+    case "yesterday":
+      return {
+        start: startOfDay(subDays(today, 1)),
+        end: endOfDay(subDays(today, 1))
+      };
+    case "last7days":
+      return { start: startOfDay(subDays(today, 6)), end: endOfDay(today) };
+    case "last30days":
+      return { start: startOfDay(subDays(today, 29)), end: endOfDay(today) };
+    case "last6months":
+      return { start: startOfDay(subMonths(today, 6)), end: endOfDay(today) };
+    case "lastyear":
+      return { start: startOfDay(subYears(today, 1)), end: endOfDay(today) };
+    case "alltime":
+      return { start: null, end: null };
+    case "custom":
+    default:
+      return { start: null, end: null };
+  }
+}
+var DateRangePicker = forwardRef4(
+  ({
+    value: externalValue,
+    preset: externalPreset,
+    onChange,
+    onCancel,
+    applyLabel = "Apply",
+    cancelLabel = "Cancel",
+    presets = defaultPresets,
+    dateFormat = "dd/MM/yyyy",
+    showPresets = true,
+    showActions = true,
+    sx,
+    minDate,
+    maxDate
+  }, ref) => {
+    const [selectedPreset, setSelectedPreset] = useState12(externalPreset ?? "today");
+    const [tempRange, setTempRange] = useState12(
+      externalValue ?? { start: null, end: null }
+    );
+    const [selectingDate, setSelectingDate] = useState12("start");
+    const handleApply = useCallback11(() => {
+      onChange?.(tempRange, selectedPreset);
+    }, [onChange, tempRange, selectedPreset]);
+    const handlePresetChange = useCallback11((event) => {
+      const newPreset = event.target.value;
+      setSelectedPreset(newPreset);
+      if (newPreset !== "custom") {
+        const newRange = getDateRangeFromPreset(newPreset);
+        setTempRange(newRange);
+      }
+    }, []);
+    const handleCalendarChange = useCallback11(
+      (date) => {
+        if (!date) return;
+        if (selectingDate === "start") {
+          setTempRange((prev) => ({
+            start: date,
+            end: prev.end && isAfter(date, prev.end) ? null : prev.end
+          }));
+          setSelectingDate("end");
+        } else {
+          setTempRange((prev) => ({
+            start: prev.start,
+            end: date
+          }));
+          setSelectingDate("start");
+        }
+        setSelectedPreset("custom");
+      },
+      [selectingDate]
+    );
+    const handleStartDateClick = useCallback11(() => {
+      setSelectingDate("start");
+    }, []);
+    const handleEndDateClick = useCallback11(() => {
+      setSelectingDate("end");
+    }, []);
+    const formattedStartDate = tempRange.start ? format(tempRange.start, dateFormat) : "";
+    const formattedEndDate = tempRange.end ? format(tempRange.end, dateFormat) : "";
+    const leftCalendarMonth = useMemo8(() => {
+      if (tempRange.start) return tempRange.start;
+      return /* @__PURE__ */ new Date();
+    }, [tempRange.start]);
+    const rightCalendarMonth = useMemo8(() => {
+      if (tempRange.end) return tempRange.end;
+      return addMonths(/* @__PURE__ */ new Date(), 1);
+    }, [tempRange.end]);
+    return /* @__PURE__ */ jsx80(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsxs51(
+      Box16,
+      {
+        ref,
+        sx: {
+          display: "flex",
+          bgcolor: "common.white",
+          overflow: "hidden",
+          ...sx
+        },
+        children: [
+          showPresets && /* @__PURE__ */ jsx80(
+            Box16,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 1.5,
+                pt: 2.5,
+                px: 2.5,
+                pb: 0,
+                borderRight: "0.5px solid",
+                borderColor: "border.mute",
+                bgcolor: "common.white"
+              },
+              children: /* @__PURE__ */ jsx80(RadioGroup2, { value: selectedPreset, onChange: handlePresetChange, children: presets.map((preset) => /* @__PURE__ */ jsx80(
+                FormControlLabel2,
+                {
+                  value: preset.value,
+                  control: /* @__PURE__ */ jsx80(Radio2, { size: "small" }),
+                  label: /* @__PURE__ */ jsx80(Typography8, { variant: "body2", children: preset.label }),
+                  sx: { m: 0, mb: 1.5, gap: 1 }
+                },
+                preset.value
+              )) })
+            }
+          ),
+          /* @__PURE__ */ jsxs51(Box16, { sx: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsxs51(
+              Box16,
+              {
+                sx: {
+                  display: "flex",
+                  borderBottom: "0.5px solid",
+                  borderColor: "border.mute"
+                },
+                children: [
+                  /* @__PURE__ */ jsx80(
+                    DateCalendar,
+                    {
+                      value: tempRange.start,
+                      onChange: handleCalendarChange,
+                      referenceDate: leftCalendarMonth,
+                      minDate,
+                      maxDate: tempRange.end || maxDate,
+                      sx: {
+                        width: "auto",
+                        p: 2,
+                        m: 0,
+                        borderRight: "0.5px solid",
+                        borderColor: "border.mute"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx80(
+                    DateCalendar,
+                    {
+                      value: tempRange.end,
+                      onChange: handleCalendarChange,
+                      referenceDate: rightCalendarMonth,
+                      minDate: tempRange.start || minDate,
+                      maxDate,
+                      sx: {
+                        width: "auto",
+                        p: 2,
+                        m: 0
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            showActions && /* @__PURE__ */ jsxs51(
+              Box16,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs51(
+                    Box16,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1.5,
+                        p: 2,
+                        flex: 1
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx80(
+                          TextField,
+                          {
+                            size: "small",
+                            value: formattedStartDate,
+                            onClick: handleStartDateClick,
+                            placeholder: dateFormat,
+                            slotProps: {
+                              input: {
+                                readOnly: true
+                              }
+                            },
+                            sx: { flex: 1 }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx80(Typography8, { color: "text.primary", children: "-" }),
+                        /* @__PURE__ */ jsx80(
+                          TextField,
+                          {
+                            size: "small",
+                            value: formattedEndDate,
+                            onClick: handleEndDateClick,
+                            placeholder: dateFormat,
+                            slotProps: {
+                              input: {
+                                readOnly: true
+                              }
+                            },
+                            sx: { flex: 1 }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs51(Box16, { sx: { display: "flex", gap: 1, px: 2 }, children: [
+                    /* @__PURE__ */ jsx80(Button3, { size: "small", variant: "secondary", color: "neutral", onClick: onCancel, children: cancelLabel }),
+                    /* @__PURE__ */ jsx80(Button3, { size: "small", variant: "primary", onClick: handleApply, children: applyLabel })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+
+// src/components/Toolbar/DateRangeDropdown.tsx
+import { Fragment, jsx as jsx81, jsxs as jsxs52 } from "react/jsx-runtime";
+function DateRangeDropdown({
+  value,
+  preset,
+  onChange,
+  buttonLabel = "Date",
+  presets,
+  dateFormat,
+  applyLabel,
+  cancelLabel,
+  disabled = false,
+  popoverSx,
+  PopoverProps
+}) {
+  const [anchorEl, setAnchorEl] = useState13(null);
+  const open = Boolean(anchorEl);
+  const displayLabel = useMemo9(() => {
+    if (!preset) return buttonLabel;
+    if (preset === "custom" && value?.start && value?.end) {
+      const startYear = value.start.getFullYear();
+      const endYear = value.end.getFullYear();
+      const startStr = startYear !== endYear ? format2(value.start, "MMM d, yyyy") : format2(value.start, "MMM d");
+      const endStr = format2(value.end, "MMM d, yyyy");
+      return `${startStr} - ${endStr}`;
+    }
+    const presetsToSearch = presets ?? defaultPresets;
+    const presetOption = presetsToSearch.find((p) => p.value === preset);
+    return presetOption?.label ?? buttonLabel;
+  }, [preset, presets, buttonLabel, value]);
+  const handleClick = useCallback12((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const handleClose = useCallback12(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleChange = useCallback12(
+    (range, newPreset) => {
+      onChange?.(range, newPreset);
+      handleClose();
+    },
+    [onChange, handleClose]
+  );
+  return /* @__PURE__ */ jsxs52(Fragment, { children: [
+    /* @__PURE__ */ jsx81(
+      ToolbarDatePickerButton,
+      {
+        label: displayLabel,
+        onClick: handleClick,
+        open,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx81(
+      Popover3,
+      {
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              mt: 1,
+              p: 0,
+              borderRadius: "radius-2xl",
+              boxShadow: "-1px 2px 10px 0px rgba(0,0,0,0.1)",
+              overflow: "hidden",
+              ...popoverSx
+            }
+          }
+        },
+        ...PopoverProps,
+        children: /* @__PURE__ */ jsx81(
+          DateRangePicker,
+          {
+            value,
+            preset,
+            onChange: handleChange,
+            onCancel: handleClose,
+            presets,
+            dateFormat,
+            applyLabel,
+            cancelLabel
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Toolbar/ToolbarTodayButton.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+var ToolbarTodayButton = ({ label = "Today", sx, ...props }) => {
+  return /* @__PURE__ */ jsx82(ToolbarButton, { label, sx: { px: 1.5, ...sx }, ...props });
+};
+
+// src/components/Toolbar/ToolbarSearchField.tsx
+import { useState as useState14, useCallback as useCallback13 } from "react";
+import Box17 from "@mui/material/Box";
+import ButtonBase3 from "@mui/material/ButtonBase";
+import InputBase from "@mui/material/InputBase";
+import { jsx as jsx83, jsxs as jsxs53 } from "react/jsx-runtime";
+var baseStyles3 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  px: 1.25,
+  py: 0.75,
+  bgcolor: "common.white",
+  border: "0.5px solid",
+  borderColor: "border.mute",
+  borderBottomWidth: "1.5px"
+};
+var ToolbarSearchField = ({
+  placeholder = "Search",
+  className,
+  sx,
+  value,
+  onFocus,
+  onBlur,
+  onClear,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState14(false);
+  const hasValue = Boolean(value && String(value).length > 0);
+  const handleFocus = useCallback13(
+    (event) => {
+      setIsFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+  const handleBlur = useCallback13(
+    (event) => {
+      setIsFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  const handleClear = useCallback13(() => {
+    onClear?.();
+  }, [onClear]);
+  return /* @__PURE__ */ jsxs53(
+    Box17,
+    {
+      className: toolbarClasses.searchField.concat(
+        isFocused ? ` ${toolbarClasses.searchFieldFocused}` : "",
+        className ? ` ${className}` : ""
+      ),
+      sx: {
+        ...baseStyles3,
+        borderRadius: (theme) => theme.radius["radius-md"],
+        ...isFocused && {
+          boxShadow: (theme) => `0px 0px 0px 1.6px white, 0px 0px 0px 3.2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
+        },
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx83(
+          Icon,
+          {
+            icon: "Search",
+            className: toolbarClasses.searchIcon,
+            sx: { width: 16, height: 16, color: "icon.black", flexShrink: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx83(
+          InputBase,
+          {
+            placeholder,
+            className: toolbarClasses.searchInput,
+            value,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            sx: {
+              flex: 1,
+              minWidth: 0,
+              height: 22,
+              "& .MuiInputBase-input": {
+                p: 0,
+                fontSize: 14,
+                lineHeight: "22px",
+                color: "text.header",
+                "&::placeholder": {
+                  color: "text.body",
+                  opacity: 1
+                }
+              }
+            },
+            ...props
+          }
+        ),
+        hasValue && onClear && /* @__PURE__ */ jsx83(
+          ButtonBase3,
+          {
+            onClick: handleClear,
+            className: toolbarClasses.searchClearButton,
+            sx: {
+              p: 0.25,
+              borderRadius: "50%",
+              flexShrink: 0,
+              "&:hover": {
+                bgcolor: "grey.100"
+              }
+            },
+            children: /* @__PURE__ */ jsx83(Icon, { icon: "XMark", sx: { width: 14, height: 14, color: "icon.mute" } })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toolbar/ToolbarViewSwitcher.tsx
+import Box18 from "@mui/material/Box";
+import Typography9 from "@mui/material/Typography";
+import ButtonBase4 from "@mui/material/ButtonBase";
+import { jsx as jsx84, jsxs as jsxs54 } from "react/jsx-runtime";
+var viewLabels = {
+  year: "Year",
+  month: "Month",
+  week: "Week",
+  day: "Day"
+};
+var baseStyles4 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 1,
+  px: 1.5,
+  py: 0.75,
+  bgcolor: "common.white",
+  border: "0.5px solid",
+  borderColor: "border.mute",
+  borderBottomWidth: "1.5px",
+  cursor: "pointer",
+  "&:hover": {
+    bgcolor: "grey.50"
+  }
+};
+var ToolbarViewSwitcher = ({
+  value,
+  open = false,
+  className,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs54(
+    ButtonBase4,
+    {
+      className: toolbarClasses.viewSwitcher.concat(
+        open ? ` ${toolbarClasses.buttonOpen}` : "",
+        className ? ` ${className}` : ""
+      ),
+      sx: {
+        ...baseStyles4,
+        borderRadius: (theme) => theme.radius["radius-md"],
+        ...open && {
+          boxShadow: (theme) => `0px 0px 0px 1.6px white, 0px 0px 0px 3.2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
+        },
+        ...sx
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx84(
+          Box18,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pr: 1,
+              borderRight: "0.5px solid",
+              borderColor: "border.mute"
+            },
+            children: /* @__PURE__ */ jsx84(
+              Typography9,
+              {
+                variant: "body2",
+                className: toolbarClasses.viewSwitcherLabel,
+                sx: {
+                  fontSize: 14,
+                  lineHeight: "22px",
+                  color: "text.header",
+                  whiteSpace: "nowrap"
+                },
+                children: viewLabels[value]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx84(
+          Icon,
+          {
+            icon: "NavArrowDown",
+            className: toolbarClasses.viewSwitcherIcon,
+            sx: { width: 16, height: 16, color: "text.header" }
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toolbar/ToolbarSettingsButton.tsx
+import ButtonBase5 from "@mui/material/ButtonBase";
+import { jsx as jsx85 } from "react/jsx-runtime";
+var baseStyles5 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  px: 1.5,
+  py: 1.25,
+  bgcolor: "common.white",
+  border: "0.5px solid",
+  borderColor: "border.mute",
+  borderBottomWidth: "1.5px",
+  cursor: "pointer",
+  "&:hover": {
+    bgcolor: "grey.50"
+  }
+};
+var ToolbarSettingsButton = ({
+  open = false,
+  className,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx85(
+    ButtonBase5,
+    {
+      className: toolbarClasses.button.concat(
+        open ? ` ${toolbarClasses.buttonOpen}` : "",
+        className ? ` ${className}` : ""
+      ),
+      sx: {
+        ...baseStyles5,
+        borderRadius: (theme) => theme.radius["radius-md"],
+        ...open && {
+          boxShadow: (theme) => `0px 0px 0px 1.6px white, 0px 0px 0px 3.2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
+        },
+        ...sx
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx85(
+        Icon,
+        {
+          icon: "Settings",
+          className: toolbarClasses.buttonIcon,
+          sx: { width: 17, height: 17, color: "text.header" }
+        }
+      )
+    }
+  );
+};
+
+// src/components/HookForm/Form.tsx
+import {
+  FormProvider as RHFForm
+} from "react-hook-form";
+import Box19 from "@mui/material/Box";
+import { jsx as jsx86 } from "react/jsx-runtime";
+var Form = ({
+  children,
+  onSubmit,
+  methods,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx86(RHFForm, { ...methods, children: /* @__PURE__ */ jsx86(
+    Box19,
+    {
+      component: "form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (onSubmit) {
+          methods.handleSubmit(onSubmit)();
+        }
       },
       noValidate: true,
       autoComplete: "off",
@@ -8234,16 +9619,16 @@ var Form = ({
 
 // src/components/HookForm/RHFSwitch.tsx
 import { Controller, useFormContext } from "react-hook-form";
-import Stack5 from "@mui/material/Stack";
-import Box12 from "@mui/material/Box";
-import Typography4 from "@mui/material/Typography";
+import Stack6 from "@mui/material/Stack";
+import Box20 from "@mui/material/Box";
+import Typography10 from "@mui/material/Typography";
 import Switch from "@mui/material/Switch";
 import FormGroup from "@mui/material/FormGroup";
 import FormLabel from "@mui/material/FormLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText2 from "@mui/material/FormHelperText";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import { jsx as jsx71, jsxs as jsxs44 } from "react/jsx-runtime";
+import FormControlLabel3 from "@mui/material/FormControlLabel";
+import { jsx as jsx87, jsxs as jsxs55 } from "react/jsx-runtime";
 var RHFSwitch = ({
   name,
   description,
@@ -8255,16 +9640,16 @@ var RHFSwitch = ({
 }) => {
   const { control } = useFormContext();
   const baseAriaLabel = `Switch ${name}`;
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx87(
     Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs44(Box12, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ jsx71(
-          FormControlLabel,
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs55(Box20, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ jsx87(
+          FormControlLabel3,
           {
-            control: /* @__PURE__ */ jsx71(
+            control: /* @__PURE__ */ jsx87(
               Switch,
               {
                 ...field,
@@ -8279,9 +9664,9 @@ var RHFSwitch = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs44(Stack5, { children: [
-              /* @__PURE__ */ jsx71(Typography4, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ jsx71(Typography4, { variant: "body2", color: "textBody", children: description })
+            label: /* @__PURE__ */ jsxs55(Stack6, { children: [
+              /* @__PURE__ */ jsx87(Typography10, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ jsx87(Typography10, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -8290,7 +9675,7 @@ var RHFSwitch = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx71(
+        (!!error2 || helperText) && /* @__PURE__ */ jsx87(
           FormHelperText2,
           {
             error: !!error2,
@@ -8313,19 +9698,19 @@ var RHFMultiSwitch = ({
 }) => {
   const { control } = useFormContext();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx87(
     Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs44(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs55(
         FormControl,
         {
           component: "fieldset",
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ jsx71(
+            label && /* @__PURE__ */ jsx87(
               FormLabel,
               {
                 component: "legend",
@@ -8334,12 +9719,12 @@ var RHFMultiSwitch = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx71(FormGroup, { ...other, children: options.map((option) => {
+            /* @__PURE__ */ jsx87(FormGroup, { ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ jsx71(
-                FormControlLabel,
+              return /* @__PURE__ */ jsx87(
+                FormControlLabel3,
                 {
-                  control: /* @__PURE__ */ jsx71(
+                  control: /* @__PURE__ */ jsx87(
                     Switch,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -8362,7 +9747,7 @@ var RHFMultiSwitch = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ jsx71(FormHelperText2, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+            (!!error2 || helperText) && /* @__PURE__ */ jsx87(FormHelperText2, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
           ]
         }
       )
@@ -8372,10 +9757,10 @@ var RHFMultiSwitch = ({
 
 // src/components/HookForm/RHFUpload.tsx
 import { Controller as Controller2, useFormContext as useFormContext2 } from "react-hook-form";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
   const { control, setValue } = useFormContext2();
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx88(
     Controller2,
     {
       name,
@@ -8403,7 +9788,7 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
         const onRemoveAll = () => {
           setValue(name, [], { shouldValidate: true });
         };
-        return /* @__PURE__ */ jsx72(
+        return /* @__PURE__ */ jsx88(
           Upload,
           {
             multiple,
@@ -8427,17 +9812,17 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
 import { Controller as Controller3, useFormContext as useFormContext3 } from "react-hook-form";
 
 // src/components/OTPInput/index.tsx
-import { useRef as useRef6, useState as useState10 } from "react";
+import { useRef as useRef6, useState as useState15 } from "react";
 import { useTheme as useTheme3 } from "@mui/material/styles";
-import Box13 from "@mui/material/Box";
+import Box21 from "@mui/material/Box";
 import FormHelperText3 from "@mui/material/FormHelperText";
 import { inputBaseClasses as inputBaseClasses3 } from "@mui/material/InputBase";
-import TextField from "@mui/material/TextField";
-import { Fragment, jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
+import TextField2 from "@mui/material/TextField";
+import { Fragment as Fragment2, jsx as jsx89, jsxs as jsxs56 } from "react/jsx-runtime";
 var OTPInput = (props) => {
   const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
   const theme = useTheme3();
-  const [otp, setOtp] = useState10(Array(length).fill(""));
+  const [otp, setOtp] = useState15(Array(length).fill(""));
   const inputsRef = useRef6([]);
   const handleChange = (value, index) => {
     if (!/^[0-9]$/.test(value) && value !== "") return;
@@ -8501,9 +9886,9 @@ var OTPInput = (props) => {
       onComplete?.(newOtp.join(""));
     }
   };
-  return /* @__PURE__ */ jsxs45(Fragment, { children: [
-    /* @__PURE__ */ jsx73(Box13, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx73(
-      Box13,
+  return /* @__PURE__ */ jsxs56(Fragment2, { children: [
+    /* @__PURE__ */ jsx89(Box21, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx89(
+      Box21,
       {
         display: "flex",
         alignItems: "center",
@@ -8512,8 +9897,8 @@ var OTPInput = (props) => {
             mr: 1.5
           }
         },
-        children: /* @__PURE__ */ jsx73(
-          TextField,
+        children: /* @__PURE__ */ jsx89(
+          TextField2,
           {
             size: "medium",
             value: otp[index],
@@ -8595,21 +9980,21 @@ var OTPInput = (props) => {
       },
       index
     )) }),
-    error2 && /* @__PURE__ */ jsx73(FormHelperText3, { sx: { color: "error.main" }, children: helperText })
+    error2 && /* @__PURE__ */ jsx89(FormHelperText3, { sx: { color: "error.main" }, children: helperText })
   ] });
 };
 var OTPInput_default = OTPInput;
 
 // src/components/HookForm/RHFOTPInput.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var RHFOTPInput = ({ name, length = 6, helperText, ...rest }) => {
   const { control, setValue } = useFormContext3();
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx90(
     Controller3,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx74(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx90(
         OTPInput_default,
         {
           length,
@@ -8626,20 +10011,20 @@ var RHFOTPInput = ({ name, length = 6, helperText, ...rest }) => {
 
 // src/components/HookForm/RHFTextField.tsx
 import { Controller as Controller4, useFormContext as useFormContext4 } from "react-hook-form";
-import IconButton3 from "@mui/material/IconButton";
+import IconButton5 from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
-import TextField2 from "@mui/material/TextField";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import TextField3 from "@mui/material/TextField";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
   const { control } = useFormContext4();
   const passwordVisibility = useBoolean();
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx91(
     Controller4,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx75(
-        TextField2,
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx91(
+        TextField3,
         {
           ...field,
           fullWidth: true,
@@ -8659,7 +10044,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
             input: {
               ...slotProps?.input,
               ...type === "password" && {
-                endAdornment: /* @__PURE__ */ jsx75(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx75(IconButton3, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx75(
+                endAdornment: /* @__PURE__ */ jsx91(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx91(IconButton5, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx91(
                   Icon,
                   {
                     icon: passwordVisibility.value ? "EyeClosed" : "Eye",
@@ -8678,15 +10063,15 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
 
 // src/components/HookForm/RHFRadioGroup.tsx
 import { Controller as Controller5, useFormContext as useFormContext5 } from "react-hook-form";
-import Stack6 from "@mui/material/Stack";
-import Typography5 from "@mui/material/Typography";
-import Radio from "@mui/material/Radio";
-import FormControlLabel2 from "@mui/material/FormControlLabel";
+import Stack7 from "@mui/material/Stack";
+import Typography11 from "@mui/material/Typography";
+import Radio3 from "@mui/material/Radio";
+import FormControlLabel4 from "@mui/material/FormControlLabel";
 import FormLabel2 from "@mui/material/FormLabel";
-import RadioGroup from "@mui/material/RadioGroup";
+import RadioGroup3 from "@mui/material/RadioGroup";
 import FormControl2 from "@mui/material/FormControl";
 import FormHelperText4 from "@mui/material/FormHelperText";
-import { jsx as jsx76, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs57 } from "react/jsx-runtime";
 var RHFRadioGroup = ({
   name,
   label,
@@ -8698,13 +10083,13 @@ var RHFRadioGroup = ({
   const { control } = useFormContext5();
   const labelledby = `${name}-radio-buttons-group-label`;
   const ariaLabel = (val) => `Radio ${val}`;
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx92(
     Controller5,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs46(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
-        label && /* @__PURE__ */ jsx76(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs57(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
+        label && /* @__PURE__ */ jsx92(
           FormLabel2,
           {
             id: labelledby,
@@ -8714,12 +10099,12 @@ var RHFRadioGroup = ({
             children: label
           }
         ),
-        /* @__PURE__ */ jsx76(RadioGroup, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx76(
-          FormControlLabel2,
+        /* @__PURE__ */ jsx92(RadioGroup3, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx92(
+          FormControlLabel4,
           {
             value: option.value,
-            control: /* @__PURE__ */ jsx76(
-              Radio,
+            control: /* @__PURE__ */ jsx92(
+              Radio3,
               {
                 ...slotProps?.radio,
                 slotProps: {
@@ -8730,9 +10115,9 @@ var RHFRadioGroup = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs46(Stack6, { children: [
-              /* @__PURE__ */ jsx76(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-              option?.description && /* @__PURE__ */ jsx76(Typography5, { variant: "body2", color: "textBody", children: option?.description })
+            label: /* @__PURE__ */ jsxs57(Stack7, { children: [
+              /* @__PURE__ */ jsx92(Typography11, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+              option?.description && /* @__PURE__ */ jsx92(Typography11, { variant: "body2", color: "textBody", children: option?.description })
             ] }),
             sx: {
               alignItems: option?.description ? "flex-start" : "center"
@@ -8740,7 +10125,7 @@ var RHFRadioGroup = ({
           },
           option.value
         )) }),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx76(FormHelperText4, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx92(FormHelperText4, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -8748,9 +10133,9 @@ var RHFRadioGroup = ({
 
 // src/components/HookForm/RHFAutocomplete.tsx
 import { Controller as Controller6, useFormContext as useFormContext6 } from "react-hook-form";
-import TextField3 from "@mui/material/TextField";
+import TextField4 from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var RHFAutocomplete = ({
   name,
   label,
@@ -8761,12 +10146,12 @@ var RHFAutocomplete = ({
   ...other
 }) => {
   const { control, setValue } = useFormContext6();
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx93(
     Controller6,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx77(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx93(
         Autocomplete,
         {
           ...field,
@@ -8775,8 +10160,8 @@ var RHFAutocomplete = ({
             setValue(name, newValue, { shouldValidate: true });
             handleChange?.(newValue);
           },
-          renderInput: (params) => /* @__PURE__ */ jsx77(
-            TextField3,
+          renderInput: (params) => /* @__PURE__ */ jsx93(
+            TextField4,
             {
               label,
               placeholder,
@@ -8793,18 +10178,150 @@ var RHFAutocomplete = ({
   );
 };
 
+// src/components/HookForm/RHFDateRangePicker.tsx
+import { useMemo as useMemo10, useState as useState16, useCallback as useCallback14 } from "react";
+import { useWatch, Controller as Controller7, useFormContext as useFormContext7 } from "react-hook-form";
+import { format as format3, isValid } from "date-fns";
+import Box22 from "@mui/material/Box";
+import Popover4 from "@mui/material/Popover";
+import TextField5 from "@mui/material/TextField";
+import InputAdornment2 from "@mui/material/InputAdornment";
+import { Fragment as Fragment3, jsx as jsx94, jsxs as jsxs58 } from "react/jsx-runtime";
+function RHFDateRangePicker({
+  name,
+  label,
+  placeholder = "Select date range",
+  helperText,
+  dateFormat = "MMM d, yyyy",
+  presets = defaultPresets,
+  applyLabel,
+  cancelLabel,
+  disabled = false,
+  size = "medium",
+  fullWidth = true
+}) {
+  const { control } = useFormContext7();
+  const [anchorEl, setAnchorEl] = useState16(null);
+  const open = Boolean(anchorEl);
+  const watchedValue = useWatch({ control, name });
+  const value = watchedValue ?? {
+    start: null,
+    end: null,
+    preset: void 0
+  };
+  const displayValue = useMemo10(() => {
+    if (value.preset && value.preset !== "custom") {
+      const presetOption = presets.find((p) => p.value === value.preset);
+      if (presetOption) return presetOption.label;
+    }
+    if (value.start && value.end && isValid(value.start) && isValid(value.end)) {
+      const startYear = value.start.getFullYear();
+      const endYear = value.end.getFullYear();
+      const startStr = startYear !== endYear ? format3(value.start, dateFormat) : format3(value.start, "MMM d");
+      const endStr = format3(value.end, dateFormat);
+      return `${startStr} - ${endStr}`;
+    }
+    return "";
+  }, [value.preset, value.start, value.end, presets, dateFormat]);
+  const handleClick = useCallback14(
+    (event) => {
+      if (!disabled) {
+        setAnchorEl(event.currentTarget);
+      }
+    },
+    [disabled]
+  );
+  const handleClose = useCallback14(() => {
+    setAnchorEl(null);
+  }, []);
+  return /* @__PURE__ */ jsx94(
+    Controller7,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error: error2 } }) => {
+        const handleChange = (range, preset) => {
+          field.onChange({ ...range, preset });
+          handleClose();
+        };
+        return /* @__PURE__ */ jsxs58(Fragment3, { children: [
+          /* @__PURE__ */ jsx94(Box22, { onClick: handleClick, sx: { cursor: disabled ? "default" : "pointer" }, children: /* @__PURE__ */ jsx94(
+            TextField5,
+            {
+              label,
+              placeholder,
+              value: displayValue,
+              error: !!error2,
+              helperText: error2?.message ?? helperText,
+              disabled,
+              size,
+              fullWidth,
+              slotProps: {
+                input: {
+                  readOnly: true,
+                  endAdornment: /* @__PURE__ */ jsx94(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx94(Icon, { icon: "Calendar", sx: { width: 20, height: 20, color: "icon.mute" } }) }),
+                  sx: { cursor: disabled ? "default" : "pointer" }
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx94(
+            Popover4,
+            {
+              open,
+              anchorEl,
+              onClose: handleClose,
+              anchorOrigin: {
+                vertical: "bottom",
+                horizontal: "left"
+              },
+              transformOrigin: {
+                vertical: "top",
+                horizontal: "left"
+              },
+              slotProps: {
+                paper: {
+                  sx: {
+                    mt: 1,
+                    p: 0,
+                    borderRadius: "radius-2xl",
+                    boxShadow: "-1px 2px 10px 0px rgba(0,0,0,0.1)",
+                    overflow: "hidden"
+                  }
+                }
+              },
+              children: /* @__PURE__ */ jsx94(
+                DateRangePicker,
+                {
+                  value: { start: value.start, end: value.end },
+                  preset: value.preset,
+                  onChange: handleChange,
+                  onCancel: handleClose,
+                  presets,
+                  applyLabel,
+                  cancelLabel
+                }
+              )
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+
 // src/components/HookForm/RHFCheckbox.tsx
-import { Controller as Controller7, useFormContext as useFormContext7 } from "react-hook-form";
-import Stack7 from "@mui/material/Stack";
-import Box14 from "@mui/material/Box";
-import Typography6 from "@mui/material/Typography";
+import { Controller as Controller8, useFormContext as useFormContext8 } from "react-hook-form";
+import Stack8 from "@mui/material/Stack";
+import Box23 from "@mui/material/Box";
+import Typography12 from "@mui/material/Typography";
 import Checkbox from "@mui/material/Checkbox";
 import FormGroup2 from "@mui/material/FormGroup";
 import FormLabel3 from "@mui/material/FormLabel";
 import FormControl3 from "@mui/material/FormControl";
 import FormHelperText5 from "@mui/material/FormHelperText";
-import FormControlLabel3 from "@mui/material/FormControlLabel";
-import { jsx as jsx78, jsxs as jsxs47 } from "react/jsx-runtime";
+import FormControlLabel5 from "@mui/material/FormControlLabel";
+import { jsx as jsx95, jsxs as jsxs59 } from "react/jsx-runtime";
 var RHFCheckbox = ({
   name,
   description,
@@ -8814,18 +10331,18 @@ var RHFCheckbox = ({
   slotProps,
   ...other
 }) => {
-  const { control } = useFormContext7();
+  const { control } = useFormContext8();
   const baseAriaLabel = `Checkbox for ${name}`;
-  return /* @__PURE__ */ jsx78(
-    Controller7,
+  return /* @__PURE__ */ jsx95(
+    Controller8,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs47(Box14, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ jsx78(
-          FormControlLabel3,
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs59(Box23, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ jsx95(
+          FormControlLabel5,
           {
-            control: /* @__PURE__ */ jsx78(
+            control: /* @__PURE__ */ jsx95(
               Checkbox,
               {
                 ...field,
@@ -8840,9 +10357,9 @@ var RHFCheckbox = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs47(Stack7, { children: [
-              /* @__PURE__ */ jsx78(Typography6, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ jsx78(Typography6, { variant: "body2", color: "textBody", children: description })
+            label: /* @__PURE__ */ jsxs59(Stack8, { children: [
+              /* @__PURE__ */ jsx95(Typography12, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ jsx95(Typography12, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -8851,7 +10368,7 @@ var RHFCheckbox = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx78(FormHelperText5, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx95(FormHelperText5, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -8865,15 +10382,15 @@ var RHFMultiCheckbox = ({
   row,
   ...other
 }) => {
-  const { control } = useFormContext7();
+  const { control } = useFormContext8();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ jsx78(
-    Controller7,
+  return /* @__PURE__ */ jsx95(
+    Controller8,
     {
       name,
       control,
       defaultValue: [],
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs47(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs59(
         FormControl3,
         {
           component: "fieldset",
@@ -8881,7 +10398,7 @@ var RHFMultiCheckbox = ({
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ jsx78(
+            label && /* @__PURE__ */ jsx95(
               FormLabel3,
               {
                 component: "legend",
@@ -8890,12 +10407,12 @@ var RHFMultiCheckbox = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx78(FormGroup2, { row, ...other, children: options.map((option) => {
+            /* @__PURE__ */ jsx95(FormGroup2, { row, ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ jsx78(
-                FormControlLabel3,
+              return /* @__PURE__ */ jsx95(
+                FormControlLabel5,
                 {
-                  control: /* @__PURE__ */ jsx78(
+                  control: /* @__PURE__ */ jsx95(
                     Checkbox,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -8913,9 +10430,9 @@ var RHFMultiCheckbox = ({
                       }
                     }
                   ),
-                  label: /* @__PURE__ */ jsxs47(Stack7, { children: [
-                    /* @__PURE__ */ jsx78(Typography6, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-                    option?.description && /* @__PURE__ */ jsx78(Typography6, { variant: "body2", color: "textBody", children: option?.description })
+                  label: /* @__PURE__ */ jsxs59(Stack8, { children: [
+                    /* @__PURE__ */ jsx95(Typography12, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+                    option?.description && /* @__PURE__ */ jsx95(Typography12, { variant: "body2", color: "textBody", children: option?.description })
                   ] }),
                   sx: {
                     alignItems: option?.description ? "flex-start" : "center"
@@ -8924,7 +10441,7 @@ var RHFMultiCheckbox = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ jsx78(
+            (!!error2 || helperText) && /* @__PURE__ */ jsx95(
               FormHelperText5,
               {
                 sx: { mx: 0, ...slotProps?.formHelperText?.sx },
@@ -8940,11 +10457,11 @@ var RHFMultiCheckbox = ({
 };
 
 // src/components/HookForm/RHFDatePicker.tsx
-import { memo, useState as useState11, useEffect as useEffect6 } from "react";
-import { Controller as Controller8, useFormContext as useFormContext8 } from "react-hook-form";
-import TextField4 from "@mui/material/TextField";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { memo, useState as useState17, useEffect as useEffect6 } from "react";
+import { Controller as Controller9, useFormContext as useFormContext9 } from "react-hook-form";
+import TextField6 from "@mui/material/TextField";
+import { LocalizationProvider as LocalizationProvider2 } from "@mui/x-date-pickers";
+import { AdapterDateFns as AdapterDateFns2 } from "@mui/x-date-pickers/AdapterDateFns";
 import {
   DatePicker as MuiDatePicker
 } from "@mui/x-date-pickers/DatePicker";
@@ -8954,18 +10471,18 @@ import {
 import {
   DateTimePicker as MuiDateTimePicker
 } from "@mui/x-date-pickers/DateTimePicker";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var RHFDatePickerComponent = ({
   name,
   slotProps,
   helperText,
   clearable = false,
-  format = "MMM d, yyyy",
+  format: format4 = "MMM d, yyyy",
   ...other
 }) => {
-  const { control } = useFormContext8();
-  const [isOpen, setIsOpen] = useState11(false);
-  const [cleared, setCleared] = useState11(false);
+  const { control } = useFormContext9();
+  const [isOpen, setIsOpen] = useState17(false);
+  const [cleared, setCleared] = useState17(false);
   useEffect6(() => {
     if (cleared) {
       const timeout = setTimeout(() => setCleared(false), 1500);
@@ -8974,23 +10491,23 @@ var RHFDatePickerComponent = ({
     return () => {
     };
   }, [cleared]);
-  return /* @__PURE__ */ jsx79(
-    Controller8,
+  return /* @__PURE__ */ jsx96(
+    Controller9,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx79(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsx79(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx96(LocalizationProvider2, { dateAdapter: AdapterDateFns2, children: /* @__PURE__ */ jsx96(
         MuiDatePicker,
         {
           ...field,
           value: field.value ?? null,
           onChange: (newValue) => field.onChange(newValue),
           enableAccessibleFieldDOMStructure: false,
-          format,
+          format: format4,
           open: isOpen,
           onClose: () => setIsOpen(false),
           slots: {
-            textField: TextField4,
+            textField: TextField6,
             ...other.slots
           },
           slotProps: {
@@ -9002,6 +10519,7 @@ var RHFDatePickerComponent = ({
               onClick: () => setIsOpen(true),
               ...typeof slotProps?.textField === "object" ? slotProps.textField : {}
             },
+            openPickerButton: { onClick: () => setIsOpen(true) },
             field: { clearable, onClear: () => setCleared(true) }
           },
           ...other
@@ -9016,12 +10534,12 @@ var RHFTimePickerComponent = ({
   slotProps,
   helperText,
   clearable = false,
-  format = "h:mma",
+  format: format4 = "h:mma",
   ...other
 }) => {
-  const { control } = useFormContext8();
-  const [isOpen, setIsOpen] = useState11(false);
-  const [cleared, setCleared] = useState11(false);
+  const { control } = useFormContext9();
+  const [isOpen, setIsOpen] = useState17(false);
+  const [cleared, setCleared] = useState17(false);
   useEffect6(() => {
     if (cleared) {
       const timeout = setTimeout(() => setCleared(false), 1500);
@@ -9030,23 +10548,23 @@ var RHFTimePickerComponent = ({
     return () => {
     };
   }, [cleared]);
-  return /* @__PURE__ */ jsx79(
-    Controller8,
+  return /* @__PURE__ */ jsx96(
+    Controller9,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx79(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsx79(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx96(LocalizationProvider2, { dateAdapter: AdapterDateFns2, children: /* @__PURE__ */ jsx96(
         MuiTimePicker,
         {
           ...field,
           value: field.value ?? null,
           onChange: (newValue) => field.onChange(newValue),
           enableAccessibleFieldDOMStructure: false,
-          format,
+          format: format4,
           open: isOpen,
           onClose: () => setIsOpen(false),
           slots: {
-            textField: TextField4,
+            textField: TextField6,
             ...other.slots
           },
           slotProps: {
@@ -9058,6 +10576,7 @@ var RHFTimePickerComponent = ({
               onClick: () => setIsOpen(true),
               ...typeof slotProps?.textField === "object" ? slotProps.textField : {}
             },
+            openPickerButton: { onClick: () => setIsOpen(true) },
             field: { clearable, onClear: () => setCleared(true) }
           },
           ...other
@@ -9072,12 +10591,12 @@ var RHFDateTimePickerComponent = ({
   slotProps,
   helperText,
   clearable = false,
-  format = "MMM d, yyyy h:mma",
+  format: format4 = "MMM d, yyyy h:mma",
   ...other
 }) => {
-  const { control } = useFormContext8();
-  const [isOpen, setIsOpen] = useState11(false);
-  const [cleared, setCleared] = useState11(false);
+  const { control } = useFormContext9();
+  const [isOpen, setIsOpen] = useState17(false);
+  const [cleared, setCleared] = useState17(false);
   useEffect6(() => {
     if (cleared) {
       const timeout = setTimeout(() => setCleared(false), 1500);
@@ -9086,23 +10605,23 @@ var RHFDateTimePickerComponent = ({
     return () => {
     };
   }, [cleared]);
-  return /* @__PURE__ */ jsx79(
-    Controller8,
+  return /* @__PURE__ */ jsx96(
+    Controller9,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx79(LocalizationProvider, { dateAdapter: AdapterDateFns, children: /* @__PURE__ */ jsx79(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx96(LocalizationProvider2, { dateAdapter: AdapterDateFns2, children: /* @__PURE__ */ jsx96(
         MuiDateTimePicker,
         {
           ...field,
           value: field.value ?? null,
           onChange: (newValue) => field.onChange(newValue),
           enableAccessibleFieldDOMStructure: false,
-          format,
+          format: format4,
           open: isOpen,
           onClose: () => setIsOpen(false),
           slots: {
-            textField: TextField4,
+            textField: TextField6,
             ...other.slots
           },
           slotProps: {
@@ -9114,6 +10633,7 @@ var RHFDateTimePickerComponent = ({
               onClick: () => setIsOpen(true),
               ...typeof slotProps?.textField === "object" ? slotProps.textField : {}
             },
+            openPickerButton: { onClick: () => setIsOpen(true) },
             field: { clearable, onClear: () => setCleared(true) }
           },
           ...other
@@ -9136,35 +10656,36 @@ var Field = {
   MultiCheckbox: RHFMultiCheckbox,
   Date: RHFDatePicker,
   Time: RHFTimePicker,
-  DateTime: RHFDateTimePicker
+  DateTime: RHFDateTimePicker,
+  DateRange: RHFDateRangePicker
 };
 
 // src/components/CopyButton/index.tsx
 import Tooltip from "@mui/material/Tooltip";
-import IconButton4 from "@mui/material/IconButton";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import IconButton6 from "@mui/material/IconButton";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ jsx80(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx80(
-    IconButton4,
+  return /* @__PURE__ */ jsx97(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx97(
+    IconButton6,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ jsx80(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ jsx97(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
     }
   ) });
 };
 
 // src/components/LoadingScreen/index.tsx
 import Portal2 from "@mui/material/Portal";
-import Box15 from "@mui/material/Box";
+import Box24 from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx81(
-    Box15,
+  const content = /* @__PURE__ */ jsx98(
+    Box24,
     {
       sx: {
         px: 5,
@@ -9177,17 +10698,17 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx81(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ jsx98(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx81(Portal2, { children: content });
+    return /* @__PURE__ */ jsx98(Portal2, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx81(
-    Box15,
+  const content = /* @__PURE__ */ jsx98(
+    Box24,
     {
       sx: {
         right: 0,
@@ -9203,24 +10724,24 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx81(AnimatedLogo, {})
+      children: /* @__PURE__ */ jsx98(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx81(Portal2, { children: content });
+    return /* @__PURE__ */ jsx98(Portal2, { children: content });
   }
   return content;
 };
 
 // src/theme/core/components/mui-x-date-picker.tsx
-import { jsx as jsx82, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs60 } from "react/jsx-runtime";
 var CustomCalendarHeaderRoot = styled3("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
   padding: theme.spacing(2),
   alignItems: "center"
 }));
-var CustomIconButton = styled3(IconButton5)(({ theme }) => ({
+var CustomIconButton = styled3(IconButton7)(({ theme }) => ({
   color: theme.vars.palette.neutral[700],
   border: `1px solid ${theme.vars.palette.border.mute}`,
   borderRadius: theme.radius["radius-sm"],
@@ -9231,7 +10752,7 @@ var CustomIconButton = styled3(IconButton5)(({ theme }) => ({
     backgroundColor: varAlpha(theme.vars.palette.neutral.mainChannel, 0.08)
   }
 }));
-function addMonths(date, amount) {
+function addMonths2(date, amount) {
   const result = new Date(date);
   result.setMonth(result.getMonth() + amount);
   return result;
@@ -9241,8 +10762,8 @@ function formatMonthYear(date) {
 }
 function CustomCalendarHeader(props) {
   const { currentMonth, onMonthChange, view, views, onViewChange } = props;
-  const selectNextMonth = () => onMonthChange(addMonths(currentMonth, 1));
-  const selectPreviousMonth = () => onMonthChange(addMonths(currentMonth, -1));
+  const selectNextMonth = () => onMonthChange(addMonths2(currentMonth, 1));
+  const selectPreviousMonth = () => onMonthChange(addMonths2(currentMonth, -1));
   const monthLabel = formatMonthYear(currentMonth);
   const canSwitchView = views && views.length > 1 && onViewChange;
   const handleLabelClick = () => {
@@ -9251,10 +10772,10 @@ function CustomCalendarHeader(props) {
       onViewChange("year");
     }
   };
-  return /* @__PURE__ */ jsxs48(CustomCalendarHeaderRoot, { children: [
-    /* @__PURE__ */ jsx82(CustomIconButton, { onClick: selectPreviousMonth, title: "Previous month", size: "small", children: /* @__PURE__ */ jsx82(Icon, { icon: "NavArrowLeft", width: 16 }) }),
-    /* @__PURE__ */ jsx82(
-      Typography7,
+  return /* @__PURE__ */ jsxs60(CustomCalendarHeaderRoot, { children: [
+    /* @__PURE__ */ jsx99(CustomIconButton, { onClick: selectPreviousMonth, title: "Previous month", size: "small", children: /* @__PURE__ */ jsx99(Icon, { icon: "NavArrowLeft", width: 16 }) }),
+    /* @__PURE__ */ jsx99(
+      Typography13,
       {
         variant: "subtitle1",
         onClick: handleLabelClick,
@@ -9268,7 +10789,7 @@ function CustomCalendarHeader(props) {
         children: monthLabel
       }
     ),
-    /* @__PURE__ */ jsx82(CustomIconButton, { onClick: selectNextMonth, title: "Next month", size: "small", children: /* @__PURE__ */ jsx82(Icon, { icon: "NavArrowRight", width: 16 }) })
+    /* @__PURE__ */ jsx99(CustomIconButton, { onClick: selectNextMonth, title: "Next month", size: "small", children: /* @__PURE__ */ jsx99(Icon, { icon: "NavArrowRight", width: 16 }) })
   ] });
 }
 var localeText = {
@@ -9276,13 +10797,13 @@ var localeText = {
 };
 var defaultProps = {
   date: {
-    openPickerIcon: () => /* @__PURE__ */ jsx82(Icon, { icon: "Calendar", sx: { width: 20, height: 20 } }),
+    openPickerIcon: () => /* @__PURE__ */ jsx99(Icon, { icon: "Calendar", sx: { width: 20, height: 20 } }),
     calendarHeader: CustomCalendarHeader
   },
   time: {
-    openPickerIcon: () => /* @__PURE__ */ jsx82(Icon, { icon: "Clock", sx: { width: 20, height: 20 } }),
-    rightArrowIcon: () => /* @__PURE__ */ jsx82(Icon, { icon: "NavArrowRight" }),
-    switchViewIcon: () => /* @__PURE__ */ jsx82(Icon, { icon: "NavArrowDownSolid" })
+    openPickerIcon: () => /* @__PURE__ */ jsx99(Icon, { icon: "Clock", sx: { width: 20, height: 20 } }),
+    rightArrowIcon: () => /* @__PURE__ */ jsx99(Icon, { icon: "NavArrowRight" }),
+    switchViewIcon: () => /* @__PURE__ */ jsx99(Icon, { icon: "NavArrowDownSolid" })
   }
 };
 var dateViews = ["year", "month", "day"];
@@ -9301,7 +10822,7 @@ var MuiTimePicker2 = { defaultProps: timePickerDefaults };
 var MuiMobileTimePicker = { defaultProps: timePickerDefaults };
 var MuiStaticTimePicker = { defaultProps: timePickerDefaults };
 var MuiDesktopTimePicker = { defaultProps: timePickerDefaults };
-var MuiPickersLayout = {
+var MuiPickerLayout = {
   /** **************************************
    * STYLE
    *************************************** */
@@ -9327,14 +10848,16 @@ var MuiPickersLayout = {
     })
   }
 };
-var MuiPickersPopper = {
+var MuiPickerPopper = {
   /** **************************************
    * DEFAULT PROPS
    *************************************** */
   styleOverrides: {
-    paper: ({ theme }) => ({
+    root: ({ theme }) => ({
+      border: `1px solid ${theme.vars.palette.border.subtle}`,
+      overflow: "hidden",
       boxShadow: theme.customShadows["shadow-sm"],
-      borderRadius: Number(theme.shape.borderRadius) * 1.5
+      borderRadius: theme.radius["radius-md"]
     })
   }
 };
@@ -9342,8 +10865,7 @@ var MuiDateCalendar = {
   defaultProps: { views: dateViews, slots: defaultProps.date },
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: theme.vars.palette.background.paper,
-      borderRadius: theme.radius["radius-md"]
+      backgroundColor: theme.vars.palette.background.paper
     })
   }
 };
@@ -9461,8 +10983,8 @@ var MuiDayCalendar = {
   }
 };
 var datePicker = {
-  MuiPickersPopper,
-  MuiPickersLayout,
+  MuiPickerPopper,
+  MuiPickerLayout,
   // Calendar
   MuiDateCalendar,
   MuiPickersDay,
@@ -9712,18 +11234,18 @@ import "@fontsource/geist/500.css";
 import "@fontsource/geist/600.css";
 import "@fontsource/geist/700.css";
 import "./satoshi-4X3TX4PE.css";
-import { jsx as jsx83, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs61 } from "react/jsx-runtime";
 var ThemeProvider = ({ children }) => {
   const settings = useSettings();
   const theme = createTheme(settings);
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs61(
     MuiThemeProvider,
     {
       theme,
       defaultMode: schemeConfig.defaultMode,
       modeStorageKey: schemeConfig.modeStorageKey,
       children: [
-        /* @__PURE__ */ jsx83(CssBaseline, {}),
+        /* @__PURE__ */ jsx100(CssBaseline, {}),
         children
       ]
     }
@@ -9749,12 +11271,19 @@ export {
   CloudUpload,
   Copy,
   CopyButton,
+  CustomDialog,
+  CustomDrawer,
+  DateRangeDropdown,
+  DateRangePicker,
   Download,
   EmptyContent,
   ErrorToast,
   Eye,
   EyeClosed,
+  FeedbackDialog,
   Field,
+  FilterDropdown,
+  FilterList,
   Form,
   HelpCircle,
   Icon,
@@ -9779,6 +11308,7 @@ export {
   RHFAutocomplete,
   RHFCheckbox,
   RHFDatePicker,
+  RHFDateRangePicker,
   RHFDateTimePicker,
   RHFMultiCheckbox,
   RHFMultiSwitch,
@@ -9797,6 +11327,7 @@ export {
   SettingsContext,
   SettingsProvider,
   SortDown,
+  SortDropdown,
   SortUp,
   SplashScreen,
   StatDown,
@@ -9806,6 +11337,14 @@ export {
   TablePagination,
   ThemeProvider,
   Toast,
+  ToolbarButton,
+  ToolbarDatePickerButton,
+  ToolbarFilterButton,
+  ToolbarSearchField,
+  ToolbarSettingsButton,
+  ToolbarSortButton,
+  ToolbarTodayButton,
+  ToolbarViewSwitcher,
   Trash,
   Upload,
   User,
@@ -9832,15 +11371,20 @@ export {
   customShadows,
   customSpacing,
   darkPalette,
+  defaultPresets,
   defaultSettings,
+  dialogClasses,
+  drawerClasses,
   error,
   fCurrency,
   fData,
   fNumber,
   fPercent,
   fShortenNumber,
+  feedbackDialogClasses,
   formatFullname,
   getCurrencySymbol,
+  getDateRangeFromPreset,
   getDefaultChartOptions,
   getInitials,
   getStorage,
@@ -9882,6 +11426,7 @@ export {
   tertiaryFont,
   text,
   textGradient,
+  toolbarClasses,
   typography,
   updateComponentsWithSettings,
   updateCoreWithSettings,