react-better-html 1.1.244 → 1.1.246

package/dist/index.mjs

@@ -1303,28 +1303,35 @@ import { useTheme as useTheme3 } from "react-better-core";
 // src/components/Text.tsx
 import { forwardRef, memo } from "react";
 import { useTheme as useTheme2 } from "react-better-core";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { jsx } from "react/jsx-runtime";
 var TextStyledComponent = styled.p.withConfig({
-  shouldForwardProp: (prop) => !["style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle", "isP"].includes(prop)
 })`
+   ${(props) => props.isP ? css`
+              font-size: ${props.theme.styles.fontSize}px;
+           ` : ""}
+
    ${(props) => props.style}
 
    &:hover {
       ${(props) => props.hoverStyle}
    }
 `;
-var TextComponent = forwardRef(function Text({ htmlContentTranslate, children, ...props }, ref) {
+var TextComponent = forwardRef(function Text({ as: asValue, htmlContentTranslate, children, ...props }, ref) {
+  const theme2 = useTheme2();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
   return /* @__PURE__ */ jsx(
     TextStyledComponent,
     {
-      as: props.as,
+      as: asValue,
+      theme: theme2,
       translate: htmlContentTranslate,
       style,
       hoverStyle,
+      isP: asValue === "p",
       ...restProps,
       ...dataProps,
       ...ariaProps,
@@ -1429,7 +1436,12 @@ var ImageElement = styled2.img.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var Image = forwardRef3(function Image2({ name, src, ...props }, ref) {
+var Image = forwardRef3(function Image2(ImageProps3, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { name, src, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.image?.style?.default,
+    ImageProps3
+  );
   const { assets: assets2 } = useBetterCoreContext();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -1454,7 +1466,9 @@ var Image = forwardRef3(function Image2({ name, src, ...props }, ref) {
     }
   );
 });
-Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...props }, ref) {
+Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...ImageProps3 }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = useTheme4();
   return letters ? /* @__PURE__ */ jsx3(
     Div_default.row,
@@ -1572,9 +1586,11 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
   imageAzProfileImage,
   title,
   titleAs = "h1",
+  titleFontSize,
   titleColor,
   titleRightElement,
   description,
+  descriptionFontSize,
   descriptionColor,
   textAlign,
   rightElement,
@@ -1624,6 +1640,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
                       Text_default,
                       {
                         as: titleAs,
+                        fontSize: titleFontSize,
                         textAlign,
                         color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
@@ -1637,6 +1654,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
                 Text_default,
                 {
                   maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
+                  fontSize: descriptionFontSize,
                   textAlign,
                   color: descriptionColor ?? (lightMode ? theme2.colors.base : theme2.colors.textSecondary),
                   opacity: lightMode ? 0.7 : void 0,
@@ -1899,7 +1917,7 @@ import {
   useLoader,
   useTheme as useTheme9
 } from "react-better-core";
-import styled6, { css } from "styled-components";
+import styled6, { css as css2 } from "styled-components";
 
 // src/utils/variableFunctions.ts
 var checkBetterCoreContextValue = (value, functionsName) => {
@@ -2045,8 +2063,8 @@ var ButtonElement = styled6.button.withConfig({
    width: fit-content;
    min-width: max-content;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    text-decoration: none;
    color: ${(props) => props.theme.colors.base};
    background-color: ${(props) => props.theme.colors.primary};
@@ -2057,10 +2075,10 @@ var ButtonElement = styled6.button.withConfig({
    flex-shrink: 0;
    transition: ${(props) => props.theme.styles.transition};
 
-   ${(props) => props.disabled ? css`
+   ${(props) => props.disabled ? css2`
               opacity: 0.6;
               cursor: not-allowed;
-           ` : !props.isLoading ? css`
+           ` : !props.isLoading ? css2`
                 cursor: pointer;
 
                 &:not(.secondary):hover {
@@ -2068,9 +2086,9 @@ var ButtonElement = styled6.button.withConfig({
                 }
 
                 &.secondary:hover {
-                   ${props.withNoBorder ? css`
+                   ${props.withNoBorder ? css2`
                            filter: ${props.hoverStyle.filter ?? filterHover().z1};
-                        ` : css`
+                        ` : css2`
                            border-color: ${props.theme.colors.primary};
                         `}
                 }
@@ -2137,7 +2155,7 @@ var ButtonComponent = function Button(buttonProps) {
   const iconComponent = icon ? /* @__PURE__ */ jsx8(
     Div_default.row,
     {
-      height: iconSize ?? parseInt(style.fontSize?.toString() ?? "16"),
+      height: iconSize ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString()),
       alignItems: "center",
       justifyContent: "center",
       children: /* @__PURE__ */ jsx8(
@@ -2145,7 +2163,7 @@ var ButtonComponent = function Button(buttonProps) {
         {
           name: icon,
           color: iconColor ?? props.color ?? theme2.colors.base,
-          size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
+          size: iconSize ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString())
         }
       )
     }
@@ -2155,7 +2173,7 @@ var ButtonComponent = function Button(buttonProps) {
     {
       name: image,
       color: iconColor ?? props.color ?? theme2.colors.base,
-      width: imageWidth ?? parseInt(style.fontSize?.toString() ?? "16"),
+      width: imageWidth ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString()),
       height: imageHeight
     }
   ) : void 0;
@@ -2944,7 +2962,7 @@ function Alert2({ alert }) {
           ),
           /* @__PURE__ */ jsxs7(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
             /* @__PURE__ */ jsx10(Text_default, { fontSize: 18, fontWeight: 700, children: alertTitle }),
-            alert.message && /* @__PURE__ */ jsx10(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
+            alert.message && /* @__PURE__ */ jsx10(Text_default, { fontSize: theme2.styles.fontSize, color: theme2.colors.textSecondary, children: alert.message })
           ] }),
           pluginConfig.withCloseButton && /* @__PURE__ */ jsx10(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
@@ -3516,7 +3534,7 @@ import {
   useTheme as useTheme19,
   useBetterCoreContext as useBetterCoreContext7
 } from "react-better-core";
-import styled10, { css as css2 } from "styled-components";
+import styled10, { css as css3 } from "styled-components";
 
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
@@ -4261,8 +4279,8 @@ var InputElement = styled10.input.withConfig({
    position: relative;
    width: 100%;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
@@ -4282,9 +4300,9 @@ var InputElement = styled10.input.withConfig({
    }
 
    &:focus {
-      ${(props) => props.withNoBorder ? css2`
+      ${(props) => props.withNoBorder ? css3`
                  filter: ${props.hoverStyle.filter ?? filterHover().z1};
-              ` : css2`
+              ` : css3`
                  border-color: ${props.theme.colors.primary};
               `}
    }
@@ -4388,8 +4406,8 @@ var TextareaElement = styled10.textarea.withConfig({
    min-height: 3lh;
    max-height: 8lh;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
@@ -4405,9 +4423,9 @@ var TextareaElement = styled10.textarea.withConfig({
       color: ${(props) => props.theme.colors.textSecondary}80;
    }
 
-   ${(props) => props.withNoBorder ? css2`
+   ${(props) => props.withNoBorder ? css3`
               filter: ${props.hoverStyle.filter ?? filterHover().z1};
-           ` : css2`
+           ` : css3`
               border-color: ${props.theme.colors.primary};
            `}
 
@@ -5434,7 +5452,7 @@ var InputField_default = InputField2;
 // src/components/ToggleInput.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback11, useId as useId3, useState as useState8 } from "react";
 import { useBetterCoreContext as useBetterCoreContext8, useBooleanState as useBooleanState6, useTheme as useTheme20 } from "react-better-core";
-import styled11, { css as css3 } from "styled-components";
+import styled11, { css as css4 } from "styled-components";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
@@ -5470,9 +5488,9 @@ var InputElement2 = styled11.input.withConfig({
    ${(props) => props.style}
 
    &:hover {
-      ${(props) => props.withNoBorder ? css3`
+      ${(props) => props.withNoBorder ? css4`
                  filter: ${props.hoverStyle.filter ?? filterHover().z1};
-              ` : css3`
+              ` : css4`
                  border-color: ${props.theme.colors.primary};
               `}
 
@@ -5657,7 +5675,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           onClick: onClickText,
           children: [
             text,
-            required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+            required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
               " ",
               "*"
             ] })
@@ -5665,7 +5683,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
         }
       ) : textAdvanced ? /* @__PURE__ */ jsxs15(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
-        required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
@@ -5926,12 +5944,12 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
       /* @__PURE__ */ jsxs17(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ jsxs17(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
-          required && /* @__PURE__ */ jsxs17(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+          required && /* @__PURE__ */ jsxs17(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
             " ",
             "*"
           ] })
         ] }),
-        description && /* @__PURE__ */ jsx20(Text_default, { fontSize: descriptionFontSize, color: theme2.colors.textSecondary, children: description })
+        description && /* @__PURE__ */ jsx20(Text_default, { fontSize: descriptionFontSize ?? theme2.styles.fontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
       isLoading && /* @__PURE__ */ jsx20(Div_default, { width: 26 - titleGap })
     ] }),
@@ -6037,7 +6055,7 @@ import {
   Fragment as Fragment6
 } from "react";
 import { darkenColor as darkenColor3, useBetterCoreContext as useBetterCoreContext9, useTheme as useTheme25 } from "react-better-core";
-import styled12, { css as css4 } from "styled-components";
+import styled12, { css as css5 } from "styled-components";
 
 // src/components/Pagination.tsx
 import { memo as memo22, useCallback as useCallback13, useEffect as useEffect11, useMemo as useMemo8, useState as useState10 } from "react";
@@ -6237,13 +6255,13 @@ var TableStyledComponent = styled12.table.withConfig({
          }
       }
 
-      ${(props) => props.isStriped ? css4`
+      ${(props) => props.isStriped ? css5`
                  &:nth-child(even) {
                     background-color: ${props.theme.colors.backgroundSecondary};
                  }
               ` : ""}
 
-      ${(props) => props.withHover ? css4`
+      ${(props) => props.withHover ? css5`
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
@@ -6934,56 +6952,56 @@ var Table_default = Table2;
 // src/components/Tooltip.tsx
 import { memo as memo24, useCallback as useCallback15, useRef as useRef7, useState as useState12, useEffect as useEffect13, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
 import { useTheme as useTheme26 } from "react-better-core";
-import styled13, { css as css5 } from "styled-components";
+import styled13, { css as css6 } from "styled-components";
 import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
-  top: css5`
+  top: css6`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
    `,
-  bottom: css5`
+  bottom: css6`
       top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
    `,
-  left: css5`
+  left: css6`
       ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
       right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
    `,
-  right: css5`
+  right: css6`
       ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
       left: calc(100% + ${props.gap}px + ${props.arrowSize}px);
    `
 });
 var tooltipPositionStyle = (props) => ({
   top: {
-    opened: css5`
+    opened: css6`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css5`
+    closed: css6`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
       `
   },
   bottom: {
-    opened: css5`
+    opened: css6`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css5`
+    closed: css6`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
       `
   },
   left: {
-    opened: css5`
+    opened: css6`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css5`
+    closed: css6`
          transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   },
   right: {
-    opened: css5`
+    opened: css6`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css5`
+    closed: css6`
          transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   }
@@ -8150,10 +8168,14 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
     }
   );
 };
-SideMenuComponent.burgerButton = function BurgerButton() {
+SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onClick }) {
   const theme2 = useTheme29();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = useBooleanState8();
+  const onClickElement = useCallback18(() => {
+    setSideMenuIsOpenMobile.toggle();
+    onClick?.(!sideMenuIsOpenMobile);
+  }, [onClick, sideMenuIsOpenMobile]);
   const width = 2;
   return /* @__PURE__ */ jsxs24(
     Div_default,
@@ -8165,7 +8187,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
       onMouseOver: setIsHovered.setTrue,
       onMouseLeave: setIsHovered.setFalse,
       onMouseOut: setIsHovered.setFalse,
-      onClick: setSideMenuIsOpenMobile.toggle,
+      onClick: onClickElement,
       children: [
         /* @__PURE__ */ jsx27(
           Div_default,
@@ -8174,10 +8196,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered || sideMenuIsOpenMobile ? "100%" : "50%",
             height: width,
             top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : void 0,
+            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
           }
         ),
@@ -8188,10 +8211,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered ? "100%" : "100%",
             height: width,
             top: "50%",
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: "translateY(-50%)",
+            transform: `translateY(-50%)${position === "center" ? " translateX(-50%)" : ""}`,
             opacity: sideMenuIsOpenMobile ? 0 : void 0,
             transition: theme2.styles.transition
           }
@@ -8203,10 +8227,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered || sideMenuIsOpenMobile ? "100%" : "75%",
             height: width,
             bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : void 0,
+            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
           }
         )