@plaidev/karte-action-sdk 1.1.119 → 1.1.120-27930660.06640d93

package/dist/hydrate/index.es.js

@@ -586,6 +586,104 @@ function updateCustomVariables(variables) {
  */
 const formData = writable({});
 
+function isEmpty(value) {
+    if (Array.isArray(value)) {
+        return value.length === 0;
+    }
+    else {
+        return !value;
+    }
+}
+/** @internal */
+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),
+                    },
+                };
+            });
+        },
+    };
+    if (isEmpty(get(writableValue))) {
+        writableValue.set(initialValue);
+    }
+    return writableValue;
+}
+/** @internal */
+const getValuesAreValidReader = statePath => ({
+    subscribe(callback) {
+        return formData.subscribe(formData => {
+            const valuesAreValid = Object.entries(formData)
+                .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
+                .every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
+            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,
+        },
+    };
+}
+/** @internal */
+function submit() {
+    const systemConfig = getSystem();
+    const campaignId = systemConfig.campaignId;
+    if (campaignId) {
+        const formData$1 = get(formData);
+        const values = formDataToEventValues(campaignId, formData$1);
+        return values;
+    }
+    {
+        const formData$1 = get(formData);
+        const values = formDataToEventValues('mock', formData$1);
+        console.log('values: ', values);
+        return values;
+    }
+}
+
 /** @internal */
 const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
 /** @internal */
@@ -631,10 +729,13 @@ const send_event = (event_name, values) => {
     const setting = getActionSetting();
     setting?.send?.(event_name, values);
 };
-/** @internal */
-const moveTo = (to) => () => {
+function _moveTo(to) {
     send_event('_message_state_changed', { state: to });
     window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
+}
+/** @internal */
+const moveTo = (to) => () => {
+    _moveTo(to);
 };
 /** @internal */
 const linkTo = (to, targetBlank = true) => () => {
@@ -664,6 +765,21 @@ const runScript = (handlerName) => () => {
     }
 };
 /** @internal */
+const submitForm = (to) => () => {
+    const values = submit();
+    send_event('_answer_question', values);
+    _moveTo(to);
+};
+/** @internal */
+const nextForm = (to) => () => {
+    _moveTo(to);
+};
+/** @internal */
+const prevForm = (to) => () => {
+    // deleteValues(stateId);
+    _moveTo(to);
+};
+/** @internal */
 const execOnClickOperation = (onClickOperation) => {
     if (onClickOperation.operation === 'linkTo') {
         linkTo(...onClickOperation.args)();
@@ -677,6 +793,15 @@ const execOnClickOperation = (onClickOperation) => {
     else if (onClickOperation.operation === 'runScript') {
         runScript(onClickOperation.args[0])();
     }
+    else if (onClickOperation.operation === 'submitForm') {
+        submitForm(onClickOperation.args[0])();
+    }
+    else if (onClickOperation.operation === 'nextForm') {
+        nextForm(onClickOperation.args[0])();
+    }
+    else if (onClickOperation.operation === 'prevForm') {
+        prevForm(onClickOperation.args[0])();
+    }
 };
 /** @internal */
 const haveFunction = (onClickOperation) => {
@@ -992,11 +1117,8 @@ const OnClickOperationOptions = [
             },
         ],
     },
-];
-/** @internal */
-const FormOperationOptions = [
     {
-        operation: 'submit',
+        operation: 'submitForm',
         args: [
             {
                 type: 'TransitState',
@@ -1005,7 +1127,7 @@ const FormOperationOptions = [
         ],
     },
     {
-        operation: 'next',
+        operation: 'nextForm',
         args: [
             {
                 type: 'TransitState',
@@ -1014,7 +1136,7 @@ const FormOperationOptions = [
         ],
     },
     {
-        operation: 'prev',
+        operation: 'prevForm',
         args: [
             {
                 type: 'TransitState',
@@ -1930,14 +2052,14 @@ var widget = /*#__PURE__*/Object.freeze({
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$n(target) {
+function add_css$o(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$n);
+		init(this, options, null, null, safe_not_equal, {}, add_css$o);
 	}
 }
 
@@ -2026,12 +2148,12 @@ class State extends SvelteComponent {
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$m(target) {
+function add_css$n(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
 // (23:0) {#if $state === path}
-function create_if_block$5(ctx) {
+function create_if_block$7(ctx) {
 	let div;
 	let t;
 	let current;
@@ -2106,7 +2228,7 @@ function create_if_block$5(ctx) {
 function create_fragment$q(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$5(ctx);
+	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -2131,7 +2253,7 @@ function create_fragment$q(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$5(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);
@@ -2194,18 +2316,18 @@ function instance$q($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$q, create_fragment$q, safe_not_equal, { path: 0 }, add_css$m);
+		init(this, options, instance$q, create_fragment$q, safe_not_equal, { path: 0 }, add_css$n);
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
-function add_css$l(target) {
+function add_css$m(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$4(ctx) {
+function create_if_block$6(ctx) {
 	let div;
 	let mounted;
 	let dispose;
@@ -2242,7 +2364,7 @@ function create_if_block$4(ctx) {
 
 function create_fragment$p(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$4(ctx);
+	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -2262,7 +2384,7 @@ function create_fragment$p(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$4(ctx);
+					if_block = create_if_block$6(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -2295,18 +2417,18 @@ function instance$p($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$p, create_fragment$p, safe_not_equal, { backgroundOverray: 0 }, add_css$l);
+		init(this, options, instance$p, create_fragment$p, safe_not_equal, { backgroundOverray: 0 }, add_css$m);
 	}
 }
 
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
-function add_css$k(target) {
+function add_css$l(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}");
 }
 
 // (142:0) {#if visible}
-function create_if_block$3(ctx) {
+function create_if_block$5(ctx) {
 	let div1;
 	let t;
 	let div0;
@@ -2315,7 +2437,7 @@ function create_if_block$3(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*closable*/ ctx[14] && create_if_block_1$1(ctx);
+	let if_block = /*closable*/ ctx[14] && create_if_block_1$2(ctx);
 	const default_slot_template = /*#slots*/ ctx[29].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[28], null);
 
@@ -2382,7 +2504,7 @@ function create_if_block$3(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_1$1(ctx);
+					if_block = create_if_block_1$2(ctx);
 					if_block.c();
 					if_block.m(div1, t);
 				}
@@ -2447,7 +2569,7 @@ function create_if_block$3(ctx) {
 }
 
 // (159:4) {#if closable}
-function create_if_block_1$1(ctx) {
+function create_if_block_1$2(ctx) {
 	let button;
 	let svg;
 	let path;
@@ -2549,7 +2671,7 @@ function create_fragment$o(ctx) {
 		if (is_function(/*backgroundClick*/ ctx[12])) /*backgroundClick*/ ctx[12].apply(this, arguments);
 	});
 
-	let if_block = /*visible*/ ctx[6] && create_if_block$3(ctx);
+	let if_block = /*visible*/ ctx[6] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -2593,7 +2715,7 @@ function create_fragment$o(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$3(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);
@@ -2838,7 +2960,7 @@ class Modal extends SvelteComponent {
 				closeButtonColor: 2,
 				_closeStyle: 3
 			},
-			add_css$k
+			add_css$l
 		);
 	}
 }
@@ -3293,7 +3415,7 @@ class GridModalState extends SvelteComponent {
 
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$j(target) {
+function add_css$k(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}");
 }
 
@@ -3442,14 +3564,14 @@ class GridItem extends SvelteComponent {
 				z: 6,
 				background: 7
 			},
-			add_css$j
+			add_css$k
 		);
 	}
 }
 
 /* src/components/Flex.svelte generated by Svelte v3.53.1 */
 
-function add_css$i(target) {
+function add_css$j(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
 
@@ -3563,14 +3685,14 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$i
+			add_css$j
 		);
 	}
 }
 
 /* src/components/FlexItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$h(target) {
+function add_css$i(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
 
@@ -3685,13 +3807,13 @@ function instance$j($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$j, create_fragment$j, safe_not_equal, { length: 1, _style: 2 }, add_css$h);
+		init(this, options, instance$j, create_fragment$j, safe_not_equal, { length: 1, _style: 2 }, add_css$i);
 	}
 }
 
 /* src/components/RenderText.svelte generated by Svelte v3.53.1 */
 
-function get_each_context$4(ctx, list, i) {
+function get_each_context$5(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[2] = list[i];
 	return child_ctx;
@@ -3722,7 +3844,7 @@ function create_else_block$1(ctx) {
 }
 
 // (10:2) {#if item.match(regexp)}
-function create_if_block$2(ctx) {
+function create_if_block$4(ctx) {
 	let br;
 
 	return {
@@ -3743,14 +3865,14 @@ function create_if_block$2(ctx) {
 }
 
 // (9:0) {#each items as item}
-function create_each_block$4(ctx) {
+function create_each_block$5(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$2;
+		if (show_if) return create_if_block$4;
 		return create_else_block$1;
 	}
 
@@ -3796,7 +3918,7 @@ function create_fragment$i(ctx) {
 	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 {
@@ -3827,12 +3949,12 @@ function create_fragment$i(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(each_1_anchor.parentNode, each_1_anchor);
 					}
@@ -3882,7 +4004,7 @@ class RenderText extends SvelteComponent {
 
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$g(target) {
+function add_css$h(target) {
 	append_styles(target, "svelte-9en2jg", ".text-element.svelte-9en2jg.svelte-9en2jg{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto}.text-element-inner.svelte-9en2jg.svelte-9en2jg{width:100%;height:auto}.text-direction-vertical.svelte-9en2jg.svelte-9en2jg{writing-mode:vertical-rl}.text-direction-vertical.svelte-9en2jg .text-element-inner.svelte-9en2jg{width:auto;height:100%}");
 }
 
@@ -3990,21 +4112,23 @@ class TextElement extends SvelteComponent {
 				textDirection: 1,
 				_style: 4
 			},
-			add_css$g
+			add_css$h
 		);
 	}
 }
 
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$f(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 add_css$g(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$g(ctx) {
 	let div;
 	let button;
 	let rendertext;
+	let button_class_value;
+	let div_class_value;
 	let current;
 	let mounted;
 	let dispose;
@@ -4028,9 +4152,10 @@ function create_fragment$g(ctx) {
 			this.h();
 		},
 		h() {
-			attr(button, "class", "text-button svelte-tx5xf5");
+			attr(button, "class", button_class_value = "" + (null_to_empty(`text-button${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"));
 			attr(button, "style", /*_buttonStyle*/ ctx[1]);
-			attr(div, "class", "text-button-element svelte-tx5xf5");
+			button.disabled = /*disabled*/ ctx[3];
+			attr(div, "class", div_class_value = "" + (null_to_empty(`text-button-element${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"));
 			attr(div, "style", /*_style*/ ctx[2]);
 		},
 		m(target, anchor) {
@@ -4040,7 +4165,7 @@ function create_fragment$g(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(button, "click", /*click*/ ctx[3]);
+				dispose = listen(button, "click", /*click*/ ctx[4]);
 				mounted = true;
 			}
 		},
@@ -4049,10 +4174,22 @@ function create_fragment$g(ctx) {
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
 
+			if (!current || dirty & /*disabled*/ 8 && button_class_value !== (button_class_value = "" + (null_to_empty(`text-button${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"))) {
+				attr(button, "class", button_class_value);
+			}
+
 			if (!current || dirty & /*_buttonStyle*/ 2) {
 				attr(button, "style", /*_buttonStyle*/ ctx[1]);
 			}
 
+			if (!current || dirty & /*disabled*/ 8) {
+				button.disabled = /*disabled*/ ctx[3];
+			}
+
+			if (!current || dirty & /*disabled*/ 8 && div_class_value !== (div_class_value = "" + (null_to_empty(`text-button-element${/*disabled*/ ctx[3] ? ' _disabled' : ''}`) + " svelte-1igv5yx"))) {
+				attr(div, "class", div_class_value);
+			}
+
 			if (!current || dirty & /*_style*/ 4) {
 				attr(div, "style", /*_style*/ ctx[2]);
 			}
@@ -4076,6 +4213,8 @@ function create_fragment$g(ctx) {
 }
 
 function instance$g($$self, $$props, $$invalidate) {
+	let disabled;
+	let $valuesAreValid;
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 
@@ -4090,16 +4229,45 @@ function instance$g($$self, $$props, $$invalidate) {
 	let { eventName = '' } = $$props;
 	let { _buttonStyle = 'color:#ffffff; font-size:14px; font-weight:bold; justify-content:center; align-items:center; padding:1px 6px 1px 6px;' } = $$props;
 	let { _style = 'background-color: #000000; border-radius:4px;' } = $$props;
+	const { path: statePath } = getStateItemContext() ?? { path: '/' };
+	const valuesAreValid = getValuesAreValidReader(statePath);
+	component_subscribe($$self, valuesAreValid, value => $$invalidate(8, $valuesAreValid = value));
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
-		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
+		if ('onClick' in $$props) $$invalidate(6, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(7, eventName = $$props.eventName);
 		if ('_buttonStyle' in $$props) $$invalidate(1, _buttonStyle = $$props._buttonStyle);
 		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
 	};
 
-	return [text, _buttonStyle, _style, click, onClick, eventName];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*onClick, $valuesAreValid*/ 320) {
+			$$invalidate(3, disabled = (() => {
+				let isEnabled = true;
+
+				if (onClick.operation === 'submitForm') {
+					isEnabled = $valuesAreValid;
+				} else if (onClick.operation === 'nextForm') {
+					isEnabled = $valuesAreValid;
+				}
+
+				return !isEnabled;
+			})());
+		}
+	};
+
+	return [
+		text,
+		_buttonStyle,
+		_style,
+		disabled,
+		click,
+		valuesAreValid,
+		onClick,
+		eventName,
+		$valuesAreValid
+	];
 }
 
 class TextButtonElement extends SvelteComponent {
@@ -4114,19 +4282,19 @@ class TextButtonElement extends SvelteComponent {
 			safe_not_equal,
 			{
 				text: 0,
-				onClick: 4,
-				eventName: 5,
+				onClick: 6,
+				eventName: 7,
 				_buttonStyle: 1,
 				_style: 2
 			},
-			add_css$f
+			add_css$g
 		);
 	}
 }
 
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$e(target) {
+function add_css$f(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)}");
 }
 
@@ -4262,14 +4430,14 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 3,
 				_style: 4
 			},
-			add_css$e
+			add_css$f
 		);
 	}
 }
 
 /* src/components/List.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$e(target) {
 	append_styles(target, "svelte-dfqtyx", ".list.svelte-dfqtyx{display:flex;width:100%;height:100%;overflow:hidden}");
 }
 
@@ -4419,14 +4587,14 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$d
+			add_css$e
 		);
 	}
 }
 
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$c(target) {
+function add_css$d(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}");
 }
 
@@ -4614,13 +4782,13 @@ function instance$d($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$d, create_fragment$d, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$c);
+		init(this, options, instance$d, create_fragment$d, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$d);
 	}
 }
 
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$b(target) {
+function add_css$c(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%}");
 }
 
@@ -4675,13 +4843,13 @@ function instance$c($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$c, create_fragment$c, safe_not_equal, { code: 0, _style: 1 }, add_css$b);
+		init(this, options, instance$c, create_fragment$c, safe_not_equal, { code: 0, _style: 1 }, add_css$c);
 	}
 }
 
 /* src/components/MovieYouTubeElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$a(target) {
+function add_css$b(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%}");
 }
 
@@ -4917,14 +5085,14 @@ class MovieYouTubeElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$a
+			add_css$b
 		);
 	}
 }
 
 /* src/components/MovieVimeoElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$9(target) {
+function add_css$a(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%}");
 }
 
@@ -5124,114 +5292,15 @@ class MovieVimeoElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$9
+			add_css$a
 		);
 	}
 }
 
-/** @internal */
-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;
-}
-/** @internal */
-function deleteValues(statePath) {
-    formData.update(prev => {
-        const targetNames = Object.entries(prev)
-            .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
-            .map(([name]) => name);
-        targetNames.forEach(name => {
-            delete prev[name];
-        });
-        return { ...prev };
-    });
-}
-/** @internal */
-const getValuesAreValidReader = statePath => ({
-    subscribe(callback) {
-        return formData.subscribe(formData => {
-            const valuesAreValid = Object.entries(formData)
-                .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
-                .every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
-            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,
-        },
-    };
-}
-/** @internal */
-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$8(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}");
+/* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
+
+function add_css$9(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$9(ctx) {
@@ -5354,145 +5423,33 @@ class FormTextarea extends SvelteComponent {
 				rows: 1,
 				placeholder: 2
 			},
-			add_css$8
+			add_css$9
 		);
 	}
 }
 
-/* src/components/FormButton.svelte generated by Svelte v3.53.1 */
-
-function create_fragment$8(ctx) {
-	let input;
-	let mounted;
-	let dispose;
-
-	return {
-		c() {
-			input = element("input");
-			this.h();
-		},
-		l(nodes) {
-			input = claim_element(nodes, "INPUT", { type: true, style: true });
-			this.h();
-		},
-		h() {
-			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_hydration(target, input, anchor);
-
-			if (!mounted) {
-				dispose = listen(input, "click", /*handleClick*/ ctx[2]);
-				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$8($$self, $$props, $$invalidate) {
-	let disabled;
-	let $valuesAreValid;
-	let { text = '' } = $$props;
-	let { onClick = { operation: 'submit', args: ['/'] } } = $$props;
-	const { path: statePath } = getStateItemContext();
-
-	function handleClick() {
-		switch (onClick.operation) {
-			case 'submit':
-				{
-					if ($valuesAreValid) {
-						submit();
-						const stateId = onClick.args[0];
-						setState$1(stateId);
-					}
-
-					break;
-				}
-			case 'next':
-				{
-					if ($valuesAreValid) {
-						const stateId = onClick.args[0];
-						setState$1(stateId);
-					}
-
-					break;
-				}
-			case 'prev':
-				{
-					deleteValues(statePath);
-					const stateId = onClick.args[0];
-					setState$1(stateId);
-					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 ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*onClick, $valuesAreValid*/ 48) {
-			$$invalidate(1, disabled = (() => {
-				const enabled = onClick.operation === 'prev' || $valuesAreValid;
-				return !enabled;
-			})());
-		}
-	};
-
-	return [text, disabled, handleClick, valuesAreValid, onClick, $valuesAreValid];
-}
-
-class FormButton extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { text: 0, onClick: 4 });
-	}
-}
-
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
-function add_css$7(target) {
-	append_styles(target, "svelte-1ajmbw1", ".radio-buttons.svelte-1ajmbw1{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
+function add_css$8(target) {
+	append_styles(target, "svelte-1574x6a", ".radio-buttons.svelte-1574x6a{display:flex;justify-content:space-evenly;flex-direction:column;width:100%;height:100%}.radio-button.svelte-1574x6a{font-size:12px;cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-1574x6a{appearance:none;margin:0;width:1.3em;height:1.3em;box-sizing:border-box;border-radius:0.7em;position:relative;background-color:rgba(0, 16, 14, 0.06);;;cursor:pointer}.radio-button-input.svelte-1574x6a:checked{border:solid 0.4em #2aab9f;background-color:#fff;box-shadow:0px 1px 8px 2px rgba(18,160,160,.08),0px 1px 4px -1px rgba(18,160,160,.24)}.radio-button-text.svelte-1574x6a{margin-left:0.4em}");
 }
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[7] = list[i];
-	child_ctx[9] = i;
+	child_ctx[8] = list[i];
+	child_ctx[10] = i;
 	return child_ctx;
 }
 
-// (23:2) {#each _options as option, i}
-function create_each_block$3(ctx) {
+// (24:2) {#each _options as option, i}
+function create_each_block$4(ctx) {
 	let label;
 	let input;
+	let input_value_value;
+	let input_checked_value;
 	let t0;
-	let t1_value = /*option*/ ctx[7] + "";
+	let span;
+	let t1_value = /*option*/ ctx[8] + "";
 	let t1;
 	let t2;
 	let mounted;
@@ -5503,34 +5460,43 @@ function create_each_block$3(ctx) {
 			label = element("label");
 			input = element("input");
 			t0 = space();
+			span = element("span");
 			t1 = text(t1_value);
 			t2 = space();
 			this.h();
 		},
 		l(nodes) {
-			label = claim_element(nodes, "LABEL", {});
+			label = claim_element(nodes, "LABEL", { class: true });
 			var label_nodes = children(label);
-			input = claim_element(label_nodes, "INPUT", { type: true, name: true });
+			input = claim_element(label_nodes, "INPUT", { type: true, class: true, name: true });
 			t0 = claim_space(label_nodes);
-			t1 = claim_text(label_nodes, t1_value);
+			span = claim_element(label_nodes, "SPAN", { class: true });
+			var span_nodes = children(span);
+			t1 = claim_text(span_nodes, t1_value);
+			span_nodes.forEach(detach);
 			t2 = claim_space(label_nodes);
 			label_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
 			attr(input, "type", "radio");
+			attr(input, "class", "radio-button-input svelte-1574x6a");
 			attr(input, "name", /*name*/ ctx[0]);
-			input.value = /*$value*/ ctx[2];
+			input.value = input_value_value = /*option*/ ctx[8];
+			input.checked = input_checked_value = /*option*/ ctx[8] === /*_value*/ ctx[1];
+			attr(span, "class", "radio-button-text svelte-1574x6a");
+			attr(label, "class", "radio-button svelte-1574x6a");
 		},
 		m(target, anchor) {
 			insert_hydration(target, label, anchor);
 			append_hydration(label, input);
 			append_hydration(label, t0);
-			append_hydration(label, t1);
+			append_hydration(label, span);
+			append_hydration(span, t1);
 			append_hydration(label, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[4](/*i*/ ctx[9]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[4](/*i*/ ctx[10]));
 				mounted = true;
 			}
 		},
@@ -5541,11 +5507,15 @@ function create_each_block$3(ctx) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*$value*/ 4) {
-				input.value = /*$value*/ ctx[2];
+			if (dirty & /*_options*/ 4 && input_value_value !== (input_value_value = /*option*/ ctx[8])) {
+				input.value = input_value_value;
+			}
+
+			if (dirty & /*_options, _value*/ 6 && input_checked_value !== (input_checked_value = /*option*/ ctx[8] === /*_value*/ ctx[1])) {
+				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*_options*/ 2 && t1_value !== (t1_value = /*option*/ ctx[7] + "")) set_data(t1, t1_value);
+			if (dirty & /*_options*/ 4 && t1_value !== (t1_value = /*option*/ ctx[8] + "")) set_data(t1, t1_value);
 		},
 		d(detaching) {
 			if (detaching) detach(label);
@@ -5555,13 +5525,13 @@ function create_each_block$3(ctx) {
 	};
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
 	let div;
-	let each_value = /*_options*/ ctx[1];
+	let each_value = /*_options*/ ctx[2];
 	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 {
@@ -5586,7 +5556,7 @@ function create_fragment$7(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "radio-buttons svelte-1ajmbw1");
+			attr(div, "class", "radio-buttons svelte-1574x6a");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -5596,17 +5566,17 @@ function create_fragment$7(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options, name, $value, handleChange*/ 23) {
-				each_value = /*_options*/ ctx[1];
+			if (dirty & /*_options, name, _value, handleChange*/ 23) {
+				each_value = /*_options*/ ctx[2];
 				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(div, null);
 					}
@@ -5628,8 +5598,9 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let _options;
+	let _value;
 	let $value;
 	let { name = '' } = $$props;
 	let { options = 'ラジオボタン1,ラジオボタン2,ラジオボタン3' } = $$props;
@@ -5644,7 +5615,7 @@ function instance$7($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(2, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(6, $value = value));
 
 	const handleChange = index => event => {
 		if (event.target.checked) {
@@ -5659,34 +5630,38 @@ function instance$7($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*options*/ 32) {
-			$$invalidate(1, _options = options.split(','));
+			$$invalidate(2, _options = options.split(','));
+		}
+
+		if ($$self.$$.dirty & /*$value*/ 64) {
+			$$invalidate(1, _value = $value[0]);
 		}
 	};
 
-	return [name, _options, $value, value, handleChange, options];
+	return [name, _value, _options, value, handleChange, options, $value];
 }
 
 class FormRadioButtons extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { name: 0, options: 5 }, add_css$7);
+		init(this, options, instance$8, create_fragment$8, safe_not_equal, { name: 0, options: 5 }, add_css$8);
 	}
 }
 
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
 
-function add_css$6(target) {
-	append_styles(target, "svelte-1ajmbw1", ".radio-buttons.svelte-1ajmbw1{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
+function add_css$7(target) {
+	append_styles(target, "svelte-1esvjlb", ".select-wrapper.svelte-1esvjlb{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%;position:relative\n}.select-select.svelte-1esvjlb{position:relative;font-size:12px;appearance:none;border:solid 2px #ccc;border-radius:6px;padding:0.8em 1.6em 0.8em 0.8em;width:100%}.select-select.svelte-1esvjlb:focus{outline:none;border-color:#2aab9f}.select-icon.svelte-1esvjlb{position:absolute;width:0.5em;height:0.5em;top:calc(50% - 0.2em);right:0.8em;box-sizing:border-box;border-right:solid 2px #666;border-top:solid 2px #666;transform:translateY(-35.4%) rotate(135deg);pointer-events:none}");
 }
 
-function get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[6] = list[i];
 	child_ctx[8] = i;
 	return child_ctx;
 }
 
-// (28:8) {:else}
+// (29:10) {:else}
 function create_else_block(ctx) {
 	let t;
 
@@ -5707,8 +5682,8 @@ function create_else_block(ctx) {
 	};
 }
 
-// (26:8) {#if option}
-function create_if_block$1(ctx) {
+// (27:10) {#if option}
+function create_if_block$3(ctx) {
 	let t_value = /*option*/ ctx[6] + "";
 	let t;
 
@@ -5731,14 +5706,14 @@ function create_if_block$1(ctx) {
 	};
 }
 
-// (24:4) {#each _options as option, i}
-function create_each_block$2(ctx) {
+// (25:6) {#each _options as option, i}
+function create_each_block$3(ctx) {
 	let option;
 	let t;
 	let option_value_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*option*/ ctx[6]) return create_if_block$1;
+		if (/*option*/ ctx[6]) return create_if_block$3;
 		return create_else_block;
 	}
 
@@ -5794,33 +5769,41 @@ function create_each_block$2(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
-	let div;
+function create_fragment$7(ctx) {
+	let div2;
+	let div1;
 	let select;
+	let t;
+	let div0;
 	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$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 {
 		c() {
-			div = element("div");
+			div2 = element("div");
+			div1 = element("div");
 			select = element("select");
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
+			t = space();
+			div0 = element("div");
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true });
-			var div_nodes = children(div);
-			select = claim_element(div_nodes, "SELECT", {});
+			div2 = claim_element(nodes, "DIV", { class: true });
+			var div2_nodes = children(div2);
+			div1 = claim_element(div2_nodes, "DIV", { class: true });
+			var div1_nodes = children(div1);
+			select = claim_element(div1_nodes, "SELECT", { class: true });
 			var select_nodes = children(select);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
@@ -5828,20 +5811,31 @@ function create_fragment$6(ctx) {
 			}
 
 			select_nodes.forEach(detach);
-			div_nodes.forEach(detach);
+			t = claim_space(div1_nodes);
+			div0 = claim_element(div1_nodes, "DIV", { class: true });
+			children(div0).forEach(detach);
+			div1_nodes.forEach(detach);
+			div2_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(div, "class", "radio-buttons svelte-1ajmbw1");
+			attr(select, "class", "select-select svelte-1esvjlb");
+			attr(div0, "class", "select-icon svelte-1esvjlb");
+			attr(div1, "class", "select");
+			attr(div2, "class", "select-wrapper svelte-1esvjlb");
 		},
 		m(target, anchor) {
-			insert_hydration(target, div, anchor);
-			append_hydration(div, select);
+			insert_hydration(target, div2, anchor);
+			append_hydration(div2, div1);
+			append_hydration(div1, select);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(select, null);
 			}
 
+			append_hydration(div1, t);
+			append_hydration(div1, div0);
+
 			if (!mounted) {
 				dispose = listen(select, "change", /*handleChange*/ ctx[1]);
 				mounted = true;
@@ -5853,12 +5847,12 @@ function create_fragment$6(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(select, null);
 					}
@@ -5874,7 +5868,7 @@ function create_fragment$6(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(div2);
 			destroy_each(each_blocks, detaching);
 			mounted = false;
 			dispose();
@@ -5882,7 +5876,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let _options;
 	let { name = '' } = $$props;
 	let { options = 'プルダウン1,プルダウン2,プルダウン3' } = $$props;
@@ -5919,64 +5913,135 @@ function instance$6($$self, $$props, $$invalidate) {
 class FormSelect extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { name: 2, options: 3 }, add_css$6);
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, { name: 2, options: 3 }, add_css$7);
 	}
 }
 
 /* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
 
-function add_css$5(target) {
-	append_styles(target, "svelte-3uhiw4", ".check-boxes.svelte-3uhiw4{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
+function add_css$6(target) {
+	append_styles(target, "svelte-1g004f9", ".check-boxes.svelte-1g004f9{display:flex;justify-content:space-evenly;flex-direction:column;width:100%;height:100%}.check-box.svelte-1g004f9{display:flex;align-items:center;font-size:12px;height:1.7em;position:relative;cursor:pointer}.check-box-input.svelte-1g004f9{width:0;height:0;margin:0}.check-box-check.svelte-1g004f9{display:inline-flex;background-color:rgba(0, 16, 14, 0.06);width:1.3em;height:1.3em;border-radius:0.3em;justify-content:center;align-items:center}.check-box-check._checked.svelte-1g004f9{box-shadow:0 4px 8px -2px rgb(0 16 14 / 31%)}.check-box-text.svelte-1g004f9{margin-left:0.5em}.check-box-icon.svelte-1g004f9{display:inline-block;width:12px;height:12px}.check-box-icon-inner.svelte-1g004f9{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:#000}");
 }
 
-function get_each_context$1(ctx, list, i) {
+function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[8] = list[i];
 	child_ctx[10] = i;
 	return child_ctx;
 }
 
+// (34:8) {#if isCheckedArray[i]}
+function create_if_block$2(ctx) {
+	let span1;
+	let span0;
+
+	return {
+		c() {
+			span1 = element("span");
+			span0 = element("span");
+			this.h();
+		},
+		l(nodes) {
+			span1 = claim_element(nodes, "SPAN", { class: true, style: true });
+			var span1_nodes = children(span1);
+			span0 = claim_element(span1_nodes, "SPAN", { class: true, style: true });
+			children(span0).forEach(detach);
+			span1_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(span0, "class", "check-box-icon-inner svelte-1g004f9");
+			set_style(span0, "border-color", "#fff");
+			attr(span1, "class", "check-box-icon svelte-1g004f9");
+			set_style(span1, "width", "0.9em");
+			set_style(span1, "height", "0.9em");
+		},
+		m(target, anchor) {
+			insert_hydration(target, span1, anchor);
+			append_hydration(span1, span0);
+		},
+		d(detaching) {
+			if (detaching) detach(span1);
+		}
+	};
+}
+
 // (30:2) {#each _options as option, i}
-function create_each_block$1(ctx) {
+function create_each_block$2(ctx) {
 	let label;
 	let input;
+	let input_checked_value;
 	let t0;
-	let t1_value = /*option*/ ctx[8] + "";
+	let span0;
+	let span0_class_value;
+	let span0_style_value;
 	let t1;
+	let span1;
+	let t2_value = /*option*/ ctx[8] + "";
 	let t2;
+	let t3;
 	let mounted;
 	let dispose;
+	let if_block = /*isCheckedArray*/ ctx[2][/*i*/ ctx[10]] && create_if_block$2();
 
 	return {
 		c() {
 			label = element("label");
 			input = element("input");
 			t0 = space();
-			t1 = text(t1_value);
-			t2 = space();
+			span0 = element("span");
+			if (if_block) if_block.c();
+			t1 = space();
+			span1 = element("span");
+			t2 = text(t2_value);
+			t3 = space();
 			this.h();
 		},
 		l(nodes) {
-			label = claim_element(nodes, "LABEL", {});
+			label = claim_element(nodes, "LABEL", { class: true });
 			var label_nodes = children(label);
-			input = claim_element(label_nodes, "INPUT", { type: true, name: true });
+			input = claim_element(label_nodes, "INPUT", { class: true, type: true, name: true });
 			t0 = claim_space(label_nodes);
-			t1 = claim_text(label_nodes, t1_value);
-			t2 = claim_space(label_nodes);
+			span0 = claim_element(label_nodes, "SPAN", { class: true, style: true });
+			var span0_nodes = children(span0);
+			if (if_block) if_block.l(span0_nodes);
+			span0_nodes.forEach(detach);
+			t1 = claim_space(label_nodes);
+			span1 = claim_element(label_nodes, "SPAN", { class: true });
+			var span1_nodes = children(span1);
+			t2 = claim_text(span1_nodes, t2_value);
+			span1_nodes.forEach(detach);
+			t3 = claim_space(label_nodes);
 			label_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
+			attr(input, "class", "check-box-input svelte-1g004f9");
 			attr(input, "type", "checkbox");
 			attr(input, "name", /*name*/ ctx[0]);
-			input.value = /*$value*/ ctx[2];
+			input.checked = input_checked_value = /*isCheckedArray*/ ctx[2][/*i*/ ctx[10]];
+
+			attr(span0, "class", span0_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[2][/*i*/ ctx[10]]
+			? ' _checked'
+			: ''}`) + " svelte-1g004f9"));
+
+			attr(span0, "style", span0_style_value = `${/*isCheckedArray*/ ctx[2][/*i*/ ctx[10]]
+			? 'background-color: #2aab9f;'
+			: ''}`);
+
+			attr(span1, "class", "check-box-text svelte-1g004f9");
+			attr(label, "class", "check-box svelte-1g004f9");
 		},
 		m(target, anchor) {
 			insert_hydration(target, label, anchor);
 			append_hydration(label, input);
 			append_hydration(label, t0);
+			append_hydration(label, span0);
+			if (if_block) if_block.m(span0, null);
 			append_hydration(label, t1);
-			append_hydration(label, t2);
+			append_hydration(label, span1);
+			append_hydration(span1, t2);
+			append_hydration(label, t3);
 
 			if (!mounted) {
 				dispose = listen(input, "change", /*handleChange*/ ctx[4](/*i*/ ctx[10]));
@@ -5990,27 +6055,51 @@ function create_each_block$1(ctx) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*$value*/ 4) {
-				input.value = /*$value*/ ctx[2];
+			if (dirty & /*isCheckedArray*/ 4 && input_checked_value !== (input_checked_value = /*isCheckedArray*/ ctx[2][/*i*/ ctx[10]])) {
+				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*_options*/ 2 && t1_value !== (t1_value = /*option*/ ctx[8] + "")) set_data(t1, t1_value);
+			if (/*isCheckedArray*/ ctx[2][/*i*/ ctx[10]]) {
+				if (if_block) ; else {
+					if_block = create_if_block$2();
+					if_block.c();
+					if_block.m(span0, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*isCheckedArray*/ 4 && span0_class_value !== (span0_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[2][/*i*/ ctx[10]]
+			? ' _checked'
+			: ''}`) + " svelte-1g004f9"))) {
+				attr(span0, "class", span0_class_value);
+			}
+
+			if (dirty & /*isCheckedArray*/ 4 && span0_style_value !== (span0_style_value = `${/*isCheckedArray*/ ctx[2][/*i*/ ctx[10]]
+			? 'background-color: #2aab9f;'
+			: ''}`)) {
+				attr(span0, "style", span0_style_value);
+			}
+
+			if (dirty & /*_options*/ 2 && t2_value !== (t2_value = /*option*/ ctx[8] + "")) set_data(t2, t2_value);
 		},
 		d(detaching) {
 			if (detaching) detach(label);
+			if (if_block) if_block.d();
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-function create_fragment$5(ctx) {
+function create_fragment$6(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$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 {
@@ -6035,7 +6124,7 @@ function create_fragment$5(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "check-boxes svelte-3uhiw4");
+			attr(div, "class", "check-boxes svelte-1g004f9");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -6045,17 +6134,17 @@ function create_fragment$5(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options, name, $value, handleChange*/ 23) {
+			if (dirty & /*_options, isCheckedArray, name, handleChange*/ 23) {
 				each_value = /*_options*/ ctx[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);
 					}
@@ -6077,7 +6166,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let _options;
 	let isCheckedArray;
 	let $value;
@@ -6094,12 +6183,12 @@ function instance$5($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(2, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(6, $value = value));
 
 	const handleChange = index => event => {
 		if (isCheckedArray[index] !== event.target.checked) {
-			isCheckedArray[index] = event.target.checked;
-			isCheckedArray = [...isCheckedArray];
+			$$invalidate(2, isCheckedArray[index] = event.target.checked, isCheckedArray);
+			$$invalidate(2, isCheckedArray = [...isCheckedArray]);
 			const updated = _options.filter((option, i) => isCheckedArray[i]);
 			value.set(updated);
 		}
@@ -6115,21 +6204,358 @@ function instance$5($$self, $$props, $$invalidate) {
 			$$invalidate(1, _options = options.split(','));
 		}
 
-		if ($$self.$$.dirty & /*$value, _options*/ 6) {
-			isCheckedArray = (() => {
+		if ($$self.$$.dirty & /*$value, _options*/ 66) {
+			$$invalidate(2, isCheckedArray = (() => {
 				const checkedSet = new Set($value);
 				return _options.map(option => checkedSet.has(option));
-			})();
+			})());
 		}
 	};
 
-	return [name, _options, $value, value, handleChange, options];
+	return [name, _options, isCheckedArray, value, handleChange, options, $value];
 }
 
 class FormCheckBoxes extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { name: 0, options: 5 }, add_css$5);
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, { name: 0, options: 5 }, add_css$6);
+	}
+}
+
+/* src/components/FormRatingButtons.svelte generated by Svelte v3.53.1 */
+
+function add_css$5(target) {
+	append_styles(target, "svelte-14cxkfs", ".rating-buttons.svelte-14cxkfs.svelte-14cxkfs{display:flex;justify-content:space-evenly;align-items:center;width:100%;height:100%}.rating-button.svelte-14cxkfs.svelte-14cxkfs{cursor:pointer;display:flex}.rating-button.svelte-14cxkfs svg.svelte-14cxkfs{fill:#ccc}.rating-button._selected.svelte-14cxkfs svg.svelte-14cxkfs{fill:#2aab9f}");
+}
+
+function get_each_context$1(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[8] = list[i];
+	return child_ctx;
+}
+
+// (36:30) 
+function create_if_block_1$1(ctx) {
+	let div;
+	let svg;
+	let path;
+	let t;
+	let div_class_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div = element("div");
+			svg = svg_element("svg");
+			path = svg_element("path");
+			t = space();
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+
+			svg = claim_svg_element(div_nodes, "svg", {
+				width: true,
+				height: true,
+				viewBox: true,
+				fill: true,
+				xmlns: true,
+				class: true
+			});
+
+			var svg_nodes = children(svg);
+			path = claim_svg_element(svg_nodes, "path", { d: true });
+			children(path).forEach(detach);
+			svg_nodes.forEach(detach);
+			t = claim_space(div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(path, "d", /*LIKERT_FACE_SVG_DATA*/ ctx[4][/*i*/ ctx[8]]);
+			attr(svg, "width", "24");
+			attr(svg, "height", "24");
+			attr(svg, "viewBox", "0 0 24 24");
+			attr(svg, "fill", "none");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			attr(svg, "class", "svelte-14cxkfs");
+			attr(div, "class", div_class_value = "rating-button" + (/*i*/ ctx[8] === /*_value*/ ctx[1] ? ' _selected' : '') + " svelte-14cxkfs");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			append_hydration(div, svg);
+			append_hydration(svg, path);
+			append_hydration(div, t);
+
+			if (!mounted) {
+				dispose = listen(div, "click", /*handleClick*/ ctx[3](/*i*/ ctx[8]));
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*_value*/ 2 && div_class_value !== (div_class_value = "rating-button" + (/*i*/ ctx[8] === /*_value*/ ctx[1] ? ' _selected' : '') + " svelte-14cxkfs")) {
+				attr(div, "class", div_class_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+// (30:4) {#if type === 'star'}
+function create_if_block$1(ctx) {
+	let div;
+	let svg;
+	let path;
+	let t;
+	let div_class_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div = element("div");
+			svg = svg_element("svg");
+			path = svg_element("path");
+			t = space();
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+
+			svg = claim_svg_element(div_nodes, "svg", {
+				width: true,
+				height: true,
+				viewBox: true,
+				fill: true,
+				xmlns: true,
+				class: true
+			});
+
+			var svg_nodes = children(svg);
+			path = claim_svg_element(svg_nodes, "path", { d: true });
+			children(path).forEach(detach);
+			svg_nodes.forEach(detach);
+			t = claim_space(div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(path, "d", "M11.2184 0.80902L8.42249 6.78134L2.09938 7.72433C0.981006 7.90395 0.550862 9.3409 1.36814 10.1941L5.88464 14.8193L4.80928 21.3304C4.63723 22.498 5.84163 23.396 6.83096 22.8572L12.4658 19.7588L18.0577 22.8572C19.047 23.396 20.2514 22.498 20.0794 21.3304L19.004 14.8193L23.5205 10.1941C24.3378 9.3409 23.9077 7.90395 22.7893 7.72433L16.5092 6.78134L13.6702 0.80902C13.1971 -0.223786 11.7346 -0.268691 11.2184 0.80902Z");
+			attr(svg, "width", "24");
+			attr(svg, "height", "24");
+			attr(svg, "viewBox", "0 0 24 24");
+			attr(svg, "fill", "none");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			attr(svg, "class", "svelte-14cxkfs");
+			attr(div, "class", div_class_value = "rating-button" + (/*i*/ ctx[8] <= /*_value*/ ctx[1] ? ' _selected' : '') + " svelte-14cxkfs");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			append_hydration(div, svg);
+			append_hydration(svg, path);
+			append_hydration(div, t);
+
+			if (!mounted) {
+				dispose = listen(div, "click", /*handleClick*/ ctx[3](/*i*/ ctx[8]));
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*_value*/ 2 && div_class_value !== (div_class_value = "rating-button" + (/*i*/ ctx[8] <= /*_value*/ ctx[1] ? ' _selected' : '') + " svelte-14cxkfs")) {
+				attr(div, "class", div_class_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+// (29:2) {#each [...Array(5).keys()].map(i => i + 1) as i}
+function create_each_block$1(ctx) {
+	let if_block_anchor;
+
+	function select_block_type(ctx, dirty) {
+		if (/*type*/ ctx[0] === 'star') return create_if_block$1;
+		if (/*type*/ ctx[0] === 'face') return create_if_block_1$1;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		l(nodes) {
+			if (if_block) if_block.l(nodes);
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert_hydration(target, if_block_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			}
+		},
+		d(detaching) {
+			if (if_block) {
+				if_block.d(detaching);
+			}
+
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function create_fragment$5(ctx) {
+	let div;
+	let each_value = [...Array(5).keys()].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();
+			}
+
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].l(div_nodes);
+			}
+
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "rating-buttons svelte-14cxkfs");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*Array, _value, handleClick, type, LIKERT_FACE_SVG_DATA*/ 27) {
+				each_value = [...Array(5).keys()].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 func = i => i + 1;
+
+function instance$5($$self, $$props, $$invalidate) {
+	let _value;
+	let $value;
+	let { name = '' } = $$props;
+	let { type = 'face' } = $$props;
+	const { path: statePath } = getStateItemContext();
+
+	const value = registerInput({
+		name,
+		statePath,
+		initialValue: [],
+		validator(value) {
+			return value.length > 0;
+		}
+	});
+
+	component_subscribe($$self, value, value => $$invalidate(6, $value = value));
+
+	const handleClick = index => event => {
+		value.set([String(index)]);
+	};
+
+	// 5段階スケールで使用する顔絵文字のsvgデータ
+	const LIKERT_FACE_SVG_DATA = {
+		1: 'M12 0.375C5.57812 0.375 0.375 5.57812 0.375 12C0.375 18.4219 5.57812 23.625 12 23.625C18.4219 23.625 23.625 18.4219 23.625 12C23.625 5.57812 18.4219 0.375 12 0.375ZM12 21.375C6.79688 21.375 2.625 17.2031 2.625 12C2.625 6.84375 6.79688 2.625 12 2.625C17.1562 2.625 21.375 6.84375 21.375 12C21.375 17.2031 17.1562 21.375 12 21.375ZM18.0469 7.17188C17.8594 6.9375 17.5312 6.89062 17.2969 7.03125L13.5469 9.28125C13.4062 9.375 13.3125 9.5625 13.3125 9.75C13.3125 9.98438 13.4062 10.1719 13.5469 10.2656L17.2969 12.5156C17.5781 12.6562 17.8594 12.5625 18.0469 12.375C18.1875 12.1875 18.2344 11.8594 18.0469 11.6719L16.4531 9.75L18.0469 7.875C18.2344 7.6875 18.1875 7.35938 18.0469 7.17188ZM10.6875 9.75C10.6875 9.5625 10.5469 9.375 10.4062 9.28125L6.65625 7.03125C6.42188 6.89062 6.09375 6.9375 5.90625 7.17188C5.76562 7.35938 5.76562 7.6875 5.90625 7.875L7.5 9.75L5.90625 11.6719C5.76562 11.8594 5.76562 12.1875 5.90625 12.375C6.09375 12.5625 6.375 12.6562 6.65625 12.5156L10.4062 10.2656C10.5469 10.1719 10.6875 9.98438 10.6875 9.75ZM12 12.75C9.84375 12.75 7.26562 14.5781 6.9375 17.1562C6.84375 17.7188 7.26562 18.1406 7.64062 18C8.71875 17.5312 10.3125 17.25 12 17.25C13.6875 17.25 15.2344 17.5312 16.3125 18C16.6875 18.1406 17.1094 17.7188 17.0156 17.1562C16.6875 14.5781 14.1094 12.75 12 12.75Z',
+		2: 'M12 0.375C5.57812 0.375 0.375 5.57812 0.375 12C0.375 18.4219 5.57812 23.625 12 23.625C18.4219 23.625 23.625 18.4219 23.625 12C23.625 5.57812 18.4219 0.375 12 0.375ZM12 21.375C6.79688 21.375 2.625 17.2031 2.625 12C2.625 6.84375 6.79688 2.625 12 2.625C17.1562 2.625 21.375 6.84375 21.375 12C21.375 17.2031 17.1562 21.375 12 21.375ZM8.25 11.25C9.04688 11.25 9.75 10.5938 9.75 9.75C9.75 8.95312 9.04688 8.25 8.25 8.25C7.40625 8.25 6.75 8.95312 6.75 9.75C6.75 10.5938 7.40625 11.25 8.25 11.25ZM15.75 8.25C14.9062 8.25 14.25 8.95312 14.25 9.75C14.25 10.5938 14.9062 11.25 15.75 11.25C16.5469 11.25 17.25 10.5938 17.25 9.75C17.25 8.95312 16.5469 8.25 15.75 8.25ZM12 14.25C10.0781 14.25 8.34375 15.0938 7.125 16.5469C6.70312 17.0156 6.79688 17.7188 7.26562 18.1406C7.73438 18.5156 8.4375 18.4688 8.85938 18C9.60938 17.0625 10.7812 16.5 12 16.5C13.1719 16.5 14.3438 17.0625 15.0938 18C15.5156 18.4219 16.2188 18.5625 16.6875 18.1406C17.1562 17.7188 17.25 17.0156 16.8281 16.5469C15.6562 15.0938 13.875 14.25 12 14.25Z',
+		3: 'M12 0.375C5.57812 0.375 0.375 5.57812 0.375 12C0.375 18.4219 5.57812 23.625 12 23.625C18.4219 23.625 23.625 18.4219 23.625 12C23.625 5.57812 18.4219 0.375 12 0.375ZM12 21.375C6.79688 21.375 2.625 17.2031 2.625 12C2.625 6.84375 6.79688 2.625 12 2.625C17.1562 2.625 21.375 6.84375 21.375 12C21.375 17.2031 17.1562 21.375 12 21.375ZM8.25 11.25C9.04688 11.25 9.75 10.5938 9.75 9.75C9.75 8.95312 9.04688 8.25 8.25 8.25C7.40625 8.25 6.75 8.95312 6.75 9.75C6.75 10.5938 7.40625 11.25 8.25 11.25ZM15.75 8.25C14.9062 8.25 14.25 8.95312 14.25 9.75C14.25 10.5938 14.9062 11.25 15.75 11.25C16.5469 11.25 17.25 10.5938 17.25 9.75C17.25 8.95312 16.5469 8.25 15.75 8.25ZM16.125 15H7.875C7.21875 15 6.75 15.5156 6.75 16.125C6.75 16.7812 7.21875 17.25 7.875 17.25H16.125C16.7344 17.25 17.25 16.7812 17.25 16.125C17.25 15.5156 16.7344 15 16.125 15Z',
+		4: 'M15.75 8.4375C14.5312 8.4375 13.125 9.23438 12.9375 10.4531C12.8438 10.9688 13.4531 11.2969 13.8281 10.9219L14.2969 10.5469C15 9.9375 16.4531 9.9375 17.1562 10.5469L17.625 10.9219C18 11.2969 18.6094 10.9688 18.5156 10.4531C18.3281 9.23438 16.9219 8.4375 15.75 8.4375ZM8.25 11.25C9.04688 11.25 9.75 10.5938 9.75 9.75C9.75 8.95312 9.04688 8.25 8.25 8.25C7.40625 8.25 6.75 8.95312 6.75 9.75C6.75 10.5938 7.40625 11.25 8.25 11.25ZM16.9219 14.2969C15.7031 14.6719 13.9219 14.9062 12 14.9062C10.0312 14.9062 8.25 14.6719 7.03125 14.2969C6.5625 14.1562 6.14062 14.5781 6.1875 15C6.5625 17.25 9.5625 18.75 12 18.75C14.3906 18.75 17.3906 17.25 17.7656 15C17.8125 14.5781 17.3906 14.1562 16.9219 14.2969ZM12 0.375C5.57812 0.375 0.375 5.625 0.375 12C0.375 18.4219 5.57812 23.625 12 23.625C18.375 23.625 23.625 18.4219 23.625 12C23.625 5.625 18.375 0.375 12 0.375ZM12 21.375C6.79688 21.375 2.625 17.2031 2.625 12C2.625 6.84375 6.79688 2.625 12 2.625C17.1562 2.625 21.375 6.84375 21.375 12C21.375 17.2031 17.1562 21.375 12 21.375Z',
+		5: 'M12 0.375C5.57812 0.375 0.375 5.57812 0.375 12C0.375 18.4219 5.57812 23.625 12 23.625C18.4219 23.625 23.625 18.4219 23.625 12C23.625 5.57812 18.4219 0.375 12 0.375ZM12 21.375C6.79688 21.375 2.625 17.2031 2.625 12C2.625 6.84375 6.79688 2.625 12 2.625C17.1562 2.625 21.375 6.84375 21.375 12C21.375 17.2031 17.1562 21.375 12 21.375ZM16.9219 14.2969C15.7031 14.6719 13.9219 14.9062 12 14.9062C10.0312 14.9062 8.25 14.6719 7.03125 14.2969C6.5625 14.1562 6.14062 14.5312 6.1875 15C6.5625 17.2031 9.5625 18.75 12 18.75C14.4375 18.75 17.3906 17.2031 17.7656 15C17.8125 14.5781 17.3906 14.1562 16.9219 14.2969ZM5.90625 12.375C6.09375 12.5625 6.375 12.6562 6.65625 12.5156L10.4062 10.2656C10.5469 10.1719 10.6875 9.98438 10.6875 9.75C10.6875 9.5625 10.5469 9.375 10.4062 9.28125L6.65625 7.03125C6.42188 6.89062 6.09375 6.9375 5.90625 7.17188C5.76562 7.35938 5.76562 7.6875 5.90625 7.875L7.5 9.75L5.90625 11.6719C5.76562 11.8594 5.76562 12.1875 5.90625 12.375ZM17.2969 12.5156C17.5781 12.6562 17.8594 12.5625 18.0469 12.375C18.1875 12.1875 18.1875 11.8594 18.0469 11.6719L16.4531 9.75L18.0469 7.875C18.2344 7.6875 18.1875 7.35938 18.0469 7.17188C17.8594 6.9375 17.5312 6.89062 17.2969 7.03125L13.5469 9.28125C13.4062 9.375 13.3125 9.5625 13.3125 9.75C13.3125 9.98438 13.4062 10.1719 13.5469 10.2656L17.2969 12.5156Z'
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(5, name = $$props.name);
+		if ('type' in $$props) $$invalidate(0, type = $$props.type);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*$value*/ 64) {
+			$$invalidate(1, _value = Number($value[0] ?? -1));
+		}
+	};
+
+	return [type, _value, value, handleClick, LIKERT_FACE_SVG_DATA, name, $value];
+}
+
+class FormRatingButtons extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { name: 5, type: 0 }, add_css$5);
 	}
 }
 
@@ -7487,4 +7913,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormCheckBoxes, FormOperationOptions, FormRadioButtons, 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, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, loadGlobalScript, loadGlobalStyle, loadStyle, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };
+export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtons, 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, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, loadGlobalScript, loadGlobalStyle, loadStyle, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };