@allxsmith/bestax-bulma 2.3.2 → 2.4.0

package/dist/index.esm.js

@@ -568,11 +568,11 @@ const Breadcrumb = ({ className, alignment, separator, size, children, ...props
     return (jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsx("ul", { children: children }) }));
 };
 
-const renderFooter = (footer) => {
+const renderFooter = (footer, classPrefix) => {
     if (!footer)
         return null;
     const items = Array.isArray(footer) ? footer : [footer];
-    return items.map((item, idx) => (jsx("span", { className: "card-footer-item", children: item }, idx)));
+    return items.map((item, idx) => (jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: item }, idx)));
 };
 const hasCompoundComponents = (children) => {
     return React.Children.toArray(children).some(child => {
@@ -587,6 +587,7 @@ const hasCompoundComponents = (children) => {
     });
 };
 const CardComponent = ({ className, children, textColor, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -596,36 +597,42 @@ const CardComponent = ({ className, children, textColor, bgColor, hasShadow = tr
         'is-shadowless': !hasShadow,
     });
     const cardClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    const renderHeader = (header, headerIcon, headerCentered) => {
+    const renderHeader = (header, headerIcon, headerCentered, classPrefix) => {
         if (!header && !headerIcon)
             return null;
-        return (jsxs("header", { className: "card-header", children: [header && (jsx("div", { className: classNames('card-header-title', {
+        return (jsxs("header", { className: prefixedClassNames(classPrefix, 'card-header'), children: [header && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-header-title', {
                         'is-centered': headerCentered,
                     }), children: header })), headerIcon] }));
     };
-    return (jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered), image && (jsx("div", { className: "card-image", children: typeof image === 'string' ? (jsx("figure", { className: "image", children: jsx("img", { src: image, alt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
+    return (jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsx("img", { src: image, alt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
                 children !== null &&
                 children !== '' &&
-                !hasCompoundComponents(children) && (jsx("div", { className: "card-content", children: children })), typeof children !== 'undefined' &&
+                !hasCompoundComponents(children) && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-content'), children: children })), typeof children !== 'undefined' &&
                 children !== null &&
                 children !== '' &&
                 hasCompoundComponents(children) &&
-                children, footer && (jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
+                children, footer && (jsx("footer", { className: prefixedClassNames(classPrefix, 'card-footer'), children: Array.isArray(footer)
+                    ? footer.map((item, idx) => (jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: item }, idx)))
+                    : footer && (jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: footer })) }))] }));
 };
 const CardHeader = ({ className, children, centered, ...props }) => {
+    const { classPrefix } = useConfig();
     const hasHeaderTitle = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         typeof child.type === 'function' &&
         child.type === CardHeaderTitle);
-    return (jsx("header", { className: classNames('card-header', className), ...props, children: hasHeaderTitle ? (children) : (jsx("div", { className: classNames('card-header-title', {
+    const headerClasses = usePrefixedClassNames('card-header');
+    return (jsx("header", { className: classNames(headerClasses, className), ...props, children: hasHeaderTitle ? (children) : (jsx("div", { className: classNames(prefixedClassNames(classPrefix, 'card-header-title', {
                 'is-centered': centered,
-            }), children: children })) }));
-};
-const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsx("div", { className: classNames('card-header-title', { 'is-centered': centered }, className), ...props, children: children }));
-const CardHeaderIcon = ({ className, children, ...props }) => (jsx("button", { className: classNames('card-header-icon', className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
-const CardImage = ({ className, children, ...props }) => (jsx("div", { className: classNames('card-image', className), ...props, children: children }));
-const CardContent = ({ className, children, ...props }) => (jsx("div", { className: classNames('card-content', className), ...props, children: children }));
-const CardFooter = ({ className, children, ...props }) => (jsx("footer", { className: classNames('card-footer', className), ...props, children: children }));
-const CardFooterItem = ({ className, children, ...props }) => (jsx("span", { className: classNames('card-footer-item', className), ...props, children: children }));
+            }), className), children: children })) }));
+};
+const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('card-header-title', {
+        'is-centered': centered,
+    }), className), ...props, children: children }));
+const CardHeaderIcon = ({ className, children, ...props }) => (jsx("button", { className: classNames(usePrefixedClassNames('card-header-icon'), className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
+const CardImage = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('card-image'), className), ...props, children: children }));
+const CardContent = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('card-content'), className), ...props, children: children }));
+const CardFooter = ({ className, children, ...props }) => (jsx("footer", { className: classNames(usePrefixedClassNames('card-footer'), className), ...props, children: children }));
+const CardFooterItem = ({ className, children, ...props }) => (jsx("span", { className: classNames(usePrefixedClassNames('card-footer-item'), className), ...props, children: children }));
 const CardWithSubComponents = CardComponent;
 const CardHeaderWithTitle = CardHeader;
 CardHeaderWithTitle.Title = CardHeaderTitle;
@@ -683,13 +690,15 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
         }
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: "dropdown-trigger", children: jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: "icon is-small", "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames('dropdown-menu', menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsx("div", { className: "dropdown-content", onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
+    return (jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
 };
 const DropdownItem = ({ children, active, className, as: Component = 'a', ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsx(Component, { className: classNames('dropdown-item', bulmaHelperClasses, { 'is-active': active }, className), tabIndex: 0, role: "menuitem", "data-testid": "dropdown-item", ...rest, children: children }));
+    return (jsx(Component, { className: classNames(usePrefixedClassNames('dropdown-item', {
+            'is-active': active,
+        }), bulmaHelperClasses, className), tabIndex: 0, role: "menuitem", "data-testid": "dropdown-item", ...rest, children: children }));
 };
-const DropdownDivider = () => (jsx("hr", { className: "dropdown-divider" }));
+const DropdownDivider = () => (jsx("hr", { className: usePrefixedClassNames('dropdown-divider') }));
 const Dropdown = Object.assign(DropdownComponent, {
     Item: DropdownItem,
     Divider: DropdownDivider,
@@ -703,19 +712,19 @@ const MenuComponent = ({ className, children, ...props }) => {
 };
 const MenuLabel = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsx("p", { className: classNames('menu-label', className, bulmaHelperClasses), ...rest, children: children }));
+    return (jsx("p", { className: classNames(usePrefixedClassNames('menu-label'), className, bulmaHelperClasses), ...rest, children: children }));
 };
 const MenuList = ({ className, children, ...props }) => {
     const level = useContext(MenuListLevelContext);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const ulClass = classNames(className, bulmaHelperClasses, {
-        'menu-list': level === 0,
+        [usePrefixedClassNames('menu-list')]: level === 0,
     });
     return (jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsx("ul", { className: ulClass, ...rest, children: children }) }));
 };
 const MenuItem = ({ className, children, active, href, as: Component = 'a', 'data-testid': testId, ...rest }) => {
     const { bulmaHelperClasses, rest: bulmaRest } = useBulmaClasses(rest);
-    const itemClass = classNames({ 'is-active': active }, bulmaHelperClasses);
+    const itemClass = classNames({ [usePrefixedClassNames('is-active')]: active }, bulmaHelperClasses);
     const { style, id, title, role, tabIndex, ...linkProps } = bulmaRest;
     const labelChildren = [];
     const nestedMenuLists = [];
@@ -742,6 +751,7 @@ const Menu = Object.assign(MenuComponent, {
 });
 
 const MessageComponent = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -752,20 +762,72 @@ const MessageComponent = ({ className, title, textColor, color, bgColor, onClose
     });
     const deleteClass = usePrefixedClassNames('delete');
     const messageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxs("div", { className: "message-header", children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
+    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsx("div", { className: prefixedClassNames(classPrefix, 'message-body'), "data-testid": "message-body", children: children }))] }));
 };
-const MessageHeader = ({ className, children, ...props }) => (jsx("div", { className: classNames('message-header', className), ...props, children: children }));
-const MessageBody = ({ className, children, ...props }) => (jsx("div", { className: classNames('message-body', className), ...props, children: children }));
+const MessageHeader = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('message-header'), className), ...props, children: children }));
+const MessageBody = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('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 ModalBackground = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-background'), className);
+    return jsx("div", { className: classes, ...props });
+};
+const ModalContent = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-content'), className);
+    return jsx("div", { className: classes, ...props });
+};
+const ModalCardHead = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-head'), className);
+    return jsx("header", { className: classes, ...props });
+};
+const ModalCardTitle = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-title'), className);
+    return jsx("p", { className: classes, ...props });
+};
+const ModalCardBody = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-body'), className);
+    return jsx("section", { className: classes, ...props });
+};
+const ModalCardFoot = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-foot'), className);
+    return jsx("footer", { className: classes, ...props });
+};
+const ModalCard = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card'), className);
+    return jsx("div", { className: classes, ...props });
+};
+ModalCard.Head = ModalCardHead;
+ModalCard.Title = ModalCardTitle;
+ModalCard.Body = ModalCardBody;
+ModalCard.Foot = ModalCardFoot;
+const ModalClose = ({ className, size = 'large', variant = 'delete', ...props }) => {
+    const classes = classNames(usePrefixedClassNames(variant === 'delete' ? 'delete' : 'modal-close', variant === 'floating' && size && { [`is-${size}`]: true }), className);
+    return (jsx("button", { className: classes, "aria-label": "close", type: "button", ...props }));
+};
+const ModalRoot = ({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
+    var _a;
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
+    const isModalActive = (_a = active !== null && active !== void 0 ? active : isActive) !== null && _a !== void 0 ? _a : false;
+    const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        (child.type === ModalBackground ||
+            child.type === ModalContent ||
+            child.type === ModalCard ||
+            child.type === ModalClose));
+    const bulmaClasses = usePrefixedClassNames('modal', {
+        'is-active': isModalActive,
+    });
+    const deleteClass = usePrefixedClassNames('delete');
+    const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    if (hasCompoundComponents) {
+        return (jsx("div", { className: modalClasses, ...rest, "data-testid": "modal", children: children }));
+    }
     let isModalCard;
     if (type === 'card')
         isModalCard = true;
@@ -773,13 +835,13 @@ const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCa
         isModalCard = false;
     else
         isModalCard = !!modalCardTitle || !!modalCardFoot;
-    const bulmaClasses = usePrefixedClassNames('modal', {
-        'is-active': active,
-    });
-    const deleteClass = usePrefixedClassNames('delete');
-    const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxs("header", { className: "modal-card-head", children: [jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: "modal-card-body", "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: "modal-card-foot", children: modalCardFoot }))] })) : (jsx("div", { className: "modal-content", "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: "modal-close is-large", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
+    return (jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsx("p", { className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
 };
+ModalRoot.Background = ModalBackground;
+ModalRoot.Content = ModalContent;
+ModalRoot.Card = ModalCard;
+ModalRoot.Close = ModalClose;
+const Modal = ModalRoot;
 
 const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -800,7 +862,7 @@ const NavbarBrand = ({ className, children, textColor, ...props }) => {
         color: textColor,
         ...props,
     });
-    return (jsx("div", { className: classNames('navbar-brand', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("div", { className: classNames(usePrefixedClassNames('navbar-brand'), bulmaHelperClasses, className), ...rest, children: children }));
 };
 const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -808,50 +870,50 @@ const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsx(Component, { className: classNames('navbar-item', bulmaHelperClasses, className, {
+    return (jsx(Component, { className: classNames(usePrefixedClassNames('navbar-item', {
             'is-active': active,
-        }), ...rest, children: children }));
+        }), bulmaHelperClasses, className), ...rest, children: children }));
 };
 const NavbarBurger = ({ className, active, children, ...props }) => {
     var _a;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsxs("button", { type: "button", className: classNames('navbar-burger', bulmaHelperClasses, className, {
+    return (jsxs("button", { type: "button", className: classNames(usePrefixedClassNames('navbar-burger', {
             'is-active': active,
-        }), "aria-label": props['aria-label'] || 'menu', "aria-expanded": (_a = props['aria-expanded']) !== null && _a !== void 0 ? _a : !!active, ...rest, children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), children] }));
+        }), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded": (_a = props['aria-expanded']) !== null && _a !== void 0 ? _a : !!active, ...rest, children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), children] }));
 };
 const NavbarMenu = ({ className, active, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsx("div", { className: classNames('navbar-menu', bulmaHelperClasses, className, {
+    return (jsx("div", { className: classNames(usePrefixedClassNames('navbar-menu', {
             'is-active': active,
-        }), ...rest, children: children }));
+        }), bulmaHelperClasses, className), ...rest, children: children }));
 };
 const NavbarStart = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsx("div", { className: classNames('navbar-start', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("div", { className: classNames(usePrefixedClassNames('navbar-start'), bulmaHelperClasses, className), ...rest, children: children }));
 };
 const NavbarEnd = ({ className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
-    return (jsx("div", { className: classNames('navbar-end', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("div", { className: classNames(usePrefixedClassNames('navbar-end'), bulmaHelperClasses, className), ...rest, children: children }));
 };
-const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...props }) => (jsx("div", { className: classNames('navbar-item', 'has-dropdown', {
+const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('navbar-item', 'has-dropdown', {
         'is-right': right,
         'is-up': up,
         'is-hoverable': hoverable,
         'is-active': active,
-    }, className), ...props, children: children }));
-const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (jsx("div", { className: classNames('navbar-dropdown', {
+    }), className), ...props, children: children }));
+const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('navbar-dropdown', {
         'is-right': right,
         'is-up': up,
-    }, className), ...props, children: children }));
-const NavbarDivider = props => jsx("hr", { className: "navbar-divider", ...props });
+    }), className), ...props, children: children }));
+const NavbarDivider = props => (jsx("hr", { className: usePrefixedClassNames('navbar-divider'), ...props }));
 Navbar.Brand = NavbarBrand;
 Navbar.Item = NavbarItem;
 Navbar.Burger = NavbarBurger;
@@ -862,7 +924,7 @@ Navbar.Dropdown = NavbarDropdown;
 Navbar.DropdownMenu = NavbarDropdownMenu;
 Navbar.Divider = NavbarDivider;
 
-const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames('pagination-previous', className, {
+const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous'), className, {
         'is-disabled': disabled,
     }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
@@ -870,7 +932,7 @@ const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx
             e.stopPropagation();
         }
         : props.onClick, children: children }));
-const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames('pagination-next', className, {
+const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('pagination-next'), className, {
         'is-disabled': disabled,
     }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
@@ -899,7 +961,7 @@ const PaginationList = ({ className, textColor, bgColor, children, ...props }) =
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsx("ul", { className: classNames('pagination-list', bulmaHelperClasses, className), ...rest, children: children }));
+    return (jsx("ul", { className: classNames(usePrefixedClassNames('pagination-list'), bulmaHelperClasses, className), ...rest, children: children }));
 };
 const PaginationLink = ({ className, textColor, bgColor, active, disabled, onClick, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -917,12 +979,12 @@ const PaginationLink = ({ className, textColor, bgColor, active, disabled, onCli
             onClick(e);
         }
     };
-    return (jsx("li", { children: jsx("a", { className: classNames('pagination-link', bulmaHelperClasses, className, {
+    return (jsx("li", { children: jsx("a", { className: classNames(usePrefixedClassNames('pagination-link'), bulmaHelperClasses, className, {
                 'is-current': active,
                 'is-disabled': disabled,
             }), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
 };
-const PaginationEllipsis = props => (jsx("li", { children: jsx("span", { className: "pagination-ellipsis", ...props, children: "\u2026" }) }));
+const PaginationEllipsis = props => (jsx("li", { children: jsx("span", { className: usePrefixedClassNames('pagination-ellipsis'), ...props, children: "\u2026" }) }));
 Pagination.Link = PaginationLink;
 Pagination.List = PaginationList;
 Pagination.Ellipsis = PaginationEllipsis;
@@ -940,16 +1002,16 @@ const Panel = ({ color, className, children, ...props }) => {
     const panelClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsx("nav", { className: panelClasses, ...rest, children: children }));
 };
-const PanelHeading = ({ className, children, ...props }) => (jsx("p", { className: classNames('panel-heading', className), ...props, children: children }));
-const PanelTabs = ({ className, children, ...props }) => (jsx("p", { className: classNames('panel-tabs', className), ...props, children: children }));
-const PanelBlock = ({ className, active, children, ...props }) => (jsx("a", { className: classNames('panel-block', className, { 'is-active': active }), ...props, children: children }));
-const PanelIcon = ({ className, children, ...props }) => (jsx("span", { className: classNames('panel-icon', className), ...props, children: children }));
+const PanelHeading = ({ className, children, ...props }) => (jsx("p", { className: classNames(usePrefixedClassNames('panel-heading'), className), ...props, children: children }));
+const PanelTabs = ({ className, children, ...props }) => (jsx("p", { className: classNames(usePrefixedClassNames('panel-tabs'), className), ...props, children: children }));
+const PanelBlock = ({ className, active, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('panel-block', { 'is-active': active }), className), ...props, children: children }));
+const PanelIcon = ({ className, children, ...props }) => (jsx("span", { className: classNames(usePrefixedClassNames('panel-icon'), className), ...props, children: children }));
 const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa-search', ...props }) => {
     const inputClass = usePrefixedClassNames('input');
-    return (jsx("div", { className: "panel-block", ...props, children: jsxs("p", { className: "control has-icons-left", children: [jsx("input", { className: inputClass, type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsx("span", { className: "icon is-left", children: jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
+    return (jsx("div", { className: usePrefixedClassNames('panel-block'), ...props, children: jsxs("p", { className: usePrefixedClassNames('control', 'has-icons-left'), children: [jsx("input", { className: inputClass, type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsx("span", { className: usePrefixedClassNames('icon', 'is-left'), children: jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
 };
-const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxs("label", { className: "panel-block", ...props, children: [jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
-const PanelButtonBlock = ({ children, className, ...props }) => (jsx("div", { className: "panel-block", children: jsx("button", { className: classNames('button is-link is-outlined is-fullwidth', className), ...props, children: children }) }));
+const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxs("label", { className: usePrefixedClassNames('panel-block'), ...props, children: [jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
+const PanelButtonBlock = ({ children, className, ...props }) => (jsx("div", { className: usePrefixedClassNames('panel-block'), children: jsx("button", { className: classNames(usePrefixedClassNames('button', 'is-link', 'is-outlined', 'is-fullwidth'), className), ...props, children: children }) }));
 Panel.Heading = PanelHeading;
 Panel.Tabs = PanelTabs;
 Panel.Block = PanelBlock;
@@ -975,7 +1037,7 @@ const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, className
     return (jsx("div", { className: tabsClass, ...rest, children: children }));
 };
 const TabList = ({ className, children, ...props }) => (jsx("ul", { className: classNames(className), ...props, children: children }));
-const TabItem = ({ active, className, children, onClick, ...props }) => (jsx("li", { className: classNames({ 'is-active': active }, className), onClick: onClick, ...props, children: children }));
+const TabItem = ({ active, className, children, onClick, ...props }) => (jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className), onClick: onClick, ...props, children: children }));
 Tabs.List = TabList;
 Tabs.Item = TabItem;
 
@@ -1483,6 +1545,7 @@ 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
@@ -1517,7 +1580,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
         [`is-${size}`]: !!size,
     });
     const controlClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsx(Icon, { ...leftIconProps, className: "is-left" })), rightIconProps && rightIconProps.name && (jsx(Icon, { ...rightIconProps, className: "is-right" }))] }));
+    return (jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsx(Icon, { ...leftIconProps, className: prefixedClassNames(classPrefix, 'is-left') })), rightIconProps && rightIconProps.name && (jsx(Icon, { ...rightIconProps, className: prefixedClassNames(classPrefix, 'is-right') }))] }));
 });
 Control.displayName = 'Control';
 
@@ -1590,19 +1653,20 @@ 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,
     });
     let alignmentClass;
     if (isRight && isCentered) {
-        alignmentClass = 'is-right';
+        alignmentClass = prefixedClassNames(classPrefix, 'is-right');
     }
     else if (isRight) {
-        alignmentClass = 'is-right';
+        alignmentClass = prefixedClassNames(classPrefix, 'is-right');
     }
     else if (isCentered) {
-        alignmentClass = 'is-centered';
+        alignmentClass = prefixedClassNames(classPrefix, 'is-centered');
     }
     const mainClass = usePrefixedClassNames('file', {
         [`is-${color}`]: !!color,
@@ -1612,7 +1676,7 @@ const File = forwardRef(({ color, size, isBoxed, isFullwidth, isRight, isCentere
         'has-name': hasName,
     });
     const fileClass = classNames(mainClass, bulmaHelperClasses, alignmentClass, className);
-    return (jsx("div", { className: fileClass, children: jsxs("label", { className: "file-label", children: [jsx("input", { ref: ref, className: classNames('file-input', inputClassName), type: "file", ...rest }), jsxs("span", { className: "file-cta", children: [iconLeft && jsx("span", { className: "file-icon", children: iconLeft }), jsx("span", { className: "file-label", children: label || 'Choose a file…' }), iconRight && jsx("span", { className: "file-icon", children: iconRight })] }), hasName && fileName && jsx("span", { className: "file-name", children: fileName })] }) }));
+    return (jsx("div", { className: fileClass, children: jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", ...rest }), jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsx("span", { className: usePrefixedClassNames('file-label'), children: label || 'Choose a file…' }), iconRight && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
 });
 File.displayName = 'File';