@julseb-lib/react 0.0.16 → 0.0.20

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

@@ -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/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"

package/dist/lib/components/LibIcon/LibIcon.tsx

@@ -12,14 +12,14 @@ import type { ILibLibIcon } from "./types"
  * @prop color?: Any color from the library
  * @prop className?: string
  */
-export function LibIcon({
+export const LibIcon = ({
     "data-testid": testid,
     icon,
     size,
     color,
     className,
     baseUrl,
-}: ILibLibIcon) {
+}: ILibLibIcon) => {
     if (typeof icon !== "string") return icon
 
     return (

package/dist/lib/components/MarkdownEditor/MarkdownEditor.tsx

@@ -29,7 +29,7 @@ import type { ILibMarkdownEditor } 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/MarkdownEditor/MdEditorButtons/EditorButtonTitles.tsx

@@ -6,14 +6,14 @@ import { mdTitlesButtons } from "../markdown-buttons"
 import { TitlesDropdown, TitleDropdownItem } from "../styles"
 import type { ILibMarkdownEditorTitles } from "../subtypes"
 
-export function EditorButtonTitles({
+export const EditorButtonTitles = ({
     "data-testid": testid,
     showButtons,
     className,
     textButtonTitles,
     inputRef,
     addCode,
-}: ILibMarkdownEditorTitles) {
+}: ILibMarkdownEditorTitles) => {
     const [isTextOpen, setIsTextOpen] = useState(false)
 
     if (showButtons?.titles === false) return null

package/dist/lib/components/MarkdownEditor/MdEditorButtons/EditorButtons.tsx

@@ -8,7 +8,7 @@ import { mdEditorButtons } from "../markdown-buttons"
 import { IconButton } from "../styles"
 import type { ILibMdEditorButtons } from "../subtypes"
 
-export function EditorButtons({
+export const EditorButtons = ({
     "data-testid": testid,
     className,
     showButtons,
@@ -17,7 +17,7 @@ export function EditorButtons({
     iconsBaseUrl,
     editor,
     setEditor,
-}: ILibMdEditorButtons) {
+}: ILibMdEditorButtons) => {
     return (
         <Flexbox
             data-testid={

package/dist/lib/components/PageLayout/PageLayout.tsx

@@ -27,7 +27,7 @@ import type { ILibPageLayout } from "./types"
  * @prop main?: ILibMain => imported from Main component, only if template is set to single
  * @prop mainMinHeight?: string | number => only if template is set to single
  */
-export function PageLayout({
+export const PageLayout = ({
     children,
     isLoading,
     pageLoading,
@@ -40,7 +40,7 @@ export function PageLayout({
     template = "single",
     main,
     mainMinHeight = "85vh",
-}: ILibPageLayout) {
+}: ILibPageLayout) => {
     return (
         <>
             {helmet && (

package/dist/lib/components/ProgressCircle/Circle.tsx

@@ -4,12 +4,12 @@ import classNames from "classnames"
 import { StyledCircle } from "./styles"
 import type { ILibProgressCircle } from "./types"
 
-export function Circle({
+export const Circle = ({
     className,
     value,
     color = "primary",
     noAnimation,
-}: ILibProgressCircle) {
+}: ILibProgressCircle) => {
     const r = 70
     const circ = 2 * Math.PI * r
     const strokePct = ((100 - value) * circ) / 100

package/dist/lib/components/ProgressCircle/Value.tsx

@@ -4,12 +4,12 @@ import { SrOnly } from "../../"
 import { Value as StyledValue } from "./styles"
 import type { ILibProgressCircleValue } from "./subtypes"
 
-export function Value({
+export const Value = ({
     "data-testid": testid,
     className,
     showValue,
     value,
-}: ILibProgressCircleValue) {
+}: ILibProgressCircleValue) => {
     if (!showValue)
         return (
             <SrOnly

package/dist/lib/components/Rating/Rating.tsx

@@ -24,7 +24,7 @@ import type { ILibRating } 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

package/dist/lib/components/ResetScroll/ResetScroll.tsx

@@ -7,7 +7,7 @@ import { useLocation } from "react-router-dom"
  * @description Scrolls to the top of the page every time the path changes, add it in your PageLayout
  * @link https://documentation-components-react.vercel.app/helpers/reset-scroll
  */
-export function ResetScroll() {
+export const ResetScroll = () => {
     const { pathname, search } = useLocation()
 
     useEffect(() => {

package/dist/lib/components/Select/Select.tsx

@@ -39,7 +39,7 @@ import type { ILibSelectButton } from "./subtypes"
  * @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/Slideshow/SlideshowButton.tsx

@@ -8,13 +8,13 @@ import type { ILibSlideshowButton } from "./subtypes"
 const DEFAULT_ICON_SIZE_SMALL = 24
 const DEFAULT_ICON_SIZE_LARGE = 32
 
-export function SlideshowButton({
+export const SlideshowButton = ({
     "data-testid": testid,
     className,
     onClick,
     position,
     controls,
-}: ILibSlideshowButton) {
+}: ILibSlideshowButton) => {
     const {
         "data-testid": controlTestid,
         className: controlClassName,

package/dist/lib/components/Slideshow/SlideshowPagination.tsx

@@ -10,7 +10,7 @@ import {
 } from "./styles"
 import type { ILibSlideshowPagination } from "./subtypes"
 
-export function SlideshowPagination({
+export const SlideshowPagination = ({
     "data-testid": testid,
     className,
     pagination,
@@ -18,7 +18,7 @@ export function SlideshowPagination({
     setActive,
     contentLength,
     activeSlide,
-}: ILibSlideshowPagination) {
+}: ILibSlideshowPagination) => {
     const {
         position = "outside",
         hideOnTouch,

package/dist/lib/components/Timepicker/Timepicker.tsx

@@ -41,7 +41,7 @@ import type { ILibTimepicker } 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/types/component-items.ts

@@ -10,6 +10,8 @@ import type {
     LibToastStatus,
     ReactChildren,
     LibMessageType,
+    CssFontStyle,
+    LibColorsHover,
 } from "./"
 
 /*====================== Base ======================*/
@@ -512,3 +514,32 @@ export type LibDragListItem =
     | DragListItemWithContentAndBadge
     | DragListItemWithContentAndDate
     | DragListItemWithElement
+
+/*====================== HelperBottom ======================*/
+
+interface HelperBottomWithText {
+    text: string
+    textColor?: LibAllColors
+    fontStyle?: CssFontStyle
+    icon?: LibIcon
+    iconColor?: LibAllColors
+    iconSize?: number
+    element?: never
+    linkColor?: LibColorsHover
+}
+
+interface HelperBottomWithElement {
+    text?: never
+    textColor?: never
+    fontStyle?: never
+    icon?: never
+    iconColor?: never
+    iconSize?: never
+    element: ReactChildren
+    linkColor?: LibColorsHover
+}
+
+export type LibHelperBottom =
+    | string
+    | HelperBottomWithText
+    | HelperBottomWithElement

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.16",
+    "version": "0.0.20",
     "type": "module",
     "license": "MIT",
     "scripts": {