@enki-tek/fms-web-components 0.0.1 → 0.0.3

package/components/Button/Button.svelte

@@ -1,12 +1,1127 @@
-<script>import { Button } from "sveltestrap";
-export let label = "click";
-export let iscolor = false;
-export let size = "md";
-export let color = "primary";
+<script>
+	import { buttonConfig } from './buttonConfig';
+	export let type = 'button';
+	export let label = 'Button';
+	export let config = '';
+	export let icon = { state: false, name: 'person', position: 'right' };
+	export let shade = 'primary';
+	export let outlineShade = '';
+
+	let buttonStyles = [];
+	if (buttonConfig.hasOwnProperty(config)) {
+		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`];
+	}
+
+	// icon button
+	if (icon.state && icon.position === 'left') {
+		buttonStyles = [...buttonStyles, 'eicon-left'];
+	} else if (icon.state && icon.position === 'right') {
+		buttonStyles = [...buttonStyles, 'eicon-right'];
+	} else if (icon.state && icon.position === 'single') {
+		buttonStyles = [...buttonStyles, 'eicon-btn'];
+		label = '';
+	}
+
+	console.log(buttonStyles);
 </script>
 
-<Button color = {iscolor ? 'primary' : 'danger'}
-         class={`btn btn-${color} btn-${size}`}
-          >
-    {label}
-</Button>
+<button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur>
+	<slot>
+		{#if label}
+			{label}
+		{:else}
+			<slot />
+		{/if}
+		{#if icon.state}
+			<i class="material-icons">{icon.name}</i>
+		{/if}
+	</slot>
+</button>
+
+<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+.ebtn {
+  background-color: #ffffff;
+  color: black;
+  border: none;
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 0px 24px;
+  height: 42px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+  border: none;
+  outline: 1px solid #ffffff;
+  font-family: Roboto;
+}
+.ebtn-small {
+  height: 32px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Roboto;
+}
+.ebtn-small i {
+  font-size: 12px;
+}
+.ebtn-medium {
+  padding: 0px 24px;
+  height: 42px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-family: Roboto;
+}
+.ebtn-medium i {
+  font-size: 16px;
+}
+.ebtn-large {
+  height: 52px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-family: Roboto;
+}
+.ebtn-large i {
+  font-size: 16px;
+}
+.eicon-btn {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  font-family: Roboto;
+}
+.eicon-left {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: 7px;
+  size: 2px;
+  font-family: Roboto;
+}
+.eicon-right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+}
+.ebg-none {
+  background-color: #ffffff !important;
+}
+.ebg-white {
+  background-color: #ffffff;
+}
+.ebg-secondary,
+.eactive-secondary:active,
+.ehover-secondary:hover {
+  background-color: #3AC82E !important;
+}
+.ebg-secondaryDark,
+.eactive-secondaryDark:active,
+.ehover-secondaryDark:hover {
+  background-color: #00A855;
+}
+.ebg-secondaryLight,
+.eactive-secondaryLight:active,
+.ehover-secondaryLight:hover {
+  background-color: #CBFFC7;
+}
+.ebg-primary {
+  background-color: #00AEE5;
+}
+.ebg-primaryDark {
+  background-color: #007FD8;
+}
+.ebg-primaryLight {
+  background-color: #CEF3FF;
+}
+.ebg-danger {
+  background-color: #FE4747;
+}
+.ebg-dangerDark {
+  background-color: #B02A37;
+}
+.ebg-dangerLight {
+  background-color: #FE4747;
+}
+.ebg-warning {
+  background-color: #FFBA3A;
+}
+.ebg-warningDark {
+  background-color: #997404;
+  color: #ffffff !important;
+}
+.ebg-warningLight {
+  background-color: #FFF3CD;
+}
+.ebg-info {
+  background-color: #0DCAF0;
+}
+.ebg-infoDark {
+  background-color: #087990;
+}
+.ebg-infoLight {
+  background-color: #9EEAF9;
+}
+.ebg-success {
+  background-color: #00A96B;
+}
+.ebg-successDark {
+  background-color: #146C43;
+}
+.ebg-successLight {
+  background-color: #D1E7DD;
+}
+.ebg-gray100 {
+  background-color: #F8F9FA;
+}
+.ebg-gray200 {
+  background-color: #E9ECEF;
+}
+.ebg-gray300 {
+  background-color: #DEE2E6;
+}
+.ebg-gray400 {
+  background-color: #CED4DA;
+}
+.ebg-gray500 {
+  background-color: #adb5bd;
+}
+.ebg-gray600 {
+  background-color: #6C757D;
+}
+.ebg-gray700 {
+  background-color: #495057;
+}
+.ebg-gray800 {
+  background-color: #343A40;
+}
+.ebg-gray900 {
+  background-color: #212529;
+}
+.ebg-green100 {
+  background-color: #D1E7DD;
+}
+.ebg-green200 {
+  background-color: #A3CFBB;
+}
+.ebg-green300 {
+  background-color: #75B798;
+}
+.ebg-green400 {
+  background-color: #479F76;
+}
+.ebg-green500 {
+  background-color: #198754;
+}
+.ebg-green600 {
+  background-color: #146C43;
+}
+.ebg-green700 {
+  background-color: #0F5132;
+}
+.ebg-green800 {
+  background-color: #0A3622;
+}
+.ebg-green900 {
+  background-color: #051B11;
+}
+.ebg-red100 {
+  background-color: #F8D7DA;
+}
+.ebg-red200 {
+  background-color: #F1AEB5;
+}
+.ebg-red300 {
+  background-color: #EA868F;
+}
+.ebg-red400 {
+  background-color: #E35D6A;
+}
+.ebg-red500 {
+  background-color: #DC3545;
+}
+.ebg-red600 {
+  background-color: #B02A37;
+}
+.ebg-red700 {
+  background-color: #842029;
+}
+.ebg-red800 {
+  background-color: #58151C;
+}
+.ebg-red900 {
+  background-color: #2C0B0E;
+}
+.ebg-yellow100 {
+  background-color: #FFF3CD;
+}
+.ebg-yellow200 {
+  background-color: #FFE69C;
+}
+.ebg-yellow300 {
+  background-color: #FFDA6A;
+}
+.ebg-yellow400 {
+  background-color: #FFCD39;
+}
+.ebg-yellow500 {
+  background-color: #FFC107;
+}
+.ebg-yellow600 {
+  background-color: #CC9A06;
+}
+.ebg-yellow700 {
+  background-color: #997404;
+}
+.ebg-yellow800 {
+  background-color: #664D03;
+}
+.ebg-yellow900 {
+  background-color: #332701;
+}
+.ebg-cyan100 {
+  background-color: #CFF4FC;
+}
+.ebg-cyan200 {
+  background-color: #9EEAF9;
+}
+.ebg-cyan300 {
+  background-color: #6EDFF6;
+}
+.ebg-cyan400 {
+  background-color: #3DD5F3;
+}
+.ebg-cyan500 {
+  background-color: #0DCAF0;
+}
+.ebg-cyan600 {
+  background-color: #0AA2C0;
+}
+.ebg-cyan700 {
+  background-color: #087990;
+}
+.ebg-cyan800 {
+  background-color: #055160;
+}
+.ebg-cyan900 {
+  background-color: #032830;
+}
+.etext-white {
+  color: #ffffff;
+}
+.etext-dark {
+  color: #000000;
+}
+.etext-secondary {
+  color: #3AC82E;
+}
+.etext-secondaryDark {
+  color: #00A855;
+}
+.etext-secondaryLight {
+  color: #CBFFC7;
+}
+.etext-primary {
+  color: #00AEE5;
+}
+.etext-primaryDark {
+  color: #007FD8;
+}
+.etext-primaryLight {
+  color: #CEF3FF;
+}
+.etext-danger {
+  color: #FE4747;
+}
+.etext-dangerDark {
+  color: #B02A37;
+}
+.etext-dangerLight {
+  color: #FE4747;
+}
+.etext-info {
+  color: #0DCAF0;
+}
+.etext-infoDark {
+  color: #087990;
+}
+.etext-infoLight {
+  color: #9EEAF9;
+}
+.etext-success {
+  color: #00A96B;
+}
+.etext-successDark {
+  color: #146C43;
+}
+.etext-successLight {
+  color: #D1E7DD;
+}
+.etext-warning {
+  color: #FFBA3A;
+}
+.etext-warningDark {
+  color: #997404;
+}
+.etext-warningLight {
+  color: #FFF3CD;
+}
+.etext-gray100 {
+  color: #F8F9FA;
+}
+.etext-gray200 {
+  color: #E9ECEF;
+}
+.etext-gray300 {
+  color: #DEE2E6;
+}
+.etext-gray400 {
+  color: #CED4DA;
+}
+.etext-gray500 {
+  color: #adb5bd;
+}
+.etext-gray600 {
+  color: #6C757D;
+}
+.etext-gray700 {
+  color: #495057;
+}
+.etext-gray800 {
+  color: #343A40;
+}
+.etext-gray900 {
+  color: #212529;
+}
+.etext-green100 {
+  color: #D1E7DD;
+}
+.etext-green200 {
+  color: #A3CFBB;
+}
+.etext-green300 {
+  color: #75B798;
+}
+.etext-green400 {
+  color: #479F76;
+}
+.etext-green500 {
+  color: #198754;
+}
+.etext-green600 {
+  color: #146C43;
+}
+.etext-green700 {
+  color: #0F5132;
+}
+.etext-green800 {
+  color: #0A3622;
+}
+.etext-green900 {
+  color: #051B11;
+}
+.etext-red100 {
+  color: #F8D7DA;
+}
+.etext-red200 {
+  color: #F1AEB5;
+}
+.etext-red300 {
+  color: #EA868F;
+}
+.etext-red400 {
+  color: #E35D6A;
+}
+.etext-red500 {
+  color: #DC3545;
+}
+.etext-red600 {
+  color: #B02A37;
+}
+.etext-red700 {
+  color: #842029;
+}
+.etext-red800 {
+  color: #58151C;
+}
+.etext-red900 {
+  color: #2C0B0E;
+}
+.etext-yellow100 {
+  color: #FFF3CD;
+}
+.etext-yellow200 {
+  color: #FFE69C;
+}
+.etext-yellow300 {
+  color: #FFDA6A;
+}
+.etext-yellow400 {
+  color: #FFCD39;
+}
+.etext-yellow500 {
+  color: #FFC107;
+}
+.etext-yellow600 {
+  color: #CC9A06;
+}
+.etext-yellow700 {
+  color: #997404;
+}
+.etext-yellow800 {
+  color: #664D03;
+}
+.etext-yellow900 {
+  color: #332701;
+}
+.etext-cyan100 {
+  color: #CFF4FC;
+}
+.etext-cyan200 {
+  color: #9EEAF9;
+}
+.etext-cyan300 {
+  color: #6EDFF6;
+}
+.etext-cyan400 {
+  color: #3DD5F3;
+}
+.etext-cyan500 {
+  color: #0DCAF0;
+}
+.etext-cyan600 {
+  color: #0AA2C0;
+}
+.etext-cyan700 {
+  color: #087990;
+}
+.etext-cyan800 {
+  color: #055160;
+}
+.etext-cyan900 {
+  color: #032830;
+}
+.eoutline-secondary {
+  outline: 1px solid #3AC82E;
+}
+.eoutline-secondaryDark {
+  outline: 1px solid #00A855;
+}
+.eoutline-secondaryLight {
+  outline: 1px solid #CBFFC7;
+}
+.eoutline-primary {
+  outline: 1px solid #00AEE5;
+}
+.eoutline-primaryDark {
+  outline: 1px solid #007FD8;
+}
+.eoutline-primaryLight {
+  outline: 1px solid #CEF3FF;
+}
+.eoutline-danger {
+  outline: 1px solid #FE4747;
+}
+.eoutline-dangerDark {
+  outline: 1px solid #B02A37;
+}
+.eoutline-dangerLight {
+  outline: 1px solid #FE4747;
+}
+.eoutline-success {
+  outline: 1px solid #00A96B;
+}
+.eoutline-successDark {
+  outline: 1px solid #146C43;
+}
+.eoutline-successLight {
+  outline: 1px solid #D1E7DD;
+}
+.eoutline-info {
+  outline: 1px solid #0DCAF0;
+}
+.eoutline-infoDark {
+  outline: 1px solid #087990;
+}
+.eoutline-infoLight {
+  outline: 1px solid #9EEAF9;
+}
+.eoutline-warning {
+  outline: 1px solid #FFBA3A;
+}
+.eoutline-warningDark {
+  outline: 1px solid #997404;
+}
+.eoutline-warningLight {
+  outline: 1px solid #FFF3CD;
+}
+:global(.ebg-none) {
+  background-color: #ffffff !important;
+}
+:global(.ebg-white) {
+  background-color: #ffffff;
+}
+:global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
+  background-color: #3AC82E !important;
+}
+:global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
+  background-color: #00A855;
+}
+:global(.ebg-secondaryLight, .eactive-secondaryLight:active, .ehover-secondaryLight:hover) {
+  background-color: #CBFFC7;
+}
+:global(.ebg-primary) {
+  background-color: #00AEE5;
+}
+:global(.ebg-primaryDark) {
+  background-color: #007FD8;
+}
+:global(.ebg-primaryLight) {
+  background-color: #CEF3FF;
+}
+:global(.ebg-danger) {
+  background-color: #FE4747;
+}
+:global(.ebg-dangerDark) {
+  background-color: #B02A37;
+}
+:global(.ebg-dangerLight) {
+  background-color: #FE4747;
+}
+:global(.ebg-warning) {
+  background-color: #FFBA3A;
+}
+:global(.ebg-warningDark) {
+  background-color: #997404;
+  color: #ffffff !important;
+}
+:global(.ebg-warningLight) {
+  background-color: #FFF3CD;
+}
+:global(.ebg-info) {
+  background-color: #0DCAF0;
+}
+:global(.ebg-infoDark) {
+  background-color: #087990;
+}
+:global(.ebg-infoLight) {
+  background-color: #9EEAF9;
+}
+:global(.ebg-success) {
+  background-color: #00A96B;
+}
+:global(.ebg-successDark) {
+  background-color: #146C43;
+}
+:global(.ebg-successLight) {
+  background-color: #D1E7DD;
+}
+:global(.ebg-gray100) {
+  background-color: #F8F9FA;
+}
+:global(.ebg-gray200) {
+  background-color: #E9ECEF;
+}
+:global(.ebg-gray300) {
+  background-color: #DEE2E6;
+}
+:global(.ebg-gray400) {
+  background-color: #CED4DA;
+}
+:global(.ebg-gray500) {
+  background-color: #adb5bd;
+}
+:global(.ebg-gray600) {
+  background-color: #6C757D;
+}
+:global(.ebg-gray700) {
+  background-color: #495057;
+}
+:global(.ebg-gray800) {
+  background-color: #343A40;
+}
+:global(.ebg-gray900) {
+  background-color: #212529;
+}
+:global(.ebg-green100) {
+  background-color: #D1E7DD;
+}
+:global(.ebg-green200) {
+  background-color: #A3CFBB;
+}
+:global(.ebg-green300) {
+  background-color: #75B798;
+}
+:global(.ebg-green400) {
+  background-color: #479F76;
+}
+:global(.ebg-green500) {
+  background-color: #198754;
+}
+:global(.ebg-green600) {
+  background-color: #146C43;
+}
+:global(.ebg-green700) {
+  background-color: #0F5132;
+}
+:global(.ebg-green800) {
+  background-color: #0A3622;
+}
+:global(.ebg-green900) {
+  background-color: #051B11;
+}
+:global(.ebg-red100) {
+  background-color: #F8D7DA;
+}
+:global(.ebg-red200) {
+  background-color: #F1AEB5;
+}
+:global(.ebg-red300) {
+  background-color: #EA868F;
+}
+:global(.ebg-red400) {
+  background-color: #E35D6A;
+}
+:global(.ebg-red500) {
+  background-color: #DC3545;
+}
+:global(.ebg-red600) {
+  background-color: #B02A37;
+}
+:global(.ebg-red700) {
+  background-color: #842029;
+}
+:global(.ebg-red800) {
+  background-color: #58151C;
+}
+:global(.ebg-red900) {
+  background-color: #2C0B0E;
+}
+:global(.ebg-yellow100) {
+  background-color: #FFF3CD;
+}
+:global(.ebg-yellow200) {
+  background-color: #FFE69C;
+}
+:global(.ebg-yellow300) {
+  background-color: #FFDA6A;
+}
+:global(.ebg-yellow400) {
+  background-color: #FFCD39;
+}
+:global(.ebg-yellow500) {
+  background-color: #FFC107;
+}
+:global(.ebg-yellow600) {
+  background-color: #CC9A06;
+}
+:global(.ebg-yellow700) {
+  background-color: #997404;
+}
+:global(.ebg-yellow800) {
+  background-color: #664D03;
+}
+:global(.ebg-yellow900) {
+  background-color: #332701;
+}
+:global(.ebg-cyan100) {
+  background-color: #CFF4FC;
+}
+:global(.ebg-cyan200) {
+  background-color: #9EEAF9;
+}
+:global(.ebg-cyan300) {
+  background-color: #6EDFF6;
+}
+:global(.ebg-cyan400) {
+  background-color: #3DD5F3;
+}
+:global(.ebg-cyan500) {
+  background-color: #0DCAF0;
+}
+:global(.ebg-cyan600) {
+  background-color: #0AA2C0;
+}
+:global(.ebg-cyan700) {
+  background-color: #087990;
+}
+:global(.ebg-cyan800) {
+  background-color: #055160;
+}
+:global(.ebg-cyan900) {
+  background-color: #032830;
+}
+.etext-white {
+  color: #ffffff;
+}
+:global(.etext-dark) {
+  color: #000000;
+}
+:global(.etext-secondary) {
+  color: #3AC82E;
+}
+:global(.etext-secondaryDark) {
+  color: #00A855;
+}
+:global(.etext-secondaryLight) {
+  color: #CBFFC7;
+}
+:global(.etext-primary) {
+  color: #00AEE5;
+}
+:global(.etext-primaryDark) {
+  color: #007FD8;
+}
+:global(.etext-primaryLight) {
+  color: #CEF3FF;
+}
+:global(.etext-danger) {
+  color: #FE4747;
+}
+:global(.etext-dangerDark) {
+  color: #B02A37;
+}
+:global(.etext-dangerLight) {
+  color: #FE4747;
+}
+:global(.etext-info) {
+  color: #0DCAF0;
+}
+:global(.etext-infoDark) {
+  color: #087990;
+}
+:global(.etext-infoLight) {
+  color: #9EEAF9;
+}
+:global(.etext-success) {
+  color: #00A96B;
+}
+:global(.etext-successDark) {
+  color: #146C43;
+}
+:global(.etext-successLight) {
+  color: #D1E7DD;
+}
+:global(.etext-warning) {
+  color: #FFBA3A;
+}
+:global(.etext-warningDark) {
+  color: #997404;
+}
+:global(.etext-warningLight) {
+  color: #FFF3CD;
+}
+:global(.etext-gray100) {
+  color: #F8F9FA;
+}
+:global(.etext-gray200) {
+  color: #E9ECEF;
+}
+:global(.etext-gray300) {
+  color: #DEE2E6;
+}
+:global(.etext-gray400) {
+  color: #CED4DA;
+}
+:global(.etext-gray500) {
+  color: #adb5bd;
+}
+:global(.etext-gray600) {
+  color: #6C757D;
+}
+:global(.etext-gray700) {
+  color: #495057;
+}
+:global(.etext-gray800) {
+  color: #343A40;
+}
+:global(.etext-gray900) {
+  color: #212529;
+}
+:global(.etext-green100) {
+  color: #D1E7DD;
+}
+:global(.etext-green200) {
+  color: #A3CFBB;
+}
+:global(.etext-green300) {
+  color: #75B798;
+}
+:global(.etext-green400) {
+  color: #479F76;
+}
+:global(.etext-green500) {
+  color: #198754;
+}
+:global(.etext-green600) {
+  color: #146C43;
+}
+:global(.etext-green700) {
+  color: #0F5132;
+}
+:global(.etext-green800) {
+  color: #0A3622;
+}
+:global(.etext-green900) {
+  color: #051B11;
+}
+:global(.etext-red100) {
+  color: #F8D7DA;
+}
+:global(.etext-red200) {
+  color: #F1AEB5;
+}
+:global(.etext-red300) {
+  color: #EA868F;
+}
+:global(.etext-red400) {
+  color: #E35D6A;
+}
+:global(.etext-red500) {
+  color: #DC3545;
+}
+:global(.etext-red600) {
+  color: #B02A37;
+}
+:global(.etext-red700) {
+  color: #842029;
+}
+:global(.etext-red800) {
+  color: #58151C;
+}
+:global(.etext-red900) {
+  color: #2C0B0E;
+}
+:global(.etext-yellow100) {
+  color: #FFF3CD;
+}
+:global(.etext-yellow200) {
+  color: #FFE69C;
+}
+:global(.etext-yellow300) {
+  color: #FFDA6A;
+}
+:global(.etext-yellow400) {
+  color: #FFCD39;
+}
+:global(.etext-yellow500) {
+  color: #FFC107;
+}
+:global(.etext-yellow600) {
+  color: #CC9A06;
+}
+:global(.etext-yellow700) {
+  color: #997404;
+}
+:global(.etext-yellow800) {
+  color: #664D03;
+}
+:global(.etext-yellow900) {
+  color: #332701;
+}
+:global(.etext-cyan100) {
+  color: #CFF4FC;
+}
+:global(.etext-cyan200) {
+  color: #9EEAF9;
+}
+:global(.etext-cyan300) {
+  color: #6EDFF6;
+}
+:global(.etext-cyan400) {
+  color: #3DD5F3;
+}
+:global(.etext-cyan500) {
+  color: #0DCAF0;
+}
+:global(.etext-cyan600) {
+  color: #0AA2C0;
+}
+:global(.etext-cyan700) {
+  color: #087990;
+}
+:global(.etext-cyan800) {
+  color: #055160;
+}
+:global(.etext-cyan900) {
+  color: #032830;
+}
+:global(.eoutline-secondary) {
+  outline: 1px solid #3AC82E;
+}
+:global(.eoutline-secondaryDark) {
+  outline: 1px solid #00A855;
+}
+:global(.eoutline-secondaryLight) {
+  outline: 1px solid #CBFFC7;
+}
+:global(.eoutline-primary) {
+  outline: 1px solid #00AEE5;
+}
+:global(.eoutline-primaryDark) {
+  outline: 1px solid #007FD8;
+}
+:global(.eoutline-primaryLight) {
+  outline: 1px solid #CEF3FF;
+}
+:global(.eoutline-danger) {
+  outline: 1px solid #FE4747;
+}
+:global(.eoutline-dangerDark) {
+  outline: 1px solid #B02A37;
+}
+:global(.eoutline-dangerLight) {
+  outline: 1px solid #FE4747;
+}
+:global(.eoutline-success) {
+  outline: 1px solid #00A96B;
+}
+:global(.eoutline-successDark) {
+  outline: 1px solid #146C43;
+}
+:global(.eoutline-successLight) {
+  outline: 1px solid #D1E7DD;
+}
+:global(.eoutline-info) {
+  outline: 1px solid #0DCAF0;
+}
+:global(.eoutline-infoDark) {
+  outline: 1px solid #087990;
+}
+:global(.eoutline-infoLight) {
+  outline: 1px solid #9EEAF9;
+}
+:global(.eoutline-warning) {
+  outline: 1px solid #FFBA3A;
+}
+:global(.eoutline-warningDark) {
+  outline: 1px solid #997404;
+}
+:global(.eoutline-warningLight) {
+  outline: 1px solid #FFF3CD;
+}
+:global(.eradius) {
+  border-radius: 4px;
+}
+:global(.eradius-low) {
+  border-radius: 8px;
+}
+:global(.eradius-medium) {
+  border-radius: 16px;
+}
+:global(.eradius-full) {
+  border-radius: 50%;
+}
+.eshadow-non {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.eshadow-low {
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+}
+.eshadow-medium {
+  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
+}
+.eshadow-high {
+  box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.1);
+}
+:global(.efs-small) {
+  font-family: Roboto;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+:global(.efs-normal) {
+  font-family: Roboto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+}
+:global(.efs-strong) {
+  font-family: Roboto;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+}
+:global(.efs-h6) {
+  font-family: Roboto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h5) {
+  font-family: Roboto;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h4) {
+  font-family: Roboto;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h3) {
+  font-family: Roboto;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h2) {
+  font-family: Roboto;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h1) {
+  font-family: Roboto;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.8px;
+}
+:global(.efs-h4D) {
+  font-family: Merriweather;
+  font-size: 52px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+:global(.efs-h3D) {
+  font-family: Merriweather;
+  font-size: 58px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+:global(.efs-h2D) {
+  font-family: Merriweather;
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -1.28px;
+}
+:global(.efs-h1D) {
+  font-family: Merriweather;
+  font-size: 72px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}</style>