mertani-web-toolkit 0.1.21 → 0.1.22

package/dist/components/Button/Button.svelte

@@ -1,30 +1,101 @@
 <script lang="ts">
-  import './button.css';
-
-  interface Props {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
-    size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** The onclick event handler */
-    onclick?: () => void;
-  }
-
-  const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props();
-  
-  let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
-  let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
+	import './button.css';
+	import { Icon } from '../../index.js';
+	import type { TIconName } from '../../types/Icon.ts';
+
+	interface Props {
+		size?: 'small' | 'medium' | 'large';
+		variant?: 'primary' | 'secondary' | 'outline';
+		label?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		backgroundColor?: string;
+		borderColor?: string;
+		textColor?: string;
+		iconLeft?: TIconName;
+		iconRight?: TIconName;
+		class?: string;
+		style?: string;
+		onclick?: () => void;
+	}
+
+	const {
+		size = 'medium',
+		variant = 'primary',
+		label = 'Button',
+		disabled = false,
+		isLoading = false,
+		backgroundColor = '',
+		borderColor = '',
+		textColor = '',
+		iconLeft,
+		iconRight,
+		class: className = '',
+		style: customStyle = '',
+		...props
+	}: Props = $props();
+
+	let mode = $derived(
+		variant === 'primary'
+			? 'storybook-button--primary'
+			: variant === 'secondary'
+				? 'storybook-button--secondary'
+				: 'storybook-button--outline'
+	);
+
+	// Ukuran icon berdasarkan size button
+	const iconSize = $derived(() => {
+		switch (size) {
+			case 'small':
+				return 16;
+			case 'large':
+				return 18;
+			default:
+				return 18;
+		}
+	});
+
+	// Gabungkan classes
+	const buttonClasses = $derived(() => {
+		const classes = ['storybook-button', `storybook-button--${size}`, mode];
+		if (isLoading) classes.push('storybook-button--loading');
+		if (className) classes.push(className);
+		return classes.filter(Boolean).join(' ');
+	});
+
+	// Gabungkan styles
+	const buttonStyles = $derived(() => {
+		const styles: string[] = [];
+		if (backgroundColor) styles.push(`--background-color: ${backgroundColor};`);
+		if (borderColor) styles.push(`--border-color: ${borderColor};`);
+		if (textColor) styles.push(`--text-color: ${textColor};`);
+		if (customStyle) styles.push(customStyle);
+		return styles.join(' ');
+	});
+
+	// Button disabled jika disabled atau loading
+	const isButtonDisabled = $derived(disabled || isLoading);
 </script>
 
 <button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
-  {...props}
+	type="button"
+	disabled={isButtonDisabled}
+	class={buttonClasses()}
+	style={buttonStyles()}
+	{...props}
 >
-  {label}
+	{#if isLoading}
+		<span class="storybook-button__spinner"></span>
+	{/if}
+	{#if iconLeft && !isLoading}
+		<span class="storybook-button__icon storybook-button__icon--left">
+			<Icon name={iconLeft} width={iconSize()} height={iconSize()} color="currentColor" />
+		</span>
+	{/if}
+	<span class="storybook-button__label">{label}</span>
+	{#if iconRight && !isLoading}
+		<span class="storybook-button__icon storybook-button__icon--right">
+			<Icon name={iconRight} width={iconSize()} height={iconSize()} color="currentColor" />
+		</span>
+	{/if}
 </button>

package/dist/components/Button/Button.svelte.d.ts

@@ -1,14 +1,18 @@
 import './button.css';
+import type { TIconName } from '../../types/Icon.ts';
 interface Props {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
     size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** The onclick event handler */
+    variant?: 'primary' | 'secondary' | 'outline';
+    label?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    iconLeft?: TIconName;
+    iconRight?: TIconName;
+    class?: string;
+    style?: string;
     onclick?: () => void;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;

package/dist/components/Button/button.css

@@ -1,30 +1,116 @@
 .storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	cursor: pointer;
+	border: 0;
+	font-weight: 500;
+	line-height: 1;
+	font-family: 'Inter', sans-serif;
+}
+.storybook-button:hover {
+	opacity: 0.8;
+}
+.storybook-button:active {
+	opacity: 0.6;
 }
 .storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
+	background-color: var(--background-color, #f79b09);
+	border: 1px solid var(--border-color, var(--background-color, #f79b09));
+	color: var(--text-color, white);
+}
+.storybook-button--primary:disabled {
+	background-color: #ced4da;
+	border: 1px solid #ced4da;
+	color: #3f4047;
+	cursor: not-allowed;
 }
 .storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
+	border: 1px solid #ced4da;
+	background-color: transparent;
+	color: var(--text-color, #3f4047);
+}
+.storybook-button--secondary:disabled {
+	border: 1px solid #a3a6b7;
+	color: #a3a6b7;
+	cursor: not-allowed;
+}
+.storybook-button--outline {
+	border: 1px solid var(--border-color, #f79b09);
+	background-color: transparent;
+	color: var(--text-color, #f79b09);
+}
+.storybook-button--outline:disabled {
+	border: 1px solid #a3a6b7;
+	color: #a3a6b7;
+	cursor: not-allowed;
 }
 .storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
+	padding: 6px 12px;
+	font-size: 14px;
+	border-radius: 6px;
 }
 .storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
+	padding: 8px 16px;
+	font-size: 16px;
+	border-radius: 8px;
 }
 .storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
+	padding: 10px 24px;
+	font-size: 18px;
+	border-radius: 8px;
+}
+.storybook-button--disabled {
+	background-color: #ced4da;
+	cursor: not-allowed;
+}
+
+.storybook-button__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.storybook-button__label {
+	display: inline-block;
+}
+
+.storybook-button--loading {
+	cursor: wait;
+	position: relative;
+}
+
+.storybook-button--loading .storybook-button__label {
+	opacity: 0.7;
+}
+
+.storybook-button__spinner {
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	border: 2px solid currentColor;
+	border-right-color: transparent;
+	border-radius: 50%;
+	animation: storybook-button-spin 0.6s linear infinite;
+	flex-shrink: 0;
+}
+
+@keyframes storybook-button-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.storybook-button--small .storybook-button__spinner {
+	width: 12px;
+	height: 12px;
+	border-width: 1.5px;
+}
+
+.storybook-button--large .storybook-button__spinner {
+	width: 16px;
+	height: 16px;
+	border-width: 2.5px;
 }

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import ChevronDown from '../../icons/ChevronDown.svelte';
+	import GearTwo from '../../icons/GearTwo.svelte';
+	import Logout from '../../icons/Logout.svelte';
+	import User from '../../icons/User.svelte';
+	import Window from '../../icons/Window.svelte';
+	import type { TIconName } from '../../types/Icon.ts';
+
+	interface IconProps {
+		name: TIconName;
+		width?: number | string;
+		height?: number | string;
+		color?: string;
+	}
+
+	const { name, width, height, color }: IconProps = $props();
+
+	const iconMap = {
+		ChevronDown,
+		GearTwo,
+		Logout,
+		User,
+		Window
+	} as const;
+
+	const IconComponent = $derived(iconMap[name as keyof typeof iconMap]);
+
+	const iconStyle = $derived(() => {
+		const styles: string[] = [];
+		if (width !== undefined)
+			styles.push(`width: ${typeof width === 'number' ? width + 'px' : width}`);
+		if (height !== undefined)
+			styles.push(`height: ${typeof height === 'number' ? height + 'px' : height}`);
+		if (color !== undefined) styles.push(`color: ${color}`);
+
+		return styles.join('; ');
+	});
+</script>
+
+{#if IconComponent}
+	{@const Component = IconComponent as any}
+	<div class="icon-wrapper" style={iconStyle()}>
+		<Component />
+	</div>
+{:else}
+	<span class="icon-error">Icon "{name}" tidak ditemukan</span>
+{/if}
+
+<style>
+	.icon-wrapper {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-wrapper :global(svg) {
+		width: inherit;
+		height: inherit;
+		color: inherit;
+	}
+
+	.icon-wrapper :global(path),
+	.icon-wrapper :global(g path) {
+		fill: currentColor !important;
+		stroke: currentColor !important;
+	}
+
+	.icon-error {
+		color: red;
+		font-size: 12px;
+	}
+</style>

package/dist/components/Icon/Icon.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { TIconName } from '../../types/Icon.ts';
+interface IconProps {
+    name: TIconName;
+    width?: number | string;
+    height?: number | string;
+    color?: string;
+}
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/icons/ChevronDown.svelte

@@ -1,14 +1,7 @@
-
 <script lang="ts">
 	type PresetDirection = 'down' | 'up' | 'left' | 'right';
 
-	const {
-		width = 12,
-		height = 8,
-		direction = 'down'
-	} = $props<{
-		width?: number | string;
-		height?: number | string;
+	const { direction = 'down' } = $props<{
 		direction?: PresetDirection | number | string;
 	}>();
 
@@ -44,8 +37,8 @@
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	{width}
-	{height}
+	width="12"
+	height="8"
 	viewBox="0 0 12 8"
 	fill="currentColor"
 	style={`transform: ${transform}; transform-origin: center; transition: transform 0.2s ease;`}

package/dist/icons/ChevronDown.svelte.d.ts

@@ -1,7 +1,5 @@
 type PresetDirection = 'down' | 'up' | 'left' | 'right';
 type $$ComponentProps = {
-    width?: number | string;
-    height?: number | string;
     direction?: PresetDirection | number | string;
 };
 declare const ChevronDown: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/icons/GearTwo.svelte

@@ -1,18 +1,26 @@
-<script lang="ts">
-	const { width = 16, height = 17, color = '#212529' } = $props();
-</script>
-
-<svg {width} {height} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+	width="16"
+	height="17"
+	viewBox="0 0 16 17"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<g clip-path="url(#clip0_6267_47931)">
-		<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />
+		<rect
+			width="16"
+			height="16"
+			transform="translate(0 0.5)"
+			fill="currentColor"
+			fill-opacity="0.01"
+		/>
 		<path
 			d="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"
-			fill={color}
+			fill="currentColor"
 		/>
 	</g>
 	<defs>
 		<clipPath id="clip0_6267_47931">
-			<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
+			<rect width="16" height="16" fill="currentColor" transform="translate(0 0.5)" />
 		</clipPath>
 	</defs>
 </svg>

package/dist/icons/GearTwo.svelte.d.ts

@@ -1,7 +1,26 @@
-declare const GearTwo: import("svelte").Component<{
-    width?: number;
-    height?: number;
-    color?: string;
-}, {}, "">;
-type GearTwo = ReturnType<typeof GearTwo>;
 export default GearTwo;
+type GearTwo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const GearTwo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/Logout.svelte

@@ -1,3 +1,15 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6" stroke="#3F4047" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/dist/icons/User.svelte

@@ -1,11 +1,20 @@
 <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2167_105141)">
-<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01"/>
-<path d="M8 8.49902C8.79565 8.49902 9.55871 8.18295 10.1213 7.62034C10.6839 7.05773 11 6.29467 11 5.49902C11 4.70337 10.6839 3.94031 10.1213 3.3777C9.55871 2.81509 8.79565 2.49902 8 2.49902C7.20435 2.49902 6.44129 2.81509 5.87868 3.3777C5.31607 3.94031 5 4.70337 5 5.49902C5 6.29467 5.31607 7.05773 5.87868 7.62034C6.44129 8.18295 7.20435 8.49902 8 8.49902ZM10 5.49902C10 6.02946 9.78929 6.53816 9.41421 6.91324C9.03914 7.28831 8.53043 7.49902 8 7.49902C7.46957 7.49902 6.96086 7.28831 6.58579 6.91324C6.21071 6.53816 6 6.02946 6 5.49902C6 4.96859 6.21071 4.45988 6.58579 4.08481C6.96086 3.70974 7.46957 3.49902 8 3.49902C8.53043 3.49902 9.03914 3.70974 9.41421 4.08481C9.78929 4.45988 10 4.96859 10 5.49902ZM14 13.499C14 14.499 13 14.499 13 14.499H3C3 14.499 2 14.499 2 13.499C2 12.499 3 9.49902 8 9.49902C13 9.49902 14 12.499 14 13.499ZM13 13.495C12.999 13.249 12.846 12.509 12.168 11.831C11.516 11.179 10.289 10.499 8 10.499C5.71 10.499 4.484 11.179 3.832 11.831C3.154 12.509 3.002 13.249 3 13.495H13Z" fill="#212529"/>
-</g>
-<defs>
-<clipPath id="clip0_2167_105141">
-<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
-</svg>
+	<g clip-path="url(#clip0_2167_105141)">
+		<rect
+			width="16"
+			height="16"
+			transform="translate(0 0.5)"
+			fill="currentColor"
+			fill-opacity="0.01"
+		/>
+		<path
+			d="M8 8.49902C8.79565 8.49902 9.55871 8.18295 10.1213 7.62034C10.6839 7.05773 11 6.29467 11 5.49902C11 4.70337 10.6839 3.94031 10.1213 3.3777C9.55871 2.81509 8.79565 2.49902 8 2.49902C7.20435 2.49902 6.44129 2.81509 5.87868 3.3777C5.31607 3.94031 5 4.70337 5 5.49902C5 6.29467 5.31607 7.05773 5.87868 7.62034C6.44129 8.18295 7.20435 8.49902 8 8.49902ZM10 5.49902C10 6.02946 9.78929 6.53816 9.41421 6.91324C9.03914 7.28831 8.53043 7.49902 8 7.49902C7.46957 7.49902 6.96086 7.28831 6.58579 6.91324C6.21071 6.53816 6 6.02946 6 5.49902C6 4.96859 6.21071 4.45988 6.58579 4.08481C6.96086 3.70974 7.46957 3.49902 8 3.49902C8.53043 3.49902 9.03914 3.70974 9.41421 4.08481C9.78929 4.45988 10 4.96859 10 5.49902ZM14 13.499C14 14.499 13 14.499 13 14.499H3C3 14.499 2 14.499 2 13.499C2 12.499 3 9.49902 8 9.49902C13 9.49902 14 12.499 14 13.499ZM13 13.495C12.999 13.249 12.846 12.509 12.168 11.831C11.516 11.179 10.289 10.499 8 10.499C5.71 10.499 4.484 11.179 3.832 11.831C3.154 12.509 3.002 13.249 3 13.495H13Z"
+			fill="currentColor"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_2167_105141">
+			<rect width="16" height="16" fill="currentColor" transform="translate(0 0.5)" />
+		</clipPath>
+	</defs>
+</svg>

package/dist/icons/Window.svelte

@@ -1,10 +1,6 @@
-<script>
-	const { width = 16, height = 16, color = '#000', rotate = false } = $props();
-</script>
-
-<svg {width} {height} style={rotate ? 'transform: rotate(180deg)' : ''} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 17 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 	<path
 		d="M16.5 3C16.5 1.89543 15.6046 1 14.5 1H2.5C1.39543 1 0.5 1.89543 0.5 3V13C0.5 14.1046 1.39543 15 2.5 15H14.5C15.6046 15 16.5 14.1046 16.5 13V3ZM11.5 2V14H2.5C1.94771 14 1.5 13.5523 1.5 13V3C1.5 2.44772 1.94772 2 2.5 2H11.5ZM12.5 2H14.5C15.0523 2 15.5 2.44772 15.5 3V13C15.5 13.5523 15.0523 14 14.5 14H12.5V2Z"
-		fill={color}
+		fill="currentColor"
 	/>
 </svg>

package/dist/icons/Window.svelte.d.ts

@@ -1,17 +1,26 @@
 export default Window;
-type Window = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const Window: import("svelte").Component<{
-    width?: number;
-    height?: number;
-    color?: string;
-    rotate?: boolean;
-}, {}, "">;
-type $$ComponentProps = {
-    width?: number;
-    height?: number;
-    color?: string;
-    rotate?: boolean;
+type Window = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
+declare const Window: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Header } from './components/Header/Header.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IMSLayout1 } from './layouts/IMS/IMSLayout1/IMSLayout1.svelte';

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Header } from './components/Header/Header.svelte';
+export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IMSLayout1 } from './layouts/IMS/IMSLayout1/IMSLayout1.svelte';

package/dist/types/Icon.d.ts

@@ -0,0 +1,2 @@
+export declare const IconNames: readonly ["ChevronDown", "GearTwo", "Logout", "User", "Window"];
+export type TIconName = (typeof IconNames)[number];

package/dist/types/Icon.js

@@ -0,0 +1 @@
+export const IconNames = ['ChevronDown', 'GearTwo', 'Logout', 'User', 'Window'];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.21",
+	"version": "0.1.22",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",