reactive-bulma 2.11.0 → 2.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +2 -2
  3. package/dist/cjs/index.js +124 -34
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/cjs/types/components/atoms/LevelHeader/index.d.ts +4 -0
  6. package/dist/cjs/types/components/atoms/index.d.ts +1 -0
  7. package/dist/cjs/types/components/molecules/LevelItem/index.d.ts +4 -0
  8. package/dist/cjs/types/components/molecules/PanelBlock/index.d.ts +4 -0
  9. package/dist/cjs/types/components/molecules/PanelTabs/index.d.ts +4 -0
  10. package/dist/cjs/types/components/molecules/index.d.ts +3 -1
  11. package/dist/cjs/types/components/{molecules → organisms}/FormField/index.d.ts +1 -1
  12. package/dist/cjs/types/components/organisms/Level/index.d.ts +4 -0
  13. package/dist/cjs/types/components/organisms/Panel/index.d.ts +4 -0
  14. package/dist/cjs/types/components/organisms/index.d.ts +3 -0
  15. package/dist/cjs/types/functions/generators.d.ts +4 -0
  16. package/dist/cjs/types/functions/parsers.d.ts +1 -4
  17. package/dist/cjs/types/functions/tests/generators.test.d.ts +1 -0
  18. package/dist/cjs/types/index.d.ts +1 -0
  19. package/dist/cjs/types/interfaces/atomProps.d.ts +8 -2
  20. package/dist/cjs/types/interfaces/moleculeProps.d.ts +30 -15
  21. package/dist/cjs/types/interfaces/organismProps.d.ts +39 -0
  22. package/dist/cjs/types/types/domTypes.d.ts +3 -2
  23. package/dist/esm/index.js +119 -35
  24. package/dist/esm/index.js.map +1 -1
  25. package/dist/esm/types/components/atoms/LevelHeader/index.d.ts +4 -0
  26. package/dist/esm/types/components/atoms/index.d.ts +1 -0
  27. package/dist/esm/types/components/molecules/LevelItem/index.d.ts +4 -0
  28. package/dist/esm/types/components/molecules/PanelBlock/index.d.ts +4 -0
  29. package/dist/esm/types/components/molecules/PanelTabs/index.d.ts +4 -0
  30. package/dist/esm/types/components/molecules/index.d.ts +3 -1
  31. package/dist/esm/types/components/{molecules → organisms}/FormField/index.d.ts +1 -1
  32. package/dist/esm/types/components/organisms/Level/index.d.ts +4 -0
  33. package/dist/esm/types/components/organisms/Panel/index.d.ts +4 -0
  34. package/dist/esm/types/components/organisms/index.d.ts +3 -0
  35. package/dist/esm/types/functions/generators.d.ts +4 -0
  36. package/dist/esm/types/functions/parsers.d.ts +1 -4
  37. package/dist/esm/types/functions/tests/generators.test.d.ts +1 -0
  38. package/dist/esm/types/index.d.ts +1 -0
  39. package/dist/esm/types/interfaces/atomProps.d.ts +8 -2
  40. package/dist/esm/types/interfaces/moleculeProps.d.ts +30 -15
  41. package/dist/esm/types/interfaces/organismProps.d.ts +39 -0
  42. package/dist/esm/types/types/domTypes.d.ts +3 -2
  43. package/dist/index.d.ts +87 -17
  44. package/package.json +11 -11
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023 Nicolás Omar González Passerino
3
+ Copyright (c) 2024 Nicolás Omar González Passerino
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -153,8 +153,6 @@ Reactive bulma's documentation, included in this repo in the root directory, is
153
153
 
154
154
  Learn more about `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
155
155
 
156
- Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
157
-
158
156
  ## Usage
159
157
 
160
158
  ```jsx
@@ -178,6 +176,8 @@ After some time, I understood that creating component files is a repetitive and
178
176
  - Then, the assistant will ask in which folder you want to create it (based on its type following [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/))
179
177
  - At last, the script should create all base files to reduce time and focus on custom implementation.
180
178
 
179
+ Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
180
+
181
181
  ### How to update all dependencies
182
182
 
183
183
  In case you wanted to make your own fork, I recommend you to updated at least weekly using a custom command `npm run update`, which will run the following commands in order:
package/dist/cjs/index.js CHANGED
@@ -2861,13 +2861,6 @@ const parseTestId = (config) => {
2861
2861
  }
2862
2862
  return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
2863
2863
  };
2864
- const parseKey = (max = 5000, min = 1) => {
2865
- max = Math.floor(max);
2866
- min = Math.ceil(min);
2867
- const secureRandomNumbers = new Uint32Array(1);
2868
- window.crypto.getRandomValues(secureRandomNumbers);
2869
- return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
2870
- };
2871
2864
 
2872
2865
  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 }) => {
2873
2866
  const buttonClasses = parseClasses([
@@ -3159,7 +3152,7 @@ const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, co
3159
3152
  content));
3160
3153
  };
3161
3154
 
3162
- // PARSERS
3155
+ // FUNCTIONS
3163
3156
  const renderRadioButton = (config, index) => {
3164
3157
  const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
3165
3158
  const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
@@ -3283,20 +3276,29 @@ const PaginationItem = ({ testId = null, cssClasses = null, style = null, text,
3283
3276
  };
3284
3277
 
3285
3278
  const TabItem = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, icon = null, text, onClick = null }) => {
3286
- const tabItemContainerClasses = parseClasses([
3287
- 'tabItem-container',
3288
- null,
3289
- containerCssClasses
3290
- ]);
3291
- const tabItemClasses = parseClasses(['tabItem', cssClasses]);
3292
3279
  const tabItemContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
3293
- tag: 'tabItem-container',
3294
- parsedClasses: tabItemContainerClasses
3280
+ tag: 'tab-item-container',
3281
+ parsedClasses: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : ''
3295
3282
  });
3296
- const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabItem', parsedClasses: tabItemClasses });
3297
- 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 },
3283
+ const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tab-item', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
3284
+ 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 },
3298
3285
  icon ? React.createElement(Icon, Object.assign({}, icon)) : null,
3299
- React.createElement("span", { "data-testid": tabItemTestId, className: tabItemClasses, style: style !== null && style !== void 0 ? style : undefined }, text)));
3286
+ React.createElement("span", { "data-testid": tabItemTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, text)));
3287
+ };
3288
+
3289
+ const LevelHeader = ({ testId = null, cssClasses = null, style = null, header, value }) => {
3290
+ const levelHeaderTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level-header', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
3291
+ return (React.createElement("section", { "data-testid": levelHeaderTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined },
3292
+ React.createElement("p", { className: 'heading' }, header),
3293
+ React.createElement("p", { className: 'title' }, value)));
3294
+ };
3295
+
3296
+ const generateKey = (max = 5000, min = 1) => {
3297
+ max = Math.floor(max);
3298
+ min = Math.ceil(min);
3299
+ const secureRandomNumbers = new Uint32Array(1);
3300
+ window.crypto.getRandomValues(secureRandomNumbers);
3301
+ return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
3300
3302
  };
3301
3303
 
3302
3304
  const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
@@ -3325,7 +3327,7 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
3325
3327
  const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
3326
3328
  !hasSelectedButton;
3327
3329
  const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
3328
- return (React.createElement(Button, Object.assign({ key: `button-group-item-${parseKey()}` }, buttonConfig)));
3330
+ return (React.createElement(Button, Object.assign({ key: `button-group-item-${generateKey()}` }, buttonConfig)));
3329
3331
  })));
3330
3332
  };
3331
3333
 
@@ -3353,7 +3355,7 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
3353
3355
  tag: 'columns',
3354
3356
  parsedClasses: columnGroupClasses
3355
3357
  });
3356
- 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))))));
3358
+ 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))))));
3357
3359
  };
3358
3360
 
3359
3361
  const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
@@ -3395,14 +3397,14 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
3395
3397
  ]
3396
3398
  });
3397
3399
  return (React.createElement("nav", { "data-testid": breadcrumbsContainerTestId, className: breadcrumbsContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3398
- 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)))))));
3400
+ 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)))))));
3399
3401
  };
3400
3402
 
3401
3403
  const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
3402
3404
  const isFirstItemInMenu = items.length > 1 && i === 0;
3403
- return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${parseKey()}-section` },
3404
- React.createElement(DropdownItem, { key: `dropdown-item-${parseKey()}-divider`, type: 'divider', itemText: 'divider' }),
3405
- React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))));
3405
+ return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${generateKey()}-section` },
3406
+ React.createElement(DropdownItem, { key: `dropdown-item-${generateKey()}-divider`, type: 'divider', itemText: 'divider' }),
3407
+ React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))));
3406
3408
  })));
3407
3409
  const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
3408
3410
  const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
@@ -3434,12 +3436,12 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
3434
3436
  const menuListTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu-list', parsedClasses: menuListClasses });
3435
3437
  return (React.createElement("ul", { "data-testid": menuListTestId, className: menuListClasses, style: style !== null && style !== void 0 ? style : undefined }, itemList.map(item => {
3436
3438
  if ('subListTitle' in item) {
3437
- return (React.createElement("li", { key: `sub-list-menu-item-${parseKey()}` },
3439
+ return (React.createElement("li", { key: `sub-list-menu-item-${generateKey()}` },
3438
3440
  React.createElement(MenuItem, Object.assign({}, item.subListTitle)),
3439
- React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${parseKey()}` }, subItem)))))));
3441
+ React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${generateKey()}` }, subItem)))))));
3440
3442
  }
3441
3443
  else {
3442
- return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${parseKey()}` }, item)));
3444
+ return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${generateKey()}` }, item)));
3443
3445
  }
3444
3446
  })));
3445
3447
  };
@@ -3447,9 +3449,9 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
3447
3449
  const Menu = ({ testId = null, cssClasses = null, style = null, menuSections }) => {
3448
3450
  const menuClasses = parseClasses(['menu', cssClasses]);
3449
3451
  const menuTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu', parsedClasses: menuClasses });
3450
- 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()}` },
3451
- React.createElement("p", { key: `section-label-${parseKey()}`, className: 'menu-label' }, section.label),
3452
- React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
3452
+ 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()}` },
3453
+ React.createElement("p", { key: `section-label-${generateKey()}`, className: 'menu-label' }, section.label),
3454
+ React.createElement(MenuList, { key: `section-menu-list-${generateKey()}`, itemList: section.itemList }))))));
3453
3455
  };
3454
3456
 
3455
3457
  const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
@@ -3474,7 +3476,7 @@ const renderPages = (pages, hasEllipsis, ellipsisItems) => {
3474
3476
  }
3475
3477
  if (!hasEllipsis ||
3476
3478
  (pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
3477
- return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${parseKey()}` }, pageItem)));
3479
+ return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${generateKey()}` }, pageItem)));
3478
3480
  }
3479
3481
  if (pageIndex === --length) {
3480
3482
  return (React.createElement(React.Fragment, { key: `last-pagination-item` },
@@ -3546,7 +3548,7 @@ const Tabs = ({ testId = null, cssClasses = null, style = null, tabs, alignment
3546
3548
  ]);
3547
3549
  const tabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabs', parsedClasses: tabsClasses });
3548
3550
  return (React.createElement("section", { "data-testid": tabsTestId, className: tabsClasses, style: style !== null && style !== void 0 ? style : undefined },
3549
- 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))))))));
3551
+ 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))))))));
3550
3552
  };
3551
3553
 
3552
3554
  const renderIcon = (iconConfig) => iconConfig ? React.createElement(Icon, Object.assign({}, iconConfig)) : null;
@@ -3581,10 +3583,68 @@ const InputControl = ({ testId = null, cssClasses = null, style = null, inputCon
3581
3583
  renderIcon(rightIcon ? Object.assign(Object.assign({}, rightIcon), { position: 'is-right' }) : undefined)));
3582
3584
  };
3583
3585
 
3586
+ const convertConfigToComponent = ({ type, props }, testId, cssClasses, style, blockText) => {
3587
+ switch (type) {
3588
+ case 'icon': {
3589
+ const panelBlockIconClasses = parseClasses(['panel-icon', cssClasses]);
3590
+ const panelBlockIconTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-icon', parsedClasses: panelBlockIconClasses });
3591
+ return (React.createElement(React.Fragment, null,
3592
+ React.createElement("span", { "data-testid": panelBlockIconTestId, className: panelBlockIconClasses, style: style !== null && style !== void 0 ? style : undefined },
3593
+ React.createElement(Icon, Object.assign({}, props))),
3594
+ blockText));
3595
+ }
3596
+ case 'control':
3597
+ return React.createElement(InputControl, Object.assign({}, props));
3598
+ case 'button':
3599
+ return React.createElement(Button, Object.assign({}, props));
3600
+ }
3601
+ };
3602
+ const PanelBlock = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, config, blockText = null, isActive = false, onClick }) => {
3603
+ const panelBlockLinkClasses = parseClasses([
3604
+ 'panel-block',
3605
+ isActive ? 'is-active' : null,
3606
+ containerCssClasses
3607
+ ]);
3608
+ const panelBlockLinkTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'panel-block', parsedClasses: panelBlockLinkClasses });
3609
+ 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)));
3610
+ };
3611
+
3612
+ const PanelTabs = ({ testId = null, cssClasses = null, style = null, tabList }) => {
3613
+ const panelTabsClasses = parseClasses(['panel-tabs', cssClasses]);
3614
+ const panelTabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-tabs', parsedClasses: panelTabsClasses });
3615
+ return (React.createElement("section", { "data-testid": panelTabsTestId, className: panelTabsClasses, style: style !== null && style !== void 0 ? style : undefined }, tabList.map(tabItem => {
3616
+ var _a;
3617
+ 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));
3618
+ })));
3619
+ };
3620
+
3621
+ const LevelItem = ({ testId = null, cssClasses = null, style = null, content, isCentered = false }) => {
3622
+ const levelItemClasses = parseClasses([
3623
+ 'level-item',
3624
+ isCentered ? 'has-text-centered' : null,
3625
+ cssClasses
3626
+ ]);
3627
+ const levelItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3628
+ tag: 'level-item',
3629
+ parsedClasses: levelItemClasses,
3630
+ rules: [
3631
+ {
3632
+ regExp: /is-|has-/gm,
3633
+ replacer: '-'
3634
+ },
3635
+ {
3636
+ regExp: /level-item/gm,
3637
+ replacer: ''
3638
+ }
3639
+ ]
3640
+ });
3641
+ return (React.createElement("section", { "data-testid": levelItemTestId, className: levelItemClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
3642
+ };
3643
+
3584
3644
  const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
3585
3645
  const renderFieldBody = (inputControlConfig, isGrouped) => {
3586
3646
  if (isGrouped) {
3587
- 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)));
3647
+ 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)));
3588
3648
  }
3589
3649
  else {
3590
3650
  return Array.isArray(inputControlConfig) ? (React.createElement(InputControl, Object.assign({}, inputControlConfig[0]))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
@@ -3624,6 +3684,30 @@ const FormField = ({ testId = null, cssClasses = null, style = null, labelText =
3624
3684
  renderFieldHelper(helperConfig)))));
3625
3685
  };
3626
3686
 
3687
+ const generateHeader = (headerText) => (React.createElement("p", { className: 'panel-heading' }, headerText));
3688
+ const Panel = ({ testId = null, cssClasses = null, style = null, headerText, panelTabs = null, blockList, color = null }) => {
3689
+ const panelClasses = parseClasses(['panel', color, cssClasses]);
3690
+ const panelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel', parsedClasses: panelClasses });
3691
+ return (React.createElement("article", { "data-testid": panelTestId, className: panelClasses, style: style !== null && style !== void 0 ? style : undefined },
3692
+ generateHeader(headerText),
3693
+ panelTabs ? React.createElement(PanelTabs, Object.assign({}, panelTabs)) : null,
3694
+ blockList.map(blockConfig => (React.createElement(PanelBlock, Object.assign({ key: `panel-block-item-${generateKey()}` }, blockConfig))))));
3695
+ };
3696
+
3697
+ const renderLevelSection = (levelItemList) => levelItemList.map(_levelItemConfig => (React.createElement(LevelItem, Object.assign({ key: `level-item-${generateKey()}` }, _levelItemConfig))));
3698
+ const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null, centerSide = null, rightSide = null, isMobile = false }) => {
3699
+ const levelClasses = parseClasses([
3700
+ 'level',
3701
+ isMobile ? 'is-mobile' : null,
3702
+ cssClasses
3703
+ ]);
3704
+ const levelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level', parsedClasses: levelClasses });
3705
+ return (React.createElement("nav", { "data-testid": levelTestId, className: levelClasses, style: style !== null && style !== void 0 ? style : undefined },
3706
+ leftSide ? (React.createElement("section", { className: 'level-left' }, renderLevelSection(leftSide))) : null,
3707
+ centerSide ? renderLevelSection(centerSide) : null,
3708
+ rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
3709
+ };
3710
+
3627
3711
  exports.Block = Block;
3628
3712
  exports.Box = Box;
3629
3713
  exports.BreadcrumbItem = BreadcrumbItem;
@@ -3643,6 +3727,9 @@ exports.Icon = Icon;
3643
3727
  exports.Image = Image;
3644
3728
  exports.Input = Input;
3645
3729
  exports.InputControl = InputControl;
3730
+ exports.Level = Level;
3731
+ exports.LevelHeader = LevelHeader;
3732
+ exports.LevelItem = LevelItem;
3646
3733
  exports.Menu = Menu;
3647
3734
  exports.MenuItem = MenuItem;
3648
3735
  exports.MenuList = MenuList;
@@ -3651,6 +3738,9 @@ exports.Modal = Modal;
3651
3738
  exports.Notification = Notification;
3652
3739
  exports.Pagination = Pagination;
3653
3740
  exports.PaginationItem = PaginationItem;
3741
+ exports.Panel = Panel;
3742
+ exports.PanelBlock = PanelBlock;
3743
+ exports.PanelTabs = PanelTabs;
3654
3744
  exports.ProgressBar = ProgressBar;
3655
3745
  exports.RadioButton = RadioButton;
3656
3746
  exports.Select = Select;