react-better-html 1.1.238 → 1.1.240

package/dist/index.mjs

@@ -861,6 +861,21 @@ function useComponentPropsWithPrefix(props, prefix) {
     return returnValue;
   }, [props, prefix]);
 }
+function useComponentsPropsMerger(...props) {
+  return useMemo(
+    () => props.filter((props2) => props2 !== void 0).reduce(
+      (previousValue, currentValue) => ({
+        ...previousValue,
+        ...Object.entries(currentValue).reduce((pv, [key, value]) => {
+          if (value !== void 0) pv[key] = value;
+          return pv;
+        }, {})
+      }),
+      {}
+    ),
+    [props]
+  );
+}
 function useComponentInputFieldDateProps(props, holderRef, disabled) {
   const theme2 = useTheme();
   const [isOpen, setIsOpen] = useBooleanState();
@@ -1334,7 +1349,14 @@ var Text_default = Text2;
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Divider_default = {
   vertical: memo2(
-    forwardRef2(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
+    forwardRef2(function Divider(dividerProps, ref) {
+      const betterHtmlContextInternal = useBetterHtmlContextInternal();
+      const {
+        width = 1,
+        backgroundColor,
+        height,
+        ...props
+      } = useComponentsPropsMerger(betterHtmlContextInternal.components.divider?.style?.vertical, dividerProps);
       const theme2 = useTheme3();
       return /* @__PURE__ */ jsx2(
         Div_default,
@@ -1350,11 +1372,35 @@ var Divider_default = {
     })
   ),
   horizontal: memo2(
-    forwardRef2(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
+    forwardRef2(function Divider2(dividerProps, ref) {
+      const betterHtmlContextInternal = useBetterHtmlContextInternal();
+      const {
+        width = 1,
+        backgroundColor,
+        text,
+        textFontFamily,
+        textFontSize,
+        textFontWeight,
+        textTransform,
+        textLetterSpacing,
+        textColor,
+        ...props
+      } = useComponentsPropsMerger(betterHtmlContextInternal.components.divider?.style?.horizontal, dividerProps);
       const theme2 = useTheme3();
       return /* @__PURE__ */ jsxs(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
         /* @__PURE__ */ jsx2(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-        text && /* @__PURE__ */ jsx2(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
+        text && /* @__PURE__ */ jsx2(
+          Text_default,
+          {
+            fontFamily: textFontFamily,
+            fontSize: textFontSize,
+            fontWeight: textFontWeight,
+            textTransform,
+            letterSpacing: textLetterSpacing,
+            color: textColor ?? theme2.colors.textSecondary,
+            children: text
+          }
+        ),
         /* @__PURE__ */ jsx2(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
       ] });
     })
@@ -1970,39 +2016,40 @@ var ButtonElement = styled6.button.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var ButtonComponent = function Button({
-  href,
-  text,
-  value,
-  download,
-  target,
-  icon,
-  iconPosition = "left",
-  iconColor,
-  iconSize,
-  image,
-  imagePosition = "left",
-  imageWidth,
-  imageHeight,
-  loaderName,
-  loaderSize,
-  isLoading,
-  disabled,
-  isSmall,
-  isSubmit,
-  onClick,
-  onClickWithValue,
-  ...props
-}) {
+var ButtonComponent = function Button(buttonProps) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    href,
+    text,
+    value,
+    download,
+    target,
+    icon,
+    iconPosition = "left",
+    iconColor,
+    iconSize,
+    image,
+    imagePosition = "left",
+    imageWidth,
+    imageHeight,
+    loaderName,
+    loaderSize,
+    isLoading,
+    disabled,
+    isSmall,
+    isSubmit,
+    onClick,
+    onClickWithValue,
+    ...props
+  } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.button?.style?.default,
+    buttonProps
+  );
   const theme2 = useTheme9();
   const isLoadingHook = useLoader(loaderName);
-  const { components } = useBetterHtmlContextInternal();
   const { colorTheme } = useBetterCoreContext3();
   const isLoadingElement = isLoading || isLoadingHook;
-  const { style, hoverStyle, restProps } = useComponentPropsGrouper({
-    ...components.button?.style?.default,
-    ...props
-  });
+  const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
   const onClickElement = useCallback3(
@@ -2037,8 +2084,8 @@ var ButtonComponent = function Button({
       height: imageHeight
     }
   ) : void 0;
-  const linkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  const buttonComponentTag = components.button?.tagReplacement?.buttonComponent ?? "button";
+  const linkComponentTag = betterHtmlContextInternal.components.button?.tagReplacement?.linkComponent ?? "a";
+  const buttonComponentTag = betterHtmlContextInternal.components.button?.tagReplacement?.buttonComponent ?? "button";
   return /* @__PURE__ */ jsxs5(
     ButtonElement,
     {
@@ -2106,41 +2153,44 @@ var ButtonComponent = function Button({
     }
   );
 };
-ButtonComponent.secondary = function Secondary({ className, ...props }) {
+ButtonComponent.secondary = function Secondary(buttonProps) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { className, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.button?.style?.secondary,
+    buttonProps
+  );
   const theme2 = useTheme9();
-  const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
-      ...betterHtmlContext2.components.button?.style?.secondary,
       className: `secondary${className ? ` ${className}` : ""}`,
       color: theme2.colors.textPrimary,
       ...props
     }
   );
 };
-ButtonComponent.destructive = function Destructive(props) {
-  const theme2 = useTheme9();
-  const betterHtmlContext2 = useBetterHtmlContextInternal();
-  return /* @__PURE__ */ jsx8(
-    ButtonComponent,
-    {
-      ...betterHtmlContext2.components.button?.style?.destructive,
-      backgroundColor: theme2.colors.error,
-      color: theme2.colors.base,
-      ...props
-    }
+ButtonComponent.destructive = function Destructive(buttonProps) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.button?.style?.destructive,
+    buttonProps
   );
+  const theme2 = useTheme9();
+  return /* @__PURE__ */ jsx8(ButtonComponent, { backgroundColor: theme2.colors.error, color: theme2.colors.base, ...props });
 };
-ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...props }) {
+ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...buttonProps }) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.button?.style?.icon,
+    buttonProps
+  );
   const theme2 = useTheme9();
-  const betterHtmlContext2 = useBetterHtmlContextInternal();
   const readyButtonSize = buttonSize ?? size + theme2.styles.space;
   const backgroundButtonColorReady = backgroundButtonColor ?? theme2.colors.textPrimary;
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
-      ...betterHtmlContext2.components.button?.style?.icon,
+      ...betterHtmlContextInternal.components.button?.style?.icon,
       width: readyButtonSize,
       height: readyButtonSize,
       color: theme2.colors.textPrimary,
@@ -2157,8 +2207,12 @@ ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonC
     }
   );
 };
-ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props }) {
-  const betterHtmlContext2 = useBetterHtmlContextInternal();
+ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...buttonProps }) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.button?.style?.upload,
+    buttonProps
+  );
   const onClickElement = useCallback3(() => {
     const input = document.createElement("input");
     input.setAttribute("type", "file");
@@ -2172,7 +2226,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
-      ...betterHtmlContext2.components.button?.style?.upload,
+      ...betterHtmlContextInternal.components.button?.style?.upload,
       text: "Upload",
       icon: "uploadCloud",
       onClick: onClickElement,
@@ -3318,7 +3372,7 @@ PageHolderComponent.center = forwardRef8(function Center({
       position: "relative",
       width: "100%",
       minHeight: "100svh",
-      alignItems: "center",
+      alignItems: height !== "100%" ? "center" : void 0,
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
       backgroundImage: pageBackgroundImage,
@@ -3337,29 +3391,19 @@ PageHolderComponent.center = forwardRef8(function Center({
           }
         ),
         sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ jsx13(Div_default, { width: "50%" }),
-        /* @__PURE__ */ jsx13(
-          Div_default.column,
+        /* @__PURE__ */ jsx13(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx13(
+          ContentTag,
           {
-            position: "relative",
-            width: `${withSideComponent ? 50 : 100}%`,
+            width: `calc(100% - ${((props.margin ?? props.marginInline) !== void 0 ? parseFloat((props.margin ?? props.marginInline)?.toString() ?? "") : theme2.styles.space) * 2}px)`,
+            maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
             height,
-            alignItems: "center",
-            zIndex: 2,
-            children: /* @__PURE__ */ jsx13(
-              ContentTag,
-              {
-                width: `calc(100% - ${theme2.styles.space * 2}px)`,
-                maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
-                height,
-                marginInline: theme2.styles.space,
-                marginBlock: theme2.styles.space,
-                ...props,
-                ref,
-                children
-              }
-            )
+            marginInline: theme2.styles.space,
+            marginBlock: theme2.styles.space,
+            ...props,
+            ref,
+            children
           }
-        ),
+        ) }),
         sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ jsx13(Div_default, { width: "50%" }),
         withSideComponent && /* @__PURE__ */ jsx13(
           Div_default,
@@ -3473,7 +3517,9 @@ import styled10 from "styled-components";
 import { memo as memo15 } from "react";
 import { useTheme as useTheme16 } from "react-better-core";
 import { jsxs as jsxs11 } from "react/jsx-runtime";
-function Label({ text, required, isError, color, htmlFor }) {
+function Label(labelProps) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { text, required, isError, fontFamily, letterSpacing, textTransform, color, htmlFor } = useComponentsPropsMerger(betterHtmlContextInternal.components.label?.style?.default, labelProps);
   const theme2 = useTheme16();
   return /* @__PURE__ */ jsxs11(
     Text_default,
@@ -3481,8 +3527,11 @@ function Label({ text, required, isError, color, htmlFor }) {
       as: "label",
       width: "fit-content",
       height: 16,
+      fontFamily,
       fontSize: 14,
       color: isError ? theme2.colors.error : color ?? theme2.colors.textSecondary,
+      letterSpacing,
+      textTransform,
       htmlFor,
       "aria-required": required,
       children: [
@@ -3508,35 +3557,43 @@ import {
 } from "react-better-core";
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
-var DropdownComponent = forwardRef10(function Dropdown({
-  label,
-  labelColor,
-  errorText,
-  infoText,
-  required,
-  name,
-  disabled,
-  options,
-  value: controlledValue,
-  defaultValue,
-  placeholder,
-  leftIcon,
-  inputFieldClassName,
-  withSearch,
-  withDebounce,
-  debounceDelay = 0.5,
-  debounceIsLoading,
-  debounceMinimumSymbolsRequired,
-  withoutClearButton,
-  withoutRenderingOptionsWhenClosed,
-  onChange,
-  onChangeSearch,
-  renderOption,
-  renderOptionDivider,
-  withMultiselect,
-  id,
-  ...props
-}, ref) {
+var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    label,
+    labelFontFamily,
+    labelLetterSpacing,
+    labelTextTransform,
+    labelColor,
+    errorText,
+    infoText,
+    required,
+    name,
+    disabled,
+    options,
+    value: controlledValue,
+    defaultValue,
+    placeholder,
+    leftIcon,
+    inputFieldClassName,
+    withSearch,
+    withDebounce,
+    debounceDelay = 0.5,
+    debounceIsLoading,
+    debounceMinimumSymbolsRequired,
+    withoutClearButton,
+    withoutRenderingOptionsWhenClosed,
+    onChange,
+    onChangeSearch,
+    renderOption,
+    renderOptionDivider,
+    withMultiselect,
+    id,
+    ...props
+  } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.dropdown?.style?.default,
+    dropdownProps
+  );
   const theme2 = useTheme17();
   const inputFieldHolderRef = useRef4(null);
   const buttonsRef = useRef4(null);
@@ -3746,6 +3803,9 @@ var DropdownComponent = forwardRef10(function Dropdown({
     InputField_default,
     {
       label,
+      labelFontFamily,
+      labelLetterSpacing,
+      labelTextTransform,
       labelColor,
       errorText,
       infoText,
@@ -3889,7 +3949,12 @@ var DropdownComponent = forwardRef10(function Dropdown({
     }
   ) });
 });
-DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
+DropdownComponent.countries = forwardRef10(function Countries(dropdownProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.dropdown?.style?.countries,
+    dropdownProps
+  );
   const theme2 = useTheme17();
   const renderOption = useCallback8(
     (option, index, isSelected) => /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
@@ -4308,30 +4373,35 @@ var TextareaElement = styled10.textarea.withConfig({
 `;
 var hours = Array.from({ length: 24 }, (_, index) => index);
 var minutes = Array.from({ length: 60 }, (_, index) => index);
-var InputFieldComponent = forwardRef11(function InputField({
-  label,
-  labelColor,
-  errorText,
-  infoText,
-  leftIcon,
-  rightIcon,
-  prefix,
-  prefixBackgroundColor,
-  suffix,
-  suffixBackgroundColor,
-  insideInputFieldBeforeComponent,
-  insideInputFieldAfterComponent,
-  withDebounce,
-  debounceDelay = 0.5,
-  onChange,
-  onChangeValue,
-  onClickRightIcon,
-  holderRef,
-  required,
-  placeholder,
-  id,
-  ...props
-}, ref) {
+var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    label,
+    labelFontFamily,
+    labelLetterSpacing,
+    labelTextTransform,
+    labelColor,
+    errorText,
+    infoText,
+    leftIcon,
+    rightIcon,
+    prefix,
+    prefixBackgroundColor,
+    suffix,
+    suffixBackgroundColor,
+    insideInputFieldBeforeComponent,
+    insideInputFieldAfterComponent,
+    withDebounce,
+    debounceDelay = 0.5,
+    onChange,
+    onChangeValue,
+    onClickRightIcon,
+    holderRef,
+    required,
+    placeholder,
+    id,
+    ...props
+  } = useComponentsPropsMerger(betterHtmlContextInternal.components.inputField?.style?.default, inputFieldProps);
   const theme2 = useTheme19();
   const internalId = useId2();
   const { colorTheme } = useBetterCoreContext7();
@@ -4367,7 +4437,19 @@ var InputFieldComponent = forwardRef11(function InputField({
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs14(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...excludeStyle, children: [
-    label && /* @__PURE__ */ jsx17(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
+    label && /* @__PURE__ */ jsx17(
+      Label_default,
+      {
+        text: label,
+        fontFamily: labelFontFamily,
+        letterSpacing: labelLetterSpacing,
+        textTransform: labelTextTransform,
+        color: labelColor,
+        required,
+        isError: !!errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "stretch", width: "100%", children: [
       prefix && /* @__PURE__ */ jsx17(
         Div_default.row,
@@ -4469,20 +4551,29 @@ var InputFieldComponent = forwardRef11(function InputField({
     )
   ] });
 });
-InputFieldComponent.multiline = forwardRef11(function Multiline({
-  label,
-  placeholder,
-  errorText,
-  infoText,
-  leftIcon,
-  rightIcon,
-  onChange,
-  onChangeValue,
-  onClickRightIcon,
-  required,
-  id,
-  ...props
-}, ref) {
+InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    label,
+    labelFontFamily,
+    labelLetterSpacing,
+    labelTextTransform,
+    labelColor,
+    placeholder,
+    errorText,
+    infoText,
+    leftIcon,
+    rightIcon,
+    onChange,
+    onChangeValue,
+    onClickRightIcon,
+    required,
+    id,
+    ...props
+  } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.multiline,
+    inputFieldProps
+  );
   const theme2 = useTheme19();
   const internalId = useId2();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
@@ -4497,7 +4588,19 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
   );
   const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs14(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-    label && /* @__PURE__ */ jsx17(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
+    label && /* @__PURE__ */ jsx17(
+      Label_default,
+      {
+        text: label,
+        fontFamily: labelFontFamily,
+        letterSpacing: labelLetterSpacing,
+        textTransform: labelTextTransform,
+        color: labelColor,
+        required,
+        isError: !!errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ jsxs14(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ jsx17(
         Icon_default,
@@ -4556,14 +4659,19 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
         as: "span",
         display: "block",
         marginTop: theme2.styles.gap / 2,
-        color: errorText ? theme2.colors.error : props.labelColor ?? theme2.colors.textSecondary,
+        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
         fontSize: 14,
         children: errorText || infoText
       }
     )
   ] });
 });
-InputFieldComponent.email = forwardRef11(function Email({ ...props }, ref) {
+InputFieldComponent.email = forwardRef11(function Email(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.email,
+    inputFieldProps
+  );
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
     {
@@ -4577,7 +4685,12 @@ InputFieldComponent.email = forwardRef11(function Email({ ...props }, ref) {
     }
   );
 });
-InputFieldComponent.password = forwardRef11(function Password({ ...props }, ref) {
+InputFieldComponent.password = forwardRef11(function Password(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.password,
+    inputFieldProps
+  );
   const [isPassword, setIsPassword] = useBooleanState5(true);
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
@@ -4594,7 +4707,12 @@ InputFieldComponent.password = forwardRef11(function Password({ ...props }, ref)
     }
   );
 });
-InputFieldComponent.search = forwardRef11(function Search({ value, onChangeValue, onFocus, onBlur, ...props }, ref) {
+InputFieldComponent.search = forwardRef11(function Search(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { value, onChangeValue, onFocus, onBlur, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.search,
+    inputFieldProps
+  );
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const [inputFieldFocused, setInputFieldFocused] = useBooleanState5();
   const onChangeValueElement = useCallback10(
@@ -4637,7 +4755,19 @@ InputFieldComponent.search = forwardRef11(function Search({ value, onChangeValue
     }
   );
 });
-InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
+InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    label,
+    labelFontFamily,
+    labelLetterSpacing,
+    labelTextTransform,
+    labelColor,
+    value,
+    onChangeValue,
+    id,
+    ...props
+  } = useComponentsPropsMerger(betterHtmlContextInternal.components.inputField?.style?.phoneNumber, inputFieldProps);
   const theme2 = useTheme19();
   const internalId = useId2();
   const [dropdownValue, setDropdownValue] = useState7();
@@ -4695,12 +4825,16 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
     setInputFieldValue(newValue.slice(country.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
+  const readyLabel = betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.label ?? label;
   return /* @__PURE__ */ jsxs14(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
-    label && /* @__PURE__ */ jsx17(
+    readyLabel && /* @__PURE__ */ jsx17(
       Label_default,
       {
-        text: label,
-        color: labelColor,
+        text: readyLabel,
+        fontFamily: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelFontFamily ?? labelFontFamily,
+        letterSpacing: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelLetterSpacing ?? labelLetterSpacing,
+        textTransform: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelTextTransform ?? labelTextTransform,
+        color: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelColor ?? labelColor,
         required: props.required,
         isError: !!props.errorText,
         htmlFor: readyId
@@ -4728,7 +4862,9 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
       /* @__PURE__ */ jsx17(
         InputFieldComponent,
         {
-          placeholder: label ?? "Phone number",
+          ...betterHtmlContextInternal.components.inputField?.style?.phoneNumber,
+          label: void 0,
+          placeholder: readyLabel ?? "Phone number",
           className: "react-better-html-phone-number",
           value: inputFieldValue,
           onChangeValue: onChangeValueElement,
@@ -4740,21 +4876,32 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
     ] })
   ] });
 });
-InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.date,
+    inputFieldProps
+  );
   const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const {
+    internalValue,
+    setInternalValue,
+    inputFieldProps: restInputFieldProps,
+    insideInputFieldComponentProps
+  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const onChange = useCallback10(
     (date) => {
-      inputFieldProps.onChangeValue?.(date ?? "");
+      restInputFieldProps.onChangeValue?.(date ?? "");
       setInternalValue(date ?? "");
     },
-    [inputFieldProps.onChangeValue]
+    [restInputFieldProps.onChangeValue]
   );
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.date,
       type: "date",
       insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
         Div_default,
@@ -4775,7 +4922,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...pr
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps
+      ...restInputFieldProps
     }
   );
 });
@@ -4786,14 +4933,25 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
   maxDate,
   defaultDateAfterTimePick,
   defaultTimeAfterDatePick = "00:00",
-  ...props
+  ...inputFieldProps
 }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.dateTime,
+    inputFieldProps
+  );
   const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const selectedHourRef = useRef5(null);
   const selectedMinuteRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const {
+    internalValue,
+    setInternalValue,
+    inputFieldProps: restInputFieldProps,
+    insideInputFieldComponentProps,
+    isOpen
+  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const readyHours = useMemo6(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
     [hoursToRender]
@@ -4805,10 +4963,10 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
   const onChange = useCallback10(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
-      inputFieldProps.onChangeValue?.(newValue);
+      restInputFieldProps.onChangeValue?.(newValue);
       setInternalValue(newValue);
     },
-    [internalValue, defaultTimeAfterDatePick, inputFieldProps.onChangeValue]
+    [internalValue, defaultTimeAfterDatePick, restInputFieldProps.onChangeValue]
   );
   const onBlur = useCallback10(
     (event) => {
@@ -4821,9 +4979,9 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
         const newTime = `${readyHour.toString().padStart(2, "0")}:${readyMinute.toString().padStart(2, "0")}`;
         const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
         const newValue = `${(internalValue.trim() || today)?.toString().split("T")[0]}T${newTime}`;
-        inputFieldProps.onChangeValue?.(newValue);
+        restInputFieldProps.onChangeValue?.(newValue);
       }
-      inputFieldProps.onBlur?.(event);
+      restInputFieldProps.onBlur?.(event);
     },
     [
       defaultDateAfterTimePick,
@@ -4832,8 +4990,8 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
       minutesToRender,
       readyHours,
       readyMinutes,
-      inputFieldProps.onChangeValue,
-      inputFieldProps.onBlur
+      restInputFieldProps.onChangeValue,
+      restInputFieldProps.onBlur
     ]
   );
   const onClickHour = useCallback10(
@@ -4841,20 +4999,20 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
       const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
       const newValue = `${(internalValue.trim() || today)?.toString().split("T")[0]}T${newTime}`;
-      inputFieldProps.onChangeValue?.(newValue);
+      restInputFieldProps.onChangeValue?.(newValue);
       setInternalValue(newValue);
     },
-    [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
+    [defaultDateAfterTimePick, internalValue, restInputFieldProps.onChangeValue]
   );
   const onClickMinute = useCallback10(
     (minute) => {
       const newTime = `${internalValue?.toString().split("T")?.[1]?.split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
       const newValue = `${(internalValue.trim() || today)?.toString().split("T")[0]}T${newTime}`;
-      inputFieldProps.onChangeValue?.(newValue);
+      restInputFieldProps.onChangeValue?.(newValue);
       setInternalValue(newValue);
     },
-    [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
+    [defaultDateAfterTimePick, internalValue, restInputFieldProps.onChangeValue]
   );
   useEffect9(() => {
     if (isOpen && selectedHourRef.current)
@@ -4868,6 +5026,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
       type: "datetime-local",
       insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
         Div_default,
@@ -4971,12 +5130,17 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps,
+      ...restInputFieldProps,
       onBlur
     }
   );
 });
-InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...props }, ref) {
+InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.time,
+    inputFieldProps
+  );
   const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const selectedHourRef = useRef5(null);
@@ -4986,7 +5150,13 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
   const minMinutes = minTime ? parseInt(minTime.split(":")[1]) : void 0;
   const maxHours = maxTime ? parseInt(maxTime.split(":")[0]) : void 0;
   const maxMinutes = maxTime ? parseInt(maxTime.split(":")[1]) : void 0;
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const {
+    internalValue,
+    setInternalValue,
+    inputFieldProps: restInputFieldProps,
+    insideInputFieldComponentProps,
+    isOpen
+  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const readyHours = useMemo6(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
     [hoursToRender]
@@ -5006,9 +5176,9 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
         const finalHour = minHours && readyHour < minHours ? minHours : maxHours && readyHour > maxHours ? maxHours : readyHour;
         const finalMinute = !!minHours && !!minMinutes && finalHour === minHours && readyMinute < minMinutes ? minMinutes : !!maxHours && !!maxMinutes && finalHour === maxHours && readyMinute > maxMinutes ? maxMinutes : readyMinute;
         const newValue = `${finalHour.toString().padStart(2, "0")}:${finalMinute.toString().padStart(2, "0")}`;
-        inputFieldProps.onChangeValue?.(newValue);
+        restInputFieldProps.onChangeValue?.(newValue);
       }
-      inputFieldProps.onBlur?.(event);
+      restInputFieldProps.onBlur?.(event);
     },
     [
       minHours,
@@ -5019,25 +5189,25 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
       minutesToRender,
       readyHours,
       readyMinutes,
-      inputFieldProps.onChangeValue,
-      inputFieldProps.onBlur
+      restInputFieldProps.onChangeValue,
+      restInputFieldProps.onBlur
     ]
   );
   const onClickHour = useCallback10(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
-      inputFieldProps.onChangeValue?.(value);
+      restInputFieldProps.onChangeValue?.(value);
       setInternalValue(value);
     },
-    [internalValue, inputFieldProps.onChangeValue]
+    [internalValue, restInputFieldProps.onChangeValue]
   );
   const onClickMinute = useCallback10(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
-      inputFieldProps.onChangeValue?.(value);
+      restInputFieldProps.onChangeValue?.(value);
       setInternalValue(value);
     },
-    [internalValue, inputFieldProps.onChangeValue]
+    [internalValue, restInputFieldProps.onChangeValue]
   );
   useEffect9(() => {
     if (isOpen && selectedHourRef.current)
@@ -5050,6 +5220,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.time,
       type: "time",
       insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
         Div_default,
@@ -5138,13 +5309,18 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps,
+      ...restInputFieldProps,
       minWidth: buttonWidth * 2 + 2,
       onBlur
     }
   );
 });
-InputFieldComponent.color = forwardRef11(function Color4({ value, onChangeValue, ...props }, ref) {
+InputFieldComponent.color = forwardRef11(function Color4(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { value, onChangeValue, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.time,
+    inputFieldProps
+  );
   const [inputFieldValue, setInputFieldValue] = useState7(value ?? "#000000");
   const onChangeValueElement = useCallback10(
     (value2) => {
@@ -5160,6 +5336,7 @@ InputFieldComponent.color = forwardRef11(function Color4({ value, onChangeValue,
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.color,
       type: "color",
       insideInputFieldAfterComponent: /* @__PURE__ */ jsx17(
         Div_default.row,
@@ -5294,8 +5471,14 @@ var SwitchElement = styled11.div.withConfig({
 `;
 var ToggleInputComponent = forwardRef12(function ToggleInput({
   label,
+  labelFontFamily,
+  labelLetterSpacing,
+  labelTextTransform,
   labelColor,
   text,
+  textFontFamily,
+  textLetterSpacing,
+  textTextTransform,
   textAdvanced,
   errorText,
   infoText,
@@ -5329,7 +5512,19 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs15(Div_default.column, { gap: theme2.styles.gap, ...excludeStyle, children: [
-    label && /* @__PURE__ */ jsx18(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
+    label && /* @__PURE__ */ jsx18(
+      Label_default,
+      {
+        text: label,
+        fontFamily: labelFontFamily,
+        letterSpacing: labelLetterSpacing,
+        textTransform: labelTextTransform,
+        color: labelColor,
+        required,
+        isError: !!errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsxs15(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ jsx18(
@@ -5377,13 +5572,25 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text ? /* @__PURE__ */ jsxs15(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
-        text,
-        required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
-          " ",
-          "*"
-        ] })
-      ] }) : textAdvanced ? /* @__PURE__ */ jsxs15(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text ? /* @__PURE__ */ jsxs15(
+        Text_default,
+        {
+          fontFamily: textFontFamily,
+          letterSpacing: textLetterSpacing,
+          textTransform: textTextTransform,
+          color,
+          userSelect: "none",
+          cursor: "pointer",
+          onClick: onClickText,
+          children: [
+            text,
+            required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+              " ",
+              "*"
+            ] })
+          ]
+        }
+      ) : 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: [
           " ",
@@ -5404,25 +5611,43 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   ] });
 });
 var ToggleInput_default = {
-  checkbox: forwardRef12(function Checkbox(props, ref) {
+  checkbox: forwardRef12(function Checkbox(checkboxProps, ref) {
+    const betterHtmlContextInternal = useBetterHtmlContextInternal();
+    const props = useComponentsPropsMerger(
+      betterHtmlContextInternal.components.toggleInput?.style?.checkbox,
+      checkboxProps
+    );
     return /* @__PURE__ */ jsx18(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
-  radiobutton: forwardRef12(function RadioButton(props, ref) {
+  radiobutton: forwardRef12(function RadioButton(radiobuttonProps, ref) {
+    const betterHtmlContextInternal = useBetterHtmlContextInternal();
+    const props = useComponentsPropsMerger(
+      betterHtmlContextInternal.components.toggleInput?.style?.radiobutton,
+      radiobuttonProps
+    );
     return /* @__PURE__ */ jsx18(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
-  switch: forwardRef12(function Switch({
-    label,
-    labelColor,
-    errorText,
-    infoText,
-    disabled,
-    value,
-    onChange,
-    checked: controlledChecked,
-    required,
-    id,
-    ...props
-  }, ref) {
+  switch: forwardRef12(function Switch(switchProps, ref) {
+    const betterHtmlContextInternal = useBetterHtmlContextInternal();
+    const {
+      label,
+      labelFontFamily,
+      labelLetterSpacing,
+      labelTextTransform,
+      labelColor,
+      errorText,
+      infoText,
+      disabled,
+      value,
+      onChange,
+      checked: controlledChecked,
+      required,
+      id,
+      ...props
+    } = useComponentsPropsMerger(
+      betterHtmlContextInternal.components.toggleInput?.style?.switch,
+      switchProps
+    );
     const theme2 = useTheme20();
     const internalId = useId3();
     const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
@@ -5439,7 +5664,19 @@ var ToggleInput_default = {
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
     return /* @__PURE__ */ jsxs15(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
-      label && /* @__PURE__ */ jsx18(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
+      label && /* @__PURE__ */ jsx18(
+        Label_default,
+        {
+          text: label,
+          fontFamily: labelFontFamily,
+          letterSpacing: labelLetterSpacing,
+          textTransform: labelTextTransform,
+          color: labelColor,
+          required,
+          isError: !!errorText,
+          htmlFor: readyId
+        }
+      ),
       /* @__PURE__ */ jsx18(
         Div_default.row,
         {
@@ -7445,12 +7682,12 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
           gap: iconGap,
           whiteSpace: "nowrap",
           backgroundColor: isActive ? activeItemColor ?? (colorTheme === "dark" ? lightenColor3(theme2.colors.primary, 0.7) : lightenColor3(theme2.colors.primary, 0.85)) : readyBackgroundColor,
-          backgroundColorHover: hoverItemColor,
+          backgroundColorHover: isActive && activeItemColor ? void 0 : hoverItemColor,
           borderRadius: theme2.styles.borderRadius,
           paddingBlock,
           paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
           paddingRight: theme2.styles.space,
-          filterHover: !hoverItemColor ? `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})` : void 0,
+          filterHover: !hoverItemColor || isActive ? `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})` : void 0,
           overflow: isCollapsed ? "hidden" : void 0,
           cursor: item.disabled ? "not-allowed" : "pointer",
           opacity: item.disabled ? 0.6 : void 0,