baseui 0.0.0-next-af43adc → 0.0.0-next-73ffc7a

package/app-nav-bar/styled-components.js

@@ -7,6 +7,8 @@ exports.StyledDesktopMenu = exports.StyledDesktopMenuContainer = exports.StyledU
 
 var _index = require("../styles/index.js");
 
+var _responsiveHelpers = require("../helpers/responsive-helpers.js");
+
 var _index2 = require("../menu/index.js");
 
 var _constants = require("./constants.js");
@@ -50,10 +52,46 @@ var StyledButton = (0, _index.styled)('button', function (_ref) {
 StyledButton.displayName = "StyledButton";
 var StyledRoot = (0, _index.styled)('div', function (props) {
   var $theme = props.$theme;
-  return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
+  var mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
+  var breakpoints = Object.values($theme.breakpoints).sort();
+  var margins = [];
+
+  if (Array.isArray($theme.grid.margins)) {
+    for (var i = 0; i < breakpoints.length; i++) {
+      var margin = $theme.grid.margins[i];
+
+      if (margin == null) {
+        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
+      } else {
+        margins.push(margin);
+      }
+    }
+  } else {
+    for (var _i = 0; _i < breakpoints.length; _i++) {
+      margins.push($theme.grid.margins);
+    }
+  }
+
+  var style = _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
     boxSizing: 'border-box',
-    backgroundColor: $theme.colors.backgroundPrimary
+    backgroundColor: $theme.colors.backgroundPrimary,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: "".concat($theme.colors.borderOpaque),
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px'
   });
+
+  for (var _i2 = 1; _i2 < mediaQueries.length; _i2++) {
+    var _margin = Array.isArray($theme.grid.margins) ? $theme.grid.margins[_i2] : $theme.grid.margins;
+
+    style[mediaQueries[_i2]] = {
+      paddingInlineStart: _margin + 'px',
+      paddingInlineEnd: _margin + 'px'
+    };
+  }
+
+  return style;
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
@@ -167,7 +205,7 @@ var StyledSecondaryMenuContainer = (0, _index.styled)('div', function (_ref6) {
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
     margin: 'auto',
-    maxWidth: "".concat($theme.breakpoints.large, "px"),
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -225,11 +263,7 @@ exports.StyledUserProfileInfoContainer = StyledUserProfileInfoContainer;
 StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
 var StyledDesktopMenuContainer = (0, _index.styled)('div', function (_ref11) {
   var $theme = _ref11.$theme;
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: "".concat($theme.colors.borderOpaque)
-  };
+  return {};
 });
 exports.StyledDesktopMenuContainer = StyledDesktopMenuContainer;
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
@@ -240,7 +274,7 @@ var StyledDesktopMenu = (0, _index.styled)('div', function (_ref12) {
     display: 'flex',
     justifyContent: 'space-between',
     margin: 'auto',
-    maxWidth: "".concat($theme.breakpoints.large, "px"),
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
     paddingBlockStart: '18px',
     paddingBlockEnd: '18px'
   };

package/app-nav-bar/styled-components.js.flow

@@ -7,6 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import { styled, withStyle } from '../styles/index.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
 import { StyledListItem } from '../menu/index.js';
 import { KIND } from './constants.js';
 
@@ -42,11 +43,47 @@ const StyledButton = styled<{ $isFocusVisible: boolean }>(
 
 export const StyledRoot = styled<{}>('div', (props) => {
   const { $theme } = props;
-  return {
+  const mediaQueries = getMediaQueries($theme.breakpoints);
+  const breakpoints = Object.values($theme.breakpoints).sort();
+  const margins = [];
+  if (Array.isArray($theme.grid.margins)) {
+    for (let i = 0; i < breakpoints.length; i++) {
+      const margin = $theme.grid.margins[i];
+      if (margin == null) {
+        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
+      } else {
+        margins.push(margin);
+      }
+    }
+  } else {
+    for (let i = 0; i < breakpoints.length; i++) {
+      margins.push($theme.grid.margins);
+    }
+  }
+
+  const style = {
     ...$theme.typography.font300,
     boxSizing: 'border-box',
     backgroundColor: $theme.colors.backgroundPrimary,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: `${$theme.colors.borderOpaque}`,
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px',
   };
+
+  for (let i = 1; i < mediaQueries.length; i++) {
+    const margin = Array.isArray($theme.grid.margins)
+      ? $theme.grid.margins[i]
+      : $theme.grid.margins;
+
+    style[mediaQueries[i]] = {
+      paddingInlineStart: margin + 'px',
+      paddingInlineEnd: margin + 'px',
+    };
+  }
+
+  return style;
 });
 
 export const StyledSubnavContainer = styled('div', {});
@@ -151,7 +188,7 @@ export const StyledSecondaryMenuContainer = styled<{}>('div', ({ $theme }) => {
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     alignItems: 'stretch',
     overflow: 'auto',
   };
@@ -197,11 +234,7 @@ export const StyledUserProfileInfoContainer = styled<{}>('div', ({ $theme }) =>
 });
 
 export const StyledDesktopMenuContainer = styled<{}>('div', ({ $theme }) => {
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: `${$theme.colors.borderOpaque}`,
-  };
+  return {};
 });
 
 export const StyledDesktopMenu = styled<{}>('div', ({ $theme }) => {
@@ -210,7 +243,7 @@ export const StyledDesktopMenu = styled<{}>('div', ({ $theme }) => {
     display: 'flex',
     justifyContent: 'space-between',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     paddingBlockStart: '18px',
     paddingBlockEnd: '18px',
   };

package/es/app-nav-bar/styled-components.js

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled, withStyle } from '../styles/index.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
 import { StyledListItem } from '../menu/index.js';
 import { KIND } from './constants.js';
 const StyledButton = styled('button', ({
@@ -41,10 +42,45 @@ export const StyledRoot = styled('div', props => {
   const {
     $theme
   } = props;
-  return { ...$theme.typography.font300,
+  const mediaQueries = getMediaQueries($theme.breakpoints);
+  const breakpoints = Object.values($theme.breakpoints).sort();
+  const margins = [];
+
+  if (Array.isArray($theme.grid.margins)) {
+    for (let i = 0; i < breakpoints.length; i++) {
+      const margin = $theme.grid.margins[i];
+
+      if (margin == null) {
+        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
+      } else {
+        margins.push(margin);
+      }
+    }
+  } else {
+    for (let i = 0; i < breakpoints.length; i++) {
+      margins.push($theme.grid.margins);
+    }
+  }
+
+  const style = { ...$theme.typography.font300,
     boxSizing: 'border-box',
-    backgroundColor: $theme.colors.backgroundPrimary
+    backgroundColor: $theme.colors.backgroundPrimary,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: `${$theme.colors.borderOpaque}`,
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px'
   };
+
+  for (let i = 1; i < mediaQueries.length; i++) {
+    const margin = Array.isArray($theme.grid.margins) ? $theme.grid.margins[i] : $theme.grid.margins;
+    style[mediaQueries[i]] = {
+      paddingInlineStart: margin + 'px',
+      paddingInlineEnd: margin + 'px'
+    };
+  }
+
+  return style;
 });
 StyledRoot.displayName = "StyledRoot";
 export const StyledSubnavContainer = styled('div', {});
@@ -161,7 +197,7 @@ export const StyledSecondaryMenuContainer = styled('div', ({
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -218,11 +254,7 @@ StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
 export const StyledDesktopMenuContainer = styled('div', ({
   $theme
 }) => {
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: `${$theme.colors.borderOpaque}`
-  };
+  return {};
 });
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
 export const StyledDesktopMenu = styled('div', ({
@@ -233,7 +265,7 @@ export const StyledDesktopMenu = styled('div', ({
     display: 'flex',
     justifyContent: 'space-between',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     paddingBlockStart: '18px',
     paddingBlockEnd: '18px'
   };

package/esm/app-nav-bar/styled-components.js

@@ -11,6 +11,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled, withStyle } from '../styles/index.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
 import { StyledListItem } from '../menu/index.js';
 import { KIND } from './constants.js';
 var StyledButton = styled('button', function (_ref) {
@@ -46,10 +47,46 @@ var StyledButton = styled('button', function (_ref) {
 StyledButton.displayName = "StyledButton";
 export var StyledRoot = styled('div', function (props) {
   var $theme = props.$theme;
-  return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
+  var mediaQueries = getMediaQueries($theme.breakpoints);
+  var breakpoints = Object.values($theme.breakpoints).sort();
+  var margins = [];
+
+  if (Array.isArray($theme.grid.margins)) {
+    for (var i = 0; i < breakpoints.length; i++) {
+      var margin = $theme.grid.margins[i];
+
+      if (margin == null) {
+        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
+      } else {
+        margins.push(margin);
+      }
+    }
+  } else {
+    for (var _i = 0; _i < breakpoints.length; _i++) {
+      margins.push($theme.grid.margins);
+    }
+  }
+
+  var style = _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
     boxSizing: 'border-box',
-    backgroundColor: $theme.colors.backgroundPrimary
+    backgroundColor: $theme.colors.backgroundPrimary,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: "".concat($theme.colors.borderOpaque),
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px'
   });
+
+  for (var _i2 = 1; _i2 < mediaQueries.length; _i2++) {
+    var _margin = Array.isArray($theme.grid.margins) ? $theme.grid.margins[_i2] : $theme.grid.margins;
+
+    style[mediaQueries[_i2]] = {
+      paddingInlineStart: _margin + 'px',
+      paddingInlineEnd: _margin + 'px'
+    };
+  }
+
+  return style;
 });
 StyledRoot.displayName = "StyledRoot";
 export var StyledSubnavContainer = styled('div', {});
@@ -156,7 +193,7 @@ export var StyledSecondaryMenuContainer = styled('div', function (_ref6) {
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
     margin: 'auto',
-    maxWidth: "".concat($theme.breakpoints.large, "px"),
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -208,11 +245,7 @@ export var StyledUserProfileInfoContainer = styled('div', function (_ref10) {
 StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
 export var StyledDesktopMenuContainer = styled('div', function (_ref11) {
   var $theme = _ref11.$theme;
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: "".concat($theme.colors.borderOpaque)
-  };
+  return {};
 });
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
 export var StyledDesktopMenu = styled('div', function (_ref12) {
@@ -222,7 +255,7 @@ export var StyledDesktopMenu = styled('div', function (_ref12) {
     display: 'flex',
     justifyContent: 'space-between',
     margin: 'auto',
-    maxWidth: "".concat($theme.breakpoints.large, "px"),
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
     paddingBlockStart: '18px',
     paddingBlockEnd: '18px'
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-af43adc",
+  "version": "0.0.0-next-73ffc7a",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",