@plaidev/karte-action-sdk 1.1.120 → 1.1.121-27933307.3ec68f65

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) される前にフックする関数
@@ -4005,56 +4020,144 @@ class RenderText extends SvelteComponent {
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
 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%}");
+	append_styles(target, "svelte-13cs3g2", ".text-element-wrapper.svelte-13cs3g2.svelte-13cs3g2{position:relative;height:100%}.text-element.svelte-13cs3g2.svelte-13cs3g2{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto}.text-element-inner.svelte-13cs3g2.svelte-13cs3g2{width:100%;height:auto}.text-direction-vertical.svelte-13cs3g2.svelte-13cs3g2{writing-mode:vertical-rl}.text-direction-vertical.svelte-13cs3g2 .text-element-inner.svelte-13cs3g2{width:auto;height:100%}.tooltip.svelte-13cs3g2.svelte-13cs3g2{display:none;position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;background-color:#3d4948;white-space:nowrap;padding:4px 8px 4px 8px;border-radius:4px;font-size:12px;z-index:2147483647}.tooltip.svelte-13cs3g2.svelte-13cs3g2:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-13cs3g2.svelte-13cs3g2{display:block}.tooltip-error.svelte-13cs3g2.svelte-13cs3g2{background-color:#c00}.tooltip-error.svelte-13cs3g2.svelte-13cs3g2:before{border-bottom:7px solid #c00}");
+}
+
+// (56:2) {#if enableCopy}
+function create_if_block$3(ctx) {
+	let div0;
+	let t0;
+	let t1;
+	let div1;
+	let t2;
+
+	return {
+		c() {
+			div0 = element("div");
+			t0 = text("コピーしました");
+			t1 = space();
+			div1 = element("div");
+			t2 = text("コピーできませんでした");
+			this.h();
+		},
+		l(nodes) {
+			div0 = claim_element(nodes, "DIV", { class: true });
+			var div0_nodes = children(div0);
+			t0 = claim_text(div0_nodes, "コピーしました");
+			div0_nodes.forEach(detach);
+			t1 = claim_space(nodes);
+			div1 = claim_element(nodes, "DIV", { class: true });
+			var div1_nodes = children(div1);
+			t2 = claim_text(div1_nodes, "コピーできませんでした");
+			div1_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div0, "class", "tooltip svelte-13cs3g2");
+			attr(div1, "class", "tooltip tooltip-error svelte-13cs3g2");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div0, anchor);
+			append_hydration(div0, t0);
+			/*div0_binding*/ ctx[9](div0);
+			insert_hydration(target, t1, anchor);
+			insert_hydration(target, div1, anchor);
+			append_hydration(div1, t2);
+			/*div1_binding*/ ctx[10](div1);
+		},
+		p: noop,
+		d(detaching) {
+			if (detaching) detach(div0);
+			/*div0_binding*/ ctx[9](null);
+			if (detaching) detach(t1);
+			if (detaching) detach(div1);
+			/*div1_binding*/ ctx[10](null);
+		}
+	};
 }
 
 function create_fragment$h(ctx) {
+	let div2;
 	let div1;
 	let div0;
 	let rendertext;
 	let div1_class_value;
+	let t;
 	let current;
+	let mounted;
+	let dispose;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
+	let if_block = /*enableCopy*/ ctx[1] && create_if_block$3(ctx);
 
 	return {
 		c() {
+			div2 = element("div");
 			div1 = element("div");
 			div0 = element("div");
 			create_component(rendertext.$$.fragment);
+			t = space();
+			if (if_block) if_block.c();
 			this.h();
 		},
 		l(nodes) {
-			div1 = claim_element(nodes, "DIV", { class: true, style: true });
+			div2 = claim_element(nodes, "DIV", { class: true });
+			var div2_nodes = children(div2);
+			div1 = claim_element(div2_nodes, "DIV", { class: true, style: true });
 			var div1_nodes = children(div1);
 			div0 = claim_element(div1_nodes, "DIV", { class: true });
 			var div0_nodes = children(div0);
 			claim_component(rendertext.$$.fragment, div0_nodes);
 			div0_nodes.forEach(detach);
 			div1_nodes.forEach(detach);
+			t = claim_space(div2_nodes);
+			if (if_block) if_block.l(div2_nodes);
+			div2_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(div0, "class", "text-element-inner svelte-9en2jg");
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-9en2jg"));
-			attr(div1, "style", /*style*/ ctx[2]);
+			attr(div0, "class", "text-element-inner svelte-13cs3g2");
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[2]}`) + " svelte-13cs3g2"));
+			attr(div1, "style", /*style*/ ctx[5]);
+			attr(div2, "class", "text-element-wrapper svelte-13cs3g2");
 		},
 		m(target, anchor) {
-			insert_hydration(target, div1, anchor);
+			insert_hydration(target, div2, anchor);
+			append_hydration(div2, div1);
 			append_hydration(div1, div0);
 			mount_component(rendertext, div0, null);
+			append_hydration(div2, t);
+			if (if_block) if_block.m(div2, null);
 			current = true;
+
+			if (!mounted) {
+				dispose = listen(div1, "click", /*click*/ ctx[6]);
+				mounted = true;
+			}
 		},
 		p(ctx, [dirty]) {
 			const rendertext_changes = {};
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
 
-			if (!current || dirty & /*textDirection*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-9en2jg"))) {
+			if (!current || dirty & /*textDirection*/ 4 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[2]}`) + " svelte-13cs3g2"))) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (!current || dirty & /*style*/ 4) {
-				attr(div1, "style", /*style*/ ctx[2]);
+			if (!current || dirty & /*style*/ 32) {
+				attr(div1, "style", /*style*/ ctx[5]);
+			}
+
+			if (/*enableCopy*/ ctx[1]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block$3(ctx);
+					if_block.c();
+					if_block.m(div2, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
 			}
 		},
 		i(local) {
@@ -4067,8 +4170,11 @@ function create_fragment$h(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div1);
+			if (detaching) detach(div2);
 			destroy_component(rendertext);
+			if (if_block) if_block.d();
+			mounted = false;
+			dispose();
 		}
 	};
 }
@@ -4076,24 +4182,74 @@ function create_fragment$h(ctx) {
 function instance$h($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
+	let { enableCopy = false } = $$props;
+	let tooltipEl;
+	let tooltipErrorEl;
+
+	const click = async () => {
+		if (enableCopy) {
+			try {
+				await navigator.clipboard.writeText(text);
+				tooltipEl.classList.add('show');
+			} catch(err) {
+				tooltipErrorEl.classList.add('show');
+			}
+
+			setTimeout(
+				() => {
+					tooltipEl.classList.remove('show');
+					tooltipErrorEl.classList.remove('show');
+				},
+				1000
+			);
+		}
+	};
+
 	let { _textStyle = 'font-size:12px;' } = $$props;
 	let { textDirection = 'horizontal' } = $$props;
 	let { _style = '' } = $$props;
 
+	function div0_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			tooltipEl = $$value;
+			$$invalidate(3, tooltipEl);
+		});
+	}
+
+	function div1_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			tooltipErrorEl = $$value;
+			$$invalidate(4, tooltipErrorEl);
+		});
+	}
+
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('_textStyle' in $$props) $$invalidate(3, _textStyle = $$props._textStyle);
-		if ('textDirection' in $$props) $$invalidate(1, textDirection = $$props.textDirection);
-		if ('_style' in $$props) $$invalidate(4, _style = $$props._style);
+		if ('enableCopy' in $$props) $$invalidate(1, enableCopy = $$props.enableCopy);
+		if ('_textStyle' in $$props) $$invalidate(7, _textStyle = $$props._textStyle);
+		if ('textDirection' in $$props) $$invalidate(2, textDirection = $$props.textDirection);
+		if ('_style' in $$props) $$invalidate(8, _style = $$props._style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*_textStyle, _style*/ 24) {
-			$$invalidate(2, style = [..._textStyle.split(';'), ..._style.split(';')].join(';'));
+		if ($$self.$$.dirty & /*_textStyle, _style*/ 384) {
+			$$invalidate(5, style = [..._textStyle.split(';'), ..._style.split(';')].join(';'));
 		}
 	};
 
-	return [text, textDirection, style, _textStyle, _style];
+	return [
+		text,
+		enableCopy,
+		textDirection,
+		tooltipEl,
+		tooltipErrorEl,
+		style,
+		click,
+		_textStyle,
+		_style,
+		div0_binding,
+		div1_binding
+	];
 }
 
 class TextElement extends SvelteComponent {
@@ -4108,9 +4264,10 @@ class TextElement extends SvelteComponent {
 			safe_not_equal,
 			{
 				text: 0,
-				_textStyle: 3,
-				textDirection: 1,
-				_style: 4
+				enableCopy: 1,
+				_textStyle: 7,
+				textDirection: 2,
+				_style: 8
 			},
 			add_css$h
 		);
@@ -5431,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;
@@ -5449,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;
@@ -5468,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);
@@ -5480,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);
@@ -5496,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);
@@ -5527,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) {
@@ -5556,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);
@@ -5566,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) {
@@ -5600,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({
@@ -5615,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) {
@@ -5625,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;
 
@@ -5682,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 {
@@ -5698,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);
@@ -5706,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;
 	}
 
@@ -5736,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) {
@@ -5757,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;
 			}
@@ -5777,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) {
@@ -5801,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) {
@@ -5819,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);
@@ -5837,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) {
@@ -5864,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,
@@ -5878,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({
@@ -5897,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();
@@ -6002,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"));
+			: ''}`) + " svelte-15x08a"));
 
-			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");
+			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;
 			}
 		},
@@ -6055,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();
 		}
@@ -6095,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) {
@@ -6124,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);
@@ -6134,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) {
@@ -6168,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({
@@ -6183,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);
 		}
@@ -6196,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;
@@ -6253,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", {
@@ -6274,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);
@@ -6290,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);
@@ -6309,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;
@@ -6328,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", {
@@ -6355,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);
@@ -6365,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);
@@ -6384,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;
 
@@ -6463,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);
@@ -6473,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;
 
@@ -6509,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({
@@ -6523,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)]);
@@ -6539,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);
 	}
 }
 
@@ -7913,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 };