@iroco/ui 0.6.5 → 0.8.1

package/lib/index.js

@@ -80,6 +80,9 @@
                 rest[k] = props[k];
         return rest;
     }
+    function null_to_empty(value) {
+        return value == null ? '' : value;
+    }
     function action_destroyer(action_result) {
         return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
     }
@@ -167,11 +170,35 @@
     function toggle_class(element, name, toggle) {
         element.classList[toggle ? 'add' : 'remove'](name);
     }
+    function custom_event(type, detail) {
+        const e = document.createEvent('CustomEvent');
+        e.initCustomEvent(type, false, false, detail);
+        return e;
+    }
 
     let current_component;
     function set_current_component(component) {
         current_component = component;
     }
+    function get_current_component() {
+        if (!current_component)
+            throw new Error('Function called outside component initialization');
+        return current_component;
+    }
+    function createEventDispatcher() {
+        const component = get_current_component();
+        return (type, detail) => {
+            const callbacks = component.$$.callbacks[type];
+            if (callbacks) {
+                // TODO are there situations where events could be dispatched
+                // in a server (non-DOM) environment?
+                const event = custom_event(type, detail);
+                callbacks.slice().forEach(fn => {
+                    fn.call(component, event);
+                });
+            }
+        };
+    }
     // TODO figure out if we still want to support
     // shorthand events, or if we want to implement
     // a real bubbling mechanism
@@ -445,22 +472,25 @@
 
     /* src/Button.svelte generated by Svelte v3.38.2 */
 
-    function create_fragment$a(ctx) {
+    function create_fragment$g(ctx) {
     	let button;
+    	let button_class_value;
     	let current;
     	let mounted;
     	let dispose;
-    	const default_slot_template = /*#slots*/ ctx[3].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[2], null);
+    	const default_slot_template = /*#slots*/ ctx[7].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
 
     	return {
     		c() {
     			button = element("button");
     			if (default_slot) default_slot.c();
-    			attr(button, "class", "iroco-ui-button svelte-1dvdooy");
+    			attr(button, "id", /*id*/ ctx[5]);
+    			attr(button, "class", button_class_value = "" + (null_to_empty(`iroco-ui-button iroco-ui-button--${/*size*/ ctx[3]} iroco-ui-button--${/*kind*/ ctx[2]}`) + " svelte-hp8sdi"));
     			attr(button, "type", /*type*/ ctx[0]);
     			button.disabled = /*disabled*/ ctx[1];
     			toggle_class(button, "disabled", /*disabled*/ ctx[1]);
+    			toggle_class(button, "rounded", /*rounded*/ ctx[4]);
     		},
     		m(target, anchor) {
     			insert(target, button, anchor);
@@ -472,17 +502,25 @@
     			current = true;
 
     			if (!mounted) {
-    				dispose = listen(button, "click", /*click_handler*/ ctx[4]);
+    				dispose = listen(button, "click", /*click_handler*/ ctx[8]);
     				mounted = true;
     			}
     		},
     		p(ctx, [dirty]) {
     			if (default_slot) {
-    				if (default_slot.p && (!current || dirty & /*$$scope*/ 4)) {
-    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[2], dirty, null, null);
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
+    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[6], dirty, null, null);
     				}
     			}
 
+    			if (!current || dirty & /*id*/ 32) {
+    				attr(button, "id", /*id*/ ctx[5]);
+    			}
+
+    			if (!current || dirty & /*size, kind*/ 12 && button_class_value !== (button_class_value = "" + (null_to_empty(`iroco-ui-button iroco-ui-button--${/*size*/ ctx[3]} iroco-ui-button--${/*kind*/ ctx[2]}`) + " svelte-hp8sdi"))) {
+    				attr(button, "class", button_class_value);
+    			}
+
     			if (!current || dirty & /*type*/ 1) {
     				attr(button, "type", /*type*/ ctx[0]);
     			}
@@ -491,9 +529,13 @@
     				button.disabled = /*disabled*/ ctx[1];
     			}
 
-    			if (dirty & /*disabled*/ 2) {
+    			if (dirty & /*size, kind, disabled*/ 14) {
     				toggle_class(button, "disabled", /*disabled*/ ctx[1]);
     			}
+
+    			if (dirty & /*size, kind, rounded*/ 28) {
+    				toggle_class(button, "rounded", /*rounded*/ ctx[4]);
+    			}
     		},
     		i(local) {
     			if (current) return;
@@ -513,10 +555,14 @@
     	};
     }
 
-    function instance$a($$self, $$props, $$invalidate) {
+    function instance$f($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	let { type = "button" } = $$props;
     	let { disabled = false } = $$props;
+    	let { kind = "basic" } = $$props;
+    	let { size = "regular" } = $$props;
+    	let { rounded = false } = $$props;
+    	let { id } = $$props;
 
     	function click_handler(event) {
     		bubble($$self, event);
@@ -525,16 +571,28 @@
     	$$self.$$set = $$props => {
     		if ("type" in $$props) $$invalidate(0, type = $$props.type);
     		if ("disabled" in $$props) $$invalidate(1, disabled = $$props.disabled);
-    		if ("$$scope" in $$props) $$invalidate(2, $$scope = $$props.$$scope);
+    		if ("kind" in $$props) $$invalidate(2, kind = $$props.kind);
+    		if ("size" in $$props) $$invalidate(3, size = $$props.size);
+    		if ("rounded" in $$props) $$invalidate(4, rounded = $$props.rounded);
+    		if ("id" in $$props) $$invalidate(5, id = $$props.id);
+    		if ("$$scope" in $$props) $$invalidate(6, $$scope = $$props.$$scope);
     	};
 
-    	return [type, disabled, $$scope, slots, click_handler];
+    	return [type, disabled, kind, size, rounded, id, $$scope, slots, click_handler];
     }
 
     class Button extends SvelteComponent {
     	constructor(options) {
     		super();
-    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { type: 0, disabled: 1 });
+
+    		init(this, options, instance$f, create_fragment$g, safe_not_equal, {
+    			type: 0,
+    			disabled: 1,
+    			kind: 2,
+    			size: 3,
+    			rounded: 4,
+    			id: 5
+    		});
     	}
     }
 
@@ -548,7 +606,7 @@
     		c() {
     			label_1 = element("label");
     			t = text(/*label*/ ctx[2]);
-    			attr(label_1, "class", "iroco-ui-label");
+    			attr(label_1, "class", "iroco-ui-label svelte-11iawkb");
     			attr(label_1, "for", /*id*/ ctx[1]);
     		},
     		m(target, anchor) {
@@ -568,8 +626,8 @@
     	};
     }
 
-    // (26:2) {#if error !=null}
-    function create_if_block$3(ctx) {
+    // (40:1) {#if error != null}
+    function create_if_block$4(ctx) {
     	let p;
     	let t_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "";
     	let t;
@@ -579,7 +637,7 @@
     			p = element("p");
     			t = text(t_value);
     			attr(p, "data-testid", "error");
-    			attr(p, "class", "error");
+    			attr(p, "class", "error svelte-11iawkb");
     		},
     		m(target, anchor) {
     			insert(target, p, anchor);
@@ -594,7 +652,7 @@
     	};
     }
 
-    function create_fragment$9(ctx) {
+    function create_fragment$f(ctx) {
     	let div;
     	let t0;
     	let input;
@@ -602,7 +660,7 @@
     	let mounted;
     	let dispose;
     	let if_block0 = /*label*/ ctx[2] && create_if_block_1$1(ctx);
-    	let if_block1 = /*error*/ ctx[4] != null && create_if_block$3(ctx);
+    	let if_block1 = /*error*/ ctx[4] != null && create_if_block$4(ctx);
 
     	return {
     		c() {
@@ -616,9 +674,11 @@
     			attr(input, "type", "text");
     			attr(input, "placeholder", /*placeholder*/ ctx[3]);
     			input.readOnly = /*readonly*/ ctx[7];
+    			attr(input, "class", "svelte-11iawkb");
+    			toggle_class(input, "border", /*border*/ ctx[8]);
     			toggle_class(input, "error", /*error*/ ctx[4] !== null);
     			toggle_class(input, "readonlyInput", /*readonly*/ ctx[7] == true);
-    			attr(div, "class", "iroco-ui-input");
+    			attr(div, "class", "iroco-ui-input svelte-11iawkb");
     		},
     		m(target, anchor) {
     			insert(target, div, anchor);
@@ -631,15 +691,15 @@
 
     			if (!mounted) {
     				dispose = [
-    					listen(input, "input", /*input_handler*/ ctx[11]),
-    					listen(input, "input", /*input_input_handler*/ ctx[12]),
+    					listen(input, "input", /*input_handler*/ ctx[12]),
+    					listen(input, "input", /*input_input_handler*/ ctx[13]),
     					listen(input, "focus", function () {
     						if (is_function(/*onFocus*/ ctx[5])) /*onFocus*/ ctx[5].apply(this, arguments);
     					}),
     					listen(input, "blur", function () {
     						if (is_function(/*onBlur*/ ctx[6])) /*onBlur*/ ctx[6].apply(this, arguments);
     					}),
-    					action_destroyer(/*typeAction*/ ctx[8].call(null, input))
+    					action_destroyer(/*typeAction*/ ctx[9].call(null, input))
     				];
 
     				mounted = true;
@@ -677,6 +737,10 @@
     				set_input_value(input, /*value*/ ctx[0]);
     			}
 
+    			if (dirty & /*border*/ 256) {
+    				toggle_class(input, "border", /*border*/ ctx[8]);
+    			}
+
     			if (dirty & /*error*/ 16) {
     				toggle_class(input, "error", /*error*/ ctx[4] !== null);
     			}
@@ -689,7 +753,7 @@
     				if (if_block1) {
     					if_block1.p(ctx, dirty);
     				} else {
-    					if_block1 = create_if_block$3(ctx);
+    					if_block1 = create_if_block$4(ctx);
     					if_block1.c();
     					if_block1.m(div, null);
     				}
@@ -710,7 +774,7 @@
     	};
     }
 
-    function instance$9($$self, $$props, $$invalidate) {
+    function instance$e($$self, $$props, $$invalidate) {
     	var { TextType } = $$props;
 
     	(function (TextType) {
@@ -722,12 +786,13 @@
     	let { id } = $$props;
     	let { type } = $$props;
     	let { label = null } = $$props;
-    	let { placeholder = null } = $$props;
+    	let { placeholder } = $$props;
     	let { error = null } = $$props;
     	let { value = null } = $$props;
     	let { onFocus } = $$props;
     	let { onBlur } = $$props;
     	let { readonly = false } = $$props;
+    	let { border = false } = $$props;
 
     	function typeAction(node) {
     		node.type = type;
@@ -743,9 +808,9 @@
     	}
 
     	$$self.$$set = $$props => {
-    		if ("TextType" in $$props) $$invalidate(9, TextType = $$props.TextType);
+    		if ("TextType" in $$props) $$invalidate(10, TextType = $$props.TextType);
     		if ("id" in $$props) $$invalidate(1, id = $$props.id);
-    		if ("type" in $$props) $$invalidate(10, type = $$props.type);
+    		if ("type" in $$props) $$invalidate(11, type = $$props.type);
     		if ("label" in $$props) $$invalidate(2, label = $$props.label);
     		if ("placeholder" in $$props) $$invalidate(3, placeholder = $$props.placeholder);
     		if ("error" in $$props) $$invalidate(4, error = $$props.error);
@@ -753,6 +818,7 @@
     		if ("onFocus" in $$props) $$invalidate(5, onFocus = $$props.onFocus);
     		if ("onBlur" in $$props) $$invalidate(6, onBlur = $$props.onBlur);
     		if ("readonly" in $$props) $$invalidate(7, readonly = $$props.readonly);
+    		if ("border" in $$props) $$invalidate(8, border = $$props.border);
     	};
 
     	return [
@@ -764,6 +830,7 @@
     		onFocus,
     		onBlur,
     		readonly,
+    		border,
     		typeAction,
     		TextType,
     		type,
@@ -776,24 +843,25 @@
     	constructor(options) {
     		super();
 
-    		init(this, options, instance$9, create_fragment$9, safe_not_equal, {
-    			TextType: 9,
+    		init(this, options, instance$e, create_fragment$f, safe_not_equal, {
+    			TextType: 10,
     			id: 1,
-    			type: 10,
+    			type: 11,
     			label: 2,
     			placeholder: 3,
     			error: 4,
     			value: 0,
     			onFocus: 5,
     			onBlur: 6,
-    			readonly: 7
+    			readonly: 7,
+    			border: 8
     		});
     	}
     }
 
     /* src/RadioButton.svelte generated by Svelte v3.38.2 */
 
-    function create_fragment$8(ctx) {
+    function create_fragment$e(ctx) {
     	let label_1;
     	let input;
     	let t0;
@@ -889,7 +957,7 @@
     	};
     }
 
-    function instance$8($$self, $$props, $$invalidate) {
+    function instance$d($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	const label = "";
     	let { value } = $$props;
@@ -940,7 +1008,7 @@
     	constructor(options) {
     		super();
 
-    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {
+    		init(this, options, instance$d, create_fragment$e, safe_not_equal, {
     			label: 5,
     			value: 2,
     			group: 0,
@@ -985,7 +1053,7 @@
     }
 
     // (15:2) {#if error}
-    function create_if_block$2(ctx) {
+    function create_if_block$3(ctx) {
     	let p;
     	let t;
 
@@ -1009,7 +1077,7 @@
     	};
     }
 
-    function create_fragment$7(ctx) {
+    function create_fragment$d(ctx) {
     	let div;
     	let t0;
     	let input;
@@ -1033,7 +1101,7 @@
     		input_data = assign(input_data, input_levels[i]);
     	}
 
-    	let if_block1 = /*error*/ ctx[4] && create_if_block$2(ctx);
+    	let if_block1 = /*error*/ ctx[4] && create_if_block$3(ctx);
 
     	return {
     		c() {
@@ -1095,7 +1163,7 @@
     				if (if_block1) {
     					if_block1.p(ctx, dirty);
     				} else {
-    					if_block1 = create_if_block$2(ctx);
+    					if_block1 = create_if_block$3(ctx);
     					if_block1.c();
     					if_block1.m(div, null);
     				}
@@ -1116,7 +1184,7 @@
     	};
     }
 
-    function instance$7($$self, $$props, $$invalidate) {
+    function instance$c($$self, $$props, $$invalidate) {
     	const omit_props_names = ["id","label","placeholder","error","value","min","max"];
     	let $$restProps = compute_rest_props($$props, omit_props_names);
     	let { id } = $$props;
@@ -1166,7 +1234,7 @@
     	constructor(options) {
     		super();
 
-    		init(this, options, instance$7, create_fragment$7, safe_not_equal, {
+    		init(this, options, instance$c, create_fragment$d, safe_not_equal, {
     			id: 1,
     			label: 2,
     			placeholder: 3,
@@ -3574,7 +3642,7 @@
 
     /* src/Icon.svelte generated by Svelte v3.38.2 */
 
-    function create_if_block$1(ctx) {
+    function create_if_block$2(ctx) {
     	let svg;
     	let g;
     	let raw_value = /*icon*/ ctx[3].contents + "";
@@ -3620,9 +3688,9 @@
     	};
     }
 
-    function create_fragment$6(ctx) {
+    function create_fragment$c(ctx) {
     	let if_block_anchor;
-    	let if_block = /*icon*/ ctx[3] && create_if_block$1(ctx);
+    	let if_block = /*icon*/ ctx[3] && create_if_block$2(ctx);
 
     	return {
     		c() {
@@ -3638,7 +3706,7 @@
     				if (if_block) {
     					if_block.p(ctx, dirty);
     				} else {
-    					if_block = create_if_block$1(ctx);
+    					if_block = create_if_block$2(ctx);
     					if_block.c();
     					if_block.m(if_block_anchor.parentNode, if_block_anchor);
     				}
@@ -3656,7 +3724,7 @@
     	};
     }
 
-    function instance$6($$self, $$props, $$invalidate) {
+    function instance$b($$self, $$props, $$invalidate) {
     	let { name } = $$props;
     	let { stroke } = $$props;
     	let { strokeWidth } = $$props;
@@ -3690,7 +3758,7 @@
     	constructor(options) {
     		super();
 
-    		init(this, options, instance$6, create_fragment$6, safe_not_equal, {
+    		init(this, options, instance$b, create_fragment$c, safe_not_equal, {
     			name: 4,
     			stroke: 5,
     			strokeWidth: 6,
@@ -3701,9 +3769,115 @@
     	}
     }
 
+    /* src/IconIrocoLogo.svelte generated by Svelte v3.38.2 */
+
+    function create_fragment$b(ctx) {
+    	let svg;
+    	let path0;
+    	let path1;
+
+    	return {
+    		c() {
+    			svg = svg_element("svg");
+    			path0 = svg_element("path");
+    			path1 = svg_element("path");
+    			attr(path0, "d", "M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z");
+    			attr(path0, "fill", "white");
+    			attr(path1, "d", "M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z");
+    			attr(path1, "fill", "#00D692");
+    			attr(svg, "width", /*width*/ ctx[0]);
+    			attr(svg, "height", /*height*/ ctx[1]);
+    			attr(svg, "viewBox", "0 0 54 53");
+    			attr(svg, "fill", "none");
+    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+    		},
+    		m(target, anchor) {
+    			insert(target, svg, anchor);
+    			append(svg, path0);
+    			append(svg, path1);
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*width*/ 1) {
+    				attr(svg, "width", /*width*/ ctx[0]);
+    			}
+
+    			if (dirty & /*height*/ 2) {
+    				attr(svg, "height", /*height*/ ctx[1]);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(svg);
+    		}
+    	};
+    }
+
+    function instance$a($$self, $$props, $$invalidate) {
+    	let { width = "5rem" } = $$props;
+    	let { height = "5rem" } = $$props;
+
+    	$$self.$$set = $$props => {
+    		if ("width" in $$props) $$invalidate(0, width = $$props.width);
+    		if ("height" in $$props) $$invalidate(1, height = $$props.height);
+    	};
+
+    	return [width, height];
+    }
+
+    class IconIrocoLogo extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		init(this, options, instance$a, create_fragment$b, safe_not_equal, { width: 0, height: 1 });
+    	}
+    }
+
+    /* src/Loader.svelte generated by Svelte v3.38.2 */
+
+    function create_fragment$a(ctx) {
+    	let div;
+    	let iconirocologo;
+    	let current;
+    	iconirocologo = new IconIrocoLogo({ props: { width: "4em", height: "4em" } });
+
+    	return {
+    		c() {
+    			div = element("div");
+    			create_component(iconirocologo.$$.fragment);
+    			attr(div, "class", "rotate linear infinite svelte-1dns1yx");
+    		},
+    		m(target, anchor) {
+    			insert(target, div, anchor);
+    			mount_component(iconirocologo, div, null);
+    			current = true;
+    		},
+    		p: noop,
+    		i(local) {
+    			if (current) return;
+    			transition_in(iconirocologo.$$.fragment, local);
+    			current = true;
+    		},
+    		o(local) {
+    			transition_out(iconirocologo.$$.fragment, local);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) detach(div);
+    			destroy_component(iconirocologo);
+    		}
+    	};
+    }
+
+    class Loader extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		init(this, options, null, create_fragment$a, safe_not_equal, {});
+    	}
+    }
+
     /* src/IconInfo.svelte generated by Svelte v3.38.2 */
 
-    function create_fragment$5(ctx) {
+    function create_fragment$9(ctx) {
     	let svg;
     	let path;
 
@@ -3744,7 +3918,7 @@
     	};
     }
 
-    function instance$5($$self, $$props, $$invalidate) {
+    function instance$9($$self, $$props, $$invalidate) {
     	let { width = "5rem" } = $$props;
     	let { height = "5rem" } = $$props;
 
@@ -3759,13 +3933,13 @@
     class IconInfo extends SvelteComponent {
     	constructor(options) {
     		super();
-    		init(this, options, instance$5, create_fragment$5, safe_not_equal, { width: 0, height: 1 });
+    		init(this, options, instance$9, create_fragment$9, safe_not_equal, { width: 0, height: 1 });
     	}
     }
 
     /* src/IconClose.svelte generated by Svelte v3.38.2 */
 
-    function create_fragment$4(ctx) {
+    function create_fragment$8(ctx) {
     	let svg;
     	let path;
 
@@ -3805,7 +3979,7 @@
     	};
     }
 
-    function instance$4($$self, $$props, $$invalidate) {
+    function instance$8($$self, $$props, $$invalidate) {
     	let { width = "5rem" } = $$props;
     	let { height = "5rem" } = $$props;
 
@@ -3820,27 +3994,32 @@
     class IconClose extends SvelteComponent {
     	constructor(options) {
     		super();
-    		init(this, options, instance$4, create_fragment$4, safe_not_equal, { width: 0, height: 1 });
+    		init(this, options, instance$8, create_fragment$8, safe_not_equal, { width: 0, height: 1 });
     	}
     }
 
     /* src/SideBar.svelte generated by Svelte v3.38.2 */
 
-    function get_each_context(ctx, list, i) {
+    function get_each_context$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[2] = list[i].destination;
-    	child_ctx[3] = list[i].name;
+    	child_ctx[6] = list[i];
     	return child_ctx;
     }
 
-    // (12:2) {#each navigationItems as { destination, name }}
-    function create_each_block(ctx) {
+    // (22:2) {#each navigationItems as item}
+    function create_each_block$1(ctx) {
     	let li;
     	let a;
-    	let t0_value = /*name*/ ctx[3] + "";
+    	let t0_value = /*item*/ ctx[6].name + "";
     	let t0;
     	let a_href_value;
     	let t1;
+    	let mounted;
+    	let dispose;
+
+    	function click_handler_1() {
+    		return /*click_handler_1*/ ctx[4](/*item*/ ctx[6]);
+    	}
 
     	return {
     		c() {
@@ -3848,30 +4027,49 @@
     			a = element("a");
     			t0 = text(t0_value);
     			t1 = space();
-    			attr(a, "href", a_href_value = /*destination*/ ctx[2]);
-    			attr(a, "class", "svelte-1rnpdw0");
-    			attr(li, "class", "account__sidebar__item svelte-1rnpdw0");
+
+    			attr(a, "href", a_href_value = typeof /*item*/ ctx[6].hrefOrCallback === "string"
+    			? /*item*/ ctx[6].hrefOrCallback
+    			: "#");
+
+    			attr(a, "class", "svelte-jkys2k");
+    			attr(li, "class", "account__sidebar__item svelte-jkys2k");
+    			toggle_class(li, "active", /*active*/ ctx[1] === /*item*/ ctx[6].name);
     		},
     		m(target, anchor) {
     			insert(target, li, anchor);
     			append(li, a);
     			append(a, t0);
     			append(li, t1);
+
+    			if (!mounted) {
+    				dispose = listen(a, "click", click_handler_1);
+    				mounted = true;
+    			}
     		},
-    		p(ctx, dirty) {
-    			if (dirty & /*navigationItems*/ 1 && t0_value !== (t0_value = /*name*/ ctx[3] + "")) set_data(t0, t0_value);
+    		p(new_ctx, dirty) {
+    			ctx = new_ctx;
+    			if (dirty & /*navigationItems*/ 1 && t0_value !== (t0_value = /*item*/ ctx[6].name + "")) set_data(t0, t0_value);
 
-    			if (dirty & /*navigationItems*/ 1 && a_href_value !== (a_href_value = /*destination*/ ctx[2])) {
+    			if (dirty & /*navigationItems*/ 1 && a_href_value !== (a_href_value = typeof /*item*/ ctx[6].hrefOrCallback === "string"
+    			? /*item*/ ctx[6].hrefOrCallback
+    			: "#")) {
     				attr(a, "href", a_href_value);
     			}
+
+    			if (dirty & /*active, navigationItems*/ 3) {
+    				toggle_class(li, "active", /*active*/ ctx[1] === /*item*/ ctx[6].name);
+    			}
     		},
     		d(detaching) {
     			if (detaching) detach(li);
+    			mounted = false;
+    			dispose();
     		}
     	};
     }
 
-    function create_fragment$3(ctx) {
+    function create_fragment$7(ctx) {
     	let nav;
     	let button;
     	let iconclose;
@@ -3885,7 +4083,7 @@
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+    		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
     	}
 
     	return {
@@ -3900,10 +4098,10 @@
     				each_blocks[i].c();
     			}
 
-    			attr(button, "class", "account__sidebar__close svelte-1rnpdw0");
-    			attr(ul, "class", "account__sidebar__item_container svelte-1rnpdw0");
+    			attr(button, "class", "account__sidebar__close svelte-jkys2k");
+    			attr(ul, "class", "account__sidebar__item_container svelte-jkys2k");
     			attr(nav, "data-testid", "sidebar");
-    			attr(nav, "class", "account__sidebar svelte-1rnpdw0");
+    			attr(nav, "class", "account__sidebar svelte-jkys2k");
     		},
     		m(target, anchor) {
     			insert(target, nav, anchor);
@@ -3919,22 +4117,22 @@
     			current = true;
 
     			if (!mounted) {
-    				dispose = listen(button, "click", /*click_handler*/ ctx[1]);
+    				dispose = listen(button, "click", /*click_handler*/ ctx[3]);
     				mounted = true;
     			}
     		},
     		p(ctx, [dirty]) {
-    			if (dirty & /*navigationItems*/ 1) {
+    			if (dirty & /*active, navigationItems, handleClickLink*/ 7) {
     				each_value = /*navigationItems*/ ctx[0];
     				let i;
 
     				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context(ctx, each_value, i);
+    					const child_ctx = get_each_context$1(ctx, each_value, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(child_ctx, dirty);
     					} else {
-    						each_blocks[i] = create_each_block(child_ctx);
+    						each_blocks[i] = create_each_block$1(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(ul, null);
     					}
@@ -3966,31 +4164,45 @@
     	};
     }
 
-    function instance$3($$self, $$props, $$invalidate) {
+    function instance$7($$self, $$props, $$invalidate) {
     	
     	let { navigationItems } = $$props;
+    	let active;
+    	const dispatch = createEventDispatcher();
+
+    	const handleClickLink = menuItem => {
+    		$$invalidate(1, active = menuItem.name);
+
+    		if (typeof menuItem.hrefOrCallback === "function") {
+    			menuItem.hrefOrCallback();
+    		}
+
+    		dispatch("click_link");
+    	};
 
     	function click_handler(event) {
     		bubble($$self, event);
     	}
 
+    	const click_handler_1 = item => handleClickLink(item);
+
     	$$self.$$set = $$props => {
     		if ("navigationItems" in $$props) $$invalidate(0, navigationItems = $$props.navigationItems);
     	};
 
-    	return [navigationItems, click_handler];
+    	return [navigationItems, active, handleClickLink, click_handler, click_handler_1];
     }
 
     class SideBar extends SvelteComponent {
     	constructor(options) {
     		super();
-    		init(this, options, instance$3, create_fragment$3, safe_not_equal, { navigationItems: 0 });
+    		init(this, options, instance$7, create_fragment$7, safe_not_equal, { navigationItems: 0 });
     	}
     }
 
     /* src/IconBurger.svelte generated by Svelte v3.38.2 */
 
-    function create_fragment$2(ctx) {
+    function create_fragment$6(ctx) {
     	let svg;
     	let path;
 
@@ -4030,7 +4242,7 @@
     	};
     }
 
-    function instance$2($$self, $$props, $$invalidate) {
+    function instance$6($$self, $$props, $$invalidate) {
     	let { width = "5rem" } = $$props;
     	let { height = "5rem" } = $$props;
 
@@ -4045,76 +4257,13 @@
     class IconBurger extends SvelteComponent {
     	constructor(options) {
     		super();
-    		init(this, options, instance$2, create_fragment$2, safe_not_equal, { width: 0, height: 1 });
-    	}
-    }
-
-    /* src/IconIrocoLogo.svelte generated by Svelte v3.38.2 */
-
-    function create_fragment$1(ctx) {
-    	let svg;
-    	let path0;
-    	let path1;
-
-    	return {
-    		c() {
-    			svg = svg_element("svg");
-    			path0 = svg_element("path");
-    			path1 = svg_element("path");
-    			attr(path0, "d", "M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z");
-    			attr(path0, "fill", "white");
-    			attr(path1, "d", "M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z");
-    			attr(path1, "fill", "#00D692");
-    			attr(svg, "width", /*width*/ ctx[0]);
-    			attr(svg, "height", /*height*/ ctx[1]);
-    			attr(svg, "viewBox", "0 0 54 53");
-    			attr(svg, "fill", "none");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-    		},
-    		m(target, anchor) {
-    			insert(target, svg, anchor);
-    			append(svg, path0);
-    			append(svg, path1);
-    		},
-    		p(ctx, [dirty]) {
-    			if (dirty & /*width*/ 1) {
-    				attr(svg, "width", /*width*/ ctx[0]);
-    			}
-
-    			if (dirty & /*height*/ 2) {
-    				attr(svg, "height", /*height*/ ctx[1]);
-    			}
-    		},
-    		i: noop,
-    		o: noop,
-    		d(detaching) {
-    			if (detaching) detach(svg);
-    		}
-    	};
-    }
-
-    function instance$1($$self, $$props, $$invalidate) {
-    	let { width = "5rem" } = $$props;
-    	let { height = "5rem" } = $$props;
-
-    	$$self.$$set = $$props => {
-    		if ("width" in $$props) $$invalidate(0, width = $$props.width);
-    		if ("height" in $$props) $$invalidate(1, height = $$props.height);
-    	};
-
-    	return [width, height];
-    }
-
-    class IconIrocoLogo extends SvelteComponent {
-    	constructor(options) {
-    		super();
-    		init(this, options, instance$1, create_fragment$1, safe_not_equal, { width: 0, height: 1 });
+    		init(this, options, instance$6, create_fragment$6, safe_not_equal, { width: 0, height: 1 });
     	}
     }
 
     /* src/Navigation.svelte generated by Svelte v3.38.2 */
 
-    function create_if_block(ctx) {
+    function create_if_block$1(ctx) {
     	let sidebar;
     	let current;
 
@@ -4124,7 +4273,8 @@
     			}
     		});
 
-    	sidebar.$on("click", /*click_handler_1*/ ctx[4]);
+    	sidebar.$on("click_link", /*click_link_handler*/ ctx[4]);
+    	sidebar.$on("click", /*click_handler_1*/ ctx[5]);
 
     	return {
     		c() {
@@ -4154,7 +4304,7 @@
     	};
     }
 
-    function create_fragment(ctx) {
+    function create_fragment$5(ctx) {
     	let div1;
     	let div0;
     	let iconirocologo0;
@@ -4179,7 +4329,7 @@
     	let dispose;
     	iconirocologo0 = new IconIrocoLogo({ props: { width: "3em", height: "3em" } });
     	iconburger = new IconBurger({ props: { width: "3em", height: "3em" } });
-    	let if_block = /*showMenu*/ ctx[2] && create_if_block(ctx);
+    	let if_block = /*showMenu*/ ctx[2] && create_if_block$1(ctx);
     	iconirocologo1 = new IconIrocoLogo({ props: { width: "3em", height: "3em" } });
 
     	sidebar = new SideBar({
@@ -4210,13 +4360,13 @@
     			t6 = text(/*title*/ ctx[1]);
     			t7 = space();
     			create_component(sidebar.$$.fragment);
-    			attr(h10, "class", "svelte-ff4jq1");
-    			attr(div0, "class", "account__navigation--mobile__title-container svelte-ff4jq1");
-    			attr(button, "class", "account__navigation--mobile__button svelte-ff4jq1");
-    			attr(div1, "class", "account__navigation--mobile svelte-ff4jq1");
-    			attr(h11, "class", "svelte-ff4jq1");
-    			attr(div2, "class", "account__navigation__title-container svelte-ff4jq1");
-    			attr(div3, "class", "account__navigation svelte-ff4jq1");
+    			attr(h10, "class", "svelte-1uu9ytm");
+    			attr(div0, "class", "account__navigation--mobile__title-container svelte-1uu9ytm");
+    			attr(button, "class", "account__navigation--mobile__button svelte-1uu9ytm");
+    			attr(div1, "class", "account__navigation--mobile svelte-1uu9ytm");
+    			attr(h11, "class", "svelte-1uu9ytm");
+    			attr(div2, "class", "account__navigation__title-container svelte-1uu9ytm");
+    			attr(div3, "class", "account__navigation svelte-1uu9ytm");
     		},
     		m(target, anchor) {
     			insert(target, div1, anchor);
@@ -4257,7 +4407,7 @@
     						transition_in(if_block, 1);
     					}
     				} else {
-    					if_block = create_if_block(ctx);
+    					if_block = create_if_block$1(ctx);
     					if_block.c();
     					transition_in(if_block, 1);
     					if_block.m(div1, null);
@@ -4309,12 +4459,13 @@
     	};
     }
 
-    function instance($$self, $$props, $$invalidate) {
+    function instance$5($$self, $$props, $$invalidate) {
     	
     	let { navigationItems } = $$props;
     	let { title } = $$props;
     	let showMenu = false;
     	const click_handler = () => $$invalidate(2, showMenu = true);
+    	const click_link_handler = () => $$invalidate(2, showMenu = false);
     	const click_handler_1 = () => $$invalidate(2, showMenu = false);
 
     	$$self.$$set = $$props => {
@@ -4322,19 +4473,761 @@
     		if ("title" in $$props) $$invalidate(1, title = $$props.title);
     	};
 
-    	return [navigationItems, title, showMenu, click_handler, click_handler_1];
+    	return [
+    		navigationItems,
+    		title,
+    		showMenu,
+    		click_handler,
+    		click_link_handler,
+    		click_handler_1
+    	];
     }
 
     class Navigation extends SvelteComponent {
     	constructor(options) {
     		super();
-    		init(this, options, instance, create_fragment, safe_not_equal, { navigationItems: 0, title: 1 });
+    		init(this, options, instance$5, create_fragment$5, safe_not_equal, { navigationItems: 0, title: 1 });
+    	}
+    }
+
+    /* src/DataTable.svelte generated by Svelte v3.38.2 */
+
+    function get_each_context(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[3] = list[i];
+    	return child_ctx;
+    }
+
+    function get_each_context_1(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[6] = list[i].key;
+    	child_ctx[7] = list[i].renderComponent;
+    	return child_ctx;
+    }
+
+    function get_each_context_2(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[10] = list[i];
+    	return child_ctx;
+    }
+
+    // (9:3) {#each collumns as collumn}
+    function create_each_block_2(ctx) {
+    	let th;
+    	let t0_value = /*collumn*/ ctx[10].title + "";
+    	let t0;
+    	let t1;
+
+    	return {
+    		c() {
+    			th = element("th");
+    			t0 = text(t0_value);
+    			t1 = space();
+    			attr(th, "class", "data-table__header__cell svelte-1ju5y8t");
+    		},
+    		m(target, anchor) {
+    			insert(target, th, anchor);
+    			append(th, t0);
+    			append(th, t1);
+    		},
+    		p(ctx, dirty) {
+    			if (dirty & /*collumns*/ 2 && t0_value !== (t0_value = /*collumn*/ ctx[10].title + "")) set_data(t0, t0_value);
+    		},
+    		d(detaching) {
+    			if (detaching) detach(th);
+    		}
+    	};
+    }
+
+    // (27:6) {:else}
+    function create_else_block(ctx) {
+    	let t_value = /*row*/ ctx[3][/*key*/ ctx[6]] + "";
+    	let t;
+
+    	return {
+    		c() {
+    			t = text(t_value);
+    		},
+    		m(target, anchor) {
+    			insert(target, t, anchor);
+    		},
+    		p(ctx, dirty) {
+    			if (dirty & /*rows, collumns*/ 3 && t_value !== (t_value = /*row*/ ctx[3][/*key*/ ctx[6]] + "")) set_data(t, t_value);
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(t);
+    		}
+    	};
+    }
+
+    // (22:6) {#if renderComponent}
+    function create_if_block(ctx) {
+    	let switch_instance;
+    	let switch_instance_anchor;
+    	let current;
+
+    	function click_handler() {
+    		return /*click_handler*/ ctx[2](/*renderComponent*/ ctx[7], /*row*/ ctx[3]);
+    	}
+
+    	var switch_value = /*renderComponent*/ ctx[7].component;
+
+    	function switch_props(ctx) {
+    		return {};
+    	}
+
+    	if (switch_value) {
+    		switch_instance = new switch_value(switch_props());
+    		switch_instance.$on("click", click_handler);
+    	}
+
+    	return {
+    		c() {
+    			if (switch_instance) create_component(switch_instance.$$.fragment);
+    			switch_instance_anchor = empty();
+    		},
+    		m(target, anchor) {
+    			if (switch_instance) {
+    				mount_component(switch_instance, target, anchor);
+    			}
+
+    			insert(target, switch_instance_anchor, anchor);
+    			current = true;
+    		},
+    		p(new_ctx, dirty) {
+    			ctx = new_ctx;
+
+    			if (switch_value !== (switch_value = /*renderComponent*/ ctx[7].component)) {
+    				if (switch_instance) {
+    					group_outros();
+    					const old_component = switch_instance;
+
+    					transition_out(old_component.$$.fragment, 1, 0, () => {
+    						destroy_component(old_component, 1);
+    					});
+
+    					check_outros();
+    				}
+
+    				if (switch_value) {
+    					switch_instance = new switch_value(switch_props());
+    					switch_instance.$on("click", click_handler);
+    					create_component(switch_instance.$$.fragment);
+    					transition_in(switch_instance.$$.fragment, 1);
+    					mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
+    				} else {
+    					switch_instance = null;
+    				}
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			if (switch_instance) transition_in(switch_instance.$$.fragment, local);
+    			current = true;
+    		},
+    		o(local) {
+    			if (switch_instance) transition_out(switch_instance.$$.fragment, local);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) detach(switch_instance_anchor);
+    			if (switch_instance) destroy_component(switch_instance, detaching);
+    		}
+    	};
+    }
+
+    // (20:4) {#each collumns as { key, renderComponent }}
+    function create_each_block_1(ctx) {
+    	let td;
+    	let current_block_type_index;
+    	let if_block;
+    	let current;
+    	const if_block_creators = [create_if_block, create_else_block];
+    	const if_blocks = [];
+
+    	function select_block_type(ctx, dirty) {
+    		if (/*renderComponent*/ ctx[7]) return 0;
+    		return 1;
+    	}
+
+    	current_block_type_index = select_block_type(ctx);
+    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+
+    	return {
+    		c() {
+    			td = element("td");
+    			if_block.c();
+    			attr(td, "class", "data-table__body__cell svelte-1ju5y8t");
+    		},
+    		m(target, anchor) {
+    			insert(target, td, anchor);
+    			if_blocks[current_block_type_index].m(td, null);
+    			current = true;
+    		},
+    		p(ctx, dirty) {
+    			let previous_block_index = current_block_type_index;
+    			current_block_type_index = select_block_type(ctx);
+
+    			if (current_block_type_index === previous_block_index) {
+    				if_blocks[current_block_type_index].p(ctx, dirty);
+    			} else {
+    				group_outros();
+
+    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+    					if_blocks[previous_block_index] = null;
+    				});
+
+    				check_outros();
+    				if_block = if_blocks[current_block_type_index];
+
+    				if (!if_block) {
+    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    					if_block.c();
+    				} else {
+    					if_block.p(ctx, dirty);
+    				}
+
+    				transition_in(if_block, 1);
+    				if_block.m(td, null);
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			transition_in(if_block);
+    			current = true;
+    		},
+    		o(local) {
+    			transition_out(if_block);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) detach(td);
+    			if_blocks[current_block_type_index].d();
+    		}
+    	};
+    }
+
+    // (18:2) {#each rows as row}
+    function create_each_block(ctx) {
+    	let tr;
+    	let t;
+    	let current;
+    	let each_value_1 = /*collumns*/ ctx[1];
+    	let each_blocks = [];
+
+    	for (let i = 0; i < each_value_1.length; i += 1) {
+    		each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+    	}
+
+    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+    		each_blocks[i] = null;
+    	});
+
+    	return {
+    		c() {
+    			tr = element("tr");
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			t = space();
+    			attr(tr, "class", "data-table__body__row");
+    		},
+    		m(target, anchor) {
+    			insert(target, tr, anchor);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].m(tr, null);
+    			}
+
+    			append(tr, t);
+    			current = true;
+    		},
+    		p(ctx, dirty) {
+    			if (dirty & /*collumns, rows*/ 3) {
+    				each_value_1 = /*collumns*/ ctx[1];
+    				let i;
+
+    				for (i = 0; i < each_value_1.length; i += 1) {
+    					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+
+    					if (each_blocks[i]) {
+    						each_blocks[i].p(child_ctx, dirty);
+    						transition_in(each_blocks[i], 1);
+    					} else {
+    						each_blocks[i] = create_each_block_1(child_ctx);
+    						each_blocks[i].c();
+    						transition_in(each_blocks[i], 1);
+    						each_blocks[i].m(tr, t);
+    					}
+    				}
+
+    				group_outros();
+
+    				for (i = each_value_1.length; i < each_blocks.length; i += 1) {
+    					out(i);
+    				}
+
+    				check_outros();
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+
+    			for (let i = 0; i < each_value_1.length; i += 1) {
+    				transition_in(each_blocks[i]);
+    			}
+
+    			current = true;
+    		},
+    		o(local) {
+    			each_blocks = each_blocks.filter(Boolean);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				transition_out(each_blocks[i]);
+    			}
+
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) detach(tr);
+    			destroy_each(each_blocks, detaching);
+    		}
+    	};
+    }
+
+    function create_fragment$4(ctx) {
+    	let table;
+    	let thead;
+    	let tr;
+    	let t;
+    	let tbody;
+    	let current;
+    	let each_value_2 = /*collumns*/ ctx[1];
+    	let each_blocks_1 = [];
+
+    	for (let i = 0; i < each_value_2.length; i += 1) {
+    		each_blocks_1[i] = create_each_block_2(get_each_context_2(ctx, each_value_2, i));
+    	}
+
+    	let each_value = /*rows*/ ctx[0];
+    	let each_blocks = [];
+
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+    	}
+
+    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+    		each_blocks[i] = null;
+    	});
+
+    	return {
+    		c() {
+    			table = element("table");
+    			thead = element("thead");
+    			tr = element("tr");
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				each_blocks_1[i].c();
+    			}
+
+    			t = space();
+    			tbody = element("tbody");
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			attr(thead, "class", "data-table__header svelte-1ju5y8t");
+    			attr(tbody, "class", "data-table__body");
+    			attr(table, "class", "data-table svelte-1ju5y8t");
+    		},
+    		m(target, anchor) {
+    			insert(target, table, anchor);
+    			append(table, thead);
+    			append(thead, tr);
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				each_blocks_1[i].m(tr, null);
+    			}
+
+    			append(table, t);
+    			append(table, tbody);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].m(tbody, null);
+    			}
+
+    			current = true;
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*collumns*/ 2) {
+    				each_value_2 = /*collumns*/ ctx[1];
+    				let i;
+
+    				for (i = 0; i < each_value_2.length; i += 1) {
+    					const child_ctx = get_each_context_2(ctx, each_value_2, i);
+
+    					if (each_blocks_1[i]) {
+    						each_blocks_1[i].p(child_ctx, dirty);
+    					} else {
+    						each_blocks_1[i] = create_each_block_2(child_ctx);
+    						each_blocks_1[i].c();
+    						each_blocks_1[i].m(tr, null);
+    					}
+    				}
+
+    				for (; i < each_blocks_1.length; i += 1) {
+    					each_blocks_1[i].d(1);
+    				}
+
+    				each_blocks_1.length = each_value_2.length;
+    			}
+
+    			if (dirty & /*collumns, rows*/ 3) {
+    				each_value = /*rows*/ ctx[0];
+    				let i;
+
+    				for (i = 0; i < each_value.length; i += 1) {
+    					const child_ctx = get_each_context(ctx, each_value, i);
+
+    					if (each_blocks[i]) {
+    						each_blocks[i].p(child_ctx, dirty);
+    						transition_in(each_blocks[i], 1);
+    					} else {
+    						each_blocks[i] = create_each_block(child_ctx);
+    						each_blocks[i].c();
+    						transition_in(each_blocks[i], 1);
+    						each_blocks[i].m(tbody, null);
+    					}
+    				}
+
+    				group_outros();
+
+    				for (i = each_value.length; i < each_blocks.length; i += 1) {
+    					out(i);
+    				}
+
+    				check_outros();
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+
+    			for (let i = 0; i < each_value.length; i += 1) {
+    				transition_in(each_blocks[i]);
+    			}
+
+    			current = true;
+    		},
+    		o(local) {
+    			each_blocks = each_blocks.filter(Boolean);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				transition_out(each_blocks[i]);
+    			}
+
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) detach(table);
+    			destroy_each(each_blocks_1, detaching);
+    			destroy_each(each_blocks, detaching);
+    		}
+    	};
+    }
+
+    function instance$4($$self, $$props, $$invalidate) {
+    	
+    	let { rows } = $$props;
+    	let { collumns } = $$props;
+    	const click_handler = (renderComponent, row) => renderComponent.props.onclick(row);
+
+    	$$self.$$set = $$props => {
+    		if ("rows" in $$props) $$invalidate(0, rows = $$props.rows);
+    		if ("collumns" in $$props) $$invalidate(1, collumns = $$props.collumns);
+    	};
+
+    	return [rows, collumns, click_handler];
+    }
+
+    class DataTable extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		init(this, options, instance$4, create_fragment$4, safe_not_equal, { rows: 0, collumns: 1 });
+    	}
+    }
+
+    /* src/IconMoreSign.svelte generated by Svelte v3.38.2 */
+
+    function create_fragment$3(ctx) {
+    	let svg;
+    	let path;
+
+    	return {
+    		c() {
+    			svg = svg_element("svg");
+    			path = svg_element("path");
+    			attr(path, "stroke-linecap", "round");
+    			attr(path, "stroke-linejoin", "round");
+    			attr(path, "stroke-width", "2");
+    			attr(path, "d", "M12 4v16m8-8H4");
+    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+    			attr(svg, "height", /*height*/ ctx[1]);
+    			attr(svg, "width", /*width*/ ctx[0]);
+    			attr(svg, "fill", "none");
+    			attr(svg, "viewBox", "0 0 24 24");
+    			attr(svg, "stroke", "currentColor");
+    		},
+    		m(target, anchor) {
+    			insert(target, svg, anchor);
+    			append(svg, path);
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*height*/ 2) {
+    				attr(svg, "height", /*height*/ ctx[1]);
+    			}
+
+    			if (dirty & /*width*/ 1) {
+    				attr(svg, "width", /*width*/ ctx[0]);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(svg);
+    		}
+    	};
+    }
+
+    function instance$3($$self, $$props, $$invalidate) {
+    	let { width = "3rem" } = $$props;
+    	let { height = "3rem" } = $$props;
+
+    	$$self.$$set = $$props => {
+    		if ("width" in $$props) $$invalidate(0, width = $$props.width);
+    		if ("height" in $$props) $$invalidate(1, height = $$props.height);
+    	};
+
+    	return [width, height];
+    }
+
+    class IconMoreSign extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		init(this, options, instance$3, create_fragment$3, safe_not_equal, { width: 0, height: 1 });
+    	}
+    }
+
+    /* src/IconFloppyDisk.svelte generated by Svelte v3.38.2 */
+
+    function create_fragment$2(ctx) {
+    	let svg;
+    	let path;
+
+    	return {
+    		c() {
+    			svg = svg_element("svg");
+    			path = svg_element("path");
+    			attr(path, "d", "M12 10.2857C12 10.7404 11.8194 11.1764 11.4979 11.4979C11.1764 11.8194 10.7404 12 10.2857 12L3.10371 12C2.64909 11.9999 2.21313 11.8192 1.89171 11.4977L0.502286 10.1083C0.180773 9.78687 9.70432e-05 9.35091 -2.71336e-07 8.89629L-8.99207e-07 1.71429C-9.38954e-07 1.25963 0.180611 0.823595 0.502102 0.502104C0.823593 0.180613 1.25963 9.38953e-07 1.71428 8.99206e-07L10.2857 1.49868e-07C10.7404 1.1012e-07 11.1764 0.180612 11.4979 0.502103C11.8194 0.823594 12 1.25963 12 1.71429L12 10.2857ZM10.2857 11.1429C10.513 11.1429 10.7311 11.0526 10.8918 10.8918C11.0526 10.7311 11.1429 10.513 11.1429 10.2857L11.1429 1.71429C11.1429 1.48696 11.0526 1.26894 10.8918 1.10819C10.7311 0.947449 10.513 0.857143 10.2857 0.857143L10.2857 4.71429C10.2857 5.05528 10.1503 5.3823 9.90914 5.62342C9.66802 5.86454 9.34099 6 9 6L3 6C2.65901 6 2.33198 5.86454 2.09086 5.62342C1.84974 5.38231 1.71429 5.05528 1.71429 4.71429L1.71428 0.857143C1.48696 0.857143 1.26894 0.94745 1.10819 1.1082C0.947448 1.26894 0.857142 1.48696 0.857142 1.71429L0.857142 8.89629C0.857191 9.1236 0.947529 9.34158 1.10829 9.50229L2.49771 10.8917C2.65842 11.0525 2.8764 11.1428 3.10371 11.1429L3.42857 11.1429L3.42857 9C3.42857 8.65901 3.56403 8.33198 3.80515 8.09086C4.04627 7.84975 4.37329 7.71429 4.71429 7.71429L8.14286 7.71429C8.48385 7.71429 8.81088 7.84974 9.05199 8.09086C9.29311 8.33198 9.42857 8.65901 9.42857 9L9.42857 11.1429L10.2857 11.1429ZM8.57143 11.1429L8.57143 9C8.57143 8.88634 8.52628 8.77733 8.4459 8.69695C8.36553 8.61658 8.25652 8.57143 8.14286 8.57143L4.71429 8.57143C4.60062 8.57143 4.49161 8.61658 4.41124 8.69695C4.33087 8.77733 4.28571 8.88634 4.28571 9L4.28571 11.1429L8.57143 11.1429ZM2.57143 0.857143L2.57143 4.71429C2.57143 4.82795 2.61658 4.93696 2.69695 5.01733C2.77733 5.09771 2.88633 5.14286 3 5.14286L9 5.14286C9.11366 5.14286 9.22267 5.0977 9.30305 5.01733C9.38342 4.93696 9.42857 4.82795 9.42857 4.71429L9.42857 0.857143L2.57143 0.857143Z");
+    			attr(path, "fill", /*fill*/ ctx[2]);
+    			attr(svg, "width", /*width*/ ctx[0]);
+    			attr(svg, "height", /*height*/ ctx[1]);
+    			attr(svg, "viewBox", "0 0 12 12");
+    			attr(svg, "fill", "none");
+    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+    		},
+    		m(target, anchor) {
+    			insert(target, svg, anchor);
+    			append(svg, path);
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*fill*/ 4) {
+    				attr(path, "fill", /*fill*/ ctx[2]);
+    			}
+
+    			if (dirty & /*width*/ 1) {
+    				attr(svg, "width", /*width*/ ctx[0]);
+    			}
+
+    			if (dirty & /*height*/ 2) {
+    				attr(svg, "height", /*height*/ ctx[1]);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(svg);
+    		}
+    	};
+    }
+
+    function instance$2($$self, $$props, $$invalidate) {
+    	let { width = "5rem" } = $$props;
+    	let { height = "5rem" } = $$props;
+    	let { fill = "currentColor" } = $$props;
+
+    	$$self.$$set = $$props => {
+    		if ("width" in $$props) $$invalidate(0, width = $$props.width);
+    		if ("height" in $$props) $$invalidate(1, height = $$props.height);
+    		if ("fill" in $$props) $$invalidate(2, fill = $$props.fill);
+    	};
+
+    	return [width, height, fill];
+    }
+
+    class IconFloppyDisk extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		init(this, options, instance$2, create_fragment$2, safe_not_equal, { width: 0, height: 1, fill: 2 });
+    	}
+    }
+
+    /* src/IconTrashCan.svelte generated by Svelte v3.38.2 */
+
+    function create_fragment$1(ctx) {
+    	let svg;
+    	let path;
+
+    	return {
+    		c() {
+    			svg = svg_element("svg");
+    			path = svg_element("path");
+    			attr(path, "stroke-linecap", "round");
+    			attr(path, "stroke-linejoin", "round");
+    			attr(path, "stroke-width", "2");
+    			attr(path, "d", "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16");
+    			attr(svg, "width", /*width*/ ctx[0]);
+    			attr(svg, "height", /*height*/ ctx[1]);
+    			attr(svg, "fill", "none");
+    			attr(svg, "stroke", /*stroke*/ ctx[2]);
+    			attr(svg, "viewBox", "0 0 24 24");
+    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+    		},
+    		m(target, anchor) {
+    			insert(target, svg, anchor);
+    			append(svg, path);
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*width*/ 1) {
+    				attr(svg, "width", /*width*/ ctx[0]);
+    			}
+
+    			if (dirty & /*height*/ 2) {
+    				attr(svg, "height", /*height*/ ctx[1]);
+    			}
+
+    			if (dirty & /*stroke*/ 4) {
+    				attr(svg, "stroke", /*stroke*/ ctx[2]);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(svg);
+    		}
+    	};
+    }
+
+    function instance$1($$self, $$props, $$invalidate) {
+    	let { width = "5rem" } = $$props;
+    	let { height = "5rem" } = $$props;
+    	let { stroke = "currentColor" } = $$props;
+
+    	$$self.$$set = $$props => {
+    		if ("width" in $$props) $$invalidate(0, width = $$props.width);
+    		if ("height" in $$props) $$invalidate(1, height = $$props.height);
+    		if ("stroke" in $$props) $$invalidate(2, stroke = $$props.stroke);
+    	};
+
+    	return [width, height, stroke];
+    }
+
+    class IconTrashCan extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		init(this, options, instance$1, create_fragment$1, safe_not_equal, { width: 0, height: 1, stroke: 2 });
+    	}
+    }
+
+    /* src/Alert.svelte generated by Svelte v3.38.2 */
+
+    function create_fragment(ctx) {
+    	let div;
+    	let t;
+    	let div_class_value;
+    	let mounted;
+    	let dispose;
+
+    	return {
+    		c() {
+    			div = element("div");
+    			t = text(/*content*/ ctx[1]);
+    			attr(div, "class", div_class_value = "" + (null_to_empty(`alert alert--${/*type*/ ctx[0]}`) + " svelte-1oun6o6"));
+    		},
+    		m(target, anchor) {
+    			insert(target, div, anchor);
+    			append(div, t);
+
+    			if (!mounted) {
+    				dispose = listen(div, "click", function () {
+    					if (is_function(/*callback*/ ctx[2])) /*callback*/ ctx[2].apply(this, arguments);
+    				});
+
+    				mounted = true;
+    			}
+    		},
+    		p(new_ctx, [dirty]) {
+    			ctx = new_ctx;
+    			if (dirty & /*content*/ 2) set_data(t, /*content*/ ctx[1]);
+
+    			if (dirty & /*type*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(`alert alert--${/*type*/ ctx[0]}`) + " svelte-1oun6o6"))) {
+    				attr(div, "class", div_class_value);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(div);
+    			mounted = false;
+    			dispose();
+    		}
+    	};
+    }
+
+    function instance($$self, $$props, $$invalidate) {
+    	let { type = "success" } = $$props;
+    	let { content } = $$props;
+    	let { callback } = $$props;
+
+    	$$self.$$set = $$props => {
+    		if ("type" in $$props) $$invalidate(0, type = $$props.type);
+    		if ("content" in $$props) $$invalidate(1, content = $$props.content);
+    		if ("callback" in $$props) $$invalidate(2, callback = $$props.callback);
+    	};
+
+    	return [type, content, callback];
+    }
+
+    class Alert extends SvelteComponent {
+    	constructor(options) {
+    		super();
+    		init(this, options, instance, create_fragment, safe_not_equal, { type: 0, content: 1, callback: 2 });
     	}
     }
 
+    exports.Alert = Alert;
     exports.Button = Button;
+    exports.DataTable = DataTable;
     exports.Icon = Icon;
+    exports.IconFloppyDisk = IconFloppyDisk;
     exports.IconInfo = IconInfo;
+    exports.IconMore = IconMoreSign;
+    exports.IconTrashCan = IconTrashCan;
+    exports.Loader = Loader;
     exports.Navigation = Navigation;
     exports.NumberInput = NumberInput;
     exports.RadioButton = RadioButton;