@mozaic-ds/web-components 0.7.0 → 0.9.0-beta

package/public/components/kpi/Kpi.js

@@ -0,0 +1,405 @@
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, e as element, d as space, t as text, n as noop, g as attr, j as append, k as set_data, o as detach } from '../../index-c33b3772.js';
+
+/* src/components/kpi/Kpi.svelte generated by Svelte v3.58.0 */
+
+function create_if_block_4(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*label*/ ctx[3]);
+			attr(span, "class", "mc-kpi__label");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*label*/ 8) set_data(t, /*label*/ ctx[3]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (31:6) {#if !labelOutsideContent}
+function create_if_block_3(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*label*/ ctx[3]);
+			attr(span, "class", "mc-kpi__label");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*label*/ 8) set_data(t, /*label*/ ctx[3]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (36:4) {#if iconname || detail}
+function create_if_block(ctx) {
+	let div;
+	let t;
+	let if_block0 = /*detail*/ ctx[5] && create_if_block_2(ctx);
+	let if_block1 = /*iconname*/ ctx[1] && create_if_block_1(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block0) if_block0.c();
+			t = space();
+			if (if_block1) if_block1.c();
+			attr(div, "class", "mc-kpi__aside");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block0) if_block0.m(div, null);
+			append(div, t);
+			if (if_block1) if_block1.m(div, null);
+		},
+		p(ctx, dirty) {
+			if (/*detail*/ ctx[5]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_2(ctx);
+					if_block0.c();
+					if_block0.m(div, t);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (/*iconname*/ ctx[1]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block_1(ctx);
+					if_block1.c();
+					if_block1.m(div, null);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+		}
+	};
+}
+
+// (38:8) {#if detail}
+function create_if_block_2(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*detail*/ ctx[5]);
+			attr(span, "class", "mc-kpi__detail");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*detail*/ 32) set_data(t, /*detail*/ ctx[5]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (41:8) {#if iconname}
+function create_if_block_1(ctx) {
+	let span;
+	let raw_value = `<${generateIconName(/*iconname*/ ctx[1], /*iconcolor*/ ctx[2])} />` + "";
+
+	return {
+		c() {
+			span = element("span");
+			attr(span, "class", "mc-kpi__icon");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			span.innerHTML = raw_value;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*iconname, iconcolor*/ 6 && raw_value !== (raw_value = `<${generateIconName(/*iconname*/ ctx[1], /*iconcolor*/ ctx[2])} />` + "")) span.innerHTML = raw_value;		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div2;
+	let t0;
+	let div1;
+	let div0;
+	let t1;
+	let span;
+	let t2;
+	let t3;
+	let div2_class_value;
+	let if_block0 = /*labelOutsideContent*/ ctx[7] && create_if_block_4(ctx);
+	let if_block1 = !/*labelOutsideContent*/ ctx[7] && create_if_block_3(ctx);
+	let if_block2 = (/*iconname*/ ctx[1] || /*detail*/ ctx[5]) && create_if_block(ctx);
+
+	return {
+		c() {
+			div2 = element("div");
+			if (if_block0) if_block0.c();
+			t0 = space();
+			div1 = element("div");
+			div0 = element("div");
+			if (if_block1) if_block1.c();
+			t1 = space();
+			span = element("span");
+			t2 = text(/*value*/ ctx[0]);
+			t3 = space();
+			if (if_block2) if_block2.c();
+			this.c = noop;
+			attr(span, "class", "mc-kpi__value");
+			attr(div0, "class", "mc-kpi__main");
+			attr(div1, "class", "mc-kpi__content");
+			attr(div2, "class", div2_class_value = "mc-kpi mc-kpi--" + /*size*/ ctx[6]() + " mc-kpi--" + /*type*/ ctx[4]);
+		},
+		m(target, anchor) {
+			insert(target, div2, anchor);
+			if (if_block0) if_block0.m(div2, null);
+			append(div2, t0);
+			append(div2, div1);
+			append(div1, div0);
+			if (if_block1) if_block1.m(div0, null);
+			append(div0, t1);
+			append(div0, span);
+			append(span, t2);
+			append(div1, t3);
+			if (if_block2) if_block2.m(div1, null);
+		},
+		p(ctx, [dirty]) {
+			if (/*labelOutsideContent*/ ctx[7]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_4(ctx);
+					if_block0.c();
+					if_block0.m(div2, t0);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (!/*labelOutsideContent*/ ctx[7]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block_3(ctx);
+					if_block1.c();
+					if_block1.m(div0, t1);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*value*/ 1) set_data(t2, /*value*/ ctx[0]);
+
+			if (/*iconname*/ ctx[1] || /*detail*/ ctx[5]) {
+				if (if_block2) {
+					if_block2.p(ctx, dirty);
+				} else {
+					if_block2 = create_if_block(ctx);
+					if_block2.c();
+					if_block2.m(div1, null);
+				}
+			} else if (if_block2) {
+				if_block2.d(1);
+				if_block2 = null;
+			}
+
+			if (dirty & /*size, type*/ 80 && div2_class_value !== (div2_class_value = "mc-kpi mc-kpi--" + /*size*/ ctx[6]() + " mc-kpi--" + /*type*/ ctx[4])) {
+				attr(div2, "class", div2_class_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div2);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			if (if_block2) if_block2.d();
+		}
+	};
+}
+
+function generateIconName(iconname, iconcolor) {
+	return iconcolor
+	? `${iconname}  fill="${iconcolor}"`
+	: `${iconname}`;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let labelOutsideContent;
+	let size;
+	let { value = '' } = $$props;
+	let { iconname = '' } = $$props;
+	let { iconcolor = '' } = $$props;
+	let { label = '' } = $$props;
+	let { type = '' } = $$props;
+	let { detail = '' } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('value' in $$props) $$invalidate(0, value = $$props.value);
+		if ('iconname' in $$props) $$invalidate(1, iconname = $$props.iconname);
+		if ('iconcolor' in $$props) $$invalidate(2, iconcolor = $$props.iconcolor);
+		if ('label' in $$props) $$invalidate(3, label = $$props.label);
+		if ('type' in $$props) $$invalidate(4, type = $$props.type);
+		if ('detail' in $$props) $$invalidate(5, detail = $$props.detail);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*label, detail*/ 40) {
+			$$invalidate(6, size = function getSize() {
+				let size = 'small';
+
+				if (label && label.length > 0 && !detail) {
+					size = 'medium';
+				} else if (detail && detail.length > 0) {
+					size = 'large';
+				}
+
+				return size;
+			});
+		}
+
+		if ($$self.$$.dirty & /*label, size*/ 72) {
+			$$invalidate(7, labelOutsideContent = label && label.length > 0 && size() !== 'large');
+		}
+	};
+
+	return [value, iconname, iconcolor, label, type, detail, size, labelOutsideContent];
+}
+
+class Kpi extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-kpi{color:var(--color-kpi-text, #005c91);display:inline-block}.mc-kpi__label{font-size:1.2rem;display:block}.mc-kpi__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-kpi__main{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__value{font-size:1.2rem;font-weight:600}.mc-kpi__aside{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-grey-000, #ffffff);color:var(--color-font-dark, #000000);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__detail{font-size:1.2rem}.mc-kpi__icon{display:block;height:16px;width:16px}.mc-kpi--small .mc-kpi__label{font-size:1rem;margin-bottom:6px;color:var(--color-grey-999, #999999)}.mc-kpi--small .mc-kpi__content{gap:0.5rem}.mc-kpi--small .mc-kpi__value{font-size:0.875rem;line-height:1.2}.mc-kpi--small .mc-kpi__main{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;padding:3px 7px}.mc-kpi--small .mc-kpi__aside{background-color:transparent}.mc-kpi--medium .mc-kpi__label{color:var(--color-grey-999, #999999);margin-bottom:6px}.mc-kpi--medium .mc-kpi__content{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;height:40px;min-width:160px}.mc-kpi--medium .mc-kpi__main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:2px 2px 2px 7px}.mc-kpi--medium .mc-kpi__value{font-size:1.5rem}.mc-kpi--medium .mc-kpi__aside{padding-left:12px;padding-right:15px}.mc-kpi--large{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden}.mc-kpi--large .mc-kpi__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:160px;min-height:100px}.mc-kpi--large .mc-kpi__main{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:10px 15px;min-height:5rem}.mc-kpi--large .mc-kpi__label{line-height:1.5;font-size:1rem}.mc-kpi--large .mc-kpi__value{font-size:2rem}.mc-kpi--large .mc-kpi__detail{font-size:1rem;line-height:1}.mc-kpi--large .mc-kpi__aside{min-height:3rem;padding-right:15px;padding-left:15px;gap:12px}.mc-kpi--information{--color-kpi-background:#daeff7;--color-kpi-border:#007bb4;--color-kpi-text:#005c91}.mc-kpi--warning{--color-kpi-background:#fdf1e8;--color-kpi-border:#c65200;--color-kpi-text:#8c3500}.mc-kpi--danger{--color-kpi-background:#fdeaea;--color-kpi-border:#c61112;--color-kpi-text:#8c0003}.mc-kpi--success{--color-kpi-background:#ebf5de;--color-kpi-border:#188803;--color-kpi-text:#006902}.mc-kpi--neutral{--color-kpi-background:#e6e6e6;--color-kpi-border:#666666;--color-kpi-text:#4d4d4d}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				value: 0,
+				iconname: 1,
+				iconcolor: 2,
+				label: 3,
+				type: 4,
+				detail: 5
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["value", "iconname", "iconcolor", "label", "type", "detail"];
+	}
+
+	get value() {
+		return this.$$.ctx[0];
+	}
+
+	set value(value) {
+		this.$$set({ value });
+		flush();
+	}
+
+	get iconname() {
+		return this.$$.ctx[1];
+	}
+
+	set iconname(iconname) {
+		this.$$set({ iconname });
+		flush();
+	}
+
+	get iconcolor() {
+		return this.$$.ctx[2];
+	}
+
+	set iconcolor(iconcolor) {
+		this.$$set({ iconcolor });
+		flush();
+	}
+
+	get label() {
+		return this.$$.ctx[3];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+
+	get type() {
+		return this.$$.ctx[4];
+	}
+
+	set type(type) {
+		this.$$set({ type });
+		flush();
+	}
+
+	get detail() {
+		return this.$$.ctx[5];
+	}
+
+	set detail(detail) {
+		this.$$set({ detail });
+		flush();
+	}
+}
+
+export { Kpi as default };
+//# sourceMappingURL=Kpi.js.map

package/public/components/kpi/Kpi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kpi.js","sources":["../../../src/components/kpi/Kpi.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let value: string = '';\n  export let iconname: string = '';\n  export let iconcolor: string = '';\n  export let label: string = '';\n  export let type: string = '';\n  export let detail: string = '';\n  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';\n  $: size = function getSize() {\n    let size = 'small';\n    if (label && label.length > 0 && !detail) {\n      size = 'medium';\n    } else if (detail && detail.length > 0) {\n      size = 'large';\n    }\n\n    return size;\n  };\n\n  function generateIconName(iconname: string, iconcolor?: string): string {\n    return iconcolor ? `${iconname}  fill=\"${iconcolor}\"` : `${iconname}`;\n  }\n</script>\n\n<div class=\"mc-kpi mc-kpi--{size()} mc-kpi--{type}\">\n  {#if labelOutsideContent}\n    <span class=\"mc-kpi__label\">{label}</span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if !labelOutsideContent}\n        <span class=\"mc-kpi__label\">{label}</span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if iconname || detail}\n      <div class=\"mc-kpi__aside\">\n        {#if detail}\n          <span class=\"mc-kpi__detail\">{detail}</span>\n        {/if}\n        {#if iconname}\n          <span class=\"mc-kpi__icon\"\n            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span\n          >\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  .mc-kpi {\n    color: var(--color-kpi-text, #005c91);\n    display: inline-block;\n\n    &__label {\n      font-size: 1.2rem;\n      display: block;\n    }\n\n    &__content {\n      display: flex;\n    }\n\n    &__main {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    &__value {\n      font-size: 1.2rem;\n      font-weight: 600;\n    }\n\n    &__aside {\n      align-items: center;\n      background-color: var(--color-grey-000, #ffffff);\n      color: var(--color-font-dark, #000000);\n      display: flex;\n      justify-content: center;\n    }\n\n    &__detail {\n      font-size: 1.2rem;\n    }\n\n    &__icon {\n      display: block;\n      height: 16px;\n      width: 16px;\n    }\n\n    &--small {\n      .mc-kpi {\n        &__label {\n          font-size: 1rem;\n          margin-bottom: 6px;\n          color: var(--color-grey-999, #999999);\n        }\n\n        &__content {\n          gap: 0.5rem;\n        }\n\n        &__value {\n          font-size: 0.875rem;\n          line-height: 1.2;\n        }\n\n        &__main {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          padding: 3px 7px;\n        }\n\n        &__aside {\n          background-color: transparent;\n        }\n      }\n    }\n\n    &--medium {\n      .mc-kpi {\n        &__label {\n          color: var(--color-grey-999, #999999);\n          margin-bottom: 6px;\n        }\n\n        &__content {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          height: 40px;\n          min-width: 160px;\n        }\n\n        &__main {\n          flex-grow: 1;\n          padding: 2px 2px 2px 7px;\n        }\n\n        &__value {\n          font-size: 1.5rem;\n        }\n\n        &__aside {\n          padding-left: 12px;\n          padding-right: 15px;\n        }\n      }\n    }\n\n    &--large {\n      background-color: var(--color-kpi-background, #daeff7);\n      border: 1px solid var(--color-kpi-border, #007bb4);\n      border-radius: 4px;\n      overflow: hidden;\n\n      .mc-kpi {\n        &__content {\n          flex-direction: column;\n          min-width: 160px;\n          min-height: 100px;\n        }\n\n        &__main {\n          flex-direction: column;\n          padding: 10px 15px;\n          min-height: 5rem;\n        }\n\n        &__label {\n          line-height: 1.5;\n          font-size: 1rem;\n        }\n\n        &__value {\n          font-size: 2rem;\n        }\n\n        &__detail {\n          font-size: 1rem;\n          line-height: 1;\n        }\n\n        &__aside {\n          min-height: 3rem;\n          padding-right: 15px;\n          padding-left: 15px;\n          gap: 12px;\n        }\n      }\n    }\n\n    &--information {\n      --color-kpi-background: #daeff7;\n      --color-kpi-border: #007bb4;\n      --color-kpi-text: #005c91;\n    }\n\n    &--warning {\n      --color-kpi-background: #fdf1e8;\n      --color-kpi-border: #c65200;\n      --color-kpi-text: #8c3500;\n    }\n\n    &--danger {\n      --color-kpi-background: #fdeaea;\n      --color-kpi-border: #c61112;\n      --color-kpi-text: #8c0003;\n    }\n\n    &--success {\n      --color-kpi-background: #ebf5de;\n      --color-kpi-border: #188803;\n      --color-kpi-text: #006902;\n    }\n\n    &--neutral {\n      --color-kpi-background: #e6e6e6;\n      --color-kpi-border: #666666;\n      --color-kpi-text: #4d4d4d;\n    }\n  }\n</style>\n"],"names":[],"mappings":"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"}

package/public/components/kpi/Kpi.svelte

@@ -0,0 +1,232 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  export let value: string = '';
+  export let iconname: string = '';
+  export let iconcolor: string = '';
+  export let label: string = '';
+  export let type: string = '';
+  export let detail: string = '';
+  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';
+  $: size = function getSize() {
+    let size = 'small';
+    if (label && label.length > 0 && !detail) {
+      size = 'medium';
+    } else if (detail && detail.length > 0) {
+      size = 'large';
+    }
+
+    return size;
+  };
+
+  function generateIconName(iconname: string, iconcolor?: string): string {
+    return iconcolor ? `${iconname}  fill="${iconcolor}"` : `${iconname}`;
+  }
+</script>
+
+<div class="mc-kpi mc-kpi--{size()} mc-kpi--{type}">
+  {#if labelOutsideContent}
+    <span class="mc-kpi__label">{label}</span>
+  {/if}
+  <div class="mc-kpi__content">
+    <div class="mc-kpi__main">
+      {#if !labelOutsideContent}
+        <span class="mc-kpi__label">{label}</span>
+      {/if}
+      <span class="mc-kpi__value">{value}</span>
+    </div>
+    {#if iconname || detail}
+      <div class="mc-kpi__aside">
+        {#if detail}
+          <span class="mc-kpi__detail">{detail}</span>
+        {/if}
+        {#if iconname}
+          <span class="mc-kpi__icon"
+            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span
+          >
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  .mc-kpi {
+    color: var(--color-kpi-text, #005c91);
+    display: inline-block;
+
+    &__label {
+      font-size: 1.2rem;
+      display: block;
+    }
+
+    &__content {
+      display: flex;
+    }
+
+    &__main {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__value {
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+
+    &__aside {
+      align-items: center;
+      background-color: var(--color-grey-000, #ffffff);
+      color: var(--color-font-dark, #000000);
+      display: flex;
+      justify-content: center;
+    }
+
+    &__detail {
+      font-size: 1.2rem;
+    }
+
+    &__icon {
+      display: block;
+      height: 16px;
+      width: 16px;
+    }
+
+    &--small {
+      .mc-kpi {
+        &__label {
+          font-size: 1rem;
+          margin-bottom: 6px;
+          color: var(--color-grey-999, #999999);
+        }
+
+        &__content {
+          gap: 0.5rem;
+        }
+
+        &__value {
+          font-size: 0.875rem;
+          line-height: 1.2;
+        }
+
+        &__main {
+          background-color: var(--color-kpi-background, #daeff7);
+          border: 1px solid var(--color-kpi-border, #007bb4);
+          border-radius: 4px;
+          overflow: hidden;
+          padding: 3px 7px;
+        }
+
+        &__aside {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &--medium {
+      .mc-kpi {
+        &__label {
+          color: var(--color-grey-999, #999999);
+          margin-bottom: 6px;
+        }
+
+        &__content {
+          background-color: var(--color-kpi-background, #daeff7);
+          border: 1px solid var(--color-kpi-border, #007bb4);
+          border-radius: 4px;
+          overflow: hidden;
+          height: 40px;
+          min-width: 160px;
+        }
+
+        &__main {
+          flex-grow: 1;
+          padding: 2px 2px 2px 7px;
+        }
+
+        &__value {
+          font-size: 1.5rem;
+        }
+
+        &__aside {
+          padding-left: 12px;
+          padding-right: 15px;
+        }
+      }
+    }
+
+    &--large {
+      background-color: var(--color-kpi-background, #daeff7);
+      border: 1px solid var(--color-kpi-border, #007bb4);
+      border-radius: 4px;
+      overflow: hidden;
+
+      .mc-kpi {
+        &__content {
+          flex-direction: column;
+          min-width: 160px;
+          min-height: 100px;
+        }
+
+        &__main {
+          flex-direction: column;
+          padding: 10px 15px;
+          min-height: 5rem;
+        }
+
+        &__label {
+          line-height: 1.5;
+          font-size: 1rem;
+        }
+
+        &__value {
+          font-size: 2rem;
+        }
+
+        &__detail {
+          font-size: 1rem;
+          line-height: 1;
+        }
+
+        &__aside {
+          min-height: 3rem;
+          padding-right: 15px;
+          padding-left: 15px;
+          gap: 12px;
+        }
+      }
+    }
+
+    &--information {
+      --color-kpi-background: #daeff7;
+      --color-kpi-border: #007bb4;
+      --color-kpi-text: #005c91;
+    }
+
+    &--warning {
+      --color-kpi-background: #fdf1e8;
+      --color-kpi-border: #c65200;
+      --color-kpi-text: #8c3500;
+    }
+
+    &--danger {
+      --color-kpi-background: #fdeaea;
+      --color-kpi-border: #c61112;
+      --color-kpi-text: #8c0003;
+    }
+
+    &--success {
+      --color-kpi-background: #ebf5de;
+      --color-kpi-border: #188803;
+      --color-kpi-text: #006902;
+    }
+
+    &--neutral {
+      --color-kpi-background: #e6e6e6;
+      --color-kpi-border: #666666;
+      --color-kpi-text: #4d4d4d;
+    }
+  }
+</style>