react-better-html 1.1.112 → 1.1.114

package/dist/index.d.mts

@@ -855,6 +855,9 @@ declare const loaderControls: {
     startLoading: (loaderName: LoaderName | AnyOtherString) => void;
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
 };
+declare const colorThemeControls: {
+    toggleTheme: (theme?: ColorTheme) => void;
+};
 
 declare const countries: Country[];
 
@@ -862,4 +865,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -855,6 +855,9 @@ declare const loaderControls: {
     startLoading: (loaderName: LoaderName | AnyOtherString) => void;
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
 };
+declare const colorThemeControls: {
+    toggleTheme: (theme?: ColorTheme) => void;
+};
 
 declare const countries: Country[];
 
@@ -862,4 +865,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -52,6 +52,7 @@ __export(index_exports, {
   Tabs: () => Tabs_default,
   Text: () => Text_default,
   ToggleInput: () => ToggleInput_default,
+  colorThemeControls: () => colorThemeControls,
   countries: () => countries,
   darkenColor: () => darkenColor,
   desaturateColor: () => desaturateColor,
@@ -2899,6 +2900,7 @@ var Divider_default = {
 
 // src/components/Modal.tsx
 var import_react11 = require("react");
+var import_react_dom = require("react-dom");
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var DialogStylesElement = import_styled_components8.default.dialog.withConfig({
@@ -2995,101 +2997,104 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
     },
     [onClickOpen, onClickClose, isOpened]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    DialogStylesElement,
-    {
-      theme: theme2,
-      colorTheme,
-      opacity: !isOpened ? 0 : 1,
-      onClose: onClickClose,
-      ref: dialogRef,
-      children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Div_default.column,
-        {
-          position: "relative",
-          width: "100%",
-          maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
-          minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
-          alignItems: "center",
-          justifyContent: "center",
-          marginBlock: theme2.styles.space,
-          marginInline: "auto",
-          transform: `translateY(${theme2.styles.space}px)`,
-          transition: theme2.styles.transition,
-          animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-            Div_default,
-            {
-              position: "relative",
-              width: "100%",
-              minHeight: 32 + theme2.styles.space * 2,
-              backgroundColor: theme2.colors.backgroundBase,
-              borderRadius: theme2.styles.borderRadius * 2,
-              paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
-              paddingBlock: !title ? theme2.styles.space : void 0,
-              overflow,
-              children: [
-                title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    Div_default.row,
-                    {
-                      alignItems: "center",
-                      gap: theme2.styles.gap,
-                      backgroundColor: headerBackgroundColor,
-                      borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
-                      borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
-                      paddingInline: theme2.styles.space + theme2.styles.gap,
-                      paddingBlock: theme2.styles.space,
-                      transition: theme2.styles.transition,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      DialogStylesElement,
+      {
+        theme: theme2,
+        colorTheme,
+        opacity: !isOpened ? 0 : 1,
+        onClose: onClickClose,
+        ref: dialogRef,
+        children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Div_default.column,
+          {
+            position: "relative",
+            width: "100%",
+            maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
+            minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
+            alignItems: "center",
+            justifyContent: "center",
+            marginBlock: theme2.styles.space,
+            marginInline: "auto",
+            transform: `translateY(${theme2.styles.space}px)`,
+            transition: theme2.styles.transition,
+            animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              Div_default,
+              {
+                position: "relative",
+                width: "100%",
+                minHeight: 32 + theme2.styles.space * 2,
+                backgroundColor: theme2.colors.backgroundBase,
+                borderRadius: theme2.styles.borderRadius * 2,
+                paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
+                paddingBlock: !title ? theme2.styles.space : void 0,
+                overflow,
+                children: [
+                  title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        gap: theme2.styles.gap,
+                        backgroundColor: headerBackgroundColor,
+                        borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
+                        borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
+                        paddingInline: theme2.styles.space + theme2.styles.gap,
+                        paddingBlock: theme2.styles.space,
+                        transition: theme2.styles.transition,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              Text_default,
+                              {
+                                as: "h1",
+                                color: titleColor ?? theme2.colors.textPrimary,
+                                transition: theme2.styles.transition,
+                                children: title
+                              }
+                            ),
+                            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              Text_default,
+                              {
+                                color: descriptionColor ?? theme2.colors.textSecondary,
+                                transition: theme2.styles.transition,
+                                children: description
+                              }
+                            )
+                          ] }),
                           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            Text_default,
-                            {
-                              as: "h1",
-                              color: titleColor ?? theme2.colors.textPrimary,
-                              transition: theme2.styles.transition,
-                              children: title
-                            }
-                          ),
-                          description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            Text_default,
+                            Button_default.icon,
                             {
-                              color: descriptionColor ?? theme2.colors.textSecondary,
-                              transition: theme2.styles.transition,
-                              children: description
+                              icon: "XMark",
+                              marginTop: 1,
+                              iconColor: titleColor,
+                              onClick: onClickClose,
+                              transition: theme2.styles.transition
                             }
                           )
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                          Button_default.icon,
-                          {
-                            icon: "XMark",
-                            marginTop: 1,
-                            iconColor: titleColor,
-                            onClick: onClickClose,
-                            transition: theme2.styles.transition
-                          }
-                        )
-                      ]
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, {})
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Div_default,
+                    {
+                      paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
+                      paddingBlock: title ? theme2.styles.space : void 0,
+                      children
                     }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, {})
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  Div_default,
-                  {
-                    paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
-                    paddingBlock: title ? theme2.styles.space : void 0,
-                    children
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ) : void 0
-    }
+                  )
+                ]
+              }
+            )
+          }
+        ) : void 0
+      }
+    ),
+    document.body
   );
 });
 ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
@@ -3104,7 +3109,7 @@ ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmati
     modalRef.current?.close();
   }, [onContinue]);
   (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal2, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       Div_default.row,
@@ -3133,7 +3138,7 @@ ModalComponent.destructive = (0, import_react11.forwardRef)(function Destructive
     modalRef.current?.close();
   }, [onDelete]);
   (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal2, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       Div_default.row,
@@ -3198,6 +3203,7 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
+  const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     Div_default.row,
     {
@@ -3207,8 +3213,8 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
       children: [
-        sideImagePosition === "left" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${!breakingPoint && (sideImageSrc || sideImageName) ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        sideImagePosition === "left" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space}px * 2)`,
@@ -3220,8 +3226,8 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
             children
           }
         ) }),
-        sideImagePosition === "right" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
-        (sideImageSrc || sideImageName) && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        sideImagePosition === "right" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
+        withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           Div_default,
           {
             position: "fixed",
@@ -6817,6 +6823,45 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 var import_react22 = require("react");
+
+// src/utils/variableFunctions.ts
+var checkBetterHtmlContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var loaderControls = {
+  startLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: true
+    }));
+  },
+  stopLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: false
+    }));
+  }
+};
+var colorThemeControls = {
+  toggleTheme: (theme2) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
+    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
+    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
+    setTimeout(() => {
+      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
+      localStorage.setItem("theme", newColorTheme);
+    }, 0.01 * 1e3);
+  }
+};
+
+// src/components/ColorThemeSwitch.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
@@ -6829,13 +6874,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
     }
   });
   (0, import_react22.useEffect)(() => {
-    const timeout = setTimeout(() => {
-      window.document.body.parentElement?.setAttribute("data-theme", form.values.darkMode ? "dark" : "light");
-      localStorage.setItem("theme", form.values.darkMode ? "dark" : "light");
-    }, 0.2 * 1e3);
-    return () => {
-      clearTimeout(timeout);
-    };
+    colorThemeControls.toggleTheme(form.values.darkMode ? "dark" : "light");
   }, [form.values.darkMode]);
   (0, import_react22.useEffect)(() => {
     const html = document.querySelector("html");
@@ -6914,7 +6953,7 @@ var TableStyledComponent = import_styled_components11.default.table.withConfig({
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
-                    filter: brightness(${props.colorTheme === "light" ? "0.95" : "0.85"});
+                    filter: brightness(${props.colorTheme === "light" ? 0.95 : 0.7});
                  }
               ` : ""}
 
@@ -7239,7 +7278,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
       []
     );
   }, [data, openedFilterColumn]);
-  const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterPagination.length / pageSize) : 1);
+  const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
   const paginationItems = (0, import_react23.useMemo)(() => {
     const halfRange = Math.floor(maximumVisiblePages / 2);
     let startPage = Math.max(1, currentPage - halfRange);
@@ -7532,11 +7571,18 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
                     onClickWithValue: onClickFilterListItem,
                     children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { children: value.value }),
-                      openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: [
-                        "(",
-                        value.count,
-                        ")"
-                      ] })
+                      openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                        Text_default,
+                        {
+                          fontSize: 14,
+                          color: isActive ? theme2.colors.base + "c0" : theme2.colors.textSecondary,
+                          children: [
+                            "(",
+                            value.count,
+                            ")"
+                          ]
+                        }
+                      )
                     ] })
                   },
                   value.value
@@ -7861,32 +7907,6 @@ var Foldable2 = (0, import_react25.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
-// src/utils/variableFunctions.ts
-var checkBetterHtmlContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var loaderControls = {
-  startLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: true
-    }));
-  },
-  stopLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: false
-    }));
-  }
-};
-
 // src/plugins/react-router-dom.ts
 var import_react_router_dom2 = require("react-router-dom");
 var reactRouterDomPlugin = {
@@ -7923,6 +7943,7 @@ var reactRouterDomPlugin = {
   Tabs,
   Text,
   ToggleInput,
+  colorThemeControls,
   countries,
   darkenColor,
   desaturateColor,