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

package/dist/index.es.js

@@ -1,8 +1,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, 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';
+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, 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, construct_svelte_component } from 'svelte/internal';
 
 /** @internal */
 const PropTypes = [
@@ -1124,25 +1123,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(';');
 }
 
 /**
@@ -2378,22 +2366,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;
@@ -2452,7 +2481,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 => {
@@ -2465,13 +2494,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}");
 }
 
@@ -2538,7 +2567,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);
@@ -2599,7 +2628,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;
@@ -2625,13 +2654,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}");
 }
 
@@ -2663,7 +2692,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);
 
@@ -2699,7 +2728,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');
@@ -2714,13 +2743,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}");
 }
 
@@ -2981,7 +3010,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;
@@ -3054,7 +3083,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;
@@ -3120,8 +3149,8 @@ class Button extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$t,
-			create_fragment$t,
+			instance$u,
+			create_fragment$u,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -3129,14 +3158,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}");
 }
 
@@ -3153,7 +3182,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 }
 			}
 		});
@@ -3315,7 +3344,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;
@@ -3406,7 +3435,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;
@@ -3499,7 +3528,7 @@ function create_fragment$s(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let close;
 	let closable;
 	let backgroundClick;
@@ -3530,7 +3559,7 @@ function instance$s($$self, $$props, $$invalidate) {
 	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
 	let modal;
 
-	onMount(() => {
+	onMount$1(() => {
 		$$invalidate(12, visible = true);
 	});
 
@@ -3679,8 +3708,8 @@ class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$s,
-			create_fragment$s,
+			instance$t,
+			create_fragment$t,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -3696,14 +3725,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;
@@ -3761,7 +3790,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;
@@ -3806,7 +3835,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,
@@ -3819,11 +3848,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;
@@ -3837,8 +3866,8 @@ function create_fragment$q(ctx) {
 			if (default_slot) default_slot.c();
 			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(target, div1, anchor);
@@ -3866,8 +3895,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) {
@@ -3886,7 +3919,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;
@@ -3895,15 +3928,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);
 	});
 
@@ -3914,12 +3941,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}`,
@@ -3929,7 +3957,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 {
@@ -3939,8 +3967,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$q,
-			create_fragment$q,
+			instance$r,
+			create_fragment$r,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -3948,9 +3976,10 @@ class GridItem extends SvelteComponent {
 				y1: 4,
 				y2: 5,
 				z: 6,
-				background: 7
+				background: 7,
+				id: 0
 			},
-			add_css$o
+			add_css$p
 		);
 	}
 }
@@ -4046,7 +4075,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 = [];
@@ -4105,7 +4134,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;
 
@@ -4125,17 +4154,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 t1;
@@ -4169,7 +4198,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;
@@ -4267,7 +4296,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;
@@ -4347,8 +4376,8 @@ class TextElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$o,
-			create_fragment$o,
+			instance$p,
+			create_fragment$p,
 			safe_not_equal,
 			{
 				text: 0,
@@ -4357,19 +4386,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] } });
@@ -4402,7 +4431,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;
@@ -4415,7 +4444,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 }
 			}
 		});
@@ -4469,7 +4498,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;
@@ -4501,8 +4530,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$n,
-			create_fragment$n,
+			instance$o,
+			create_fragment$o,
 			safe_not_equal,
 			{
 				text: 0,
@@ -4511,19 +4540,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;
 
@@ -4560,7 +4589,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;
@@ -4571,7 +4600,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 }
 			}
 		});
@@ -4619,7 +4648,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;
@@ -4648,8 +4677,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$m,
-			create_fragment$m,
+			instance$n,
+			create_fragment$n,
 			safe_not_equal,
 			{
 				src: 0,
@@ -4660,18 +4689,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;
@@ -4731,7 +4760,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;
@@ -4754,7 +4783,7 @@ function instance$l($$self, $$props, $$invalidate) {
 		}
 	});
 
-	onMount(async () => {
+	onMount$1(async () => {
 		items.forEach((item, index) => {
 			item.onMount({ index, length: items.length });
 		});
@@ -4798,8 +4827,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$l,
-			create_fragment$l,
+			instance$m,
+			create_fragment$m,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -4807,19 +4836,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);
@@ -4866,7 +4895,7 @@ function create_default_slot$1(ctx) {
 	};
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
 	let div;
 	let button;
 	let current;
@@ -4876,7 +4905,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 }
 			}
 		});
@@ -4925,7 +4954,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);
@@ -5004,17 +5033,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 {
@@ -5041,7 +5070,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = '' } = $$props;
 
@@ -5056,17 +5085,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;
 
@@ -5097,7 +5126,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;
@@ -5222,7 +5251,7 @@ function instance$i($$self, $$props, $$invalidate) {
 			});
 	}
 
-	onMount(() => {
+	onMount$1(() => {
 		setTimeout(
 			() => {
 				// @ts-ignore
@@ -5276,8 +5305,8 @@ class MovieYouTubeElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$i,
-			create_fragment$i,
+			instance$j,
+			create_fragment$j,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -5287,18 +5316,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;
 
@@ -5329,7 +5358,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;
@@ -5424,7 +5453,7 @@ function instance$h($$self, $$props, $$invalidate) {
 		onPlayerReady();
 	}
 
-	onMount(() => {
+	onMount$1(() => {
 		setTimeout(
 			() => {
 				// @ts-ignore
@@ -5472,8 +5501,8 @@ class MovieVimeoElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$h,
-			create_fragment$h,
+			instance$i,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -5483,18 +5512,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;
@@ -5547,7 +5576,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;
@@ -5588,8 +5617,8 @@ class FormTextarea extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$g,
-			create_fragment$g,
+			instance$h,
+			create_fragment$h,
 			safe_not_equal,
 			{
 				name: 6,
@@ -5597,14 +5626,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}");
 }
 
@@ -5615,7 +5644,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;
@@ -5693,8 +5722,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 = [];
 
@@ -5705,22 +5737,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;
@@ -5757,7 +5799,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let _options;
 	let buttonStyle;
 	let _value;
@@ -5848,8 +5890,8 @@ class FormRadioButtons extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$f,
-			create_fragment$f,
+			instance$g,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				name: 0,
@@ -5861,14 +5903,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}");
 }
 
@@ -5879,7 +5921,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;
 
@@ -5899,7 +5941,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;
@@ -5920,7 +5962,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;
@@ -5978,10 +6020,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;
@@ -5995,14 +6040,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");
@@ -6011,13 +6060,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) {
@@ -6026,6 +6077,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;
@@ -6068,7 +6123,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let _options;
 	let style;
 	let styleVariables;
@@ -6177,8 +6232,8 @@ class FormSelect extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$e,
-			create_fragment$e,
+			instance$f,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				name: 7,
@@ -6192,14 +6247,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}");
 }
 
@@ -6210,7 +6265,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;
@@ -6304,8 +6359,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 = [];
 
@@ -6316,22 +6374,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;
@@ -6368,7 +6436,7 @@ function create_fragment$d(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let _options;
 	let styleVariables;
 	let isCheckedArray;
@@ -6465,8 +6533,8 @@ class FormCheckBoxes extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$d,
-			create_fragment$d,
+			instance$e,
+			create_fragment$e,
 			safe_not_equal,
 			{
 				name: 0,
@@ -6478,14 +6546,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}");
 }
 
@@ -6495,7 +6563,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] + "";
@@ -6542,8 +6610,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 = [];
 
@@ -6554,15 +6624,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);
@@ -6603,14 +6679,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({
@@ -6670,8 +6746,8 @@ class FormRatingButtonsNumber extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$c,
-			create_fragment$c,
+			instance$d,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				name: 5,
@@ -6680,14 +6756,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%)}");
 }
 
@@ -6740,7 +6816,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 = [];
@@ -6802,7 +6878,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;
@@ -6858,13 +6934,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%}");
 }
 
@@ -7029,7 +7105,7 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
 	let div3;
 	let div1;
 	let div0;
@@ -7213,7 +7289,7 @@ function calcPositionIndex(shift, index, length) {
 	}
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let slideStyle;
 	let slideClass;
 	let _loop;
@@ -7443,7 +7519,7 @@ function instance$a($$self, $$props, $$invalidate) {
 		fixSlidePosition();
 	}
 
-	onMount(async () => {
+	onMount$1(async () => {
 		containerWidth = containerElement.clientWidth;
 
 		items.forEach(item => {
@@ -7650,8 +7726,8 @@ class Slide extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$a,
-			create_fragment$a,
+			instance$b,
+			create_fragment$b,
 			safe_not_equal,
 			{
 				loop: 18,
@@ -7665,7 +7741,7 @@ class Slide extends SvelteComponent {
 				navigationButton: 25,
 				navigationEdgePosition: 26
 			},
-			add_css$9,
+			add_css$a,
 			[-1, -1]
 		);
 	}
@@ -7673,11 +7749,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;
@@ -7744,7 +7820,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');
@@ -7810,20 +7886,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;
@@ -7903,7 +7979,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;
@@ -7925,7 +8001,7 @@ function instance$8($$self, $$props, $$invalidate) {
 		}
 	}
 
-	onMount(() => {
+	onMount$1(() => {
 		const timerId = setInterval(
 			() => {
 				onEachSecond();
@@ -7964,61 +8040,48 @@ 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();
-			attr(div0, "class", "box svelte-aept6n");
-			attr(div0, "style", /*_style*/ ctx[0]);
-			attr(div1, "class", "box-wrapper svelte-aept6n");
 		},
 		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;
 		},
-		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;
@@ -8030,38 +8093,95 @@ 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);
+			attr(div, "class", "box svelte-1d6pgu1");
+		},
+		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 & /*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;
@@ -8073,11 +8193,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(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);
@@ -8086,44 +8206,91 @@ 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();
-			attr(div, "class", "icon svelte-1773k1k");
-			attr(div, "style", /*style*/ ctx[0]);
+			if_block_anchor = empty();
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			if (if_block) if_block.m(div, null);
+			if (if_block) if_block.m(target, anchor);
+			insert(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);
+			attr(div, "class", "icon svelte-1mkvcuo");
+		},
+		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 & /*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);
 		}
 	};
 }
@@ -8135,47 +8302,176 @@ 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);
+			attr(div, "class", "customElement svelte-wps40");
+			attr(div, "style", /*style*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert(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);
 	}
 }
 
@@ -9078,4 +9374,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 };