@plaidev/karte-action-sdk 1.1.154 → 1.1.156-28004317.e22f6b82

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 = [
@@ -139,13 +139,13 @@ const OnClickOperationOptions = [
 const LengthUnits = ['px', 'em', 'rem', 'vw', 'fr', '%'];
 /** @internal */
 const Fonts = [
-    'Noto Sans Japanese',
+    'Noto Sans JP',
     'M PLUS Rounded 1c',
     'M PLUS 1p',
     'Kosugi Maru',
     'Kosugi',
     'BIZ UDPGothic',
-    'Noto Serif Japanese',
+    'Noto Serif JP',
     'BIZ UDPMincho',
     'Roboto',
     'Open Sans',
@@ -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;
@@ -2654,249 +2654,754 @@ function create_if_block$6(ctx) {
 				mounted = true;
 			}
 		},
-		p: noop,
+		p: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment$u(ctx) {
+	let if_block_anchor;
+	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$7(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (/*backgroundOverray*/ ctx[0]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block$7(ctx);
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance$u($$self, $$props, $$invalidate) {
+	let { backgroundOverray = false } = $$props;
+	const dispatch = createEventDispatcher();
+	const click_handler = () => dispatch('click');
+
+	$$self.$$set = $$props => {
+		if ('backgroundOverray' in $$props) $$invalidate(0, backgroundOverray = $$props.backgroundOverray);
+	};
+
+	return [backgroundOverray, dispatch, click_handler];
+}
+
+class BackgroundOverray extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$u, create_fragment$u, safe_not_equal, { backgroundOverray: 0 }, add_css$r);
+	}
+}
+
+/* src/components/Button.svelte generated by Svelte v3.53.1 */
+
+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}");
+}
+
+// (41:0) {:else}
+function create_else_block$2(ctx) {
+	let button;
+	let current;
+	let mounted;
+	let dispose;
+	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");
+			if (default_slot) default_slot.c();
+			attr(button, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-1kj05ao"));
+			attr(button, "style", /*style*/ ctx[1]);
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+
+			if (default_slot) {
+				default_slot.m(button, null);
+			}
+
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*handleClickButton*/ ctx[3]);
+				mounted = 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(button, "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);
+			if (default_slot) default_slot.d(detaching);
+			mounted = false;
+			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() {
+			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, 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);
+		}
+	};
+}
+
+// (33:41) 
+function create_if_block_1$2(ctx) {
+	let a;
+	let a_href_value;
+	let a_target_value;
+	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() {
+			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) {
+			insert(target, a, anchor);
+
+			if (default_slot) {
+				default_slot.m(a, 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(a, "style", /*style*/ ctx[1]);
+			}
+
+			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(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(a);
+			if (default_slot) default_slot.d(detaching);
+		}
+	};
+}
+
+// (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);
-			mounted = false;
-			dispose();
+			destroy_component(button);
 		}
 	};
 }
 
-function create_fragment$t(ctx) {
-	let if_block_anchor;
-	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$6(ctx);
+// (163:10) <Button onClick={onClose} style={_closeStyle} eventName={closeEventName} eventValue={closeEventValue}>
+function create_default_slot_1$1(ctx) {
+	let svg;
+	let path;
 
 	return {
 		c() {
-			if (if_block) if_block.c();
-			if_block_anchor = empty();
+			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) {
-			if (if_block) if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
+			insert(target, svg, anchor);
+			append(svg, path);
 		},
-		p(ctx, [dirty]) {
-			if (/*backgroundOverray*/ ctx[0]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block$6(ctx);
-					if_block.c();
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
+		p(ctx, dirty) {
+			if (dirty & /*closeButtonColor*/ 256) {
+				attr(path, "fill", /*closeButtonColor*/ ctx[8]);
 			}
 		},
-		i: noop,
-		o: noop,
 		d(detaching) {
-			if (if_block) if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
+			if (detaching) detach(svg);
 		}
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
-	let { backgroundOverray = false } = $$props;
-	const dispatch = createEventDispatcher();
-	const click_handler = () => dispatch('click');
-
-	$$self.$$set = $$props => {
-		if ('backgroundOverray' in $$props) $$invalidate(0, backgroundOverray = $$props.backgroundOverray);
-	};
-
-	return [backgroundOverray, dispatch, click_handler];
-}
-
-class BackgroundOverray extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, instance$t, create_fragment$t, safe_not_equal, { backgroundOverray: 0 }, add_css$q);
-	}
-}
-
-/* src/components/Modal.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}");
-}
-
-// (149:0) {#if visible}
-function create_if_block$5(ctx) {
-	let div1;
+// (160:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+function create_default_slot$4(ctx) {
 	let t;
-	let div0;
-	let div1_style_value;
-	let div1_intro;
+	let div;
 	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);
+	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() {
-			div1 = element("div");
 			if (if_block) if_block.c();
 			t = space();
-			div0 = element("div");
+			div = element("div");
 			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(div, "class", "modal-content svelte-67dbus");
+			attr(div, "style", /*_style*/ ctx[4]);
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
-			if (if_block) if_block.m(div1, null);
-			append(div1, t);
-			append(div1, div0);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t, anchor);
+			insert(target, div, anchor);
 
 			if (default_slot) {
-				default_slot.m(div0, null);
+				default_slot.m(div, 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);
-				});
-
-				mounted = true;
-			}
 		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
-
-			if (/*closable*/ ctx[14]) {
+		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();
-					if_block.m(div1, t);
+					transition_in(if_block, 1);
+					if_block.m(t.parentNode, t);
 				}
 			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 268435456)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 536870912)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[28],
+						/*$$scope*/ ctx[29],
 						!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[29])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[29], 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*/ 16) {
+				attr(div, "style", /*_style*/ ctx[4]);
 			}
 		},
 		i(local) {
 			if (current) return;
+			transition_in(if_block);
 			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) {
+			transition_out(if_block);
 			transition_out(default_slot, local);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div1);
-			if (if_block) if_block.d();
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t);
+			if (detaching) detach(div);
 			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;
-
-	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] + "");
-		},
-		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);
-				});
-
-				mounted = true;
-			}
-		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
-
-			if (dirty & /*closeButtonColor*/ 4) {
-				attr(path, "fill", /*closeButtonColor*/ ctx[2]);
-			}
-
-			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);
-			}
-		},
-		d(detaching) {
-			if (detaching) detach(button);
-			mounted = false;
-			dispose();
 		}
 	};
 }
@@ -2911,15 +3416,15 @@ function create_fragment$s(ctx) {
 
 	backgroundoverray = new BackgroundOverray({
 			props: {
-				backgroundOverray: /*backgroundOverray*/ ctx[6]
+				backgroundOverray: /*backgroundOverray*/ ctx[11]
 			}
 		});
 
 	backgroundoverray.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[13])) /*backgroundClick*/ ctx[13].apply(this, arguments);
+		if (is_function(/*backgroundClick*/ ctx[18])) /*backgroundClick*/ ctx[18].apply(this, arguments);
 	});
 
-	let if_block = /*visible*/ ctx[7] && create_if_block$5(ctx);
+	let if_block = /*visible*/ ctx[12] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -2937,7 +3442,7 @@ function create_fragment$s(ctx) {
 
 			if (!mounted) {
 				dispose = listen(window, "keydown", function () {
-					if (is_function(/*handle_keydown*/ ctx[8])) /*handle_keydown*/ ctx[8].apply(this, arguments);
+					if (is_function(/*handle_keydown*/ ctx[13])) /*handle_keydown*/ ctx[13].apply(this, arguments);
 				});
 
 				mounted = true;
@@ -2946,14 +3451,14 @@ function create_fragment$s(ctx) {
 		p(new_ctx, [dirty]) {
 			ctx = new_ctx;
 			const backgroundoverray_changes = {};
-			if (dirty & /*backgroundOverray*/ 64) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[6];
+			if (dirty & /*backgroundOverray*/ 2048) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[11];
 			backgroundoverray.$set(backgroundoverray_changes);
 
-			if (/*visible*/ ctx[7]) {
+			if (/*visible*/ ctx[12]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*visible*/ 128) {
+					if (dirty & /*visible*/ 4096) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -2995,7 +3500,6 @@ function create_fragment$s(ctx) {
 }
 
 function instance$s($$self, $$props, $$invalidate) {
-	let click;
 	let close;
 	let closable;
 	let backgroundClick;
@@ -3008,7 +3512,7 @@ function instance$s($$self, $$props, $$invalidate) {
 	let handle_keydown;
 	let visible;
 	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(16, $maximumZindex = $$value));
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(20, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { clickEventName = '' } = $$props;
@@ -3027,47 +3531,37 @@ function instance$s($$self, $$props, $$invalidate) {
 	let modal;
 
 	onMount(() => {
-		$$invalidate(7, visible = true);
+		$$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
 		);
@@ -3642,7 +4135,7 @@ function add_css$n(target) {
 	append_styles(target, "svelte-13cs3g2", ".text-element-wrapper.svelte-13cs3g2.svelte-13cs3g2{position:relative;height:100%}.text-element.svelte-13cs3g2.svelte-13cs3g2{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto}.text-element-inner.svelte-13cs3g2.svelte-13cs3g2{width:100%;height:auto}.text-direction-vertical.svelte-13cs3g2.svelte-13cs3g2{writing-mode:vertical-rl}.text-direction-vertical.svelte-13cs3g2 .text-element-inner.svelte-13cs3g2{width:auto;height:100%}.tooltip.svelte-13cs3g2.svelte-13cs3g2{display:none;position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;background-color:#3d4948;white-space:nowrap;padding:4px 8px 4px 8px;border-radius:4px;font-size:12px;z-index:2147483647}.tooltip.svelte-13cs3g2.svelte-13cs3g2:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-13cs3g2.svelte-13cs3g2{display:block}.tooltip-error.svelte-13cs3g2.svelte-13cs3g2{background-color:#c00}.tooltip-error.svelte-13cs3g2.svelte-13cs3g2:before{border-bottom:7px solid #c00}");
 }
 
-// (59:2) {#if enableCopy}
+// (58:2) {#if enableCopy}
 function create_if_block$3(ctx) {
 	let div0;
 	let t1;
@@ -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);
+		}
+	};
+}
+
+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 }
+			}
+		});
 
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div0, "style", /*_style*/ ctx[0]);
+	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);
 	}
 }
 
@@ -5102,7 +5615,7 @@ function get_each_context$5(ctx, list, i) {
 	return child_ctx;
 }
 
-// (88:2) {#each _options as option, i}
+// (89:2) {#each _options as option, i}
 function create_each_block$5(ctx) {
 	let label;
 	let input;
@@ -5182,6 +5695,9 @@ function create_each_block$5(ctx) {
 
 function create_fragment$f(ctx) {
 	let div;
+	let link;
+	let link_href_value;
+	let t;
 	let each_value = /*_options*/ ctx[4];
 	let each_blocks = [];
 
@@ -5192,22 +5708,32 @@ function create_fragment$f(ctx) {
 	return {
 		c() {
 			div = element("div");
+			link = element("link");
+			t = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
+			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[4].join('')}`);
+			attr(link, "rel", "stylesheet");
 			attr(div, "class", "radio-buttons svelte-17s08g");
 			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, link);
+			append(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
 			}
 		},
 		p(ctx, [dirty]) {
+			if (dirty & /*_options*/ 16 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[4].join('')}`)) {
+				attr(link, "href", link_href_value);
+			}
+
 			if (dirty & /*_textStyle, _options, buttonStyle, name, _value, handleChange*/ 189) {
 				each_value = /*_options*/ ctx[4];
 				let i;
@@ -5366,7 +5892,7 @@ function get_each_context$4(ctx, list, i) {
 	return child_ctx;
 }
 
-// (98:10) {:else}
+// (99:10) {:else}
 function create_else_block(ctx) {
 	let t;
 
@@ -5386,7 +5912,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (96:10) {#if option}
+// (97:10) {#if option}
 function create_if_block$2(ctx) {
 	let t_value = /*option*/ ctx[18] + "";
 	let t;
@@ -5407,7 +5933,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-// (94:6) {#each _options as option, i}
+// (95:6) {#each _options as option, i}
 function create_each_block$4(ctx) {
 	let option;
 	let t;
@@ -5467,8 +5993,11 @@ function create_each_block$4(ctx) {
 
 function create_fragment$e(ctx) {
 	let div1;
+	let link;
+	let link_href_value;
+	let t0;
 	let select;
-	let t;
+	let t1;
 	let div0;
 	let mounted;
 	let dispose;
@@ -5482,14 +6011,18 @@ function create_fragment$e(ctx) {
 	return {
 		c() {
 			div1 = element("div");
+			link = element("link");
+			t0 = space();
 			select = element("select");
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
-			t = space();
+			t1 = space();
 			div0 = element("div");
+			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${[/*placeholder*/ ctx[0], .../*_options*/ ctx[4]].join('')}`);
+			attr(link, "rel", "stylesheet");
 			attr(select, "class", "select-select svelte-1n4ag74");
 			attr(select, "style", /*style*/ ctx[3]);
 			attr(div0, "class", "select-icon svelte-1n4ag74");
@@ -5498,13 +6031,15 @@ function create_fragment$e(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
+			append(div1, link);
+			append(div1, t0);
 			append(div1, select);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(select, null);
 			}
 
-			append(div1, t);
+			append(div1, t1);
 			append(div1, div0);
 
 			if (!mounted) {
@@ -5513,6 +6048,10 @@ function create_fragment$e(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
+			if (dirty & /*placeholder, _options*/ 17 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${[/*placeholder*/ ctx[0], .../*_options*/ ctx[4]].join('')}`)) {
+				attr(link, "href", link_href_value);
+			}
+
 			if (dirty & /*_options, _value, placeholder*/ 19) {
 				each_value = /*_options*/ ctx[4];
 				let i;
@@ -5697,7 +6236,7 @@ function get_each_context$3(ctx, list, i) {
 	return child_ctx;
 }
 
-// (94:2) {#each _options as option, i}
+// (95:2) {#each _options as option, i}
 function create_each_block$3(ctx) {
 	let label;
 	let input;
@@ -5793,6 +6332,9 @@ function create_each_block$3(ctx) {
 
 function create_fragment$d(ctx) {
 	let div;
+	let link;
+	let link_href_value;
+	let t;
 	let each_value = /*_options*/ ctx[3];
 	let each_blocks = [];
 
@@ -5803,22 +6345,32 @@ function create_fragment$d(ctx) {
 	return {
 		c() {
 			div = element("div");
+			link = element("link");
+			t = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
+			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[3].join('')}`);
+			attr(link, "rel", "stylesheet");
 			attr(div, "class", "check-boxes svelte-o1ztcf");
 			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, link);
+			append(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
 			}
 		},
 		p(ctx, [dirty]) {
+			if (dirty & /*_options*/ 8 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[3].join('')}`)) {
+				attr(link, "href", link_href_value);
+			}
+
 			if (dirty & /*_textStyle, _options, isCheckedArray, styleVariables, name, handleChange*/ 189) {
 				each_value = /*_options*/ ctx[3];
 				let i;
@@ -5982,7 +6534,7 @@ function get_each_context$2(ctx, list, i) {
 	return child_ctx;
 }
 
-// (50:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
+// (52:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
 function create_each_block$2(ctx) {
 	let div;
 	let t0_value = /*i*/ ctx[11] + "";
@@ -6031,6 +6583,8 @@ function create_each_block$2(ctx) {
 
 function create_fragment$c(ctx) {
 	let div;
+	let link;
+	let t;
 	let each_value = [...Array(/*count*/ ctx[0]).keys()].map(func$1);
 	let each_blocks = [];
 
@@ -6041,15 +6595,21 @@ function create_fragment$c(ctx) {
 	return {
 		c() {
 			div = element("div");
+			link = element("link");
+			t = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
+			attr(link, "href", `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=0123456789`);
+			attr(link, "rel", "stylesheet");
 			attr(div, "class", "rating-buttons svelte-176k37j");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, link);
+			append(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
@@ -6096,8 +6656,8 @@ function instance$c($$self, $$props, $$invalidate) {
 	let { name = '' } = $$props;
 	let { required = false } = $$props;
 	let { count = 5 } = $$props;
-	let { buttonStyle = 'width: 32px; height: 32px; font-size: 12px; font-weight: bold; border-radius: 17px; color: #333; background-color: rgba(0, 16, 14, 0.06); box-shadow: none;' } = $$props;
-	let { buttonActiveStyle = 'color: #333; background-color: #2aab9f; box-shadow: 0px 0px 0px rgba(0, 16, 14, 0.03), 0px 8px 16px rgba(0, 16, 14, 0.3);' } = $$props;
+	let { buttonStyle = 'width: 32px; height: 32px; font-size: 12px; font-weight: bold; border-radius: 17px; color: #333; background-color: rgba(0, 16, 14, 0.06); box-shadow: 0px 0px 16px 0px rgba(0, 16, 14, 0);' } = $$props;
+	let { buttonActiveStyle = 'color: #333; background-color: #2aab9f; box-shadow: 0px 8px 16px 0px rgba(0, 16, 14, 0.3);' } = $$props;
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({