react-better-html 1.1.282 → 1.1.284

package/dist/index.mjs

@@ -3088,6 +3088,11 @@ var GlobalStyle = createGlobalStyle`
       -webkit-tap-highlight-color: transparent;
    }
 
+   :root {
+      ${(props) => Object.entries(props.theme.styles).map(([key, value]) => `--${key}: ${value}${typeof value === "number" ? "px" : ""};`)}
+      ${(props) => Object.entries(props.theme.colors).map(([key, value]) => `--${key}: ${value};`)}
+   }
+
    a {
       text-decoration: none;
       color: inherit;
@@ -3173,6 +3178,7 @@ function BetterHtmlProviderInternalContent({ children }) {
     /* @__PURE__ */ jsx12(
       GlobalStyle,
       {
+        theme: theme2,
         fontFamily: theme2.styles.fontFamily,
         color: theme2.colors.textPrimary,
         backgroundColor: theme2.colors.backgroundBase
@@ -8340,9 +8346,10 @@ var SideMenuComponent = function SideMenu({
       setActiveItem,
       items: itemsState,
       bottomItems: bottomItemsState,
-      position
+      position,
+      withSideBar: sideBar !== void 0
     }),
-    [activeItem, itemsState, bottomItemsState, position]
+    [activeItem, itemsState, bottomItemsState, position, sideBar]
   );
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
@@ -8389,8 +8396,8 @@ var SideMenuComponent = function SideMenu({
       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,
+      paddingInline: !renderBottomItemsHolder ? theme2.styles.space : void 0,
+      paddingBottom: !renderBottomItemsHolder ? !isCollapsable ? mediaQuery.size1000 && bottomItemsAdditionalComponent ? 0 : theme2.styles.space : void 0 : void 0,
       children: readyBottomItems?.map((item) => /* @__PURE__ */ jsx28(
         MenuItemComponent,
         {
@@ -8437,7 +8444,7 @@ var SideMenuComponent = function SideMenu({
           /* @__PURE__ */ jsxs24(
             Div_default.column,
             {
-              width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
+              width: mediaQuery.size1000 ? `calc(100% - ${sideBar ? sideBarWidth : 0}px)` : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
               height: "100%",
               borderRight: position === "left" ? readyBorder : void 0,
               borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
@@ -8576,10 +8583,11 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
   const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
-  const { position } = useSideMenuContext();
+  const { position, withSideBar } = useSideMenuContext();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
-  const sideSpace = !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0;
+  const sideBarWidth = components.sideMenu?.width ?? defaultSideBarWidth;
+  const sideSpace = !mediaQuery.size1000 ? (!sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth) + (withSideBar ? sideBarWidth : 0) : void 0;
   return /* @__PURE__ */ jsxs24(
     Div_default,
     {