react-better-html 1.1.241 → 1.1.243

package/dist/index.mjs

@@ -1967,7 +1967,9 @@ var Loader_default = Loader2;
 // src/components/Button.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ButtonElement = styled6.button.withConfig({
-  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading", "withNoBorder"].includes(
+    prop
+  )
 })`
    display: block;
    position: relative;
@@ -1997,7 +1999,11 @@ var ButtonElement = styled6.button.withConfig({
                 }
 
                 &.secondary:hover {
-                   border-color: ${props.theme.colors.primary};
+                   ${props.withNoBorder ? css`
+                           filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                        ` : css`
+                           border-color: ${props.theme.colors.primary};
+                        `}
                 }
              ` : ""}
 
@@ -2095,6 +2101,7 @@ var ButtonComponent = function Button(buttonProps) {
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
+      withNoBorder: theme2.styles.borderWidth === 0,
       disabled,
       to: href,
       href,
@@ -3511,7 +3518,7 @@ import {
   useTheme as useTheme19,
   useBetterCoreContext as useBetterCoreContext7
 } from "react-better-core";
-import styled10 from "styled-components";
+import styled10, { css as css2 } from "styled-components";
 
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
@@ -3583,6 +3590,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -3826,6 +3834,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
@@ -4239,7 +4248,17 @@ var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
 var InputElement = styled10.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "withPrefix", "withSuffix", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "theme",
+    "colorTheme",
+    "withLeftIcon",
+    "withRightIcon",
+    "withPrefix",
+    "withSuffix",
+    "style",
+    "hoverStyle",
+    "withNoBorder"
+  ].includes(prop)
 })`
    position: relative;
    width: 100%;
@@ -4265,7 +4284,11 @@ var InputElement = styled10.input.withConfig({
    }
 
    &:focus {
-      border-color: ${(props) => props.theme.colors.primary};
+      ${(props) => props.withNoBorder ? css2`
+                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+              ` : css2`
+                 border-color: ${props.theme.colors.primary};
+              `}
    }
 
    &:disabled {
@@ -4361,7 +4384,7 @@ var InputElement = styled10.input.withConfig({
    }
 `;
 var TextareaElement = styled10.textarea.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "withLeftIcon", "withRightIcon", "style", "hoverStyle", "withNoBorder"].includes(prop)
 })`
    width: 100%;
    min-height: 3lh;
@@ -4384,9 +4407,11 @@ var TextareaElement = styled10.textarea.withConfig({
       color: ${(props) => props.theme.colors.textSecondary}80;
    }
 
-   &:focus {
-      border-color: ${(props) => props.theme.colors.primary};
-   }
+   ${(props) => props.withNoBorder ? css2`
+              filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+           ` : css2`
+              border-color: ${props.theme.colors.primary};
+           `}
 
    ${(props) => props.style}
 
@@ -4401,6 +4426,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4466,6 +4492,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4508,6 +4535,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
             InputElement,
             {
               theme: theme2,
+              colorTheme,
               withLeftIcon: leftIcon !== void 0,
               withRightIcon: rightIcon !== void 0,
               withPrefix: prefix !== void 0,
@@ -4518,6 +4546,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
               onChange: onChangeElement,
               style,
               hoverStyle,
+              withNoBorder: theme2.styles.borderWidth === 0,
               ...restProps,
               ...dataProps,
               ...ariaProps,
@@ -4580,6 +4609,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4601,6 +4631,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
   );
   const theme2 = useTheme19();
   const internalId = useId2();
+  const { colorTheme } = useBetterCoreContext7();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -4618,6 +4649,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4642,6 +4674,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
         TextareaElement,
         {
           theme: theme2,
+          colorTheme,
           withLeftIcon: leftIcon !== void 0,
           withRightIcon: rightIcon !== void 0,
           required,
@@ -4650,6 +4683,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
           id: readyId,
           style,
           hoverStyle,
+          withNoBorder: theme2.styles.borderWidth === 0,
           ...restProps,
           ...dataProps,
           ...ariaProps,
@@ -4785,6 +4819,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4857,6 +4892,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
       {
         text: readyLabel,
         fontFamily: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelFontFamily ?? labelFontFamily,
+        fontSize: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelFontSize ?? labelFontSize,
         letterSpacing: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelLetterSpacing ?? labelLetterSpacing,
         textTransform: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelTextTransform ?? labelTextTransform,
         color: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelColor ?? labelColor,
@@ -5399,19 +5435,19 @@ var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback11, useId as useId3, useState as useState8 } from "react";
-import { useBooleanState as useBooleanState6, useTheme as useTheme20 } from "react-better-core";
-import styled11 from "styled-components";
+import { useBetterCoreContext as useBetterCoreContext8, useBooleanState as useBooleanState6, useTheme as useTheme20 } from "react-better-core";
+import styled11, { css as css3 } from "styled-components";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
 var InputElement2 = styled11.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "size", "withNoBorder"].includes(prop)
 })`
    position: relative;
    appearance: none;
-   width: ${componentSize}px;
-   height: ${componentSize}px;
+   width: ${(props) => props.size ?? componentSize}px;
+   height: ${(props) => props.size ?? componentSize}px;
    background-color: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
@@ -5436,7 +5472,11 @@ var InputElement2 = styled11.input.withConfig({
    ${(props) => props.style}
 
    &:hover {
-      border-color: ${(props) => props.theme.colors.primary};
+      ${(props) => props.withNoBorder ? css3`
+                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+              ` : css3`
+                 border-color: ${props.theme.colors.primary};
+              `}
 
       ${(props) => props.hoverStyle}
    }
@@ -5497,17 +5537,20 @@ var SwitchElement = styled11.div.withConfig({
 var ToggleInputComponent = forwardRef12(function ToggleInput({
   label,
   labelFontFamily,
+  labelFontSize,
   labelLetterSpacing,
   labelTextTransform,
   labelColor,
   labelGap,
   text,
   textFontFamily,
+  textFontSize,
   textLetterSpacing,
   textTextTransform,
   textAdvanced,
   errorText,
   infoText,
+  size,
   value,
   onChange,
   checked: controlledChecked,
@@ -5518,6 +5561,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
 }, ref) {
   const theme2 = useTheme20();
   const internalId = useId3();
+  const { colorTheme } = useBetterCoreContext8();
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -5543,6 +5587,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -5557,6 +5602,9 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           InputElement2,
           {
             theme: theme2,
+            colorTheme,
+            size,
+            withNoBorder: theme2.styles.borderWidth === 0,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -5602,6 +5650,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
         Text_default,
         {
           fontFamily: textFontFamily,
+          fontSize: textFontSize,
           letterSpacing: textLetterSpacing,
           textTransform: textTextTransform,
           color,
@@ -5658,6 +5707,7 @@ var ToggleInput_default = {
     const {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
@@ -5695,6 +5745,7 @@ var ToggleInput_default = {
         {
           text: label,
           fontFamily: labelFontFamily,
+          fontSize: labelFontSize,
           letterSpacing: labelLetterSpacing,
           textTransform: labelTextTransform,
           color: labelColor,
@@ -5987,8 +6038,8 @@ import {
   useEffect as useEffect12,
   Fragment as Fragment6
 } from "react";
-import { darkenColor as darkenColor3, useBetterCoreContext as useBetterCoreContext8, useTheme as useTheme25 } from "react-better-core";
-import styled12, { css as css2 } from "styled-components";
+import { darkenColor as darkenColor3, useBetterCoreContext as useBetterCoreContext9, useTheme as useTheme25 } from "react-better-core";
+import styled12, { css as css4 } 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";
@@ -6188,13 +6239,13 @@ var TableStyledComponent = styled12.table.withConfig({
          }
       }
 
-      ${(props) => props.isStriped ? css2`
+      ${(props) => props.isStriped ? css4`
                  &:nth-child(even) {
                     background-color: ${props.theme.colors.backgroundSecondary};
                  }
               ` : ""}
 
-      ${(props) => props.withHover ? css2`
+      ${(props) => props.withHover ? css4`
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
@@ -6277,7 +6328,7 @@ var TableComponent = forwardRef15(function Table({
 }, ref) {
   const theme2 = useTheme25();
   const mediaQuery = useMediaQuery();
-  const { colorTheme } = useBetterCoreContext8();
+  const { colorTheme } = useBetterCoreContext9();
   const filterModalRef = useRef6(null);
   const readyColumns = useMemo9(() => columns.filter((column) => !column.hidden), [columns]);
   const columnsRef = useRef6(readyColumns);
@@ -6885,56 +6936,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 css3 } from "styled-components";
+import styled13, { css as css5 } from "styled-components";
 import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
-  top: css3`
+  top: css5`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
    `,
-  bottom: css3`
+  bottom: css5`
       top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
    `,
-  left: css3`
+  left: css5`
       ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
       right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
    `,
-  right: css3`
+  right: css5`
       ${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: css3`
+    opened: css5`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css3`
+    closed: css5`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
       `
   },
   bottom: {
-    opened: css3`
+    opened: css5`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css3`
+    closed: css5`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
       `
   },
   left: {
-    opened: css3`
+    opened: css5`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css3`
+    closed: css5`
          transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   },
   right: {
-    opened: css3`
+    opened: css5`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: css3`
+    closed: css5`
          transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   }
@@ -7282,7 +7333,7 @@ var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
 import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback16, useEffect as useEffect14, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
-import { useBetterCoreContext as useBetterCoreContext9, useTheme as useTheme27 } from "react-better-core";
+import { useBetterCoreContext as useBetterCoreContext10, useTheme as useTheme27 } from "react-better-core";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
@@ -7292,7 +7343,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const theme2 = useTheme27();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { componentsState } = useBetterHtmlContextInternal();
-  const { colorTheme } = useBetterCoreContext9();
+  const { colorTheme } = useBetterCoreContext10();
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
   const [selectedTab, setSelectedTab] = useState13(() => {
@@ -7626,7 +7677,7 @@ import { createContext as createContext2, memo as memo27, useCallback as useCall
 import {
   calculateColorContrast,
   lightenColor as lightenColor3,
-  useBetterCoreContext as useBetterCoreContext10,
+  useBetterCoreContext as useBetterCoreContext11,
   useBooleanState as useBooleanState8,
   useTheme as useTheme29
 } from "react-better-core";
@@ -7659,7 +7710,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
   const mediaQuery = useMediaQuery();
   const location = reactRouterDomPluginConfig.useLocation();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
-  const { colorTheme } = useBetterCoreContext10();
+  const { colorTheme } = useBetterCoreContext11();
   const { activeItem, setActiveItem } = useSideMenuContext();
   const [isOpened, setIsOpened] = useBooleanState8();
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;