@julseb-lib/react 0.0.13 → 0.0.19

package/dist/lib/components/InputComponents/components/InputButton.tsx

@@ -19,7 +19,7 @@ import type { ILibInputButton } from "../types"
  * @prop validationStatus: boolean | undefined | undefined
  * @prop className: string | undefined
  */
-export function InputButton({
+export const InputButton = ({
     "data-testid": testid,
     "aria-label": ariaLabel,
     onClick,
@@ -31,7 +31,7 @@ export function InputButton({
     inputBackground,
     validationStatus,
     className,
-}: ILibInputButton) {
+}: ILibInputButton) => {
     return (
         <StyledInputButton
             aria-label={ariaLabel}

package/dist/lib/components/InputComponents/components/InputContainer.tsx

@@ -20,7 +20,7 @@ import type { ILibInputContainer } from "../../InputContainer/types"
  * @prop style: CSSProperties | undefined
  * @prop iconBaseUrl: string | undefined
  */
-export function InputContainer({
+export const InputContainer = ({
     "data-testid": testid,
     id,
     label,
@@ -36,7 +36,7 @@ export function InputContainer({
     hasListOpen,
     iconBaseUrl,
     style,
-}: ILibInputContainer) {
+}: ILibInputContainer) => {
     if (
         !label &&
         !labelComment &&

package/dist/lib/components/InputComponents/components/InputIcon.tsx

@@ -17,7 +17,7 @@ import type { ILibInputIconContainer } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop inputVariant: "rounded" | "pill" | undefined
  */
-export function InputIcon({
+export const InputIcon = ({
     "data-testid": testid,
     className,
     icon,
@@ -27,7 +27,7 @@ export function InputIcon({
     inputBackground,
     disabled,
     inputVariant,
-}: ILibInputIconContainer) {
+}: ILibInputIconContainer) => {
     if (!icon) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputPrefix.tsx

@@ -11,12 +11,12 @@ import type { ILibInputPrefix } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop prefix: string | JSX.Element | undefined
  */
-export function InputPrefix({
+export const InputPrefix = ({
     "data-testid": testid,
     className,
     prefix,
     inputBackground,
-}: ILibInputPrefix) {
+}: ILibInputPrefix) => {
     if (!prefix) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputRightContainer.tsx

@@ -13,14 +13,14 @@ import type { ILibInputRightContainer } from "../types"
  * @prop withBorder: boolean | undefined
  * @prop children?: ReactChildren
  */
-export function InputRightContainer({
+export const InputRightContainer = ({
     "data-testid": testid,
     className,
     children,
     disabled,
     withPadding,
     withBorder,
-}: ILibInputRightContainer) {
+}: ILibInputRightContainer) => {
     return (
         <StyledInputRightContainer
             data-testid={testid && `${testid}.RightContainer`}

package/dist/lib/components/InputComponents/components/InputSuffix.tsx

@@ -11,12 +11,12 @@ import type { ILibInputSuffix } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop prefix: string | JSX.Element | undefined
  */
-export function InputSuffix({
+export const InputSuffix = ({
     "data-testid": testid,
     className,
     suffix,
     inputBackground,
-}: ILibInputSuffix) {
+}: ILibInputSuffix) => {
     if (!suffix) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputValidationHelper.tsx

@@ -6,7 +6,7 @@ import { CloseCircle, CheckCircle } from "../../../icons"
 import {
     HelperBottomContainer,
     HelperBottomIconContainer,
-    HelperBottom,
+    StyledHelperBottom,
 } from "../../InputContainer/styles"
 import type { ILibInputValidationHelper } from "../types"
 
@@ -17,11 +17,11 @@ import type { ILibInputValidationHelper } from "../types"
  * @prop className: string | undefined
  * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  */
-export function InputValidationHelper({
+export const InputValidationHelper = ({
     "data-testid": testid,
     className,
     validation,
-}: ILibInputValidationHelper) {
+}: ILibInputValidationHelper) => {
     const {
         status,
         message,
@@ -81,7 +81,7 @@ export function InputValidationHelper({
                 />
             </HelperBottomIconContainer>
 
-            <HelperBottom
+            <StyledHelperBottom
                 data-testid={testid && `${testid}.ValidationHelper.Text`}
                 className={className && "ValidationTextBottom"}
                 $hasIcon
@@ -92,7 +92,7 @@ export function InputValidationHelper({
                 }
             >
                 {message}
-            </HelperBottom>
+            </StyledHelperBottom>
         </HelperBottomContainer>
     )
 }

package/dist/lib/components/InputComponents/components/InputValidationIcon.tsx

@@ -15,12 +15,12 @@ const DEFAULT_ICON_SIZE = 16
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  */
-export function InputValidationIcon({
+export const InputValidationIcon = ({
     "data-testid": testid,
     className,
     validation,
     inputBackground,
-}: ILibInputValidationIcon) {
+}: ILibInputValidationIcon) => {
     const commonIconProps = {
         className: className && "ValidationIcon",
         size: DEFAULT_ICON_SIZE,

package/dist/lib/components/InputComponents/components/InputWrapper.tsx

@@ -17,7 +17,7 @@ import type { ILibInputWrapper } from "../types"
  * @prop validationStatus: boolean | undefined
  * @prop children?: ReactChildren
  */
-export function InputWrapper({
+export const InputWrapper = ({
     "data-testid": testid,
     className,
     hasContainer,
@@ -27,7 +27,7 @@ export function InputWrapper({
     inputBackground,
     inputVariant,
     validationStatus,
-}: ILibInputWrapper) {
+}: ILibInputWrapper) => {
     return (
         <StyledInputWrapper
             data-testid={hasContainer && testid ? `${testid}.Wrapper` : testid}

package/dist/lib/components/InputComponents/types.ts

@@ -3,15 +3,14 @@
 import type { CSSProperties, MouseEventHandler } from "react"
 import type {
     ReactChildren,
-    CssFontStyle,
     LibInputListDirection,
-    LibAllColors,
     LibIcon,
     LibInputBackground,
     LibInputVariant,
     LibValidationStatus,
     RequireAtLeastOne,
     LibInputPrefixAndSuffix,
+    LibHelperBottom,
 } from "../../types"
 
 /*====================== Validation ======================*/
@@ -109,17 +108,7 @@ export interface ILibInputContainer {
     label: string | undefined
     labelComment: string | undefined
     helper: string | undefined
-    helperBottom:
-        | string
-        | {
-              text: string
-              textColor?: LibAllColors
-              fontStyle?: CssFontStyle
-              icon?: LibIcon
-              iconColor?: LibAllColors
-              iconSize?: number
-          }
-        | undefined
+    helperBottom: LibHelperBottom | undefined
     validation: LibValidationHelper | undefined
     children?: ReactChildren
     value: any | undefined

package/dist/lib/components/InputContainer/HelperBottom.tsx

@@ -0,0 +1,89 @@
+/*=============================================== HelperBottom ===============================================*/
+
+import type { FC } from "react"
+import { LibIcon } from "../LibIcon"
+import { getIconSizeFromFont } from "../../lib-utils"
+import {
+    StyledHelperBottom,
+    HelperBottomContainer,
+    HelperBottomIconContainer,
+} from "./styles"
+import type { ILibHelperBottom } from "./subtypes"
+
+export const HelperBottom: FC<ILibHelperBottom> = ({
+    "data-testid": testid,
+    className,
+    helperBottom,
+    iconBaseUrl,
+}) => {
+    if (typeof helperBottom === "string") {
+        return <StyledHelperBottom>{helperBottom}</StyledHelperBottom>
+    }
+
+    if (typeof helperBottom === "object") {
+        const {
+            element,
+            text,
+            textColor,
+            fontStyle,
+            icon,
+            iconColor = "primary",
+            iconSize = getIconSizeFromFont("small") as number,
+        } = helperBottom
+
+        if (element) return <StyledHelperBottom>{element}</StyledHelperBottom>
+
+        if (icon)
+            return (
+                <HelperBottomContainer
+                    data-testid={testid && `${testid}.HelperBottomContainer`}
+                    className={className && "HelperBottomContainer"}
+                >
+                    <HelperBottomIconContainer
+                        data-testid={
+                            testid && `${testid}.HelperBottom.IconContainer`
+                        }
+                        className={className && "BottomIconContainer"}
+                        $iconSize={iconSize}
+                    >
+                        <LibIcon
+                            data-testid={
+                                testid &&
+                                `${testid}.HelperBottom.IconContainer.Icon`
+                            }
+                            className={className && "HelperBottomIcon"}
+                            icon={icon}
+                            color={iconColor}
+                            size={iconSize || getIconSizeFromFont("small")}
+                            baseUrl={iconBaseUrl}
+                        />
+                    </HelperBottomIconContainer>
+
+                    <StyledHelperBottom
+                        data-testid={testid && `${testid}.HelperBottom.Text`}
+                        className={className && "HelperBottomText"}
+                        color={textColor}
+                        $fontStyle={fontStyle}
+                        $iconSize={iconSize}
+                        $hasIcon
+                    >
+                        {helperBottom.text}
+                    </StyledHelperBottom>
+                </HelperBottomContainer>
+            )
+
+        return (
+            <StyledHelperBottom
+                data-testid={testid && `${testid}.HelperBottom`}
+                className={className && "HelperBottom"}
+                color={textColor}
+                $fontStyle={fontStyle}
+                $hasIcon={false}
+            >
+                {text}
+            </StyledHelperBottom>
+        )
+    }
+
+    return null
+}

package/dist/lib/components/InputContainer/InputContainer.tsx

@@ -4,15 +4,12 @@ import { forwardRef } from "react"
 import classNames from "classnames"
 import { Text } from "../../"
 import { InputValidationHelper } from "../InputComponents"
-import { LibIcon } from "../LibIcon"
-import { getIconSizeFromFont } from "../../lib-utils"
+import { HelperBottom } from "./HelperBottom"
 import {
     StyledInputContainer,
     Label,
     LabelComment,
-    HelperBottomContainer,
-    HelperBottomIconContainer,
-    HelperBottom,
+    StyledHelperBottom,
 } from "./styles"
 import type { ILibInputContainer } from "./types"
 
@@ -26,7 +23,7 @@ import type { ILibInputContainer } from "./types"
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop value?: any
  * @prop counter?: boolean
  * @prop maxLength?: number
@@ -102,91 +99,16 @@ export const InputContainer = forwardRef<HTMLDivElement, ILibInputContainer>(
 
                 {children}
 
-                {helperBottom &&
-                    (typeof helperBottom === "string" || !helperBottom.icon ? (
-                        <HelperBottom
-                            data-testid={testid && `${testid}.HelperBottom`}
-                            className={className && "HelperBottom"}
-                            color={
-                                typeof helperBottom === "object" &&
-                                helperBottom.textColor
-                                    ? helperBottom.textColor
-                                    : undefined
-                            }
-                            $fontStyle={
-                                typeof helperBottom === "object" &&
-                                helperBottom.fontStyle
-                                    ? helperBottom.fontStyle
-                                    : undefined
-                            }
-                            $hasIcon={false}
-                        >
-                            {typeof helperBottom === "string"
-                                ? helperBottom
-                                : helperBottom.text}
-                        </HelperBottom>
-                    ) : (
-                        <HelperBottomContainer
-                            data-testid={
-                                testid && `${testid}.HelperBottomContainer`
-                            }
-                            className={className && "HelperBottomContainer"}
-                        >
-                            <HelperBottomIconContainer
-                                data-testid={
-                                    testid &&
-                                    `${testid}.HelperBottom.IconContainer`
-                                }
-                                className={className && "BottomIconContainer"}
-                                $iconSize={
-                                    (helperBottom.iconSize ||
-                                        getIconSizeFromFont("small")) as number
-                                }
-                            >
-                                <LibIcon
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.HelperBottom.IconContainer.Icon`
-                                    }
-                                    className={className && "HelperBottomIcon"}
-                                    icon={helperBottom.icon}
-                                    color={helperBottom.iconColor || "primary"}
-                                    size={
-                                        helperBottom.iconSize ||
-                                        getIconSizeFromFont("small")
-                                    }
-                                    baseUrl={iconBaseUrl}
-                                />
-                            </HelperBottomIconContainer>
-
-                            <HelperBottom
-                                data-testid={
-                                    testid && `${testid}.HelperBottom.Text`
-                                }
-                                className={className && "HelperBottomText"}
-                                color={
-                                    helperBottom.textColor
-                                        ? helperBottom.textColor
-                                        : undefined
-                                }
-                                $fontStyle={
-                                    helperBottom.fontStyle
-                                        ? helperBottom.fontStyle
-                                        : undefined
-                                }
-                                $hasIcon
-                                $iconSize={
-                                    (helperBottom.iconSize ||
-                                        getIconSizeFromFont("small")) as number
-                                }
-                            >
-                                {helperBottom.text}
-                            </HelperBottom>
-                        </HelperBottomContainer>
-                    ))}
+                {helperBottom && (
+                    <HelperBottom
+                        data-testid={testid}
+                        className={className}
+                        helperBottom={helperBottom}
+                    />
+                )}
 
                 {counter && (
-                    <HelperBottom
+                    <StyledHelperBottom
                         data-testid={testid && `${testid}.Counter`}
                         className={className && "Counter"}
                         color="gray"
@@ -194,7 +116,7 @@ export const InputContainer = forwardRef<HTMLDivElement, ILibInputContainer>(
                     >
                         {value.toString().length}
                         {maxLength && `/${maxLength}`}
-                    </HelperBottom>
+                    </StyledHelperBottom>
                 )}
 
                 {validation && (

package/dist/lib/components/InputContainer/styles.tsx

@@ -2,7 +2,7 @@
 
 import type { FC } from "react"
 import styled from "styled-components"
-import { stringifyPx } from "ts-utils-julseb"
+import { stringifyPx } from "@julseb-lib/utils"
 import {
     setDefaultTheme,
     Mixins,
@@ -58,7 +58,7 @@ const HelperBottomIconContainer = styled.span<{ $iconSize: number }>`
     })}
 `
 
-const HelperBottom = styled(Text).attrs({ tag: "small" })<{
+const StyledHelperBottom = styled(Text).attrs({ tag: "small" })<{
     $fontStyle?: CssFontStyle
     $hasIcon?: boolean
     $iconSize?: number
@@ -76,7 +76,7 @@ setDefaultTheme([
     LabelComment,
     HelperBottomContainer,
     HelperBottomIconContainer,
-    HelperBottom,
+    StyledHelperBottom,
 ])
 
 export {
@@ -85,5 +85,5 @@ export {
     LabelComment,
     HelperBottomContainer,
     HelperBottomIconContainer,
-    HelperBottom,
+    StyledHelperBottom,
 }

package/dist/lib/components/InputContainer/subtypes.ts

@@ -0,0 +1,10 @@
+/*=============================================== Header sub components types ===============================================*/
+
+import type { ILibInputContainer } from "./types"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN THOSE COMPONENTS
+
+export type ILibHelperBottom = Pick<
+    ILibInputContainer,
+    "helperBottom" | "data-testid" | "className" | "iconBaseUrl"
+>

package/dist/lib/components/InputContainer/types.ts

@@ -2,11 +2,9 @@
 
 import type { CSSProperties } from "react"
 import type {
-    CssFontStyle,
-    LibAllColors,
     LibComponentBase,
-    LibIcon,
     ReactChildren,
+    LibHelperBottom,
 } from "../../types"
 import type { LibInputWithValidation } from "../InputComponents/types"
 
@@ -16,16 +14,7 @@ export interface ILibInputContainer
     label?: string
     labelComment?: string
     helper?: string
-    helperBottom?:
-        | string
-        | {
-              text: string
-              textColor?: LibAllColors
-              fontStyle?: CssFontStyle
-              icon?: LibIcon
-              iconColor?: LibAllColors
-              iconSize?: number
-          }
+    helperBottom?: LibHelperBottom
     children?: ReactChildren
     value?: any
     counter?: boolean

package/dist/lib/components/InputCounter/InputCounter.tsx

@@ -38,7 +38,7 @@ import type { ILibInputCounter } from "./types"
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop inputBackground?: "light" | "dark"

package/dist/lib/components/InputImage/EmptyContainer.tsx

@@ -5,14 +5,14 @@ import { LibIcon } from "../LibIcon"
 import { StyledEmptyContainer } from "./styles"
 import type { ILibEmptyContainer } from "./subtypes"
 
-export function EmptyContainer({
+export const EmptyContainer = ({
     "data-testid": testid,
     className,
     validation,
     iconSizes,
     icons,
     iconBaseUrl,
-}: ILibEmptyContainer) {
+}: ILibEmptyContainer) => {
     return (
         <StyledEmptyContainer
             data-testid={testid && `${testid}.EmptyContainer`}

package/dist/lib/components/InputImage/HoverContainer.tsx

@@ -6,7 +6,7 @@ import { Edit } from "../../icons"
 import { StyledHoverContainer } from "./styles"
 import type { ILibHoverContainer } from "./subtypes"
 
-export function HoverContainer({
+export const HoverContainer = ({
     "data-testid": testid,
     className,
     validation,
@@ -15,7 +15,7 @@ export function HoverContainer({
     iconBaseUrl,
     isVisible,
     disabled = false,
-}: ILibHoverContainer) {
+}: ILibHoverContainer) => {
     return (
         <StyledHoverContainer
             data-testid={testid && `${testid}.HoverContainer`}

package/dist/lib/components/InputImage/InputImage.tsx

@@ -17,6 +17,7 @@ import type { ILibInputImage } from "./types"
  * @prop value: string
  * @prop width?: string | number
  * @prop height?: string | number
+ * @prop size?: string | number
  * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
  * @prop icons?: { empty?: string | JSX.Element; hover?: string | JSX.Element }
  * @prop iconSizes?: { empty?: number; hover?: number }
@@ -24,7 +25,7 @@ import type { ILibInputImage } from "./types"
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop containerStyle?: CSSProperties
@@ -44,6 +45,7 @@ export const InputImage = forwardRef<HTMLInputElement, ILibInputImage>(
             icons,
             iconSizes,
             iconBaseUrl,
+            size,
             width = 64,
             height = 64,
             borderRadius = "m",
@@ -95,8 +97,8 @@ export const InputImage = forwardRef<HTMLInputElement, ILibInputImage>(
                         hasContainer && className ? "InputLabel" : className
                     }
                     htmlFor={id}
-                    $width={width}
-                    $height={height}
+                    $width={size ?? width}
+                    $height={size ?? height}
                     $borderRadius={borderRadius}
                     $disabled={disabled}
                     $validationStatus={validation?.status}

package/dist/lib/components/InputImage/styles.tsx

@@ -1,7 +1,7 @@
 /*=============================================== InputImage styles ===============================================*/
 
 import styled, { css } from "styled-components"
-import { stringifyPx } from "ts-utils-julseb"
+import { stringifyPx } from "@julseb-lib/utils"
 import {
     BREAKPOINTS,
     Image,

package/dist/lib/components/InputImage/types.ts

@@ -10,6 +10,7 @@ export type ILibInputImage = InputHTMLAttributes<HTMLInputElement> &
         value: string
         width?: string | number
         height?: string | number
+        size?: string | number
         borderRadius?: ILibRadius
         icons?: {
             empty?: LibIcon

package/dist/lib/components/InputPhone/InputPhone.tsx

@@ -60,7 +60,7 @@ const DEFAULT_ICONS_SIZES = {
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop inputBackground?: "light" | "dark"

package/dist/lib/components/InputPin/InputPin.tsx

@@ -29,7 +29,7 @@ import type { ILibInputPin } from "./types"
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop inputBackground?: "light" | "dark"

package/dist/lib/components/InputSlider/InputSlider.tsx

@@ -23,7 +23,7 @@ import type { ILibInputSlider } from "./types"
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop inputBackground?: "light" | "dark"