@plaidev/karte-action-sdk 1.1.214 → 1.1.218

package/dist/hydrate/index.es.js

@@ -3097,7 +3097,7 @@ const runScript = (handlerName) => () => {
 const submitForm = (to) => () => {
     const { values, identifyValues } = submit();
     send_event('_answer_question', values);
-    if (Object.keys(identifyValues).length > 0) {
+    if (Object.keys(identifyValues ?? {}).length > 0) {
         send_event('identify', identifyValues);
     }
     _moveTo(to);
@@ -3819,7 +3819,7 @@ function add_css$s(target) {
 	append_styles(target, "svelte-fsihgx", ".modal.svelte-fsihgx{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-fsihgx > .button{flex:auto;display:flex}.close.svelte-fsihgx{position:absolute;top:0;right:0}.close.svelte-fsihgx > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-fsihgx > .button:hover{transform:rotate(90deg)}.modal-content.svelte-fsihgx{flex:auto;display:flex;justify-content:center;align-items:center;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}@media screen and (min-width: 641px){.modal-bp.svelte-fsihgx{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc) !important;margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-fsihgx{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp) !important;margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 
-// (265:0) {:else}
+// (275:0) {:else}
 function create_else_block$3(ctx) {
 	let backgroundoverlay;
 	let current;
@@ -3866,7 +3866,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (254:24) 
+// (264:24) 
 function create_if_block_3(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -3940,7 +3940,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (252:0) {#if isPreview()}
+// (262:0) {#if isPreview()}
 function create_if_block_2(ctx) {
 	return {
 		c: noop,
@@ -3953,7 +3953,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (268:0) {#if visible}
+// (278:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let button;
@@ -4048,7 +4048,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (281:6) {#if closable}
+// (291:6) {#if closable}
 function create_if_block_1$1(ctx) {
 	let div;
 	let button;
@@ -4120,7 +4120,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (283:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
+// (293:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -4177,7 +4177,7 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (280:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+// (290:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
 function create_default_slot$6(ctx) {
 	let t;
 	let div;
@@ -7010,7 +7010,7 @@ function instance$j($$self, $$props, $$invalidate) {
 	let $value;
 	let { name = '' } = $$props;
 	let { placeholder = '回答を入力してください' } = $$props;
-	let { required = true } = $$props;
+	let { required = false } = $$props;
 	let { _style = '' } = $$props;
 	let { _focusStyle = 'border-width: 2px; border-color: #2aab9f; border-style: solid' } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -8135,7 +8135,7 @@ class FormCheckBoxes extends SvelteComponent {
 /* src/components/FormRatingButtonsNumber.svelte generated by Svelte v3.53.1 */
 
 function add_css$e(target) {
-	append_styles(target, "svelte-18pfy31", ".rating-buttons.svelte-18pfy31{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-18pfy31{cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s, box-shadow 0.2s;appearance:none;background:none;border:none;margin:0;padding:0}");
+	append_styles(target, "svelte-9idbf1", ".rating-buttons.svelte-9idbf1{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-9idbf1{cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s, box-shadow 0.2s;appearance:none;background:none;border:none;margin:0;padding:0}");
 }
 
 function get_each_context$2(ctx, list, i) {
@@ -8144,7 +8144,7 @@ function get_each_context$2(ctx, list, i) {
 	return child_ctx;
 }
 
-// (60:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
+// (64:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
 function create_each_block$2(ctx) {
 	let button;
 	let t0_value = /*i*/ ctx[12] + "";
@@ -8170,7 +8170,7 @@ function create_each_block$2(ctx) {
 			this.h();
 		},
 		h() {
-			attr(button, "class", "rating-button svelte-18pfy31");
+			attr(button, "class", "rating-button svelte-9idbf1");
 			attr(button, "style", button_style_value = /*getTextButtonStyle*/ ctx[4](/*i*/ ctx[12] === /*_value*/ ctx[1]));
 		},
 		m(target, anchor) {
@@ -8233,7 +8233,7 @@ function create_fragment$f(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "rating-buttons svelte-18pfy31");
+			attr(div, "class", "rating-buttons svelte-9idbf1");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -8308,7 +8308,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		return [
 			...buttonStyle.split(';'),
 			`font-family:${font}`,
-			...isActive ? buttonActiveStyle : []
+			...isActive ? buttonActiveStyle.split(';') : []
 		].join(';');
 	}
 
@@ -8581,7 +8581,7 @@ class FormRatingButtonsFace extends SvelteComponent {
 /* src/components/FormIdentifyInput.svelte generated by Svelte v3.53.1 */
 
 function add_css$c(target) {
-	append_styles(target, "svelte-17a0wgl", ".input-wrapper.svelte-17a0wgl{display:flex;align-items:center;width:100%;height:100%}.input.svelte-17a0wgl{width:100%;height:100%;box-sizing:border-box;resize:none;appearance:none;background-color:#fff;border:solid 2px #ccc;border-radius:6px;padding:6px 10px 6px 10px;font-size:12px;line-height:1.5}.input.svelte-17a0wgl::placeholder{color:var(--placeholder-color)}.input.svelte-17a0wgl:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.input._error.svelte-17a0wgl{outline:none;border-width:var(--error-border-width) !important;border-color:var(--error-border-color) !important;border-style:var(--error-border-style) !important}");
+	append_styles(target, "svelte-f14zo5", ".input-wrapper.svelte-f14zo5{display:flex;align-items:center;width:100%;height:100%}.input.svelte-f14zo5{width:100%;height:100%;box-sizing:border-box;resize:none;appearance:none;background-color:#fff;border:solid 2px #ccc;border-radius:6px;padding:6px 10px 6px 10px;font-size:12px;line-height:1.5}.input.svelte-f14zo5::placeholder{color:var(--placeholder-color)}.input.svelte-f14zo5:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.input._error.svelte-f14zo5{outline:none;border-width:var(--error-border-width) !important;border-color:var(--error-border-color) !important;border-style:var(--error-border-style) !important}");
 }
 
 function create_fragment$d(ctx) {
@@ -8612,14 +8612,14 @@ function create_fragment$d(ctx) {
 			this.h();
 		},
 		h() {
-			attr(input, "class", input_class_value = "" + (null_to_empty(['input', /*$isValid*/ ctx[5] ? '' : '_error'].join(' ')) + " svelte-17a0wgl"));
+			attr(input, "class", input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-f14zo5"));
 			attr(input, "type", "text");
-			input.value = /*$value*/ ctx[4];
+			input.value = /*$value*/ ctx[2];
 			input.required = /*required*/ ctx[0];
 			attr(input, "placeholder", /*placeholder*/ ctx[1]);
-			attr(input, "style", /*style*/ ctx[3]);
-			attr(div, "class", "input-wrapper svelte-17a0wgl");
-			attr(div, "style", /*styleVariables*/ ctx[2]);
+			attr(input, "style", /*style*/ ctx[5]);
+			attr(div, "class", "input-wrapper svelte-f14zo5");
+			attr(div, "style", /*styleVariables*/ ctx[4]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -8631,12 +8631,12 @@ function create_fragment$d(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*$isValid*/ 32 && input_class_value !== (input_class_value = "" + (null_to_empty(['input', /*$isValid*/ ctx[5] ? '' : '_error'].join(' ')) + " svelte-17a0wgl"))) {
+			if (dirty & /*isValidForUI*/ 8 && input_class_value !== (input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-f14zo5"))) {
 				attr(input, "class", input_class_value);
 			}
 
-			if (dirty & /*$value*/ 16 && input.value !== /*$value*/ ctx[4]) {
-				input.value = /*$value*/ ctx[4];
+			if (dirty & /*$value*/ 4 && input.value !== /*$value*/ ctx[2]) {
+				input.value = /*$value*/ ctx[2];
 			}
 
 			if (dirty & /*required*/ 1) {
@@ -8647,12 +8647,12 @@ function create_fragment$d(ctx) {
 				attr(input, "placeholder", /*placeholder*/ ctx[1]);
 			}
 
-			if (dirty & /*style*/ 8) {
-				attr(input, "style", /*style*/ ctx[3]);
+			if (dirty & /*style*/ 32) {
+				attr(input, "style", /*style*/ ctx[5]);
 			}
 
-			if (dirty & /*styleVariables*/ 4) {
-				attr(div, "style", /*styleVariables*/ ctx[2]);
+			if (dirty & /*styleVariables*/ 16) {
+				attr(div, "style", /*styleVariables*/ ctx[4]);
 			}
 		},
 		i: noop,
@@ -8668,8 +8668,9 @@ function create_fragment$d(ctx) {
 function instance$d($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
-	let $value;
+	let isValidForUI;
 	let $isValid;
+	let $value;
 	let { field = 'email' } = $$props;
 
 	let { validation = {
@@ -8680,7 +8681,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		flags: ''
 	} } = $$props;
 
-	let { required = true } = $$props;
+	let { required = false } = $$props;
 	let { placeholder = 'メールアドレスを入力' } = $$props;
 	let { _style = '' } = $$props;
 	let { _focusStyle = 'border-width: 2px; border-color: #2aab9f; border-style: solid' } = $$props;
@@ -8713,8 +8714,8 @@ function instance$d($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(4, $value = value));
-	component_subscribe($$self, isValid, value => $$invalidate(5, $isValid = value));
+	component_subscribe($$self, value, value => $$invalidate(2, $value = value));
+	component_subscribe($$self, isValid, value => $$invalidate(17, $isValid = value));
 
 	function stringInputHandler(event) {
 		set_store_value(value, $value = event.target.value, $value);
@@ -8739,11 +8740,11 @@ function instance$d($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty & /*_style, _textStyle, font*/ 51200) {
-			$$invalidate(3, style = [..._style.split(';'), ..._textStyle.split(';'), `font-family:${font}`].join(';'));
+			$$invalidate(5, style = [..._style.split(';'), ..._textStyle.split(';'), `font-family:${font}`].join(';'));
 		}
 
 		if ($$self.$$.dirty & /*_focusStyle, _errorStyle, _placeholderStyle*/ 77824) {
-			$$invalidate(2, styleVariables = (() => {
+			$$invalidate(4, styleVariables = (() => {
 				const variables = {};
 				const focusStyleObj = parseStyle(_focusStyle);
 				const errorStyleObj = parseStyle(_errorStyle);
@@ -8758,15 +8759,21 @@ function instance$d($$self, $$props, $$invalidate) {
 				return stringifyStyleObj(variables);
 			})());
 		}
+
+		if ($$self.$$.dirty & /*$value, $isValid*/ 131076) {
+			$$invalidate(3, isValidForUI = (() => {
+				return $value === '' || $isValid;
+			})());
+		}
 	};
 
 	return [
 		required,
 		placeholder,
+		$value,
+		isValidForUI,
 		styleVariables,
 		style,
-		$value,
-		$isValid,
 		value,
 		isValid,
 		stringInputHandler,
@@ -8777,7 +8784,8 @@ function instance$d($$self, $$props, $$invalidate) {
 		_errorStyle,
 		font,
 		_textStyle,
-		_placeholderStyle
+		_placeholderStyle,
+		$isValid
 	];
 }
 

package/dist/index.es.js

@@ -3121,7 +3121,7 @@ const runScript = (handlerName) => () => {
 const submitForm = (to) => () => {
     const { values, identifyValues } = submit();
     send_event('_answer_question', values);
-    if (Object.keys(identifyValues).length > 0) {
+    if (Object.keys(identifyValues ?? {}).length > 0) {
         send_event('identify', identifyValues);
     }
     _moveTo(to);
@@ -3833,7 +3833,7 @@ function add_css$s(target) {
 	append_styles(target, "svelte-fsihgx", ".modal.svelte-fsihgx{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-fsihgx > .button{flex:auto;display:flex}.close.svelte-fsihgx{position:absolute;top:0;right:0}.close.svelte-fsihgx > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-fsihgx > .button:hover{transform:rotate(90deg)}.modal-content.svelte-fsihgx{flex:auto;display:flex;justify-content:center;align-items:center;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}@media screen and (min-width: 641px){.modal-bp.svelte-fsihgx{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc) !important;margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-fsihgx{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp) !important;margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 
-// (265:0) {:else}
+// (275:0) {:else}
 function create_else_block$3(ctx) {
 	let backgroundoverlay;
 	let current;
@@ -3877,7 +3877,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (254:24) 
+// (264:24) 
 function create_if_block_3(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -3946,7 +3946,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (252:0) {#if isPreview()}
+// (262:0) {#if isPreview()}
 function create_if_block_2(ctx) {
 	return {
 		c: noop,
@@ -3958,7 +3958,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (268:0) {#if visible}
+// (278:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let button;
@@ -4037,7 +4037,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (281:6) {#if closable}
+// (291:6) {#if closable}
 function create_if_block_1$1(ctx) {
 	let div;
 	let button;
@@ -4099,7 +4099,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (283:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
+// (293:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -4132,7 +4132,7 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (280:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+// (290:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
 function create_default_slot$6(ctx) {
 	let t;
 	let div;
@@ -6764,7 +6764,7 @@ function instance$j($$self, $$props, $$invalidate) {
 	let $value;
 	let { name = '' } = $$props;
 	let { placeholder = '回答を入力してください' } = $$props;
-	let { required = true } = $$props;
+	let { required = false } = $$props;
 	let { _style = '' } = $$props;
 	let { _focusStyle = 'border-width: 2px; border-color: #2aab9f; border-style: solid' } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -7778,7 +7778,7 @@ class FormCheckBoxes extends SvelteComponent {
 /* src/components/FormRatingButtonsNumber.svelte generated by Svelte v3.53.1 */
 
 function add_css$e(target) {
-	append_styles(target, "svelte-18pfy31", ".rating-buttons.svelte-18pfy31{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-18pfy31{cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s, box-shadow 0.2s;appearance:none;background:none;border:none;margin:0;padding:0}");
+	append_styles(target, "svelte-9idbf1", ".rating-buttons.svelte-9idbf1{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-9idbf1{cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s, box-shadow 0.2s;appearance:none;background:none;border:none;margin:0;padding:0}");
 }
 
 function get_each_context$2(ctx, list, i) {
@@ -7787,7 +7787,7 @@ function get_each_context$2(ctx, list, i) {
 	return child_ctx;
 }
 
-// (60:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
+// (64:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
 function create_each_block$2(ctx) {
 	let button;
 	let t0_value = /*i*/ ctx[12] + "";
@@ -7802,7 +7802,7 @@ function create_each_block$2(ctx) {
 			button = element("button");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(button, "class", "rating-button svelte-18pfy31");
+			attr(button, "class", "rating-button svelte-9idbf1");
 			attr(button, "style", button_style_value = /*getTextButtonStyle*/ ctx[4](/*i*/ ctx[12] === /*_value*/ ctx[1]));
 		},
 		m(target, anchor) {
@@ -7851,7 +7851,7 @@ function create_fragment$f(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "rating-buttons svelte-18pfy31");
+			attr(div, "class", "rating-buttons svelte-9idbf1");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -7926,7 +7926,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		return [
 			...buttonStyle.split(';'),
 			`font-family:${font}`,
-			...isActive ? buttonActiveStyle : []
+			...isActive ? buttonActiveStyle.split(';') : []
 		].join(';');
 	}
 
@@ -8174,7 +8174,7 @@ class FormRatingButtonsFace extends SvelteComponent {
 /* src/components/FormIdentifyInput.svelte generated by Svelte v3.53.1 */
 
 function add_css$c(target) {
-	append_styles(target, "svelte-17a0wgl", ".input-wrapper.svelte-17a0wgl{display:flex;align-items:center;width:100%;height:100%}.input.svelte-17a0wgl{width:100%;height:100%;box-sizing:border-box;resize:none;appearance:none;background-color:#fff;border:solid 2px #ccc;border-radius:6px;padding:6px 10px 6px 10px;font-size:12px;line-height:1.5}.input.svelte-17a0wgl::placeholder{color:var(--placeholder-color)}.input.svelte-17a0wgl:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.input._error.svelte-17a0wgl{outline:none;border-width:var(--error-border-width) !important;border-color:var(--error-border-color) !important;border-style:var(--error-border-style) !important}");
+	append_styles(target, "svelte-f14zo5", ".input-wrapper.svelte-f14zo5{display:flex;align-items:center;width:100%;height:100%}.input.svelte-f14zo5{width:100%;height:100%;box-sizing:border-box;resize:none;appearance:none;background-color:#fff;border:solid 2px #ccc;border-radius:6px;padding:6px 10px 6px 10px;font-size:12px;line-height:1.5}.input.svelte-f14zo5::placeholder{color:var(--placeholder-color)}.input.svelte-f14zo5:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.input._error.svelte-f14zo5{outline:none;border-width:var(--error-border-width) !important;border-color:var(--error-border-color) !important;border-style:var(--error-border-style) !important}");
 }
 
 function create_fragment$d(ctx) {
@@ -8188,14 +8188,14 @@ function create_fragment$d(ctx) {
 		c() {
 			div = element("div");
 			input = element("input");
-			attr(input, "class", input_class_value = "" + (null_to_empty(['input', /*$isValid*/ ctx[5] ? '' : '_error'].join(' ')) + " svelte-17a0wgl"));
+			attr(input, "class", input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-f14zo5"));
 			attr(input, "type", "text");
-			input.value = /*$value*/ ctx[4];
+			input.value = /*$value*/ ctx[2];
 			input.required = /*required*/ ctx[0];
 			attr(input, "placeholder", /*placeholder*/ ctx[1]);
-			attr(input, "style", /*style*/ ctx[3]);
-			attr(div, "class", "input-wrapper svelte-17a0wgl");
-			attr(div, "style", /*styleVariables*/ ctx[2]);
+			attr(input, "style", /*style*/ ctx[5]);
+			attr(div, "class", "input-wrapper svelte-f14zo5");
+			attr(div, "style", /*styleVariables*/ ctx[4]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -8207,12 +8207,12 @@ function create_fragment$d(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*$isValid*/ 32 && input_class_value !== (input_class_value = "" + (null_to_empty(['input', /*$isValid*/ ctx[5] ? '' : '_error'].join(' ')) + " svelte-17a0wgl"))) {
+			if (dirty & /*isValidForUI*/ 8 && input_class_value !== (input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-f14zo5"))) {
 				attr(input, "class", input_class_value);
 			}
 
-			if (dirty & /*$value*/ 16 && input.value !== /*$value*/ ctx[4]) {
-				input.value = /*$value*/ ctx[4];
+			if (dirty & /*$value*/ 4 && input.value !== /*$value*/ ctx[2]) {
+				input.value = /*$value*/ ctx[2];
 			}
 
 			if (dirty & /*required*/ 1) {
@@ -8223,12 +8223,12 @@ function create_fragment$d(ctx) {
 				attr(input, "placeholder", /*placeholder*/ ctx[1]);
 			}
 
-			if (dirty & /*style*/ 8) {
-				attr(input, "style", /*style*/ ctx[3]);
+			if (dirty & /*style*/ 32) {
+				attr(input, "style", /*style*/ ctx[5]);
 			}
 
-			if (dirty & /*styleVariables*/ 4) {
-				attr(div, "style", /*styleVariables*/ ctx[2]);
+			if (dirty & /*styleVariables*/ 16) {
+				attr(div, "style", /*styleVariables*/ ctx[4]);
 			}
 		},
 		i: noop,
@@ -8244,8 +8244,9 @@ function create_fragment$d(ctx) {
 function instance$d($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
-	let $value;
+	let isValidForUI;
 	let $isValid;
+	let $value;
 	let { field = 'email' } = $$props;
 
 	let { validation = {
@@ -8256,7 +8257,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		flags: ''
 	} } = $$props;
 
-	let { required = true } = $$props;
+	let { required = false } = $$props;
 	let { placeholder = 'メールアドレスを入力' } = $$props;
 	let { _style = '' } = $$props;
 	let { _focusStyle = 'border-width: 2px; border-color: #2aab9f; border-style: solid' } = $$props;
@@ -8289,8 +8290,8 @@ function instance$d($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(4, $value = value));
-	component_subscribe($$self, isValid, value => $$invalidate(5, $isValid = value));
+	component_subscribe($$self, value, value => $$invalidate(2, $value = value));
+	component_subscribe($$self, isValid, value => $$invalidate(17, $isValid = value));
 
 	function stringInputHandler(event) {
 		set_store_value(value, $value = event.target.value, $value);
@@ -8315,11 +8316,11 @@ function instance$d($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty & /*_style, _textStyle, font*/ 51200) {
-			$$invalidate(3, style = [..._style.split(';'), ..._textStyle.split(';'), `font-family:${font}`].join(';'));
+			$$invalidate(5, style = [..._style.split(';'), ..._textStyle.split(';'), `font-family:${font}`].join(';'));
 		}
 
 		if ($$self.$$.dirty & /*_focusStyle, _errorStyle, _placeholderStyle*/ 77824) {
-			$$invalidate(2, styleVariables = (() => {
+			$$invalidate(4, styleVariables = (() => {
 				const variables = {};
 				const focusStyleObj = parseStyle(_focusStyle);
 				const errorStyleObj = parseStyle(_errorStyle);
@@ -8334,15 +8335,21 @@ function instance$d($$self, $$props, $$invalidate) {
 				return stringifyStyleObj(variables);
 			})());
 		}
+
+		if ($$self.$$.dirty & /*$value, $isValid*/ 131076) {
+			$$invalidate(3, isValidForUI = (() => {
+				return $value === '' || $isValid;
+			})());
+		}
 	};
 
 	return [
 		required,
 		placeholder,
+		$value,
+		isValidForUI,
 		styleVariables,
 		style,
-		$value,
-		$isValid,
 		value,
 		isValid,
 		stringInputHandler,
@@ -8353,7 +8360,8 @@ function instance$d($$self, $$props, $$invalidate) {
 		_errorStyle,
 		font,
 		_textStyle,
-		_placeholderStyle
+		_placeholderStyle,
+		$isValid
 	];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.214",
+  "version": "1.1.218",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -56,7 +56,6 @@
   "devDependencies": {
     "@microsoft/api-documenter": "7.19.28",
     "@microsoft/api-extractor": "7.33.8",
-    "@plaidev/action-compiler": "workspace:*",
     "@rollup/plugin-alias": "^4.0.0",
     "@rollup/plugin-commonjs": "^23.0.1",
     "@rollup/plugin-json": "^5.0.0",
@@ -96,7 +95,14 @@
     "tsx": "^3.12.3",
     "typescript": "^4.7.4",
     "vitepress": "1.0.0-alpha.30",
-    "vitest": "latest"
+    "vitest": "latest",
+    "@plaidev/action-compiler": "0.4.231"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@rollup/plugin-image": "^3.0.2"
   },
   "scripts": {
     "dev": "tsx ./scripts/preview.ts",
@@ -125,11 +131,5 @@
     "test:update": "vitest -u",
     "coverage": "vitest run test --coverage",
     "icons:update": "tsx ./scripts/update-icons.ts && prettier -w ./src/icons.ts"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@rollup/plugin-image": "^3.0.2"
   }
-}
+}