@plaidev/karte-action-sdk 1.1.213 → 1.1.216

package/dist/hydrate/index.es.js

@@ -1756,11 +1756,7 @@ function createModal(App, options = {
     context: { api_key: '' },
 }) {
     let app = null;
-    const data = {
-        ...options.props,
-        ...options.variables,
-        ...getVariables(),
-    };
+    const data = getVariables();
     const actionProps = {
         send: options.send,
         publish: options.publish,
@@ -2043,21 +2039,14 @@ async function runScript$1(options = {
 }) {
     if (!options.onCreate)
         return;
-    let data = {
-        ...options.props,
-        ...options.variables,
-        ...getVariables(),
-    };
+    let data = getVariables();
     initialize({ send: options.send, initialState: data.initial_state });
     initActionTable(options.localVariablesQuery);
     const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key);
     if (!success)
         return;
     // Action Tableの取得結果を反映する
-    data = {
-        ...data,
-        ...getVariables(),
-    };
+    data = getVariables();
     const actionProps = {
         send: options.send,
         publish: options.publish,
@@ -2158,11 +2147,11 @@ function create(App, options = {
     karteTemplate: {},
     context: { api_key: '' },
 }) {
-    const data = {
+    setVariables({
         ...options.props,
         ...options.variables,
-        ...getVariables(),
-    };
+    });
+    const data = getVariables();
     const actionProps = {
         send: options.send,
         publish: options.publish,
@@ -2924,6 +2913,7 @@ class StateItem extends SvelteComponent {
 	}
 }
 
+const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
 function isEmpty(value) {
     if (Array.isArray(value)) {
         return value.length === 0;
@@ -3043,6 +3033,9 @@ function submit() {
         const identifyFormData$1 = get(identifyFormData);
         const values = formDataToEventValues(campaignId, formData$1);
         const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
+        if (Object.keys(identifyValues).length > 0) {
+            identifyValues['user_id'] = getVariables()?.[USER_ID_VARIABLE_NAME];
+        }
         return { values, identifyValues };
     }
     return {};
@@ -7017,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;
@@ -8142,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) {
@@ -8151,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] + "";
@@ -8177,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) {
@@ -8240,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);
@@ -8315,7 +8308,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		return [
 			...buttonStyle.split(';'),
 			`font-family:${font}`,
-			...isActive ? buttonActiveStyle : []
+			...isActive ? buttonActiveStyle.split(';') : []
 		].join(';');
 	}
 
@@ -8588,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) {
@@ -8619,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);
@@ -8638,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) {
@@ -8654,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,
@@ -8675,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 = {
@@ -8687,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;
@@ -8720,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);
@@ -8746,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);
@@ -8765,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,
@@ -8784,7 +8784,8 @@ function instance$d($$self, $$props, $$invalidate) {
 		_errorStyle,
 		font,
 		_textStyle,
-		_placeholderStyle
+		_placeholderStyle,
+		$isValid
 	];
 }
 

package/dist/index.es.js

@@ -1792,11 +1792,7 @@ function createModal(App, options = {
     context: { api_key: '' },
 }) {
     let app = null;
-    const data = {
-        ...options.props,
-        ...options.variables,
-        ...getVariables(),
-    };
+    const data = getVariables();
     const actionProps = {
         send: options.send,
         publish: options.publish,
@@ -2102,21 +2098,14 @@ async function runScript$1(options = {
 }) {
     if (!options.onCreate)
         return;
-    let data = {
-        ...options.props,
-        ...options.variables,
-        ...getVariables(),
-    };
+    let data = getVariables();
     initialize({ send: options.send, initialState: data.initial_state });
     initActionTable(options.localVariablesQuery);
     const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key);
     if (!success)
         return;
     // Action Tableの取得結果を反映する
-    data = {
-        ...data,
-        ...getVariables(),
-    };
+    data = getVariables();
     const actionProps = {
         send: options.send,
         publish: options.publish,
@@ -2217,11 +2206,11 @@ function create(App, options = {
     karteTemplate: {},
     context: { api_key: '' },
 }) {
-    const data = {
+    setVariables({
         ...options.props,
         ...options.variables,
-        ...getVariables(),
-    };
+    });
+    const data = getVariables();
     const actionProps = {
         send: options.send,
         publish: options.publish,
@@ -2948,6 +2937,7 @@ class StateItem extends SvelteComponent {
 	}
 }
 
+const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
 function isEmpty(value) {
     if (Array.isArray(value)) {
         return value.length === 0;
@@ -3067,6 +3057,9 @@ function submit() {
         const identifyFormData$1 = get(identifyFormData);
         const values = formDataToEventValues(campaignId, formData$1);
         const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
+        if (Object.keys(identifyValues).length > 0) {
+            identifyValues['user_id'] = getVariables()?.[USER_ID_VARIABLE_NAME];
+        }
         return { values, identifyValues };
     }
     return {};
@@ -6771,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;
@@ -7785,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) {
@@ -7794,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] + "";
@@ -7809,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) {
@@ -7858,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);
@@ -7933,7 +7926,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		return [
 			...buttonStyle.split(';'),
 			`font-family:${font}`,
-			...isActive ? buttonActiveStyle : []
+			...isActive ? buttonActiveStyle.split(';') : []
 		].join(';');
 	}
 
@@ -8181,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) {
@@ -8195,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);
@@ -8214,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) {
@@ -8230,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,
@@ -8251,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 = {
@@ -8263,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;
@@ -8296,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);
@@ -8322,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);
@@ -8341,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,
@@ -8360,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.213",
+  "version": "1.1.216",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",