reactive-bulma 1.20.0 → 1.21.0

package/README.md

@@ -15,8 +15,8 @@ Component library based on React, Bulma, Typescript and Rollup
 
 ## Table of contents
 
-- [Status](#status)
 - [Purpose](#purpose)
+- [Status](#status)
 - [Dependencies](#dependencies)
 - [Quick start](#quick-start)
 - [Folder structure](#folder-structure)
@@ -29,12 +29,12 @@ Component library based on React, Bulma, Typescript and Rollup
 - [License](#license)
 
 ## Purpose
-After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/typescript-practice), I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.
+After studying [an Udemy course about Typescript](https://github.com/NicolasOmar/typescript-practice), I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.
 
 ## Status
 
-![Npm Version][badge-npm-version]
-![Npm Bundle Size][badge-npm-size]
+[![Npm Version][badge-npm-version]][link-npm]
+[![Npm Bundle Size][badge-npm-size]][link-npm]
 [![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
 [![Netlify Status][badge-netlify-status]][link-netlify-status]
 [![Code Coverage][badge-code-coverage]][link-code-coverage]
@@ -43,14 +43,15 @@ After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/
 [![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
 [![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
 [![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
-![GitHub Repo stars][badge-github-repo-stars]
-![GitHub commit activity][badge-github-commits]
-![GitHub last commit][badge-github-last-commit]
+[![GitHub Repo stars][badge-github-repo-stars]][link-github-stars]
+[![GitHub commit activity][badge-github-commits]][link-github-commit-activity]
+[![GitHub last commit][badge-github-last-commit]][link-github-commit-history]
 [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
 
 [badge-npm-version]: https://img.shields.io/github/package-json/v/nicolasomar/reactive-bulma?label=npm%20version&logo=npm&labelColor=535353&color=success&style=flat
 [badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
 [badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
+[link-npm]: https://www.npmjs.com/package/reactive-bulma
 [link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
 [badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
 [link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
@@ -66,24 +67,27 @@ After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/
 [badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
 [badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
 [badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
+[link-github-stars]: https://github.com/NicolasOmar/reactive-bulma/activity
+[link-github-commit-activity]: https://github.com/NicolasOmar/reactive-bulma/activity
+[link-github-commit-history]: https://github.com/NicolasOmar/reactive-bulma/commits/main
 [badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
 [link-semantic-commits]: https://github.com/semantic-release/semantic-release
 
 ## Dependencies
 
-![react dependency][badge-dependency-react]
-![bulma dependency][badge-dependency-bulma]
-![material design dependency][badge-dependency-material-design]
-![typescript dependency][badge-dependency-typescript]
-![rollup dependency][badge-dependency-rollup]
-![storybook dependency][badge-dependency-storybook]
-![semantic release dependency][badge-dependency-semantic-release]
-![babel dependency][badge-dependency-babel]
-![jest dependency][badge-dependency-jest]
-![react testing library dependency][badge-dependency-react-testing]
-![prettier dependency][badge-dependency-prettier]
-![eslint dependency][badge-dependency-eslint]
-![husky dependency][badge-dependency-husky]
+[![react dependency][badge-dependency-react]][link-package-dependencies]
+[![bulma dependency][badge-dependency-bulma]][link-package-dependencies]
+[![material design dependency][badge-dependency-material-design]][link-package-dependencies]
+[![typescript dependency][badge-dependency-typescript]][link-package-dependencies]
+[![rollup dependency][badge-dependency-rollup]][link-package-dependencies]
+[![storybook dependency][badge-dependency-storybook]][link-package-dependencies]
+[![semantic release dependency][badge-dependency-semantic-release]][link-package-dependencies]
+[![babel dependency][badge-dependency-babel]][link-package-dependencies]
+[![jest dependency][badge-dependency-jest]][link-package-dependencies]
+[![react testing library dependency][badge-dependency-react-testing]][link-package-dependencies]
+[![prettier dependency][badge-dependency-prettier]][link-package-dependencies]
+[![eslint dependency][badge-dependency-eslint]][link-package-dependencies]
+[![husky dependency][badge-dependency-husky]][link-package-dependencies]
 
 [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
 [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
@@ -98,6 +102,7 @@ After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/
 [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
 [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
 [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
+[link-package-dependencies]: https://github.com/NicolasOmar/reactive-bulma/blob/main/package.json
 
 ## Quick start
 

package/dist/cjs/index.js

@@ -2835,15 +2835,15 @@ var reactExports = react.exports;
 var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
 
 /**
- * @param { Array<string | null> } _classes Required. Array of classNames on `string` (or `null`) values
+ * @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
  */
 const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
 /**
  * @param { ParseTestIdProps } config Configuration object
- * @param { string } config.tag Required. Component tag used between to build the final testId string.
- * @param { string } config.parsedClasses Required. A single string of previously parsed classes what will be joined with `tag` property.
- * @param { { usedRegExp?: RegExp, regExpReplacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
+ * @param { string } config.tag `Required`. Component tag used between to build the final testId string.
+ * @param { string } config.parsedClasses `Required`. A single string of previously parsed classes what will be joined with `tag` property.
+ * @param { { regExp?: RegExp, replacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
  * @returns A single string product of merge all classNames, separated by `separator` value
  */
 const parseTestId = (config) => {
@@ -2851,7 +2851,7 @@ const parseTestId = (config) => {
     let fixedClassString = config.parsedClasses;
     if (config.rules) {
         for (const rule of config.rules) {
-            fixedClassString = fixedClassString.replace(rule.usedRegExp, rule.regExpReplacer);
+            fixedClassString = fixedClassString.replace(rule.regExp, rule.replacer);
         }
     }
     else {
@@ -2862,7 +2862,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,
@@ -2872,72 +2872,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),
@@ -2958,156 +2974,215 @@ const generateIconContainer = (icon, color) => {
         parsedClasses: (_a = color === null || color === void 0 ? void 0 : color.toString()) !== null && _a !== void 0 ? _a : '',
         rules: [
             {
-                usedRegExp: /has-text/gm,
-                regExpReplacer: ''
+                regExp: /has-text/gm,
+                replacer: ''
             }
         ]
     });
     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: [
             {
-                usedRegExp: /mdi-|mdi--/gm,
-                regExpReplacer: ''
+                regExp: /mdi-|mdi--/gm,
+                replacer: ''
             },
             {
-                usedRegExp: /mdi /gm,
-                regExpReplacer: '-'
+                regExp: /mdi /gm,
+                replacer: '-'
             }
         ],
         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: [
             {
-                usedRegExp: /textarea/gm,
-                regExpReplacer: ''
+                regExp: /textarea/gm,
+                replacer: ''
             },
             {
-                usedRegExp: /is-|has-/gm,
-                regExpReplacer: '-'
+                regExp: /is-|has-/gm,
+                replacer: '-'
             }
         ]
     });
-    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(), defaultChecked: 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,
-                regExpReplacer: '-has'
+                regExp: /has/gm,
+                replacer: '-has'
             },
             {
-                usedRegExp: /is|file/gm,
-                regExpReplacer: ''
+                regExp: /is|file/gm,
+                replacer: ''
             }
         ]
     });
-    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)),
             fileName ? React.createElement("span", { className: 'file-name' }, fileName) : null)));
 };
 
+const parseContentTestId = (content) => {
+    if (typeof content === 'string')
+        return `-${content === null || content === void 0 ? void 0 : content.toString()}`;
+    if (content !== null)
+        return '-with-component';
+    return '';
+};
+const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, content = null, isDisabled = null, onChange = null }) => {
+    const checkboxContainerClasses = parseClasses([
+        'checkbox',
+        containerCssClasses
+    ]);
+    const checkboxContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'checkbox-container',
+        parsedClasses: parseContentTestId(content)
+    });
+    const checkboxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'checkbox',
+        parsedClasses: parseContentTestId(content)
+    });
+    return (React.createElement("label", { "data-testid": checkboxContainerTestId, className: checkboxContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("input", { "data-testid": checkboxTestId, type: 'checkbox', className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }),
+        content));
+};
+
+// PARSERS
+const renderRadioButton = (config, index) => {
+    const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
+    const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
+    return (React.createElement("label", { key: index, className: 'radio' },
+        React.createElement("input", { "data-testid": radioButtonTestId, type: 'radio', style: style !== null && style !== void 0 ? style : undefined, name: name, defaultChecked: isChecked, disabled: isDisabled, onChange: onChange }),
+        label));
+};
+const RadioButton = ({ containerTestId = null, containerCssClasses = null, containerStyle = null, options, name, onChange = null }) => {
+    const radioButtonContainerClasses = parseClasses([
+        'control',
+        containerCssClasses
+    ]);
+    const radioButtonContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'container-',
+        parsedClasses: radioButtonContainerClasses
+    });
+    return (React.createElement("section", { "data-testid": radioButtonContainerTestId, className: radioButtonContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined }, options.map((_option, i) => renderRadioButton(Object.assign(Object.assign({}, _option), { name, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }), i))));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.Button = Button;
+exports.Checkbox = CheckBox;
 exports.Column = Column;
 exports.Delete = Delete;
 exports.File = File;
 exports.Icon = Icon;
 exports.Input = Input;
 exports.ProgressBar = ProgressBar;
+exports.RadioButton = RadioButton;
 exports.Select = Select;
 exports.Tag = Tag;
 exports.TextArea = TextArea;