reactive-bulma 2.11.0 → 2.12.0

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

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

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

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

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

@@ -10,4 +10,5 @@ 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';
+export { default as PanelBlock } from './PanelBlock';
+export { default as PanelTabs } from './PanelTabs';

package/dist/cjs/types/components/{molecules → organisms}/FormField/index.d.ts

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

package/dist/cjs/types/components/organisms/Panel/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as FormField } from './FormField';
+export { default as Panel } from './Panel';

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

@@ -0,0 +1,4 @@
+import { GenericObjectProps } from '../interfaces/commonProps';
+import { CreateObjArrayProps } from '../interfaces/functionProps';
+export declare const generateKey: (max?: number, min?: number) => string;
+export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];

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

@@ -1,5 +1,4 @@
-import { GenericObjectProps } from '../interfaces/commonProps';
-import { CreateObjArrayProps, ParseTestIdProps } from '../interfaces/functionProps';
+import { 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
@@ -13,5 +12,3 @@ export declare const parseClasses: (_classes: Array<string | null | undefined>)
  * @returns A single string product of merge all classNames, separated by `separator` value
  */
 export declare const parseTestId: (config: ParseTestIdProps) => string;
-export declare const parseKey: (max?: number, min?: number) => string;
-export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];

package/dist/cjs/types/functions/tests/generators.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2,3 +2,4 @@ import '../node_modules/bulma/css/bulma.min.css';
 import '../node_modules/@mdi/font/css/materialdesignicons.min.css';
 export * from './components/atoms';
 export * from './components/molecules';
+export * from './components/organisms';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, elementSizeType, sizeWithoutNormalType, textColorType, titleSizeType, rightLeftAlignType } from '../types/styleTypes';
-import { DropdownItemType, inputTypes } from '../types/domTypes';
+import { DropdownItemType, InputType } 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 */
     children?: string | React.ReactElement | React.ReactElement[];
@@ -124,7 +124,7 @@ export interface IconProps extends ComposedElementProps {
 }
 export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
-    type: inputTypes;
+    type: InputType;
     /** `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 */

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

@@ -2,6 +2,7 @@
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
 import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
 import { basicColorType, rightCenteredAlignType, breadcrumbSeparatorType, columnGapType, sizeWithoutNormalType, tabsFormatType } from '../types/styleTypes';
+import { PanelBlockItemType } from '../types/domTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -143,20 +144,28 @@ export interface InputControlProps extends ElementProps {
     /** `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 PanelBlockItemProps {
+    /** `Attribute` `Required` Indicates to component's parser which type of component will be rendered based on its option */
+    type: PanelBlockItemType;
+    /** `Attribute` `Required` The component properties that will configure that specific instance */
+    props: InputControlProps | IconProps | ButtonProps;
+}
+export interface PanelBlockProps extends ComposedElementProps, ClickeableProps {
+    /** `Attribute` `Required` Configuration object with a type and a set of props based on the available components that could be rendered in each `PanelBlock` */
+    config: PanelBlockItemProps;
+    /** `Attribute` Usable when config's U is `icon` only. It will display a text next to mentioned icon (for user purposes) */
+    blockText?: string;
+    /** `Styling` Used for `PanelBlock` styling purpose only. Will mark its rendered component as the one selected among its group */
+    isActive?: boolean;
+}
+export interface PanelTabItem extends ClickeableProps {
+    /** `Attribute` `Required` Will show the text to the user in shape of tab */
+    text: string;
+    /** `Styling` Used for `PanelTab` styling purpose only. Will mark its rendered component as the one selected among its group */
+    isActive?: boolean;
 }
-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 interface PanelTabsProps extends ElementProps {
+    /** `Attribute` `Required` A list of configuration objects that will render a set of tabs */
+    tabList: PanelTabItem[];
 }
 export {};

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

@@ -0,0 +1,29 @@
+import { ElementProps } from './commonProps';
+import { InputControlProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
+import { basicColorType } from '../types/styleTypes';
+export interface FormFieldHelperProps {
+    text?: string;
+    color?: basicColorType;
+}
+export interface FormFieldProps extends ElementProps {
+    /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
+    inputControlConfig: InputControlProps | InputControlProps[];
+    /** `Attribute` Sets a custom text before the wrapped input to indicate its usage */
+    labelText?: string;
+    /** `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 interface PanelProps extends ElementProps {
+    /** `Attribute` `Required` Will display Panel's header text */
+    headerText: string;
+    /** `Attribute` A configuration object that will render a set of tabs based on `PanelTab` component */
+    panelTabs?: PanelTabsProps;
+    /** `Attribute` `Required` A list of configuration objects that will render a list of block with different components, based on `PanelBlockList` component */
+    blockList: PanelBlockProps[];
+    /** `Styling` Color based on bulma's text color tokens */
+    color?: basicColorType;
+}

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

@@ -1,3 +1,4 @@
-export type buttonType = 'submit' | 'reset' | 'button';
-export type inputTypes = 'text' | 'password' | 'email' | 'tel';
+export type ButtonType = 'submit' | 'reset' | 'button';
+export type InputType = 'text' | 'password' | 'email' | 'tel';
 export type DropdownItemType = 'item' | 'link' | 'divider';
+export type PanelBlockItemType = 'icon' | 'control' | 'button';

package/dist/esm/index.js

@@ -2859,13 +2859,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([
@@ -3157,7 +3150,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}`;
@@ -3281,20 +3274,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' }) => {
@@ -3323,7 +3318,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)));
     })));
 };
 
@@ -3351,7 +3346,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 }) => {
@@ -3393,14 +3388,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);
@@ -3432,12 +3427,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)));
         }
     })));
 };
@@ -3445,9 +3440,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,
@@ -3472,7 +3467,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` },
@@ -3544,7 +3539,7 @@ 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;
@@ -3579,10 +3574,45 @@ const InputControl = ({ testId = null, cssClasses = null, style = null, inputCon
         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-${parseKey()}`, testId: `test-grouped-input-control-${i}` }, _singleConfig))))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
+        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)));
@@ -3622,5 +3652,15 @@ const FormField = ({ testId = null, cssClasses = null, style = null, labelText =
             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 };
+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))))));
+};
+
+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, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map