@bgord/design 0.27.21 → 0.27.25

package/dist/design.cjs.development.js

@@ -56,6 +56,22 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -916,18 +932,38 @@ var File = /*#__PURE__*/function () {
   return File;
 }();
 
-var Margins = /*#__PURE__*/function () {
-  function Margins(config) {
-    this.spacing = config.spacing;
-    this.breakpoints = config.breakpoints;
+var AbstractGenerator = /*#__PURE__*/function () {
+  function AbstractGenerator(name) {
+    this.name = name;
   }
 
-  var _proto = Margins.prototype;
+  var _proto = AbstractGenerator.prototype;
 
   _proto.generateHeader = function generateHeader() {
-    return '/* Margins */\n\n';
+    return "/* " + this.name + " */\n\n";
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
   };
 
+  return AbstractGenerator;
+}();
+
+var Margins = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(Margins, _AbstractGenerator);
+
+  function Margins(config) {
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Margins') || this;
+    _this.spacing = config.spacing;
+    _this.breakpoints = config.breakpoints;
+    return _this;
+  }
+
+  var _proto = Margins.prototype;
+
   _proto.generateCss = function generateCss() {
     var output = '';
 
@@ -1041,25 +1077,23 @@ var Margins = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return Margins;
-}();
+}(AbstractGenerator);
+
+var Paddings = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(Paddings, _AbstractGenerator);
 
-var Paddings = /*#__PURE__*/function () {
   function Paddings(config) {
-    this.spacing = config.spacing;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Paddings') || this;
+    _this.spacing = config.spacing;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = Paddings.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Paddings */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular padding: data-p="*"
 
@@ -1179,25 +1213,23 @@ var Paddings = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return Paddings;
-}();
+}(AbstractGenerator);
+
+var DisplaysGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(DisplaysGenerator, _AbstractGenerator);
 
-var DisplaysGenerator = /*#__PURE__*/function () {
   function DisplaysGenerator(config) {
-    this.displays = config.displays;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Displays') || this;
+    _this.displays = config.displays;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = DisplaysGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Displays */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-display="*"
 
@@ -1237,25 +1269,23 @@ var DisplaysGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return DisplaysGenerator;
-}();
+}(AbstractGenerator);
+
+var AxisPlacementsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(AxisPlacementsGenerator, _AbstractGenerator);
 
-var AxisPlacementsGenerator = /*#__PURE__*/function () {
   function AxisPlacementsGenerator(config) {
-    this.axisPlacements = config.axisPlacements;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Axis placements') || this;
+    _this.axisPlacements = config.axisPlacements;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = AxisPlacementsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Axis placements */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Main axis placement: data-main="*"
 
@@ -1300,24 +1330,22 @@ var AxisPlacementsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return AxisPlacementsGenerator;
-}();
+}(AbstractGenerator);
+
+var PositionsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(PositionsGenerator, _AbstractGenerator);
 
-var PositionsGenerator = /*#__PURE__*/function () {
   function PositionsGenerator(config) {
-    this.positions = config.positions;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Positions') || this;
+    _this.positions = config.positions;
+    return _this;
   }
 
   var _proto = PositionsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Positions */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-position="*"
 
@@ -1331,24 +1359,22 @@ var PositionsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return PositionsGenerator;
-}();
+}(AbstractGenerator);
+
+var FlexWrapGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(FlexWrapGenerator, _AbstractGenerator);
 
-var FlexWrapGenerator = /*#__PURE__*/function () {
   function FlexWrapGenerator(config) {
-    this.flexWraps = config.flexWraps;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Flex wraps') || this;
+    _this.flexWraps = config.flexWraps;
+    return _this;
   }
 
   var _proto = FlexWrapGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Flex wraps */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-wrap="*"
 
@@ -1362,24 +1388,22 @@ var FlexWrapGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return FlexWrapGenerator;
-}();
+}(AbstractGenerator);
+
+var ZIndexGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(ZIndexGenerator, _AbstractGenerator);
 
-var ZIndexGenerator = /*#__PURE__*/function () {
   function ZIndexGenerator(config) {
-    this.zIndexes = config.zIndexes;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Z indexes') || this;
+    _this.zIndexes = config.zIndexes;
+    return _this;
   }
 
   var _proto = ZIndexGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Displays */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-z="*"
 
@@ -1393,25 +1417,23 @@ var ZIndexGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return ZIndexGenerator;
-}();
+}(AbstractGenerator);
+
+var WidthsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(WidthsGenerator, _AbstractGenerator);
 
-var WidthsGenerator = /*#__PURE__*/function () {
   function WidthsGenerator(config) {
-    this.widhts = config.widths;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Widths') || this;
+    _this.widhts = config.widths;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = WidthsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Widths */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-width="*"
 
@@ -1441,25 +1463,23 @@ var WidthsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return WidthsGenerator;
-}();
+}(AbstractGenerator);
+
+var FontSizeGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(FontSizeGenerator, _AbstractGenerator);
 
-var FontSizeGenerator = /*#__PURE__*/function () {
   function FontSizeGenerator(config) {
-    this.fontSizes = config.fontSizes;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Font sizes') || this;
+    _this.fontSizes = config.fontSizes;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = FontSizeGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Font sizes */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-fs="*"
 
@@ -1489,24 +1509,22 @@ var FontSizeGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return FontSizeGenerator;
-}();
+}(AbstractGenerator);
+
+var FontWeightGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(FontWeightGenerator, _AbstractGenerator);
 
-var FontWeightGenerator = /*#__PURE__*/function () {
   function FontWeightGenerator(config) {
-    this.fontWeights = config.fontWeights;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Font sizes') || this;
+    _this.fontWeights = config.fontWeights;
+    return _this;
   }
 
   var _proto = FontWeightGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Font sizes */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-fw="*"
 
@@ -1520,24 +1538,22 @@ var FontWeightGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return FontWeightGenerator;
-}();
+}(AbstractGenerator);
+
+var LineHeightsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(LineHeightsGenerator, _AbstractGenerator);
 
-var LineHeightsGenerator = /*#__PURE__*/function () {
   function LineHeightsGenerator(config) {
-    this.lineHeights = config.lineHeights;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Line heights') || this;
+    _this.lineHeights = config.lineHeights;
+    return _this;
   }
 
   var _proto = LineHeightsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Line heights */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-lh="*"
 
@@ -1551,25 +1567,23 @@ var LineHeightsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return LineHeightsGenerator;
-}();
+}(AbstractGenerator);
+
+var FlexDirectionsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(FlexDirectionsGenerator, _AbstractGenerator);
 
-var FlexDirectionsGenerator = /*#__PURE__*/function () {
   function FlexDirectionsGenerator(config) {
-    this.flexDirections = config.flexDirections;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Flex directions') || this;
+    _this.flexDirections = config.flexDirections;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = FlexDirectionsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Flex directions */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = '';
 
@@ -1599,24 +1613,22 @@ var FlexDirectionsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return FlexDirectionsGenerator;
-}();
+}(AbstractGenerator);
+
+var BackgroundsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(BackgroundsGenerator, _AbstractGenerator);
 
-var BackgroundsGenerator = /*#__PURE__*/function () {
   function BackgroundsGenerator(config) {
-    this.colors = _extends({}, config.grayscale, config.greens, config.reds, config.oranges);
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Backgrounds') || this;
+    _this.colors = _extends({}, config.grayscale, config.greens, config.reds, config.oranges);
+    return _this;
   }
 
   var _proto = BackgroundsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Backgrounds */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-bg="*"
 
@@ -1630,24 +1642,22 @@ var BackgroundsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return BackgroundsGenerator;
-}();
+}(AbstractGenerator);
+
+var FontColorsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(FontColorsGenerator, _AbstractGenerator);
 
-var FontColorsGenerator = /*#__PURE__*/function () {
   function FontColorsGenerator(config) {
-    this.colors = _extends({}, config.grayscale, config.greens, config.reds, config.oranges);
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Font colors') || this;
+    _this.colors = _extends({}, config.grayscale, config.greens, config.reds, config.oranges);
+    return _this;
   }
 
   var _proto = FontColorsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Font colors */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-color="*"
 
@@ -1661,24 +1671,22 @@ var FontColorsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return FontColorsGenerator;
-}();
+}(AbstractGenerator);
+
+var LetterSpacingsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(LetterSpacingsGenerator, _AbstractGenerator);
 
-var LetterSpacingsGenerator = /*#__PURE__*/function () {
   function LetterSpacingsGenerator(config) {
-    this.letterSpacings = config.letterSpacings;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Letter spacings') || this;
+    _this.letterSpacings = config.letterSpacings;
+    return _this;
   }
 
   var _proto = LetterSpacingsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Font sizes */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-ls="*"
 
@@ -1692,25 +1700,23 @@ var LetterSpacingsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return LetterSpacingsGenerator;
-}();
+}(AbstractGenerator);
+
+var FlexGrowsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(FlexGrowsGenerator, _AbstractGenerator);
 
-var FlexGrowsGenerator = /*#__PURE__*/function () {
   function FlexGrowsGenerator(config) {
-    this.flexGrows = config.flexGrows;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Line heights') || this;
+    _this.flexGrows = config.flexGrows;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = FlexGrowsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Line heights */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-grow="*"
 
@@ -1740,24 +1746,22 @@ var FlexGrowsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return FlexGrowsGenerator;
-}();
+}(AbstractGenerator);
+
+var BorderWidthsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(BorderWidthsGenerator, _AbstractGenerator);
 
-var BorderWidthsGenerator = /*#__PURE__*/function () {
   function BorderWidthsGenerator(config) {
-    this.borderWidths = config.borderWidths;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Border widths') || this;
+    _this.borderWidths = config.borderWidths;
+    return _this;
   }
 
   var _proto = BorderWidthsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Border widths */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = '';
 
@@ -1813,27 +1817,25 @@ var BorderWidthsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return BorderWidthsGenerator;
-}();
+}(AbstractGenerator);
+
+var BorderColorsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(BorderColorsGenerator, _AbstractGenerator);
 
-var BorderColorsGenerator = /*#__PURE__*/function () {
   function BorderColorsGenerator(config) {
-    this.borderColors = config.borderColors;
-    this.greens = config.greens;
-    this.oranges = config.oranges;
-    this.reds = config.reds;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Border colors') || this;
+    _this.borderColors = config.borderColors;
+    _this.greens = config.greens;
+    _this.oranges = config.oranges;
+    _this.reds = config.reds;
+    return _this;
   }
 
   var _proto = BorderColorsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Border colors */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = '';
 
@@ -1889,24 +1891,22 @@ var BorderColorsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return BorderColorsGenerator;
-}();
+}(AbstractGenerator);
+
+var BorderRadiusesGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(BorderRadiusesGenerator, _AbstractGenerator);
 
-var BorderRadiusesGenerator = /*#__PURE__*/function () {
   function BorderRadiusesGenerator(config) {
-    this.borderRadiuses = config.borderRadiuses;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Border radiuses') || this;
+    _this.borderRadiuses = config.borderRadiuses;
+    return _this;
   }
 
   var _proto = BorderRadiusesGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Border radiuses */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = '';
 
@@ -1920,25 +1920,23 @@ var BorderRadiusesGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return BorderRadiusesGenerator;
-}();
+}(AbstractGenerator);
+
+var MaxWidthsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(MaxWidthsGenerator, _AbstractGenerator);
 
-var MaxWidthsGenerator = /*#__PURE__*/function () {
   function MaxWidthsGenerator(config) {
-    this.maxWidths = config.maxWidths;
-    this.breakpoints = config.breakpoints;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Max widths') || this;
+    _this.maxWidths = config.maxWidths;
+    _this.breakpoints = config.breakpoints;
+    return _this;
   }
 
   var _proto = MaxWidthsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Max widths */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-max-width="*"
 
@@ -1968,24 +1966,22 @@ var MaxWidthsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return MaxWidthsGenerator;
-}();
+}(AbstractGenerator);
+
+var TransformsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(TransformsGenerator, _AbstractGenerator);
 
-var TransformsGenerator = /*#__PURE__*/function () {
   function TransformsGenerator(config) {
-    this.transforms = config.transforms;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Transforms') || this;
+    _this.transforms = config.transforms;
+    return _this;
   }
 
   var _proto = TransformsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Transforms */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-transform="*"
 
@@ -1999,30 +1995,33 @@ var TransformsGenerator = /*#__PURE__*/function () {
         continue;
       }
 
+      if (key === 'center') {
+        output += "*[data-transform='" + key + "'] {\n  text-align: center;\n}\n";
+        continue;
+      }
+
       output += "*[data-transform='" + key + "'] {\n  text-transform: " + value + ";\n}\n";
     }
 
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return TransformsGenerator;
-}();
+}(AbstractGenerator);
+
+var OverflowsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(OverflowsGenerator, _AbstractGenerator);
 
-var OverflowsGenerator = /*#__PURE__*/function () {
   function OverflowsGenerator(config) {
-    this.overflows = config.overflows;
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Overflows') || this;
+    _this.overflows = config.overflows;
+    return _this;
   }
 
   var _proto = OverflowsGenerator.prototype;
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Overflows */\n\n';
-  };
-
   _proto.generateCss = function generateCss() {
     var output = ''; // Regular display: data-overflow="*"
 
@@ -2036,21 +2035,17 @@ var OverflowsGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return OverflowsGenerator;
-}();
+}(AbstractGenerator);
 
-var PositionersGenerator = /*#__PURE__*/function () {
-  function PositionersGenerator() {}
+var PositionersGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(PositionersGenerator, _AbstractGenerator);
 
-  var _proto = PositionersGenerator.prototype;
+  function PositionersGenerator() {
+    return _AbstractGenerator.call(this, 'Positioners') || this;
+  }
 
-  _proto.generateHeader = function generateHeader() {
-    return '/* Positioners */\n\n';
-  };
+  var _proto = PositionersGenerator.prototype;
 
   _proto.generateCss = function generateCss() {
     var output = '';
@@ -2062,12 +2057,8 @@ var PositionersGenerator = /*#__PURE__*/function () {
     return output;
   };
 
-  _proto.generateFooter = function generateFooter() {
-    return '/* ===================== */\n\n';
-  };
-
   return PositionersGenerator;
-}();
+}(AbstractGenerator);
 
 var Spacing = {
   '0': '0',
@@ -2236,6 +2227,7 @@ var Transforms = {
   lowercase: 'lowercase',
   capitalize: 'capitalize',
   truncate: 'truncate',
+  center: 'center',
   none: 'none'
 };
 var Overflows = {
@@ -2304,14 +2296,26 @@ var GeneratorProcessor = /*#__PURE__*/function () {
               output = _context.t5 += _context.sent;
               _context.t6 = output;
               _context.next = 29;
-              return new File('src/rules/title-truncate.css').read();
+              return new File('src/ui/anima.css').read();
 
             case 29:
               output = _context.t6 += _context.sent;
-              _context.next = 32;
+              _context.t7 = output;
+              _context.next = 33;
+              return new File('src/rules/title-truncate.css').read();
+
+            case 33:
+              output = _context.t7 += _context.sent;
+              _context.t8 = output;
+              _context.next = 37;
+              return new File('src/rules/target-blank-referer.css').read();
+
+            case 37:
+              output = _context.t8 += _context.sent;
+              _context.next = 40;
               return new File('dist/main.css').save(output);
 
-            case 32:
+            case 40:
             case "end":
               return _context.stop();
           }