react-better-html 1.1.239 → 1.1.240

package/dist/index.js

@@ -932,6 +932,21 @@ function useComponentPropsWithPrefix(props, prefix) {
     return returnValue;
   }, [props, prefix]);
 }
+function useComponentsPropsMerger(...props) {
+  return (0, import_react.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 = (0, import_react_better_core.useTheme)();
   const [isOpen, setIsOpen] = (0, import_react_better_core.useBooleanState)();
@@ -1405,7 +1420,14 @@ var Text_default = Text2;
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Divider_default = {
   vertical: (0, import_react3.memo)(
-    (0, import_react3.forwardRef)(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
+    (0, import_react3.forwardRef)(function Divider(dividerProps, ref) {
+      const betterHtmlContextInternal = useBetterHtmlContextInternal();
+      const {
+        width = 1,
+        backgroundColor,
+        height,
+        ...props
+      } = useComponentsPropsMerger(betterHtmlContextInternal.components.divider?.style?.vertical, dividerProps);
       const theme2 = (0, import_react_better_core3.useTheme)();
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Div_default,
@@ -1421,11 +1443,35 @@ var Divider_default = {
     })
   ),
   horizontal: (0, import_react3.memo)(
-    (0, import_react3.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
+    (0, import_react3.forwardRef)(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 = (0, import_react_better_core3.useTheme)();
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-        text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Text_default,
+          {
+            fontFamily: textFontFamily,
+            fontSize: textFontSize,
+            fontWeight: textFontWeight,
+            textTransform,
+            letterSpacing: textLetterSpacing,
+            color: textColor ?? theme2.colors.textSecondary,
+            children: text
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
       ] });
     })
@@ -2037,39 +2083,40 @@ var ButtonElement = import_styled_components6.default.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 = (0, import_react_better_core9.useTheme)();
   const isLoadingHook = (0, import_react_better_core9.useLoader)(loaderName);
-  const { components } = useBetterHtmlContextInternal();
   const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
   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 = (0, import_react10.useCallback)(
@@ -2104,8 +2151,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__ */ (0, import_jsx_runtime8.jsxs)(
     ButtonElement,
     {
@@ -2173,41 +2220,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 = (0, import_react_better_core9.useTheme)();
-  const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ButtonComponent,
     {
-      ...betterHtmlContext2.components.button?.style?.secondary,
       className: `secondary${className ? ` ${className}` : ""}`,
       color: theme2.colors.textPrimary,
       ...props
     }
   );
 };
-ButtonComponent.destructive = function Destructive(props) {
-  const theme2 = (0, import_react_better_core9.useTheme)();
-  const betterHtmlContext2 = useBetterHtmlContextInternal();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    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 = (0, import_react_better_core9.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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 = (0, import_react_better_core9.useTheme)();
-  const betterHtmlContext2 = useBetterHtmlContextInternal();
   const readyButtonSize = buttonSize ?? size + theme2.styles.space;
   const backgroundButtonColorReady = backgroundButtonColor ?? theme2.colors.textPrimary;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ButtonComponent,
     {
-      ...betterHtmlContext2.components.button?.style?.icon,
+      ...betterHtmlContextInternal.components.button?.style?.icon,
       width: readyButtonSize,
       height: readyButtonSize,
       color: theme2.colors.textPrimary,
@@ -2224,8 +2274,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 = (0, import_react10.useCallback)(() => {
     const input = document.createElement("input");
     input.setAttribute("type", "file");
@@ -2239,7 +2293,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ButtonComponent,
     {
-      ...betterHtmlContext2.components.button?.style?.upload,
+      ...betterHtmlContextInternal.components.button?.style?.upload,
       text: "Upload",
       icon: "uploadCloud",
       onClick: onClickElement,
@@ -3518,7 +3572,9 @@ var import_styled_components11 = __toESM(require("styled-components"));
 var import_react17 = require("react");
 var import_react_better_core16 = require("react-better-core");
 var import_jsx_runtime15 = require("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 = (0, import_react_better_core16.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     Text_default,
@@ -3526,8 +3582,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: [
@@ -3547,35 +3606,43 @@ var import_react18 = require("react");
 var import_react_better_core17 = require("react-better-core");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var import_react19 = require("react");
-var DropdownComponent = (0, import_react18.forwardRef)(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 = (0, import_react18.forwardRef)(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 = (0, import_react_better_core17.useTheme)();
   const inputFieldHolderRef = (0, import_react18.useRef)(null);
   const buttonsRef = (0, import_react18.useRef)(null);
@@ -3785,6 +3852,9 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
     InputField_default,
     {
       label,
+      labelFontFamily,
+      labelLetterSpacing,
+      labelTextTransform,
       labelColor,
       errorText,
       infoText,
@@ -3928,7 +3998,12 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
     }
   ) });
 });
-DropdownComponent.countries = (0, import_react18.forwardRef)(function Countries({ ...props }, ref) {
+DropdownComponent.countries = (0, import_react18.forwardRef)(function Countries(dropdownProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.dropdown?.style?.countries,
+    dropdownProps
+  );
   const theme2 = (0, import_react_better_core17.useTheme)();
   const renderOption = (0, import_react18.useCallback)(
     (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
@@ -4347,30 +4422,35 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
 `;
 var hours = Array.from({ length: 24 }, (_, index) => index);
 var minutes = Array.from({ length: 60 }, (_, index) => index);
-var InputFieldComponent = (0, import_react21.forwardRef)(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 = (0, import_react21.forwardRef)(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 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
   const { colorTheme } = (0, import_react_better_core19.useBetterCoreContext)();
@@ -4406,7 +4486,19 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...excludeStyle, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Label_default,
+      {
+        text: label,
+        fontFamily: labelFontFamily,
+        letterSpacing: labelLetterSpacing,
+        textTransform: labelTextTransform,
+        color: labelColor,
+        required,
+        isError: !!errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "stretch", width: "100%", children: [
       prefix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Div_default.row,
@@ -4508,20 +4600,29 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
     )
   ] });
 });
-InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multiline({
-  label,
-  placeholder,
-  errorText,
-  infoText,
-  leftIcon,
-  rightIcon,
-  onChange,
-  onChangeValue,
-  onClickRightIcon,
-  required,
-  id,
-  ...props
-}, ref) {
+InputFieldComponent.multiline = (0, import_react21.forwardRef)(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 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
@@ -4536,7 +4637,19 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
   );
   const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Label_default,
+      {
+        text: label,
+        fontFamily: labelFontFamily,
+        letterSpacing: labelLetterSpacing,
+        textTransform: labelTextTransform,
+        color: labelColor,
+        required,
+        isError: !!errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Icon_default,
@@ -4595,14 +4708,19 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         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 = (0, import_react21.forwardRef)(function Email({ ...props }, ref) {
+InputFieldComponent.email = (0, import_react21.forwardRef)(function Email(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.email,
+    inputFieldProps
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
     {
@@ -4616,7 +4734,12 @@ InputFieldComponent.email = (0, import_react21.forwardRef)(function Email({ ...p
     }
   );
 });
-InputFieldComponent.password = (0, import_react21.forwardRef)(function Password({ ...props }, ref) {
+InputFieldComponent.password = (0, import_react21.forwardRef)(function Password(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.password,
+    inputFieldProps
+  );
   const [isPassword, setIsPassword] = (0, import_react_better_core19.useBooleanState)(true);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
@@ -4633,7 +4756,12 @@ InputFieldComponent.password = (0, import_react21.forwardRef)(function Password(
     }
   );
 });
-InputFieldComponent.search = (0, import_react21.forwardRef)(function Search({ value, onChangeValue, onFocus, onBlur, ...props }, ref) {
+InputFieldComponent.search = (0, import_react21.forwardRef)(function Search(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { value, onChangeValue, onFocus, onBlur, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.search,
+    inputFieldProps
+  );
   const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value?.toString() ?? "");
   const [inputFieldFocused, setInputFieldFocused] = (0, import_react_better_core19.useBooleanState)();
   const onChangeValueElement = (0, import_react21.useCallback)(
@@ -4676,7 +4804,19 @@ InputFieldComponent.search = (0, import_react21.forwardRef)(function Search({ va
     }
   );
 });
-InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
+InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(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 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
   const [dropdownValue, setDropdownValue] = (0, import_react21.useState)();
@@ -4734,12 +4874,16 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     setInputFieldValue(newValue.slice(country.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
+  const readyLabel = betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.label ?? label;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    readyLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       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
@@ -4767,7 +4911,9 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         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,
@@ -4779,21 +4925,32 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     ] })
   ] });
 });
-InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.date,
+    inputFieldProps
+  );
   const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(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 = (0, import_react21.useCallback)(
     (date) => {
-      inputFieldProps.onChangeValue?.(date ?? "");
+      restInputFieldProps.onChangeValue?.(date ?? "");
       setInternalValue(date ?? "");
     },
-    [inputFieldProps.onChangeValue]
+    [restInputFieldProps.onChangeValue]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.date,
       type: "date",
       insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Div_default,
@@ -4814,7 +4971,7 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps
+      ...restInputFieldProps
     }
   );
 });
@@ -4825,14 +4982,25 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
   maxDate,
   defaultDateAfterTimePick,
   defaultTimeAfterDatePick = "00:00",
-  ...props
+  ...inputFieldProps
 }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.dateTime,
+    inputFieldProps
+  );
   const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(null);
   const selectedHourRef = (0, import_react21.useRef)(null);
   const selectedMinuteRef = (0, import_react21.useRef)(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 = (0, import_react21.useMemo)(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
     [hoursToRender]
@@ -4844,10 +5012,10 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
   const onChange = (0, import_react21.useCallback)(
     (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 = (0, import_react21.useCallback)(
     (event) => {
@@ -4860,9 +5028,9 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(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,
@@ -4871,8 +5039,8 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
       minutesToRender,
       readyHours,
       readyMinutes,
-      inputFieldProps.onChangeValue,
-      inputFieldProps.onBlur
+      restInputFieldProps.onChangeValue,
+      restInputFieldProps.onBlur
     ]
   );
   const onClickHour = (0, import_react21.useCallback)(
@@ -4880,20 +5048,20 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(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 = (0, import_react21.useCallback)(
     (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]
   );
   (0, import_react21.useEffect)(() => {
     if (isOpen && selectedHourRef.current)
@@ -4907,6 +5075,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
       type: "datetime-local",
       insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Div_default,
@@ -5010,12 +5179,17 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps,
+      ...restInputFieldProps,
       onBlur
     }
   );
 });
-InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...props }, ref) {
+InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.time,
+    inputFieldProps
+  );
   const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(null);
   const selectedHourRef = (0, import_react21.useRef)(null);
@@ -5025,7 +5199,13 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
   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 = (0, import_react21.useMemo)(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
     [hoursToRender]
@@ -5045,9 +5225,9 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
         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,
@@ -5058,25 +5238,25 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
       minutesToRender,
       readyHours,
       readyMinutes,
-      inputFieldProps.onChangeValue,
-      inputFieldProps.onBlur
+      restInputFieldProps.onChangeValue,
+      restInputFieldProps.onBlur
     ]
   );
   const onClickHour = (0, import_react21.useCallback)(
     (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 = (0, import_react21.useCallback)(
     (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]
   );
   (0, import_react21.useEffect)(() => {
     if (isOpen && selectedHourRef.current)
@@ -5089,6 +5269,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.time,
       type: "time",
       insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Div_default,
@@ -5177,13 +5358,18 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps,
+      ...restInputFieldProps,
       minWidth: buttonWidth * 2 + 2,
       onBlur
     }
   );
 });
-InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ value, onChangeValue, ...props }, ref) {
+InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4(inputFieldProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { value, onChangeValue, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.inputField?.style?.time,
+    inputFieldProps
+  );
   const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value ?? "#000000");
   const onChangeValueElement = (0, import_react21.useCallback)(
     (value2) => {
@@ -5199,6 +5385,7 @@ InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ val
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
     {
+      ...betterHtmlContextInternal.components.inputField?.style?.color,
       type: "color",
       insideInputFieldAfterComponent: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Div_default.row,
@@ -5333,8 +5520,14 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
 `;
 var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   label,
+  labelFontFamily,
+  labelLetterSpacing,
+  labelTextTransform,
   labelColor,
   text,
+  textFontFamily,
+  textLetterSpacing,
+  textTextTransform,
   textAdvanced,
   errorText,
   infoText,
@@ -5368,7 +5561,19 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: theme2.styles.gap, ...excludeStyle, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Label_default,
+      {
+        text: label,
+        fontFamily: labelFontFamily,
+        letterSpacing: labelLetterSpacing,
+        textTransform: labelTextTransform,
+        color: labelColor,
+        required,
+        isError: !!errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -5416,13 +5621,25 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
-        text,
-        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
-          " ",
-          "*"
-        ] })
-      ] }) : textAdvanced ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        Text_default,
+        {
+          fontFamily: textFontFamily,
+          letterSpacing: textLetterSpacing,
+          textTransform: textTextTransform,
+          color,
+          userSelect: "none",
+          cursor: "pointer",
+          onClick: onClickText,
+          children: [
+            text,
+            required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+              " ",
+              "*"
+            ] })
+          ]
+        }
+      ) : textAdvanced ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
         required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
@@ -5443,25 +5660,43 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   ] });
 });
 var ToggleInput_default = {
-  checkbox: (0, import_react22.forwardRef)(function Checkbox(props, ref) {
+  checkbox: (0, import_react22.forwardRef)(function Checkbox(checkboxProps, ref) {
+    const betterHtmlContextInternal = useBetterHtmlContextInternal();
+    const props = useComponentsPropsMerger(
+      betterHtmlContextInternal.components.toggleInput?.style?.checkbox,
+      checkboxProps
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
-  radiobutton: (0, import_react22.forwardRef)(function RadioButton(props, ref) {
+  radiobutton: (0, import_react22.forwardRef)(function RadioButton(radiobuttonProps, ref) {
+    const betterHtmlContextInternal = useBetterHtmlContextInternal();
+    const props = useComponentsPropsMerger(
+      betterHtmlContextInternal.components.toggleInput?.style?.radiobutton,
+      radiobuttonProps
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
-  switch: (0, import_react22.forwardRef)(function Switch({
-    label,
-    labelColor,
-    errorText,
-    infoText,
-    disabled,
-    value,
-    onChange,
-    checked: controlledChecked,
-    required,
-    id,
-    ...props
-  }, ref) {
+  switch: (0, import_react22.forwardRef)(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 = (0, import_react_better_core20.useTheme)();
     const internalId = (0, import_react22.useId)();
     const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
@@ -5478,7 +5713,19 @@ var ToggleInput_default = {
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        Label_default,
+        {
+          text: label,
+          fontFamily: labelFontFamily,
+          letterSpacing: labelLetterSpacing,
+          textTransform: labelTextTransform,
+          color: labelColor,
+          required,
+          isError: !!errorText,
+          htmlFor: readyId
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Div_default.row,
         {