@allxsmith/bestax-bulma 1.1.1 → 2.0.1

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef, useEffect, createContext, useContext, forwardRef } from 'react';
+import React, { createContext, useContext, useMemo, useState, useRef, useEffect, forwardRef } from 'react';
 
 var jsxRuntime = {exports: {}};
 
@@ -427,6 +427,20 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+const ConfigContext = createContext({});
+const useConfig = () => useContext(ConfigContext);
+const ConfigProvider = ({ classPrefix, children, }) => {
+    return (jsxRuntimeExports.jsx(ConfigContext.Provider, { value: { classPrefix }, children: children }));
+};
+const useClassPrefix = () => {
+    const { classPrefix } = useConfig();
+    return classPrefix || '';
+};
+const usePrefixedClass = () => {
+    const { classPrefix } = useConfig();
+    return (className) => classPrefix ? `${classPrefix}${className}` : className;
+};
+
 function classNames(...args) {
     const classSet = new Set();
     function process(item) {
@@ -459,6 +473,55 @@ function classNames(...args) {
     }
     return Array.from(classSet).join(' ');
 }
+function createPrefixedClassNames(classPrefix) {
+    return function prefixedClassNames(...args) {
+        const classSet = new Set();
+        function process(item) {
+            if (item === undefined ||
+                item === null ||
+                item === false ||
+                item === '') {
+                return;
+            }
+            if (typeof item === 'string' || typeof item === 'number') {
+                for (const cls of String(item).split(/\s+/)) {
+                    if (cls) {
+                        classSet.add(`${classPrefix}${cls}`);
+                    }
+                }
+            }
+            else if (Array.isArray(item)) {
+                for (const sub of item)
+                    process(sub);
+            }
+            else if (typeof item === 'object') {
+                for (const key in item) {
+                    if (Object.prototype.hasOwnProperty.call(item, key) && item[key]) {
+                        for (const cls of key.split(/\s+/)) {
+                            if (cls) {
+                                classSet.add(`${classPrefix}${cls}`);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        for (const arg of args) {
+            process(arg);
+        }
+        return Array.from(classSet).join(' ');
+    };
+}
+function prefixedClassNames(prefix, ...args) {
+    if (!prefix) {
+        return classNames(...args);
+    }
+    return createPrefixedClassNames(prefix)(...args);
+}
+function usePrefixedClassNames(...args) {
+    const { classPrefix } = useConfig();
+    return prefixedClassNames(classPrefix, ...args);
+}
 
 const validColors = [
     'primary',
@@ -583,7 +646,7 @@ const validAlignSelfs = [
     'baseline',
     'stretch',
 ];
-const validFlexGrowShrink = ['0', '1'];
+const validFlexGrowShrink = ['0', '1', '2', '3', '4', '5'];
 const validViewports = [
     'mobile',
     'tablet',
@@ -592,15 +655,19 @@ const validViewports = [
     'fullhd',
 ];
 const useBulmaClasses = (props) => {
-    const { color, backgroundColor, colorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, radius, shadow, responsive, viewport, skeleton, ...rest } = props;
+    const { classPrefix } = useConfig();
+    const { color, backgroundColor, colorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, skeleton, ...rest } = props;
     const bulmaHelperClasses = useMemo(() => {
         const classes = [];
+        const addPrefixedClass = (className) => {
+            classes.push(classPrefix ? `${classPrefix}${className}` : className);
+        };
         const addClass = (prefix, value, validValues) => {
             if (value && (!validValues.length || validValues.includes(value))) {
                 const className = viewport && validViewports.includes(viewport)
                     ? `${prefix}-${value}-${viewport}`
                     : `${prefix}-${value}`;
-                classes.push(className);
+                addPrefixedClass(className);
             }
         };
         const addColorClass = (prefix, value, shade) => {
@@ -610,7 +677,7 @@ const useBulmaClasses = (props) => {
                 const className = prefix === 'has-text' && viewport && validViewports.includes(viewport)
                     ? `${prefix}-${value}-${shade}-${viewport}`
                     : `${prefix}-${value}-${shade}`;
-                classes.push(className);
+                addPrefixedClass(className);
             }
             else {
                 addClass(prefix, value, [...validColors, 'inherit', 'current']);
@@ -637,18 +704,62 @@ const useBulmaClasses = (props) => {
         addClass('is', textTransform, validTextTransforms);
         addClass('has-text-weight', textWeight, validTextWeights);
         addClass('is-family', fontFamily, validFontFamilies);
-        addClass('is', display, validDisplays);
+        const addDisplayClass = (displayValue, viewportSuffix) => {
+            if (displayValue) {
+                if (displayValue === 'none') {
+                    addPrefixedClass(`is-hidden${viewportSuffix}`);
+                }
+                else if (validDisplays.includes(displayValue)) {
+                    addPrefixedClass(`is-${displayValue}${viewportSuffix}`);
+                }
+            }
+        };
+        addDisplayClass(displayMobile, '-mobile');
+        addDisplayClass(displayTablet, '-tablet');
+        addDisplayClass(displayDesktop, '-desktop');
+        addDisplayClass(displayWidescreen, '-widescreen');
+        addDisplayClass(displayFullhd, '-fullhd');
+        const hasViewportSpecificDisplay = !!(displayMobile ||
+            displayTablet ||
+            displayDesktop ||
+            displayWidescreen ||
+            displayFullhd);
+        if (!hasViewportSpecificDisplay) {
+            if (display === 'none') {
+                if (viewport && validViewports.includes(viewport)) {
+                    addPrefixedClass(`is-hidden-${viewport}`);
+                }
+                else {
+                    addPrefixedClass('is-hidden');
+                }
+            }
+            else {
+                addClass('is', display, [...validDisplays]);
+            }
+        }
         if (visibility) {
             if (visibility === 'hidden' &&
                 viewport &&
                 validViewports.includes(viewport)) {
-                classes.push(`is-hidden-${viewport}`);
+                addPrefixedClass(`is-hidden-${viewport}`);
             }
             else if (validVisibilities.includes(visibility)) {
-                classes.push(`is-${visibility}`);
+                addPrefixedClass(`is-${visibility}`);
             }
         }
-        if (display === 'flex' || display === 'inline-flex') {
+        const hasFlexDisplay = display === 'flex' ||
+            display === 'inline-flex' ||
+            displayMobile === 'flex' ||
+            displayMobile === 'inline-flex' ||
+            displayTablet === 'flex' ||
+            displayTablet === 'inline-flex' ||
+            displayDesktop === 'flex' ||
+            displayDesktop === 'inline-flex' ||
+            displayWidescreen === 'flex' ||
+            displayWidescreen === 'inline-flex' ||
+            displayFullhd === 'flex' ||
+            displayFullhd === 'inline-flex';
+        if (hasFlexDisplay) {
             addClass('is-flex-direction', flexDirection, validFlexDirections);
             addClass('is-flex-wrap', flexWrap, validFlexWraps);
             addClass('is-justify-content', justifyContent, validJustifyContents);
@@ -665,7 +776,7 @@ const useBulmaClasses = (props) => {
             addClass('is', overflow, ['clipped']);
         }
         if (overlay) {
-            classes.push('is-overlay');
+            addPrefixedClass('is-overlay');
         }
         if (interaction) {
             addClass('is', interaction, ['unselectable', 'clickable']);
@@ -680,10 +791,11 @@ const useBulmaClasses = (props) => {
             addClass('is', responsive, ['mobile', 'narrow']);
         }
         if (skeleton) {
-            classes.push('is-skeleton');
+            addPrefixedClass('is-skeleton');
         }
         return classNames(classes);
     }, [
+        classPrefix,
         color,
         backgroundColor,
         colorShade,
@@ -724,134 +836,70 @@ const useBulmaClasses = (props) => {
         shadow,
         responsive,
         viewport,
+        displayMobile,
+        displayTablet,
+        displayDesktop,
+        displayWidescreen,
+        displayFullhd,
         skeleton,
     ]);
     return { bulmaHelperClasses, rest };
 };
 
-function getColumnClassNames(props) {
-    const classList = [];
-    const sizeProps = [
-        { prop: 'size', prefix: 'is', suffix: '' },
-        { prop: 'sizeMobile', prefix: 'is', suffix: 'mobile' },
-        { prop: 'sizeTablet', prefix: 'is', suffix: 'tablet' },
-        { prop: 'sizeDesktop', prefix: 'is', suffix: 'desktop' },
-        { prop: 'sizeWidescreen', prefix: 'is', suffix: 'widescreen' },
-        { prop: 'sizeFullhd', prefix: 'is', suffix: 'fullhd' },
-    ];
-    for (const { prop, prefix, suffix } of sizeProps) {
-        const val = props[prop];
-        if (val !== undefined && val !== null) {
-            let className = `${prefix}-${val}`;
-            if (suffix)
-                className += `-${suffix}`;
-            classList.push(className);
-        }
-    }
-    const offsetProps = [
-        { prop: 'offset', prefix: 'is-offset', suffix: '' },
-        { prop: 'offsetMobile', prefix: 'is-offset', suffix: 'mobile' },
-        { prop: 'offsetTablet', prefix: 'is-offset', suffix: 'tablet' },
-        { prop: 'offsetDesktop', prefix: 'is-offset', suffix: 'desktop' },
-        { prop: 'offsetWidescreen', prefix: 'is-offset', suffix: 'widescreen' },
-        { prop: 'offsetFullhd', prefix: 'is-offset', suffix: 'fullhd' },
-    ];
-    for (const { prop, prefix, suffix } of offsetProps) {
-        const val = props[prop];
-        if (val !== undefined && val !== null) {
-            let className = `${prefix}-${val}`;
-            if (suffix)
-                className += `-${suffix}`;
-            classList.push(className);
-        }
-    }
-    if (props.isNarrow)
-        classList.push('is-narrow');
-    if (props.isNarrowMobile)
-        classList.push('is-narrow-mobile');
-    if (props.isNarrowTablet)
-        classList.push('is-narrow-tablet');
-    if (props.isNarrowTouch)
-        classList.push('is-narrow-touch');
-    if (props.isNarrowDesktop)
-        classList.push('is-narrow-desktop');
-    if (props.isNarrowWidescreen)
-        classList.push('is-narrow-widescreen');
-    if (props.isNarrowFullhd)
-        classList.push('is-narrow-fullhd');
-    return classList;
-}
-const Column = ({ className, textColor, bgColor, size, sizeMobile, sizeTablet, sizeDesktop, sizeWidescreen, sizeFullhd, offset, offsetMobile, offsetTablet, offsetDesktop, offsetWidescreen, offsetFullhd, isNarrow, isNarrowMobile, isNarrowTablet, isNarrowTouch, isNarrowDesktop, isNarrowWidescreen, isNarrowFullhd, children, ...props }) => {
+const Column = ({ className, textColor, color: _fieldColor, bgColor, size, sizeMobile, sizeTablet, sizeDesktop, sizeWidescreen, sizeFullhd, offset, offsetMobile, offsetTablet, offsetDesktop, offsetWidescreen, offsetFullhd, isNarrow, isNarrowMobile, isNarrowTablet, isNarrowTouch, isNarrowDesktop, isNarrowWidescreen, isNarrowFullhd, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const columnClasses = classNames('column', ...getColumnClassNames({
-        size,
-        sizeMobile,
-        sizeTablet,
-        sizeDesktop,
-        sizeWidescreen,
-        sizeFullhd,
-        offset,
-        offsetMobile,
-        offsetTablet,
-        offsetDesktop,
-        offsetWidescreen,
-        offsetFullhd,
-        isNarrow,
-        isNarrowMobile,
-        isNarrowTablet,
-        isNarrowTouch,
-        isNarrowDesktop,
-        isNarrowWidescreen,
-        isNarrowFullhd,
-    }), className, bulmaHelperClasses);
+    const mainClass = usePrefixedClassNames('column');
+    const columnSpecificClasses = usePrefixedClassNames('', {
+        [`is-${size}`]: size !== undefined && size !== null,
+        [`is-${sizeMobile}-mobile`]: sizeMobile !== undefined && sizeMobile !== null,
+        [`is-${sizeTablet}-tablet`]: sizeTablet !== undefined && sizeTablet !== null,
+        [`is-${sizeDesktop}-desktop`]: sizeDesktop !== undefined && sizeDesktop !== null,
+        [`is-${sizeWidescreen}-widescreen`]: sizeWidescreen !== undefined && sizeWidescreen !== null,
+        [`is-${sizeFullhd}-fullhd`]: sizeFullhd !== undefined && sizeFullhd !== null,
+        [`is-offset-${offset}`]: offset !== undefined && offset !== null,
+        [`is-offset-${offsetMobile}-mobile`]: offsetMobile !== undefined && offsetMobile !== null,
+        [`is-offset-${offsetTablet}-tablet`]: offsetTablet !== undefined && offsetTablet !== null,
+        [`is-offset-${offsetDesktop}-desktop`]: offsetDesktop !== undefined && offsetDesktop !== null,
+        [`is-offset-${offsetWidescreen}-widescreen`]: offsetWidescreen !== undefined && offsetWidescreen !== null,
+        [`is-offset-${offsetFullhd}-fullhd`]: offsetFullhd !== undefined && offsetFullhd !== null,
+        'is-narrow': !!isNarrow,
+        'is-narrow-mobile': !!isNarrowMobile,
+        'is-narrow-tablet': !!isNarrowTablet,
+        'is-narrow-touch': !!isNarrowTouch,
+        'is-narrow-desktop': !!isNarrowDesktop,
+        'is-narrow-widescreen': !!isNarrowWidescreen,
+        'is-narrow-fullhd': !!isNarrowFullhd,
+    });
+    const columnClasses = classNames(mainClass, columnSpecificClasses, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("div", { className: columnClasses, ...rest, children: children }));
 };
 
-function getGapClasses(props) {
-    const gapClassMap = [
-        { prop: 'gapSize', prefix: 'is' },
-        { prop: 'gapSizeMobile', prefix: 'is', suffix: 'mobile' },
-        { prop: 'gapSizeTablet', prefix: 'is', suffix: 'tablet' },
-        { prop: 'gapSizeDesktop', prefix: 'is', suffix: 'desktop' },
-        { prop: 'gapSizeWidescreen', prefix: 'is', suffix: 'widescreen' },
-        { prop: 'gapSizeFullhd', prefix: 'is', suffix: 'fullhd' },
-    ];
-    return gapClassMap.flatMap(({ prop, prefix, suffix }) => {
-        const val = props[prop];
-        if (val !== undefined && val !== null) {
-            let className = `${prefix}-${val}`;
-            if (suffix)
-                className += `-${suffix}`;
-            return [className];
-        }
-        return [];
-    });
-}
-const Columns = ({ className, textColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
+const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const columnsClasses = classNames('columns', {
-        'is-centered': isCentered,
-        'is-gapless': isGapless,
-        'is-multiline': isMultiline,
-        'is-vcentered': isVCentered,
-        'is-mobile': isMobile,
-        'is-desktop': isDesktop,
-    }, ...getGapClasses({
-        gapSize,
-        gapSizeMobile,
-        gapSizeTablet,
-        gapSizeDesktop,
-        gapSizeWidescreen,
-        gapSizeFullhd,
-    }), className, bulmaHelperClasses);
+    const mainClass = usePrefixedClassNames('columns');
+    const gapClasses = usePrefixedClassNames('', {
+        [`is-${gapSize}`]: gapSize !== undefined && gapSize !== null,
+        [`is-${gapSizeMobile}-mobile`]: gapSizeMobile !== undefined && gapSizeMobile !== null,
+        [`is-${gapSizeTablet}-tablet`]: gapSizeTablet !== undefined && gapSizeTablet !== null,
+        [`is-${gapSizeDesktop}-desktop`]: gapSizeDesktop !== undefined && gapSizeDesktop !== null,
+        [`is-${gapSizeWidescreen}-widescreen`]: gapSizeWidescreen !== undefined && gapSizeWidescreen !== null,
+        [`is-${gapSizeFullhd}-fullhd`]: gapSizeFullhd !== undefined && gapSizeFullhd !== null,
+        'is-centered': !!isCentered,
+        'is-gapless': !!isGapless,
+        'is-multiline': !!isMultiline,
+        'is-vcentered': !!isVCentered,
+        'is-mobile': !!isMobile,
+        'is-desktop': !!isDesktop,
+    });
+    const columnsClasses = classNames(mainClass, gapClasses, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("div", { className: columnsClasses, ...rest, children: children }));
 };
 
@@ -865,11 +913,12 @@ const validBreadcrumbSeparators = [
 const validBreadcrumbSizes = ['small', 'medium', 'large'];
 const Breadcrumb = ({ className, alignment, separator, size, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const breadcrumbClasses = classNames('breadcrumb', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('breadcrumb', {
         [`is-${alignment}`]: alignment && validBreadcrumbAlignments.includes(alignment),
         [`has-${separator}-separator`]: separator && validBreadcrumbSeparators.includes(separator),
         [`is-${size}`]: size && validBreadcrumbSizes.includes(size),
     });
+    const breadcrumbClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsxRuntimeExports.jsx("ul", { children: children }) }));
 };
 
@@ -885,9 +934,10 @@ const Card = ({ className, children, textColor, bgColor, hasShadow = true, heade
         backgroundColor: bgColor,
         ...props,
     });
-    const cardClasses = classNames('card', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('card', {
         'is-shadowless': !hasShadow,
     });
+    const cardClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     const renderHeader = (header, headerIcon, headerCentered) => {
         if (!header && !headerIcon)
             return null;
@@ -906,6 +956,14 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
     const [active, setActive] = useState(!!activeProp);
     const dropdownRef = useRef(null);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const bulmaClasses = usePrefixedClassNames('dropdown', {
+        'is-active': active,
+        'is-up': up,
+        'is-right': right,
+        'is-hoverable': hoverable,
+        'is-disabled': disabled,
+    });
+    const buttonClass = usePrefixedClassNames('button');
     useEffect(() => {
         if (typeof activeProp === 'boolean')
             setActive(activeProp);
@@ -938,14 +996,8 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
         }
     };
-    const dropdownClasses = classNames('dropdown', bulmaHelperClasses, {
-        'is-active': active,
-        'is-up': up,
-        'is-right': right,
-        'is-hoverable': hoverable,
-        'is-disabled': disabled,
-    }, className);
-    return (jsxRuntimeExports.jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntimeExports.jsx("div", { className: "dropdown-trigger", children: jsxRuntimeExports.jsxs("button", { className: "button", "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("span", { className: "icon is-small", "aria-hidden": "true", children: jsxRuntimeExports.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntimeExports.jsx("div", { className: classNames('dropdown-menu', menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsxRuntimeExports.jsx("div", { className: "dropdown-content", onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
+    const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntimeExports.jsx("div", { className: "dropdown-trigger", children: jsxRuntimeExports.jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("span", { className: "icon is-small", "aria-hidden": "true", children: jsxRuntimeExports.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntimeExports.jsx("div", { className: classNames('dropdown-menu', menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsxRuntimeExports.jsx("div", { className: "dropdown-content", onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
 };
 const DropdownItem = ({ children, active, className, as: Component = 'a', ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -960,7 +1012,8 @@ const Dropdown = Object.assign(DropdownComponent, {
 const MenuListLevelContext = createContext(0);
 const MenuComponent = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("aside", { className: classNames('menu', className, bulmaHelperClasses), ...rest, children: children }));
+    const bulmaClasses = usePrefixedClassNames('menu');
+    return (jsxRuntimeExports.jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
 };
 const MenuLabel = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -1008,8 +1061,12 @@ const Message = ({ className, title, textColor, color, bgColor, onClose, childre
         backgroundColor: bgColor,
         ...props,
     });
-    const messageClasses = classNames('message', color && `is-${color}`, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntimeExports.jsxs("div", { className: "message-header", children: [title && jsxRuntimeExports.jsx("span", { children: title }), onClose && (jsxRuntimeExports.jsx("button", { className: "delete", "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntimeExports.jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
+    const bulmaClasses = usePrefixedClassNames('message', {
+        [`is-${color}`]: color,
+    });
+    const deleteClass = usePrefixedClassNames('delete');
+    const messageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntimeExports.jsxs("div", { className: "message-header", children: [title && jsxRuntimeExports.jsx("span", { children: title }), onClose && (jsxRuntimeExports.jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntimeExports.jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
 };
 
 const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
@@ -1025,8 +1082,12 @@ const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCa
         isModalCard = false;
     else
         isModalCard = !!modalCardTitle || !!modalCardFoot;
-    const modalClasses = classNames('modal', { 'is-active': active }, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsxRuntimeExports.jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntimeExports.jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxRuntimeExports.jsxs("header", { className: "modal-card-head", children: [jsxRuntimeExports.jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsxRuntimeExports.jsx("button", { className: "delete", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntimeExports.jsx("section", { className: "modal-card-body", "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntimeExports.jsx("footer", { className: "modal-card-foot", children: modalCardFoot }))] })) : (jsxRuntimeExports.jsx("div", { className: "modal-content", "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntimeExports.jsx("button", { className: "modal-close is-large", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
+    const bulmaClasses = usePrefixedClassNames('modal', {
+        'is-active': active,
+    });
+    const deleteClass = usePrefixedClassNames('delete');
+    const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsxRuntimeExports.jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntimeExports.jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxRuntimeExports.jsxs("header", { className: "modal-card-head", children: [jsxRuntimeExports.jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsxRuntimeExports.jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntimeExports.jsx("section", { className: "modal-card-body", "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntimeExports.jsx("footer", { className: "modal-card-foot", children: modalCardFoot }))] })) : (jsxRuntimeExports.jsx("div", { className: "modal-content", "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntimeExports.jsx("button", { className: "modal-close is-large", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
 };
 
 const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, children, ...props }) => {
@@ -1035,11 +1096,12 @@ const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, chil
         backgroundColor: bgColor,
         ...props,
     });
-    const navbarClasses = classNames('navbar', bulmaHelperClasses, className, {
+    const bulmaClasses = usePrefixedClassNames('navbar', {
         [`is-${color}`]: color,
         'is-transparent': transparent,
         [`is-fixed-${fixed}`]: fixed,
     });
+    const navbarClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("nav", { className: navbarClasses, role: "navigation", "aria-label": "main navigation", ...rest, children: children }));
 };
 const NavbarBrand = ({ className, children, textColor, ...props }) => {
@@ -1131,12 +1193,13 @@ const Pagination = ({ color, textColor, bgColor, size, align, rounded, className
         backgroundColor: bgColor,
         ...props,
     });
-    const paginationClasses = classNames('pagination', bulmaHelperClasses, className, {
+    const bulmaClasses = usePrefixedClassNames('pagination', {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
         [`is-${align}`]: align,
         'is-rounded': rounded,
     });
+    const paginationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: children }));
 };
 const PaginationList = ({ className, textColor, bgColor, children, ...props }) => {
@@ -1180,16 +1243,20 @@ const Panel = ({ color, className, children, ...props }) => {
         color,
         ...props,
     });
-    const panelClasses = classNames('panel', bulmaHelperClasses, className, {
+    const bulmaClasses = usePrefixedClassNames('panel', {
         [`is-${color}`]: color,
     });
+    const panelClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("nav", { className: panelClasses, ...rest, children: children }));
 };
 const PanelHeading = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("p", { className: classNames('panel-heading', className), ...props, children: children }));
 const PanelTabs = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("p", { className: classNames('panel-tabs', className), ...props, children: children }));
 const PanelBlock = ({ className, active, children, ...props }) => (jsxRuntimeExports.jsx("a", { className: classNames('panel-block', className, { 'is-active': active }), ...props, children: children }));
 const PanelIcon = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("span", { className: classNames('panel-icon', className), ...props, children: children }));
-const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa-search', ...props }) => (jsxRuntimeExports.jsx("div", { className: "panel-block", ...props, children: jsxRuntimeExports.jsxs("p", { className: "control has-icons-left", children: [jsxRuntimeExports.jsx("input", { className: "input", type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsxRuntimeExports.jsx("span", { className: "icon is-left", children: jsxRuntimeExports.jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
+const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa-search', ...props }) => {
+    const inputClass = usePrefixedClassNames('input');
+    return (jsxRuntimeExports.jsx("div", { className: "panel-block", ...props, children: jsxRuntimeExports.jsxs("p", { className: "control has-icons-left", children: [jsxRuntimeExports.jsx("input", { className: inputClass, type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsxRuntimeExports.jsx("span", { className: "icon is-left", children: jsxRuntimeExports.jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
+};
 const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxRuntimeExports.jsxs("label", { className: "panel-block", ...props, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
 const PanelButtonBlock = ({ children, className, ...props }) => (jsxRuntimeExports.jsx("div", { className: "panel-block", children: jsxRuntimeExports.jsx("button", { className: classNames('button is-link is-outlined is-fullwidth', className), ...props, children: children }) }));
 Panel.Heading = PanelHeading;
@@ -1202,18 +1269,18 @@ Panel.ButtonBlock = PanelButtonBlock;
 
 const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color,
         ...props,
     });
-    const tabsClass = classNames('tabs', bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('tabs', {
         [`is-${align}`]: align,
         [`is-${size}`]: size,
+        [`is-${color}`]: color,
         'is-fullwidth': fullwidth,
         'is-boxed': boxed,
         'is-toggle': toggle,
-        'is-toggle-rounded': toggle && rounded,
-        [`is-${color}`]: color,
-    }, className);
+        'is-toggle-rounded': rounded,
+    });
+    const tabsClass = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: tabsClass, ...rest, children: children }));
 };
 const TabList = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("ul", { className: classNames(className), ...props, children: children }));
@@ -1227,7 +1294,8 @@ const Block = ({ className, textColor, bgColor, children, ...props }) => {
         backgroundColor: bgColor,
         ...props,
     });
-    const blockClasses = classNames('block', className, bulmaHelperClasses);
+    const bulmaClasses = usePrefixedClassNames('block');
+    const blockClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: blockClasses, ...rest, children: children }));
 };
 
@@ -1237,9 +1305,10 @@ const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...pro
         backgroundColor: bgColor,
         ...props,
     });
-    const boxClasses = classNames('box', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('box', {
         'is-shadowless': !hasShadow,
     });
+    const boxClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: boxClasses, ...rest, children: children }));
 };
 
@@ -1249,42 +1318,44 @@ const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWi
         backgroundColor: bgColor,
         ...props,
     });
-    const buttonClasses = classNames('button', className, bulmaHelperClasses, {
-        [`is-${color}`]: color,
-        [`is-${size}`]: size && size !== 'normal',
+    const bulmaClasses = usePrefixedClassNames('button', {
+        [`is-${color}`]: color && validColors.includes(color),
+        [`is-${size}`]: size,
+        'is-outlined': isOutlined,
         'is-light': isLight,
-        'is-rounded': isRounded,
         'is-loading': isLoading,
         'is-static': isStatic,
-        'is-fullwidth': isFullWidth,
-        'is-outlined': isOutlined,
-        'is-inverted': isInverted,
+        'is-disabled': isDisabled,
+        'is-rounded': isRounded,
+        'is-hovered': isHovered,
         'is-focused': isFocused,
         'is-active': isActive,
-        'is-hovered': isHovered,
-        'is-disabled': isDisabled,
+        'is-inverted': isInverted,
+        'is-fullwidth': isFullWidth,
     });
+    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     if (as === 'a') {
-        const { ...anchorRest } = rest;
+        const { type: _type, disabled: _disabled, form: _form, formAction: _formAction, formEncType: _formEncType, formMethod: _formMethod, formNoValidate: _formNoValidate, formTarget: _formTarget, name: _name, value: _value, autoFocus: _autoFocus, ...anchorRest } = rest;
         return (jsxRuntimeExports.jsx("a", { className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
-                ? e => e.preventDefault()
+                ? (e) => e.preventDefault()
                 : onClick, ...anchorRest, children: children }));
     }
     return (jsxRuntimeExports.jsx("button", { className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
 };
 
 const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
+    const buttonsClasses = usePrefixedClassNames('buttons', {
+        'is-centered': isCentered,
+        'is-right': isRight,
+        'has-addons': hasAddons,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const buttonsClasses = classNames('buttons', className, bulmaHelperClasses, {
-        'is-centered': isCentered,
-        'is-right': isRight,
-        'has-addons': hasAddons,
-    });
-    return (jsxRuntimeExports.jsx("div", { className: buttonsClasses, ...rest, children: children }));
+    const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsx("div", { className: combinedClasses, ...rest, children: children }));
 };
 
 const validSizes = ['small', 'medium', 'large'];
@@ -1294,9 +1365,10 @@ const Content = ({ className, textColor, bgColor, size, children, ...props }) =>
         backgroundColor: bgColor,
         ...props,
     });
-    const contentClasses = classNames('content', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('content', {
         [`is-${size}`]: size && size !== 'normal' && validSizes.includes(size),
     });
+    const contentClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: contentClasses, ...rest, children: children }));
 };
 
@@ -1306,10 +1378,11 @@ const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Clo
         backgroundColor: bgColor,
         ...props,
     });
-    const classes = classNames('delete', {
+    const bulmaClasses = usePrefixedClassNames('delete', {
         [`is-${size}`]: size,
         'is-disabled': disabled,
-    }, bulmaHelperClasses, className);
+    });
+    const classes = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("button", { className: classes, onClick: onClick, "aria-label": ariaLabel, disabled: disabled, type: "button", ...rest }));
 };
 
@@ -1347,9 +1420,10 @@ const Icon = ({ className, textColor, bgColor, name, library = 'fa', libraryFeat
         backgroundColor: bgColor,
         ...props,
     });
-    const iconContainerClasses = classNames('icon', {
+    const bulmaClasses = usePrefixedClassNames('icon', {
         [`is-${size}`]: size,
-    }, bulmaHelperClasses, className);
+    });
+    const iconContainerClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     const iClasses = getIconClasses(library, name, libraryFeatures);
     return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses }) }));
 };
@@ -1360,7 +1434,8 @@ const IconText = ({ className, textColor, bgColor, iconProps, children, items, .
         backgroundColor: bgColor,
         ...props,
     });
-    const iconTextClasses = classNames('icon-text', bulmaHelperClasses, className);
+    const bulmaClasses = usePrefixedClassNames('icon-text');
+    const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxRuntimeExports.jsxs(React.Fragment, { children: [jsxRuntimeExports.jsx(Icon, { ...item.iconProps }), item.text && jsxRuntimeExports.jsx("span", { children: item.text })] }, index)))) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [iconProps && jsxRuntimeExports.jsx(Icon, { ...iconProps }), children && jsxRuntimeExports.jsx("span", { children: children })] })) }));
 };
 
@@ -1370,10 +1445,11 @@ const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, s
         backgroundColor: bgColor,
         ...props,
     });
-    const imageClasses = classNames('image', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('image', {
         [`is-${size}`]: size,
         'has-ratio': size && typeof size === 'string' && size.includes('by'),
     });
+    const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     let Tag;
     if (as) {
         Tag = as;
@@ -1384,7 +1460,8 @@ const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, s
     else {
         Tag = 'div';
     }
-    const content = children ? (children) : (jsxRuntimeExports.jsx("img", { className: classNames({ 'is-rounded': isRounded }), src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
+    const roundedClass = usePrefixedClassNames('is-rounded');
+    const content = children ? (children) : (jsxRuntimeExports.jsx("img", { className: classNames({ [roundedClass]: isRounded }), src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
     return (jsxRuntimeExports.jsx(Tag, { className: imageClasses, ...rest, children: content }));
 };
 
@@ -1392,29 +1469,34 @@ const Notification = ({ className, color, isLight, hasDelete, onDelete, children
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const notificationClasses = classNames('notification', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('notification', {
         [`is-${color}`]: color && validColors.includes(color),
         'is-light': isLight,
     });
-    return (jsxRuntimeExports.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntimeExports.jsx("button", { className: "delete", onClick: onDelete, "aria-label": "Close notification" })), children] }));
+    const deleteClasses = usePrefixedClassNames('delete');
+    const notificationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntimeExports.jsx("button", { className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
 };
 
 const Progress = ({ className, color, size, value, max, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const progressClasses = classNames('progress', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('progress', {
         [`is-${color}`]: color && validColors.includes(color),
         [`is-${size}`]: size,
     });
+    const progressClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
 };
 
 const Skeleton = ({ className, variant = 'block', lines = 3, children, ...props }) => {
+    const linesClass = usePrefixedClassNames('skeleton-lines');
+    const blockClass = usePrefixedClassNames('skeleton-block');
     if (variant === 'lines') {
-        return (jsxRuntimeExports.jsx("div", { className: classNames('skeleton-lines', className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsxRuntimeExports.jsx("div", {}, i))) }));
+        return (jsxRuntimeExports.jsx("div", { className: classNames(linesClass, className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsxRuntimeExports.jsx("div", {}, i))) }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: classNames('skeleton-block', className), ...props, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: classNames(blockClass, className), ...props, children: children }));
 };
 
 const validSubTitleSizes = ['1', '2', '3', '4', '5', '6'];
@@ -1431,25 +1513,31 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, children, ...props
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const element = validSubTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validSubTitleSizes.includes(size) ? size : undefined;
-    const subTitleClasses = classNames('subtitle', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('subtitle', {
         [`is-${validSize}`]: validSize,
         'has-skeleton': hasSkeleton,
     });
+    const subTitleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
     return (jsxRuntimeExports.jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
 };
 
 const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tableClasses = classNames('table', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('table', {
         'is-bordered': isBordered,
         'is-striped': isStriped,
         'is-narrow': isNarrow,
         'is-hoverable': isHoverable,
         'is-fullwidth': isFullwidth,
     });
+    const containerClass = usePrefixedClassNames('table-container');
+    const tableClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     const tableElement = (jsxRuntimeExports.jsx("table", { className: tableClasses, ...rest, children: children }));
-    return isResponsive ? (jsxRuntimeExports.jsx("div", { className: "table-container", children: tableElement })) : (tableElement);
+    if (isResponsive) {
+        return jsxRuntimeExports.jsx("div", { className: containerClass, children: tableElement });
+    }
+    return tableElement;
 };
 
 const validTagColors = [
@@ -1467,13 +1555,14 @@ const validTagColors = [
 const validTagSizes = ['normal', 'medium', 'large'];
 const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tagClasses = classNames('tag', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('tag', {
         [`is-${color}`]: color && validTagColors.includes(color),
         [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
         'is-rounded': isRounded,
         'is-delete': isDelete,
         'is-hoverable': isHoverable,
     });
+    const tagClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     if (isDelete) {
         return (jsxRuntimeExports.jsx("button", { className: tagClasses, onClick: onDelete, "aria-label": "Delete tag", ...rest }));
     }
@@ -1482,10 +1571,11 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
 
 const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tagsClasses = classNames('tags', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('tags', {
         'has-addons': hasAddons,
         'are-multiline': isMultiline,
     });
+    const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: tagsClasses, ...rest, children: children }));
 };
 
@@ -1508,10 +1598,11 @@ const validTableColors = [
     'white',
 ];
 const Td = ({ className, color, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tdClasses = classNames(className, bulmaHelperClasses, {
+    const colorClass = usePrefixedClassNames('', {
         [`is-${color}`]: color && validTableColors.includes(color),
     });
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("td", { className: tdClasses, ...rest, children: children }));
 };
 
@@ -1523,11 +1614,12 @@ const Tfoot = ({ className, children, ...props }) => {
 
 const validAlignments = ['left', 'right', 'centered'];
 const Th = ({ className, isAligned, width, color, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const thClasses = classNames(className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('', {
         [`has-text-${isAligned}`]: isAligned && validAlignments.includes(isAligned),
         [`is-${color}`]: color && validTableColors.includes(color),
     });
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("th", { className: thClasses, style: width
             ? { width: typeof width === 'number' ? `${width}px` : width }
             : undefined, ...rest, children: children }));
@@ -1545,21 +1637,23 @@ const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, children, ..
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const element = validTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validTitleSizes.includes(size) ? size : undefined;
-    const titleClasses = classNames('title', className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('title', {
         [`is-${validSize}`]: validSize,
         'is-spaced': isSpaced,
         'has-skeleton': hasSkeleton,
     });
+    const titleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
     return (jsxRuntimeExports.jsx(Tag, { className: titleClasses, ...rest, children: children }));
 };
 
 const Tr = ({ className, isSelected, color, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const trClasses = classNames(className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('', {
         'is-selected': isSelected,
         [`is-${color}`]: color && validTableColors.includes(color),
     });
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("tr", { className: trClasses, ...rest, children: children }));
 };
 
@@ -1567,7 +1661,8 @@ const Checkbox = forwardRef(({ disabled, className, children, ...props }, ref) =
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const checkboxClass = classNames('checkbox', bulmaHelperClasses, className);
+    const mainClass = usePrefixedClassNames('checkbox');
+    const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsxs("label", { className: checkboxClass, children: [jsxRuntimeExports.jsx("input", { ref: ref, type: "checkbox", disabled: disabled, ...rest }), children] }));
 });
 Checkbox.displayName = 'Checkbox';
@@ -1576,7 +1671,8 @@ const Checkboxes = ({ children, className, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const wrapperClass = classNames('checkboxes', bulmaHelperClasses, className);
+    const mainClass = usePrefixedClassNames('checkboxes');
+    const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
 };
 
@@ -1609,13 +1705,14 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
                 size: iconRightSize,
             }
             : undefined);
-    const controlClass = classNames('control', bulmaHelperClasses, {
+    const mainClass = usePrefixedClassNames('control', {
         'has-icons-left': hasIconsLeft || !!leftIconProps,
         'has-icons-right': hasIconsRight || !!rightIconProps,
         'is-loading': isLoading,
         'is-expanded': isExpanded,
         [`is-${size}`]: !!size,
-    }, className);
+    });
+    const controlClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsxRuntimeExports.jsx(Icon, { ...leftIconProps, className: "is-left" })), rightIconProps && rightIconProps.name && (jsxRuntimeExports.jsx(Icon, { ...rightIconProps, className: "is-right" }))] }));
 });
 Control.displayName = 'Control';
@@ -1626,7 +1723,10 @@ const FieldLabel = ({ size, textColor, bgColor, className, children, ...props })
         backgroundColor: bgColor,
         ...props,
     });
-    const fieldLabelClass = classNames('field-label', bulmaHelperClasses, { [`is-${size}`]: size }, className);
+    const mainClass = usePrefixedClassNames('field-label', {
+        [`is-${size}`]: !!size,
+    });
+    const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
 };
 const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
@@ -1635,16 +1735,17 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
         backgroundColor: bgColor,
         ...props,
     });
-    const fieldBodyClass = classNames('field-body', bulmaHelperClasses, className);
+    const mainClass = usePrefixedClassNames('field-body');
+    const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
 };
-const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, textColor, bgColor, className, children, ...props }) => {
+const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, textColor, color: _fieldColor, bgColor, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const fieldClass = classNames('field', bulmaHelperClasses, {
+    const mainClass = usePrefixedClassNames('field', {
         'is-horizontal': horizontal,
         'has-addons': !!hasAddons,
         'is-grouped': grouped === true ||
@@ -1654,15 +1755,17 @@ const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, t
         'is-grouped-centered': grouped === 'centered',
         'is-grouped-right': grouped === 'right',
         'is-grouped-multiline': grouped === 'multiline',
-    }, className);
+    });
+    const fieldClass = classNames(mainClass, bulmaHelperClasses, className);
     const mappedLabelSize = labelSize === 'normal' ? undefined : labelSize;
+    const labelClass = usePrefixedClassNames('label');
     let renderedLabel = null;
     if (label) {
         if (horizontal) {
-            renderedLabel = (jsxRuntimeExports.jsx(FieldLabel, { size: mappedLabelSize, children: jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames('label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: labelProps === null || labelProps === void 0 ? void 0 : labelProps.style, children: label }) }));
+            renderedLabel = (jsxRuntimeExports.jsx(FieldLabel, { size: mappedLabelSize, children: jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: labelProps === null || labelProps === void 0 ? void 0 : labelProps.style, children: label }) }));
         }
         else {
-            renderedLabel = (jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames('label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: { display: 'block', ...((labelProps === null || labelProps === void 0 ? void 0 : labelProps.style) || {}) }, children: label }));
+            renderedLabel = (jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: { display: 'block', ...((labelProps === null || labelProps === void 0 ? void 0 : labelProps.style) || {}) }, children: label }));
         }
     }
     let content = children;
@@ -1697,13 +1800,14 @@ const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentere
     else if (isCentered) {
         alignmentClass = 'is-centered';
     }
-    const fileClass = classNames('file', bulmaHelperClasses, {
-        [`is-${color}`]: color,
-        [`is-${size}`]: size,
+    const mainClass = usePrefixedClassNames('file', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
         'is-boxed': isBoxed,
         'is-fullwidth': isFullwidth,
         'has-name': hasName,
-    }, alignmentClass, className);
+    });
+    const fileClass = classNames(mainClass, bulmaHelperClasses, alignmentClass, className);
     return (jsxRuntimeExports.jsx("div", { className: fileClass, children: jsxRuntimeExports.jsxs("label", { className: "file-label", children: [jsxRuntimeExports.jsx("input", { ref: ref, className: classNames('file-input', inputClassName), type: "file", ...rest }), jsxRuntimeExports.jsxs("span", { className: "file-cta", children: [iconLeft && jsxRuntimeExports.jsx("span", { className: "file-icon", children: iconLeft }), jsxRuntimeExports.jsx("span", { className: "file-label", children: label || 'Choose a file…' }), iconRight && jsxRuntimeExports.jsx("span", { className: "file-icon", children: iconRight })] }), hasName && fileName && jsxRuntimeExports.jsx("span", { className: "file-name", children: fileName })] }) }));
 });
 File.displayName = 'File';
@@ -1713,15 +1817,16 @@ const Input = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocus
         color,
         ...props,
     });
-    const inputClass = classNames('input', bulmaHelperClasses, {
-        [`is-${color}`]: color,
-        [`is-${size}`]: size,
+    const mainClass = usePrefixedClassNames('input', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
         'is-rounded': isRounded,
         'is-static': isStatic,
         'is-hovered': isHovered,
         'is-focused': isFocused,
         'is-loading': isLoading,
-    }, className);
+    });
+    const inputClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest }));
 });
 Input.displayName = 'Input';
@@ -1730,7 +1835,8 @@ const Radio = forwardRef(({ disabled, className, children, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const radioClass = classNames('radio', bulmaHelperClasses, className);
+    const mainClass = usePrefixedClassNames('radio');
+    const radioClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsxs("label", { className: radioClass, children: [jsxRuntimeExports.jsx("input", { ref: ref, type: "radio", disabled: disabled, ...rest }), children] }));
 });
 Radio.displayName = 'Radio';
@@ -1739,7 +1845,8 @@ const Radios = ({ children, className, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const wrapperClass = classNames('radios', bulmaHelperClasses, className);
+    const mainClass = usePrefixedClassNames('radios');
+    const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
 };
 
@@ -1748,13 +1855,14 @@ const Select = forwardRef(({ color, size, isRounded, isLoading, isActive, classN
         color,
         ...props,
     });
-    const selectClass = classNames('select', bulmaHelperClasses, {
-        [`is-${color}`]: color,
-        [`is-${size}`]: size,
+    const mainClass = usePrefixedClassNames('select', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
         'is-rounded': isRounded,
         'is-loading': isLoading,
         'is-active': isActive,
-    }, className);
+    });
+    const selectClass = classNames(mainClass, bulmaHelperClasses, className);
     const selectProps = {
         disabled,
         multiple,
@@ -1772,9 +1880,9 @@ const TextArea = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFo
         color,
         ...props,
     });
-    const textareaClass = classNames('textarea', bulmaHelperClasses, {
-        [`is-${color}`]: color,
-        [`is-${size}`]: size,
+    const mainClass = usePrefixedClassNames('textarea', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
         'is-rounded': isRounded,
         'is-static': isStatic,
         'is-hovered': isHovered,
@@ -1782,97 +1890,650 @@ const TextArea = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFo
         'is-loading': isLoading,
         'is-active': isActive,
         'has-fixed-size': hasFixedSize,
-    }, className);
+    });
+    const textareaClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("textarea", { ref: ref, className: textareaClass, disabled: disabled, readOnly: readOnly, rows: rows, ...rest }));
 });
 TextArea.displayName = 'TextArea';
 
-function getCellGridClasses(props) {
-    const classes = [];
-    if (props.colStart !== undefined)
-        classes.push(`is-col-start-${props.colStart}`);
-    if (props.colFromEnd !== undefined)
-        classes.push(`is-col-from-end-${props.colFromEnd}`);
-    if (props.colSpan !== undefined)
-        classes.push(`is-col-span-${props.colSpan}`);
-    if (props.rowStart !== undefined)
-        classes.push(`is-row-start-${props.rowStart}`);
-    if (props.rowFromEnd !== undefined)
-        classes.push(`is-row-from-end-${props.rowFromEnd}`);
-    if (props.rowSpan !== undefined)
-        classes.push(`is-row-span-${props.rowSpan}`);
-    return classes;
-}
-const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, className, textColor, bgColor, children, ...props }) => {
+const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, className, textColor, color: _fieldColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const cellClasses = classNames('cell', ...getCellGridClasses({
-        colStart,
-        colFromEnd,
-        colSpan,
-        rowStart,
-        rowFromEnd,
-        rowSpan,
-    }), className, bulmaHelperClasses);
+    const mainClass = usePrefixedClassNames('cell');
+    const cellGridClasses = usePrefixedClassNames('', {
+        [`is-col-start-${colStart}`]: colStart !== undefined && colStart !== null,
+        [`is-col-from-end-${colFromEnd}`]: colFromEnd !== undefined && colFromEnd !== null,
+        [`is-col-span-${colSpan}`]: colSpan !== undefined && colSpan !== null,
+        [`is-row-start-${rowStart}`]: rowStart !== undefined && rowStart !== null,
+        [`is-row-from-end-${rowFromEnd}`]: rowFromEnd !== undefined && rowFromEnd !== null,
+        [`is-row-span-${rowSpan}`]: rowSpan !== undefined && rowSpan !== null,
+    });
+    const cellClasses = classNames(mainClass, cellGridClasses, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("div", { className: cellClasses, ...rest, children: children }));
 };
 
-function getGridInnerClasses({ gap, columnGap, rowGap, minCol, }) {
-    const classes = [];
-    if (gap !== undefined)
-        classes.push(`is-gap-${gap}`);
-    if (columnGap !== undefined)
-        classes.push(`is-column-gap-${columnGap}`);
-    if (rowGap !== undefined)
-        classes.push(`is-row-gap-${rowGap}`);
-    if (minCol !== undefined)
-        classes.push(`is-col-min-${minCol}`);
-    return classes;
-}
-function getFixedGridClasses({ fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, }) {
-    const classes = [];
-    if (fixedCols === 'auto') {
-        classes.push('has-auto-count');
-        return classes;
-    }
-    if (fixedCols !== undefined)
-        classes.push(`has-${fixedCols}-cols`);
-    if (fixedColsMobile !== undefined)
-        classes.push(`has-${fixedColsMobile}-cols-mobile`);
-    if (fixedColsTablet !== undefined)
-        classes.push(`has-${fixedColsTablet}-cols-tablet`);
-    if (fixedColsDesktop !== undefined)
-        classes.push(`has-${fixedColsDesktop}-cols-desktop`);
-    if (fixedColsWidescreen !== undefined)
-        classes.push(`has-${fixedColsWidescreen}-cols-widescreen`);
-    if (fixedColsFullhd !== undefined)
-        classes.push(`has-${fixedColsFullhd}-cols-fullhd`);
-    return classes;
-}
-const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, className, textColor, bgColor, children, ...props }) => {
+const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, className, textColor, color: _fieldColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const gridClasses = classNames('grid', ...getGridInnerClasses({ gap, columnGap, rowGap, minCol }), bulmaHelperClasses, className);
+    const mainClass = usePrefixedClassNames('grid');
+    const gridInnerClasses = usePrefixedClassNames('', {
+        [`is-gap-${gap}`]: gap !== undefined && gap !== null,
+        [`is-column-gap-${columnGap}`]: columnGap !== undefined && columnGap !== null,
+        [`is-row-gap-${rowGap}`]: rowGap !== undefined && rowGap !== null,
+        [`is-col-min-${minCol}`]: minCol !== undefined && minCol !== null,
+    });
+    const fixedGridClasses = usePrefixedClassNames('fixed-grid', {
+        'has-auto-count': fixedCols === 'auto',
+        [`has-${fixedCols}-cols`]: fixedCols !== undefined && fixedCols !== 'auto',
+        [`has-${fixedColsMobile}-cols-mobile`]: fixedColsMobile !== undefined && fixedColsMobile !== null,
+        [`has-${fixedColsTablet}-cols-tablet`]: fixedColsTablet !== undefined && fixedColsTablet !== null,
+        [`has-${fixedColsDesktop}-cols-desktop`]: fixedColsDesktop !== undefined && fixedColsDesktop !== null,
+        [`has-${fixedColsWidescreen}-cols-widescreen`]: fixedColsWidescreen !== undefined && fixedColsWidescreen !== null,
+        [`has-${fixedColsFullhd}-cols-fullhd`]: fixedColsFullhd !== undefined && fixedColsFullhd !== null,
+    });
+    const gridClasses = classNames(mainClass, gridInnerClasses, bulmaHelperClasses, className);
     if (isFixed) {
-        const fixedGridClasses = classNames('fixed-grid', ...getFixedGridClasses({
-            fixedCols,
-            fixedColsMobile,
-            fixedColsTablet,
-            fixedColsDesktop,
-            fixedColsWidescreen,
-            fixedColsFullhd,
-        }));
         return (jsxRuntimeExports.jsx("div", { className: fixedGridClasses, children: jsxRuntimeExports.jsx("div", { className: gridClasses, ...rest, children: children }) }));
     }
     return (jsxRuntimeExports.jsx("div", { className: gridClasses, ...rest, children: children }));
 };
 
+const bulmaCssVars = [
+    '--bulma-scheme-h',
+    '--bulma-scheme-s',
+    '--bulma-light-l',
+    '--bulma-light-invert-l',
+    '--bulma-dark-l',
+    '--bulma-dark-invert-l',
+    '--bulma-soft-l',
+    '--bulma-bold-l',
+    '--bulma-soft-invert-l',
+    '--bulma-bold-invert-l',
+    '--bulma-hover-background-l-delta',
+    '--bulma-active-background-l-delta',
+    '--bulma-hover-border-l-delta',
+    '--bulma-active-border-l-delta',
+    '--bulma-hover-color-l-delta',
+    '--bulma-active-color-l-delta',
+    '--bulma-hover-shadow-a-delta',
+    '--bulma-active-shadow-a-delta',
+    '--bulma-primary-h',
+    '--bulma-primary-s',
+    '--bulma-primary-l',
+    '--bulma-link-h',
+    '--bulma-link-s',
+    '--bulma-link-l',
+    '--bulma-info-h',
+    '--bulma-info-s',
+    '--bulma-info-l',
+    '--bulma-success-h',
+    '--bulma-success-s',
+    '--bulma-success-l',
+    '--bulma-warning-h',
+    '--bulma-warning-s',
+    '--bulma-warning-l',
+    '--bulma-danger-h',
+    '--bulma-danger-s',
+    '--bulma-danger-l',
+    '--bulma-family-primary',
+    '--bulma-family-secondary',
+    '--bulma-family-code',
+    '--bulma-size-small',
+    '--bulma-size-normal',
+    '--bulma-size-medium',
+    '--bulma-size-large',
+    '--bulma-weight-light',
+    '--bulma-weight-normal',
+    '--bulma-weight-medium',
+    '--bulma-weight-semibold',
+    '--bulma-weight-bold',
+    '--bulma-weight-extrabold',
+    '--bulma-block-spacing',
+    '--bulma-duration',
+    '--bulma-easing',
+    '--bulma-radius-small',
+    '--bulma-radius',
+    '--bulma-radius-medium',
+    '--bulma-radius-large',
+    '--bulma-radius-rounded',
+    '--bulma-speed',
+    '--bulma-arrow-color',
+    '--bulma-loading-color',
+    '--bulma-burger-h',
+    '--bulma-burger-s',
+    '--bulma-burger-l',
+    '--bulma-burger-border-radius',
+    '--bulma-burger-gap',
+    '--bulma-burger-item-height',
+    '--bulma-burger-item-width',
+    '--bulma-body-background-color',
+    '--bulma-body-size',
+    '--bulma-body-min-width',
+    '--bulma-body-rendering',
+    '--bulma-body-family',
+    '--bulma-body-overflow-x',
+    '--bulma-body-overflow-y',
+    '--bulma-body-color',
+    '--bulma-body-font-size',
+    '--bulma-body-weight',
+    '--bulma-body-line-height',
+    '--bulma-code-family',
+    '--bulma-code-padding',
+    '--bulma-code-weight',
+    '--bulma-code-size',
+    '--bulma-small-font-size',
+    '--bulma-hr-background-color',
+    '--bulma-hr-height',
+    '--bulma-hr-margin',
+    '--bulma-strong-color',
+    '--bulma-strong-weight',
+    '--bulma-pre-font-size',
+    '--bulma-pre-padding',
+    '--bulma-pre-code-font-size',
+    '--bulma-skeleton-background',
+    '--bulma-skeleton-radius',
+    '--bulma-skeleton-block-min-height',
+    '--bulma-skeleton-lines-gap',
+    '--bulma-skeleton-line-height',
+    '--bulma-breadcrumb-item-color',
+    '--bulma-breadcrumb-item-hover-color',
+    '--bulma-breadcrumb-item-active-color',
+    '--bulma-breadcrumb-item-padding-vertical',
+    '--bulma-breadcrumb-item-padding-horizontal',
+    '--bulma-breadcrumb-item-separator-color',
+    '--bulma-card-color',
+    '--bulma-card-background-color',
+    '--bulma-card-shadow',
+    '--bulma-card-radius',
+    '--bulma-card-header-background-color',
+    '--bulma-card-header-color',
+    '--bulma-card-header-padding',
+    '--bulma-card-header-shadow',
+    '--bulma-card-header-weight',
+    '--bulma-card-content-background-color',
+    '--bulma-card-content-padding',
+    '--bulma-card-footer-background-color',
+    '--bulma-card-footer-border-top',
+    '--bulma-card-footer-padding',
+    '--bulma-card-media-margin',
+    '--bulma-dropdown-menu-min-width',
+    '--bulma-dropdown-content-background-color',
+    '--bulma-dropdown-content-offset',
+    '--bulma-dropdown-content-padding-bottom',
+    '--bulma-dropdown-content-padding-top',
+    '--bulma-dropdown-content-radius',
+    '--bulma-dropdown-content-shadow',
+    '--bulma-dropdown-content-z',
+    '--bulma-dropdown-item-h',
+    '--bulma-dropdown-item-s',
+    '--bulma-dropdown-item-l',
+    '--bulma-dropdown-item-background-l',
+    '--bulma-dropdown-item-background-l-delta',
+    '--bulma-dropdown-item-hover-background-l-delta',
+    '--bulma-dropdown-item-active-background-l-delta',
+    '--bulma-dropdown-item-color-l',
+    '--bulma-dropdown-item-selected-h',
+    '--bulma-dropdown-item-selected-s',
+    '--bulma-dropdown-item-selected-l',
+    '--bulma-dropdown-item-selected-background-l',
+    '--bulma-dropdown-item-selected-color-l',
+    '--bulma-dropdown-divider-background-color',
+    '--bulma-menu-item-h',
+    '--bulma-menu-item-s',
+    '--bulma-menu-item-l',
+    '--bulma-menu-item-background-l',
+    '--bulma-menu-item-background-l-delta',
+    '--bulma-menu-item-hover-background-l-delta',
+    '--bulma-menu-item-active-background-l-delta',
+    '--bulma-menu-item-color-l',
+    '--bulma-menu-item-radius',
+    '--bulma-menu-item-selected-h',
+    '--bulma-menu-item-selected-s',
+    '--bulma-menu-item-selected-l',
+    '--bulma-menu-item-selected-background-l',
+    '--bulma-menu-item-selected-color-l',
+    '--bulma-menu-list-border-left',
+    '--bulma-menu-list-line-height',
+    '--bulma-menu-list-link-padding',
+    '--bulma-menu-nested-list-margin',
+    '--bulma-menu-nested-list-padding-left',
+    '--bulma-menu-label-color',
+    '--bulma-menu-label-font-size',
+    '--bulma-menu-label-letter-spacing',
+    '--bulma-menu-label-spacing',
+    '--bulma-message-h',
+    '--bulma-message-s',
+    '--bulma-message-background-l',
+    '--bulma-message-border-l',
+    '--bulma-message-border-l-delta',
+    '--bulma-message-border-style',
+    '--bulma-message-border-width',
+    '--bulma-message-color-l',
+    '--bulma-message-radius',
+    '--bulma-message-header-weight',
+    '--bulma-message-header-padding',
+    '--bulma-message-header-radius',
+    '--bulma-message-header-body-border-width',
+    '--bulma-message-header-background-l',
+    '--bulma-message-header-color-l',
+    '--bulma-message-body-border-width',
+    '--bulma-message-body-color',
+    '--bulma-message-body-padding',
+    '--bulma-message-body-radius',
+    '--bulma-message-body-pre-code-background-color',
+    '--bulma-modal-z',
+    '--bulma-modal-background-background-color',
+    '--bulma-modal-content-width',
+    '--bulma-modal-content-margin-mobile',
+    '--bulma-modal-content-spacing-mobile',
+    '--bulma-modal-content-spacing-tablet',
+    '--bulma-modal-close-dimensions',
+    '--bulma-modal-close-right',
+    '--bulma-modal-close-top',
+    '--bulma-modal-card-spacing',
+    '--bulma-modal-card-head-background-color',
+    '--bulma-modal-card-head-padding',
+    '--bulma-modal-card-head-radius',
+    '--bulma-modal-card-title-color',
+    '--bulma-modal-card-title-line-height',
+    '--bulma-modal-card-title-size',
+    '--bulma-modal-card-foot-background-color',
+    '--bulma-modal-card-foot-radius',
+    '--bulma-modal-card-body-background-color',
+    '--bulma-modal-card-body-padding',
+    '--bulma-navbar-h',
+    '--bulma-navbar-s',
+    '--bulma-navbar-l',
+    '--bulma-navbar-background-color',
+    '--bulma-navbar-box-shadow-size',
+    '--bulma-navbar-box-shadow-color',
+    '--bulma-navbar-padding-vertical',
+    '--bulma-navbar-padding-horizontal',
+    '--bulma-navbar-z',
+    '--bulma-navbar-fixed-z',
+    '--bulma-navbar-item-background-a',
+    '--bulma-navbar-item-background-l',
+    '--bulma-navbar-item-background-l-delta',
+    '--bulma-navbar-item-hover-background-l-delta',
+    '--bulma-navbar-item-active-background-l-delta',
+    '--bulma-navbar-item-color-l',
+    '--bulma-navbar-item-selected-h',
+    '--bulma-navbar-item-selected-s',
+    '--bulma-navbar-item-selected-l',
+    '--bulma-navbar-item-selected-background-l',
+    '--bulma-navbar-item-selected-color-l',
+    '--bulma-navbar-item-img-max-height',
+    '--bulma-navbar-burger-color',
+    '--bulma-navbar-tab-hover-background-color',
+    '--bulma-navbar-tab-hover-border-bottom-color',
+    '--bulma-navbar-tab-active-color',
+    '--bulma-navbar-tab-active-background-color',
+    '--bulma-navbar-tab-active-border-bottom-color',
+    '--bulma-navbar-tab-active-border-bottom-style',
+    '--bulma-navbar-tab-active-border-bottom-width',
+    '--bulma-navbar-dropdown-background-color',
+    '--bulma-navbar-dropdown-border-l',
+    '--bulma-navbar-dropdown-border-color',
+    '--bulma-navbar-dropdown-border-style',
+    '--bulma-navbar-dropdown-border-width',
+    '--bulma-navbar-dropdown-offset',
+    '--bulma-navbar-dropdown-arrow',
+    '--bulma-navbar-dropdown-radius',
+    '--bulma-navbar-dropdown-z',
+    '--bulma-navbar-dropdown-boxed-radius',
+    '--bulma-navbar-dropdown-boxed-shadow',
+    '--bulma-navbar-dropdown-item-h',
+    '--bulma-navbar-dropdown-item-s',
+    '--bulma-navbar-dropdown-item-l',
+    '--bulma-navbar-dropdown-item-background-l',
+    '--bulma-navbar-dropdown-item-color-l',
+    '--bulma-navbar-divider-background-l',
+    '--bulma-navbar-divider-height',
+    '--bulma-navbar-bottom-box-shadow-size',
+    '--bulma-pagination-margin',
+    '--bulma-pagination-min-width',
+    '--bulma-pagination-item-h',
+    '--bulma-pagination-item-s',
+    '--bulma-pagination-item-l',
+    '--bulma-pagination-item-background-l-delta',
+    '--bulma-pagination-item-hover-background-l-delta',
+    '--bulma-pagination-item-active-background-l-delta',
+    '--bulma-pagination-item-border-style',
+    '--bulma-pagination-item-border-width',
+    '--bulma-pagination-item-border-l',
+    '--bulma-pagination-item-border-l-delta',
+    '--bulma-pagination-item-hover-border-l-delta',
+    '--bulma-pagination-item-active-border-l-delta',
+    '--bulma-pagination-item-focus-border-l-delta',
+    '--bulma-pagination-item-color-l',
+    '--bulma-pagination-item-font-size',
+    '--bulma-pagination-item-margin',
+    '--bulma-pagination-item-padding-left',
+    '--bulma-pagination-item-padding-right',
+    '--bulma-pagination-item-outer-shadow-h',
+    '--bulma-pagination-item-outer-shadow-s',
+    '--bulma-pagination-item-outer-shadow-l',
+    '--bulma-pagination-item-outer-shadow-a',
+    '--bulma-pagination-nav-padding-left',
+    '--bulma-pagination-nav-padding-right',
+    '--bulma-pagination-disabled-color',
+    '--bulma-pagination-disabled-background-color',
+    '--bulma-pagination-disabled-border-color',
+    '--bulma-pagination-current-color',
+    '--bulma-pagination-current-background-color',
+    '--bulma-pagination-current-border-color',
+    '--bulma-pagination-ellipsis-color',
+    '--bulma-pagination-shadow-inset',
+    '--bulma-pagination-selected-item-h',
+    '--bulma-pagination-selected-item-s',
+    '--bulma-pagination-selected-item-l',
+    '--bulma-pagination-selected-item-background-l',
+    '--bulma-pagination-selected-item-border-l',
+    '--bulma-pagination-selected-item-color-l',
+    '--bulma-panel-margin',
+    '--bulma-panel-item-border',
+    '--bulma-panel-radius',
+    '--bulma-panel-shadow',
+    '--bulma-panel-heading-line-height',
+    '--bulma-panel-heading-padding',
+    '--bulma-panel-heading-radius',
+    '--bulma-panel-heading-size',
+    '--bulma-panel-heading-weight',
+    '--bulma-panel-tabs-font-size',
+    '--bulma-panel-tab-border-bottom-color',
+    '--bulma-panel-tab-border-bottom-style',
+    '--bulma-panel-tab-border-bottom-width',
+    '--bulma-panel-tab-active-color',
+    '--bulma-panel-list-item-color',
+    '--bulma-panel-list-item-hover-color',
+    '--bulma-panel-block-color',
+    '--bulma-panel-block-hover-background-color',
+    '--bulma-panel-block-active-border-left-color',
+    '--bulma-panel-block-active-color',
+    '--bulma-panel-block-active-icon-color',
+    '--bulma-panel-icon-color',
+    '--bulma-tabs-border-bottom-color',
+    '--bulma-tabs-border-bottom-style',
+    '--bulma-tabs-border-bottom-width',
+    '--bulma-tabs-link-color',
+    '--bulma-tabs-link-hover-border-bottom-color',
+    '--bulma-tabs-link-hover-color',
+    '--bulma-tabs-link-active-border-bottom-color',
+    '--bulma-tabs-link-active-color',
+    '--bulma-tabs-link-padding',
+    '--bulma-tabs-boxed-link-radius',
+    '--bulma-tabs-boxed-link-hover-background-color',
+    '--bulma-tabs-boxed-link-hover-border-bottom-color',
+    '--bulma-tabs-boxed-link-active-background-color',
+    '--bulma-tabs-boxed-link-active-border-color',
+    '--bulma-tabs-boxed-link-active-border-bottom-color',
+    '--bulma-tabs-toggle-link-border-color',
+    '--bulma-tabs-toggle-link-border-style',
+    '--bulma-tabs-toggle-link-border-width',
+    '--bulma-tabs-toggle-link-hover-background-color',
+    '--bulma-tabs-toggle-link-hover-border-color',
+    '--bulma-tabs-toggle-link-radius',
+    '--bulma-tabs-toggle-link-active-background-color',
+    '--bulma-tabs-toggle-link-active-border-color',
+    '--bulma-tabs-toggle-link-active-color',
+    '--bulma-box-background-color',
+    '--bulma-box-color',
+    '--bulma-box-radius',
+    '--bulma-box-shadow',
+    '--bulma-box-padding',
+    '--bulma-box-link-hover-shadow',
+    '--bulma-box-link-active-shadow',
+    '--bulma-content-heading-color',
+    '--bulma-content-heading-weight',
+    '--bulma-content-heading-line-height',
+    '--bulma-content-block-margin-bottom',
+    '--bulma-content-blockquote-background-color',
+    '--bulma-content-blockquote-border-left',
+    '--bulma-content-blockquote-padding',
+    '--bulma-content-pre-padding',
+    '--bulma-content-table-cell-border',
+    '--bulma-content-table-cell-border-width',
+    '--bulma-content-table-cell-padding',
+    '--bulma-content-table-cell-heading-color',
+    '--bulma-content-table-head-cell-border-width',
+    '--bulma-content-table-head-cell-color',
+    '--bulma-content-table-body-last-row-cell-border-bottom-width',
+    '--bulma-content-table-foot-cell-border-width',
+    '--bulma-content-table-foot-cell-color',
+    '--bulma-delete-dimensions',
+    '--bulma-delete-background-l',
+    '--bulma-delete-background-alpha',
+    '--bulma-delete-color',
+    '--bulma-icon-dimensions',
+    '--bulma-icon-dimensions-small',
+    '--bulma-icon-dimensions-medium',
+    '--bulma-icon-dimensions-large',
+    '--bulma-icon-text-spacing',
+    '--bulma-notification-h',
+    '--bulma-notification-s',
+    '--bulma-notification-background-l',
+    '--bulma-notification-color-l',
+    '--bulma-notification-code-background-color',
+    '--bulma-notification-radius',
+    '--bulma-notification-padding',
+    '--bulma-progress-border-radius',
+    '--bulma-progress-bar-background-color',
+    '--bulma-progress-value-background-color',
+    '--bulma-progress-indeterminate-duration',
+    '--bulma-table-color',
+    '--bulma-table-background-color',
+    '--bulma-table-cell-border-color',
+    '--bulma-table-cell-border-style',
+    '--bulma-table-cell-border-width',
+    '--bulma-table-cell-padding',
+    '--bulma-table-cell-heading-color',
+    '--bulma-table-cell-text-align',
+    '--bulma-table-head-cell-border-width',
+    '--bulma-table-head-cell-color',
+    '--bulma-table-foot-cell-border-width',
+    '--bulma-table-foot-cell-color',
+    '--bulma-table-head-background-color',
+    '--bulma-table-body-background-color',
+    '--bulma-table-foot-background-color',
+    '--bulma-table-row-hover-background-color',
+    '--bulma-table-row-active-background-color',
+    '--bulma-table-row-active-color',
+    '--bulma-table-striped-row-even-background-color',
+    '--bulma-table-striped-row-even-hover-background-color',
+    '--bulma-tag-h',
+    '--bulma-tag-s',
+    '--bulma-tag-background-l',
+    '--bulma-tag-background-l-delta',
+    '--bulma-tag-hover-background-l-delta',
+    '--bulma-tag-active-background-l-delta',
+    '--bulma-tag-color-l',
+    '--bulma-tag-radius',
+    '--bulma-tag-delete-margin',
+    '--bulma-title-color',
+    '--bulma-title-family',
+    '--bulma-title-size',
+    '--bulma-title-weight',
+    '--bulma-title-line-height',
+    '--bulma-title-strong-color',
+    '--bulma-title-strong-weight',
+    '--bulma-title-sub-size',
+    '--bulma-title-sup-size',
+    '--bulma-subtitle-color',
+    '--bulma-subtitle-family',
+    '--bulma-subtitle-size',
+    '--bulma-subtitle-weight',
+    '--bulma-subtitle-line-height',
+    '--bulma-subtitle-strong-color',
+    '--bulma-subtitle-strong-weight',
+    '--bulma-control-radius',
+    '--bulma-control-radius-small',
+    '--bulma-control-border-width',
+    '--bulma-control-height',
+    '--bulma-control-line-height',
+    '--bulma-control-padding-vertical',
+    '--bulma-control-padding-horizontal',
+    '--bulma-control-size',
+    '--bulma-control-focus-shadow-l',
+    '--bulma-file-radius',
+    '--bulma-file-name-border-color',
+    '--bulma-file-name-border-style',
+    '--bulma-file-name-border-width',
+    '--bulma-file-name-max-width',
+    '--bulma-file-h',
+    '--bulma-file-s',
+    '--bulma-file-background-l',
+    '--bulma-file-background-l-delta',
+    '--bulma-file-hover-background-l-delta',
+    '--bulma-file-active-background-l-delta',
+    '--bulma-file-border-l',
+    '--bulma-file-border-l-delta',
+    '--bulma-file-hover-border-l-delta',
+    '--bulma-file-active-border-l-delta',
+    '--bulma-file-cta-color-l',
+    '--bulma-file-name-color-l',
+    '--bulma-file-color-l-delta',
+    '--bulma-file-hover-color-l-delta',
+    '--bulma-file-active-color-l-delta',
+    '--bulma-input-h',
+    '--bulma-input-s',
+    '--bulma-input-l',
+    '--bulma-input-border-style',
+    '--bulma-input-border-l',
+    '--bulma-input-border-l-delta',
+    '--bulma-input-hover-border-l-delta',
+    '--bulma-input-active-border-l-delta',
+    '--bulma-input-focus-h',
+    '--bulma-input-focus-s',
+    '--bulma-input-focus-l',
+    '--bulma-input-focus-shadow-size',
+    '--bulma-input-focus-shadow-alpha',
+    '--bulma-input-color-l',
+    '--bulma-input-background-l',
+    '--bulma-input-background-l-delta',
+    '--bulma-input-height',
+    '--bulma-input-shadow',
+    '--bulma-input-placeholder-color',
+    '--bulma-input-disabled-color',
+    '--bulma-input-disabled-background-color',
+    '--bulma-input-disabled-border-color',
+    '--bulma-input-disabled-placeholder-color',
+    '--bulma-input-arrow',
+    '--bulma-input-icon-color',
+    '--bulma-input-icon-hover-color',
+    '--bulma-input-icon-focus-color',
+    '--bulma-input-radius',
+    '--bulma-column-gap',
+    '--bulma-grid-gap',
+    '--bulma-grid-column-count',
+    '--bulma-grid-column-min',
+    '--bulma-grid-cell-column-span',
+    '--bulma-grid-cell-column-start',
+    '--bulma-footer-background-color',
+    '--bulma-footer-color',
+    '--bulma-footer-padding',
+    '--bulma-hero-body-padding',
+    '--bulma-hero-body-padding-tablet',
+    '--bulma-hero-body-padding-small',
+    '--bulma-hero-body-padding-medium',
+    '--bulma-hero-body-padding-large',
+    '--bulma-media-border-color',
+    '--bulma-media-border-size',
+    '--bulma-media-spacing',
+    '--bulma-media-spacing-large',
+    '--bulma-media-content-spacing',
+    '--bulma-media-level-1-spacing',
+    '--bulma-media-level-1-content-spacing',
+    '--bulma-media-level-2-spacing',
+    '--bulma-section-padding',
+    '--bulma-section-padding-desktop',
+    '--bulma-section-padding-medium',
+    '--bulma-section-padding-large',
+];
+function cssVarToProp(varName) {
+    return varName
+        .replace(/^--bulma-/, '')
+        .split('-')
+        .map((part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+const bulmaVarPropMap = Object.fromEntries(bulmaCssVars.map(cssVar => [cssVarToProp(cssVar), cssVar]));
+const Theme = ({ bulmaVars = {}, children, className, isRoot = false, ...restProps }) => {
+    const { bulmaVarProps, otherProps } = useMemo(() => {
+        const varProps = {};
+        const otherPropsObj = {};
+        for (const [key, value] of Object.entries(restProps)) {
+            if (Object.prototype.hasOwnProperty.call(bulmaVarPropMap, key)) {
+                varProps[key] = value;
+            }
+            else {
+                otherPropsObj[key] = value;
+            }
+        }
+        return { bulmaVarProps: varProps, otherProps: otherPropsObj };
+    }, [restProps]);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(otherProps);
+    const mergedVars = useMemo(() => {
+        const vars = { ...bulmaVars };
+        for (const [propName, cssVar] of Object.entries(bulmaVarPropMap)) {
+            if (bulmaVarProps[propName] !== undefined) {
+                vars[cssVar] = bulmaVarProps[propName];
+            }
+        }
+        return vars;
+    }, [bulmaVars, bulmaVarProps]);
+    useEffect(() => {
+        if (!isRoot) {
+            return;
+        }
+        const validVars = Object.entries(mergedVars).filter(([key, value]) => bulmaCssVars.includes(key) && value);
+        if (validVars.length === 0) {
+            return;
+        }
+        const styleId = 'bestax-bulma-theme-vars';
+        let styleElement = document.getElementById(styleId);
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            styleElement.id = styleId;
+            document.head.appendChild(styleElement);
+        }
+        const cssRules = validVars
+            .map(([key, value]) => `${key}: ${value};`)
+            .join(' ');
+        styleElement.textContent = `:root { ${cssRules} }`;
+        return () => {
+            const element = document.getElementById(styleId);
+            if (element) {
+                element.remove();
+            }
+        };
+    }, [mergedVars, isRoot]);
+    const style = useMemo(() => {
+        if (isRoot) {
+            return {};
+        }
+        const styleObj = {};
+        for (const [key, value] of Object.entries(mergedVars)) {
+            if (bulmaCssVars.includes(key) && value) {
+                styleObj[key] = value;
+            }
+        }
+        return styleObj;
+    }, [mergedVars, isRoot]);
+    const combinedClassName = useMemo(() => {
+        if (isRoot) {
+            return '';
+        }
+        return classNames(className, bulmaHelperClasses);
+    }, [className, bulmaHelperClasses, isRoot]);
+    return isRoot ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children })) : (jsxRuntimeExports.jsx("div", { className: combinedClassName || undefined, style: style, ...rest, children: children }));
+};
+
 const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
@@ -1893,29 +2554,40 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
             breakpointClass = `is-${breakpoint}`;
         }
     }
-    const containerClasses = classNames('container', {
+    const mainClass = usePrefixedClassNames('container');
+    const containerModifiers = usePrefixedClassNames('', {
         'is-fluid': fluid,
         'is-widescreen': widescreen,
         'is-fullhd': fullhd,
-    }, breakpointClass, className, bulmaHelperClasses);
+    });
+    const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');
+    const containerClasses = classNames(mainClass, containerModifiers, prefixedBreakpointClass, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("div", { className: containerClasses, ...rest, children: children }));
 };
 
-const Footer = ({ as = 'footer', className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
     const Tag = as;
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames('footer', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = usePrefixedClassNames('footer');
+    const footerClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx(Tag, { className: footerClasses, ...rest, children: children }));
 };
 
 const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color,
         backgroundColor: bgColor,
         ...props,
     });
-    const heroClasses = classNames('hero', bulmaHelperClasses, className, color && `is-${color}`, size && size !== 'fullheight-with-navbar' && `is-${size}`, {
+    const mainClass = usePrefixedClassNames('hero', {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size && size !== 'fullheight-with-navbar',
         'is-fullheight-with-navbar': fullheightWithNavbar || size === 'fullheight-with-navbar',
     });
+    const heroClasses = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("section", { className: heroClasses, ...rest, children: children }));
 };
 const HeroHead = ({ className, children, color, bgColor, textColor, ...props }) => {
@@ -1924,7 +2596,9 @@ const HeroHead = ({ className, children, color, bgColor, textColor, ...props })
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-head', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = usePrefixedClassNames('hero-head');
+    const heroHeadClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: heroHeadClasses, ...rest, children: children }));
 };
 const HeroBody = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1932,7 +2606,9 @@ const HeroBody = ({ className, children, color, bgColor, textColor, ...props })
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-body', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = usePrefixedClassNames('hero-body');
+    const heroBodyClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: heroBodyClasses, ...rest, children: children }));
 };
 const HeroFoot = ({ className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1940,71 +2616,126 @@ const HeroFoot = ({ className, children, color, bgColor, textColor, ...props })
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-foot', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = usePrefixedClassNames('hero-foot');
+    const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: heroFootClasses, ...rest, children: children }));
 };
 Hero.Head = HeroHead;
 Hero.Body = HeroBody;
 Hero.Foot = HeroFoot;
 
-const Level = ({ isMobile, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("nav", { className: classNames('level', bulmaHelperClasses, className, {
-            'is-mobile': isMobile,
-        }), ...rest, children: children }));
+const Level = ({ isMobile, className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('level', {
+        'is-mobile': isMobile,
+    });
+    const levelClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("nav", { className: levelClasses, ...rest, children: children }));
 };
-const LevelLeft = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("div", { className: classNames('level-left', bulmaHelperClasses, className), ...rest, children: children }));
+const LevelLeft = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('level-left');
+    const levelLeftClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: levelLeftClasses, ...rest, children: children }));
 };
-const LevelRight = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("div", { className: classNames('level-right', bulmaHelperClasses, className), ...rest, children: children }));
+const LevelRight = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('level-right');
+    const levelRightClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: levelRightClasses, ...rest, children: children }));
 };
-const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, target, rel, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, target, rel, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
     const Tag = as;
+    const mainClass = usePrefixedClassNames('level-item', {
+        'has-text-centered': hasTextCentered,
+    });
+    const levelItemClasses = classNames(mainClass, bulmaHelperClasses, className);
     if (Tag === 'a') {
-        return (jsxRuntimeExports.jsx("a", { className: classNames('level-item', bulmaHelperClasses, className, {
-                'has-text-centered': hasTextCentered,
-            }), href: href, target: target, rel: rel, ...rest, children: children }));
+        return (jsxRuntimeExports.jsx("a", { className: levelItemClasses, href: href, target: target, rel: rel, ...rest, children: children }));
     }
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames('level-item', bulmaHelperClasses, className, {
-            'has-text-centered': hasTextCentered,
-        }), ...rest, children: children }));
+    return (jsxRuntimeExports.jsx(Tag, { className: levelItemClasses, ...rest, children: children }));
 };
 Level.Left = LevelLeft;
 Level.Right = LevelRight;
 Level.Item = LevelItem;
 
-const Media = ({ as = 'article', className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+const Media = ({ as = 'article', className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
     const Tag = as;
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames('media', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = usePrefixedClassNames('media');
+    const mediaClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx(Tag, { className: mediaClasses, ...rest, children: children }));
 };
-const MediaLeft = ({ as = 'figure', className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
     const Tag = as;
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames('media-left', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = usePrefixedClassNames('media-left');
+    const mediaLeftClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx(Tag, { className: mediaLeftClasses, ...rest, children: children }));
 };
-const MediaContent = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("div", { className: classNames('media-content', bulmaHelperClasses, className), ...rest, children: children }));
+const MediaContent = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('media-content');
+    const mediaContentClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: mediaContentClasses, ...rest, children: children }));
 };
-const MediaRight = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("div", { className: classNames('media-right', bulmaHelperClasses, className), ...rest, children: children }));
+const MediaRight = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('media-right');
+    const mediaRightClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntimeExports.jsx("div", { className: mediaRightClasses, ...rest, children: children }));
 };
-Media.Left = MediaLeft;
-Media.Content = MediaContent;
-Media.Right = MediaRight;
+const MediaWithSubcomponents = Media;
+MediaWithSubcomponents.Left = MediaLeft;
+MediaWithSubcomponents.Content = MediaContent;
+MediaWithSubcomponents.Right = MediaRight;
 
-const Section = ({ size, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const sectionClasses = classNames('section', className, bulmaHelperClasses, {
+const Section = ({ size, className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor !== null && textColor !== void 0 ? textColor : color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('section');
+    const sectionModifiers = usePrefixedClassNames('', {
         [`is-${size}`]: size,
     });
+    const sectionClasses = classNames(mainClass, sectionModifiers, className, bulmaHelperClasses);
     return (jsxRuntimeExports.jsx("section", { className: sectionClasses, ...rest, children: children }));
 };
 
-export { Block, Box, Breadcrumb, Button, Buttons, Card, Cell, Checkbox, Checkboxes, Column, Columns, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, Skeleton, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Title, Tr, __test_exports__, classNames, isBrowser, useBulmaClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Block, Box, Breadcrumb, Button, Buttons, Card, Cell, Checkbox, Checkboxes, Column, Columns, ConfigProvider, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, Skeleton, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Theme, Title, Tr, __test_exports__, classNames, createPrefixedClassNames, isBrowser, prefixedClassNames, useBulmaClasses, useClassPrefix, useConfig, usePrefixedClass, usePrefixedClassNames, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map