@energie360/ui-library 0.1.1 → 0.1.3

package/dist/base-style.css

@@ -1,4 +1,9 @@
-@charset "UTF-8";@import"//hello.myfonts.net/count/3c2a64";/**
+@charset "UTF-8";
+/*
+Base styling and resets for all vue-components/custom-elements.
+This must be loaded before all other styles.
+*/
+/**
  * @license
  * MyFonts Webfont Build ID 3943012, 2020-09-02T07:30:46-0400
  *
@@ -17,4 +22,406 @@
  *
  *
  * © 2020 MyFonts Inc
-*/body{margin:0;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;font-size:unset;font-weight:unset}p,figure,blockquote{margin:0}button{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}ul,ol{list-style:none;padding:0;margin:0}dl,dt,dd{margin:0}address{font-style:normal}img,picture{max-width:100%;display:block}fieldset{padding:0;margin:0;border:0}input,textarea,select{font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;margin:0}input,select,textarea{font-size:var(--e-type-size-200);line-height:var(--e-type-line-height-200);letter-spacing:.01875rem}input::-moz-placeholder{color:var(--e-c-mono-700)}input::placeholder{color:var(--e-c-mono-700)}input:disabled::-moz-placeholder{color:var(--e-c-mono-500)}input:disabled::placeholder{color:var(--e-c-mono-500)}[type=search]::-webkit-search-cancel-button{display:none}[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}select:invalid{color:var(--e-c-mono-700)}textarea{resize:vertical}html{box-sizing:border-box;scroll-behavior:smooth;min-height:100vh}*,*:before,*:after{box-sizing:inherit}body{font-family:var(--e-type-font-body),var(--e-type-font-fallback);font-size:var(--e-type-size-300);font-weight:var(--e-type-weight-weak);line-height:var(--e-type-line-height-300);color:var(--e-c-mono-900)}*{outline:none}*:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse] *:focus{outline:none}@font-face{font-family:Glober;font-weight:400;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff) format("woff")}@font-face{font-family:Glober;font-weight:700;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff) format("woff")}:root{--e-c-primary-01-50: #edf6e9;--e-c-primary-01-50-rgb: 237, 246, 233;--e-c-primary-01-100: #dbedd4;--e-c-primary-01-100-rgb: 219, 237, 212;--e-c-primary-01-200: #9cce89;--e-c-primary-01-200-rgb: 156, 206, 137;--e-c-primary-01-500: #4ba528;--e-c-primary-01-500-rgb: 75, 165, 40;--e-c-primary-01-700: #3c8420;--e-c-primary-01-700-rgb: 60, 132, 32;--e-c-primary-01-900: #316b1a;--e-c-primary-01-900-rgb: 49, 107, 26;--e-c-secondary-01-50: #e5f2eb;--e-c-secondary-01-50-rgb: 229, 242, 235;--e-c-secondary-01-100: #cce5d8;--e-c-secondary-01-100-rgb: 204, 229, 216;--e-c-secondary-01-200: #73b894;--e-c-secondary-01-200-rgb: 115, 184, 148;--e-c-secondary-01-500: #007d3c;--e-c-secondary-01-500-rgb: 0, 125, 60;--e-c-secondary-01-700: #006430;--e-c-secondary-01-700-rgb: 0, 100, 48;--e-c-secondary-01-900: #005127;--e-c-secondary-01-900-rgb: 0, 81, 39;--e-c-secondary-02-50: #ede9ee;--e-c-secondary-02-50-rgb: 237, 233, 238;--e-c-secondary-02-100: #dcd3de;--e-c-secondary-02-100-rgb: 220, 211, 222;--e-c-secondary-02-200: #9f86a4;--e-c-secondary-02-200-rgb: 159, 134, 164;--e-c-secondary-02-500: #50235a;--e-c-secondary-02-500-rgb: 80, 35, 90;--e-c-secondary-02-700: #401c48;--e-c-secondary-02-700-rgb: 64, 28, 72;--e-c-secondary-02-900: #34173b;--e-c-secondary-02-900-rgb: 52, 23, 59;--e-c-secondary-03-50: #f8e7ed;--e-c-secondary-03-50-rgb: 248, 231, 237;--e-c-secondary-03-100: #f1cfdb;--e-c-secondary-03-100-rgb: 241, 207, 219;--e-c-secondary-03-200: #d97b9c;--e-c-secondary-03-200-rgb: 217, 123, 156;--e-c-secondary-03-500: #b90f4b;--e-c-secondary-03-500-rgb: 185, 15, 75;--e-c-secondary-03-700: #940c3c;--e-c-secondary-03-700-rgb: 148, 12, 60;--e-c-secondary-03-900: #780a31;--e-c-secondary-03-900-rgb: 120, 10, 49;--e-c-secondary-04-50: #fffbe5;--e-c-secondary-04-50-rgb: 255, 251, 229;--e-c-secondary-04-100: #fff7cc;--e-c-secondary-04-100-rgb: 255, 247, 204;--e-c-secondary-04-200: #ffe973;--e-c-secondary-04-200-rgb: 255, 233, 115;--e-c-secondary-04-500: #ffd700;--e-c-secondary-04-500-rgb: 255, 215, 0;--e-c-secondary-04-700: #ccac00;--e-c-secondary-04-700-rgb: 204, 172, 0;--e-c-secondary-04-900: #a68c00;--e-c-secondary-04-900-rgb: 166, 140, 0;--e-c-secondary-05-50: #e5f5fc;--e-c-secondary-05-50-rgb: 229, 245, 252;--e-c-secondary-05-100: #cceaf8;--e-c-secondary-05-100-rgb: 204, 234, 248;--e-c-secondary-05-200: #73c5ec;--e-c-secondary-05-200-rgb: 115, 197, 236;--e-c-secondary-05-500: #0096dc;--e-c-secondary-05-500-rgb: 0, 150, 220;--e-c-secondary-05-700: #0078b0;--e-c-secondary-05-700-rgb: 0, 120, 176;--e-c-secondary-05-900: #00618f;--e-c-secondary-05-900-rgb: 0, 97, 143;--e-c-secondary-06-50: #f4e6e5;--e-c-secondary-06-50-rgb: 244, 230, 229;--e-c-secondary-06-100: #e9cdcc;--e-c-secondary-06-100-rgb: 233, 205, 204;--e-c-secondary-06-200: #c27673;--e-c-secondary-06-200-rgb: 194, 118, 115;--e-c-secondary-06-500: #910500;--e-c-secondary-06-500-rgb: 145, 5, 0;--e-c-secondary-06-700: #740400;--e-c-secondary-06-700-rgb: 116, 4, 0;--e-c-secondary-06-900: #5e0300;--e-c-secondary-06-900-rgb: 94, 3, 0;--e-c-mono-50: #f5f5f5;--e-c-mono-50-rgb: 245, 245, 245;--e-c-mono-100: #ececec;--e-c-mono-100-rgb: 236, 236, 236;--e-c-mono-200: #dddddd;--e-c-mono-200-rgb: 221, 221, 221;--e-c-mono-500: #b3b3b3;--e-c-mono-500-rgb: 179, 179, 179;--e-c-mono-700: #6b6b6b;--e-c-mono-700-rgb: 107, 107, 107;--e-c-mono-900: #333333;--e-c-mono-900-rgb: 51, 51, 51;--e-c-mono-00: #ffffff;--e-c-mono-00-rgb: 255, 255, 255;--e-c-signal-01-100: #b6e6cf;--e-c-signal-01-100-rgb: 182, 230, 207;--e-c-signal-01-500: #1aa764;--e-c-signal-01-500-rgb: 26, 167, 100;--e-c-signal-01-700: #0e6f41;--e-c-signal-01-700-rgb: 14, 111, 65;--e-c-signal-01-900: #004926;--e-c-signal-01-900-rgb: 0, 73, 38;--e-c-signal-02-100: #ffe2b6;--e-c-signal-02-100-rgb: 255, 226, 182;--e-c-signal-02-500: #ff9800;--e-c-signal-02-500-rgb: 255, 152, 0;--e-c-signal-02-700: #cc7a00;--e-c-signal-02-700-rgb: 204, 122, 0;--e-c-signal-02-900: #703600;--e-c-signal-02-900-rgb: 112, 54, 0;--e-c-signal-03-100: #ffb5c4;--e-c-signal-03-100-rgb: 255, 181, 196;--e-c-signal-03-500: #ff0c3e;--e-c-signal-03-500-rgb: 255, 12, 62;--e-c-signal-03-700: #b90d31;--e-c-signal-03-700-rgb: 185, 13, 49;--e-c-signal-03-900: #790019;--e-c-signal-03-900-rgb: 121, 0, 25;--e-space-1: 4px;--e-space-2: 8px;--e-space-3: 12px;--e-space-4: 16px;--e-space-5: 20px;--e-space-6: 24px;--e-space-7: 28px;--e-space-8: 32px;--e-space-9: 36px;--e-space-10: 40px;--e-space-11: 44px;--e-space-12: 48px;--e-space-14: 56px;--e-space-16: 64px;--e-space-20: 80px;--e-space-24: 96px;--e-space-28: 112px;--e-space-30: 120px;--e-space-32: 128px;--e-space-36: 144px;--e-space-40: 160px;--e-space-44: 176px;--e-space-48: 192px;--e-space-52: 208px;--e-space-56: 224px;--e-space-60: 240px;--e-space-64: 256px;--e-space-72: 288px;--e-space-80: 320px;--e-space-96: 384px;--e-space-0_5: 2px;--e-space-1_5: 6px;--e-space-2_5: 10px;--e-space-3_5: 14px;--e-type-font-body: Glober;--e-type-font-fallback: "Helvetica Neue", helvetica, arial, sans-serif;--e-type-font-base-size: 16px;--e-type-size-50: 12px;--e-type-size-100: 14px;--e-type-size-200: 16px;--e-type-size-300: 18px;--e-type-size-400: 20px;--e-type-size-500: 22px;--e-type-size-600: 26px;--e-type-size-700: 26px;--e-type-size-800: 32px;--e-type-size-900: 48px;--e-type-size-1000: 56px;--e-type-line-height-50: 1.5 ;--e-type-line-height-100: calc(22 / 14);--e-type-line-height-200: 1.5 ;--e-type-line-height-300: calc(28 / 18);--e-type-line-height-400: 1.3 ;--e-type-line-height-500: calc(30 / 22);--e-type-line-height-600: calc(36 / 26);--e-type-line-height-700: calc(34 / 26);--e-type-line-height-800: 1.1875 ;--e-type-line-height-900: 1.125 ;--e-type-line-height-1000: calc(62 / 56);--e-type-weight-weak: 400;--e-type-weight-strong: 700;--e-type-decoration-enhance: underline;--e-trs-duration-fastest: .1s;--e-trs-duration-faster: .2s;--e-trs-duration-fast: .4s;--e-trs-duration-slow: .6s;--e-trs-duration-slower: .8s;--e-trs-duration-slowest: 1s;--e-trs-easing-default: ease-in-out;--e-brd-radius-1: 4px;--e-brd-radius-2: 8px;--e-brd-radius-3: 12px;--e-brd-radius-4: 16px;--e-brd-radius-5: 20px;--e-brd-radius-6: 24px;--e-mq-breakpoint-xs: 480px;--e-mq-breakpoint-s: 520px;--e-mq-breakpoint-m: 740px;--e-mq-breakpoint-lg: 1020px;--e-mq-breakpoint-xl: 1240px;--e-mq-breakpoint-2xl: 1520px;--e-layout-site-width: 1680px;--e-layout-site-width-lg: 1020px;--e-layout-site-width-m: 740px;--e-layout-site-width-s: 520px;--e-layout-grid-columns: 12;--e-elevation-xs: 0px 1px 2px rgba(0, 0, 0, .05);--e-elevation-sm: 0px 1px 3px rgba(0, 0, 0, .1), 0px 1px 2px -1px rgba(0, 0, 0, .1);--e-elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, .1), 0px 2px 4px -2px rgba(0, 0, 0, .1);--e-elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, .1), 0px 4px 6px -4px rgba(0, 0, 0, .1);--e-elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, .1), 0px 8px 10px -6px rgba(0, 0, 0, .1);--e-elevation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, .25)}e-button:not(:defined),e-icon-button:not(:defined),e-icon:not(:defined),e-loader:not(:defined){opacity:0}
+*/
+/* @import must be at top of file, otherwise CSS will not work */
+@import url("//hello.myfonts.net/count/3c2a64");
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  text-wrap: balance;
+  font-size: unset;
+  font-weight: unset;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+p,
+figure,
+blockquote {
+  margin: 0;
+}
+
+button {
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+}
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+dl,
+dt,
+dd {
+  margin: 0;
+}
+
+address {
+  font-style: normal;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* prettier-ignore */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  appearance: none;
+  border: 0;
+  background: none;
+  margin: 0;
+}
+
+input,
+select,
+textarea {
+  font-size: var(--e-type-size-200);
+  line-height: var(--e-type-line-height-200);
+  letter-spacing: 0.01875rem;
+}
+
+input::placeholder {
+  color: var(--e-c-mono-700);
+}
+input:disabled::placeholder {
+  color: var(--e-c-mono-500);
+}
+
+[type=search]::-webkit-search-cancel-button {
+  display: none;
+}
+
+[type=date]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  cursor: pointer;
+}
+
+select:invalid {
+  color: var(--e-c-mono-700);
+}
+
+textarea {
+  resize: vertical;
+}
+
+input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+  min-height: 100vh;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: var(--e-type-font-body), var(--e-type-font-fallback);
+  font-size: var(--e-type-size-300);
+  font-weight: var(--e-type-weight-weak);
+  line-height: var(--e-type-line-height-300);
+  color: var(--e-c-mono-900);
+}
+
+* {
+  outline: none;
+}
+
+*:focus-visible {
+  outline-style: solid;
+  outline-offset: 4px;
+  outline-color: rgba(179, 179, 179, 0.8);
+}
+
+[data-whatintent=mouse] *:focus {
+  outline: none;
+}
+
+/* TODO: Assets path is hardcoded here. Should be configurable */
+/* Regular */
+@font-face {
+  font-family: Glober;
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("/static/ui-assets/fonts/Glober/Glober-Regular/font.woff2") format("woff2"), url("/static/ui-assets/fonts/Glober/Glober-Regular/font.woff") format("woff");
+}
+/* Bold */
+@font-face {
+  font-family: Glober;
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("/static/ui-assets/fonts/Glober/Glober-Bold/font.woff2") format("woff2"), url("/static/ui-assets/fonts/Glober/Glober-Bold/font.woff") format("woff");
+}
+:root {
+  --e-c-primary-01-50: #edf6e9;
+  --e-c-primary-01-50-rgb: 237, 246, 233;
+  --e-c-primary-01-100: #dbedd4;
+  --e-c-primary-01-100-rgb: 219, 237, 212;
+  --e-c-primary-01-200: #9cce89;
+  --e-c-primary-01-200-rgb: 156, 206, 137;
+  --e-c-primary-01-500: #4ba528;
+  --e-c-primary-01-500-rgb: 75, 165, 40;
+  --e-c-primary-01-700: #3c8420;
+  --e-c-primary-01-700-rgb: 60, 132, 32;
+  --e-c-primary-01-900: #316b1a;
+  --e-c-primary-01-900-rgb: 49, 107, 26;
+  --e-c-secondary-01-50: #e5f2eb;
+  --e-c-secondary-01-50-rgb: 229, 242, 235;
+  --e-c-secondary-01-100: #cce5d8;
+  --e-c-secondary-01-100-rgb: 204, 229, 216;
+  --e-c-secondary-01-200: #73b894;
+  --e-c-secondary-01-200-rgb: 115, 184, 148;
+  --e-c-secondary-01-500: #007d3c;
+  --e-c-secondary-01-500-rgb: 0, 125, 60;
+  --e-c-secondary-01-700: #006430;
+  --e-c-secondary-01-700-rgb: 0, 100, 48;
+  --e-c-secondary-01-900: #005127;
+  --e-c-secondary-01-900-rgb: 0, 81, 39;
+  --e-c-secondary-01-950: #003e1f;
+  --e-c-secondary-01-950-rgb: 0, 62, 31;
+  --e-c-secondary-01-1000: #002f18;
+  --e-c-secondary-01-1000-rgb: 0, 47, 24;
+  --e-c-secondary-02-50: #ede9ee;
+  --e-c-secondary-02-50-rgb: 237, 233, 238;
+  --e-c-secondary-02-100: #dcd3de;
+  --e-c-secondary-02-100-rgb: 220, 211, 222;
+  --e-c-secondary-02-200: #9f86a4;
+  --e-c-secondary-02-200-rgb: 159, 134, 164;
+  --e-c-secondary-02-500: #50235a;
+  --e-c-secondary-02-500-rgb: 80, 35, 90;
+  --e-c-secondary-02-700: #401c48;
+  --e-c-secondary-02-700-rgb: 64, 28, 72;
+  --e-c-secondary-02-900: #34173b;
+  --e-c-secondary-02-900-rgb: 52, 23, 59;
+  --e-c-secondary-03-50: #f8e7ed;
+  --e-c-secondary-03-50-rgb: 248, 231, 237;
+  --e-c-secondary-03-100: #f1cfdb;
+  --e-c-secondary-03-100-rgb: 241, 207, 219;
+  --e-c-secondary-03-200: #d97b9c;
+  --e-c-secondary-03-200-rgb: 217, 123, 156;
+  --e-c-secondary-03-500: #b90f4b;
+  --e-c-secondary-03-500-rgb: 185, 15, 75;
+  --e-c-secondary-03-700: #940c3c;
+  --e-c-secondary-03-700-rgb: 148, 12, 60;
+  --e-c-secondary-03-900: #780a31;
+  --e-c-secondary-03-900-rgb: 120, 10, 49;
+  --e-c-secondary-04-50: #fffbe5;
+  --e-c-secondary-04-50-rgb: 255, 251, 229;
+  --e-c-secondary-04-100: #fff7cc;
+  --e-c-secondary-04-100-rgb: 255, 247, 204;
+  --e-c-secondary-04-200: #ffe973;
+  --e-c-secondary-04-200-rgb: 255, 233, 115;
+  --e-c-secondary-04-500: #ffd700;
+  --e-c-secondary-04-500-rgb: 255, 215, 0;
+  --e-c-secondary-04-700: #ccac00;
+  --e-c-secondary-04-700-rgb: 204, 172, 0;
+  --e-c-secondary-04-900: #a68c00;
+  --e-c-secondary-04-900-rgb: 166, 140, 0;
+  --e-c-secondary-05-50: #e5f5fc;
+  --e-c-secondary-05-50-rgb: 229, 245, 252;
+  --e-c-secondary-05-100: #cceaf8;
+  --e-c-secondary-05-100-rgb: 204, 234, 248;
+  --e-c-secondary-05-200: #73c5ec;
+  --e-c-secondary-05-200-rgb: 115, 197, 236;
+  --e-c-secondary-05-500: #0096dc;
+  --e-c-secondary-05-500-rgb: 0, 150, 220;
+  --e-c-secondary-05-700: #0078b0;
+  --e-c-secondary-05-700-rgb: 0, 120, 176;
+  --e-c-secondary-05-900: #00618f;
+  --e-c-secondary-05-900-rgb: 0, 97, 143;
+  --e-c-secondary-06-50: #f4e6e5;
+  --e-c-secondary-06-50-rgb: 244, 230, 229;
+  --e-c-secondary-06-100: #e9cdcc;
+  --e-c-secondary-06-100-rgb: 233, 205, 204;
+  --e-c-secondary-06-200: #c27673;
+  --e-c-secondary-06-200-rgb: 194, 118, 115;
+  --e-c-secondary-06-500: #910500;
+  --e-c-secondary-06-500-rgb: 145, 5, 0;
+  --e-c-secondary-06-700: #740400;
+  --e-c-secondary-06-700-rgb: 116, 4, 0;
+  --e-c-secondary-06-900: #5e0300;
+  --e-c-secondary-06-900-rgb: 94, 3, 0;
+  --e-c-mono-50: #f5f5f5;
+  --e-c-mono-50-rgb: 245, 245, 245;
+  --e-c-mono-100: #ececec;
+  --e-c-mono-100-rgb: 236, 236, 236;
+  --e-c-mono-200: #dddddd;
+  --e-c-mono-200-rgb: 221, 221, 221;
+  --e-c-mono-500: #b3b3b3;
+  --e-c-mono-500-rgb: 179, 179, 179;
+  --e-c-mono-700: #6b6b6b;
+  --e-c-mono-700-rgb: 107, 107, 107;
+  --e-c-mono-900: #333333;
+  --e-c-mono-900-rgb: 51, 51, 51;
+  --e-c-mono-00: #ffffff;
+  --e-c-mono-00-rgb: 255, 255, 255;
+  --e-c-signal-01-100: #b6e6cf;
+  --e-c-signal-01-100-rgb: 182, 230, 207;
+  --e-c-signal-01-500: #1aa764;
+  --e-c-signal-01-500-rgb: 26, 167, 100;
+  --e-c-signal-01-700: #0e6f41;
+  --e-c-signal-01-700-rgb: 14, 111, 65;
+  --e-c-signal-01-900: #004926;
+  --e-c-signal-01-900-rgb: 0, 73, 38;
+  --e-c-signal-02-100: #ffe2b6;
+  --e-c-signal-02-100-rgb: 255, 226, 182;
+  --e-c-signal-02-500: #ff9800;
+  --e-c-signal-02-500-rgb: 255, 152, 0;
+  --e-c-signal-02-700: #cc7a00;
+  --e-c-signal-02-700-rgb: 204, 122, 0;
+  --e-c-signal-02-900: #703600;
+  --e-c-signal-02-900-rgb: 112, 54, 0;
+  --e-c-signal-03-100: #ffb5c4;
+  --e-c-signal-03-100-rgb: 255, 181, 196;
+  --e-c-signal-03-500: #ff0c3e;
+  --e-c-signal-03-500-rgb: 255, 12, 62;
+  --e-c-signal-03-700: #b90d31;
+  --e-c-signal-03-700-rgb: 185, 13, 49;
+  --e-c-signal-03-900: #790019;
+  --e-c-signal-03-900-rgb: 121, 0, 25;
+  --e-space-1: 4px;
+  --e-space-2: 8px;
+  --e-space-3: 12px;
+  --e-space-4: 16px;
+  --e-space-5: 20px;
+  --e-space-6: 24px;
+  --e-space-7: 28px;
+  --e-space-8: 32px;
+  --e-space-9: 36px;
+  --e-space-10: 40px;
+  --e-space-11: 44px;
+  --e-space-12: 48px;
+  --e-space-14: 56px;
+  --e-space-16: 64px;
+  --e-space-20: 80px;
+  --e-space-24: 96px;
+  --e-space-28: 112px;
+  --e-space-30: 120px;
+  --e-space-32: 128px;
+  --e-space-36: 144px;
+  --e-space-40: 160px;
+  --e-space-44: 176px;
+  --e-space-48: 192px;
+  --e-space-52: 208px;
+  --e-space-56: 224px;
+  --e-space-60: 240px;
+  --e-space-64: 256px;
+  --e-space-72: 288px;
+  --e-space-80: 320px;
+  --e-space-96: 384px;
+  --e-space-0_5: 2px;
+  --e-space-1_5: 6px;
+  --e-space-2_5: 10px;
+  --e-space-3_5: 14px;
+  --e-type-font-body: Glober;
+  --e-type-font-fallback: "Helvetica Neue", helvetica, arial, sans-serif;
+  --e-type-font-base-size: 16px;
+  --e-type-size-50: 12px;
+  --e-type-size-100: 14px;
+  --e-type-size-200: 16px;
+  --e-type-size-300: 18px;
+  --e-type-size-400: 20px;
+  --e-type-size-500: 22px;
+  --e-type-size-600: 26px;
+  --e-type-size-700: 26px;
+  --e-type-size-800: 32px;
+  --e-type-size-900: 48px;
+  --e-type-size-1000: 56px;
+  --e-type-line-height-50: calc(18 / 12);
+  --e-type-line-height-100: calc(22 / 14);
+  --e-type-line-height-200: calc(24 / 16);
+  --e-type-line-height-300: calc(28 / 18);
+  --e-type-line-height-400: calc(26 / 20);
+  --e-type-line-height-500: calc(30 / 22);
+  --e-type-line-height-600: calc(36 / 26);
+  --e-type-line-height-700: calc(34 / 26);
+  --e-type-line-height-800: calc(38 / 32);
+  --e-type-line-height-900: calc(54 / 48);
+  --e-type-line-height-1000: calc(62 / 56);
+  --e-type-weight-weak: 400;
+  --e-type-weight-strong: 700;
+  --e-type-decoration-enhance: underline;
+  --e-trs-duration-fastest: 100ms;
+  --e-trs-duration-faster: 200ms;
+  --e-trs-duration-fast: 400ms;
+  --e-trs-duration-slow: 600ms;
+  --e-trs-duration-slower: 800ms;
+  --e-trs-duration-slowest: 1000ms;
+  --e-trs-easing-default: ease-in-out;
+  --e-brd-radius-1: 4px;
+  --e-brd-radius-2: 8px;
+  --e-brd-radius-3: 12px;
+  --e-brd-radius-4: 16px;
+  --e-brd-radius-5: 20px;
+  --e-brd-radius-6: 24px;
+  --e-mq-breakpoint-xs: 480px;
+  --e-mq-breakpoint-s: 520px;
+  --e-mq-breakpoint-m: 740px;
+  --e-mq-breakpoint-lg: 1020px;
+  --e-mq-breakpoint-xl: 1240px;
+  --e-mq-breakpoint-2xl: 1520px;
+  --e-layout-site-width: 1680px;
+  --e-layout-site-width-lg: 1020px;
+  --e-layout-site-width-m: 740px;
+  --e-layout-site-width-s: 520px;
+  --e-layout-grid-columns: 12;
+  --e-elevation-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  --e-elevation-sm:
+    0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --e-elevation-md:
+    0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --e-elevation-lg:
+    0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --e-elevation-xl:
+    0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --e-elevation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+e-button:not(:defined),
+e-icon-button:not(:defined),
+e-icon:not(:defined),
+e-loader:not(:defined) {
+  opacity: 0;
+}
+
+/*# sourceMappingURL=base-style.css.map */

package/dist/base-style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../base/_resets.scss","../base/abstracts/_resets.scss","../base/abstracts/_functions.scss","../base/_input-resets.scss","../base/abstracts/_mixins.scss","../base/_html.scss","../base/_body.scss","../base/_focus-handling.scss","../node_modules/@energie360/design-tokens/dist/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AACQ;ACpBR;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ADwBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AErDF;ACHA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EC8BE;EACA;EAKE;;;AD7BF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;;;AAIA;EAEE;EACA;;;AEpDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ARQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AS3CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;;;AV7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}

package/dist/elements/text-link.css

@@ -0,0 +1,40 @@
+/* prettier-ignore */
+.text-link {
+  font-size: var(--e-type-size-200);
+  line-height: var(--e-type-line-height-200);
+  letter-spacing: 0.00625rem;
+  font-weight: var(--e-type-weight-strong);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--e-c-primary-01-700);
+  text-decoration: underline;
+  text-underline-offset: 0.4em;
+  transition: text-decoration-color var(--e-trs-duration-faster) var(--e-trs-easing-default), color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+}
+.text-link:hover {
+  text-decoration-color: var(--e-c-primary-01-50);
+}
+.text-link:active {
+  text-decoration-color: var(--e-c-primary-01-700);
+}
+.text-link.inverted {
+  color: var(--e-c-primary-01-50);
+}
+.text-link.inverted:hover {
+  text-decoration-color: var(--e-c-primary-01-200);
+}
+.text-link.inverted:active {
+  text-decoration-color: var(--e-c-primary-01-50);
+}
+.text-link.secondary {
+  text-decoration: none;
+  color: var(--e-c-mono-700);
+}
+.text-link.secondary:hover {
+  color: var(--e-c-mono-900);
+}
+.text-link.secondary:active {
+  color: var(--e-c-mono-700);
+}
+
+/*# sourceMappingURL=text-link.css.map */

package/dist/elements/text-link.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../elements/text-link/text-link.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAKA;ACyCA;ECHE;EACA;EAGE;EAMA;EAKE;EACA;EDtDJ;EACA;EACA;EACA,YACE;;AAGF;EACE;;AAGF;EACE;;AAgCF;EA3BA;;AAEA;EACE;;AAGF;EACE;;AAwBF;EAnBA;EACA;;AAEA;EACE;;AAGF;EACE","file":"text-link.css"}

package/dist/layout/split.css

@@ -0,0 +1,124 @@
+/* prettier-ignore */
+.container {
+  margin: 0 auto;
+  max-width: 105rem;
+  width: 100%;
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+@media (max-width: 1020px) {
+  .container {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media (max-width: 740px) {
+  .container {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media (max-width: 520px) {
+  .container {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+}
+
+.split {
+  position: relative;
+  padding-left: 50%;
+}
+@media (max-width: 1020px) {
+  .split {
+    display: grid;
+    padding-left: 0;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+    gap: 0;
+    grid-template-areas: "fixed content" "footer footer";
+  }
+}
+@media (max-width: 740px) {
+  .split {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.split__fixed {
+  position: fixed;
+  inset: 0 50% 0 0;
+}
+@media (max-width: 1020px) {
+  .split__fixed {
+    position: static;
+    grid-area: fixed;
+  }
+}
+@media (max-width: 740px) {
+  .split__fixed {
+    width: 100%;
+    aspect-ratio: 4/5;
+    order: 3;
+  }
+}
+
+.split__top-bar {
+  height: 7.5rem;
+}
+@media (max-width: 1020px) {
+  .split__top-bar {
+    grid-area: content;
+    height: 4.5rem;
+  }
+}
+@media (max-width: 740px) {
+  .split__top-bar {
+    order: 1;
+  }
+}
+
+.split__content {
+  padding-top: var(--e-space-20);
+  padding-bottom: var(--e-space-20);
+  margin: 0 auto;
+  width: 25rem;
+}
+@media (max-width: 1020px) {
+  .split__content {
+    margin-top: 4.5rem;
+    grid-area: content;
+    width: 21.125rem;
+  }
+}
+@media (max-width: 740px) {
+  .split__content {
+    order: 2;
+    width: auto;
+    margin-top: 0;
+    max-width: calc(21.125rem + 2 * 2.5rem);
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media (max-width: 520px) {
+  .split__content {
+    max-width: calc(21.125rem + 2 * 1.25rem);
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+}
+
+@media (max-width: 1020px) {
+  .split__footer {
+    grid-area: footer;
+  }
+}
+@media (max-width: 740px) {
+  .split__footer {
+    order: 4;
+  }
+}
+
+/*# sourceMappingURL=split.css.map */

package/dist/layout/split.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAKA;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;;ADaA;ECfF;IAKI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADIJ;ECfF;IAgBI;IACA;;;;AAIJ;EACE;EACA;;ADRA;ECMF;IAKI;IACA;;;ADZF;ECMF;IAUI;IACA;IACA;;;;AAIJ;EACE;;ADvBA;ECsBF;IAII;IACA;;;AD3BF;ECsBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;ADvCA;ECmCF;IAOI;IAIA;IACA;;;AD/CF;ECmCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;ADxDF;ECmCF;IAyBI;IACA;IACA;;;;AD9DF;ECkEF;IAEI;;;ADpEF;ECkEF;IAMI","file":"split.css"}

package/elements/button/u-button.vue

@@ -25,14 +25,11 @@ defineProps<ButtonProps>()
   </template>
 
   <template v-else>
-    <button
-      :class="['button', variant, { loading: loading }]"
-      :disabled="disabled || null"
-    >
+    <button :class="['button', variant, { loading: loading }]" :disabled="disabled || null">
       <UIcon v-if="icon" :name="icon" />
       <slot>{{ label }}</slot>
 
-      <span class="button__loader" v-if="loading">
+      <span v-if="loading" class="button__loader">
         <ULoader />
       </span>
     </button>