@tradeshift/elements.file-card - npm Package Compare versions

Comparing version 0.2.7 to 0.2.8-alpha.0

lib/file-card.cjs.js

@@ -14,363 +14,574 @@ 'use strict';
 
-function _taggedTemplateLiteralLoose$1(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+(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);
+    }
   }
 
-  strings.raw = raw;
-  return strings;
-}
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
 
-var css = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    subClass.__proto__ = superClass;
+  }
 
-function _templateObject() {
-  const data = _taggedTemplateLiteralLoose$1(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
+  function _taggedTemplateLiteralLoose(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+    strings.raw = raw;
+    return strings;
+  }
 
-  return data;
-}
+  var css = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
 
-elements.customElementDefineHelper('ts-typography', class extends elements.TSElement {
-  constructor() {
-    super();
-    this.text = '';
-    this.color = 'default';
-    this.variant = 'default';
-    this.inline = false;
-    this.noWrap = false;
-  }
+  function _templateObject() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
 
-  static get styles() {
-    return [elements.TSElement.styles, elements.unsafeCSS(css)];
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
   }
 
-  static get properties() {
-    return {
-      text: {
-        type: String,
-        reflect: true
-      },
-      variant: {
-        type: String,
-        reflect: true
-      },
-      color: {
-        type: String,
-        reflect: true
-      },
-      inline: {
-        type: Boolean,
-        reflect: true
-      },
-      classNames: {
-        type: String,
-        reflect: true,
-        attribute: 'class-names'
-      },
-      noWrap: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'no-wrap'
+  elements.customElementDefineHelper('ts-typography',
+  /*#__PURE__*/
+  function (_TSElement) {
+    _inheritsLoose(_class, _TSElement);
+
+    function _class() {
+      var _this;
+
+      _this = _TSElement.call(this) || this;
+      _this.text = '';
+      _this.color = 'default';
+      _this.variant = 'default';
+      _this.inline = false;
+      _this.noWrap = false;
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.render = function render() {
+      return elements.html(_templateObject(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
+    };
+
+    _createClass(_class, null, [{
+      key: "styles",
+      get: function get() {
+        return [elements.TSElement.styles, elements.unsafeCSS(css)];
       }
-    };
+    }, {
+      key: "properties",
+      get: function get() {
+        return {
+          text: {
+            type: String,
+            reflect: true
+          },
+          variant: {
+            type: String,
+            reflect: true
+          },
+          color: {
+            type: String,
+            reflect: true
+          },
+          inline: {
+            type: Boolean,
+            reflect: true
+          },
+          classNames: {
+            type: String,
+            reflect: true,
+            attribute: 'class-names'
+          },
+          noWrap: {
+            type: Boolean,
+            reflect: true,
+            attribute: 'no-wrap'
+          }
+        };
+      }
+    }]);
+
+    return _class;
+  }(elements.TSElement));
+});
+
+(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);
+    }
   }
 
-  render() {
-    return elements.html(_templateObject(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
   }
 
-});
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    subClass.__proto__ = superClass;
+  }
 
-function _taggedTemplateLiteralLoose$2(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+  function _taggedTemplateLiteralLoose(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    strings.raw = raw;
+    return strings;
   }
 
-  strings.raw = raw;
-  return strings;
-}
+  var css = "/* General........................................................ */\n\n:host {\n\twidth: 100%;\n}\n\n.card {\n\twidth: 100%;\n\tposition: relative;\n\tborder-radius: 3px;\n\tborder-radius: var(--ts-radius);\n\tborder: 1px solid\n\t\trgb(203, 215, 220);\n\tborder: var(--ts-border);\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\toverflow: hidden;\n\tpadding: calc(0.25 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-quarter) var(--ts-unit-half);\n\tbackground-color: rgb(255, 255, 255);\n\tbackground-color: var(--ts-color-white);\n\ttransition: box-shadow 0.1s,\n\t\tborder-color 0.1s;\n\ttransition: box-shadow var(--ts-transition-now),\n\t\tborder-color var(--ts-transition-now)\n}\n\n.card:hover {\n\t\tborder-color: rgb(0, 174, 255);\n\t\tborder-color: var(--ts-color-blue);\n\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t}\n\n.card[data-no-horizontal-padding] {\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n.card[data-no-vertical-padding] {\n\t\tpadding-top: 0;\n\t\tpadding-bottom: 0;\n\t}\n\n.card[data-no-padding] {\n\t\tpadding: 0;\n\t}\n\n.card {\n\n\t/* types */\n}\n\n.card[data-type='error'],\n\t.card[data-type='failed'],\n\t.card[data-type='danger'] {\n\t\tborder: 1px solid\n\t\trgb(189, 0, 0);\n\t\tborder: var(--ts-border-error)\n\t}\n\n.card[data-type='error']:hover, .card[data-type='failed']:hover, .card[data-type='danger']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(234, 174, 174);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-red-lighter);\n\t\t}\n\n.card[data-type='success'] {\n\t\tborder: 1px solid\n\t\trgb(80, 198, 16);\n\t\tborder: var(--ts-border-success)\n\t}\n\n.card[data-type='success']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(198, 236, 177);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-green-lighter);\n\t\t}\n\n.card[data-type='focus'],\n\t.card[data-type='active'],\n\t.card[data-type='primary'] {\n\t\tborder: 1px solid\n\t\trgb(0, 174, 255);\n\t\tborder: var(--ts-border-focus)\n\t}\n\n.card[data-type='focus']:hover, .card[data-type='active']:hover, .card[data-type='primary']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t\t}\n\n.card {\n\n\t/* orientations */\n}\n\n.card[data-orientation='horizontal'],\n\t.card[data-orientation='h'] {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n.card[data-orientation='vertical'],\n\t.card[data-orientation='v'] {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t}\n\n.card[data-size='small'] {\n\t\twidth: 280px;\n\t\twidth: var(--ts-box-width-small);\n\t}\n\n.card[data-size='medium'] {\n\t\twidth: 360px;\n\t\twidth: var(--ts-box-width-medium);\n\t}\n\n.card[data-rtl] {\n\t\tdirection: rtl;\n\t}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxXQUFXO0FBQ1o7O0FBRUE7Q0FDQyxXQUFXO0NBQ1gsa0JBQWtCO0NBQ2xCLGtCQUErQjtDQUEvQiwrQkFBK0I7Q0FDL0I7b0JBQXdCO0NBQXhCLHdCQUF3QjtDQUN4QiwrQkFBa0M7Q0FBbEMsa0NBQWtDO0NBQ2xDLGdCQUFnQjtDQUNoQiwyQ0FBbUQ7Q0FBbkQsbURBQW1EO0NBQ25ELG9DQUF1QztDQUF2Qyx1Q0FBdUM7Q0FDdkM7bUJBQ3NDO0NBRHRDOztBQTRFRDs7QUF6RUM7RUFDQyw4QkFBa0M7RUFBbEMsa0NBQWtDO0VBQ2xDLHdDQUFrRDtFQUFsRCxrREFBa0Q7Q0FDbkQ7O0FBRUE7RUFDQyxlQUFlO0VBQ2YsZ0JBQWdCO0NBQ2pCOztBQUVBO0VBQ0MsY0FBYztFQUNkLGlCQUFpQjtDQUNsQjs7QUFFQTtFQUNDLFVBQVU7Q0FDWDs7QUE3QkQ7O0NBK0JDLFVBQVU7QUFzRFg7O0FBckRDOzs7RUFHQztnQkFBOEI7RUFBOUI7Q0FLRDs7QUFIQztHQUNDLHdDQUFpRDtHQUFqRCxpREFBaUQ7RUFDbEQ7O0FBR0Q7RUFDQztrQkFBZ0M7RUFBaEM7Q0FLRDs7QUFIQztHQUNDLHdDQUFtRDtHQUFuRCxtREFBbUQ7RUFDcEQ7O0FBR0Q7OztFQUdDO2tCQUE4QjtFQUE5QjtDQUtEOztBQUhDO0dBQ0Msd0NBQWtEO0dBQWxELGtEQUFrRDtFQUNuRDs7QUF6REY7O0NBNERDLGlCQUFpQjtBQXlCbEI7O0FBeEJDOztFQUVDLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsOEJBQThCO0NBQy9COztBQUVBOztFQUVDLHNCQUFzQjtFQUN0Qix1QkFBdUI7Q0FDeEI7O0FBRUE7RUFDQyxZQUFnQztFQUFoQyxnQ0FBZ0M7Q0FDakM7O0FBRUE7RUFDQyxZQUFpQztFQUFqQyxpQ0FBaUM7Q0FDbEM7O0FBRUE7RUFDQyxjQUFjO0NBQ2YiLCJmaWxlIjoiY2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLmNhcmQge1xuXHR3aWR0aDogMTAwJTtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy1yYWRpdXMpO1xuXHRib3JkZXI6IHZhcigtLXRzLWJvcmRlcik7XG5cdG1hcmdpbi1ib3R0b206IHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtcXVhcnRlcikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcblx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR0cmFuc2l0aW9uOiBib3gtc2hhZG93IHZhcigtLXRzLXRyYW5zaXRpb24tbm93KSxcblx0XHRib3JkZXItY29sb3IgdmFyKC0tdHMtdHJhbnNpdGlvbi1ub3cpO1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAgMXB4IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG5cdH1cblxuXHQmW2RhdGEtbm8taG9yaXpvbnRhbC1wYWRkaW5nXSB7XG5cdFx0cGFkZGluZy1sZWZ0OiAwO1xuXHRcdHBhZGRpbmctcmlnaHQ6IDA7XG5cdH1cblxuXHQmW2RhdGEtbm8tdmVydGljYWwtcGFkZGluZ10ge1xuXHRcdHBhZGRpbmctdG9wOiAwO1xuXHRcdHBhZGRpbmctYm90dG9tOiAwO1xuXHR9XG5cblx0JltkYXRhLW5vLXBhZGRpbmddIHtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5cblx0LyogdHlwZXMgKi9cblx0JltkYXRhLXR5cGU9J2Vycm9yJ10sXG5cdCZbZGF0YS10eXBlPSdmYWlsZWQnXSxcblx0JltkYXRhLXR5cGU9J2RhbmdlciddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1lcnJvcik7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1yZWQtbGlnaHRlcik7XG5cdFx0fVxuXHR9XG5cblx0JltkYXRhLXR5cGU9J3N1Y2Nlc3MnXSB7XG5cdFx0Ym9yZGVyOiB2YXIoLS10cy1ib3JkZXItc3VjY2Vzcyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ncmVlbi1saWdodGVyKTtcblx0XHR9XG5cdH1cblxuXHQmW2RhdGEtdHlwZT0nZm9jdXMnXSxcblx0JltkYXRhLXR5cGU9J2FjdGl2ZSddLFxuXHQmW2RhdGEtdHlwZT0ncHJpbWFyeSddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1mb2N1cyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ibHVlLWxpZ2h0ZXIpO1xuXHRcdH1cblx0fVxuXG5cdC8qIG9yaWVudGF0aW9ucyAqL1xuXHQmW2RhdGEtb3JpZW50YXRpb249J2hvcml6b250YWwnXSxcblx0JltkYXRhLW9yaWVudGF0aW9uPSdoJ10ge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdH1cblxuXHQmW2RhdGEtb3JpZW50YXRpb249J3ZlcnRpY2FsJ10sXG5cdCZbZGF0YS1vcmllbnRhdGlvbj0ndiddIHtcblx0XHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRcdGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuXHR9XG5cblx0JltkYXRhLXNpemU9J3NtYWxsJ10ge1xuXHRcdHdpZHRoOiB2YXIoLS10cy1ib3gtd2lkdGgtc21hbGwpO1xuXHR9XG5cblx0JltkYXRhLXNpemU9J21lZGl1bSddIHtcblx0XHR3aWR0aDogdmFyKC0tdHMtYm94LXdpZHRoLW1lZGl1bSk7XG5cdH1cblxuXHQmW2RhdGEtcnRsXSB7XG5cdFx0ZGlyZWN0aW9uOiBydGw7XG5cdH1cbn1cbiJdfQ== */";
 
-var css$1 = "/* General........................................................ */\n\n:host {\n\twidth: 100%;\n}\n\n.card {\n\twidth: 100%;\n\tposition: relative;\n\tborder-radius: 3px;\n\tborder-radius: var(--ts-radius);\n\tborder: 1px solid\n\t\trgb(203, 215, 220);\n\tborder: var(--ts-border);\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\toverflow: hidden;\n\tpadding: calc(0.25 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-quarter) var(--ts-unit-half);\n\tbackground-color: rgb(255, 255, 255);\n\tbackground-color: var(--ts-color-white);\n\ttransition: box-shadow 0.1s,\n\t\tborder-color 0.1s;\n\ttransition: box-shadow var(--ts-transition-now),\n\t\tborder-color var(--ts-transition-now)\n}\n\n.card:hover {\n\t\tborder-color: rgb(0, 174, 255);\n\t\tborder-color: var(--ts-color-blue);\n\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t}\n\n.card[data-no-horizontal-padding] {\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n.card[data-no-vertical-padding] {\n\t\tpadding-top: 0;\n\t\tpadding-bottom: 0;\n\t}\n\n.card[data-no-padding] {\n\t\tpadding: 0;\n\t}\n\n.card {\n\n\t/* types */\n}\n\n.card[data-type='error'],\n\t.card[data-type='failed'],\n\t.card[data-type='danger'] {\n\t\tborder: 1px solid\n\t\trgb(189, 0, 0);\n\t\tborder: var(--ts-border-error)\n\t}\n\n.card[data-type='error']:hover, .card[data-type='failed']:hover, .card[data-type='danger']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(234, 174, 174);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-red-lighter);\n\t\t}\n\n.card[data-type='success'] {\n\t\tborder: 1px solid\n\t\trgb(80, 198, 16);\n\t\tborder: var(--ts-border-success)\n\t}\n\n.card[data-type='success']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(198, 236, 177);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-green-lighter);\n\t\t}\n\n.card[data-type='focus'],\n\t.card[data-type='active'],\n\t.card[data-type='primary'] {\n\t\tborder: 1px solid\n\t\trgb(0, 174, 255);\n\t\tborder: var(--ts-border-focus)\n\t}\n\n.card[data-type='focus']:hover, .card[data-type='active']:hover, .card[data-type='primary']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t\t}\n\n.card {\n\n\t/* orientations */\n}\n\n.card[data-orientation='horizontal'],\n\t.card[data-orientation='h'] {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n.card[data-orientation='vertical'],\n\t.card[data-orientation='v'] {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t}\n\n.card[data-size='small'] {\n\t\twidth: 280px;\n\t\twidth: var(--ts-box-width-small);\n\t}\n\n.card[data-size='medium'] {\n\t\twidth: 360px;\n\t\twidth: var(--ts-box-width-medium);\n\t}\n\n.card[data-rtl] {\n\t\tdirection: rtl;\n\t}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxXQUFXO0FBQ1o7O0FBRUE7Q0FDQyxXQUFXO0NBQ1gsa0JBQWtCO0NBQ2xCLGtCQUErQjtDQUEvQiwrQkFBK0I7Q0FDL0I7b0JBQXdCO0NBQXhCLHdCQUF3QjtDQUN4QiwrQkFBa0M7Q0FBbEMsa0NBQWtDO0NBQ2xDLGdCQUFnQjtDQUNoQiwyQ0FBbUQ7Q0FBbkQsbURBQW1EO0NBQ25ELG9DQUF1QztDQUF2Qyx1Q0FBdUM7Q0FDdkM7bUJBQ3NDO0NBRHRDOztBQTRFRDs7QUF6RUM7RUFDQyw4QkFBa0M7RUFBbEMsa0NBQWtDO0VBQ2xDLHdDQUFrRDtFQUFsRCxrREFBa0Q7Q0FDbkQ7O0FBRUE7RUFDQyxlQUFlO0VBQ2YsZ0JBQWdCO0NBQ2pCOztBQUVBO0VBQ0MsY0FBYztFQUNkLGlCQUFpQjtDQUNsQjs7QUFFQTtFQUNDLFVBQVU7Q0FDWDs7QUE3QkQ7O0NBK0JDLFVBQVU7QUFzRFg7O0FBckRDOzs7RUFHQztnQkFBOEI7RUFBOUI7Q0FLRDs7QUFIQztHQUNDLHdDQUFpRDtHQUFqRCxpREFBaUQ7RUFDbEQ7O0FBR0Q7RUFDQztrQkFBZ0M7RUFBaEM7Q0FLRDs7QUFIQztHQUNDLHdDQUFtRDtHQUFuRCxtREFBbUQ7RUFDcEQ7O0FBR0Q7OztFQUdDO2tCQUE4QjtFQUE5QjtDQUtEOztBQUhDO0dBQ0Msd0NBQWtEO0dBQWxELGtEQUFrRDtFQUNuRDs7QUF6REY7O0NBNERDLGlCQUFpQjtBQXlCbEI7O0FBeEJDOztFQUVDLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsOEJBQThCO0NBQy9COztBQUVBOztFQUVDLHNCQUFzQjtFQUN0Qix1QkFBdUI7Q0FDeEI7O0FBRUE7RUFDQyxZQUFnQztFQUFoQyxnQ0FBZ0M7Q0FDakM7O0FBRUE7RUFDQyxZQUFpQztFQUFqQyxpQ0FBaUM7Q0FDbEM7O0FBRUE7RUFDQyxjQUFjO0NBQ2YiLCJmaWxlIjoiY2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLmNhcmQge1xuXHR3aWR0aDogMTAwJTtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy1yYWRpdXMpO1xuXHRib3JkZXI6IHZhcigtLXRzLWJvcmRlcik7XG5cdG1hcmdpbi1ib3R0b206IHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtcXVhcnRlcikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcblx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR0cmFuc2l0aW9uOiBib3gtc2hhZG93IHZhcigtLXRzLXRyYW5zaXRpb24tbm93KSxcblx0XHRib3JkZXItY29sb3IgdmFyKC0tdHMtdHJhbnNpdGlvbi1ub3cpO1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAgMXB4IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG5cdH1cblxuXHQmW2RhdGEtbm8taG9yaXpvbnRhbC1wYWRkaW5nXSB7XG5cdFx0cGFkZGluZy1sZWZ0OiAwO1xuXHRcdHBhZGRpbmctcmlnaHQ6IDA7XG5cdH1cblxuXHQmW2RhdGEtbm8tdmVydGljYWwtcGFkZGluZ10ge1xuXHRcdHBhZGRpbmctdG9wOiAwO1xuXHRcdHBhZGRpbmctYm90dG9tOiAwO1xuXHR9XG5cblx0JltkYXRhLW5vLXBhZGRpbmddIHtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5cblx0LyogdHlwZXMgKi9cblx0JltkYXRhLXR5cGU9J2Vycm9yJ10sXG5cdCZbZGF0YS10eXBlPSdmYWlsZWQnXSxcblx0JltkYXRhLXR5cGU9J2RhbmdlciddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1lcnJvcik7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1yZWQtbGlnaHRlcik7XG5cdFx0fVxuXHR9XG5cblx0JltkYXRhLXR5cGU9J3N1Y2Nlc3MnXSB7XG5cdFx0Ym9yZGVyOiB2YXIoLS10cy1ib3JkZXItc3VjY2Vzcyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ncmVlbi1saWdodGVyKTtcblx0XHR9XG5cdH1cblxuXHQmW2RhdGEtdHlwZT0nZm9jdXMnXSxcblx0JltkYXRhLXR5cGU9J2FjdGl2ZSddLFxuXHQmW2RhdGEtdHlwZT0ncHJpbWFyeSddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1mb2N1cyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ibHVlLWxpZ2h0ZXIpO1xuXHRcdH1cblx0fVxuXG5cdC8qIG9yaWVudGF0aW9ucyAqL1xuXHQmW2RhdGEtb3JpZW50YXRpb249J2hvcml6b250YWwnXSxcblx0JltkYXRhLW9yaWVudGF0aW9uPSdoJ10ge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdH1cblxuXHQmW2RhdGEtb3JpZW50YXRpb249J3ZlcnRpY2FsJ10sXG5cdCZbZGF0YS1vcmllbnRhdGlvbj0ndiddIHtcblx0XHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRcdGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuXHR9XG5cblx0JltkYXRhLXNpemU9J3NtYWxsJ10ge1xuXHRcdHdpZHRoOiB2YXIoLS10cy1ib3gtd2lkdGgtc21hbGwpO1xuXHR9XG5cblx0JltkYXRhLXNpemU9J21lZGl1bSddIHtcblx0XHR3aWR0aDogdmFyKC0tdHMtYm94LXdpZHRoLW1lZGl1bSk7XG5cdH1cblxuXHQmW2RhdGEtcnRsXSB7XG5cdFx0ZGlyZWN0aW9uOiBydGw7XG5cdH1cbn1cbiJdfQ== */";
+  function _templateObject() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"card ", "\"\n\t\t\t\t\tdata-orientation=\"", "\"\n\t\t\t\t\tdata-type=\"", "\"\n\t\t\t\t\t?data-no-padding=\"", "\"\n\t\t\t\t\t?data-no-horizontal-padding=\"", "\"\n\t\t\t\t\t?data-no-vertical-padding=\"", "\"\n\t\t\t\t\tdata-size=\"", "\"\n\t\t\t\t\t?data-rtl=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t"]);
 
-function _templateObject$1() {
-  const data = _taggedTemplateLiteralLoose$2(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"card ", "\"\n\t\t\t\t\tdata-orientation=\"", "\"\n\t\t\t\t\tdata-type=\"", "\"\n\t\t\t\t\t?data-no-padding=\"", "\"\n\t\t\t\t\t?data-no-horizontal-padding=\"", "\"\n\t\t\t\t\t?data-no-vertical-padding=\"", "\"\n\t\t\t\t\tdata-size=\"", "\"\n\t\t\t\t\t?data-rtl=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t"]);
+    _templateObject = function _templateObject() {
+      return data;
+    };
 
-  _templateObject$1 = function _templateObject() {
     return data;
-  };
+  }
 
-  return data;
-}
+  elements.customElementDefineHelper('ts-card',
+  /*#__PURE__*/
+  function (_TSElement) {
+    _inheritsLoose(_class, _TSElement);
 
-elements.customElementDefineHelper('ts-card', class extends elements.TSElement {
-  constructor() {
-    super();
-    this.type = '';
-    this.size = 'full';
-    this.orientation = 'vertical';
-    this.rtl = false;
-    this.noPadding = false;
-    this.noHorizontalPadding = false;
-    this.noVerticalPadding = false;
-  }
+    function _class() {
+      var _this;
 
-  static get styles() {
-    return [elements.TSElement.styles, elements.unsafeCSS(css$1)];
-  }
+      _this = _TSElement.call(this) || this;
+      _this.type = '';
+      _this.size = 'full';
+      _this.orientation = 'vertical';
+      _this.rtl = false;
+      _this.noPadding = false;
+      _this.noHorizontalPadding = false;
+      _this.noVerticalPadding = false;
+      return _this;
+    }
 
-  static get properties() {
-    return {
-      type: {
-        type: String,
-        reflect: true
-      },
-      orientation: {
-        type: String,
-        reflect: true
-      },
-      rtl: {
-        type: Boolean,
-        reflect: true
-      },
-      size: {
-        type: String,
-        reflect: true
-      },
-      noPadding: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'no-padding'
-      },
-      noHorizontalPadding: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'no-horizontal-padding'
-      },
-      noVerticalPadding: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'no-vertical-padding'
+    var _proto = _class.prototype;
+
+    _proto.render = function render() {
+      return elements.html(_templateObject(), this.cardClassNames, this.orientation, this.type, this.noPadding, this.noHorizontalPadding, this.noVerticalPadding, this.size, this.rtl);
+    };
+
+    _createClass(_class, null, [{
+      key: "styles",
+      get: function get() {
+        return [elements.TSElement.styles, elements.unsafeCSS(css)];
       }
-    };
+    }, {
+      key: "properties",
+      get: function get() {
+        return {
+          type: {
+            type: String,
+            reflect: true
+          },
+          orientation: {
+            type: String,
+            reflect: true
+          },
+          rtl: {
+            type: Boolean,
+            reflect: true
+          },
+          size: {
+            type: String,
+            reflect: true
+          },
+          noPadding: {
+            type: Boolean,
+            reflect: true,
+            attribute: 'no-padding'
+          },
+          noHorizontalPadding: {
+            type: Boolean,
+            reflect: true,
+            attribute: 'no-horizontal-padding'
+          },
+          noVerticalPadding: {
+            type: Boolean,
+            reflect: true,
+            attribute: 'no-vertical-padding'
+          }
+        };
+      }
+    }]);
+
+    return _class;
+  }(elements.TSElement));
+});
+
+(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);
+    }
   }
 
-  render() {
-    return elements.html(_templateObject$1(), this.cardClassNames, this.orientation, this.type, this.noPadding, this.noHorizontalPadding, this.noVerticalPadding, this.size, this.rtl);
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
   }
 
-});
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    subClass.__proto__ = superClass;
+  }
 
-function _taggedTemplateLiteralLoose$3(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+  function _taggedTemplateLiteralLoose(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    strings.raw = raw;
+    return strings;
   }
 
-  strings.raw = raw;
-  return strings;
-}
+  var css = "/* General........................................................ */\n:host {\n\twidth: 100%;\n}\n\n.progress-bar-wrapper {\n\theight: calc(0.25 * 20px);\n\theight: var(--ts-progress-bar-height);\n\tborder-radius: 100em;\n\toverflow: hidden;\n}\n\n.progress-bar-total {\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: rgb(173, 229, 255);\n\tbackground-color: var(--ts-color-blue-lighter);\n}\n\n.progress-bar-done {\n\tposition: absolute;\n\tborder-radius: 100em;\n\tleft: 0;\n\ttop: 0;\n\theight: 100%;\n\tbackground-color: rgb(0, 174, 255);\n\tbackground-color: var(--ts-color-blue);\n}\n\n.progress-bar-wrapper[data-indeterminate] .progress-bar-done {\n\tanimation: infinite-progress 1s linear infinite;\n}\n\n@keyframes infinite-progress {\n\t0% {\n\t\twidth: 0;\n\t\tmargin-left: 0;\n\t\tmargin-right: 100%;\n\t}\n\t20% {\n\t\twidth: 30%;\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t40% {\n\t\twidth: 30%;\n\t\tmargin-left: 30%;\n\t\tmargin-right: 0;\n\t}\n\t60% {\n\t\twidth: 40%;\n\t\tmargin-left: 50%;\n\t\tmargin-right: 0;\n\t}\n\t80% {\n\t\twidth: 40%;\n\t\tmargin-left: 70%;\n\t\tmargin-right: 0;\n\t}\n\t100% {\n\t\twidth: 0;\n\t\tmargin-left: 100%;\n\t\tmargin-right: 0;\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FO0FBQ3BFO0NBQ0MsV0FBVztBQUNaOztBQUVBO0NBQ0MseUJBQXFDO0NBQXJDLHFDQUFxQztDQUNyQyxvQkFBb0I7Q0FDcEIsZ0JBQWdCO0FBQ2pCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLFlBQVk7Q0FDWixXQUFXO0NBQ1gsb0NBQThDO0NBQTlDLDhDQUE4QztBQUMvQzs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixvQkFBb0I7Q0FDcEIsT0FBTztDQUNQLE1BQU07Q0FDTixZQUFZO0NBQ1osa0NBQXNDO0NBQXRDLHNDQUFzQztBQUN2Qzs7QUFFQTtDQUNDLCtDQUErQztBQUNoRDs7QUFFQTtDQUNDO0VBQ0MsUUFBUTtFQUNSLGNBQWM7RUFDZCxrQkFBa0I7Q0FDbkI7Q0FDQTtFQUNDLFVBQVU7RUFDVixjQUFjO0VBQ2QsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixlQUFlO0NBQ2hCO0NBQ0E7RUFDQyxVQUFVO0VBQ1YsZ0JBQWdCO0VBQ2hCLGVBQWU7Q0FDaEI7Q0FDQTtFQUNDLFVBQVU7RUFDVixnQkFBZ0I7RUFDaEIsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsUUFBUTtFQUNSLGlCQUFpQjtFQUNqQixlQUFlO0NBQ2hCO0FBQ0QiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIEdlbmVyYWwuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyIHtcblx0aGVpZ2h0OiB2YXIoLS10cy1wcm9ncmVzcy1iYXItaGVpZ2h0KTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5wcm9ncmVzcy1iYXItdG90YWwge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG59XG5cbi5wcm9ncmVzcy1iYXItZG9uZSB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdGxlZnQ6IDA7XG5cdHRvcDogMDtcblx0aGVpZ2h0OiAxMDAlO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyW2RhdGEtaW5kZXRlcm1pbmF0ZV0gLnByb2dyZXNzLWJhci1kb25lIHtcblx0YW5pbWF0aW9uOiBpbmZpbml0ZS1wcm9ncmVzcyAxcyBsaW5lYXIgaW5maW5pdGU7XG59XG5cbkBrZXlmcmFtZXMgaW5maW5pdGUtcHJvZ3Jlc3Mge1xuXHQwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDA7XG5cdFx0bWFyZ2luLXJpZ2h0OiAxMDAlO1xuXHR9XG5cdDIwJSB7XG5cdFx0d2lkdGg6IDMwJTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0NDAlIHtcblx0XHR3aWR0aDogMzAlO1xuXHRcdG1hcmdpbi1sZWZ0OiAzMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG5cdDYwJSB7XG5cdFx0d2lkdGg6IDQwJTtcblx0XHRtYXJnaW4tbGVmdDogNTAlO1xuXHRcdG1hcmdpbi1yaWdodDogMDtcblx0fVxuXHQ4MCUge1xuXHRcdHdpZHRoOiA0MCU7XG5cdFx0bWFyZ2luLWxlZnQ6IDcwJTtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0MTAwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDEwMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG59XG4iXX0= */";
 
-var css$2 = "/* General........................................................ */\n:host {\n\twidth: 100%;\n}\n\n.progress-bar-wrapper {\n\theight: calc(0.25 * 20px);\n\theight: var(--ts-progress-bar-height);\n\tborder-radius: 100em;\n\toverflow: hidden;\n}\n\n.progress-bar-total {\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: rgb(173, 229, 255);\n\tbackground-color: var(--ts-color-blue-lighter);\n}\n\n.progress-bar-done {\n\tposition: absolute;\n\tborder-radius: 100em;\n\tleft: 0;\n\ttop: 0;\n\theight: 100%;\n\tbackground-color: rgb(0, 174, 255);\n\tbackground-color: var(--ts-color-blue);\n}\n\n.progress-bar-wrapper[data-indeterminate] .progress-bar-done {\n\tanimation: infinite-progress 1s linear infinite;\n}\n\n@keyframes infinite-progress {\n\t0% {\n\t\twidth: 0;\n\t\tmargin-left: 0;\n\t\tmargin-right: 100%;\n\t}\n\t20% {\n\t\twidth: 30%;\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t40% {\n\t\twidth: 30%;\n\t\tmargin-left: 30%;\n\t\tmargin-right: 0;\n\t}\n\t60% {\n\t\twidth: 40%;\n\t\tmargin-left: 50%;\n\t\tmargin-right: 0;\n\t}\n\t80% {\n\t\twidth: 40%;\n\t\tmargin-left: 70%;\n\t\tmargin-right: 0;\n\t}\n\t100% {\n\t\twidth: 0;\n\t\tmargin-left: 100%;\n\t\tmargin-right: 0;\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FO0FBQ3BFO0NBQ0MsV0FBVztBQUNaOztBQUVBO0NBQ0MseUJBQXFDO0NBQXJDLHFDQUFxQztDQUNyQyxvQkFBb0I7Q0FDcEIsZ0JBQWdCO0FBQ2pCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLFlBQVk7Q0FDWixXQUFXO0NBQ1gsb0NBQThDO0NBQTlDLDhDQUE4QztBQUMvQzs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixvQkFBb0I7Q0FDcEIsT0FBTztDQUNQLE1BQU07Q0FDTixZQUFZO0NBQ1osa0NBQXNDO0NBQXRDLHNDQUFzQztBQUN2Qzs7QUFFQTtDQUNDLCtDQUErQztBQUNoRDs7QUFFQTtDQUNDO0VBQ0MsUUFBUTtFQUNSLGNBQWM7RUFDZCxrQkFBa0I7Q0FDbkI7Q0FDQTtFQUNDLFVBQVU7RUFDVixjQUFjO0VBQ2QsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixlQUFlO0NBQ2hCO0NBQ0E7RUFDQyxVQUFVO0VBQ1YsZ0JBQWdCO0VBQ2hCLGVBQWU7Q0FDaEI7Q0FDQTtFQUNDLFVBQVU7RUFDVixnQkFBZ0I7RUFDaEIsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsUUFBUTtFQUNSLGlCQUFpQjtFQUNqQixlQUFlO0NBQ2hCO0FBQ0QiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIEdlbmVyYWwuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyIHtcblx0aGVpZ2h0OiB2YXIoLS10cy1wcm9ncmVzcy1iYXItaGVpZ2h0KTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5wcm9ncmVzcy1iYXItdG90YWwge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG59XG5cbi5wcm9ncmVzcy1iYXItZG9uZSB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdGxlZnQ6IDA7XG5cdHRvcDogMDtcblx0aGVpZ2h0OiAxMDAlO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyW2RhdGEtaW5kZXRlcm1pbmF0ZV0gLnByb2dyZXNzLWJhci1kb25lIHtcblx0YW5pbWF0aW9uOiBpbmZpbml0ZS1wcm9ncmVzcyAxcyBsaW5lYXIgaW5maW5pdGU7XG59XG5cbkBrZXlmcmFtZXMgaW5maW5pdGUtcHJvZ3Jlc3Mge1xuXHQwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDA7XG5cdFx0bWFyZ2luLXJpZ2h0OiAxMDAlO1xuXHR9XG5cdDIwJSB7XG5cdFx0d2lkdGg6IDMwJTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0NDAlIHtcblx0XHR3aWR0aDogMzAlO1xuXHRcdG1hcmdpbi1sZWZ0OiAzMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG5cdDYwJSB7XG5cdFx0d2lkdGg6IDQwJTtcblx0XHRtYXJnaW4tbGVmdDogNTAlO1xuXHRcdG1hcmdpbi1yaWdodDogMDtcblx0fVxuXHQ4MCUge1xuXHRcdHdpZHRoOiA0MCU7XG5cdFx0bWFyZ2luLWxlZnQ6IDcwJTtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0MTAwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDEwMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG59XG4iXX0= */";
+  function _templateObject() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"progress-bar-wrapper\"\n\t\t\t\t\t?data-indeterminate=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"progress-bar-total\">\n\t\t\t\t\t\t<div style=\"", "\" class=\"progress-bar-done\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t"]);
 
-function _templateObject$2() {
-  const data = _taggedTemplateLiteralLoose$3(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"progress-bar-wrapper\"\n\t\t\t\t\t?data-indeterminate=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"progress-bar-total\">\n\t\t\t\t\t\t<div style=\"", "\" class=\"progress-bar-done\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t"]);
+    _templateObject = function _templateObject() {
+      return data;
+    };
 
-  _templateObject$2 = function _templateObject() {
     return data;
-  };
+  }
 
-  return data;
-}
+  elements.customElementDefineHelper('ts-progress-bar',
+  /*#__PURE__*/
+  function (_TSElement) {
+    _inheritsLoose(_class, _TSElement);
 
-elements.customElementDefineHelper('ts-progress-bar', class extends elements.TSElement {
-  static get styles() {
-    return [elements.TSElement.styles, elements.unsafeCSS(css$2)];
-  }
+    _createClass(_class, null, [{
+      key: "styles",
+      get: function get() {
+        return [elements.TSElement.styles, elements.unsafeCSS(css)];
+      }
+    }, {
+      key: "properties",
+      get: function get() {
+        return {
+          total: {
+            type: Number,
+            reflect: true
+          },
+          done: {
+            type: Number,
+            reflect: true
+          },
+          indeterminate: {
+            type: Boolean,
+            reflect: true
+          }
+        };
+      }
+    }]);
 
-  static get properties() {
-    return {
-      total: {
-        type: Number,
-        reflect: true
-      },
-      done: {
-        type: Number,
-        reflect: true
-      },
-      indeterminate: {
-        type: Boolean,
-        reflect: true
-      }
+    function _class() {
+      var _this;
+
+      _this = _TSElement.call(this) || this;
+      _this.total = 100;
+      _this.done = 0;
+      _this.indeterminate = false;
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.render = function render() {
+      return elements.html(_templateObject(), this.indeterminate, this.doneWidthStyle);
     };
-  }
 
-  constructor() {
-    super();
-    this.total = 100;
-    this.done = 0;
-    this.indeterminate = false;
-  }
+    _createClass(_class, [{
+      key: "doneWidthStyle",
+      get: function get() {
+        if (!this.indeterminate) {
+          return "width: " + this.done / this.total * 100 + "%";
+        }
+      }
+    }]);
 
-  get doneWidthStyle() {
-    if (!this.indeterminate) {
-      return "width: " + this.done / this.total * 100 + "%";
+    return _class;
+  }(elements.TSElement));
+});
+
+(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);
     }
   }
 
-  render() {
-    return elements.html(_templateObject$2(), this.indeterminate, this.doneWidthStyle);
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
   }
 
-});
-
-function _taggedTemplateLiteralLoose$4(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    subClass.__proto__ = superClass;
   }
 
-  strings.raw = raw;
-  return strings;
-}
+  function _taggedTemplateLiteralLoose(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
 
-function _taggedTemplateLiteralLoose$1$1(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+    strings.raw = raw;
+    return strings;
   }
 
-  strings.raw = raw;
-  return strings;
-}
+  (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);
+      }
+    }
 
-var css$3 = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      return Constructor;
+    }
 
-function _templateObject$3() {
-  const data = _taggedTemplateLiteralLoose$1$1(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
+    function _inheritsLoose(subClass, superClass) {
+      subClass.prototype = Object.create(superClass.prototype);
+      subClass.prototype.constructor = subClass;
+      subClass.__proto__ = superClass;
+    }
 
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
+    function _taggedTemplateLiteralLoose(strings, raw) {
+      if (!raw) {
+        raw = strings.slice(0);
+      }
 
-  return data;
-}
+      strings.raw = raw;
+      return strings;
+    }
 
-elements.customElementDefineHelper('ts-typography', class extends elements.TSElement {
-  constructor() {
-    super();
-    this.text = '';
-    this.color = 'default';
-    this.variant = 'default';
-    this.inline = false;
-    this.noWrap = false;
-  }
+    var css = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
 
-  static get styles() {
-    return [elements.TSElement.styles, elements.unsafeCSS(css$3)];
-  }
+    function _templateObject() {
+      var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
 
-  static get properties() {
-    return {
-      text: {
-        type: String,
-        reflect: true
-      },
-      variant: {
-        type: String,
-        reflect: true
-      },
-      color: {
-        type: String,
-        reflect: true
-      },
-      inline: {
-        type: Boolean,
-        reflect: true
-      },
-      classNames: {
-        type: String,
-        reflect: true,
-        attribute: 'class-names'
-      },
-      noWrap: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'no-wrap'
+      _templateObject = function _templateObject() {
+        return data;
+      };
+
+      return data;
+    }
+
+    elements.customElementDefineHelper('ts-typography',
+    /*#__PURE__*/
+    function (_TSElement) {
+      _inheritsLoose(_class, _TSElement);
+
+      function _class() {
+        var _this;
+
+        _this = _TSElement.call(this) || this;
+        _this.text = '';
+        _this.color = 'default';
+        _this.variant = 'default';
+        _this.inline = false;
+        _this.noWrap = false;
+        return _this;
       }
-    };
-  }
 
-  render() {
-    return elements.html(_templateObject$3(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
-  }
+      var _proto = _class.prototype;
 
-});
-var css$1$1 = "\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJmaWxlLXNpemUuY3NzIn0= */";
+      _proto.render = function render() {
+        return elements.html(_templateObject(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
+      };
 
-function _templateObject$1$1() {
-  const data = _taggedTemplateLiteralLoose$4(["\n\t\t\t\t<ts-typography\n\t\t\t\t\ttext=\"", "\"\n\t\t\t\t\tvariant=\"", "\"\n\t\t\t\t\tcolor=\"", "\"\n\t\t\t\t></ts-typography>\n\t\t\t"]);
+      _createClass(_class, null, [{
+        key: "styles",
+        get: function get() {
+          return [elements.TSElement.styles, elements.unsafeCSS(css)];
+        }
+      }, {
+        key: "properties",
+        get: function get() {
+          return {
+            text: {
+              type: String,
+              reflect: true
+            },
+            variant: {
+              type: String,
+              reflect: true
+            },
+            color: {
+              type: String,
+              reflect: true
+            },
+            inline: {
+              type: Boolean,
+              reflect: true
+            },
+            classNames: {
+              type: String,
+              reflect: true,
+              attribute: 'class-names'
+            },
+            noWrap: {
+              type: Boolean,
+              reflect: true,
+              attribute: 'no-wrap'
+            }
+          };
+        }
+      }]);
 
-  _templateObject$1$1 = function _templateObject() {
-    return data;
-  };
+      return _class;
+    }(elements.TSElement));
+  });
 
-  return data;
-}
+  var css = "\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJmaWxlLXNpemUuY3NzIn0= */";
 
-elements.customElementDefineHelper('ts-file-size', class extends elements.TSElement {
-  static get styles() {
-    return [elements.TSElement.styles, elements.unsafeCSS(css$1$1)];
-  }
+  function _templateObject() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<ts-typography\n\t\t\t\t\ttext=\"", "\"\n\t\t\t\t\tvariant=\"", "\"\n\t\t\t\t\tcolor=\"", "\"\n\t\t\t\t></ts-typography>\n\t\t\t"]);
 
-  static get properties() {
-    return {
-      size: {
-        type: Number,
-        reflect: true
-      },
-      decimalPoint: {
-        type: Number,
-        reflect: true,
-        attribute: 'decimal-point'
-      },
-      variant: {
-        type: String,
-        reflect: true
-      },
-      color: {
-        type: String,
-        reflect: true
-      }
+    _templateObject = function _templateObject() {
+      return data;
     };
-  }
 
-  constructor() {
-    super();
-    this.size = 0;
-    this.decimalPoint = 2;
-    this.variant = 'subtitle';
-    this.color = 'default';
+    return data;
   }
 
-  get formatFileSize() {
-    const bytes = this.size;
-    const decimalPoint = this.decimalPoint;
+  elements.customElementDefineHelper('ts-file-size',
+  /*#__PURE__*/
+  function (_TSElement) {
+    _inheritsLoose(_class, _TSElement);
 
-    if (bytes === 0) {
-      return '0 Bytes';
+    _createClass(_class, null, [{
+      key: "styles",
+      get: function get() {
+        return [elements.TSElement.styles, elements.unsafeCSS(css)];
+      }
+    }, {
+      key: "properties",
+      get: function get() {
+        return {
+          size: {
+            type: Number,
+            reflect: true
+          },
+          decimalPoint: {
+            type: Number,
+            reflect: true,
+            attribute: 'decimal-point'
+          },
+          variant: {
+            type: String,
+            reflect: true
+          },
+          color: {
+            type: String,
+            reflect: true
+          }
+        };
+      }
+    }]);
+
+    function _class() {
+      var _this;
+
+      _this = _TSElement.call(this) || this;
+      _this.size = 0;
+      _this.decimalPoint = 2;
+      _this.variant = 'subtitle';
+      _this.color = 'default';
+      return _this;
     }
 
-    const k = 1000;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];
-  }
+    var _proto = _class.prototype;
 
-  render() {
-    return elements.html(_templateObject$1$1(), this.formatFileSize, this.variant, this.color);
-  }
+    _proto.render = function render() {
+      return elements.html(_templateObject(), this.formatFileSize, this.variant, this.color);
+    };
 
+    _createClass(_class, [{
+      key: "formatFileSize",
+      get: function get() {
+        var bytes = this.size;
+        var decimalPoint = this.decimalPoint;
+
+        if (bytes === 0) {
+          return '0 Bytes';
+        }
+
+        var k = 1000;
+        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];
+      }
+    }]);
+
+    return _class;
+  }(elements.TSElement));
 });
 
-var css$4 = ":host {\n\tdisplay: block;\n}\n\n.action-icon,\n.file-icon-wrapper .file-icon {\n\tmargin-top: calc(0.25 * 20px);\n\tmargin-top: var(--ts-unit-quarter);\n}\n\n.file-icon-wrapper .file-icon #outline {\n\tfill: rgb(255, 255, 255);\n\tfill: var(--ts-color-white);\n\tstroke: rgb(130, 159, 171);\n\tstroke: var(--ts-color-gray-dark);\n}\n\n.file-icon-wrapper .file-icon #fold {\n\tfill: rgb(130, 159, 171);\n\tfill: var(--ts-color-gray-dark);\n}\n\n.dots-icon circle {\n\tfill: rgb(154, 178, 188);\n\tfill: var(--ts-color-gray);\n}\n\n.file-name {\n\tfont-weight: bold;\n}\n\n.action-icon {\n\tfill: rgb(80, 107, 119);\n\tfill: var(--ts-color-slate-lightest);\n}\n\n.content,\n.file-icon-wrapper,\n.download-action,\n.remove-action {\n\tcursor: pointer;\n}\n\n.state-uploading .content,\n.state-uploading .file-icon-wrapper,\n.state-failed .content,\n.state-failed .file-icon-wrapper {\n\tcursor: default;\n}\n\n.content {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\tflex-grow: 2;\n\tmax-width: calc(100% - 20px - 35px);\n\twidth: calc(100% - 20px - 35px);\n\tpadding: calc(0.5 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-half) var(--ts-unit-half);\n}\n\n.remove-action-message,\n.download-action-message {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n.remove-action-message,\n.download-action-message {\n\tdisplay: none;\n}\n\n.download-action-hovered .file-information,\n\t.download-action-hovered .error-message,\n\t.download-action-hovered .progress-bar,\n\t.remove-action-hovered .file-information,\n\t.remove-action-hovered .error-message,\n\t.remove-action-hovered .progress-bar {\n\t\tdisplay: none;\n\t}\n\n.download-action-hovered.state-uploading .download-action-message, .download-action-hovered.state-failed .download-action-message {\n\t\t\tdisplay: none;\n\t\t}\n\n.download-action-hovered.state-uploading .file-information,\n\t\t.download-action-hovered.state-uploading .error-message,\n\t\t.download-action-hovered.state-uploading .progress-bar,\n\t\t.download-action-hovered.state-failed .file-information,\n\t\t.download-action-hovered.state-failed .error-message,\n\t\t.download-action-hovered.state-failed .progress-bar {\n\t\t\tdisplay: inline;\n\t\t\tdisplay: initial;\n\t\t}\n\n.remove-action-hovered .remove-action-message,\n.download-action-hovered .download-action-message {\n\tdisplay: block;\n}\n\n.download-action-hovered .download-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n.remove-action-hovered .remove-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n\n.progress-bar {\n\t--ts-progress-bar-margin: calc(\n\t\t(var(--ts-unit) - var(--ts-progress-bar-height)) / 2\n\t);\n\tmargin: var(--ts-progress-bar-margin) 0;\n}\n\n.action-icon-wrapper {\n\tdisplay: none;\n}\n\n.state-uploading .remove-action, .state-download[data-removable] .remove-action, .state-failed .remove-action {\n\t\tdisplay: block;\n\t}\n\n.state-download .download-action {\n\tdisplay: block;\n}\n\n.state-download[data-removable] .download-action {\n\tdisplay: none;\n}\n\n.file-information {\n\tdisplay: flex;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGUtY2FyZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7O0NBRUMsNkJBQWtDO0NBQWxDLGtDQUFrQztBQUNuQzs7QUFFQTtDQUNDLHdCQUEyQjtDQUEzQiwyQkFBMkI7Q0FDM0IsMEJBQWlDO0NBQWpDLGlDQUFpQztBQUNsQzs7QUFFQTtDQUNDLHdCQUErQjtDQUEvQiwrQkFBK0I7QUFDaEM7O0FBRUE7Q0FDQyx3QkFBMEI7Q0FBMUIsMEJBQTBCO0FBQzNCOztBQUVBO0NBQ0MsaUJBQWlCO0FBQ2xCOztBQUVBO0NBQ0MsdUJBQW9DO0NBQXBDLG9DQUFvQztBQUNyQzs7QUFFQTs7OztDQUlDLGVBQWU7QUFDaEI7O0FBRUE7Ozs7Q0FJQyxlQUFlO0FBQ2hCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGFBQWE7Q0FDYixzQkFBc0I7Q0FDdEIsdUJBQXVCO0NBQ3ZCLFlBQVk7Q0FDWixtQ0FBbUM7Q0FDbkMsK0JBQStCO0NBQy9CLDBDQUFnRDtDQUFoRCxnREFBZ0Q7QUFDakQ7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTs7Q0FFQyxhQUFhO0FBQ2Q7O0FBSUM7Ozs7OztFQUdDLGFBQWE7Q0FDZDs7QUFNQztHQUNDLGFBQWE7RUFDZDs7QUFFQTs7Ozs7O0dBR0MsZUFBZ0I7R0FBaEIsZ0JBQWdCO0VBQ2pCOztBQUlGOztDQUVDLGNBQWM7QUFDZjs7QUFJRTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7QUFLQTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7O0FBSUY7Q0FDQzs7RUFFQztDQUNELHVDQUF1QztBQUN4Qzs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFLQztFQUNDLGNBQWM7Q0FDZjs7QUFHRDtDQUNDLGNBQWM7QUFDZjs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFFQTtDQUNDLGFBQWE7QUFDZCIsImZpbGUiOiJmaWxlLWNhcmQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuLmFjdGlvbi1pY29uLFxuLmZpbGUtaWNvbi13cmFwcGVyIC5maWxlLWljb24ge1xuXHRtYXJnaW4tdG9wOiB2YXIoLS10cy11bml0LXF1YXJ0ZXIpO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjb3V0bGluZSB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0c3Ryb2tlOiB2YXIoLS10cy1jb2xvci1ncmF5LWRhcmspO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjZm9sZCB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLWdyYXktZGFyayk7XG59XG5cbi5kb3RzLWljb24gY2lyY2xlIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItZ3JheSk7XG59XG5cbi5maWxlLW5hbWUge1xuXHRmb250LXdlaWdodDogYm9sZDtcbn1cblxuLmFjdGlvbi1pY29uIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3Itc2xhdGUtbGlnaHRlc3QpO1xufVxuXG4uY29udGVudCxcbi5maWxlLWljb24td3JhcHBlcixcbi5kb3dubG9hZC1hY3Rpb24sXG4ucmVtb3ZlLWFjdGlvbiB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnN0YXRlLXVwbG9hZGluZyAuY29udGVudCxcbi5zdGF0ZS11cGxvYWRpbmcgLmZpbGUtaWNvbi13cmFwcGVyLFxuLnN0YXRlLWZhaWxlZCAuY29udGVudCxcbi5zdGF0ZS1mYWlsZWQgLmZpbGUtaWNvbi13cmFwcGVyIHtcblx0Y3Vyc29yOiBkZWZhdWx0O1xufVxuXG4uY29udGVudCB7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGZsZXgtZ3JvdzogMjtcblx0bWF4LXdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtaGFsZikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5kb3dubG9hZC1hY3Rpb24taG92ZXJlZCxcbi5yZW1vdmUtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5maWxlLWluZm9ybWF0aW9uLFxuXHQmIC5lcnJvci1tZXNzYWdlLFxuXHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdGRpc3BsYXk6IG5vbmU7XG5cdH1cbn1cblxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIHtcblx0Ji5zdGF0ZS11cGxvYWRpbmcsXG5cdCYuc3RhdGUtZmFpbGVkIHtcblx0XHQmIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdH1cblxuXHRcdCYgLmZpbGUtaW5mb3JtYXRpb24sXG5cdFx0JiAuZXJyb3ItbWVzc2FnZSxcblx0XHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdFx0ZGlzcGxheTogaW5pdGlhbDtcblx0XHR9XG5cdH1cbn1cblxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCAucmVtb3ZlLWFjdGlvbi1tZXNzYWdlLFxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xufVxuXG4uZG93bmxvYWQtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5kb3dubG9hZC1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuXG4ucHJvZ3Jlc3MtYmFyIHtcblx0LS10cy1wcm9ncmVzcy1iYXItbWFyZ2luOiBjYWxjKFxuXHRcdCh2YXIoLS10cy11bml0KSAtIHZhcigtLXRzLXByb2dyZXNzLWJhci1oZWlnaHQpKSAvIDJcblx0KTtcblx0bWFyZ2luOiB2YXIoLS10cy1wcm9ncmVzcy1iYXItbWFyZ2luKSAwO1xufVxuXG4uYWN0aW9uLWljb24td3JhcHBlciB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zdGF0ZS11cGxvYWRpbmcsXG4uc3RhdGUtZG93bmxvYWRbZGF0YS1yZW1vdmFibGVdLFxuLnN0YXRlLWZhaWxlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHR9XG59XG5cbi5zdGF0ZS1kb3dubG9hZCAuZG93bmxvYWQtYWN0aW9uIHtcblx0ZGlzcGxheTogYmxvY2s7XG59XG5cbi5zdGF0ZS1kb3dubG9hZFtkYXRhLXJlbW92YWJsZV0gLmRvd25sb2FkLWFjdGlvbiB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5maWxlLWluZm9ybWF0aW9uIHtcblx0ZGlzcGxheTogZmxleDtcbn1cbiJdfQ== */";
+var css = ":host {\n\tdisplay: block;\n}\n\n.action-icon,\n.file-icon-wrapper .file-icon {\n\tmargin-top: calc(0.25 * 20px);\n\tmargin-top: var(--ts-unit-quarter);\n}\n\n.file-icon-wrapper .file-icon #outline {\n\tfill: rgb(255, 255, 255);\n\tfill: var(--ts-color-white);\n\tstroke: rgb(130, 159, 171);\n\tstroke: var(--ts-color-gray-dark);\n}\n\n.file-icon-wrapper .file-icon #fold {\n\tfill: rgb(130, 159, 171);\n\tfill: var(--ts-color-gray-dark);\n}\n\n.dots-icon circle {\n\tfill: rgb(154, 178, 188);\n\tfill: var(--ts-color-gray);\n}\n\n.file-name {\n\tfont-weight: bold;\n}\n\n.action-icon {\n\tfill: rgb(80, 107, 119);\n\tfill: var(--ts-color-slate-lightest);\n}\n\n.content,\n.file-icon-wrapper,\n.download-action,\n.remove-action {\n\tcursor: pointer;\n}\n\n.state-uploading .content,\n.state-uploading .file-icon-wrapper,\n.state-failed .content,\n.state-failed .file-icon-wrapper {\n\tcursor: default;\n}\n\n.content {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\tflex-grow: 2;\n\tmax-width: calc(100% - 20px - 35px);\n\twidth: calc(100% - 20px - 35px);\n\tpadding: calc(0.5 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-half) var(--ts-unit-half);\n}\n\n.remove-action-message,\n.download-action-message {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n.remove-action-message,\n.download-action-message {\n\tdisplay: none;\n}\n\n.download-action-hovered .file-information,\n\t.download-action-hovered .error-message,\n\t.download-action-hovered .progress-bar,\n\t.remove-action-hovered .file-information,\n\t.remove-action-hovered .error-message,\n\t.remove-action-hovered .progress-bar {\n\t\tdisplay: none;\n\t}\n\n.download-action-hovered.state-uploading .download-action-message, .download-action-hovered.state-failed .download-action-message {\n\t\t\tdisplay: none;\n\t\t}\n\n.download-action-hovered.state-uploading .file-information,\n\t\t.download-action-hovered.state-uploading .error-message,\n\t\t.download-action-hovered.state-uploading .progress-bar,\n\t\t.download-action-hovered.state-failed .file-information,\n\t\t.download-action-hovered.state-failed .error-message,\n\t\t.download-action-hovered.state-failed .progress-bar {\n\t\t\tdisplay: inline;\n\t\t\tdisplay: initial;\n\t\t}\n\n.remove-action-hovered .remove-action-message,\n.download-action-hovered .download-action-message {\n\tdisplay: block;\n}\n\n.download-action-hovered .download-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n.remove-action-hovered .remove-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n\n.progress-bar {\n\t--ts-progress-bar-margin: calc(\n\t\t(var(--ts-unit) - var(--ts-progress-bar-height)) / 2\n\t);\n\tmargin: var(--ts-progress-bar-margin) 0;\n}\n\n.action-icon-wrapper {\n\tdisplay: none;\n}\n\n.state-uploading .remove-action, .state-download[data-removable] .remove-action, .state-failed .remove-action {\n\t\tdisplay: block;\n\t}\n\n.state-download .download-action {\n\tdisplay: block;\n}\n\n.state-download[data-removable] .download-action {\n\tdisplay: none;\n}\n\n.file-information {\n\tdisplay: flex;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGUtY2FyZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7O0NBRUMsNkJBQWtDO0NBQWxDLGtDQUFrQztBQUNuQzs7QUFFQTtDQUNDLHdCQUEyQjtDQUEzQiwyQkFBMkI7Q0FDM0IsMEJBQWlDO0NBQWpDLGlDQUFpQztBQUNsQzs7QUFFQTtDQUNDLHdCQUErQjtDQUEvQiwrQkFBK0I7QUFDaEM7O0FBRUE7Q0FDQyx3QkFBMEI7Q0FBMUIsMEJBQTBCO0FBQzNCOztBQUVBO0NBQ0MsaUJBQWlCO0FBQ2xCOztBQUVBO0NBQ0MsdUJBQW9DO0NBQXBDLG9DQUFvQztBQUNyQzs7QUFFQTs7OztDQUlDLGVBQWU7QUFDaEI7O0FBRUE7Ozs7Q0FJQyxlQUFlO0FBQ2hCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGFBQWE7Q0FDYixzQkFBc0I7Q0FDdEIsdUJBQXVCO0NBQ3ZCLFlBQVk7Q0FDWixtQ0FBbUM7Q0FDbkMsK0JBQStCO0NBQy9CLDBDQUFnRDtDQUFoRCxnREFBZ0Q7QUFDakQ7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTs7Q0FFQyxhQUFhO0FBQ2Q7O0FBSUM7Ozs7OztFQUdDLGFBQWE7Q0FDZDs7QUFNQztHQUNDLGFBQWE7RUFDZDs7QUFFQTs7Ozs7O0dBR0MsZUFBZ0I7R0FBaEIsZ0JBQWdCO0VBQ2pCOztBQUlGOztDQUVDLGNBQWM7QUFDZjs7QUFJRTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7QUFLQTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7O0FBSUY7Q0FDQzs7RUFFQztDQUNELHVDQUF1QztBQUN4Qzs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFLQztFQUNDLGNBQWM7Q0FDZjs7QUFHRDtDQUNDLGNBQWM7QUFDZjs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFFQTtDQUNDLGFBQWE7QUFDZCIsImZpbGUiOiJmaWxlLWNhcmQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuLmFjdGlvbi1pY29uLFxuLmZpbGUtaWNvbi13cmFwcGVyIC5maWxlLWljb24ge1xuXHRtYXJnaW4tdG9wOiB2YXIoLS10cy11bml0LXF1YXJ0ZXIpO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjb3V0bGluZSB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0c3Ryb2tlOiB2YXIoLS10cy1jb2xvci1ncmF5LWRhcmspO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjZm9sZCB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLWdyYXktZGFyayk7XG59XG5cbi5kb3RzLWljb24gY2lyY2xlIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItZ3JheSk7XG59XG5cbi5maWxlLW5hbWUge1xuXHRmb250LXdlaWdodDogYm9sZDtcbn1cblxuLmFjdGlvbi1pY29uIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3Itc2xhdGUtbGlnaHRlc3QpO1xufVxuXG4uY29udGVudCxcbi5maWxlLWljb24td3JhcHBlcixcbi5kb3dubG9hZC1hY3Rpb24sXG4ucmVtb3ZlLWFjdGlvbiB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnN0YXRlLXVwbG9hZGluZyAuY29udGVudCxcbi5zdGF0ZS11cGxvYWRpbmcgLmZpbGUtaWNvbi13cmFwcGVyLFxuLnN0YXRlLWZhaWxlZCAuY29udGVudCxcbi5zdGF0ZS1mYWlsZWQgLmZpbGUtaWNvbi13cmFwcGVyIHtcblx0Y3Vyc29yOiBkZWZhdWx0O1xufVxuXG4uY29udGVudCB7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGZsZXgtZ3JvdzogMjtcblx0bWF4LXdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtaGFsZikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5kb3dubG9hZC1hY3Rpb24taG92ZXJlZCxcbi5yZW1vdmUtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5maWxlLWluZm9ybWF0aW9uLFxuXHQmIC5lcnJvci1tZXNzYWdlLFxuXHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdGRpc3BsYXk6IG5vbmU7XG5cdH1cbn1cblxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIHtcblx0Ji5zdGF0ZS11cGxvYWRpbmcsXG5cdCYuc3RhdGUtZmFpbGVkIHtcblx0XHQmIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdH1cblxuXHRcdCYgLmZpbGUtaW5mb3JtYXRpb24sXG5cdFx0JiAuZXJyb3ItbWVzc2FnZSxcblx0XHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdFx0ZGlzcGxheTogaW5pdGlhbDtcblx0XHR9XG5cdH1cbn1cblxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCAucmVtb3ZlLWFjdGlvbi1tZXNzYWdlLFxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xufVxuXG4uZG93bmxvYWQtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5kb3dubG9hZC1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuXG4ucHJvZ3Jlc3MtYmFyIHtcblx0LS10cy1wcm9ncmVzcy1iYXItbWFyZ2luOiBjYWxjKFxuXHRcdCh2YXIoLS10cy11bml0KSAtIHZhcigtLXRzLXByb2dyZXNzLWJhci1oZWlnaHQpKSAvIDJcblx0KTtcblx0bWFyZ2luOiB2YXIoLS10cy1wcm9ncmVzcy1iYXItbWFyZ2luKSAwO1xufVxuXG4uYWN0aW9uLWljb24td3JhcHBlciB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zdGF0ZS11cGxvYWRpbmcsXG4uc3RhdGUtZG93bmxvYWRbZGF0YS1yZW1vdmFibGVdLFxuLnN0YXRlLWZhaWxlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHR9XG59XG5cbi5zdGF0ZS1kb3dubG9hZCAuZG93bmxvYWQtYWN0aW9uIHtcblx0ZGlzcGxheTogYmxvY2s7XG59XG5cbi5zdGF0ZS1kb3dubG9hZFtkYXRhLXJlbW92YWJsZV0gLmRvd25sb2FkLWFjdGlvbiB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5maWxlLWluZm9ybWF0aW9uIHtcblx0ZGlzcGxheTogZmxleDtcbn1cbiJdfQ== */";
 
@@ -437,6 +648,6 @@ function _templateObject7() {
 
-function _templateObject$4() {
+function _templateObject() {
   const data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t<ts-typography\n\t\t\t\t\t\tclass=\"error-message\"\n\t\t\t\t\t\ttext=\"", "\"\n\t\t\t\t\t\tcolor=\"error\"\n\t\t\t\t\t\tvariant=\"subtitle\"\n\t\t\t\t\t\tno-wrap\n\t\t\t\t\t></ts-typography>\n\t\t\t\t"]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject = function _templateObject() {
     return data;
@@ -460,3 +671,3 @@ };
   static get styles() {
-    return [elements.TSElement.styles, elements.unsafeCSS(css$4)];
+    return [elements.TSElement.styles, elements.unsafeCSS(css)];
   }
@@ -506,3 +717,3 @@
       const message = this.errorMessage;
-      return elements.html(_templateObject$4(), message);
+      return elements.html(_templateObject(), message);
     }
@@ -509,0 +720,0 @@ }

lib/file-card.umd.js

@@ -46,440 +46,575 @@ (function (global, factory) {
 
-  function _taggedTemplateLiteralLoose$1(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+  (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);
+      }
     }
 
-    strings.raw = raw;
-    return strings;
-  }
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      return Constructor;
+    }
 
-  var css = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
+    function _inheritsLoose(subClass, superClass) {
+      subClass.prototype = Object.create(superClass.prototype);
+      subClass.prototype.constructor = subClass;
+      subClass.__proto__ = superClass;
+    }
 
-  function _templateObject() {
-    var data = _taggedTemplateLiteralLoose$1(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
+    function _taggedTemplateLiteralLoose(strings, raw) {
+      if (!raw) {
+        raw = strings.slice(0);
+      }
 
-    _templateObject = function _templateObject() {
-      return data;
-    };
+      strings.raw = raw;
+      return strings;
+    }
 
-    return data;
-  }
+    var css = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
 
-  elements.customElementDefineHelper('ts-typography',
-  /*#__PURE__*/
-  function (_TSElement) {
-    _inheritsLoose(_class, _TSElement);
+    function _templateObject() {
+      var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
 
-    function _class() {
-      var _this;
+      _templateObject = function _templateObject() {
+        return data;
+      };
 
-      _this = _TSElement.call(this) || this;
-      _this.text = '';
-      _this.color = 'default';
-      _this.variant = 'default';
-      _this.inline = false;
-      _this.noWrap = false;
-      return _this;
+      return data;
     }
 
-    var _proto = _class.prototype;
+    elements.customElementDefineHelper('ts-typography',
+    /*#__PURE__*/
+    function (_TSElement) {
+      _inheritsLoose(_class, _TSElement);
 
-    _proto.render = function render() {
-      return elements.html(_templateObject(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
-    };
+      function _class() {
+        var _this;
 
-    _createClass(_class, null, [{
-      key: "styles",
-      get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(css)];
+        _this = _TSElement.call(this) || this;
+        _this.text = '';
+        _this.color = 'default';
+        _this.variant = 'default';
+        _this.inline = false;
+        _this.noWrap = false;
+        return _this;
       }
-    }, {
-      key: "properties",
-      get: function get() {
-        return {
-          text: {
-            type: String,
-            reflect: true
-          },
-          variant: {
-            type: String,
-            reflect: true
-          },
-          color: {
-            type: String,
-            reflect: true
-          },
-          inline: {
-            type: Boolean,
-            reflect: true
-          },
-          classNames: {
-            type: String,
-            reflect: true,
-            attribute: 'class-names'
-          },
-          noWrap: {
-            type: Boolean,
-            reflect: true,
-            attribute: 'no-wrap'
-          }
-        };
+
+      var _proto = _class.prototype;
+
+      _proto.render = function render() {
+        return elements.html(_templateObject(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
+      };
+
+      _createClass(_class, null, [{
+        key: "styles",
+        get: function get() {
+          return [elements.TSElement.styles, elements.unsafeCSS(css)];
+        }
+      }, {
+        key: "properties",
+        get: function get() {
+          return {
+            text: {
+              type: String,
+              reflect: true
+            },
+            variant: {
+              type: String,
+              reflect: true
+            },
+            color: {
+              type: String,
+              reflect: true
+            },
+            inline: {
+              type: Boolean,
+              reflect: true
+            },
+            classNames: {
+              type: String,
+              reflect: true,
+              attribute: 'class-names'
+            },
+            noWrap: {
+              type: Boolean,
+              reflect: true,
+              attribute: 'no-wrap'
+            }
+          };
+        }
+      }]);
+
+      return _class;
+    }(elements.TSElement));
+  });
+
+  (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);
       }
-    }]);
+    }
 
-    return _class;
-  }(elements.TSElement));
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      return Constructor;
+    }
 
-  function _taggedTemplateLiteralLoose$2(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+    function _inheritsLoose(subClass, superClass) {
+      subClass.prototype = Object.create(superClass.prototype);
+      subClass.prototype.constructor = subClass;
+      subClass.__proto__ = superClass;
     }
 
-    strings.raw = raw;
-    return strings;
-  }
+    function _taggedTemplateLiteralLoose(strings, raw) {
+      if (!raw) {
+        raw = strings.slice(0);
+      }
 
-  var css$1 = "/* General........................................................ */\n\n:host {\n\twidth: 100%;\n}\n\n.card {\n\twidth: 100%;\n\tposition: relative;\n\tborder-radius: 3px;\n\tborder-radius: var(--ts-radius);\n\tborder: 1px solid\n\t\trgb(203, 215, 220);\n\tborder: var(--ts-border);\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\toverflow: hidden;\n\tpadding: calc(0.25 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-quarter) var(--ts-unit-half);\n\tbackground-color: rgb(255, 255, 255);\n\tbackground-color: var(--ts-color-white);\n\ttransition: box-shadow 0.1s,\n\t\tborder-color 0.1s;\n\ttransition: box-shadow var(--ts-transition-now),\n\t\tborder-color var(--ts-transition-now)\n}\n\n.card:hover {\n\t\tborder-color: rgb(0, 174, 255);\n\t\tborder-color: var(--ts-color-blue);\n\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t}\n\n.card[data-no-horizontal-padding] {\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n.card[data-no-vertical-padding] {\n\t\tpadding-top: 0;\n\t\tpadding-bottom: 0;\n\t}\n\n.card[data-no-padding] {\n\t\tpadding: 0;\n\t}\n\n.card {\n\n\t/* types */\n}\n\n.card[data-type='error'],\n\t.card[data-type='failed'],\n\t.card[data-type='danger'] {\n\t\tborder: 1px solid\n\t\trgb(189, 0, 0);\n\t\tborder: var(--ts-border-error)\n\t}\n\n.card[data-type='error']:hover, .card[data-type='failed']:hover, .card[data-type='danger']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(234, 174, 174);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-red-lighter);\n\t\t}\n\n.card[data-type='success'] {\n\t\tborder: 1px solid\n\t\trgb(80, 198, 16);\n\t\tborder: var(--ts-border-success)\n\t}\n\n.card[data-type='success']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(198, 236, 177);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-green-lighter);\n\t\t}\n\n.card[data-type='focus'],\n\t.card[data-type='active'],\n\t.card[data-type='primary'] {\n\t\tborder: 1px solid\n\t\trgb(0, 174, 255);\n\t\tborder: var(--ts-border-focus)\n\t}\n\n.card[data-type='focus']:hover, .card[data-type='active']:hover, .card[data-type='primary']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t\t}\n\n.card {\n\n\t/* orientations */\n}\n\n.card[data-orientation='horizontal'],\n\t.card[data-orientation='h'] {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n.card[data-orientation='vertical'],\n\t.card[data-orientation='v'] {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t}\n\n.card[data-size='small'] {\n\t\twidth: 280px;\n\t\twidth: var(--ts-box-width-small);\n\t}\n\n.card[data-size='medium'] {\n\t\twidth: 360px;\n\t\twidth: var(--ts-box-width-medium);\n\t}\n\n.card[data-rtl] {\n\t\tdirection: rtl;\n\t}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxXQUFXO0FBQ1o7O0FBRUE7Q0FDQyxXQUFXO0NBQ1gsa0JBQWtCO0NBQ2xCLGtCQUErQjtDQUEvQiwrQkFBK0I7Q0FDL0I7b0JBQXdCO0NBQXhCLHdCQUF3QjtDQUN4QiwrQkFBa0M7Q0FBbEMsa0NBQWtDO0NBQ2xDLGdCQUFnQjtDQUNoQiwyQ0FBbUQ7Q0FBbkQsbURBQW1EO0NBQ25ELG9DQUF1QztDQUF2Qyx1Q0FBdUM7Q0FDdkM7bUJBQ3NDO0NBRHRDOztBQTRFRDs7QUF6RUM7RUFDQyw4QkFBa0M7RUFBbEMsa0NBQWtDO0VBQ2xDLHdDQUFrRDtFQUFsRCxrREFBa0Q7Q0FDbkQ7O0FBRUE7RUFDQyxlQUFlO0VBQ2YsZ0JBQWdCO0NBQ2pCOztBQUVBO0VBQ0MsY0FBYztFQUNkLGlCQUFpQjtDQUNsQjs7QUFFQTtFQUNDLFVBQVU7Q0FDWDs7QUE3QkQ7O0NBK0JDLFVBQVU7QUFzRFg7O0FBckRDOzs7RUFHQztnQkFBOEI7RUFBOUI7Q0FLRDs7QUFIQztHQUNDLHdDQUFpRDtHQUFqRCxpREFBaUQ7RUFDbEQ7O0FBR0Q7RUFDQztrQkFBZ0M7RUFBaEM7Q0FLRDs7QUFIQztHQUNDLHdDQUFtRDtHQUFuRCxtREFBbUQ7RUFDcEQ7O0FBR0Q7OztFQUdDO2tCQUE4QjtFQUE5QjtDQUtEOztBQUhDO0dBQ0Msd0NBQWtEO0dBQWxELGtEQUFrRDtFQUNuRDs7QUF6REY7O0NBNERDLGlCQUFpQjtBQXlCbEI7O0FBeEJDOztFQUVDLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsOEJBQThCO0NBQy9COztBQUVBOztFQUVDLHNCQUFzQjtFQUN0Qix1QkFBdUI7Q0FDeEI7O0FBRUE7RUFDQyxZQUFnQztFQUFoQyxnQ0FBZ0M7Q0FDakM7O0FBRUE7RUFDQyxZQUFpQztFQUFqQyxpQ0FBaUM7Q0FDbEM7O0FBRUE7RUFDQyxjQUFjO0NBQ2YiLCJmaWxlIjoiY2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLmNhcmQge1xuXHR3aWR0aDogMTAwJTtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy1yYWRpdXMpO1xuXHRib3JkZXI6IHZhcigtLXRzLWJvcmRlcik7XG5cdG1hcmdpbi1ib3R0b206IHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtcXVhcnRlcikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcblx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR0cmFuc2l0aW9uOiBib3gtc2hhZG93IHZhcigtLXRzLXRyYW5zaXRpb24tbm93KSxcblx0XHRib3JkZXItY29sb3IgdmFyKC0tdHMtdHJhbnNpdGlvbi1ub3cpO1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAgMXB4IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG5cdH1cblxuXHQmW2RhdGEtbm8taG9yaXpvbnRhbC1wYWRkaW5nXSB7XG5cdFx0cGFkZGluZy1sZWZ0OiAwO1xuXHRcdHBhZGRpbmctcmlnaHQ6IDA7XG5cdH1cblxuXHQmW2RhdGEtbm8tdmVydGljYWwtcGFkZGluZ10ge1xuXHRcdHBhZGRpbmctdG9wOiAwO1xuXHRcdHBhZGRpbmctYm90dG9tOiAwO1xuXHR9XG5cblx0JltkYXRhLW5vLXBhZGRpbmddIHtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5cblx0LyogdHlwZXMgKi9cblx0JltkYXRhLXR5cGU9J2Vycm9yJ10sXG5cdCZbZGF0YS10eXBlPSdmYWlsZWQnXSxcblx0JltkYXRhLXR5cGU9J2RhbmdlciddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1lcnJvcik7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1yZWQtbGlnaHRlcik7XG5cdFx0fVxuXHR9XG5cblx0JltkYXRhLXR5cGU9J3N1Y2Nlc3MnXSB7XG5cdFx0Ym9yZGVyOiB2YXIoLS10cy1ib3JkZXItc3VjY2Vzcyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ncmVlbi1saWdodGVyKTtcblx0XHR9XG5cdH1cblxuXHQmW2RhdGEtdHlwZT0nZm9jdXMnXSxcblx0JltkYXRhLXR5cGU9J2FjdGl2ZSddLFxuXHQmW2RhdGEtdHlwZT0ncHJpbWFyeSddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1mb2N1cyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ibHVlLWxpZ2h0ZXIpO1xuXHRcdH1cblx0fVxuXG5cdC8qIG9yaWVudGF0aW9ucyAqL1xuXHQmW2RhdGEtb3JpZW50YXRpb249J2hvcml6b250YWwnXSxcblx0JltkYXRhLW9yaWVudGF0aW9uPSdoJ10ge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdH1cblxuXHQmW2RhdGEtb3JpZW50YXRpb249J3ZlcnRpY2FsJ10sXG5cdCZbZGF0YS1vcmllbnRhdGlvbj0ndiddIHtcblx0XHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRcdGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuXHR9XG5cblx0JltkYXRhLXNpemU9J3NtYWxsJ10ge1xuXHRcdHdpZHRoOiB2YXIoLS10cy1ib3gtd2lkdGgtc21hbGwpO1xuXHR9XG5cblx0JltkYXRhLXNpemU9J21lZGl1bSddIHtcblx0XHR3aWR0aDogdmFyKC0tdHMtYm94LXdpZHRoLW1lZGl1bSk7XG5cdH1cblxuXHQmW2RhdGEtcnRsXSB7XG5cdFx0ZGlyZWN0aW9uOiBydGw7XG5cdH1cbn1cbiJdfQ== */";
+      strings.raw = raw;
+      return strings;
+    }
 
-  function _templateObject$1() {
-    var data = _taggedTemplateLiteralLoose$2(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"card ", "\"\n\t\t\t\t\tdata-orientation=\"", "\"\n\t\t\t\t\tdata-type=\"", "\"\n\t\t\t\t\t?data-no-padding=\"", "\"\n\t\t\t\t\t?data-no-horizontal-padding=\"", "\"\n\t\t\t\t\t?data-no-vertical-padding=\"", "\"\n\t\t\t\t\tdata-size=\"", "\"\n\t\t\t\t\t?data-rtl=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t"]);
+    var css = "/* General........................................................ */\n\n:host {\n\twidth: 100%;\n}\n\n.card {\n\twidth: 100%;\n\tposition: relative;\n\tborder-radius: 3px;\n\tborder-radius: var(--ts-radius);\n\tborder: 1px solid\n\t\trgb(203, 215, 220);\n\tborder: var(--ts-border);\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\toverflow: hidden;\n\tpadding: calc(0.25 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-quarter) var(--ts-unit-half);\n\tbackground-color: rgb(255, 255, 255);\n\tbackground-color: var(--ts-color-white);\n\ttransition: box-shadow 0.1s,\n\t\tborder-color 0.1s;\n\ttransition: box-shadow var(--ts-transition-now),\n\t\tborder-color var(--ts-transition-now)\n}\n\n.card:hover {\n\t\tborder-color: rgb(0, 174, 255);\n\t\tborder-color: var(--ts-color-blue);\n\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t}\n\n.card[data-no-horizontal-padding] {\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n.card[data-no-vertical-padding] {\n\t\tpadding-top: 0;\n\t\tpadding-bottom: 0;\n\t}\n\n.card[data-no-padding] {\n\t\tpadding: 0;\n\t}\n\n.card {\n\n\t/* types */\n}\n\n.card[data-type='error'],\n\t.card[data-type='failed'],\n\t.card[data-type='danger'] {\n\t\tborder: 1px solid\n\t\trgb(189, 0, 0);\n\t\tborder: var(--ts-border-error)\n\t}\n\n.card[data-type='error']:hover, .card[data-type='failed']:hover, .card[data-type='danger']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(234, 174, 174);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-red-lighter);\n\t\t}\n\n.card[data-type='success'] {\n\t\tborder: 1px solid\n\t\trgb(80, 198, 16);\n\t\tborder: var(--ts-border-success)\n\t}\n\n.card[data-type='success']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(198, 236, 177);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-green-lighter);\n\t\t}\n\n.card[data-type='focus'],\n\t.card[data-type='active'],\n\t.card[data-type='primary'] {\n\t\tborder: 1px solid\n\t\trgb(0, 174, 255);\n\t\tborder: var(--ts-border-focus)\n\t}\n\n.card[data-type='focus']:hover, .card[data-type='active']:hover, .card[data-type='primary']:hover {\n\t\t\tbox-shadow: 0 0 0 1px rgb(173, 229, 255);\n\t\t\tbox-shadow: 0 0 0 1px var(--ts-color-blue-lighter);\n\t\t}\n\n.card {\n\n\t/* orientations */\n}\n\n.card[data-orientation='horizontal'],\n\t.card[data-orientation='h'] {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n.card[data-orientation='vertical'],\n\t.card[data-orientation='v'] {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t}\n\n.card[data-size='small'] {\n\t\twidth: 280px;\n\t\twidth: var(--ts-box-width-small);\n\t}\n\n.card[data-size='medium'] {\n\t\twidth: 360px;\n\t\twidth: var(--ts-box-width-medium);\n\t}\n\n.card[data-rtl] {\n\t\tdirection: rtl;\n\t}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxXQUFXO0FBQ1o7O0FBRUE7Q0FDQyxXQUFXO0NBQ1gsa0JBQWtCO0NBQ2xCLGtCQUErQjtDQUEvQiwrQkFBK0I7Q0FDL0I7b0JBQXdCO0NBQXhCLHdCQUF3QjtDQUN4QiwrQkFBa0M7Q0FBbEMsa0NBQWtDO0NBQ2xDLGdCQUFnQjtDQUNoQiwyQ0FBbUQ7Q0FBbkQsbURBQW1EO0NBQ25ELG9DQUF1QztDQUF2Qyx1Q0FBdUM7Q0FDdkM7bUJBQ3NDO0NBRHRDOztBQTRFRDs7QUF6RUM7RUFDQyw4QkFBa0M7RUFBbEMsa0NBQWtDO0VBQ2xDLHdDQUFrRDtFQUFsRCxrREFBa0Q7Q0FDbkQ7O0FBRUE7RUFDQyxlQUFlO0VBQ2YsZ0JBQWdCO0NBQ2pCOztBQUVBO0VBQ0MsY0FBYztFQUNkLGlCQUFpQjtDQUNsQjs7QUFFQTtFQUNDLFVBQVU7Q0FDWDs7QUE3QkQ7O0NBK0JDLFVBQVU7QUFzRFg7O0FBckRDOzs7RUFHQztnQkFBOEI7RUFBOUI7Q0FLRDs7QUFIQztHQUNDLHdDQUFpRDtHQUFqRCxpREFBaUQ7RUFDbEQ7O0FBR0Q7RUFDQztrQkFBZ0M7RUFBaEM7Q0FLRDs7QUFIQztHQUNDLHdDQUFtRDtHQUFuRCxtREFBbUQ7RUFDcEQ7O0FBR0Q7OztFQUdDO2tCQUE4QjtFQUE5QjtDQUtEOztBQUhDO0dBQ0Msd0NBQWtEO0dBQWxELGtEQUFrRDtFQUNuRDs7QUF6REY7O0NBNERDLGlCQUFpQjtBQXlCbEI7O0FBeEJDOztFQUVDLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsOEJBQThCO0NBQy9COztBQUVBOztFQUVDLHNCQUFzQjtFQUN0Qix1QkFBdUI7Q0FDeEI7O0FBRUE7RUFDQyxZQUFnQztFQUFoQyxnQ0FBZ0M7Q0FDakM7O0FBRUE7RUFDQyxZQUFpQztFQUFqQyxpQ0FBaUM7Q0FDbEM7O0FBRUE7RUFDQyxjQUFjO0NBQ2YiLCJmaWxlIjoiY2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLmNhcmQge1xuXHR3aWR0aDogMTAwJTtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy1yYWRpdXMpO1xuXHRib3JkZXI6IHZhcigtLXRzLWJvcmRlcik7XG5cdG1hcmdpbi1ib3R0b206IHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtcXVhcnRlcikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcblx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR0cmFuc2l0aW9uOiBib3gtc2hhZG93IHZhcigtLXRzLXRyYW5zaXRpb24tbm93KSxcblx0XHRib3JkZXItY29sb3IgdmFyKC0tdHMtdHJhbnNpdGlvbi1ub3cpO1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAgMXB4IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG5cdH1cblxuXHQmW2RhdGEtbm8taG9yaXpvbnRhbC1wYWRkaW5nXSB7XG5cdFx0cGFkZGluZy1sZWZ0OiAwO1xuXHRcdHBhZGRpbmctcmlnaHQ6IDA7XG5cdH1cblxuXHQmW2RhdGEtbm8tdmVydGljYWwtcGFkZGluZ10ge1xuXHRcdHBhZGRpbmctdG9wOiAwO1xuXHRcdHBhZGRpbmctYm90dG9tOiAwO1xuXHR9XG5cblx0JltkYXRhLW5vLXBhZGRpbmddIHtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5cblx0LyogdHlwZXMgKi9cblx0JltkYXRhLXR5cGU9J2Vycm9yJ10sXG5cdCZbZGF0YS10eXBlPSdmYWlsZWQnXSxcblx0JltkYXRhLXR5cGU9J2RhbmdlciddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1lcnJvcik7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1yZWQtbGlnaHRlcik7XG5cdFx0fVxuXHR9XG5cblx0JltkYXRhLXR5cGU9J3N1Y2Nlc3MnXSB7XG5cdFx0Ym9yZGVyOiB2YXIoLS10cy1ib3JkZXItc3VjY2Vzcyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ncmVlbi1saWdodGVyKTtcblx0XHR9XG5cdH1cblxuXHQmW2RhdGEtdHlwZT0nZm9jdXMnXSxcblx0JltkYXRhLXR5cGU9J2FjdGl2ZSddLFxuXHQmW2RhdGEtdHlwZT0ncHJpbWFyeSddIHtcblx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlci1mb2N1cyk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCB2YXIoLS10cy1jb2xvci1ibHVlLWxpZ2h0ZXIpO1xuXHRcdH1cblx0fVxuXG5cdC8qIG9yaWVudGF0aW9ucyAqL1xuXHQmW2RhdGEtb3JpZW50YXRpb249J2hvcml6b250YWwnXSxcblx0JltkYXRhLW9yaWVudGF0aW9uPSdoJ10ge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdH1cblxuXHQmW2RhdGEtb3JpZW50YXRpb249J3ZlcnRpY2FsJ10sXG5cdCZbZGF0YS1vcmllbnRhdGlvbj0ndiddIHtcblx0XHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRcdGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuXHR9XG5cblx0JltkYXRhLXNpemU9J3NtYWxsJ10ge1xuXHRcdHdpZHRoOiB2YXIoLS10cy1ib3gtd2lkdGgtc21hbGwpO1xuXHR9XG5cblx0JltkYXRhLXNpemU9J21lZGl1bSddIHtcblx0XHR3aWR0aDogdmFyKC0tdHMtYm94LXdpZHRoLW1lZGl1bSk7XG5cdH1cblxuXHQmW2RhdGEtcnRsXSB7XG5cdFx0ZGlyZWN0aW9uOiBydGw7XG5cdH1cbn1cbiJdfQ== */";
 
-    _templateObject$1 = function _templateObject() {
+    function _templateObject() {
+      var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"card ", "\"\n\t\t\t\t\tdata-orientation=\"", "\"\n\t\t\t\t\tdata-type=\"", "\"\n\t\t\t\t\t?data-no-padding=\"", "\"\n\t\t\t\t\t?data-no-horizontal-padding=\"", "\"\n\t\t\t\t\t?data-no-vertical-padding=\"", "\"\n\t\t\t\t\tdata-size=\"", "\"\n\t\t\t\t\t?data-rtl=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t"]);
+
+      _templateObject = function _templateObject() {
+        return data;
+      };
+
       return data;
-    };
+    }
 
-    return data;
-  }
+    elements.customElementDefineHelper('ts-card',
+    /*#__PURE__*/
+    function (_TSElement) {
+      _inheritsLoose(_class, _TSElement);
 
-  elements.customElementDefineHelper('ts-card',
-  /*#__PURE__*/
-  function (_TSElement) {
-    _inheritsLoose(_class, _TSElement);
+      function _class() {
+        var _this;
 
-    function _class() {
-      var _this;
+        _this = _TSElement.call(this) || this;
+        _this.type = '';
+        _this.size = 'full';
+        _this.orientation = 'vertical';
+        _this.rtl = false;
+        _this.noPadding = false;
+        _this.noHorizontalPadding = false;
+        _this.noVerticalPadding = false;
+        return _this;
+      }
 
-      _this = _TSElement.call(this) || this;
-      _this.type = '';
-      _this.size = 'full';
-      _this.orientation = 'vertical';
-      _this.rtl = false;
-      _this.noPadding = false;
-      _this.noHorizontalPadding = false;
-      _this.noVerticalPadding = false;
-      return _this;
-    }
+      var _proto = _class.prototype;
 
-    var _proto = _class.prototype;
+      _proto.render = function render() {
+        return elements.html(_templateObject(), this.cardClassNames, this.orientation, this.type, this.noPadding, this.noHorizontalPadding, this.noVerticalPadding, this.size, this.rtl);
+      };
 
-    _proto.render = function render() {
-      return elements.html(_templateObject$1(), this.cardClassNames, this.orientation, this.type, this.noPadding, this.noHorizontalPadding, this.noVerticalPadding, this.size, this.rtl);
-    };
+      _createClass(_class, null, [{
+        key: "styles",
+        get: function get() {
+          return [elements.TSElement.styles, elements.unsafeCSS(css)];
+        }
+      }, {
+        key: "properties",
+        get: function get() {
+          return {
+            type: {
+              type: String,
+              reflect: true
+            },
+            orientation: {
+              type: String,
+              reflect: true
+            },
+            rtl: {
+              type: Boolean,
+              reflect: true
+            },
+            size: {
+              type: String,
+              reflect: true
+            },
+            noPadding: {
+              type: Boolean,
+              reflect: true,
+              attribute: 'no-padding'
+            },
+            noHorizontalPadding: {
+              type: Boolean,
+              reflect: true,
+              attribute: 'no-horizontal-padding'
+            },
+            noVerticalPadding: {
+              type: Boolean,
+              reflect: true,
+              attribute: 'no-vertical-padding'
+            }
+          };
+        }
+      }]);
 
-    _createClass(_class, null, [{
-      key: "styles",
-      get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(css$1)];
+      return _class;
+    }(elements.TSElement));
+  });
+
+  (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);
       }
-    }, {
-      key: "properties",
-      get: function get() {
-        return {
-          type: {
-            type: String,
-            reflect: true
-          },
-          orientation: {
-            type: String,
-            reflect: true
-          },
-          rtl: {
-            type: Boolean,
-            reflect: true
-          },
-          size: {
-            type: String,
-            reflect: true
-          },
-          noPadding: {
-            type: Boolean,
-            reflect: true,
-            attribute: 'no-padding'
-          },
-          noHorizontalPadding: {
-            type: Boolean,
-            reflect: true,
-            attribute: 'no-horizontal-padding'
-          },
-          noVerticalPadding: {
-            type: Boolean,
-            reflect: true,
-            attribute: 'no-vertical-padding'
-          }
-        };
-      }
-    }]);
+    }
 
-    return _class;
-  }(elements.TSElement));
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      return Constructor;
+    }
 
-  function _taggedTemplateLiteralLoose$3(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+    function _inheritsLoose(subClass, superClass) {
+      subClass.prototype = Object.create(superClass.prototype);
+      subClass.prototype.constructor = subClass;
+      subClass.__proto__ = superClass;
     }
 
-    strings.raw = raw;
-    return strings;
-  }
+    function _taggedTemplateLiteralLoose(strings, raw) {
+      if (!raw) {
+        raw = strings.slice(0);
+      }
 
-  var css$2 = "/* General........................................................ */\n:host {\n\twidth: 100%;\n}\n\n.progress-bar-wrapper {\n\theight: calc(0.25 * 20px);\n\theight: var(--ts-progress-bar-height);\n\tborder-radius: 100em;\n\toverflow: hidden;\n}\n\n.progress-bar-total {\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: rgb(173, 229, 255);\n\tbackground-color: var(--ts-color-blue-lighter);\n}\n\n.progress-bar-done {\n\tposition: absolute;\n\tborder-radius: 100em;\n\tleft: 0;\n\ttop: 0;\n\theight: 100%;\n\tbackground-color: rgb(0, 174, 255);\n\tbackground-color: var(--ts-color-blue);\n}\n\n.progress-bar-wrapper[data-indeterminate] .progress-bar-done {\n\tanimation: infinite-progress 1s linear infinite;\n}\n\n@keyframes infinite-progress {\n\t0% {\n\t\twidth: 0;\n\t\tmargin-left: 0;\n\t\tmargin-right: 100%;\n\t}\n\t20% {\n\t\twidth: 30%;\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t40% {\n\t\twidth: 30%;\n\t\tmargin-left: 30%;\n\t\tmargin-right: 0;\n\t}\n\t60% {\n\t\twidth: 40%;\n\t\tmargin-left: 50%;\n\t\tmargin-right: 0;\n\t}\n\t80% {\n\t\twidth: 40%;\n\t\tmargin-left: 70%;\n\t\tmargin-right: 0;\n\t}\n\t100% {\n\t\twidth: 0;\n\t\tmargin-left: 100%;\n\t\tmargin-right: 0;\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FO0FBQ3BFO0NBQ0MsV0FBVztBQUNaOztBQUVBO0NBQ0MseUJBQXFDO0NBQXJDLHFDQUFxQztDQUNyQyxvQkFBb0I7Q0FDcEIsZ0JBQWdCO0FBQ2pCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLFlBQVk7Q0FDWixXQUFXO0NBQ1gsb0NBQThDO0NBQTlDLDhDQUE4QztBQUMvQzs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixvQkFBb0I7Q0FDcEIsT0FBTztDQUNQLE1BQU07Q0FDTixZQUFZO0NBQ1osa0NBQXNDO0NBQXRDLHNDQUFzQztBQUN2Qzs7QUFFQTtDQUNDLCtDQUErQztBQUNoRDs7QUFFQTtDQUNDO0VBQ0MsUUFBUTtFQUNSLGNBQWM7RUFDZCxrQkFBa0I7Q0FDbkI7Q0FDQTtFQUNDLFVBQVU7RUFDVixjQUFjO0VBQ2QsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixlQUFlO0NBQ2hCO0NBQ0E7RUFDQyxVQUFVO0VBQ1YsZ0JBQWdCO0VBQ2hCLGVBQWU7Q0FDaEI7Q0FDQTtFQUNDLFVBQVU7RUFDVixnQkFBZ0I7RUFDaEIsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsUUFBUTtFQUNSLGlCQUFpQjtFQUNqQixlQUFlO0NBQ2hCO0FBQ0QiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIEdlbmVyYWwuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyIHtcblx0aGVpZ2h0OiB2YXIoLS10cy1wcm9ncmVzcy1iYXItaGVpZ2h0KTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5wcm9ncmVzcy1iYXItdG90YWwge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG59XG5cbi5wcm9ncmVzcy1iYXItZG9uZSB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdGxlZnQ6IDA7XG5cdHRvcDogMDtcblx0aGVpZ2h0OiAxMDAlO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyW2RhdGEtaW5kZXRlcm1pbmF0ZV0gLnByb2dyZXNzLWJhci1kb25lIHtcblx0YW5pbWF0aW9uOiBpbmZpbml0ZS1wcm9ncmVzcyAxcyBsaW5lYXIgaW5maW5pdGU7XG59XG5cbkBrZXlmcmFtZXMgaW5maW5pdGUtcHJvZ3Jlc3Mge1xuXHQwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDA7XG5cdFx0bWFyZ2luLXJpZ2h0OiAxMDAlO1xuXHR9XG5cdDIwJSB7XG5cdFx0d2lkdGg6IDMwJTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0NDAlIHtcblx0XHR3aWR0aDogMzAlO1xuXHRcdG1hcmdpbi1sZWZ0OiAzMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG5cdDYwJSB7XG5cdFx0d2lkdGg6IDQwJTtcblx0XHRtYXJnaW4tbGVmdDogNTAlO1xuXHRcdG1hcmdpbi1yaWdodDogMDtcblx0fVxuXHQ4MCUge1xuXHRcdHdpZHRoOiA0MCU7XG5cdFx0bWFyZ2luLWxlZnQ6IDcwJTtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0MTAwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDEwMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG59XG4iXX0= */";
+      strings.raw = raw;
+      return strings;
+    }
 
-  function _templateObject$2() {
-    var data = _taggedTemplateLiteralLoose$3(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"progress-bar-wrapper\"\n\t\t\t\t\t?data-indeterminate=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"progress-bar-total\">\n\t\t\t\t\t\t<div style=\"", "\" class=\"progress-bar-done\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t"]);
+    var css = "/* General........................................................ */\n:host {\n\twidth: 100%;\n}\n\n.progress-bar-wrapper {\n\theight: calc(0.25 * 20px);\n\theight: var(--ts-progress-bar-height);\n\tborder-radius: 100em;\n\toverflow: hidden;\n}\n\n.progress-bar-total {\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: rgb(173, 229, 255);\n\tbackground-color: var(--ts-color-blue-lighter);\n}\n\n.progress-bar-done {\n\tposition: absolute;\n\tborder-radius: 100em;\n\tleft: 0;\n\ttop: 0;\n\theight: 100%;\n\tbackground-color: rgb(0, 174, 255);\n\tbackground-color: var(--ts-color-blue);\n}\n\n.progress-bar-wrapper[data-indeterminate] .progress-bar-done {\n\tanimation: infinite-progress 1s linear infinite;\n}\n\n@keyframes infinite-progress {\n\t0% {\n\t\twidth: 0;\n\t\tmargin-left: 0;\n\t\tmargin-right: 100%;\n\t}\n\t20% {\n\t\twidth: 30%;\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t40% {\n\t\twidth: 30%;\n\t\tmargin-left: 30%;\n\t\tmargin-right: 0;\n\t}\n\t60% {\n\t\twidth: 40%;\n\t\tmargin-left: 50%;\n\t\tmargin-right: 0;\n\t}\n\t80% {\n\t\twidth: 40%;\n\t\tmargin-left: 70%;\n\t\tmargin-right: 0;\n\t}\n\t100% {\n\t\twidth: 0;\n\t\tmargin-left: 100%;\n\t\tmargin-right: 0;\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FO0FBQ3BFO0NBQ0MsV0FBVztBQUNaOztBQUVBO0NBQ0MseUJBQXFDO0NBQXJDLHFDQUFxQztDQUNyQyxvQkFBb0I7Q0FDcEIsZ0JBQWdCO0FBQ2pCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLFlBQVk7Q0FDWixXQUFXO0NBQ1gsb0NBQThDO0NBQTlDLDhDQUE4QztBQUMvQzs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixvQkFBb0I7Q0FDcEIsT0FBTztDQUNQLE1BQU07Q0FDTixZQUFZO0NBQ1osa0NBQXNDO0NBQXRDLHNDQUFzQztBQUN2Qzs7QUFFQTtDQUNDLCtDQUErQztBQUNoRDs7QUFFQTtDQUNDO0VBQ0MsUUFBUTtFQUNSLGNBQWM7RUFDZCxrQkFBa0I7Q0FDbkI7Q0FDQTtFQUNDLFVBQVU7RUFDVixjQUFjO0VBQ2QsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixlQUFlO0NBQ2hCO0NBQ0E7RUFDQyxVQUFVO0VBQ1YsZ0JBQWdCO0VBQ2hCLGVBQWU7Q0FDaEI7Q0FDQTtFQUNDLFVBQVU7RUFDVixnQkFBZ0I7RUFDaEIsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsUUFBUTtFQUNSLGlCQUFpQjtFQUNqQixlQUFlO0NBQ2hCO0FBQ0QiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIEdlbmVyYWwuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuOmhvc3Qge1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyIHtcblx0aGVpZ2h0OiB2YXIoLS10cy1wcm9ncmVzcy1iYXItaGVpZ2h0KTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5wcm9ncmVzcy1iYXItdG90YWwge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUtbGlnaHRlcik7XG59XG5cbi5wcm9ncmVzcy1iYXItZG9uZSB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0Ym9yZGVyLXJhZGl1czogMTAwZW07XG5cdGxlZnQ6IDA7XG5cdHRvcDogMDtcblx0aGVpZ2h0OiAxMDAlO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnByb2dyZXNzLWJhci13cmFwcGVyW2RhdGEtaW5kZXRlcm1pbmF0ZV0gLnByb2dyZXNzLWJhci1kb25lIHtcblx0YW5pbWF0aW9uOiBpbmZpbml0ZS1wcm9ncmVzcyAxcyBsaW5lYXIgaW5maW5pdGU7XG59XG5cbkBrZXlmcmFtZXMgaW5maW5pdGUtcHJvZ3Jlc3Mge1xuXHQwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDA7XG5cdFx0bWFyZ2luLXJpZ2h0OiAxMDAlO1xuXHR9XG5cdDIwJSB7XG5cdFx0d2lkdGg6IDMwJTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0NDAlIHtcblx0XHR3aWR0aDogMzAlO1xuXHRcdG1hcmdpbi1sZWZ0OiAzMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG5cdDYwJSB7XG5cdFx0d2lkdGg6IDQwJTtcblx0XHRtYXJnaW4tbGVmdDogNTAlO1xuXHRcdG1hcmdpbi1yaWdodDogMDtcblx0fVxuXHQ4MCUge1xuXHRcdHdpZHRoOiA0MCU7XG5cdFx0bWFyZ2luLWxlZnQ6IDcwJTtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0MTAwJSB7XG5cdFx0d2lkdGg6IDA7XG5cdFx0bWFyZ2luLWxlZnQ6IDEwMCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG59XG4iXX0= */";
 
-    _templateObject$2 = function _templateObject() {
+    function _templateObject() {
+      var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\tclass=\"progress-bar-wrapper\"\n\t\t\t\t\t?data-indeterminate=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"progress-bar-total\">\n\t\t\t\t\t\t<div style=\"", "\" class=\"progress-bar-done\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t"]);
+
+      _templateObject = function _templateObject() {
+        return data;
+      };
+
       return data;
-    };
+    }
 
-    return data;
-  }
+    elements.customElementDefineHelper('ts-progress-bar',
+    /*#__PURE__*/
+    function (_TSElement) {
+      _inheritsLoose(_class, _TSElement);
 
-  elements.customElementDefineHelper('ts-progress-bar',
-  /*#__PURE__*/
-  function (_TSElement) {
-    _inheritsLoose(_class, _TSElement);
+      _createClass(_class, null, [{
+        key: "styles",
+        get: function get() {
+          return [elements.TSElement.styles, elements.unsafeCSS(css)];
+        }
+      }, {
+        key: "properties",
+        get: function get() {
+          return {
+            total: {
+              type: Number,
+              reflect: true
+            },
+            done: {
+              type: Number,
+              reflect: true
+            },
+            indeterminate: {
+              type: Boolean,
+              reflect: true
+            }
+          };
+        }
+      }]);
 
-    _createClass(_class, null, [{
-      key: "styles",
-      get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(css$2)];
+      function _class() {
+        var _this;
+
+        _this = _TSElement.call(this) || this;
+        _this.total = 100;
+        _this.done = 0;
+        _this.indeterminate = false;
+        return _this;
       }
-    }, {
-      key: "properties",
-      get: function get() {
-        return {
-          total: {
-            type: Number,
-            reflect: true
-          },
-          done: {
-            type: Number,
-            reflect: true
-          },
-          indeterminate: {
-            type: Boolean,
-            reflect: true
+
+      var _proto = _class.prototype;
+
+      _proto.render = function render() {
+        return elements.html(_templateObject(), this.indeterminate, this.doneWidthStyle);
+      };
+
+      _createClass(_class, [{
+        key: "doneWidthStyle",
+        get: function get() {
+          if (!this.indeterminate) {
+            return "width: " + this.done / this.total * 100 + "%";
           }
-        };
+        }
+      }]);
+
+      return _class;
+    }(elements.TSElement));
+  });
+
+  (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 _class() {
-      var _this;
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      return Constructor;
+    }
 
-      _this = _TSElement.call(this) || this;
-      _this.total = 100;
-      _this.done = 0;
-      _this.indeterminate = false;
-      return _this;
+    function _inheritsLoose(subClass, superClass) {
+      subClass.prototype = Object.create(superClass.prototype);
+      subClass.prototype.constructor = subClass;
+      subClass.__proto__ = superClass;
     }
 
-    var _proto = _class.prototype;
+    function _taggedTemplateLiteralLoose(strings, raw) {
+      if (!raw) {
+        raw = strings.slice(0);
+      }
 
-    _proto.render = function render() {
-      return elements.html(_templateObject$2(), this.indeterminate, this.doneWidthStyle);
-    };
+      strings.raw = raw;
+      return strings;
+    }
 
-    _createClass(_class, [{
-      key: "doneWidthStyle",
-      get: function get() {
-        if (!this.indeterminate) {
-          return "width: " + this.done / this.total * 100 + "%";
+    (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);
         }
       }
-    }]);
 
-    return _class;
-  }(elements.TSElement));
+      function _createClass(Constructor, protoProps, staticProps) {
+        if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+        if (staticProps) _defineProperties(Constructor, staticProps);
+        return Constructor;
+      }
 
-  function _taggedTemplateLiteralLoose$4(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
+      function _inheritsLoose(subClass, superClass) {
+        subClass.prototype = Object.create(superClass.prototype);
+        subClass.prototype.constructor = subClass;
+        subClass.__proto__ = superClass;
+      }
 
-    strings.raw = raw;
-    return strings;
-  }
+      function _taggedTemplateLiteralLoose(strings, raw) {
+        if (!raw) {
+          raw = strings.slice(0);
+        }
 
-  function _taggedTemplateLiteralLoose$1$1(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
+        strings.raw = raw;
+        return strings;
+      }
 
-    strings.raw = raw;
-    return strings;
-  }
+      var css = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
 
-  var css$3 = "/* General........................................................ */\n\n:host {\n\tdisplay: block;\n}\n\n:host [data-variant='default'] {\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host [data-variant='title'] {\n\tfont-size: 16px;\n\tfont-size: var(--ts-fontsize-medium);\n\tfont-weight: 600;\n\tfont-weight: var(--ts-fontweight-semibold);\n}\n\n:host [data-variant='subtitle'] {\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n\tcolor: rgb(80, 107, 119);\n\tcolor: var(--ts-color-slate-lightest);\n}\n\n:host [data-no-wrap] {\n\tposition: relative;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n:host [data-color='default'] {\n\tcolor: rgb(15, 21, 26);\n\tcolor: var(--ts-color-black);\n}\n\n:host [data-color='warning'] {\n\tcolor: rgb(255, 140, 0);\n\tcolor: var(--ts-color-orange);\n}\n\n:host [data-color='error'],\n:host [data-color='danger'] {\n\tcolor: rgb(189, 0, 0);\n\tcolor: var(--ts-color-red);\n}\n\n:host [data-color='primary'],\n:host [data-color='action'] {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n:host [data-color='success'] {\n\tcolor: rgb(80, 198, 16);\n\tcolor: var(--ts-color-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxlQUFvQztDQUFwQyxvQ0FBb0M7Q0FDcEMsZ0JBQTBDO0NBQTFDLDBDQUEwQztBQUMzQzs7QUFFQTtDQUNDLGVBQWtDO0NBQWxDLGtDQUFrQztDQUNsQyx3QkFBcUM7Q0FBckMscUNBQXFDO0FBQ3RDOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGVBQWU7Q0FDZixtQkFBbUI7Q0FDbkIsZ0JBQWdCO0NBQ2hCLHVCQUF1QjtBQUN4Qjs7QUFFQTtDQUNDLHNCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0I7O0FBRUE7Q0FDQyx1QkFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBOztDQUVDLHFCQUEwQjtDQUExQiwwQkFBMEI7QUFDM0I7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTtDQUNDLHVCQUE0QjtDQUE1Qiw0QkFBNEI7QUFDN0IiLCJmaWxlIjoidHlwb2dyYXBoeS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nZGVmYXVsdCddIHtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZSk7XG59XG5cbjpob3N0IFtkYXRhLXZhcmlhbnQ9J3RpdGxlJ10ge1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1lZGl1bSk7XG5cdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0LXNlbWlib2xkKTtcbn1cblxuOmhvc3QgW2RhdGEtdmFyaWFudD0nc3VidGl0bGUnXSB7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtbWluaSk7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZS1saWdodGVzdCk7XG59XG5cbjpob3N0IFtkYXRhLW5vLXdyYXBdIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZGVmYXVsdCddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcbn1cblxuOmhvc3QgW2RhdGEtY29sb3I9J3dhcm5pbmcnXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nZXJyb3InXSxcbjpob3N0IFtkYXRhLWNvbG9yPSdkYW5nZXInXSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0ncHJpbWFyeSddLFxuOmhvc3QgW2RhdGEtY29sb3I9J2FjdGlvbiddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdCBbZGF0YS1jb2xvcj0nc3VjY2VzcyddIHtcblx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcbn1cbiJdfQ== */";
+      function _templateObject() {
+        var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
 
-  function _templateObject$3() {
-    var data = _taggedTemplateLiteralLoose$1$1(["\n\t\t\t\t<div\n\t\t\t\t\ttitle=\"", "\"\n\t\t\t\t\tclass=\"", "\"\n\t\t\t\t\tdata-color=\"", "\"\n\t\t\t\t\tdata-variant=\"", "\"\n\t\t\t\t\t?data-no-wrap=\"", "\"\n\t\t\t\t>\n\t\t\t\t\t", "\n\t\t\t\t</div>\n\t\t\t"]);
+        _templateObject = function _templateObject() {
+          return data;
+        };
 
-    _templateObject$3 = function _templateObject() {
-      return data;
-    };
+        return data;
+      }
 
-    return data;
-  }
+      elements.customElementDefineHelper('ts-typography',
+      /*#__PURE__*/
+      function (_TSElement) {
+        _inheritsLoose(_class, _TSElement);
 
-  elements.customElementDefineHelper('ts-typography',
-  /*#__PURE__*/
-  function (_TSElement) {
-    _inheritsLoose(_class, _TSElement);
+        function _class() {
+          var _this;
 
-    function _class() {
-      var _this;
+          _this = _TSElement.call(this) || this;
+          _this.text = '';
+          _this.color = 'default';
+          _this.variant = 'default';
+          _this.inline = false;
+          _this.noWrap = false;
+          return _this;
+        }
 
-      _this = _TSElement.call(this) || this;
-      _this.text = '';
-      _this.color = 'default';
-      _this.variant = 'default';
-      _this.inline = false;
-      _this.noWrap = false;
-      return _this;
-    }
+        var _proto = _class.prototype;
 
-    var _proto = _class.prototype;
+        _proto.render = function render() {
+          return elements.html(_templateObject(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
+        };
 
-    _proto.render = function render() {
-      return elements.html(_templateObject$3(), this.text, this.classNames, this.color, this.variant, this.noWrap, this.text);
-    };
-
-    _createClass(_class, null, [{
-      key: "styles",
-      get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(css$3)];
-      }
-    }, {
-      key: "properties",
-      get: function get() {
-        return {
-          text: {
-            type: String,
-            reflect: true
-          },
-          variant: {
-            type: String,
-            reflect: true
-          },
-          color: {
-            type: String,
-            reflect: true
-          },
-          inline: {
-            type: Boolean,
-            reflect: true
-          },
-          classNames: {
-            type: String,
-            reflect: true,
-            attribute: 'class-names'
-          },
-          noWrap: {
-            type: Boolean,
-            reflect: true,
-            attribute: 'no-wrap'
+        _createClass(_class, null, [{
+          key: "styles",
+          get: function get() {
+            return [elements.TSElement.styles, elements.unsafeCSS(css)];
           }
-        };
-      }
-    }]);
+        }, {
+          key: "properties",
+          get: function get() {
+            return {
+              text: {
+                type: String,
+                reflect: true
+              },
+              variant: {
+                type: String,
+                reflect: true
+              },
+              color: {
+                type: String,
+                reflect: true
+              },
+              inline: {
+                type: Boolean,
+                reflect: true
+              },
+              classNames: {
+                type: String,
+                reflect: true,
+                attribute: 'class-names'
+              },
+              noWrap: {
+                type: Boolean,
+                reflect: true,
+                attribute: 'no-wrap'
+              }
+            };
+          }
+        }]);
 
-    return _class;
-  }(elements.TSElement));
-  var css$1$1 = "\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJmaWxlLXNpemUuY3NzIn0= */";
+        return _class;
+      }(elements.TSElement));
+    });
 
-  function _templateObject$1$1() {
-    var data = _taggedTemplateLiteralLoose$4(["\n\t\t\t\t<ts-typography\n\t\t\t\t\ttext=\"", "\"\n\t\t\t\t\tvariant=\"", "\"\n\t\t\t\t\tcolor=\"", "\"\n\t\t\t\t></ts-typography>\n\t\t\t"]);
+    var css = "\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJmaWxlLXNpemUuY3NzIn0= */";
 
-    _templateObject$1$1 = function _templateObject() {
+    function _templateObject() {
+      var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<ts-typography\n\t\t\t\t\ttext=\"", "\"\n\t\t\t\t\tvariant=\"", "\"\n\t\t\t\t\tcolor=\"", "\"\n\t\t\t\t></ts-typography>\n\t\t\t"]);
+
+      _templateObject = function _templateObject() {
+        return data;
+      };
+
       return data;
-    };
+    }
 
-    return data;
-  }
+    elements.customElementDefineHelper('ts-file-size',
+    /*#__PURE__*/
+    function (_TSElement) {
+      _inheritsLoose(_class, _TSElement);
 
-  elements.customElementDefineHelper('ts-file-size',
-  /*#__PURE__*/
-  function (_TSElement2) {
-    _inheritsLoose(_class2, _TSElement2);
+      _createClass(_class, null, [{
+        key: "styles",
+        get: function get() {
+          return [elements.TSElement.styles, elements.unsafeCSS(css)];
+        }
+      }, {
+        key: "properties",
+        get: function get() {
+          return {
+            size: {
+              type: Number,
+              reflect: true
+            },
+            decimalPoint: {
+              type: Number,
+              reflect: true,
+              attribute: 'decimal-point'
+            },
+            variant: {
+              type: String,
+              reflect: true
+            },
+            color: {
+              type: String,
+              reflect: true
+            }
+          };
+        }
+      }]);
 
-    _createClass(_class2, null, [{
-      key: "styles",
-      get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(css$1$1)];
+      function _class() {
+        var _this;
+
+        _this = _TSElement.call(this) || this;
+        _this.size = 0;
+        _this.decimalPoint = 2;
+        _this.variant = 'subtitle';
+        _this.color = 'default';
+        return _this;
       }
-    }, {
-      key: "properties",
-      get: function get() {
-        return {
-          size: {
-            type: Number,
-            reflect: true
-          },
-          decimalPoint: {
-            type: Number,
-            reflect: true,
-            attribute: 'decimal-point'
-          },
-          variant: {
-            type: String,
-            reflect: true
-          },
-          color: {
-            type: String,
-            reflect: true
-          }
-        };
-      }
-    }]);
 
-    function _class2() {
-      var _this2;
+      var _proto = _class.prototype;
 
-      _this2 = _TSElement2.call(this) || this;
-      _this2.size = 0;
-      _this2.decimalPoint = 2;
-      _this2.variant = 'subtitle';
-      _this2.color = 'default';
-      return _this2;
-    }
+      _proto.render = function render() {
+        return elements.html(_templateObject(), this.formatFileSize, this.variant, this.color);
+      };
 
-    var _proto2 = _class2.prototype;
+      _createClass(_class, [{
+        key: "formatFileSize",
+        get: function get() {
+          var bytes = this.size;
+          var decimalPoint = this.decimalPoint;
 
-    _proto2.render = function render() {
-      return elements.html(_templateObject$1$1(), this.formatFileSize, this.variant, this.color);
-    };
+          if (bytes === 0) {
+            return '0 Bytes';
+          }
 
-    _createClass(_class2, [{
-      key: "formatFileSize",
-      get: function get() {
-        var bytes = this.size;
-        var decimalPoint = this.decimalPoint;
-
-        if (bytes === 0) {
-          return '0 Bytes';
+          var k = 1000;
+          var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+          var i = Math.floor(Math.log(bytes) / Math.log(k));
+          return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];
         }
+      }]);
 
-        var k = 1000;
-        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-        var i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];
-      }
-    }]);
+      return _class;
+    }(elements.TSElement));
+  });
 
-    return _class2;
-  }(elements.TSElement));
+  var css = ":host {\n\tdisplay: block;\n}\n\n.action-icon,\n.file-icon-wrapper .file-icon {\n\tmargin-top: calc(0.25 * 20px);\n\tmargin-top: var(--ts-unit-quarter);\n}\n\n.file-icon-wrapper .file-icon #outline {\n\tfill: rgb(255, 255, 255);\n\tfill: var(--ts-color-white);\n\tstroke: rgb(130, 159, 171);\n\tstroke: var(--ts-color-gray-dark);\n}\n\n.file-icon-wrapper .file-icon #fold {\n\tfill: rgb(130, 159, 171);\n\tfill: var(--ts-color-gray-dark);\n}\n\n.dots-icon circle {\n\tfill: rgb(154, 178, 188);\n\tfill: var(--ts-color-gray);\n}\n\n.file-name {\n\tfont-weight: bold;\n}\n\n.action-icon {\n\tfill: rgb(80, 107, 119);\n\tfill: var(--ts-color-slate-lightest);\n}\n\n.content,\n.file-icon-wrapper,\n.download-action,\n.remove-action {\n\tcursor: pointer;\n}\n\n.state-uploading .content,\n.state-uploading .file-icon-wrapper,\n.state-failed .content,\n.state-failed .file-icon-wrapper {\n\tcursor: default;\n}\n\n.content {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\tflex-grow: 2;\n\tmax-width: calc(100% - 20px - 35px);\n\twidth: calc(100% - 20px - 35px);\n\tpadding: calc(0.5 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-half) var(--ts-unit-half);\n}\n\n.remove-action-message,\n.download-action-message {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n.remove-action-message,\n.download-action-message {\n\tdisplay: none;\n}\n\n.download-action-hovered .file-information,\n\t.download-action-hovered .error-message,\n\t.download-action-hovered .progress-bar,\n\t.remove-action-hovered .file-information,\n\t.remove-action-hovered .error-message,\n\t.remove-action-hovered .progress-bar {\n\t\tdisplay: none;\n\t}\n\n.download-action-hovered.state-uploading .download-action-message, .download-action-hovered.state-failed .download-action-message {\n\t\t\tdisplay: none;\n\t\t}\n\n.download-action-hovered.state-uploading .file-information,\n\t\t.download-action-hovered.state-uploading .error-message,\n\t\t.download-action-hovered.state-uploading .progress-bar,\n\t\t.download-action-hovered.state-failed .file-information,\n\t\t.download-action-hovered.state-failed .error-message,\n\t\t.download-action-hovered.state-failed .progress-bar {\n\t\t\tdisplay: inline;\n\t\t\tdisplay: initial;\n\t\t}\n\n.remove-action-hovered .remove-action-message,\n.download-action-hovered .download-action-message {\n\tdisplay: block;\n}\n\n.download-action-hovered .download-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n.remove-action-hovered .remove-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n\n.progress-bar {\n\t--ts-progress-bar-margin: calc(\n\t\t(var(--ts-unit) - var(--ts-progress-bar-height)) / 2\n\t);\n\tmargin: var(--ts-progress-bar-margin) 0;\n}\n\n.action-icon-wrapper {\n\tdisplay: none;\n}\n\n.state-uploading .remove-action, .state-download[data-removable] .remove-action, .state-failed .remove-action {\n\t\tdisplay: block;\n\t}\n\n.state-download .download-action {\n\tdisplay: block;\n}\n\n.state-download[data-removable] .download-action {\n\tdisplay: none;\n}\n\n.file-information {\n\tdisplay: flex;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGUtY2FyZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7O0NBRUMsNkJBQWtDO0NBQWxDLGtDQUFrQztBQUNuQzs7QUFFQTtDQUNDLHdCQUEyQjtDQUEzQiwyQkFBMkI7Q0FDM0IsMEJBQWlDO0NBQWpDLGlDQUFpQztBQUNsQzs7QUFFQTtDQUNDLHdCQUErQjtDQUEvQiwrQkFBK0I7QUFDaEM7O0FBRUE7Q0FDQyx3QkFBMEI7Q0FBMUIsMEJBQTBCO0FBQzNCOztBQUVBO0NBQ0MsaUJBQWlCO0FBQ2xCOztBQUVBO0NBQ0MsdUJBQW9DO0NBQXBDLG9DQUFvQztBQUNyQzs7QUFFQTs7OztDQUlDLGVBQWU7QUFDaEI7O0FBRUE7Ozs7Q0FJQyxlQUFlO0FBQ2hCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGFBQWE7Q0FDYixzQkFBc0I7Q0FDdEIsdUJBQXVCO0NBQ3ZCLFlBQVk7Q0FDWixtQ0FBbUM7Q0FDbkMsK0JBQStCO0NBQy9CLDBDQUFnRDtDQUFoRCxnREFBZ0Q7QUFDakQ7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTs7Q0FFQyxhQUFhO0FBQ2Q7O0FBSUM7Ozs7OztFQUdDLGFBQWE7Q0FDZDs7QUFNQztHQUNDLGFBQWE7RUFDZDs7QUFFQTs7Ozs7O0dBR0MsZUFBZ0I7R0FBaEIsZ0JBQWdCO0VBQ2pCOztBQUlGOztDQUVDLGNBQWM7QUFDZjs7QUFJRTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7QUFLQTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7O0FBSUY7Q0FDQzs7RUFFQztDQUNELHVDQUF1QztBQUN4Qzs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFLQztFQUNDLGNBQWM7Q0FDZjs7QUFHRDtDQUNDLGNBQWM7QUFDZjs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFFQTtDQUNDLGFBQWE7QUFDZCIsImZpbGUiOiJmaWxlLWNhcmQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuLmFjdGlvbi1pY29uLFxuLmZpbGUtaWNvbi13cmFwcGVyIC5maWxlLWljb24ge1xuXHRtYXJnaW4tdG9wOiB2YXIoLS10cy11bml0LXF1YXJ0ZXIpO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjb3V0bGluZSB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0c3Ryb2tlOiB2YXIoLS10cy1jb2xvci1ncmF5LWRhcmspO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjZm9sZCB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLWdyYXktZGFyayk7XG59XG5cbi5kb3RzLWljb24gY2lyY2xlIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItZ3JheSk7XG59XG5cbi5maWxlLW5hbWUge1xuXHRmb250LXdlaWdodDogYm9sZDtcbn1cblxuLmFjdGlvbi1pY29uIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3Itc2xhdGUtbGlnaHRlc3QpO1xufVxuXG4uY29udGVudCxcbi5maWxlLWljb24td3JhcHBlcixcbi5kb3dubG9hZC1hY3Rpb24sXG4ucmVtb3ZlLWFjdGlvbiB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnN0YXRlLXVwbG9hZGluZyAuY29udGVudCxcbi5zdGF0ZS11cGxvYWRpbmcgLmZpbGUtaWNvbi13cmFwcGVyLFxuLnN0YXRlLWZhaWxlZCAuY29udGVudCxcbi5zdGF0ZS1mYWlsZWQgLmZpbGUtaWNvbi13cmFwcGVyIHtcblx0Y3Vyc29yOiBkZWZhdWx0O1xufVxuXG4uY29udGVudCB7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGZsZXgtZ3JvdzogMjtcblx0bWF4LXdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtaGFsZikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5kb3dubG9hZC1hY3Rpb24taG92ZXJlZCxcbi5yZW1vdmUtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5maWxlLWluZm9ybWF0aW9uLFxuXHQmIC5lcnJvci1tZXNzYWdlLFxuXHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdGRpc3BsYXk6IG5vbmU7XG5cdH1cbn1cblxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIHtcblx0Ji5zdGF0ZS11cGxvYWRpbmcsXG5cdCYuc3RhdGUtZmFpbGVkIHtcblx0XHQmIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdH1cblxuXHRcdCYgLmZpbGUtaW5mb3JtYXRpb24sXG5cdFx0JiAuZXJyb3ItbWVzc2FnZSxcblx0XHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdFx0ZGlzcGxheTogaW5pdGlhbDtcblx0XHR9XG5cdH1cbn1cblxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCAucmVtb3ZlLWFjdGlvbi1tZXNzYWdlLFxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xufVxuXG4uZG93bmxvYWQtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5kb3dubG9hZC1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuXG4ucHJvZ3Jlc3MtYmFyIHtcblx0LS10cy1wcm9ncmVzcy1iYXItbWFyZ2luOiBjYWxjKFxuXHRcdCh2YXIoLS10cy11bml0KSAtIHZhcigtLXRzLXByb2dyZXNzLWJhci1oZWlnaHQpKSAvIDJcblx0KTtcblx0bWFyZ2luOiB2YXIoLS10cy1wcm9ncmVzcy1iYXItbWFyZ2luKSAwO1xufVxuXG4uYWN0aW9uLWljb24td3JhcHBlciB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zdGF0ZS11cGxvYWRpbmcsXG4uc3RhdGUtZG93bmxvYWRbZGF0YS1yZW1vdmFibGVdLFxuLnN0YXRlLWZhaWxlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHR9XG59XG5cbi5zdGF0ZS1kb3dubG9hZCAuZG93bmxvYWQtYWN0aW9uIHtcblx0ZGlzcGxheTogYmxvY2s7XG59XG5cbi5zdGF0ZS1kb3dubG9hZFtkYXRhLXJlbW92YWJsZV0gLmRvd25sb2FkLWFjdGlvbiB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5maWxlLWluZm9ybWF0aW9uIHtcblx0ZGlzcGxheTogZmxleDtcbn1cbiJdfQ== */";
 
-  var css$4 = ":host {\n\tdisplay: block;\n}\n\n.action-icon,\n.file-icon-wrapper .file-icon {\n\tmargin-top: calc(0.25 * 20px);\n\tmargin-top: var(--ts-unit-quarter);\n}\n\n.file-icon-wrapper .file-icon #outline {\n\tfill: rgb(255, 255, 255);\n\tfill: var(--ts-color-white);\n\tstroke: rgb(130, 159, 171);\n\tstroke: var(--ts-color-gray-dark);\n}\n\n.file-icon-wrapper .file-icon #fold {\n\tfill: rgb(130, 159, 171);\n\tfill: var(--ts-color-gray-dark);\n}\n\n.dots-icon circle {\n\tfill: rgb(154, 178, 188);\n\tfill: var(--ts-color-gray);\n}\n\n.file-name {\n\tfont-weight: bold;\n}\n\n.action-icon {\n\tfill: rgb(80, 107, 119);\n\tfill: var(--ts-color-slate-lightest);\n}\n\n.content,\n.file-icon-wrapper,\n.download-action,\n.remove-action {\n\tcursor: pointer;\n}\n\n.state-uploading .content,\n.state-uploading .file-icon-wrapper,\n.state-failed .content,\n.state-failed .file-icon-wrapper {\n\tcursor: default;\n}\n\n.content {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\tflex-grow: 2;\n\tmax-width: calc(100% - 20px - 35px);\n\twidth: calc(100% - 20px - 35px);\n\tpadding: calc(0.5 * 20px) calc(0.5 * 20px);\n\tpadding: var(--ts-unit-half) var(--ts-unit-half);\n}\n\n.remove-action-message,\n.download-action-message {\n\tcolor: rgb(0, 174, 255);\n\tcolor: var(--ts-color-blue);\n}\n\n.remove-action-message,\n.download-action-message {\n\tdisplay: none;\n}\n\n.download-action-hovered .file-information,\n\t.download-action-hovered .error-message,\n\t.download-action-hovered .progress-bar,\n\t.remove-action-hovered .file-information,\n\t.remove-action-hovered .error-message,\n\t.remove-action-hovered .progress-bar {\n\t\tdisplay: none;\n\t}\n\n.download-action-hovered.state-uploading .download-action-message, .download-action-hovered.state-failed .download-action-message {\n\t\t\tdisplay: none;\n\t\t}\n\n.download-action-hovered.state-uploading .file-information,\n\t\t.download-action-hovered.state-uploading .error-message,\n\t\t.download-action-hovered.state-uploading .progress-bar,\n\t\t.download-action-hovered.state-failed .file-information,\n\t\t.download-action-hovered.state-failed .error-message,\n\t\t.download-action-hovered.state-failed .progress-bar {\n\t\t\tdisplay: inline;\n\t\t\tdisplay: initial;\n\t\t}\n\n.remove-action-hovered .remove-action-message,\n.download-action-hovered .download-action-message {\n\tdisplay: block;\n}\n\n.download-action-hovered .download-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n.remove-action-hovered .remove-action .action-icon {\n\t\t\tfill: rgb(0, 174, 255);\n\t\t\tfill: var(--ts-color-blue);\n\t\t}\n\n.progress-bar {\n\t--ts-progress-bar-margin: calc(\n\t\t(var(--ts-unit) - var(--ts-progress-bar-height)) / 2\n\t);\n\tmargin: var(--ts-progress-bar-margin) 0;\n}\n\n.action-icon-wrapper {\n\tdisplay: none;\n}\n\n.state-uploading .remove-action, .state-download[data-removable] .remove-action, .state-failed .remove-action {\n\t\tdisplay: block;\n\t}\n\n.state-download .download-action {\n\tdisplay: block;\n}\n\n.state-download[data-removable] .download-action {\n\tdisplay: none;\n}\n\n.file-information {\n\tdisplay: flex;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGUtY2FyZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Q0FDQyxjQUFjO0FBQ2Y7O0FBRUE7O0NBRUMsNkJBQWtDO0NBQWxDLGtDQUFrQztBQUNuQzs7QUFFQTtDQUNDLHdCQUEyQjtDQUEzQiwyQkFBMkI7Q0FDM0IsMEJBQWlDO0NBQWpDLGlDQUFpQztBQUNsQzs7QUFFQTtDQUNDLHdCQUErQjtDQUEvQiwrQkFBK0I7QUFDaEM7O0FBRUE7Q0FDQyx3QkFBMEI7Q0FBMUIsMEJBQTBCO0FBQzNCOztBQUVBO0NBQ0MsaUJBQWlCO0FBQ2xCOztBQUVBO0NBQ0MsdUJBQW9DO0NBQXBDLG9DQUFvQztBQUNyQzs7QUFFQTs7OztDQUlDLGVBQWU7QUFDaEI7O0FBRUE7Ozs7Q0FJQyxlQUFlO0FBQ2hCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGFBQWE7Q0FDYixzQkFBc0I7Q0FDdEIsdUJBQXVCO0NBQ3ZCLFlBQVk7Q0FDWixtQ0FBbUM7Q0FDbkMsK0JBQStCO0NBQy9CLDBDQUFnRDtDQUFoRCxnREFBZ0Q7QUFDakQ7O0FBRUE7O0NBRUMsdUJBQTJCO0NBQTNCLDJCQUEyQjtBQUM1Qjs7QUFFQTs7Q0FFQyxhQUFhO0FBQ2Q7O0FBSUM7Ozs7OztFQUdDLGFBQWE7Q0FDZDs7QUFNQztHQUNDLGFBQWE7RUFDZDs7QUFFQTs7Ozs7O0dBR0MsZUFBZ0I7R0FBaEIsZ0JBQWdCO0VBQ2pCOztBQUlGOztDQUVDLGNBQWM7QUFDZjs7QUFJRTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7QUFLQTtHQUNDLHNCQUEwQjtHQUExQiwwQkFBMEI7RUFDM0I7O0FBSUY7Q0FDQzs7RUFFQztDQUNELHVDQUF1QztBQUN4Qzs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFLQztFQUNDLGNBQWM7Q0FDZjs7QUFHRDtDQUNDLGNBQWM7QUFDZjs7QUFFQTtDQUNDLGFBQWE7QUFDZDs7QUFFQTtDQUNDLGFBQWE7QUFDZCIsImZpbGUiOiJmaWxlLWNhcmQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOmhvc3Qge1xuXHRkaXNwbGF5OiBibG9jaztcbn1cblxuLmFjdGlvbi1pY29uLFxuLmZpbGUtaWNvbi13cmFwcGVyIC5maWxlLWljb24ge1xuXHRtYXJnaW4tdG9wOiB2YXIoLS10cy11bml0LXF1YXJ0ZXIpO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjb3V0bGluZSB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0c3Ryb2tlOiB2YXIoLS10cy1jb2xvci1ncmF5LWRhcmspO1xufVxuXG4uZmlsZS1pY29uLXdyYXBwZXIgLmZpbGUtaWNvbiAjZm9sZCB7XG5cdGZpbGw6IHZhcigtLXRzLWNvbG9yLWdyYXktZGFyayk7XG59XG5cbi5kb3RzLWljb24gY2lyY2xlIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3ItZ3JheSk7XG59XG5cbi5maWxlLW5hbWUge1xuXHRmb250LXdlaWdodDogYm9sZDtcbn1cblxuLmFjdGlvbi1pY29uIHtcblx0ZmlsbDogdmFyKC0tdHMtY29sb3Itc2xhdGUtbGlnaHRlc3QpO1xufVxuXG4uY29udGVudCxcbi5maWxlLWljb24td3JhcHBlcixcbi5kb3dubG9hZC1hY3Rpb24sXG4ucmVtb3ZlLWFjdGlvbiB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnN0YXRlLXVwbG9hZGluZyAuY29udGVudCxcbi5zdGF0ZS11cGxvYWRpbmcgLmZpbGUtaWNvbi13cmFwcGVyLFxuLnN0YXRlLWZhaWxlZCAuY29udGVudCxcbi5zdGF0ZS1mYWlsZWQgLmZpbGUtaWNvbi13cmFwcGVyIHtcblx0Y3Vyc29yOiBkZWZhdWx0O1xufVxuXG4uY29udGVudCB7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGZsZXgtZ3JvdzogMjtcblx0bWF4LXdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMzVweCk7XG5cdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtaGFsZikgdmFyKC0tdHMtdW5pdC1oYWxmKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcbn1cblxuLnJlbW92ZS1hY3Rpb24tbWVzc2FnZSxcbi5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5kb3dubG9hZC1hY3Rpb24taG92ZXJlZCxcbi5yZW1vdmUtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5maWxlLWluZm9ybWF0aW9uLFxuXHQmIC5lcnJvci1tZXNzYWdlLFxuXHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdGRpc3BsYXk6IG5vbmU7XG5cdH1cbn1cblxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIHtcblx0Ji5zdGF0ZS11cGxvYWRpbmcsXG5cdCYuc3RhdGUtZmFpbGVkIHtcblx0XHQmIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdH1cblxuXHRcdCYgLmZpbGUtaW5mb3JtYXRpb24sXG5cdFx0JiAuZXJyb3ItbWVzc2FnZSxcblx0XHQmIC5wcm9ncmVzcy1iYXIge1xuXHRcdFx0ZGlzcGxheTogaW5pdGlhbDtcblx0XHR9XG5cdH1cbn1cblxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCAucmVtb3ZlLWFjdGlvbi1tZXNzYWdlLFxuLmRvd25sb2FkLWFjdGlvbi1ob3ZlcmVkIC5kb3dubG9hZC1hY3Rpb24tbWVzc2FnZSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xufVxuXG4uZG93bmxvYWQtYWN0aW9uLWhvdmVyZWQge1xuXHQmIC5kb3dubG9hZC1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuLnJlbW92ZS1hY3Rpb24taG92ZXJlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdCYgLmFjdGlvbi1pY29uIHtcblx0XHRcdGZpbGw6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxufVxuXG4ucHJvZ3Jlc3MtYmFyIHtcblx0LS10cy1wcm9ncmVzcy1iYXItbWFyZ2luOiBjYWxjKFxuXHRcdCh2YXIoLS10cy11bml0KSAtIHZhcigtLXRzLXByb2dyZXNzLWJhci1oZWlnaHQpKSAvIDJcblx0KTtcblx0bWFyZ2luOiB2YXIoLS10cy1wcm9ncmVzcy1iYXItbWFyZ2luKSAwO1xufVxuXG4uYWN0aW9uLWljb24td3JhcHBlciB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zdGF0ZS11cGxvYWRpbmcsXG4uc3RhdGUtZG93bmxvYWRbZGF0YS1yZW1vdmFibGVdLFxuLnN0YXRlLWZhaWxlZCB7XG5cdCYgLnJlbW92ZS1hY3Rpb24ge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHR9XG59XG5cbi5zdGF0ZS1kb3dubG9hZCAuZG93bmxvYWQtYWN0aW9uIHtcblx0ZGlzcGxheTogYmxvY2s7XG59XG5cbi5zdGF0ZS1kb3dubG9hZFtkYXRhLXJlbW92YWJsZV0gLmRvd25sb2FkLWFjdGlvbiB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi5maWxlLWluZm9ybWF0aW9uIHtcblx0ZGlzcGxheTogZmxleDtcbn1cbiJdfQ== */";
-
   function _templateObject7() {
@@ -545,6 +680,6 @@ var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<ts-typography\n\t\t\t\t\tclass=\"remove-action-message\"\n\t\t\t\t\ttext=\"Remove\"\n\t\t\t\t\tcolor=\"action\"\n\t\t\t\t\tvariant=\"subtitle\"\n\t\t\t\t></ts-typography>\n\t\t\t\t<ts-typography\n\t\t\t\t\tclass=\"download-action-message\"\n\t\t\t\t\ttext=\"Download\"\n\t\t\t\t\tcolor=\"action\"\n\t\t\t\t\tvariant=\"subtitle\"\n\t\t\t\t></ts-typography>\n\t\t\t"]);
 
-  function _templateObject$4() {
+  function _templateObject() {
     var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div\n\t\t\t\t\t?data-removable=\"", "\"\n\t\t\t\t\tclass=\"file-card-wrapper state-", "\"\n\t\t\t\t>\n\t\t\t\t\t<ts-card\n\t\t\t\t\t\ttype=\"", "\"\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\t?rtl=\"", "\"\n\t\t\t\t\t\tsize=\"", "\"\n\t\t\t\t\t>\n\t\t\t\t\t\t", "\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<ts-typography\n\t\t\t\t\t\t\t\ttext=\"", "\"\n\t\t\t\t\t\t\t\tclass=\"file-name\"\n\t\t\t\t\t\t\t\tvariant=\"title\"\n\t\t\t\t\t\t\t\tno-wrap\n\t\t\t\t\t\t\t></ts-typography>\n\t\t\t\t\t\t\t", " ", " ", "\n\t\t\t\t\t\t\t", "\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t", "\n\t\t\t\t\t</ts-card>\n\t\t\t\t</div>\n\t\t\t"]);
 
-    _templateObject$4 = function _templateObject() {
+    _templateObject = function _templateObject() {
       return data;
@@ -577,3 +712,3 @@ };
     _proto.render = function render() {
-      return elements.html(_templateObject$4(), this.removable, this.state, this.cardType, this.rtl, this.size, this.fileIcon, this.fileObject.name, this.progressBar, this.fileInformation, this.errorMessages, this.actionMessage, this.actionIcons);
+      return elements.html(_templateObject(), this.removable, this.state, this.cardType, this.rtl, this.size, this.fileIcon, this.fileObject.name, this.progressBar, this.fileInformation, this.errorMessages, this.actionMessage, this.actionIcons);
     };
@@ -702,3 +837,3 @@
       get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(css$4)];
+        return [elements.TSElement.styles, elements.unsafeCSS(css)];
       }
@@ -705,0 +840,0 @@ }, {

package.json

 {
   "name": "@tradeshift/elements.file-card",
-  "version": "0.2.7",
+  "version": "0.2.8-alpha.0",
   "src": "src/file-card.js",
   "main": "lib/file-card.cjs.js",
-  "module": "lib/file-card.mjs",
+  "module": "lib/file-card.umd.js",
   "browser": "lib/file-card.umd.js",
@@ -12,9 +12,9 @@ "files": [
   "dependencies": {
-    "@tradeshift/elements": "^0.2.7",
-    "@tradeshift/elements.card": "^0.2.7",
-    "@tradeshift/elements.file-size": "^0.2.7",
-    "@tradeshift/elements.progress-bar": "^0.2.7",
-    "@tradeshift/elements.typography": "^0.2.7"
+    "@tradeshift/elements": "^0.2.8-alpha.0",
+    "@tradeshift/elements.card": "^0.2.8-alpha.0",
+    "@tradeshift/elements.file-size": "^0.2.8-alpha.0",
+    "@tradeshift/elements.progress-bar": "^0.2.8-alpha.0",
+    "@tradeshift/elements.typography": "^0.2.8-alpha.0"
   },
-  "gitHead": "717d8a88aa6d415788d81487d5283849fbb7e4b8"
+  "gitHead": "685e31b86c299ea046930d20f1dffaf3a80ae13c"
 }

No alert changes

Improved metrics

Number of low supply chain risk alerts

15

decreased by-31.82%

Worsened metrics

Total package byte prevSize

239362

decreased by-18.96%

Number of package files

6

decreased by-25%

Lines of code

1652

decreased by-16.31%

Dependency changes

• Updated@tradeshift/elements@^0.2.8-alpha.0

• Updated@tradeshift/elements.card@^0.2.8-alpha.0

• Updated@tradeshift/elements.file-size@^0.2.8-alpha.0

• Updated@tradeshift/elements.progress-bar@^0.2.8-alpha.0

• Updated@tradeshift/elements.typography@^0.2.8-alpha.0