@plaidev/karte-action-sdk 1.1.154-28002567.a7b041e8 → 1.1.154-28002843.979f6a57

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { linear, elasticOut, cubicOut } from 'svelte/easing';
 import { writable, get } from 'svelte/store';
 import { setContext, getContext, createEventDispatcher, onMount, onDestroy as onDestroy$1 } from 'svelte';
 export { onMount } from 'svelte';
-import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, attr, noop, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, null_to_empty, src_url_equal, HtmlTag } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, attr, noop, listen, null_to_empty, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, append, destroy_each, text, set_data, src_url_equal, HtmlTag } from 'svelte/internal';
 
 /** @internal */
 const PropTypes = [
@@ -2380,20 +2380,20 @@ var widget = /*#__PURE__*/Object.freeze({
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$s(target) {
+function add_css$t(target) {
 	append_styles(target, "svelte-tr4qnr", "@import 'https://esm.sh/normalize.css';");
 }
 
 class Normalize extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, null, safe_not_equal, {}, add_css$s);
+		init(this, options, null, null, safe_not_equal, {}, add_css$t);
 	}
 }
 
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$v(ctx) {
+function create_fragment$w(ctx) {
 	let normalize;
 	let t;
 	let current;
@@ -2452,7 +2452,7 @@ function create_fragment$v(ctx) {
 	};
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -2465,18 +2465,18 @@ function instance$v($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$v, create_fragment$v, safe_not_equal, {});
+		init(this, options, instance$w, create_fragment$w, safe_not_equal, {});
 	}
 }
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$r(target) {
+function add_css$s(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
 // (23:0) {#if $state === path}
-function create_if_block$7(ctx) {
+function create_if_block$8(ctx) {
 	let div;
 	let t;
 	let current;
@@ -2538,10 +2538,10 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$7(ctx);
+	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -2562,7 +2562,7 @@ function create_fragment$u(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$7(ctx);
+					if_block = create_if_block$8(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -2599,7 +2599,7 @@ function getStateItemContext() {
 	return getContext(STATE_ITEM_CONTEXT_KEY);
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -2625,18 +2625,18 @@ function instance$u($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$u, create_fragment$u, safe_not_equal, { path: 0 }, add_css$r);
+		init(this, options, instance$v, create_fragment$v, safe_not_equal, { path: 0 }, add_css$s);
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
-function add_css$q(target) {
+function add_css$r(target) {
 	append_styles(target, "svelte-1d4fta", ".background.svelte-1d4fta{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
 
 // (9:0) {#if backgroundOverray}
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let div;
 	let mounted;
 	let dispose;
@@ -2663,9 +2663,9 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$6(ctx);
+	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -2681,7 +2681,7 @@ function create_fragment$t(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$6(ctx);
+					if_block = create_if_block$7(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -2699,7 +2699,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
 	let { backgroundOverray = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
@@ -2714,119 +2714,69 @@ function instance$t($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$t, create_fragment$t, safe_not_equal, { backgroundOverray: 0 }, add_css$q);
+		init(this, options, instance$u, create_fragment$u, safe_not_equal, { backgroundOverray: 0 }, add_css$r);
 	}
 }
 
-/* src/components/Modal.svelte generated by Svelte v3.53.1 */
+/* src/components/Button.svelte generated by Svelte v3.53.1 */
 
-function add_css$p(target) {
-	append_styles(target, "svelte-12dkw0q", ".modal.svelte-12dkw0q{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-12dkw0q{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-12dkw0q:hover{transform:rotate(90deg)}.modal-content.svelte-12dkw0q{display:flex;justify-content:center;align-items:center}");
+function add_css$q(target) {
+	append_styles(target, "svelte-1kj05ao", ".button.svelte-1kj05ao{display:block;text-decoration:none;color:inherit;border:none;background:none;margin:0;padding:0;cursor:initial}.button.svelte-1kj05ao:link,.button.svelte-1kj05ao:visited,.button.svelte-1kj05ao:active,.button.svelte-1kj05ao:hover{color:inherit}");
 }
 
-// (149:0) {#if visible}
-function create_if_block$5(ctx) {
-	let div1;
-	let t;
-	let div0;
-	let div1_style_value;
-	let div1_intro;
+// (41:0) {:else}
+function create_else_block$2(ctx) {
+	let button;
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*closable*/ ctx[14] && create_if_block_1$1(ctx);
-	const default_slot_template = /*#slots*/ ctx[29].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[28], null);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
 	return {
 		c() {
-			div1 = element("div");
-			if (if_block) if_block.c();
-			t = space();
-			div0 = element("div");
+			button = element("button");
 			if (default_slot) default_slot.c();
-			attr(div0, "class", "modal-content svelte-12dkw0q");
-			attr(div0, "style", /*_style*/ ctx[1]);
-			attr(div1, "class", "modal svelte-12dkw0q");
-			attr(div1, "role", "dialog");
-			attr(div1, "aria-modal", "true");
-			attr(div1, "style", div1_style_value = "" + /*pos*/ ctx[11] + " " + /*marginStyle*/ ctx[9] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[12]] + "");
+			attr(button, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-1kj05ao"));
+			attr(button, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
-			if (if_block) if_block.m(div1, null);
-			append(div1, t);
-			append(div1, div0);
+			insert(target, button, anchor);
 
 			if (default_slot) {
-				default_slot.m(div0, null);
+				default_slot.m(button, null);
 			}
 
-			/*div1_binding*/ ctx[30](div1);
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(div1, "click", function () {
-					if (is_function(/*click*/ ctx[15])) /*click*/ ctx[15].apply(this, arguments);
-				});
-
+				dispose = listen(button, "click", /*handleClickButton*/ ctx[3]);
 				mounted = true;
 			}
 		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
-
-			if (/*closable*/ ctx[14]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block_1$1(ctx);
-					if_block.c();
-					if_block.m(div1, t);
-				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
-			}
-
+		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 268435456)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[28],
+						/*$$scope*/ ctx[8],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[28])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[28], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*_style*/ 2) {
-				attr(div0, "style", /*_style*/ ctx[1]);
-			}
-
-			if (!current || dirty & /*pos, marginStyle, overwriteElasticity*/ 6656 && div1_style_value !== (div1_style_value = "" + /*pos*/ ctx[11] + " " + /*marginStyle*/ ctx[9] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[12]] + "")) {
-				attr(div1, "style", div1_style_value);
+			if (!current || dirty & /*style*/ 2) {
+				attr(button, "style", /*style*/ ctx[1]);
 			}
 		},
 		i(local) {
 			if (current) return;
 			transition_in(default_slot, local);
-
-			if (!div1_intro) {
-				add_render_callback(() => {
-					div1_intro = create_in_transition(div1, customAnimation, {
-						transform: /*transform*/ ctx[10],
-						animationStyle: /*animation*/ ctx[0]
-					});
-
-					div1_intro.start();
-				});
-			}
-
 			current = true;
 		},
 		o(local) {
@@ -2834,240 +2784,784 @@ function create_if_block$5(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div1);
-			if (if_block) if_block.d();
+			if (detaching) detach(button);
 			if (default_slot) default_slot.d(detaching);
-			/*div1_binding*/ ctx[30](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (166:4) {#if closable}
-function create_if_block_1$1(ctx) {
-	let button;
-	let svg;
-	let path;
-	let button_style_value;
-	let mounted;
-	let dispose;
+// (37:39) 
+function create_if_block_2(ctx) {
+	let div;
+	let current;
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
 	return {
 		c() {
-			button = element("button");
-			svg = svg_element("svg");
-			path = svg_element("path");
-			attr(path, "d", "M5.78516 4.75L8.73828 1.82422C8.90234 1.66016 8.90234 1.35938 8.73828 1.19531L8.05469 0.511719C7.89062 0.347656 7.58984 0.347656 7.42578 0.511719L4.5 3.46484L1.54688 0.511719C1.38281 0.347656 1.08203 0.347656 0.917969 0.511719L0.234375 1.19531C0.0703125 1.35938 0.0703125 1.66016 0.234375 1.82422L3.1875 4.75L0.234375 7.70312C0.0703125 7.86719 0.0703125 8.16797 0.234375 8.33203L0.917969 9.01562C1.08203 9.17969 1.38281 9.17969 1.54688 9.01562L4.5 6.0625L7.42578 9.01562C7.58984 9.17969 7.89062 9.17969 8.05469 9.01562L8.73828 8.33203C8.90234 8.16797 8.90234 7.86719 8.73828 7.70312L5.78516 4.75Z");
-			attr(path, "fill", /*closeButtonColor*/ ctx[2]);
-			attr(path, "fill-opacity", "0.8");
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 9 10");
-			attr(svg, "fill", "none");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(button, "class", "close svelte-12dkw0q");
-			attr(button, "style", button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[16] + 1) + "; " + /*_closeStyle*/ ctx[3] + "");
+			div = element("div");
+			if (default_slot) default_slot.c();
+			attr(div, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-1kj05ao"));
+			attr(div, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, button, anchor);
-			append(button, svg);
-			append(svg, path);
-
-			if (!mounted) {
-				dispose = listen(button, "click", function () {
-					if (is_function(/*close*/ ctx[5])) /*close*/ ctx[5].apply(this, arguments);
-				});
+			insert(target, div, anchor);
 
-				mounted = true;
+			if (default_slot) {
+				default_slot.m(div, null);
 			}
-		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
 
-			if (dirty & /*closeButtonColor*/ 4) {
-				attr(path, "fill", /*closeButtonColor*/ ctx[2]);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[8],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
+						null
+					);
+				}
 			}
 
-			if (dirty & /*$maximumZindex, _closeStyle*/ 65544 && button_style_value !== (button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[16] + 1) + "; " + /*_closeStyle*/ ctx[3] + "")) {
-				attr(button, "style", button_style_value);
+			if (!current || dirty & /*style*/ 2) {
+				attr(div, "style", /*style*/ ctx[1]);
 			}
 		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
 		d(detaching) {
-			if (detaching) detach(button);
-			mounted = false;
-			dispose();
+			if (detaching) detach(div);
+			if (default_slot) default_slot.d(detaching);
 		}
 	};
 }
 
-function create_fragment$s(ctx) {
-	let backgroundoverray;
-	let t;
-	let if_block_anchor;
+// (33:41) 
+function create_if_block_1$2(ctx) {
+	let a;
+	let a_href_value;
+	let a_target_value;
 	let current;
-	let mounted;
-	let dispose;
-
-	backgroundoverray = new BackgroundOverray({
-			props: {
-				backgroundOverray: /*backgroundOverray*/ ctx[6]
-			}
-		});
-
-	backgroundoverray.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[13])) /*backgroundClick*/ ctx[13].apply(this, arguments);
-	});
-
-	let if_block = /*visible*/ ctx[7] && create_if_block$5(ctx);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
 	return {
 		c() {
-			create_component(backgroundoverray.$$.fragment);
-			t = space();
-			if (if_block) if_block.c();
-			if_block_anchor = empty();
+			a = element("a");
+			if (default_slot) default_slot.c();
+			attr(a, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-1kj05ao"));
+			attr(a, "style", /*style*/ ctx[1]);
+			attr(a, "href", a_href_value = /*onClick*/ ctx[0].args[0]);
+			attr(a, "target", a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null);
 		},
 		m(target, anchor) {
-			mount_component(backgroundoverray, target, anchor);
-			insert(target, t, anchor);
-			if (if_block) if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
-			current = true;
-
-			if (!mounted) {
-				dispose = listen(window, "keydown", function () {
-					if (is_function(/*handle_keydown*/ ctx[8])) /*handle_keydown*/ ctx[8].apply(this, arguments);
-				});
+			insert(target, a, anchor);
 
-				mounted = true;
+			if (default_slot) {
+				default_slot.m(a, null);
 			}
-		},
-		p(new_ctx, [dirty]) {
-			ctx = new_ctx;
-			const backgroundoverray_changes = {};
-			if (dirty & /*backgroundOverray*/ 64) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[6];
-			backgroundoverray.$set(backgroundoverray_changes);
-
-			if (/*visible*/ ctx[7]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
 
-					if (dirty & /*visible*/ 128) {
-						transition_in(if_block, 1);
-					}
-				} else {
-					if_block = create_if_block$5(ctx);
-					if_block.c();
-					transition_in(if_block, 1);
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[8],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
+						null
+					);
 				}
-			} else if (if_block) {
-				group_outros();
+			}
 
-				transition_out(if_block, 1, 1, () => {
-					if_block = null;
-				});
+			if (!current || dirty & /*style*/ 2) {
+				attr(a, "style", /*style*/ ctx[1]);
+			}
 
-				check_outros();
+			if (!current || dirty & /*onClick*/ 1 && a_href_value !== (a_href_value = /*onClick*/ ctx[0].args[0])) {
+				attr(a, "href", a_href_value);
+			}
+
+			if (!current || dirty & /*onClick*/ 1 && a_target_value !== (a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null)) {
+				attr(a, "target", a_target_value);
 			}
 		},
 		i(local) {
 			if (current) return;
-			transition_in(backgroundoverray.$$.fragment, local);
-			transition_in(if_block);
+			transition_in(default_slot, local);
 			current = true;
 		},
 		o(local) {
-			transition_out(backgroundoverray.$$.fragment, local);
-			transition_out(if_block);
+			transition_out(default_slot, local);
 			current = false;
 		},
 		d(detaching) {
-			destroy_component(backgroundoverray, detaching);
-			if (detaching) detach(t);
-			if (if_block) if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
-			mounted = false;
-			dispose();
+			if (detaching) detach(a);
+			if (default_slot) default_slot.d(detaching);
 		}
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
-	let click;
-	let close;
-	let closable;
-	let backgroundClick;
-	let overwritePosition;
-	let overwriteMargin;
-	let overwriteElasticity;
-	let pos;
-	let transform;
-	let marginStyle;
-	let handle_keydown;
-	let visible;
-	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(16, $maximumZindex = $$value));
-	let { $$slots: slots = {}, $$scope } = $$props;
-	let { onClick = { operation: 'none', args: [] } } = $$props;
-	let { clickEventName = '' } = $$props;
-	let { clickEventValue = null } = $$props;
-	let { placement = DefaultModalPlacement } = $$props;
-	let { animation = 'none' } = $$props;
-	let { _style = '' } = $$props;
-	let { elasticity = 'none' } = $$props;
-	let { onClose = { operation: 'closeApp', args: ['button'] } } = $$props;
-	let { closeEventName = '' } = $$props;
-	let { closeEventValue = null } = $$props;
-	let { closeButtonColor = '#000000' } = $$props;
-	let { _closeStyle = '' } = $$props;
-	let backgroundOverray = DefaultModalPlacement.backgroundOverlay;
-	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
-	let modal;
-
-	onMount(() => {
-		$$invalidate(7, visible = true);
-	});
-
+// (29:0) {#if disabled}
+function create_if_block$6(ctx) {
+	let div;
+	let current;
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
+
+	return {
+		c() {
+			div = element("div");
+			if (default_slot) default_slot.c();
+			attr(div, "class", "" + (BUTTON_CLASS + " _disabled" + " svelte-1kj05ao"));
+			attr(div, "style", /*style*/ ctx[1]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			if (default_slot) {
+				default_slot.m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[8],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
+						null
+					);
+				}
+			}
+
+			if (!current || dirty & /*style*/ 2) {
+				attr(div, "style", /*style*/ ctx[1]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (default_slot) default_slot.d(detaching);
+		}
+	};
+}
+
+function create_fragment$t(ctx) {
+	let current_block_type_index;
+	let if_block;
+	let if_block_anchor;
+	let current;
+	const if_block_creators = [create_if_block$6, create_if_block_1$2, create_if_block_2, create_else_block$2];
+	const if_blocks = [];
+
+	function select_block_type(ctx, dirty) {
+		if (/*disabled*/ ctx[2]) return 0;
+		if (/*onClick*/ ctx[0].operation === 'linkTo') return 1;
+		if (/*onClick*/ ctx[0].operation === 'none') return 2;
+		return 3;
+	}
+
+	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() {
+			if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if_blocks[current_block_type_index].m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			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(if_block_anchor.parentNode, if_block_anchor);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if_blocks[current_block_type_index].d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+const BUTTON_CLASS = 'button';
+
+function instance$t($$self, $$props, $$invalidate) {
+	let disabled;
+	let $valuesAreValid;
+	let { $$slots: slots = {}, $$scope } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
+	let { eventValue = undefined } = $$props;
+	let { style = '' } = $$props;
+
+	function handleClickButton() {
+		if (eventName) {
+			send_event(eventName, eventValue);
+		}
+
+		execOnClickOperation(onClick);
+	}
+
+	const { path: statePath } = getStateItemContext() ?? { path: '/' };
+	const valuesAreValid = getValuesAreValidReader(statePath);
+	component_subscribe($$self, valuesAreValid, value => $$invalidate(7, $valuesAreValid = value));
+
+	$$self.$$set = $$props => {
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
+		if ('style' in $$props) $$invalidate(1, style = $$props.style);
+		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*onClick, $valuesAreValid*/ 129) {
+			$$invalidate(2, disabled = (() => {
+				let isEnabled = true;
+
+				if (onClick.operation === 'submitForm') {
+					isEnabled = $valuesAreValid;
+				} else if (onClick.operation === 'moveTo') {
+					isEnabled = $valuesAreValid;
+				}
+
+				return !isEnabled;
+			})());
+		}
+	};
+
+	return [
+		onClick,
+		style,
+		disabled,
+		handleClickButton,
+		valuesAreValid,
+		eventName,
+		eventValue,
+		$valuesAreValid,
+		$$scope,
+		slots
+	];
+}
+
+class Button extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance$t,
+			create_fragment$t,
+			safe_not_equal,
+			{
+				onClick: 0,
+				eventName: 5,
+				eventValue: 6,
+				style: 1
+			},
+			add_css$q
+		);
+	}
+}
+
+/* src/components/Modal.svelte generated by Svelte v3.53.1 */
+
+function add_css$p(target) {
+	append_styles(target, "svelte-67dbus", ".modal.svelte-67dbus{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-67dbus{position:absolute;top:0;right:0}.close.svelte-67dbus > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-67dbus > .button:hover{transform:rotate(90deg)}.modal-content.svelte-67dbus{display:flex;justify-content:center;align-items:center}");
+}
+
+// (144:0) {#if visible}
+function create_if_block$5(ctx) {
+	let div;
+	let button;
+	let div_style_value;
+	let div_intro;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				eventName: /*clickEventName*/ ctx[1],
+				eventValue: /*clickEventValue*/ ctx[2],
+				$$slots: { default: [create_default_slot$4] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			attr(div, "class", "modal svelte-67dbus");
+			attr(div, "role", "dialog");
+			attr(div, "aria-modal", "true");
+			attr(div, "style", div_style_value = "" + /*pos*/ ctx[16] + " " + /*marginStyle*/ ctx[14] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[17]] + "");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(button, div, null);
+			/*div_binding*/ ctx[28](div);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			const button_changes = {};
+			if (dirty & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
+			if (dirty & /*clickEventName*/ 2) button_changes.eventName = /*clickEventName*/ ctx[1];
+			if (dirty & /*clickEventValue*/ 4) button_changes.eventValue = /*clickEventValue*/ ctx[2];
+
+			if (dirty & /*$$scope, _style, $maximumZindex, onClose, _closeStyle, closeEventName, closeEventValue, closeButtonColor, closable*/ 538444784) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+
+			if (!current || dirty & /*pos, marginStyle, overwriteElasticity*/ 212992 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[16] + " " + /*marginStyle*/ ctx[14] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[17]] + "")) {
+				attr(div, "style", div_style_value);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+
+			if (!div_intro) {
+				add_render_callback(() => {
+					div_intro = create_in_transition(div, customAnimation, {
+						transform: /*transform*/ ctx[15],
+						animationStyle: /*animation*/ ctx[3]
+					});
+
+					div_intro.start();
+				});
+			}
+
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(button);
+			/*div_binding*/ ctx[28](null);
+		}
+	};
+}
+
+// (161:6) {#if closable}
+function create_if_block_1$1(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClose*/ ctx[5],
+				style: /*_closeStyle*/ ctx[9],
+				eventName: /*closeEventName*/ ctx[6],
+				eventValue: /*closeEventValue*/ ctx[7],
+				$$slots: { default: [create_default_slot_1$1] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			attr(div, "class", "close svelte-67dbus");
+			set_style(div, "z-index", /*$maximumZindex*/ ctx[20] + 1);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(button, div, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const button_changes = {};
+			if (dirty & /*onClose*/ 32) button_changes.onClick = /*onClose*/ ctx[5];
+			if (dirty & /*_closeStyle*/ 512) button_changes.style = /*_closeStyle*/ ctx[9];
+			if (dirty & /*closeEventName*/ 64) button_changes.eventName = /*closeEventName*/ ctx[6];
+			if (dirty & /*closeEventValue*/ 128) button_changes.eventValue = /*closeEventValue*/ ctx[7];
+
+			if (dirty & /*$$scope, closeButtonColor*/ 536871168) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+
+			if (!current || dirty & /*$maximumZindex*/ 1048576) {
+				set_style(div, "z-index", /*$maximumZindex*/ ctx[20] + 1);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(button);
+		}
+	};
+}
+
+// (163:10) <Button onClick={onClose} style={_closeStyle} eventName={closeEventName} eventValue={closeEventValue}>
+function create_default_slot_1$1(ctx) {
+	let svg;
+	let path;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			path = svg_element("path");
+			attr(path, "d", "M5.78516 4.75L8.73828 1.82422C8.90234 1.66016 8.90234 1.35938 8.73828 1.19531L8.05469 0.511719C7.89062 0.347656 7.58984 0.347656 7.42578 0.511719L4.5 3.46484L1.54688 0.511719C1.38281 0.347656 1.08203 0.347656 0.917969 0.511719L0.234375 1.19531C0.0703125 1.35938 0.0703125 1.66016 0.234375 1.82422L3.1875 4.75L0.234375 7.70312C0.0703125 7.86719 0.0703125 8.16797 0.234375 8.33203L0.917969 9.01562C1.08203 9.17969 1.38281 9.17969 1.54688 9.01562L4.5 6.0625L7.42578 9.01562C7.58984 9.17969 7.89062 9.17969 8.05469 9.01562L8.73828 8.33203C8.90234 8.16797 8.90234 7.86719 8.73828 7.70312L5.78516 4.75Z");
+			attr(path, "fill", /*closeButtonColor*/ ctx[8]);
+			attr(path, "fill-opacity", "0.8");
+			attr(svg, "width", "100%");
+			attr(svg, "height", "100%");
+			attr(svg, "viewBox", "0 0 9 10");
+			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 & /*closeButtonColor*/ 256) {
+				attr(path, "fill", /*closeButtonColor*/ ctx[8]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+// (160:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+function create_default_slot$4(ctx) {
+	let t;
+	let div;
+	let current;
+	let if_block = /*closable*/ ctx[19] && create_if_block_1$1(ctx);
+	const default_slot_template = /*#slots*/ ctx[27].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[29], null);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			t = space();
+			div = element("div");
+			if (default_slot) default_slot.c();
+			attr(div, "class", "modal-content svelte-67dbus");
+			attr(div, "style", /*_style*/ ctx[4]);
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t, anchor);
+			insert(target, div, anchor);
+
+			if (default_slot) {
+				default_slot.m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*closable*/ ctx[19]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*closable*/ 524288) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_1$1(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(t.parentNode, t);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 536870912)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[29],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[29])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[29], dirty, null),
+						null
+					);
+				}
+			}
+
+			if (!current || dirty & /*_style*/ 16) {
+				attr(div, "style", /*_style*/ ctx[4]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t);
+			if (detaching) detach(div);
+			if (default_slot) default_slot.d(detaching);
+		}
+	};
+}
+
+function create_fragment$s(ctx) {
+	let backgroundoverray;
+	let t;
+	let if_block_anchor;
+	let current;
+	let mounted;
+	let dispose;
+
+	backgroundoverray = new BackgroundOverray({
+			props: {
+				backgroundOverray: /*backgroundOverray*/ ctx[11]
+			}
+		});
+
+	backgroundoverray.$on("click", function () {
+		if (is_function(/*backgroundClick*/ ctx[18])) /*backgroundClick*/ ctx[18].apply(this, arguments);
+	});
+
+	let if_block = /*visible*/ ctx[12] && create_if_block$5(ctx);
+
+	return {
+		c() {
+			create_component(backgroundoverray.$$.fragment);
+			t = space();
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			mount_component(backgroundoverray, target, anchor);
+			insert(target, t, anchor);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(window, "keydown", function () {
+					if (is_function(/*handle_keydown*/ ctx[13])) /*handle_keydown*/ ctx[13].apply(this, arguments);
+				});
+
+				mounted = true;
+			}
+		},
+		p(new_ctx, [dirty]) {
+			ctx = new_ctx;
+			const backgroundoverray_changes = {};
+			if (dirty & /*backgroundOverray*/ 2048) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[11];
+			backgroundoverray.$set(backgroundoverray_changes);
+
+			if (/*visible*/ ctx[12]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*visible*/ 4096) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block$5(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(backgroundoverray.$$.fragment, local);
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(backgroundoverray.$$.fragment, local);
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(backgroundoverray, detaching);
+			if (detaching) detach(t);
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$s($$self, $$props, $$invalidate) {
+	let close;
+	let closable;
+	let backgroundClick;
+	let overwritePosition;
+	let overwriteMargin;
+	let overwriteElasticity;
+	let pos;
+	let transform;
+	let marginStyle;
+	let handle_keydown;
+	let visible;
+	let $maximumZindex;
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(20, $maximumZindex = $$value));
+	let { $$slots: slots = {}, $$scope } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { clickEventName = '' } = $$props;
+	let { clickEventValue = null } = $$props;
+	let { placement = DefaultModalPlacement } = $$props;
+	let { animation = 'none' } = $$props;
+	let { _style = '' } = $$props;
+	let { elasticity = 'none' } = $$props;
+	let { onClose = { operation: 'closeApp', args: ['button'] } } = $$props;
+	let { closeEventName = '' } = $$props;
+	let { closeEventValue = null } = $$props;
+	let { closeButtonColor = '#000000' } = $$props;
+	let { _closeStyle = '' } = $$props;
+	let backgroundOverray = DefaultModalPlacement.backgroundOverlay;
+	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
+	let modal;
+
+	onMount(() => {
+		$$invalidate(12, visible = true);
+	});
+
 	onDestroy$1(() => setPreviousFocus());
 
-	function div1_binding($$value) {
+	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			modal = $$value;
-			$$invalidate(4, modal);
+			$$invalidate(10, modal);
 		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(17, onClick = $$props.onClick);
-		if ('clickEventName' in $$props) $$invalidate(18, clickEventName = $$props.clickEventName);
-		if ('clickEventValue' in $$props) $$invalidate(19, clickEventValue = $$props.clickEventValue);
-		if ('placement' in $$props) $$invalidate(20, placement = $$props.placement);
-		if ('animation' in $$props) $$invalidate(0, animation = $$props.animation);
-		if ('_style' in $$props) $$invalidate(1, _style = $$props._style);
-		if ('elasticity' in $$props) $$invalidate(21, elasticity = $$props.elasticity);
-		if ('onClose' in $$props) $$invalidate(22, onClose = $$props.onClose);
-		if ('closeEventName' in $$props) $$invalidate(23, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(24, closeEventValue = $$props.closeEventValue);
-		if ('closeButtonColor' in $$props) $$invalidate(2, closeButtonColor = $$props.closeButtonColor);
-		if ('_closeStyle' in $$props) $$invalidate(3, _closeStyle = $$props._closeStyle);
-		if ('$$scope' in $$props) $$invalidate(28, $$scope = $$props.$$scope);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('clickEventName' in $$props) $$invalidate(1, clickEventName = $$props.clickEventName);
+		if ('clickEventValue' in $$props) $$invalidate(2, clickEventValue = $$props.clickEventValue);
+		if ('placement' in $$props) $$invalidate(21, placement = $$props.placement);
+		if ('animation' in $$props) $$invalidate(3, animation = $$props.animation);
+		if ('_style' in $$props) $$invalidate(4, _style = $$props._style);
+		if ('elasticity' in $$props) $$invalidate(22, elasticity = $$props.elasticity);
+		if ('onClose' in $$props) $$invalidate(5, onClose = $$props.onClose);
+		if ('closeEventName' in $$props) $$invalidate(6, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(7, closeEventValue = $$props.closeEventValue);
+		if ('closeButtonColor' in $$props) $$invalidate(8, closeButtonColor = $$props.closeButtonColor);
+		if ('_closeStyle' in $$props) $$invalidate(9, _closeStyle = $$props._closeStyle);
+		if ('$$scope' in $$props) $$invalidate(29, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*clickEventName, clickEventValue, onClick*/ 917504) {
-			$$invalidate(15, click = () => {
-				if (clickEventName) {
-					send_event(clickEventName, clickEventValue);
-				}
-
-				execOnClickOperation(onClick);
-			});
-		}
-
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, onClose*/ 29360128) {
-			$$invalidate(5, close = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, onClose*/ 224) {
+			$$invalidate(24, close = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -3076,28 +3570,28 @@ function instance$s($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*onClose*/ 4194304) {
-			$$invalidate(14, closable = haveFunction(onClose));
+		if ($$self.$$.dirty & /*onClose*/ 32) {
+			$$invalidate(19, closable = haveFunction(onClose));
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 1048576) {
+		if ($$self.$$.dirty & /*placement*/ 2097152) {
 			{
 				if (placement && placement.backgroundOverlay) {
-					$$invalidate(6, backgroundOverray = placement.backgroundOverlay);
+					$$invalidate(11, backgroundOverray = placement.backgroundOverlay);
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 1048576) {
+		if ($$self.$$.dirty & /*placement*/ 2097152) {
 			{
 				if (placement && placement.backgroundClick) {
-					$$invalidate(25, backgroundClickFunction = placement.backgroundClick);
+					$$invalidate(23, backgroundClickFunction = placement.backgroundClick);
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 58720256) {
-			$$invalidate(13, backgroundClick = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 8388800) {
+			$$invalidate(18, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -3106,51 +3600,56 @@ function instance$s($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 1048576) {
-			$$invalidate(27, overwritePosition = placement && placement.position != null
+		if ($$self.$$.dirty & /*placement*/ 2097152) {
+			$$invalidate(26, overwritePosition = placement && placement.position != null
 				? placement.position
 				: DefaultModalPlacement.position);
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 1048576) {
-			$$invalidate(26, overwriteMargin = placement && placement.margin != null
+		if ($$self.$$.dirty & /*placement*/ 2097152) {
+			$$invalidate(25, overwriteMargin = placement && placement.margin != null
 				? placement.margin
 				: DefaultModalPlacement.margin);
 		}
 
-		if ($$self.$$.dirty & /*elasticity*/ 2097152) {
-			$$invalidate(12, overwriteElasticity = elasticity);
+		if ($$self.$$.dirty & /*elasticity*/ 4194304) {
+			$$invalidate(17, overwriteElasticity = elasticity);
 		}
 
-		if ($$self.$$.dirty & /*overwritePosition*/ 134217728) {
-			$$invalidate(11, pos = getPositionStyle(overwritePosition));
+		if ($$self.$$.dirty & /*overwritePosition*/ 67108864) {
+			$$invalidate(16, pos = getPositionStyle(overwritePosition));
 		}
 
-		if ($$self.$$.dirty & /*overwritePosition*/ 134217728) {
-			$$invalidate(10, transform = getTransform(overwritePosition));
+		if ($$self.$$.dirty & /*overwritePosition*/ 67108864) {
+			$$invalidate(15, transform = getTransform(overwritePosition));
 		}
 
-		if ($$self.$$.dirty & /*overwriteMargin*/ 67108864) {
-			$$invalidate(9, marginStyle = getMarginStyle(overwriteMargin));
+		if ($$self.$$.dirty & /*overwriteMargin*/ 33554432) {
+			$$invalidate(14, marginStyle = getMarginStyle(overwriteMargin));
 		}
 
-		if ($$self.$$.dirty & /*close, modal*/ 48) {
-			$$invalidate(8, handle_keydown = handleKeydown({ Escape: close, Tab: handleFocus(modal) }));
+		if ($$self.$$.dirty & /*close, modal*/ 16778240) {
+			$$invalidate(13, handle_keydown = handleKeydown({ Escape: close, Tab: handleFocus(modal) }));
 		}
 	};
 
-	$$invalidate(4, modal = null);
+	$$invalidate(10, modal = null);
 
 	// svelteコンポーネントのアニメーションを発火させるためにマウント時にvisibleをtrueにする。
-	$$invalidate(7, visible = false);
+	$$invalidate(12, visible = false);
 
 	return [
+		onClick,
+		clickEventName,
+		clickEventValue,
 		animation,
 		_style,
+		onClose,
+		closeEventName,
+		closeEventValue,
 		closeButtonColor,
 		_closeStyle,
 		modal,
-		close,
 		backgroundOverray,
 		visible,
 		handle_keydown,
@@ -3160,22 +3659,16 @@ function instance$s($$self, $$props, $$invalidate) {
 		overwriteElasticity,
 		backgroundClick,
 		closable,
-		click,
 		$maximumZindex,
-		onClick,
-		clickEventName,
-		clickEventValue,
 		placement,
 		elasticity,
-		onClose,
-		closeEventName,
-		closeEventValue,
 		backgroundClickFunction,
+		close,
 		overwriteMargin,
 		overwritePosition,
-		$$scope,
 		slots,
-		div1_binding
+		div_binding,
+		$$scope
 	];
 }
 
@@ -3190,18 +3683,18 @@ class Modal extends SvelteComponent {
 			create_fragment$s,
 			safe_not_equal,
 			{
-				onClick: 17,
-				clickEventName: 18,
-				clickEventValue: 19,
-				placement: 20,
-				animation: 0,
-				_style: 1,
-				elasticity: 21,
-				onClose: 22,
-				closeEventName: 23,
-				closeEventValue: 24,
-				closeButtonColor: 2,
-				_closeStyle: 3
+				onClick: 0,
+				clickEventName: 1,
+				clickEventValue: 2,
+				placement: 21,
+				animation: 3,
+				_style: 4,
+				elasticity: 22,
+				onClose: 5,
+				closeEventName: 6,
+				closeEventValue: 7,
+				closeButtonColor: 8,
+				_closeStyle: 9
 			},
 			add_css$p
 		);
@@ -3872,7 +4365,41 @@ class TextElement extends SvelteComponent {
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
 function add_css$m(target) {
-	append_styles(target, "svelte-1igv5yx", ".text-button-element.svelte-1igv5yx{width:100%;height:100%}.text-button-element._disabled.svelte-1igv5yx{opacity:0.2}.text-button.svelte-1igv5yx{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button._disabled.svelte-1igv5yx{cursor:not-allowed}.text-button.svelte-1igv5yx:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-1igv5yx:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
+	append_styles(target, "svelte-wb7ek", ".text-button-element.svelte-wb7ek{width:100%;height:100%}.text-button-element.svelte-wb7ek > .button{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button-element.svelte-wb7ek > .button._disabled{cursor:not-allowed !important;opacity:0.2}.text-button-element.svelte-wb7ek > .button:not(._disabled):active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button-element.svelte-wb7ek > .button:not(._disabled):hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
+}
+
+// (36:2) <Button onClick={onClick} {style} {eventName}>
+function create_default_slot$3(ctx) {
+	let rendertext;
+	let current;
+	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
+
+	return {
+		c() {
+			create_component(rendertext.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(rendertext, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const rendertext_changes = {};
+			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
+			rendertext.$set(rendertext_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(rendertext.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(rendertext.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(rendertext, detaching);
+		}
+	};
 }
 
 function create_fragment$n(ctx) {
@@ -3881,145 +4408,90 @@ function create_fragment$n(ctx) {
 	let link_href_value;
 	let t;
 	let button;
-	let rendertext;
-	let button_class_value;
-	let div_class_value;
 	let current;
-	let mounted;
-	let dispose;
-	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[1],
+				style: /*style*/ ctx[3],
+				eventName: /*eventName*/ ctx[2],
+				$$slots: { default: [create_default_slot$3] },
+				$$scope: { ctx }
+			}
+		});
 
 	return {
 		c() {
 			div = element("div");
 			link = element("link");
 			t = space();
-			button = element("button");
-			create_component(rendertext.$$.fragment);
+			create_component(button.$$.fragment);
 			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
 			attr(link, "rel", "stylesheet");
-			attr(button, "class", button_class_value = "" + (null_to_empty(`text-button${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"));
-			attr(button, "style", /*_buttonStyle*/ ctx[1]);
-			button.disabled = /*disabled*/ ctx[3];
-			attr(div, "class", div_class_value = "" + (null_to_empty(`text-button-element${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"));
-			attr(div, "style", /*_style*/ ctx[2]);
+			attr(div, "class", "text-button-element svelte-wb7ek");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, link);
 			append(div, t);
-			append(div, button);
-			mount_component(rendertext, button, null);
+			mount_component(button, div, null);
 			current = true;
-
-			if (!mounted) {
-				dispose = listen(button, "click", /*click*/ ctx[4]);
-				mounted = true;
-			}
 		},
 		p(ctx, [dirty]) {
 			if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
 				attr(link, "href", link_href_value);
 			}
 
-			const rendertext_changes = {};
-			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
-			rendertext.$set(rendertext_changes);
-
-			if (!current || dirty & /*disabled*/ 8 && button_class_value !== (button_class_value = "" + (null_to_empty(`text-button${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"))) {
-				attr(button, "class", button_class_value);
-			}
-
-			if (!current || dirty & /*_buttonStyle*/ 2) {
-				attr(button, "style", /*_buttonStyle*/ ctx[1]);
-			}
-
-			if (!current || dirty & /*disabled*/ 8) {
-				button.disabled = /*disabled*/ ctx[3];
-			}
+			const button_changes = {};
+			if (dirty & /*onClick*/ 2) button_changes.onClick = /*onClick*/ ctx[1];
+			if (dirty & /*style*/ 8) button_changes.style = /*style*/ ctx[3];
+			if (dirty & /*eventName*/ 4) button_changes.eventName = /*eventName*/ ctx[2];
 
-			if (!current || dirty & /*disabled*/ 8 && div_class_value !== (div_class_value = "" + (null_to_empty(`text-button-element${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"))) {
-				attr(div, "class", div_class_value);
+			if (dirty & /*$$scope, text*/ 65) {
+				button_changes.$$scope = { dirty, ctx };
 			}
 
-			if (!current || dirty & /*_style*/ 4) {
-				attr(div, "style", /*_style*/ ctx[2]);
-			}
+			button.$set(button_changes);
 		},
 		i(local) {
 			if (current) return;
-			transition_in(rendertext.$$.fragment, local);
+			transition_in(button.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			transition_out(rendertext.$$.fragment, local);
+			transition_out(button.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(div);
-			destroy_component(rendertext);
-			mounted = false;
-			dispose();
+			destroy_component(button);
 		}
 	};
 }
 
 function instance$n($$self, $$props, $$invalidate) {
-	let disabled;
-	let $valuesAreValid;
+	let style;
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
-
-	const click = () => {
-		if (eventName) {
-			send_event(eventName);
-		}
-
-		execOnClickOperation(onClick);
-	};
-
 	let { eventName = '' } = $$props;
 	let { _buttonStyle = 'color:#ffffff; font-size:14px; font-weight:bold; justify-content:center; align-items:center; padding:1px 6px 1px 6px; line-height: 1.5;' } = $$props;
 	let { _style = 'background-color: #000000; border-radius:4px; cursor: pointer' } = $$props;
-	const { path: statePath } = getStateItemContext() ?? { path: '/' };
-	const valuesAreValid = getValuesAreValidReader(statePath);
-	component_subscribe($$self, valuesAreValid, value => $$invalidate(8, $valuesAreValid = value));
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('onClick' in $$props) $$invalidate(6, onClick = $$props.onClick);
-		if ('eventName' in $$props) $$invalidate(7, eventName = $$props.eventName);
-		if ('_buttonStyle' in $$props) $$invalidate(1, _buttonStyle = $$props._buttonStyle);
-		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
+		if ('onClick' in $$props) $$invalidate(1, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(2, eventName = $$props.eventName);
+		if ('_buttonStyle' in $$props) $$invalidate(4, _buttonStyle = $$props._buttonStyle);
+		if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*onClick, $valuesAreValid*/ 320) {
-			$$invalidate(3, disabled = (() => {
-				let isEnabled = true;
-
-				if (onClick.operation === 'submitForm') {
-					isEnabled = $valuesAreValid;
-				} else if (onClick.operation === 'moveTo') {
-					isEnabled = $valuesAreValid;
-				}
-
-				return !isEnabled;
-			})());
+		if ($$self.$$.dirty & /*_buttonStyle, _style*/ 48) {
+			$$invalidate(3, style = [..._buttonStyle.split(';'), ..._style.split(';')].filter(Boolean).join(';'));
 		}
 	};
 
-	return [
-		text,
-		_buttonStyle,
-		_style,
-		disabled,
-		click,
-		valuesAreValid,
-		onClick,
-		eventName,
-		$valuesAreValid
-	];
+	return [text, onClick, eventName, style, _buttonStyle, _style];
 }
 
 class TextButtonElement extends SvelteComponent {
@@ -4034,10 +4506,10 @@ class TextButtonElement extends SvelteComponent {
 			safe_not_equal,
 			{
 				text: 0,
-				onClick: 6,
-				eventName: 7,
-				_buttonStyle: 1,
-				_style: 2
+				onClick: 1,
+				eventName: 2,
+				_buttonStyle: 4,
+				_style: 5
 			},
 			add_css$m
 		);
@@ -4047,43 +4519,31 @@ class TextButtonElement extends SvelteComponent {
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
 function add_css$l(target) {
-	append_styles(target, "svelte-t8kpqw", ".image-element.svelte-t8kpqw{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-t8kpqw{width:100%;height:100%}.transport.svelte-t8kpqw:hover,.transport.svelte-t8kpqw:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
+	append_styles(target, "svelte-1kn2sk0", ".image-element.svelte-1kn2sk0{width:100%;height:100%;max-width:100%;max-height:100%;box-sizing:border-box}.image-element.svelte-1kn2sk0 > .button{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image-element.svelte-1kn2sk0 > .button._disabled{cursor:not-allowed !important;opacity:0.2}.image-element.transport.svelte-1kn2sk0 > .button:not(._disabled):hover,.image-element.transport.svelte-1kn2sk0 > .button:not(._disabled):focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}.image.svelte-1kn2sk0{width:100%;height:100%}");
 }
 
-function create_fragment$m(ctx) {
-	let div;
+// (40:2) <Button {onClick} style={_style} {eventName}>
+function create_default_slot$2(ctx) {
 	let img;
 	let img_src_value;
-	let div_class_value;
-	let mounted;
-	let dispose;
 
 	return {
 		c() {
-			div = element("div");
 			img = element("img");
-			attr(img, "class", "image svelte-t8kpqw");
+			attr(img, "class", "image svelte-1kn2sk0");
 			attr(img, "loading", "lazy");
 			attr(img, "width", "auto");
 			attr(img, "height", "auto");
-			attr(img, "style", /*_imageStyle*/ ctx[3]);
+			attr(img, "style", /*_imageStyle*/ ctx[5]);
 			if (!src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) attr(img, "src", img_src_value);
 			attr(img, "alt", /*alt*/ ctx[1]);
-			attr(div, "class", div_class_value = "" + (null_to_empty('image-element' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-t8kpqw"));
-			attr(div, "style", /*_style*/ ctx[4]);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, img);
-
-			if (!mounted) {
-				dispose = listen(div, "click", /*click*/ ctx[5]);
-				mounted = true;
-			}
+			insert(target, img, anchor);
 		},
-		p(ctx, [dirty]) {
-			if (dirty & /*_imageStyle*/ 8) {
-				attr(img, "style", /*_imageStyle*/ ctx[3]);
+		p(ctx, dirty) {
+			if (dirty & /*_imageStyle*/ 32) {
+				attr(img, "style", /*_imageStyle*/ ctx[5]);
 			}
 
 			if (dirty & /*src*/ 1 && !src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) {
@@ -4093,21 +4553,68 @@ function create_fragment$m(ctx) {
 			if (dirty & /*alt*/ 2) {
 				attr(img, "alt", /*alt*/ ctx[1]);
 			}
+		},
+		d(detaching) {
+			if (detaching) detach(img);
+		}
+	};
+}
 
-			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty('image-element' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-t8kpqw"))) {
-				attr(div, "class", div_class_value);
+function create_fragment$m(ctx) {
+	let div;
+	let button;
+	let div_class_value;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[3],
+				style: /*_style*/ ctx[6],
+				eventName: /*eventName*/ ctx[4],
+				$$slots: { default: [create_default_slot$2] },
+				$$scope: { ctx }
 			}
+		});
 
-			if (dirty & /*_style*/ 16) {
-				attr(div, "style", /*_style*/ ctx[4]);
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			attr(div, "class", div_class_value = "image-element " + (/*transport*/ ctx[2] ? ' transport' : '') + " svelte-1kn2sk0");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(button, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const button_changes = {};
+			if (dirty & /*onClick*/ 8) button_changes.onClick = /*onClick*/ ctx[3];
+			if (dirty & /*_style*/ 64) button_changes.style = /*_style*/ ctx[6];
+			if (dirty & /*eventName*/ 16) button_changes.eventName = /*eventName*/ ctx[4];
+
+			if (dirty & /*$$scope, _imageStyle, src, alt*/ 163) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+
+			if (!current || dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "image-element " + (/*transport*/ ctx[2] ? ' transport' : '') + " svelte-1kn2sk0")) {
+				attr(div, "class", div_class_value);
 			}
 		},
-		i: noop,
-		o: noop,
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
+		},
 		d(detaching) {
 			if (detaching) detach(div);
-			mounted = false;
-			dispose();
+			destroy_component(button);
 		}
 	};
 }
@@ -4117,15 +4624,6 @@ function instance$m($$self, $$props, $$invalidate) {
 	let { alt = 'No Image' } = $$props;
 	let { transport = false } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
-
-	const click = () => {
-		if (eventName) {
-			send_event(eventName);
-		}
-
-		execOnClickOperation(onClick);
-	};
-
 	let { eventName = '' } = $$props;
 	let { _imageStyle = 'object-fit: contain;' } = $$props;
 	let { _style = '' } = $$props;
@@ -4134,13 +4632,13 @@ function instance$m($$self, $$props, $$invalidate) {
 		if ('src' in $$props) $$invalidate(0, src = $$props.src);
 		if ('alt' in $$props) $$invalidate(1, alt = $$props.alt);
 		if ('transport' in $$props) $$invalidate(2, transport = $$props.transport);
-		if ('onClick' in $$props) $$invalidate(6, onClick = $$props.onClick);
-		if ('eventName' in $$props) $$invalidate(7, eventName = $$props.eventName);
-		if ('_imageStyle' in $$props) $$invalidate(3, _imageStyle = $$props._imageStyle);
-		if ('_style' in $$props) $$invalidate(4, _style = $$props._style);
+		if ('onClick' in $$props) $$invalidate(3, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(4, eventName = $$props.eventName);
+		if ('_imageStyle' in $$props) $$invalidate(5, _imageStyle = $$props._imageStyle);
+		if ('_style' in $$props) $$invalidate(6, _style = $$props._style);
 	};
 
-	return [src, alt, transport, _imageStyle, _style, click, onClick, eventName];
+	return [src, alt, transport, onClick, eventName, _imageStyle, _style];
 }
 
 class ImageElement extends SvelteComponent {
@@ -4157,10 +4655,10 @@ class ImageElement extends SvelteComponent {
 				src: 0,
 				alt: 1,
 				transport: 2,
-				onClick: 6,
-				eventName: 7,
-				_imageStyle: 3,
-				_style: 4
+				onClick: 3,
+				eventName: 4,
+				_imageStyle: 5,
+				_style: 6
 			},
 			add_css$l
 		);
@@ -4317,49 +4815,27 @@ class List extends SvelteComponent {
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
 function add_css$j(target) {
-	append_styles(target, "svelte-h5j4xe", ".list-item.svelte-h5j4xe{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item-inner.svelte-h5j4xe{position:absolute;inset:0}");
+	append_styles(target, "svelte-1ocqru1", ".list-item.svelte-1ocqru1{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item.svelte-1ocqru1 > .button{position:absolute;inset:0}");
 }
 
-function create_fragment$k(ctx) {
-	let div1;
-	let div0;
+// (67:2) <Button {onClick} style={_style} eventName={clickEventName}>
+function create_default_slot$1(ctx) {
 	let current;
-	let mounted;
-	let dispose;
-	const default_slot_template = /*#slots*/ ctx[7].default;
+	const default_slot_template = /*#slots*/ ctx[5].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
 
 	return {
 		c() {
-			div1 = element("div");
-			div0 = element("div");
 			if (default_slot) default_slot.c();
-			attr(div0, "class", "list-item-inner svelte-h5j4xe");
-			attr(div0, "style", /*_style*/ ctx[0]);
-			attr(div1, "class", "list-item svelte-h5j4xe");
-			attr(div1, "style", /*listItemStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, div0);
-
 			if (default_slot) {
-				default_slot.m(div0, null);
+				default_slot.m(target, anchor);
 			}
 
 			current = true;
-
-			if (!mounted) {
-				dispose = listen(div1, "click", function () {
-					if (is_function(/*click*/ ctx[2])) /*click*/ ctx[2].apply(this, arguments);
-				});
-
-				mounted = true;
-			}
 		},
-		p(new_ctx, [dirty]) {
-			ctx = new_ctx;
-
+		p(ctx, dirty) {
 			if (default_slot) {
 				if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
 					update_slot_base(
@@ -4374,35 +4850,82 @@ function create_fragment$k(ctx) {
 					);
 				}
 			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (default_slot) default_slot.d(detaching);
+		}
+	};
+}
 
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div0, "style", /*_style*/ ctx[0]);
+function create_fragment$k(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				style: /*_style*/ ctx[2],
+				eventName: /*clickEventName*/ ctx[1],
+				$$slots: { default: [create_default_slot$1] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			attr(div, "class", "list-item svelte-1ocqru1");
+			attr(div, "style", /*listItemStyle*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(button, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const button_changes = {};
+			if (dirty & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
+			if (dirty & /*_style*/ 4) button_changes.style = /*_style*/ ctx[2];
+			if (dirty & /*clickEventName*/ 2) button_changes.eventName = /*clickEventName*/ ctx[1];
+
+			if (dirty & /*$$scope*/ 64) {
+				button_changes.$$scope = { dirty, ctx };
 			}
 
-			if (!current || dirty & /*listItemStyle*/ 2) {
-				attr(div1, "style", /*listItemStyle*/ ctx[1]);
+			button.$set(button_changes);
+
+			if (!current || dirty & /*listItemStyle*/ 8) {
+				attr(div, "style", /*listItemStyle*/ ctx[3]);
 			}
 		},
 		i(local) {
 			if (current) return;
-			transition_in(default_slot, local);
+			transition_in(button.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			transition_out(default_slot, local);
+			transition_out(button.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div1);
-			if (default_slot) default_slot.d(detaching);
-			mounted = false;
-			dispose();
+			if (detaching) detach(div);
+			destroy_component(button);
 		}
 	};
 }
 
 function instance$k($$self, $$props, $$invalidate) {
-	let click;
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { separator, background, direction, registerItem, unregisterItem } = getContext(LIST_CONTEXT_KEY);
@@ -4410,7 +4933,7 @@ function instance$k($$self, $$props, $$invalidate) {
 
 	const id = registerItem({
 		onMount({ index: _index, length: _length }) {
-			$$invalidate(5, index = _index);
+			$$invalidate(4, index = _index);
 		}
 	});
 
@@ -4423,25 +4946,15 @@ function instance$k($$self, $$props, $$invalidate) {
 	});
 
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(3, onClick = $$props.onClick);
-		if ('clickEventName' in $$props) $$invalidate(4, clickEventName = $$props.clickEventName);
-		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('clickEventName' in $$props) $$invalidate(1, clickEventName = $$props.clickEventName);
+		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
 		if ('$$scope' in $$props) $$invalidate(6, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*clickEventName, onClick*/ 24) {
-			$$invalidate(2, click = () => {
-				if (clickEventName) {
-					send_event(clickEventName);
-				}
-
-				execOnClickOperation(onClick);
-			});
-		}
-
-		if ($$self.$$.dirty & /*index*/ 32) {
-			$$invalidate(1, listItemStyle = (() => {
+		if ($$self.$$.dirty & /*index*/ 16) {
+			$$invalidate(3, listItemStyle = (() => {
 				let separatorStyleArray = [];
 
 				if (separator.type === "border") {
@@ -4485,13 +4998,13 @@ function instance$k($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [_style, listItemStyle, click, onClick, clickEventName, index, $$scope, slots];
+	return [onClick, clickEventName, _style, listItemStyle, index, slots, $$scope];
 }
 
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$k, create_fragment$k, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$j);
+		init(this, options, instance$k, create_fragment$k, safe_not_equal, { onClick: 0, clickEventName: 1, _style: 2 }, add_css$j);
 	}
 }