reactive-bulma 2.13.0 → 2.15.0

package/dist/cjs/types/components/atoms/Tile/index.d.ts

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

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

@@ -21,3 +21,4 @@ export { default as Image } from './Image';
 export { default as PaginationItem } from './PaginationItem';
 export { default as TabItem } from './TabItem';
 export { default as LevelHeader } from './LevelHeader';
+export { default as Tile } from './Tile';

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

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

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

@@ -13,3 +13,4 @@ export { default as InputControl } from './InputControl';
 export { default as PanelBlock } from './PanelBlock';
 export { default as PanelTabs } from './PanelTabs';
 export { default as LevelItem } from '../molecules/LevelItem';
+export { default as TileBox } from './TileBox';

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

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

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

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

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

@@ -1,3 +1,5 @@
 export { default as FormField } from './FormField';
 export { default as Panel } from './Panel';
 export { default as Level } from './Level';
+export { default as Hero } from './Hero';
+export { default as TileGroup } from './TileGroup';

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

@@ -1,14 +1,14 @@
 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, InputType } from '../types/domTypes';
+import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType, CommonSizeType } from '../types/styleTypes';
+import { DropdownItemType, InputType, ChildrenType, TileContextType } 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[];
+    children?: ChildrenType;
     /** `Styling` Set column's size */
-    size?: columnSizeType;
+    size?: ColumnSizeType;
     /** `Styling` Set column's offset (moving it as you set its size */
-    offset?: columnOffsetType;
+    offset?: ColumnOffsetType;
     /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
@@ -18,7 +18,7 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
     /** `Attribute` Will disable the button */
     isDisabled?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Will adjust the selected color with a ligther style */
     isLightColor?: boolean;
     /** `Styling` Will invert button's colors (typography in color and background in white or black) */
@@ -34,7 +34,7 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
     /** `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?: elementSizeType;
+    size?: ElementSizeType;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
@@ -44,15 +44,15 @@ export interface ProgressBarProps extends ElementProps, React.ComponentPropsWith
     /** `Attribute` Sets the entire bar length comparing with current `value` */
     max?: number;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set progress bar's size */
-    size?: elementSizeType;
+    size?: ElementSizeType;
     /** `Styling` Will change `value` for an animated loading */
     isLoading?: boolean;
 }
 export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: ChildrenType;
 }
 export interface TagProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'span'> {
     /** `Attribute` `Required` The text will be shown in the `Tag` */
@@ -64,15 +64,15 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
     /** `Attribute` The text will be shown in the tag's addon */
     addonText?: string;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Will adjust the selected color with a ligther style */
     isLight?: boolean;
     /** `Styling` Will add round borders to tag's shape */
     isRounded?: boolean;
     /** `Styling` Set tag's size */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Color on tag's addon based on bulma's color tokens */
-    addonColor?: basicColorType;
+    addonColor?: BasicColorType;
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
@@ -82,19 +82,19 @@ export interface ImageProps extends ComposedElementProps, React.ComponentPropsWi
     /** `Attribute` A description text for the image, useful for accessibility purposes */
     alt?: string;
     /** `Styling` Will add round borders to image's shape */
-    fixedSize?: fixedImageSizeType;
+    fixedSize?: FixedImageSizeType;
     /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
     isRounded?: boolean;
 }
 export interface BoxProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: ChildrenType;
 }
 export interface TitleSectionProps extends ElementProps, React.ComponentPropsWithoutRef<'p'> {
     /** `Attribute` Sets the text you want to show */
     text: string;
     /** `Styling` Set text size */
-    size?: titleSizeType;
+    size?: TitleSizeType;
     /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
     type: 'title' | 'subtitle';
     /** `Styling` Set text spacing at default or maximun length */
@@ -112,15 +112,15 @@ export interface IconProps extends ComposedElementProps {
     /** `Attribute` Sets the text you want to show next to the icon */
     text?: string;
     /** `Styling` Color based on bulma's text color tokens */
-    color?: textColorType;
+    color?: TextColorType;
     /** `Styling` Set icons's size */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
-    colorMode?: iconColorModeType;
+    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;
+    position?: RightLeftAlignType;
 }
 export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
@@ -134,9 +134,9 @@ export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
     isReadonly?: boolean;
     /** `Styling` Color based on bulma's text color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set input's size */
-    size?: sizeWithoutNormalType;
+    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 */
@@ -156,7 +156,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
 }
 export interface SelectOption {
     id: string | number;
@@ -171,9 +171,9 @@ export interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` Will allow multiple selection */
     isMultiple?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set select's size */
-    size?: elementSizeType;
+    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 */
@@ -195,13 +195,13 @@ export interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Changes styling to a box style, making the button bigger and file name's position below the button */
     isBoxed?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set button's size */
-    size?: elementSizeType;
+    size?: ElementSizeType;
 }
 export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
-    content?: string | React.ReactElement | React.ReactElement[];
+    content?: ChildrenType;
     /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
@@ -277,3 +277,15 @@ export interface LevelHeaderProps extends ElementProps {
     /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
     value: string | number;
 }
+export interface TileProps extends ElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the tile */
+    children?: ChildrenType;
+    /** `Attribute` Indicates its hierarchy level based on [Bulma documantation](https://bulma.io/documentation/layout/tiles/#nesting-requirements). Selection any level besides `is-child` will invalidate any `color` you select */
+    context?: TileContextType;
+    /** `Styling` Set tile's size */
+    size?: CommonSizeType;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: BasicColorType;
+    /** `Styling` Used for hierarchy level as ancestor or parent. It selects its children in a vertical format (like a column) */
+    isVertical?: boolean;
+}

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 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';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
+import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType } from '../types/styleTypes';
+import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -23,15 +22,15 @@ export interface ColumnGroupProps extends ElementProps {
     /** `Styling` Will center the list of columns horizontally */
     isHorizontallyCentered?: boolean;
     /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
-    gap?: columnGapType | null;
+    gap?: ColumnGapType | null;
 }
 export interface NotificationProps extends ElementProps {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: ChildrenType;
     /** `Atribute` Includes a `Delete` config object that will be shown */
     deleteButton?: DeleteProps;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Will adjust the selected color with a ligther style */
     isLightColor?: boolean;
 }
@@ -39,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?: rightCenteredAlignType | null;
+    alignment?: RightCenteredAlignType | null;
     /** `Styling` Will adjust element position on screen */
-    separator?: breadcrumbSeparatorType | null;
+    separator?: BreadcrumbSeparatorType | null;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
 }
 export interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -61,9 +60,9 @@ export interface MessageProps extends ElementProps {
     /** `Atribute` Includes a `Delete` config object that will be shown */
     deleteButton?: DeleteProps;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -106,13 +105,13 @@ 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?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Will adjust the pages position on screen */
-    alignment?: rightCenteredAlignType | 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 */
-    children?: string | React.ReactElement | React.ReactElement[] | null;
+    children?: ChildrenType | null;
     /** `Function` Custom function related to the modal's close button to inject custom code if needed */
     onCloseClick?: () => void;
 }
@@ -120,11 +119,11 @@ 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?: rightCenteredAlignType;
+    alignment?: RightCenteredAlignType;
     /** `Styling` Set tab's size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Set tab's size on bulma's size tokens */
-    format?: tabsFormatType;
+    format?: TabsFormatType;
     /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
     isRounded?: boolean;
     /** `Styling` The whole container will occupy its parent container width */
@@ -138,7 +137,7 @@ export interface InputControlProps extends ElementProps {
     /** `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;
+    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 */
@@ -170,8 +169,10 @@ export interface PanelTabsProps extends ElementProps {
 }
 export interface LevelItemProps extends ElementProps {
     /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
-    content: string | React.ReactElement;
+    content: SingleChildType;
     /** `Styling` Centers item's content horizontally */
     isCentered?: boolean;
 }
+export interface TileBoxProps extends TileProps {
+}
 export {};

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

@@ -1,9 +1,11 @@
 import { ElementProps } from './commonProps';
 import { InputControlProps, LevelItemProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
-import { basicColorType } from '../types/styleTypes';
+import { BasicColorType, SizeWithoutNormalType } from '../types/styleTypes';
+import { ChildrenType } from '../types/domTypes';
+import { TileProps } from './atomProps';
 export interface FormFieldHelperProps {
     text?: string;
-    color?: basicColorType;
+    color?: BasicColorType;
 }
 export interface FormFieldProps extends ElementProps {
     /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
@@ -25,15 +27,31 @@ export interface PanelProps extends ElementProps {
     /** `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;
+    color?: BasicColorType;
 }
 export interface LevelProps extends ElementProps {
-    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's left side */
+    /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's left side */
     leftSide?: LevelItemProps[];
-    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's center */
+    /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's center */
     centerSide?: LevelItemProps[];
-    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's right side */
+    /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's right side */
     rightSide?: LevelItemProps[];
     /** `Styling` Will adjust the navigator on horizontal on mobile as well */
     isMobile?: boolean;
 }
+export interface HeroProps extends ElementProps {
+    /** `Attribute` Designated section for hero's header, it will be visible only if container's `size` is setted to `is-fullheight` */
+    header?: ChildrenType;
+    /** `Attribute` `Required` Designated section for hero's body */
+    body: ChildrenType;
+    /** `Attribute` Designated section for hero's footer, it will be visible only if container's `size` is setted to `is-fullheight` */
+    footer?: ChildrenType;
+    /** `Styling` Set hero's size */
+    size?: SizeWithoutNormalType | 'is-halfheight' | 'is-fullheight';
+    /** `Styling` Color based on bulma's text color tokens */
+    color?: BasicColorType;
+}
+export interface TileGroupProps extends ElementProps, Pick<TileProps, 'context' | 'isVertical' | 'size'> {
+    /** `Attribute` `Required` A list of `Title` configurations that will be displayed in a grid mode on the screen */
+    groupConfig: TileProps[];
+}

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

@@ -1,4 +1,13 @@
+import React from 'react';
 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';
+export type ChildrenType = string | React.ReactElement | React.ReactElement[];
+export type SingleChildType = Exclude<ChildrenType, React.ReactElement[]>;
+export declare enum IconSizeEnum {
+    'is-small' = 24,
+    'is-medium' = 36,
+    'is-large' = 48
+}
+export type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';

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

@@ -1,15 +1,17 @@
-export type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
-export type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
-export type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
-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 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' | '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';
+export type CommonSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
+export type AbstractSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth';
+export type ColumnSizeType = CommonSizeType | AbstractSizeType;
+export type ColumnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
+export type TitleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
+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 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' | '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

@@ -3243,7 +3243,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, alt = null, fixedSize = 'is-1by1', isRounded = false }) => {
+const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, alt = null, fixedSize = null, isRounded = false }) => {
     const imageContainerClasses = parseClasses([
         'image',
         fixedSize,
@@ -3291,6 +3291,32 @@ const LevelHeader = ({ testId = null, cssClasses = null, style = null, header, v
         React.createElement("p", { className: 'title' }, value)));
 };
 
+const Tile = ({ testId = null, cssClasses = null, style = null, children, context = null, size = null, color = null, isVertical = false }) => {
+    const tileClasses = parseClasses([
+        'tile',
+        context,
+        size,
+        color ? `notification ${color}` : null,
+        isVertical ? 'is-vertical' : null,
+        cssClasses
+    ]);
+    const tileTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'tile',
+        parsedClasses: tileClasses,
+        rules: [
+            {
+                regExp: /notification |tile/gm,
+                replacer: ''
+            },
+            {
+                regExp: /is-/gm,
+                replacer: '-'
+            }
+        ]
+    });
+    return (React.createElement("section", { "data-testid": tileTestId, className: tileClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
+};
+
 const generateKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
@@ -3639,6 +3665,32 @@ const LevelItem = ({ testId = null, cssClasses = null, style = null, content, is
     return (React.createElement("section", { "data-testid": levelItemTestId, className: levelItemClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
 };
 
+const TileBox = ({ testId = null, cssClasses = 'box', style = null, children = null, context = 'is-child', size, color, isVertical }) => {
+    const tileBoxClasses = parseClasses([
+        'tileBox',
+        context,
+        size,
+        color ? `notification ${color}` : null,
+        isVertical ? 'is-vertical' : null,
+        cssClasses
+    ]);
+    const tileBoxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'tileBox',
+        parsedClasses: tileBoxClasses,
+        rules: [
+            {
+                regExp: /notification |tileBox/gm,
+                replacer: ''
+            },
+            {
+                regExp: /is-/gm,
+                replacer: '-'
+            }
+        ]
+    });
+    return (React.createElement(Tile, { testId: tileBoxTestId, cssClasses: cssClasses, style: style !== null && style !== void 0 ? style : undefined, isVertical: isVertical, context: context, size: size, color: color }, children !== null && children !== void 0 ? children : undefined));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
@@ -3706,5 +3758,39 @@ const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null
         rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
 };
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
+const Hero = ({ testId = null, cssClasses = null, style = null, header = null, body, footer = null, color = null, size = null }) => {
+    const heroClasses = parseClasses(['hero', color, size, cssClasses]);
+    const heroTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'hero', parsedClasses: heroClasses });
+    return (React.createElement("section", { "data-testid": heroTestId, className: heroClasses, style: style !== null && style !== void 0 ? style : undefined },
+        size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-head`, className: 'hero-head' }, header)) : null,
+        React.createElement("section", { "data-testid": `${heroTestId}-body`, className: 'hero-body' }, body),
+        size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-foot`, className: 'hero-foot' }, footer)) : null));
+};
+
+const TileGroup = ({ testId = null, cssClasses = null, style = null, context = 'is-ancestor', size = null, isVertical = false, groupConfig }) => {
+    const tileGroupClasses = parseClasses([
+        'tileGroup',
+        context,
+        size,
+        isVertical ? 'is-vertical' : null,
+        cssClasses
+    ]);
+    const tileBoxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'tileGroup',
+        parsedClasses: tileGroupClasses,
+        rules: [
+            {
+                regExp: /tileGroup/gm,
+                replacer: ''
+            },
+            {
+                regExp: /is-/gm,
+                replacer: '-'
+            }
+        ]
+    });
+    return (React.createElement(Tile, { testId: tileBoxTestId, cssClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, context: context, size: size !== null && size !== void 0 ? size : undefined, isVertical: isVertical }, groupConfig.map(tileConfig => (React.createElement(Tile, Object.assign({ key: `tile-item-${generateKey()}` }, tileConfig))))));
+};
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
 //# sourceMappingURL=index.js.map