react-better-html 1.1.236 → 1.1.238

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { Color, BetterCoreProviderConfig, DeepPartialRecord, OmitProps, BetterCoreConfig, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, PickValue, Country } from 'react-better-core';
-export { API, APIConfigItem, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
+export { API, APIConfigItem, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -582,6 +582,7 @@ type PageHolderProps = {
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
+        height?: React.CSSProperties["height"];
         pageBackgroundColor?: React.CSSProperties["backgroundColor"];
         pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
@@ -591,7 +592,7 @@ type PageHolderComponentType = {
         sideComponent?: React.ReactNode;
         /** @default "right" */
         sideComponentPosition?: "left" | "right";
-    }>) => React.ReactElement;
+    } & ComponentMarginProps>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;
 declare const PageHolder: typeof PageHolderComponent & {
@@ -1030,11 +1031,20 @@ type SideMenuProps = {
     withCloseButton?: boolean;
     widthMobileHandle?: boolean;
     absoluteComponent?: React.ReactNode;
-    additionalComponent?: React.ReactNode;
+    itemsAdditionalComponent?: React.ReactNode;
+    betweenItemsAdditionalComponent?: React.ReactNode;
+    bottomItemsAdditionalComponent?: React.ReactNode;
     isLoading?: boolean;
     /** @default backgroundContent */
     backgroundColor?: React.CSSProperties["backgroundColor"];
+    /** @default primary */
+    activeItemColor?: string;
+    hoverItemColor?: string;
+    gap?: React.CSSProperties["gap"];
     paddingTop?: React.CSSProperties["paddingTop"];
+    paddingBottom?: React.CSSProperties["paddingBottom"];
+    renderItemsHolder?: (items: React.ReactNode) => React.ReactNode;
+    renderBottomItemsHolder?: (items: React.ReactNode) => React.ReactNode;
 };
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Color, BetterCoreProviderConfig, DeepPartialRecord, OmitProps, BetterCoreConfig, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, PickValue, Country } from 'react-better-core';
-export { API, APIConfigItem, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
+export { API, APIConfigItem, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -582,6 +582,7 @@ type PageHolderProps = {
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
+        height?: React.CSSProperties["height"];
         pageBackgroundColor?: React.CSSProperties["backgroundColor"];
         pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
@@ -591,7 +592,7 @@ type PageHolderComponentType = {
         sideComponent?: React.ReactNode;
         /** @default "right" */
         sideComponentPosition?: "left" | "right";
-    }>) => React.ReactElement;
+    } & ComponentMarginProps>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;
 declare const PageHolder: typeof PageHolderComponent & {
@@ -1030,11 +1031,20 @@ type SideMenuProps = {
     withCloseButton?: boolean;
     widthMobileHandle?: boolean;
     absoluteComponent?: React.ReactNode;
-    additionalComponent?: React.ReactNode;
+    itemsAdditionalComponent?: React.ReactNode;
+    betweenItemsAdditionalComponent?: React.ReactNode;
+    bottomItemsAdditionalComponent?: React.ReactNode;
     isLoading?: boolean;
     /** @default backgroundContent */
     backgroundColor?: React.CSSProperties["backgroundColor"];
+    /** @default primary */
+    activeItemColor?: string;
+    hoverItemColor?: string;
+    gap?: React.CSSProperties["gap"];
     paddingTop?: React.CSSProperties["paddingTop"];
+    paddingBottom?: React.CSSProperties["paddingBottom"];
+    renderItemsHolder?: (items: React.ReactNode) => React.ReactNode;
+    renderBottomItemsHolder?: (items: React.ReactNode) => React.ReactNode;
 };
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;

package/dist/index.js

@@ -57,6 +57,7 @@ __export(index_exports, {
   Tooltip: () => Tooltip_default,
   alertControls: () => alertControls,
   alertsPlugin: () => alertsPlugin,
+  calculateColorContrast: () => import_react_better_core30.calculateColorContrast,
   colorThemeControls: () => import_react_better_core30.colorThemeControls,
   countries: () => import_react_better_core30.countries,
   darkenColor: () => import_react_better_core30.darkenColor,
@@ -3356,6 +3357,7 @@ var PageHolderComponent = (0, import_react15.forwardRef)(function PageHolder({ n
   );
 });
 PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
+  height,
   pageBackgroundColor,
   pageBackgroundImage,
   contentMaxWidth,
@@ -3398,18 +3400,29 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
           }
         ),
         sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default, { width: "50%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          ContentTag,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Div_default.column,
           {
-            width: `calc(100% - ${theme2.styles.space * 2}px)`,
-            maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
-            marginInline: theme2.styles.space,
-            marginBlock: theme2.styles.space,
-            ...props,
-            ref,
-            children
+            position: "relative",
+            width: `${withSideComponent ? 50 : 100}%`,
+            height,
+            alignItems: "center",
+            zIndex: 2,
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ContentTag,
+              {
+                width: `calc(100% - ${theme2.styles.space * 2}px)`,
+                maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
+                height,
+                marginInline: theme2.styles.space,
+                marginBlock: theme2.styles.space,
+                ...props,
+                ref,
+                children
+              }
+            )
           }
-        ) }),
+        ),
         sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default, { width: "50%" }),
         withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Div_default,
@@ -5563,7 +5576,12 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react23.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react23.Fragment, { children: [
       child,
-      index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth })
+      index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        Divider_default.horizontal,
+        {
+          width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth
+        }
+      )
     ] }, index)) : children }) : children,
     submitButtonText && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       Div_default.row,
@@ -7006,7 +7024,15 @@ TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
 });
 TooltipComponent.divider = (0, import_react28.forwardRef)(function DividerComponent(props, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth, marginBlock: theme2.styles.gap, ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    Divider_default.horizontal,
+    {
+      width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth,
+      marginBlock: theme2.styles.gap,
+      ...props,
+      ref
+    }
+  );
 });
 TooltipComponent.sectionTitle = (0, import_react28.forwardRef)(function SectionTitle({ text, ...props }, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
@@ -7337,7 +7363,7 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Div_default,
       {
@@ -7385,7 +7411,13 @@ var useSideMenuContext = () => {
   }
   return context;
 };
-var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
+var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
+  item,
+  backgroundColor,
+  activeItemColor,
+  hoverItemColor,
+  onClick
+}) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -7426,6 +7458,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
   const lineHeight = 20;
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
+  const backgroundColorContrast = activeItemColor ? (0, import_react_better_core29.calculateColorContrast)(activeItemColor, theme2.colors.primary) : 21;
   const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Tooltip_default,
     {
@@ -7444,24 +7477,33 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
           alignItems: "center",
           gap: iconGap,
           whiteSpace: "nowrap",
-          backgroundColor: isActive ? colorTheme === "dark" ? (0, import_react_better_core29.lightenColor)(theme2.colors.primary, 0.7) : (0, import_react_better_core29.lightenColor)(theme2.colors.primary, 0.85) : readyBackgroundColor,
+          backgroundColor: isActive ? activeItemColor ?? (colorTheme === "dark" ? (0, import_react_better_core29.lightenColor)(theme2.colors.primary, 0.7) : (0, import_react_better_core29.lightenColor)(theme2.colors.primary, 0.85)) : readyBackgroundColor,
+          backgroundColorHover: hoverItemColor,
           borderRadius: theme2.styles.borderRadius,
           paddingBlock,
           paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
           paddingRight: theme2.styles.space,
-          filterHover: `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})`,
+          filterHover: !hoverItemColor ? `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})` : void 0,
           overflow: isCollapsed ? "hidden" : void 0,
           cursor: item.disabled ? "not-allowed" : "pointer",
           opacity: item.disabled ? 0.6 : void 0,
           onClick: onClickElement,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              Icon_default,
+              {
+                name: item.iconName,
+                color: isActive && backgroundColorContrast < 7 ? theme2.colors.base : theme2.colors.primary,
+                size: iconSize,
+                flexShrink: 0
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               Text_default,
               {
                 flex: 1,
                 lineHeight: `${lineHeight}px`,
-                color: isActive ? theme2.colors.primary : theme2.colors.textPrimary,
+                color: isActive ? backgroundColorContrast < 7 ? theme2.colors.base : theme2.colors.primary : theme2.colors.textPrimary,
                 opacity: isCollapsed ? 0 : void 0,
                 transition: theme2.styles.transition,
                 children: item.text
@@ -7596,10 +7638,18 @@ var SideMenuComponent = function SideMenu({
   withCloseButton,
   widthMobileHandle,
   absoluteComponent,
-  additionalComponent,
+  itemsAdditionalComponent,
+  betweenItemsAdditionalComponent,
+  bottomItemsAdditionalComponent,
   isLoading,
   backgroundColor,
-  paddingTop
+  activeItemColor,
+  hoverItemColor,
+  gap,
+  paddingTop,
+  paddingBottom,
+  renderItemsHolder,
+  renderBottomItemsHolder
 }) {
   const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
@@ -7624,9 +7674,53 @@ var SideMenuComponent = function SideMenu({
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
+  const itemsComponent = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    Div_default.column,
+    {
+      width: "100%",
+      height: "100%",
+      overflowY: !isCollapsed ? "auto" : void 0,
+      paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
+      paddingBottom: !renderItemsHolder ? !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0 : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        MenuItemComponent,
+        {
+          item,
+          backgroundColor: readyBackgroundColor,
+          activeItemColor,
+          hoverItemColor,
+          onClick: onClickXButton
+        },
+        item.text
+      )) })
+    }
+  );
+  const bottomItemsComponent = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    Div_default.column,
+    {
+      borderTop: mediaQuery.size1000 ? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
+      gap: theme2.styles.gap / 2,
+      marginTop: "auto",
+      paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
+      paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
+      paddingBottom: !renderItemsHolder ? !isCollapsable ? theme2.styles.space : void 0 : void 0,
+      children: readyBottomItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        MenuItemComponent,
+        {
+          item,
+          backgroundColor: readyBackgroundColor,
+          activeItemColor,
+          hoverItemColor,
+          onClick: onClickXButton
+        },
+        item.text
+      ))
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default.column,
     {
+      as: "aside",
       position: "fixed",
       width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
       height: `calc(100svh - ${topSpace}px)`,
@@ -7636,11 +7730,12 @@ var SideMenuComponent = function SideMenu({
       borderRight: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
+      paddingBottom,
       transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
       userSelect: "none",
       zIndex: 10,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
           (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               Div_default.row,
@@ -7678,48 +7773,13 @@ var SideMenuComponent = function SideMenu({
             ) }),
             withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
+          itemsAdditionalComponent,
           !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              Div_default.column,
-              {
-                width: "100%",
-                height: "100%",
-                overflowY: !isCollapsed ? "auto" : void 0,
-                paddingInline: theme2.styles.space,
-                paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  MenuItemComponent,
-                  {
-                    item,
-                    backgroundColor: readyBackgroundColor,
-                    onClick: onClickXButton
-                  },
-                  item.text
-                )) })
-              }
-            ),
-            readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              Div_default.column,
-              {
-                borderTop: mediaQuery.size1000 ? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
-                gap: theme2.styles.gap / 2,
-                marginTop: "auto",
-                paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
-                paddingInline: theme2.styles.space,
-                paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
-                children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  MenuItemComponent,
-                  {
-                    item,
-                    backgroundColor: readyBackgroundColor,
-                    onClick: onClickXButton
-                  },
-                  item.text
-                ))
-              }
-            )
+            renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
+            betweenItemsAdditionalComponent,
+            readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
-          additionalComponent,
+          bottomItemsAdditionalComponent,
           isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Div_default,
             {
@@ -7908,6 +7968,7 @@ var SideMenu_default = SideMenu2;
   Tooltip,
   alertControls,
   alertsPlugin,
+  calculateColorContrast,
   colorThemeControls,
   countries,
   darkenColor,