@superdispatch/ui 0.29.5 → 0.31.0

package/dist-src/columns/Columns.js

@@ -3,9 +3,9 @@ import { parseAlignProp } from "../props/AlignProps.js";
 import { parseCollapsedBelow } from "../props/CollapseProp.js";
 import { parseResponsiveProp } from "../props/ResponsiveProp.js";
 import { parseSpaceProp } from "../props/SpaceProp.js";
-function columnsRootMixin(align, spaceProp, isReversed, isCollapsed) {
+function columnsRootMixin(align, horizontalAlign, spaceProp, isReversed, isCollapsed) {
   var space = parseSpaceProp(spaceProp);
-  return css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
+  return css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";justify-content:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), parseAlignProp(horizontalAlign), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
 }
 export var Columns = /*#__PURE__*/styled.div.withConfig({
   displayName: "Columns",
@@ -15,12 +15,14 @@ export var Columns = /*#__PURE__*/styled.div.withConfig({
     theme,
     collapseBelow,
     align: alignProp = 'top',
+    horizontalAlign: horizontalAlignProp = 'left',
     space: spaceProp = 'none',
     reverse: reverseProp = false
   } = _ref;
   var align = parseResponsiveProp(alignProp);
+  var horizontalAlign = parseResponsiveProp(horizontalAlignProp);
   var space = parseResponsiveProp(spaceProp);
   var reverse = parseResponsiveProp(reverseProp);
   var collapsed = parseCollapsedBelow(collapseBelow);
-  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], space[2], reverse[2], collapsed[2]));
+  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], horizontalAlign[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], horizontalAlign[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], horizontalAlign[2], space[2], reverse[2], collapsed[2]));
 });

package/dist-types/index.d.ts

@@ -147,6 +147,7 @@ interface ColumnsProps {
     reverse?: ResponsiveProp<boolean>;
     space?: ResponsiveProp<SpaceProp>;
     align?: ResponsiveProp<VerticalAlign>;
+    horizontalAlign?: ResponsiveProp<HorizontalAlign>;
     collapseBelow?: CollapseProp;
 }
 declare const Columns: ForwardRefExoticComponent<ColumnsProps>;

package/dist-web/index.js

@@ -1005,9 +1005,9 @@ function parseSpaceProp(prop) {
   }
 }
 
-function columnsRootMixin(align, spaceProp, isReversed, isCollapsed) {
+function columnsRootMixin(align, horizontalAlign, spaceProp, isReversed, isCollapsed) {
   var space = parseSpaceProp(spaceProp);
-  return css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
+  return css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";justify-content:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), parseAlignProp(horizontalAlign), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
 }
 var Columns = /*#__PURE__*/styled.div.withConfig({
   displayName: "Columns",
@@ -1017,14 +1017,16 @@ var Columns = /*#__PURE__*/styled.div.withConfig({
     theme,
     collapseBelow,
     align: alignProp = 'top',
+    horizontalAlign: horizontalAlignProp = 'left',
     space: spaceProp = 'none',
     reverse: reverseProp = false
   } = _ref;
   var align = parseResponsiveProp(alignProp);
+  var horizontalAlign = parseResponsiveProp(horizontalAlignProp);
   var space = parseResponsiveProp(spaceProp);
   var reverse = parseResponsiveProp(reverseProp);
   var collapsed = parseCollapsedBelow(collapseBelow);
-  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], space[2], reverse[2], collapsed[2]));
+  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], horizontalAlign[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], horizontalAlign[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], horizontalAlign[2], space[2], reverse[2], collapsed[2]));
 });
 
 function renderChildren(node) {