@bgord/design 0.27.13 → 0.27.17

package/dist/design.cjs.development.js

@@ -1189,6 +1189,7 @@ var Paddings = /*#__PURE__*/function () {
 var DisplaysGenerator = /*#__PURE__*/function () {
   function DisplaysGenerator(config) {
     this.displays = config.displays;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = DisplaysGenerator.prototype;
@@ -1212,6 +1213,27 @@ var DisplaysGenerator = /*#__PURE__*/function () {
       }
     }
 
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          name = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "@media (max-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.displays); _i3 < _Object$entries3.length; _i3++) {
+        var _Object$entries3$_i = _Object$entries3[_i3],
+            _key = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+
+        if (_value2 === 'flex') {
+          output += "*[data-" + name + "-display='" + _key + "'] {\n  display: " + _value2 + ";\nflex-wrap: wrap;\n}\n";
+        } else {
+          output += "*[data-" + name + "-display='" + _key + "'] {\n  display: " + _value2 + ";\n}\n";
+        }
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -1908,6 +1930,7 @@ var BorderRadiusesGenerator = /*#__PURE__*/function () {
 var MaxWidthsGenerator = /*#__PURE__*/function () {
   function MaxWidthsGenerator(config) {
     this.maxWidths = config.maxWidths;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = MaxWidthsGenerator.prototype;
@@ -1926,6 +1949,22 @@ var MaxWidthsGenerator = /*#__PURE__*/function () {
       output += "*[data-max-width='" + key + "'] {\n  max-width: " + value + ";\n}\n";
     }
 
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          name = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "@media (max-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.maxWidths); _i3 < _Object$entries3.length; _i3++) {
+        var _Object$entries3$_i = _Object$entries3[_i3],
+            _key = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+        output += "*[data-" + name + "-max-width='" + _key + "'] {\n  max-width: " + _value2 + ";\n}\n";
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -2160,7 +2199,9 @@ var BorderRadiuses = {
 };
 var MaxWidths = {
   '100%': '100%',
+  '1296': '1296px',
   '768': '768px',
+  '528': '528px',
   unset: 'unset'
 };
 var Transforms = {