@allxsmith/bestax-bulma 2.0.1 → 2.1.0

package/dist/index.cjs.js

@@ -566,6 +566,11 @@ const validColorShades = [
     '90',
     '95',
     'invert',
+    'light',
+    'dark',
+    'soft',
+    'bold',
+    'on-scheme',
 ];
 const validSizes$1 = ['0', '1', '2', '3', '4', '5', '6', 'auto'];
 const validTextSizes = ['1', '2', '3', '4', '5', '6', '7'];
@@ -602,7 +607,7 @@ const validDisplays = [
     'inline-block',
     'inline-flex',
 ];
-const validVisibilities = ['hidden', 'sr-only'];
+const validVisibilities = ['hidden', 'sr-only', 'invisible'];
 const validFlexDirections = [
     'row',
     'row-reverse',
@@ -658,54 +663,93 @@ const validViewports = [
 ];
 const useBulmaClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { color, backgroundColor, colorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, skeleton, ...rest } = props;
+    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityDesktop, visibilityWidescreen, visibilityFullhd, skeleton, clearfix, relative, ...rest } = props;
     const bulmaHelperClasses = React.useMemo(() => {
         const classes = [];
         const addPrefixedClass = (className) => {
             classes.push(classPrefix ? `${classPrefix}${className}` : className);
         };
-        const addClass = (prefix, value, validValues) => {
-            if (value && (!validValues.length || validValues.includes(value))) {
-                const className = viewport && validViewports.includes(viewport)
+        const addClass = (prefix, value, validValues, supportsViewport = false) => {
+            if (value && validValues.includes(value)) {
+                const className = supportsViewport && viewport && validViewports.includes(viewport)
                     ? `${prefix}-${value}-${viewport}`
                     : `${prefix}-${value}`;
                 addPrefixedClass(className);
             }
         };
+        const addClassNoViewport = (prefix, value, validValues) => {
+            if (value && (!validValues.length || validValues.includes(value))) {
+                addPrefixedClass(`${prefix}-${value}`);
+            }
+        };
         const addColorClass = (prefix, value, shade) => {
             if (!value || ![...validColors, 'inherit', 'current'].includes(value))
                 return;
             if (shade && validColorShades.includes(shade)) {
-                const className = prefix === 'has-text' && viewport && validViewports.includes(viewport)
-                    ? `${prefix}-${value}-${shade}-${viewport}`
-                    : `${prefix}-${value}-${shade}`;
+                const className = `${prefix}-${value}-${shade}`;
                 addPrefixedClass(className);
             }
             else {
-                addClass(prefix, value, [...validColors, 'inherit', 'current']);
+                addClass(prefix, value, [...validColors, 'inherit', 'current'], false);
             }
         };
         addColorClass('has-text', color, colorShade);
-        addColorClass('has-background', backgroundColor, colorShade);
-        addClass('m', m, validSizes$1);
-        addClass('mt', mt, validSizes$1);
-        addClass('mr', mr, validSizes$1);
-        addClass('mb', mb, validSizes$1);
-        addClass('ml', ml, validSizes$1);
-        addClass('mx', mx, validSizes$1);
-        addClass('my', my, validSizes$1);
-        addClass('p', p, validSizes$1);
-        addClass('pt', pt, validSizes$1);
-        addClass('pr', pr, validSizes$1);
-        addClass('pb', pb, validSizes$1);
-        addClass('pl', pl, validSizes$1);
-        addClass('px', px, validSizes$1);
-        addClass('py', py, validSizes$1);
-        addClass('is-size', textSize, validTextSizes);
-        addClass('has-text', textAlign, validAlignments$1);
-        addClass('is', textTransform, validTextTransforms);
-        addClass('has-text-weight', textWeight, validTextWeights);
-        addClass('is-family', fontFamily, validFontFamilies);
+        addColorClass('has-background', backgroundColor, backgroundColorShade);
+        addClassNoViewport('m', m, validSizes$1);
+        addClassNoViewport('mt', mt, validSizes$1);
+        addClassNoViewport('mr', mr, validSizes$1);
+        addClassNoViewport('mb', mb, validSizes$1);
+        addClassNoViewport('ml', ml, validSizes$1);
+        addClassNoViewport('mx', mx, validSizes$1);
+        addClassNoViewport('my', my, validSizes$1);
+        addClassNoViewport('p', p, validSizes$1);
+        addClassNoViewport('pt', pt, validSizes$1);
+        addClassNoViewport('pr', pr, validSizes$1);
+        addClassNoViewport('pb', pb, validSizes$1);
+        addClassNoViewport('pl', pl, validSizes$1);
+        addClassNoViewport('px', px, validSizes$1);
+        addClassNoViewport('py', py, validSizes$1);
+        addClass('is-size', textSize, validTextSizes, true);
+        addClass('has-text', textAlign, validAlignments$1, true);
+        addClassNoViewport('is', textTransform, validTextTransforms);
+        addClassNoViewport('has-text-weight', textWeight, validTextWeights);
+        addClassNoViewport('is-family', fontFamily, validFontFamilies);
+        const addViewportSpecificTextSizeClass = (value, viewportSuffix) => {
+            if (value && validTextSizes.includes(value)) {
+                addPrefixedClass(`is-size-${value}${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificTextSizeClass(textSizeMobile, '-mobile');
+        addViewportSpecificTextSizeClass(textSizeTablet, '-tablet');
+        addViewportSpecificTextSizeClass(textSizeDesktop, '-desktop');
+        addViewportSpecificTextSizeClass(textSizeWidescreen, '-widescreen');
+        addViewportSpecificTextSizeClass(textSizeFullhd, '-fullhd');
+        const addViewportSpecificTextAlignClass = (value, viewportSuffix) => {
+            if (value && validAlignments$1.includes(value)) {
+                addPrefixedClass(`has-text-${value}${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificTextAlignClass(textAlignMobile, '-mobile');
+        addViewportSpecificTextAlignClass(textAlignTablet, '-tablet');
+        addViewportSpecificTextAlignClass(textAlignDesktop, '-desktop');
+        addViewportSpecificTextAlignClass(textAlignWidescreen, '-widescreen');
+        addViewportSpecificTextAlignClass(textAlignFullhd, '-fullhd');
+        const addViewportSpecificVisibilityClass = (value, viewportSuffix) => {
+            if (value === 'hidden') {
+                addPrefixedClass(`is-hidden${viewportSuffix}`);
+            }
+            else if (value === 'sr-only') {
+                addPrefixedClass(`is-sr-only${viewportSuffix}`);
+            }
+            else if (value === 'invisible') {
+                addPrefixedClass(`is-invisible${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificVisibilityClass(visibilityMobile, '-mobile');
+        addViewportSpecificVisibilityClass(visibilityTablet, '-tablet');
+        addViewportSpecificVisibilityClass(visibilityDesktop, '-desktop');
+        addViewportSpecificVisibilityClass(visibilityWidescreen, '-widescreen');
+        addViewportSpecificVisibilityClass(visibilityFullhd, '-fullhd');
         const addDisplayClass = (displayValue, viewportSuffix) => {
             if (displayValue) {
                 if (displayValue === 'none') {
@@ -736,14 +780,14 @@ const useBulmaClasses = (props) => {
                 }
             }
             else {
-                addClass('is', display, [...validDisplays]);
+                addClass('is', display, [...validDisplays], true);
             }
         }
         if (visibility) {
-            if (visibility === 'hidden' &&
+            if ((visibility === 'hidden' || visibility === 'invisible') &&
                 viewport &&
                 validViewports.includes(viewport)) {
-                addPrefixedClass(`is-hidden-${viewport}`);
+                addPrefixedClass(`is-${visibility}-${viewport}`);
             }
             else if (validVisibilities.includes(visibility)) {
                 addPrefixedClass(`is-${visibility}`);
@@ -762,45 +806,52 @@ const useBulmaClasses = (props) => {
             displayFullhd === 'flex' ||
             displayFullhd === 'inline-flex';
         if (hasFlexDisplay) {
-            addClass('is-flex-direction', flexDirection, validFlexDirections);
-            addClass('is-flex-wrap', flexWrap, validFlexWraps);
-            addClass('is-justify-content', justifyContent, validJustifyContents);
-            addClass('is-align-content', alignContent, validAlignContents);
-            addClass('is-align-items', alignItems, validAlignItems);
-            addClass('is-align-self', alignSelf, validAlignSelfs);
-            addClass('is-flex-grow', flexGrow, validFlexGrowShrink);
-            addClass('is-flex-shrink', flexShrink, validFlexGrowShrink);
+            addClassNoViewport('is-flex-direction', flexDirection, validFlexDirections);
+            addClassNoViewport('is-flex-wrap', flexWrap, validFlexWraps);
+            addClassNoViewport('is-justify-content', justifyContent, validJustifyContents);
+            addClassNoViewport('is-align-content', alignContent, validAlignContents);
+            addClassNoViewport('is-align-items', alignItems, validAlignItems);
         }
+        addClassNoViewport('is-align-self', alignSelf, validAlignSelfs);
+        addClassNoViewport('is-flex-grow', flexGrow, validFlexGrowShrink);
+        addClassNoViewport('is-flex-shrink', flexShrink, validFlexGrowShrink);
         if (float) {
-            addClass('is-pulled', float, ['left', 'right']);
+            addClassNoViewport('is-pulled', float, ['left', 'right']);
         }
         if (overflow) {
-            addClass('is', overflow, ['clipped']);
+            addClassNoViewport('is', overflow, ['clipped']);
         }
         if (overlay) {
             addPrefixedClass('is-overlay');
         }
         if (interaction) {
-            addClass('is', interaction, ['unselectable', 'clickable']);
+            addClassNoViewport('is', interaction, ['unselectable', 'clickable']);
         }
         if (radius) {
-            addClass('is', radius, ['radiusless']);
+            addClassNoViewport('is', radius, ['radiusless']);
         }
         if (shadow) {
-            addClass('is', shadow, ['shadowless']);
+            addClassNoViewport('is', shadow, ['shadowless']);
         }
         if (responsive) {
-            addClass('is', responsive, ['mobile', 'narrow']);
+            addClassNoViewport('is', responsive, ['mobile', 'narrow']);
         }
         if (skeleton) {
             addPrefixedClass('is-skeleton');
         }
+        if (clearfix) {
+            addPrefixedClass('is-clearfix');
+        }
+        if (relative) {
+            addPrefixedClass('is-relative');
+        }
         return classNames(classes);
     }, [
         classPrefix,
         color,
         backgroundColor,
         colorShade,
+        backgroundColorShade,
         m,
         mt,
         mr,
@@ -844,6 +895,23 @@ const useBulmaClasses = (props) => {
         displayWidescreen,
         displayFullhd,
         skeleton,
+        clearfix,
+        relative,
+        textSizeMobile,
+        textSizeTablet,
+        textSizeDesktop,
+        textSizeWidescreen,
+        textSizeFullhd,
+        textAlignMobile,
+        textAlignTablet,
+        textAlignDesktop,
+        textAlignWidescreen,
+        textAlignFullhd,
+        visibilityMobile,
+        visibilityTablet,
+        visibilityDesktop,
+        visibilityWidescreen,
+        visibilityFullhd,
     ]);
     return { bulmaHelperClasses, rest };
 };
@@ -930,7 +998,19 @@ const renderFooter = (footer) => {
     const items = Array.isArray(footer) ? footer : [footer];
     return items.map((item, idx) => (jsxRuntimeExports.jsx("span", { className: "card-footer-item", children: item }, idx)));
 };
-const Card = ({ className, children, textColor, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
+const hasCompoundComponents = (children) => {
+    return React.Children.toArray(children).some(child => {
+        if (!React.isValidElement(child))
+            return false;
+        return (child.type === CardHeader ||
+            child.type === CardContent ||
+            child.type === CardImage ||
+            child.type === CardFooter ||
+            child.type === CardFooterItem ||
+            child.type === CardHeaderIcon);
+    });
+};
+const CardComponent = ({ className, children, textColor, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -949,8 +1029,36 @@ const Card = ({ className, children, textColor, bgColor, hasShadow = true, heade
     };
     return (jsxRuntimeExports.jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered), image && (jsxRuntimeExports.jsx("div", { className: "card-image", children: typeof image === 'string' ? (jsxRuntimeExports.jsx("figure", { className: "image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
                 children !== null &&
-                children !== '' && jsxRuntimeExports.jsx("div", { className: "card-content", children: children }), footer && (jsxRuntimeExports.jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
-};
+                children !== '' &&
+                !hasCompoundComponents(children) && (jsxRuntimeExports.jsx("div", { className: "card-content", children: children })), typeof children !== 'undefined' &&
+                children !== null &&
+                children !== '' &&
+                hasCompoundComponents(children) &&
+                children, footer && (jsxRuntimeExports.jsx("footer", { className: "card-footer", children: renderFooter(footer) }))] }));
+};
+const CardHeader = ({ className, children, centered, ...props }) => {
+    const hasHeaderTitle = React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        typeof child.type === 'function' &&
+        child.type === CardHeaderTitle);
+    return (jsxRuntimeExports.jsx("header", { className: classNames('card-header', className), ...props, children: hasHeaderTitle ? (children) : (jsxRuntimeExports.jsx("div", { className: classNames('card-header-title', {
+                'is-centered': centered,
+            }), children: children })) }));
+};
+const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-header-title', { 'is-centered': centered }, className), ...props, children: children }));
+const CardHeaderIcon = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("button", { className: classNames('card-header-icon', className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
+const CardImage = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-image', className), ...props, children: children }));
+const CardContent = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('card-content', className), ...props, children: children }));
+const CardFooter = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("footer", { className: classNames('card-footer', className), ...props, children: children }));
+const CardFooterItem = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("span", { className: classNames('card-footer-item', className), ...props, children: children }));
+const CardWithSubComponents = CardComponent;
+const CardHeaderWithTitle = CardHeader;
+CardHeaderWithTitle.Title = CardHeaderTitle;
+CardHeaderWithTitle.Icon = CardHeaderIcon;
+CardWithSubComponents.Header = CardHeaderWithTitle;
+CardWithSubComponents.Image = CardImage;
+CardWithSubComponents.Content = CardContent;
+CardWithSubComponents.Footer = CardFooter;
+CardWithSubComponents.FooterItem = CardFooterItem;
 const __test_exports__ = { renderFooter };
 
 const isBrowser = (win, doc) => typeof win !== 'undefined' && typeof doc !== 'undefined';
@@ -1057,7 +1165,7 @@ const Menu = Object.assign(MenuComponent, {
     Item: MenuItem,
 });
 
-const Message = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
+const MessageComponent = ({ className, title, textColor, color, bgColor, onClose, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -1070,6 +1178,11 @@ const Message = ({ className, title, textColor, color, bgColor, onClose, childre
     const messageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxRuntimeExports.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntimeExports.jsxs("div", { className: "message-header", children: [title && jsxRuntimeExports.jsx("span", { children: title }), onClose && (jsxRuntimeExports.jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntimeExports.jsx("div", { className: "message-body", "data-testid": "message-body", children: children }))] }));
 };
+const MessageHeader = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('message-header', className), ...props, children: children }));
+const MessageBody = ({ className, children, ...props }) => (jsxRuntimeExports.jsx("div", { className: classNames('message-body', className), ...props, children: children }));
+const MessageWithSubComponents = MessageComponent;
+MessageWithSubComponents.Header = MessageHeader;
+MessageWithSubComponents.Body = MessageBody;
 
 const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -1388,45 +1501,130 @@ const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Clo
     return (jsxRuntimeExports.jsx("button", { className: classes, onClick: onClick, "aria-label": ariaLabel, disabled: disabled, type: "button", ...rest }));
 };
 
-function getIconClasses(library, name, libraryFeatures) {
+function getIconClasses(library, name, variant, features) {
     let baseClass = '';
     let iconClass = '';
-    let features = Array.isArray(libraryFeatures)
-        ? libraryFeatures
-        : libraryFeatures
-            ? [libraryFeatures]
+    let featureList = Array.isArray(features)
+        ? features
+        : features
+            ? [features]
             : [];
     switch (library) {
         case 'fa': {
-            const faStyle = features.find(f => ['fas', 'far', 'fab', 'fal', 'fad', 'fat'].includes(f)) || 'fas';
+            const styleMap = {
+                solid: 'fas',
+                regular: 'far',
+                brands: 'fab',
+                light: 'fal',
+                duotone: 'fad',
+                thin: 'fat',
+            };
+            const faStyle = variant ? styleMap[variant] || variant : 'fas';
             baseClass = faStyle;
             iconClass = `fa-${name}`;
-            features = features.filter(f => f !== faStyle);
-            return [baseClass, iconClass, ...features].join(' ');
+            return [baseClass, iconClass, ...featureList].join(' ');
         }
         case 'mdi':
             baseClass = 'mdi';
             iconClass = `mdi-${name}`;
-            return [baseClass, iconClass, ...features].join(' ');
-        case 'ion':
-            baseClass = 'ion';
-            iconClass = `ion-${name}`;
-            return [baseClass, iconClass, ...features].join(' ');
+            return [baseClass, iconClass, ...featureList].join(' ');
+        case 'material-icons': {
+            const styleVariants = {
+                filled: 'material-icons',
+                outlined: 'material-icons-outlined',
+                round: 'material-icons-round',
+                sharp: 'material-icons-sharp',
+            };
+            baseClass = variant
+                ? styleVariants[variant] || `material-icons-${variant}`
+                : 'material-icons';
+            return [baseClass, ...featureList].join(' ');
+        }
+        case 'material-symbols': {
+            const styleVariants = {
+                outlined: 'material-symbols-outlined',
+                rounded: 'material-symbols-rounded',
+                sharp: 'material-symbols-sharp',
+            };
+            baseClass = variant
+                ? styleVariants[variant] || `material-symbols-${variant}`
+                : 'material-symbols-outlined';
+            return [baseClass, ...featureList].join(' ');
+        }
         default:
-            return [name, ...features].join(' ');
+            return [name, ...featureList].join(' ');
     }
 }
-const Icon = ({ className, textColor, bgColor, name, library = 'fa', libraryFeatures, size, ariaLabel = 'icon', style, ...props }) => {
+const Icon = ({ className, textColor, bgColor, name, library = 'fa', variant, features, libraryFeatures, size, ariaLabel = 'icon', style, ...restProps }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
-        ...props,
+        ...restProps,
     });
     const bulmaClasses = usePrefixedClassNames('icon', {
         [`is-${size}`]: size,
     });
     const iconContainerClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    const iClasses = getIconClasses(library, name, libraryFeatures);
+    let finalVariant = variant;
+    let finalFeatures = features;
+    if (libraryFeatures && !variant && !features) {
+        const legacyFeatures = Array.isArray(libraryFeatures)
+            ? libraryFeatures
+            : [libraryFeatures];
+        if (library === 'fa') {
+            const faStyle = legacyFeatures.find(f => [
+                'fas',
+                'far',
+                'fab',
+                'fal',
+                'fad',
+                'fat',
+                'solid',
+                'regular',
+                'brands',
+                'light',
+                'duotone',
+                'thin',
+            ].includes(f));
+            if (faStyle) {
+                finalVariant = faStyle;
+                finalFeatures = legacyFeatures.filter(f => f !== faStyle);
+            }
+            else {
+                finalFeatures = legacyFeatures;
+            }
+        }
+        else if (library === 'material-icons' || library === 'material-symbols') {
+            const styleVariants = library === 'material-icons'
+                ? ['filled', 'outlined', 'round', 'sharp']
+                : ['outlined', 'rounded', 'sharp'];
+            const styleVariant = legacyFeatures.find(f => styleVariants.includes(f));
+            if (styleVariant) {
+                finalVariant = styleVariant;
+                finalFeatures = legacyFeatures.filter(f => f !== styleVariant);
+            }
+            else {
+                finalFeatures = legacyFeatures;
+            }
+        }
+        else {
+            finalFeatures = legacyFeatures;
+        }
+    }
+    if (library === 'ion') {
+        let ionName = name;
+        if (finalVariant === 'outline') {
+            ionName = `${name}-outline`;
+        }
+        else if (finalVariant === 'sharp') {
+            ionName = `${name}-sharp`;
+        }
+        return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("ion-icon", { name: ionName }) }));
+    }
+    const iClasses = getIconClasses(library, name, finalVariant, finalFeatures);
+    if (library === 'material-icons' || library === 'material-symbols') {
+        return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses, children: name }) }));
+    }
     return (jsxRuntimeExports.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntimeExports.jsx("i", { className: iClasses }) }));
 };
 
@@ -2744,7 +2942,7 @@ exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Buttons = Buttons;
-exports.Card = Card;
+exports.Card = CardWithSubComponents;
 exports.Cell = Cell;
 exports.Checkbox = Checkbox;
 exports.Checkboxes = Checkboxes;
@@ -2784,7 +2982,7 @@ exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuLabel = MenuLabel;
 exports.MenuList = MenuList;
-exports.Message = Message;
+exports.Message = MessageWithSubComponents;
 exports.Modal = Modal;
 exports.Navbar = Navbar;
 exports.NavbarBrand = NavbarBrand;