react-better-html 1.1.245 → 1.1.247

package/dist/index.mjs

@@ -1303,12 +1303,14 @@ 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)
 })`
-   font-size: ${(props) => props.theme.styles.fontSize}px;
+   ${(props) => props.isP ? css`
+              font-size: ${props.theme.styles.fontSize}px;
+           ` : ""}
 
    ${(props) => props.style}
 
@@ -1316,7 +1318,7 @@ var TextStyledComponent = styled.p.withConfig({
       ${(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");
@@ -1324,11 +1326,12 @@ var TextComponent = forwardRef(function Text({ htmlContentTranslate, children, .
   return /* @__PURE__ */ jsx(
     TextStyledComponent,
     {
-      as: props.as,
+      as: asValue,
       theme: theme2,
       translate: htmlContentTranslate,
       style,
       hoverStyle,
+      isP: asValue === "p",
       ...restProps,
       ...dataProps,
       ...ariaProps,
@@ -1583,9 +1586,11 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
   imageAzProfileImage,
   title,
   titleAs = "h1",
+  titleFontSize,
   titleColor,
   titleRightElement,
   description,
+  descriptionFontSize,
   descriptionColor,
   textAlign,
   rightElement,
@@ -1635,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
@@ -1648,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,
@@ -1910,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) => {
@@ -2068,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 {
@@ -2079,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};
                         `}
                 }
@@ -3527,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";
@@ -4293,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};
               `}
    }
@@ -4416,11 +4423,13 @@ var TextareaElement = styled10.textarea.withConfig({
       color: ${(props) => props.theme.colors.textSecondary}80;
    }
 
-   ${(props) => props.withNoBorder ? css2`
-              filter: ${props.hoverStyle.filter ?? filterHover().z1};
-           ` : css2`
-              border-color: ${props.theme.colors.primary};
-           `}
+   &:focus {
+      ${(props) => props.withNoBorder ? css3`
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
+              ` : css3`
+                 border-color: ${props.theme.colors.primary};
+              `}
+   }
 
    ${(props) => props.style}
 
@@ -5445,7 +5454,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;
@@ -5481,9 +5490,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};
               `}
 
@@ -6048,7 +6057,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";
@@ -6248,13 +6257,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 {
@@ -6945,56 +6954,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"});
       `
   }