@allxsmith/bestax-bulma 2.0.0 → 2.0.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, createContext, useContext, useState, useRef, useEffect, 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',
@@ -501,6 +564,11 @@ const validColorShades = [
     '90',
     '95',
     'invert',
+    'light',
+    'dark',
+    'soft',
+    'bold',
+    'on-scheme',
 ];
 const validSizes$1 = ['0', '1', '2', '3', '4', '5', '6', 'auto'];
 const validTextSizes = ['1', '2', '3', '4', '5', '6', '7'];
@@ -537,7 +605,7 @@ const validDisplays = [
     'inline-block',
     'inline-flex',
 ];
-const validVisibilities = ['hidden', 'sr-only'];
+const validVisibilities = ['hidden', 'sr-only', 'invisible'];
 const validFlexDirections = [
     'row',
     'row-reverse',
@@ -583,7 +651,7 @@ const validAlignSelfs = [
     'baseline',
     'stretch',
 ];
-const validFlexGrowShrink = ['0', '1'];
+const validFlexGrowShrink = ['0', '1', '2', '3', '4', '5'];
 const validViewports = [
     'mobile',
     'tablet',
@@ -592,101 +660,196 @@ 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, backgroundColorShade, 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, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityDesktop, visibilityWidescreen, visibilityFullhd, skeleton, clearfix, relative, ...rest } = props;
     const bulmaHelperClasses = useMemo(() => {
         const classes = [];
-        const addClass = (prefix, value, validValues) => {
-            if (value && (!validValues.length || validValues.includes(value))) {
-                const className = viewport && validViewports.includes(viewport)
+        const addPrefixedClass = (className) => {
+            classes.push(classPrefix ? `${classPrefix}${className}` : className);
+        };
+        const addClass = (prefix, value, validValues, supportsViewport = false) => {
+            if (value && validValues.includes(value)) {
+                const className = supportsViewport && viewport && validViewports.includes(viewport)
                     ? `${prefix}-${value}-${viewport}`
                     : `${prefix}-${value}`;
-                classes.push(className);
+                addPrefixedClass(className);
+            }
+        };
+        const addClassNoViewport = (prefix, value, validValues) => {
+            if (value && (!validValues.length || validValues.includes(value))) {
+                addPrefixedClass(`${prefix}-${value}`);
             }
         };
         const addColorClass = (prefix, value, shade) => {
             if (!value || ![...validColors, 'inherit', 'current'].includes(value))
                 return;
             if (shade && validColorShades.includes(shade)) {
-                const className = prefix === 'has-text' && viewport && validViewports.includes(viewport)
-                    ? `${prefix}-${value}-${shade}-${viewport}`
-                    : `${prefix}-${value}-${shade}`;
-                classes.push(className);
+                const className = `${prefix}-${value}-${shade}`;
+                addPrefixedClass(className);
             }
             else {
-                addClass(prefix, value, [...validColors, 'inherit', 'current']);
+                addClass(prefix, value, [...validColors, 'inherit', 'current'], false);
             }
         };
         addColorClass('has-text', color, colorShade);
-        addColorClass('has-background', backgroundColor, colorShade);
-        addClass('m', m, validSizes$1);
-        addClass('mt', mt, validSizes$1);
-        addClass('mr', mr, validSizes$1);
-        addClass('mb', mb, validSizes$1);
-        addClass('ml', ml, validSizes$1);
-        addClass('mx', mx, validSizes$1);
-        addClass('my', my, validSizes$1);
-        addClass('p', p, validSizes$1);
-        addClass('pt', pt, validSizes$1);
-        addClass('pr', pr, validSizes$1);
-        addClass('pb', pb, validSizes$1);
-        addClass('pl', pl, validSizes$1);
-        addClass('px', px, validSizes$1);
-        addClass('py', py, validSizes$1);
-        addClass('is-size', textSize, validTextSizes);
-        addClass('has-text', textAlign, validAlignments$1);
-        addClass('is', textTransform, validTextTransforms);
-        addClass('has-text-weight', textWeight, validTextWeights);
-        addClass('is-family', fontFamily, validFontFamilies);
-        addClass('is', display, validDisplays);
+        addColorClass('has-background', backgroundColor, backgroundColorShade);
+        addClassNoViewport('m', m, validSizes$1);
+        addClassNoViewport('mt', mt, validSizes$1);
+        addClassNoViewport('mr', mr, validSizes$1);
+        addClassNoViewport('mb', mb, validSizes$1);
+        addClassNoViewport('ml', ml, validSizes$1);
+        addClassNoViewport('mx', mx, validSizes$1);
+        addClassNoViewport('my', my, validSizes$1);
+        addClassNoViewport('p', p, validSizes$1);
+        addClassNoViewport('pt', pt, validSizes$1);
+        addClassNoViewport('pr', pr, validSizes$1);
+        addClassNoViewport('pb', pb, validSizes$1);
+        addClassNoViewport('pl', pl, validSizes$1);
+        addClassNoViewport('px', px, validSizes$1);
+        addClassNoViewport('py', py, validSizes$1);
+        addClass('is-size', textSize, validTextSizes, true);
+        addClass('has-text', textAlign, validAlignments$1, true);
+        addClassNoViewport('is', textTransform, validTextTransforms);
+        addClassNoViewport('has-text-weight', textWeight, validTextWeights);
+        addClassNoViewport('is-family', fontFamily, validFontFamilies);
+        const addViewportSpecificTextSizeClass = (value, viewportSuffix) => {
+            if (value && validTextSizes.includes(value)) {
+                addPrefixedClass(`is-size-${value}${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificTextSizeClass(textSizeMobile, '-mobile');
+        addViewportSpecificTextSizeClass(textSizeTablet, '-tablet');
+        addViewportSpecificTextSizeClass(textSizeDesktop, '-desktop');
+        addViewportSpecificTextSizeClass(textSizeWidescreen, '-widescreen');
+        addViewportSpecificTextSizeClass(textSizeFullhd, '-fullhd');
+        const addViewportSpecificTextAlignClass = (value, viewportSuffix) => {
+            if (value && validAlignments$1.includes(value)) {
+                addPrefixedClass(`has-text-${value}${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificTextAlignClass(textAlignMobile, '-mobile');
+        addViewportSpecificTextAlignClass(textAlignTablet, '-tablet');
+        addViewportSpecificTextAlignClass(textAlignDesktop, '-desktop');
+        addViewportSpecificTextAlignClass(textAlignWidescreen, '-widescreen');
+        addViewportSpecificTextAlignClass(textAlignFullhd, '-fullhd');
+        const addViewportSpecificVisibilityClass = (value, viewportSuffix) => {
+            if (value === 'hidden') {
+                addPrefixedClass(`is-hidden${viewportSuffix}`);
+            }
+            else if (value === 'sr-only') {
+                addPrefixedClass(`is-sr-only${viewportSuffix}`);
+            }
+            else if (value === 'invisible') {
+                addPrefixedClass(`is-invisible${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificVisibilityClass(visibilityMobile, '-mobile');
+        addViewportSpecificVisibilityClass(visibilityTablet, '-tablet');
+        addViewportSpecificVisibilityClass(visibilityDesktop, '-desktop');
+        addViewportSpecificVisibilityClass(visibilityWidescreen, '-widescreen');
+        addViewportSpecificVisibilityClass(visibilityFullhd, '-fullhd');
+        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], true);
+            }
+        }
         if (visibility) {
-            if (visibility === 'hidden' &&
+            if ((visibility === 'hidden' || visibility === 'invisible') &&
                 viewport &&
                 validViewports.includes(viewport)) {
-                classes.push(`is-hidden-${viewport}`);
+                addPrefixedClass(`is-${visibility}-${viewport}`);
             }
             else if (validVisibilities.includes(visibility)) {
-                classes.push(`is-${visibility}`);
+                addPrefixedClass(`is-${visibility}`);
             }
         }
-        if (display === 'flex' || display === 'inline-flex') {
-            addClass('is-flex-direction', flexDirection, validFlexDirections);
-            addClass('is-flex-wrap', flexWrap, validFlexWraps);
-            addClass('is-justify-content', justifyContent, validJustifyContents);
-            addClass('is-align-content', alignContent, validAlignContents);
-            addClass('is-align-items', alignItems, validAlignItems);
-            addClass('is-align-self', alignSelf, validAlignSelfs);
-            addClass('is-flex-grow', flexGrow, validFlexGrowShrink);
-            addClass('is-flex-shrink', flexShrink, validFlexGrowShrink);
+        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) {
+            addClassNoViewport('is-flex-direction', flexDirection, validFlexDirections);
+            addClassNoViewport('is-flex-wrap', flexWrap, validFlexWraps);
+            addClassNoViewport('is-justify-content', justifyContent, validJustifyContents);
+            addClassNoViewport('is-align-content', alignContent, validAlignContents);
+            addClassNoViewport('is-align-items', alignItems, validAlignItems);
         }
+        addClassNoViewport('is-align-self', alignSelf, validAlignSelfs);
+        addClassNoViewport('is-flex-grow', flexGrow, validFlexGrowShrink);
+        addClassNoViewport('is-flex-shrink', flexShrink, validFlexGrowShrink);
         if (float) {
-            addClass('is-pulled', float, ['left', 'right']);
+            addClassNoViewport('is-pulled', float, ['left', 'right']);
         }
         if (overflow) {
-            addClass('is', overflow, ['clipped']);
+            addClassNoViewport('is', overflow, ['clipped']);
         }
         if (overlay) {
-            classes.push('is-overlay');
+            addPrefixedClass('is-overlay');
         }
         if (interaction) {
-            addClass('is', interaction, ['unselectable', 'clickable']);
+            addClassNoViewport('is', interaction, ['unselectable', 'clickable']);
         }
         if (radius) {
-            addClass('is', radius, ['radiusless']);
+            addClassNoViewport('is', radius, ['radiusless']);
         }
         if (shadow) {
-            addClass('is', shadow, ['shadowless']);
+            addClassNoViewport('is', shadow, ['shadowless']);
         }
         if (responsive) {
-            addClass('is', responsive, ['mobile', 'narrow']);
+            addClassNoViewport('is', responsive, ['mobile', 'narrow']);
         }
         if (skeleton) {
-            classes.push('is-skeleton');
+            addPrefixedClass('is-skeleton');
+        }
+        if (clearfix) {
+            addPrefixedClass('is-clearfix');
+        }
+        if (relative) {
+            addPrefixedClass('is-relative');
         }
         return classNames(classes);
     }, [
+        classPrefix,
         color,
         backgroundColor,
         colorShade,
+        backgroundColorShade,
         m,
         mt,
         mr,
@@ -724,148 +887,87 @@ const useBulmaClasses = (props) => {
         shadow,
         responsive,
         viewport,
+        displayMobile,
+        displayTablet,
+        displayDesktop,
+        displayWidescreen,
+        displayFullhd,
         skeleton,
+        clearfix,
+        relative,
+        textSizeMobile,
+        textSizeTablet,
+        textSizeDesktop,
+        textSizeWidescreen,
+        textSizeFullhd,
+        textAlignMobile,
+        textAlignTablet,
+        textAlignDesktop,
+        textAlignWidescreen,
+        textAlignFullhd,
+        visibilityMobile,
+        visibilityTablet,
+        visibilityDesktop,
+        visibilityWidescreen,
+        visibilityFullhd,
     ]);
     return { bulmaHelperClasses, rest };
 };
 
-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 || '';
-};
-
-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 { classPrefix } = useConfig();
-    const mainClass = classPrefix ? `${classPrefix}column` : 'column';
-    const columnClasses = classNames(mainClass, ...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 { classPrefix } = useConfig();
-    const mainClass = classPrefix ? `${classPrefix}columns` : 'columns';
-    const columnsClasses = classNames(mainClass, {
-        '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 }));
 };
 
@@ -878,14 +980,13 @@ const validBreadcrumbSeparators = [
 ];
 const validBreadcrumbSizes = ['small', 'medium', 'large'];
 const Breadcrumb = ({ className, alignment, separator, size, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const mainClass = classPrefix ? `${classPrefix}breadcrumb` : 'breadcrumb';
-    const breadcrumbClasses = classNames(mainClass, 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 }) }));
 };
 
@@ -895,17 +996,28 @@ const renderFooter = (footer) => {
     const items = Array.isArray(footer) ? footer : [footer];
     return items.map((item, idx) => (jsxRuntimeExports.jsx("span", { className: "card-footer-item", children: item }, idx)));
 };
-const Card = ({ className, children, textColor, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
-    const { classPrefix } = useConfig();
+const hasCompoundComponents = (children) => {
+    return React.Children.toArray(children).some(child => {
+        if (!React.isValidElement(child))
+            return false;
+        return (child.type === CardHeader ||
+            child.type === CardContent ||
+            child.type === CardImage ||
+            child.type === CardFooter ||
+            child.type === CardFooterItem ||
+            child.type === CardHeaderIcon);
+    });
+};
+const CardComponent = ({ className, children, textColor, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}card` : 'card';
-    const cardClasses = classNames(mainClass, 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;
@@ -915,18 +1027,51 @@ const Card = ({ className, children, textColor, bgColor, hasShadow = true, heade
     };
     return (jsxRuntimeExports.jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered), image && (jsxRuntimeExports.jsx("div", { className: "card-image", children: typeof image === 'string' ? (jsxRuntimeExports.jsx("figure", { className: "image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
                 children !== null &&
-                children !== '' && jsxRuntimeExports.jsx("div", { className: "card-content", children: children }), footer && (jsxRuntimeExports.jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
-};
+                children !== '' &&
+                !hasCompoundComponents(children) && (jsxRuntimeExports.jsx("div", { className: "card-content", children: children })), typeof children !== 'undefined' &&
+                children !== null &&
+                children !== '' &&
+                hasCompoundComponents(children) &&
+                children, footer && (jsxRuntimeExports.jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
+};
+const CardHeader = ({ className, children, centered, ...props }) => {
+    const hasHeaderTitle = React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        typeof child.type === 'function' &&
+        child.type === CardHeaderTitle);
+    return (jsxRuntimeExports.jsx("header", { className: classNames('card-header', className), ...props, children: hasHeaderTitle ? (children) : (jsxRuntimeExports.jsx("div", { className: classNames('card-header-title', {
+                'is-centered': centered,
+            }), children: children })) }));
+};
+const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-header-title', { 'is-centered': centered }, className), ...props, children: children }));
+const CardHeaderIcon = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("button", { className: classNames('card-header-icon', className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
+const CardImage = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-image', className), ...props, children: children }));
+const CardContent = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-content', className), ...props, children: children }));
+const CardFooter = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("footer", { className: classNames('card-footer', className), ...props, children: children }));
+const CardFooterItem = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("span", { className: classNames('card-footer-item', className), ...props, children: children }));
+const CardWithSubComponents = CardComponent;
+const CardHeaderWithTitle = CardHeader;
+CardHeaderWithTitle.Title = CardHeaderTitle;
+CardHeaderWithTitle.Icon = CardHeaderIcon;
+CardWithSubComponents.Header = CardHeaderWithTitle;
+CardWithSubComponents.Image = CardImage;
+CardWithSubComponents.Content = CardContent;
+CardWithSubComponents.Footer = CardFooter;
+CardWithSubComponents.FooterItem = CardFooterItem;
 const __test_exports__ = { renderFooter };
 
 const isBrowser = (win, doc) => typeof win !== 'undefined' && typeof doc !== 'undefined';
 const DropdownComponent = ({ label, children, className, menuClassName, active: activeProp, up, right, hoverable, disabled, onActiveChange, closeOnClick = true, id, ...props }) => {
-    const { classPrefix } = useConfig();
     const [active, setActive] = useState(!!activeProp);
     const dropdownRef = useRef(null);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const mainClass = classPrefix ? `${classPrefix}dropdown` : 'dropdown';
-    const buttonClass = classPrefix ? `${classPrefix}button` : 'button';
+    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);
@@ -959,13 +1104,7 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
         }
     };
-    const dropdownClasses = classNames(mainClass, bulmaHelperClasses, {
-        'is-active': active,
-        'is-up': up,
-        'is-right': right,
-        'is-hoverable': hoverable,
-        'is-disabled': disabled,
-    }, className);
+    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 }) => {
@@ -980,10 +1119,9 @@ const Dropdown = Object.assign(DropdownComponent, {
 
 const MenuListLevelContext = createContext(0);
 const MenuComponent = ({ className, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const mainClass = classPrefix ? `${classPrefix}menu` : 'menu';
-    return (jsxRuntimeExports.jsx("aside", { className: classNames(mainClass, 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);
@@ -1025,21 +1163,26 @@ const Menu = Object.assign(MenuComponent, {
     Item: MenuItem,
 });
 
-const Message = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
-    const { classPrefix } = useConfig();
+const MessageComponent = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}message` : 'message';
-    const deleteClass = classPrefix ? `${classPrefix}delete` : 'delete';
-    const messageClasses = classNames(mainClass, color && `is-${color}`, className, bulmaHelperClasses);
+    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 MessageHeader = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('message-header', className), ...props, children: children }));
+const MessageBody = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('message-body', className), ...props, children: children }));
+const MessageWithSubComponents = MessageComponent;
+MessageWithSubComponents.Header = MessageHeader;
+MessageWithSubComponents.Body = MessageBody;
 
 const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -1052,25 +1195,26 @@ const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCa
         isModalCard = false;
     else
         isModalCard = !!modalCardTitle || !!modalCardFoot;
-    const mainClass = classPrefix ? `${classPrefix}modal` : 'modal';
-    const deleteClass = classPrefix ? `${classPrefix}delete` : 'delete';
-    const modalClasses = classNames(mainClass, { 'is-active': active }, className, bulmaHelperClasses);
+    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 }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}navbar` : 'navbar';
-    const navbarClasses = classNames(mainClass, 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 }) => {
@@ -1157,19 +1301,18 @@ const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRunt
         }
         : props.onClick, children: children }));
 const Pagination = ({ color, textColor, bgColor, size, align, rounded, className, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}pagination` : 'pagination';
-    const paginationClasses = classNames(mainClass, 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 }) => {
@@ -1209,15 +1352,14 @@ Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 
 const Panel = ({ color, className, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}panel` : 'panel';
-    const panelClasses = classNames(mainClass, 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 }));
@@ -1225,8 +1367,7 @@ const PanelTabs = ({ className, children, ...props }) => (jsxRuntimeExports.jsx(
 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 }) => {
-    const { classPrefix } = useConfig();
-    const inputClass = classPrefix ? `${classPrefix}input` : 'input';
+    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] }));
@@ -1240,21 +1381,19 @@ Panel.CheckboxBlock = PanelCheckboxBlock;
 Panel.ButtonBlock = PanelButtonBlock;
 
 const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, className, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}tabs` : 'tabs';
-    const tabsClass = classNames(mainClass, 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 }));
@@ -1263,176 +1402,252 @@ Tabs.List = TabList;
 Tabs.Item = TabItem;
 
 const Block = ({ className, textColor, bgColor, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}block` : 'block';
-    const blockClasses = classNames(mainClass, className, bulmaHelperClasses);
+    const bulmaClasses = usePrefixedClassNames('block');
+    const blockClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: blockClasses, ...rest, children: children }));
 };
 
 const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}box` : 'box';
-    const boxClasses = classNames(mainClass, className, bulmaHelperClasses, {
+    const bulmaClasses = usePrefixedClassNames('box', {
         'is-shadowless': !hasShadow,
     });
+    const boxClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: boxClasses, ...rest, children: children }));
 };
 
 const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as = 'button', href, onClick, target, rel, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}button` : 'button';
-    const buttonClasses = classNames(mainClass, 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 { classPrefix } = useConfig();
+    const buttonsClasses = usePrefixedClassNames('buttons', {
+        'is-centered': isCentered,
+        'is-right': isRight,
+        'has-addons': hasAddons,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}buttons` : 'buttons';
-    const buttonsClasses = classNames(mainClass, 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'];
 const Content = ({ className, textColor, bgColor, size, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}content` : 'content';
-    const contentClasses = classNames(mainClass, 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 }));
 };
 
 const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Close', disabled = false, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}delete` : 'delete';
-    const classes = classNames(mainClass, {
+    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 }));
 };
 
-function getIconClasses(library, name, libraryFeatures) {
+function getIconClasses(library, name, variant, features) {
     let baseClass = '';
     let iconClass = '';
-    let features = Array.isArray(libraryFeatures)
-        ? libraryFeatures
-        : libraryFeatures
-            ? [libraryFeatures]
+    let featureList = Array.isArray(features)
+        ? features
+        : features
+            ? [features]
             : [];
     switch (library) {
         case 'fa': {
-            const faStyle = features.find(f => ['fas', 'far', 'fab', 'fal', 'fad', 'fat'].includes(f)) || 'fas';
+            const styleMap = {
+                solid: 'fas',
+                regular: 'far',
+                brands: 'fab',
+                light: 'fal',
+                duotone: 'fad',
+                thin: 'fat',
+            };
+            const faStyle = variant ? styleMap[variant] || variant : 'fas';
             baseClass = faStyle;
             iconClass = `fa-${name}`;
-            features = features.filter(f => f !== faStyle);
-            return [baseClass, iconClass, ...features].join(' ');
+            return [baseClass, iconClass, ...featureList].join(' ');
         }
         case 'mdi':
             baseClass = 'mdi';
             iconClass = `mdi-${name}`;
-            return [baseClass, iconClass, ...features].join(' ');
-        case 'ion':
-            baseClass = 'ion';
-            iconClass = `ion-${name}`;
-            return [baseClass, iconClass, ...features].join(' ');
+            return [baseClass, iconClass, ...featureList].join(' ');
+        case 'material-icons': {
+            const styleVariants = {
+                filled: 'material-icons',
+                outlined: 'material-icons-outlined',
+                round: 'material-icons-round',
+                sharp: 'material-icons-sharp',
+            };
+            baseClass = variant
+                ? styleVariants[variant] || `material-icons-${variant}`
+                : 'material-icons';
+            return [baseClass, ...featureList].join(' ');
+        }
+        case 'material-symbols': {
+            const styleVariants = {
+                outlined: 'material-symbols-outlined',
+                rounded: 'material-symbols-rounded',
+                sharp: 'material-symbols-sharp',
+            };
+            baseClass = variant
+                ? styleVariants[variant] || `material-symbols-${variant}`
+                : 'material-symbols-outlined';
+            return [baseClass, ...featureList].join(' ');
+        }
         default:
-            return [name, ...features].join(' ');
+            return [name, ...featureList].join(' ');
     }
 }
-const Icon = ({ className, textColor, bgColor, name, library = 'fa', libraryFeatures, size, ariaLabel = 'icon', style, ...props }) => {
-    const { classPrefix } = useConfig();
+const Icon = ({ className, textColor, bgColor, name, library = 'fa', variant, features, libraryFeatures, size, ariaLabel = 'icon', style, ...restProps }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
-        ...props,
+        ...restProps,
     });
-    const mainClass = classPrefix ? `${classPrefix}icon` : 'icon';
-    const iconContainerClasses = classNames(mainClass, {
+    const bulmaClasses = usePrefixedClassNames('icon', {
         [`is-${size}`]: size,
-    }, bulmaHelperClasses, className);
-    const iClasses = getIconClasses(library, name, libraryFeatures);
+    });
+    const iconContainerClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    let finalVariant = variant;
+    let finalFeatures = features;
+    if (libraryFeatures && !variant && !features) {
+        const legacyFeatures = Array.isArray(libraryFeatures)
+            ? libraryFeatures
+            : [libraryFeatures];
+        if (library === 'fa') {
+            const faStyle = legacyFeatures.find(f => [
+                'fas',
+                'far',
+                'fab',
+                'fal',
+                'fad',
+                'fat',
+                'solid',
+                'regular',
+                'brands',
+                'light',
+                'duotone',
+                'thin',
+            ].includes(f));
+            if (faStyle) {
+                finalVariant = faStyle;
+                finalFeatures = legacyFeatures.filter(f => f !== faStyle);
+            }
+            else {
+                finalFeatures = legacyFeatures;
+            }
+        }
+        else if (library === 'material-icons' || library === 'material-symbols') {
+            const styleVariants = library === 'material-icons'
+                ? ['filled', 'outlined', 'round', 'sharp']
+                : ['outlined', 'rounded', 'sharp'];
+            const styleVariant = legacyFeatures.find(f => styleVariants.includes(f));
+            if (styleVariant) {
+                finalVariant = styleVariant;
+                finalFeatures = legacyFeatures.filter(f => f !== styleVariant);
+            }
+            else {
+                finalFeatures = legacyFeatures;
+            }
+        }
+        else {
+            finalFeatures = legacyFeatures;
+        }
+    }
+    if (library === 'ion') {
+        let ionName = name;
+        if (finalVariant === 'outline') {
+            ionName = `${name}-outline`;
+        }
+        else if (finalVariant === 'sharp') {
+            ionName = `${name}-sharp`;
+        }
+        return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("ion-icon", { name: ionName }) }));
+    }
+    const iClasses = getIconClasses(library, name, finalVariant, finalFeatures);
+    if (library === 'material-icons' || library === 'material-symbols') {
+        return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses, children: name }) }));
+    }
     return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses }) }));
 };
 
 const IconText = ({ className, textColor, bgColor, iconProps, children, items, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}icon-text` : 'icon-text';
-    const iconTextClasses = classNames(mainClass, 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 })] })) }));
 };
 
 const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}image` : 'image';
-    const imageClasses = classNames(mainClass, 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;
@@ -1443,48 +1658,42 @@ 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 }));
 };
 
 const Notification = ({ className, color, isLight, hasDelete, onDelete, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}notification` : 'notification';
-    const deleteClass = classPrefix ? `${classPrefix}delete` : 'delete';
-    const notificationClasses = classNames(mainClass, 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: deleteClass, 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 { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}progress` : 'progress';
-    const progressClasses = classNames(mainClass, 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 { classPrefix } = useConfig();
+    const linesClass = usePrefixedClassNames('skeleton-lines');
+    const blockClass = usePrefixedClassNames('skeleton-block');
     if (variant === 'lines') {
-        const linesClass = classPrefix
-            ? `${classPrefix}skeleton-lines`
-            : 'skeleton-lines';
         return (jsxRuntimeExports.jsx("div", { className: classNames(linesClass, className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsxRuntimeExports.jsx("div", {}, i))) }));
     }
-    const blockClass = classPrefix
-        ? `${classPrefix}skeleton-block`
-        : 'skeleton-block';
     return (jsxRuntimeExports.jsx("div", { className: classNames(blockClass, className), ...props, children: children }));
 };
 
@@ -1499,35 +1708,31 @@ const validSubTitleElements = [
     'p',
 ];
 const SubTitle = ({ className, size, as = 'h1', hasSkeleton, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const element = validSubTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validSubTitleSizes.includes(size) ? size : undefined;
-    const mainClass = classPrefix ? `${classPrefix}subtitle` : 'subtitle';
-    const subTitleClasses = classNames(mainClass, 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 { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const mainClass = classPrefix ? `${classPrefix}table` : 'table';
-    const tableClasses = classNames(mainClass, 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 }));
     if (isResponsive) {
-        const containerClass = classPrefix
-            ? `${classPrefix}table-container`
-            : 'table-container';
         return jsxRuntimeExports.jsx("div", { className: containerClass, children: tableElement });
     }
     return tableElement;
@@ -1547,16 +1752,15 @@ const validTagColors = [
 ];
 const validTagSizes = ['normal', 'medium', 'large'];
 const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const mainClass = classPrefix ? `${classPrefix}tag` : 'tag';
-    const tagClasses = classNames(mainClass, 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 }));
     }
@@ -1564,13 +1768,12 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
 };
 
 const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const mainClass = classPrefix ? `${classPrefix}tags` : 'tags';
-    const tagsClasses = classNames(mainClass, 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 }));
 };
 
@@ -1593,10 +1796,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 }));
 };
 
@@ -1608,11 +1812,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 }));
@@ -1627,46 +1832,44 @@ const Thead = ({ className, children, ...props }) => {
 const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
 const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
 const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const element = validTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validTitleSizes.includes(size) ? size : undefined;
-    const mainClass = classPrefix ? `${classPrefix}title` : 'title';
-    const titleClasses = classNames(mainClass, 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 }));
 };
 
 const Checkbox = forwardRef(({ disabled, className, children, ...props }, ref) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}checkbox` : 'checkbox';
+    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';
 
 const Checkboxes = ({ children, className, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}checkboxes` : 'checkboxes';
+    const mainClass = usePrefixedClassNames('checkboxes');
     const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
 };
@@ -1674,7 +1877,6 @@ const Checkboxes = ({ children, className, ...props }) => {
 const allowedColors = [...validColors, 'inherit', 'current'];
 const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isLoading, isExpanded, size, textColor, bgColor, iconLeft, iconRight, iconLeftName, iconLeftSize, iconRightName, iconRightSize, className, children, ...props }, ref) => {
     const Component = (as === 'p' ? 'p' : 'div');
-    const { classPrefix } = useConfig();
     const { textColor: _ignoredTextColor, bgColor: _ignoredBgColor, ...restProps } = props;
     const safeTextColor = allowedColors.includes(textColor)
         ? textColor
@@ -1701,49 +1903,47 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
                 size: iconRightSize,
             }
             : undefined);
-    const mainClass = classPrefix ? `${classPrefix}control` : 'control';
-    const controlClass = classNames(mainClass, 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';
 
 const FieldLabel = ({ size, textColor, bgColor, className, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}field-label` : 'field-label';
-    const fieldLabelClass = classNames(mainClass, 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 }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}field-body` : 'field-body';
+    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 { classPrefix } = useConfig();
+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 mainClass = classPrefix ? `${classPrefix}field` : 'field';
-    const fieldClass = classNames(mainClass, bulmaHelperClasses, {
+    const mainClass = usePrefixedClassNames('field', {
         'is-horizontal': horizontal,
         'has-addons': !!hasAddons,
         'is-grouped': grouped === true ||
@@ -1753,11 +1953,12 @@ 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) {
-        const labelClass = classPrefix ? `${classPrefix}label` : 'label';
         if (horizontal) {
             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 }) }));
         }
@@ -1783,7 +1984,6 @@ Field.Label = FieldLabel;
 Field.Body = FieldBody;
 
 const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentered, hasName, label, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -1798,73 +1998,69 @@ const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentere
     else if (isCentered) {
         alignmentClass = 'is-centered';
     }
-    const mainClass = classPrefix ? `${classPrefix}file` : 'file';
-    const fileClass = classNames(mainClass, 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';
 
 const Input = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled, readOnly, ...props }, ref) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}input` : 'input';
-    const inputClass = classNames(mainClass, 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';
 
 const Radio = forwardRef(({ disabled, className, children, ...props }, ref) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}radio` : 'radio';
+    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';
 
 const Radios = ({ children, className, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}radios` : 'radios';
+    const mainClass = usePrefixedClassNames('radios');
     const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
 };
 
 const Select = forwardRef(({ color, size, isRounded, isLoading, isActive, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}select` : 'select';
-    const selectClass = classNames(mainClass, 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,
@@ -1878,15 +2074,13 @@ const Select = forwardRef(({ color, size, isRounded, isLoading, isActive, classN
 Select.displayName = 'Select';
 
 const TextArea = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, isActive, hasFixedSize, className, disabled, readOnly, rows, ...props }, ref) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}textarea` : 'textarea';
-    const textareaClass = classNames(mainClass, 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,
@@ -1894,96 +2088,55 @@ 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 { classPrefix } = useConfig();
-    const mainClass = classPrefix ? `${classPrefix}cell` : 'cell';
-    const cellClasses = classNames(mainClass, ...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 { classPrefix } = useConfig();
-    const mainClass = classPrefix ? `${classPrefix}grid` : 'grid';
-    const gridClasses = classNames(mainClass, ...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 }));
@@ -2580,7 +2733,6 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, ...restPro
 };
 
 const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -2600,141 +2752,188 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
             breakpointClass = `is-${breakpoint}`;
         }
     }
-    const mainClass = classPrefix ? `${classPrefix}container` : 'container';
-    const containerClasses = classNames(mainClass, {
+    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 { classPrefix } = useConfig();
-    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;
-    const mainClass = classPrefix ? `${classPrefix}footer` : 'footer';
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames(mainClass, 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 { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}hero` : 'hero';
-    const heroClasses = classNames(mainClass, 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 }) => {
-    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor !== null && textColor !== void 0 ? textColor : color,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}hero-head` : 'hero-head';
-    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, 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 { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor !== null && textColor !== void 0 ? textColor : color,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}hero-body` : 'hero-body';
-    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, 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 { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor !== null && textColor !== void 0 ? textColor : color,
         backgroundColor: bgColor,
         ...props,
     });
-    const mainClass = classPrefix ? `${classPrefix}hero-foot` : 'hero-foot';
-    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, 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 { classPrefix } = useConfig();
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const mainClass = classPrefix ? `${classPrefix}level` : 'level';
-    return (jsxRuntimeExports.jsx("nav", { className: classNames(mainClass, 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 { classPrefix } = useConfig();
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const mainClass = classPrefix ? `${classPrefix}level-left` : 'level-left';
-    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, 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 { classPrefix } = useConfig();
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const mainClass = classPrefix ? `${classPrefix}level-right` : 'level-right';
-    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, 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 { classPrefix } = useConfig();
-    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 = classPrefix ? `${classPrefix}level-item` : 'level-item';
+    const mainClass = usePrefixedClassNames('level-item', {
+        'has-text-centered': hasTextCentered,
+    });
+    const levelItemClasses = classNames(mainClass, bulmaHelperClasses, className);
     if (Tag === 'a') {
-        return (jsxRuntimeExports.jsx("a", { className: classNames(mainClass, 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(mainClass, 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 { classPrefix } = useConfig();
-    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;
-    const mainClass = classPrefix ? `${classPrefix}media` : 'media';
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames(mainClass, 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 { classPrefix } = useConfig();
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const mainClass = classPrefix ? `${classPrefix}section` : 'section';
-    const sectionClasses = classNames(mainClass, 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, 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, isBrowser, useBulmaClasses, useClassPrefix, useConfig, 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, CardWithSubComponents as 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, MessageWithSubComponents as 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