reactive-bulma 2.10.0 → 2.11.0

package/dist/cjs/types/components/molecules/FormField/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormFieldProps } from '../../../interfaces/moleculeProps';
+declare const FormField: React.FC<FormFieldProps>;
+export default FormField;

package/dist/cjs/types/components/molecules/InputControl/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputControlProps } from '../../../interfaces/moleculeProps';
+declare const InputControl: React.FC<InputControlProps>;
+export default InputControl;

package/dist/cjs/types/components/molecules/index.d.ts

@@ -9,3 +9,5 @@ export { default as MenuList } from './MenuList';
 export { default as Pagination } from './Pagination';
 export { default as Modal } from './Modal';
 export { default as Tabs } from './Tabs';
+export { default as InputControl } from './InputControl';
+export { default as FormField } from './FormField';

package/dist/cjs/types/functions/parsers.d.ts

@@ -1,5 +1,5 @@
 import { GenericObjectProps } from '../interfaces/commonProps';
-import { ParseTestIdProps } from '../interfaces/functionProps';
+import { CreateObjArrayProps, ParseTestIdProps } from '../interfaces/functionProps';
 /**
  * @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
  * @returns { string } A single string product of merge all classNames, separated by spaces
@@ -14,9 +14,4 @@ export declare const parseClasses: (_classes: Array<string | null | undefined>)
  */
 export declare const parseTestId: (config: ParseTestIdProps) => string;
 export declare const parseKey: (max?: number, min?: number) => string;
-interface CreateObjArrayProps {
-    numberOfItems?: number;
-    externalParser?: (i: number) => GenericObjectProps;
-}
 export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];
-export {};

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
-import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType, reducedSizeType } from '../types/styleTypes';
+import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, elementSizeType, sizeWithoutNormalType, textColorType, titleSizeType, rightLeftAlignType } from '../types/styleTypes';
 import { DropdownItemType, inputTypes } from '../types/domTypes';
 export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -27,14 +27,14 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
     isOutlined?: boolean;
     /** `Styling` Will add round borders to button's shape */
     isRounded?: boolean;
-    /** `Styling` Will change `text` for a animated spinner, but will remain clickeable */
+    /** `Styling` Will change `text` for an animated spinner, but will remain clickeable */
     isLoading?: boolean;
     /** `Styling` Similar to `isDisabled`, but will remove any color style */
     isStatic?: boolean;
     /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
     isSelected?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: basicSizeType;
+    size?: elementSizeType;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
@@ -46,8 +46,8 @@ export interface ProgressBarProps extends ElementProps, React.ComponentPropsWith
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set progress bar's size */
-    size?: basicSizeType;
-    /** `Styling` Will change `value` for a animated loading */
+    size?: elementSizeType;
+    /** `Styling` Will change `value` for an animated loading */
     isLoading?: boolean;
 }
 export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
@@ -70,7 +70,7 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
     /** `Styling` Will add round borders to tag's shape */
     isRounded?: boolean;
     /** `Styling` Set tag's size */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Color on tag's addon based on bulma's color tokens */
     addonColor?: basicColorType;
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
@@ -79,6 +79,8 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
 export interface ImageProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'figure'> {
     /** `Attribute` `Required` The image source that will be shown */
     src: string;
+    /** `Attribute` A description text for the image, useful for accessibility purposes */
+    alt?: string;
     /** `Styling` Will add round borders to image's shape */
     fixedSize?: fixedImageSizeType;
     /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
@@ -112,17 +114,21 @@ export interface IconProps extends ComposedElementProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: textColorType;
     /** `Styling` Set icons's size */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
+    /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
+    position?: rightLeftAlignType;
 }
 export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
     text?: string;
+    /** `Attribute` The text that will be shown if the user does not type any value */
+    placeholder?: string;
     /** `Attribute` Will disable the input */
     isDisabled?: boolean;
     /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
@@ -130,7 +136,7 @@ export interface InputProps extends ElementProps, ClickeableProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: basicColorType;
     /** `Styling` Set input's size */
-    size?: basicSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Will add round borders to input's shape */
     isRounded?: boolean;
     /** `Styling` Will add a specific border when the input is hovered by the user */
@@ -150,7 +156,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
 }
 export interface SelectOption {
     id: string | number;
@@ -167,7 +173,7 @@ export interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set select's size */
-    size?: basicSizeType;
+    size?: elementSizeType;
     /** `Styling`Will add round borders to input's shape */
     isRounded?: boolean;
     /** `Styling`Will add a specific border when the input is hovered by the user */
@@ -191,7 +197,7 @@ export interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size */
-    size?: basicSizeType;
+    size?: elementSizeType;
 }
 export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
@@ -250,9 +256,9 @@ export interface MenuItemProps extends ElementProps, ClickeableProps {
 export interface PaginationItemProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
     text: string | number;
-    /** `Attribute` Sets the custom text before the `text` when user hovers the item */
+    /** `Attribute` Sets a custom text before the `text` when user hovers the item */
     labelText?: string;
-    /** `Attribute` Sets the custom text before the `text` when user hovers the item if is the current one */
+    /** `Attribute` Sets a custom text before the `text` when user hovers the item if is the current one */
     currentLabelText?: string;
     /** `Styling` Makes the item the selected one, changing its background to blue */
     isSelected?: boolean;
@@ -262,6 +268,6 @@ export interface TabItemProps extends ComposedElementProps, ClickeableProps {
     text: string;
     /** `Attribute` Adds an `Icon` component before the text */
     icon?: IconProps;
-    /** `Styling` Used for Tabs styling purpose only. Will mark the tab as the one selected among its group */
+    /** `Styling` Used for `Tabs` styling purpose only. Will mark the tab as the one selected among its group */
     isActive?: boolean;
 }

package/dist/cjs/types/interfaces/commonProps.d.ts

@@ -22,5 +22,5 @@ export interface ClickeableProps {
     onClick?: () => void;
 }
 export interface GenericObjectProps {
-    [key: string]: string | number | boolean;
+    [key: string]: string | number | boolean | object;
 }

package/dist/cjs/types/interfaces/functionProps.d.ts

@@ -1,3 +1,4 @@
+import { GenericObjectProps } from './commonProps';
 interface RegExpRule {
     regExp?: RegExp;
     replacer?: string;
@@ -8,4 +9,8 @@ export interface ParseTestIdProps {
     rules?: RegExpRule[];
     separator?: string;
 }
+export interface CreateObjArrayProps {
+    numberOfItems?: number;
+    externalParser?: (i: number) => GenericObjectProps;
+}
 export {};

package/dist/cjs/types/interfaces/moleculeProps.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
-import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType, tabsFormatType } from '../types/styleTypes';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
+import { basicColorType, rightCenteredAlignType, breadcrumbSeparatorType, columnGapType, sizeWithoutNormalType, tabsFormatType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -38,11 +38,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
     items: BreadcrumbItemProps[];
     /** `Styling` Will adjust element position on screen */
-    alignment?: elementAlignType | null;
+    alignment?: rightCenteredAlignType | null;
     /** `Styling` Will adjust element position on screen */
     separator?: breadcrumbSeparatorType | null;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
 }
 export interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -62,7 +62,7 @@ export interface MessageProps extends ElementProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -105,9 +105,9 @@ export interface PaginationProps extends ComposedElementProps {
     /** `Styling` Will add round borders to each page's shape */
     isRounded?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Will adjust the pages position on screen */
-    alignment?: elementAlignType | null;
+    alignment?: rightCenteredAlignType | null;
 }
 export interface ModalProps extends ComposedElementProps {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -119,9 +119,9 @@ export interface TabsProps extends ElementProps {
     /** `Attribute` `Required` List of tabs that will be shown in order */
     tabs: TabItemProps[];
     /** `Styling` Will adjust the tabs position on screen */
-    alignment?: elementAlignType;
+    alignment?: rightCenteredAlignType;
     /** `Styling` Set tab's size on bulma's size tokens */
-    size?: reducedSizeType;
+    size?: sizeWithoutNormalType;
     /** `Styling` Set tab's size on bulma's size tokens */
     format?: tabsFormatType;
     /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
@@ -129,4 +129,34 @@ export interface TabsProps extends ElementProps {
     /** `Styling` The whole container will occupy its parent container width */
     isFullWidth?: boolean;
 }
+export interface InputControlProps extends ElementProps {
+    /** `Attribute` `Required` control's input configuration which will be wrapped */
+    inputConfig: InputProps;
+    /** `Attribute` `Icon` configuration that will be shown in Input's left side */
+    leftIcon?: IconProps;
+    /** `Attribute` `Icon` configuration that will be shown in Input's right side */
+    rightIcon?: IconProps;
+    /** `Styling` Set control and its input size on bulma's size tokens */
+    size?: sizeWithoutNormalType;
+    /** `Styling` Will add an animated spinner on input's right side */
+    isLoading?: boolean;
+    /** `Styling` Used for `FormField` styling purpose only. Will strech the input and its container in full-width */
+    isExpanded?: boolean;
+}
+export interface FormFieldHelperProps {
+    text?: string;
+    color?: basicColorType;
+}
+export interface FormFieldProps extends ElementProps {
+    /** `Attribute` Sets a custom text before the wrapped input to indicate its usage */
+    labelText?: string;
+    /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
+    inputControlConfig: InputControlProps | InputControlProps[];
+    /** `Attribute` Adds a helper text below the wrapped paragraph to provide context information */
+    helperConfig?: FormFieldHelperProps;
+    /** `Styling` Will adjust field's sections (label, input/s and helper) in horizontal position */
+    isHorizontal?: boolean;
+    /** `Styling` Will group the list of inputs in a same wrapper (useful for several inputs with same usage, as a complex address) */
+    isGrouped?: boolean;
+}
 export {};

package/dist/cjs/types/types/styleTypes.d.ts

@@ -4,10 +4,12 @@ export type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | '
 export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
 export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
 export type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
-export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
-export type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
+export type elementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+export type sizeWithoutNormalType = Exclude<elementSizeType, 'is-normal'>;
 export type iconColorModeType = 'light' | 'dark';
 export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
-export type elementAlignType = 'is-centered' | 'is-right';
+export type elementAlignType = 'is-centered' | 'is-right' | 'is-left';
+export type rightCenteredAlignType = Exclude<elementAlignType, 'is-left'>;
+export type rightLeftAlignType = Exclude<elementAlignType, 'is-centered'>;
 export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
 export type tabsFormatType = 'is-boxed' | 'is-toggle';

package/dist/esm/index.js

@@ -2985,11 +2985,12 @@ const generateIconContainer = (icon, color) => {
     });
     return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
 };
-const Icon = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, iconLabel, text = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
+const Icon = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, iconLabel, text = null, color = null, size = null, colorMode = null, isSpinning = false, position = null }) => {
     const iconContainerClasses = parseClasses([
         'icon',
         color,
         size,
+        position,
         containerCssClasses
     ]);
     const iconClasses = parseClasses([
@@ -3022,7 +3023,7 @@ const Icon = ({ testId = null, containerTestId = null, cssClasses = null, contai
     return text ? generateIconContainer(iconComponent, color) : iconComponent;
 };
 
-const Input = ({ testId = null, cssClasses = null, style = null, type, text = null, isDisabled = false, isReadonly = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+const Input = ({ testId = null, cssClasses = null, style = null, type, text = null, placeholder = null, isDisabled = false, isReadonly = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
     const inputClasses = parseClasses([
         'input',
         color,
@@ -3036,7 +3037,7 @@ const Input = ({ testId = null, cssClasses = null, style = null, type, text = nu
         tag: 'input',
         parsedClasses: inputClasses
     });
-    return (React.createElement("input", { "data-testid": inputTestId, type: type, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, className: inputClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+    return (React.createElement("input", { "data-testid": inputTestId, type: type, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : undefined, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, className: inputClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
 };
 
 const TextArea = ({ testId = null, cssClasses = null, style = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false, color = null, size = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
@@ -3249,7 +3250,7 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
     return (React.createElement("a", { "data-testid": menuItemTestId, className: menuItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
 };
 
-const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, fixedSize = 'is-1by1', isRounded = false }) => {
+const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, alt = null, fixedSize = 'is-1by1', isRounded = false }) => {
     const imageContainerClasses = parseClasses([
         'image',
         fixedSize,
@@ -3262,7 +3263,7 @@ const Image = ({ testId = null, containerTestId = null, cssClasses = null, conta
     const imageContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'image', parsedClasses: imageContainerClasses });
     const imageTestId = testId !== null && testId !== void 0 ? testId : `${imageContainerTestId}-img`;
     return (React.createElement("figure", { "data-testid": imageContainerTestId, className: imageContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
-        React.createElement("img", { "data-testid": imageTestId, className: imageClasses, style: style !== null && style !== void 0 ? style : undefined, src: src })));
+        React.createElement("img", { "data-testid": imageTestId, className: imageClasses, style: style !== null && style !== void 0 ? style : undefined, src: src, alt: alt !== null && alt !== void 0 ? alt : undefined })));
 };
 
 const PaginationItem = ({ testId = null, cssClasses = null, style = null, text, labelText = 'Page', currentLabelText = 'Go to page', isSelected = null, onClick = null }) => {
@@ -3546,5 +3547,80 @@ const Tabs = ({ testId = null, cssClasses = null, style = null, tabs, alignment
         React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${parseKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
 };
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Image, Input, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
+const renderIcon = (iconConfig) => iconConfig ? React.createElement(Icon, Object.assign({}, iconConfig)) : null;
+const InputControl = ({ testId = null, cssClasses = null, style = null, inputConfig, leftIcon = null, rightIcon = null, size = null, isLoading = null, isExpanded = null }) => {
+    const inputControlClasses = parseClasses([
+        'control',
+        size,
+        leftIcon ? 'has-icons-left' : null,
+        rightIcon ? 'has-icons-right' : null,
+        isLoading ? 'is-loading' : null,
+        isExpanded ? 'is-expanded' : null,
+        cssClasses
+    ]);
+    const inputControlTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'control',
+        parsedClasses: inputControlClasses,
+        rules: [
+            {
+                regExp: /has-|is-/gm,
+                replacer: '-'
+            },
+            {
+                regExp: /control/gm,
+                replacer: ''
+            }
+        ]
+    });
+    const reflectedInputConfig = Object.assign(Object.assign({}, inputConfig), { size: size !== null && size !== void 0 ? size : inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.size });
+    return (React.createElement("section", { "data-testid": inputControlTestId, className: inputControlClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement(Input, Object.assign({}, reflectedInputConfig)),
+        renderIcon(leftIcon ? Object.assign(Object.assign({}, leftIcon), { position: 'is-left' }) : undefined),
+        renderIcon(rightIcon ? Object.assign(Object.assign({}, rightIcon), { position: 'is-right' }) : undefined)));
+};
+
+const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
+const renderFieldBody = (inputControlConfig, isGrouped) => {
+    if (isGrouped) {
+        return Array.isArray(inputControlConfig) ? (inputControlConfig.map((_singleConfig, i) => (React.createElement(InputControl, Object.assign({ key: `grouped-input-control-${parseKey()}`, testId: `test-grouped-input-control-${i}` }, _singleConfig))))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
+    }
+    else {
+        return Array.isArray(inputControlConfig) ? (React.createElement(InputControl, Object.assign({}, inputControlConfig[0]))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
+    }
+};
+const renderFieldHelper = (helperConfig) => {
+    if (!helperConfig)
+        return null;
+    const fieldHelperClasses = parseClasses(['help', helperConfig.color]);
+    const fieldHelperTestId = parseTestId({
+        tag: 'form-field-help',
+        parsedClasses: fieldHelperClasses,
+        rules: [{ regExp: /help|is/gm, replacer: '' }]
+    });
+    return (React.createElement("p", { "data-testid": fieldHelperTestId, className: fieldHelperClasses }, helperConfig.text));
+};
+const FormField = ({ testId = null, cssClasses = null, style = null, labelText = null, inputControlConfig, helperConfig = null, isHorizontal = false, isGrouped = false }) => {
+    var _a;
+    const formFieldClasses = parseClasses([
+        'field',
+        isHorizontal ? 'is-horizontal' : null,
+        isGrouped ? 'is-grouped' : null,
+        cssClasses
+    ]);
+    const formFieldTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'field', parsedClasses: formFieldClasses });
+    if (!isGrouped &&
+        ((_a = inputControlConfig === null || inputControlConfig === void 0 ? void 0 : inputControlConfig.inputConfig) === null || _a === void 0 ? void 0 : _a.color) &&
+        helperConfig) {
+        helperConfig = Object.assign(Object.assign({}, helperConfig), { color: inputControlConfig.inputConfig.color });
+    }
+    return (React.createElement("section", { "data-testid": formFieldTestId, className: formFieldClasses, style: style !== null && style !== void 0 ? style : undefined },
+        isHorizontal ? (React.createElement("section", { className: 'field-label' }, renderFieldLabel(labelText))) : (renderFieldLabel(labelText)),
+        isHorizontal ? (React.createElement("section", { className: 'field-body' },
+            renderFieldBody(inputControlConfig, isGrouped),
+            renderFieldHelper(helperConfig))) : (React.createElement(React.Fragment, null,
+            renderFieldBody(inputControlConfig, isGrouped),
+            renderFieldHelper(helperConfig)))));
+};
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Icon, Image, Input, InputControl, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map