@tradeshift/elements.button - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

lib/button.umd.js

@@ -38,4 +38,191 @@ (function (global, factory) {
 
-  var css = "/* General........................................................ */\n\n:host > button {\n\t\tposition: relative;\n\t\tmin-width: calc(2 * 20px);\n\t\tmin-width: var(--ts-unit-double);\n\t\tmargin-right: calc(0.25 * 20px);\n\t\tmargin-right: var(--ts-unit-quarter);\n\t\tborder: 1px solid rgb(203, 215, 220);\n\t\tborder: var(--ts-border);\n\t\tborder-radius: calc(2 * 20px);\n\t\tborder-radius: var(--ts-unit-double)\n\t}\n\n:host > button:before {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tborder: 1px solid rgb(203, 215, 220);\n\t\t\tborder: var(--ts-border);\n\t\t\tborder-radius: calc(2 * 20px);\n\t\t\tborder-radius: var(--ts-unit-double);\n\t\t}\n\n:host > button:hover {\n\t\t\tcursor: pointer;\n\t\t\tbackground: rgb(230, 236, 239);\n\t\t\tbackground: var(--ts-color-gray-lighter);\n\t\t}\n\n:host > button:focus:before {\n\t\t\tdisplay: block;\n\t\t\tcontent: '';\n\t\t\tborder-color: rgb(0, 174, 255);\n\t\t\tborder-color: var(--ts-color-blue);\n\t\t}\n\n:host span {\n\t\tdisplay: block;\n\t\tpadding: calc(0.5 * 20px) 20px;\n\t\tpadding: var(--ts-unit-half) var(--ts-unit);\n\t\tfont-weight: 600;\n\t\tfont-weight: var(--ts-fontweight-semibold);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.02em;\n\t\t-webkit-font-smoothing: antialiased;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t}\n\n/* Primary type................................................... */\n\n:host([type='primary']) > button {\n\t\tbackground: rgb(0, 174, 255);\n\t\tbackground: var(--ts-color-blue);\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t\tborder-color: rgb(0, 174, 255);\n\t\tborder-color: var(--ts-color-blue)\n\t}\n\n:host([type='primary']) > button > ts-icon {\n\t\t\tfill: rgb(255, 255, 255);\n\t\t\tfill: var(--ts-color-white);\n\t\t}\n\n:host([type='primary']) > button:hover {\n\t\t\tbackground: rgb(0, 133, 204);\n\t\t\tbackground: var(--ts-color-blue-dark);\n\t\t}\n\n:host([type='primary']) > button:focus:before {\n\t\t\tcontent: '';\n\t\t\tborder-color: rgb(0, 101, 163);\n\t\t\tborder-color: var(--ts-color-blue-darker);\n\t\t}\n\n/* Text type...................................................... */\n\n:host([type='text']) > button {\n\t\tbackground: transparent;\n\t\tborder: 0;\n\t\tborder-radius: 0;\n\t\tpadding: 0\n\t}\n\n:host([type='text']) > button:hover {\n\t\t\tbackground: transparent\n\t\t}\n\n:host([type='text']) > button:hover span {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n:host([type='text']) > button:focus:before {\n\t\t\tcontent: '';\n\t\t\tborder-color: transparent;\n\t\t}\n\n:host([type='text']) span {\n\t\tcolor: rgb(0, 174, 255);\n\t\tcolor: var(--ts-color-blue);\n\t\tpadding: 0;\n\t\tfont-weight: 400;\n\t\tfont-weight: var(--ts-fontweight);\n\t\ttext-transform: none;\n\t\tletter-spacing: normal;\n\t}\n\n/* Micro size......................................................*/\n\n:host([size='micro']) > button {\n\t\tborder-radius: 20px;\n\t\tborder-radius: var(--ts-unit);\n\t\tpadding: 0 calc(0.5 * 20px);\n\t\tpadding: 0 var(--ts-unit-half);\n\t}\n\n:host([size='micro']) span {\n\t\tpadding: calc(0.125 * 20px);\n\t\tpadding: var(--ts-unit-eighth);\n\t\tfont-size: 11px;\n\t\tfont-size: var(--ts-fontsize-small);\n\t}\n\n/* Inside a ButtonGroup ...........................................*/\n\n:host([grouped]) {\n\tdisplay: block;\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\ttext-align: center\n}\n\n:host([grouped]) > button {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n\n/* Button with an icon ............................................*/\n\n:host([icon]) > button {\n\t\twidth: calc(2 * 20px);\n\t\twidth: var(--ts-unit-double);\n\t\theight: calc(2 * 20px);\n\t\theight: var(--ts-unit-double);\n\t\tmargin: 0 auto;\n\t}\n\n/* Disable status .................................................*/\n\n:host([disabled]) {\n\tcursor: not-allowed\n}\n\n:host([disabled]) > button {\n\t\tpointer-events: none;\n\t\tbackground-color: rgb(230, 236, 239);\n\t\tbackground-color: var(--ts-disabled-background-color);\n\t\tborder: rgb(203, 215, 220);\n\t\tborder: var(--ts-disabled-border-color);\n\t}\n\n:host([disabled]) span {\n\t\tcolor: rgb(130, 159, 171);\n\t\tcolor: var(--ts-disabled-color);\n\t}\n\n:host([disabled][type='text']) > button {\n\t\tbackground-color: transparent;\n\t}\n\n/* Busy status ....................................................*/\n\n:host([busy]) > :first-child {\n\t\tpointer-events: none;\n\t\tcursor: default;\n\t\tborder: transparent;\n\t\tbackground-size: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-size: var(--ts-unit-double) var(--ts-unit-double);\n\t\tbackground-image: linear-gradient(\n\t\t\t-45deg,\n\t\t\trgb(203, 215, 220) 25%,\n\t\t\trgb(239, 243, 245) 25%,\n\t\t\trgb(239, 243, 245) 50%,\n\t\t\trgb(203, 215, 220) 50%,\n\t\t\trgb(203, 215, 220) 75%,\n\t\t\trgb(239, 243, 245) 75%,\n\t\t\trgb(239, 243, 245));\n\t\tbackground-image: linear-gradient(\n\t\t\t-45deg,\n\t\t\tvar(--ts-color-gray-light) 25%,\n\t\t\tvar(--ts-color-gray-lightest) 25%,\n\t\t\tvar(--ts-color-gray-lightest) 50%,\n\t\t\tvar(--ts-color-gray-light) 50%,\n\t\t\tvar(--ts-color-gray-light) 75%,\n\t\t\tvar(--ts-color-gray-lightest) 75%,\n\t\t\tvar(--ts-color-gray-lightest)\n\t\t);\n\t\t-webkit-animation: move 1s linear infinite;\n\t\t        animation: move 1s linear infinite\n\t}\n\n:host([busy]) > :first-child > * {\n\t\t\tvisibility: hidden;\n\t\t}\n\n@-webkit-keyframes move {\n\t0% {\n\t\tbackground-position: 0 0;\n\t}\n\t100% {\n\t\tbackground-position: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-position: var(--ts-unit-double) var(--ts-unit-double);\n\t}\n}\n\n@keyframes move {\n\t0% {\n\t\tbackground-position: 0 0;\n\t}\n\t100% {\n\t\tbackground-position: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-position: var(--ts-unit-double) var(--ts-unit-double);\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,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YnV0dG9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIEdlbmVyYWwuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuXG46aG9zdCB7XG5cdCYgPiBidXR0b24ge1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRtaW4td2lkdGg6IHZhcigtLXRzLXVuaXQtZG91YmxlKTtcblx0XHRtYXJnaW4tcmlnaHQ6IHZhcigtLXRzLXVuaXQtcXVhcnRlcik7XG5cdFx0Ym9yZGVyOiB2YXIoLS10cy1ib3JkZXIpO1xuXHRcdGJvcmRlci1yYWRpdXM6IHZhcigtLXRzLXVuaXQtZG91YmxlKTtcblx0XHQmOmJlZm9yZSB7XG5cdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHR0b3A6IDA7XG5cdFx0XHRyaWdodDogMDtcblx0XHRcdGJvdHRvbTogMDtcblx0XHRcdGxlZnQ6IDA7XG5cdFx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlcik7XG5cdFx0XHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy11bml0LWRvdWJsZSk7XG5cdFx0fVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHRiYWNrZ3JvdW5kOiB2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXIpO1xuXHRcdH1cblxuXHRcdCY6Zm9jdXM6YmVmb3JlIHtcblx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdFx0Y29udGVudDogJyc7XG5cdFx0XHRib3JkZXItY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxuXG5cdCYgc3BhbiB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0cGFkZGluZzogdmFyKC0tdHMtdW5pdC1oYWxmKSB2YXIoLS10cy11bml0KTtcblx0XHRmb250LXdlaWdodDogdmFyKC0tdHMtZm9udHdlaWdodC1zZW1pYm9sZCk7XG5cdFx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0XHRsZXR0ZXItc3BhY2luZzogMC4wMmVtO1xuXHRcdC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuXHRcdC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG5cdH1cbn1cblxuLyogUHJpbWFyeSB0eXBlLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG5cbjpob3N0KFt0eXBlPSdwcmltYXJ5J10pIHtcblx0JiA+IGJ1dHRvbiB7XG5cdFx0YmFja2dyb3VuZDogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0XHRib3JkZXItY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXG5cdFx0JiA+IHRzLWljb24ge1xuXHRcdFx0ZmlsbDogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHRcdH1cblxuXHRcdCY6aG92ZXIge1xuXHRcdFx0YmFja2dyb3VuZDogdmFyKC0tdHMtY29sb3ItYmx1ZS1kYXJrKTtcblx0XHR9XG5cblx0XHQmOmZvY3VzOmJlZm9yZSB7XG5cdFx0XHRjb250ZW50OiAnJztcblx0XHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZS1kYXJrZXIpO1xuXHRcdH1cblx0fVxufVxuXG4vKiBUZXh0IHR5cGUuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3QoW3R5cGU9J3RleHQnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3JkZXI6IDA7XG5cdFx0Ym9yZGVyLXJhZGl1czogMDtcblx0XHRwYWRkaW5nOiAwO1xuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRcdCYgc3BhbiB7XG5cdFx0XHRcdHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdCY6Zm9jdXM6YmVmb3JlIHtcblx0XHRcdGNvbnRlbnQ6ICcnO1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cdH1cblxuXHQmIHNwYW4ge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcblx0XHRwYWRkaW5nOiAwO1xuXHRcdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0KTtcblx0XHR0ZXh0LXRyYW5zZm9ybTogbm9uZTtcblx0XHRsZXR0ZXItc3BhY2luZzogbm9ybWFsO1xuXHR9XG59XG5cbi8qIE1pY3JvIHNpemUuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4qL1xuXG46aG9zdChbc2l6ZT0nbWljcm8nXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy11bml0KTtcblx0XHRwYWRkaW5nOiAwIHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdH1cblxuXHQmIHNwYW4ge1xuXHRcdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtZWlnaHRoKTtcblx0XHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLXNtYWxsKTtcblx0fVxufVxuXG4vKiBJbnNpZGUgYSBCdXR0b25Hcm91cCAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uKi9cblxuOmhvc3QoW2dyb3VwZWRdKSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiB2YXIoLS10cy11bml0LWhhbGYpO1xuXHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cblx0JiA+IGJ1dHRvbiB7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cbn1cblxuLyogQnV0dG9uIHdpdGggYW4gaWNvbiAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiovXG5cbjpob3N0KFtpY29uXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHR3aWR0aDogdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHRcdGhlaWdodDogdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHRcdG1hcmdpbjogMCBhdXRvO1xuXHR9XG59XG5cbi8qIERpc2FibGUgc3RhdHVzIC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4qL1xuXG46aG9zdChbZGlzYWJsZWRdKSB7XG5cdGN1cnNvcjogbm90LWFsbG93ZWQ7XG5cdCYgPiBidXR0b24ge1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWRpc2FibGVkLWJhY2tncm91bmQtY29sb3IpO1xuXHRcdGJvcmRlcjogdmFyKC0tdHMtZGlzYWJsZWQtYm9yZGVyLWNvbG9yKTtcblx0fVxuXG5cdCYgc3BhbiB7XG5cdFx0Y29sb3I6IHZhcigtLXRzLWRpc2FibGVkLWNvbG9yKTtcblx0fVxufVxuXG46aG9zdChbZGlzYWJsZWRdW3R5cGU9J3RleHQnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0fVxufVxuXG4vKiBCdXN5IHN0YXR1cyAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uKi9cblxuOmhvc3QoW2J1c3ldKSB7XG5cdCYgPiA6Zmlyc3QtY2hpbGQge1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdGN1cnNvcjogZGVmYXVsdDtcblx0XHRib3JkZXI6IHRyYW5zcGFyZW50O1xuXHRcdGJhY2tncm91bmQtc2l6ZTogdmFyKC0tdHMtdW5pdC1kb3VibGUpIHZhcigtLXRzLXVuaXQtZG91YmxlKTtcblx0XHRiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG5cdFx0XHQtNDVkZWcsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0KSAyNSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KSAyNSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KSA1MCUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0KSA1MCUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0KSA3NSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KSA3NSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KVxuXHRcdCk7XG5cdFx0YW5pbWF0aW9uOiBtb3ZlIDFzIGxpbmVhciBpbmZpbml0ZTtcblxuXHRcdCYgPiAqIHtcblx0XHRcdHZpc2liaWxpdHk6IGhpZGRlbjtcblx0XHR9XG5cdH1cbn1cblxuQGtleWZyYW1lcyBtb3ZlIHtcblx0MCUge1xuXHRcdGJhY2tncm91bmQtcG9zaXRpb246IDAgMDtcblx0fVxuXHQxMDAlIHtcblx0XHRiYWNrZ3JvdW5kLXBvc2l0aW9uOiB2YXIoLS10cy11bml0LWRvdWJsZSkgdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHR9XG59XG4iXX0= */";
+  (function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('@tradeshift/elements')) : typeof define === 'function' && define.amd ? define(['@tradeshift/elements'], factory) : (global = global || self, factory(global.ts.elements));
+  })(undefined, function (elements) {
 
+    function _defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      return Constructor;
+    }
+
+    function _extends() {
+      _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+
+        return target;
+      };
+
+      return _extends.apply(this, arguments);
+    }
+
+    function _inheritsLoose(subClass, superClass) {
+      subClass.prototype = Object.create(superClass.prototype);
+      subClass.prototype.constructor = subClass;
+      subClass.__proto__ = superClass;
+    }
+
+    function _taggedTemplateLiteralLoose(strings, raw) {
+      if (!raw) {
+        raw = strings.slice(0);
+      }
+
+      strings.raw = raw;
+      return strings;
+    }
+
+    var css = ":host {\n\tdisplay: inline-block\n}\n\n:host svg {\n\t\tfill: var(--ts-icon-color);\n\t}\n\n.fill-none {\n\tfill: none;\n}\n\n:host([size='small']) {\n\twidth: 12px;\n\twidth: var(--ts-fontsize-mini);\n\theight: 12px;\n\theight: var(--ts-fontsize-mini);\n}\n\n:host([size='medium']) .icon-wrapper {\n\twidth: 16px;\n\twidth: var(--ts-fontsize-medium);\n\theight: 16px;\n\theight: var(--ts-fontsize-medium);\n}\n\n:host([size='large']) .icon-wrapper {\n\twidth: 24px;\n\twidth: var(--ts-fontsize-xbig);\n\theight: 24px;\n\theight: var(--ts-fontsize-xbig);\n}\n\n.icon-wrapper {\n\tposition: relative;\n\tdisplay: block;\n\tpadding-top: 100%;\n\twidth: 100%;\n\theight: 0;\n}\n\nsvg {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* These are fallback for icon colors based on type for IE11 */\n/* The automatically generated style in js file doesn't work in IE11 */\n/* I also tried to add these following generated styles from there as string to here which didn't work */\n/* It's also related to this issue in the polyfill limitation */\n/* https://github.com/Tradeshift/elements/wiki/Polyfill-Limitations */\nsvg,\n[type='default'] svg {\n\tfill: rgb(31, 42, 46);\n\tfill: var(--ts-color-slate);\n\tstroke: rgb(31, 42, 46);\n\tstroke: var(--ts-color-slate);\n\tcolor: rgb(31, 42, 46);\n\tcolor: var(--ts-color-slate);\n}\n\n[type='inverted'] svg {\n\tfill: rgb(255, 255, 255);\n\tfill: var(--ts-color-white);\n\tstroke: rgb(255, 255, 255);\n\tstroke: var(--ts-color-white);\n\tcolor: rgb(255, 255, 255);\n\tcolor: var(--ts-color-white);\n}\n\n[type='primary'] svg {\n\tfill: rgb(0, 174, 255);\n\tfill: var(--ts-color-blue);\n\tstroke: rgb(0, 174, 255);\n\tstroke: var(--ts-color-blue);\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n[type='danger'] svg {\n\tfill: rgb(189, 0, 0);\n\tfill: var(--ts-color-red);\n\tstroke: rgb(189, 0, 0);\n\tstroke: var(--ts-color-red);\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n[type='error'] svg {\n\tfill: rgb(189, 0, 0);\n\tfill: var(--ts-color-red);\n\tstroke: rgb(189, 0, 0);\n\tstroke: var(--ts-color-red);\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n[type='success'] svg {\n\tfill: rgb(80, 198, 16);\n\tfill: var(--ts-color-green);\n\tstroke: rgb(80, 198, 16);\n\tstroke: var(--ts-color-green);\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n[type='active'] svg {\n\tfill: rgb(0, 174, 255);\n\tfill: var(--ts-color-blue);\n\tstroke: rgb(0, 174, 255);\n\tstroke: var(--ts-color-blue);\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n[type='info'] svg {\n\tfill: rgb(0, 174, 255);\n\tfill: var(--ts-color-blue);\n\tstroke: rgb(0, 174, 255);\n\tstroke: var(--ts-color-blue);\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n[type='focus'] svg {\n\tfill: rgb(0, 174, 255);\n\tfill: var(--ts-color-blue);\n\tstroke: rgb(0, 174, 255);\n\tstroke: var(--ts-color-blue);\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n[type='warning'] svg {\n\tfill: rgb(31, 42, 46);\n\tfill: var(--ts-color-slate);\n\tstroke: rgb(31, 42, 46);\n\tstroke: var(--ts-color-slate);\n\tcolor: rgb(31, 42, 46);\n\tcolor: var(--ts-color-slate);\n}\n\n[type='disabled'] svg {\n\tfill: rgb(230, 236, 239);\n\tfill: var(--ts-color-gray-lighter);\n\tstroke: rgb(230, 236, 239);\n\tstroke: var(--ts-color-gray-lighter);\n\tcolor: rgb(230, 236, 239);\n\tcolor: var(--ts-color-gray-lighter);\n}\n\n[type='suggested'] svg {\n\tfill: rgb(144, 18, 155);\n\tfill: var(--ts-color-purple);\n\tstroke: rgb(144, 18, 155);\n\tstroke: var(--ts-color-purple);\n\tcolor: rgb(144, 18, 155);\n\tcolor: var(--ts-color-purple);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImljb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0NBQ0M7QUFJRDs7QUFIQztFQUNDLDBCQUEwQjtDQUMzQjs7QUFHRDtDQUNDLFVBQVU7QUFDWDs7QUFFQTtDQUNDLFdBQThCO0NBQTlCLDhCQUE4QjtDQUM5QixZQUErQjtDQUEvQiwrQkFBK0I7QUFDaEM7O0FBRUE7Q0FDQyxXQUFnQztDQUFoQyxnQ0FBZ0M7Q0FDaEMsWUFBaUM7Q0FBakMsaUNBQWlDO0FBQ2xDOztBQUVBO0NBQ0MsV0FBOEI7Q0FBOUIsOEJBQThCO0NBQzlCLFlBQStCO0NBQS9CLCtCQUErQjtBQUNoQzs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixjQUFjO0NBQ2QsaUJBQWlCO0NBQ2pCLFdBQVc7Q0FDWCxTQUFTO0FBQ1Y7O0FBRUE7Q0FDQyxrQkFBa0I7Q0FDbEIsTUFBTTtDQUNOLE9BQU87Q0FDUCxXQUFXO0NBQ1gsWUFBWTtBQUNiOztBQUVBLDhEQUE4RDtBQUM5RCxzRUFBc0U7QUFDdEUsd0dBQXdHO0FBQ3hHLCtEQUErRDtBQUMvRCxxRUFBcUU7QUFDckU7O0NBRUMscUJBQTJCO0NBQTNCLDJCQUEyQjtDQUMzQix1QkFBNkI7Q0FBN0IsNkJBQTZCO0NBQzdCLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx3QkFBMkI7Q0FBM0IsMkJBQTJCO0NBQzNCLDBCQUE2QjtDQUE3Qiw2QkFBNkI7Q0FDN0IseUJBQTRCO0NBQTVCLDRCQUE0QjtBQUM3Qjs7QUFFQTtDQUNDLHNCQUEwQjtDQUExQiwwQkFBMEI7Q0FDMUIsd0JBQTRCO0NBQTVCLDRCQUE0QjtDQUM1Qix1QkFBMkI7Q0FBM0IsMkJBQTJCO0FBQzVCOztBQUVBO0NBQ0Msb0JBQXlCO0NBQXpCLHlCQUF5QjtDQUN6QixzQkFBMkI7Q0FBM0IsMkJBQTJCO0NBQzNCLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7Q0FDQyxvQkFBeUI7Q0FBekIseUJBQXlCO0NBQ3pCLHNCQUEyQjtDQUEzQiwyQkFBMkI7Q0FDM0IscUJBQTBCO0NBQTFCLDBCQUEwQjtBQUMzQjs7QUFFQTtDQUNDLHNCQUEyQjtDQUEzQiwyQkFBMkI7Q0FDM0Isd0JBQTZCO0NBQTdCLDZCQUE2QjtDQUM3Qix1QkFBNEI7Q0FBNUIsNEJBQTRCO0FBQzdCOztBQUVBO0NBQ0Msc0JBQTBCO0NBQTFCLDBCQUEwQjtDQUMxQix3QkFBNEI7Q0FBNUIsNEJBQTRCO0NBQzVCLHVCQUEyQjtDQUEzQiwyQkFBMkI7QUFDNUI7O0FBRUE7Q0FDQyxzQkFBMEI7Q0FBMUIsMEJBQTBCO0NBQzFCLHdCQUE0QjtDQUE1Qiw0QkFBNEI7Q0FDNUIsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHNCQUEwQjtDQUExQiwwQkFBMEI7Q0FDMUIsd0JBQTRCO0NBQTVCLDRCQUE0QjtDQUM1Qix1QkFBMkI7Q0FBM0IsMkJBQTJCO0FBQzVCOztBQUVBO0NBQ0MscUJBQTJCO0NBQTNCLDJCQUEyQjtDQUMzQix1QkFBNkI7Q0FBN0IsNkJBQTZCO0NBQzdCLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx3QkFBa0M7Q0FBbEMsa0NBQWtDO0NBQ2xDLDBCQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMseUJBQW1DO0NBQW5DLG1DQUFtQztBQUNwQzs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7Q0FDNUIseUJBQThCO0NBQTlCLDhCQUE4QjtDQUM5Qix3QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCIiwiZmlsZSI6Imljb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOmhvc3Qge1xuXHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdCYgc3ZnIHtcblx0XHRmaWxsOiB2YXIoLS10cy1pY29uLWNvbG9yKTtcblx0fVxufVxuXG4uZmlsbC1ub25lIHtcblx0ZmlsbDogbm9uZTtcbn1cblxuOmhvc3QoW3NpemU9J3NtYWxsJ10pIHtcblx0d2lkdGg6IHZhcigtLXRzLWZvbnRzaXplLW1pbmkpO1xuXHRoZWlnaHQ6IHZhcigtLXRzLWZvbnRzaXplLW1pbmkpO1xufVxuXG46aG9zdChbc2l6ZT0nbWVkaXVtJ10pIC5pY29uLXdyYXBwZXIge1xuXHR3aWR0aDogdmFyKC0tdHMtZm9udHNpemUtbWVkaXVtKTtcblx0aGVpZ2h0OiB2YXIoLS10cy1mb250c2l6ZS1tZWRpdW0pO1xufVxuXG46aG9zdChbc2l6ZT0nbGFyZ2UnXSkgLmljb24td3JhcHBlciB7XG5cdHdpZHRoOiB2YXIoLS10cy1mb250c2l6ZS14YmlnKTtcblx0aGVpZ2h0OiB2YXIoLS10cy1mb250c2l6ZS14YmlnKTtcbn1cblxuLmljb24td3JhcHBlciB7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBhZGRpbmctdG9wOiAxMDAlO1xuXHR3aWR0aDogMTAwJTtcblx0aGVpZ2h0OiAwO1xufVxuXG5zdmcge1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbn1cblxuLyogVGhlc2UgYXJlIGZhbGxiYWNrIGZvciBpY29uIGNvbG9ycyBiYXNlZCBvbiB0eXBlIGZvciBJRTExICovXG4vKiBUaGUgYXV0b21hdGljYWxseSBnZW5lcmF0ZWQgc3R5bGUgaW4ganMgZmlsZSBkb2Vzbid0IHdvcmsgaW4gSUUxMSAqL1xuLyogSSBhbHNvIHRyaWVkIHRvIGFkZCB0aGVzZSBmb2xsb3dpbmcgZ2VuZXJhdGVkIHN0eWxlcyBmcm9tIHRoZXJlIGFzIHN0cmluZyB0byBoZXJlIHdoaWNoIGRpZG4ndCB3b3JrICovXG4vKiBJdCdzIGFsc28gcmVsYXRlZCB0byB0aGlzIGlzc3VlIGluIHRoZSBwb2x5ZmlsbCBsaW1pdGF0aW9uICovXG4vKiBodHRwczovL2dpdGh1Yi5jb20vVHJhZGVzaGlmdC9lbGVtZW50cy93aWtpL1BvbHlmaWxsLUxpbWl0YXRpb25zICovXG5zdmcsXG5bdHlwZT0nZGVmYXVsdCddIHN2ZyB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXNsYXRlKTtcblx0c3Ryb2tlOiB2YXIoLS10cy1jb2xvci1zbGF0ZSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZSk7XG59XG5cblt0eXBlPSdpbnZlcnRlZCddIHN2ZyB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0c3Ryb2tlOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG59XG5cblt0eXBlPSdwcmltYXJ5J10gc3ZnIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdHN0cm9rZTogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuW3R5cGU9J2RhbmdlciddIHN2ZyB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXJlZCk7XG5cdHN0cm9rZTogdmFyKC0tdHMtY29sb3ItcmVkKTtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLXJlZCk7XG59XG5cblt0eXBlPSdlcnJvciddIHN2ZyB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXJlZCk7XG5cdHN0cm9rZTogdmFyKC0tdHMtY29sb3ItcmVkKTtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLXJlZCk7XG59XG5cblt0eXBlPSdzdWNjZXNzJ10gc3ZnIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItZ3JlZW4pO1xuXHRzdHJva2U6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cblxuW3R5cGU9J2FjdGl2ZSddIHN2ZyB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRzdHJva2U6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRjb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG59XG5cblt0eXBlPSdpbmZvJ10gc3ZnIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdHN0cm9rZTogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuW3R5cGU9J2ZvY3VzJ10gc3ZnIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdHN0cm9rZTogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuW3R5cGU9J3dhcm5pbmcnXSBzdmcge1xuXHRmaWxsOiB2YXIoLS10cy1jb2xvci1zbGF0ZSk7XG5cdHN0cm9rZTogdmFyKC0tdHMtY29sb3Itc2xhdGUpO1xuXHRjb2xvcjogdmFyKC0tdHMtY29sb3Itc2xhdGUpO1xufVxuXG5bdHlwZT0nZGlzYWJsZWQnXSBzdmcge1xuXHRmaWxsOiB2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXIpO1xuXHRzdHJva2U6IHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHRlcik7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXIpO1xufVxuXG5bdHlwZT0nc3VnZ2VzdGVkJ10gc3ZnIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItcHVycGxlKTtcblx0c3Ryb2tlOiB2YXIoLS10cy1jb2xvci1wdXJwbGUpO1xuXHRjb2xvcjogdmFyKC0tdHMtY29sb3ItcHVycGxlKTtcbn1cbiJdfQ== */";
+    var remove = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n\t<g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\">\n\t\t<g id=\"card/5.-File-card/standard\" transform=\"translate(-262.000000, -22.000000)\">\n\t\t\t<g id=\"5.-File-card\">\n\t\t\t\t<g id=\"icon/UI-library/clear\" transform=\"translate(258.000000, 18.000000)\">\n\t\t\t\t\t<path d=\"M4,12 C4,7.581722 7.59071231,4 12,4 C16.418278,4 20,7.59071231 20,12 C20,16.418278 16.4092877,20 12,20 C7.581722,20 4,16.4092877 4,12 Z M12,13.1313708 L15.0343146,16.1656854 L16.1656854,15.0343146 L13.1313708,12 L16.1656854,8.96568542 L15.0343146,7.83431458 L12,10.8686292 L8.96568542,7.83431458 L7.83431458,8.96568542 L10.8686292,12 L7.83431458,15.0343146 L8.96568542,16.1656854 L12,13.1313708 Z\" id=\"Icon\"></path>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</g>\n\t</g>\n</svg>\n";
+    var download = "<svg\n\tclass=\"fill-a\"\n\twidth=\"15px\"\n\theight=\"16px\"\n\tviewBox=\"0 0 15 16\"\n\tversion=\"1.1\"\n\txmlns=\"http://www.w3.org/2000/svg\"\n\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n\t<g id=\"Components\" stroke=\"none\" stroke-width=\"1\">\n\t\t<g id=\"New-Specs\" transform=\"translate(-1002.000000, -1137.000000)\">\n\t\t\t<g id=\"Group-5-Copy-6\" transform=\"translate(739.000000, 1085.000000)\">\n\t\t\t\t<g id=\"card/5.-File-card/normal\" transform=\"translate(0.000000, 30.000000)\">\n\t\t\t\t\t<g id=\"5.-File-card\">\n\t\t\t\t\t\t<g id=\"icon/UI-library/download\" transform=\"translate(258.000000, 18.000000)\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12.1590909,17.3636364 C11.9999992,17.3636364 11.8553726,17.2840917 11.7252066,17.125 L7.34297521,11.571281 C7.25619791,11.4555779 7.21280992,11.3615706 7.21280992,11.2892562 C7.21280992,11.1012387 7.35020524,11.0072314 7.625,11.0072314 L10.7272727,11.0072314 L10.7272727,4 L13.5909091,4 L13.5909091,11.0072314 L16.6931818,11.0072314 C16.9679766,11.0072314 17.1053719,11.1012387 17.1053719,11.2892562 C17.1053719,11.3615706 17.0619839,11.4555779 16.9752066,11.571281 L12.5929752,17.125 C12.4772721,17.2840917 12.3326455,17.3636364 12.1590909,17.3636364 Z M18.8409091,17.8409091 C18.971075,17.8409091 19.0831607,17.8879128 19.1771694,17.9819215 C19.2711782,18.0759302 19.3181818,18.1880159 19.3181818,18.3181818 L19.3181818,19.2727273 C19.3181818,19.4028932 19.2711782,19.5149789 19.1771694,19.6089876 C19.0831607,19.7029963 18.971075,19.75 18.8409091,19.75 L5.47727273,19.75 C5.34710679,19.75 5.23502113,19.7029963 5.1410124,19.6089876 C5.04700366,19.5149789 5,19.4028932 5,19.2727273 L5,18.3181818 C5,18.1880159 5.04700366,18.0759302 5.1410124,17.9819215 C5.23502113,17.8879128 5.34710679,17.8409091 5.47727273,17.8409091 L18.8409091,17.8409091 Z\"\n\t\t\t\t\t\t\t\tid=\"Icon\"\n\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</g>\n\t</g>\n</svg>\n";
+    var info = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 26 26\" version=\"1.1\">\n\t<g id=\"icon/info\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n\t\t<path fill=\"currentcolor\" class=\"fill-a\" d=\"M 13 1.1875 C 6.476563 1.1875 1.1875 6.476563 1.1875 13 C 1.1875 19.523438 6.476563 24.8125 13 24.8125 C 19.523438 24.8125 24.8125 19.523438 24.8125 13 C 24.8125 6.476563 19.523438 1.1875 13 1.1875 Z M 15.460938 19.496094 C 14.851563 19.734375 14.367188 19.917969 14.003906 20.042969 C 13.640625 20.167969 13.222656 20.230469 12.742188 20.230469 C 12.007813 20.230469 11.433594 20.050781 11.023438 19.691406 C 10.617188 19.335938 10.414063 18.878906 10.414063 18.324219 C 10.414063 18.109375 10.429688 17.890625 10.460938 17.667969 C 10.488281 17.441406 10.539063 17.191406 10.605469 16.90625 L 11.367188 14.21875 C 11.433594 13.960938 11.492188 13.71875 11.539063 13.488281 C 11.585938 13.257813 11.605469 13.046875 11.605469 12.855469 C 11.605469 12.515625 11.535156 12.273438 11.394531 12.140625 C 11.25 12.003906 10.980469 11.9375 10.582031 11.9375 C 10.386719 11.9375 10.183594 11.96875 9.976563 12.027344 C 9.769531 12.089844 9.59375 12.148438 9.445313 12.203125 L 9.648438 11.375 C 10.144531 11.171875 10.621094 11 11.078125 10.855469 C 11.53125 10.710938 11.964844 10.636719 12.367188 10.636719 C 13.097656 10.636719 13.664063 10.816406 14.058594 11.167969 C 14.453125 11.519531 14.652344 11.980469 14.652344 12.542969 C 14.652344 12.660156 14.640625 12.867188 14.613281 13.160156 C 14.585938 13.453125 14.535156 13.722656 14.460938 13.972656 L 13.703125 16.652344 C 13.640625 16.867188 13.585938 17.113281 13.535156 17.386719 C 13.488281 17.660156 13.464844 17.871094 13.464844 18.011719 C 13.464844 18.367188 13.542969 18.613281 13.703125 18.742188 C 13.859375 18.871094 14.136719 18.933594 14.53125 18.933594 C 14.714844 18.933594 14.921875 18.902344 15.15625 18.839844 C 15.386719 18.773438 15.554688 18.71875 15.660156 18.667969 Z M 15.324219 8.617188 C 14.972656 8.945313 14.546875 9.109375 14.050781 9.109375 C 13.554688 9.109375 13.125 8.945313 12.769531 8.617188 C 12.414063 8.289063 12.238281 7.890625 12.238281 7.425781 C 12.238281 6.960938 12.417969 6.558594 12.769531 6.226563 C 13.125 5.894531 13.554688 5.730469 14.050781 5.730469 C 14.546875 5.730469 14.972656 5.894531 15.324219 6.226563 C 15.679688 6.558594 15.855469 6.960938 15.855469 7.425781 C 15.855469 7.890625 15.679688 8.289063 15.324219 8.617188 Z\"/>\n\t</g>\n</svg>\n";
+    var arrowUp = "<svg\n\twidth=\"20px\"\n\theight=\"20px\"\n\tviewBox=\"0 0 16 16\"\n\tversion=\"1.1\"\n\txmlns=\"http://www.w3.org/2000/svg\"\n\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n\t<path\n\t\tstroke=\"none\"\n\t\td=\"M8.01904762,16 C6.55872286,16 5.21587914,15.6412734 3.99047619,14.9238095 C2.76507324,14.2063456 1.79365438,13.2349268 1.07619048,12.0095238 C0.358726571,10.7841209 0,9.44127714 0,7.98095238 C0,6.5333261 0.358726571,5.2000061 1.07619048,3.98095238 C1.79365438,2.76189867 2.76507324,1.79365438 3.99047619,1.07619048 C5.21587914,0.358726571 6.55872286,0 8.01904762,0 C9.4666739,0 10.7999939,0.358726571 12.0190476,1.07619048 C13.2381013,1.79365438 14.2063456,2.76189867 14.9238095,3.98095238 C15.6412734,5.2000061 16,6.5333261 16,7.98095238 C16,9.44127714 15.6412734,10.7841209 14.9238095,12.0095238 C14.2063456,13.2349268 13.2381013,14.2063456 12.0190476,14.9238095 C10.7999939,15.6412734 9.4666739,16 8.01904762,16 Z M8.91428571,13.1428571 L8.91428571,6.7047619 L11.7714286,9.61904762 L11.8857143,9.61904762 L13.1047619,8.36190476 C13.1301589,8.36190476 13.1428571,8.35238105 13.1428571,8.33333333 C13.1428571,8.31428562 13.1301589,8.3047619 13.1047619,8.3047619 L9.23809524,4.45714286 L8.91428571,4.11428571 L8.91428571,4.07619048 C8.91428571,4.063492 8.90793657,4.05714286 8.8952381,4.05714286 L8.83809524,4.05714286 L8.01904762,3.2 L7.92380952,3.2 L7.08571429,4.05714286 L6.7047619,4.45714286 L2.85714286,8.3047619 C2.84444438,8.3047619 2.83809524,8.31428562 2.83809524,8.33333333 C2.83809524,8.35238105 2.84444438,8.36190476 2.85714286,8.36190476 L4.07619048,9.61904762 L4.17142857,9.61904762 L7.08571429,6.66666667 L7.08571429,13.1428571 C7.08571429,13.1682541 7.09206343,13.1809524 7.1047619,13.1809524 L8.8952381,13.1809524 C8.90793657,13.1809524 8.91428571,13.1682541 8.91428571,13.1428571 Z\"\n\t\tid=\"Icon\"\n\t></path>\n</svg>\n";
+    var info2 = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <g id=\"icon/info\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <rect id=\"placeholder\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"></rect>\n        <path d=\"M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M11,10.5662528 C11,9.97737763 11.4477153,9.5 12,9.5 C12.5522847,9.5 13,9.97737763 13,10.5662528 L13,16.4337472 C13,17.0226224 12.5522847,17.5 12,17.5 C11.4477153,17.5 11,17.0226224 11,16.4337472 L11,10.5662528 Z M12,8.5 C11.4477153,8.5 11,8.05228475 11,7.5 C11,6.94771525 11.4477153,6.5 12,6.5 C12.5522847,6.5 13,6.94771525 13,7.5 C13,8.05228475 12.5522847,8.5 12,8.5 Z\" id=\"icon\" fill=\"currentcolor\"></path>\n    </g>\n</svg>\n";
+    var ada = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <g id=\"icon/UI-library/ada\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path d=\"M11.777314,5 L16.3099677,9.5326537 L11.777314,14.0653074 L7.24466028,9.5326537 L11.777314,5 Z M6.5326537,10.2446603 L11.0653074,14.777314 L6.5326537,19.3099677 L2,14.777314 L6.5326537,10.2446603 Z M17.0219743,10.2446603 L21.554628,14.777314 L17.0219743,19.3099677 L12.4893206,14.777314 L17.0219743,10.2446603 Z\" id=\"Icon\" fill=\"currentcolor\"></path>\n    </g>\n</svg>\n";
+    var closeClear = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <g id=\"icon/close-clear\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <rect id=\"placeholder\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"></rect>\n        <path d=\"M11.9984707,10.5842571 L16.2898345,6.29289322 C16.6803588,5.90236893 17.3135238,5.90236893 17.7040481,6.29289322 C18.0945724,6.68341751 18.0945724,7.31658249 17.7040481,7.70710678 L13.4126842,11.9984707 L17.7040481,16.2898345 C18.0945724,16.6803588 18.0945724,17.3135238 17.7040481,17.7040481 C17.3135238,18.0945724 16.6803588,18.0945724 16.2898345,17.7040481 L11.9984707,13.4126842 L7.70710678,17.7040481 C7.31658249,18.0945724 6.68341751,18.0945724 6.29289322,17.7040481 C5.90236893,17.3135238 5.90236893,16.6803588 6.29289322,16.2898345 L10.5842571,11.9984707 L6.29289322,7.70710678 C5.90236893,7.31658249 5.90236893,6.68341751 6.29289322,6.29289322 C6.68341751,5.90236893 7.31658249,5.90236893 7.70710678,6.29289322 L11.9984707,10.5842571 Z\" id=\"icon\" fill=\"currentcolor\"></path>\n    </g>\n</svg>\n";
+    var icons = {
+      remove: remove,
+      download: download,
+      info: info,
+      info2: info2,
+      ada: ada,
+      'arrow-up': arrowUp,
+      'close-clear': closeClear
+    }; // convert svg strings to html element
+
+    Object.keys(icons).forEach(function (iconName) {
+      icons[iconName] = elements.html([icons[iconName]]);
+    });
+    var classNames = {
+      ICON_WRAPPER: 'icon-wrapper'
+    };
+
+    var selectors = _extends({}, elements.helpers.classNamesToSelector(classNames));
+
+    var _typeColors;
+
+    var colors = elements.constants.colors,
+        colorModifiers = elements.constants.colorModifiers;
+    var types = {
+      DEFAULT: 'default',
+      INVERTED: 'inverted',
+      PRIMARY: 'primary',
+      DANGER: 'danger',
+      ERROR: 'error',
+      SUCCESS: 'success',
+      ACTIVE: 'active',
+      INFO: 'info',
+      FOCUS: 'focus',
+      WARNING: 'warning',
+      DISABLED: 'disabled',
+      SUGGESTED: 'suggested'
+    };
+    var typeColors = (_typeColors = {}, _typeColors[types.DEFAULT] = colors.SLATE, _typeColors[types.INVERTED] = colors.WHITE, _typeColors[types.DANGER] = colors.RED, _typeColors[types.ERROR] = colors.RED, _typeColors[types.SUCCESS] = colors.GREEN, _typeColors[types.PRIMARY] = colors.BLUE, _typeColors[types.ACTIVE] = colors.BLUE, _typeColors[types.INFO] = colors.BLUE, _typeColors[types.FOCUS] = colors.BLUE, _typeColors[types.WARNING] = colors.ORANGE, _typeColors[types.DISABLED] = colors.GRAY, _typeColors[types.SUGGESTED] = colors.PURPLE, _typeColors);
+    var sizes = {
+      SMALL: 'small',
+      MEDIUM: 'medium',
+      LARGE: 'large'
+    };
+
+    function _templateObject2() {
+      var data = _taggedTemplateLiteralLoose(["\t:host([type=\"", "\"]) {\n\t\t\t\t\t\t--ts-icon-color: var(--ts-color-", ");\n\t\t\t\t}"]);
+
+      _templateObject2 = function _templateObject2() {
+        return data;
+      };
+
+      return data;
+    }
+
+    function _templateObject() {
+      var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<span type=\"", "\" class=\"", "\">\n\t\t\t\t\t", "\n\t\t\t\t</span>\n\t\t\t"]);
+
+      _templateObject = function _templateObject() {
+        return data;
+      };
+
+      return data;
+    }
+
+    elements.customElementDefineHelper('ts-icon',
+    /*#__PURE__*/
+    function (_TSElement) {
+      _inheritsLoose(_class, _TSElement);
+
+      function _class() {
+        var _this;
+
+        _this = _TSElement.call(this) || this;
+        _this.size = sizes.MEDIUM;
+        return _this;
+      }
+
+      var _proto = _class.prototype;
+
+      _proto.render = function render() {
+        return elements.html(_templateObject(), this.type, classNames.ICON_WRAPPER, icons[this.icon]);
+      };
+
+      _createClass(_class, null, [{
+        key: "styles",
+        get: function get() {
+          var colorTypesStyle = Object.keys(types).map(function (typeKey) {
+            var type = types[typeKey];
+            var typeColor = typeColors[type];
+            return elements.css(_templateObject2(), elements.unsafeCSS(type), elements.unsafeCSS(typeColor));
+          });
+          return [elements.TSElement.styles, elements.unsafeCSS(css)].concat(colorTypesStyle);
+        }
+      }, {
+        key: "properties",
+        get: function get() {
+          return {
+            icon: {
+              type: String,
+              reflect: true
+            },
+            size: {
+              type: String,
+              reflect: true
+            },
+            type: {
+              type: String,
+              reflect: true
+            }
+          };
+        }
+      }]);
+
+      return _class;
+    }(elements.TSElement));
+  });
+
+  var css = "/* General........................................................ */\n\n:host {\n\tdisplay: inline-block;\n\tfont-size: 14px;\n\tfont-size: var(--ts-font-size-default);\n\tline-height: 20px;\n\tline-height: var(--ts-unit)\n}\n\n:host > button {\n\t\tposition: relative;\n\t\tmin-width: calc(2 * 20px);\n\t\tmin-width: var(--ts-unit-double);\n\t\tmargin-right: calc(0.25 * 20px);\n\t\tmargin-right: var(--ts-unit-quarter);\n\t\tborder: none;\n\t\tborder-radius: calc(2 * 20px);\n\t\tborder-radius: var(--ts-unit-double);\n\t\tfont-size: 14px;\n\t\tfont-size: var(--ts-font-size-default);\n\t\tpadding: 0;\n\t}\n\n:host span {\n\t\tdisplay: block;\n\t\tpadding: calc(0.5 * 20px) 20px;\n\t\tpadding: var(--ts-unit-half) var(--ts-unit);\n\t\tfont-weight: 600;\n\t\tfont-weight: var(--ts-fontweight-semibold);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.02em;\n\t\tline-height: 20px;\n\t\tline-height: var(--ts-unit);\n\t\t-webkit-font-smoothing: antialiased;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t}\n\n:host(:not([busy])) > button:hover {\n\t\t\tcursor: pointer;\n\t\t\tbackground: rgb(230, 236, 239);\n\t\t\tbackground: var(--ts-color-gray-lighter);\n\t\t}\n\n:host(:not([type])) > button, :host([type='secondary']) > button {\n\t\tbox-shadow: inset 0 0 0 1px rgb(203, 215, 220);\n\t\tbox-shadow: var(--ts-boxshadow-border-default)\n\t}\n\n:host(:not([type])) > button:focus, :host([type='secondary']) > button:focus {\n\t\t\tbox-shadow: inset 0 0 0 2px rgb(0, 174, 255);\n\t\t\tbox-shadow: var(--ts-boxshadow-border-width-focused) var(--ts-color-blue);\n\t\t}\n\n/* Primary type................................................... */\n\n:host([type='primary']) > button {\n\t\tbackground: rgb(0, 174, 255);\n\t\tbackground: var(--ts-color-blue);\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host(:not([busy])[type='primary']) > button:hover {\n\t\t\tbackground: rgb(0, 133, 204);\n\t\t\tbackground: var(--ts-color-blue-dark);\n\t\t}\n\n:host(:not([busy])[type='primary']) > button:focus {\n\t\t\tbox-shadow: inset 0 0 0 2px rgb(0, 101, 163);\n\t\t\tbox-shadow: var(--ts-boxshadow-border-width-focused) var(--ts-color-blue-darker);\n\t\t}\n\n/* Accept type................................................... */\n\n:host([type='accept']) > button {\n\t\tbackground: rgb(80, 198, 16);\n\t\tbackground: var(--ts-color-green);\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host(:not([busy])[type='accept']) > button:hover {\n\t\t\tbackground: rgb(57, 157, 11);\n\t\t\tbackground: var(--ts-color-green-dark);\n\t\t}\n\n:host(:not([busy])[type='accept']) > button:focus {\n\t\t\tbox-shadow: inset 0 0 0 2px rgb(40, 127, 6);\n\t\t\tbox-shadow: var(--ts-boxshadow-border-width-focused) var(--ts-color-green-darker);\n\t\t}\n\n/* Warning type................................................... */\n\n:host([type='warning']) > button {\n\t\tbackground: rgb(255, 140, 0);\n\t\tbackground: var(--ts-color-orange);\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host(:not([busy])[type='warning']) > button:hover {\n\t\t\tbackground: rgb(240, 124, 0);\n\t\t\tbackground: var(--ts-color-orange-dark);\n\t\t}\n\n:host(:not([busy])[type='warning']) > button:focus {\n\t\t\tbox-shadow: inset 0 0 0 2px rgb(209, 91, 0);\n\t\t\tbox-shadow: var(--ts-boxshadow-border-width-focused) var(--ts-color-orange-darker);\n\t\t}\n\n/* Danger type................................................... */\n\n:host([type='danger']) > button {\n\t\tbackground: rgb(189, 0, 0);\n\t\tbackground: var(--ts-color-red);\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host(:not([busy])[type='danger']) > button:hover {\n\t\t\tbackground: rgb(153, 0, 0);\n\t\t\tbackground: var(--ts-color-red-dark);\n\t\t}\n\n:host(:not([busy])[type='danger']) > button:focus {\n\t\t\tbox-shadow: inset 0 0 0 2px rgb(122, 0, 0);\n\t\t\tbox-shadow: var(--ts-boxshadow-border-width-focused) var(--ts-color-red-darker);\n\t\t}\n\n/* Text type...................................................... */\n\n:host([type='text']) > button {\n\t\tbackground: transparent;\n\t\tborder-radius: 3px;\n\t\tborder-radius: var(--ts-radius);\n\t}\n\n:host([type='text']) span {\n\t\tcolor: rgb(0, 174, 255);\n\t\tcolor: var(--ts-color-blue);\n\t\tpadding: 0 calc(0.25 * 20px);\n\t\tpadding: 0 var(--ts-unit-quarter);\n\t\tfont-weight: 400;\n\t\tfont-weight: var(--ts-fontweight);\n\t\ttext-transform: none;\n\t\tletter-spacing: normal;\n\t}\n\n:host(:not([busy])[type='text']) > button:hover {\n\t\t\tbackground: transparent\n\t\t}\n\n:host(:not([busy])[type='text']) > button:hover span {\n\t\t\t\tcolor: rgb(0, 133, 204);\n\t\t\t\tcolor: var(--ts-color-blue-dark);\n\t\t\t}\n\n:host(:not([busy])[type='text']) > button:focus {\n\t\t\tbackground: rgb(0, 174, 255);\n\t\t\tbackground: var(--ts-color-blue)\n\t\t}\n\n:host(:not([busy])[type='text']) > button:focus span {\n\t\t\t\tcolor: rgb(255, 255, 255);\n\t\t\t\tcolor: var(--ts-color-white);\n\t\t\t}\n\n/* Micro size......................................................*/\n\n:host(:not([type='text'])[size='micro']) > button {\n\t\tfont-size: 11px;\n\t\tfont-size: var(--ts-fontsize-small);\n\t\tborder-radius: 20px;\n\t\tborder-radius: var(--ts-unit);\n\t\tpadding: 0 calc(0.5 * 20px);\n\t\tpadding: 0 var(--ts-unit-half);\n\t}\n\n:host(:not([type='text'])[size='micro']) span {\n\t\tpadding: 0 calc(0.125 * 20px);\n\t\tpadding: 0 var(--ts-unit-eighth);\n\t\tfont-size: 11px;\n\t\tfont-size: var(--ts-fontsize-small);\n\t}\n\n/* Inside a ButtonGroup ...........................................*/\n\n:host([grouped]) {\n\tdisplay: block;\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\ttext-align: center\n}\n\n:host([grouped]) > button {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n\n/* Button with an icon ............................................*/\n\n:host([icon]) > button {\n\t\twidth: calc(2 * 20px);\n\t\twidth: var(--ts-unit-double);\n\t\theight: calc(2 * 20px);\n\t\theight: var(--ts-unit-double);\n\t}\n\n:host([icon]) ts-icon {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\t-webkit-transform: translate(-50%, -50%);\n\t\t        transform: translate(-50%, -50%);\n\t}\n\n/* Disable status .................................................*/\n\n:host([disabled]) {\n\tcursor: not-allowed\n}\n\n:host([disabled]) > button {\n\t\tpointer-events: none;\n\t\tbackground-color: rgb(230, 236, 239);\n\t\tbackground-color: var(--ts-disabled-background-color);\n\t\tbox-shadow: none;\n\t}\n\n:host([disabled]) span {\n\t\tcolor: rgb(130, 159, 171);\n\t\tcolor: var(--ts-disabled-color);\n\t}\n\n:host([disabled][type='text']) > button {\n\t\tbackground-color: transparent;\n\t}\n\n/* Busy status ....................................................*/\n\n:host([busy]) > :first-child {\n\t\tpointer-events: none;\n\t\tcursor: default;\n\t\tbox-shadow: none;\n\t\tbackground-size: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-size: var(--ts-unit-double) var(--ts-unit-double);\n\t\tbackground-image: linear-gradient(\n\t\t\t-45deg,\n\t\t\trgb(203, 215, 220) 25%,\n\t\t\trgb(239, 243, 245) 25%,\n\t\t\trgb(239, 243, 245) 50%,\n\t\t\trgb(203, 215, 220) 50%,\n\t\t\trgb(203, 215, 220) 75%,\n\t\t\trgb(239, 243, 245) 75%,\n\t\t\trgb(239, 243, 245));\n\t\tbackground-image: linear-gradient(\n\t\t\t-45deg,\n\t\t\tvar(--ts-color-gray-light) 25%,\n\t\t\tvar(--ts-color-gray-lightest) 25%,\n\t\t\tvar(--ts-color-gray-lightest) 50%,\n\t\t\tvar(--ts-color-gray-light) 50%,\n\t\t\tvar(--ts-color-gray-light) 75%,\n\t\t\tvar(--ts-color-gray-lightest) 75%,\n\t\t\tvar(--ts-color-gray-lightest)\n\t\t);\n\t\t-webkit-animation: move 1s linear infinite;\n\t\t        animation: move 1s linear infinite\n\t}\n\n:host([busy]) > :first-child > * {\n\t\t\tvisibility: hidden;\n\t\t}\n\n@-webkit-keyframes move {\n\t0% {\n\t\tbackground-position: 0 0;\n\t}\n\t100% {\n\t\tbackground-position: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-position: var(--ts-unit-double) var(--ts-unit-double);\n\t}\n}\n\n@keyframes move {\n\t0% {\n\t\tbackground-position: 0 0;\n\t}\n\t100% {\n\t\tbackground-position: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-position: var(--ts-unit-double) var(--ts-unit-double);\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,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RUFDQyxrQkFBa0I7RUFDbEIsU0FBUztFQUNULFFBQVE7RUFDUix3Q0FBZ0M7VUFBaEMsZ0NBQWdDO0NBQ2pDOztBQUdELG9FQUFvRTs7QUFFcEU7Q0FDQztBQVdEOztBQVRDO0VBQ0Msb0JBQW9CO0VBQ3BCLG9DQUFxRDtFQUFyRCxxREFBcUQ7RUFDckQsZ0JBQWdCO0NBQ2pCOztBQUVBO0VBQ0MseUJBQStCO0VBQS9CLCtCQUErQjtDQUNoQzs7QUFJQTtFQUNDLDZCQUE2QjtDQUM5Qjs7QUFHRCxvRUFBb0U7O0FBR25FO0VBQ0Msb0JBQW9CO0VBQ3BCLGVBQWU7RUFDZixnQkFBZ0I7RUFDaEIsOENBQTREO0VBQTVELDREQUE0RDtFQUM1RDs7Ozs7Ozs7c0JBU0M7RUFURDs7Ozs7Ozs7O0dBU0M7RUFDRCwwQ0FBa0M7VUFBbEM7Q0FLRDs7QUFIQztHQUNDLGtCQUFrQjtFQUNuQjs7QUFJRjtDQUNDO0VBQ0Msd0JBQXdCO0NBQ3pCO0NBQ0E7RUFDQyxrREFBZ0U7RUFBaEUsZ0VBQWdFO0NBQ2pFO0FBQ0Q7O0FBUEE7Q0FDQztFQUNDLHdCQUF3QjtDQUN6QjtDQUNBO0VBQ0Msa0RBQWdFO0VBQWhFLGdFQUFnRTtDQUNqRTtBQUNEIiwiZmlsZSI6ImJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udC1zaXplLWRlZmF1bHQpO1xuXHRsaW5lLWhlaWdodDogdmFyKC0tdHMtdW5pdCk7XG5cblx0JiA+IGJ1dHRvbiB7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdG1pbi13aWR0aDogdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHRcdG1hcmdpbi1yaWdodDogdmFyKC0tdHMtdW5pdC1xdWFydGVyKTtcblx0XHRib3JkZXI6IG5vbmU7XG5cdFx0Ym9yZGVyLXJhZGl1czogdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHRcdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udC1zaXplLWRlZmF1bHQpO1xuXHRcdHBhZGRpbmc6IDA7XG5cdH1cblxuXHQmIHNwYW4ge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtaGFsZikgdmFyKC0tdHMtdW5pdCk7XG5cdFx0Zm9udC13ZWlnaHQ6IHZhcigtLXRzLWZvbnR3ZWlnaHQtc2VtaWJvbGQpO1xuXHRcdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdFx0bGV0dGVyLXNwYWNpbmc6IDAuMDJlbTtcblx0XHRsaW5lLWhlaWdodDogdmFyKC0tdHMtdW5pdCk7XG5cdFx0LXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7XG5cdFx0LW1vei1vc3gtZm9udC1zbW9vdGhpbmc6IGdyYXlzY2FsZTtcblx0fVxufVxuXG46aG9zdCg6bm90KFtidXN5XSkpIHtcblx0JiA+IGJ1dHRvbiB7XG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHRiYWNrZ3JvdW5kOiB2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXIpO1xuXHRcdH1cblx0fVxufVxuXG46aG9zdCg6bm90KFt0eXBlXSkpLFxuOmhvc3QoW3R5cGU9J3NlY29uZGFyeSddKSB7XG5cdCYgPiBidXR0b24ge1xuXHRcdGJveC1zaGFkb3c6IHZhcigtLXRzLWJveHNoYWRvdy1ib3JkZXItZGVmYXVsdCk7XG5cblx0XHQmOmZvY3VzIHtcblx0XHRcdGJveC1zaGFkb3c6IHZhcigtLXRzLWJveHNoYWRvdy1ib3JkZXItd2lkdGgtZm9jdXNlZCkgdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0fVxuXHR9XG59XG5cbi8qIFByaW1hcnkgdHlwZS4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuXG46aG9zdChbdHlwZT0ncHJpbWFyeSddKSB7XG5cdCYgPiBidXR0b24ge1xuXHRcdGJhY2tncm91bmQ6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoOm5vdChbYnVzeV0pW3R5cGU9J3ByaW1hcnknXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHQmOmhvdmVyIHtcblx0XHRcdGJhY2tncm91bmQ6IHZhcigtLXRzLWNvbG9yLWJsdWUtZGFyayk7XG5cdFx0fVxuXG5cdFx0Jjpmb2N1cyB7XG5cdFx0XHRib3gtc2hhZG93OiB2YXIoLS10cy1ib3hzaGFkb3ctYm9yZGVyLXdpZHRoLWZvY3VzZWQpIHZhcigtLXRzLWNvbG9yLWJsdWUtZGFya2VyKTtcblx0XHR9XG5cdH1cbn1cblxuLyogQWNjZXB0IHR5cGUuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3QoW3R5cGU9J2FjY2VwdCddKSB7XG5cdCYgPiBidXR0b24ge1xuXHRcdGJhY2tncm91bmQ6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcblx0XHRjb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR9XG59XG5cbjpob3N0KDpub3QoW2J1c3ldKVt0eXBlPSdhY2NlcHQnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHQmOmhvdmVyIHtcblx0XHRcdGJhY2tncm91bmQ6IHZhcigtLXRzLWNvbG9yLWdyZWVuLWRhcmspO1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMge1xuXHRcdFx0Ym94LXNoYWRvdzogdmFyKC0tdHMtYm94c2hhZG93LWJvcmRlci13aWR0aC1mb2N1c2VkKSB2YXIoLS10cy1jb2xvci1ncmVlbi1kYXJrZXIpO1xuXHRcdH1cblx0fVxufVxuXG4vKiBXYXJuaW5nIHR5cGUuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3QoW3R5cGU9J3dhcm5pbmcnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoOm5vdChbYnVzeV0pW3R5cGU9J3dhcm5pbmcnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHQmOmhvdmVyIHtcblx0XHRcdGJhY2tncm91bmQ6IHZhcigtLXRzLWNvbG9yLW9yYW5nZS1kYXJrKTtcblx0XHR9XG5cblx0XHQmOmZvY3VzIHtcblx0XHRcdGJveC1zaGFkb3c6IHZhcigtLXRzLWJveHNoYWRvdy1ib3JkZXItd2lkdGgtZm9jdXNlZCkgdmFyKC0tdHMtY29sb3Itb3JhbmdlLWRhcmtlcik7XG5cdFx0fVxuXHR9XG59XG5cbi8qIERhbmdlciB0eXBlLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG5cbjpob3N0KFt0eXBlPSdkYW5nZXInXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kOiB2YXIoLS10cy1jb2xvci1yZWQpO1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoOm5vdChbYnVzeV0pW3R5cGU9J2RhbmdlciddKSB7XG5cdCYgPiBidXR0b24ge1xuXHRcdCY6aG92ZXIge1xuXHRcdFx0YmFja2dyb3VuZDogdmFyKC0tdHMtY29sb3ItcmVkLWRhcmspO1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMge1xuXHRcdFx0Ym94LXNoYWRvdzogdmFyKC0tdHMtYm94c2hhZG93LWJvcmRlci13aWR0aC1mb2N1c2VkKSB2YXIoLS10cy1jb2xvci1yZWQtZGFya2VyKTtcblx0XHR9XG5cdH1cbn1cblxuLyogVGV4dCB0eXBlLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG5cbjpob3N0KFt0eXBlPSd0ZXh0J10pIHtcblx0JiA+IGJ1dHRvbiB7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdFx0Ym9yZGVyLXJhZGl1czogdmFyKC0tdHMtcmFkaXVzKTtcblx0fVxuXG5cdCYgc3BhbiB7XG5cdFx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdHBhZGRpbmc6IDAgdmFyKC0tdHMtdW5pdC1xdWFydGVyKTtcblx0XHRmb250LXdlaWdodDogdmFyKC0tdHMtZm9udHdlaWdodCk7XG5cdFx0dGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cdFx0bGV0dGVyLXNwYWNpbmc6IG5vcm1hbDtcblx0fVxufVxuXG46aG9zdCg6bm90KFtidXN5XSlbdHlwZT0ndGV4dCddKSB7XG5cdCYgPiBidXR0b24ge1xuXHRcdCY6aG92ZXIge1xuXHRcdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdFx0XHQmIHNwYW4ge1xuXHRcdFx0XHRjb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZS1kYXJrKTtcblx0XHRcdH1cblx0XHR9XG5cblx0XHQmOmZvY3VzIHtcblx0XHRcdGJhY2tncm91bmQ6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdFx0JiBzcGFuIHtcblx0XHRcdFx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0XHRcdH1cblx0XHR9XG5cdH1cbn1cblxuLyogTWljcm8gc2l6ZS4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiovXG5cbjpob3N0KDpub3QoW3R5cGU9J3RleHQnXSlbc2l6ZT0nbWljcm8nXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLXNtYWxsKTtcblx0XHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy11bml0KTtcblx0XHRwYWRkaW5nOiAwIHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdH1cblxuXHQmIHNwYW4ge1xuXHRcdHBhZGRpbmc6IDAgdmFyKC0tdHMtdW5pdC1laWdodGgpO1xuXHRcdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtc21hbGwpO1xuXHR9XG59XG5cbi8qIEluc2lkZSBhIEJ1dHRvbkdyb3VwIC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4qL1xuXG46aG9zdChbZ3JvdXBlZF0pIHtcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1hcmdpbi1ib3R0b206IHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcblxuXHQmID4gYnV0dG9uIHtcblx0XHR3aWR0aDogMTAwJTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxufVxuXG4vKiBCdXR0b24gd2l0aCBhbiBpY29uIC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uKi9cblxuOmhvc3QoW2ljb25dKSB7XG5cdCYgPiBidXR0b24ge1xuXHRcdHdpZHRoOiB2YXIoLS10cy11bml0LWRvdWJsZSk7XG5cdFx0aGVpZ2h0OiB2YXIoLS10cy11bml0LWRvdWJsZSk7XG5cdH1cblxuXHQmIHRzLWljb24ge1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRsZWZ0OiA1MCU7XG5cdFx0dG9wOiA1MCU7XG5cdFx0dHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSk7XG5cdH1cbn1cblxuLyogRGlzYWJsZSBzdGF0dXMgLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiovXG5cbjpob3N0KFtkaXNhYmxlZF0pIHtcblx0Y3Vyc29yOiBub3QtYWxsb3dlZDtcblxuXHQmID4gYnV0dG9uIHtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1kaXNhYmxlZC1iYWNrZ3JvdW5kLWNvbG9yKTtcblx0XHRib3gtc2hhZG93OiBub25lO1xuXHR9XG5cblx0JiBzcGFuIHtcblx0XHRjb2xvcjogdmFyKC0tdHMtZGlzYWJsZWQtY29sb3IpO1xuXHR9XG59XG5cbjpob3N0KFtkaXNhYmxlZF1bdHlwZT0ndGV4dCddKSB7XG5cdCYgPiBidXR0b24ge1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHR9XG59XG5cbi8qIEJ1c3kgc3RhdHVzIC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4qL1xuXG46aG9zdChbYnVzeV0pIHtcblx0JiA+IDpmaXJzdC1jaGlsZCB7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdFx0Y3Vyc29yOiBkZWZhdWx0O1xuXHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0YmFja2dyb3VuZC1zaXplOiB2YXIoLS10cy11bml0LWRvdWJsZSkgdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHRcdGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudChcblx0XHRcdC00NWRlZyxcblx0XHRcdHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHQpIDI1JSxcblx0XHRcdHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHRlc3QpIDI1JSxcblx0XHRcdHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHRlc3QpIDUwJSxcblx0XHRcdHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHQpIDUwJSxcblx0XHRcdHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHQpIDc1JSxcblx0XHRcdHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHRlc3QpIDc1JSxcblx0XHRcdHZhcigtLXRzLWNvbG9yLWdyYXktbGlnaHRlc3QpXG5cdFx0KTtcblx0XHRhbmltYXRpb246IG1vdmUgMXMgbGluZWFyIGluZmluaXRlO1xuXG5cdFx0JiA+ICoge1xuXHRcdFx0dmlzaWJpbGl0eTogaGlkZGVuO1xuXHRcdH1cblx0fVxufVxuXG5Aa2V5ZnJhbWVzIG1vdmUge1xuXHQwJSB7XG5cdFx0YmFja2dyb3VuZC1wb3NpdGlvbjogMCAwO1xuXHR9XG5cdDEwMCUge1xuXHRcdGJhY2tncm91bmQtcG9zaXRpb246IHZhcigtLXRzLXVuaXQtZG91YmxlKSB2YXIoLS10cy11bml0LWRvdWJsZSk7XG5cdH1cbn1cbiJdfQ== */";
+
+  var types = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    TEXT: 'text',
+    ACCEPT: 'accept',
+    WARNING: 'warning',
+    DANGER: 'danger'
+  };
+
   function _templateObject3() {
@@ -52,3 +239,3 @@ var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\t<span><slot></slot></span>\n\t\t\t\t\t  "]);
   function _templateObject2() {
-    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\t<ts-icon icon=\"", "\" size=\"medium\"></ts-icon>\n\t\t\t\t\t  "]);
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\t<ts-icon icon=\"", "\" size=\"medium\" type=\"", "\"></ts-icon>\n\t\t\t\t\t  "]);
 
@@ -117,3 +304,2 @@ _templateObject2 = function _templateObject2() {
       _this = _TSElement.call(this) || this;
-      _this.type = '';
       _this.grouped = false;
@@ -126,5 +312,13 @@ return _this;
     _proto.render = function render() {
-      return elements.html(_templateObject(), this.disabled, this.icon ? elements.html(_templateObject2(), this.icon) : elements.html(_templateObject3()));
+      return elements.html(_templateObject(), this.disabled, this.icon ? elements.html(_templateObject2(), this.icon, this.iconType) : elements.html(_templateObject3()));
     };
 
+    _createClass(TSButton, [{
+      key: "iconType",
+      get: function get() {
+        var colorBackgroundTypes = [types.DANGER, types.WARNING, types.ACCEPT, types.PRIMARY];
+        return colorBackgroundTypes.includes(this.type) ? 'inverted' : 'default';
+      }
+    }]);
+
     return TSButton;
@@ -131,0 +325,0 @@ }(elements.TSElement);

package.json

 {
   "name": "@tradeshift/elements.button",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "src": "src/button.js",
@@ -11,5 +11,5 @@ "main": "lib/button.umd.js",
   "dependencies": {
-    "@tradeshift/elements": "^0.3.3"
+    "@tradeshift/elements": "^0.3.4"
   },
-  "gitHead": "d58b50199da256efbac6559568824b27b117bb48"
+  "gitHead": "f3688e19857621dec7ef620ce84f49e8a66bd429"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91027

increased by182.61%

Lines of code

417

increased by155.83%

Worsened metrics

Number of low supply chain risk alerts

8

increased by300%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@tradeshift/elements@^0.3.4