@plaidev/karte-action-sdk 1.1.156 → 1.1.157-28011607.f788fa7c

package/dist/hydrate/index.es.js

@@ -1,8 +1,7 @@
 import '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, claim_component, claim_space, mount_component, insert_hydration, 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, claim_element, children, attr, noop, listen, null_to_empty, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, append_hydration, destroy_each, text, claim_text, set_data, src_url_equal, HtmlTagHydration, claim_html_tag } from 'svelte/internal';
+import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, setContext, getContext, createEventDispatcher } from 'svelte';
+import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, claim_component, claim_space, mount_component, insert_hydration, 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, claim_element, children, attr, noop, listen, null_to_empty, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, append_hydration, destroy_each, text, claim_text, set_data, src_url_equal, HtmlTagHydration, claim_html_tag, construct_svelte_component } from 'svelte/internal';
 
 /** @internal */
 const PropTypes = [
@@ -1074,25 +1073,14 @@ async function loadGlobalStyle(href) {
         link.addEventListener('error', () => reject(link));
     });
 }
-/**
- * {@link hashCode} generate hash with FNV-1a hash
- *
- * @param s - Inputed string
- *
- * @returns Hashed string
- *
- * @see https://stackoverflow.com/a/22429679
- *
- * @internal
- */
-function hashCode(s) {
-    const SEED = 0x41653150;
-    let hash = SEED;
-    Array.from(s).forEach((c, index) => {
-        hash ^= c.charCodeAt(index);
-        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
-    });
-    return ('0000000' + (hash >>> 0).toString(16)).substr(-8);
+// @internal
+function getCssVariables(data) {
+    return Object.entries(data)
+        .filter(([key, value]) => {
+        return ['string', 'number'].includes(typeof value) && key.startsWith('--');
+    })
+        .map(([key, value]) => `${key}:${value}`)
+        .join(';');
 }
 
 /**
@@ -2271,22 +2259,63 @@ var widget = /*#__PURE__*/Object.freeze({
   storage: storage
 });
 
+/**
+ * エレメントをマウントしたときに実行される関数の登録
+ *
+ * @param fn - マウントしたときに実行される関数
+ */
+const onMount = onMount$1;
+/**
+ * エレメントを破棄したときに実行される関数の登録
+ *
+ * @param fn - マウントしたときに実行される関数
+ */
+const onDestory = onDestroy$1;
+/**
+ * エレメントを更新する前に実行される関数の登録
+ *
+ * @param fn - マウントしたときに実行される関数
+ */
+const beforeUpdate = beforeUpdate$1;
+/**
+ * エレメントを更新した後に実行される関数の登録
+ *
+ * @param fn - マウントしたときに実行される関数
+ */
+const afterUpdate = afterUpdate$1;
+/**
+ * エレメントのライフサイクルを進める
+ *
+ * @returns Promise<void>
+ */
+const tick = tick$1;
+// @internal
+const LAYOUT_COMPONENT_NAMES = [
+    'BreakPoint',
+    'BreakPointItem',
+    'Grid',
+    'GridItem',
+    'Modal',
+    'State',
+    'StateItem',
+];
+
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$t(target) {
+function add_css$u(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$t);
+		init(this, options, null, null, safe_not_equal, {}, add_css$u);
 	}
 }
 
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$w(ctx) {
+function create_fragment$x(ctx) {
 	let normalize;
 	let t;
 	let current;
@@ -2350,7 +2379,7 @@ function create_fragment$w(ctx) {
 	};
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -2363,13 +2392,13 @@ function instance$w($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$w, create_fragment$w, safe_not_equal, {});
+		init(this, options, instance$x, create_fragment$x, safe_not_equal, {});
 	}
 }
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$s(target) {
+function add_css$t(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
@@ -2446,7 +2475,7 @@ function create_if_block$8(ctx) {
 	};
 }
 
-function create_fragment$v(ctx) {
+function create_fragment$w(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$8(ctx);
@@ -2511,7 +2540,7 @@ function getStateItemContext() {
 	return getContext(STATE_ITEM_CONTEXT_KEY);
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -2537,13 +2566,13 @@ function instance$v($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$v, create_fragment$v, safe_not_equal, { path: 0 }, add_css$s);
+		init(this, options, instance$w, create_fragment$w, safe_not_equal, { path: 0 }, add_css$t);
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
-function add_css$r(target) {
+function add_css$s(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}");
 }
 
@@ -2583,7 +2612,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
 	let if_block_anchor;
 	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$7(ctx);
 
@@ -2623,7 +2652,7 @@ function create_fragment$u(ctx) {
 	};
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
 	let { backgroundOverray = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
@@ -2638,13 +2667,13 @@ function instance$u($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$u, create_fragment$u, safe_not_equal, { backgroundOverray: 0 }, add_css$r);
+		init(this, options, instance$v, create_fragment$v, safe_not_equal, { backgroundOverray: 0 }, add_css$s);
 	}
 }
 
 /* src/components/Button.svelte generated by Svelte v3.53.1 */
 
-function add_css$q(target) {
+function add_css$r(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}");
 }
 
@@ -2951,7 +2980,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
@@ -3028,7 +3057,7 @@ function create_fragment$t(ctx) {
 
 const BUTTON_CLASS = 'button';
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
 	let disabled;
 	let $valuesAreValid;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -3094,8 +3123,8 @@ class Button extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$t,
-			create_fragment$t,
+			instance$u,
+			create_fragment$u,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -3103,14 +3132,14 @@ class Button extends SvelteComponent {
 				eventValue: 6,
 				style: 1
 			},
-			add_css$q
+			add_css$r
 		);
 	}
 }
 
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
-function add_css$p(target) {
+function add_css$q(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}");
 }
 
@@ -3127,7 +3156,7 @@ function create_if_block$5(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				eventName: /*clickEventName*/ ctx[1],
 				eventValue: /*clickEventValue*/ ctx[2],
-				$$slots: { default: [create_default_slot$4] },
+				$$slots: { default: [create_default_slot$6] },
 				$$scope: { ctx }
 			}
 		});
@@ -3339,7 +3368,7 @@ function create_default_slot_1$1(ctx) {
 }
 
 // (160:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
-function create_default_slot$4(ctx) {
+function create_default_slot$6(ctx) {
 	let t;
 	let div;
 	let current;
@@ -3442,7 +3471,7 @@ function create_default_slot$4(ctx) {
 	};
 }
 
-function create_fragment$s(ctx) {
+function create_fragment$t(ctx) {
 	let backgroundoverray;
 	let t;
 	let if_block_anchor;
@@ -3541,7 +3570,7 @@ function create_fragment$s(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let close;
 	let closable;
 	let backgroundClick;
@@ -3572,7 +3601,7 @@ function instance$s($$self, $$props, $$invalidate) {
 	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
 	let modal;
 
-	onMount(() => {
+	onMount$1(() => {
 		$$invalidate(12, visible = true);
 	});
 
@@ -3724,8 +3753,8 @@ class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$s,
-			create_fragment$s,
+			instance$t,
+			create_fragment$t,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -3741,14 +3770,14 @@ class Modal extends SvelteComponent {
 				closeButtonColor: 8,
 				_closeStyle: 9
 			},
-			add_css$p
+			add_css$q
 		);
 	}
 }
 
 /* src/components/Grid.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$r(ctx) {
+function create_fragment$s(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -3816,7 +3845,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -3861,7 +3890,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$r, create_fragment$r, safe_not_equal, {
+		init(this, options, instance$s, create_fragment$s, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -3874,11 +3903,11 @@ class Grid extends SvelteComponent {
 
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$o(target) {
+function add_css$p(target) {
 	append_styles(target, "svelte-n7kdl3", ".grid-item.svelte-n7kdl3{word-break:break-all;position:relative}.grid-item-inner.svelte-n7kdl3{position:absolute;inset:0}");
 }
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -3910,8 +3939,8 @@ function create_fragment$q(ctx) {
 		h() {
 			attr(div0, "class", "grid-item-inner svelte-n7kdl3");
 			attr(div1, "class", "grid-item svelte-n7kdl3");
-			attr(div1, "data-grid-item-id", /*gridItemId*/ ctx[1]);
-			attr(div1, "style", /*_style*/ ctx[0]);
+			attr(div1, "data-grid-item-id", /*id*/ ctx[0]);
+			attr(div1, "style", /*_style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div1, anchor);
@@ -3939,8 +3968,12 @@ function create_fragment$q(ctx) {
 				}
 			}
 
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div1, "style", /*_style*/ ctx[0]);
+			if (!current || dirty & /*id*/ 1) {
+				attr(div1, "data-grid-item-id", /*id*/ ctx[0]);
+			}
+
+			if (!current || dirty & /*_style*/ 2) {
+				attr(div1, "style", /*_style*/ ctx[1]);
 			}
 		},
 		i(local) {
@@ -3959,7 +3992,7 @@ function create_fragment$q(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -3968,15 +4001,9 @@ function instance$q($$self, $$props, $$invalidate) {
 	let { y2 } = $$props;
 	let { z } = $$props;
 	let { background = 'transparent' } = $$props;
-	let gridItemIdRaw = `${y1}-${x1}-${y2}-${x2}`;
-
-	if (z) {
-		gridItemIdRaw += `-${z}`;
-	}
-
-	const gridItemId = hashCode(gridItemIdRaw);
+	let { id } = $$props;
 
-	onMount(() => {
+	onMount$1(() => {
 		setMaximumZindex(z);
 	});
 
@@ -3987,12 +4014,13 @@ function instance$q($$self, $$props, $$invalidate) {
 		if ('y2' in $$props) $$invalidate(5, y2 = $$props.y2);
 		if ('z' in $$props) $$invalidate(6, z = $$props.z);
 		if ('background' in $$props) $$invalidate(7, background = $$props.background);
+		if ('id' in $$props) $$invalidate(0, id = $$props.id);
 		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*y1, x1, y2, x2, z, background*/ 252) {
-			$$invalidate(0, _style = [
+			$$invalidate(1, _style = [
 				`grid-area: ${y1 + 1} / ${x1 + 1} / ${y2 + 2} / ${x2 + 2}`,
 				`z-index: ${z}`,
 				`background: ${background}`,
@@ -4002,7 +4030,7 @@ function instance$q($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [_style, gridItemId, x1, x2, y1, y2, z, background, $$scope, slots];
+	return [id, _style, x1, x2, y1, y2, z, background, $$scope, slots];
 }
 
 class GridItem extends SvelteComponent {
@@ -4012,8 +4040,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$q,
-			create_fragment$q,
+			instance$r,
+			create_fragment$r,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -4021,9 +4049,10 @@ class GridItem extends SvelteComponent {
 				y1: 4,
 				y2: 5,
 				z: 6,
-				background: 7
+				background: 7,
+				id: 0
 			},
-			add_css$o
+			add_css$p
 		);
 	}
 }
@@ -4129,7 +4158,7 @@ function create_each_block$6(ctx) {
 	};
 }
 
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
 	let each_1_anchor;
 	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
@@ -4195,7 +4224,7 @@ function create_fragment$p(ctx) {
 
 const regexp = /(\r?\n)/;
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	let items;
 	let { text = 'サンプルSample' } = $$props;
 
@@ -4215,17 +4244,17 @@ function instance$p($$self, $$props, $$invalidate) {
 class RenderText extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$p, create_fragment$p, safe_not_equal, { text: 1 });
+		init(this, options, instance$q, create_fragment$q, safe_not_equal, { text: 1 });
 	}
 }
 
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$n(target) {
+function add_css$o(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 t0;
@@ -4278,7 +4307,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-function create_fragment$o(ctx) {
+function create_fragment$p(ctx) {
 	let div2;
 	let link;
 	let link_href_value;
@@ -4396,7 +4425,7 @@ function create_fragment$o(ctx) {
 	};
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
 	let { enableCopy = false } = $$props;
@@ -4476,8 +4505,8 @@ class TextElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$o,
-			create_fragment$o,
+			instance$p,
+			create_fragment$p,
 			safe_not_equal,
 			{
 				text: 0,
@@ -4486,19 +4515,19 @@ class TextElement extends SvelteComponent {
 				textDirection: 2,
 				_style: 8
 			},
-			add_css$n
+			add_css$o
 		);
 	}
 }
 
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$m(target) {
+function add_css$n(target) {
 	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) {
+function create_default_slot$5(ctx) {
 	let rendertext;
 	let current;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
@@ -4534,7 +4563,7 @@ function create_default_slot$3(ctx) {
 	};
 }
 
-function create_fragment$n(ctx) {
+function create_fragment$o(ctx) {
 	let div;
 	let link;
 	let link_href_value;
@@ -4547,7 +4576,7 @@ function create_fragment$n(ctx) {
 				onClick: /*onClick*/ ctx[1],
 				style: /*style*/ ctx[3],
 				eventName: /*eventName*/ ctx[2],
-				$$slots: { default: [create_default_slot$3] },
+				$$slots: { default: [create_default_slot$5] },
 				$$scope: { ctx }
 			}
 		});
@@ -4613,7 +4642,7 @@ function create_fragment$n(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -4645,8 +4674,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$n,
-			create_fragment$n,
+			instance$o,
+			create_fragment$o,
 			safe_not_equal,
 			{
 				text: 0,
@@ -4655,19 +4684,19 @@ class TextButtonElement extends SvelteComponent {
 				_buttonStyle: 4,
 				_style: 5
 			},
-			add_css$m
+			add_css$n
 		);
 	}
 }
 
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$l(target) {
+function add_css$m(target) {
 	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%}");
 }
 
 // (40:2) <Button {onClick} style={_style} {eventName}>
-function create_default_slot$2(ctx) {
+function create_default_slot$4(ctx) {
 	let img;
 	let img_src_value;
 
@@ -4720,7 +4749,7 @@ function create_default_slot$2(ctx) {
 	};
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
 	let div;
 	let button;
 	let div_class_value;
@@ -4731,7 +4760,7 @@ function create_fragment$m(ctx) {
 				onClick: /*onClick*/ ctx[3],
 				style: /*_style*/ ctx[6],
 				eventName: /*eventName*/ ctx[4],
-				$$slots: { default: [create_default_slot$2] },
+				$$slots: { default: [create_default_slot$4] },
 				$$scope: { ctx }
 			}
 		});
@@ -4789,7 +4818,7 @@ function create_fragment$m(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let { src = 'https://admin.karte.io/action-editor2/public/images/no_image_en.svg' } = $$props;
 	let { alt = 'No Image' } = $$props;
 	let { transport = false } = $$props;
@@ -4818,8 +4847,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$m,
-			create_fragment$m,
+			instance$n,
+			create_fragment$n,
 			safe_not_equal,
 			{
 				src: 0,
@@ -4830,18 +4859,18 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 5,
 				_style: 6
 			},
-			add_css$l
+			add_css$m
 		);
 	}
 }
 
 /* src/components/List.svelte generated by Svelte v3.53.1 */
 
-function add_css$k(target) {
+function add_css$l(target) {
 	append_styles(target, "svelte-dfqtyx", ".list.svelte-dfqtyx{display:flex;width:100%;height:100%;overflow:hidden}");
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[6].default;
@@ -4911,7 +4940,7 @@ function create_fragment$l(ctx) {
 
 const LIST_CONTEXT_KEY = Symbol();
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'vertical' } = $$props;
@@ -4934,7 +4963,7 @@ function instance$l($$self, $$props, $$invalidate) {
 		}
 	});
 
-	onMount(async () => {
+	onMount$1(async () => {
 		items.forEach((item, index) => {
 			item.onMount({ index, length: items.length });
 		});
@@ -4978,8 +5007,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$l,
-			create_fragment$l,
+			instance$m,
+			create_fragment$m,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -4987,19 +5016,19 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$k
+			add_css$l
 		);
 	}
 }
 
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$j(target) {
+function add_css$k(target) {
 	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}");
 }
 
 // (67:2) <Button {onClick} style={_style} eventName={clickEventName}>
-function create_default_slot$1(ctx) {
+function create_default_slot$3(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[5].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
@@ -5049,7 +5078,7 @@ function create_default_slot$1(ctx) {
 	};
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
 	let div;
 	let button;
 	let current;
@@ -5059,7 +5088,7 @@ function create_fragment$k(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*_style*/ ctx[2],
 				eventName: /*clickEventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$1] },
+				$$slots: { default: [create_default_slot$3] },
 				$$scope: { ctx }
 			}
 		});
@@ -5118,7 +5147,7 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { separator, background, direction, registerItem, unregisterItem } = getContext(LIST_CONTEXT_KEY);
@@ -5197,17 +5226,17 @@ function instance$k($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$k, create_fragment$k, safe_not_equal, { onClick: 0, clickEventName: 1, _style: 2 }, add_css$j);
+		init(this, options, instance$l, create_fragment$l, safe_not_equal, { onClick: 0, clickEventName: 1, _style: 2 }, add_css$k);
 	}
 }
 
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$i(target) {
+function add_css$j(target) {
 	append_styles(target, "svelte-1wusvum", ".embed.svelte-1wusvum{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%}.embed.svelte-1wusvum iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
 	let div;
 
 	return {
@@ -5243,7 +5272,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = '' } = $$props;
 
@@ -5258,17 +5287,17 @@ function instance$j($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$j, create_fragment$j, safe_not_equal, { code: 0, _style: 1 }, add_css$i);
+		init(this, options, instance$k, create_fragment$k, safe_not_equal, { code: 0, _style: 1 }, add_css$j);
 	}
 }
 
 /* src/components/MovieYouTubeElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$h(target) {
+function add_css$i(target) {
 	append_styles(target, "svelte-17rkg8u", ".embed.svelte-17rkg8u{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%}.embed.svelte-17rkg8u iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
 	let div1;
 	let div0;
 
@@ -5310,7 +5339,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId = "sSgN-L4DU0c" } = $$props;
@@ -5435,7 +5464,7 @@ function instance$i($$self, $$props, $$invalidate) {
 			});
 	}
 
-	onMount(() => {
+	onMount$1(() => {
 		setTimeout(
 			() => {
 				// @ts-ignore
@@ -5489,8 +5518,8 @@ class MovieYouTubeElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$i,
-			create_fragment$i,
+			instance$j,
+			create_fragment$j,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -5500,18 +5529,18 @@ class MovieYouTubeElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$h
+			add_css$i
 		);
 	}
 }
 
 /* src/components/MovieVimeoElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$g(target) {
+function add_css$h(target) {
 	append_styles(target, "svelte-17rkg8u", ".embed.svelte-17rkg8u{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%}.embed.svelte-17rkg8u iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$i(ctx) {
 	let div1;
 	let div0;
 
@@ -5553,7 +5582,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId = "201239468" } = $$props;
@@ -5648,7 +5677,7 @@ function instance$h($$self, $$props, $$invalidate) {
 		onPlayerReady();
 	}
 
-	onMount(() => {
+	onMount$1(() => {
 		setTimeout(
 			() => {
 				// @ts-ignore
@@ -5696,8 +5725,8 @@ class MovieVimeoElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$h,
-			create_fragment$h,
+			instance$i,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -5707,18 +5736,18 @@ class MovieVimeoElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$g
+			add_css$h
 		);
 	}
 }
 
 /* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
 
-function add_css$f(target) {
+function add_css$g(target) {
 	append_styles(target, "svelte-kyay3k", ".textarea-wrapper.svelte-kyay3k{display:flex;align-items:center;width:100%;height:100%}.textarea.svelte-kyay3k{width:100%;resize:none}");
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$h(ctx) {
 	let div;
 	let textarea;
 	let mounted;
@@ -5788,7 +5817,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let $value;
 	let { name = '' } = $$props;
 	let { required = true } = $$props;
@@ -5829,8 +5858,8 @@ class FormTextarea extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$g,
-			create_fragment$g,
+			instance$h,
+			create_fragment$h,
 			safe_not_equal,
 			{
 				name: 6,
@@ -5838,14 +5867,14 @@ class FormTextarea extends SvelteComponent {
 				rows: 1,
 				placeholder: 2
 			},
-			add_css$f
+			add_css$g
 		);
 	}
 }
 
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
-function add_css$e(target) {
+function add_css$f(target) {
 	append_styles(target, "svelte-17s08g", ".radio-buttons.svelte-17s08g{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-17s08g{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-17s08g{appearance:none;margin:0;box-sizing:border-box;border-radius:var(--size);position:relative;width:var(--size);height:var(--size);border:solid calc(var(--size) / 3) var(--color-main);background-color:var(--color-sub);cursor:pointer;flex:none}.radio-button-input.svelte-17s08g:checked{border:solid calc(var(--size) / 3) var(--color-main-active);background-color:var(--color-sub-active);box-shadow:0px 1px 8px 2px rgba(18,160,160,.08),0px 1px 4px -1px rgba(18,160,160,.24)}.radio-button-text.svelte-17s08g{margin-left:0.5em}");
 }
 
@@ -5856,7 +5885,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;
@@ -5957,8 +5986,11 @@ function create_each_block$5(ctx) {
 	};
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
 	let div;
+	let link;
+	let link_href_value;
+	let t;
 	let each_value = /*_options*/ ctx[4];
 	let each_blocks = [];
 
@@ -5969,6 +6001,8 @@ 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();
@@ -5979,6 +6013,8 @@ function create_fragment$f(ctx) {
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true, style: true });
 			var div_nodes = children(div);
+			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
+			t = claim_space(div_nodes);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].l(div_nodes);
@@ -5988,17 +6024,25 @@ function create_fragment$f(ctx) {
 			this.h();
 		},
 		h() {
+			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_hydration(target, div, anchor);
+			append_hydration(div, link);
+			append_hydration(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;
@@ -6035,7 +6079,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let _options;
 	let buttonStyle;
 	let _value;
@@ -6126,8 +6170,8 @@ class FormRadioButtons extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$f,
-			create_fragment$f,
+			instance$g,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				name: 0,
@@ -6139,14 +6183,14 @@ class FormRadioButtons extends SvelteComponent {
 				buttonColor: 11,
 				buttonColorActive: 12
 			},
-			add_css$e
+			add_css$f
 		);
 	}
 }
 
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$e(target) {
 	append_styles(target, "svelte-1n4ag74", ".select.svelte-1n4ag74{width:100%;height:100%}.select-select.svelte-1n4ag74{position:relative;appearance:none;width:100%;height:100%}.select-select.svelte-1n4ag74:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.select-icon.svelte-1n4ag74{position:absolute;width:calc(var(--icon-size) / 1.41);height:calc(var(--icon-size) / 1.41);top:calc(50% - calc(var(--icon-size) / 4));right:calc(var(--icon-size) * 1.2);box-sizing:border-box;border-right:solid 2px var(--icon-color);border-top:solid 2px var(--icon-color);transform:translateY(-35.4%) rotate(135deg);pointer-events:none}");
 }
 
@@ -6157,7 +6201,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;
 
@@ -6180,7 +6224,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;
@@ -6204,7 +6248,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;
@@ -6273,10 +6317,13 @@ function create_each_block$4(ctx) {
 	};
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
 	let div1;
+	let link;
+	let link_href_value;
+	let t0;
 	let select;
-	let t;
+	let t1;
 	let div0;
 	let mounted;
 	let dispose;
@@ -6290,19 +6337,23 @@ 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");
 			this.h();
 		},
 		l(nodes) {
 			div1 = claim_element(nodes, "DIV", { class: true, style: true });
 			var div1_nodes = children(div1);
+			link = claim_element(div1_nodes, "LINK", { href: true, rel: true });
+			t0 = claim_space(div1_nodes);
 			select = claim_element(div1_nodes, "SELECT", { class: true, style: true });
 			var select_nodes = children(select);
 
@@ -6311,13 +6362,15 @@ function create_fragment$e(ctx) {
 			}
 
 			select_nodes.forEach(detach);
-			t = claim_space(div1_nodes);
+			t1 = claim_space(div1_nodes);
 			div0 = claim_element(div1_nodes, "DIV", { class: true });
 			children(div0).forEach(detach);
 			div1_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
+			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");
@@ -6326,13 +6379,15 @@ function create_fragment$e(ctx) {
 		},
 		m(target, anchor) {
 			insert_hydration(target, div1, anchor);
+			append_hydration(div1, link);
+			append_hydration(div1, t0);
 			append_hydration(div1, select);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(select, null);
 			}
 
-			append_hydration(div1, t);
+			append_hydration(div1, t1);
 			append_hydration(div1, div0);
 
 			if (!mounted) {
@@ -6341,6 +6396,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;
@@ -6383,7 +6442,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let _options;
 	let style;
 	let styleVariables;
@@ -6492,8 +6551,8 @@ class FormSelect extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$e,
-			create_fragment$e,
+			instance$f,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				name: 7,
@@ -6507,14 +6566,14 @@ class FormSelect extends SvelteComponent {
 				iconColor: 14,
 				iconSize: 15
 			},
-			add_css$d
+			add_css$e
 		);
 	}
 }
 
 /* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
 
-function add_css$c(target) {
+function add_css$d(target) {
 	append_styles(target, "svelte-o1ztcf", ".check-boxes.svelte-o1ztcf.svelte-o1ztcf{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.check-box.svelte-o1ztcf.svelte-o1ztcf{display:flex;align-items:center;position:relative;cursor:pointer}.check-box-input.svelte-o1ztcf.svelte-o1ztcf{width:0;height:0;margin:0}.check-box-check.svelte-o1ztcf.svelte-o1ztcf{display:inline-flex;background-color:var(--color-main);width:var(--size);height:var(--size);border-radius:calc(var(--size) / 4);justify-content:center;align-items:center;flex:none}.check-box-icon.svelte-o1ztcf.svelte-o1ztcf{display:inline-block;--icon-size:calc(var(--size) * 3 / 4);width:var(--icon-size);height:var(--icon-size)}.check-box-icon.svelte-o1ztcf.svelte-o1ztcf:after{content:'';display:block;box-sizing:border-box;width:45%;height:91%;transform:translate(60%, -8%) rotate(45deg);border-style:none solid solid none;border-width:2px;border-color:var(--color-sub)}.check-box-check._checked.svelte-o1ztcf.svelte-o1ztcf{background-color:var(--color-main-active)}.check-box-check._checked.svelte-o1ztcf .check-box-icon.svelte-o1ztcf:after{border-color:var(--color-sub-active)}.check-box-text.svelte-o1ztcf.svelte-o1ztcf{margin-left:0.5em}");
 }
 
@@ -6525,7 +6584,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;
@@ -6642,8 +6701,11 @@ function create_each_block$3(ctx) {
 	};
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
 	let div;
+	let link;
+	let link_href_value;
+	let t;
 	let each_value = /*_options*/ ctx[3];
 	let each_blocks = [];
 
@@ -6654,6 +6716,8 @@ 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();
@@ -6664,6 +6728,8 @@ function create_fragment$d(ctx) {
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true, style: true });
 			var div_nodes = children(div);
+			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
+			t = claim_space(div_nodes);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].l(div_nodes);
@@ -6673,18 +6739,26 @@ function create_fragment$d(ctx) {
 			this.h();
 		},
 		h() {
+			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_hydration(target, div, anchor);
+			append_hydration(div, link);
+			append_hydration(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_textStyle, _options, isCheckedArray, styleVariables, name, handleChange*/ 189) {
+			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;
 
@@ -6720,7 +6794,7 @@ function create_fragment$d(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let _options;
 	let styleVariables;
 	let isCheckedArray;
@@ -6817,8 +6891,8 @@ class FormCheckBoxes extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$d,
-			create_fragment$d,
+			instance$e,
+			create_fragment$e,
 			safe_not_equal,
 			{
 				name: 0,
@@ -6830,14 +6904,14 @@ class FormCheckBoxes extends SvelteComponent {
 				buttonColor: 11,
 				buttonColorActive: 12
 			},
-			add_css$c
+			add_css$d
 		);
 	}
 }
 
 /* src/components/FormRatingButtonsNumber.svelte generated by Svelte v3.53.1 */
 
-function add_css$b(target) {
+function add_css$c(target) {
 	append_styles(target, "svelte-176k37j", ".rating-buttons.svelte-176k37j{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-176k37j{cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s, box-shadow 0.2s}");
 }
 
@@ -6847,7 +6921,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] + "";
@@ -6905,8 +6979,10 @@ function create_each_block$2(ctx) {
 	};
 }
 
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
 	let div;
+	let link;
+	let t;
 	let each_value = [...Array(/*count*/ ctx[0]).keys()].map(func$1);
 	let each_blocks = [];
 
@@ -6917,6 +6993,8 @@ 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();
@@ -6927,6 +7005,8 @@ function create_fragment$c(ctx) {
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true });
 			var div_nodes = children(div);
+			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
+			t = claim_space(div_nodes);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].l(div_nodes);
@@ -6936,10 +7016,14 @@ function create_fragment$c(ctx) {
 			this.h();
 		},
 		h() {
+			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_hydration(target, div, anchor);
+			append_hydration(div, link);
+			append_hydration(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
@@ -6980,14 +7064,14 @@ function create_fragment$c(ctx) {
 
 const func$1 = i => i + 1;
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let _value;
 	let $value;
 	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({
@@ -7047,8 +7131,8 @@ class FormRatingButtonsNumber extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$c,
-			create_fragment$c,
+			instance$d,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				name: 5,
@@ -7057,14 +7141,14 @@ class FormRatingButtonsNumber extends SvelteComponent {
 				buttonStyle: 7,
 				buttonActiveStyle: 8
 			},
-			add_css$b
+			add_css$c
 		);
 	}
 }
 
 /* src/components/FormRatingButtonsFace.svelte generated by Svelte v3.53.1 */
 
-function add_css$a(target) {
+function add_css$b(target) {
 	append_styles(target, "svelte-12ew9od", ".rating-buttons.svelte-12ew9od{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-12ew9od{cursor:pointer;user-select:none;-webkit-user-drag:none}.rating-button.svelte-12ew9od:not(._active){filter:grayscale(100%)}");
 }
 
@@ -7130,7 +7214,7 @@ function create_each_block$1(ctx) {
 	};
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
 	let div;
 	let each_value = [...Array(count).keys()].reverse().map(func);
 	let each_blocks = [];
@@ -7206,7 +7290,7 @@ function create_fragment$b(ctx) {
 const count = 5;
 const func = i => i + 1;
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let _value;
 	let buttonStyle;
 	let $value;
@@ -7262,13 +7346,13 @@ function instance$b($$self, $$props, $$invalidate) {
 class FormRatingButtonsFace extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$b, create_fragment$b, safe_not_equal, { name: 5, required: 6, size: 7 }, add_css$a);
+		init(this, options, instance$c, create_fragment$c, safe_not_equal, { name: 5, required: 6, size: 7 }, add_css$b);
 	}
 }
 
 /* src/components/Slide.svelte generated by Svelte v3.53.1 */
 
-function add_css$9(target) {
+function add_css$a(target) {
 	append_styles(target, "svelte-1wlcw5a", ".root.svelte-1wlcw5a{width:100%;height:100%;position:relative}.container.svelte-1wlcw5a{width:100%;height:100%;position:relative;overflow:hidden;box-sizing:border-box}.slide.svelte-1wlcw5a{height:100%;position:absolute;display:flex}.transition.svelte-1wlcw5a{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-1wlcw5a{height:100%;flex:none}.prev-button.svelte-1wlcw5a,.next-button.svelte-1wlcw5a{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button.svelte-1wlcw5a{left:0}.next-button.svelte-1wlcw5a{right:0}.button-container.svelte-1wlcw5a{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box}.navigation.svelte-1wlcw5a{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-1wlcw5a{flex-shrink:0;cursor:pointer}.navigation-item-inner.circle.svelte-1wlcw5a{border-radius:51%}");
 }
 
@@ -7479,7 +7563,7 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
 	let div3;
 	let div1;
 	let div0;
@@ -7692,7 +7776,7 @@ function calcPositionIndex(shift, index, length) {
 	}
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let slideStyle;
 	let slideClass;
 	let _loop;
@@ -7922,7 +8006,7 @@ function instance$a($$self, $$props, $$invalidate) {
 		fixSlidePosition();
 	}
 
-	onMount(async () => {
+	onMount$1(async () => {
 		containerWidth = containerElement.clientWidth;
 
 		items.forEach(item => {
@@ -8129,8 +8213,8 @@ class Slide extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$a,
-			create_fragment$a,
+			instance$b,
+			create_fragment$b,
 			safe_not_equal,
 			{
 				loop: 18,
@@ -8144,7 +8228,7 @@ class Slide extends SvelteComponent {
 				navigationButton: 25,
 				navigationEdgePosition: 26
 			},
-			add_css$9,
+			add_css$a,
 			[-1, -1]
 		);
 	}
@@ -8152,11 +8236,11 @@ class Slide extends SvelteComponent {
 
 /* src/components/SlideItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$8(target) {
+function add_css$9(target) {
 	append_styles(target, "svelte-xzo1un", ".item.svelte-xzo1un{height:100%;flex:none;position:relative}.item.svelte-xzo1un img{user-select:none;-webkit-user-drag:none}.item-inner.svelte-xzo1un{position:absolute;inset:0}");
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -8236,7 +8320,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let itemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { registerItem, unregisterItem } = getContext('SLIDE');
@@ -8302,20 +8386,20 @@ function instance$9($$self, $$props, $$invalidate) {
 class SlideItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$9, create_fragment$9, safe_not_equal, { _style: 0 }, add_css$8);
+		init(this, options, instance$a, create_fragment$a, safe_not_equal, { _style: 0 }, add_css$9);
 	}
 }
 
 /* src/components/Countdown.svelte generated by Svelte v3.53.1 */
 
-function add_css$7(target) {
+function add_css$8(target) {
 	append_styles(target, "svelte-qx7l0c", ".countdown.svelte-qx7l0c{position:relative;width:100%;height:100%}.countdown-inner.svelte-qx7l0c{position:absolute;inset:0}");
 }
 
 const get_default_slot_changes = dirty => ({ countdown: dirty & /*countdown*/ 2 });
 const get_default_slot_context = ctx => ({ countdown: /*countdown*/ ctx[1] });
 
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -8408,7 +8492,7 @@ function formatTimeDiff(ms) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let countdown;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { timeLimit = '2023/12/31 23:59:59' } = $$props;
@@ -8426,7 +8510,7 @@ function instance$8($$self, $$props, $$invalidate) {
 		}
 	}
 
-	onMount(() => {
+	onMount$1(() => {
 		const timerId = setInterval(
 			() => {
 				onEachSecond();
@@ -8465,74 +8549,51 @@ function instance$8($$self, $$props, $$invalidate) {
 class Countdown extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { timeLimit: 2, stateOnEnd: 3, _style: 0 }, add_css$7);
+		init(this, options, instance$9, create_fragment$9, safe_not_equal, { timeLimit: 2, stateOnEnd: 3, _style: 0 }, add_css$8);
 	}
 }
 
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
 
-function add_css$6(target) {
-	append_styles(target, "svelte-aept6n", ".box-wrapper.svelte-aept6n{position:relative;width:100%;height:100%}.box.svelte-aept6n{position:absolute;inset:0}");
+function add_css$7(target) {
+	append_styles(target, "svelte-1d6pgu1", ".box.svelte-1d6pgu1{position:relative;width:100%;height:100%}.box.svelte-1d6pgu1 > .button{position:absolute;inset:0}");
 }
 
-function create_fragment$7(ctx) {
-	let div1;
-	let div0;
+// (24:2) <Button {onClick} style={_style} {eventName}>
+function create_default_slot$2(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[2].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);
+	const default_slot_template = /*#slots*/ ctx[3].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
 
 	return {
 		c() {
-			div1 = element("div");
-			div0 = element("div");
 			if (default_slot) default_slot.c();
-			this.h();
 		},
 		l(nodes) {
-			div1 = claim_element(nodes, "DIV", { class: true });
-			var div1_nodes = children(div1);
-			div0 = claim_element(div1_nodes, "DIV", { class: true, style: true });
-			var div0_nodes = children(div0);
-			if (default_slot) default_slot.l(div0_nodes);
-			div0_nodes.forEach(detach);
-			div1_nodes.forEach(detach);
-			this.h();
-		},
-		h() {
-			attr(div0, "class", "box svelte-aept6n");
-			attr(div0, "style", /*_style*/ ctx[0]);
-			attr(div1, "class", "box-wrapper svelte-aept6n");
+			if (default_slot) default_slot.l(nodes);
 		},
 		m(target, anchor) {
-			insert_hydration(target, div1, anchor);
-			append_hydration(div1, div0);
-
 			if (default_slot) {
-				default_slot.m(div0, null);
+				default_slot.m(target, anchor);
 			}
 
 			current = true;
 		},
-		p(ctx, [dirty]) {
+		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 16)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[1],
+						/*$$scope*/ ctx[4],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[4])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[4], dirty, null),
 						null
 					);
 				}
 			}
-
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div0, "style", /*_style*/ ctx[0]);
-			}
 		},
 		i(local) {
 			if (current) return;
@@ -8544,38 +8605,105 @@ function create_fragment$7(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div1);
 			if (default_slot) default_slot.d(detaching);
 		}
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function create_fragment$8(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				style: /*_style*/ ctx[2],
+				eventName: /*eventName*/ ctx[1],
+				$$slots: { default: [create_default_slot$2] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+			claim_component(button.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "box svelte-1d6pgu1");
+		},
+		m(target, anchor) {
+			insert_hydration(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 & /*eventName*/ 2) button_changes.eventName = /*eventName*/ ctx[1];
+
+			if (dirty & /*$$scope*/ 16) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+		},
+		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);
+		}
+	};
+}
+
+function instance$8($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
 	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
-		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(1, eventName = $$props.eventName);
+		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
+		if ('$$scope' in $$props) $$invalidate(4, $$scope = $$props.$$scope);
 	};
 
-	return [_style, $$scope, slots];
+	return [onClick, eventName, _style, slots, $$scope];
 }
 
 class Box extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { _style: 0 }, add_css$6);
+		init(this, options, instance$8, create_fragment$8, safe_not_equal, { onClick: 0, eventName: 1, _style: 2 }, add_css$7);
 	}
 }
 
 /* src/components/IconElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$5(target) {
-	append_styles(target, "svelte-1773k1k", ".icon.svelte-1773k1k{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1773k1k svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
+function add_css$6(target) {
+	append_styles(target, "svelte-1mkvcuo", ".icon.svelte-1mkvcuo{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1mkvcuo > .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}.icon.svelte-1mkvcuo > .button._disabled{cursor:not-allowed !important;opacity:0.2}.icon.svelte-1mkvcuo svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
 }
 
-// (39:2) {#if svg}
+// (56:4) {#if svg}
 function create_if_block(ctx) {
 	let html_tag;
 	let html_anchor;
@@ -8595,11 +8723,11 @@ function create_if_block(ctx) {
 			html_tag.a = html_anchor;
 		},
 		m(target, anchor) {
-			html_tag.m(/*svg*/ ctx[1], target, anchor);
+			html_tag.m(/*svg*/ ctx[3], target, anchor);
 			insert_hydration(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*svg*/ 2) html_tag.p(/*svg*/ ctx[1]);
+			if (dirty & /*svg*/ 8) html_tag.p(/*svg*/ ctx[3]);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -8608,54 +8736,105 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
-	let div;
-	let if_block = /*svg*/ ctx[1] && create_if_block(ctx);
+// (55:2) <Button {onClick} {style} {eventName}>
+function create_default_slot$1(ctx) {
+	let if_block_anchor;
+	let if_block = /*svg*/ ctx[3] && create_if_block(ctx);
 
 	return {
 		c() {
-			div = element("div");
 			if (if_block) if_block.c();
-			this.h();
+			if_block_anchor = empty();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true, style: true });
-			var div_nodes = children(div);
-			if (if_block) if_block.l(div_nodes);
-			div_nodes.forEach(detach);
-			this.h();
-		},
-		h() {
-			attr(div, "class", "icon svelte-1773k1k");
-			attr(div, "style", /*style*/ ctx[0]);
+			if (if_block) if_block.l(nodes);
+			if_block_anchor = empty();
 		},
 		m(target, anchor) {
-			insert_hydration(target, div, anchor);
-			if (if_block) if_block.m(div, null);
+			if (if_block) if_block.m(target, anchor);
+			insert_hydration(target, if_block_anchor, anchor);
 		},
-		p(ctx, [dirty]) {
-			if (/*svg*/ ctx[1]) {
+		p(ctx, dirty) {
+			if (/*svg*/ ctx[3]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
 					if_block = create_if_block(ctx);
 					if_block.c();
-					if_block.m(div, null);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
 			} else if (if_block) {
 				if_block.d(1);
 				if_block = null;
 			}
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
 
-			if (dirty & /*style*/ 1) {
-				attr(div, "style", /*style*/ ctx[0]);
+function create_fragment$7(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				style: /*style*/ ctx[2],
+				eventName: /*eventName*/ ctx[1],
+				$$slots: { default: [create_default_slot$1] },
+				$$scope: { ctx }
 			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+			claim_component(button.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "icon svelte-1mkvcuo");
+		},
+		m(target, anchor) {
+			insert_hydration(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 & /*eventName*/ 2) button_changes.eventName = /*eventName*/ ctx[1];
+
+			if (dirty & /*$$scope, svg*/ 520) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
 		},
-		i: noop,
-		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			if (if_block) if_block.d();
+			destroy_component(button);
 		}
 	};
 }
@@ -8667,47 +8846,186 @@ function parseData(dataUrl) {
 	return decodeURIComponent(data).replaceAll('\'', '"');
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let svg;
 	let styleVariables;
 	let style;
 	let { icon = '' } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
 	let { size = '20px' } = $$props;
 	let { color = 'rgba(0, 16, 14, 0.8)' } = $$props;
 	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('icon' in $$props) $$invalidate(2, icon = $$props.icon);
-		if ('size' in $$props) $$invalidate(3, size = $$props.size);
-		if ('color' in $$props) $$invalidate(4, color = $$props.color);
-		if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
+		if ('icon' in $$props) $$invalidate(4, icon = $$props.icon);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(1, eventName = $$props.eventName);
+		if ('size' in $$props) $$invalidate(5, size = $$props.size);
+		if ('color' in $$props) $$invalidate(6, color = $$props.color);
+		if ('_style' in $$props) $$invalidate(7, _style = $$props._style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*icon*/ 4) {
-			$$invalidate(1, svg = (() => {
+		if ($$self.$$.dirty & /*icon*/ 16) {
+			$$invalidate(3, svg = (() => {
 				if (!icon) return;
 				const original = parseData(icon);
 				return original;
 			})());
 		}
 
-		if ($$self.$$.dirty & /*size, color*/ 24) {
-			$$invalidate(6, styleVariables = `--width: ${size}; --height: ${size}; --color: ${color}; --stroke: ${color}; --fill: ${color};`);
+		if ($$self.$$.dirty & /*size, color*/ 96) {
+			$$invalidate(8, styleVariables = `--width: ${size}; --height: ${size}; --color: ${color}; --stroke: ${color}; --fill: ${color};`);
 		}
 
-		if ($$self.$$.dirty & /*_style, styleVariables*/ 96) {
-			$$invalidate(0, style = [..._style.split(';'), ...styleVariables.split(';')].join(';'));
+		if ($$self.$$.dirty & /*_style, styleVariables*/ 384) {
+			$$invalidate(2, style = [..._style.split(';'), ...styleVariables.split(';')].join(';'));
 		}
 	};
 
-	return [style, svg, icon, size, color, _style, styleVariables];
+	return [onClick, eventName, style, svg, icon, size, color, _style, styleVariables];
 }
 
 class IconElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { icon: 2, size: 3, color: 4, _style: 5 }, add_css$5);
+
+		init(
+			this,
+			options,
+			instance$7,
+			create_fragment$7,
+			safe_not_equal,
+			{
+				icon: 4,
+				onClick: 0,
+				eventName: 1,
+				size: 5,
+				color: 6,
+				_style: 7
+			},
+			add_css$6
+		);
+	}
+}
+
+/* src/components/CustomElement.svelte generated by Svelte v3.53.1 */
+
+function add_css$5(target) {
+	append_styles(target, "svelte-wps40", ".customElement.svelte-wps40{box-sizing:border-box;margin:0px;padding:0px}");
+}
+
+function create_fragment$6(ctx) {
+	let div;
+	let switch_instance;
+	let current;
+	var switch_value = /*component*/ ctx[1];
+
+	function switch_props(ctx) {
+		return {
+			props: {
+				name: /*name*/ ctx[0],
+				data: /*data*/ ctx[2]
+			}
+		};
+	}
+
+	if (switch_value) {
+		switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
+	}
+
+	return {
+		c() {
+			div = element("div");
+			if (switch_instance) create_component(switch_instance.$$.fragment);
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true, style: true });
+			var div_nodes = children(div);
+			if (switch_instance) claim_component(switch_instance.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "customElement svelte-wps40");
+			attr(div, "style", /*style*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			if (switch_instance) mount_component(switch_instance, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const switch_instance_changes = {};
+			if (dirty & /*name*/ 1) switch_instance_changes.name = /*name*/ ctx[0];
+			if (dirty & /*data*/ 4) switch_instance_changes.data = /*data*/ ctx[2];
+
+			if (switch_value !== (switch_value = /*component*/ ctx[1])) {
+				if (switch_instance) {
+					group_outros();
+					const old_component = switch_instance;
+
+					transition_out(old_component.$$.fragment, 1, 0, () => {
+						destroy_component(old_component, 1);
+					});
+
+					check_outros();
+				}
+
+				if (switch_value) {
+					switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
+					create_component(switch_instance.$$.fragment);
+					transition_in(switch_instance.$$.fragment, 1);
+					mount_component(switch_instance, div, null);
+				} else {
+					switch_instance = null;
+				}
+			} else if (switch_value) {
+				switch_instance.$set(switch_instance_changes);
+			}
+
+			if (!current || dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			if (switch_instance) transition_in(switch_instance.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			if (switch_instance) transition_out(switch_instance.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (switch_instance) destroy_component(switch_instance);
+		}
+	};
+}
+
+function instance$6($$self, $$props, $$invalidate) {
+	let { name } = $$props;
+	let { component } = $$props;
+	let { data } = $$props;
+	let { style } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('component' in $$props) $$invalidate(1, component = $$props.component);
+		if ('data' in $$props) $$invalidate(2, data = $$props.data);
+		if ('style' in $$props) $$invalidate(3, style = $$props.style);
+	};
+
+	return [name, component, data, style];
+}
+
+class CustomElement extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, { name: 0, component: 1, data: 2, style: 3 }, add_css$5);
 	}
 }
 
@@ -9692,4 +10010,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, Countdown, Cursors, DefaultEdgePosition, DefaultFormButtonColor, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, variables, widget };
+export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, Countdown, Cursors, CustomElement, DefaultEdgePosition, DefaultFormButtonColor, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };