@allxsmith/bestax-bulma 5.5.0 → 5.6.0

package/dist/index.esm.js

@@ -680,7 +680,13 @@ 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, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
+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 }) => {
+    const resolvedGap = gap ?? gapSize;
+    const resolvedGapMobile = gapMobile ?? gapSizeMobile;
+    const resolvedGapTablet = gapTablet ?? gapSizeTablet;
+    const resolvedGapDesktop = gapDesktop ?? gapSizeDesktop;
+    const resolvedGapWidescreen = gapWidescreen ?? gapSizeWidescreen;
+    const resolvedGapFullhd = gapFullhd ?? gapSizeFullhd;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -688,12 +694,12 @@ const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered
     });
     const mainClass = usePrefixedClassNames('columns');
     const gapClasses = usePrefixedClassNames('', {
-        [`is-${gapSize}`]: gapSize !== undefined && gapSize !== null,
-        [`is-${gapSizeMobile}-mobile`]: gapSizeMobile !== undefined && gapSizeMobile !== null,
-        [`is-${gapSizeTablet}-tablet`]: gapSizeTablet !== undefined && gapSizeTablet !== null,
-        [`is-${gapSizeDesktop}-desktop`]: gapSizeDesktop !== undefined && gapSizeDesktop !== null,
-        [`is-${gapSizeWidescreen}-widescreen`]: gapSizeWidescreen !== undefined && gapSizeWidescreen !== null,
-        [`is-${gapSizeFullhd}-fullhd`]: gapSizeFullhd !== undefined && gapSizeFullhd !== null,
+        [`is-${resolvedGap}`]: resolvedGap !== undefined && resolvedGap !== null,
+        [`is-${resolvedGapMobile}-mobile`]: resolvedGapMobile !== undefined && resolvedGapMobile !== null,
+        [`is-${resolvedGapTablet}-tablet`]: resolvedGapTablet !== undefined && resolvedGapTablet !== null,
+        [`is-${resolvedGapDesktop}-desktop`]: resolvedGapDesktop !== undefined && resolvedGapDesktop !== null,
+        [`is-${resolvedGapWidescreen}-widescreen`]: resolvedGapWidescreen !== undefined && resolvedGapWidescreen !== null,
+        [`is-${resolvedGapFullhd}-fullhd`]: resolvedGapFullhd !== undefined && resolvedGapFullhd !== null,
         'is-centered': !!isCentered,
         'is-gapless': !!isGapless,
         'is-multiline': !!isMultiline,