reactive-bulma 1.20.0 → 1.20.1

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CheckboxProps } from '../../../interfaces/atomProps';
-declare const Checkbox: React.FC<CheckboxProps>;
-export default Checkbox;
+import { CheckBoxProps } from '../../../interfaces/atomProps';
+declare const CheckBox: React.FC<CheckBoxProps>;
+export default CheckBox;

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

@@ -3,7 +3,7 @@ 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
  */
-export declare const parseClasses: (_classes: Array<string | null>) => string;
+export declare const parseClasses: (_classes: Array<string | null | undefined>) => string;
 /**
  * @param { ParseTestIdProps } config Configuration object
  * @param { string } config.tag Required. Component tag used between to build the final testId string.

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

@@ -2,96 +2,169 @@ import React from 'react';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
 import { inputTypes } from '../types/domTypes';
 interface BasicProps {
+    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
     testId?: string;
+    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
+    containerTestId?: string;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
+    containerCssClasses?: string;
+    /** `Attribute` Custom styling applicable for specific scenarios */
     style?: React.CSSProperties;
+    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
+    containerStyle?: React.CSSProperties;
 }
 export interface ColumnProps extends BasicProps, 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[];
+    /** `Styling` Set column's size */
     size?: columnSizeType;
+    /** `Styling` Set column's offset (moving it as you set its size */
     offset?: columnOffsetType;
+    /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
 export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button'> {
+    /** `Attribute` The text will be shown in the `Button` */
     text?: string;
-    style?: React.CSSProperties;
+    /** `Attribute` Will disable the button */
+    isDisabled?: boolean;
+    /** `Styling` Color based on bulma's color tokens */
     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) */
     isInvertedColor?: boolean;
+    /** `Styling` Similar to `isInvertedColor`, but button's border will be colored */
     isOutlined?: boolean;
+    /** `Styling` Will add round borders to button's shape */
     isRounded?: boolean;
+    /** `Styling` Will change `text` for a animated spinner, but will remain clickeable */
     isLoading?: boolean;
-    isDisabled?: boolean;
+    /** `Styling` Similar to `isDisabled`, but will remove any color style */
     isStatic?: boolean;
+    /** `Styling` Set button's size on bulma's size tokens */
     size?: basicSizeType;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
+    /** `Attribute` Sets colored bar at the level against `max` value (`100` by default) */
     value?: number;
+    /** `Attribute` Sets the entire bar length comparing with current `value` */
     max?: number;
-    style?: React.CSSProperties;
+    /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
+    /** `Styling` Set progress bar's size */
     size?: basicSizeType;
+    /** `Styling` Will change `value` for a animated loading */
     isLoading?: boolean;
 }
 export interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
-    testId?: string;
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
+    children?: string | React.ReactElement | React.ReactElement[];
 }
 export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'span'> {
+    /** `Attribute` `Required` The text will be shown in the `Tag` */
     text: string;
+    /** `Attribute` Will add a delete button (for both single or addon cases) */
+    withDelete?: boolean;
+    /** `Attribute` Will add a second tag element (that could have its own text, color and delete) */
+    withAddon?: boolean;
+    /** `Attribute` The text will be shown in the tag's addon */
+    addonText?: string;
+    /** `Styling` Color based on bulma's color tokens */
     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?: Exclude<basicSizeType, 'is-normal'>;
-    withDelete?: boolean;
-    withAddon?: boolean;
-    addonText?: string;
+    /** `Styling` Color on tag's addon based on bulma's color tokens */
     addonColor?: basicColorType;
+    /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
 export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'figure'> {
+    /** `Attribute` `Required` The image source that will be shown */
     src: string;
+    /** `Styling` Will add round borders to image's shape */
     fixedSize?: fixedImageSizeType;
+    /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
     isRounded?: boolean;
 }
 export interface BoxProps extends BasicProps, 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[];
 }
 export interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
+    /** `Attribute` Sets the text you want to show */
     text: string;
+    /** `Styling` Set text size */
     size?: titleSizeType;
-    prop: 'title' | 'subtitle';
+    /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
+    type: 'title' | 'subtitle';
+    /** `Styling` Set text spacing at default or maximun length */
     isSpaced?: boolean;
 }
 export interface TitleProps {
+    /** `Attribute` Main title configuration object */
     main?: TitleSectionProps;
+    /** `Attribute` Subtitle title configuration object */
     secondary?: TitleSectionProps;
 }
 export interface IconProps extends BasicProps {
+    /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
     iconLabel: string;
+    /** `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;
+    /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
+    /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
+    /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
 export interface InputProps extends BasicProps {
+    /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
+    /** `Attribute` The value that will be shown on the input */
     text?: string;
+    /** `Attribute` Will disable the input */
     isDisabled?: boolean;
+    /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
     isReadonly?: boolean;
+    /** `Styling` Color based on bulma's text color tokens */
     color?: basicColorType;
+    /** `Styling` Set input's size */
     size?: basicSizeType;
+    /** `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 */
     isHovered?: boolean;
+    /** `Styling` Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
+    /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
 export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
+    /** `Attribute` Text area's columns value that sets its width */
     cols?: number;
+    /** `Attribute` Text area's rows value that sets its height */
     rows?: number;
+    /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
     isFixedSize?: boolean;
 }
 export interface DeleteProps extends BasicProps {
+    /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 export interface SelectOption {
@@ -100,30 +173,61 @@ export interface SelectOption {
     selected?: boolean;
 }
 export interface SelectProps extends BasicProps {
+    /** `Attribute` Indicates the options contained on the select */
     options?: SelectOption[];
+    /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
     showOptions?: number;
+    /** `Attribute` Will allow multiple selection */
     isMultiple?: boolean;
+    /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
+    /** `Styling` Set select's size */
     size?: basicSizeType;
+    /** `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 */
     isHovered?: boolean;
+    /** `Styling`Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 export interface FileProps extends BasicProps {
+    /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
+    /** `Attribute` The icon displayed in file's button" */
     uploadIcon?: IconProps;
+    /** `Attribute` The text displayed in file's button */
     uploadText?: string;
+    /** `Styling` Changes button's position to its right */
     buttonOnRight?: boolean;
+    /** `Styling` The whole container (button and file name) will occupy its parent container width */
     isFullWidth?: boolean;
+    /** `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;
+    /** `Styling` Set button's size */
     size?: basicSizeType;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface CheckboxProps extends BasicProps {
+export interface CheckBoxProps extends BasicProps {
+    /** `Attribute` Sets checkbox's text that will be shown next to its control */
     content?: string | React.ReactElement;
+    /** `Attribute` Will disable the checkbox */
+    isDisabled?: boolean;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
+}
+interface RadioButtonItemProps {
+    label: string;
+    name: string;
+    isChecked?: boolean;
     isDisabled?: boolean;
+}
+export interface RadioButtonProps extends BasicProps {
+    options: RadioButtonItemProps[];
     onChange?: () => void;
 }
 export {};

package/dist/esm/index.js

@@ -2860,7 +2860,7 @@ const parseTestId = (config) => {
     return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
 };
 
-const Button = ({ text = null, type = 'button', testId = null, style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
+const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, size = null, onClick = null }) => {
     const buttonClasses = parseClasses([
         'button',
         color,
@@ -2870,72 +2870,88 @@ const Button = ({ text = null, type = 'button', testId = null, style = null, col
         isRounded ? 'is-rounded' : null,
         isLoading ? 'is-loading' : null,
         isStatic ? 'is-static' : null,
-        size
+        size,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
-    return (React.createElement("button", { "data-testid": _testId, type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+    const buttonTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
+    return (React.createElement("button", { "data-testid": buttonTestId, type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
 };
 
-const Column = ({ testId = null, style = null, size = null, offset = null, isNarrow = false, children = null }) => {
+const Column = ({ testId = null, cssClasses = null, style = null, children = null, size = null, offset = null, isNarrow = false }) => {
     const columnClasses = parseClasses([
         'column',
         size,
         offset,
-        isNarrow ? 'is-narrow' : null
+        isNarrow ? 'is-narrow' : null,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
-    return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
+    const columnTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
+    return (React.createElement("section", { "data-testid": columnTestId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
 };
 
-const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color = 'is-primary', size = null, isLoading = false }) => {
+const ProgressBar = ({ testId = null, cssClasses = null, style = null, value = 0, max = 100, color = 'is-primary', size = null, isLoading = false }) => {
     const fixedValue = value > max || value < 0 ? 0 : value;
-    const progressClasses = parseClasses(['progress', color, size]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const progressClasses = parseClasses([
+        'progress',
+        color,
+        size,
+        cssClasses
+    ]);
+    const progressTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'progress',
         parsedClasses: progressClasses
     });
-    return (React.createElement("progress", { "data-testid": _testId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
+    return (React.createElement("progress", { "data-testid": progressTestId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
 };
 
-const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
+const Block = ({ testId = 'test-block', cssClasses = 'block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: cssClasses, style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
-const Tag = ({ text, testId = null, style = null, color = null, isLight = null, isRounded = null, size = null, withDelete = false, withAddon = false, addonText = null, addonColor = null, onDeleteClick = null }) => {
-    const tagLabel = withAddon ? 'tags' : 'tag';
+const Tag = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, text, withDelete = false, withAddon = false, addonText = null, color = null, isLight = null, isRounded = null, size = null, addonColor = null, onDeleteClick = null }) => {
+    const tagContainerClasses = parseClasses([
+        'tags',
+        'has-addons',
+        size ? size.replace('is-', 'are-') : null,
+        containerCssClasses
+    ]);
     const tagClasses = parseClasses([
         'tag',
         color,
         isLight && !withAddon ? 'is-light' : null,
         isRounded && !withAddon ? 'is-rounded' : null,
-        size
-    ]);
-    const tagsWrapperClasses = parseClasses([
-        'tags',
-        'has-addons',
-        size ? size.replace('is-', 'are-') : null
+        size,
+        cssClasses
     ]);
-    const addonTagClasses = parseClasses(['tag', addonColor]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const tagAddonClasses = parseClasses(['tag', addonColor]);
+    const tagLabel = withAddon ? 'tags' : 'tag';
+    const tagTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: tagLabel,
-        parsedClasses: withAddon ? tagsWrapperClasses : tagClasses,
+        parsedClasses: withAddon ? tagContainerClasses : tagClasses,
         separator: withAddon ? '-' : ''
     });
-    return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagsWrapperClasses },
-        React.createElement("span", { className: tagClasses }, text),
-        withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
+    const tagContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${tagTestId}-container`;
+    const tagDeleteTestId = `${tagTestId}-delete`;
+    return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
+        React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
+        withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
         text,
-        withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
+        withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
 };
 
-const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'box', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
+const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: cssClasses, style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
 const renderTitleSection = (section) => {
-    var _a, _b, _c;
+    var _a, _b;
+    if (!section)
+        return null;
+    const { type, size, isSpaced, cssClasses } = section;
     const sectionClasses = parseClasses([
-        section === null || section === void 0 ? void 0 : section.prop,
-        (_a = section === null || section === void 0 ? void 0 : section.size) !== null && _a !== void 0 ? _a : 'is-6',
-        (section === null || section === void 0 ? void 0 : section.prop) === 'title' && (section === null || section === void 0 ? void 0 : section.isSpaced) ? 'is-spaced' : null
+        type,
+        size !== null && size !== void 0 ? size : null,
+        type === 'title' && isSpaced ? 'is-spaced' : null,
+        cssClasses
     ]);
-    return section ? (React.createElement("p", { "data-testid": (_b = section === null || section === void 0 ? void 0 : section.testId) !== null && _b !== void 0 ? _b : `${section === null || section === void 0 ? void 0 : section.prop}-test`, className: sectionClasses, style: (_c = section.style) !== null && _c !== void 0 ? _c : undefined }, section === null || section === void 0 ? void 0 : section.text)) : null;
+    const sectionTestId = (_a = section === null || section === void 0 ? void 0 : section.testId) !== null && _a !== void 0 ? _a : `${section === null || section === void 0 ? void 0 : section.type}-test`;
+    return (React.createElement("p", { "data-testid": sectionTestId, className: sectionClasses, style: (_b = section === null || section === void 0 ? void 0 : section.style) !== null && _b !== void 0 ? _b : undefined }, section === null || section === void 0 ? void 0 : section.text));
 };
 const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
     renderTitleSection(main),
@@ -2963,16 +2979,22 @@ const generateIconContainer = (icon, color) => {
     });
     return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
 };
-const Icon = ({ iconLabel, testId = null, text = null, style = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
-    const iconSpanClasses = parseClasses(['icon', color, size]);
+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 iconContainerClasses = parseClasses([
+        'icon',
+        color,
+        size,
+        containerCssClasses
+    ]);
     const iconClasses = parseClasses([
         'mdi',
         `mdi-${iconLabel}`,
         colorMode ? `mdi-${colorMode}` : null,
         isSpinning ? 'mdi-spin' : null,
-        size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px'
+        size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px',
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const iconContainertestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
         tag: 'icon',
         parsedClasses: iconClasses,
         rules: [
@@ -2987,39 +3009,41 @@ const Icon = ({ iconLabel, testId = null, text = null, style = null, color = nul
         ],
         separator: '-'
     });
-    const _internalTestId = `${_testId}-i`;
-    const iconComponent = (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: iconSpanClasses },
-        React.createElement("i", { "data-testid": _internalTestId, className: iconClasses }),
+    const iconTestId = testId !== null && testId !== void 0 ? testId : `${iconContainertestId}-i`;
+    const iconComponent = (React.createElement("span", { "data-testid": iconContainertestId, className: iconContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("i", { "data-testid": iconTestId, className: iconClasses, style: style !== null && style !== void 0 ? style : undefined }),
         text ? React.createElement("span", null, text) : null));
     return text ? generateIconContainer(iconComponent, color) : iconComponent;
 };
 
-const Input = ({ testId = null, type, text = null, isDisabled = false, isReadonly = false, style = null, 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, isDisabled = false, isReadonly = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
     const inputClasses = parseClasses([
         'input',
         color,
         size,
         isRounded ? 'is-rounded' : null,
         isHovered ? 'is-hovered' : null,
-        isFocused ? 'is-focused' : null
+        isFocused ? 'is-focused' : null,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const inputTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'input',
         parsedClasses: inputClasses
     });
-    return (React.createElement("input", { "data-testid": _testId, type: type, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: inputClasses, 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, 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, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false, style = null, color = null, size = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+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 }) => {
     const textAreaClasses = parseClasses([
         'textarea',
         color,
         size,
         isHovered ? 'is-hovered' : null,
         isFocused ? 'is-focused' : null,
-        isFixedSize ? 'has-fixed-size' : null
+        isFixedSize ? 'has-fixed-size' : null,
+        cssClasses
     ]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const textAreaTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'textarea',
         parsedClasses: textAreaClasses,
         rules: [
@@ -3033,49 +3057,52 @@ const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisa
             }
         ]
     });
-    return (React.createElement("textarea", { "data-testid": _testId, defaultValue: text !== null && text !== void 0 ? text : undefined, cols: cols !== null && cols !== void 0 ? cols : undefined, rows: rows !== null && rows !== void 0 ? rows : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: textAreaClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+    return (React.createElement("textarea", { "data-testid": textAreaTestId, defaultValue: text !== null && text !== void 0 ? text : undefined, cols: cols !== null && cols !== void 0 ? cols : undefined, rows: rows !== null && rows !== void 0 ? rows : undefined, disabled: isDisabled, readOnly: isReadonly, className: textAreaClasses, 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 Delete = ({ testId = null, style = null, size = null, onClick = null }) => {
-    const deleteClasses = parseClasses(['delete', size]);
-    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+const Delete = ({ testId = null, cssClasses = null, style = null, size = null, onClick = null }) => {
+    const deleteClasses = parseClasses(['delete', size, cssClasses]);
+    const deleteTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'delete',
         parsedClasses: deleteClasses
     });
-    return (React.createElement("button", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: deleteClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }));
+    return (React.createElement("button", { "data-testid": deleteTestId, className: deleteClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }));
 };
 
-const Select = ({ testId = null, showOptions = 1, options = [], isMultiple = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null }) => {
-    const selectClasses = parseClasses([
+const Select = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, options = [], showOptions = 1, isMultiple = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null }) => {
+    const containerSelectClasses = parseClasses([
         'select',
         color,
         size,
         isMultiple ? 'is-multiple' : null,
         isRounded ? 'is-rounded' : null,
         isHovered ? 'is-hovered' : null,
-        isFocused ? 'is-focused' : null
+        isFocused ? 'is-focused' : null,
+        containerCssClasses
     ]);
     const selectTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
         tag: 'select',
-        parsedClasses: selectClasses
+        parsedClasses: containerSelectClasses
     });
-    return (React.createElement("section", { "data-testid": `${selectTestId}-container`, className: selectClasses },
-        React.createElement("select", { multiple: isMultiple, size: showOptions, "data-testid": selectTestId }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), selected: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
+    const containerSelectTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${selectTestId}-container`;
+    return (React.createElement("section", { "data-testid": containerSelectTestId, className: containerSelectClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("select", { "data-testid": selectTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, multiple: isMultiple, size: showOptions }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), selected: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
 };
 
-const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', style = null, buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
-    const fileClasses = parseClasses([
+const File = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
+    const fileContainerClasses = parseClasses([
         'file',
         fileName ? 'has-name' : null,
         buttonOnRight ? 'is-right' : null,
         isFullWidth ? 'is-fullwidth' : null,
         isBoxed ? 'is-boxed' : null,
         color,
-        size
+        size,
+        containerCssClasses
     ]);
-    const fileTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+    const fileContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
         tag: 'file',
-        parsedClasses: fileClasses,
+        parsedClasses: fileContainerClasses,
         rules: [
             {
                 usedRegExp: /has/gm,
@@ -3087,10 +3114,11 @@ const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'uploa
             }
         ]
     });
-    const fileInputTestId = `${fileTestId}-input`;
-    return (React.createElement("section", { "data-testid": fileTestId, className: fileClasses, style: style !== null && style !== void 0 ? style : undefined },
+    const fileInputClasses = cssClasses !== null && cssClasses !== void 0 ? cssClasses : 'file-input';
+    const fileInputTestId = testId !== null && testId !== void 0 ? testId : `${fileContainerTestId}-input`;
+    return (React.createElement("section", { "data-testid": fileContainerTestId, className: fileContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
         React.createElement("label", { className: 'file-label' },
-            React.createElement("input", { "data-testid": fileInputTestId, className: 'file-input', type: 'file', name: 'resume', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
+            React.createElement("input", { "data-testid": fileInputTestId, type: 'file', name: 'resume', className: fileInputClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
             React.createElement("span", { className: 'file-cta' },
                 uploadIcon ? React.createElement(Icon, Object.assign({}, uploadIcon)) : null,
                 React.createElement("span", { className: 'file-label' }, uploadText)),