@megafon/ui-core 2.0.0 → 2.1.3

package/dist/lib/colors/ColorItem/ColorItem.js

@@ -0,0 +1,50 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var cn = (0, _uiHelpers.cnCreate)('color-item');
+
+var ColorItem = function ColorItem(_ref) {
+  var colorCode = _ref.colorCode,
+      colorName = _ref.colorName,
+      parentColorCode = _ref.parentColorCode,
+      gradient = _ref.gradient,
+      border = _ref.border,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('color'),
+    style: {
+      background: !gradient ? colorCode : gradient,
+      border: border
+    }
+  }), !!parentColorCode && /*#__PURE__*/React.createElement("div", {
+    className: cn('parent-color'),
+    style: {
+      background: parentColorCode
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    className: cn('name')
+  }, colorName), /*#__PURE__*/React.createElement("span", {
+    className: cn('code')
+  }, colorCode));
+};
+
+var _default = ColorItem;
+exports["default"] = _default;

package/dist/lib/colors/Colors.css

@@ -5,58 +5,229 @@ h4,
 h5 {
   margin: 0;
 }
-.colors {
-  max-width: 835px;
-  margin: 0 auto;
-}
 .colors__inner {
+  margin: 0 -80px;
+  padding: 56px 80px 40px;
+  background-color: #F6F6F6;
+}
+@media screen and (max-width: 1120px) {
+  .colors__inner {
+    margin: 0 -24px;
+    padding: 24px;
+  }
+}
+@media screen and (max-width: 350px) {
+  .colors__inner {
+    margin: 0 -15px;
+    padding: 15px;
+  }
+}
+.colors__title {
+  margin-bottom: 8px;
+}
+.colors__group-title {
+  margin-bottom: 24px;
+}
+@media screen and (min-width: 768px) {
+  .colors__group-title {
+    margin-bottom: 36px;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .colors__basic-group {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-bottom: 24px;
+  }
+}
+.colors__basic-group:last-child {
+  margin-bottom: 0;
+}
+@media screen and (min-width: 768px) {
+  .colors__basic-group:last-child {
+    padding-left: 24px;
+  }
+}
+.colors__list,
+.colors__group {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin-top: 88px;
 }
-@media screen and (max-width: 767px) {
-  .colors__inner {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    margin-top: 44px;
+@media screen and (max-width: 1023px) {
+  .colors__list,
+  .colors__group {
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
   }
 }
-@media screen and (max-width: 767px) {
-  .colors__section:not(:first-child) {
-    margin-top: 44px;
+.colors__list {
+  padding-bottom: 12px;
+}
+@media screen and (max-width: 1023px) {
+  .colors__list {
+    -webkit-box-pack: space-evenly;
+        -ms-flex-pack: space-evenly;
+            justify-content: space-evenly;
+    -webkit-box-ordinal-group: 3;
+        -ms-flex-order: 2;
+            order: 2;
+    padding-bottom: 0;
   }
 }
-.colors__title {
-  margin-bottom: 44px;
+.colors__list_soft {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.colors__description {
+  position: relative;
+  padding-top: 15px;
+  color: #33333380;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+}
+@media screen and (max-width: 1023px) {
+  .colors__description {
+    -webkit-box-ordinal-group: 1;
+        -ms-flex-order: 0;
+            order: 0;
+    margin-bottom: 18px;
+    padding-top: 0;
+  }
+}
+.colors__container {
+  max-width: 978px;
+}
+.colors__line {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-bottom: 18px;
+}
+@media screen and (min-width: 768px) {
+  .colors__line {
+    margin-bottom: 48px;
+  }
 }
 .colors__item {
+  margin-bottom: 18px;
+}
+@media screen and (min-width: 1024px) {
+  .colors__item {
+    margin-right: 24px;
+    margin-bottom: 0;
+  }
+}
+.colors__item:last-child {
+  margin-right: 0;
+}
+.colors__item_soft {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-right: 0;
 }
-.colors__item:not(:last-child) {
-  margin-bottom: 24px;
+@media screen and (min-width: 1024px) {
+  .colors__item_soft {
+    width: 14.28571429%;
+    min-width: 120px;
+    margin-bottom: 36px;
+  }
+}
+.colors__diagram {
+  max-width: 259px;
+  margin: 0 auto 24px;
+}
+@media screen and (min-width: 1024px) {
+  .colors__diagram {
+    width: 259px;
+    min-width: 259px;
+    height: 259px;
+    margin: 0 40px 0 0;
+  }
+}
+.colors__soft {
+  padding: 24px 16px;
+}
+@media screen and (min-width: 1024px) {
+  .colors__soft {
+    padding: 36px 32px 30px;
+  }
+}
+.colors__soft-list {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+.colors__underline {
+  position: relative;
+  width: 100%;
+  height: 8px;
+}
+@media screen and (max-width: 1023px) {
+  .colors__underline {
+    display: none;
+  }
+}
+.colors__pointer {
+  position: absolute;
+  top: 50%;
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: #D8D8D8;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.colors__underline:after,
+.colors__underline:before,
+.colors__pointer:after {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 4px;
+  background-color: #D8D8D8;
 }
-.colors__color {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
+.colors__underline:after,
+.colors__underline:before {
+  top: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
-.colors__item_border .colors__color {
-  border: 1px solid #E5E5E5;
+.colors__underline:before {
+  left: 0;
 }
-.colors__text-box {
-  margin-left: 12px;
+.colors__underline:after {
+  right: 0;
 }
-.colors__hex-code {
-  opacity: 0.5;
+.colors__pointer:after {
+  top: 100%;
+  left: 50%;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }

package/dist/lib/colors/Colors.js

@@ -7,66 +7,280 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.symbol.description");
+
 require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.function.name");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
+var _Grid = _interopRequireDefault(require("../components/Grid/Grid"));
+
+var _GridColumn = _interopRequireDefault(require("../components/Grid/GridColumn"));
+
 var _Header = _interopRequireDefault(require("../components/Header/Header"));
 
 var _Paragraph = _interopRequireDefault(require("../components/Paragraph/Paragraph"));
 
-var _colorsData = _interopRequireDefault(require("./colorsData"));
+var _Tile = _interopRequireDefault(require("../components/Tile/Tile"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _ColorItem = _interopRequireDefault(require("./ColorItem/ColorItem"));
+
+var _colorsData = _interopRequireDefault(require("./colorsData"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Diagram = function Diagram(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 259 259",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M74.979 12.036a129.498 129.498 0 01113.346 2.096L129.5 129.5 74.979 12.036z",
+    fill: "#DDFFEC"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M188.067 14a129.507 129.507 0 0167.808 87.225L129.5 129.5 188.067 14z",
+    fill: "#E1FAFF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M255.835 101.043a129.504 129.504 0 01-25.217 109.361L129.5 129.5l126.335-28.457z",
+    fill: "#EBEAFF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M230.817 210.154A129.494 129.494 0 01129.774 259l-.274-129.5 101.317 80.654z",
+    fill: "#FEF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M129.5 259a129.492 129.492 0 01-101.147-48.632L129.5 129.5V259z",
+    fill: "#FFC5C9"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M28.086 210.032A129.496 129.496 0 013.271 100.58L129.5 129.5 28.086 210.032z",
+    fill: "#FFCFC7"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3.377 100.121A129.5 129.5 0 0174.799 12.12L129.5 129.5 3.377 100.121z",
+    fill: "#FFEDD1"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M84.367 32.023a107.694 107.694 0 0194.259 1.742l-48.919 95.942-45.34-97.684z",
+    fill: "#0CDC78"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M178.411 33.656a107.684 107.684 0 0156.391 72.537l-105.095 23.514 48.704-96.05z",
+    fill: "#62E3FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M234.768 106.042a107.682 107.682 0 01-.122 47.862 107.683 107.683 0 01-20.849 43.083l-84.09-67.28 105.061-23.665z",
+    fill: "#554FC9"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M213.963 196.779a107.683 107.683 0 01-84.028 40.621l-.228-107.693 84.256 67.072z",
+    fill: "#AA67C1"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M129.707 237.4a107.693 107.693 0 01-84.115-40.443l84.115-67.25V237.4z",
+    fill: "#F8505D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M45.37 196.678a107.694 107.694 0 01-20.637-91.022l104.974 24.051-84.337 66.971z",
+    fill: "#FF765D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M24.821 105.275a107.695 107.695 0 0159.396-73.182l45.49 97.614-104.886-24.432z",
+    fill: "#FFB945"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M93.146 51.187a86.327 86.327 0 0175.559 1.397l-39.214 76.907-36.345-78.304z",
+    fill: "#00B956"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M168.533 52.496a86.332 86.332 0 0145.202 58.146l-84.244 18.849 39.042-76.995z",
+    fill: "#5BD9E5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M213.708 110.521a86.325 86.325 0 01-16.81 72.902l-67.407-53.932 84.217-18.97z",
+    fill: "#444189"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M197.031 183.256a86.314 86.314 0 01-67.357 32.562l-.183-86.327 67.54 53.765z",
+    fill: "#731982"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M129.491 215.818a86.326 86.326 0 01-67.427-32.419l67.427-53.908v86.327z",
+    fill: "#F62434"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M61.886 183.175a86.325 86.325 0 01-16.542-72.963l84.147 19.279-67.605 53.684z",
+    fill: "#EB5A40"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M45.414 109.906a86.327 86.327 0 0147.612-58.663l36.465 78.248-84.077-19.585z",
+    fill: "#FFA717"
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: 129.491,
+    cy: 129.707,
+    rx: 60.429,
+    ry: 60.645,
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M124.234 14h3.832v-.568h-2.76l1.576-1.536c.704-.688 1.152-1.376 1.152-2.08 0-.984-.672-1.608-1.728-1.608-1.088 0-1.768.712-1.856 1.832h.648c.112-.896.544-1.272 1.208-1.272.648 0 1.024.384 1.024 1.024 0 .584-.304 1.104-.824 1.656l-2.272 2.392V14zm6.991.072c1.408 0 2.216-1.12 2.216-2.784v-.32c0-1.632-.824-2.76-2.232-2.76-1.4 0-2.256 1.088-2.256 2.776v.32c0 1.664.904 2.768 2.272 2.768zm0-.576c-.952 0-1.56-.752-1.56-2.2v-.32c0-1.408.576-2.208 1.544-2.208.968 0 1.528.864 1.528 2.192v.32c0 1.448-.512 2.216-1.512 2.216zM242.602 153.771l-.992 3.702.548.147.715-2.666 1.076 1.92c.482.858 1.031 1.469 1.711 1.651.95.254 1.727-.233 2-1.253.282-1.051-.23-1.892-1.289-2.267l-.168.626c.837.34 1.088.854.916 1.496-.168.626-.636.89-1.254.724-.564-.151-.988-.579-1.386-1.225l-1.723-2.813-.154-.042zm-1.879 6.734c-.365 1.36.508 2.43 2.115 2.861l.309.083c1.577.422 2.88-.082 3.244-1.442.362-1.352-.467-2.46-2.097-2.897l-.31-.083c-1.607-.431-2.907.157-3.261 1.478zm.556.149c.247-.919 1.13-1.312 2.529-.937l.309.083c1.36.364 1.984 1.127 1.733 2.062-.25.935-1.23 1.253-2.513.909l-.309-.083c-1.398-.375-2.008-1.068-1.749-2.034zM187.685 228.41l-3.369 1.827.271.499 2.426-1.315-.653 2.101c-.291.94-.357 1.759-.021 2.378.469.865 1.357 1.093 2.285.59.957-.519 1.215-1.469.759-2.495l-.57.308c.329.841.128 1.378-.456 1.694-.569.309-1.083.151-1.388-.412-.278-.513-.259-1.115-.065-1.848l.857-3.186-.076-.141zm-6.18 3.269c-1.237.671-1.414 2.041-.621 3.504l.153.281c.778 1.435 2.04 2.034 3.277 1.362 1.231-.667 1.465-2.031.661-3.515l-.153-.282c-.793-1.462-2.114-2.002-3.317-1.35zm.275.506c.837-.453 1.73-.082 2.42 1.191l.152.281c.672 1.238.547 2.216-.304 2.677-.851.462-1.756-.031-2.389-1.199l-.152-.281c-.69-1.273-.606-2.192.273-2.669zM82.243 235.09l-3.422-1.724-.256.507 2.465 1.242-2.099.663c-.938.298-1.647.711-1.964 1.339-.443.879-.123 1.739.82 2.214.971.489 1.899.159 2.481-.801l-.578-.292c-.503.75-1.058.891-1.651.593-.58-.292-.742-.804-.454-1.376.263-.521.768-.849 1.48-1.108l3.106-1.114.072-.143zm-6.21-3.209c-1.258-.634-2.484.003-3.233 1.489l-.144.286c-.734 1.458-.505 2.836.752 3.469 1.25.63 2.504.043 3.264-1.464l.144-.286c.748-1.486.438-2.879-.784-3.494zm-.26.514c.85.429 1.055 1.374.403 2.667l-.144.286c-.633 1.257-1.507 1.713-2.372 1.277-.864-.435-.976-1.459-.378-2.645l.144-.286c.651-1.293 1.454-1.749 2.347-1.299zM18.766 161.137l-.845-3.738-.555.126.61 2.692-1.846-1.199c-.827-.534-1.597-.82-2.283-.664-.96.217-1.42 1.01-1.188 2.04.24 1.061 1.085 1.567 2.197 1.406l-.143-.632c-.899.088-1.36-.25-1.507-.898-.143-.632.148-1.083.773-1.224.57-.129 1.143.053 1.796.438l2.835 1.688.156-.035zm-1.472-6.834c-.31-1.374-1.581-1.915-3.204-1.547l-.313.07c-1.591.36-2.51 1.413-2.2 2.786.31 1.366 1.56 1.96 3.206 1.588l.312-.071c1.623-.367 2.5-1.492 2.199-2.826zm-.562.127c.21.928-.39 1.687-1.802 2.007l-.312.07c-1.373.311-2.28-.074-2.494-1.019-.213-.944.506-1.68 1.801-1.973l.312-.071c1.412-.319 2.275.01 2.495.986zM35.376 63.414l2.323-3.048-.452-.344-1.673 2.195-.267-2.184c-.12-.977-.396-1.75-.956-2.177-.783-.597-1.686-.44-2.326.4-.66.865-.505 1.837.332 2.586l.393-.515c-.645-.632-.682-1.204-.28-1.732.393-.515.926-.582 1.435-.194.465.354.694.911.818 1.66l.526 3.256.127.097zm4.294-5.517c.853-1.12.452-2.441-.871-3.45l-.255-.194c-1.298-.989-2.695-1.017-3.548.103-.848 1.113-.502 2.454.84 3.477l.256.194c1.323 1.008 2.75.958 3.578-.13zm-.458-.349c-.577.757-1.544.785-2.695-.092l-.255-.194c-1.12-.854-1.407-1.797-.82-2.567.586-.77 1.613-.691 2.67.113l.254.194c1.151.878 1.452 1.75.846 2.546zM214.977 52.57l2.473 2.927.434-.367-1.781-2.108 2.19.213c.98.093 1.795-.009 2.332-.463.752-.635.795-1.551.113-2.358-.702-.83-1.685-.89-2.597-.235l.418.495c.757-.493 1.323-.405 1.751.102.419.495.368 1.03-.121 1.443-.446.377-1.039.48-1.796.44l-3.294-.192-.122.103zm4.457 5.386c.909 1.075 2.286.97 3.557-.104l.244-.207c1.247-1.053 1.577-2.41.668-3.486-.904-1.07-2.287-1.021-3.577.069l-.244.206c-1.271 1.074-1.531 2.477-.648 3.522zm.44-.372c-.614-.727-.432-1.677.674-2.611l.244-.207c1.075-.909 2.058-.985 2.683-.246.625.74.326 1.725-.688 2.582l-.244.207c-1.106.934-2.023 1.04-2.669.275z",
+    fill: "#333",
+    fillOpacity: 0.5
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M126.819 36.072c.968 0 1.968-.568 1.968-1.712 0-.736-.432-1.232-1.096-1.472.528-.232.88-.632.88-1.208 0-.896-.864-1.472-1.752-1.472-.88 0-1.76.56-1.76 1.488 0 .56.32.992.864 1.2-.608.216-1.08.712-1.08 1.48 0 1.136 1.04 1.696 1.976 1.696zm.024-3.424c-.584 0-1.08-.344-1.08-.944 0-.592.464-.952 1.056-.952.592 0 1.048.384 1.048.936 0 .608-.416.96-1.024.96zm-.024 2.856c-.664 0-1.264-.4-1.264-1.152 0-.76.6-1.152 1.28-1.152s1.24.384 1.24 1.136c0 .76-.552 1.168-1.256 1.168zm5.101.568c1.408 0 2.216-1.12 2.216-2.784v-.32c0-1.632-.824-2.76-2.232-2.76-1.4 0-2.256 1.088-2.256 2.776v.32c0 1.664.904 2.768 2.272 2.768zm0-.576c-.952 0-1.56-.752-1.56-2.2v-.32c0-1.408.576-2.208 1.544-2.208.968 0 1.528.864 1.528 2.192v.32c0 1.448-.512 2.216-1.512 2.216zM220.613 150.555c-.251.935.039 2.048 1.144 2.344.711.191 1.302-.098 1.706-.677.087.57.382 1.013.939 1.162.865.232 1.645-.453 1.875-1.311.228-.85-.085-1.845-.982-2.085-.541-.145-1.041.052-1.383.524-.051-.643-.408-1.228-1.15-1.427-1.097-.294-1.907.566-2.149 1.47zm3.301.91c.151-.565.612-.955 1.191-.799.572.153.8.694.646 1.266-.153.572-.642.913-1.175.77-.587-.157-.82-.65-.662-1.237zm-2.753-.763c.172-.641.714-1.117 1.44-.923.734.197.958.878.782 1.535-.176.657-.692 1.098-1.419.904-.734-.197-.985-.836-.803-1.516zm-1.869 4.781c-.364 1.36.509 2.43 2.116 2.861l.309.082c1.576.423 2.879-.081 3.244-1.441.362-1.352-.467-2.461-2.098-2.898l-.309-.083c-1.607-.43-2.908.157-3.262 1.479zm.557.149c.246-.92 1.13-1.313 2.529-.938l.309.083c1.36.364 1.983 1.128 1.733 2.063-.251.935-1.23 1.252-2.513.909l-.309-.083c-1.399-.375-2.008-1.068-1.749-2.034zM174.892 210.239c-.851.461-1.459 1.437-.914 2.443.351.647.967.877 1.665.771-.353.456-.472.975-.197 1.482.427.788 1.461.882 2.241.459.774-.42 1.281-1.331.838-2.147-.266-.492-.754-.72-1.331-.643.431-.48.61-1.141.244-1.816-.542-.999-1.723-.995-2.546-.549zm1.611 3.021c.514-.278 1.114-.212 1.4.315.282.521.046 1.058-.475 1.341-.52.282-1.104.162-1.367-.324-.29-.534-.092-1.042.442-1.332zm-1.34-2.522c.584-.316 1.302-.251 1.66.41.363.668.022 1.299-.576 1.623-.598.324-1.273.254-1.631-.407-.363-.669-.072-1.29.547-1.626zm-4.755 1.932c-1.238.671-1.414 2.041-.621 3.504l.152.281c.778 1.435 2.04 2.034 3.278 1.363 1.231-.668 1.465-2.032.66-3.516l-.152-.281c-.794-1.463-2.114-2.003-3.317-1.351zm.274.507c.837-.454 1.73-.083 2.42 1.19l.153.281c.671 1.238.546 2.216-.305 2.677-.851.462-1.755-.031-2.388-1.198l-.152-.282c-.691-1.273-.607-2.192.272-2.668zM89.864 214.215c-.864-.435-2.013-.378-2.528.644-.33.657-.168 1.294.317 1.807-.576-.03-1.07.169-1.33.683-.402.801.11 1.704.903 2.103.786.396 1.824.292 2.241-.537.252-.5.16-1.03-.231-1.46.64.08 1.284-.15 1.63-.836.511-1.015-.166-1.983-1.002-2.404zm-1.562 3.047c.522.263.81.793.54 1.329-.266.529-.842.642-1.371.375-.529-.266-.763-.814-.515-1.307.274-.543.803-.67 1.346-.397zm1.307-2.54c.593.299.949.926.61 1.598-.342.679-1.054.759-1.661.453s-.935-.901-.596-1.573c.341-.678 1.018-.794 1.647-.478zm-4.3-2.802c-1.258-.633-2.483.003-3.232 1.49l-.144.285c-.734 1.458-.506 2.836.752 3.469 1.25.63 2.504.044 3.263-1.464l.144-.286c.749-1.486.438-2.878-.784-3.494zm-.26.515c.85.428 1.055 1.373.404 2.666l-.144.286c-.634 1.257-1.508 1.713-2.373 1.277-.864-.435-.975-1.459-.378-2.645l.144-.286c.651-1.293 1.454-1.748 2.347-1.298zM39.724 153.747c-.214-.945-.988-1.795-2.104-1.542-.718.162-1.107.693-1.194 1.394-.343-.464-.81-.719-1.373-.592-.873.197-1.245 1.167-1.049 2.033.194.859.935 1.593 1.84 1.389.546-.124.897-.531.98-1.108.345.546.932.897 1.681.727 1.108-.251 1.425-1.388 1.219-2.301zm-3.345.732c.129.569-.097 1.129-.683 1.261-.577.131-1.03-.242-1.161-.82-.13-.577.143-1.107.682-1.228.593-.135 1.028.194 1.162.787zm2.79-.607c.147.648-.11 1.321-.844 1.487-.741.168-1.256-.331-1.406-.994-.15-.664.101-1.295.835-1.46.74-.168 1.26.28 1.416.967zm-.57-5.101c-.311-1.373-1.582-1.914-3.205-1.547l-.312.07c-1.592.36-2.51 1.413-2.2 2.786.31 1.366 1.56 1.961 3.206 1.588l.312-.07c1.623-.367 2.5-1.493 2.198-2.827zm-.562.127c.21.929-.39 1.688-1.802 2.007l-.312.071c-1.373.31-2.28-.075-2.494-1.019-.214-.944.505-1.681 1.8-1.974l.313-.071c1.412-.319 2.274.011 2.495.986zM54.5 74.735c.586-.77.74-1.91-.17-2.603-.585-.446-1.241-.403-1.835-.02.136-.561.03-1.084-.427-1.433-.713-.543-1.695-.204-2.233.502-.533.7-.621 1.74.117 2.302.445.339.983.346 1.478.04-.197.614-.088 1.29.523 1.756.903.688 1.98.2 2.546-.544zm-2.71-2.094c-.354.464-.928.65-1.405.286-.471-.358-.476-.946-.117-1.417.358-.47.94-.6 1.38-.266.483.369.51.913.142 1.397zm2.258 1.75c-.403.528-1.085.762-1.683.307-.604-.46-.553-1.176-.14-1.717.412-.54 1.056-.753 1.655-.297.604.46.594 1.147.167 1.707zm3.543-3.714c.853-1.12.452-2.441-.872-3.45l-.254-.194c-1.298-.989-2.695-1.017-3.548.103-.849 1.114-.502 2.454.84 3.477l.255.194c1.324 1.008 2.75.958 3.579-.13zm-.458-.35c-.577.758-1.544.786-2.696-.091l-.254-.194c-1.12-.854-1.407-1.797-.82-2.567.586-.77 1.613-.691 2.669.113l.254.194c1.152.878 1.453 1.75.847 2.546zM199.787 68.791c.625.74 1.704 1.137 2.578.398.562-.475.662-1.125.417-1.787.518.254 1.051.264 1.49-.108.685-.578.567-1.61-.006-2.288-.568-.672-1.564-.983-2.273-.384-.427.362-.551.885-.358 1.435-.558-.325-1.241-.365-1.828.13-.868.734-.624 1.89-.02 2.604zm2.631-2.192c-.377-.446-.435-1.047.024-1.434.452-.382 1.026-.26 1.408.192.383.452.384 1.049-.038 1.405-.464.392-1.002.302-1.394-.163zm-2.197 1.825c-.429-.507-.51-1.223.064-1.709.58-.49 1.267-.285 1.706.235.439.519.507 1.195-.067 1.68-.581.49-1.249.332-1.703-.206zm2.859 4.263c.909 1.076 2.286.97 3.556-.104l.245-.207c1.246-1.053 1.576-2.41.667-3.486-.903-1.07-2.287-1.02-3.576.069l-.245.206c-1.271 1.075-1.53 2.478-.647 3.522zm.44-.371c-.615-.728-.433-1.677.673-2.612l.245-.206c1.075-.91 2.058-.986 2.683-.246.624.739.326 1.724-.688 2.582l-.245.206c-1.106.935-2.023 1.04-2.668.276zM121.259 60.072c1.464 0 2.48-.88 2.48-2.536v-.424h-2.352v.576h1.672c-.024 1.016-.56 1.824-1.8 1.824-1.344 0-2.048-.928-2.048-2.344v-.064c0-1.4.752-2.36 2.064-2.36.832 0 1.456.352 1.616 1.264h.696c-.176-1.288-1.192-1.816-2.328-1.816-1.64 0-2.768 1.248-2.768 2.92v.064c0 1.672 1.008 2.896 2.768 2.896zm3.597-.072h.664v-2.296c0-1.032.536-1.296 1.376-1.336v-.624c-.752.024-1.112.352-1.376.824v-.752h-.664V60zm4.602.072c.944 0 1.64-.44 1.784-1.28h-.664c-.088.488-.464.728-1.112.728-.856 0-1.312-.528-1.344-1.48h3.152v-.216c0-1.496-.912-2.08-1.88-2.08-1.152 0-1.96.88-1.96 2.144v.064c0 1.288.84 2.12 2.024 2.12zm-1.312-2.568c.112-.744.568-1.208 1.248-1.208.688 0 1.136.344 1.2 1.208h-2.448zm5.859 2.568c.944 0 1.64-.44 1.784-1.28h-.664c-.088.488-.464.728-1.112.728-.856 0-1.312-.528-1.344-1.48h3.152v-.216c0-1.496-.912-2.08-1.88-2.08-1.152 0-1.96.88-1.96 2.144v.064c0 1.288.84 2.12 2.024 2.12zm-1.312-2.568c.112-.744.568-1.208 1.248-1.208.688 0 1.136.344 1.2 1.208h-2.448zM136.84 60h.664v-2.536c0-.752.552-1.144 1.168-1.144.672 0 .984.328.984 1.064V60h.664v-2.568c0-1.216-.608-1.688-1.472-1.688-.688 0-1.152.344-1.344.736v-.664h-.664V60zM204.843 128.705l2.047.549-.277 1.035c-.201.75-.573 1.147-1.322.946l-.031-.008c-.68-.182-.906-.698-.695-1.486l.278-1.036zm-2.757-1.459l-.18.672 2.403.644-.227.85-2.845 1.002-.201.75 2.904-1.036c-.057.797.228 1.527 1.14 1.771l.031.009c1.105.296 1.772-.461 2.055-1.52l.445-1.661-5.525-1.481zm-1.77 6.328c-.244.912.001 1.698.775 2.054l.172-.641c-.449-.211-.583-.637-.416-1.263.222-.826.85-1.13 1.778-.915l-.816 3.045.209.056c1.445.387 2.245-.343 2.495-1.278.298-1.113-.342-2.121-1.563-2.448l-.062-.017c-1.244-.333-2.265.263-2.572 1.407zm2.82-.603c.69.301 1.02.861.844 1.518-.178.665-.626 1.009-1.477.847l.633-2.365zm-3.521 3.499l-.172.641 3.5.938-.265.989.541.145.265-.989.727.195c.409.109.652.348.542.758a1.124 1.124 0 01-.181.399l.541.144c.079-.111.123-.215.179-.423.214-.796-.16-1.319-.979-1.538l-.657-.176.155-.58-.54-.145-.156.58-3.5-.938zm-.653 2.434l-.174.649 5.974 1.601.174-.649-5.974-1.601zm-1.038 3.597c-.244.912.001 1.698.775 2.055l.172-.642c-.449-.211-.583-.636-.416-1.262.222-.827.85-1.131 1.778-.915l-.816 3.044.209.056c1.445.387 2.245-.343 2.495-1.278.298-1.112-.342-2.121-1.563-2.448l-.062-.016c-1.244-.334-2.265.262-2.572 1.406zm2.82-.603c.69.301 1.02.862.844 1.519-.178.664-.626 1.008-1.477.846l.633-2.365zm-3.338 2.814l-.184.688 1.332 1.549-1.922.653-.203.757 2.52-.906 1.559 1.85.186-.695-1.205-1.375 1.733-.596.201-.749-2.325.826-1.692-2.002zm-1.77 6.607l-.507 1.893c-.296 1.105.015 1.95 1.059 2.23l.031.008c.718.193 1.208.001 1.617-.751.047.692.441 1.013.943 1.148l.031.008c1.09.292 1.631-.367 1.906-1.394l.445-1.662-5.525-1.48zm2.938 1.491l1.886.505-.265.989c-.207.773-.56 1.068-1.186.9l-.031-.008c-.68-.182-.89-.57-.673-1.381l.269-1.005zm-2.589-.694l2.064.553-.303 1.128c-.238.889-.664 1.181-1.344.999l-.031-.009c-.672-.18-.928-.646-.713-1.45l.327-1.221zm-1.629 3.979l-.174.649 5.974 1.6.174-.649-5.974-1.6zm-.961 3.311c-.174.649.038 1.186.367 1.473l-.642-.172-.171.641 4.041 1.083.172-.641-2.45-.656c-.726-.195-.96-.837-.807-1.409.17-.634.568-.85 1.279-.66l2.527.677.171-.641-2.557-.686c-1.113-.298-1.715.187-1.93.991zm-1.306 4.874c-.245.912 0 1.698.774 2.054l.172-.641c-.449-.211-.583-.637-.415-1.263.221-.827.849-1.13 1.777-.915l-.816 3.045.209.056c1.445.387 2.245-.343 2.496-1.278.298-1.113-.343-2.121-1.564-2.448l-.062-.017c-1.244-.333-2.265.263-2.571 1.407zm2.82-.603c.689.301 1.019.861.843 1.518-.178.665-.626 1.008-1.477.847l.634-2.365zM171.053 185.101l-.611.332 1.109 2.047-.816.442c-.956.519-1.533 1.368-.953 2.437l.015.028c.568 1.048 1.592 1.039 2.555.517l1.428-.774-2.727-5.029zm.761 2.864l1.087 2.004-.858.465c-.682.37-1.249.332-1.634-.378l-.015-.029c-.351-.647-.155-1.208.562-1.597l.858-.465zm-6.084-.059c-.591.32-.835.844-.817 1.28l-.316-.584-.584.317 1.995 3.678.583-.317-1.209-2.229c-.358-.661-.053-1.273.468-1.555.577-.313 1.007-.173 1.358.474l1.247 2.3.584-.317-1.262-2.328c-.55-1.012-1.315-1.116-2.047-.719zm-2.896 1.652l-.584.317 1.094 2.018c.492.907.147 1.395-.573 1.83l.298.549c.649-.38.809-.839.817-1.38l.358.661.584-.317-1.994-3.678zm-4.188 2.817c.717-.389 1.45-.213 1.961.729l.03.057c.511.942.235 1.674-.447 2.044-.619.336-1.384.15-1.888-.778l-.03-.057c-.484-.893-.358-1.599.374-1.995zm.849-2.663l-.583.316 1.022 1.885c-.41-.251-1.003-.321-1.608.007-1.012.549-1.254 1.681-.644 2.806l.031.057c.621 1.146 1.713 1.464 2.676.942.535-.29.859-.884.875-1.357l.336.618.584-.316-2.689-4.958zm-3.729 3.678l-.591.32 2.948 5.437.591-.321-2.948-5.436zm-3.325 1.721c-.83.45-1.232 1.168-.958 1.975l.584-.316c-.155-.471.061-.861.63-1.17.753-.408 1.405-.161 1.887.66l-2.771 1.503.103.19c.713 1.315 1.794 1.393 2.645.932 1.012-.549 1.303-1.708.701-2.819l-.031-.056c-.614-1.133-1.749-1.464-2.79-.899zm2.378 1.632c.256.707.076 1.333-.522 1.657-.604.328-1.162.239-1.63-.49l2.152-1.167zM104.844 194.969l-.621-.313-1.152 2.286-1.843-.929-.256.508 1.843.928-.91 1.808-2.365-1.191-.256.507 2.987 1.504 2.573-5.108zm-4.95-2.574c-.6-.303-1.17-.204-1.517.059l.299-.593-.593-.298-1.882 3.736.593.299 1.14-2.265c.339-.671 1.015-.769 1.544-.503.586.295.717.728.386 1.386l-1.177 2.336.593.299 1.191-2.365c.518-1.029.166-1.717-.577-2.091zm-3.01-1.436l-.593-.299-1.033 2.051c-.464.921-1.061.916-1.83.574l-.28.557c.682.317 1.151.186 1.6-.117l-.339.672.593.299 1.882-3.737zm-2.402-2.84l-.6-.303-4.602 3.997.607.306 2.386-2.157-.206 3.255.635.32.224-4.088 1.556-1.33zM67.194 166.733l-.14-.616-4.703-.306 4.122-2.261-.14-.625-5.908-.189.143.632 4.777.125-4.221 2.333.11.484 4.798.292-4.246 2.15.157.694 5.25-2.713zm-2.035-6.925c.13.569-.09.832-.511.927-.601.136-.94-.419-1.125-1.238l-.127-.562.507-.115c.632-.142 1.101.301 1.256.988zm.53-.055c-.136-.6-.422-.921-.873-1.139l.515-.117-.147-.647-2.692.609c-1.139.257-1.298 1.04-1.122 1.82.178.788.69 1.452 1.637 1.328l-.146-.648c-.514.051-.818-.209-.945-.77-.141-.625.075-.936.723-1.083l.296-.067.133.586c.236 1.045.782 1.972 1.726 1.758.835-.189 1.066-.873.895-1.63zm-.792-3.175l-.147-.648-2.24.507c-1.006.227-1.382-.237-1.606-1.048l-.609.138c.19.728.589 1.007 1.108 1.16l-.734.166.147.648 4.08-.923zm-.664-2.934l-.147-.648-2.496.565c-.734.166-1.216-.299-1.336-.83-.127-.561.1-.933.818-1.095l2.575-.583-.146-.647-2.497.565c-.734.165-1.216-.3-1.336-.83-.127-.562.1-.933.818-1.096l2.575-.582-.146-.648-2.529.572c-1.186.268-1.478 1.007-1.312 1.74.115.508.487 1.063 1.08 1.224-.498.334-.612.844-.494 1.367.132.585.545.959.97 1.06l-.624.141.146.648 4.081-.923zm-5.203-9.222l-2.067.468-.237-1.046c-.171-.757-.027-1.281.73-1.453l.03-.007c.688-.155 1.128.197 1.308.992l.236 1.046zm3.119.008l-.154-.679-2.426.549-.194-.858 2.05-2.211-.17-.757-2.088 2.268c-.321-.731-.913-1.245-1.834-1.036l-.03.007c-1.117.252-1.354 1.233-1.112 2.302l.379 1.677 5.579-1.262zm-1.38-6.424c-.207-.921-.79-1.503-1.641-1.458l.146.648c.496-.022.813.292.956.924.189.835-.226 1.396-1.147 1.637l-.696-3.074-.21.048c-1.46.33-1.828 1.348-1.614 2.292.254 1.124 1.29 1.718 2.523 1.439l.063-.014c1.256-.284 1.882-1.287 1.62-2.442zm-2.215 1.846c-.75.055-1.303-.287-1.453-.951-.152-.671.085-1.183.913-1.436l.54 2.387zm.688-6.097c.156.687-.21 1.352-1.24 1.585l-.063.014c-.99.224-1.67-.131-1.853-.942-.18-.796.198-1.407 1.244-1.643l.062-.014c1.046-.237 1.68.243 1.85 1zm.555-.051c-.134-.593-.638-1.078-1.089-1.222l.703-.159-.147-.648-6.032 1.365.147.647 2.606-.589c-.345.324-.577.819-.424 1.498.254 1.124 1.313 1.705 2.561 1.422l.063-.014c1.271-.288 1.853-1.231 1.612-2.3zm-1.764-7.8c-.283-1.248-1.116-1.995-2.448-1.899l.143.632c.937-.064 1.54.464 1.747 1.377.272 1.201-.424 2.113-1.844 2.435l-.063.014c-1.404.317-2.476-.252-2.737-1.407-.216-.952.11-1.542.929-1.875l-.152-.671c-1.183.39-1.577 1.513-1.314 2.676.342 1.513 1.787 2.351 3.441 1.977l.062-.014c1.717-.388 2.6-1.63 2.236-3.245zM70.376 93.38l.422-.554-4.55-3.467-.393.515-.041 1.639.515.392.044-1.576 4.003 3.05zm2.464-3.116c.718-.942.735-1.995-.092-2.625-.63-.48-1.267-.422-1.815.005.144-.544.07-1.082-.445-1.475-.63-.48-1.585-.413-2.245.452-.659.865-.518 1.908.177 2.488l.368-.484c-.472-.45-.524-1.094-.093-1.66.422-.553.961-.575 1.394-.245.496.378.578.852.127 1.444l-.243.318.465.354.262-.344c.49-.642 1.03-.733 1.616-.287.535.408.631.994.088 1.707-.548.719-1.209.728-1.788.367l-.388.51c.82.573 1.875.442 2.612-.525zm2.047-2.806l.432-.567-3.174-5.114-.076-.058-2.284 2.998.445.339 1.76-2.31 2.897 4.712zm3.783-4.846c.776-1.018.813-2.136-.115-3.096l-.393.516c.65.677.633 1.478.066 2.223-.747.98-1.893 1.032-3.05.15l-.052-.04c-1.145-.872-1.397-2.06-.68-3.001.592-.777 1.254-.906 2.035-.492l.417-.547c-1.06-.657-2.173-.238-2.895.71-.94 1.235-.656 2.88.693 3.908l.051.039c1.4 1.067 2.92.947 3.923-.37zM178.867 81.22c.765.904 1.789 1.148 2.583.477.605-.511.687-1.146.387-1.773.501.258 1.042.304 1.537-.115.605-.51.747-1.458.045-2.29-.703-.83-1.751-.918-2.467-.365l.392.464c.541-.363 1.181-.275 1.641.268.449.532.353 1.063-.062 1.414-.477.403-.957.38-1.438-.188l-.258-.306-.446.377.279.33c.522.617.493 1.165-.07 1.64-.513.434-1.106.401-1.684-.283-.584-.69-.45-1.338.028-1.826l-.413-.488c-.738.676-.838 1.734-.054 2.663zm2.646 3.018l.449.531 4.369-3.692-.418-.495-1.591-.394-.495.418 1.529.384-3.843 3.248zm2.062 2.44l.449.532 4.369-3.692-.418-.495-1.59-.395-.495.419 1.529.383-3.844 3.248zm3.02 3.685c.826.978 1.91 1.256 3.047.557l-.418-.495c-.802.489-1.581.299-2.185-.416-.795-.941-.598-2.071.514-3.011l.049-.042c1.1-.929 2.314-.918 3.078-.014.63.746.613 1.42.04 2.093l.444.525c.87-.892.702-2.07-.068-2.98-1.002-1.185-2.67-1.263-3.965-.168l-.049.041c-1.344 1.136-1.556 2.645-.487 3.91z",
+    fill: "#fff"
+  }));
+};
+
+var basic = _colorsData["default"].basic,
+    secondary = _colorsData["default"].secondary,
+    system = _colorsData["default"].system,
+    gradientColors = _colorsData["default"].gradientColors,
+    staticColors = _colorsData["default"].staticColors,
+    staticOpacity = _colorsData["default"].staticOpacity,
+    soft = _colorsData["default"].soft;
 var cn = (0, _uiHelpers.cnCreate)('colors');
 
 var Colors = function Colors() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn()
-  }, /*#__PURE__*/React.createElement(_Header["default"], null, "Colors"), /*#__PURE__*/React.createElement("div", {
-    className: cn('inner')
-  }, _colorsData["default"].map(function (_ref, i) {
-    var title = _ref.title,
-        items = _ref.items;
+  var renderUnderline = function renderUnderline() {
     return /*#__PURE__*/React.createElement("div", {
-      key: i + title,
-      className: cn('section')
+      className: cn('underline')
+    }, /*#__PURE__*/React.createElement("span", {
+      className: cn('pointer')
+    }));
+  };
+
+  var renderBasicColors = function renderBasicColors() {
+    var title = basic.title,
+        _basic$colorsGroup = basic.colorsGroup,
+        colorsGroup = _basic$colorsGroup === void 0 ? [] : _basic$colorsGroup;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('line')
     }, /*#__PURE__*/React.createElement(_Header["default"], {
-      as: "h3",
-      className: cn('title')
-    }, title), items.map(function (_ref2, index) {
-      var name = _ref2.name,
-          value = _ref2.value;
-      return /*#__PURE__*/React.createElement("div", {
-        key: index + name,
-        className: cn('item', {
-          border: value === '#FFFFFF'
-        })
+      as: "h2",
+      className: cn('group-title')
+    }, title), /*#__PURE__*/React.createElement(_Grid["default"], null, colorsGroup.map(function (_ref, index) {
+      var description = _ref.description,
+          colors = _ref.colors;
+      return /*#__PURE__*/React.createElement(_GridColumn["default"], {
+        key: description,
+        className: cn('basic-group'),
+        all: !index ? '3' : '9',
+        mobile: "12"
       }, /*#__PURE__*/React.createElement("div", {
-        className: cn('color'),
-        style: {
-          backgroundColor: "".concat(value)
-        }
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cn('text-box')
-      }, /*#__PURE__*/React.createElement(_Header["default"], {
-        as: "h5"
-      }, name), /*#__PURE__*/React.createElement(_Paragraph["default"], {
-        size: "small",
-        hasMargin: false,
-        className: cn('hex-code')
-      }, value)));
-    }));
-  })));
+        className: cn('list')
+      }, colors.map(function (_ref2) {
+        var name = _ref2.name,
+            code = _ref2.code,
+            _ref2$border = _ref2.border,
+            border = _ref2$border === void 0 ? '' : _ref2$border;
+        return /*#__PURE__*/React.createElement(_ColorItem["default"], {
+          className: cn('item'),
+          colorName: name,
+          colorCode: code,
+          key: name,
+          border: border
+        });
+      })), renderUnderline(), /*#__PURE__*/React.createElement("div", {
+        className: cn('description')
+      }, description));
+    })));
+  };
+
+  var renderColorBlock = function renderColorBlock(items) {
+    var _a, _b;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('line')
+    }, /*#__PURE__*/React.createElement(_Header["default"], {
+      as: "h2",
+      className: cn('group-title')
+    }, items.title), /*#__PURE__*/React.createElement("div", {
+      className: cn('list')
+    }, (_a = items.colorsList) === null || _a === void 0 ? void 0 : _a.colors.map(function (_ref3) {
+      var name = _ref3.name,
+          code = _ref3.code,
+          _ref3$gradient = _ref3.gradient,
+          gradient = _ref3$gradient === void 0 ? '' : _ref3$gradient,
+          _ref3$border = _ref3.border,
+          border = _ref3$border === void 0 ? '' : _ref3$border;
+      return /*#__PURE__*/React.createElement(_ColorItem["default"], {
+        className: cn('item'),
+        colorName: name,
+        colorCode: code,
+        gradient: gradient,
+        key: name,
+        border: border
+      });
+    })), renderUnderline(), /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, (_b = items.colorsList) === null || _b === void 0 ? void 0 : _b.description));
+  };
+
+  var renderSoftColors = function renderSoftColors() {
+    var _soft$colorsList = soft.colorsList;
+    _soft$colorsList = _soft$colorsList === void 0 ? {} : _soft$colorsList;
+    var _soft$colorsList$colo = _soft$colorsList.colors,
+        colors = _soft$colorsList$colo === void 0 ? [] : _soft$colorsList$colo,
+        description = _soft$colorsList.description;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('soft-list')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('list', {
+        soft: true
+      })
+    }, colors.map(function (_ref4) {
+      var name = _ref4.name,
+          code = _ref4.code,
+          _ref4$parentColor = _ref4.parentColor,
+          parentColor = _ref4$parentColor === void 0 ? '' : _ref4$parentColor;
+      return /*#__PURE__*/React.createElement(_ColorItem["default"], {
+        className: cn('item', {
+          soft: true
+        }),
+        colorName: name,
+        colorCode: code,
+        parentColorCode: parentColor,
+        key: name
+      });
+    })), /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, description));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(_Header["default"], {
+    as: "h1",
+    className: cn('title')
+  }, "\u0426\u0432\u0435\u0442\u0430"), /*#__PURE__*/React.createElement(_Paragraph["default"], null, "\u041F\u0430\u043B\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043E\u0432, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u0430\u044F \u0432 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0430\u0445 \u041C\u0435\u0433\u0430\u0424\u043E\u043D"), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('container')
+  }, renderBasicColors(), /*#__PURE__*/React.createElement(_Grid["default"], {
+    hAlign: "between"
+  }, /*#__PURE__*/React.createElement(_GridColumn["default"], {
+    all: "6",
+    mobile: "12",
+    tablet: "12"
+  }, renderColorBlock(secondary)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
+    all: "5",
+    mobile: "12",
+    tablet: "12"
+  }, renderColorBlock(system))), /*#__PURE__*/React.createElement(_Grid["default"], null, /*#__PURE__*/React.createElement(_GridColumn["default"], {
+    all: "5",
+    mobile: "12",
+    tablet: "12"
+  }, renderColorBlock(gradientColors)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
+    all: "3",
+    leftOffsetWide: "1",
+    leftOffsetTablet: "1",
+    leftOffsetDesktop: "1",
+    mobile: "12",
+    tablet: "12"
+  }, renderColorBlock(staticColors))), /*#__PURE__*/React.createElement("div", null, renderColorBlock(staticOpacity))), /*#__PURE__*/React.createElement(_Tile["default"], {
+    className: cn('soft'),
+    radius: "rounded"
+  }, /*#__PURE__*/React.createElement(_Header["default"], {
+    as: "h2",
+    className: cn('group-title')
+  }, "Soft"), /*#__PURE__*/React.createElement("div", {
+    className: cn('group')
+  }, /*#__PURE__*/React.createElement(Diagram, {
+    className: cn('diagram')
+  }), renderSoftColors()))));
 };
 
 var _default = Colors;