react-better-html 1.1.102 → 1.1.104

package/dist/index.mjs

@@ -1416,6 +1416,26 @@ var icons = {
       }
     ]
   },
+  doubleChevronLeft: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z",
+        type: "fill"
+      }
+    ]
+  },
+  doubleChevronRight: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z",
+        type: "fill"
+      }
+    ]
+  },
   eye: {
     width: 576,
     height: 512,
@@ -1455,6 +1475,16 @@ var icons = {
         type: "fill"
       }
     ]
+  },
+  filter: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z",
+        type: "fill"
+      }
+    ]
   }
 };
 
@@ -2236,14 +2266,19 @@ DivComponent.column = forwardRef(function Column({ flexReverse, invertFlexDirect
 DivComponent.grid = forwardRef(function Grid(props, ref) {
   return /* @__PURE__ */ jsx2(DivComponent, { display: "grid", ref, ...props });
 });
-DivComponent.box = forwardRef(function Box(props, ref) {
+DivComponent.box = forwardRef(function Box({ isActive, ...props }, ref) {
   const theme2 = useTheme();
+  const withClick = props.onClick || props.onClickWithValue;
   return /* @__PURE__ */ jsx2(
     DivComponent,
     {
-      backgroundColor: theme2.colors.backgroundContent,
-      border: `1px solid ${theme2.colors.border}`,
+      color: isActive ? theme2.colors.base : void 0,
+      backgroundColor: isActive ? theme2.colors.primary : theme2.colors.backgroundContent,
+      border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
+      borderColorHover: withClick && !isActive ? theme2.colors.primary : void 0,
+      filterHover: withClick && isActive ? "brightness(0.9)" : void 0,
+      cursor: withClick ? "pointer" : void 0,
       paddingBlock: theme2.styles.gap,
       paddingInline: theme2.styles.space,
       ref,
@@ -2751,40 +2786,39 @@ Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
 
 // src/components/Divider.tsx
-import { memo as memo8 } from "react";
+import { forwardRef as forwardRef5, memo as memo8 } from "react";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var Divider_default = {
-  vertical: memo8(function Divider({ width = 1, backgroundColor, height, ...props }) {
-    const theme2 = useTheme();
-    return /* @__PURE__ */ jsx8(
-      Div_default,
-      {
-        width,
-        height: height ?? "100%",
-        flexShrink: 0,
-        backgroundColor: backgroundColor ?? theme2.colors.border,
-        ...props
-      }
-    );
-  }),
-  horizontal: memo8(function Divider2({
-    width = 1,
-    backgroundColor,
-    text,
-    textColor,
-    ...props
-  }) {
-    const theme2 = useTheme();
-    return /* @__PURE__ */ jsxs4(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, children: [
-      /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-      text && /* @__PURE__ */ jsx8(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
-      /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
-    ] });
-  })
+  vertical: memo8(
+    forwardRef5(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ jsx8(
+        Div_default,
+        {
+          width,
+          height: height ?? "100%",
+          flexShrink: 0,
+          backgroundColor: backgroundColor ?? theme2.colors.border,
+          ...props,
+          ref
+        }
+      );
+    })
+  ),
+  horizontal: memo8(
+    forwardRef5(function Divider2({ width = 1, backgroundColor, text, textColor, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ jsxs4(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
+        /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
+        text && /* @__PURE__ */ jsx8(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
+        /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
+      ] });
+    })
+  )
 };
 
 // src/components/Modal.tsx
-import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef5, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
+import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef6, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
 import styled7 from "styled-components";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DialogStylesElement = styled7.dialog.withConfig({
@@ -2827,7 +2861,7 @@ var DialogStylesElement = styled7.dialog.withConfig({
       }
    }
 `;
-var ModalComponent = forwardRef5(function Modal({
+var ModalComponent = forwardRef6(function Modal({
   maxWidth,
   title,
   titleColor,
@@ -2978,7 +3012,7 @@ var ModalComponent = forwardRef5(function Modal({
     }
   );
 });
-ModalComponent.confirmation = forwardRef5(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
+ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef2(null);
   const onCancelElement = useCallback5(() => {
@@ -3007,7 +3041,7 @@ ModalComponent.confirmation = forwardRef5(function Confirmation({ continueButton
     )
   ] });
 });
-ModalComponent.destructive = forwardRef5(function Destructive2({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
+ModalComponent.destructive = forwardRef6(function Destructive2({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef2(null);
   const onCancelElement = useCallback5(() => {
@@ -3050,9 +3084,9 @@ Modal2.destructive = ModalComponent.destructive;
 var Modal_default = Modal2;
 
 // src/components/PageHolder.tsx
-import { memo as memo10 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function PageHolder({ noMaxContentWidth, children, ...props }) {
+import { forwardRef as forwardRef7, memo as memo10 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx10(
@@ -3064,16 +3098,69 @@ function PageHolder({ noMaxContentWidth, children, ...props }) {
       margin: "0px auto",
       padding: theme2.styles.space,
       ...props,
+      ref,
       children
     }
   );
-}
-var PageHolder_default = memo10(PageHolder);
+});
+PageHolderComponent.center = forwardRef7(function Center({
+  decorationImageSrc,
+  decorationImageName,
+  decorationImagePosition = "right",
+  noMaxContentWidth,
+  children,
+  ...props
+}, ref) {
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const { app } = useBetterHtmlContextInternal();
+  const breakingPoint = mediaQuery.size1000;
+  return /* @__PURE__ */ jsxs6(Div_default.row, { width: "100%", minHeight: "100svh", alignItems: "center", justifyContent: "center", children: [
+    decorationImagePosition === "left" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
+    /* @__PURE__ */ jsx10(
+      Div_default.column,
+      {
+        width: `${!breakingPoint && (decorationImageSrc || decorationImageName) ? 50 : 100}%`,
+        alignItems: "center",
+        children: /* @__PURE__ */ jsx10(
+          Div_default.box,
+          {
+            width: `calc(100% - ${theme2.styles.space}px * 2)`,
+            maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
+            marginInline: theme2.styles.space,
+            marginBlock: theme2.styles.space,
+            ...props,
+            ref,
+            children
+          }
+        )
+      }
+    ),
+    decorationImagePosition === "right" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
+    (decorationImageSrc || decorationImageName) && !breakingPoint && /* @__PURE__ */ jsx10(
+      Image_default,
+      {
+        position: "fixed",
+        name: decorationImageName,
+        src: decorationImageSrc,
+        width: "50%",
+        height: "100svh",
+        top: 0,
+        left: decorationImagePosition === "left" ? 0 : "auto",
+        right: decorationImagePosition === "right" ? 0 : "auto",
+        objectFit: "cover"
+      }
+    )
+  ] });
+});
+var PageHolder2 = memo10(PageHolderComponent);
+PageHolder2.center = PageHolderComponent.center;
+var PageHolder_default = PageHolder2;
 
 // src/components/PageHeader.tsx
-import { memo as memo11 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-function PageHeader({
+import { forwardRef as forwardRef8, memo as memo11 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var PageHeaderComponent = forwardRef8(function PageHeader({
   imageUrl,
   imageSize = 60,
   title,
@@ -3084,59 +3171,69 @@ function PageHeader({
   rightElement,
   lightMode,
   marginBottom
-}) {
+}, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ jsxs6(Div_default.row, { alignItems: "center", gap: theme2.styles.space, marginBottom: marginBottom ?? theme2.styles.space * 2, children: [
-    imageUrl && /* @__PURE__ */ jsx11(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
-    /* @__PURE__ */ jsxs6(
-      Div_default.column,
-      {
-        alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-        flex: 1,
-        gap: theme2.styles.gap / 2,
-        children: [
-          /* @__PURE__ */ jsxs6(
-            Div_default.row,
-            {
-              alignItems: "center",
-              justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-              gap: theme2.styles.space,
-              children: [
-                /* @__PURE__ */ jsx11(
-                  Text_default,
-                  {
-                    as: titleAs ?? "h1",
-                    textAlign,
-                    color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
-                    children: title
-                  }
-                ),
-                titleRightElement
-              ]
-            }
-          ),
-          description && /* @__PURE__ */ jsx11(
-            Text_default,
-            {
-              maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
-              textAlign,
-              color: lightMode ? theme2.colors.base : theme2.colors.textSecondary,
-              opacity: lightMode ? 0.7 : void 0,
-              children: description
-            }
-          )
-        ]
-      }
-    ),
-    rightElement
-  ] });
-}
-var PageHeader_default = memo11(PageHeader);
+  return /* @__PURE__ */ jsxs7(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: theme2.styles.space,
+      marginBottom: marginBottom ?? theme2.styles.space * 2,
+      ref,
+      children: [
+        imageUrl && /* @__PURE__ */ jsx11(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
+        /* @__PURE__ */ jsxs7(
+          Div_default.column,
+          {
+            alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+            flex: 1,
+            gap: theme2.styles.gap / 2,
+            children: [
+              /* @__PURE__ */ jsxs7(
+                Div_default.row,
+                {
+                  alignItems: "center",
+                  justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+                  gap: theme2.styles.space,
+                  children: [
+                    /* @__PURE__ */ jsx11(
+                      Text_default,
+                      {
+                        as: titleAs ?? "h1",
+                        textAlign,
+                        color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
+                        children: title
+                      }
+                    ),
+                    titleRightElement
+                  ]
+                }
+              ),
+              description && /* @__PURE__ */ jsx11(
+                Text_default,
+                {
+                  maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
+                  textAlign,
+                  color: lightMode ? theme2.colors.base : theme2.colors.textSecondary,
+                  opacity: lightMode ? 0.7 : void 0,
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        rightElement
+      ]
+    }
+  );
+});
+var PageHeader2 = memo11(PageHeaderComponent);
+var PageHeader_default = PageHeader2;
 
 // src/components/Chip.tsx
-import { forwardRef as forwardRef6, memo as memo12 } from "react";
+import { forwardRef as forwardRef9, memo as memo12 } from "react";
 
 // src/utils/colorManipulation.ts
 var rgbToHsl = (r, g, b) => {
@@ -3258,7 +3355,7 @@ var desaturateColor = (hexColor, amount) => {
 
 // src/components/Chip.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var ChipComponent = forwardRef6(function Chip({ text, color, backgroundColor, borderRadius, isCircle, ...props }, ref) {
+var ChipComponent = forwardRef9(function Chip({ text, color, backgroundColor, borderRadius, isCircle, ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsx12(
     Div_default,
@@ -3274,7 +3371,7 @@ var ChipComponent = forwardRef6(function Chip({ text, color, backgroundColor, bo
     }
   );
 });
-ChipComponent.colored = forwardRef6(function Colored({ color, ...props }, ref) {
+ChipComponent.colored = forwardRef9(function Colored({ color, ...props }, ref) {
   const theme2 = useTheme();
   const { colorTheme } = useBetterHtmlContextInternal();
   const readyColor = color ?? theme2.colors.textSecondary;
@@ -3294,7 +3391,7 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef8, memo as memo16, useCallback as useCallback8, useState as useState6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4, useId } from "react";
+import { forwardRef as forwardRef11, memo as memo16, useCallback as useCallback8, useState as useState6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4, useId } from "react";
 import styled8 from "styled-components";
 
 // src/constants/countries.ts
@@ -4842,10 +4939,10 @@ var getFormErrorObject = (formValues) => {
 
 // src/components/Label.tsx
 import { memo as memo13 } from "react";
-import { jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsxs as jsxs8 } from "react/jsx-runtime";
 function Label({ text, required, isError, color, htmlFor }) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     Text_default,
     {
       as: "label",
@@ -4857,7 +4954,7 @@ function Label({ text, required, isError, color, htmlFor }) {
       "aria-required": required,
       children: [
         text,
-        required && /* @__PURE__ */ jsxs7(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && /* @__PURE__ */ jsxs8(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
@@ -4868,9 +4965,9 @@ function Label({ text, required, isError, color, htmlFor }) {
 var Label_default = memo13(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef7, memo as memo14, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var DropdownComponent = forwardRef7(function Dropdown({
+import { forwardRef as forwardRef10, memo as memo14, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var DropdownComponent = forwardRef10(function Dropdown({
   label,
   labelColor,
   errorText,
@@ -5057,7 +5154,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", children: [
+  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs9(Div_default.row, { position: "relative", width: "100%", children: [
     /* @__PURE__ */ jsx13(
       InputField_default,
       {
@@ -5115,7 +5212,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
         ref: inputRef
       }
     ),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       Div_default.row,
       {
         position: "absolute",
@@ -5161,10 +5258,10 @@ var DropdownComponent = forwardRef7(function Dropdown({
     )
   ] }) });
 });
-DropdownComponent.countries = forwardRef7(function Countries({ ...props }, ref) {
+DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
   const theme2 = useTheme();
   const renderOption = useCallback6(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs8(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs9(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx13(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx13(Text_default, { children: option.label })
     ] }),
@@ -5199,7 +5296,7 @@ var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
 import { useCallback as useCallback7, useMemo as useMemo4, useState as useState5, memo as memo15, useEffect as useEffect6 } from "react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
   return [
     short ? "Jan" : "January",
@@ -5289,24 +5386,24 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     setCurrentMonth(date.getMonth());
     setCurrentYear(date.getFullYear());
   }, [value]);
-  return /* @__PURE__ */ jsxs9(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
-    /* @__PURE__ */ jsxs9(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
+    /* @__PURE__ */ jsxs10(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx14(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
-      /* @__PURE__ */ jsxs9(Text_default, { fontWeight: 700, children: [
+      /* @__PURE__ */ jsxs10(Text_default, { fontWeight: 700, children: [
         getMonthName(currentMonth),
         " ",
         currentYear
       ] }),
       /* @__PURE__ */ jsx14(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
-    /* @__PURE__ */ jsxs9(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
+    /* @__PURE__ */ jsxs10(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
       weekDaysIndex.map((day) => /* @__PURE__ */ jsx14(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx14(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
       days.map((day, index) => {
         const thisDayDate = new Date(currentYear, currentMonth, day);
         const isSelected = day !== void 0 && day === currentDate?.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear();
         const isWeekend = thisDayDate.getDay() === 6 || thisDayDate.getDay() === 0;
         const isDisabled = minDate && thisDayDate.getTime() < minDate.getTime() || maxDate && thisDayDate.getTime() > maxDate.getTime();
-        return /* @__PURE__ */ jsxs9(
+        return /* @__PURE__ */ jsxs10(
           Div_default.row,
           {
             position: "relative",
@@ -5350,7 +5447,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
         );
       })
     ] }),
-    /* @__PURE__ */ jsxs9(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ jsxs10(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx14(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ jsx14(
         Text_default,
         {
@@ -5377,7 +5474,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
 var Calendar_default = memo15(Calendar);
 
 // src/components/InputField.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
@@ -5413,10 +5510,19 @@ var InputElement = styled8.input.withConfig({
       cursor: not-allowed;
    }
 
+   &::-webkit-outer-spin-button,
+   &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+   }
+
+   &[type="number"] {
+      -moz-appearance: textfield;
+   }
+
    &[type="date"],
    &[type="datetime-local"],
    &[type="time"] {
-      // min-height: 46px;
       -webkit-appearance: none;
       -moz-appearance: textfield;
 
@@ -5516,7 +5622,7 @@ var TextareaElement = styled8.textarea.withConfig({
 `;
 var hours = Array.from({ length: 24 }, (_, index) => index);
 var minutes = Array.from({ length: 60 }, (_, index) => index);
-var InputFieldComponent = forwardRef8(function InputField({
+var InputFieldComponent = forwardRef11(function InputField({
   label,
   labelColor,
   errorText,
@@ -5570,9 +5676,9 @@ var InputFieldComponent = forwardRef8(function InputField({
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+  return /* @__PURE__ */ jsxs11(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
+    /* @__PURE__ */ jsxs11(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ jsx15(
         Icon_default,
         {
@@ -5637,7 +5743,7 @@ var InputFieldComponent = forwardRef8(function InputField({
     )
   ] });
 });
-InputFieldComponent.multiline = forwardRef8(function Multiline({
+InputFieldComponent.multiline = forwardRef11(function Multiline({
   label,
   placeholder,
   errorText,
@@ -5665,9 +5771,9 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs10(Div_default.column, { gap: theme2.styles.gap, children: [
+  return /* @__PURE__ */ jsxs11(Div_default.column, { gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ jsx15(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ jsxs11(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ jsx15(
         Icon_default,
         {
@@ -5731,7 +5837,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
     )
   ] });
 });
-InputFieldComponent.email = forwardRef8(function Email({ ...props }, ref) {
+InputFieldComponent.email = forwardRef11(function Email({ ...props }, ref) {
   return /* @__PURE__ */ jsx15(
     InputFieldComponent,
     {
@@ -5745,7 +5851,7 @@ InputFieldComponent.email = forwardRef8(function Email({ ...props }, ref) {
     }
   );
 });
-InputFieldComponent.password = forwardRef8(function Password({ ...props }, ref) {
+InputFieldComponent.password = forwardRef11(function Password({ ...props }, ref) {
   const [isPassword, setIsPassword] = useBooleanState(true);
   return /* @__PURE__ */ jsx15(
     InputFieldComponent,
@@ -5762,16 +5868,16 @@ InputFieldComponent.password = forwardRef8(function Password({ ...props }, ref)
     }
   );
 });
-InputFieldComponent.search = forwardRef8(function Search({ ...props }, ref) {
+InputFieldComponent.search = forwardRef11(function Search({ ...props }, ref) {
   return /* @__PURE__ */ jsx15(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
 });
-InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
+InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
   const internalId = useId();
   const [dropdownValue, setDropdownValue] = useState6();
   const [inputFieldValue, setInputFieldValue] = useState6(value?.toString() ?? "");
   const renderOption = useCallback8(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs10(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx15(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx15(Text_default, { children: option.label })
     ] }),
@@ -5816,7 +5922,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
+  return /* @__PURE__ */ jsxs11(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ jsx15(
       Label_default,
       {
@@ -5827,7 +5933,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
         htmlFor: readyId
       }
     ),
-    /* @__PURE__ */ jsxs10(Div_default.row, { children: [
+    /* @__PURE__ */ jsxs11(Div_default.row, { children: [
       /* @__PURE__ */ jsx15(
         Dropdown_default,
         {
@@ -5840,8 +5946,10 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
           inputFieldClassName: "react-better-html-phone-number-holder",
           defaultValue,
           value: dropdownValue,
+          disabled: props.disabled,
           onChange: setDropdownValue,
-          withoutClearButton: true
+          withoutClearButton: true,
+          withoutRenderingOptionsWhenClosed: true
         }
       ),
       /* @__PURE__ */ jsx15(
@@ -5859,7 +5967,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     ] })
   ] });
 });
-InputFieldComponent.date = forwardRef8(function Date2({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
@@ -5898,7 +6006,7 @@ InputFieldComponent.date = forwardRef8(function Date2({ minDate, maxDate, ...pro
     }
   );
 });
-InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
   const selectedHourRef = useRef4(null);
@@ -5961,9 +6069,9 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
           overflow: "hidden",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs10(Div_default.row, { gap: theme2.styles.space, children: [
+          children: /* @__PURE__ */ jsxs11(Div_default.row, { gap: theme2.styles.space, children: [
             /* @__PURE__ */ jsx15(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
-            /* @__PURE__ */ jsxs10(
+            /* @__PURE__ */ jsxs11(
               Div_default.row,
               {
                 height: 276,
@@ -5972,7 +6080,7 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
                 paddingBottom: theme2.styles.space / 2,
                 paddingRight: theme2.styles.space / 2,
                 children: [
-                  /* @__PURE__ */ jsxs10(Div_default, { height: "100%", children: [
+                  /* @__PURE__ */ jsxs11(Div_default, { height: "100%", children: [
                     /* @__PURE__ */ jsx15(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
                     /* @__PURE__ */ jsx15(
                       Div_default,
@@ -6005,7 +6113,7 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs10(Div_default, { height: "100%", children: [
+                  /* @__PURE__ */ jsxs11(Div_default, { height: "100%", children: [
                     /* @__PURE__ */ jsx15(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
                     /* @__PURE__ */ jsx15(
                       Div_default,
@@ -6051,7 +6159,7 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
     }
   );
 });
-InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
+InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
   const selectedHourRef = useRef4(null);
@@ -6101,7 +6209,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
           overflowY: "auto",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs10(Div_default.row, { height: "100%", children: [
+          children: /* @__PURE__ */ jsxs11(Div_default.row, { height: "100%", children: [
             /* @__PURE__ */ jsx15(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
               const isSelected = hour.toString() === valueHour;
               return /* @__PURE__ */ jsx15(
@@ -6153,7 +6261,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
     }
   );
 });
-InputFieldComponent.color = forwardRef8(function Color2({ value, onChangeValue, ...props }, ref) {
+InputFieldComponent.color = forwardRef11(function Color2({ value, onChangeValue, ...props }, ref) {
   const [inputFieldValue, setInputFieldValue] = useState6(value ?? "#000000");
   const onChangeValueElement = useCallback8(
     (value2) => {
@@ -6204,9 +6312,9 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback9, useId as useId2, useState as useState7 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback9, useId as useId2, useState as useState7 } from "react";
 import styled9 from "styled-components";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
@@ -6299,7 +6407,7 @@ var SwitchElement = styled9.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var ToggleInputComponent = forwardRef9(function ToggleInput({
+var ToggleInputComponent = forwardRef12(function ToggleInput({
   label,
   labelColor,
   text,
@@ -6336,10 +6444,10 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs11(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+  return /* @__PURE__ */ jsxs12(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", children: [
+    /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ jsxs12(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ jsx16(
           InputElement2,
           {
@@ -6384,9 +6492,9 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text && /* @__PURE__ */ jsxs11(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text && /* @__PURE__ */ jsxs12(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
-        required && !label && /* @__PURE__ */ jsxs11(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && !label && /* @__PURE__ */ jsxs12(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
@@ -6405,13 +6513,13 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
   ] });
 });
 var ToggleInput_default = {
-  checkbox: forwardRef9(function Checkbox(props, ref) {
+  checkbox: forwardRef12(function Checkbox(props, ref) {
     return /* @__PURE__ */ jsx16(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
-  radiobutton: forwardRef9(function RadioButton(props, ref) {
+  radiobutton: forwardRef12(function RadioButton(props, ref) {
     return /* @__PURE__ */ jsx16(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
-  switch: forwardRef9(function Switch({
+  switch: forwardRef12(function Switch({
     label,
     labelColor,
     errorText,
@@ -6441,7 +6549,7 @@ var ToggleInput_default = {
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
-    return /* @__PURE__ */ jsxs11(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+    return /* @__PURE__ */ jsxs12(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
       label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
       /* @__PURE__ */ jsx16(
         Div_default.row,
@@ -6489,24 +6597,26 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-import { Children, Fragment as Fragment4, memo as memo17, useMemo as useMemo6 } from "react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-function Form({
+import { Children, forwardRef as forwardRef13, Fragment as Fragment4, memo as memo17, useMemo as useMemo6 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var FormComponent = forwardRef13(function Form({
   form,
   submitButtonText,
   submitButtonLoaderName,
   submitButtonId,
   submitButtonIsDisabled,
+  cancelButtonText,
   actionButtonsLocation = "right",
   gap,
   isSubmitting,
   isDestructive,
   withDividers,
+  renderActionButtons,
   onClickCancel,
   onSubmit,
   children,
   ...props
-}) {
+}, ref) {
   const theme2 = useTheme();
   const submitButtonIsDisabledInternal = useMemo6(() => {
     if (!form || !form.requiredFields) return false;
@@ -6516,12 +6626,12 @@ function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ jsx17(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs12("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx17(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
+  return /* @__PURE__ */ jsx17(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs13("form", { onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx17(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
       child,
       index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx17(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
-    submitButtonText && /* @__PURE__ */ jsxs12(
+    submitButtonText && /* @__PURE__ */ jsxs13(
       Div_default.row,
       {
         alignItems: "center",
@@ -6529,7 +6639,8 @@ function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          onClickCancel && /* @__PURE__ */ jsx17(Button_default.secondary, { text: "Cancel", onClick: onClickCancel }),
+          renderActionButtons,
+          onClickCancel && /* @__PURE__ */ jsx17(Button_default.secondary, { text: cancelButtonText ?? "Cancel", onClick: onClickCancel }),
           /* @__PURE__ */ jsx17(
             SubmitButtonTag,
             {
@@ -6545,23 +6656,24 @@ function Form({
       }
     )
   ] }) });
-}
-var Form_default = memo17(Form);
+});
+var Form2 = memo17(FormComponent);
+var Form_default = Form2;
 
 // src/components/FormRow.tsx
-import { forwardRef as forwardRef10, memo as memo18 } from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var FormRowComponent = forwardRef10(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
+import { forwardRef as forwardRef14, memo as memo18 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
-  return /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
+  return /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
     oneItemOnly && /* @__PURE__ */ jsx18(Div_default, { width: "100%" })
   ] });
 });
-FormRowComponent.withTitle = forwardRef10(function WithTitle({
+FormRowComponent.withTitle = forwardRef14(function WithTitle({
   icon,
   title,
   description,
@@ -6575,15 +6687,15 @@ FormRowComponent.withTitle = forwardRef10(function WithTitle({
 }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ jsxs13(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ jsxs13(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
+  return /* @__PURE__ */ jsxs14(FormRowComponent, { ...props, ref, children: [
+    /* @__PURE__ */ jsxs14(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
       icon && /* @__PURE__ */ jsx18(Icon_default, { name: icon }),
-      /* @__PURE__ */ jsxs13(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+      /* @__PURE__ */ jsxs14(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ jsx18(Text_default, { as: "h3", children: title }),
         description && /* @__PURE__ */ jsx18(Text_default, { color: theme2.colors.textSecondary, children: description })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs14(
       Div_default.row,
       {
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
@@ -6591,7 +6703,7 @@ FormRowComponent.withTitle = forwardRef10(function WithTitle({
         gap: theme2.styles.gap,
         children: [
           children,
-          withActions && /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+          withActions && /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ jsx18(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
             /* @__PURE__ */ jsx18(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
@@ -6606,7 +6718,7 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 import { memo as memo19, useEffect as useEffect8 } from "react";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
   className,
@@ -6654,7 +6766,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs14(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
+  return /* @__PURE__ */ jsxs15(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
     /* @__PURE__ */ jsx19(Text_default, { children: "Light" }),
     /* @__PURE__ */ jsx19(ColorThemeSwitchComponent, { withMoon, className }),
     /* @__PURE__ */ jsx19(Text_default, { children: "Dark" })
@@ -6665,10 +6777,20 @@ ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-import { forwardRef as forwardRef11, memo as memo20, useCallback as useCallback10, useMemo as useMemo7, useState as useState8 } from "react";
+import {
+  forwardRef as forwardRef15,
+  memo as memo20,
+  useCallback as useCallback10,
+  useMemo as useMemo7,
+  useState as useState8,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef5,
+  useEffect as useEffect9
+} from "react";
 import styled10, { css as css2 } from "styled-components";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultImageWidth = 120;
+var maximumVisiblePages = 11;
 var TableStyledComponent = styled10.table.withConfig({
   shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
 })`
@@ -6684,6 +6806,10 @@ var TableStyledComponent = styled10.table.withConfig({
          font-weight: 700;
       }
 
+      &.isFooter {
+         background-color: ${(props) => props.theme.colors.backgroundSecondary};
+      }
+
       &.isClickable {
          cursor: pointer;
       }
@@ -6732,20 +6858,70 @@ var TdStyledComponent = styled10.td.withConfig({
 })`
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
 `;
-var TableComponent = forwardRef11(function Table({
+var filterPresetsText = {
+  today: "Today",
+  yesterday: "Yesterday",
+  thisWeek: "This week",
+  thisMonth: "This month",
+  thisYear: "This year",
+  lastWeek: "Last week",
+  lastMonth: "Last month",
+  lastYear: "Last year",
+  nextWeek: "Next week",
+  nextMonth: "Next month",
+  nextYear: "Next year"
+};
+var TableComponent = forwardRef15(function Table({
   columns,
   data,
   isStriped,
   isLoading,
   withStickyHeader,
   noDataItemsMessage = "No data available",
+  pageSize,
   onClickRow,
   onClickAllCheckboxes,
+  onChangePage,
+  onChangeFilter,
   ...props
 }, ref) {
-  const { colorTheme } = useBetterHtmlContextInternal();
   const theme2 = useTheme();
+  const mediumScreen = useMediaQuery();
+  const { colorTheme } = useBetterHtmlContextInternal();
+  const filterModalRef = useRef5(null);
   const [checkedItems, setCheckedItems] = useState8([]);
+  const [currentPage, setCurrentPage] = useState8(1);
+  const [filterData, setFilterData] = useState8({});
+  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = useState8();
+  const [filterListSelectedItems, setFilterListSelectedItems] = useState8();
+  const openedFilterData = openedFilterColumnIndex ? filterData[openedFilterColumnIndex] : void 0;
+  const openedFilterColumn = openedFilterColumnIndex ? columns[openedFilterColumnIndex] : void 0;
+  const filterForm = useForm({
+    defaultValues: {
+      min: void 0,
+      max: void 0
+    },
+    onSubmit: (values) => {
+      if (!openedFilterColumn?.filter) return;
+      if (openedFilterColumnIndex === void 0) return;
+      setFilterData((oldValue) => ({
+        ...oldValue,
+        [openedFilterColumnIndex]: openedFilterColumn.filter === "number" ? {
+          type: openedFilterColumn.filter,
+          min: values.min,
+          max: values.max
+        } : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? {
+          type: openedFilterColumn.filter,
+          min: values.min,
+          max: values.max
+        } : openedFilterColumn.filter === "list" ? {
+          type: openedFilterColumn.filter,
+          list: filterListSelectedItems
+        } : void 0
+      }));
+      filterModalRef.current?.close();
+    }
+  });
   const renderCellContent = useCallback10(
     (column, item, index) => {
       switch (column.type) {
@@ -6798,74 +6974,506 @@ var TableComponent = forwardRef11(function Table({
     },
     [onClickAllCheckboxes, data]
   );
+  const onClickFilterButton = useCallback10(
+    (columnIndex) => {
+      const thisFilterData = filterData[columnIndex];
+      if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
+        filterForm.setFieldsValue({
+          min: thisFilterData.min ?? void 0,
+          max: thisFilterData.max ?? void 0
+        });
+      } else if (thisFilterData?.type === "list") {
+        setFilterListSelectedItems(thisFilterData.list);
+      }
+      setOpenedFilterColumnIndex(columnIndex);
+      filterModalRef.current?.open();
+    },
+    [filterData]
+  );
+  const onCloseFilterModal = useCallback10(() => {
+    setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
+    setFilterListSelectedItems(void 0);
+    filterForm.reset();
+  }, []);
+  const onClickCancelFormFilter = useCallback10(() => {
+    if (openedFilterColumnIndex === void 0) return;
+    setFilterData((oldValue) => ({
+      ...oldValue,
+      [openedFilterColumnIndex]: void 0
+    }));
+    filterModalRef.current?.close();
+  }, [openedFilterColumnIndex]);
+  const onClickFilterListItem = useCallback10(
+    (value) => setFilterListSelectedItems((oldValue) => {
+      if (!oldValue) return [value];
+      if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
+      return [...oldValue, value];
+    }),
+    []
+  );
+  const onClickFilterPreset = useCallback10(
+    (preset) => {
+      const getValueForDate = (date) => {
+        if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
+        return date.toISOString();
+      };
+      switch (preset) {
+        case "today":
+          filterForm.setFieldsValue({
+            min: getValueForDate(/* @__PURE__ */ new Date()),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "yesterday":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "thisWeek":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 7))),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "thisMonth":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 1))),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "thisYear":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() - 1))),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "lastWeek":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 7))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "lastMonth":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "lastYear":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() - 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "nextWeek":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 7))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 7)))
+          });
+          break;
+        case "nextMonth":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() + 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() + 1)))
+          });
+          break;
+        case "nextYear":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() + 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() + 1)))
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    [openedFilterColumn]
+  );
+  const dataAfterFilter = useMemo7(
+    () => data.filter(
+      (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
+        if (!filter) return true;
+        const column = columns[parseInt(columnIndex)];
+        if (!column) return true;
+        if (column.filter === "number" && filter.type === "number") {
+          const itemValue = column.getValue?.(item) ?? (column.type === "text" && column.keyName ? Number(item[column.keyName]) : 0);
+          if (filter.min !== void 0 && itemValue < filter.min) return false;
+          if (filter.max !== void 0 && itemValue > filter.max) return false;
+        } else if (column.filter === "date" && filter.type === "date" || column.filter === "date-time" && filter.type === "date-time") {
+          const minDate = filter.min ? new Date(filter.min) : void 0;
+          const maxDate = filter.max ? new Date(filter.max) : void 0;
+          const itemValue = column.getValue?.(item) ?? new Date(column.type === "text" && column.keyName ? String(item[column.keyName]) : "");
+          if (filter.min !== void 0 && minDate && itemValue < minDate) return false;
+          if (filter.max !== void 0 && maxDate && itemValue > maxDate) return false;
+        } else if (column.filter === "list" && filter.type === "list") {
+          const itemValue = column.getValueForList?.(item) ?? (column.type === "text" && column.keyName ? String(item[column.keyName]) : "");
+          if (!filter.list?.includes(itemValue)) return false;
+        }
+        return true;
+      })
+    ),
+    [data, filterData, columns]
+  );
+  const dataAfterPagination = useMemo7(() => {
+    if (pageSize === void 0) return dataAfterFilter;
+    const pageStartItemIndex = (currentPage - 1) * (pageSize ?? 0);
+    const pageEndItemIndex = pageStartItemIndex + (pageSize ?? 0);
+    return dataAfterFilter.slice(pageStartItemIndex, pageEndItemIndex);
+  }, [dataAfterFilter, pageSize, currentPage]);
   const everythingIsChecked = useMemo7(() => {
     return checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  return /* @__PURE__ */ jsx20(
-    Div_default,
-    {
-      border: `1px solid ${theme2.colors.border}`,
-      borderRadius: theme2.styles.borderRadius * 2,
-      overflow: "auto",
-      ...props,
-      ref,
-      children: /* @__PURE__ */ jsxs15(
-        TableStyledComponent,
-        {
-          isStriped,
-          withHover: onClickRow !== void 0,
-          withStickyHeader,
-          colorTheme,
-          theme: theme2,
-          children: [
-            /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsx20("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ jsx20(
-              ThStyledComponent,
-              {
-                width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width,
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth,
-                textAlign: column.align,
-                children: column.label ?? (column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ jsx20(
-                  ToggleInput_default.checkbox,
-                  {
-                    checked: everythingIsChecked,
-                    onChange: onClickAllCheckboxesElement
-                  }
-                ) : "")
-              },
-              column.type + column.label + index
-            )) }) }),
-            /* @__PURE__ */ jsx20("tbody", { children: isLoading ? /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Loader_default.box, {}) }) }) : data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ jsx20(
-              "tr",
-              {
-                className: onClickRow ? "isClickable" : void 0,
-                onClick: () => onClickRowElement(item, rowIndex),
-                children: columns.map((column, colIndex) => /* @__PURE__ */ jsx20(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
-              },
-              JSON.stringify(item) + rowIndex
-            )) : /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Text_default.unknown, { children: noDataItemsMessage }) }) }) })
-          ]
+  const possibleFilterListValues = useMemo7(() => {
+    if (!openedFilterColumn) return [];
+    return data.reduce(
+      (previousValue, currentValue) => {
+        const value = openedFilterColumn.type === "text" && openedFilterColumn.keyName ? String(currentValue[openedFilterColumn.keyName]) : void 0;
+        if (value !== void 0) {
+          if (previousValue.some((item) => item.value === value)) {
+            previousValue = previousValue.map(
+              (item) => item.value === value ? {
+                ...item,
+                count: item.count + 1
+              } : item
+            );
+          } else
+            previousValue.push({
+              value,
+              count: 1
+            });
         }
-      )
+        return previousValue;
+      },
+      []
+    );
+  }, [data, openedFilterColumn]);
+  const pagesCount = pageSize !== void 0 ? Math.ceil(dataAfterPagination.length / pageSize) : 1;
+  const paginationItems = useMemo7(() => {
+    const halfRange = Math.floor(maximumVisiblePages / 2);
+    let startPage = Math.max(1, currentPage - halfRange);
+    let endPage = Math.min(pagesCount, currentPage + halfRange);
+    if (endPage - startPage + 1 < maximumVisiblePages) {
+      startPage = Math.max(1, endPage - maximumVisiblePages + 1);
+      endPage = Math.min(pagesCount, startPage + maximumVisiblePages - 1);
     }
+    return Array.from(
+      {
+        length: endPage - startPage + 1
+      },
+      (_, index) => startPage + index
+    );
+  }, [pagesCount, currentPage]);
+  const onClickNextPage = useCallback10(() => {
+    setCurrentPage((oldValue) => oldValue >= pagesCount ? pagesCount : oldValue + 1);
+  }, [pagesCount]);
+  const onClickPreviousPage = useCallback10(() => {
+    setCurrentPage((oldValue) => oldValue <= 1 ? 1 : oldValue - 1);
+  }, []);
+  const onClickSelectAllFilterListItems = useCallback10(
+    () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
+    [possibleFilterListValues]
   );
+  const onClickDeselectAllFilterListItems = useCallback10(() => setFilterListSelectedItems([]), []);
+  useEffect9(() => {
+    onChangePage?.(currentPage);
+  }, [onChangePage, currentPage]);
+  useEffect9(() => {
+    onChangeFilter?.(filterData);
+  }, [onChangeFilter, filterData]);
+  useImperativeHandle2(
+    ref,
+    () => {
+      return {
+        currentPage,
+        setCurrentPage,
+        pagesCount,
+        setCheckedItems
+      };
+    },
+    [currentPage, setCurrentPage, pagesCount, setCheckedItems]
+  );
+  const mobileFooterBreakingPoint = mediumScreen.size700 && pagesCount > maximumVisiblePages / 1.4;
+  return /* @__PURE__ */ jsxs16(Fragment5, { children: [
+    /* @__PURE__ */ jsx20(
+      Div_default,
+      {
+        border: `1px solid ${theme2.colors.border}`,
+        borderRadius: theme2.styles.borderRadius * 2,
+        overflow: "auto",
+        ...props,
+        children: /* @__PURE__ */ jsxs16(
+          TableStyledComponent,
+          {
+            isStriped,
+            withHover: onClickRow !== void 0,
+            withStickyHeader,
+            colorTheme,
+            theme: theme2,
+            children: [
+              /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsx20("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ jsx20(
+                ThStyledComponent,
+                {
+                  width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width,
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  textAlign: column.align,
+                  children: /* @__PURE__ */ jsxs16(
+                    Div_default.row,
+                    {
+                      width: "100%",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: theme2.styles.gap,
+                      children: [
+                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ jsx20(
+                          ToggleInput_default.checkbox,
+                          {
+                            checked: everythingIsChecked,
+                            onChange: onClickAllCheckboxesElement
+                          }
+                        ) : column.label ? /* @__PURE__ */ jsx20(Text_default, { children: column.label }) : void 0,
+                        column.filter && /* @__PURE__ */ jsx20(
+                          Button_default.icon,
+                          {
+                            icon: "filter",
+                            color: filterData[index] ? theme2.colors.primary : theme2.colors.textSecondary,
+                            value: index,
+                            onClickWithValue: onClickFilterButton
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                column.type + column.label + index
+              )) }) }),
+              /* @__PURE__ */ jsx20("tbody", { children: isLoading ? /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsx20(
+                "tr",
+                {
+                  className: onClickRow ? "isClickable" : void 0,
+                  onClick: () => onClickRowElement(item, rowIndex),
+                  children: columns.map((column, colIndex) => /* @__PURE__ */ jsx20(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
+                },
+                JSON.stringify(item) + rowIndex
+              )) : /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              pageSize !== void 0 && /* @__PURE__ */ jsx20("tfoot", { children: /* @__PURE__ */ jsx20("tr", { className: "isFooter", children: /* @__PURE__ */ jsx20("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxs16(
+                Div_default.column,
+                {
+                  position: "relative",
+                  width: "100%",
+                  justifyContent: "center",
+                  flexReverse: true,
+                  gap: theme2.styles.gap / 2,
+                  children: [
+                    /* @__PURE__ */ jsxs16(
+                      Text_default,
+                      {
+                        position: mobileFooterBreakingPoint ? "relative" : "absolute",
+                        top: !mobileFooterBreakingPoint ? "50%" : void 0,
+                        color: theme2.colors.textSecondary,
+                        transform: !mobileFooterBreakingPoint ? "translateY(-50%)" : void 0,
+                        userSelect: "none",
+                        children: [
+                          currentPage,
+                          " / ",
+                          pagesCount
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+                      pagesCount > maximumVisiblePages && /* @__PURE__ */ jsx20(
+                        Button_default.icon,
+                        {
+                          icon: "doubleChevronLeft",
+                          disabled: currentPage === 1,
+                          value: 1,
+                          onClickWithValue: setCurrentPage
+                        }
+                      ),
+                      /* @__PURE__ */ jsx20(
+                        Button_default.icon,
+                        {
+                          icon: "chevronLeft",
+                          disabled: currentPage === 1,
+                          onClick: onClickPreviousPage
+                        }
+                      ),
+                      /* @__PURE__ */ jsx20(
+                        Div_default.row,
+                        {
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexWrap: mobileFooterBreakingPoint ? "wrap" : void 0,
+                          gap: theme2.styles.gap,
+                          children: paginationItems.map((pageIndex) => {
+                            const isActive = currentPage === pageIndex;
+                            return /* @__PURE__ */ jsx20(
+                              Div_default,
+                              {
+                                cursor: "pointer",
+                                userSelect: "none",
+                                value: pageIndex,
+                                onClickWithValue: setCurrentPage,
+                                children: /* @__PURE__ */ jsx20(
+                                  Text_default,
+                                  {
+                                    fontWeight: isActive ? 700 : 400,
+                                    color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
+                                    transition: theme2.styles.transition,
+                                    children: pageIndex
+                                  }
+                                )
+                              },
+                              pageIndex
+                            );
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx20(
+                        Button_default.icon,
+                        {
+                          icon: "chevronRight",
+                          disabled: currentPage === pagesCount,
+                          onClick: onClickNextPage
+                        }
+                      ),
+                      pagesCount > maximumVisiblePages && /* @__PURE__ */ jsx20(
+                        Button_default.icon,
+                        {
+                          icon: "doubleChevronRight",
+                          disabled: currentPage === pagesCount,
+                          onClickWithValue: setCurrentPage,
+                          value: pagesCount
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) }) }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      Modal_default,
+      {
+        title: `Filter ${openedFilterColumn?.label}`,
+        description: openedFilterColumn?.filter === "number" ? "Enter minimum and maximum values to filter" : openedFilterColumn?.filter === "date" || openedFilterColumn?.filter === "date-time" ? "Enter minimum and maximum dates to filter" : openedFilterColumn?.filter === "list" ? "Select values to filter from the list bellow" : "",
+        onClose: onCloseFilterModal,
+        ref: filterModalRef,
+        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ jsx20(
+          Form_default,
+          {
+            form: filterForm,
+            submitButtonText: "Filter",
+            cancelButtonText: "Clear",
+            onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
+            children: /* @__PURE__ */ jsxs16(FormRow_default, { children: [
+              /* @__PURE__ */ jsx20(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
+              /* @__PURE__ */ jsx20(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
+            ] })
+          }
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs16(
+          Form_default,
+          {
+            form: filterForm,
+            gap: theme2.styles.gap,
+            submitButtonText: "Filter",
+            cancelButtonText: "Clear",
+            onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
+            children: [
+              /* @__PURE__ */ jsxs16(FormRow_default, { children: [
+                /* @__PURE__ */ jsx20(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ jsx20(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              ] }),
+              openedFilterColumn.presets && /* @__PURE__ */ jsxs16(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ jsx20(Label_default, { text: "Presets" }),
+                /* @__PURE__ */ jsx20(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => {
+                  return /* @__PURE__ */ jsx20(
+                    Button_default.secondary,
+                    {
+                      text: filterPresetsText[preset],
+                      value: preset,
+                      onClickWithValue: onClickFilterPreset
+                    },
+                    preset
+                  );
+                }) })
+              ] })
+            ]
+          }
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsx20(
+          Form_default,
+          {
+            submitButtonText: "Filter",
+            cancelButtonText: "Clear",
+            renderActionButtons: /* @__PURE__ */ jsxs16(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+              /* @__PURE__ */ jsx20(
+                Button_default.secondary,
+                {
+                  text: "Select All",
+                  disabled: possibleFilterListValues.length === filterListSelectedItems?.length,
+                  onClick: onClickSelectAllFilterListItems
+                }
+              ),
+              /* @__PURE__ */ jsx20(
+                Button_default.secondary,
+                {
+                  text: "Deselect All",
+                  disabled: !filterListSelectedItems?.length,
+                  onClick: onClickDeselectAllFilterListItems
+                }
+              )
+            ] }),
+            onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
+            onSubmit: filterForm.onSubmit,
+            children: /* @__PURE__ */ jsxs16(Div_default.column, { gap: theme2.styles.gap / 2, marginBottom: theme2.styles.space, children: [
+              /* @__PURE__ */ jsx20(Label_default, { text: "Possible values" }),
+              /* @__PURE__ */ jsx20(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.map((value) => {
+                const isActive = filterListSelectedItems?.includes(value.value);
+                return /* @__PURE__ */ jsx20(
+                  Div_default.box,
+                  {
+                    isActive,
+                    value: value.value,
+                    onClickWithValue: onClickFilterListItem,
+                    children: /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                      /* @__PURE__ */ jsx20(Text_default, { children: value.value }),
+                      openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs16(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: [
+                        "(",
+                        value.count,
+                        ")"
+                      ] })
+                    ] })
+                  },
+                  value.value
+                );
+              }) })
+            ] })
+          }
+        ) : /* @__PURE__ */ jsx20(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ jsx20(Loader_default.box, {})
+      }
+    )
+  ] });
 });
 var Table2 = memo20(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tabs.tsx
-import { forwardRef as forwardRef12, memo as memo21, useCallback as useCallback11, useEffect as useEffect9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo8, useRef as useRef5, useState as useState9 } from "react";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { forwardRef as forwardRef16, memo as memo21, useCallback as useCallback11, useEffect as useEffect10, useImperativeHandle as useImperativeHandle3, useMemo as useMemo8, useRef as useRef6, useState as useState9 } from "react";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = forwardRef12(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { colorTheme, componentsState } = useBetterHtmlContextInternal();
-  const firstRenderPassedRef = useRef5(false);
-  const tabsRef = useRef5({});
+  const firstRenderPassedRef = useRef6(false);
+  const tabsRef = useRef6({});
   const [selectedTab, setSelectedTab] = useState9(() => {
     const selectedTabValue = tabs[0] ?? "";
     if (urlQuery) {
@@ -6901,7 +7509,7 @@ var TabsComponent = forwardRef12(function Tabs({ tabs, name, accentColor, style
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  useEffect9(() => {
+  useEffect10(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -6910,7 +7518,7 @@ var TabsComponent = forwardRef12(function Tabs({ tabs, name, accentColor, style
       clearTimeout(timeout);
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -6931,20 +7539,20 @@ var TabsComponent = forwardRef12(function Tabs({ tabs, name, accentColor, style
       }
     });
   }, [selectedTab, name]);
-  useEffect9(() => {
+  useEffect10(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  useEffect9(() => {
+  useEffect10(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
       );
     };
   }, []);
-  useImperativeHandle2(
+  useImperativeHandle3(
     ref,
     () => {
       return {
@@ -6954,11 +7562,11 @@ var TabsComponent = forwardRef12(function Tabs({ tabs, name, accentColor, style
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ jsxs16(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ jsxs16(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+  return /* @__PURE__ */ jsxs17(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ jsxs17(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ jsx21(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ jsxs16(
+        return /* @__PURE__ */ jsxs17(
           Div_default,
           {
             position: "relative",
@@ -7029,7 +7637,7 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -7045,11 +7653,11 @@ Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef13, memo as memo22, useCallback as useCallback12, useEffect as useEffect10, useImperativeHandle as useImperativeHandle3, useRef as useRef6, useState as useState10 } from "react";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { forwardRef as forwardRef17, memo as memo22, useCallback as useCallback12, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef7, useState as useState10 } from "react";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = forwardRef13(function Foldable({
+var FoldableComponent = forwardRef17(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
@@ -7064,7 +7672,7 @@ var FoldableComponent = forwardRef13(function Foldable({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const bodyRef = useRef6(null);
+  const bodyRef = useRef7(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
   const [bodyVirtualHeight, setBodyVirtualHeight] = useState10(500);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -7080,11 +7688,11 @@ var FoldableComponent = forwardRef13(function Foldable({
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!bodyRef.current) return;
     setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
   }, [isOpen]);
-  useImperativeHandle3(
+  useImperativeHandle4(
     ref,
     () => {
       return {
@@ -7096,8 +7704,8 @@ var FoldableComponent = forwardRef13(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ jsxs17(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs18(
       Div_default.row,
       {
         width: "100%",
@@ -7109,10 +7717,10 @@ var FoldableComponent = forwardRef13(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ jsxs17(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+          /* @__PURE__ */ jsxs18(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
             icon && /* @__PURE__ */ jsx22(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ jsx22(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ jsxs17(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+            /* @__PURE__ */ jsxs18(Div_default.column, { gap: theme2.styles.gap / 2, children: [
               title && /* @__PURE__ */ jsx22(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
               description && /* @__PURE__ */ jsx22(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
@@ -7143,7 +7751,7 @@ var FoldableComponent = forwardRef13(function Foldable({
     )
   ] });
 });
-FoldableComponent.box = forwardRef13(function Box3({ ...props }, ref) {
+FoldableComponent.box = forwardRef17(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsx22(
     FoldableComponent,