@plaidev/karte-action-sdk 1.1.102 → 1.1.103-27909115.90a8e84c

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, src_url_equal, null_to_empty } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, attr, noop, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, src_url_equal, null_to_empty, set_style } from 'svelte/internal';
 import { createEventDispatcher, onMount, onDestroy as onDestroy$1, setContext, getContext } from 'svelte';
 
 /**
@@ -214,13 +214,16 @@ function setActionSetting(setting) {
     actionSetting.update(current => {
         return { ...current, ...setting };
     });
-    return getActionSetting();
+    const current = getActionSetting();
+    setStopped(!current.autoStart);
+    return current;
 }
 /**
  * {@link resetActionSetting} function to reset action setting
  */
 function resetActionSetting() {
     actionSetting.set({ autoStart: true });
+    setStopped(false);
 }
 /**
  * Store to read KARTE system config
@@ -425,7 +428,9 @@ function isStopped() {
  * {@link setStopped} function to set if action is stopped.
  */
 function setStopped(on) {
-    stopped.set(on);
+    {
+        stopped.set(on);
+    }
 }
 /**
  * Store to handle custom variables
@@ -470,13 +475,16 @@ const handleState = (event) => {
     }
 };
 const initialize = (setting) => {
-    if (setting?.initialState) {
+    const newSetting = setActionSetting(setting);
+    if (newSetting.initialState) {
         const force = true;
         setState$1(setting?.initialState, force);
     }
+    if (newSetting.autoStart) {
+        setStopped(!newSetting.autoStart);
+    }
     setOpened(true);
     setClosed(false); // deprecated
-    setActionSetting(setting);
     return () => finalize();
 };
 const finalize = () => {
@@ -725,6 +733,12 @@ const DefaultModalPlacement = {
     backgroundOverlay: false,
     backgroundClick: { operation: 'closeApp', args: ['overlay'] },
 };
+const Elasticities = ['none', 'vertical', 'horizontal'];
+const ElasticityStyle = {
+    none: '',
+    vertical: 'width: 100%',
+    horizontal: 'height: 100%',
+};
 const OnClickOperationOptions = [
     {
         operation: 'none',
@@ -965,6 +979,7 @@ function create(App, options = {
         shortenId: data.shorten_id || null,
         campaignId: data.campaign_id || null,
     });
+    setInternalHandlers({});
     if (options.onCreate) {
         onCreate(options.onCreate);
     }
@@ -1700,35 +1715,35 @@ function collection(table) {
 
 var widget = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  show: showAction,
-  hide: closeAction,
-  setVal: setVal,
+  collection: collection,
+  getState: getState,
   getVal: getVal,
-  onChangeVal: onChangeVal,
+  hide: closeAction,
   method: method,
   on: on,
+  onChangeVal: onChangeVal,
   setState: setState,
-  getState: getState,
-  storage: storage,
-  collection: collection
+  setVal: setVal,
+  show: showAction,
+  storage: storage
 });
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$f(target) {
+function add_css$i(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$f);
+		init(this, options, null, null, safe_not_equal, {}, add_css$i);
 	}
 }
 
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$i(ctx) {
+function create_fragment$m(ctx) {
 	let normalize;
 	let t;
 	let current;
@@ -1787,7 +1802,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -1800,13 +1815,13 @@ function instance$i($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$i, create_fragment$i, safe_not_equal, {});
+		init(this, options, instance$m, create_fragment$m, safe_not_equal, {});
 	}
 }
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$e(target) {
+function add_css$h(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
@@ -1873,7 +1888,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$l(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$3(ctx);
@@ -1928,7 +1943,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -1953,13 +1968,13 @@ function instance$h($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$h, create_fragment$h, safe_not_equal, { path: 0 }, add_css$e);
+		init(this, options, instance$l, create_fragment$l, safe_not_equal, { path: 0 }, add_css$h);
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$g(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}");
 }
 
@@ -1991,7 +2006,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$k(ctx) {
 	let if_block_anchor;
 	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$2(ctx);
 
@@ -2027,7 +2042,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let { backgroundOverray = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
@@ -2042,17 +2057,17 @@ function instance$g($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$g, create_fragment$g, safe_not_equal, { backgroundOverray: 0 }, add_css$d);
+		init(this, options, instance$k, create_fragment$k, safe_not_equal, { backgroundOverray: 0 }, add_css$g);
 	}
 }
 
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
-function add_css$c(target) {
-	append_styles(target, "svelte-1bxl6mz", ".modal.svelte-1bxl6mz{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-1bxl6mz{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-1bxl6mz:hover{transform:rotate(90deg)}");
+function add_css$f(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}");
 }
 
-// (131:0) {#if visible}
+// (136:0) {#if visible}
 function create_if_block$1(ctx) {
 	let div1;
 	let t;
@@ -2062,9 +2077,9 @@ function create_if_block$1(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*closable*/ ctx[13] && create_if_block_1(ctx);
-	const default_slot_template = /*#slots*/ ctx[27].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
+	let if_block = /*closable*/ ctx[14] && create_if_block_1(ctx);
+	const default_slot_template = /*#slots*/ ctx[29].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[28], null);
 
 	return {
 		c() {
@@ -2073,11 +2088,12 @@ function create_if_block$1(ctx) {
 			t = space();
 			div0 = element("div");
 			if (default_slot) default_slot.c();
+			attr(div0, "class", "modal-content svelte-12dkw0q");
 			attr(div0, "style", /*_style*/ ctx[1]);
-			attr(div1, "class", "modal svelte-1bxl6mz");
+			attr(div1, "class", "modal svelte-12dkw0q");
 			attr(div1, "role", "dialog");
 			attr(div1, "aria-modal", "true");
-			attr(div1, "style", div1_style_value = "" + /*pos*/ ctx[10] + " " + /*marginStyle*/ ctx[8] + "");
+			attr(div1, "style", div1_style_value = "" + /*pos*/ ctx[10] + " " + /*marginStyle*/ ctx[8] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[11]] + "");
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -2089,12 +2105,12 @@ function create_if_block$1(ctx) {
 				default_slot.m(div0, null);
 			}
 
-			/*div1_binding*/ ctx[28](div1);
+			/*div1_binding*/ ctx[30](div1);
 			current = true;
 
 			if (!mounted) {
 				dispose = listen(div1, "click", function () {
-					if (is_function(/*click*/ ctx[14])) /*click*/ ctx[14].apply(this, arguments);
+					if (is_function(/*click*/ ctx[15])) /*click*/ ctx[15].apply(this, arguments);
 				});
 
 				mounted = true;
@@ -2103,7 +2119,7 @@ function create_if_block$1(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*closable*/ ctx[13]) {
+			if (/*closable*/ ctx[14]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -2117,15 +2133,15 @@ function create_if_block$1(ctx) {
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 268435456)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[26],
+						/*$$scope*/ ctx[28],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[28])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[28], dirty, null),
 						null
 					);
 				}
@@ -2135,7 +2151,7 @@ function create_if_block$1(ctx) {
 				attr(div0, "style", /*_style*/ ctx[1]);
 			}
 
-			if (!current || dirty & /*pos, marginStyle*/ 1280 && div1_style_value !== (div1_style_value = "" + /*pos*/ ctx[10] + " " + /*marginStyle*/ ctx[8] + "")) {
+			if (!current || dirty & /*pos, marginStyle, overwriteElasticity*/ 3328 && div1_style_value !== (div1_style_value = "" + /*pos*/ ctx[10] + " " + /*marginStyle*/ ctx[8] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[11]] + "")) {
 				attr(div1, "style", div1_style_value);
 			}
 		},
@@ -2164,14 +2180,14 @@ function create_if_block$1(ctx) {
 			if (detaching) detach(div1);
 			if (if_block) if_block.d();
 			if (default_slot) default_slot.d(detaching);
-			/*div1_binding*/ ctx[28](null);
+			/*div1_binding*/ ctx[30](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (147:4) {#if closable}
+// (153:4) {#if closable}
 function create_if_block_1(ctx) {
 	let button;
 	let svg;
@@ -2193,8 +2209,8 @@ function create_if_block_1(ctx) {
 			attr(svg, "viewBox", "0 0 9 10");
 			attr(svg, "fill", "none");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(button, "class", "close svelte-1bxl6mz");
-			attr(button, "style", button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[15] + 1) + "; " + /*_closeStyle*/ ctx[3] + "");
+			attr(button, "class", "close svelte-12dkw0q");
+			attr(button, "style", button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[16] + 1) + "; " + /*_closeStyle*/ ctx[3] + "");
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -2216,7 +2232,7 @@ function create_if_block_1(ctx) {
 				attr(path, "fill", /*closeButtonColor*/ ctx[2]);
 			}
 
-			if (dirty & /*$maximumZindex, _closeStyle*/ 32776 && button_style_value !== (button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[15] + 1) + "; " + /*_closeStyle*/ ctx[3] + "")) {
+			if (dirty & /*$maximumZindex, _closeStyle*/ 65544 && button_style_value !== (button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[16] + 1) + "; " + /*_closeStyle*/ ctx[3] + "")) {
 				attr(button, "style", button_style_value);
 			}
 		},
@@ -2228,7 +2244,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$j(ctx) {
 	let backgroundoverray;
 	let t;
 	let if_block_anchor;
@@ -2238,12 +2254,12 @@ function create_fragment$f(ctx) {
 
 	backgroundoverray = new BackgroundOverray({
 			props: {
-				backgroundOverray: /*backgroundOverray*/ ctx[12]
+				backgroundOverray: /*backgroundOverray*/ ctx[13]
 			}
 		});
 
 	backgroundoverray.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[11])) /*backgroundClick*/ ctx[11].apply(this, arguments);
+		if (is_function(/*backgroundClick*/ ctx[12])) /*backgroundClick*/ ctx[12].apply(this, arguments);
 	});
 
 	let if_block = /*visible*/ ctx[6] && create_if_block$1(ctx);
@@ -2273,7 +2289,7 @@ function create_fragment$f(ctx) {
 		p(new_ctx, [dirty]) {
 			ctx = new_ctx;
 			const backgroundoverray_changes = {};
-			if (dirty & /*backgroundOverray*/ 4096) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[12];
+			if (dirty & /*backgroundOverray*/ 8192) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[13];
 			backgroundoverray.$set(backgroundoverray_changes);
 
 			if (/*visible*/ ctx[6]) {
@@ -2321,7 +2337,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let click;
 	let close;
 	let closable;
@@ -2330,19 +2346,21 @@ function instance$f($$self, $$props, $$invalidate) {
 	let backgroundClick;
 	let overwritePosition;
 	let overwriteMargin;
+	let overwriteElasticity;
 	let pos;
 	let transform;
 	let marginStyle;
 	let handle_keydown;
 	let visible;
 	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(15, $maximumZindex = $$value));
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(16, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { clickEventName = '' } = $$props;
 	let { clickEventValue = null } = $$props;
 	let { placement = DefaultModalPlacement } = $$props;
 	let { animation = 'none' } = $$props;
+	let { elasticity = 'none' } = $$props;
 	let { _style = '' } = $$props;
 	let { onClose = { operation: 'closeApp', args: [] } } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
@@ -2365,23 +2383,24 @@ function instance$f($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(16, onClick = $$props.onClick);
-		if ('clickEventName' in $$props) $$invalidate(17, clickEventName = $$props.clickEventName);
-		if ('clickEventValue' in $$props) $$invalidate(18, clickEventValue = $$props.clickEventValue);
-		if ('placement' in $$props) $$invalidate(19, placement = $$props.placement);
+		if ('onClick' in $$props) $$invalidate(17, onClick = $$props.onClick);
+		if ('clickEventName' in $$props) $$invalidate(18, clickEventName = $$props.clickEventName);
+		if ('clickEventValue' in $$props) $$invalidate(19, clickEventValue = $$props.clickEventValue);
+		if ('placement' in $$props) $$invalidate(20, placement = $$props.placement);
 		if ('animation' in $$props) $$invalidate(0, animation = $$props.animation);
+		if ('elasticity' in $$props) $$invalidate(21, elasticity = $$props.elasticity);
 		if ('_style' in $$props) $$invalidate(1, _style = $$props._style);
-		if ('onClose' in $$props) $$invalidate(20, onClose = $$props.onClose);
+		if ('onClose' in $$props) $$invalidate(22, onClose = $$props.onClose);
 		if ('closeButtonColor' in $$props) $$invalidate(2, closeButtonColor = $$props.closeButtonColor);
-		if ('closeEventName' in $$props) $$invalidate(21, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(22, closeEventValue = $$props.closeEventValue);
+		if ('closeEventName' in $$props) $$invalidate(23, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(24, closeEventValue = $$props.closeEventValue);
 		if ('_closeStyle' in $$props) $$invalidate(3, _closeStyle = $$props._closeStyle);
-		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(28, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*clickEventName, clickEventValue, onClick*/ 458752) {
-			$$invalidate(14, click = () => {
+		if ($$self.$$.dirty & /*clickEventName, clickEventValue, onClick*/ 917504) {
+			$$invalidate(15, click = () => {
 				if (clickEventName) {
 					send_event(clickEventName, clickEventValue);
 				}
@@ -2390,7 +2409,7 @@ function instance$f($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, onClose*/ 7340032) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, onClose*/ 29360128) {
 			$$invalidate(5, close = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -2400,24 +2419,24 @@ function instance$f($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*onClose*/ 1048576) {
-			$$invalidate(13, closable = haveFunction(onClose));
+		if ($$self.$$.dirty & /*onClose*/ 4194304) {
+			$$invalidate(14, closable = haveFunction(onClose));
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 524288) {
-			$$invalidate(12, backgroundOverray = placement && placement.backgroundOverlay != null
+		if ($$self.$$.dirty & /*placement*/ 1048576) {
+			$$invalidate(13, backgroundOverray = placement && placement.backgroundOverlay != null
 			? placement.backgroundOverlay
 			: DefaultModalPlacement.backgroundOverlay);
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 524288) {
-			$$invalidate(25, backgroundClickFunction = placement && placement.backgroundClick != null
+		if ($$self.$$.dirty & /*placement*/ 1048576) {
+			$$invalidate(27, backgroundClickFunction = placement && placement.backgroundClick != null
 			? placement.backgroundClick
 			: DefaultModalPlacement.backgroundClick);
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 39845888) {
-			$$invalidate(11, backgroundClick = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 159383552) {
+			$$invalidate(12, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -2426,27 +2445,31 @@ function instance$f($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 524288) {
-			$$invalidate(24, overwritePosition = placement && placement.position != null
+		if ($$self.$$.dirty & /*placement*/ 1048576) {
+			$$invalidate(26, overwritePosition = placement && placement.position != null
 				? placement.position
 				: DefaultModalPlacement.position);
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 524288) {
-			$$invalidate(23, overwriteMargin = placement && placement.margin != null
+		if ($$self.$$.dirty & /*placement*/ 1048576) {
+			$$invalidate(25, overwriteMargin = placement && placement.margin != null
 				? placement.margin
 				: DefaultModalPlacement.margin);
 		}
 
-		if ($$self.$$.dirty & /*overwritePosition*/ 16777216) {
+		if ($$self.$$.dirty & /*elasticity*/ 2097152) {
+			$$invalidate(11, overwriteElasticity = elasticity);
+		}
+
+		if ($$self.$$.dirty & /*overwritePosition*/ 67108864) {
 			$$invalidate(10, pos = getPositionStyle(overwritePosition));
 		}
 
-		if ($$self.$$.dirty & /*overwritePosition*/ 16777216) {
+		if ($$self.$$.dirty & /*overwritePosition*/ 67108864) {
 			$$invalidate(9, transform = getTransform(overwritePosition));
 		}
 
-		if ($$self.$$.dirty & /*overwriteMargin*/ 8388608) {
+		if ($$self.$$.dirty & /*overwriteMargin*/ 33554432) {
 			$$invalidate(8, marginStyle = getMarginStyle(overwriteMargin));
 		}
 
@@ -2472,6 +2495,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		marginStyle,
 		transform,
 		pos,
+		overwriteElasticity,
 		backgroundClick,
 		backgroundOverray,
 		closable,
@@ -2481,6 +2505,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		clickEventName,
 		clickEventValue,
 		placement,
+		elasticity,
 		onClose,
 		closeEventName,
 		closeEventValue,
@@ -2500,30 +2525,31 @@ class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$f,
-			create_fragment$f,
+			instance$j,
+			create_fragment$j,
 			safe_not_equal,
 			{
-				onClick: 16,
-				clickEventName: 17,
-				clickEventValue: 18,
-				placement: 19,
+				onClick: 17,
+				clickEventName: 18,
+				clickEventValue: 19,
+				placement: 20,
 				animation: 0,
+				elasticity: 21,
 				_style: 1,
-				onClose: 20,
+				onClose: 22,
 				closeButtonColor: 2,
-				closeEventName: 21,
-				closeEventValue: 22,
+				closeEventName: 23,
+				closeEventValue: 24,
 				_closeStyle: 3
 			},
-			add_css$c
+			add_css$f
 		);
 	}
 }
 
 /* src/components/Grid.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$e(ctx) {
+function create_fragment$i(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -2581,7 +2607,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -2626,7 +2652,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$e, create_fragment$e, safe_not_equal, {
+		init(this, options, instance$i, create_fragment$i, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -2808,7 +2834,7 @@ function create_default_slot(ctx) {
 	};
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$h(ctx) {
 	let stateitem;
 	let current;
 
@@ -2853,7 +2879,7 @@ function create_fragment$d(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -2924,7 +2950,7 @@ class GridModalState extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$d, create_fragment$d, safe_not_equal, {
+		init(this, options, instance$h, create_fragment$h, safe_not_equal, {
 			path: 0,
 			onClick: 1,
 			clickEventName: 2,
@@ -2949,11 +2975,11 @@ class GridModalState extends SvelteComponent {
 
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$b(target) {
+function add_css$e(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$c(ctx) {
+function create_fragment$g(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -3016,7 +3042,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -3069,8 +3095,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$c,
-			create_fragment$c,
+			instance$g,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -3080,18 +3106,18 @@ class GridItem extends SvelteComponent {
 				z: 6,
 				background: 7
 			},
-			add_css$b
+			add_css$e
 		);
 	}
 }
 
 /* src/components/Flex.svelte generated by Svelte v3.53.1 */
 
-function add_css$a(target) {
+function add_css$d(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$f(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -3156,7 +3182,7 @@ function getFlexContext() {
 	return getContext(FlexContextKey);
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'row' } = $$props;
 	let { width = '100%' } = $$props;
@@ -3182,8 +3208,8 @@ class Flex extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$b,
-			create_fragment$b,
+			instance$f,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -3191,18 +3217,18 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$a
+			add_css$d
 		);
 	}
 }
 
 /* src/components/FlexItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$9(target) {
+function add_css$c(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$e(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
@@ -3260,7 +3286,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = '' } = $$props;
@@ -3303,13 +3329,13 @@ function instance$a($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$a, create_fragment$a, safe_not_equal, { length: 1, _style: 2 }, add_css$9);
+		init(this, options, instance$e, create_fragment$e, safe_not_equal, { length: 1, _style: 2 }, add_css$c);
 	}
 }
 
 /* src/components/RenderText.svelte generated by Svelte v3.53.1 */
 
-function get_each_context(ctx, list, i) {
+function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[2] = list[i];
 	return child_ctx;
@@ -3355,7 +3381,7 @@ function create_if_block(ctx) {
 }
 
 // (9:0) {#each items as item}
-function create_each_block(ctx) {
+function create_each_block$1(ctx) {
 	let show_if;
 	let if_block_anchor;
 
@@ -3398,13 +3424,13 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$d(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(get_each_context(ctx, each_value, i));
+		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
 	}
 
 	return {
@@ -3428,12 +3454,12 @@ function create_fragment$9(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context(ctx, each_value, i);
+					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(child_ctx);
+						each_blocks[i] = create_each_block$1(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
 					}
@@ -3457,7 +3483,7 @@ function create_fragment$9(ctx) {
 
 const regexp = /(\r?\n)/;
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let items;
 	let { text = 'サンプルSample' } = $$props;
 
@@ -3477,17 +3503,17 @@ function instance$9($$self, $$props, $$invalidate) {
 class RenderText extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$9, create_fragment$9, safe_not_equal, { text: 1 });
+		init(this, options, instance$d, create_fragment$d, safe_not_equal, { text: 1 });
 	}
 }
 
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$8(target) {
+function add_css$b(target) {
 	append_styles(target, "svelte-ww7ebs", ".text-element.svelte-ww7ebs{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto}.text-element-inner.svelte-ww7ebs{width:100%}");
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$c(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -3534,7 +3560,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
 	let { _textStyle = 'font-size:12px;' } = $$props;
@@ -3558,17 +3584,17 @@ function instance$8($$self, $$props, $$invalidate) {
 class TextElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { text: 0, _textStyle: 2, _style: 3 }, add_css$8);
+		init(this, options, instance$c, create_fragment$c, safe_not_equal, { text: 0, _textStyle: 2, _style: 3 }, add_css$b);
 	}
 }
 
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$7(target) {
+function add_css$a(target) {
 	append_styles(target, "svelte-tx5xf5", ".text-button-element.svelte-tx5xf5{width:100%;height:100%}.text-button.svelte-tx5xf5{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.svelte-tx5xf5:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-tx5xf5:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$b(ctx) {
 	let div;
 	let button;
 	let rendertext;
@@ -3629,7 +3655,7 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 
@@ -3663,8 +3689,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$7,
-			create_fragment$7,
+			instance$b,
+			create_fragment$b,
 			safe_not_equal,
 			{
 				text: 0,
@@ -3673,18 +3699,18 @@ class TextButtonElement extends SvelteComponent {
 				_buttonStyle: 1,
 				_style: 2
 			},
-			add_css$7
+			add_css$a
 		);
 	}
 }
 
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$6(target) {
+function add_css$9(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$6(ctx) {
+function create_fragment$a(ctx) {
 	let div;
 	let img;
 	let img_src_value;
@@ -3746,7 +3772,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$a($$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;
@@ -3784,8 +3810,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$6,
-			create_fragment$6,
+			instance$a,
+			create_fragment$a,
 			safe_not_equal,
 			{
 				src: 0,
@@ -3796,18 +3822,18 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 3,
 				_style: 4
 			},
-			add_css$6
+			add_css$9
 		);
 	}
 }
 
 /* src/components/List.svelte generated by Svelte v3.53.1 */
 
-function add_css$5(target) {
+function add_css$8(target) {
 	append_styles(target, "svelte-dfqtyx", ".list.svelte-dfqtyx{display:flex;width:100%;height:100%;overflow:hidden}");
 }
 
-function create_fragment$5(ctx) {
+function create_fragment$9(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[6].default;
@@ -3867,7 +3893,7 @@ function create_fragment$5(ctx) {
 
 const LIST_CONTEXT_KEY = Symbol();
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'vertical' } = $$props;
@@ -3934,8 +3960,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$5,
-			create_fragment$5,
+			instance$9,
+			create_fragment$9,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -3943,18 +3969,18 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$5
+			add_css$8
 		);
 	}
 }
 
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$4(target) {
+function add_css$7(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$4(ctx) {
+function create_fragment$8(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -4035,7 +4061,7 @@ function create_fragment$4(ctx) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let click;
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -4125,17 +4151,17 @@ function instance$4($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$4, create_fragment$4, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$4);
+		init(this, options, instance$8, create_fragment$8, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$7);
 	}
 }
 
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$3(target) {
+function add_css$6(target) {
 	append_styles(target, "svelte-k86zna", ".embed.svelte-k86zna{position:relative;box-shadow:0 1px rgba(0, 0, 0, 0.06);padding-top:56.25%;overflow:hidden}.embed.svelte-k86zna iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$3(ctx) {
+function create_fragment$7(ctx) {
 	let div;
 
 	return {
@@ -4162,7 +4188,7 @@ function create_fragment$3(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = '' } = $$props;
 
@@ -4177,7 +4203,572 @@ function instance$3($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, { code: 0, _style: 1 }, add_css$3);
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, { code: 0, _style: 1 }, add_css$6);
+	}
+}
+
+/* src/components/Form.svelte generated by Svelte v3.53.1 */
+
+function add_css$5(target) {
+	append_styles(target, "svelte-1il0aow", ".form.svelte-1il0aow{width:100%;height:100%}");
+}
+
+function create_fragment$6(ctx) {
+	let div;
+	let current;
+	const default_slot_template = /*#slots*/ ctx[4].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);
+
+	return {
+		c() {
+			div = element("div");
+			if (default_slot) default_slot.c();
+			attr(div, "class", "form svelte-1il0aow");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			if (default_slot) {
+				default_slot.m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 8)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[3],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[3])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[3], dirty, null),
+						null
+					);
+				}
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (default_slot) default_slot.d(detaching);
+		}
+	};
+}
+
+const FORM_CONTEXT_KEY = Symbol();
+
+function getValue($formData, name) {
+	return $formData._data[name];
+}
+
+function updateValue(data, name, update) {
+	data.update(prev => {
+		const { value, isValid } = update(prev._data[name]);
+		prev._data[name] = value;
+		prev._isValidMap[name] = isValid;
+		return { ...prev };
+	});
+}
+
+function checkIfDataAreValid($formData) {
+	const dataAreValid = Object.entries($formData._data).reduce(
+		(dataAreValid, [name]) => {
+			return dataAreValid && ($formData._isValidMap[name] ?? true);
+		},
+		true
+	);
+
+	return dataAreValid;
+}
+
+const createFormDataAccessor = formId => {
+	const variableKey = `_form_${formId}`;
+
+	const update = updater => {
+		customVariables.update(prev => {
+			const updatedFormData = updater(prev[variableKey] ?? {});
+			return { ...prev, [variableKey]: updatedFormData };
+		});
+	};
+
+	const subscribe = run => {
+		return customVariables.subscribe(value => {
+			const formData = value[variableKey] ?? {};
+			run(formData);
+		});
+	};
+
+	const set = value => {
+		customVariables.update(prev => {
+			return { ...prev, [variableKey]: value };
+		});
+	};
+
+	return { update, set, subscribe };
+};
+
+function instance$6($$self, $$props, $$invalidate) {
+	let $formData;
+	let $formComponentData;
+	let { $$slots: slots = {}, $$scope } = $$props;
+	let { formId = 'form0' } = $$props;
+	const formComponentData = writable({ _data: {}, _isValidMap: {} });
+	component_subscribe($$self, formComponentData, value => $$invalidate(6, $formComponentData = value));
+
+	setContext(FORM_CONTEXT_KEY, {
+		formComponentData,
+		submit: ({ stateId }) => {
+			if (checkIfDataAreValid($formComponentData)) {
+				formData.update(prev => ({ ...prev, ...$formComponentData._data }));
+				console.log('will send', $formData);
+				setState$1(stateId, true);
+			}
+		},
+		next: ({ stateId }) => {
+			if (checkIfDataAreValid($formComponentData)) {
+				formData.update(prev => ({ ...prev, ...$formComponentData._data }));
+				setState$1(stateId, true);
+				console.log('formData after next()', $formData);
+			}
+		},
+		prev: ({ stateId }) => {
+			formData.update(prev => {
+				Object.keys($formComponentData._data).forEach(name => {
+					delete prev[name];
+				});
+
+				return { ...prev };
+			});
+
+			setState$1(stateId, true);
+			console.log('formData after prev()', $formData);
+		}
+	});
+
+	const formData = createFormDataAccessor(formId);
+	component_subscribe($$self, formData, value => $$invalidate(5, $formData = value));
+
+	$$self.$$set = $$props => {
+		if ('formId' in $$props) $$invalidate(2, formId = $$props.formId);
+		if ('$$scope' in $$props) $$invalidate(3, $$scope = $$props.$$scope);
+	};
+
+	return [formComponentData, formData, formId, $$scope, slots];
+}
+
+class Form extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, { formId: 2 }, add_css$5);
+	}
+}
+
+/* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
+
+function add_css$4(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$5(ctx) {
+	let div;
+	let textarea;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div = element("div");
+			textarea = element("textarea");
+			attr(textarea, "class", "textarea svelte-kyay3k");
+			textarea.value = /*value*/ ctx[3];
+			textarea.required = /*required*/ ctx[0];
+			attr(textarea, "rows", /*rows*/ ctx[1]);
+			attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
+			attr(div, "class", "textarea-wrapper svelte-kyay3k");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, textarea);
+
+			if (!mounted) {
+				dispose = listen(textarea, "input", /*handleInput*/ ctx[5]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*value*/ 8) {
+				textarea.value = /*value*/ ctx[3];
+			}
+
+			if (dirty & /*required*/ 1) {
+				textarea.required = /*required*/ ctx[0];
+			}
+
+			if (dirty & /*rows*/ 2) {
+				attr(textarea, "rows", /*rows*/ ctx[1]);
+			}
+
+			if (dirty & /*placeholder*/ 4) {
+				attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$5($$self, $$props, $$invalidate) {
+	let value;
+	let $formComponentData;
+	let { name = '' } = $$props;
+	let { required = true } = $$props;
+	let { rows = 2 } = $$props;
+	let { placeholder = '' } = $$props;
+	const { formComponentData } = getContext(FORM_CONTEXT_KEY);
+	component_subscribe($$self, formComponentData, value => $$invalidate(7, $formComponentData = value));
+
+	function setValue(value) {
+		updateValue(formComponentData, name, () => ({
+			value,
+			isValid: required ? !!value : true
+		}));
+	}
+
+	function handleInput(event) {
+		const value = event.target.value;
+		setValue(value);
+	}
+
+	setValue(value);
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(6, name = $$props.name);
+		if ('required' in $$props) $$invalidate(0, required = $$props.required);
+		if ('rows' in $$props) $$invalidate(1, rows = $$props.rows);
+		if ('placeholder' in $$props) $$invalidate(2, placeholder = $$props.placeholder);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*$formComponentData, name*/ 192) {
+			$$invalidate(3, value = getValue($formComponentData, name) ?? '');
+		}
+	};
+
+	return [
+		required,
+		rows,
+		placeholder,
+		value,
+		formComponentData,
+		handleInput,
+		name,
+		$formComponentData
+	];
+}
+
+class FormTextarea extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance$5,
+			create_fragment$5,
+			safe_not_equal,
+			{
+				name: 6,
+				required: 0,
+				rows: 1,
+				placeholder: 2
+			},
+			add_css$4
+		);
+	}
+}
+
+/* src/components/FormButton.svelte generated by Svelte v3.53.1 */
+
+function create_fragment$4(ctx) {
+	let input;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			input = element("input");
+			attr(input, "type", "button");
+			set_style(input, "width", "100%");
+			set_style(input, "height", "100%");
+			input.value = /*text*/ ctx[0];
+			input.disabled = /*disabled*/ ctx[1];
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+
+			if (!mounted) {
+				dispose = listen(input, "click", /*handleClick*/ ctx[3]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*text*/ 1) {
+				input.value = /*text*/ ctx[0];
+			}
+
+			if (dirty & /*disabled*/ 2) {
+				input.disabled = /*disabled*/ ctx[1];
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$4($$self, $$props, $$invalidate) {
+	let disabled;
+	let $formComponentData;
+	let { text = '' } = $$props;
+	let { type = { type: 'submit' } } = $$props;
+	const { formComponentData, submit, next, prev } = getContext(FORM_CONTEXT_KEY);
+	component_subscribe($$self, formComponentData, value => $$invalidate(5, $formComponentData = value));
+
+	function handleClick() {
+		switch (type.type) {
+			case 'submit':
+				{
+					const stateId = type.stateId;
+					submit({ stateId });
+					break;
+				}
+			case 'next':
+				{
+					const stateId = type.stateId;
+					next({ stateId });
+					break;
+				}
+			case 'prev':
+				{
+					const stateId = type.stateId;
+					prev({ stateId });
+					break;
+				}
+		}
+	}
+
+	$$self.$$set = $$props => {
+		if ('text' in $$props) $$invalidate(0, text = $$props.text);
+		if ('type' in $$props) $$invalidate(4, type = $$props.type);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*type, $formComponentData*/ 48) {
+			$$invalidate(1, disabled = (() => {
+				if (type.type === 'prev') return false;
+
+				const dataAreValid = Object.entries($formComponentData._data).reduce(
+					(dataAreValid, [name]) => {
+						return dataAreValid && ($formComponentData._isValidMap[name] ?? true);
+					},
+					true
+				);
+
+				return !dataAreValid;
+			})());
+		}
+	};
+
+	return [text, disabled, formComponentData, handleClick, type, $formComponentData];
+}
+
+class FormButton extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$4, create_fragment$4, safe_not_equal, { text: 0, type: 4 });
+	}
+}
+
+/* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
+
+function add_css$3(target) {
+	append_styles(target, "svelte-1ajmbw1", ".radio-buttons.svelte-1ajmbw1{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[5] = list[i];
+	child_ctx[7] = i;
+	return child_ctx;
+}
+
+// (16:2) {#each _options as option, i}
+function create_each_block(ctx) {
+	let label;
+	let input;
+	let input_value_value;
+	let t0;
+	let t1_value = /*option*/ ctx[5] + "";
+	let t1;
+	let t2;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			label = element("label");
+			input = element("input");
+			t0 = space();
+			t1 = text(t1_value);
+			t2 = space();
+			attr(input, "type", "radio");
+			attr(input, "name", /*name*/ ctx[0]);
+			input.value = input_value_value = /*option*/ ctx[5];
+		},
+		m(target, anchor) {
+			insert(target, label, anchor);
+			append(label, input);
+			append(label, t0);
+			append(label, t1);
+			append(label, t2);
+
+			if (!mounted) {
+				dispose = listen(input, "change", /*handleChange*/ ctx[2](/*i*/ ctx[7]));
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*name*/ 1) {
+				attr(input, "name", /*name*/ ctx[0]);
+			}
+
+			if (dirty & /*_options*/ 2 && input_value_value !== (input_value_value = /*option*/ ctx[5])) {
+				input.value = input_value_value;
+			}
+
+			if (dirty & /*_options*/ 2 && t1_value !== (t1_value = /*option*/ ctx[5] + "")) set_data(t1, t1_value);
+		},
+		d(detaching) {
+			if (detaching) detach(label);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment$3(ctx) {
+	let div;
+	let each_value = /*_options*/ ctx[1];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(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", "radio-buttons svelte-1ajmbw1");
+		},
+		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 & /*_options, name, handleChange*/ 7) {
+				each_value = /*_options*/ ctx[1];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(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);
+		}
+	};
+}
+
+function instance$3($$self, $$props, $$invalidate) {
+	let _options;
+	let { name = '' } = $$props;
+	let { options = '人参,レタス,キャベツ' } = $$props;
+	const { formComponentData } = getContext(FORM_CONTEXT_KEY);
+
+	const handleChange = index => event => {
+		if (event.target.checked) {
+			updateValue(formComponentData, name, () => ({ value: _options[index], isValid: true }));
+		}
+	};
+
+	updateValue(formComponentData, name, () => ({ value: '', isValid: false }));
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('options' in $$props) $$invalidate(3, options = $$props.options);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*options*/ 8) {
+			$$invalidate(1, _options = options.split(','));
+		}
+	};
+
+	return [name, _options, handleChange, options];
+}
+
+class FormRadioButtons extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { name: 0, options: 3 }, add_css$3);
 	}
 }
 
@@ -4501,4 +5092,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, EmbedElement, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };
+export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, Form, FormButton, FormRadioButtons, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };