@bethinkpl/design-system 22.0.2 → 22.0.3

package/dist/design-system.umd.js

@@ -33020,7 +33020,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `@keyframes a-spinAround-aad3ebb0{0%{tr
 
 /***/ }),
 
-/***/ 17143:
+/***/ 64035:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -33037,14 +33037,14 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.ds-card[data-v-6a99ed0a]{background-color:var(--color-default-background);border-radius:6px;box-shadow:0 1px 2px var(--color-default-shadow-weak),0 8px 16px var(--color-default-shadow-weak),0 2px 4px var(--color-default-shadow-strong),0 0 4px var(--color-default-shadow)}.ds-card__header.-ds-withPadding[data-v-6a99ed0a]{padding:16px}.ds-card__headerDivider.-ds-withHorizontalMargin[data-v-6a99ed0a]{margin:0 16px}.ds-card__content[data-v-6a99ed0a]{padding:16px}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.ds-card[data-v-6c7ce969]{background-color:var(--color-default-background);border-radius:6px;box-shadow:0 1px 2px var(--color-default-shadow-weak),0 8px 16px var(--color-default-shadow-weak),0 2px 4px var(--color-default-shadow-strong),0 0 4px var(--color-default-shadow);position:relative;width:inherit}.ds-card.-ds-top-border[data-v-6c7ce969]{border-top:6px solid transparent}.ds-card.-ds-left-border[data-v-6c7ce969]{border-left:6px solid transparent}.ds-card.-ds-border-size-small[data-v-6c7ce969]{border-radius:2px;border-width:2px}.ds-card.-ds-border-size-small .ds-card__loadingBar[data-v-6c7ce969]{border-radius:2px 2px 0 0;top:-2px}.ds-card.-ds-border-size-medium[data-v-6c7ce969]{border-radius:4px;border-width:4px}.ds-card.-ds-border-size-medium .ds-card__loadingBar[data-v-6c7ce969]{border-radius:4px 4px 0 0;top:-4px}.ds-card.-ds-border-size-large[data-v-6c7ce969]{border-radius:6px;border-width:6px}.ds-card.-ds-border-size-large .ds-card__loadingBar[data-v-6c7ce969]{border-radius:6px 6px 0 0;top:-6px}.ds-card.-ds-border-color-neutralHeavy[data-v-6c7ce969]{border-color:var(--color-neutral-border-heavy)}.ds-card.-ds-border-color-neutralStrong[data-v-6c7ce969]{border-color:var(--color-neutral-border-strong)}.ds-card.-ds-border-color-success[data-v-6c7ce969]{border-color:var(--color-success-border)}.ds-card.-ds-border-color-warning[data-v-6c7ce969]{border-color:var(--color-warning-border)}.ds-card.-ds-border-color-danger[data-v-6c7ce969]{border-color:var(--color-danger-border)}.ds-card.-ds-border-color-info[data-v-6c7ce969]{border-color:var(--color-info-border)}.ds-card__loadingBar[data-v-6c7ce969]{overflow:hidden;position:absolute;width:100%}.ds-card__header.-ds-withPadding[data-v-6c7ce969]{padding:16px}.ds-card__headerDivider.-ds-withHorizontalMargin[data-v-6c7ce969]{margin:0 16px}.ds-card__content[data-v-6c7ce969]{padding:16px}`, ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
 /***/ }),
 
-/***/ 67167:
+/***/ 8749:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -33061,7 +33061,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.ds-cardExpandable__expandedContent[data-v-aad9e34c]{animation:a-fadeIn .6s ease-in-out}.ds-cardExpandable__expander[data-v-aad9e34c]{align-items:center;background-color:var(--color-neutral-background);border-radius:0 0 6px 6px;cursor:pointer;display:flex;justify-content:center;padding:12px 16px}.ds-cardExpandable__expander[data-v-aad9e34c]:hover{background-color:var(--color-neutral-background-hovered)}.ds-cardExpandable__expanderLabel[data-v-aad9e34c]{--token:label-s-extensive-bold-uppercase;font-weight:var(--typography-font-weight-bold);font-style:var(--typography-font-style-normal);line-height:var(--typography-line-height-4xs);font-size:var(--typography-font-size-2xs);letter-spacing:var(--typography-letter-spacing-xl);-webkit-text-decoration:var(--typography-text-decoration-none);text-decoration:var(--typography-text-decoration-none);text-transform:var(--typography-text-transform-uppercase);color:var(--color-primary-text);margin-right:4px}.ds-cardExpandable__expanderIcon[data-v-aad9e34c]{color:var(--color-primary-icon)}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.ds-cardExpandable__expandedContent[data-v-a3ca7ce0]{animation:a-fadeIn .6s ease-in-out}.ds-cardExpandable__expander[data-v-a3ca7ce0]{align-items:center;background-color:var(--color-neutral-background);border-radius:0 0 6px 6px;cursor:pointer;display:flex;justify-content:center;padding:12px 16px}.ds-cardExpandable__expander[data-v-a3ca7ce0]:hover{background-color:var(--color-neutral-background-hovered)}.ds-cardExpandable__expanderLabel[data-v-a3ca7ce0]{--token:label-s-extensive-bold-uppercase;font-weight:var(--typography-font-weight-bold);font-style:var(--typography-font-style-normal);line-height:var(--typography-line-height-4xs);font-size:var(--typography-font-size-2xs);letter-spacing:var(--typography-letter-spacing-xl);-webkit-text-decoration:var(--typography-text-decoration-none);text-decoration:var(--typography-text-decoration-none);text-transform:var(--typography-text-transform-uppercase);color:var(--color-primary-text);margin-right:4px}.ds-cardExpandable__expanderIcon[data-v-a3ca7ce0]{color:var(--color-primary-icon)}`, ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -33498,6 +33498,30 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.ds-threeColumnLayout[data-v-3c1d2ecc]
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 50602:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(43481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.ds-loadingBar[data-v-28a73c9a]{background-color:var(--color-neutral-background);display:flex}.ds-loadingBar.-ds-size-small[data-v-28a73c9a]{height:2px}.ds-loadingBar.-ds-size-medium[data-v-28a73c9a]{height:4px}.ds-loadingBar.-ds-size-large[data-v-28a73c9a]{height:6px}.ds-loadingBar__loader[data-v-28a73c9a]{width:0}.ds-loadingBar__loader.-ds-border-color-neutralHeavy[data-v-28a73c9a]{background-color:var(--color-neutral-border-heavy)}.ds-loadingBar__loader.-ds-border-color-neutralStrong[data-v-28a73c9a]{background-color:var(--color-neutral-border-strong)}.ds-loadingBar__loader.-ds-border-color-success[data-v-28a73c9a]{background-color:var(--color-success-border)}.ds-loadingBar__loader.-ds-border-color-warning[data-v-28a73c9a]{background-color:var(--color-warning-border)}.ds-loadingBar__loader.-ds-border-color-danger[data-v-28a73c9a]{background-color:var(--color-danger-border)}.ds-loadingBar__loader.-ds-border-color-info[data-v-28a73c9a]{background-color:var(--color-info-border)}`, ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 72706:
@@ -34512,12 +34536,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Card_vue_vue_type_template_id_6a99ed0a_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(36373);
+/* harmony import */ var _Card_vue_vue_type_template_id_6c7ce969_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4152);
 /* harmony import */ var _Card_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8499);
 /* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
 /* harmony reexport (unknown) */ for(const __WEBPACK_IMPORT_KEY__ in _Card_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== "default") __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = () => _Card_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__[__WEBPACK_IMPORT_KEY__]
 /* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-/* harmony import */ var _Card_vue_vue_type_style_index_0_id_6a99ed0a_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(48174);
+/* harmony import */ var _Card_vue_vue_type_style_index_0_id_6c7ce969_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(40611);
 /* harmony import */ var _node_modules_vue_cli_service_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(48118);
 
 
@@ -34526,7 +34550,7 @@ __webpack_require__.r(__webpack_exports__);
 ;
 
 
-const __exports__ = /*#__PURE__*/(0,_node_modules_vue_cli_service_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(_Card_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_Card_vue_vue_type_template_id_6a99ed0a_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__/* .render */ .s],['__scopeId',"data-v-6a99ed0a"]])
+const __exports__ = /*#__PURE__*/(0,_node_modules_vue_cli_service_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(_Card_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_Card_vue_vue_type_template_id_6c7ce969_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__/* .render */ .s],['__scopeId',"data-v-6c7ce969"]])
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
@@ -34540,12 +34564,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _CardExpandable_vue_vue_type_template_id_aad9e34c_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(21199);
+/* harmony import */ var _CardExpandable_vue_vue_type_template_id_a3ca7ce0_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(97355);
 /* harmony import */ var _CardExpandable_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(20589);
 /* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
 /* harmony reexport (unknown) */ for(const __WEBPACK_IMPORT_KEY__ in _CardExpandable_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== "default") __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = () => _CardExpandable_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__[__WEBPACK_IMPORT_KEY__]
 /* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-/* harmony import */ var _CardExpandable_vue_vue_type_style_index_0_id_aad9e34c_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(53040);
+/* harmony import */ var _CardExpandable_vue_vue_type_style_index_0_id_a3ca7ce0_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(81942);
 /* harmony import */ var _node_modules_vue_cli_service_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(48118);
 
 
@@ -34554,7 +34578,7 @@ __webpack_require__.r(__webpack_exports__);
 ;
 
 
-const __exports__ = /*#__PURE__*/(0,_node_modules_vue_cli_service_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(_CardExpandable_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_CardExpandable_vue_vue_type_template_id_aad9e34c_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__/* .render */ .s],['__scopeId',"data-v-aad9e34c"]])
+const __exports__ = /*#__PURE__*/(0,_node_modules_vue_cli_service_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(_CardExpandable_vue_vue_type_script_lang_ts__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_CardExpandable_vue_vue_type_template_id_a3ca7ce0_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__/* .render */ .s],['__scopeId',"data-v-a3ca7ce0"]])
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
@@ -35217,6 +35241,47 @@ const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ThreeColumnLayo
 
 /***/ }),
 
+/***/ 82349:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  __esModule: () => (/* reexport */ LoadingBarvue_type_script_lang_ts/* __esModule */.X),
+  "default": () => (/* binding */ LoadingBar)
+});
+
+// EXTERNAL MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./lib/js/components/LoadingBar/LoadingBar.vue?vue&type=template&id=28a73c9a&scoped=true&ts=true
+var LoadingBarvue_type_template_id_28a73c9a_scoped_true_ts_true = __webpack_require__(66477);
+;// CONCATENATED MODULE: ./lib/js/components/LoadingBar/LoadingBar.vue?vue&type=template&id=28a73c9a&scoped=true&ts=true
+
+// EXTERNAL MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./lib/js/components/LoadingBar/LoadingBar.vue?vue&type=script&lang=ts
+var LoadingBarvue_type_script_lang_ts = __webpack_require__(14761);
+;// CONCATENATED MODULE: ./lib/js/components/LoadingBar/LoadingBar.vue?vue&type=script&lang=ts
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./lib/js/components/LoadingBar/LoadingBar.vue?vue&type=style&index=0&id=28a73c9a&scoped=true&lang=scss
+var LoadingBarvue_type_style_index_0_id_28a73c9a_scoped_true_lang_scss = __webpack_require__(72657);
+;// CONCATENATED MODULE: ./lib/js/components/LoadingBar/LoadingBar.vue?vue&type=style&index=0&id=28a73c9a&scoped=true&lang=scss
+
+// EXTERNAL MODULE: ./node_modules/@vue/cli-service/node_modules/vue-loader/dist/exportHelper.js
+var exportHelper = __webpack_require__(48118);
+;// CONCATENATED MODULE: ./lib/js/components/LoadingBar/LoadingBar.vue
+
+
+
+
+;
+
+
+const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(LoadingBarvue_type_script_lang_ts/* default */.Z, [['render',LoadingBarvue_type_template_id_28a73c9a_scoped_true_ts_true/* render */.s],['__scopeId',"data-v-28a73c9a"]])
+
+/* harmony default export */ const LoadingBar = (__exports__);
+
+/***/ }),
+
 /***/ 97638:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -37412,26 +37477,26 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 36373:
+/***/ 4152:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   s: () => (/* reexport safe */ _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_template_id_6a99ed0a_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__.s)
+/* harmony export */   s: () => (/* reexport safe */ _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_template_id_6c7ce969_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__.s)
 /* harmony export */ });
-/* harmony import */ var _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_template_id_6a99ed0a_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(66670);
+/* harmony import */ var _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_template_id_6c7ce969_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(94593);
 
 
 /***/ }),
 
-/***/ 21199:
+/***/ 97355:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   s: () => (/* reexport safe */ _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_template_id_aad9e34c_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__.s)
+/* harmony export */   s: () => (/* reexport safe */ _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_template_id_a3ca7ce0_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__.s)
 /* harmony export */ });
-/* harmony import */ var _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_template_id_aad9e34c_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(88353);
+/* harmony import */ var _node_modules_ts_loader_index_js_clonedRuleSet_40_use_0_node_modules_vue_cli_service_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_template_id_a3ca7ce0_scoped_true_ts_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(26550);
 
 
 /***/ }),
@@ -37956,22 +38021,22 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 48174:
+/***/ 40611:
 /***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
 
 "use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_style_index_0_id_6a99ed0a_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(47624);
-/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_style_index_0_id_6a99ed0a_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_style_index_0_id_6a99ed0a_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_style_index_0_id_6c7ce969_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(96515);
+/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_style_index_0_id_6c7ce969_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Card_vue_vue_type_style_index_0_id_6c7ce969_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
 
 
 /***/ }),
 
-/***/ 53040:
+/***/ 81942:
 /***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
 
 "use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_style_index_0_id_aad9e34c_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(77601);
-/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_style_index_0_id_aad9e34c_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_style_index_0_id_aad9e34c_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_style_index_0_id_a3ca7ce0_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10981);
+/* harmony import */ var _node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_style_index_0_id_a3ca7ce0_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_clonedRuleSet_22_use_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_clonedRuleSet_22_use_1_node_modules_vue_cli_service_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_2_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_22_use_3_node_modules_sass_loader_dist_cjs_js_clonedRuleSet_22_use_4_node_modules_vue_cli_service_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CardExpandable_vue_vue_type_style_index_0_id_a3ca7ce0_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
 
 
 /***/ }),
@@ -41210,6 +41275,35 @@ exports["default"] = IconButton_vue_1.default;
 __exportStar(__webpack_require__(62735), exports);
 
 
+/***/ }),
+
+/***/ 55351:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.CARD_BORDER_POSITIONS = exports.CARD_BORDER_SIZES = exports.CARD_BORDER_COLORS = void 0;
+exports.CARD_BORDER_COLORS = {
+    NEUTRAL_HEAVY: 'neutralHeavy',
+    NEUTRAL_STRONG: 'neutralStrong',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger',
+    INFO: 'info',
+    TRANSPARENT: 'transparent',
+};
+exports.CARD_BORDER_SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+exports.CARD_BORDER_POSITIONS = {
+    TOP: 'top',
+    LEFT: 'left',
+};
+
+
 /***/ }),
 
 /***/ 94001:
@@ -41948,6 +42042,60 @@ __exportStar(__webpack_require__(46991), exports);
 exports["default"] = ThreeColumnLayout_vue_1.default;
 
 
+/***/ }),
+
+/***/ 96660:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.LOADING_BAR_SIZES = exports.LOADING_BAR_COLORS = void 0;
+exports.LOADING_BAR_COLORS = {
+    NEUTRAL_HEAVY: 'neutralHeavy',
+    NEUTRAL_STRONG: 'neutralStrong',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger',
+    INFO: 'info',
+};
+exports.LOADING_BAR_SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+
+
+/***/ }),
+
+/***/ 32807:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const LoadingBar_vue_1 = __importDefault(__webpack_require__(82349));
+__exportStar(__webpack_require__(96660), exports);
+exports["default"] = LoadingBar_vue_1.default;
+
+
 /***/ }),
 
 /***/ 46644:
@@ -43721,8 +43869,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Pagination = exports.IconText = exports.ProgressDonutChart = exports.ProgressBar = exports.Dropdown = exports.PopOver = exports.SelectionTile = exports.SelectListSectionTitle = exports.SelectListItemTile = exports.SelectListItemToggle = exports.SelectListItemDivider = exports.SelectListItem = exports.SelectList = exports.CounterToggle = exports.Chip = exports.OutlineSectionHeader = exports.OutlineDivider = exports.OutlineItem = exports.DrawerSection = exports.DrawerTile = exports.DrawerListItemGroup = exports.DrawerListItem = exports.DrawerHeader = exports.DrawerDivider = exports.DrawerContent = exports.Drawer = exports.SectionTitle = exports.PageHeader = exports.SectionHeader = exports.SurveyQuestionOpenEnded = exports.SurveyQuestionScale = exports.SurveyToggle = exports.BlockadeStatus = exports.AccessStatus = exports.Tile = exports.TabItem = exports.NumberInCircle = exports.DsModalDialog = exports.DsModal = exports.Modal = exports.IconButton = exports.Icon = exports.FeatureIcon = exports.Divider = exports.CardExpandable = exports.Card = exports.ToggleButton = exports.Button = exports.Banner = exports.BadgeScore = void 0;
-exports.initializeIconsWithDomWatcher = exports.initializeIcons = exports.Switch = exports.GroupRichListItem = exports.BasicRichListItem = exports.RichListItem = exports.ThreeColumnLayout = exports.Well = exports.OverlayHeader = void 0;
+exports.IconText = exports.ProgressDonutChart = exports.ProgressBar = exports.Dropdown = exports.PopOver = exports.LoadingBar = exports.SelectionTile = exports.SelectListSectionTitle = exports.SelectListItemTile = exports.SelectListItemToggle = exports.SelectListItemDivider = exports.SelectListItem = exports.SelectList = exports.CounterToggle = exports.Chip = exports.OutlineSectionHeader = exports.OutlineDivider = exports.OutlineItem = exports.DrawerSection = exports.DrawerTile = exports.DrawerListItemGroup = exports.DrawerListItem = exports.DrawerHeader = exports.DrawerDivider = exports.DrawerContent = exports.Drawer = exports.SectionTitle = exports.PageHeader = exports.SectionHeader = exports.SurveyQuestionOpenEnded = exports.SurveyQuestionScale = exports.SurveyToggle = exports.BlockadeStatus = exports.AccessStatus = exports.Tile = exports.TabItem = exports.NumberInCircle = exports.DsModalDialog = exports.DsModal = exports.Modal = exports.IconButton = exports.Icon = exports.FeatureIcon = exports.Divider = exports.CardExpandable = exports.Card = exports.ToggleButton = exports.Button = exports.Banner = exports.BadgeScore = void 0;
+exports.initializeIconsWithDomWatcher = exports.initializeIcons = exports.Switch = exports.GroupRichListItem = exports.BasicRichListItem = exports.RichListItem = exports.ThreeColumnLayout = exports.Well = exports.OverlayHeader = exports.Pagination = void 0;
 var BadgeScore_1 = __webpack_require__(10540);
 Object.defineProperty(exports, "BadgeScore", ({ enumerable: true, get: function () { return __importDefault(BadgeScore_1).default; } }));
 __exportStar(__webpack_require__(60436), exports);
@@ -43838,6 +43986,9 @@ __exportStar(__webpack_require__(17185), exports);
 var SelectionTile_1 = __webpack_require__(14028);
 Object.defineProperty(exports, "SelectionTile", ({ enumerable: true, get: function () { return __importDefault(SelectionTile_1).default; } }));
 __exportStar(__webpack_require__(14028), exports);
+var LoadingBar_1 = __webpack_require__(32807);
+Object.defineProperty(exports, "LoadingBar", ({ enumerable: true, get: function () { return __importDefault(LoadingBar_1).default; } }));
+__exportStar(__webpack_require__(32807), exports);
 var PopOver_1 = __webpack_require__(70915);
 Object.defineProperty(exports, "PopOver", ({ enumerable: true, get: function () { return __importDefault(PopOver_1).default; } }));
 __exportStar(__webpack_require__(65609), exports);
@@ -44433,14 +44584,39 @@ exports["default"] = {
 
 "use strict";
 
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const Divider_vue_1 = __importDefault(__webpack_require__(39877));
+const LoadingBar_1 = __importStar(__webpack_require__(32807));
+const Card_consts_1 = __webpack_require__(55351);
 exports["default"] = {
     name: 'Card',
-    components: { DsDivider: Divider_vue_1.default },
+    components: { DsDivider: Divider_vue_1.default, DsLoadingBar: LoadingBar_1.default },
     props: {
         headerHasPadding: {
             type: Boolean,
@@ -44450,6 +44626,57 @@ exports["default"] = {
             type: Boolean,
             default: false,
         },
+        hasBorder: {
+            type: Boolean,
+            default: false,
+        },
+        borderPosition: {
+            type: String,
+            default: Card_consts_1.CARD_BORDER_POSITIONS.TOP,
+        },
+        borderSize: {
+            type: String,
+            default: Card_consts_1.CARD_BORDER_SIZES.LARGE,
+        },
+        borderColor: {
+            type: String,
+            default: Card_consts_1.CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+        },
+        hasLoadingBar: {
+            type: Boolean,
+            default: false,
+        },
+        loadingBarColor: {
+            type: String,
+            default: LoadingBar_1.LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+        },
+        loadingBarTime: {
+            type: String,
+            default: '0',
+        },
+    },
+    computed: {
+        hasLeftBoarder() {
+            return (this.hasBorder &&
+                this.borderPosition === Card_consts_1.CARD_BORDER_POSITIONS.LEFT &&
+                !this.hasLoadingBar);
+        },
+        hasTopBoarder() {
+            return ((this.hasBorder && this.borderPosition === Card_consts_1.CARD_BORDER_POSITIONS.TOP) ||
+                this.hasLoadingBar);
+        },
+        borderColorClass() {
+            if (this.hasLoadingBar) {
+                return '-ds-border-color-transparent';
+            }
+            return `-ds-border-color-${this.borderColor}`;
+        },
+        borderSizeClass() {
+            if (!this.hasBorder && !this.hasLoadingBar) {
+                return '';
+            }
+            return `-ds-border-size-${this.borderSize}`;
+        },
     },
 };
 
@@ -44522,9 +44749,7 @@ exports["default"] = {
             default: false,
         },
     },
-    // TODO fix me when touching this file
-    // eslint-disable-next-line vue/require-emit-validator
-    emits: ['update:isExpanded'],
+    emits: { 'update:isExpanded': (payload) => true },
     data() {
         return {
             isExpandedInternal: false,
@@ -46163,6 +46388,62 @@ exports.Z = {
 };
 
 
+/***/ }),
+
+/***/ 14761:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "X", ({ value: true }));
+const LoadingBar_consts_1 = __webpack_require__(96660);
+exports.Z = {
+    name: 'LoadingBar',
+    props: {
+        color: {
+            type: String,
+            default: LoadingBar_consts_1.LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+        },
+        size: {
+            type: String,
+            default: LoadingBar_consts_1.LOADING_BAR_SIZES.LARGE,
+        },
+        time: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            intervalId: 0,
+            width: 0,
+        };
+    },
+    computed: {
+        sizeClassName() {
+            return `-ds-size-${this.size}`;
+        },
+        loadingBarStyles() {
+            return {
+                width: `${this.width}%`,
+                transition: `width ${this.time}s linear`,
+            };
+        },
+    },
+    mounted() {
+        if (this.time === '0') {
+            this.width = 100;
+            return;
+        }
+        // without postponing the width change, the transition won't work,
+        // and the loading bar is 100% width right away
+        setTimeout(() => {
+            this.width = 100;
+        }, 0);
+    },
+};
+
+
 /***/ }),
 
 /***/ 10175:
@@ -49281,7 +49562,7 @@ exports.s = render;
 
 /***/ }),
 
-/***/ 66670:
+/***/ 94593:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -49290,18 +49571,35 @@ var __webpack_unused_export__;
 __webpack_unused_export__ = ({ value: true });
 exports.s = void 0;
 const vue_1 = __webpack_require__(77203);
-const _withScopeId = n => ((0, vue_1.pushScopeId)("data-v-6a99ed0a"), n = n(), (0, vue_1.popScopeId)(), n);
-const _hoisted_1 = { class: "ds-card" };
-const _hoisted_2 = {
-    key: 2,
+const _withScopeId = n => ((0, vue_1.pushScopeId)("data-v-6c7ce969"), n = n(), (0, vue_1.popScopeId)(), n);
+const _hoisted_1 = {
+    key: 3,
     class: "ds-card__content"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_ds_loading_bar = (0, vue_1.resolveComponent)("ds-loading-bar");
     const _component_ds_divider = (0, vue_1.resolveComponent)("ds-divider");
-    return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
+    return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", {
+        class: (0, vue_1.normalizeClass)({
+            'ds-card': true,
+            [$options.borderColorClass]: true,
+            [$options.borderSizeClass]: true,
+            '-ds-top-border': $options.hasTopBoarder,
+            '-ds-left-border': $options.hasLeftBoarder,
+        })
+    }, [
+        ($props.hasLoadingBar)
+            ? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(_component_ds_loading_bar, {
+                key: 0,
+                class: "ds-card__loadingBar",
+                time: $props.loadingBarTime,
+                color: $props.loadingBarColor,
+                size: $props.borderSize
+            }, null, 8, ["time", "color", "size"]))
+            : (0, vue_1.createCommentVNode)("", true),
         (_ctx.$slots.header)
             ? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", {
-                key: 0,
+                key: 1,
                 class: (0, vue_1.normalizeClass)(["ds-card__header", { '-ds-withPadding': $props.headerHasPadding }])
             }, [
                 (0, vue_1.renderSlot)(_ctx.$slots, "header", {}, undefined, true)
@@ -49309,24 +49607,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             : (0, vue_1.createCommentVNode)("", true),
         (_ctx.$slots.header && _ctx.$slots.content && $props.dividerUnderHeader)
             ? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(_component_ds_divider, {
-                key: 1,
+                key: 2,
                 class: (0, vue_1.normalizeClass)(["ds-card__headerDivider", { '-ds-withHorizontalMargin': $props.headerHasPadding }])
             }, null, 8, ["class"]))
             : (0, vue_1.createCommentVNode)("", true),
         (_ctx.$slots.content)
-            ? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_2, [
+            ? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
                 (0, vue_1.renderSlot)(_ctx.$slots, "content", {}, undefined, true)
             ]))
             : (0, vue_1.createCommentVNode)("", true),
         (0, vue_1.renderSlot)(_ctx.$slots, "footer", {}, undefined, true)
-    ]));
+    ], 2));
 }
 exports.s = render;
 
 
 /***/ }),
 
-/***/ 88353:
+/***/ 26550:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -49335,7 +49633,7 @@ var __webpack_unused_export__;
 __webpack_unused_export__ = ({ value: true });
 exports.s = void 0;
 const vue_1 = __webpack_require__(77203);
-const _withScopeId = n => ((0, vue_1.pushScopeId)("data-v-aad9e34c"), n = n(), (0, vue_1.popScopeId)(), n);
+const _withScopeId = n => ((0, vue_1.pushScopeId)("data-v-a3ca7ce0"), n = n(), (0, vue_1.popScopeId)(), n);
 const _hoisted_1 = {
     key: 0,
     class: "ds-cardExpandable__expandedContent"
@@ -50512,6 +50810,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 exports.s = render;
 
 
+/***/ }),
+
+/***/ 66477:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+var __webpack_unused_export__;
+
+__webpack_unused_export__ = ({ value: true });
+exports.s = void 0;
+const vue_1 = __webpack_require__(77203);
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", {
+        class: (0, vue_1.normalizeClass)(["ds-loadingBar", [$options.sizeClassName]])
+    }, [
+        (0, vue_1.createElementVNode)("span", {
+            class: (0, vue_1.normalizeClass)(['ds-loadingBar__loader', `-ds-border-color-${$props.color}`]),
+            style: (0, vue_1.normalizeStyle)($options.loadingBarStyles)
+        }, null, 6)
+    ], 2));
+}
+exports.s = render;
+
+
 /***/ }),
 
 /***/ 63206:
@@ -52877,35 +53199,35 @@ var update = add("371b7e93", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 47624:
+/***/ 96515:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(17143);
+var content = __webpack_require__(64035);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(54402)/* ["default"] */ .Z)
-var update = add("8efc5f1e", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("52d516c6", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 77601:
+/***/ 10981:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(67167);
+var content = __webpack_require__(8749);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(54402)/* ["default"] */ .Z)
-var update = add("366dfe14", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("5bd6af09", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -53197,6 +53519,22 @@ var update = add("e0f0e36c", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 72657:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(50602);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(54402)/* ["default"] */ .Z)
+var update = add("73294b03", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 55740:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {