@plaidev/karte-action-sdk 1.1.136-27961539.665abb40 → 1.1.136-27962546.a6d4d147

package/dist/index.es.js

@@ -87,6 +87,16 @@ const getTransform = (position) => {
 const getMarginStyle = (margin) => {
     return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
 };
+/** @internal */
+const parseStyle = (style) => {
+    return Object.fromEntries(style.split(';').map(attr => attr.split(':').map(str => str.trim())));
+};
+/** @internal */
+const stringifyStyleObj = (styleObj) => {
+    return Object.entries(styleObj)
+        .map(([key, value]) => `${key}:${value}`)
+        .join(';');
+};
 /**
  * スクロール率が達したときに呼び出すコールバックを登録します
  *
@@ -1529,15 +1539,9 @@ const DefaultSlideNavigationButton = {
     colorActive: '#666',
 };
 /** @internal */
-const DefaultFormButtonStyle = {
-    size: '16px',
-    colorActive: '#2aab9f',
-    colorInactive: 'rgba(0, 16, 14, 0.06)',
-};
-/** @internal */
-const DefaultFormSelectStyle = {
-    colorArrow: '#333',
-    colorFocused: '#2aab9f',
+const DefaultFormButtonColor = {
+    main: '#2aab9f',
+    sub: '#fff',
 };
 
 const DEFAULT_COLLECTION_ENDPOINT = typeof __FLYER_GEN_COLLECTION_API_ENDPOINT__ === 'string'
@@ -5701,17 +5705,17 @@ class FormTextarea extends SvelteComponent {
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
 function add_css$a(target) {
-	append_styles(target, "svelte-17es5zb", ".radio-buttons.svelte-17es5zb{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-17es5zb{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-17es5zb{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;flex:none}.radio-button-input.svelte-17es5zb: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-17es5zb{margin-left:0.5em}");
+	append_styles(target, "svelte-17s08g", ".radio-buttons.svelte-17s08g{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-17s08g{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-17s08g{appearance:none;margin:0;box-sizing:border-box;border-radius:var(--size);position:relative;width:var(--size);height:var(--size);border:solid calc(var(--size) / 3) var(--color-main);background-color:var(--color-sub);cursor:pointer;flex:none}.radio-button-input.svelte-17s08g:checked{border:solid calc(var(--size) / 3) var(--color-main-active);background-color:var(--color-sub-active);box-shadow:0px 1px 8px 2px rgba(18,160,160,.08),0px 1px 4px -1px rgba(18,160,160,.24)}.radio-button-text.svelte-17s08g{margin-left:0.5em}");
 }
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
-	child_ctx[15] = i;
+	child_ctx[15] = list[i];
+	child_ctx[17] = i;
 	return child_ctx;
 }
 
-// (62:2) {#each _options as option, i}
+// (88:2) {#each _options as option, i}
 function create_each_block$4(ctx) {
 	let label;
 	let input;
@@ -5719,7 +5723,7 @@ function create_each_block$4(ctx) {
 	let input_checked_value;
 	let t0;
 	let span;
-	let t1_value = /*option*/ ctx[13] + "";
+	let t1_value = /*option*/ ctx[15] + "";
 	let t1;
 	let t2;
 	let mounted;
@@ -5734,14 +5738,14 @@ function create_each_block$4(ctx) {
 			t1 = text(t1_value);
 			t2 = space();
 			attr(input, "type", "radio");
-			attr(input, "class", "radio-button-input svelte-17es5zb");
-			attr(input, "style", /*_buttonStyle*/ ctx[5]);
+			attr(input, "class", "radio-button-input svelte-17s08g");
+			attr(input, "style", /*buttonStyle*/ ctx[5]);
 			attr(input, "name", /*name*/ ctx[0]);
-			input.value = input_value_value = /*option*/ ctx[13];
-			input.checked = input_checked_value = /*option*/ ctx[13] === /*_value*/ ctx[3];
-			attr(span, "class", "radio-button-text svelte-17es5zb");
-			attr(span, "style", /*textStyle*/ ctx[2]);
-			attr(label, "class", "radio-button svelte-17es5zb");
+			input.value = input_value_value = /*option*/ ctx[15];
+			input.checked = input_checked_value = /*option*/ ctx[15] === /*_value*/ ctx[3];
+			attr(span, "class", "radio-button-text svelte-17s08g");
+			attr(span, "style", /*_textStyle*/ ctx[2]);
+			attr(label, "class", "radio-button svelte-17s08g");
 		},
 		m(target, anchor) {
 			insert(target, label, anchor);
@@ -5752,33 +5756,33 @@ function create_each_block$4(ctx) {
 			append(label, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[15]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[17]));
 				mounted = true;
 			}
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty & /*_buttonStyle*/ 32) {
-				attr(input, "style", /*_buttonStyle*/ ctx[5]);
+			if (dirty & /*buttonStyle*/ 32) {
+				attr(input, "style", /*buttonStyle*/ ctx[5]);
 			}
 
 			if (dirty & /*name*/ 1) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*_options*/ 16 && input_value_value !== (input_value_value = /*option*/ ctx[13])) {
+			if (dirty & /*_options*/ 16 && input_value_value !== (input_value_value = /*option*/ ctx[15])) {
 				input.value = input_value_value;
 			}
 
-			if (dirty & /*_options, _value*/ 24 && input_checked_value !== (input_checked_value = /*option*/ ctx[13] === /*_value*/ ctx[3])) {
+			if (dirty & /*_options, _value*/ 24 && input_checked_value !== (input_checked_value = /*option*/ ctx[15] === /*_value*/ ctx[3])) {
 				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*_options*/ 16 && t1_value !== (t1_value = /*option*/ ctx[13] + "")) set_data(t1, t1_value);
+			if (dirty & /*_options*/ 16 && t1_value !== (t1_value = /*option*/ ctx[15] + "")) set_data(t1, t1_value);
 
-			if (dirty & /*textStyle*/ 4) {
-				attr(span, "style", /*textStyle*/ ctx[2]);
+			if (dirty & /*_textStyle*/ 4) {
+				attr(span, "style", /*_textStyle*/ ctx[2]);
 			}
 		},
 		d(detaching) {
@@ -5806,8 +5810,8 @@ function create_fragment$a(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "radio-buttons svelte-17es5zb");
-			attr(div, "style", /*layoutStyle*/ ctx[1]);
+			attr(div, "class", "radio-buttons svelte-17s08g");
+			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -5817,7 +5821,7 @@ function create_fragment$a(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*textStyle, _options, _buttonStyle, name, _value, handleChange*/ 189) {
+			if (dirty & /*_textStyle, _options, buttonStyle, name, _value, handleChange*/ 189) {
 				each_value = /*_options*/ ctx[4];
 				let i;
 
@@ -5840,8 +5844,8 @@ function create_fragment$a(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty & /*layoutStyle*/ 2) {
-				attr(div, "style", /*layoutStyle*/ ctx[1]);
+			if (dirty & /*_layoutStyle*/ 2) {
+				attr(div, "style", /*_layoutStyle*/ ctx[1]);
 			}
 		},
 		i: noop,
@@ -5855,21 +5859,17 @@ function create_fragment$a(ctx) {
 
 function instance$a($$self, $$props, $$invalidate) {
 	let _options;
-	let _buttonStyle;
+	let buttonStyle;
 	let _value;
 	let $value;
 	let { name = '' } = $$props;
 	let { options = 'ラジオボタン1,ラジオボタン2,ラジオボタン3' } = $$props;
 	let { required = false } = $$props;
-	let { layoutStyle = 'flex-direction: column; gap: 0px;' } = $$props;
-	let { textStyle = 'color: #333; font-size: 12px;' } = $$props;
-
-	let { buttonStyle = {
-		size: '16px',
-		colorActive: '#2aab9f',
-		colorInactive: 'rgba(0, 16, 14, 0.06)'
-	} } = $$props;
-
+	let { _layoutStyle = 'flex-direction: column; gap: 0px;' } = $$props;
+	let { _textStyle = 'color: #333; font-size: 12px;' } = $$props;
+	let { buttonSize = '16px' } = $$props;
+	let { buttonColor = { main: '#f0f1f1', sub: '#f0f1f1' } } = $$props;
+	let { buttonColorActive = { main: '#2aab9f', sub: '#fff' } } = $$props;
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -5882,7 +5882,7 @@ function instance$a($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(11, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(13, $value = value));
 
 	const handleChange = index => event => {
 		if (event.target.checked) {
@@ -5894,9 +5894,11 @@ function instance$a($$self, $$props, $$invalidate) {
 		if ('name' in $$props) $$invalidate(0, name = $$props.name);
 		if ('options' in $$props) $$invalidate(8, options = $$props.options);
 		if ('required' in $$props) $$invalidate(9, required = $$props.required);
-		if ('layoutStyle' in $$props) $$invalidate(1, layoutStyle = $$props.layoutStyle);
-		if ('textStyle' in $$props) $$invalidate(2, textStyle = $$props.textStyle);
-		if ('buttonStyle' in $$props) $$invalidate(10, buttonStyle = $$props.buttonStyle);
+		if ('_layoutStyle' in $$props) $$invalidate(1, _layoutStyle = $$props._layoutStyle);
+		if ('_textStyle' in $$props) $$invalidate(2, _textStyle = $$props._textStyle);
+		if ('buttonSize' in $$props) $$invalidate(10, buttonSize = $$props.buttonSize);
+		if ('buttonColor' in $$props) $$invalidate(11, buttonColor = $$props.buttonColor);
+		if ('buttonColorActive' in $$props) $$invalidate(12, buttonColorActive = $$props.buttonColorActive);
 	};
 
 	$$self.$$.update = () => {
@@ -5904,27 +5906,37 @@ function instance$a($$self, $$props, $$invalidate) {
 			$$invalidate(4, _options = options.split(','));
 		}
 
-		if ($$self.$$.dirty & /*buttonStyle*/ 1024) {
-			$$invalidate(5, _buttonStyle = `--size: ${buttonStyle.size}; --color-active: ${buttonStyle.colorActive}; --color-inactive: ${buttonStyle.colorInactive}`);
+		if ($$self.$$.dirty & /*buttonColor, buttonColorActive, buttonSize*/ 7168) {
+			$$invalidate(5, buttonStyle = (() => {
+				return stringifyStyleObj({
+					'--color-main': buttonColor.main,
+					'--color-sub': buttonColor.sub,
+					'--color-main-active': buttonColorActive.main,
+					'--color-sub-active': buttonColorActive.sub,
+					'--size': buttonSize
+				});
+			})());
 		}
 
-		if ($$self.$$.dirty & /*$value*/ 2048) {
+		if ($$self.$$.dirty & /*$value*/ 8192) {
 			$$invalidate(3, _value = $value[0]);
 		}
 	};
 
 	return [
 		name,
-		layoutStyle,
-		textStyle,
+		_layoutStyle,
+		_textStyle,
 		_value,
 		_options,
-		_buttonStyle,
+		buttonStyle,
 		value,
 		handleChange,
 		options,
 		required,
-		buttonStyle,
+		buttonSize,
+		buttonColor,
+		buttonColorActive,
 		$value
 	];
 }
@@ -5943,9 +5955,11 @@ class FormRadioButtons extends SvelteComponent {
 				name: 0,
 				options: 8,
 				required: 9,
-				layoutStyle: 1,
-				textStyle: 2,
-				buttonStyle: 10
+				_layoutStyle: 1,
+				_textStyle: 2,
+				buttonSize: 10,
+				buttonColor: 11,
+				buttonColorActive: 12
 			},
 			add_css$a
 		);
@@ -5955,37 +5969,39 @@ class FormRadioButtons extends SvelteComponent {
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
 
 function add_css$9(target) {
-	append_styles(target, "svelte-wy1i8s", ".select.svelte-wy1i8s{width:100%;height:100%}.select-select.svelte-wy1i8s{position:relative;appearance:none;width:100%;height:100%}.select-select.svelte-wy1i8s:focus{outline:none;border-color:var(--color-focused) !important}.select-icon.svelte-wy1i8s{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}");
+	append_styles(target, "svelte-1m0v4gk", ".select.svelte-1m0v4gk{width:100%;height:100%}.select-select.svelte-1m0v4gk{position:relative;appearance:none;width:100%;height:100%}.select-select.svelte-1m0v4gk:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.select-icon.svelte-1m0v4gk{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(--icon-color);border-top:solid 2px var(--icon-color);transform:translateY(-35.4%) rotate(135deg);pointer-events:none}");
 }
 
 function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[10] = list[i];
-	child_ctx[12] = i;
+	child_ctx[17] = list[i];
+	child_ctx[19] = i;
 	return child_ctx;
 }
 
-// (55:10) {:else}
+// (91:10) {:else}
 function create_else_block(ctx) {
 	let t;
 
 	return {
 		c() {
-			t = text("回答を選択して下さい");
+			t = text(/*placeholder*/ ctx[0]);
 		},
 		m(target, anchor) {
 			insert(target, t, anchor);
 		},
-		p: noop,
+		p(ctx, dirty) {
+			if (dirty & /*placeholder*/ 1) set_data(t, /*placeholder*/ ctx[0]);
+		},
 		d(detaching) {
 			if (detaching) detach(t);
 		}
 	};
 }
 
-// (53:10) {#if option}
+// (89:10) {#if option}
 function create_if_block$1(ctx) {
-	let t_value = /*option*/ ctx[10] + "";
+	let t_value = /*option*/ ctx[17] + "";
 	let t;
 
 	return {
@@ -5996,7 +6012,7 @@ function create_if_block$1(ctx) {
 			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*_options*/ 4 && t_value !== (t_value = /*option*/ ctx[10] + "")) set_data(t, t_value);
+			if (dirty & /*_options*/ 16 && t_value !== (t_value = /*option*/ ctx[17] + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -6004,14 +6020,15 @@ function create_if_block$1(ctx) {
 	};
 }
 
-// (51:6) {#each _options as option, i}
+// (87:6) {#each _options as option, i}
 function create_each_block$3(ctx) {
 	let option;
 	let t;
 	let option_value_value;
+	let option_selected_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*option*/ ctx[10]) return create_if_block$1;
+		if (/*option*/ ctx[17]) return create_if_block$1;
 		return create_else_block;
 	}
 
@@ -6023,8 +6040,9 @@ function create_each_block$3(ctx) {
 			option = element("option");
 			if_block.c();
 			t = space();
-			option.__value = option_value_value = /*option*/ ctx[10];
+			option.__value = option_value_value = /*option*/ ctx[17];
 			option.value = option.__value;
+			option.selected = option_selected_value = /*option*/ ctx[17] === /*_value*/ ctx[1];
 		},
 		m(target, anchor) {
 			insert(target, option, anchor);
@@ -6044,10 +6062,14 @@ function create_each_block$3(ctx) {
 				}
 			}
 
-			if (dirty & /*_options*/ 4 && option_value_value !== (option_value_value = /*option*/ ctx[10])) {
+			if (dirty & /*_options*/ 16 && option_value_value !== (option_value_value = /*option*/ ctx[17])) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
+
+			if (dirty & /*_options, _value*/ 18 && option_selected_value !== (option_selected_value = /*option*/ ctx[17] === /*_value*/ ctx[1])) {
+				option.selected = option_selected_value;
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(option);
@@ -6063,7 +6085,7 @@ function create_fragment$9(ctx) {
 	let div0;
 	let mounted;
 	let dispose;
-	let each_value = /*_options*/ ctx[2];
+	let each_value = /*_options*/ ctx[4];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -6081,11 +6103,11 @@ function create_fragment$9(ctx) {
 
 			t = space();
 			div0 = element("div");
-			attr(select, "class", "select-select svelte-wy1i8s");
-			attr(select, "style", /*_style*/ ctx[0]);
-			attr(div0, "class", "select-icon svelte-wy1i8s");
-			attr(div1, "class", "select svelte-wy1i8s");
-			attr(div1, "style", /*styleVariables*/ ctx[1]);
+			attr(select, "class", "select-select svelte-1m0v4gk");
+			attr(select, "style", /*style*/ ctx[3]);
+			attr(div0, "class", "select-icon svelte-1m0v4gk");
+			attr(div1, "class", "select svelte-1m0v4gk");
+			attr(div1, "style", /*styleVariables*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -6099,13 +6121,13 @@ function create_fragment$9(ctx) {
 			append(div1, div0);
 
 			if (!mounted) {
-				dispose = listen(select, "change", /*handleChange*/ ctx[3]);
+				dispose = listen(select, "change", /*handleChange*/ ctx[6]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options*/ 4) {
-				each_value = /*_options*/ ctx[2];
+			if (dirty & /*_options, _value, placeholder*/ 19) {
+				each_value = /*_options*/ ctx[4];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -6127,12 +6149,12 @@ function create_fragment$9(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty & /*_style*/ 1) {
-				attr(select, "style", /*_style*/ ctx[0]);
+			if (dirty & /*style*/ 8) {
+				attr(select, "style", /*style*/ ctx[3]);
 			}
 
-			if (dirty & /*styleVariables*/ 2) {
-				attr(div1, "style", /*styleVariables*/ ctx[1]);
+			if (dirty & /*styleVariables*/ 4) {
+				attr(div1, "style", /*styleVariables*/ ctx[2]);
 			}
 		},
 		i: noop,
@@ -6148,17 +6170,19 @@ function create_fragment$9(ctx) {
 
 function instance$9($$self, $$props, $$invalidate) {
 	let _options;
+	let style;
 	let styleVariables;
+	let _value;
+	let $value;
 	let { name = '' } = $$props;
 	let { options = 'プルダウン1,プルダウン2,プルダウン3' } = $$props;
+	let { placeholder = '回答を選択して下さい' } = $$props;
 	let { required = false } = $$props;
-	let { _style = 'color: #333; cursor: pointer; background-color: #fff; border: solid 2px #ccc; border-radius: 6px; font-size: 12px; padding: 0 0 0 10px;' } = $$props;
-
-	let { selectStyle = {
-		colorArrow: '#333',
-		colorFocused: '#2aab9f'
-	} } = $$props;
-
+	let { _style = 'cursor: pointer; background-color: #fff; border: solid 2px #ccc; border-radius: 6px; padding: 0 0 0 10px;' } = $$props;
+	let { _focusStyle = 'border-width: 2px; border-color: #2aab9f; border-style: solid' } = $$props;
+	let { _textStyle = 'font-size: 12px;' } = $$props;
+	let { _placeholderStyle = 'color: #ccc;' } = $$props;
+	let { _iconStyle = 'color: #333;' } = $$props;
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -6171,38 +6195,75 @@ function instance$9($$self, $$props, $$invalidate) {
 		}
 	});
 
+	component_subscribe($$self, value, value => $$invalidate(15, $value = value));
+
 	function handleChange(event) {
 		const updated = event.target.value ? [event.target.value] : [];
 		value.set(updated);
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(4, name = $$props.name);
-		if ('options' in $$props) $$invalidate(5, options = $$props.options);
-		if ('required' in $$props) $$invalidate(6, required = $$props.required);
-		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
-		if ('selectStyle' in $$props) $$invalidate(7, selectStyle = $$props.selectStyle);
+		if ('name' in $$props) $$invalidate(7, name = $$props.name);
+		if ('options' in $$props) $$invalidate(8, options = $$props.options);
+		if ('placeholder' in $$props) $$invalidate(0, placeholder = $$props.placeholder);
+		if ('required' in $$props) $$invalidate(9, required = $$props.required);
+		if ('_style' in $$props) $$invalidate(10, _style = $$props._style);
+		if ('_focusStyle' in $$props) $$invalidate(11, _focusStyle = $$props._focusStyle);
+		if ('_textStyle' in $$props) $$invalidate(12, _textStyle = $$props._textStyle);
+		if ('_placeholderStyle' in $$props) $$invalidate(13, _placeholderStyle = $$props._placeholderStyle);
+		if ('_iconStyle' in $$props) $$invalidate(14, _iconStyle = $$props._iconStyle);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*options*/ 32) {
-			$$invalidate(2, _options = ['', ...options.split(',')]);
+		if ($$self.$$.dirty & /*options*/ 256) {
+			$$invalidate(4, _options = ['', ...options.split(',')]);
 		}
 
-		if ($$self.$$.dirty & /*selectStyle*/ 128) {
-			$$invalidate(1, styleVariables = `--color-arrow: ${selectStyle.colorArrow}; --color-focused: ${selectStyle.colorFocused}`);
+		if ($$self.$$.dirty & /*$value*/ 32768) {
+			$$invalidate(1, _value = $value[0]);
+		}
+
+		if ($$self.$$.dirty & /*_style, _textStyle, _value, _placeholderStyle*/ 13314) {
+			$$invalidate(3, style = [
+				..._style.split(';'),
+				..._textStyle.split(';'),
+				...!_value ? _placeholderStyle.split(';') : []
+			].join(';'));
+		}
+
+		if ($$self.$$.dirty & /*_focusStyle, _placeholderStyle, _iconStyle*/ 26624) {
+			$$invalidate(2, styleVariables = (() => {
+				const variables = {};
+				const focusStyleObj = parseStyle(_focusStyle);
+				const placeholderStyle = parseStyle(_placeholderStyle);
+				const iconStyleObj = parseStyle(_iconStyle);
+				if (focusStyleObj['border-width']) variables['--focus-border-width'] = focusStyleObj['border-width'];
+				if (focusStyleObj['border-color']) variables['--focus-border-color'] = focusStyleObj['border-color'];
+				if (focusStyleObj['border-style']) variables['--focus-border-style'] = focusStyleObj['border-style'];
+				if (placeholderStyle.color) variables['--placeholder-color'] = placeholderStyle.color;
+				if (iconStyleObj.color) variables['--icon-color'] = iconStyleObj.color;
+				return stringifyStyleObj(variables);
+			})());
 		}
 	};
 
 	return [
-		_style,
+		placeholder,
+		_value,
 		styleVariables,
+		style,
 		_options,
+		value,
 		handleChange,
 		name,
 		options,
 		required,
-		selectStyle
+		_style,
+		_focusStyle,
+		_textStyle,
+		_placeholderStyle,
+		_iconStyle,
+		$value
 	];
 }
 
@@ -6217,11 +6278,15 @@ class FormSelect extends SvelteComponent {
 			create_fragment$9,
 			safe_not_equal,
 			{
-				name: 4,
-				options: 5,
-				required: 6,
-				_style: 0,
-				selectStyle: 7
+				name: 7,
+				options: 8,
+				placeholder: 0,
+				required: 9,
+				_style: 10,
+				_focusStyle: 11,
+				_textStyle: 12,
+				_placeholderStyle: 13,
+				_iconStyle: 14
 			},
 			add_css$9
 		);
@@ -6231,17 +6296,17 @@ class FormSelect extends SvelteComponent {
 /* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
 
 function add_css$8(target) {
-	append_styles(target, "svelte-y5vmhx", ".check-boxes.svelte-y5vmhx.svelte-y5vmhx{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.check-box.svelte-y5vmhx.svelte-y5vmhx{display:flex;align-items:center;position:relative;cursor:pointer}.check-box-input.svelte-y5vmhx.svelte-y5vmhx{width:0;height:0;margin:0}.check-box-check.svelte-y5vmhx.svelte-y5vmhx{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;flex:none}.check-box-icon.svelte-y5vmhx.svelte-y5vmhx{display:inline-block;--icon-size:calc(var(--size) * 3 / 4);width:var(--icon-size);height:var(--icon-size)}.check-box-icon.svelte-y5vmhx.svelte-y5vmhx: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-y5vmhx.svelte-y5vmhx:not(._checked){background-color:var(--color-inactive)}.check-box-check.svelte-y5vmhx:not(._checked) .check-box-icon.svelte-y5vmhx{display:none}.check-box-text.svelte-y5vmhx.svelte-y5vmhx{margin-left:0.5em}");
+	append_styles(target, "svelte-o1ztcf", ".check-boxes.svelte-o1ztcf.svelte-o1ztcf{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.check-box.svelte-o1ztcf.svelte-o1ztcf{display:flex;align-items:center;position:relative;cursor:pointer}.check-box-input.svelte-o1ztcf.svelte-o1ztcf{width:0;height:0;margin:0}.check-box-check.svelte-o1ztcf.svelte-o1ztcf{display:inline-flex;background-color:var(--color-main);width:var(--size);height:var(--size);border-radius:calc(var(--size) / 4);justify-content:center;align-items:center;flex:none}.check-box-icon.svelte-o1ztcf.svelte-o1ztcf{display:inline-block;--icon-size:calc(var(--size) * 3 / 4);width:var(--icon-size);height:var(--icon-size)}.check-box-icon.svelte-o1ztcf.svelte-o1ztcf: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:var(--color-sub)}.check-box-check._checked.svelte-o1ztcf.svelte-o1ztcf{background-color:var(--color-main-active)}.check-box-check._checked.svelte-o1ztcf .check-box-icon.svelte-o1ztcf:after{border-color:var(--color-sub-active)}.check-box-text.svelte-o1ztcf.svelte-o1ztcf{margin-left:0.5em}");
 }
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
-	child_ctx[15] = i;
+	child_ctx[15] = list[i];
+	child_ctx[17] = i;
 	return child_ctx;
 }
 
-// (68:2) {#each _options as option, i}
+// (94:2) {#each _options as option, i}
 function create_each_block$2(ctx) {
 	let label;
 	let input;
@@ -6252,7 +6317,7 @@ function create_each_block$2(ctx) {
 	let span1_class_value;
 	let t1;
 	let span2;
-	let t2_value = /*option*/ ctx[13] + "";
+	let t2_value = /*option*/ ctx[15] + "";
 	let t2;
 	let t3;
 	let mounted;
@@ -6269,20 +6334,20 @@ function create_each_block$2(ctx) {
 			span2 = element("span");
 			t2 = text(t2_value);
 			t3 = space();
-			attr(input, "class", "check-box-input svelte-y5vmhx");
+			attr(input, "class", "check-box-input svelte-o1ztcf");
 			attr(input, "type", "checkbox");
 			attr(input, "name", /*name*/ ctx[0]);
-			input.checked = input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[15]];
-			attr(span0, "class", "check-box-icon svelte-y5vmhx");
+			input.checked = input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[17]];
+			attr(span0, "class", "check-box-icon svelte-o1ztcf");
 
-			attr(span1, "class", span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[15]]
+			attr(span1, "class", span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[17]]
 			? ' _checked'
-			: ''}`) + " svelte-y5vmhx"));
+			: ''}`) + " svelte-o1ztcf"));
 
-			attr(span1, "style", /*_buttonStyle*/ ctx[5]);
-			attr(span2, "class", "check-box-text svelte-y5vmhx");
-			attr(span2, "style", /*textStyle*/ ctx[2]);
-			attr(label, "class", "check-box svelte-y5vmhx");
+			attr(span1, "style", /*styleVariables*/ ctx[5]);
+			attr(span2, "class", "check-box-text svelte-o1ztcf");
+			attr(span2, "style", /*_textStyle*/ ctx[2]);
+			attr(label, "class", "check-box svelte-o1ztcf");
 		},
 		m(target, anchor) {
 			insert(target, label, anchor);
@@ -6296,7 +6361,7 @@ function create_each_block$2(ctx) {
 			append(label, t3);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[15]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[17]));
 				mounted = true;
 			}
 		},
@@ -6307,24 +6372,24 @@ function create_each_block$2(ctx) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*isCheckedArray*/ 16 && input_checked_value !== (input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[15]])) {
+			if (dirty & /*isCheckedArray*/ 16 && input_checked_value !== (input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[17]])) {
 				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*isCheckedArray*/ 16 && span1_class_value !== (span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[15]]
+			if (dirty & /*isCheckedArray*/ 16 && span1_class_value !== (span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[17]]
 			? ' _checked'
-			: ''}`) + " svelte-y5vmhx"))) {
+			: ''}`) + " svelte-o1ztcf"))) {
 				attr(span1, "class", span1_class_value);
 			}
 
-			if (dirty & /*_buttonStyle*/ 32) {
-				attr(span1, "style", /*_buttonStyle*/ ctx[5]);
+			if (dirty & /*styleVariables*/ 32) {
+				attr(span1, "style", /*styleVariables*/ ctx[5]);
 			}
 
-			if (dirty & /*_options*/ 8 && t2_value !== (t2_value = /*option*/ ctx[13] + "")) set_data(t2, t2_value);
+			if (dirty & /*_options*/ 8 && t2_value !== (t2_value = /*option*/ ctx[15] + "")) set_data(t2, t2_value);
 
-			if (dirty & /*textStyle*/ 4) {
-				attr(span2, "style", /*textStyle*/ ctx[2]);
+			if (dirty & /*_textStyle*/ 4) {
+				attr(span2, "style", /*_textStyle*/ ctx[2]);
 			}
 		},
 		d(detaching) {
@@ -6352,8 +6417,8 @@ function create_fragment$8(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "check-boxes svelte-y5vmhx");
-			attr(div, "style", /*layoutStyle*/ ctx[1]);
+			attr(div, "class", "check-boxes svelte-o1ztcf");
+			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -6363,7 +6428,7 @@ function create_fragment$8(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*textStyle, _options, isCheckedArray, _buttonStyle, name, handleChange*/ 189) {
+			if (dirty & /*_textStyle, _options, isCheckedArray, styleVariables, name, handleChange*/ 189) {
 				each_value = /*_options*/ ctx[3];
 				let i;
 
@@ -6386,8 +6451,8 @@ function create_fragment$8(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty & /*layoutStyle*/ 2) {
-				attr(div, "style", /*layoutStyle*/ ctx[1]);
+			if (dirty & /*_layoutStyle*/ 2) {
+				attr(div, "style", /*_layoutStyle*/ ctx[1]);
 			}
 		},
 		i: noop,
@@ -6401,21 +6466,17 @@ function create_fragment$8(ctx) {
 
 function instance$8($$self, $$props, $$invalidate) {
 	let _options;
-	let _buttonStyle;
+	let styleVariables;
 	let isCheckedArray;
 	let $value;
 	let { name = '' } = $$props;
 	let { options = 'チェックボックス1,チェックボックス2,チェックボックス3' } = $$props;
 	let { required = false } = $$props;
-	let { layoutStyle = 'flex-direction: column; gap: 0px;' } = $$props;
-	let { textStyle = 'color: #333; font-size: 12px;' } = $$props;
-
-	let { buttonStyle = {
-		size: '16px',
-		colorActive: '#2aab9f',
-		colorInactive: 'rgba(0, 16, 14, 0.06)'
-	} } = $$props;
-
+	let { _layoutStyle = 'flex-direction: column; gap: 0px;' } = $$props;
+	let { _textStyle = 'color: #333; font-size: 12px;' } = $$props;
+	let { buttonSize = '16px' } = $$props;
+	let { buttonColor = { main: '#f0f1f1', sub: '#f0f1f1' } } = $$props;
+	let { buttonColorActive = { main: '#2aab9f', sub: '#fff' } } = $$props;
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -6428,7 +6489,7 @@ function instance$8($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(11, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(13, $value = value));
 
 	const handleChange = index => event => {
 		if (isCheckedArray[index] !== event.target.checked) {
@@ -6443,9 +6504,11 @@ function instance$8($$self, $$props, $$invalidate) {
 		if ('name' in $$props) $$invalidate(0, name = $$props.name);
 		if ('options' in $$props) $$invalidate(8, options = $$props.options);
 		if ('required' in $$props) $$invalidate(9, required = $$props.required);
-		if ('layoutStyle' in $$props) $$invalidate(1, layoutStyle = $$props.layoutStyle);
-		if ('textStyle' in $$props) $$invalidate(2, textStyle = $$props.textStyle);
-		if ('buttonStyle' in $$props) $$invalidate(10, buttonStyle = $$props.buttonStyle);
+		if ('_layoutStyle' in $$props) $$invalidate(1, _layoutStyle = $$props._layoutStyle);
+		if ('_textStyle' in $$props) $$invalidate(2, _textStyle = $$props._textStyle);
+		if ('buttonSize' in $$props) $$invalidate(10, buttonSize = $$props.buttonSize);
+		if ('buttonColor' in $$props) $$invalidate(11, buttonColor = $$props.buttonColor);
+		if ('buttonColorActive' in $$props) $$invalidate(12, buttonColorActive = $$props.buttonColorActive);
 	};
 
 	$$self.$$.update = () => {
@@ -6453,11 +6516,19 @@ function instance$8($$self, $$props, $$invalidate) {
 			$$invalidate(3, _options = options.split(','));
 		}
 
-		if ($$self.$$.dirty & /*buttonStyle*/ 1024) {
-			$$invalidate(5, _buttonStyle = `--size: ${buttonStyle.size}; --color-active: ${buttonStyle.colorActive}; --color-inactive: ${buttonStyle.colorInactive}`);
+		if ($$self.$$.dirty & /*buttonColor, buttonColorActive, buttonSize*/ 7168) {
+			$$invalidate(5, styleVariables = (() => {
+				return stringifyStyleObj({
+					'--color-main': buttonColor.main,
+					'--color-sub': buttonColor.sub,
+					'--color-main-active': buttonColorActive.main,
+					'--color-sub-active': buttonColorActive.sub,
+					'--size': buttonSize
+				});
+			})());
 		}
 
-		if ($$self.$$.dirty & /*$value, _options*/ 2056) {
+		if ($$self.$$.dirty & /*$value, _options*/ 8200) {
 			$$invalidate(4, isCheckedArray = (() => {
 				const checkedSet = new Set($value);
 				return _options.map(option => checkedSet.has(option));
@@ -6467,16 +6538,18 @@ function instance$8($$self, $$props, $$invalidate) {
 
 	return [
 		name,
-		layoutStyle,
-		textStyle,
+		_layoutStyle,
+		_textStyle,
 		_options,
 		isCheckedArray,
-		_buttonStyle,
+		styleVariables,
 		value,
 		handleChange,
 		options,
 		required,
-		buttonStyle,
+		buttonSize,
+		buttonColor,
+		buttonColorActive,
 		$value
 	];
 }
@@ -6495,9 +6568,11 @@ class FormCheckBoxes extends SvelteComponent {
 				name: 0,
 				options: 8,
 				required: 9,
-				layoutStyle: 1,
-				textStyle: 2,
-				buttonStyle: 10
+				_layoutStyle: 1,
+				_textStyle: 2,
+				buttonSize: 10,
+				buttonColor: 11,
+				buttonColorActive: 12
 			},
 			add_css$8
 		);
@@ -8224,4 +8299,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, Countdown, Cursors, DefaultEdgePosition, DefaultFormButtonStyle, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonsNumber, 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, destroyAction, destroyed, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, variables, widget };
+export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, Countdown, Cursors, DefaultEdgePosition, DefaultFormButtonColor, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonsNumber, 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, destroyAction, destroyed, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, variables, widget };