@plaidev/karte-action-sdk 1.1.139 → 1.1.140-27968620.92b2388a

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import { writable, get } from 'svelte/store';
 import { linear, elasticOut, cubicOut } from 'svelte/easing';
-import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, attr, noop, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, null_to_empty, src_url_equal } from 'svelte/internal';
+import { writable, get } from 'svelte/store';
+import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, attr, noop, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, null_to_empty, src_url_equal, HtmlTag } from 'svelte/internal';
 import { setContext, getContext, createEventDispatcher, onMount, onDestroy as onDestroy$1 } from 'svelte';
 
 /** @internal */
@@ -208,14 +208,6 @@ function randStr(digit = 8) {
     return Math.random().toString(32).substring(digit);
 }
 
-/**
- * get store state value
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const getStoreState = get;
 /**
  * Store to handle action setting
  *
@@ -252,6 +244,15 @@ function setSetting(setting) {
     setStopped(!current.autoStart);
     return current;
 }
+/**
+ * {@link resetSetting} function to reset action setting
+ *
+ * @internal
+ */
+function resetSetting() {
+    actionSetting.set({ autoStart: true });
+    setStopped(false);
+}
 /**
  * Store to read KARTE system config
  *
@@ -380,18 +381,6 @@ function setOpened(on) {
  * @internal
  */
 const closed = writable(false); // deprecated
-/**
- * {@link isClosed} function to check if action is clsoed.
- *
- * @returns Flag if action is closed / true: Closed, false: Not closed
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function isClosed() {
-    return get(closed);
-}
 /**
  * {@link setClosed} function to set if action is closed.
  *
@@ -513,6 +502,13 @@ function setEventHandlers(handlers) {
     });
     return getEventHandlers();
 }
+/**
+ * イベントハンドラーをリセットする
+ *
+ */
+function resetEventHandlers() {
+    setEventHandlers({});
+}
 /**
  * Store to handle destruction of action
  *
@@ -597,129 +593,18 @@ function setVariables(vars) {
     return getVariables();
 }
 /**
- * Store for form data
- *
- * @internal
- */
-const formData = writable({});
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const customHandlers = writable({});
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function getCustomHandlers() {
-    return get(customHandlers);
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function setCustomHandlers(handlers) {
-    customHandlers.set(handlers);
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function updateCustomHandlers(handlers) {
-    customHandlers.update(current => {
-        return { ...current, ...handlers };
-    });
-    return getCustomHandlers();
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const customVariables = writable({});
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function getCustomVariables() {
-    return get(customVariables);
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function setCustomVariables(variables) {
-    customVariables.set(variables);
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function updateCustomVariables(variables) {
-    customVariables.update(current => {
-        return { ...current, ...variables };
-    });
-    return getCustomVariables();
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function getActionSetting() {
-    return get(actionSetting);
-}
-/**
- * 非推奨
+ * 変数をリセットする
  *
- * @deprecated 非推奨
- *
- * @internal
  */
-function setActionSetting(setting) {
-    actionSetting.update(current => {
-        return { ...current, ...setting };
-    });
-    const current = getActionSetting();
-    setStopped(!current.autoStart);
-    return current;
+function resetVariables() {
+    setVariables({});
 }
 /**
- * 非推奨
- *
- * @deprecated 非推奨
+ * Store for form data
  *
  * @internal
  */
-function resetActionSetting() {
-    actionSetting.set({ autoStart: true });
-    setStopped(false);
-}
+const formData = writable({});
 
 function isEmpty(value) {
     if (Array.isArray(value)) {
@@ -839,7 +724,7 @@ const handleState = (event) => {
 };
 /** @internal */
 const initialize = (setting) => {
-    const newSetting = setActionSetting(setting);
+    const newSetting = setSetting(setting);
     if (newSetting.initialState) {
         setState$1(newSetting.initialState);
     }
@@ -852,11 +737,11 @@ const initialize = (setting) => {
 };
 /** @internal */
 const finalize = () => {
-    resetActionSetting();
+    resetSetting();
 };
 /** @internal */
 const send_event = (event_name, values) => {
-    const setting = getActionSetting();
+    const setting = getSetting();
     setting?.send?.(event_name, values);
 };
 function _moveTo(to) {
@@ -883,7 +768,7 @@ const closeApp = (trigger) => () => {
 };
 /** @internal */
 const runScript = (handlerName) => () => {
-    const handlers = get(customHandlers);
+    const handlers = getEventHandlers();
     const handler = handlers[handlerName];
     if (!handler)
         return;
@@ -2273,7 +2158,7 @@ setWidgetHandlers({
  * @public
  */
 function setVal(name, value) {
-    customVariables.update(current => {
+    variables.update(current => {
         if (valCallbacks[name]) {
             valCallbacks[name].forEach(cb => {
                 cb({ newVal: value, oldVal: current[name], key: name });
@@ -2494,20 +2379,20 @@ var widget = /*#__PURE__*/Object.freeze({
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$q(target) {
+function add_css$s(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$q);
+		init(this, options, null, null, safe_not_equal, {}, add_css$s);
 	}
 }
 
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$t(ctx) {
+function create_fragment$v(ctx) {
 	let normalize;
 	let t;
 	let current;
@@ -2566,7 +2451,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -2579,18 +2464,18 @@ function instance$t($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$t, create_fragment$t, safe_not_equal, {});
+		init(this, options, instance$v, create_fragment$v, safe_not_equal, {});
 	}
 }
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$p(target) {
+function add_css$r(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
 // (23:0) {#if $state === path}
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let div;
 	let t;
 	let current;
@@ -2652,10 +2537,10 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$s(ctx) {
+function create_fragment$u(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$6(ctx);
+	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -2676,7 +2561,7 @@ function create_fragment$s(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$6(ctx);
+					if_block = create_if_block$7(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -2713,7 +2598,7 @@ function getStateItemContext() {
 	return getContext(STATE_ITEM_CONTEXT_KEY);
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -2739,18 +2624,18 @@ function instance$s($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$s, create_fragment$s, safe_not_equal, { path: 0 }, add_css$p);
+		init(this, options, instance$u, create_fragment$u, safe_not_equal, { path: 0 }, add_css$r);
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
-function add_css$o(target) {
+function add_css$q(target) {
 	append_styles(target, "svelte-1d4fta", ".background.svelte-1d4fta{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
 
 // (9:0) {#if backgroundOverray}
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
 	let div;
 	let mounted;
 	let dispose;
@@ -2777,9 +2662,9 @@ function create_if_block$5(ctx) {
 	};
 }
 
-function create_fragment$r(ctx) {
+function create_fragment$t(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$5(ctx);
+	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -2795,7 +2680,7 @@ function create_fragment$r(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$5(ctx);
+					if_block = create_if_block$6(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -2813,7 +2698,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let { backgroundOverray = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
@@ -2828,18 +2713,18 @@ function instance$r($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$r, create_fragment$r, safe_not_equal, { backgroundOverray: 0 }, add_css$o);
+		init(this, options, instance$t, create_fragment$t, safe_not_equal, { backgroundOverray: 0 }, add_css$q);
 	}
 }
 
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
-function add_css$n(target) {
+function add_css$p(target) {
 	append_styles(target, "svelte-12dkw0q", ".modal.svelte-12dkw0q{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-12dkw0q{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-12dkw0q:hover{transform:rotate(90deg)}.modal-content.svelte-12dkw0q{display:flex;justify-content:center;align-items:center}");
 }
 
 // (149:0) {#if visible}
-function create_if_block$4(ctx) {
+function create_if_block$5(ctx) {
 	let div1;
 	let t;
 	let div0;
@@ -3015,7 +2900,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-function create_fragment$q(ctx) {
+function create_fragment$s(ctx) {
 	let backgroundoverray;
 	let t;
 	let if_block_anchor;
@@ -3033,7 +2918,7 @@ function create_fragment$q(ctx) {
 		if (is_function(/*backgroundClick*/ ctx[13])) /*backgroundClick*/ ctx[13].apply(this, arguments);
 	});
 
-	let if_block = /*visible*/ ctx[7] && create_if_block$4(ctx);
+	let if_block = /*visible*/ ctx[7] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -3071,7 +2956,7 @@ function create_fragment$q(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$4(ctx);
+					if_block = create_if_block$5(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -3108,7 +2993,7 @@ function create_fragment$q(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
 	let click;
 	let close;
 	let closable;
@@ -3300,8 +3185,8 @@ class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$q,
-			create_fragment$q,
+			instance$s,
+			create_fragment$s,
 			safe_not_equal,
 			{
 				onClick: 17,
@@ -3317,14 +3202,14 @@ class Modal extends SvelteComponent {
 				closeButtonColor: 2,
 				_closeStyle: 3
 			},
-			add_css$n
+			add_css$p
 		);
 	}
 }
 
 /* src/components/Grid.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$p(ctx) {
+function create_fragment$r(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -3382,7 +3267,7 @@ function create_fragment$p(ctx) {
 	};
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -3427,7 +3312,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$p, create_fragment$p, safe_not_equal, {
+		init(this, options, instance$r, create_fragment$r, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -3609,7 +3494,7 @@ function create_default_slot(ctx) {
 	};
 }
 
-function create_fragment$o(ctx) {
+function create_fragment$q(ctx) {
 	let stateitem;
 	let current;
 
@@ -3654,7 +3539,7 @@ function create_fragment$o(ctx) {
 	};
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -3725,7 +3610,7 @@ class GridModalState extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$o, create_fragment$o, safe_not_equal, {
+		init(this, options, instance$q, create_fragment$q, safe_not_equal, {
 			path: 0,
 			onClick: 1,
 			clickEventName: 2,
@@ -3750,11 +3635,11 @@ class GridModalState extends SvelteComponent {
 
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$m(target) {
+function add_css$o(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$n(ctx) {
+function create_fragment$p(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -3817,7 +3702,7 @@ function create_fragment$n(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -3870,8 +3755,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$n,
-			create_fragment$n,
+			instance$p,
+			create_fragment$p,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -3881,18 +3766,18 @@ class GridItem extends SvelteComponent {
 				z: 6,
 				background: 7
 			},
-			add_css$m
+			add_css$o
 		);
 	}
 }
 
 /* src/components/Flex.svelte generated by Svelte v3.53.1 */
 
-function add_css$l(target) {
+function add_css$n(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$o(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -3957,7 +3842,7 @@ function getFlexContext() {
 	return getContext(FlexContextKey);
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'row' } = $$props;
 	let { width = '100%' } = $$props;
@@ -3983,8 +3868,8 @@ class Flex extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$m,
-			create_fragment$m,
+			instance$o,
+			create_fragment$o,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -3992,18 +3877,18 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$l
+			add_css$n
 		);
 	}
 }
 
 /* src/components/FlexItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$k(target) {
+function add_css$m(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$n(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
@@ -4061,7 +3946,7 @@ function create_fragment$l(ctx) {
 	};
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = '' } = $$props;
@@ -4104,13 +3989,13 @@ function instance$l($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$l, create_fragment$l, safe_not_equal, { length: 1, _style: 2 }, add_css$k);
+		init(this, options, instance$n, create_fragment$n, safe_not_equal, { length: 1, _style: 2 }, add_css$m);
 	}
 }
 
 /* src/components/RenderText.svelte generated by Svelte v3.53.1 */
 
-function get_each_context$5(ctx, list, i) {
+function get_each_context$6(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[2] = list[i];
 	return child_ctx;
@@ -4138,7 +4023,7 @@ function create_else_block$1(ctx) {
 }
 
 // (10:2) {#if item.match(regexp)}
-function create_if_block$3(ctx) {
+function create_if_block$4(ctx) {
 	let br;
 
 	return {
@@ -4156,14 +4041,14 @@ function create_if_block$3(ctx) {
 }
 
 // (9:0) {#each items as item}
-function create_each_block$5(ctx) {
+function create_each_block$6(ctx) {
 	let show_if;
 	let if_block_anchor;
 
 	function select_block_type(ctx, dirty) {
 		if (dirty & /*items*/ 1) show_if = null;
 		if (show_if == null) show_if = !!/*item*/ ctx[2].match(regexp);
-		if (show_if) return create_if_block$3;
+		if (show_if) return create_if_block$4;
 		return create_else_block$1;
 	}
 
@@ -4199,13 +4084,13 @@ function create_each_block$5(ctx) {
 	};
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$m(ctx) {
 	let each_1_anchor;
 	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
+		each_blocks[i] = create_each_block$6(get_each_context$6(ctx, each_value, i));
 	}
 
 	return {
@@ -4229,12 +4114,12 @@ function create_fragment$k(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$5(ctx, each_value, i);
+					const child_ctx = get_each_context$6(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$5(child_ctx);
+						each_blocks[i] = create_each_block$6(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
 					}
@@ -4258,7 +4143,7 @@ function create_fragment$k(ctx) {
 
 const regexp = /(\r?\n)/;
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let items;
 	let { text = 'サンプルSample' } = $$props;
 
@@ -4278,18 +4163,18 @@ function instance$k($$self, $$props, $$invalidate) {
 class RenderText extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$k, create_fragment$k, safe_not_equal, { text: 1 });
+		init(this, options, instance$m, create_fragment$m, safe_not_equal, { text: 1 });
 	}
 }
 
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$j(target) {
+function add_css$l(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}");
 }
 
 // (56:2) {#if enableCopy}
-function create_if_block$2(ctx) {
+function create_if_block$3(ctx) {
 	let div0;
 	let t1;
 	let div1;
@@ -4322,7 +4207,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$l(ctx) {
 	let div2;
 	let div1;
 	let div0;
@@ -4333,7 +4218,7 @@ function create_fragment$j(ctx) {
 	let mounted;
 	let dispose;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
-	let if_block = /*enableCopy*/ ctx[1] && create_if_block$2(ctx);
+	let if_block = /*enableCopy*/ ctx[1] && create_if_block$3(ctx);
 
 	return {
 		c() {
@@ -4379,7 +4264,7 @@ function create_fragment$j(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$2(ctx);
+					if_block = create_if_block$3(ctx);
 					if_block.c();
 					if_block.m(div2, null);
 				}
@@ -4407,7 +4292,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
 	let { enableCopy = false } = $$props;
@@ -4487,8 +4372,8 @@ class TextElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$j,
-			create_fragment$j,
+			instance$l,
+			create_fragment$l,
 			safe_not_equal,
 			{
 				text: 0,
@@ -4497,18 +4382,18 @@ class TextElement extends SvelteComponent {
 				textDirection: 2,
 				_style: 8
 			},
-			add_css$j
+			add_css$l
 		);
 	}
 }
 
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$i(target) {
+function add_css$k(target) {
 	append_styles(target, "svelte-1igv5yx", ".text-button-element.svelte-1igv5yx{width:100%;height:100%}.text-button-element._disabled.svelte-1igv5yx{opacity:0.2}.text-button.svelte-1igv5yx{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button._disabled.svelte-1igv5yx{cursor:not-allowed}.text-button.svelte-1igv5yx:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-1igv5yx:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$k(ctx) {
 	let div;
 	let button;
 	let rendertext;
@@ -4584,7 +4469,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let disabled;
 	let $valuesAreValid;
 	let { text = 'ボタンラベル' } = $$props;
@@ -4649,8 +4534,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$i,
-			create_fragment$i,
+			instance$k,
+			create_fragment$k,
 			safe_not_equal,
 			{
 				text: 0,
@@ -4659,18 +4544,18 @@ class TextButtonElement extends SvelteComponent {
 				_buttonStyle: 1,
 				_style: 2
 			},
-			add_css$i
+			add_css$k
 		);
 	}
 }
 
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$h(target) {
+function add_css$j(target) {
 	append_styles(target, "svelte-t8kpqw", ".image-element.svelte-t8kpqw{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-t8kpqw{width:100%;height:100%}.transport.svelte-t8kpqw:hover,.transport.svelte-t8kpqw:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$j(ctx) {
 	let div;
 	let img;
 	let img_src_value;
@@ -4732,7 +4617,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$j($$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;
@@ -4770,8 +4655,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$h,
-			create_fragment$h,
+			instance$j,
+			create_fragment$j,
 			safe_not_equal,
 			{
 				src: 0,
@@ -4782,18 +4667,18 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 3,
 				_style: 4
 			},
-			add_css$h
+			add_css$j
 		);
 	}
 }
 
 /* src/components/List.svelte generated by Svelte v3.53.1 */
 
-function add_css$g(target) {
+function add_css$i(target) {
 	append_styles(target, "svelte-dfqtyx", ".list.svelte-dfqtyx{display:flex;width:100%;height:100%;overflow:hidden}");
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$i(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[6].default;
@@ -4853,7 +4738,7 @@ function create_fragment$g(ctx) {
 
 const LIST_CONTEXT_KEY = Symbol();
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'vertical' } = $$props;
@@ -4920,8 +4805,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$g,
-			create_fragment$g,
+			instance$i,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -4929,18 +4814,18 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$g
+			add_css$i
 		);
 	}
 }
 
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$f(target) {
+function add_css$h(target) {
 	append_styles(target, "svelte-h5j4xe", ".list-item.svelte-h5j4xe{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item-inner.svelte-h5j4xe{position:absolute;inset:0}");
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$h(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -5021,7 +4906,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let click;
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -5111,17 +4996,17 @@ function instance$f($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$f, create_fragment$f, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$f);
+		init(this, options, instance$h, create_fragment$h, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$h);
 	}
 }
 
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$e(target) {
+function add_css$g(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$e(ctx) {
+function create_fragment$g(ctx) {
 	let div;
 
 	return {
@@ -5148,7 +5033,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = "" } = $$props;
 
@@ -5163,17 +5048,17 @@ function instance$e($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$e, create_fragment$e, safe_not_equal, { code: 0, _style: 1 }, add_css$e);
+		init(this, options, instance$g, create_fragment$g, safe_not_equal, { code: 0, _style: 1 }, add_css$g);
 	}
 }
 
 /* src/components/MovieYouTubeElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$f(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$d(ctx) {
+function create_fragment$f(ctx) {
 	let div1;
 	let div0;
 
@@ -5204,7 +5089,7 @@ function create_fragment$d(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId = "sSgN-L4DU0c" } = $$props;
@@ -5383,8 +5268,8 @@ class MovieYouTubeElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$d,
-			create_fragment$d,
+			instance$f,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -5394,18 +5279,18 @@ class MovieYouTubeElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$d
+			add_css$f
 		);
 	}
 }
 
 /* src/components/MovieVimeoElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$c(target) {
+function add_css$e(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$c(ctx) {
+function create_fragment$e(ctx) {
 	let div1;
 	let div0;
 
@@ -5436,7 +5321,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId = "201239468" } = $$props;
@@ -5579,8 +5464,8 @@ class MovieVimeoElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$c,
-			create_fragment$c,
+			instance$e,
+			create_fragment$e,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -5590,18 +5475,18 @@ class MovieVimeoElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$c
+			add_css$e
 		);
 	}
 }
 
 /* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
 
-function add_css$b(target) {
+function add_css$d(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$b(ctx) {
+function create_fragment$d(ctx) {
 	let div;
 	let textarea;
 	let mounted;
@@ -5654,7 +5539,7 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let $value;
 	let { name = '' } = $$props;
 	let { required = true } = $$props;
@@ -5695,8 +5580,8 @@ class FormTextarea extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$b,
-			create_fragment$b,
+			instance$d,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				name: 6,
@@ -5704,18 +5589,18 @@ class FormTextarea extends SvelteComponent {
 				rows: 1,
 				placeholder: 2
 			},
-			add_css$b
+			add_css$d
 		);
 	}
 }
 
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
-function add_css$a(target) {
+function add_css$c(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}");
 }
 
-function get_each_context$4(ctx, list, i) {
+function get_each_context$5(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[15] = list[i];
 	child_ctx[17] = i;
@@ -5723,7 +5608,7 @@ function get_each_context$4(ctx, list, i) {
 }
 
 // (88:2) {#each _options as option, i}
-function create_each_block$4(ctx) {
+function create_each_block$5(ctx) {
 	let label;
 	let input;
 	let input_value_value;
@@ -5800,13 +5685,13 @@ function create_each_block$4(ctx) {
 	};
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$c(ctx) {
 	let div;
 	let each_value = /*_options*/ ctx[4];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
+		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
 	}
 
 	return {
@@ -5833,12 +5718,12 @@ function create_fragment$a(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$4(ctx, each_value, i);
+					const child_ctx = get_each_context$5(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$4(child_ctx);
+						each_blocks[i] = create_each_block$5(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(div, null);
 					}
@@ -5864,7 +5749,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let _options;
 	let buttonStyle;
 	let _value;
@@ -5955,8 +5840,8 @@ class FormRadioButtons extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$a,
-			create_fragment$a,
+			instance$c,
+			create_fragment$c,
 			safe_not_equal,
 			{
 				name: 0,
@@ -5968,25 +5853,25 @@ class FormRadioButtons extends SvelteComponent {
 				buttonColor: 11,
 				buttonColorActive: 12
 			},
-			add_css$a
+			add_css$c
 		);
 	}
 }
 
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
 
-function add_css$9(target) {
-	append_styles(target, "svelte-1m0v4gk", ".select.svelte-1m0v4gk{width:100%;height:100%}.select-select.svelte-1m0v4gk{position:relative;appearance:none;width:100%;height:100%}.select-select.svelte-1m0v4gk: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-1m0v4gk{position:absolute;width:0.5em;height:0.5em;top:calc(50% - 0.2em);right:0.8em;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}");
+function add_css$b(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}");
 }
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[17] = list[i];
-	child_ctx[19] = i;
+	child_ctx[18] = list[i];
+	child_ctx[20] = i;
 	return child_ctx;
 }
 
-// (91:10) {:else}
+// (100:10) {:else}
 function create_else_block(ctx) {
 	let t;
 
@@ -6006,9 +5891,9 @@ function create_else_block(ctx) {
 	};
 }
 
-// (89:10) {#if option}
-function create_if_block$1(ctx) {
-	let t_value = /*option*/ ctx[17] + "";
+// (98:10) {#if option}
+function create_if_block$2(ctx) {
+	let t_value = /*option*/ ctx[18] + "";
 	let t;
 
 	return {
@@ -6019,7 +5904,7 @@ function create_if_block$1(ctx) {
 			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*_options*/ 16 && t_value !== (t_value = /*option*/ ctx[17] + "")) set_data(t, t_value);
+			if (dirty & /*_options*/ 16 && t_value !== (t_value = /*option*/ ctx[18] + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -6027,15 +5912,15 @@ function create_if_block$1(ctx) {
 	};
 }
 
-// (87:6) {#each _options as option, i}
-function create_each_block$3(ctx) {
+// (96:6) {#each _options as option, i}
+function create_each_block$4(ctx) {
 	let option;
 	let t;
 	let option_value_value;
 	let option_selected_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*option*/ ctx[17]) return create_if_block$1;
+		if (/*option*/ ctx[18]) return create_if_block$2;
 		return create_else_block;
 	}
 
@@ -6047,9 +5932,9 @@ function create_each_block$3(ctx) {
 			option = element("option");
 			if_block.c();
 			t = space();
-			option.__value = option_value_value = /*option*/ ctx[17];
+			option.__value = option_value_value = /*option*/ ctx[18];
 			option.value = option.__value;
-			option.selected = option_selected_value = /*option*/ ctx[17] === /*_value*/ ctx[1];
+			option.selected = option_selected_value = /*option*/ ctx[18] === /*_value*/ ctx[1];
 		},
 		m(target, anchor) {
 			insert(target, option, anchor);
@@ -6069,12 +5954,12 @@ function create_each_block$3(ctx) {
 				}
 			}
 
-			if (dirty & /*_options*/ 16 && option_value_value !== (option_value_value = /*option*/ ctx[17])) {
+			if (dirty & /*_options*/ 16 && option_value_value !== (option_value_value = /*option*/ ctx[18])) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
 
-			if (dirty & /*_options, _value*/ 18 && option_selected_value !== (option_selected_value = /*option*/ ctx[17] === /*_value*/ ctx[1])) {
+			if (dirty & /*_options, _value*/ 18 && option_selected_value !== (option_selected_value = /*option*/ ctx[18] === /*_value*/ ctx[1])) {
 				option.selected = option_selected_value;
 			}
 		},
@@ -6085,7 +5970,7 @@ function create_each_block$3(ctx) {
 	};
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$b(ctx) {
 	let div1;
 	let select;
 	let t;
@@ -6096,7 +5981,7 @@ function create_fragment$9(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
+		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
 	}
 
 	return {
@@ -6110,10 +5995,10 @@ function create_fragment$9(ctx) {
 
 			t = space();
 			div0 = element("div");
-			attr(select, "class", "select-select svelte-1m0v4gk");
+			attr(select, "class", "select-select svelte-1n4ag74");
 			attr(select, "style", /*style*/ ctx[3]);
-			attr(div0, "class", "select-icon svelte-1m0v4gk");
-			attr(div1, "class", "select svelte-1m0v4gk");
+			attr(div0, "class", "select-icon svelte-1n4ag74");
+			attr(div1, "class", "select svelte-1n4ag74");
 			attr(div1, "style", /*styleVariables*/ ctx[2]);
 		},
 		m(target, anchor) {
@@ -6138,12 +6023,12 @@ function create_fragment$9(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$3(ctx, each_value, i);
+					const child_ctx = get_each_context$4(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$3(child_ctx);
+						each_blocks[i] = create_each_block$4(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(select, null);
 					}
@@ -6175,7 +6060,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let _options;
 	let style;
 	let styleVariables;
@@ -6189,7 +6074,8 @@ function instance$9($$self, $$props, $$invalidate) {
 	let { _focusStyle = 'border-width: 2px; border-color: #2aab9f; border-style: solid' } = $$props;
 	let { _textStyle = 'font-size: 12px;' } = $$props;
 	let { _placeholderStyle = 'color: #ccc;' } = $$props;
-	let { _iconStyle = 'color: #333;' } = $$props;
+	let { iconColor = 'rgba(0, 16, 14, 0.8)' } = $$props;
+	let { iconSize = '12px' } = $$props;
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -6202,7 +6088,7 @@ function instance$9($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(15, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(16, $value = value));
 
 	function handleChange(event) {
 		const updated = event.target.value ? [event.target.value] : [];
@@ -6218,7 +6104,8 @@ function instance$9($$self, $$props, $$invalidate) {
 		if ('_focusStyle' in $$props) $$invalidate(11, _focusStyle = $$props._focusStyle);
 		if ('_textStyle' in $$props) $$invalidate(12, _textStyle = $$props._textStyle);
 		if ('_placeholderStyle' in $$props) $$invalidate(13, _placeholderStyle = $$props._placeholderStyle);
-		if ('_iconStyle' in $$props) $$invalidate(14, _iconStyle = $$props._iconStyle);
+		if ('iconColor' in $$props) $$invalidate(14, iconColor = $$props.iconColor);
+		if ('iconSize' in $$props) $$invalidate(15, iconSize = $$props.iconSize);
 	};
 
 	$$self.$$.update = () => {
@@ -6226,7 +6113,7 @@ function instance$9($$self, $$props, $$invalidate) {
 			$$invalidate(4, _options = ['', ...options.split(',')]);
 		}
 
-		if ($$self.$$.dirty & /*$value*/ 32768) {
+		if ($$self.$$.dirty & /*$value*/ 65536) {
 			$$invalidate(1, _value = $value[0]);
 		}
 
@@ -6238,17 +6125,17 @@ function instance$9($$self, $$props, $$invalidate) {
 			].join(';'));
 		}
 
-		if ($$self.$$.dirty & /*_focusStyle, _placeholderStyle, _iconStyle*/ 26624) {
+		if ($$self.$$.dirty & /*_focusStyle, _placeholderStyle, iconColor, iconSize*/ 59392) {
 			$$invalidate(2, styleVariables = (() => {
 				const variables = {};
 				const focusStyleObj = parseStyle(_focusStyle);
 				const placeholderStyle = parseStyle(_placeholderStyle);
-				const iconStyleObj = parseStyle(_iconStyle);
 				if (focusStyleObj['border-width']) variables['--focus-border-width'] = focusStyleObj['border-width'];
 				if (focusStyleObj['border-color']) variables['--focus-border-color'] = focusStyleObj['border-color'];
 				if (focusStyleObj['border-style']) variables['--focus-border-style'] = focusStyleObj['border-style'];
 				if (placeholderStyle.color) variables['--placeholder-color'] = placeholderStyle.color;
-				if (iconStyleObj.color) variables['--icon-color'] = iconStyleObj.color;
+				variables['--icon-color'] = iconColor;
+				variables['--icon-size'] = iconSize;
 				return stringifyStyleObj(variables);
 			})());
 		}
@@ -6269,7 +6156,8 @@ function instance$9($$self, $$props, $$invalidate) {
 		_focusStyle,
 		_textStyle,
 		_placeholderStyle,
-		_iconStyle,
+		iconColor,
+		iconSize,
 		$value
 	];
 }
@@ -6281,8 +6169,8 @@ class FormSelect extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$9,
-			create_fragment$9,
+			instance$b,
+			create_fragment$b,
 			safe_not_equal,
 			{
 				name: 7,
@@ -6293,20 +6181,21 @@ class FormSelect extends SvelteComponent {
 				_focusStyle: 11,
 				_textStyle: 12,
 				_placeholderStyle: 13,
-				_iconStyle: 14
+				iconColor: 14,
+				iconSize: 15
 			},
-			add_css$9
+			add_css$b
 		);
 	}
 }
 
 /* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
 
-function add_css$8(target) {
+function add_css$a(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}");
 }
 
-function get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[15] = list[i];
 	child_ctx[17] = i;
@@ -6314,7 +6203,7 @@ function get_each_context$2(ctx, list, i) {
 }
 
 // (94:2) {#each _options as option, i}
-function create_each_block$2(ctx) {
+function create_each_block$3(ctx) {
 	let label;
 	let input;
 	let input_checked_value;
@@ -6407,13 +6296,13 @@ function create_each_block$2(ctx) {
 	};
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$a(ctx) {
 	let div;
 	let each_value = /*_options*/ ctx[3];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
 	}
 
 	return {
@@ -6440,12 +6329,12 @@ function create_fragment$8(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$2(ctx, each_value, i);
+					const child_ctx = get_each_context$3(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$2(child_ctx);
+						each_blocks[i] = create_each_block$3(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(div, null);
 					}
@@ -6471,7 +6360,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let _options;
 	let styleVariables;
 	let isCheckedArray;
@@ -6568,8 +6457,8 @@ class FormCheckBoxes extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$8,
-			create_fragment$8,
+			instance$a,
+			create_fragment$a,
 			safe_not_equal,
 			{
 				name: 0,
@@ -6581,25 +6470,25 @@ class FormCheckBoxes extends SvelteComponent {
 				buttonColor: 11,
 				buttonColorActive: 12
 			},
-			add_css$8
+			add_css$a
 		);
 	}
 }
 
 /* src/components/FormRatingButtonsNumber.svelte generated by Svelte v3.53.1 */
 
-function add_css$7(target) {
+function add_css$9(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}");
 }
 
-function get_each_context$1(ctx, list, i) {
+function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[11] = list[i];
 	return child_ctx;
 }
 
 // (50:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
-function create_each_block$1(ctx) {
+function create_each_block$2(ctx) {
 	let div;
 	let t0_value = /*i*/ ctx[11] + "";
 	let t0;
@@ -6645,13 +6534,13 @@ function create_each_block$1(ctx) {
 	};
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$9(ctx) {
 	let div;
-	let each_value = [...Array(/*count*/ ctx[0]).keys()].map(func);
+	let each_value = [...Array(/*count*/ ctx[0]).keys()].map(func$1);
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
 	}
 
 	return {
@@ -6673,16 +6562,16 @@ function create_fragment$7(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*getTextButtonStyle, Array, count, _value, handleClick*/ 27) {
-				each_value = [...Array(/*count*/ ctx[0]).keys()].map(func);
+				each_value = [...Array(/*count*/ ctx[0]).keys()].map(func$1);
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$1(ctx, each_value, i);
+					const child_ctx = get_each_context$2(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$1(child_ctx);
+						each_blocks[i] = create_each_block$2(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(div, null);
 					}
@@ -6704,9 +6593,9 @@ function create_fragment$7(ctx) {
 	};
 }
 
-const func = i => i + 1;
+const func$1 = i => i + 1;
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let _value;
 	let $value;
 	let { name = '' } = $$props;
@@ -6773,8 +6662,8 @@ class FormRatingButtonsNumber extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$7,
-			create_fragment$7,
+			instance$9,
+			create_fragment$9,
 			safe_not_equal,
 			{
 				name: 5,
@@ -6783,14 +6672,191 @@ class FormRatingButtonsNumber extends SvelteComponent {
 				buttonStyle: 7,
 				buttonActiveStyle: 8
 			},
-			add_css$7
+			add_css$9
 		);
 	}
 }
 
+/* src/components/FormRatingButtonsFace.svelte generated by Svelte v3.53.1 */
+
+function add_css$8(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%)}");
+}
+
+function get_each_context$1(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[10] = list[i];
+	return child_ctx;
+}
+
+// (42:2) {#each [...Array(count).keys()].reverse().map(i => i + 1) as i}
+function create_each_block$1(ctx) {
+	let img;
+	let img_src_value;
+	let img_class_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			img = element("img");
+			if (!src_url_equal(img.src, img_src_value = /*ICONS*/ ctx[2][/*i*/ ctx[10]])) attr(img, "src", img_src_value);
+			attr(img, "class", img_class_value = "" + (null_to_empty(`rating-button${/*i*/ ctx[10] === /*_value*/ ctx[1] ? ' _active' : ''}`) + " svelte-12ew9od"));
+			attr(img, "style", /*buttonStyle*/ ctx[0]);
+			attr(img, "alt", "rate" + /*i*/ ctx[10]);
+		},
+		m(target, anchor) {
+			insert(target, img, anchor);
+
+			if (!mounted) {
+				dispose = listen(img, "click", /*handleClick*/ ctx[4](/*i*/ ctx[10]));
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*_value*/ 2 && img_class_value !== (img_class_value = "" + (null_to_empty(`rating-button${/*i*/ ctx[10] === /*_value*/ ctx[1] ? ' _active' : ''}`) + " svelte-12ew9od"))) {
+				attr(img, "class", img_class_value);
+			}
+
+			if (dirty & /*buttonStyle*/ 1) {
+				attr(img, "style", /*buttonStyle*/ ctx[0]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(img);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment$8(ctx) {
+	let div;
+	let each_value = [...Array(count).keys()].reverse().map(func);
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div, "class", "rating-buttons svelte-12ew9od");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*ICONS, Array, count, _value, buttonStyle, handleClick*/ 23) {
+				each_value = [...Array(count).keys()].reverse().map(func);
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context$1(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block$1(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(div, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+const count = 5;
+const func = i => i + 1;
+
+function instance$8($$self, $$props, $$invalidate) {
+	let _value;
+	let buttonStyle;
+	let $value;
+	let { name = '' } = $$props;
+	let { required = false } = $$props;
+	let { size = '24px' } = $$props;
+
+	const ICONS = {
+		1: 'https://img-cf.karte.io/image/6405a118a6a55b00118b7d15::5%201.png',
+		2: 'https://img-cf.karte.io/image/6405a118af861f001115e02e::4%201.png',
+		3: 'https://img-cf.karte.io/image/6405a118bbff9500111a1e51::3%203.png',
+		4: 'https://img-cf.karte.io/image/6405a1189524cb00118a1e06::2%208.png',
+		5: 'https://img-cf.karte.io/image/6405a1183021790011d39bde::1.png'
+	};
+
+	const { path: statePath } = getStateItemContext();
+
+	const value = registerInput({
+		name,
+		statePath,
+		initialValue: [],
+		validator(value) {
+			if (!required) return true;
+			return value.length > 0;
+		}
+	});
+
+	component_subscribe($$self, value, value => $$invalidate(8, $value = value));
+
+	const handleClick = index => event => {
+		value.set([String(index)]);
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(5, name = $$props.name);
+		if ('required' in $$props) $$invalidate(6, required = $$props.required);
+		if ('size' in $$props) $$invalidate(7, size = $$props.size);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*$value*/ 256) {
+			$$invalidate(1, _value = Number($value[0] ?? -1));
+		}
+
+		if ($$self.$$.dirty & /*size*/ 128) {
+			$$invalidate(0, buttonStyle = `width: ${size}; height: ${size}`);
+		}
+	};
+
+	return [buttonStyle, _value, ICONS, value, handleClick, name, required, size, $value];
+}
+
+class FormRatingButtonsFace extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$8, create_fragment$8, safe_not_equal, { name: 5, required: 6, size: 7 }, add_css$8);
+	}
+}
+
 /* src/components/Slide.svelte generated by Svelte v3.53.1 */
 
-function add_css$6(target) {
+function add_css$7(target) {
 	append_styles(target, "svelte-c7zaph", ".root.svelte-c7zaph{width:100%;height:100%;position:relative}.container.svelte-c7zaph{width:100%;height:100%;position:relative;overflow:hidden}.slide.svelte-c7zaph{height:100%;position:absolute;display:flex}.transition.svelte-c7zaph{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-c7zaph{height:100%;flex:none}.prev-button.svelte-c7zaph,.next-button.svelte-c7zaph{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button.svelte-c7zaph{left:0}.next-button.svelte-c7zaph{right:0}.button-container.svelte-c7zaph{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box}.navigation.svelte-c7zaph{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-c7zaph{flex-shrink:0;cursor:pointer}.navigation-item-inner.circle.svelte-c7zaph{border-radius:51%}");
 }
 
@@ -6853,7 +6919,7 @@ function create_if_block_1(ctx) {
 }
 
 // (358:2) {#if isVisibleNextButton}
-function create_if_block(ctx) {
+function create_if_block$1(ctx) {
 	let div1;
 	let div0;
 	let svg;
@@ -6955,7 +7021,7 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
+function create_fragment$7(ctx) {
 	let div3;
 	let div1;
 	let div0;
@@ -6968,7 +7034,7 @@ function create_fragment$6(ctx) {
 	const default_slot_template = /*#slots*/ ctx[31].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[30], null);
 	let if_block0 = /*isVisiblePrevButton*/ ctx[11] && create_if_block_1(ctx);
-	let if_block1 = /*isVisibleNextButton*/ ctx[10] && create_if_block(ctx);
+	let if_block1 = /*isVisibleNextButton*/ ctx[10] && create_if_block$1(ctx);
 	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
 
@@ -7065,7 +7131,7 @@ function create_fragment$6(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block(ctx);
+					if_block1 = create_if_block$1(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -7134,7 +7200,7 @@ function calcPositionIndex(shift, index, length) {
 	}
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let slideStyle;
 	let slideClass;
 	let _loop;
@@ -7568,8 +7634,8 @@ class Slide extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$6,
-			create_fragment$6,
+			instance$7,
+			create_fragment$7,
 			safe_not_equal,
 			{
 				loop: 17,
@@ -7582,7 +7648,7 @@ class Slide extends SvelteComponent {
 				navigationButton: 24,
 				navigationEdgePosition: 25
 			},
-			add_css$6,
+			add_css$7,
 			[-1, -1]
 		);
 	}
@@ -7590,11 +7656,11 @@ class Slide extends SvelteComponent {
 
 /* src/components/SlideItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$5(target) {
+function add_css$6(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$5(ctx) {
+function create_fragment$6(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -7661,7 +7727,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let itemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { registerItem, unregisterItem } = getContext('SLIDE');
@@ -7727,20 +7793,20 @@ function instance$5($$self, $$props, $$invalidate) {
 class SlideItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { _style: 0 }, add_css$5);
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, { _style: 0 }, add_css$6);
 	}
 }
 
 /* src/components/Countdown.svelte generated by Svelte v3.53.1 */
 
-function add_css$4(target) {
+function add_css$5(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*/ 1 });
 const get_default_slot_context = ctx => ({ countdown: /*countdown*/ ctx[0] });
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -7815,7 +7881,7 @@ function formatTimeDiff(ms) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let countdown;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { timeLimit = '2023/12/31 23:59:59+0900' } = $$props;
@@ -7874,17 +7940,17 @@ function instance$4($$self, $$props, $$invalidate) {
 class Countdown extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$4, create_fragment$4, safe_not_equal, { timeLimit: 1, stateOnEnd: 2 }, add_css$4);
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { timeLimit: 1, stateOnEnd: 2 }, add_css$5);
 	}
 }
 
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
 
-function add_css$3(target) {
+function add_css$4(target) {
 	append_styles(target, "svelte-aept6n", ".box-wrapper.svelte-aept6n{position:relative;width:100%;height:100%}.box.svelte-aept6n{position:absolute;inset:0}");
 }
 
-function create_fragment$3(ctx) {
+function create_fragment$4(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -7946,7 +8012,7 @@ function create_fragment$3(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { _style = '' } = $$props;
 
@@ -7961,7 +8027,131 @@ function instance$3($$self, $$props, $$invalidate) {
 class Box extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, { _style: 0 }, add_css$3);
+		init(this, options, instance$4, create_fragment$4, safe_not_equal, { _style: 0 }, add_css$4);
+	}
+}
+
+/* src/components/IconElement.svelte generated by Svelte v3.53.1 */
+
+function add_css$3(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)}");
+}
+
+// (39:2) {#if svg}
+function create_if_block(ctx) {
+	let html_tag;
+	let html_anchor;
+
+	return {
+		c() {
+			html_tag = new HtmlTag(false);
+			html_anchor = empty();
+			html_tag.a = html_anchor;
+		},
+		m(target, anchor) {
+			html_tag.m(/*svg*/ ctx[1], target, anchor);
+			insert(target, html_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*svg*/ 2) html_tag.p(/*svg*/ ctx[1]);
+		},
+		d(detaching) {
+			if (detaching) detach(html_anchor);
+			if (detaching) html_tag.d();
+		}
+	};
+}
+
+function create_fragment$3(ctx) {
+	let div;
+	let if_block = /*svg*/ ctx[1] && 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]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+		},
+		p(ctx, [dirty]) {
+			if (/*svg*/ ctx[1]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*style*/ 1) {
+				attr(div, "style", /*style*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
+		}
+	};
+}
+
+function parseData(dataUrl) {
+	const [_meta, data] = dataUrl.split(',');
+
+	// @ts-ignore
+	return decodeURIComponent(data).replaceAll('\'', '"');
+}
+
+function instance$3($$self, $$props, $$invalidate) {
+	let svg;
+	let styleVariables;
+	let style;
+	let { icon = '' } = $$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);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*icon*/ 4) {
+			$$invalidate(1, 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 & /*_style, styleVariables*/ 96) {
+			$$invalidate(0, style = [..._style.split(';'), ...styleVariables.split(';')].join(';'));
+		}
+	};
+
+	return [style, svg, icon, size, color, _style, styleVariables];
+}
+
+class IconElement extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { icon: 2, size: 3, color: 4, _style: 5 }, add_css$3);
 	}
 }
 
@@ -8306,4 +8496,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, FormCheckBoxes, FormRadioButtons, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, 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, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyAction, destroyed, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, variables, widget };
+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, 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, setAutoStart, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, variables, widget };