@plaidev/karte-action-sdk 1.1.120-27932497.7c9501cf → 1.1.120-27933281.c7c47ad7

package/dist/hydrate/index.es.js

@@ -1,6 +1,6 @@
 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 { 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 } from 'svelte/internal';
 import { setContext, getContext, createEventDispatcher, onMount, onDestroy as onDestroy$1 } from 'svelte';
 
 /** @internal */
@@ -1216,6 +1216,21 @@ const DefaultSlideNavigationButton = {
     color: '#ddd',
     colorActive: '#666',
 };
+/** @internal */
+const DefaultFormButtonStyle = {
+    size: '16px',
+    colorActive: '#2aab9f',
+    colorInactive: 'rgba(0, 16, 14, 0.06)',
+};
+/** @internal */
+const DefaultFormSelectStyle = {
+    colorArrow: '#333',
+    colorFocused: '#2aab9f',
+};
+/** @internal */
+const FormRatingButtonTypes = ['star', 'face'];
+/** @internal */
+const DefaultFormRatingButtonType = 'star';
 
 /**
  * アクションが作成 (create) される前にフックする関数
@@ -2153,7 +2168,7 @@ function add_css$n(target) {
 }
 
 // (23:0) {#if $state === path}
-function create_if_block$8(ctx) {
+function create_if_block$7(ctx) {
 	let div;
 	let t;
 	let current;
@@ -2228,7 +2243,7 @@ function create_if_block$8(ctx) {
 function create_fragment$q(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$8(ctx);
+	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -2253,7 +2268,7 @@ function create_fragment$q(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$8(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);
@@ -2327,7 +2342,7 @@ function add_css$m(target) {
 }
 
 // (9:0) {#if backgroundOverray}
-function create_if_block$7(ctx) {
+function create_if_block$6(ctx) {
 	let div;
 	let mounted;
 	let dispose;
@@ -2364,7 +2379,7 @@ function create_if_block$7(ctx) {
 
 function create_fragment$p(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$7(ctx);
+	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -2384,7 +2399,7 @@ function create_fragment$p(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$7(ctx);
+					if_block = create_if_block$6(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -2428,7 +2443,7 @@ function add_css$l(target) {
 }
 
 // (142:0) {#if visible}
-function create_if_block$6(ctx) {
+function create_if_block$5(ctx) {
 	let div1;
 	let t;
 	let div0;
@@ -2671,7 +2686,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$6(ctx);
+	let if_block = /*visible*/ ctx[6] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -2715,7 +2730,7 @@ function create_fragment$o(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$6(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);
@@ -3844,7 +3859,7 @@ function create_else_block$1(ctx) {
 }
 
 // (10:2) {#if item.match(regexp)}
-function create_if_block$5(ctx) {
+function create_if_block$4(ctx) {
 	let br;
 
 	return {
@@ -3872,7 +3887,7 @@ function create_each_block$5(ctx) {
 	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$5;
+		if (show_if) return create_if_block$4;
 		return create_else_block$1;
 	}
 
@@ -4009,7 +4024,7 @@ function add_css$h(target) {
 }
 
 // (56:2) {#if enableCopy}
-function create_if_block$4(ctx) {
+function create_if_block$3(ctx) {
 	let div0;
 	let t0;
 	let t1;
@@ -4072,7 +4087,7 @@ function create_fragment$h(ctx) {
 	let mounted;
 	let dispose;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
-	let if_block = /*enableCopy*/ ctx[1] && create_if_block$4(ctx);
+	let if_block = /*enableCopy*/ ctx[1] && create_if_block$3(ctx);
 
 	return {
 		c() {
@@ -4136,7 +4151,7 @@ function create_fragment$h(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$4(ctx);
+					if_block = create_if_block$3(ctx);
 					if_block.c();
 					if_block.m(div2, null);
 				}
@@ -5573,17 +5588,17 @@ class FormTextarea extends SvelteComponent {
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
 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}");
+	append_styles(target, "svelte-1k9zlui", ".radio-buttons.svelte-1k9zlui{display:flex;justify-content:space-evenly;flex-direction:column;width:100%;height:100%}.radio-button.svelte-1k9zlui{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-1k9zlui{appearance:none;margin:0;width:var(--size);height:var(--size);box-sizing:border-box;border-radius:var(--size);position:relative;background-color:var(--color-inactive);cursor:pointer}.radio-button-input.svelte-1k9zlui:checked{border:solid calc(var(--size) / 3) var(--color-active);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-1k9zlui{margin-left:0.5em}");
 }
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[8] = list[i];
-	child_ctx[10] = i;
+	child_ctx[11] = list[i];
+	child_ctx[13] = i;
 	return child_ctx;
 }
 
-// (24:2) {#each _options as option, i}
+// (49:2) {#each _options as option, i}
 function create_each_block$4(ctx) {
 	let label;
 	let input;
@@ -5591,7 +5606,7 @@ function create_each_block$4(ctx) {
 	let input_checked_value;
 	let t0;
 	let span;
-	let t1_value = /*option*/ ctx[8] + "";
+	let t1_value = /*option*/ ctx[11] + "";
 	let t1;
 	let t2;
 	let mounted;
@@ -5610,9 +5625,16 @@ function create_each_block$4(ctx) {
 		l(nodes) {
 			label = claim_element(nodes, "LABEL", { class: true });
 			var label_nodes = children(label);
-			input = claim_element(label_nodes, "INPUT", { type: true, class: true, name: true });
+
+			input = claim_element(label_nodes, "INPUT", {
+				type: true,
+				class: true,
+				style: true,
+				name: true
+			});
+
 			t0 = claim_space(label_nodes);
-			span = claim_element(label_nodes, "SPAN", { class: true });
+			span = claim_element(label_nodes, "SPAN", { class: true, style: true });
 			var span_nodes = children(span);
 			t1 = claim_text(span_nodes, t1_value);
 			span_nodes.forEach(detach);
@@ -5622,12 +5644,14 @@ function create_each_block$4(ctx) {
 		},
 		h() {
 			attr(input, "type", "radio");
-			attr(input, "class", "radio-button-input svelte-1574x6a");
+			attr(input, "class", "radio-button-input svelte-1k9zlui");
+			attr(input, "style", /*_buttonStyle*/ ctx[4]);
 			attr(input, "name", /*name*/ ctx[0]);
-			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");
+			input.value = input_value_value = /*option*/ ctx[11];
+			input.checked = input_checked_value = /*option*/ ctx[11] === /*_value*/ ctx[2];
+			attr(span, "class", "radio-button-text svelte-1k9zlui");
+			attr(span, "style", /*textStyle*/ ctx[1]);
+			attr(label, "class", "radio-button svelte-1k9zlui");
 		},
 		m(target, anchor) {
 			insert_hydration(target, label, anchor);
@@ -5638,26 +5662,34 @@ function create_each_block$4(ctx) {
 			append_hydration(label, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[4](/*i*/ ctx[10]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[6](/*i*/ ctx[13]));
 				mounted = true;
 			}
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
+			if (dirty & /*_buttonStyle*/ 16) {
+				attr(input, "style", /*_buttonStyle*/ ctx[4]);
+			}
+
 			if (dirty & /*name*/ 1) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*_options*/ 4 && input_value_value !== (input_value_value = /*option*/ ctx[8])) {
+			if (dirty & /*_options*/ 8 && input_value_value !== (input_value_value = /*option*/ ctx[11])) {
 				input.value = input_value_value;
 			}
 
-			if (dirty & /*_options, _value*/ 6 && input_checked_value !== (input_checked_value = /*option*/ ctx[8] === /*_value*/ ctx[1])) {
+			if (dirty & /*_options, _value*/ 12 && input_checked_value !== (input_checked_value = /*option*/ ctx[11] === /*_value*/ ctx[2])) {
 				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*_options*/ 4 && t1_value !== (t1_value = /*option*/ ctx[8] + "")) set_data(t1, t1_value);
+			if (dirty & /*_options*/ 8 && t1_value !== (t1_value = /*option*/ ctx[11] + "")) set_data(t1, t1_value);
+
+			if (dirty & /*textStyle*/ 2) {
+				attr(span, "style", /*textStyle*/ ctx[1]);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(label);
@@ -5669,7 +5701,7 @@ function create_each_block$4(ctx) {
 
 function create_fragment$8(ctx) {
 	let div;
-	let each_value = /*_options*/ ctx[2];
+	let each_value = /*_options*/ ctx[3];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -5698,7 +5730,7 @@ function create_fragment$8(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "radio-buttons svelte-1574x6a");
+			attr(div, "class", "radio-buttons svelte-1k9zlui");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -5708,8 +5740,8 @@ function create_fragment$8(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options, name, _value, handleChange*/ 23) {
-				each_value = /*_options*/ ctx[2];
+			if (dirty & /*textStyle, _options, _buttonStyle, name, _value, handleChange*/ 95) {
+				each_value = /*_options*/ ctx[3];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -5742,10 +5774,19 @@ function create_fragment$8(ctx) {
 
 function instance$8($$self, $$props, $$invalidate) {
 	let _options;
+	let _buttonStyle;
 	let _value;
 	let $value;
 	let { name = '' } = $$props;
 	let { options = 'ラジオボタン1,ラジオボタン2,ラジオボタン3' } = $$props;
+	let { textStyle = 'color: #333; font-size: 12px;' } = $$props;
+
+	let { buttonStyle = {
+		size: '16px',
+		colorActive: '#2aab9f',
+		colorInactive: 'rgba(0, 16, 14, 0.06)'
+	} } = $$props;
+
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -5757,7 +5798,7 @@ function instance$8($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(6, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(9, $value = value));
 
 	const handleChange = index => event => {
 		if (event.target.checked) {
@@ -5767,43 +5808,74 @@ function instance$8($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-		if ('options' in $$props) $$invalidate(5, options = $$props.options);
+		if ('options' in $$props) $$invalidate(7, options = $$props.options);
+		if ('textStyle' in $$props) $$invalidate(1, textStyle = $$props.textStyle);
+		if ('buttonStyle' in $$props) $$invalidate(8, buttonStyle = $$props.buttonStyle);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*options*/ 32) {
-			$$invalidate(2, _options = options.split(','));
+		if ($$self.$$.dirty & /*options*/ 128) {
+			$$invalidate(3, _options = options.split(','));
 		}
 
-		if ($$self.$$.dirty & /*$value*/ 64) {
-			$$invalidate(1, _value = $value[0]);
+		if ($$self.$$.dirty & /*buttonStyle*/ 256) {
+			$$invalidate(4, _buttonStyle = `--size: ${buttonStyle.size}; --color-active: ${buttonStyle.colorActive}; --color-inactive: ${buttonStyle.colorInactive}`);
+		}
+
+		if ($$self.$$.dirty & /*$value*/ 512) {
+			$$invalidate(2, _value = $value[0]);
 		}
 	};
 
-	return [name, _value, _options, value, handleChange, options, $value];
+	return [
+		name,
+		textStyle,
+		_value,
+		_options,
+		_buttonStyle,
+		value,
+		handleChange,
+		options,
+		buttonStyle,
+		$value
+	];
 }
 
 class FormRadioButtons extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { name: 0, options: 5 }, add_css$8);
+
+		init(
+			this,
+			options,
+			instance$8,
+			create_fragment$8,
+			safe_not_equal,
+			{
+				name: 0,
+				options: 7,
+				textStyle: 1,
+				buttonStyle: 8
+			},
+			add_css$8
+		);
 	}
 }
 
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
 
 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}");
+	append_styles(target, "svelte-1c94amx", ".select-wrapper.svelte-1c94amx{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%;position:relative\n}.select-select.svelte-1c94amx{position:relative;appearance:none;width:100%}.select-select.svelte-1c94amx:focus{outline:none;border-color:var(--color-focused) !important}.select-icon.svelte-1c94amx{position:absolute;width:0.5em;height:0.5em;top:calc(50% - 0.2em);right:0.8em;box-sizing:border-box;border-right:solid 2px var(--color-arrow);border-top:solid 2px var(--color-arrow);transform:translateY(-35.4%) rotate(135deg);pointer-events:none}");
 }
 
 function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[6] = list[i];
-	child_ctx[8] = i;
+	child_ctx[9] = list[i];
+	child_ctx[11] = i;
 	return child_ctx;
 }
 
-// (29:10) {:else}
+// (47:10) {:else}
 function create_else_block(ctx) {
 	let t;
 
@@ -5824,9 +5896,9 @@ function create_else_block(ctx) {
 	};
 }
 
-// (27:10) {#if option}
-function create_if_block$3(ctx) {
-	let t_value = /*option*/ ctx[6] + "";
+// (45:10) {#if option}
+function create_if_block$2(ctx) {
+	let t_value = /*option*/ ctx[9] + "";
 	let t;
 
 	return {
@@ -5840,7 +5912,7 @@ function create_if_block$3(ctx) {
 			insert_hydration(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*_options*/ 1 && t_value !== (t_value = /*option*/ ctx[6] + "")) set_data(t, t_value);
+			if (dirty & /*_options*/ 4 && t_value !== (t_value = /*option*/ ctx[9] + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -5848,14 +5920,14 @@ function create_if_block$3(ctx) {
 	};
 }
 
-// (25:6) {#each _options as option, i}
+// (43: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$3;
+		if (/*option*/ ctx[9]) return create_if_block$2;
 		return create_else_block;
 	}
 
@@ -5878,7 +5950,7 @@ function create_each_block$3(ctx) {
 			this.h();
 		},
 		h() {
-			option.__value = option_value_value = /*option*/ ctx[6];
+			option.__value = option_value_value = /*option*/ ctx[9];
 			option.value = option.__value;
 		},
 		m(target, anchor) {
@@ -5899,7 +5971,7 @@ function create_each_block$3(ctx) {
 				}
 			}
 
-			if (dirty & /*_options*/ 1 && option_value_value !== (option_value_value = /*option*/ ctx[6])) {
+			if (dirty & /*_options*/ 4 && option_value_value !== (option_value_value = /*option*/ ctx[9])) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
@@ -5919,7 +5991,7 @@ function create_fragment$7(ctx) {
 	let div0;
 	let mounted;
 	let dispose;
-	let each_value = /*_options*/ ctx[0];
+	let each_value = /*_options*/ ctx[2];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -5943,9 +6015,9 @@ function create_fragment$7(ctx) {
 		l(nodes) {
 			div2 = claim_element(nodes, "DIV", { class: true });
 			var div2_nodes = children(div2);
-			div1 = claim_element(div2_nodes, "DIV", { class: true });
+			div1 = claim_element(div2_nodes, "DIV", { class: true, style: true });
 			var div1_nodes = children(div1);
-			select = claim_element(div1_nodes, "SELECT", { class: true });
+			select = claim_element(div1_nodes, "SELECT", { class: true, style: true });
 			var select_nodes = children(select);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
@@ -5961,10 +6033,12 @@ function create_fragment$7(ctx) {
 			this.h();
 		},
 		h() {
-			attr(select, "class", "select-select svelte-1esvjlb");
-			attr(div0, "class", "select-icon svelte-1esvjlb");
+			attr(select, "class", "select-select svelte-1c94amx");
+			attr(select, "style", /*_style*/ ctx[0]);
+			attr(div0, "class", "select-icon svelte-1c94amx");
 			attr(div1, "class", "select");
-			attr(div2, "class", "select-wrapper svelte-1esvjlb");
+			attr(div1, "style", /*styleVariables*/ ctx[1]);
+			attr(div2, "class", "select-wrapper svelte-1c94amx");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div2, anchor);
@@ -5979,13 +6053,13 @@ function create_fragment$7(ctx) {
 			append_hydration(div1, div0);
 
 			if (!mounted) {
-				dispose = listen(select, "change", /*handleChange*/ ctx[1]);
+				dispose = listen(select, "change", /*handleChange*/ ctx[3]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options*/ 1) {
-				each_value = /*_options*/ ctx[0];
+			if (dirty & /*_options*/ 4) {
+				each_value = /*_options*/ ctx[2];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -6006,6 +6080,14 @@ function create_fragment$7(ctx) {
 
 				each_blocks.length = each_value.length;
 			}
+
+			if (dirty & /*_style*/ 1) {
+				attr(select, "style", /*_style*/ ctx[0]);
+			}
+
+			if (dirty & /*styleVariables*/ 2) {
+				attr(div1, "style", /*styleVariables*/ ctx[1]);
+			}
 		},
 		i: noop,
 		o: noop,
@@ -6020,8 +6102,16 @@ function create_fragment$7(ctx) {
 
 function instance$7($$self, $$props, $$invalidate) {
 	let _options;
+	let styleVariables;
 	let { name = '' } = $$props;
 	let { options = 'プルダウン1,プルダウン2,プルダウン3' } = $$props;
+	let { _style = 'color: #333; cursor: pointer; background-color: #fff; border: solid 2px #ccc; border-radius: 6px; font-size: 12px; padding: 10px 30px 10px 10px;' } = $$props;
+
+	let { selectStyle = {
+		colorArrow: '#333',
+		colorFocused: '#2aab9f'
+	} } = $$props;
+
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -6039,102 +6129,85 @@ function instance$7($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(2, name = $$props.name);
-		if ('options' in $$props) $$invalidate(3, options = $$props.options);
+		if ('name' in $$props) $$invalidate(4, name = $$props.name);
+		if ('options' in $$props) $$invalidate(5, options = $$props.options);
+		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
+		if ('selectStyle' in $$props) $$invalidate(6, selectStyle = $$props.selectStyle);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*options*/ 8) {
-			$$invalidate(0, _options = ['', ...options.split(',')]);
+		if ($$self.$$.dirty & /*options*/ 32) {
+			$$invalidate(2, _options = ['', ...options.split(',')]);
+		}
+
+		if ($$self.$$.dirty & /*selectStyle*/ 64) {
+			$$invalidate(1, styleVariables = `--color-arrow: ${selectStyle.colorArrow}; --color-focused: ${selectStyle.colorFocused}`);
 		}
 	};
 
-	return [_options, handleChange, name, options];
+	return [_style, styleVariables, _options, handleChange, name, options, selectStyle];
 }
 
 class FormSelect extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { name: 2, options: 3 }, add_css$7);
+
+		init(
+			this,
+			options,
+			instance$7,
+			create_fragment$7,
+			safe_not_equal,
+			{
+				name: 4,
+				options: 5,
+				_style: 0,
+				selectStyle: 6
+			},
+			add_css$7
+		);
 	}
 }
 
 /* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
 
 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}");
+	append_styles(target, "svelte-15x08a", ".check-boxes.svelte-15x08a.svelte-15x08a{display:flex;justify-content:space-evenly;flex-direction:column;width:100%;height:100%}.check-box.svelte-15x08a.svelte-15x08a{display:flex;align-items:center;position:relative;cursor:pointer}.check-box-input.svelte-15x08a.svelte-15x08a{width:0;height:0;margin:0}.check-box-check.svelte-15x08a.svelte-15x08a{display:inline-flex;background-color:var(--color-active);width:var(--size);height:var(--size);border-radius:calc(var(--size) / 4);justify-content:center;align-items:center}.check-box-icon.svelte-15x08a.svelte-15x08a{display:inline-block;--icon-size:calc(var(--size) * 3 / 4);width:var(--icon-size);height:var(--icon-size)}.check-box-icon.svelte-15x08a.svelte-15x08a:after{content:'';display:block;box-sizing:border-box;width:45%;height:91%;transform:translate(60%, -8%) rotate(45deg);border-style:none solid solid none;border-width:2px;border-color:#fff}.check-box-check.svelte-15x08a.svelte-15x08a:not(._checked){background-color:var(--color-inactive)}.check-box-check.svelte-15x08a:not(._checked) .check-box-icon.svelte-15x08a{display:none}.check-box-text.svelte-15x08a.svelte-15x08a{margin-left:0.5em}");
 }
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[8] = list[i];
-	child_ctx[10] = i;
+	child_ctx[11] = list[i];
+	child_ctx[13] = 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}
+// (55:2) {#each _options as option, i}
 function create_each_block$2(ctx) {
 	let label;
 	let input;
 	let input_checked_value;
 	let t0;
+	let span1;
 	let span0;
-	let span0_class_value;
-	let span0_style_value;
+	let span1_class_value;
 	let t1;
-	let span1;
-	let t2_value = /*option*/ ctx[8] + "";
+	let span2;
+	let t2_value = /*option*/ ctx[11] + "";
 	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();
+			span1 = element("span");
 			span0 = element("span");
-			if (if_block) if_block.c();
 			t1 = space();
-			span1 = element("span");
+			span2 = element("span");
 			t2 = text(t2_value);
 			t3 = space();
 			this.h();
@@ -6144,49 +6217,50 @@ function create_each_block$2(ctx) {
 			var label_nodes = children(label);
 			input = claim_element(label_nodes, "INPUT", { class: true, type: true, name: true });
 			t0 = claim_space(label_nodes);
-			span0 = claim_element(label_nodes, "SPAN", { class: true, style: true });
+			span1 = claim_element(label_nodes, "SPAN", { class: true, style: true });
+			var span1_nodes = children(span1);
+			span0 = claim_element(span1_nodes, "SPAN", { class: 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);
+			t1 = claim_space(label_nodes);
+			span2 = claim_element(label_nodes, "SPAN", { class: true, style: true });
+			var span2_nodes = children(span2);
+			t2 = claim_text(span2_nodes, t2_value);
+			span2_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, "class", "check-box-input svelte-15x08a");
 			attr(input, "type", "checkbox");
 			attr(input, "name", /*name*/ ctx[0]);
-			input.checked = input_checked_value = /*isCheckedArray*/ ctx[2][/*i*/ ctx[10]];
+			input.checked = input_checked_value = /*isCheckedArray*/ ctx[3][/*i*/ ctx[13]];
+			attr(span0, "class", "check-box-icon svelte-15x08a");
 
-			attr(span0, "class", span0_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[2][/*i*/ ctx[10]]
+			attr(span1, "class", span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[3][/*i*/ ctx[13]]
 			? ' _checked'
-			: ''}`) + " svelte-1g004f9"));
-
-			attr(span0, "style", span0_style_value = `${/*isCheckedArray*/ ctx[2][/*i*/ ctx[10]]
-			? 'background-color: #2aab9f;'
-			: ''}`);
+			: ''}`) + " svelte-15x08a"));
 
-			attr(span1, "class", "check-box-text svelte-1g004f9");
-			attr(label, "class", "check-box svelte-1g004f9");
+			attr(span1, "style", /*_buttonStyle*/ ctx[4]);
+			attr(span2, "class", "check-box-text svelte-15x08a");
+			attr(span2, "style", /*textStyle*/ ctx[1]);
+			attr(label, "class", "check-box svelte-15x08a");
 		},
 		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, span1);
-			append_hydration(span1, t2);
+			append_hydration(span1, span0);
+			append_hydration(label, t1);
+			append_hydration(label, span2);
+			append_hydration(span2, t2);
 			append_hydration(label, t3);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[4](/*i*/ ctx[10]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[6](/*i*/ ctx[13]));
 				mounted = true;
 			}
 		},
@@ -6197,38 +6271,28 @@ function create_each_block$2(ctx) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*isCheckedArray*/ 4 && input_checked_value !== (input_checked_value = /*isCheckedArray*/ ctx[2][/*i*/ ctx[10]])) {
+			if (dirty & /*isCheckedArray*/ 8 && input_checked_value !== (input_checked_value = /*isCheckedArray*/ ctx[3][/*i*/ ctx[13]])) {
 				input.checked = input_checked_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]]
+			if (dirty & /*isCheckedArray*/ 8 && span1_class_value !== (span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[3][/*i*/ ctx[13]]
 			? ' _checked'
-			: ''}`) + " svelte-1g004f9"))) {
-				attr(span0, "class", span0_class_value);
+			: ''}`) + " svelte-15x08a"))) {
+				attr(span1, "class", span1_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 & /*_buttonStyle*/ 16) {
+				attr(span1, "style", /*_buttonStyle*/ ctx[4]);
 			}
 
-			if (dirty & /*_options*/ 2 && t2_value !== (t2_value = /*option*/ ctx[8] + "")) set_data(t2, t2_value);
+			if (dirty & /*_options*/ 4 && t2_value !== (t2_value = /*option*/ ctx[11] + "")) set_data(t2, t2_value);
+
+			if (dirty & /*textStyle*/ 2) {
+				attr(span2, "style", /*textStyle*/ ctx[1]);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(label);
-			if (if_block) if_block.d();
 			mounted = false;
 			dispose();
 		}
@@ -6237,7 +6301,7 @@ function create_each_block$2(ctx) {
 
 function create_fragment$6(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) {
@@ -6266,7 +6330,7 @@ function create_fragment$6(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "check-boxes svelte-1g004f9");
+			attr(div, "class", "check-boxes svelte-15x08a");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -6276,8 +6340,8 @@ function create_fragment$6(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options, isCheckedArray, name, handleChange*/ 23) {
-				each_value = /*_options*/ ctx[1];
+			if (dirty & /*textStyle, _options, isCheckedArray, _buttonStyle, name, handleChange*/ 95) {
+				each_value = /*_options*/ ctx[2];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -6310,10 +6374,19 @@ function create_fragment$6(ctx) {
 
 function instance$6($$self, $$props, $$invalidate) {
 	let _options;
+	let _buttonStyle;
 	let isCheckedArray;
 	let $value;
 	let { name = '' } = $$props;
 	let { options = 'チェックボックス1,チェックボックス2,チェックボックス3' } = $$props;
+	let { textStyle = 'color: #333; font-size: 12px;' } = $$props;
+
+	let { buttonStyle = {
+		size: '16px',
+		colorActive: '#2aab9f',
+		colorInactive: 'rgba(0, 16, 14, 0.06)'
+	} } = $$props;
+
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -6325,12 +6398,12 @@ function instance$6($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(6, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(9, $value = value));
 
 	const handleChange = index => event => {
 		if (isCheckedArray[index] !== event.target.checked) {
-			$$invalidate(2, isCheckedArray[index] = event.target.checked, isCheckedArray);
-			$$invalidate(2, isCheckedArray = [...isCheckedArray]);
+			$$invalidate(3, isCheckedArray[index] = event.target.checked, isCheckedArray);
+			$$invalidate(3, isCheckedArray = [...isCheckedArray]);
 			const updated = _options.filter((option, i) => isCheckedArray[i]);
 			value.set(updated);
 		}
@@ -6338,45 +6411,76 @@ function instance$6($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-		if ('options' in $$props) $$invalidate(5, options = $$props.options);
+		if ('options' in $$props) $$invalidate(7, options = $$props.options);
+		if ('textStyle' in $$props) $$invalidate(1, textStyle = $$props.textStyle);
+		if ('buttonStyle' in $$props) $$invalidate(8, buttonStyle = $$props.buttonStyle);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*options*/ 32) {
-			$$invalidate(1, _options = options.split(','));
+		if ($$self.$$.dirty & /*options*/ 128) {
+			$$invalidate(2, _options = options.split(','));
+		}
+
+		if ($$self.$$.dirty & /*buttonStyle*/ 256) {
+			$$invalidate(4, _buttonStyle = `--size: ${buttonStyle.size}; --color-active: ${buttonStyle.colorActive}; --color-inactive: ${buttonStyle.colorInactive}`);
 		}
 
-		if ($$self.$$.dirty & /*$value, _options*/ 66) {
-			$$invalidate(2, isCheckedArray = (() => {
+		if ($$self.$$.dirty & /*$value, _options*/ 516) {
+			$$invalidate(3, isCheckedArray = (() => {
 				const checkedSet = new Set($value);
 				return _options.map(option => checkedSet.has(option));
 			})());
 		}
 	};
 
-	return [name, _options, isCheckedArray, value, handleChange, options, $value];
+	return [
+		name,
+		textStyle,
+		_options,
+		isCheckedArray,
+		_buttonStyle,
+		value,
+		handleChange,
+		options,
+		buttonStyle,
+		$value
+	];
 }
 
 class FormCheckBoxes extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { name: 0, options: 5 }, add_css$6);
+
+		init(
+			this,
+			options,
+			instance$6,
+			create_fragment$6,
+			safe_not_equal,
+			{
+				name: 0,
+				options: 7,
+				textStyle: 1,
+				buttonStyle: 8
+			},
+			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}");
+	append_styles(target, "svelte-1ysi4uv", ".rating-buttons.svelte-1ysi4uv.svelte-1ysi4uv{display:flex;justify-content:space-around;align-items:center;width:100%;height:100%}.rating-button.svelte-1ysi4uv.svelte-1ysi4uv{cursor:pointer;display:flex}.rating-button.svelte-1ysi4uv.svelte-1ysi4uv:not(._selected):hover{opacity:0.5}.rating-button.svelte-1ysi4uv svg.svelte-1ysi4uv{fill:var(--color-inactive);width:var(--size);height:var(--size)}.rating-button._selected.svelte-1ysi4uv svg.svelte-1ysi4uv{fill:var(--color-active)}");
 }
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[8] = list[i];
+	child_ctx[10] = list[i];
 	return child_ctx;
 }
 
-// (36:30) 
+// (54:30) 
 function create_if_block_1$1(ctx) {
 	let div;
 	let svg;
@@ -6395,7 +6499,7 @@ function create_if_block_1$1(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true });
+			div = claim_element(nodes, "DIV", { class: true, style: true });
 			var div_nodes = children(div);
 
 			svg = claim_svg_element(div_nodes, "svg", {
@@ -6416,14 +6520,15 @@ function create_if_block_1$1(ctx) {
 			this.h();
 		},
 		h() {
-			attr(path, "d", /*LIKERT_FACE_SVG_DATA*/ ctx[4][/*i*/ ctx[8]]);
+			attr(path, "d", /*LIKERT_FACE_SVG_DATA*/ ctx[5][/*i*/ ctx[10]]);
 			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");
+			attr(svg, "class", "svelte-1ysi4uv");
+			attr(div, "class", div_class_value = "rating-button" + (/*i*/ ctx[10] === /*_value*/ ctx[2] ? ' _selected' : '') + " svelte-1ysi4uv");
+			attr(div, "style", /*_buttonStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -6432,16 +6537,20 @@ function create_if_block_1$1(ctx) {
 			append_hydration(div, t);
 
 			if (!mounted) {
-				dispose = listen(div, "click", /*handleClick*/ ctx[3](/*i*/ ctx[8]));
+				dispose = listen(div, "click", /*handleClick*/ ctx[4](/*i*/ ctx[10]));
 				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")) {
+			if (dirty & /*_value*/ 4 && div_class_value !== (div_class_value = "rating-button" + (/*i*/ ctx[10] === /*_value*/ ctx[2] ? ' _selected' : '') + " svelte-1ysi4uv")) {
 				attr(div, "class", div_class_value);
 			}
+
+			if (dirty & /*_buttonStyle*/ 2) {
+				attr(div, "style", /*_buttonStyle*/ ctx[1]);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -6451,7 +6560,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (30:4) {#if type === 'star'}
+// (48:4) {#if type === 'star'}
 function create_if_block$1(ctx) {
 	let div;
 	let svg;
@@ -6470,7 +6579,7 @@ function create_if_block$1(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true });
+			div = claim_element(nodes, "DIV", { class: true, style: true });
 			var div_nodes = children(div);
 
 			svg = claim_svg_element(div_nodes, "svg", {
@@ -6497,8 +6606,9 @@ function create_if_block$1(ctx) {
 			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");
+			attr(svg, "class", "svelte-1ysi4uv");
+			attr(div, "class", div_class_value = "rating-button" + (/*i*/ ctx[10] <= /*_value*/ ctx[2] ? ' _selected' : '') + " svelte-1ysi4uv");
+			attr(div, "style", /*_buttonStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -6507,16 +6617,20 @@ function create_if_block$1(ctx) {
 			append_hydration(div, t);
 
 			if (!mounted) {
-				dispose = listen(div, "click", /*handleClick*/ ctx[3](/*i*/ ctx[8]));
+				dispose = listen(div, "click", /*handleClick*/ ctx[4](/*i*/ ctx[10]));
 				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")) {
+			if (dirty & /*_value*/ 4 && div_class_value !== (div_class_value = "rating-button" + (/*i*/ ctx[10] <= /*_value*/ ctx[2] ? ' _selected' : '') + " svelte-1ysi4uv")) {
 				attr(div, "class", div_class_value);
 			}
+
+			if (dirty & /*_buttonStyle*/ 2) {
+				attr(div, "style", /*_buttonStyle*/ ctx[1]);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -6526,7 +6640,7 @@ function create_if_block$1(ctx) {
 	};
 }
 
-// (29:2) {#each [...Array(5).keys()].map(i => i + 1) as i}
+// (47:2) {#each [...Array(5).keys()].map(i => i + 1) as i}
 function create_each_block$1(ctx) {
 	let if_block_anchor;
 
@@ -6605,7 +6719,7 @@ function create_fragment$5(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "rating-buttons svelte-14cxkfs");
+			attr(div, "class", "rating-buttons svelte-1ysi4uv");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -6615,7 +6729,7 @@ function create_fragment$5(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*Array, _value, handleClick, type, LIKERT_FACE_SVG_DATA*/ 27) {
+			if (dirty & /*Array, _value, _buttonStyle, handleClick, type, LIKERT_FACE_SVG_DATA*/ 55) {
 				each_value = [...Array(5).keys()].map(func);
 				let i;
 
@@ -6651,9 +6765,17 @@ const func = i => i + 1;
 
 function instance$5($$self, $$props, $$invalidate) {
 	let _value;
+	let _buttonStyle;
 	let $value;
 	let { name = '' } = $$props;
-	let { type = 'face' } = $$props;
+	let { type = 'star' } = $$props;
+
+	let { buttonStyle = {
+		size: '24px',
+		colorActive: '#2aab9f',
+		colorInactive: 'rgba(0, 16, 14, 0.2)'
+	} } = $$props;
+
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -6665,7 +6787,7 @@ function instance$5($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(6, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(8, $value = value));
 
 	const handleClick = index => event => {
 		value.set([String(index)]);
@@ -6681,23 +6803,38 @@ function instance$5($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(5, name = $$props.name);
+		if ('name' in $$props) $$invalidate(6, name = $$props.name);
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
+		if ('buttonStyle' in $$props) $$invalidate(7, buttonStyle = $$props.buttonStyle);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*$value*/ 64) {
-			$$invalidate(1, _value = Number($value[0] ?? -1));
+		if ($$self.$$.dirty & /*$value*/ 256) {
+			$$invalidate(2, _value = Number($value[0] ?? -1));
+		}
+
+		if ($$self.$$.dirty & /*buttonStyle*/ 128) {
+			$$invalidate(1, _buttonStyle = `--size: ${buttonStyle.size}; --color-active: ${buttonStyle.colorActive}; --color-inactive: ${buttonStyle.colorInactive}`);
 		}
 	};
 
-	return [type, _value, value, handleClick, LIKERT_FACE_SVG_DATA, name, $value];
+	return [
+		type,
+		_buttonStyle,
+		_value,
+		value,
+		handleClick,
+		LIKERT_FACE_SVG_DATA,
+		name,
+		buttonStyle,
+		$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);
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { name: 6, type: 0, buttonStyle: 7 }, add_css$5);
 	}
 }
 
@@ -8055,4 +8192,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, 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 };
+export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, 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 };