@imagine10255/react-styled-grid - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/index.js

@@ -7,2 +7,68 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+(function (EMediaSize) {
+  EMediaSize["xs"] = "xs";
+  EMediaSize["sm"] = "sm";
+  EMediaSize["md"] = "md";
+  EMediaSize["lg"] = "lg";
+  EMediaSize["xl"] = "xl";
+  EMediaSize["xxl"] = "xxl";
+})(exports.EMediaSize || (exports.EMediaSize = {}));
+
+var _media;
+
+function px2vwCalc(pixels, pixelTotal) {
+  if (pixelTotal === void 0) {
+    pixelTotal = 320;
+  }
+
+  return pixels / pixelTotal * 100 + "vw";
+}
+
+var replacePx2Vw = function replacePx2Vw(css) {
+  var re = /(\d+)+(px)/gi;
+  return css.map(function (styleObj) {
+    if (typeof styleObj === 'string') {
+      return styleObj.replace(re, function (match, offset, string) {
+        var px = Number(offset);
+
+        if (px === 0) {
+          return '0';
+        } else if (!isNaN(px)) {
+          return px2vwCalc(px);
+        }
+
+        return match;
+      });
+    }
+
+    return styleObj;
+  });
+};
+
+var mediaPx2vw = function mediaPx2vw(strings) {
+  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    interpolations[_key - 1] = arguments[_key];
+  }
+
+  return _styled.css(["@media (max-width:", "px){", ";}"], function (props) {
+    return props.theme.styledGrid.gridBreakpoints.sm;
+  }, replacePx2Vw(_styled.css.apply(void 0, [strings].concat(interpolations))));
+};
+
+var mediaSize = function mediaSize(size) {
+  return function (strings) {
+    for (var _len2 = arguments.length, interpolations = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      interpolations[_key2 - 1] = arguments[_key2];
+    }
+
+    return _styled.css(["@media (min-width:", "px){", ";};"], function (props) {
+      return props.theme.styledGrid.gridBreakpoints[size];
+    }, _styled.css.apply(void 0, [strings].concat(interpolations)));
+  };
+};
+
+var media = (_media = {
+  px2vw: mediaPx2vw
+}, _media[exports.EMediaSize.sm] = mediaSize(exports.EMediaSize.sm), _media[exports.EMediaSize.md] = mediaSize(exports.EMediaSize.md), _media[exports.EMediaSize.lg] = mediaSize(exports.EMediaSize.lg), _media[exports.EMediaSize.xl] = mediaSize(exports.EMediaSize.xl), _media[exports.EMediaSize.xxl] = mediaSize(exports.EMediaSize.xxl), _media);
+
 function _extends() {
@@ -50,3 +116,3 @@ _extends = Object.assign || function (target) {
 
-var defaultTheme = {
+var defaultGridTheme = {
   gridGutterWidth: 10,
@@ -60,3 +126,3 @@ gridColumns: 24,
     xl: 1200,
-    xxl: 1920
+    xxl: 1540
   },
@@ -68,3 +134,3 @@ containerMaxWidths: {
     xl: 1140,
-    xxl: 1860
+    xxl: 1540
   },
@@ -80,74 +146,2 @@ gridGutterWidthMedia: {
 
-(function (EMediaSize) {
-  EMediaSize["xs"] = "xs";
-  EMediaSize["sm"] = "sm";
-  EMediaSize["md"] = "md";
-  EMediaSize["lg"] = "lg";
-  EMediaSize["xl"] = "xl";
-  EMediaSize["xxl"] = "xxl";
-})(exports.EMediaSize || (exports.EMediaSize = {}));
-
-var _media;
-
-var getBreakpoints = function getBreakpoints(props) {
-  var _props$theme$styledGr;
-
-  return _extends({}, defaultTheme.gridBreakpoints, (_props$theme$styledGr = props.theme.styledGrid.gridBreakpoints) != null ? _props$theme$styledGr : {});
-};
-
-function px2vwCalc(pixels, pixelTotal) {
-  if (pixelTotal === void 0) {
-    pixelTotal = 320;
-  }
-
-  return pixels / pixelTotal * 100 + "vw";
-}
-
-var replacePx2Vw = function replacePx2Vw(css) {
-  var re = /(\d+)+(px)/gi;
-  return css.map(function (styleObj) {
-    if (typeof styleObj === 'string') {
-      return styleObj.replace(re, function (match, offset, string) {
-        var px = Number(offset);
-
-        if (px === 0) {
-          return '0';
-        } else if (!isNaN(px)) {
-          return px2vwCalc(px);
-        }
-
-        return match;
-      });
-    }
-
-    return styleObj;
-  });
-};
-
-var mediaPx2vw = function mediaPx2vw(strings) {
-  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    interpolations[_key - 1] = arguments[_key];
-  }
-
-  return _styled.css(["@media (max-width:", "px){", ";}"], function (props) {
-    return getBreakpoints(props).sm;
-  }, replacePx2Vw(_styled.css.apply(void 0, [strings].concat(interpolations))));
-};
-
-var mediaSize = function mediaSize(size) {
-  return function (strings) {
-    for (var _len2 = arguments.length, interpolations = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      interpolations[_key2 - 1] = arguments[_key2];
-    }
-
-    return _styled.css(["@media (min-width:", "px){", ";};"], function (props) {
-      return getBreakpoints(props)[size];
-    }, _styled.css.apply(void 0, [strings].concat(interpolations)));
-  };
-};
-
-var media = (_media = {
-  px2vw: mediaPx2vw
-}, _media[exports.EMediaSize.sm] = mediaSize(exports.EMediaSize.sm), _media[exports.EMediaSize.md] = mediaSize(exports.EMediaSize.md), _media[exports.EMediaSize.lg] = mediaSize(exports.EMediaSize.lg), _media[exports.EMediaSize.xl] = mediaSize(exports.EMediaSize.xl), _media[exports.EMediaSize.xxl] = mediaSize(exports.EMediaSize.xxl), _media);
-
 var getDataName = (function (p) {
@@ -158,3 +152,3 @@ return process.env.NODE_ENV === 'production' ? undefined : [p.fluid ? 'container-fluid' : 'container'].filter(Boolean).join(' ');
 var _templateObject, _templateObject2, _templateObject3;
-var mediaSizes = Object.keys(defaultTheme.containerMaxWidths);
+var mediaSizes = Object.keys(defaultGridTheme.containerMaxWidths);
 
@@ -176,3 +170,3 @@ var generateMedia = function generateMedia(props) {
 })(["width:100%;margin-right:auto;margin-left:auto;", ""], function (props) {
-  return _styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), props.theme.styledGrid.gridGutterWidth, props.theme.styledGrid.gridGutterWidth, !props.fluid && _styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
+  return _styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     box-sizing: border-box;\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), props.theme.styledGrid.gridGutterWidth, props.theme.styledGrid.gridGutterWidth, !props.fluid && _styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
 });
@@ -202,3 +196,3 @@
 
-var mediaSizes$1 = Object.keys(defaultTheme.containerMaxWidths);
+var mediaSizes$1 = Object.keys(defaultGridTheme.containerMaxWidths);
 
@@ -219,6 +213,4 @@ var generateMedia$1 = function generateMedia(props) {
   componentId: "sc-17ap04z-0"
-})(["display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;", ""], function (props) {
-  var _props$horizontal, _props$vertical;
-
-  return _styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n     margin-right: ", ";\n     margin-left: ", ";\n     \n     justify-content: ", ";\n     align-items: ", ";\n\n     // ps: \u8A2D\u5B9A\u6703 width 100% \u6703\u7522\u751F margin \u62B5\u92B7\u5931\u6557\n\n\n     ", "\n\n     ", "\n "])), getRowMargin(props), getRowMargin(props), (_props$horizontal = props.horizontal) != null ? _props$horizontal : exports.EAlign.start, (_props$vertical = props.vertical) != null ? _props$vertical : exports.EAlign.start, !props.noGutters && _styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n        ", "\n     "])), generateMedia$1(props)), props.noGutters && _styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        >[data-grid=col]{\n            padding-right: 0;\n            padding-left: 0;\n        }\n     "]))));
+})(["box-sizing:border-box;padding-inline-start:0;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;", ""], function (props) {
+  return _styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n     margin-right: ", ";\n     margin-left: ", ";\n     \n     justify-content: ", ";\n     align-items: ", ";\n\n     // ps: \u8A2D\u5B9A\u6703 width 100% \u6703\u7522\u751F margin \u62B5\u92B7\u5931\u6557\n\n\n     ", "\n\n     ", "\n "])), getRowMargin(props), getRowMargin(props), props.horizontal ? props.horizontal : exports.EAlign.start, props.vertical ? props.vertical : exports.EAlign.start, !props.noGutters && _styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n        ", "\n     "])), generateMedia$1(props)), props.noGutters && _styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        >[data-grid=col]{\n            padding-right: 0;\n            padding-left: 0;\n        }\n     "]))));
 });
@@ -247,14 +239,8 @@
   componentId: "sc-1jfp557-0"
-})(["display:flex;flex-direction:", ";justify-content:", ";align-items:", ";"], function (props) {
-  var _props$direction;
-
-  return (_props$direction = props.direction) != null ? _props$direction : EDirection.row;
+})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";align-items:", ";"], function (props) {
+  return props.direction ? props.direction : EDirection.row;
 }, function (props) {
-  var _props$horizontal;
-
-  return (_props$horizontal = props.horizontal) != null ? _props$horizontal : exports.EAlign.start;
+  return props.horizontal ? props.horizontal : exports.EAlign.start;
 }, function (props) {
-  var _props$vertical;
-
-  return (_props$vertical = props.vertical) != null ? _props$vertical : exports.EAlign.start;
+  return props.vertical ? props.vertical : exports.EAlign.start;
 });
@@ -321,3 +307,3 @@
 var _templateObject$2, _templateObject2$2, _templateObject3$2;
-var mediaSizes$2 = Object.keys(defaultTheme.containerMaxWidths);
+var mediaSizes$2 = Object.keys(defaultGridTheme.containerMaxWidths);
 
@@ -338,3 +324,3 @@ var generateMedia$2 = function generateMedia(props) {
   componentId: "sc-1cju735-0"
-})(["position:relative;width:100%;min-height:1px;", ""], function (props) {
+})(["box-sizing:border-box;position:relative;width:100%;min-height:1px;", ""], function (props) {
   return _styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     >[data-grid=row]{\n        flex: 0 1 100%;\n    }\n\n     min-width: 0; // \u89E3\u6C7A\u4E0B\u5C64\u6709\u4F7F\u7528 white-space: nowrap; \u7522\u751F\u885D\u7A81\u8DD1\u7248\n     ", ";\n\n     ", ";\n "])), props.theme.styledGrid.gridGutterWidth, props.theme.styledGrid.gridGutterWidth, props.col && css.col(props.col, props.theme.styledGrid.gridColumns), generateMedia$2(props));
@@ -354,8 +340,12 @@ });
 
+var _excluded$2 = ["gridBreakpoints", "containerMaxWidths", "gridGutterWidthMedia"];
+
 var GridThemeProvider = function GridThemeProvider(props) {
-  var _props$gridTheme = props.gridTheme,
-      gridTheme = _props$gridTheme === void 0 ? {} : _props$gridTheme,
+  var gridTheme = props.gridTheme,
       children = props.children;
+
+  var baseDefaultTheme = _objectWithoutPropertiesLoose(defaultGridTheme, _excluded$2);
+
   var composeGridTheme = {
-    styledBsGrid: Object.assign({}, defaultTheme, gridTheme)
+    styledGrid: _extends({}, baseDefaultTheme, gridTheme)
   };
@@ -362,0 +352,0 @@ return React.createElement(_styled.ThemeProvider, {

dist/index.modern.js

 import _styled, { css as css$1, ThemeProvider } from 'styled-components';
 import React from 'react';
 
+var EMediaSize;
+
+(function (EMediaSize) {
+  EMediaSize["xs"] = "xs";
+  EMediaSize["sm"] = "sm";
+  EMediaSize["md"] = "md";
+  EMediaSize["lg"] = "lg";
+  EMediaSize["xl"] = "xl";
+  EMediaSize["xxl"] = "xxl";
+})(EMediaSize || (EMediaSize = {}));
+
+var _media;
+
+function px2vwCalc(pixels, pixelTotal) {
+  if (pixelTotal === void 0) {
+    pixelTotal = 320;
+  }
+
+  return pixels / pixelTotal * 100 + "vw";
+}
+
+var replacePx2Vw = function replacePx2Vw(css) {
+  var re = /(\d+)+(px)/gi;
+  return css.map(function (styleObj) {
+    if (typeof styleObj === 'string') {
+      return styleObj.replace(re, function (match, offset, string) {
+        var px = Number(offset);
+
+        if (px === 0) {
+          return '0';
+        } else if (!isNaN(px)) {
+          return px2vwCalc(px);
+        }
+
+        return match;
+      });
+    }
+
+    return styleObj;
+  });
+};
+
+var mediaPx2vw = function mediaPx2vw(strings) {
+  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    interpolations[_key - 1] = arguments[_key];
+  }
+
+  return css$1(["@media (max-width:", "px){", ";}"], function (props) {
+    return props.theme.styledGrid.gridBreakpoints.sm;
+  }, replacePx2Vw(css$1.apply(void 0, [strings].concat(interpolations))));
+};
+
+var mediaSize = function mediaSize(size) {
+  return function (strings) {
+    for (var _len2 = arguments.length, interpolations = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      interpolations[_key2 - 1] = arguments[_key2];
+    }
+
+    return css$1(["@media (min-width:", "px){", ";};"], function (props) {
+      return props.theme.styledGrid.gridBreakpoints[size];
+    }, css$1.apply(void 0, [strings].concat(interpolations)));
+  };
+};
+
+var media = (_media = {
+  px2vw: mediaPx2vw
+}, _media[EMediaSize.sm] = mediaSize(EMediaSize.sm), _media[EMediaSize.md] = mediaSize(EMediaSize.md), _media[EMediaSize.lg] = mediaSize(EMediaSize.lg), _media[EMediaSize.xl] = mediaSize(EMediaSize.xl), _media[EMediaSize.xxl] = mediaSize(EMediaSize.xxl), _media);
+
 function _extends() {
@@ -46,3 +114,3 @@ _extends = Object.assign || function (target) {
 
-var defaultTheme = {
+var defaultGridTheme = {
   gridGutterWidth: 10,
@@ -56,3 +124,3 @@ gridColumns: 24,
     xl: 1200,
-    xxl: 1920
+    xxl: 1540
   },
@@ -64,3 +132,3 @@ containerMaxWidths: {
     xl: 1140,
-    xxl: 1860
+    xxl: 1540
   },
@@ -76,76 +144,2 @@ gridGutterWidthMedia: {
 
-var EMediaSize;
-
-(function (EMediaSize) {
-  EMediaSize["xs"] = "xs";
-  EMediaSize["sm"] = "sm";
-  EMediaSize["md"] = "md";
-  EMediaSize["lg"] = "lg";
-  EMediaSize["xl"] = "xl";
-  EMediaSize["xxl"] = "xxl";
-})(EMediaSize || (EMediaSize = {}));
-
-var _media;
-
-var getBreakpoints = function getBreakpoints(props) {
-  var _props$theme$styledGr;
-
-  return _extends({}, defaultTheme.gridBreakpoints, (_props$theme$styledGr = props.theme.styledGrid.gridBreakpoints) != null ? _props$theme$styledGr : {});
-};
-
-function px2vwCalc(pixels, pixelTotal) {
-  if (pixelTotal === void 0) {
-    pixelTotal = 320;
-  }
-
-  return pixels / pixelTotal * 100 + "vw";
-}
-
-var replacePx2Vw = function replacePx2Vw(css) {
-  var re = /(\d+)+(px)/gi;
-  return css.map(function (styleObj) {
-    if (typeof styleObj === 'string') {
-      return styleObj.replace(re, function (match, offset, string) {
-        var px = Number(offset);
-
-        if (px === 0) {
-          return '0';
-        } else if (!isNaN(px)) {
-          return px2vwCalc(px);
-        }
-
-        return match;
-      });
-    }
-
-    return styleObj;
-  });
-};
-
-var mediaPx2vw = function mediaPx2vw(strings) {
-  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    interpolations[_key - 1] = arguments[_key];
-  }
-
-  return css$1(["@media (max-width:", "px){", ";}"], function (props) {
-    return getBreakpoints(props).sm;
-  }, replacePx2Vw(css$1.apply(void 0, [strings].concat(interpolations))));
-};
-
-var mediaSize = function mediaSize(size) {
-  return function (strings) {
-    for (var _len2 = arguments.length, interpolations = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      interpolations[_key2 - 1] = arguments[_key2];
-    }
-
-    return css$1(["@media (min-width:", "px){", ";};"], function (props) {
-      return getBreakpoints(props)[size];
-    }, css$1.apply(void 0, [strings].concat(interpolations)));
-  };
-};
-
-var media = (_media = {
-  px2vw: mediaPx2vw
-}, _media[EMediaSize.sm] = mediaSize(EMediaSize.sm), _media[EMediaSize.md] = mediaSize(EMediaSize.md), _media[EMediaSize.lg] = mediaSize(EMediaSize.lg), _media[EMediaSize.xl] = mediaSize(EMediaSize.xl), _media[EMediaSize.xxl] = mediaSize(EMediaSize.xxl), _media);
-
 var getDataName = (function (p) {
@@ -156,3 +150,3 @@ return process.env.NODE_ENV === 'production' ? undefined : [p.fluid ? 'container-fluid' : 'container'].filter(Boolean).join(' ');
 var _templateObject, _templateObject2, _templateObject3;
-var mediaSizes = Object.keys(defaultTheme.containerMaxWidths);
+var mediaSizes = Object.keys(defaultGridTheme.containerMaxWidths);
 
@@ -174,3 +168,3 @@ var generateMedia = function generateMedia(props) {
 })(["width:100%;margin-right:auto;margin-left:auto;", ""], function (props) {
-  return css$1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), props.theme.styledGrid.gridGutterWidth, props.theme.styledGrid.gridGutterWidth, !props.fluid && css$1(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
+  return css$1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     box-sizing: border-box;\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     ", "\n "])), props.theme.styledGrid.gridGutterWidth, props.theme.styledGrid.gridGutterWidth, !props.fluid && css$1(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n    "])), generateMedia(props)));
 });
@@ -202,3 +196,3 @@
 
-var mediaSizes$1 = Object.keys(defaultTheme.containerMaxWidths);
+var mediaSizes$1 = Object.keys(defaultGridTheme.containerMaxWidths);
 
@@ -219,6 +213,4 @@ var generateMedia$1 = function generateMedia(props) {
   componentId: "sc-17ap04z-0"
-})(["display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;", ""], function (props) {
-  var _props$horizontal, _props$vertical;
-
-  return css$1(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n     margin-right: ", ";\n     margin-left: ", ";\n     \n     justify-content: ", ";\n     align-items: ", ";\n\n     // ps: \u8A2D\u5B9A\u6703 width 100% \u6703\u7522\u751F margin \u62B5\u92B7\u5931\u6557\n\n\n     ", "\n\n     ", "\n "])), getRowMargin(props), getRowMargin(props), (_props$horizontal = props.horizontal) != null ? _props$horizontal : EAlign.start, (_props$vertical = props.vertical) != null ? _props$vertical : EAlign.start, !props.noGutters && css$1(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n        ", "\n     "])), generateMedia$1(props)), props.noGutters && css$1(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        >[data-grid=col]{\n            padding-right: 0;\n            padding-left: 0;\n        }\n     "]))));
+})(["box-sizing:border-box;padding-inline-start:0;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;", ""], function (props) {
+  return css$1(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n     margin-right: ", ";\n     margin-left: ", ";\n     \n     justify-content: ", ";\n     align-items: ", ";\n\n     // ps: \u8A2D\u5B9A\u6703 width 100% \u6703\u7522\u751F margin \u62B5\u92B7\u5931\u6557\n\n\n     ", "\n\n     ", "\n "])), getRowMargin(props), getRowMargin(props), props.horizontal ? props.horizontal : EAlign.start, props.vertical ? props.vertical : EAlign.start, !props.noGutters && css$1(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n        ", "\n     "])), generateMedia$1(props)), props.noGutters && css$1(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        >[data-grid=col]{\n            padding-right: 0;\n            padding-left: 0;\n        }\n     "]))));
 });
@@ -247,14 +239,8 @@
   componentId: "sc-1jfp557-0"
-})(["display:flex;flex-direction:", ";justify-content:", ";align-items:", ";"], function (props) {
-  var _props$direction;
-
-  return (_props$direction = props.direction) != null ? _props$direction : EDirection.row;
+})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";align-items:", ";"], function (props) {
+  return props.direction ? props.direction : EDirection.row;
 }, function (props) {
-  var _props$horizontal;
-
-  return (_props$horizontal = props.horizontal) != null ? _props$horizontal : EAlign.start;
+  return props.horizontal ? props.horizontal : EAlign.start;
 }, function (props) {
-  var _props$vertical;
-
-  return (_props$vertical = props.vertical) != null ? _props$vertical : EAlign.start;
+  return props.vertical ? props.vertical : EAlign.start;
 });
@@ -323,3 +309,3 @@
 var _templateObject$2, _templateObject2$2, _templateObject3$2;
-var mediaSizes$2 = Object.keys(defaultTheme.containerMaxWidths);
+var mediaSizes$2 = Object.keys(defaultGridTheme.containerMaxWidths);
 
@@ -340,3 +326,3 @@ var generateMedia$2 = function generateMedia(props) {
   componentId: "sc-1cju735-0"
-})(["position:relative;width:100%;min-height:1px;", ""], function (props) {
+})(["box-sizing:border-box;position:relative;width:100%;min-height:1px;", ""], function (props) {
   return css$1(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n     padding-right: ", "px;\n     padding-left: ", "px;\n\n     >[data-grid=row]{\n        flex: 0 1 100%;\n    }\n\n     min-width: 0; // \u89E3\u6C7A\u4E0B\u5C64\u6709\u4F7F\u7528 white-space: nowrap; \u7522\u751F\u885D\u7A81\u8DD1\u7248\n     ", ";\n\n     ", ";\n "])), props.theme.styledGrid.gridGutterWidth, props.theme.styledGrid.gridGutterWidth, props.col && css.col(props.col, props.theme.styledGrid.gridColumns), generateMedia$2(props));
@@ -356,8 +342,12 @@ });
 
+var _excluded$2 = ["gridBreakpoints", "containerMaxWidths", "gridGutterWidthMedia"];
+
 var GridThemeProvider = function GridThemeProvider(props) {
-  var _props$gridTheme = props.gridTheme,
-      gridTheme = _props$gridTheme === void 0 ? {} : _props$gridTheme,
+  var gridTheme = props.gridTheme,
       children = props.children;
+
+  var baseDefaultTheme = _objectWithoutPropertiesLoose(defaultGridTheme, _excluded$2);
+
   var composeGridTheme = {
-    styledBsGrid: Object.assign({}, defaultTheme, gridTheme)
+    styledGrid: _extends({}, baseDefaultTheme, gridTheme)
   };
@@ -364,0 +354,0 @@ return React.createElement(ThemeProvider, {

dist/library/imreact-styled-grid/components/Container/types.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import CSS from 'csstype';
@@ -2,0 +3,0 @@ export interface ContainerProps {

dist/library/imreact-styled-grid/components/Row/types.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import CSS from 'csstype';
@@ -2,0 +3,0 @@ export interface RowProps {

dist/library/react-styled-grid/components/Col/types.d.ts

@@ -28,5 +28,5 @@ import { MouseEvent } from 'react';
 };
-export declare type TCol = String & StyledComponentBase<"div", any, {
+export declare type TCol = String & StyledComponentBase<'div', any, {
     'data-grid': string;
     'data-debug': string | undefined;
-}, "data-grid" | "data-debug">;
+}, 'data-grid' | 'data-debug'>;

dist/library/react-styled-grid/components/Container/types.d.ts

 import CSS from 'csstype';
-export interface IContainerProps {
+export declare interface IContainerProps {
     fluid?: boolean;
@@ -4,0 +4,0 @@ sm?: boolean;

dist/library/react-styled-grid/components/ThemeProvider/types.d.ts

@@ -0,7 +1,8 @@
+import { ITheme } from 'library/react-styled-grid';
 import React from 'react';
 import { StyledComponentBase } from 'styled-components/macro';
-export declare type TGridStyledComponent = String & StyledComponentBase<"div", any, {
+export declare type TGridStyledComponent = String & StyledComponentBase<'div', any, {
     'data-grid': string;
     'data-debug': string | undefined;
-}, "data-grid" | "data-debug">;
+}, 'data-grid' | 'data-debug'>;
 export declare type gridProps = {
@@ -27,4 +28,4 @@ gridGutterWidth?: number;
 export declare type themeProps = {
-    gridTheme: gridProps;
+    gridTheme: ITheme;
     children: React.ReactNode;
 };

dist/library/react-styled-grid/config.d.ts

 /**
- * Library Default Setting
+ * bootstrap grid setting
  *
- * ps: please check your project setting `src/config/grid.ts`
+ * 單位值參考
+ * row.padding === col.padding === container.padding
+ *
+ * 更改格數
+ * import grid from "config/grid";
+ *
+ * <GridThemeProvider gridTheme={{
+ *     ...grid,
+ *     gridColumns: 35,
+ *     gridGutterWidth: 3,
+ * }}>
  */
-import { ITheme } from './media/types';
-export declare const themeName = "styledBsGrid";
-export declare const defaultTheme: ITheme;
+import { ITheme } from './media';
+declare const defaultGridTheme: ITheme;
+export default defaultGridTheme;

package.json

 {
   "name": "@imagine10255/react-styled-grid",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Most modern mobile touch slider with hardware accelerated transitions by react",
   "author": "imagine10255",
   "license": "MIT",
-  "repository": "imagine10255/react-styled-grid",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/imagine10255/react-styled-grid.git"
+  },
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.tsx",
+  "types": "dist/index.d.ts",
   "engines": {
@@ -26,6 +30,7 @@ "node": ">=10"
     "predeploy": "cd example && yarn install && yarn run build-storybook",
-    "deploy": "gh-pages -d example/storybook-static"
+    "deploy": "gh-pages -d example/storybook-static",
+    "lint:fix": "eslint ./src --fix"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "17.0.2"
   },
@@ -40,7 +45,5 @@ "dependencies": {
     "@types/jest": "^25.1.4",
-    "@types/node": "^12.12.38",
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.7",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
+    "@types/node": "15.0.3",
+    "@types/react": "17.0.38",
+    "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.15",
@@ -50,21 +53,39 @@ "microbundle-crl": "^0.13.10",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
     "npm-run-all": "^4.1.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "typescript": "4.1.5",
-    "@github/mini-throttle": "2.1.0"
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "4.1.5"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ],
+    "rules": {
+      "quotes": [
+        "warn",
+        "single"
+      ],
+      "semi": [
+        "warn",
+        "always"
+      ],
+      "indent": [
+        "warn",
+        4
+      ],
+      "object-curly-spacing": [
+        "warn",
+        "never"
+      ],
+      "no-useless-escape": "off",
+      "import/no-anonymous-default-export": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/no-unused-vars": "off"
+    }
+  }
 }

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93661

increased by1.71%

Dev dependency count

17

decreased by-39.29%

Number of low supply chain risk alerts

6

decreased by-33.33%

Worsened metrics

Lines of code

971

decreased by-0.21%

No dependency changes