react-better-html 1.1.241 → 1.1.242

package/dist/index.mjs

@@ -1997,7 +1997,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 +2099,7 @@ var ButtonComponent = function Button(buttonProps) {
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
+      withNoBorder: theme2.styles.borderWidth === 0,
       disabled,
       to: href,
       href,
@@ -3583,6 +3588,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -3826,6 +3832,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
@@ -4401,6 +4408,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4466,6 +4474,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4580,6 +4589,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4618,6 +4628,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4785,6 +4796,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4857,6 +4869,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,
@@ -5406,12 +5419,12 @@ var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
 var InputElement2 = styled11.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle", "size"].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;
@@ -5497,17 +5510,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,
@@ -5543,6 +5559,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -5557,6 +5574,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           InputElement2,
           {
             theme: theme2,
+            size,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -5602,6 +5620,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
         Text_default,
         {
           fontFamily: textFontFamily,
+          fontSize: textFontSize,
           letterSpacing: textLetterSpacing,
           textTransform: textTextTransform,
           color,
@@ -5658,6 +5677,7 @@ var ToggleInput_default = {
     const {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
@@ -5695,6 +5715,7 @@ var ToggleInput_default = {
         {
           text: label,
           fontFamily: labelFontFamily,
+          fontSize: labelFontSize,
           letterSpacing: labelLetterSpacing,
           textTransform: labelTextTransform,
           color: labelColor,