reactive-bulma 2.10.0 → 2.12.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Nicolás Omar González Passerino
+Copyright (c) 2024 Nicolás Omar González Passerino
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/cjs/index.js

@@ -2861,13 +2861,6 @@ const parseTestId = (config) => {
     }
     return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
 };
-const parseKey = (max = 5000, min = 1) => {
-    max = Math.floor(max);
-    min = Math.ceil(min);
-    const secureRandomNumbers = new Uint32Array(1);
-    window.crypto.getRandomValues(secureRandomNumbers);
-    return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
-};
 
 const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = null, isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, isSelected = false, size = null, onClick = null }) => {
     const buttonClasses = parseClasses([
@@ -2987,11 +2980,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([
@@ -3024,7 +3018,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,
@@ -3038,7 +3032,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 }) => {
@@ -3158,7 +3152,7 @@ const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, co
         content));
 };
 
-// PARSERS
+// FUNCTIONS
 const renderRadioButton = (config, index) => {
     const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
     const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
@@ -3251,7 +3245,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,
@@ -3264,7 +3258,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 }) => {
@@ -3282,20 +3276,22 @@ const PaginationItem = ({ testId = null, cssClasses = null, style = null, text,
 };
 
 const TabItem = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, icon = null, text, onClick = null }) => {
-    const tabItemContainerClasses = parseClasses([
-        'tabItem-container',
-        null,
-        containerCssClasses
-    ]);
-    const tabItemClasses = parseClasses(['tabItem', cssClasses]);
     const tabItemContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
-        tag: 'tabItem-container',
-        parsedClasses: tabItemContainerClasses
+        tag: 'tab-item-container',
+        parsedClasses: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : ''
     });
-    const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabItem', parsedClasses: tabItemClasses });
-    return (React.createElement("a", { "data-testid": tabItemContainerTestId, className: tabItemContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
+    const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tab-item', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
+    return (React.createElement("a", { "data-testid": tabItemContainerTestId, className: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : undefined, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
         icon ? React.createElement(Icon, Object.assign({}, icon)) : null,
-        React.createElement("span", { "data-testid": tabItemTestId, className: tabItemClasses, style: style !== null && style !== void 0 ? style : undefined }, text)));
+        React.createElement("span", { "data-testid": tabItemTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, text)));
+};
+
+const generateKey = (max = 5000, min = 1) => {
+    max = Math.floor(max);
+    min = Math.ceil(min);
+    const secureRandomNumbers = new Uint32Array(1);
+    window.crypto.getRandomValues(secureRandomNumbers);
+    return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
 };
 
 const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
@@ -3324,7 +3320,7 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
         const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
             !hasSelectedButton;
         const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
-        return (React.createElement(Button, Object.assign({ key: `button-group-item-${parseKey()}` }, buttonConfig)));
+        return (React.createElement(Button, Object.assign({ key: `button-group-item-${generateKey()}` }, buttonConfig)));
     })));
 };
 
@@ -3352,7 +3348,7 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
         tag: 'columns',
         parsedClasses: columnGroupClasses
     });
-    return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${parseKey()}` }, columnItemConfig))))));
+    return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${generateKey()}` }, columnItemConfig))))));
 };
 
 const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
@@ -3394,14 +3390,14 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
         ]
     });
     return (React.createElement("nav", { "data-testid": breadcrumbsContainerTestId, className: breadcrumbsContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
-        React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${parseKey()}` }, itemConfig)))))));
+        React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${generateKey()}` }, itemConfig)))))));
 };
 
 const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
     const isFirstItemInMenu = items.length > 1 && i === 0;
-    return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${parseKey()}-section` },
-        React.createElement(DropdownItem, { key: `dropdown-item-${parseKey()}-divider`, type: 'divider', itemText: 'divider' }),
-        React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))));
+    return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${generateKey()}-section` },
+        React.createElement(DropdownItem, { key: `dropdown-item-${generateKey()}-divider`, type: 'divider', itemText: 'divider' }),
+        React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))));
 })));
 const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
     const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
@@ -3433,12 +3429,12 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
     const menuListTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu-list', parsedClasses: menuListClasses });
     return (React.createElement("ul", { "data-testid": menuListTestId, className: menuListClasses, style: style !== null && style !== void 0 ? style : undefined }, itemList.map(item => {
         if ('subListTitle' in item) {
-            return (React.createElement("li", { key: `sub-list-menu-item-${parseKey()}` },
+            return (React.createElement("li", { key: `sub-list-menu-item-${generateKey()}` },
                 React.createElement(MenuItem, Object.assign({}, item.subListTitle)),
-                React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${parseKey()}` }, subItem)))))));
+                React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${generateKey()}` }, subItem)))))));
         }
         else {
-            return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${parseKey()}` }, item)));
+            return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${generateKey()}` }, item)));
         }
     })));
 };
@@ -3446,9 +3442,9 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
 const Menu = ({ testId = null, cssClasses = null, style = null, menuSections }) => {
     const menuClasses = parseClasses(['menu', cssClasses]);
     const menuTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu', parsedClasses: menuClasses });
-    return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${parseKey()}` },
-        React.createElement("p", { key: `section-label-${parseKey()}`, className: 'menu-label' }, section.label),
-        React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
+    return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${generateKey()}` },
+        React.createElement("p", { key: `section-label-${generateKey()}`, className: 'menu-label' }, section.label),
+        React.createElement(MenuList, { key: `section-menu-list-${generateKey()}`, itemList: section.itemList }))))));
 };
 
 const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
@@ -3473,7 +3469,7 @@ const renderPages = (pages, hasEllipsis, ellipsisItems) => {
         }
         if (!hasEllipsis ||
             (pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
-            return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${parseKey()}` }, pageItem)));
+            return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${generateKey()}` }, pageItem)));
         }
         if (pageIndex === --length) {
             return (React.createElement(React.Fragment, { key: `last-pagination-item` },
@@ -3545,7 +3541,127 @@ const Tabs = ({ testId = null, cssClasses = null, style = null, tabs, alignment
     ]);
     const tabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabs', parsedClasses: tabsClasses });
     return (React.createElement("section", { "data-testid": tabsTestId, className: tabsClasses, style: style !== null && style !== void 0 ? style : undefined },
-        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))))))));
+        React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${generateKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
+};
+
+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 convertConfigToComponent = ({ type, props }, testId, cssClasses, style, blockText) => {
+    switch (type) {
+        case 'icon': {
+            const panelBlockIconClasses = parseClasses(['panel-icon', cssClasses]);
+            const panelBlockIconTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-icon', parsedClasses: panelBlockIconClasses });
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { "data-testid": panelBlockIconTestId, className: panelBlockIconClasses, style: style !== null && style !== void 0 ? style : undefined },
+                    React.createElement(Icon, Object.assign({}, props))),
+                blockText));
+        }
+        case 'control':
+            return React.createElement(InputControl, Object.assign({}, props));
+        case 'button':
+            return React.createElement(Button, Object.assign({}, props));
+    }
+};
+const PanelBlock = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, config, blockText = null, isActive = false, onClick }) => {
+    const panelBlockLinkClasses = parseClasses([
+        'panel-block',
+        isActive ? 'is-active' : null,
+        containerCssClasses
+    ]);
+    const panelBlockLinkTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'panel-block', parsedClasses: panelBlockLinkClasses });
+    return (React.createElement("a", { "data-testid": panelBlockLinkTestId, className: panelBlockLinkClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, convertConfigToComponent(config, testId, cssClasses, style, blockText)));
+};
+
+const PanelTabs = ({ testId = null, cssClasses = null, style = null, tabList }) => {
+    const panelTabsClasses = parseClasses(['panel-tabs', cssClasses]);
+    const panelTabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-tabs', parsedClasses: panelTabsClasses });
+    return (React.createElement("section", { "data-testid": panelTabsTestId, className: panelTabsClasses, style: style !== null && style !== void 0 ? style : undefined }, tabList.map(tabItem => {
+        var _a;
+        return (React.createElement("a", { key: `tab-item-${generateKey()}`, className: tabItem.isActive ? 'is-active' : undefined, "aria-hidden": 'true', onClick: (_a = tabItem.onClick) !== null && _a !== void 0 ? _a : undefined }, tabItem.text));
+    })));
+};
+
+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-${generateKey()}`, 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)))));
+};
+
+const generateHeader = (headerText) => (React.createElement("p", { className: 'panel-heading' }, headerText));
+const Panel = ({ testId = null, cssClasses = null, style = null, headerText, panelTabs = null, blockList, color = null }) => {
+    const panelClasses = parseClasses(['panel', color, cssClasses]);
+    const panelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel', parsedClasses: panelClasses });
+    return (React.createElement("article", { "data-testid": panelTestId, className: panelClasses, style: style !== null && style !== void 0 ? style : undefined },
+        generateHeader(headerText),
+        panelTabs ? React.createElement(PanelTabs, Object.assign({}, panelTabs)) : null,
+        blockList.map(blockConfig => (React.createElement(PanelBlock, Object.assign({ key: `panel-block-item-${generateKey()}` }, blockConfig))))));
 };
 
 exports.Block = Block;
@@ -3562,9 +3678,11 @@ exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;
 exports.DropdownTrigger = DropdownTrigger;
 exports.File = File;
+exports.FormField = FormField;
 exports.Icon = Icon;
 exports.Image = Image;
 exports.Input = Input;
+exports.InputControl = InputControl;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
@@ -3573,6 +3691,9 @@ exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Pagination = Pagination;
 exports.PaginationItem = PaginationItem;
+exports.Panel = Panel;
+exports.PanelBlock = PanelBlock;
+exports.PanelTabs = PanelTabs;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;
 exports.Select = Select;