@plaidev/karte-action-sdk 1.1.108-27919072.89513d87 → 1.1.108-27919404.8048beda

package/dist/hydrate/index.es.js

@@ -1,7 +1,7 @@
 import { writable, get } from 'svelte/store';
 import 'svelte/easing';
 import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, claim_component, claim_space, mount_component, insert_hydration, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, claim_element, children, attr, noop, listen, is_function, append_hydration, add_render_callback, create_in_transition, svg_element, claim_svg_element, binding_callbacks, destroy_each, text, claim_text, set_data, null_to_empty, src_url_equal, set_style } from 'svelte/internal';
-import { createEventDispatcher, onMount, onDestroy as onDestroy$1, setContext, getContext } from 'svelte';
+import { setContext, getContext, createEventDispatcher, onMount, onDestroy as onDestroy$1 } from 'svelte';
 
 /**
  * 内部的に使われている、UIから選択できない関数
@@ -461,6 +461,10 @@ function updateCustomVariables(variables) {
     });
     return getCustomVariables();
 }
+/**
+ * Store for form data
+ */
+const formData = writable({});
 
 const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
 const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
@@ -1713,8 +1717,8 @@ function add_css$j(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
-// (11:0) {#if $state === path}
-function create_if_block$3(ctx) {
+// (23:0) {#if $state === path}
+function create_if_block$4(ctx) {
 	let div;
 	let t;
 	let current;
@@ -1789,7 +1793,7 @@ function create_if_block$3(ctx) {
 function create_fragment$n(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$3(ctx);
+	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$4(ctx);
 
 	return {
 		c() {
@@ -1814,7 +1818,7 @@ function create_fragment$n(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$3(ctx);
+					if_block = create_if_block$4(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -1845,11 +1849,18 @@ function create_fragment$n(ctx) {
 	};
 }
 
+const STATE_ITEM_CONTEXT_KEY = Symbol();
+
+function getStateItemContext() {
+	return getContext(STATE_ITEM_CONTEXT_KEY);
+}
+
 function instance$n($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
+	setContext(STATE_ITEM_CONTEXT_KEY, { path });
 
 	$$self.$$set = $$props => {
 		if ('path' in $$props) $$invalidate(0, path = $$props.path);
@@ -1881,7 +1892,7 @@ function add_css$i(target) {
 }
 
 // (9:0) {#if backgroundOverray}
-function create_if_block$2(ctx) {
+function create_if_block$3(ctx) {
 	let div;
 	let mounted;
 	let dispose;
@@ -1918,7 +1929,7 @@ function create_if_block$2(ctx) {
 
 function create_fragment$m(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$2(ctx);
+	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$3(ctx);
 
 	return {
 		c() {
@@ -1938,7 +1949,7 @@ function create_fragment$m(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(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -1982,7 +1993,7 @@ function add_css$h(target) {
 }
 
 // (142:0) {#if visible}
-function create_if_block$1(ctx) {
+function create_if_block$2(ctx) {
 	let div1;
 	let t;
 	let div0;
@@ -2225,7 +2236,7 @@ function create_fragment$l(ctx) {
 		if (is_function(/*backgroundClick*/ ctx[12])) /*backgroundClick*/ ctx[12].apply(this, arguments);
 	});
 
-	let if_block = /*visible*/ ctx[6] && create_if_block$1(ctx);
+	let if_block = /*visible*/ ctx[6] && create_if_block$2(ctx);
 
 	return {
 		c() {
@@ -2269,7 +2280,7 @@ function create_fragment$l(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$1(ctx);
+					if_block = create_if_block$2(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -3367,14 +3378,14 @@ class FlexItem extends SvelteComponent {
 
 /* src/components/RenderText.svelte generated by Svelte v3.53.1 */
 
-function get_each_context$1(ctx, list, i) {
+function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[2] = list[i];
 	return child_ctx;
 }
 
 // (12:2) {:else}
-function create_else_block(ctx) {
+function create_else_block$1(ctx) {
 	let t_value = /*item*/ ctx[2] + "";
 	let t;
 
@@ -3398,7 +3409,7 @@ function create_else_block(ctx) {
 }
 
 // (10:2) {#if item.match(regexp)}
-function create_if_block(ctx) {
+function create_if_block$1(ctx) {
 	let br;
 
 	return {
@@ -3419,15 +3430,15 @@ function create_if_block(ctx) {
 }
 
 // (9:0) {#each items as item}
-function create_each_block$1(ctx) {
+function create_each_block$2(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;
-		return create_else_block;
+		if (show_if) return create_if_block$1;
+		return create_else_block$1;
 	}
 
 	let current_block_type = select_block_type(ctx, -1);
@@ -3472,7 +3483,7 @@ function create_fragment$f(ctx) {
 	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 {
@@ -3503,12 +3514,12 @@ function create_fragment$f(ctx) {
 				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(each_1_anchor.parentNode, each_1_anchor);
 					}
@@ -4805,190 +4816,108 @@ class MovieVimeoElement extends SvelteComponent {
 	}
 }
 
-/* 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();
-			this.h();
-		},
-		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true });
-			var div_nodes = children(div);
-			if (default_slot) default_slot.l(div_nodes);
-			div_nodes.forEach(detach);
-			this.h();
-		},
-		h() {
-			attr(div, "class", "form svelte-1il0aow");
-		},
-		m(target, anchor) {
-			insert_hydration(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;
+function registerInput({ name, statePath, validator = () => true, initialValue, }) {
+    const writableValue = {
+        subscribe(run) {
+            return formData.subscribe(formData => {
+                run(formData[name]?.value);
+            });
+        },
+        set(value) {
+            formData.update(prev => ({
+                ...prev,
+                [name]: {
+                    statePath,
+                    value,
+                    isValid: validator(value),
+                },
+            }));
+        },
+        update(updater) {
+            formData.update(prev => {
+                const prevValue = prev[name]?.value;
+                return {
+                    ...prev,
+                    [name]: {
+                        statePath,
+                        value: updater(prevValue),
+                        isValid: validator(prevValue),
+                    },
+                };
+            });
+        },
+    };
+    writableValue.set(initialValue);
+    return writableValue;
+}
+function deleteValues(statePath) {
+    formData.update(prev => {
+        const targetNames = Object.entries(prev)
+            .filter(([_, { statePath: s }]) => s === statePath)
+            .map(([name]) => name);
+        targetNames.forEach(name => {
+            delete prev[name];
+        });
+        return { ...prev };
+    });
 }
-
-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];
+const getValuesAreValidReader = statePath => ({
+    subscribe(callback) {
+        return formData.subscribe(formData => {
+            const valuesAreValid = Object.entries(formData)
+                .filter(([_, { statePath: s }]) => s === statePath)
+                .every(([_, { isValid }]) => isValid);
+            callback(valuesAreValid);
+        });
+    },
+});
+function formDataToEventValues(campaignId, formData) {
+    const questions = [];
+    const answersMap = {};
+    Object.entries(formData).forEach(([name, dataItem]) => {
+        questions.push(name);
+        const value = dataItem.value;
+        const answerKey = `question_${name}`;
+        if (Array.isArray(value)) {
+            answersMap[answerKey] = {
+                choices: value,
+            };
+        }
+        else if (typeof value === 'string') {
+            answersMap[answerKey] = {
+                free_answer: value,
+            };
+        }
+    });
+    return {
+        [campaignId]: {
+            questions,
+            ...answersMap,
+        },
+    };
 }
-
-class Form extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { formId: 2 }, add_css$5);
-	}
+function submit() {
+    const systemConfig = getSystem();
+    const campaignId = systemConfig.campaignId;
+    if (campaignId) {
+        const formData$1 = get(formData);
+        const values = formDataToEventValues(campaignId, formData$1);
+        send_event('_answer_question', values);
+    }
+    {
+        const formData$1 = get(formData);
+        const values = formDataToEventValues('mock', formData$1);
+        console.log('values: ', values);
+    }
 }
 
 /* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
 
-function add_css$4(target) {
+function add_css$5(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) {
+function create_fragment$6(ctx) {
 	let div;
 	let textarea;
 	let mounted;
@@ -5016,7 +4945,7 @@ function create_fragment$5(ctx) {
 		},
 		h() {
 			attr(textarea, "class", "textarea svelte-kyay3k");
-			textarea.value = /*value*/ ctx[3];
+			textarea.value = /*$value*/ ctx[3];
 			textarea.required = /*required*/ ctx[0];
 			attr(textarea, "rows", /*rows*/ ctx[1]);
 			attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
@@ -5032,8 +4961,8 @@ function create_fragment$5(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*value*/ 8) {
-				textarea.value = /*value*/ ctx[3];
+			if (dirty & /*$value*/ 8) {
+				textarea.value = /*$value*/ ctx[3];
 			}
 
 			if (dirty & /*required*/ 1) {
@@ -5058,30 +4987,30 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
-	let value;
-	let $formComponentData;
+function instance$6($$self, $$props, $$invalidate) {
+	let $value;
 	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
-		}));
-	}
+	const { path: statePath } = getStateItemContext();
+
+	const value = registerInput({
+		name,
+		statePath,
+		initialValue: '',
+		validator(value) {
+			return required ? !!value : true;
+		}
+	});
+
+	component_subscribe($$self, value, value => $$invalidate(3, $value = value));
 
 	function handleInput(event) {
-		const value = event.target.value;
-		setValue(value);
+		const updated = event.target.value;
+		value.set(updated);
 	}
 
-	setValue(value);
-
 	$$self.$$set = $$props => {
 		if ('name' in $$props) $$invalidate(6, name = $$props.name);
 		if ('required' in $$props) $$invalidate(0, required = $$props.required);
@@ -5089,22 +5018,7 @@ function instance$5($$self, $$props, $$invalidate) {
 		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
-	];
+	return [required, rows, placeholder, $value, value, handleInput, name];
 }
 
 class FormTextarea extends SvelteComponent {
@@ -5114,8 +5028,8 @@ class FormTextarea extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$5,
-			create_fragment$5,
+			instance$6,
+			create_fragment$6,
 			safe_not_equal,
 			{
 				name: 6,
@@ -5123,14 +5037,14 @@ class FormTextarea extends SvelteComponent {
 				rows: 1,
 				placeholder: 2
 			},
-			add_css$4
+			add_css$5
 		);
 	}
 }
 
 /* src/components/FormButton.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
 	let input;
 	let mounted;
 	let dispose;
@@ -5155,7 +5069,7 @@ function create_fragment$4(ctx) {
 			insert_hydration(target, input, anchor);
 
 			if (!mounted) {
-				dispose = listen(input, "click", /*handleClick*/ ctx[3]);
+				dispose = listen(input, "click", /*handleClick*/ ctx[2]);
 				mounted = true;
 			}
 		},
@@ -5178,89 +5092,90 @@ function create_fragment$4(ctx) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let disabled;
-	let $formComponentData;
+	let $valuesAreValid;
 	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));
+	const { path: statePath } = getStateItemContext();
 
 	function handleClick() {
 		switch (type.type) {
 			case 'submit':
 				{
-					const stateId = type.stateId;
-					submit({ stateId });
+					if ($valuesAreValid) {
+						submit();
+						const stateId = type.stateId;
+						setState$1(stateId, true);
+					}
+
 					break;
 				}
 			case 'next':
 				{
-					const stateId = type.stateId;
-					next({ stateId });
+					if ($valuesAreValid) {
+						const stateId = type.stateId;
+						setState$1(stateId, true);
+					}
+
 					break;
 				}
 			case 'prev':
 				{
+					deleteValues(statePath);
 					const stateId = type.stateId;
-					prev({ stateId });
+					setState$1(stateId, true);
 					break;
 				}
 		}
 	}
 
+	const valuesAreValid = getValuesAreValidReader(statePath);
+	component_subscribe($$self, valuesAreValid, value => $$invalidate(5, $valuesAreValid = value));
+
 	$$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) {
+		if ($$self.$$.dirty & /*type, $valuesAreValid*/ 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;
+				const enabled = type.type === 'prev' || $valuesAreValid;
+				return !enabled;
 			})());
 		}
 	};
 
-	return [text, disabled, formComponentData, handleClick, type, $formComponentData];
+	return [text, disabled, handleClick, valuesAreValid, type, $valuesAreValid];
 }
 
 class FormButton extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$4, create_fragment$4, safe_not_equal, { text: 0, type: 4 });
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { text: 0, type: 4 });
 	}
 }
 
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
-function add_css$3(target) {
+function add_css$4(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) {
+function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[5] = list[i];
-	child_ctx[7] = i;
+	child_ctx[7] = list[i];
+	child_ctx[9] = i;
 	return child_ctx;
 }
 
-// (16:2) {#each _options as option, i}
-function create_each_block(ctx) {
+// (23:2) {#each _options as option, i}
+function create_each_block$1(ctx) {
 	let label;
 	let input;
-	let input_value_value;
 	let t0;
-	let t1_value = /*option*/ ctx[5] + "";
+	let t1_value = /*option*/ ctx[7] + "";
 	let t1;
 	let t2;
 	let mounted;
@@ -5288,7 +5203,7 @@ function create_each_block(ctx) {
 		h() {
 			attr(input, "type", "radio");
 			attr(input, "name", /*name*/ ctx[0]);
-			input.value = input_value_value = /*option*/ ctx[5];
+			input.value = /*$value*/ ctx[2];
 		},
 		m(target, anchor) {
 			insert_hydration(target, label, anchor);
@@ -5298,7 +5213,7 @@ function create_each_block(ctx) {
 			append_hydration(label, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[2](/*i*/ ctx[7]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[4](/*i*/ ctx[9]));
 				mounted = true;
 			}
 		},
@@ -5309,11 +5224,11 @@ function create_each_block(ctx) {
 				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 & /*$value*/ 4) {
+				input.value = /*$value*/ ctx[2];
 			}
 
-			if (dirty & /*_options*/ 2 && t1_value !== (t1_value = /*option*/ ctx[5] + "")) set_data(t1, t1_value);
+			if (dirty & /*_options*/ 2 && t1_value !== (t1_value = /*option*/ ctx[7] + "")) set_data(t1, t1_value);
 		},
 		d(detaching) {
 			if (detaching) detach(label);
@@ -5323,13 +5238,13 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$3(ctx) {
+function create_fragment$4(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));
+		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
 	}
 
 	return {
@@ -5364,17 +5279,17 @@ function create_fragment$3(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options, name, handleChange*/ 7) {
+			if (dirty & /*_options, name, $value, handleChange*/ 23) {
 				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);
+					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(div, null);
 					}
@@ -5396,38 +5311,298 @@ function create_fragment$3(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let _options;
+	let $value;
 	let { name = '' } = $$props;
 	let { options = '人参,レタス,キャベツ' } = $$props;
-	const { formComponentData } = getContext(FORM_CONTEXT_KEY);
+	const { path: statePath } = getStateItemContext();
+
+	const value = registerInput({
+		name,
+		statePath,
+		initialValue: [],
+		validator(value) {
+			return value.length > 0;
+		}
+	});
+
+	component_subscribe($$self, value, value => $$invalidate(2, $value = value));
 
 	const handleChange = index => event => {
 		if (event.target.checked) {
-			updateValue(formComponentData, name, () => ({ value: _options[index], isValid: true }));
+			value.set([_options[index]]);
 		}
 	};
 
-	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);
+		if ('options' in $$props) $$invalidate(5, options = $$props.options);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*options*/ 8) {
+		if ($$self.$$.dirty & /*options*/ 32) {
 			$$invalidate(1, _options = options.split(','));
 		}
 	};
 
-	return [name, _options, handleChange, options];
+	return [name, _options, $value, value, 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);
+		init(this, options, instance$4, create_fragment$4, safe_not_equal, { name: 0, options: 5 }, add_css$4);
+	}
+}
+
+/* src/components/FormSelect.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[6] = list[i];
+	child_ctx[8] = i;
+	return child_ctx;
+}
+
+// (28:8) {:else}
+function create_else_block(ctx) {
+	let t;
+
+	return {
+		c() {
+			t = text("回答を選択して下さい");
+		},
+		l(nodes) {
+			t = claim_text(nodes, "回答を選択して下さい");
+		},
+		m(target, anchor) {
+			insert_hydration(target, t, anchor);
+		},
+		p: noop,
+		d(detaching) {
+			if (detaching) detach(t);
+		}
+	};
+}
+
+// (26:8) {#if option}
+function create_if_block(ctx) {
+	let t_value = /*option*/ ctx[6] + "";
+	let t;
+
+	return {
+		c() {
+			t = text(t_value);
+		},
+		l(nodes) {
+			t = claim_text(nodes, t_value);
+		},
+		m(target, anchor) {
+			insert_hydration(target, t, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*_options*/ 1 && t_value !== (t_value = /*option*/ ctx[6] + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(t);
+		}
+	};
+}
+
+// (24:4) {#each _options as option, i}
+function create_each_block(ctx) {
+	let option;
+	let t;
+	let option_value_value;
+
+	function select_block_type(ctx, dirty) {
+		if (/*option*/ ctx[6]) return create_if_block;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type(ctx);
+
+	return {
+		c() {
+			option = element("option");
+			if_block.c();
+			t = space();
+			this.h();
+		},
+		l(nodes) {
+			option = claim_element(nodes, "OPTION", {});
+			var option_nodes = children(option);
+			if_block.l(option_nodes);
+			t = claim_space(option_nodes);
+			option_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			option.__value = option_value_value = /*option*/ ctx[6];
+			option.value = option.__value;
+		},
+		m(target, anchor) {
+			insert_hydration(target, option, anchor);
+			if_block.m(option, null);
+			append_hydration(option, t);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(option, t);
+				}
+			}
+
+			if (dirty & /*_options*/ 1 && option_value_value !== (option_value_value = /*option*/ ctx[6])) {
+				option.__value = option_value_value;
+				option.value = option.__value;
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(option);
+			if_block.d();
+		}
+	};
+}
+
+function create_fragment$3(ctx) {
+	let div;
+	let select;
+	let mounted;
+	let dispose;
+	let each_value = /*_options*/ 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));
+	}
+
+	return {
+		c() {
+			div = element("div");
+			select = element("select");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+			select = claim_element(div_nodes, "SELECT", {});
+			var select_nodes = children(select);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].l(select_nodes);
+			}
+
+			select_nodes.forEach(detach);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "radio-buttons svelte-1ajmbw1");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			append_hydration(div, select);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(select, null);
+			}
+
+			if (!mounted) {
+				dispose = listen(select, "change", /*handleChange*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*_options*/ 1) {
+				each_value = /*_options*/ ctx[0];
+				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(select, 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);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$3($$self, $$props, $$invalidate) {
+	let _options;
+	let { name = '' } = $$props;
+	let { options = 'プルダウン1,プルダウン2,プルダウン3' } = $$props;
+	const { path: statePath } = getStateItemContext();
+
+	const value = registerInput({
+		name,
+		statePath,
+		initialValue: [],
+		validator(value) {
+			return value.length > 0;
+		}
+	});
+
+	function handleChange(event) {
+		const updated = event.target.value ? [event.target.value] : [];
+		value.set(updated);
+	}
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(2, name = $$props.name);
+		if ('options' in $$props) $$invalidate(3, options = $$props.options);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*options*/ 8) {
+			$$invalidate(0, _options = ['', ...options.split(',')]);
+		}
+	};
+
+	return [_options, handleChange, name, options];
+}
+
+class FormSelect extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { name: 2, options: 3 }, add_css$3);
 	}
 }
 
@@ -5818,4 +5993,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, ClipPaths, 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, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, 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, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormRadioButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, 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, formData, 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 };