@allxsmith/bestax-bulma 1.1.0 → 2.0.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef, useEffect, createContext, useContext, forwardRef } from 'react';
+import React, { useMemo, createContext, useContext, useState, useRef, useEffect, forwardRef } from 'react';
 
 var jsxRuntime = {exports: {}};
 
@@ -729,6 +729,16 @@ const useBulmaClasses = (props) => {
     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 = [
@@ -787,7 +797,9 @@ const Column = ({ className, textColor, bgColor, size, sizeMobile, sizeTablet, s
         backgroundColor: bgColor,
         ...props,
     });
-    const columnClasses = classNames('column', ...getColumnClassNames({
+    const { classPrefix } = useConfig();
+    const mainClass = classPrefix ? `${classPrefix}column` : 'column';
+    const columnClasses = classNames(mainClass, ...getColumnClassNames({
         size,
         sizeMobile,
         sizeTablet,
@@ -837,7 +849,9 @@ const Columns = ({ className, textColor, bgColor, isCentered, isGapless, isMulti
         backgroundColor: bgColor,
         ...props,
     });
-    const columnsClasses = classNames('columns', {
+    const { classPrefix } = useConfig();
+    const mainClass = classPrefix ? `${classPrefix}columns` : 'columns';
+    const columnsClasses = classNames(mainClass, {
         'is-centered': isCentered,
         'is-gapless': isGapless,
         'is-multiline': isMultiline,
@@ -864,8 +878,10 @@ const validBreadcrumbSeparators = [
 ];
 const validBreadcrumbSizes = ['small', 'medium', 'large'];
 const Breadcrumb = ({ className, alignment, separator, size, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const breadcrumbClasses = classNames('breadcrumb', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}breadcrumb` : 'breadcrumb';
+    const breadcrumbClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${alignment}`]: alignment && validBreadcrumbAlignments.includes(alignment),
         [`has-${separator}-separator`]: separator && validBreadcrumbSeparators.includes(separator),
         [`is-${size}`]: size && validBreadcrumbSizes.includes(size),
@@ -880,12 +896,14 @@ const renderFooter = (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 { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const cardClasses = classNames('card', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}card` : 'card';
+    const cardClasses = classNames(mainClass, className, bulmaHelperClasses, {
         'is-shadowless': !hasShadow,
     });
     const renderHeader = (header, headerIcon, headerCentered) => {
@@ -903,9 +921,12 @@ 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';
     useEffect(() => {
         if (typeof activeProp === 'boolean')
             setActive(activeProp);
@@ -938,14 +959,14 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
         }
     };
-    const dropdownClasses = classNames('dropdown', bulmaHelperClasses, {
+    const dropdownClasses = classNames(mainClass, bulmaHelperClasses, {
         'is-active': active,
         'is-up': up,
         'is-right': right,
         'is-hoverable': hoverable,
         'is-disabled': disabled,
     }, className);
-    return (jsxRuntimeExports.jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntimeExports.jsx("div", { className: "dropdown-trigger", children: jsxRuntimeExports.jsxs("button", { className: "button", "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("span", { className: "icon is-small", "aria-hidden": "true", children: jsxRuntimeExports.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntimeExports.jsx("div", { className: classNames('dropdown-menu', menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsxRuntimeExports.jsx("div", { className: "dropdown-content", onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntimeExports.jsx("div", { className: "dropdown-trigger", children: jsxRuntimeExports.jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("span", { className: "icon is-small", "aria-hidden": "true", children: jsxRuntimeExports.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntimeExports.jsx("div", { className: classNames('dropdown-menu', menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsxRuntimeExports.jsx("div", { className: "dropdown-content", onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
 };
 const DropdownItem = ({ children, active, className, as: Component = 'a', ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -959,8 +980,10 @@ const Dropdown = Object.assign(DropdownComponent, {
 
 const MenuListLevelContext = createContext(0);
 const MenuComponent = ({ className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("aside", { className: classNames('menu', className, bulmaHelperClasses), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}menu` : 'menu';
+    return (jsxRuntimeExports.jsx("aside", { className: classNames(mainClass, className, bulmaHelperClasses), ...rest, children: children }));
 };
 const MenuLabel = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -1003,16 +1026,20 @@ const Menu = Object.assign(MenuComponent, {
 });
 
 const Message = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const messageClasses = classNames('message', color && `is-${color}`, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntimeExports.jsxs("div", { className: "message-header", children: [title && jsxRuntimeExports.jsx("span", { children: title }), onClose && (jsxRuntimeExports.jsx("button", { className: "delete", "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntimeExports.jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
+    const mainClass = classPrefix ? `${classPrefix}message` : 'message';
+    const deleteClass = classPrefix ? `${classPrefix}delete` : 'delete';
+    const messageClasses = classNames(mainClass, color && `is-${color}`, className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntimeExports.jsxs("div", { className: "message-header", children: [title && jsxRuntimeExports.jsx("span", { children: title }), onClose && (jsxRuntimeExports.jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntimeExports.jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
 };
 
 const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -1025,17 +1052,21 @@ const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCa
         isModalCard = false;
     else
         isModalCard = !!modalCardTitle || !!modalCardFoot;
-    const modalClasses = classNames('modal', { 'is-active': active }, className, bulmaHelperClasses);
-    return (jsxRuntimeExports.jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsxRuntimeExports.jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntimeExports.jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxRuntimeExports.jsxs("header", { className: "modal-card-head", children: [jsxRuntimeExports.jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsxRuntimeExports.jsx("button", { className: "delete", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntimeExports.jsx("section", { className: "modal-card-body", "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntimeExports.jsx("footer", { className: "modal-card-foot", children: modalCardFoot }))] })) : (jsxRuntimeExports.jsx("div", { className: "modal-content", "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntimeExports.jsx("button", { className: "modal-close is-large", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
+    const mainClass = classPrefix ? `${classPrefix}modal` : 'modal';
+    const deleteClass = classPrefix ? `${classPrefix}delete` : 'delete';
+    const modalClasses = classNames(mainClass, { 'is-active': active }, className, bulmaHelperClasses);
+    return (jsxRuntimeExports.jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsxRuntimeExports.jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntimeExports.jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxRuntimeExports.jsxs("header", { className: "modal-card-head", children: [jsxRuntimeExports.jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsxRuntimeExports.jsx("button", { className: 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 navbarClasses = classNames('navbar', bulmaHelperClasses, className, {
+    const mainClass = classPrefix ? `${classPrefix}navbar` : 'navbar';
+    const navbarClasses = classNames(mainClass, bulmaHelperClasses, className, {
         [`is-${color}`]: color,
         'is-transparent': transparent,
         [`is-fixed-${fixed}`]: fixed,
@@ -1126,12 +1157,14 @@ 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 paginationClasses = classNames('pagination', bulmaHelperClasses, className, {
+    const mainClass = classPrefix ? `${classPrefix}pagination` : 'pagination';
+    const paginationClasses = classNames(mainClass, bulmaHelperClasses, className, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
         [`is-${align}`]: align,
@@ -1176,11 +1209,13 @@ Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 
 const Panel = ({ color, className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
     });
-    const panelClasses = classNames('panel', bulmaHelperClasses, className, {
+    const mainClass = classPrefix ? `${classPrefix}panel` : 'panel';
+    const panelClasses = classNames(mainClass, bulmaHelperClasses, className, {
         [`is-${color}`]: color,
     });
     return (jsxRuntimeExports.jsx("nav", { className: panelClasses, ...rest, children: children }));
@@ -1189,7 +1224,11 @@ const PanelHeading = ({ className, children, ...props }) => (jsxRuntimeExports.j
 const PanelTabs = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("p", { className: classNames('panel-tabs', className), ...props, children: children }));
 const PanelBlock = ({ className, active, children, ...props }) => (jsxRuntimeExports.jsx("a", { className: classNames('panel-block', className, { 'is-active': active }), ...props, children: children }));
 const PanelIcon = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("span", { className: classNames('panel-icon', className), ...props, children: children }));
-const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa-search', ...props }) => (jsxRuntimeExports.jsx("div", { className: "panel-block", ...props, children: jsxRuntimeExports.jsxs("p", { className: "control has-icons-left", children: [jsxRuntimeExports.jsx("input", { className: "input", type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsxRuntimeExports.jsx("span", { className: "icon is-left", children: jsxRuntimeExports.jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
+const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa-search', ...props }) => {
+    const { classPrefix } = useConfig();
+    const inputClass = classPrefix ? `${classPrefix}input` : 'input';
+    return (jsxRuntimeExports.jsx("div", { className: "panel-block", ...props, children: jsxRuntimeExports.jsxs("p", { className: "control has-icons-left", children: [jsxRuntimeExports.jsx("input", { className: inputClass, type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsxRuntimeExports.jsx("span", { className: "icon is-left", children: jsxRuntimeExports.jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
+};
 const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxRuntimeExports.jsxs("label", { className: "panel-block", ...props, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
 const PanelButtonBlock = ({ children, className, ...props }) => (jsxRuntimeExports.jsx("div", { className: "panel-block", children: jsxRuntimeExports.jsx("button", { className: classNames('button is-link is-outlined is-fullwidth', className), ...props, children: children }) }));
 Panel.Heading = PanelHeading;
@@ -1201,11 +1240,13 @@ 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 tabsClass = classNames('tabs', bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}tabs` : 'tabs';
+    const tabsClass = classNames(mainClass, bulmaHelperClasses, {
         [`is-${align}`]: align,
         [`is-${size}`]: size,
         'is-fullwidth': fullwidth,
@@ -1222,34 +1263,40 @@ 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 blockClasses = classNames('block', className, bulmaHelperClasses);
+    const mainClass = classPrefix ? `${classPrefix}block` : 'block';
+    const blockClasses = classNames(mainClass, className, bulmaHelperClasses);
     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 boxClasses = classNames('box', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}box` : 'box';
+    const boxClasses = classNames(mainClass, className, bulmaHelperClasses, {
         'is-shadowless': !hasShadow,
     });
     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 buttonClasses = classNames('button', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}button` : 'button';
+    const buttonClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${color}`]: color,
         [`is-${size}`]: size && size !== 'normal',
         'is-light': isLight,
@@ -1274,12 +1321,14 @@ const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWi
 };
 
 const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const buttonsClasses = classNames('buttons', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}buttons` : 'buttons';
+    const buttonsClasses = classNames(mainClass, className, bulmaHelperClasses, {
         'is-centered': isCentered,
         'is-right': isRight,
         'has-addons': hasAddons,
@@ -1289,24 +1338,28 @@ const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons
 
 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 contentClasses = classNames('content', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}content` : 'content';
+    const contentClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${size}`]: size && size !== 'normal' && validSizes.includes(size),
     });
     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 classes = classNames('delete', {
+    const mainClass = classPrefix ? `${classPrefix}delete` : 'delete';
+    const classes = classNames(mainClass, {
         [`is-${size}`]: size,
         'is-disabled': disabled,
     }, bulmaHelperClasses, className);
@@ -1342,12 +1395,14 @@ function getIconClasses(library, name, libraryFeatures) {
     }
 }
 const Icon = ({ className, textColor, bgColor, name, library = 'fa', libraryFeatures, size, ariaLabel = 'icon', style, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const iconContainerClasses = classNames('icon', {
+    const mainClass = classPrefix ? `${classPrefix}icon` : 'icon';
+    const iconContainerClasses = classNames(mainClass, {
         [`is-${size}`]: size,
     }, bulmaHelperClasses, className);
     const iClasses = getIconClasses(library, name, libraryFeatures);
@@ -1355,22 +1410,26 @@ const Icon = ({ className, textColor, bgColor, name, library = 'fa', libraryFeat
 };
 
 const IconText = ({ className, textColor, bgColor, iconProps, children, items, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const iconTextClasses = classNames('icon-text', bulmaHelperClasses, className);
+    const mainClass = classPrefix ? `${classPrefix}icon-text` : 'icon-text';
+    const iconTextClasses = classNames(mainClass, 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 imageClasses = classNames('image', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}image` : 'image';
+    const imageClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${size}`]: size,
         'has-ratio': size && typeof size === 'string' && size.includes('by'),
     });
@@ -1389,27 +1448,46 @@ const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, s
 };
 
 const Notification = ({ className, color, isLight, hasDelete, onDelete, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const notificationClasses = classNames('notification', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}notification` : 'notification';
+    const deleteClass = classPrefix ? `${classPrefix}delete` : 'delete';
+    const notificationClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${color}`]: color && validColors.includes(color),
         'is-light': isLight,
     });
-    return (jsxRuntimeExports.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntimeExports.jsx("button", { className: "delete", onClick: onDelete, "aria-label": "Close notification" })), children] }));
+    return (jsxRuntimeExports.jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsxRuntimeExports.jsx("button", { className: deleteClass, 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 progressClasses = classNames('progress', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}progress` : 'progress';
+    const progressClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${color}`]: color && validColors.includes(color),
         [`is-${size}`]: size,
     });
     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();
+    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 }));
+};
+
 const validSubTitleSizes = ['1', '2', '3', '4', '5', '6'];
 const validSubTitleElements = [
     'h1',
@@ -1421,10 +1499,12 @@ 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 subTitleClasses = classNames('subtitle', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}subtitle` : 'subtitle';
+    const subTitleClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${validSize}`]: validSize,
         'has-skeleton': hasSkeleton,
     });
@@ -1433,8 +1513,10 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, children, ...props
 };
 
 const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tableClasses = classNames('table', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}table` : 'table';
+    const tableClasses = classNames(mainClass, className, bulmaHelperClasses, {
         'is-bordered': isBordered,
         'is-striped': isStriped,
         'is-narrow': isNarrow,
@@ -1442,7 +1524,13 @@ const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFull
         'is-fullwidth': isFullwidth,
     });
     const tableElement = (jsxRuntimeExports.jsx("table", { className: tableClasses, ...rest, children: children }));
-    return isResponsive ? (jsxRuntimeExports.jsx("div", { className: "table-container", children: tableElement })) : (tableElement);
+    if (isResponsive) {
+        const containerClass = classPrefix
+            ? `${classPrefix}table-container`
+            : 'table-container';
+        return jsxRuntimeExports.jsx("div", { className: containerClass, children: tableElement });
+    }
+    return tableElement;
 };
 
 const validTagColors = [
@@ -1459,8 +1547,10 @@ 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 tagClasses = classNames('tag', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}tag` : 'tag';
+    const tagClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${color}`]: color && validTagColors.includes(color),
         [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
         'is-rounded': isRounded,
@@ -1474,8 +1564,10 @@ 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 tagsClasses = classNames('tags', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}tags` : 'tags';
+    const tagsClasses = classNames(mainClass, className, bulmaHelperClasses, {
         'has-addons': hasAddons,
         'are-multiline': isMultiline,
     });
@@ -1535,10 +1627,12 @@ 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 titleClasses = classNames('title', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}title` : 'title';
+    const titleClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${validSize}`]: validSize,
         'is-spaced': isSpaced,
         'has-skeleton': hasSkeleton,
@@ -1557,25 +1651,30 @@ const Tr = ({ className, isSelected, color, children, ...props }) => {
 };
 
 const Checkbox = forwardRef(({ disabled, className, children, ...props }, ref) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const checkboxClass = classNames('checkbox', bulmaHelperClasses, className);
+    const mainClass = classPrefix ? `${classPrefix}checkbox` : '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 wrapperClass = classNames('checkboxes', bulmaHelperClasses, className);
+    const mainClass = classPrefix ? `${classPrefix}checkboxes` : 'checkboxes';
+    const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsx("div", { className: wrapperClass, ...rest, children: children }));
 };
 
 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
@@ -1602,7 +1701,8 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
                 size: iconRightSize,
             }
             : undefined);
-    const controlClass = classNames('control', bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}control` : 'control';
+    const controlClass = classNames(mainClass, bulmaHelperClasses, {
         'has-icons-left': hasIconsLeft || !!leftIconProps,
         'has-icons-right': hasIconsRight || !!rightIconProps,
         'is-loading': isLoading,
@@ -1614,30 +1714,36 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
 Control.displayName = 'Control';
 
 const FieldLabel = ({ size, textColor, bgColor, className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const fieldLabelClass = classNames('field-label', bulmaHelperClasses, { [`is-${size}`]: size }, className);
+    const mainClass = classPrefix ? `${classPrefix}field-label` : 'field-label';
+    const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, { [`is-${size}`]: size }, 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 fieldBodyClass = classNames('field-body', bulmaHelperClasses, className);
+    const mainClass = classPrefix ? `${classPrefix}field-body` : '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 { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
-    const fieldClass = classNames('field', bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}field` : 'field';
+    const fieldClass = classNames(mainClass, bulmaHelperClasses, {
         'is-horizontal': horizontal,
         'has-addons': !!hasAddons,
         'is-grouped': grouped === true ||
@@ -1651,11 +1757,12 @@ const Field = ({ horizontal, grouped, hasAddons, label, labelSize, labelProps, t
     const mappedLabelSize = labelSize === 'normal' ? undefined : labelSize;
     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('label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: labelProps === null || labelProps === void 0 ? void 0 : labelProps.style, children: label }) }));
+            renderedLabel = (jsxRuntimeExports.jsx(FieldLabel, { size: mappedLabelSize, children: jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: labelProps === null || labelProps === void 0 ? void 0 : labelProps.style, children: label }) }));
         }
         else {
-            renderedLabel = (jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames('label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: { display: 'block', ...((labelProps === null || labelProps === void 0 ? void 0 : labelProps.style) || {}) }, children: label }));
+            renderedLabel = (jsxRuntimeExports.jsx("label", { ...labelProps, className: classNames(labelClass, labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), style: { display: 'block', ...((labelProps === null || labelProps === void 0 ? void 0 : labelProps.style) || {}) }, children: label }));
         }
     }
     let content = children;
@@ -1676,6 +1783,7 @@ 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,
@@ -1690,7 +1798,8 @@ const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentere
     else if (isCentered) {
         alignmentClass = 'is-centered';
     }
-    const fileClass = classNames('file', bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}file` : 'file';
+    const fileClass = classNames(mainClass, bulmaHelperClasses, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
         'is-boxed': isBoxed,
@@ -1702,11 +1811,13 @@ const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentere
 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 inputClass = classNames('input', bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}input` : 'input';
+    const inputClass = classNames(mainClass, bulmaHelperClasses, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
         'is-rounded': isRounded,
@@ -1720,28 +1831,34 @@ const Input = forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocus
 Input.displayName = 'Input';
 
 const Radio = forwardRef(({ disabled, className, children, ...props }, ref) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    const radioClass = classNames('radio', bulmaHelperClasses, className);
+    const mainClass = classPrefix ? `${classPrefix}radio` : '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 wrapperClass = classNames('radios', bulmaHelperClasses, className);
+    const mainClass = classPrefix ? `${classPrefix}radios` : '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 selectClass = classNames('select', bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}select` : 'select';
+    const selectClass = classNames(mainClass, bulmaHelperClasses, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
         'is-rounded': isRounded,
@@ -1761,11 +1878,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 textareaClass = classNames('textarea', bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}textarea` : 'textarea';
+    const textareaClass = classNames(mainClass, bulmaHelperClasses, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
         'is-rounded': isRounded,
@@ -1802,7 +1921,9 @@ const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, cl
         backgroundColor: bgColor,
         ...props,
     });
-    const cellClasses = classNames('cell', ...getCellGridClasses({
+    const { classPrefix } = useConfig();
+    const mainClass = classPrefix ? `${classPrefix}cell` : 'cell';
+    const cellClasses = classNames(mainClass, ...getCellGridClasses({
         colStart,
         colFromEnd,
         colSpan,
@@ -1851,7 +1972,9 @@ const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixe
         backgroundColor: bgColor,
         ...props,
     });
-    const gridClasses = classNames('grid', ...getGridInnerClasses({ gap, columnGap, rowGap, minCol }), bulmaHelperClasses, className);
+    const { classPrefix } = useConfig();
+    const mainClass = classPrefix ? `${classPrefix}grid` : 'grid';
+    const gridClasses = classNames(mainClass, ...getGridInnerClasses({ gap, columnGap, rowGap, minCol }), bulmaHelperClasses, className);
     if (isFixed) {
         const fixedGridClasses = classNames('fixed-grid', ...getFixedGridClasses({
             fixedCols,
@@ -1866,7 +1989,598 @@ const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixe
     return (jsxRuntimeExports.jsx("div", { className: gridClasses, ...rest, children: children }));
 };
 
+const bulmaCssVars = [
+    '--bulma-scheme-h',
+    '--bulma-scheme-s',
+    '--bulma-light-l',
+    '--bulma-light-invert-l',
+    '--bulma-dark-l',
+    '--bulma-dark-invert-l',
+    '--bulma-soft-l',
+    '--bulma-bold-l',
+    '--bulma-soft-invert-l',
+    '--bulma-bold-invert-l',
+    '--bulma-hover-background-l-delta',
+    '--bulma-active-background-l-delta',
+    '--bulma-hover-border-l-delta',
+    '--bulma-active-border-l-delta',
+    '--bulma-hover-color-l-delta',
+    '--bulma-active-color-l-delta',
+    '--bulma-hover-shadow-a-delta',
+    '--bulma-active-shadow-a-delta',
+    '--bulma-primary-h',
+    '--bulma-primary-s',
+    '--bulma-primary-l',
+    '--bulma-link-h',
+    '--bulma-link-s',
+    '--bulma-link-l',
+    '--bulma-info-h',
+    '--bulma-info-s',
+    '--bulma-info-l',
+    '--bulma-success-h',
+    '--bulma-success-s',
+    '--bulma-success-l',
+    '--bulma-warning-h',
+    '--bulma-warning-s',
+    '--bulma-warning-l',
+    '--bulma-danger-h',
+    '--bulma-danger-s',
+    '--bulma-danger-l',
+    '--bulma-family-primary',
+    '--bulma-family-secondary',
+    '--bulma-family-code',
+    '--bulma-size-small',
+    '--bulma-size-normal',
+    '--bulma-size-medium',
+    '--bulma-size-large',
+    '--bulma-weight-light',
+    '--bulma-weight-normal',
+    '--bulma-weight-medium',
+    '--bulma-weight-semibold',
+    '--bulma-weight-bold',
+    '--bulma-weight-extrabold',
+    '--bulma-block-spacing',
+    '--bulma-duration',
+    '--bulma-easing',
+    '--bulma-radius-small',
+    '--bulma-radius',
+    '--bulma-radius-medium',
+    '--bulma-radius-large',
+    '--bulma-radius-rounded',
+    '--bulma-speed',
+    '--bulma-arrow-color',
+    '--bulma-loading-color',
+    '--bulma-burger-h',
+    '--bulma-burger-s',
+    '--bulma-burger-l',
+    '--bulma-burger-border-radius',
+    '--bulma-burger-gap',
+    '--bulma-burger-item-height',
+    '--bulma-burger-item-width',
+    '--bulma-body-background-color',
+    '--bulma-body-size',
+    '--bulma-body-min-width',
+    '--bulma-body-rendering',
+    '--bulma-body-family',
+    '--bulma-body-overflow-x',
+    '--bulma-body-overflow-y',
+    '--bulma-body-color',
+    '--bulma-body-font-size',
+    '--bulma-body-weight',
+    '--bulma-body-line-height',
+    '--bulma-code-family',
+    '--bulma-code-padding',
+    '--bulma-code-weight',
+    '--bulma-code-size',
+    '--bulma-small-font-size',
+    '--bulma-hr-background-color',
+    '--bulma-hr-height',
+    '--bulma-hr-margin',
+    '--bulma-strong-color',
+    '--bulma-strong-weight',
+    '--bulma-pre-font-size',
+    '--bulma-pre-padding',
+    '--bulma-pre-code-font-size',
+    '--bulma-skeleton-background',
+    '--bulma-skeleton-radius',
+    '--bulma-skeleton-block-min-height',
+    '--bulma-skeleton-lines-gap',
+    '--bulma-skeleton-line-height',
+    '--bulma-breadcrumb-item-color',
+    '--bulma-breadcrumb-item-hover-color',
+    '--bulma-breadcrumb-item-active-color',
+    '--bulma-breadcrumb-item-padding-vertical',
+    '--bulma-breadcrumb-item-padding-horizontal',
+    '--bulma-breadcrumb-item-separator-color',
+    '--bulma-card-color',
+    '--bulma-card-background-color',
+    '--bulma-card-shadow',
+    '--bulma-card-radius',
+    '--bulma-card-header-background-color',
+    '--bulma-card-header-color',
+    '--bulma-card-header-padding',
+    '--bulma-card-header-shadow',
+    '--bulma-card-header-weight',
+    '--bulma-card-content-background-color',
+    '--bulma-card-content-padding',
+    '--bulma-card-footer-background-color',
+    '--bulma-card-footer-border-top',
+    '--bulma-card-footer-padding',
+    '--bulma-card-media-margin',
+    '--bulma-dropdown-menu-min-width',
+    '--bulma-dropdown-content-background-color',
+    '--bulma-dropdown-content-offset',
+    '--bulma-dropdown-content-padding-bottom',
+    '--bulma-dropdown-content-padding-top',
+    '--bulma-dropdown-content-radius',
+    '--bulma-dropdown-content-shadow',
+    '--bulma-dropdown-content-z',
+    '--bulma-dropdown-item-h',
+    '--bulma-dropdown-item-s',
+    '--bulma-dropdown-item-l',
+    '--bulma-dropdown-item-background-l',
+    '--bulma-dropdown-item-background-l-delta',
+    '--bulma-dropdown-item-hover-background-l-delta',
+    '--bulma-dropdown-item-active-background-l-delta',
+    '--bulma-dropdown-item-color-l',
+    '--bulma-dropdown-item-selected-h',
+    '--bulma-dropdown-item-selected-s',
+    '--bulma-dropdown-item-selected-l',
+    '--bulma-dropdown-item-selected-background-l',
+    '--bulma-dropdown-item-selected-color-l',
+    '--bulma-dropdown-divider-background-color',
+    '--bulma-menu-item-h',
+    '--bulma-menu-item-s',
+    '--bulma-menu-item-l',
+    '--bulma-menu-item-background-l',
+    '--bulma-menu-item-background-l-delta',
+    '--bulma-menu-item-hover-background-l-delta',
+    '--bulma-menu-item-active-background-l-delta',
+    '--bulma-menu-item-color-l',
+    '--bulma-menu-item-radius',
+    '--bulma-menu-item-selected-h',
+    '--bulma-menu-item-selected-s',
+    '--bulma-menu-item-selected-l',
+    '--bulma-menu-item-selected-background-l',
+    '--bulma-menu-item-selected-color-l',
+    '--bulma-menu-list-border-left',
+    '--bulma-menu-list-line-height',
+    '--bulma-menu-list-link-padding',
+    '--bulma-menu-nested-list-margin',
+    '--bulma-menu-nested-list-padding-left',
+    '--bulma-menu-label-color',
+    '--bulma-menu-label-font-size',
+    '--bulma-menu-label-letter-spacing',
+    '--bulma-menu-label-spacing',
+    '--bulma-message-h',
+    '--bulma-message-s',
+    '--bulma-message-background-l',
+    '--bulma-message-border-l',
+    '--bulma-message-border-l-delta',
+    '--bulma-message-border-style',
+    '--bulma-message-border-width',
+    '--bulma-message-color-l',
+    '--bulma-message-radius',
+    '--bulma-message-header-weight',
+    '--bulma-message-header-padding',
+    '--bulma-message-header-radius',
+    '--bulma-message-header-body-border-width',
+    '--bulma-message-header-background-l',
+    '--bulma-message-header-color-l',
+    '--bulma-message-body-border-width',
+    '--bulma-message-body-color',
+    '--bulma-message-body-padding',
+    '--bulma-message-body-radius',
+    '--bulma-message-body-pre-code-background-color',
+    '--bulma-modal-z',
+    '--bulma-modal-background-background-color',
+    '--bulma-modal-content-width',
+    '--bulma-modal-content-margin-mobile',
+    '--bulma-modal-content-spacing-mobile',
+    '--bulma-modal-content-spacing-tablet',
+    '--bulma-modal-close-dimensions',
+    '--bulma-modal-close-right',
+    '--bulma-modal-close-top',
+    '--bulma-modal-card-spacing',
+    '--bulma-modal-card-head-background-color',
+    '--bulma-modal-card-head-padding',
+    '--bulma-modal-card-head-radius',
+    '--bulma-modal-card-title-color',
+    '--bulma-modal-card-title-line-height',
+    '--bulma-modal-card-title-size',
+    '--bulma-modal-card-foot-background-color',
+    '--bulma-modal-card-foot-radius',
+    '--bulma-modal-card-body-background-color',
+    '--bulma-modal-card-body-padding',
+    '--bulma-navbar-h',
+    '--bulma-navbar-s',
+    '--bulma-navbar-l',
+    '--bulma-navbar-background-color',
+    '--bulma-navbar-box-shadow-size',
+    '--bulma-navbar-box-shadow-color',
+    '--bulma-navbar-padding-vertical',
+    '--bulma-navbar-padding-horizontal',
+    '--bulma-navbar-z',
+    '--bulma-navbar-fixed-z',
+    '--bulma-navbar-item-background-a',
+    '--bulma-navbar-item-background-l',
+    '--bulma-navbar-item-background-l-delta',
+    '--bulma-navbar-item-hover-background-l-delta',
+    '--bulma-navbar-item-active-background-l-delta',
+    '--bulma-navbar-item-color-l',
+    '--bulma-navbar-item-selected-h',
+    '--bulma-navbar-item-selected-s',
+    '--bulma-navbar-item-selected-l',
+    '--bulma-navbar-item-selected-background-l',
+    '--bulma-navbar-item-selected-color-l',
+    '--bulma-navbar-item-img-max-height',
+    '--bulma-navbar-burger-color',
+    '--bulma-navbar-tab-hover-background-color',
+    '--bulma-navbar-tab-hover-border-bottom-color',
+    '--bulma-navbar-tab-active-color',
+    '--bulma-navbar-tab-active-background-color',
+    '--bulma-navbar-tab-active-border-bottom-color',
+    '--bulma-navbar-tab-active-border-bottom-style',
+    '--bulma-navbar-tab-active-border-bottom-width',
+    '--bulma-navbar-dropdown-background-color',
+    '--bulma-navbar-dropdown-border-l',
+    '--bulma-navbar-dropdown-border-color',
+    '--bulma-navbar-dropdown-border-style',
+    '--bulma-navbar-dropdown-border-width',
+    '--bulma-navbar-dropdown-offset',
+    '--bulma-navbar-dropdown-arrow',
+    '--bulma-navbar-dropdown-radius',
+    '--bulma-navbar-dropdown-z',
+    '--bulma-navbar-dropdown-boxed-radius',
+    '--bulma-navbar-dropdown-boxed-shadow',
+    '--bulma-navbar-dropdown-item-h',
+    '--bulma-navbar-dropdown-item-s',
+    '--bulma-navbar-dropdown-item-l',
+    '--bulma-navbar-dropdown-item-background-l',
+    '--bulma-navbar-dropdown-item-color-l',
+    '--bulma-navbar-divider-background-l',
+    '--bulma-navbar-divider-height',
+    '--bulma-navbar-bottom-box-shadow-size',
+    '--bulma-pagination-margin',
+    '--bulma-pagination-min-width',
+    '--bulma-pagination-item-h',
+    '--bulma-pagination-item-s',
+    '--bulma-pagination-item-l',
+    '--bulma-pagination-item-background-l-delta',
+    '--bulma-pagination-item-hover-background-l-delta',
+    '--bulma-pagination-item-active-background-l-delta',
+    '--bulma-pagination-item-border-style',
+    '--bulma-pagination-item-border-width',
+    '--bulma-pagination-item-border-l',
+    '--bulma-pagination-item-border-l-delta',
+    '--bulma-pagination-item-hover-border-l-delta',
+    '--bulma-pagination-item-active-border-l-delta',
+    '--bulma-pagination-item-focus-border-l-delta',
+    '--bulma-pagination-item-color-l',
+    '--bulma-pagination-item-font-size',
+    '--bulma-pagination-item-margin',
+    '--bulma-pagination-item-padding-left',
+    '--bulma-pagination-item-padding-right',
+    '--bulma-pagination-item-outer-shadow-h',
+    '--bulma-pagination-item-outer-shadow-s',
+    '--bulma-pagination-item-outer-shadow-l',
+    '--bulma-pagination-item-outer-shadow-a',
+    '--bulma-pagination-nav-padding-left',
+    '--bulma-pagination-nav-padding-right',
+    '--bulma-pagination-disabled-color',
+    '--bulma-pagination-disabled-background-color',
+    '--bulma-pagination-disabled-border-color',
+    '--bulma-pagination-current-color',
+    '--bulma-pagination-current-background-color',
+    '--bulma-pagination-current-border-color',
+    '--bulma-pagination-ellipsis-color',
+    '--bulma-pagination-shadow-inset',
+    '--bulma-pagination-selected-item-h',
+    '--bulma-pagination-selected-item-s',
+    '--bulma-pagination-selected-item-l',
+    '--bulma-pagination-selected-item-background-l',
+    '--bulma-pagination-selected-item-border-l',
+    '--bulma-pagination-selected-item-color-l',
+    '--bulma-panel-margin',
+    '--bulma-panel-item-border',
+    '--bulma-panel-radius',
+    '--bulma-panel-shadow',
+    '--bulma-panel-heading-line-height',
+    '--bulma-panel-heading-padding',
+    '--bulma-panel-heading-radius',
+    '--bulma-panel-heading-size',
+    '--bulma-panel-heading-weight',
+    '--bulma-panel-tabs-font-size',
+    '--bulma-panel-tab-border-bottom-color',
+    '--bulma-panel-tab-border-bottom-style',
+    '--bulma-panel-tab-border-bottom-width',
+    '--bulma-panel-tab-active-color',
+    '--bulma-panel-list-item-color',
+    '--bulma-panel-list-item-hover-color',
+    '--bulma-panel-block-color',
+    '--bulma-panel-block-hover-background-color',
+    '--bulma-panel-block-active-border-left-color',
+    '--bulma-panel-block-active-color',
+    '--bulma-panel-block-active-icon-color',
+    '--bulma-panel-icon-color',
+    '--bulma-tabs-border-bottom-color',
+    '--bulma-tabs-border-bottom-style',
+    '--bulma-tabs-border-bottom-width',
+    '--bulma-tabs-link-color',
+    '--bulma-tabs-link-hover-border-bottom-color',
+    '--bulma-tabs-link-hover-color',
+    '--bulma-tabs-link-active-border-bottom-color',
+    '--bulma-tabs-link-active-color',
+    '--bulma-tabs-link-padding',
+    '--bulma-tabs-boxed-link-radius',
+    '--bulma-tabs-boxed-link-hover-background-color',
+    '--bulma-tabs-boxed-link-hover-border-bottom-color',
+    '--bulma-tabs-boxed-link-active-background-color',
+    '--bulma-tabs-boxed-link-active-border-color',
+    '--bulma-tabs-boxed-link-active-border-bottom-color',
+    '--bulma-tabs-toggle-link-border-color',
+    '--bulma-tabs-toggle-link-border-style',
+    '--bulma-tabs-toggle-link-border-width',
+    '--bulma-tabs-toggle-link-hover-background-color',
+    '--bulma-tabs-toggle-link-hover-border-color',
+    '--bulma-tabs-toggle-link-radius',
+    '--bulma-tabs-toggle-link-active-background-color',
+    '--bulma-tabs-toggle-link-active-border-color',
+    '--bulma-tabs-toggle-link-active-color',
+    '--bulma-box-background-color',
+    '--bulma-box-color',
+    '--bulma-box-radius',
+    '--bulma-box-shadow',
+    '--bulma-box-padding',
+    '--bulma-box-link-hover-shadow',
+    '--bulma-box-link-active-shadow',
+    '--bulma-content-heading-color',
+    '--bulma-content-heading-weight',
+    '--bulma-content-heading-line-height',
+    '--bulma-content-block-margin-bottom',
+    '--bulma-content-blockquote-background-color',
+    '--bulma-content-blockquote-border-left',
+    '--bulma-content-blockquote-padding',
+    '--bulma-content-pre-padding',
+    '--bulma-content-table-cell-border',
+    '--bulma-content-table-cell-border-width',
+    '--bulma-content-table-cell-padding',
+    '--bulma-content-table-cell-heading-color',
+    '--bulma-content-table-head-cell-border-width',
+    '--bulma-content-table-head-cell-color',
+    '--bulma-content-table-body-last-row-cell-border-bottom-width',
+    '--bulma-content-table-foot-cell-border-width',
+    '--bulma-content-table-foot-cell-color',
+    '--bulma-delete-dimensions',
+    '--bulma-delete-background-l',
+    '--bulma-delete-background-alpha',
+    '--bulma-delete-color',
+    '--bulma-icon-dimensions',
+    '--bulma-icon-dimensions-small',
+    '--bulma-icon-dimensions-medium',
+    '--bulma-icon-dimensions-large',
+    '--bulma-icon-text-spacing',
+    '--bulma-notification-h',
+    '--bulma-notification-s',
+    '--bulma-notification-background-l',
+    '--bulma-notification-color-l',
+    '--bulma-notification-code-background-color',
+    '--bulma-notification-radius',
+    '--bulma-notification-padding',
+    '--bulma-progress-border-radius',
+    '--bulma-progress-bar-background-color',
+    '--bulma-progress-value-background-color',
+    '--bulma-progress-indeterminate-duration',
+    '--bulma-table-color',
+    '--bulma-table-background-color',
+    '--bulma-table-cell-border-color',
+    '--bulma-table-cell-border-style',
+    '--bulma-table-cell-border-width',
+    '--bulma-table-cell-padding',
+    '--bulma-table-cell-heading-color',
+    '--bulma-table-cell-text-align',
+    '--bulma-table-head-cell-border-width',
+    '--bulma-table-head-cell-color',
+    '--bulma-table-foot-cell-border-width',
+    '--bulma-table-foot-cell-color',
+    '--bulma-table-head-background-color',
+    '--bulma-table-body-background-color',
+    '--bulma-table-foot-background-color',
+    '--bulma-table-row-hover-background-color',
+    '--bulma-table-row-active-background-color',
+    '--bulma-table-row-active-color',
+    '--bulma-table-striped-row-even-background-color',
+    '--bulma-table-striped-row-even-hover-background-color',
+    '--bulma-tag-h',
+    '--bulma-tag-s',
+    '--bulma-tag-background-l',
+    '--bulma-tag-background-l-delta',
+    '--bulma-tag-hover-background-l-delta',
+    '--bulma-tag-active-background-l-delta',
+    '--bulma-tag-color-l',
+    '--bulma-tag-radius',
+    '--bulma-tag-delete-margin',
+    '--bulma-title-color',
+    '--bulma-title-family',
+    '--bulma-title-size',
+    '--bulma-title-weight',
+    '--bulma-title-line-height',
+    '--bulma-title-strong-color',
+    '--bulma-title-strong-weight',
+    '--bulma-title-sub-size',
+    '--bulma-title-sup-size',
+    '--bulma-subtitle-color',
+    '--bulma-subtitle-family',
+    '--bulma-subtitle-size',
+    '--bulma-subtitle-weight',
+    '--bulma-subtitle-line-height',
+    '--bulma-subtitle-strong-color',
+    '--bulma-subtitle-strong-weight',
+    '--bulma-control-radius',
+    '--bulma-control-radius-small',
+    '--bulma-control-border-width',
+    '--bulma-control-height',
+    '--bulma-control-line-height',
+    '--bulma-control-padding-vertical',
+    '--bulma-control-padding-horizontal',
+    '--bulma-control-size',
+    '--bulma-control-focus-shadow-l',
+    '--bulma-file-radius',
+    '--bulma-file-name-border-color',
+    '--bulma-file-name-border-style',
+    '--bulma-file-name-border-width',
+    '--bulma-file-name-max-width',
+    '--bulma-file-h',
+    '--bulma-file-s',
+    '--bulma-file-background-l',
+    '--bulma-file-background-l-delta',
+    '--bulma-file-hover-background-l-delta',
+    '--bulma-file-active-background-l-delta',
+    '--bulma-file-border-l',
+    '--bulma-file-border-l-delta',
+    '--bulma-file-hover-border-l-delta',
+    '--bulma-file-active-border-l-delta',
+    '--bulma-file-cta-color-l',
+    '--bulma-file-name-color-l',
+    '--bulma-file-color-l-delta',
+    '--bulma-file-hover-color-l-delta',
+    '--bulma-file-active-color-l-delta',
+    '--bulma-input-h',
+    '--bulma-input-s',
+    '--bulma-input-l',
+    '--bulma-input-border-style',
+    '--bulma-input-border-l',
+    '--bulma-input-border-l-delta',
+    '--bulma-input-hover-border-l-delta',
+    '--bulma-input-active-border-l-delta',
+    '--bulma-input-focus-h',
+    '--bulma-input-focus-s',
+    '--bulma-input-focus-l',
+    '--bulma-input-focus-shadow-size',
+    '--bulma-input-focus-shadow-alpha',
+    '--bulma-input-color-l',
+    '--bulma-input-background-l',
+    '--bulma-input-background-l-delta',
+    '--bulma-input-height',
+    '--bulma-input-shadow',
+    '--bulma-input-placeholder-color',
+    '--bulma-input-disabled-color',
+    '--bulma-input-disabled-background-color',
+    '--bulma-input-disabled-border-color',
+    '--bulma-input-disabled-placeholder-color',
+    '--bulma-input-arrow',
+    '--bulma-input-icon-color',
+    '--bulma-input-icon-hover-color',
+    '--bulma-input-icon-focus-color',
+    '--bulma-input-radius',
+    '--bulma-column-gap',
+    '--bulma-grid-gap',
+    '--bulma-grid-column-count',
+    '--bulma-grid-column-min',
+    '--bulma-grid-cell-column-span',
+    '--bulma-grid-cell-column-start',
+    '--bulma-footer-background-color',
+    '--bulma-footer-color',
+    '--bulma-footer-padding',
+    '--bulma-hero-body-padding',
+    '--bulma-hero-body-padding-tablet',
+    '--bulma-hero-body-padding-small',
+    '--bulma-hero-body-padding-medium',
+    '--bulma-hero-body-padding-large',
+    '--bulma-media-border-color',
+    '--bulma-media-border-size',
+    '--bulma-media-spacing',
+    '--bulma-media-spacing-large',
+    '--bulma-media-content-spacing',
+    '--bulma-media-level-1-spacing',
+    '--bulma-media-level-1-content-spacing',
+    '--bulma-media-level-2-spacing',
+    '--bulma-section-padding',
+    '--bulma-section-padding-desktop',
+    '--bulma-section-padding-medium',
+    '--bulma-section-padding-large',
+];
+function cssVarToProp(varName) {
+    return varName
+        .replace(/^--bulma-/, '')
+        .split('-')
+        .map((part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+const bulmaVarPropMap = Object.fromEntries(bulmaCssVars.map(cssVar => [cssVarToProp(cssVar), cssVar]));
+const Theme = ({ bulmaVars = {}, children, className, isRoot = false, ...restProps }) => {
+    const { bulmaVarProps, otherProps } = useMemo(() => {
+        const varProps = {};
+        const otherPropsObj = {};
+        for (const [key, value] of Object.entries(restProps)) {
+            if (Object.prototype.hasOwnProperty.call(bulmaVarPropMap, key)) {
+                varProps[key] = value;
+            }
+            else {
+                otherPropsObj[key] = value;
+            }
+        }
+        return { bulmaVarProps: varProps, otherProps: otherPropsObj };
+    }, [restProps]);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(otherProps);
+    const mergedVars = useMemo(() => {
+        const vars = { ...bulmaVars };
+        for (const [propName, cssVar] of Object.entries(bulmaVarPropMap)) {
+            if (bulmaVarProps[propName] !== undefined) {
+                vars[cssVar] = bulmaVarProps[propName];
+            }
+        }
+        return vars;
+    }, [bulmaVars, bulmaVarProps]);
+    useEffect(() => {
+        if (!isRoot) {
+            return;
+        }
+        const validVars = Object.entries(mergedVars).filter(([key, value]) => bulmaCssVars.includes(key) && value);
+        if (validVars.length === 0) {
+            return;
+        }
+        const styleId = 'bestax-bulma-theme-vars';
+        let styleElement = document.getElementById(styleId);
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            styleElement.id = styleId;
+            document.head.appendChild(styleElement);
+        }
+        const cssRules = validVars
+            .map(([key, value]) => `${key}: ${value};`)
+            .join(' ');
+        styleElement.textContent = `:root { ${cssRules} }`;
+        return () => {
+            const element = document.getElementById(styleId);
+            if (element) {
+                element.remove();
+            }
+        };
+    }, [mergedVars, isRoot]);
+    const style = useMemo(() => {
+        if (isRoot) {
+            return {};
+        }
+        const styleObj = {};
+        for (const [key, value] of Object.entries(mergedVars)) {
+            if (bulmaCssVars.includes(key) && value) {
+                styleObj[key] = value;
+            }
+        }
+        return styleObj;
+    }, [mergedVars, isRoot]);
+    const combinedClassName = useMemo(() => {
+        if (isRoot) {
+            return '';
+        }
+        return classNames(className, bulmaHelperClasses);
+    }, [className, bulmaHelperClasses, isRoot]);
+    return isRoot ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children })) : (jsxRuntimeExports.jsx("div", { className: combinedClassName || undefined, style: style, ...rest, children: children }));
+};
+
 const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -1886,7 +2600,8 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
             breakpointClass = `is-${breakpoint}`;
         }
     }
-    const containerClasses = classNames('container', {
+    const mainClass = classPrefix ? `${classPrefix}container` : 'container';
+    const containerClasses = classNames(mainClass, {
         'is-fluid': fluid,
         'is-widescreen': widescreen,
         'is-fullhd': fullhd,
@@ -1895,73 +2610,91 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
 };
 
 const Footer = ({ as = 'footer', className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const Tag = as;
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames('footer', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}footer` : 'footer';
+    return (jsxRuntimeExports.jsx(Tag, { className: classNames(mainClass, bulmaHelperClasses, className), ...rest, children: children }));
 };
 
 const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         backgroundColor: bgColor,
         ...props,
     });
-    const heroClasses = classNames('hero', bulmaHelperClasses, className, color && `is-${color}`, size && size !== 'fullheight-with-navbar' && `is-${size}`, {
+    const mainClass = classPrefix ? `${classPrefix}hero` : 'hero';
+    const heroClasses = classNames(mainClass, bulmaHelperClasses, className, color && `is-${color}`, size && size !== 'fullheight-with-navbar' && `is-${size}`, {
         'is-fullheight-with-navbar': fullheightWithNavbar || size === 'fullheight-with-navbar',
     });
     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,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-head', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}hero-head` : 'hero-head';
+    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, bulmaHelperClasses, className), ...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,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-body', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}hero-body` : 'hero-body';
+    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, bulmaHelperClasses, className), ...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,
     });
-    return (jsxRuntimeExports.jsx("div", { className: classNames('hero-foot', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}hero-foot` : 'hero-foot';
+    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, bulmaHelperClasses, className), ...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);
-    return (jsxRuntimeExports.jsx("nav", { className: classNames('level', bulmaHelperClasses, className, {
+    const mainClass = classPrefix ? `${classPrefix}level` : 'level';
+    return (jsxRuntimeExports.jsx("nav", { className: classNames(mainClass, bulmaHelperClasses, className, {
             'is-mobile': isMobile,
         }), ...rest, children: children }));
 };
 const LevelLeft = ({ className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("div", { className: classNames('level-left', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}level-left` : 'level-left';
+    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, bulmaHelperClasses, className), ...rest, children: children }));
 };
 const LevelRight = ({ className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntimeExports.jsx("div", { className: classNames('level-right', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}level-right` : 'level-right';
+    return (jsxRuntimeExports.jsx("div", { className: classNames(mainClass, bulmaHelperClasses, className), ...rest, children: children }));
 };
 const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, target, rel, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const Tag = as;
+    const mainClass = classPrefix ? `${classPrefix}level-item` : 'level-item';
     if (Tag === 'a') {
-        return (jsxRuntimeExports.jsx("a", { className: classNames('level-item', bulmaHelperClasses, className, {
+        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(Tag, { className: classNames('level-item', bulmaHelperClasses, className, {
+    return (jsxRuntimeExports.jsx(Tag, { className: classNames(mainClass, bulmaHelperClasses, className, {
             'has-text-centered': hasTextCentered,
         }), ...rest, children: children }));
 };
@@ -1970,9 +2703,11 @@ Level.Right = LevelRight;
 Level.Item = LevelItem;
 
 const Media = ({ as = 'article', className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const Tag = as;
-    return (jsxRuntimeExports.jsx(Tag, { className: classNames('media', bulmaHelperClasses, className), ...rest, children: children }));
+    const mainClass = classPrefix ? `${classPrefix}media` : 'media';
+    return (jsxRuntimeExports.jsx(Tag, { className: classNames(mainClass, bulmaHelperClasses, className), ...rest, children: children }));
 };
 const MediaLeft = ({ as = 'figure', className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -1992,12 +2727,14 @@ Media.Content = MediaContent;
 Media.Right = MediaRight;
 
 const Section = ({ size, className, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const sectionClasses = classNames('section', className, bulmaHelperClasses, {
+    const mainClass = classPrefix ? `${classPrefix}section` : 'section';
+    const sectionClasses = classNames(mainClass, className, bulmaHelperClasses, {
         [`is-${size}`]: size,
     });
     return (jsxRuntimeExports.jsx("section", { className: sectionClasses, ...rest, children: children }));
 };
 
-export { Block, Box, Breadcrumb, Button, Buttons, Card, Cell, Checkbox, Checkboxes, Column, Columns, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Title, Tr, __test_exports__, classNames, isBrowser, useBulmaClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Block, Box, Breadcrumb, Button, Buttons, Card, Cell, Checkbox, Checkboxes, Column, Columns, ConfigProvider, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, Skeleton, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Theme, Title, Tr, __test_exports__, classNames, 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 };
 //# sourceMappingURL=index.esm.js.map