@enki-tek/fms-web-components 0.0.5 → 0.0.6

package/components/Badge/Badge.stories.js

@@ -1,56 +1,56 @@
 import Badge from './Badge.svelte'
 
-export default{
-    title:'FMS/Badge',
-    component:Badge,
+export default {
+    title: 'FMS/Badge',
+    component: Badge,
     tags: ['autodocs'],
 };
 
-export const yellow={
-    args:{
-        config:'yellow',
-        label:'Badges',
+export const yellow = {
+    args: {
+        config: 'yellow',
+        label: 'Badges',
     }
 };
-export const primaryLight={
-    args:{
-        config:'primaryLight',
-        label:'Badges',
+export const primaryLight = {
+    args: {
+        config: 'primaryLight',
+        label: 'Badges',
     }
 };
-export const secondaryLight={
-    args:{
-        config:'secondaryLight',
-        label:'Badges',
+export const secondaryLight = {
+    args: {
+        config: 'secondaryLight',
+        label: 'Badges',
     }
 };
-export const green={
-    args:{
-        config:'green',
-        label:'Badges',
+export const green = {
+    args: {
+        config: 'green',
+        label: 'Badges',
     }
 };
-export const grayLight={
-    args:{
-        config:'grayLight',
-        label:'Badges',
+export const grayLight = {
+    args: {
+        config: 'grayLight',
+        label: 'Badges',
     }
 };
-export const gray={
-    args:{
-        config:'gray',
-        label:'Badges',
+export const gray = {
+    args: {
+        config: 'gray',
+        label: 'Badges',
     }
 };
-export const red={
-    args:{
-        config:'red',
-        label:'Badges',
+export const red = {
+    args: {
+        config: 'red',
+        label: 'Badges',
     }
 };
-export const cyan={
-    args:{
-        config:'cyan',
-        label:'Badges',
+export const cyan = {
+    args: {
+        config: 'cyan',
+        label: 'Badges',
     }
 };

package/components/Badge/Badge.svelte

@@ -8,10 +8,9 @@ if (badgeConfig.hasOwnProperty(config)) {
 }
 </script>
 
-<Badge pill color='none' class={badgeStyles.join(' ')}>{label}</Badge>
+<Badge pill color="none" class={badgeStyles.join(' ')}>{label}</Badge>
 
-
-  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+<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);
@@ -584,4 +583,4 @@ if (badgeConfig.hasOwnProperty(config)) {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-}</style>
+}</style>

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -13,7 +13,7 @@ export const Default={
     args:{
         newBreadcrumbs:[
             {title:'home',link:'/'},
-            {title:'contact',link:'/contact'},
+            {title:'contact',link:'https://stackoverflow.com/questions/73033899/pluginviteimport-analysis-failed-to-parse-source-for-import-analysis-because'},
             {title:'payment',link:'/contact/payment'},
         ]
     }

package/components/CardIcon/CardIcon.scss

@@ -0,0 +1,95 @@
+@import './../variable.scss';
+
+:global(.custom-card-style) {
+	width: auto;
+	padding: 7px 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 10px;
+	flex: 1 0 0;
+	border-radius: 10px;
+	border: 1px dashed $white-cardicon;
+	background: $white;
+}
+
+.cardicon-main {
+	width: 100%;
+	display: flex;
+	padding: 10px;
+	justify-content: space-between;
+	align-items: flex-start;
+	align-self: stretch;
+}
+
+.cardicon-content {
+	width: 100%;
+	display: flex;
+	color: $gray-cardicon;
+	text-align: right;
+	font-size: 30px;
+	@extend %common-fontstyle;
+	line-height: 40px;
+	padding: 10px;
+}
+
+:global(.cardicon-main .card-title) {
+	color: $black;
+	font-size: 18px;
+	@extend %common-fontstyle;
+	text-transform: capitalize;
+}
+
+:global(.cardicon-main i) {
+	width: 20px;
+	height: 20px;
+}
+
+.custom-body-slot {
+	color: $black;
+	font-size: 13px;
+	@extend %common-fontstyle;
+}
+
+%common-fontstyle {
+	font-family: $bodyFonts;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+%common {
+	flex-direction: column-reverse !important;
+}
+
+:global(.bottom-left) {
+	@extend %common;
+
+	.cardicon-main {
+		flex-direction: row-reverse;
+	}
+}
+
+:global(.bottom-right) {
+	@extend %common;
+}
+
+:global(.top-left) {
+	flex-direction: column;
+
+	.cardicon-main {
+		flex-direction: row-reverse;
+	}
+}
+
+:global(.top-right) {
+	flex-direction: column;
+}
+
+.right {
+	justify-content: end !important;
+}
+
+.top {
+	justify-content: start !important;
+}

package/components/CardIcon/CardIcon.stories.d.ts

@@ -0,0 +1,129 @@
+declare namespace _default {
+    export const title: string;
+    export { CardIcon as component };
+    export const tags: string[];
+    export namespace argTypes {
+        export namespace name {
+            namespace control {
+                const type: string;
+            }
+            const options: string[];
+        }
+        export namespace location {
+            export namespace control_1 {
+                const type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            const options_1: string[];
+            export { options_1 as options };
+        }
+        export namespace slotPosition {
+            export namespace control_2 {
+                const type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            const options_2: string[];
+            export { options_2 as options };
+        }
+        export namespace title_1 {
+            export namespace control_3 {
+                const type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        export { title_1 as title };
+        export namespace cardsubtitle {
+            export namespace control_4 {
+                const type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        export namespace cardbody {
+            export namespace control_5 {
+                const type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    namespace args {
+        const name_1: string;
+        export { name_1 as name };
+        const location_1: string;
+        export { location_1 as location };
+        const title_2: string;
+        export { title_2 as title };
+        const cardsubtitle_1: string;
+        export { cardsubtitle_1 as cardsubtitle };
+        const cardbody_1: string;
+        export { cardbody_1 as cardbody };
+    }
+}
+export namespace topLeft {
+    export namespace args_1 {
+        const name_2: string;
+        export { name_2 as name };
+        const location_2: string;
+        export { location_2 as location };
+        const title_3: string;
+        export { title_3 as title };
+        const cardsubtitle_2: string;
+        export { cardsubtitle_2 as cardsubtitle };
+        const cardbody_2: string;
+        export { cardbody_2 as cardbody };
+    }
+    export { args_1 as args };
+}
+export namespace topRight {
+    export namespace args_2 {
+        const name_3: string;
+        export { name_3 as name };
+        const location_3: string;
+        export { location_3 as location };
+        const title_4: string;
+        export { title_4 as title };
+        const cardsubtitle_3: string;
+        export { cardsubtitle_3 as cardsubtitle };
+        const cardbody_3: string;
+        export { cardbody_3 as cardbody };
+    }
+    export { args_2 as args };
+}
+export namespace bottomLeft {
+    export namespace args_3 {
+        const name_4: string;
+        export { name_4 as name };
+        const location_4: string;
+        export { location_4 as location };
+        const title_5: string;
+        export { title_5 as title };
+        const cardsubtitle_4: string;
+        export { cardsubtitle_4 as cardsubtitle };
+        const cardbody_4: string;
+        export { cardbody_4 as cardbody };
+    }
+    export { args_3 as args };
+}
+export namespace bottomRight {
+    export namespace args_4 {
+        const name_5: string;
+        export { name_5 as name };
+        const location_5: string;
+        export { location_5 as location };
+        const title_6: string;
+        export { title_6 as title };
+        const cardsubtitle_5: string;
+        export { cardsubtitle_5 as cardsubtitle };
+        const cardbody_5: string;
+        export { cardbody_5 as cardbody };
+    }
+    export { args_4 as args };
+}
+import CardIcon from "./CardIcon.svelte";

package/components/CardIcon/CardIcon.stories.js

@@ -0,0 +1,77 @@
+import CardIcon from './CardIcon.svelte';
+
+export default {
+	title: 'FMS/CardIcon',
+	component: CardIcon,
+	tags: ['autodocs'],
+	argTypes: {
+		name: {
+			control: { type: 'select' },
+			options: ['people', 'exclamation-triangle', 'trophy']
+		},
+		location: {
+			control: { type: 'select' },
+			options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+		},
+		slotPosition: {
+			control: { type: 'select' },
+			options: ['left', 'right']
+		},
+		title: {
+			control: { type: 'text' }
+		},
+		cardsubtitle: {
+			control: { type: 'text' }
+		},
+		cardbody: {
+			control: { type: 'text' }
+		}
+	}
+};
+
+export const Default = {
+	args: {
+		name: 'people',
+		location: 'bottom-right',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+
+export const topLeft = {
+	args: {
+		name: 'people',
+		location: 'top-left',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+export const topRight = {
+	args: {
+		name: 'people',
+		location: 'top-right',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+export const bottomLeft = {
+	args: {
+		name: 'people',
+		location: 'bottom-left',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+export const bottomRight = {
+	args: {
+		name: 'people',
+		location: 'bottom-right',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};

package/components/CardIcon/CardIcon.svelte

@@ -0,0 +1,684 @@
+<script>import { Card, CardBody, CardTitle, Icon } from "sveltestrap";
+import { locationConfig, slotLocationConfig } from "./CardIconConfig";
+export let title = "Card title";
+export let name = "bell";
+export let location = "bottom-right";
+export let slotPosition = "top";
+export let cardbody = "";
+export let cardsubtitle = "";
+let locationStyle = [`custom-card-style`];
+if (locationConfig.includes(location)) {
+  locationStyle.push(location);
+}
+let slotLocation = [`cardicon-content`];
+if (slotLocationConfig.includes(slotPosition)) {
+  slotLocation.push(slotPosition);
+}
+</script>
+
+<Card class={locationStyle.join(' ')}>
+	<div class="cardicon-main">
+		<CardTitle>{title}</CardTitle>
+		<Icon {name} />
+	</div>
+
+	<div class={slotLocation.join(' ')}>
+		<slot name="cardsubtitle">
+			{#if cardsubtitle}
+				{cardsubtitle}
+			{:else}
+				<slot />
+			{/if}
+		</slot>
+	</div>
+
+	<CardBody>
+		<div class="custom-body-slot">
+			<slot name="cardbody">
+				{#if cardbody}
+					{cardbody}
+				{:else}
+					<slot />
+				{/if}
+			</slot>
+		</div>
+	</CardBody>
+</Card>
+
+<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");
+:global(.custom-card-style) {
+  width: auto;
+  padding: 7px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1 0 0;
+  border-radius: 10px;
+  border: 1px dashed #B8B8B8;
+  background: #ffffff;
+}
+.cardicon-main {
+  width: 100%;
+  display: flex;
+  padding: 10px;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.cardicon-content {
+  width: 100%;
+  display: flex;
+  color: #444;
+  text-align: right;
+  font-size: 30px;
+  line-height: 40px;
+  padding: 10px;
+}
+:global(.cardicon-main .card-title) {
+  color: #000000;
+  font-size: 18px;
+  text-transform: capitalize;
+}
+:global(.cardicon-main i) {
+  width: 20px;
+  height: 20px;
+}
+.custom-body-slot {
+  color: #000000;
+  font-size: 13px;
+}
+.cardicon-content, :global(.cardicon-main .card-title), .custom-body-slot {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+:global(.bottom-right), :global(.bottom-left) {
+  flex-direction: column-reverse !important;
+}
+:global(.bottom-left) .cardicon-main {
+  flex-direction: row-reverse;
+}
+:global(.top-left) {
+  flex-direction: column;
+}
+:global(.top-left) .cardicon-main {
+  flex-direction: row-reverse;
+}
+:global(.top-right) {
+  flex-direction: column;
+}
+.right {
+  justify-content: end !important;
+}
+.top {
+  justify-content: start !important;
+}
+: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>

package/components/CardIcon/CardIcon.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        name?: string | undefined;
+        location?: string | undefined;
+        slotPosition?: string | undefined;
+        cardbody?: string | undefined;
+        cardsubtitle?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        cardsubtitle: {};
+        default: {};
+        cardbody: {};
+    };
+};
+export type CardIconProps = typeof __propDef.props;
+export type CardIconEvents = typeof __propDef.events;
+export type CardIconSlots = typeof __propDef.slots;
+export default class CardIcon extends SvelteComponentTyped<CardIconProps, CardIconEvents, CardIconSlots> {
+}
+export {};

package/components/CardIcon/CardIconConfig.d.ts

@@ -0,0 +1,2 @@
+export const locationConfig: string[];
+export const slotLocationConfig: string[];

package/components/CardIcon/CardIconConfig.js

@@ -0,0 +1,2 @@
+export const locationConfig = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const slotLocationConfig = ['left', 'right'];

package/components/variable.scss

@@ -96,6 +96,10 @@ $blue-500: rgba(13, 110, 253, 1);
 
 $Title-Color: #152536;
 
+// cardicon color private
+$gray-cardicon:#444;
+$white-cardicon:#B8B8B8;
+
 $box-shadow-green: rgba(11, 235, 49, 0.25);
 //Button sizes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -63,6 +63,10 @@
     "./components/Card/Card.scss": "./components/Card/Card.scss",
     "./components/Card/Card.stories": "./components/Card/Card.stories.js",
     "./components/Card/Card.svelte": "./components/Card/Card.svelte",
+    "./components/CardIcon/CardIcon.scss": "./components/CardIcon/CardIcon.scss",
+    "./components/CardIcon/CardIcon.stories": "./components/CardIcon/CardIcon.stories.js",
+    "./components/CardIcon/CardIcon.svelte": "./components/CardIcon/CardIcon.svelte",
+    "./components/CardIcon/CardIconConfig": "./components/CardIcon/CardIconConfig.js",
     "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
     "./components/CheckBox/Checkbox.stories": "./components/CheckBox/Checkbox.stories.js",
     "./components/CheckBox/Checkbox.svelte": "./components/CheckBox/Checkbox.svelte",