@allxsmith/bestax-bulma 5.6.2 → 5.7.0

package/dist/index.esm.js

@@ -680,7 +680,15 @@ const Column = ({ className, textColor, color: _fieldColor, bgColor, size, sizeM
     return (jsx("div", { className: columnClasses, ...rest, children: children }));
 };
 
-const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gap, gapMobile, gapTablet, gapDesktop, gapWidescreen, gapFullhd, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
+function withSubComponents(base, subs, displayName) {
+    const compound = Object.assign(base, subs);
+    if (displayName !== undefined) {
+        compound.displayName = displayName;
+    }
+    return compound;
+}
+
+const ColumnsComponent = ({ className, textColor, color: _fieldColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gap, gapMobile, gapTablet, gapDesktop, gapWidescreen, gapFullhd, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
     const resolvedGap = gap ?? gapSize;
     const resolvedGapMobile = gapMobile ?? gapSizeMobile;
     const resolvedGapTablet = gapTablet ?? gapSizeTablet;
@@ -710,6 +718,7 @@ const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered
     const columnsClasses = classNames(mainClass, gapClasses, className, bulmaHelperClasses);
     return (jsx("div", { className: columnsClasses, ...rest, children: children }));
 };
+const Columns = withSubComponents(ColumnsComponent, { Column }, 'Columns');
 
 const avatarColors = [
     'primary',
@@ -839,7 +848,7 @@ function flattenChildren(children, keyPrefix = '') {
         ];
     });
 }
-const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false, surplusLabel, style, children, ...props }) => {
+const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced = false, surplusLabel, style, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const isPresetSpacing = typeof spacing === 'string';
     const avatarsClasses = usePrefixedClassNames('avatars', {
@@ -864,8 +873,7 @@ const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false,
                 ...(shape !== undefined ? { shape } : {}),
             })), overflowCount > 0 && (jsx(Avatar, { initials: `+${overflowCount}`, alt: surplusLabel?.(overflowCount) || `${overflowCount} more`, size: size, shape: shape, className: surplusClass }))] }));
 };
-Avatars.displayName = 'Avatars';
-Avatars.Avatar = Avatar;
+const Avatars = withSubComponents(AvatarsComponent, { Avatar }, 'Avatars');
 
 const badgeColors = [
     'primary',
@@ -1014,15 +1022,17 @@ const CardImage = ({ className, children, ...props }) => (jsx("div", { className
 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;
-CardHeaderWithTitle.Icon = CardHeaderIcon;
-CardWithSubComponents.Header = CardHeaderWithTitle;
-CardWithSubComponents.Image = CardImage;
-CardWithSubComponents.Content = CardContent;
-CardWithSubComponents.Footer = CardFooter;
-CardWithSubComponents.FooterItem = CardFooterItem;
+const CardHeaderCompound = withSubComponents(CardHeader, {
+    Title: CardHeaderTitle,
+    Icon: CardHeaderIcon,
+});
+const Card = withSubComponents(CardComponent, {
+    Header: CardHeaderCompound,
+    Image: CardImage,
+    Content: CardContent,
+    Footer: CardFooter,
+    FooterItem: CardFooterItem,
+}, 'Card');
 const __test_exports__ = { renderFooter };
 
 const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== 'undefined';
@@ -1079,10 +1089,10 @@ const DropdownItem = ({ children, active, className, as: Component = 'a', ...pro
         }), bulmaHelperClasses, className), tabIndex: 0, role: "menuitem", "data-testid": "dropdown-item", ...rest, children: children }));
 };
 const DropdownDivider = () => (jsx("hr", { className: usePrefixedClassNames('dropdown-divider') }));
-const Dropdown = Object.assign(DropdownComponent, {
+const Dropdown = withSubComponents(DropdownComponent, {
     Item: DropdownItem,
     Divider: DropdownDivider,
-});
+}, 'Dropdown');
 
 const MenuListLevelContext = createContext(0);
 const MenuComponent = ({ className, children, ...props }) => {
@@ -1124,11 +1134,11 @@ const MenuItem = ({ className, children, active, href, as: Component = 'a', 'dat
     }
     return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { className: itemClass, ...linkProps, children: labelChildren }), nestedMenuLists] }));
 };
-const Menu = Object.assign(MenuComponent, {
+const Menu = withSubComponents(MenuComponent, {
     Label: MenuLabel,
     List: MenuList,
     Item: MenuItem,
-});
+}, 'Menu');
 
 const MessageComponent = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
     const { classPrefix } = useConfig();
@@ -1146,9 +1156,10 @@ const MessageComponent = ({ className, title, textColor, color, bgColor, onClose
 };
 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 Message = withSubComponents(MessageComponent, {
+    Header: MessageHeader,
+    Body: MessageBody,
+}, 'Message');
 
 const ModalBackground = ({ className, ...props }) => {
     const classes = classNames(usePrefixedClassNames('modal-background'), className);
@@ -1174,14 +1185,16 @@ const ModalCardFoot = ({ className, ...props }) => {
     const classes = classNames(usePrefixedClassNames('modal-card-foot'), className);
     return jsx("footer", { className: classes, ...props });
 };
-const ModalCard = ({ className, ...props }) => {
+const ModalCardComponent = ({ 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 ModalCard = withSubComponents(ModalCardComponent, {
+    Head: ModalCardHead,
+    Title: ModalCardTitle,
+    Body: ModalCardBody,
+    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 }));
@@ -1216,13 +1229,14 @@ const ModalRoot = ({ active, isActive, onClose, className, textColor, bgColor, m
         isModalCard = !!modalCardTitle || !!modalCardFoot;
     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 Modal = withSubComponents(ModalRoot, {
+    Background: ModalBackground,
+    Content: ModalContent,
+    Card: ModalCard,
+    Close: ModalClose,
+}, 'Modal');
 
-const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, children, ...props }) => {
+const NavbarComponent = ({ className, textColor, bgColor, color, transparent, fixed, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -1302,16 +1316,18 @@ const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (js
         'is-up': up,
     }), className), ...props, children: children }));
 const NavbarDivider = props => (jsx("hr", { className: usePrefixedClassNames('navbar-divider'), ...props }));
-Navbar.Brand = NavbarBrand;
-Navbar.Item = NavbarItem;
-Navbar.Link = NavbarLink;
-Navbar.Burger = NavbarBurger;
-Navbar.Menu = NavbarMenu;
-Navbar.Start = NavbarStart;
-Navbar.End = NavbarEnd;
-Navbar.Dropdown = NavbarDropdown;
-Navbar.DropdownMenu = NavbarDropdownMenu;
-Navbar.Divider = NavbarDivider;
+const Navbar = withSubComponents(NavbarComponent, {
+    Brand: NavbarBrand,
+    Item: NavbarItem,
+    Link: NavbarLink,
+    Burger: NavbarBurger,
+    Menu: NavbarMenu,
+    Start: NavbarStart,
+    End: NavbarEnd,
+    Dropdown: NavbarDropdown,
+    DropdownMenu: NavbarDropdownMenu,
+    Divider: NavbarDivider,
+}, 'Navbar');
 
 const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous'), className, {
         'is-disabled': disabled,
@@ -1329,7 +1345,7 @@ const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a"
             e.stopPropagation();
         }
         : props.onClick, children: children }));
-const Pagination = ({ color, textColor, bgColor, size, align, rounded, className, children, ...props }) => {
+const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -1374,11 +1390,13 @@ const PaginationLink = ({ className, textColor, bgColor, active, disabled, onCli
             }), "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: usePrefixedClassNames('pagination-ellipsis'), ...props, children: "\u2026" }) }));
-Pagination.Link = PaginationLink;
-Pagination.List = PaginationList;
-Pagination.Ellipsis = PaginationEllipsis;
-Pagination.Previous = PaginationPrevious;
-Pagination.Next = PaginationNext;
+const Pagination = withSubComponents(PaginationComponent, {
+    Link: PaginationLink,
+    List: PaginationList,
+    Ellipsis: PaginationEllipsis,
+    Previous: PaginationPrevious,
+    Next: PaginationNext,
+}, 'Pagination');
 
 function stripRedundantLibraryPrefix(name, library) {
     if (!name) {
@@ -1544,7 +1562,7 @@ const Icon = ({ className, textColor, bgColor, name, library, variant, features,
     return (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsx("i", { className: iClasses }) }));
 };
 
-const Panel = ({ color, className, children, ...props }) => {
+const PanelComponent = ({ color, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -1565,19 +1583,21 @@ const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa
 };
 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;
-Panel.Icon = PanelIcon;
-Panel.InputBlock = PanelInputBlock;
-Panel.CheckboxBlock = PanelCheckboxBlock;
-Panel.ButtonBlock = PanelButtonBlock;
+const Panel = withSubComponents(PanelComponent, {
+    Heading: PanelHeading,
+    Tabs: PanelTabs,
+    Block: PanelBlock,
+    Icon: PanelIcon,
+    InputBlock: PanelInputBlock,
+    CheckboxBlock: PanelCheckboxBlock,
+    ButtonBlock: PanelButtonBlock,
+}, 'Panel');
 
 const TabsContext = createContext(null);
 function useTabsContext() {
     return useContext(TabsContext);
 }
-const Tabs = ({ align, size, fullwidth, boxed, toggle, rounded, color, value, onChange, defaultValue = 0, vertical, side, expanded, className, children, ...props }) => {
+const TabsComponent = ({ align, size, fullwidth, boxed, toggle, rounded, color, value, onChange, defaultValue = 0, vertical, side, expanded, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const isControlled = value !== undefined;
     const [internalTab, setInternalTab] = useState(defaultValue);
@@ -1650,7 +1670,7 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
     return (jsx("li", { className: classNames(activeClass, className), role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsx("span", { children: children })] }) }));
 };
 const TabItem = ({ active, className, children, onClick, ...props }) => (jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className), onClick: onClick, ...props, children: children }));
-const TabsContent = ({ className, children, ...props }) => {
+const TabsContentComponent = ({ className, children, ...props }) => {
     const contentClass = usePrefixedClassNames('tabs-content');
     return (jsx("div", { className: classNames(contentClass, className), ...props, children: children }));
 };
@@ -1662,11 +1682,15 @@ const TabContentItem = ({ index, className, children, ...props }) => {
     });
     return (jsx("div", { className: classNames(itemClass, className), role: "tabpanel", "aria-hidden": !isActive, ...props, children: children }));
 };
-TabsContent.Item = TabContentItem;
-Tabs.List = TabList;
-Tabs.Tab = Tab;
-Tabs.Item = TabItem;
-Tabs.Content = Object.assign(TabsContent, { Item: TabContentItem });
+const TabsContent = withSubComponents(TabsContentComponent, {
+    Item: TabContentItem,
+});
+const Tabs = withSubComponents(TabsComponent, {
+    List: TabList,
+    Tab,
+    Item: TabItem,
+    Content: TabsContent,
+}, 'Tabs');
 
 const Loading = ({ active = false, isFullPage = false, size, color, canCancel = false, onCancel, children, className, overlayClassName, iconClassName, indicator, overlay, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -1989,7 +2013,7 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
             : (stepNumber ?? null));
     return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: stepsLinkClass, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsx("div", { className: stepsContentClass, children: jsx("p", { className: stepsTitleClass, children: label || children }) }))] }) }));
 };
-const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = true, rounded = true, vertical = false, labelPosition = 'bottom', mobileMode, showStepNumbers = true, hasNavigation = false, prevLabel, nextLabel, onPrev, onNext, onStepClick, className, children, ...props }) => {
+const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, animated = true, rounded = true, vertical = false, labelPosition = 'bottom', mobileMode, showStepNumbers = true, hasNavigation = false, prevLabel, nextLabel, onPrev, onNext, onStepClick, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const stepsClasses = usePrefixedClassNames('steps', {
         [`is-${size}`]: size,
@@ -2034,7 +2058,7 @@ const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = tru
     };
     return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
 };
-Steps.Step = Step;
+const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
 
 const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width = '260px', fullWidth = false, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -2117,7 +2141,6 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
     }
     return null;
 });
-SidebarComponent.displayName = 'Sidebar';
 const SidebarHeader = ({ className, children, ...props }) => {
     const headerClass = usePrefixedClassNames('sidebar-header');
     return (jsx("div", { className: classNames(headerClass, className), ...props, children: children }));
@@ -2138,13 +2161,13 @@ const SidebarFooter = ({ className, children, ...props }) => {
     const footerClass = usePrefixedClassNames('sidebar-footer');
     return (jsx("div", { className: classNames(footerClass, className), ...props, children: children }));
 };
-const Sidebar = Object.assign(SidebarComponent, {
+const Sidebar = withSubComponents(SidebarComponent, {
     Header: SidebarHeader,
     Title: SidebarTitle,
     Close: SidebarClose,
     Body: SidebarBody,
     Footer: SidebarFooter,
-});
+}, 'Sidebar');
 
 const Toast = forwardRef(({ message, type = 'default', actionType, position = 'top-right', duration = 2000, indefinite = false, dismissible = true, closable = false, rounded = false, pauseOnHover = false, cancelable = true, actionText, cancelText, onAction, onClose, container, inline = false, className, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -2883,7 +2906,13 @@ const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...pro
     return (jsx("div", { className: boxClasses, ...rest, children: children }));
 };
 
-const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
+const LinkButton = ({ variant = 'text', color, className, ...props }) => {
+    const buttonColor = variant === 'underline' ? 'text' : variant;
+    const prefixedClasses = usePrefixedClassNames('link-button', color && `link-button-${color}`, variant === 'underline' && 'link-button-underline');
+    return (jsx(Button, { color: buttonColor, className: classNames(prefixedClasses, className), ...props }));
+};
+
+const ButtonsComponent = ({ className, textColor, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
     const buttonsClasses = usePrefixedClassNames('buttons', {
         'is-centered': isCentered,
         'is-right': isRight,
@@ -2897,12 +2926,10 @@ const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons
     const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
     return (jsx("div", { className: combinedClasses, ...rest, children: children }));
 };
-
-const LinkButton = ({ variant = 'text', color, className, ...props }) => {
-    const buttonColor = variant === 'underline' ? 'text' : variant;
-    const prefixedClasses = usePrefixedClassNames('link-button', color && `link-button-${color}`, variant === 'underline' && 'link-button-underline');
-    return (jsx(Button, { color: buttonColor, className: classNames(prefixedClasses, className), ...props }));
-};
+const Buttons = withSubComponents(ButtonsComponent, {
+    Button,
+    LinkButton,
+}, 'Buttons');
 
 const Code = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -2984,11 +3011,11 @@ const FigureComponent = ({ className, textColor, bgColor, children, ...props })
     const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
 };
-const Figure = Object.assign(FigureComponent, {
+const Figure = withSubComponents(FigureComponent, {
     Caption: FigureCaption,
-});
+}, 'Figure');
 
-const IconText = ({ className, textColor, bgColor, iconProps, children, items, ...props }) => {
+const IconTextComponent = ({ className, textColor, bgColor, iconProps, children, items, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -2998,6 +3025,7 @@ const IconText = ({ className, textColor, bgColor, iconProps, children, items, .
     const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxs(React.Fragment, { children: [jsx(Icon, { ...item.iconProps }), item.text && jsx("span", { children: item.text })] }, index)))) : (jsxs(Fragment, { children: [iconProps && jsx(Icon, { ...iconProps }), children && jsx("span", { children: children })] })) }));
 };
+const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
 
 const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -3180,7 +3208,7 @@ const NotificationContainer = ({ position = 'top-right' }) => {
     return createPortal(jsx("div", { style: containerStyle, children: items.map(item => (jsx(NotificationItem, { instance: item, onClose: notification.close }, item.id))) }), document.body);
 };
 
-const OrderedList = ({ className, textColor, bgColor, children, ...props }) => {
+const OrderedListComponent = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -3190,6 +3218,7 @@ const OrderedList = ({ className, textColor, bgColor, children, ...props }) => {
     const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsx("ol", { className: listClasses || undefined, ...rest, children: children }));
 };
+const OrderedList = withSubComponents(OrderedListComponent, { Item: ListItem }, 'OrderedList');
 
 const Paragraph = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -3283,7 +3312,69 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor,
     return (jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
 };
 
-const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
+const Thead = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const theadClasses = classNames(className, bulmaHelperClasses);
+    return (jsx("thead", { className: theadClasses, ...rest, children: children }));
+};
+
+const Tbody = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tbodyClasses = classNames(className, bulmaHelperClasses);
+    return (jsx("tbody", { className: tbodyClasses, ...rest, children: children }));
+};
+
+const Tfoot = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tfootClasses = classNames(className, bulmaHelperClasses);
+    return (jsx("tfoot", { className: tfootClasses, ...rest, children: children }));
+};
+
+const validTableColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
+];
+const Td = ({ className, color, children, ...props }) => {
+    const colorClass = usePrefixedClassNames('', {
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
+    return (jsx("td", { className: tdClasses, ...rest, children: children }));
+};
+
+const Tr = ({ className, isSelected, color, children, ...props }) => {
+    const bulmaClasses = usePrefixedClassNames('', {
+        'is-selected': isSelected,
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
+    return (jsx("tr", { className: trClasses, ...rest, children: children }));
+};
+
+const validAlignments = ['left', 'right', 'centered'];
+const Th = ({ className, isAligned, width, color, children, ...props }) => {
+    const bulmaClasses = usePrefixedClassNames('', {
+        [`has-text-${isAligned}`]: isAligned && validAlignments.includes(isAligned),
+        [`is-${color}`]: color && validTableColors.includes(color),
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
+    return (jsx("th", { className: thClasses, style: width
+            ? { width: typeof width === 'number' ? `${width}px` : width }
+            : undefined, ...rest, children: children }));
+};
+
+const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const bulmaClasses = usePrefixedClassNames('table', {
         'is-bordered': isBordered,
@@ -3300,6 +3391,14 @@ const Table = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFull
     }
     return tableElement;
 };
+const Table = withSubComponents(TableComponent, {
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
+}, 'Table');
 
 const validTagColors = [
     'primary',
@@ -3330,7 +3429,7 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
     return (jsx("span", { className: tagClasses, ...rest, children: children }));
 };
 
-const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
+const TagsComponent = ({ className, hasAddons, isMultiline, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const bulmaClasses = usePrefixedClassNames('tags', {
         'has-addons': hasAddons,
@@ -3339,58 +3438,7 @@ const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
     const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsx("div", { className: tagsClasses, ...rest, children: children }));
 };
-
-const Tbody = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tbodyClasses = classNames(className, bulmaHelperClasses);
-    return (jsx("tbody", { className: tbodyClasses, ...rest, children: children }));
-};
-
-const validTableColors = [
-    'primary',
-    'link',
-    'info',
-    'success',
-    'warning',
-    'danger',
-    'black',
-    'dark',
-    'light',
-    'white',
-];
-const Td = ({ className, color, children, ...props }) => {
-    const colorClass = usePrefixedClassNames('', {
-        [`is-${color}`]: color && validTableColors.includes(color),
-    });
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
-    return (jsx("td", { className: tdClasses, ...rest, children: children }));
-};
-
-const Tfoot = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tfootClasses = classNames(className, bulmaHelperClasses);
-    return (jsx("tfoot", { className: tfootClasses, ...rest, children: children }));
-};
-
-const validAlignments = ['left', 'right', 'centered'];
-const Th = ({ className, isAligned, width, color, children, ...props }) => {
-    const bulmaClasses = usePrefixedClassNames('', {
-        [`has-text-${isAligned}`]: isAligned && validAlignments.includes(isAligned),
-        [`is-${color}`]: color && validTableColors.includes(color),
-    });
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsx("th", { className: thClasses, style: width
-            ? { width: typeof width === 'number' ? `${width}px` : width }
-            : undefined, ...rest, children: children }));
-};
-
-const Thead = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const theadClasses = classNames(className, bulmaHelperClasses);
-    return (jsx("thead", { className: theadClasses, ...rest, children: children }));
-};
+const Tags = withSubComponents(TagsComponent, { Tag }, 'Tags');
 
 const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
 const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
@@ -3412,17 +3460,7 @@ const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, b
     return (jsx(Tag, { className: titleClasses, ...rest, children: children }));
 };
 
-const Tr = ({ className, isSelected, color, children, ...props }) => {
-    const bulmaClasses = usePrefixedClassNames('', {
-        'is-selected': isSelected,
-        [`is-${color}`]: color && validTableColors.includes(color),
-    });
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsx("tr", { className: trClasses, ...rest, children: children }));
-};
-
-const UnorderedList = ({ className, textColor, bgColor, children, ...props }) => {
+const UnorderedListComponent = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -3432,6 +3470,7 @@ const UnorderedList = ({ className, textColor, bgColor, children, ...props }) =>
     const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsx("ul", { className: listClasses || undefined, ...rest, children: children }));
 };
+const UnorderedList = withSubComponents(UnorderedListComponent, { Item: ListItem }, 'UnorderedList');
 
 const FieldContext = createContext(false);
 const ControlContext = createContext(false);
@@ -3490,6 +3529,48 @@ const Checkbox = forwardRef(({ color, size, className, children, textColor, disa
 });
 Checkbox.displayName = 'Checkbox';
 
+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
+        : undefined;
+    const safeBgColor = allowedColors.includes(bgColor)
+        ? bgColor
+        : undefined;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: safeTextColor,
+        backgroundColor: safeBgColor,
+        ...restProps,
+    });
+    const leftIconProps = iconLeft ||
+        (iconLeftName
+            ? {
+                name: iconLeftName,
+                size: iconLeftSize,
+            }
+            : undefined);
+    const rightIconProps = iconRight ||
+        (iconRightName
+            ? {
+                name: iconRightName,
+                size: iconRightSize,
+            }
+            : undefined);
+    const mainClass = usePrefixedClassNames('control', {
+        'has-icons-left': hasIconsLeft || !!leftIconProps,
+        'has-icons-right': hasIconsRight || !!rightIconProps,
+        'is-loading': isLoading,
+        'is-expanded': isExpanded,
+        [`is-${size}`]: !!size,
+    });
+    const controlClass = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx(ControlProvider, { value: true, children: 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';
+
 const FieldLabel = ({ size, textColor, bgColor, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
@@ -3512,7 +3593,7 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
 };
-const Field = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, labelProps, textColor, color: _fieldColor, bgColor, className, children, ...props }) => {
+const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, labelProps, textColor, color: _fieldColor, bgColor, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -3563,52 +3644,13 @@ const Field = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, label
 };
 FieldLabel.displayName = 'FieldLabel';
 FieldBody.displayName = 'FieldBody';
-Field.Label = FieldLabel;
-Field.Body = FieldBody;
-
-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
-        : undefined;
-    const safeBgColor = allowedColors.includes(bgColor)
-        ? bgColor
-        : undefined;
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: safeTextColor,
-        backgroundColor: safeBgColor,
-        ...restProps,
-    });
-    const leftIconProps = iconLeft ||
-        (iconLeftName
-            ? {
-                name: iconLeftName,
-                size: iconLeftSize,
-            }
-            : undefined);
-    const rightIconProps = iconRight ||
-        (iconRightName
-            ? {
-                name: iconRightName,
-                size: iconRightSize,
-            }
-            : undefined);
-    const mainClass = usePrefixedClassNames('control', {
-        'has-icons-left': hasIconsLeft || !!leftIconProps,
-        'has-icons-right': hasIconsRight || !!rightIconProps,
-        'is-loading': isLoading,
-        'is-expanded': isExpanded,
-        [`is-${size}`]: !!size,
-    });
-    const controlClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx(ControlProvider, { value: true, children: 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';
+const Field = withSubComponents(FieldComponent, {
+    Label: FieldLabel,
+    Body: FieldBody,
+    Control,
+}, 'Field');
 
-const Checkboxes = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
+const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -3643,6 +3685,7 @@ const Checkboxes = ({ label, labelSize, labelProps, horizontal, message, message
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 };
+const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
 const File = forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
     const insideField = useInsideField();
@@ -3721,7 +3764,7 @@ const Radio = forwardRef(({ color, size, className, children, textColor, disable
 });
 Radio.displayName = 'Radio';
 
-const Radios = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
+const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -3756,6 +3799,7 @@ const Radios = ({ label, labelSize, labelProps, horizontal, message, messageColo
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 };
+const Radios = withSubComponents(RadiosComponent, { Radio }, 'Radios');
 
 const switchColors = [
     'primary',
@@ -7617,7 +7661,7 @@ const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, cl
     return (jsx("div", { className: cellClasses, ...rest, children: children }));
 };
 
-const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, className, textColor, color: _fieldColor, bgColor, children, ...props }) => {
+const GridComponent = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixedColsMobile, fixedColsTablet, fixedColsDesktop, fixedColsWidescreen, fixedColsFullhd, className, textColor, color: _fieldColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -7645,6 +7689,7 @@ const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixe
     }
     return (jsx("div", { className: gridClasses, ...rest, children: children }));
 };
+const Grid = withSubComponents(GridComponent, { Cell }, 'Grid');
 
 const bulmaCssVars = [
     '--bulma-scheme-h',
@@ -8300,7 +8345,7 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
     return (jsx(Tag, { className: footerClasses, ...rest, children: children }));
 };
 
-const Hero = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
+const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         backgroundColor: bgColor,
         ...props,
@@ -8343,11 +8388,13 @@ const HeroFoot = ({ className, children, color, bgColor, textColor, ...props })
     const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);
     return (jsx("div", { className: heroFootClasses, ...rest, children: children }));
 };
-Hero.Head = HeroHead;
-Hero.Body = HeroBody;
-Hero.Foot = HeroFoot;
+const Hero = withSubComponents(HeroComponent, {
+    Head: HeroHead,
+    Body: HeroBody,
+    Foot: HeroFoot,
+}, 'Hero');
 
-const Level = ({ isMobile, className, children, color, bgColor, textColor, ...props }) => {
+const LevelComponent = ({ isMobile, className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
@@ -8395,11 +8442,13 @@ const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, tar
     }
     return (jsx(Tag, { className: levelItemClasses, ...rest, children: children }));
 };
-Level.Left = LevelLeft;
-Level.Right = LevelRight;
-Level.Item = LevelItem;
+const Level = withSubComponents(LevelComponent, {
+    Left: LevelLeft,
+    Right: LevelRight,
+    Item: LevelItem,
+}, 'Level');
 
-const Media = ({ as = 'article', className, children, color, bgColor, textColor, ...props }) => {
+const MediaComponent = ({ as = 'article', className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
@@ -8441,10 +8490,11 @@ const MediaRight = ({ className, children, color, bgColor, textColor, ...props }
     const mediaRightClasses = classNames(mainClass, bulmaHelperClasses, className);
     return (jsx("div", { className: mediaRightClasses, ...rest, children: children }));
 };
-const MediaWithSubcomponents = Media;
-MediaWithSubcomponents.Left = MediaLeft;
-MediaWithSubcomponents.Content = MediaContent;
-MediaWithSubcomponents.Right = MediaRight;
+const Media = withSubComponents(MediaComponent, {
+    Left: MediaLeft,
+    Content: MediaContent,
+    Right: MediaRight,
+}, 'Media');
 
 const Section = ({ size, className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -8460,5 +8510,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, ...prop
     return (jsx("section", { className: sectionClasses, ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, CardWithSubComponents as Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, MessageWithSubComponents as Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, __test_exports__, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, 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 { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, __test_exports__, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, 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