@allxsmith/bestax-bulma 5.6.2 → 5.7.0

package/dist/index.cjs.js

@@ -682,7 +682,15 @@ const Column = ({ className, textColor, color: _fieldColor, bgColor, size, sizeM
     return (jsxRuntime.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;
@@ -712,6 +720,7 @@ const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered
     const columnsClasses = classNames(mainClass, gapClasses, className, bulmaHelperClasses);
     return (jsxRuntime.jsx("div", { className: columnsClasses, ...rest, children: children }));
 };
+const Columns = withSubComponents(ColumnsComponent, { Column }, 'Columns');
 
 const avatarColors = [
     'primary',
@@ -841,7 +850,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', {
@@ -866,8 +875,7 @@ const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false,
                 ...(shape !== undefined ? { shape } : {}),
             })), overflowCount > 0 && (jsxRuntime.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',
@@ -1016,15 +1024,17 @@ const CardImage = ({ className, children, ...props }) => (jsxRuntime.jsx("div",
 const CardContent = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('card-content'), className), ...props, children: children }));
 const CardFooter = ({ className, children, ...props }) => (jsxRuntime.jsx("footer", { className: classNames(usePrefixedClassNames('card-footer'), className), ...props, children: children }));
 const CardFooterItem = ({ className, children, ...props }) => (jsxRuntime.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';
@@ -1081,10 +1091,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 = () => (jsxRuntime.jsx("hr", { className: usePrefixedClassNames('dropdown-divider') }));
-const Dropdown = Object.assign(DropdownComponent, {
+const Dropdown = withSubComponents(DropdownComponent, {
     Item: DropdownItem,
     Divider: DropdownDivider,
-});
+}, 'Dropdown');
 
 const MenuListLevelContext = React.createContext(0);
 const MenuComponent = ({ className, children, ...props }) => {
@@ -1126,11 +1136,11 @@ const MenuItem = ({ className, children, active, href, as: Component = 'a', 'dat
     }
     return (jsxRuntime.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntime.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();
@@ -1148,9 +1158,10 @@ const MessageComponent = ({ className, title, textColor, color, bgColor, onClose
 };
 const MessageHeader = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('message-header'), className), ...props, children: children }));
 const MessageBody = ({ className, children, ...props }) => (jsxRuntime.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);
@@ -1176,14 +1187,16 @@ const ModalCardFoot = ({ className, ...props }) => {
     const classes = classNames(usePrefixedClassNames('modal-card-foot'), className);
     return jsxRuntime.jsx("footer", { className: classes, ...props });
 };
-const ModalCard = ({ className, ...props }) => {
+const ModalCardComponent = ({ className, ...props }) => {
     const classes = classNames(usePrefixedClassNames('modal-card'), className);
     return jsxRuntime.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 (jsxRuntime.jsx("button", { className: classes, "aria-label": "close", type: "button", ...props }));
@@ -1218,13 +1231,14 @@ const ModalRoot = ({ active, isActive, onClose, className, textColor, bgColor, m
         isModalCard = !!modalCardTitle || !!modalCardFoot;
     return (jsxRuntime.jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntime.jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxRuntime.jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsxRuntime.jsx("p", { className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsxRuntime.jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntime.jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntime.jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntime.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,
@@ -1304,16 +1318,18 @@ const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (js
         'is-up': up,
     }), className), ...props, children: children }));
 const NavbarDivider = props => (jsxRuntime.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 }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous'), className, {
         'is-disabled': disabled,
@@ -1331,7 +1347,7 @@ const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRunt
             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,
@@ -1376,11 +1392,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 => (jsxRuntime.jsx("li", { children: jsxRuntime.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) {
@@ -1546,7 +1564,7 @@ const Icon = ({ className, textColor, bgColor, name, library, variant, features,
     return (jsxRuntime.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses }) }));
 };
 
-const Panel = ({ color, className, children, ...props }) => {
+const PanelComponent = ({ color, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -1567,19 +1585,21 @@ const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa
 };
 const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxRuntime.jsxs("label", { className: usePrefixedClassNames('panel-block'), ...props, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
 const PanelButtonBlock = ({ children, className, ...props }) => (jsxRuntime.jsx("div", { className: usePrefixedClassNames('panel-block'), children: jsxRuntime.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 = React.createContext(null);
 function useTabsContext() {
     return React.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] = React.useState(defaultValue);
@@ -1652,7 +1672,7 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
     return (jsxRuntime.jsx("li", { className: classNames(activeClass, className), role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxRuntime.jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
 };
 const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntime.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 (jsxRuntime.jsx("div", { className: classNames(contentClass, className), ...props, children: children }));
 };
@@ -1664,11 +1684,15 @@ const TabContentItem = ({ index, className, children, ...props }) => {
     });
     return (jsxRuntime.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);
@@ -1991,7 +2015,7 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
             : (stepNumber ?? null));
     return (jsxRuntime.jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxRuntime.jsxs("div", { className: stepsLinkClass, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsxRuntime.jsx("div", { className: stepsContentClass, children: jsxRuntime.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,
@@ -2036,7 +2060,7 @@ const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = tru
     };
     return (jsxRuntime.jsxs("div", { className: combinedClasses, ...rest, children: [jsxRuntime.jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxRuntime.jsxs("div", { className: stepsNavigationClass, children: [jsxRuntime.jsx("button", { className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsxRuntime.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 = React.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);
@@ -2119,7 +2143,6 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     }
     return null;
 });
-SidebarComponent.displayName = 'Sidebar';
 const SidebarHeader = ({ className, children, ...props }) => {
     const headerClass = usePrefixedClassNames('sidebar-header');
     return (jsxRuntime.jsx("div", { className: classNames(headerClass, className), ...props, children: children }));
@@ -2140,13 +2163,13 @@ const SidebarFooter = ({ className, children, ...props }) => {
     const footerClass = usePrefixedClassNames('sidebar-footer');
     return (jsxRuntime.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 = React.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);
@@ -2885,7 +2908,13 @@ const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...pro
     return (jsxRuntime.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 (jsxRuntime.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,
@@ -2899,12 +2928,10 @@ const Buttons = ({ className, textColor, bgColor, isCentered, isRight, hasAddons
     const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
     return (jsxRuntime.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 (jsxRuntime.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({
@@ -2986,11 +3013,11 @@ const FigureComponent = ({ className, textColor, bgColor, children, ...props })
     const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntime.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,
@@ -3000,6 +3027,7 @@ const IconText = ({ className, textColor, bgColor, iconProps, children, items, .
     const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntime.jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Icon, { ...item.iconProps }), item.text && jsxRuntime.jsx("span", { children: item.text })] }, index)))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconProps && jsxRuntime.jsx(Icon, { ...iconProps }), children && jsxRuntime.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({
@@ -3182,7 +3210,7 @@ const NotificationContainer = ({ position = 'top-right' }) => {
     return reactDom.createPortal(jsxRuntime.jsx("div", { style: containerStyle, children: items.map(item => (jsxRuntime.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,
@@ -3192,6 +3220,7 @@ const OrderedList = ({ className, textColor, bgColor, children, ...props }) => {
     const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntime.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({
@@ -3285,7 +3314,69 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor,
     return (jsxRuntime.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 (jsxRuntime.jsx("thead", { className: theadClasses, ...rest, children: children }));
+};
+
+const Tbody = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tbodyClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("tbody", { className: tbodyClasses, ...rest, children: children }));
+};
+
+const Tfoot = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const tfootClasses = classNames(className, bulmaHelperClasses);
+    return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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,
@@ -3302,6 +3393,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',
@@ -3332,7 +3431,7 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
     return (jsxRuntime.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,
@@ -3341,58 +3440,7 @@ const Tags = ({ className, hasAddons, isMultiline, children, ...props }) => {
     const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntime.jsx("div", { className: tagsClasses, ...rest, children: children }));
 };
-
-const Tbody = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tbodyClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.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 (jsxRuntime.jsx("td", { className: tdClasses, ...rest, children: children }));
-};
-
-const Tfoot = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const tfootClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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'];
@@ -3414,17 +3462,7 @@ const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, b
     return (jsxRuntime.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 (jsxRuntime.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,
@@ -3434,6 +3472,7 @@ const UnorderedList = ({ className, textColor, bgColor, children, ...props }) =>
     const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntime.jsx("ul", { className: listClasses || undefined, ...rest, children: children }));
 };
+const UnorderedList = withSubComponents(UnorderedListComponent, { Item: ListItem }, 'UnorderedList');
 
 const FieldContext = React.createContext(false);
 const ControlContext = React.createContext(false);
@@ -3492,6 +3531,48 @@ const Checkbox = React.forwardRef(({ color, size, className, children, textColor
 });
 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 (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsxRuntime.jsx(Icon, { ...leftIconProps, className: prefixedClassNames(classPrefix, 'is-left') })), rightIconProps && rightIconProps.name && (jsxRuntime.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,
@@ -3514,7 +3595,7 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntime.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,
@@ -3565,52 +3646,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 (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsxRuntime.jsx(Icon, { ...leftIconProps, className: prefixedClassNames(classPrefix, 'is-left') })), rightIconProps && rightIconProps.name && (jsxRuntime.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({
@@ -3645,6 +3687,7 @@ const Checkboxes = ({ label, labelSize, labelProps, horizontal, message, message
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 };
+const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
 const File = React.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();
@@ -3723,7 +3766,7 @@ const Radio = React.forwardRef(({ color, size, className, children, textColor, d
 });
 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({
@@ -3758,6 +3801,7 @@ const Radios = ({ label, labelSize, labelProps, horizontal, message, messageColo
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 };
+const Radios = withSubComponents(RadiosComponent, { Radio }, 'Radios');
 
 const switchColors = [
     'primary',
@@ -7619,7 +7663,7 @@ const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, cl
     return (jsxRuntime.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,
@@ -7647,6 +7691,7 @@ const Grid = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedCols, fixe
     }
     return (jsxRuntime.jsx("div", { className: gridClasses, ...rest, children: children }));
 };
+const Grid = withSubComponents(GridComponent, { Cell }, 'Grid');
 
 const bulmaCssVars = [
     '--bulma-scheme-h',
@@ -8302,7 +8347,7 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
     return (jsxRuntime.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,
@@ -8345,11 +8390,13 @@ const HeroFoot = ({ className, children, color, bgColor, textColor, ...props })
     const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntime.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,
@@ -8397,11 +8444,13 @@ const LevelItem = ({ as = 'div', hasTextCentered, className, children, href, tar
     }
     return (jsxRuntime.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,
@@ -8443,10 +8492,11 @@ const MediaRight = ({ className, children, color, bgColor, textColor, ...props }
     const mediaRightClasses = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntime.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({
@@ -8471,7 +8521,7 @@ exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Buttons = Buttons;
-exports.Card = CardWithSubComponents;
+exports.Card = Card;
 exports.Carousel = Carousel;
 exports.CarouselItem = CarouselItem;
 exports.Cell = Cell;
@@ -8529,7 +8579,7 @@ exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuLabel = MenuLabel;
 exports.MenuList = MenuList;
-exports.Message = MessageWithSubComponents;
+exports.Message = Message;
 exports.Modal = Modal;
 exports.Navbar = Navbar;
 exports.NavbarBrand = NavbarBrand;