@plaidev/karte-action-sdk 1.1.270-29228770.05dce6ca → 1.1.270-29270413.6a2b1dc5c

package/dist/hydrate/index.es.js

@@ -1450,54 +1450,6 @@ function showOnScroll(props, show$2 = NOOP, hide = NOOP) {
 function showOnTime(props, show$2 = NOOP) {
 	return props.show_on_time && props.show_on_time_count != null ? onTime(props.show_on_time_count * 1e3, () => show$2()) : null;
 }
-/** @internal */
-function and(fn, ...conditionFns) {
-	return checkAndDo((conditions, idx) => {
-		conditions[idx] = true;
-		return conditions.every((t) => t == null || t);
-	}, fn, ...conditionFns);
-}
-/** @internal */
-function or(fn, ...conditionFns) {
-	return checkAndDo((conditions, idx) => {
-		if (conditions.some((t) => t)) return conditions[idx];
-		conditions[idx] = true;
-		return true;
-	}, fn, ...conditionFns);
-}
-function checkAndDo(checkFn, fn, ...conditionFns) {
-	let initialized = false;
-	const checkBeforeInitialized = [];
-	let haveCondition = true;
-	const conditions = Array(conditionFns.length).fill(null);
-	const checkAndDos = Array(conditionFns.length).fill(() => {});
-	const cleanups = Array(conditionFns.length).fill(null);
-	const generageCheckAndDo = (idx) => () => {
-		if (!initialized) {
-			checkBeforeInitialized.push(idx);
-			return;
-		}
-		if (!haveCondition || !checkFn(conditions, idx)) return;
-		fn?.();
-	};
-	conditionFns.forEach((conditionFn, i) => {
-		const checkAndDo$1 = generageCheckAndDo(i);
-		checkAndDos[i] = checkAndDo$1;
-		const cleanup = conditionFn(checkAndDo$1);
-		cleanups[i] = cleanup;
-		if (cleanup != null) conditions[i] = false;
-	});
-	haveCondition = conditions.some((c) => c !== null);
-	const cleanupAll = () => {
-		cleanups.forEach((cleanup, i) => {
-			cleanup?.();
-			cleanups[i] = null;
-		});
-	};
-	initialized = true;
-	checkBeforeInitialized.forEach((i) => checkAndDos[i]());
-	return haveCondition ? cleanupAll : null;
-}
 
 //#endregion
 //#region src/collection.ts
@@ -1974,27 +1926,9 @@ function createModal(App, options = {
 		const trigger = event?.detail?.trigger ? event.detail.trigger : "none";
 		show$2(trigger);
 	};
-	const currying = (conditionFn, options$1) => (fn) => conditionFn(options$1.props, fn);
 	const autoShow = () => {
 		return show$2("auto");
 	};
-	const autoClose = () => {
-		return close$2("auto");
-	};
-	const listenCloseTrigger = () => {
-		const cleanups = [];
-		const curried = (fn) => hideOnScroll(options.props, fn, autoShow);
-		if (options.props.hide_and_condition) cleanups.push(and(autoClose, curried, currying(hideOnTime, options)) || NOOP);
-		else cleanups.push(or(autoClose, curried, currying(hideOnTime, options)) || NOOP);
-		return cleanups;
-	};
-	const listenShowTrigger = () => {
-		const cleanups = [];
-		const curried = (fn) => showOnScroll(options.props, fn, autoClose);
-		if (options.props.show_and_condition) cleanups.push(and(autoShow, curried, currying(showOnTime, options)) || NOOP);
-		else cleanups.push(or(autoShow, curried, currying(showOnTime, options)) || NOOP);
-		return cleanups;
-	};
 	initialize({
 		send: options.send,
 		initialState: data.initial_state
@@ -2742,7 +2676,7 @@ function formDataToEventValues$1(campaignId, formData$1) {
 		...answersMap
 	} };
 }
-function formDataToIdentifyEventValues(formData$1) {
+function formDataToIdentifyEventValues$1(formData$1) {
 	return Object.fromEntries(Object.entries(formData$1).map(([name, dataItem]) => {
 		const value = dataItem.value;
 		return [name, value];
@@ -2756,7 +2690,7 @@ function submit() {
 		const formData$1 = get(formData);
 		const identifyFormData$1 = get(identifyFormData);
 		const values = formDataToEventValues$1(campaignId, formData$1);
-		const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
+		const identifyValues = formDataToIdentifyEventValues$1(identifyFormData$1);
 		if (Object.keys(identifyValues).length > 0) identifyValues["user_id"] = getVariables()?.[USER_ID_VARIABLE_NAME];
 		return {
 			values,
@@ -3146,7 +3080,7 @@ const LAYOUT_COMPONENT_NAMES = [
 
 //#endregion
 //#region src/components/Header.svelte
-function create_if_block$20(ctx) {
+function create_if_block$21(ctx) {
 	let link;
 	return {
 		c() {
@@ -3177,9 +3111,9 @@ function create_if_block$20(ctx) {
 		}
 	};
 }
-function create_fragment$103(ctx) {
+function create_fragment$105(ctx) {
 	let if_block_anchor;
-	let if_block = ctx[0] && create_if_block$20(ctx);
+	let if_block = ctx[0] && create_if_block$21(ctx);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -3198,7 +3132,7 @@ function create_fragment$103(ctx) {
 		p(ctx$1, [dirty]) {
 			if (ctx$1[0]) if (if_block) if_block.p(ctx$1, dirty);
 			else {
-				if_block = create_if_block$20(ctx$1);
+				if_block = create_if_block$21(ctx$1);
 				if_block.c();
 				if_block.m(if_block_anchor.parentNode, if_block_anchor);
 			}
@@ -3215,7 +3149,7 @@ function create_fragment$103(ctx) {
 		}
 	};
 }
-function instance$103($$self, $$props, $$invalidate) {
+function instance$105($$self, $$props, $$invalidate) {
 	let $fonts;
 	component_subscribe($$self, fonts, ($$value) => $$invalidate(1, $fonts = $$value));
 	let googleFontUrl = "";
@@ -3233,7 +3167,7 @@ function instance$103($$self, $$props, $$invalidate) {
 var Header$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$103, create_fragment$103, safe_not_equal, {});
+		init(this, options, instance$105, create_fragment$105, safe_not_equal, {});
 	}
 };
 var Header_default$1 = Header$1;
@@ -3284,7 +3218,7 @@ const useBrandKit = () => {
 
 //#endregion
 //#region src/components/State.svelte
-function create_fragment$102(ctx) {
+function create_fragment$104(ctx) {
 	let header;
 	let t;
 	let current;
@@ -3331,7 +3265,7 @@ function create_fragment$102(ctx) {
 		}
 	};
 }
-function instance$102($$self, $$props, $$invalidate) {
+function instance$104($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { customBrandKit = void 0 } = $$props;
 	setContext("brandKit", getBrandKit(customBrandKit));
@@ -3348,7 +3282,7 @@ function instance$102($$self, $$props, $$invalidate) {
 var State$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$102, create_fragment$102, safe_not_equal, { customBrandKit: 0 });
+		init(this, options, instance$104, create_fragment$104, safe_not_equal, { customBrandKit: 0 });
 	}
 };
 var State_default = State$1;
@@ -3358,7 +3292,7 @@ var State_default = State$1;
 function add_css$63(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
-function create_if_block$19(ctx) {
+function create_if_block$20(ctx) {
 	let div;
 	let t;
 	let current;
@@ -3413,10 +3347,10 @@ function create_if_block$19(ctx) {
 		}
 	};
 }
-function create_fragment$101(ctx) {
+function create_fragment$103(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = ctx[1] === ctx[0] && create_if_block$19(ctx);
+	let if_block = ctx[1] === ctx[0] && create_if_block$20(ctx);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -3436,7 +3370,7 @@ function create_fragment$101(ctx) {
 				if_block.p(ctx$1, dirty);
 				if (dirty & 3) transition_in(if_block, 1);
 			} else {
-				if_block = create_if_block$19(ctx$1);
+				if_block = create_if_block$20(ctx$1);
 				if_block.c();
 				transition_in(if_block, 1);
 				if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -3468,7 +3402,7 @@ const STATE_ITEM_CONTEXT_KEY$1 = Symbol();
 function getStateItemContext() {
 	return getContext(STATE_ITEM_CONTEXT_KEY$1);
 }
-function instance$101($$self, $$props, $$invalidate) {
+function instance$103($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, ($$value) => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -3491,13 +3425,40 @@ function instance$101($$self, $$props, $$invalidate) {
 var StateItem$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$101, create_fragment$101, safe_not_equal, { path: 0 }, add_css$63);
+		init(this, options, instance$103, create_fragment$103, safe_not_equal, { path: 0 }, add_css$63);
 	}
 };
 var StateItem_default = StateItem$1;
 
 //#endregion
 //#region src/components-flex/form.ts
+const FORM_VALIDATION_TYPE = {
+	required: "必須",
+	email: "メールアドレス",
+	tel: "電話番号",
+	url: "URL",
+	minLength: "最小文字数",
+	maxLength: "最大文字数",
+	minCount: "最小個数",
+	maxCount: "最大個数",
+	pattern: "正規表現"
+};
+const FORM_VALIDATION_DEFAULT_ERROR_MESSAGES = {
+	required: `入力してください`,
+	minLength: `{minLength}文字以上で入力してください`,
+	maxLength: `{maxLength}文字以下で入力してください`,
+	minCount: `{minCount}個以上選択してください`,
+	maxCount: `{maxCount}個以下で選択してください`,
+	pattern: `正しい形式で入力してください`,
+	email: `正しいメールアドレスを入力してください`,
+	tel: `正しい電話番号を入力してください`,
+	url: `正しいURLを入力してください`
+};
+const FORM_VALIDATION_REGEX = {
+	email: "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]*\\.?[a-zA-Z0-9-]+\\.[a-zA-Z]{2,}$",
+	tel: "^0\\d{1,4}[-]?\\d{1,4}[-]?\\d{4}$",
+	url: "^http(s)?://.+$"
+};
 /**
 * @internal
 */
@@ -3506,6 +3467,7 @@ const formStore = writable({
 	states: {}
 });
 const formSubmittedValues = writable({});
+const formSubmittedIdentifyValues = writable({});
 /**
 * @public
 */
@@ -3524,7 +3486,6 @@ const getFormFieldState = (name) => {
 * @public
 */
 const getFormFieldValue = (name) => {
-	console.log("getFormFieldValue", getFormFieldState(name)?.value ?? void 0);
 	return getFormFieldState(name)?.value ?? void 0;
 };
 /**
@@ -3612,14 +3573,18 @@ const registerFormField = (schemas) => {
 					defaultValue: schema.defaultValue,
 					type: schema.type,
 					required: schema.required,
-					statePath: getState()
+					statePath: getState(),
+					isIdentify: schema.isIdentify,
+					validations: schema.validations
 				};
 				else resultSchemes.push({
 					name: schema.name,
 					defaultValue: schema.defaultValue,
 					type: schema.type,
 					required: schema.required,
-					statePath: getState()
+					statePath: getState(),
+					isIdentify: schema.isIdentify,
+					validations: schema.validations
 				});
 			});
 			return resultSchemes;
@@ -3627,21 +3592,23 @@ const registerFormField = (schemas) => {
 		states: (() => {
 			const states$1 = { ...updater.states };
 			const submittedValues = get(formSubmittedValues);
-			schemas.forEach((field) => {
-				if (!(field.name in states$1) && field.name) {
-					states$1[field.name] = {
-						isDirty: false,
-						isValid: false,
-						isTouched: false,
-						value: (() => {
-							if (submittedValues[field.name]) return submittedValues[field.name];
-							if (field.type === "checkboxes") return Array.isArray(field.defaultValue) ? field.defaultValue : [];
-							else return typeof field.defaultValue === "string" ? field.defaultValue : "";
-						})(),
-						errorMessage: null
-					};
-					console.log(`register ${field.name}`, JSON.stringify(states$1[field.name]));
-				}
+			const submittedIdentifyValues = get(formSubmittedIdentifyValues);
+			schemas.forEach((schema) => {
+				if (!(schema.name in states$1) && schema.name) states$1[schema.name] = {
+					isDirty: false,
+					isValid: false,
+					isTouched: false,
+					type: schema.type,
+					value: (() => {
+						if (schema.isIdentify) {
+							if (submittedIdentifyValues[schema.name]) return submittedIdentifyValues[schema.name].value;
+						} else if (submittedValues[schema.name]) return submittedValues[schema.name].value;
+						if (schema.type === "checkboxes") return Array.isArray(schema.defaultValue) ? schema.defaultValue : [];
+						else if (schema.type === "boolean") return schema.defaultValue ?? void 0;
+						else return typeof schema.defaultValue === "string" ? schema.defaultValue : "";
+					})(),
+					errorMessage: null
+				};
 			});
 			return states$1;
 		})()
@@ -3666,31 +3633,81 @@ const unregisterFormField = (fieldNames) => {
 	}));
 };
 const validateFormField = (schema, value) => {
-	const store = get(formStore);
 	if (schema.required) {
 		if (schema.type === "checkboxes") {
-			if (value.length === 0) return {
+			if (Array.isArray(value) && value.length === 0) return {
 				isValid: false,
-				error: "1つ以上選択してください"
+				error: FORM_VALIDATION_DEFAULT_ERROR_MESSAGES["required"]
 			};
 		} else if (typeof value !== "string" || value.trim() === "") return {
 			isValid: false,
-			error: "入力してください"
+			error: FORM_VALIDATION_DEFAULT_ERROR_MESSAGES["required"]
 		};
 	}
+	if (schema.validations && schema.validations.length > 0) for (const validation of schema.validations) {
+		const { type, number, errorMessage, regexp: regexp$1 } = validation;
+		if (type === "minLength" && !!number) {
+			if (typeof value === "string" && value.length < number) return {
+				isValid: false,
+				error: (errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]).replace("{minLength}", number.toString())
+			};
+		}
+		if (type === "maxLength" && !!number) {
+			if (typeof value === "string" && value.length > number) return {
+				isValid: false,
+				error: (errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]).replace("{maxLength}", number.toString())
+			};
+		}
+		if (type === "minCount" && !!number) {
+			if (Array.isArray(value) && value.length < number) return {
+				isValid: false,
+				error: (errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]).replace("{minCount}", number.toString())
+			};
+		}
+		if (type === "maxCount" && !!number) {
+			if (Array.isArray(value) && value.length > number) return {
+				isValid: false,
+				error: (errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]).replace("{maxCount}", number.toString())
+			};
+		}
+		if (type === "pattern" && !!regexp$1) {
+			if (typeof value === "string" && new RegExp(regexp$1).test(value) === false) return {
+				isValid: false,
+				error: errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]
+			};
+		}
+		if (type === "email") {
+			if (typeof value === "string" && new RegExp(regexp$1 || FORM_VALIDATION_REGEX.email).test(value) === false) return {
+				isValid: false,
+				error: errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]
+			};
+		}
+		if (type === "tel") {
+			if (typeof value === "string" && new RegExp(regexp$1 || FORM_VALIDATION_REGEX.tel).test(value) === false) return {
+				isValid: false,
+				error: errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]
+			};
+		}
+		if (type === "url") {
+			if (typeof value === "string" && new RegExp(regexp$1 || FORM_VALIDATION_REGEX.url).test(value) === false) return {
+				isValid: false,
+				error: errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]
+			};
+		}
+	}
 	return {
 		isValid: true,
 		error: void 0
 	};
 };
 function createAnswerValue(value) {
-	if (Array.isArray(value)) return { choices: value };
-	else if (typeof value === "string") return { free_answer: value };
+	if (value.type === "input" || value.type === "textarea") return { free_answer: String(value.value) };
+	else return { choices: Array.isArray(value) ? value : [value] };
 }
-function formDataToEventValues(campaignId, formData$1) {
+function formDataToEventValues(campaignId, values) {
 	const questions = [];
 	const answersMap = {};
-	Object.entries(formData$1).forEach(([name, value]) => {
+	Object.entries(values).forEach(([name, value]) => {
 		questions.push(name);
 		const answerKey = `question_${name}`;
 		answersMap[answerKey] = createAnswerValue(value);
@@ -3700,6 +3717,9 @@ function formDataToEventValues(campaignId, formData$1) {
 		...answersMap
 	} };
 }
+function formDataToIdentifyEventValues(values) {
+	return Object.fromEntries(Object.entries(values).map(([name, { value }]) => [name, value]));
+}
 /**
 * @public
 */
@@ -3727,13 +3747,30 @@ function onSubmitForm(fn) {
 			})()
 		}));
 		if (hasInvalid) return;
-		const values = getFormValues();
+		const newValues = {};
+		const newIdentifyValues = {};
+		currentStateSchemas.forEach((schema) => {
+			if (schema.isIdentify) newIdentifyValues[schema.name] = {
+				value: formData$1.states[schema.name]?.value,
+				type: schema.type
+			};
+			else newValues[schema.name] = {
+				value: formData$1.states[schema.name]?.value,
+				type: schema.type
+			};
+		});
 		formSubmittedValues.update((updater) => ({
 			...updater,
-			...values
+			...newValues
+		}));
+		if (Object.keys(newIdentifyValues).length > 0) formSubmittedIdentifyValues.update((updater) => ({
+			...updater,
+			...newIdentifyValues
 		}));
 		fn({
-			currentStateValues: formDataToEventValues(campaignId, values),
+			currentStateIdentifyValues: formDataToIdentifyEventValues(newIdentifyValues),
+			allIdentifyValues: formDataToIdentifyEventValues(get(formSubmittedIdentifyValues)),
+			currentStateValues: formDataToEventValues(campaignId, newValues),
 			allValues: formDataToEventValues(campaignId, get(formSubmittedValues))
 		});
 	}
@@ -3767,10 +3804,18 @@ const linkTo = (to, targetBlank = true, decode = false) => () => {
 		});
 		await sleep(450);
 	}
-	const isRequiredWindowOpen = target === "native" ? false : targetBlank;
-	if (isRequiredWindowOpen) window.open(decodedTo);
+	if (targetBlank) if (target === "native") {
+		const win = window;
+		const nativeMessageName = "open_url";
+		const nativeMessageData = {
+			url: decodedTo,
+			target: "_blank"
+		};
+		win.NativeBridge?.onReceivedMessage(nativeMessageName, JSON.stringify(nativeMessageData));
+		win.webkit?.messageHandlers[nativeMessageName]?.postMessage(nativeMessageData);
+	} else window.open(decodedTo, "_blank");
 	Promise.race([_send(), sleep(650)]).then(() => {
-		if (!isRequiredWindowOpen) location.href = decodedTo;
+		if (!targetBlank) location.href = decodedTo;
 	});
 };
 /** @internal */
@@ -3797,18 +3842,24 @@ const submitForm = (to) => () => {
 };
 /** @internal */
 const submitFormProgress = (to) => () => {
-	onSubmitForm(({ currentStateValues }) => {
+	onSubmitForm(({ currentStateValues, currentStateIdentifyValues }) => {
 		send_event("_answer_question_progress", {
 			...currentStateValues,
 			state: getState()
 		});
+		if (Object.keys(currentStateIdentifyValues).length > 0) send_event("identify", currentStateIdentifyValues);
+		console.log("currentStateValues", currentStateValues);
+		console.log("currentStateIdentifyValues", currentStateIdentifyValues);
 		_moveTo(to);
 	});
 };
 /** @internal */
 const submitFormFinal = (to) => () => {
-	onSubmitForm(({ allValues }) => {
+	onSubmitForm(({ allValues, allIdentifyValues }) => {
 		send_event("_answer_question", allValues);
+		if (Object.keys(allIdentifyValues).length > 0) send_event("identify", allIdentifyValues);
+		console.log("allValues", allValues);
+		console.log("allIdentifyValues", allIdentifyValues);
 		_moveTo(to);
 	});
 };
@@ -3931,7 +3982,7 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 function add_css$62(target) {
 	append_styles(target, "svelte-1d4fta", ".background.svelte-1d4fta{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
-function create_if_block$18(ctx) {
+function create_if_block$19(ctx) {
 	let div;
 	let div_class_value;
 	let mounted;
@@ -3966,9 +4017,9 @@ function create_if_block$18(ctx) {
 		}
 	};
 }
-function create_fragment$100(ctx) {
+function create_fragment$102(ctx) {
 	let if_block_anchor;
-	let if_block = ctx[0] && create_if_block$18(ctx);
+	let if_block = ctx[0] && create_if_block$19(ctx);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -3985,7 +4036,7 @@ function create_fragment$100(ctx) {
 		p(ctx$1, [dirty]) {
 			if (ctx$1[0]) if (if_block) if_block.p(ctx$1, dirty);
 			else {
-				if_block = create_if_block$18(ctx$1);
+				if_block = create_if_block$19(ctx$1);
 				if_block.c();
 				if_block.m(if_block_anchor.parentNode, if_block_anchor);
 			}
@@ -4002,7 +4053,7 @@ function create_fragment$100(ctx) {
 		}
 	};
 }
-function instance$100($$self, $$props, $$invalidate) {
+function instance$102($$self, $$props, $$invalidate) {
 	let { backgroundOverlay = false } = $$props;
 	let { class: className = void 0 } = $$props;
 	const dispatch = createEventDispatcher();
@@ -4021,7 +4072,7 @@ function instance$100($$self, $$props, $$invalidate) {
 var BackgroundOverlay$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$100, create_fragment$100, safe_not_equal, {
+		init(this, options, instance$102, create_fragment$102, safe_not_equal, {
 			backgroundOverlay: 0,
 			class: 1
 		}, add_css$62);
@@ -4061,7 +4112,7 @@ function checkStopPropagation(eventName, handler) {
 function add_css$61(target) {
 	append_styles(target, "svelte-60tjm2", ".button.svelte-60tjm2{display:block;text-decoration:none;color:inherit;border:none;background:none;margin:0;padding:0;text-align:inherit}.button.svelte-60tjm2:link,.button.svelte-60tjm2:visited,.button.svelte-60tjm2:active,.button.svelte-60tjm2:hover{color:inherit}");
 }
-function create_else_block$5(ctx) {
+function create_else_block$6(ctx) {
 	let button;
 	let current;
 	let mounted;
@@ -4135,7 +4186,6 @@ function create_else_block$5(ctx) {
 }
 function create_if_block_2$3(ctx) {
 	let div;
-	let div_class_value;
 	let current;
 	const default_slot_template = ctx[10].default;
 	const default_slot = create_slot(default_slot_template, ctx, ctx[9], null);
@@ -4156,7 +4206,7 @@ function create_if_block_2$3(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", div_class_value = null_to_empty(BUTTON_CLASS) + " svelte-60tjm2");
+			attr(div, "class", null_to_empty(BUTTON_CLASS) + " svelte-60tjm2");
 			attr(div, "style", ctx[1]);
 		},
 		m(target, anchor) {
@@ -4185,7 +4235,7 @@ function create_if_block_2$3(ctx) {
 		}
 	};
 }
-function create_if_block_1$5(ctx) {
+function create_if_block_1$6(ctx) {
 	let a;
 	let a_href_value;
 	let a_target_value;
@@ -4264,9 +4314,8 @@ function create_if_block_1$5(ctx) {
 		}
 	};
 }
-function create_if_block$17(ctx) {
+function create_if_block$18(ctx) {
 	let div;
-	let div_class_value;
 	let current;
 	const default_slot_template = ctx[10].default;
 	const default_slot = create_slot(default_slot_template, ctx, ctx[9], null);
@@ -4287,7 +4336,7 @@ function create_if_block$17(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", div_class_value = BUTTON_CLASS + " _disabled svelte-60tjm2");
+			attr(div, "class", BUTTON_CLASS + " _disabled svelte-60tjm2");
 			attr(div, "style", ctx[1]);
 		},
 		m(target, anchor) {
@@ -4316,16 +4365,16 @@ function create_if_block$17(ctx) {
 		}
 	};
 }
-function create_fragment$99(ctx) {
+function create_fragment$101(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
 	const if_block_creators = [
-		create_if_block$17,
-		create_if_block_1$5,
+		create_if_block$18,
+		create_if_block_1$6,
 		create_if_block_2$3,
-		create_else_block$5
+		create_else_block$6
 	];
 	const if_blocks = [];
 	function select_block_type(ctx$1, dirty) {
@@ -4385,7 +4434,7 @@ function create_fragment$99(ctx) {
 	};
 }
 const BUTTON_CLASS = "button";
-function instance$99($$self, $$props, $$invalidate) {
+function instance$101($$self, $$props, $$invalidate) {
 	let disabled;
 	let $valuesAreValid;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -4438,7 +4487,7 @@ function instance$99($$self, $$props, $$invalidate) {
 var Button$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$99, create_fragment$99, safe_not_equal, {
+		init(this, options, instance$101, create_fragment$101, safe_not_equal, {
 			onClick: 0,
 			eventName: 5,
 			eventValue: 6,
@@ -4454,7 +4503,7 @@ var Button_default$1 = Button$1;
 function add_css$60(target) {
 	append_styles(target, "svelte-1ijkyzl", ".modal.svelte-1ijkyzl{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1ijkyzl > .button{flex:auto;display:flex}.close.svelte-1ijkyzl{position:absolute;top:0;right:0}.close.svelte-1ijkyzl > .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-1ijkyzl > .button:hover{transform:rotate(90deg)}.modal-content.svelte-1ijkyzl{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-1ijkyzl{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);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-1ijkyzl{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);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
-function create_else_block$4(ctx) {
+function create_else_block$5(ctx) {
 	let backgroundoverlay;
 	let current;
 	backgroundoverlay = new BackgroundOverlay_default$1({ props: { backgroundOverlay: ctx[12] } });
@@ -4566,11 +4615,10 @@ function create_if_block_2$2(ctx) {
 		d: noop
 	};
 }
-function create_if_block$16(ctx) {
+function create_if_block$17(ctx) {
 	let div;
 	let button;
 	let div_class_value;
-	let div_style_value;
 	let div_intro;
 	let current;
 	button = new Button_default$1({ props: {
@@ -4602,7 +4650,7 @@ function create_if_block$16(ctx) {
 			attr(div, "class", div_class_value = null_to_empty(["modal", ctx[3] ? "modal-bp" : ""].join(" ")) + " svelte-1ijkyzl");
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
-			attr(div, "style", div_style_value = Array.from(ctx[23]).join(";"));
+			attr(div, "style", Array.from(ctx[23]).join(";"));
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -4646,7 +4694,7 @@ function create_if_block$16(ctx) {
 		}
 	};
 }
-function create_if_block_1$4(ctx) {
+function create_if_block_1$5(ctx) {
 	let div;
 	let button;
 	let current;
@@ -4765,7 +4813,7 @@ function create_default_slot$12(ctx) {
 	let t;
 	let div;
 	let current;
-	let if_block = ctx[21] && create_if_block_1$4(ctx);
+	let if_block = ctx[21] && create_if_block_1$5(ctx);
 	const default_slot_template = ctx[31].default;
 	const default_slot = create_slot(default_slot_template, ctx, ctx[33], null);
 	return {
@@ -4804,7 +4852,7 @@ function create_default_slot$12(ctx) {
 				if_block.p(ctx$1, dirty);
 				if (dirty[0] & 2097152) transition_in(if_block, 1);
 			} else {
-				if_block = create_if_block_1$4(ctx$1);
+				if_block = create_if_block_1$5(ctx$1);
 				if_block.c();
 				transition_in(if_block, 1);
 				if_block.m(t.parentNode, t);
@@ -4840,7 +4888,7 @@ function create_default_slot$12(ctx) {
 		}
 	};
 }
-function create_fragment$98(ctx) {
+function create_fragment$100(ctx) {
 	let show_if;
 	let current_block_type_index;
 	let if_block0;
@@ -4852,7 +4900,7 @@ function create_fragment$98(ctx) {
 	const if_block_creators = [
 		create_if_block_2$2,
 		create_if_block_3,
-		create_else_block$4
+		create_else_block$5
 	];
 	const if_blocks = [];
 	function select_block_type(ctx$1, dirty) {
@@ -4863,7 +4911,7 @@ function create_fragment$98(ctx) {
 	}
 	current_block_type_index = select_block_type(ctx, [-1, -1]);
 	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-	let if_block1 = ctx[16] && create_if_block$16(ctx);
+	let if_block1 = ctx[16] && create_if_block$17(ctx);
 	return {
 		c() {
 			if_block0.c();
@@ -4913,7 +4961,7 @@ function create_fragment$98(ctx) {
 				if_block1.p(ctx, dirty);
 				if (dirty[0] & 65536) transition_in(if_block1, 1);
 			} else {
-				if_block1 = create_if_block$16(ctx);
+				if_block1 = create_if_block$17(ctx);
 				if_block1.c();
 				transition_in(if_block1, 1);
 				if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
@@ -4947,7 +4995,7 @@ function create_fragment$98(ctx) {
 		}
 	};
 }
-function instance$98($$self, $$props, $$invalidate) {
+function instance$100($$self, $$props, $$invalidate) {
 	let close$2;
 	let closable;
 	let backgroundClick;
@@ -5159,7 +5207,7 @@ function instance$98($$self, $$props, $$invalidate) {
 var Modal$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$98, create_fragment$98, safe_not_equal, {
+		init(this, options, instance$100, create_fragment$100, safe_not_equal, {
 			onClick: 0,
 			clickEventName: 1,
 			clickEventValue: 2,
@@ -5181,7 +5229,7 @@ var Modal_default$1 = Modal$1;
 
 //#endregion
 //#region src/components/Grid.svelte
-function create_fragment$97(ctx) {
+function create_fragment$99(ctx) {
 	let div;
 	let current;
 	const default_slot_template = ctx[8].default;
@@ -5232,7 +5280,7 @@ function create_fragment$97(ctx) {
 		}
 	};
 }
-function instance$97($$self, $$props, $$invalidate) {
+function instance$99($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = "512px" } = $$props;
@@ -5277,7 +5325,7 @@ function instance$97($$self, $$props, $$invalidate) {
 var Grid = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$97, create_fragment$97, safe_not_equal, {
+		init(this, options, instance$99, create_fragment$99, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -5294,7 +5342,7 @@ var Grid_default = Grid;
 function add_css$59(target) {
 	append_styles(target, "svelte-n7kdl3", ".grid-item.svelte-n7kdl3{word-break:break-all;position:relative}.grid-item-inner.svelte-n7kdl3{position:absolute;inset:0}");
 }
-function create_fragment$96(ctx) {
+function create_fragment$98(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -5359,7 +5407,7 @@ function create_fragment$96(ctx) {
 	};
 }
 const GRID_ITEM_CONTEXT_KEY = "GRID_ITEM";
-function instance$96($$self, $$props, $$invalidate) {
+function instance$98($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -5408,7 +5456,7 @@ function instance$96($$self, $$props, $$invalidate) {
 var GridItem = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$96, create_fragment$96, safe_not_equal, {
+		init(this, options, instance$98, create_fragment$98, safe_not_equal, {
 			x1: 2,
 			x2: 3,
 			y1: 4,
@@ -5428,7 +5476,7 @@ function get_each_context$11(ctx, list, i) {
 	child_ctx[2] = list[i];
 	return child_ctx;
 }
-function create_else_block$3(ctx) {
+function create_else_block$4(ctx) {
 	let t_value = ctx[2] + "";
 	let t;
 	return {
@@ -5449,7 +5497,7 @@ function create_else_block$3(ctx) {
 		}
 	};
 }
-function create_if_block$15(ctx) {
+function create_if_block$16(ctx) {
 	let br;
 	return {
 		c() {
@@ -5473,8 +5521,8 @@ function create_each_block$11(ctx) {
 	function select_block_type(ctx$1, dirty) {
 		if (dirty & 1) show_if = null;
 		if (show_if == null) show_if = !!ctx$1[2].match(regexp);
-		if (show_if) return create_if_block$15;
-		return create_else_block$3;
+		if (show_if) return create_if_block$16;
+		return create_else_block$4;
 	}
 	let current_block_type = select_block_type(ctx, -1);
 	let if_block = current_block_type(ctx);
@@ -5508,7 +5556,7 @@ function create_each_block$11(ctx) {
 		}
 	};
 }
-function create_fragment$95(ctx) {
+function create_fragment$97(ctx) {
 	let each_1_anchor;
 	let each_value = ctx[0];
 	let each_blocks = [];
@@ -5552,7 +5600,7 @@ function create_fragment$95(ctx) {
 	};
 }
 const regexp = /(\r?\n)/;
-function instance$95($$self, $$props, $$invalidate) {
+function instance$97($$self, $$props, $$invalidate) {
 	let items;
 	let { text: text$1 = "サンプルSample" } = $$props;
 	$$self.$$set = ($$props$1) => {
@@ -5566,7 +5614,7 @@ function instance$95($$self, $$props, $$invalidate) {
 var RenderText = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$95, create_fragment$95, safe_not_equal, { text: 1 });
+		init(this, options, instance$97, create_fragment$97, safe_not_equal, { text: 1 });
 	}
 };
 var RenderText_default = RenderText;
@@ -5576,7 +5624,7 @@ var RenderText_default = RenderText;
 function add_css$58(target) {
 	append_styles(target, "svelte-9ixs0b", ".text-element-wrapper.svelte-9ixs0b.svelte-9ixs0b{position:relative;height:100%}.text-element.svelte-9ixs0b.svelte-9ixs0b{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;margin:0px;padding:0px;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden;font-size:12px;line-height:1.5}.text-link-element.svelte-9ixs0b.svelte-9ixs0b{text-decoration:none;color:inherit}.text-element-inner.svelte-9ixs0b.svelte-9ixs0b{width:100%;height:auto}.text-direction-vertical.svelte-9ixs0b.svelte-9ixs0b{writing-mode:vertical-rl}.text-direction-vertical.svelte-9ixs0b .text-element-inner.svelte-9ixs0b{width:auto;height:100%}.tooltip.svelte-9ixs0b.svelte-9ixs0b{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-9ixs0b.svelte-9ixs0b:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-9ixs0b.svelte-9ixs0b{display:block}.tooltip-error.svelte-9ixs0b.svelte-9ixs0b{background-color:#c00}.tooltip-error.svelte-9ixs0b.svelte-9ixs0b:before{border-bottom:7px solid #c00}");
 }
-function create_else_block$2(ctx) {
+function create_else_block$3(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -5636,7 +5684,7 @@ function create_else_block$2(ctx) {
 		}
 	};
 }
-function create_if_block$14(ctx) {
+function create_if_block$15(ctx) {
 	let a;
 	let div0;
 	let rendertext;
@@ -5744,12 +5792,12 @@ function create_if_block$14(ctx) {
 		}
 	};
 }
-function create_fragment$94(ctx) {
+function create_fragment$96(ctx) {
 	let div;
 	let current_block_type_index;
 	let if_block;
 	let current;
-	const if_block_creators = [create_if_block$14, create_else_block$2];
+	const if_block_creators = [create_if_block$15, create_else_block$3];
 	const if_blocks = [];
 	function select_block_type(ctx$1, dirty) {
 		if (ctx$1[2]) return 0;
@@ -5812,7 +5860,7 @@ function create_fragment$94(ctx) {
 		}
 	};
 }
-function instance$94($$self, $$props, $$invalidate) {
+function instance$96($$self, $$props, $$invalidate) {
 	let style;
 	let { text: text$1 = "テキストのコンテンツ" } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -5887,7 +5935,7 @@ function instance$94($$self, $$props, $$invalidate) {
 var TextElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$94, create_fragment$94, safe_not_equal, {
+		init(this, options, instance$96, create_fragment$96, safe_not_equal, {
 			text: 0,
 			font: 7,
 			_textStyle: 8,
@@ -5939,7 +5987,7 @@ function create_default_slot$11(ctx) {
 		}
 	};
 }
-function create_fragment$93(ctx) {
+function create_fragment$95(ctx) {
 	let div;
 	let button;
 	let current;
@@ -5997,7 +6045,7 @@ function create_fragment$93(ctx) {
 		}
 	};
 }
-function instance$93($$self, $$props, $$invalidate) {
+function instance$95($$self, $$props, $$invalidate) {
 	let style;
 	let { text: text$1 = "ボタンのラベル" } = $$props;
 	let { onClick = {
@@ -6037,7 +6085,7 @@ function instance$93($$self, $$props, $$invalidate) {
 var TextButtonElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$93, create_fragment$93, safe_not_equal, {
+		init(this, options, instance$95, create_fragment$95, safe_not_equal, {
 			text: 0,
 			onClick: 1,
 			eventName: 2,
@@ -6097,7 +6145,7 @@ function create_default_slot$10(ctx) {
 		}
 	};
 }
-function create_fragment$92(ctx) {
+function create_fragment$94(ctx) {
 	let div;
 	let button;
 	let div_class_value;
@@ -6157,7 +6205,7 @@ function create_fragment$92(ctx) {
 		}
 	};
 }
-function instance$92($$self, $$props, $$invalidate) {
+function instance$94($$self, $$props, $$invalidate) {
 	let { src = "" } = $$props;
 	let { alt = "画像の説明" } = $$props;
 	let { transport = false } = $$props;
@@ -6193,7 +6241,7 @@ function instance$92($$self, $$props, $$invalidate) {
 var ImageElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$92, create_fragment$92, safe_not_equal, {
+		init(this, options, instance$94, create_fragment$94, safe_not_equal, {
 			src: 0,
 			alt: 1,
 			transport: 2,
@@ -6212,7 +6260,7 @@ var ImageElement_default = ImageElement;
 function add_css$55(target) {
 	append_styles(target, "svelte-aquv6z", ".list.svelte-aquv6z{display:flex;width:100%;height:100%;overflow:hidden;border-width:0px;border-style:solid;border-color:#000000}");
 }
-function create_fragment$91(ctx) {
+function create_fragment$93(ctx) {
 	let div;
 	let current;
 	const default_slot_template = ctx[6].default;
@@ -6264,7 +6312,7 @@ function create_fragment$91(ctx) {
 	};
 }
 const LIST_CONTEXT_KEY = Symbol();
-function instance$91($$self, $$props, $$invalidate) {
+function instance$93($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = "vertical" } = $$props;
@@ -6325,7 +6373,7 @@ function instance$91($$self, $$props, $$invalidate) {
 var List$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$91, create_fragment$91, safe_not_equal, {
+		init(this, options, instance$93, create_fragment$93, safe_not_equal, {
 			direction: 1,
 			separator: 2,
 			background: 3,
@@ -6374,7 +6422,7 @@ function create_default_slot$9(ctx) {
 		}
 	};
 }
-function create_fragment$90(ctx) {
+function create_fragment$92(ctx) {
 	let div;
 	let button;
 	let current;
@@ -6437,15 +6485,13 @@ function create_fragment$90(ctx) {
 		}
 	};
 }
-function instance$90($$self, $$props, $$invalidate) {
+function instance$92($$self, $$props, $$invalidate) {
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { separator, background, direction, registerItem, unregisterItem } = getContext(LIST_CONTEXT_KEY);
 	let index = 0;
-	let length = 0;
 	const id = registerItem({ onMount({ index: _index, length: _length }) {
 		$$invalidate(4, index = _index);
-		length = _length;
 	} });
 	let { onClick = {
 		operation: "none",
@@ -6501,7 +6547,7 @@ function instance$90($$self, $$props, $$invalidate) {
 var ListItem$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$90, create_fragment$90, safe_not_equal, {
+		init(this, options, instance$92, create_fragment$92, safe_not_equal, {
 			onClick: 0,
 			clickEventName: 1,
 			_style: 2
@@ -6515,7 +6561,7 @@ var ListItem_default$1 = ListItem$1;
 function add_css$53(target) {
 	append_styles(target, "svelte-wocq4p", ".embed.svelte-wocq4p{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%}.embed.svelte-wocq4p iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
 }
-function create_fragment$89(ctx) {
+function create_fragment$91(ctx) {
 	let div;
 	return {
 		c() {
@@ -6550,7 +6596,7 @@ function create_fragment$89(ctx) {
 		}
 	};
 }
-function instance$89($$self, $$props, $$invalidate) {
+function instance$91($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = "" } = $$props;
 	$$self.$$set = ($$props$1) => {
@@ -6562,7 +6608,7 @@ function instance$89($$self, $$props, $$invalidate) {
 var EmbedElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$89, create_fragment$89, safe_not_equal, {
+		init(this, options, instance$91, create_fragment$91, safe_not_equal, {
 			code: 0,
 			_style: 1
 		}, add_css$53);
@@ -6575,7 +6621,7 @@ var EmbedElement_default = EmbedElement;
 function add_css$52(target) {
 	append_styles(target, "svelte-1fyqoy1", ".embed.svelte-1fyqoy1{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}.embed.svelte-1fyqoy1 iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
-function create_fragment$88(ctx) {
+function create_fragment$90(ctx) {
 	let div1;
 	let div0;
 	return {
@@ -6622,7 +6668,7 @@ function _bton(value) {
 function _setValue(obj, key, value) {
 	if (value) obj[key] = value;
 }
-function instance$88($$self, $$props, $$invalidate) {
+function instance$90($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, ($$value) => $$invalidate(31, $system = $$value));
 	let { videoId = "wt0OjOeX-JA" } = $$props;
@@ -6832,7 +6878,7 @@ function instance$88($$self, $$props, $$invalidate) {
 var MovieYouTubeElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$88, create_fragment$88, safe_not_equal, {
+		init(this, options, instance$90, create_fragment$90, safe_not_equal, {
 			videoId: 2,
 			sendEvent: 3,
 			autoplay: 4,
@@ -6868,7 +6914,7 @@ var MovieYouTubeElement_default = MovieYouTubeElement;
 function add_css$51(target) {
 	append_styles(target, "svelte-1fyqoy1", ".embed.svelte-1fyqoy1{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}.embed.svelte-1fyqoy1 iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
-function create_fragment$87(ctx) {
+function create_fragment$89(ctx) {
 	let div1;
 	let div0;
 	return {
@@ -6909,7 +6955,7 @@ function create_fragment$87(ctx) {
 		}
 	};
 }
-function instance$87($$self, $$props, $$invalidate) {
+function instance$89($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, ($$value) => $$invalidate(12, $system = $$value));
 	let { videoId = "201239468" } = $$props;
@@ -7019,7 +7065,7 @@ function instance$87($$self, $$props, $$invalidate) {
 var MovieVimeoElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$87, create_fragment$87, safe_not_equal, {
+		init(this, options, instance$89, create_fragment$89, safe_not_equal, {
 			videoId: 2,
 			sendEvent: 3,
 			autoplay: 4,
@@ -7036,7 +7082,7 @@ var MovieVimeoElement_default = MovieVimeoElement;
 function add_css$50(target) {
 	append_styles(target, "svelte-augwt8", ".textarea-wrapper.svelte-augwt8{display:flex;align-items:center;width:100%;height:100%}.textarea.svelte-augwt8{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}.textarea.svelte-augwt8::placeholder{color:var(--placeholder-color)}.textarea.svelte-augwt8:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}");
 }
-function create_fragment$86(ctx) {
+function create_fragment$88(ctx) {
 	let div;
 	let textarea;
 	let mounted;
@@ -7095,7 +7141,7 @@ function create_fragment$86(ctx) {
 		}
 	};
 }
-function instance$86($$self, $$props, $$invalidate) {
+function instance$88($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
 	let $value;
@@ -7168,7 +7214,7 @@ function instance$86($$self, $$props, $$invalidate) {
 var FormTextarea$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$86, create_fragment$86, safe_not_equal, {
+		init(this, options, instance$88, create_fragment$88, safe_not_equal, {
 			name: 7,
 			placeholder: 0,
 			required: 1,
@@ -7276,7 +7322,7 @@ function create_each_block$10(ctx) {
 		}
 	};
 }
-function create_fragment$85(ctx) {
+function create_fragment$87(ctx) {
 	let div;
 	let each_value = ctx[4];
 	let each_blocks = [];
@@ -7331,7 +7377,7 @@ function create_fragment$85(ctx) {
 		}
 	};
 }
-function instance$85($$self, $$props, $$invalidate) {
+function instance$87($$self, $$props, $$invalidate) {
 	let _options;
 	let buttonStyle;
 	let _value;
@@ -7413,7 +7459,7 @@ function instance$85($$self, $$props, $$invalidate) {
 var FormRadioButtons = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$85, create_fragment$85, safe_not_equal, {
+		init(this, options, instance$87, create_fragment$87, safe_not_equal, {
 			name: 0,
 			options: 9,
 			required: 10,
@@ -7439,7 +7485,7 @@ function get_each_context$9(ctx, list, i) {
 	child_ctx[21] = i;
 	return child_ctx;
 }
-function create_else_block$1(ctx) {
+function create_else_block$2(ctx) {
 	let t;
 	return {
 		c() {
@@ -7459,7 +7505,7 @@ function create_else_block$1(ctx) {
 		}
 	};
 }
-function create_if_block$13(ctx) {
+function create_if_block$14(ctx) {
 	let t_value = ctx[19] + "";
 	let t;
 	return {
@@ -7486,8 +7532,8 @@ function create_each_block$9(ctx) {
 	let option_value_value;
 	let option_selected_value;
 	function select_block_type(ctx$1, dirty) {
-		if (ctx$1[19]) return create_if_block$13;
-		return create_else_block$1;
+		if (ctx$1[19]) return create_if_block$14;
+		return create_else_block$2;
 	}
 	let current_block_type = select_block_type(ctx, -1);
 	let if_block = current_block_type(ctx);
@@ -7538,7 +7584,7 @@ function create_each_block$9(ctx) {
 		}
 	};
 }
-function create_fragment$84(ctx) {
+function create_fragment$86(ctx) {
 	let div1;
 	let select;
 	let t;
@@ -7623,7 +7669,7 @@ function create_fragment$84(ctx) {
 		}
 	};
 }
-function instance$84($$self, $$props, $$invalidate) {
+function instance$86($$self, $$props, $$invalidate) {
 	let _options;
 	let style;
 	let styleVariables;
@@ -7681,7 +7727,7 @@ function instance$84($$self, $$props, $$invalidate) {
 		if ($$self.$$.dirty & 116736) $: $$invalidate(2, styleVariables = (() => {
 			const variables$1 = {};
 			const focusStyleObj = parseStyle(_focusStyle);
-			const placeholderStyle = parseStyle(_placeholderStyle);
+			parseStyle(_placeholderStyle);
 			if (focusStyleObj["border-width"]) variables$1["--focus-border-width"] = focusStyleObj["border-width"];
 			if (focusStyleObj["border-color"]) variables$1["--focus-border-color"] = focusStyleObj["border-color"];
 			if (focusStyleObj["border-style"]) variables$1["--focus-border-style"] = focusStyleObj["border-style"];
@@ -7714,7 +7760,7 @@ function instance$84($$self, $$props, $$invalidate) {
 var FormSelect$1 = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$84, create_fragment$84, safe_not_equal, {
+		init(this, options, instance$86, create_fragment$86, safe_not_equal, {
 			name: 7,
 			options: 8,
 			placeholder: 0,
@@ -7844,7 +7890,7 @@ function create_each_block$8(ctx) {
 		}
 	};
 }
-function create_fragment$83(ctx) {
+function create_fragment$85(ctx) {
 	let div;
 	let each_value = ctx[3];
 	let each_blocks = [];
@@ -7899,7 +7945,7 @@ function create_fragment$83(ctx) {
 		}
 	};
 }
-function instance$83($$self, $$props, $$invalidate) {
+function instance$85($$self, $$props, $$invalidate) {
 	let _options;
 	let styleVariables;
 	let isCheckedArray;
@@ -7989,7 +8035,7 @@ function instance$83($$self, $$props, $$invalidate) {
 var FormCheckBoxes = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$83, create_fragment$83, safe_not_equal, {
+		init(this, options, instance$85, create_fragment$85, safe_not_equal, {
 			name: 0,
 			options: 9,
 			required: 10,
@@ -8067,7 +8113,7 @@ function create_each_block$7(ctx) {
 		}
 	};
 }
-function create_fragment$82(ctx) {
+function create_fragment$84(ctx) {
 	let div;
 	let each_value = [...Array(ctx[0]).keys()].map(ctx[12]);
 	let each_blocks = [];
@@ -8117,7 +8163,7 @@ function create_fragment$82(ctx) {
 		}
 	};
 }
-function instance$82($$self, $$props, $$invalidate) {
+function instance$84($$self, $$props, $$invalidate) {
 	let _value;
 	let $value;
 	let { name = "" } = $$props;
@@ -8181,7 +8227,7 @@ function instance$82($$self, $$props, $$invalidate) {
 var FormRatingButtonsNumber = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$82, create_fragment$82, safe_not_equal, {
+		init(this, options, instance$84, create_fragment$84, safe_not_equal, {
 			name: 6,
 			required: 7,
 			count: 0,
@@ -8209,7 +8255,6 @@ function create_each_block$6(ctx) {
 	let img;
 	let img_src_value;
 	let img_class_value;
-	let img_alt_value;
 	let t;
 	let mounted;
 	let dispose;
@@ -8238,7 +8283,7 @@ function create_each_block$6(ctx) {
 		h() {
 			if (!src_url_equal(img.src, img_src_value = ctx[2][ctx[10]])) attr(img, "src", img_src_value);
 			attr(img, "class", img_class_value = null_to_empty(`rating-button-image${ctx[10] === ctx[1] ? " _active" : ""}`) + " svelte-rjdxzu");
-			attr(img, "alt", img_alt_value = "rate" + ctx[10]);
+			attr(img, "alt", "rate" + ctx[10]);
 			attr(button, "class", "rating-button svelte-rjdxzu");
 			attr(button, "style", ctx[0]);
 		},
@@ -8263,7 +8308,7 @@ function create_each_block$6(ctx) {
 		}
 	};
 }
-function create_fragment$81(ctx) {
+function create_fragment$83(ctx) {
 	let div;
 	let each_value = [...Array(count).keys()].reverse().map(func);
 	let each_blocks = [];
@@ -8315,7 +8360,7 @@ function create_fragment$81(ctx) {
 }
 const count = 5;
 const func = (i) => i + 1;
-function instance$81($$self, $$props, $$invalidate) {
+function instance$83($$self, $$props, $$invalidate) {
 	let _value;
 	let buttonStyle;
 	let $value;
@@ -8367,7 +8412,7 @@ function instance$81($$self, $$props, $$invalidate) {
 var FormRatingButtonsFace = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$81, create_fragment$81, safe_not_equal, {
+		init(this, options, instance$83, create_fragment$83, safe_not_equal, {
 			name: 5,
 			required: 6,
 			size: 7
@@ -8381,7 +8426,7 @@ var FormRatingButtonsFace_default = FormRatingButtonsFace;
 function add_css$44(target) {
 	append_styles(target, "svelte-h8fqwx", ".input-wrapper.svelte-h8fqwx{display:flex;align-items:center;width:100%;height:100%}.input.svelte-h8fqwx{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-h8fqwx::placeholder{color:var(--placeholder-color)}.input.svelte-h8fqwx: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-h8fqwx{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$80(ctx) {
+function create_fragment$82(ctx) {
 	let div;
 	let input;
 	let input_class_value;
@@ -8443,7 +8488,7 @@ function create_fragment$80(ctx) {
 		}
 	};
 }
-function instance$80($$self, $$props, $$invalidate) {
+function instance$82($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
 	let isValidForUI;
@@ -8546,7 +8591,7 @@ function instance$80($$self, $$props, $$invalidate) {
 var FormIdentifyInput = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$80, create_fragment$80, safe_not_equal, {
+		init(this, options, instance$82, create_fragment$82, safe_not_equal, {
 			field: 9,
 			validation: 10,
 			required: 0,
@@ -8567,7 +8612,7 @@ var FormIdentifyInput_default = FormIdentifyInput;
 function add_css$43(target) {
 	append_styles(target, "svelte-152kveg", ".radio-buttons.svelte-152kveg{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-152kveg{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-152kveg{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-152kveg: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, 0.08),\n      0px 1px 4px -1px rgba(18, 160, 160, 0.24)}.radio-button-text.svelte-152kveg{margin-left:0.5em}");
 }
-function create_fragment$79(ctx) {
+function create_fragment$81(ctx) {
 	let div;
 	let label0;
 	let input0;
@@ -8698,7 +8743,7 @@ function create_fragment$79(ctx) {
 		}
 	};
 }
-function instance$79($$self, $$props, $$invalidate) {
+function instance$81($$self, $$props, $$invalidate) {
 	let buttonStyle;
 	let $value;
 	let { field = "subscription" } = $$props;
@@ -8771,7 +8816,7 @@ function instance$79($$self, $$props, $$invalidate) {
 var FormIdentifyChoices = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$79, create_fragment$79, safe_not_equal, {
+		init(this, options, instance$81, create_fragment$81, safe_not_equal, {
 			field: 6,
 			required: 7,
 			_layoutStyle: 0,
@@ -8796,7 +8841,7 @@ function get_each_context$5(ctx, list, i) {
 	child_ctx[63] = i;
 	return child_ctx;
 }
-function create_if_block_1$3(ctx) {
+function create_if_block_1$4(ctx) {
 	let div;
 	let button;
 	let svg;
@@ -8862,7 +8907,7 @@ function create_if_block_1$3(ctx) {
 		}
 	};
 }
-function create_if_block$12(ctx) {
+function create_if_block$13(ctx) {
 	let div;
 	let button;
 	let svg;
@@ -8987,7 +9032,7 @@ function create_each_block$5(ctx) {
 		}
 	};
 }
-function create_fragment$78(ctx) {
+function create_fragment$80(ctx) {
 	let div3;
 	let div1;
 	let div0;
@@ -8999,8 +9044,8 @@ function create_fragment$78(ctx) {
 	let current;
 	const default_slot_template = ctx[32].default;
 	const default_slot = create_slot(default_slot_template, ctx, ctx[31], null);
-	let if_block0 = ctx[12] && create_if_block_1$3(ctx);
-	let if_block1 = ctx[11] && create_if_block$12(ctx);
+	let if_block0 = ctx[12] && create_if_block_1$4(ctx);
+	let if_block1 = ctx[11] && create_if_block$13(ctx);
 	let each_value = ctx[1];
 	let each_blocks = [];
 	for (let i = 0; i < each_value.length; i += 1) each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
@@ -9088,7 +9133,7 @@ function create_fragment$78(ctx) {
 			if (!current || dirty[0] & 1) attr(div1, "style", ctx$1[0]);
 			if (ctx$1[12]) if (if_block0) if_block0.p(ctx$1, dirty);
 			else {
-				if_block0 = create_if_block_1$3(ctx$1);
+				if_block0 = create_if_block_1$4(ctx$1);
 				if_block0.c();
 				if_block0.m(div3, t1);
 			}
@@ -9098,7 +9143,7 @@ function create_fragment$78(ctx) {
 			}
 			if (ctx$1[11]) if (if_block1) if_block1.p(ctx$1, dirty);
 			else {
-				if_block1 = create_if_block$12(ctx$1);
+				if_block1 = create_if_block$13(ctx$1);
 				if_block1.c();
 				if_block1.m(div3, t2);
 			}
@@ -9151,7 +9196,7 @@ function calcPositionIndex(shift, index, length) {
 	else if (tmpPositionIndex < -(length - 1)) return tmpPositionIndex + length;
 	else return tmpPositionIndex;
 }
-function instance$78($$self, $$props, $$invalidate) {
+function instance$80($$self, $$props, $$invalidate) {
 	let slideStyle;
 	let slideClass;
 	let _loop;
@@ -9492,7 +9537,7 @@ background-color: ${i === currentSlideId ? navigationButton.colorActive : naviga
 var Slide = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$78, create_fragment$78, safe_not_equal, {
+		init(this, options, instance$80, create_fragment$80, safe_not_equal, {
 			loop: 18,
 			_style: 0,
 			nextButton: 19,
@@ -9517,7 +9562,7 @@ var Slide_default = Slide;
 function add_css$41(target) {
 	append_styles(target, "svelte-18y82pg", ".item.svelte-18y82pg{height:100%;flex:none;position:relative}.item.svelte-18y82pg img{user-select:none;-webkit-user-drag:none}.item-inner.svelte-18y82pg{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;cursor:default;overflow:hidden}");
 }
-function create_fragment$77(ctx) {
+function create_fragment$79(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -9580,7 +9625,7 @@ function create_fragment$77(ctx) {
 		}
 	};
 }
-function instance$77($$self, $$props, $$invalidate) {
+function instance$79($$self, $$props, $$invalidate) {
 	let itemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { registerItem, unregisterItem } = getContext("SLIDE");
@@ -9629,7 +9674,7 @@ function instance$77($$self, $$props, $$invalidate) {
 var SlideItem = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$77, create_fragment$77, safe_not_equal, { _style: 0 }, add_css$41);
+		init(this, options, instance$79, create_fragment$79, safe_not_equal, { _style: 0 }, add_css$41);
 	}
 };
 var SlideItem_default = SlideItem;
@@ -9641,7 +9686,7 @@ function add_css$40(target) {
 }
 const get_default_slot_changes$2 = (dirty) => ({ countdown: dirty & 2 });
 const get_default_slot_context$2 = (ctx) => ({ countdown: ctx[1] });
-function create_fragment$76(ctx) {
+function create_fragment$78(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -9714,7 +9759,7 @@ function formatTimeDiff$1(ms) {
 		sec: diffSec.toString()
 	};
 }
-function instance$76($$self, $$props, $$invalidate) {
+function instance$78($$self, $$props, $$invalidate) {
 	let countdown;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { timeLimit = "2023/12/31 23:59:59" } = $$props;
@@ -9765,7 +9810,7 @@ function instance$76($$self, $$props, $$invalidate) {
 var Countdown = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$76, create_fragment$76, safe_not_equal, {
+		init(this, options, instance$78, create_fragment$78, safe_not_equal, {
 			timeLimit: 2,
 			stateOnEnd: 3,
 			_style: 0
@@ -9813,7 +9858,7 @@ function create_default_slot$8(ctx) {
 		}
 	};
 }
-function create_fragment$75(ctx) {
+function create_fragment$77(ctx) {
 	let div;
 	let button;
 	let current;
@@ -9871,7 +9916,7 @@ function create_fragment$75(ctx) {
 		}
 	};
 }
-function instance$75($$self, $$props, $$invalidate) {
+function instance$77($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = {
 		operation: "none",
@@ -9896,7 +9941,7 @@ function instance$75($$self, $$props, $$invalidate) {
 var Box = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$75, create_fragment$75, safe_not_equal, {
+		init(this, options, instance$77, create_fragment$77, safe_not_equal, {
 			onClick: 0,
 			eventName: 1,
 			_style: 2
@@ -9910,7 +9955,7 @@ var Box_default = Box;
 function add_css$38(target) {
 	append_styles(target, "svelte-1iet6ze", ".icon.svelte-1iet6ze{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1iet6ze > .button{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.icon.svelte-1iet6ze > .button._disabled{cursor:not-allowed !important;opacity:0.2}.icon.svelte-1iet6ze svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
 }
-function create_if_block$11(ctx) {
+function create_if_block$12(ctx) {
 	let html_tag;
 	let html_anchor;
 	return {
@@ -9942,7 +9987,7 @@ function create_if_block$11(ctx) {
 }
 function create_default_slot$7(ctx) {
 	let if_block_anchor;
-	let if_block = ctx[3] && create_if_block$11(ctx);
+	let if_block = ctx[3] && create_if_block$12(ctx);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -9959,7 +10004,7 @@ function create_default_slot$7(ctx) {
 		p(ctx$1, dirty) {
 			if (ctx$1[3]) if (if_block) if_block.p(ctx$1, dirty);
 			else {
-				if_block = create_if_block$11(ctx$1);
+				if_block = create_if_block$12(ctx$1);
 				if_block.c();
 				if_block.m(if_block_anchor.parentNode, if_block_anchor);
 			}
@@ -9974,7 +10019,7 @@ function create_default_slot$7(ctx) {
 		}
 	};
 }
-function create_fragment$74(ctx) {
+function create_fragment$76(ctx) {
 	let div;
 	let button;
 	let current;
@@ -10036,7 +10081,7 @@ function parseData(dataUrl) {
 	const [_meta, data] = dataUrl.split(",");
 	return decodeURIComponent(data).replaceAll("'", "\"");
 }
-function instance$74($$self, $$props, $$invalidate) {
+function instance$76($$self, $$props, $$invalidate) {
 	let svg;
 	let styleVariables;
 	let style;
@@ -10081,7 +10126,7 @@ function instance$74($$self, $$props, $$invalidate) {
 var IconElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$74, create_fragment$74, safe_not_equal, {
+		init(this, options, instance$76, create_fragment$76, safe_not_equal, {
 			icon: 4,
 			onClick: 0,
 			eventName: 1,
@@ -10098,7 +10143,7 @@ var IconElement_default = IconElement;
 function add_css$37(target) {
 	append_styles(target, "svelte-ymsb9l", ".codeElement.svelte-ymsb9l{box-sizing:border-box;margin:0px;padding:0px;width:100%;height:100%}");
 }
-function create_fragment$73(ctx) {
+function create_fragment$75(ctx) {
 	let div;
 	let switch_instance;
 	let current;
@@ -10172,7 +10217,7 @@ function create_fragment$73(ctx) {
 		}
 	};
 }
-function instance$73($$self, $$props, $$invalidate) {
+function instance$75($$self, $$props, $$invalidate) {
 	let $data, $$unsubscribe_data = noop, $$subscribe_data = () => ($$unsubscribe_data(), $$unsubscribe_data = subscribe(data, ($$value) => $$invalidate(4, $data = $$value)), data);
 	$$self.$$.on_destroy.push(() => $$unsubscribe_data());
 	let { name } = $$props;
@@ -10197,7 +10242,7 @@ function instance$73($$self, $$props, $$invalidate) {
 var CodeElement = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$73, create_fragment$73, safe_not_equal, {
+		init(this, options, instance$75, create_fragment$75, safe_not_equal, {
 			name: 0,
 			component: 1,
 			data: 2,
@@ -10212,7 +10257,7 @@ var CodeElement_default = CodeElement;
 function add_css$36(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
-function create_fragment$72(ctx) {
+function create_fragment$74(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -10268,7 +10313,7 @@ const FlexContextKey = "action-sdk:flex";
 function getFlexContext() {
 	return getContext(FlexContextKey);
 }
-function instance$72($$self, $$props, $$invalidate) {
+function instance$74($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = "row" } = $$props;
 	let { width = "100%" } = $$props;
@@ -10294,7 +10339,7 @@ function instance$72($$self, $$props, $$invalidate) {
 var Flex = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$72, create_fragment$72, safe_not_equal, {
+		init(this, options, instance$74, create_fragment$74, safe_not_equal, {
 			direction: 0,
 			width: 1,
 			height: 2,
@@ -10309,7 +10354,7 @@ var Flex_default = Flex;
 function add_css$35(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
-function create_fragment$71(ctx) {
+function create_fragment$73(ctx) {
 	let div;
 	let current;
 	const default_slot_template = ctx[4].default;
@@ -10360,7 +10405,7 @@ function create_fragment$71(ctx) {
 		}
 	};
 }
-function instance$71($$self, $$props, $$invalidate) {
+function instance$73($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = "" } = $$props;
@@ -10393,7 +10438,7 @@ function instance$71($$self, $$props, $$invalidate) {
 var FlexItem = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$71, create_fragment$71, safe_not_equal, {
+		init(this, options, instance$73, create_fragment$73, safe_not_equal, {
 			length: 1,
 			_style: 2
 		}, add_css$35);
@@ -10551,7 +10596,7 @@ function create_default_slot$6(ctx) {
 		}
 	};
 }
-function create_fragment$70(ctx) {
+function create_fragment$72(ctx) {
 	let stateitem;
 	let current;
 	stateitem = new StateItem_default({ props: {
@@ -10593,7 +10638,7 @@ function create_fragment$70(ctx) {
 		}
 	};
 }
-function instance$70($$self, $$props, $$invalidate) {
+function instance$72($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { onClick = {
@@ -10666,7 +10711,7 @@ function instance$70($$self, $$props, $$invalidate) {
 var GridModalState = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$70, create_fragment$70, safe_not_equal, {
+		init(this, options, instance$72, create_fragment$72, safe_not_equal, {
 			path: 0,
 			onClick: 1,
 			clickEventName: 2,
@@ -10695,7 +10740,7 @@ var GridModalState_default = GridModalState;
 function add_css$34(target) {
 	append_styles(target, "svelte-15pej1m", ".text-block.svelte-15pej1m.svelte-15pej1m{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:hidden}.text-block-inner.svelte-15pej1m.svelte-15pej1m{width:100%;height:auto}.text-direction-vertical.svelte-15pej1m.svelte-15pej1m{writing-mode:vertical-rl}.text-direction-vertical.svelte-15pej1m .text-block-inner.svelte-15pej1m{width:auto;height:100%}");
 }
-function create_fragment$69(ctx) {
+function create_fragment$71(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -10755,7 +10800,7 @@ function create_fragment$69(ctx) {
 		}
 	};
 }
-function instance$69($$self, $$props, $$invalidate) {
+function instance$71($$self, $$props, $$invalidate) {
 	let style;
 	let { text: text$1 = "サンプルSample" } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -10785,7 +10830,7 @@ function instance$69($$self, $$props, $$invalidate) {
 var TextBlock = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$69, create_fragment$69, safe_not_equal, {
+		init(this, options, instance$71, create_fragment$71, safe_not_equal, {
 			text: 0,
 			font: 3,
 			_textStyle: 4,
@@ -10801,7 +10846,7 @@ var TextBlock_default = TextBlock;
 function add_css$33(target) {
 	append_styles(target, "svelte-ff0k6r", ".text-button-block.svelte-ff0k6r{width:100%;height:100%;background-color:#000000;border-radius:4px}.text-button.svelte-ff0k6r{display:flex;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;color:#ffffff;font-size:14px;font-weight:bold;justify-content:center;align-items:center;padding:1px 6px 1px 6px;line-height:1.5}.text-button.svelte-ff0k6r:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-ff0k6r:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
-function create_fragment$68(ctx) {
+function create_fragment$70(ctx) {
 	let div;
 	let button;
 	let rendertext;
@@ -10872,7 +10917,7 @@ function create_fragment$68(ctx) {
 		}
 	};
 }
-function instance$68($$self, $$props, $$invalidate) {
+function instance$70($$self, $$props, $$invalidate) {
 	let { text: text$1 = "ボタンラベル" } = $$props;
 	let { onClick = {
 		operation: "none",
@@ -10910,7 +10955,7 @@ function instance$68($$self, $$props, $$invalidate) {
 var TextButtonBlock = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$68, create_fragment$68, safe_not_equal, {
+		init(this, options, instance$70, create_fragment$70, safe_not_equal, {
 			text: 0,
 			onClick: 4,
 			eventName: 5,
@@ -10927,7 +10972,7 @@ var TextButtonBlock_default = TextButtonBlock;
 function add_css$32(target) {
 	append_styles(target, "svelte-1f85nmx", ".image-block.svelte-1f85nmx{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}.image.svelte-1f85nmx{width:100%;height:100%}.transport.svelte-1f85nmx:hover,.transport.svelte-1f85nmx:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1),\n      0 8px 28px rgba(0, 0, 0, 0.16)}");
 }
-function create_fragment$67(ctx) {
+function create_fragment$69(ctx) {
 	let div;
 	let img;
 	let img_style_value;
@@ -10994,7 +11039,7 @@ function create_fragment$67(ctx) {
 		}
 	};
 }
-function instance$67($$self, $$props, $$invalidate) {
+function instance$69($$self, $$props, $$invalidate) {
 	let { src = "https://admin.karte.io/action-editor2/public/images/no_image_en.svg" } = $$props;
 	let { alt = "No Image" } = $$props;
 	let { transport = false } = $$props;
@@ -11035,7 +11080,7 @@ function instance$67($$self, $$props, $$invalidate) {
 var ImageBlock = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$67, create_fragment$67, safe_not_equal, {
+		init(this, options, instance$69, create_fragment$69, safe_not_equal, {
 			src: 0,
 			alt: 1,
 			transport: 2,
@@ -11389,32 +11434,30 @@ var useClickable_default = useClickable;
 
 //#endregion
 //#region src/hooks/useInjectCustomizeCss.ts
-const useInjectCustomizeCss = (props) => {
+const DATA_ATTR_LAYER_ID_KEY = "data-customize-css-layer-id";
+const useInjectCustomizeCss = (props, layerId) => {
 	function injectCss() {
-		const modalElements = Array.from(document.querySelectorAll(`.${KARTE_MODAL_ROOT}`));
-		const style = document.createElement("style");
 		let headAppended = false;
+		const roots = Array.from(document.querySelectorAll(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`));
+		const style = document.createElement("style");
+		style.setAttribute(DATA_ATTR_LAYER_ID_KEY, layerId);
 		style.textContent = props.customizeCss;
-		modalElements.forEach((modalElement) => {
-			if (modalElement?.shadowRoot) modalElement.shadowRoot.appendChild(style);
-			else if (!headAppended) {
+		roots.forEach((root) => {
+			if (root && root.shadowRoot) {
+				const existingStyles = Array.from(root.shadowRoot.querySelectorAll(`style[${DATA_ATTR_LAYER_ID_KEY}='${layerId}']`));
+				existingStyles.forEach((style$1) => {
+					style$1.parentNode?.removeChild(style$1);
+				});
+				root.shadowRoot.appendChild(style);
+			} else if (!headAppended) {
 				document.head.appendChild(style);
 				headAppended = true;
 			}
 		});
-		return () => {
-			modalElements.forEach((modalElement) => {
-				if (modalElement?.shadowRoot) modalElement.shadowRoot.removeChild(style);
-				else document.head.removeChild(style);
-			});
-		};
 	}
 	onMount$1(() => {
 		if (!props.isCustomizeCss) return;
-		const removeCss = injectCss();
-		return () => {
-			removeCss();
-		};
+		injectCss();
 	});
 };
 
@@ -11528,7 +11571,7 @@ function create_dynamic_element$11(ctx) {
 		}
 	};
 }
-function create_fragment$66(ctx) {
+function create_fragment$68(ctx) {
 	let previous_tag = ctx[5];
 	let svelte_element_anchor;
 	let svelte_element = ctx[5] && create_dynamic_element$11(ctx);
@@ -11570,13 +11613,13 @@ function create_fragment$66(ctx) {
 		}
 	};
 }
-function instance$66($$self, $$props, $$invalidate) {
+function instance$68($$self, $$props, $$invalidate) {
 	let styleObj;
 	let style;
 	let imgStyle;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const avatarSizeStyle = !isNaN(Number(props.size)) ? {
 		width: `${props.size}px`,
@@ -11633,7 +11676,7 @@ function instance$66($$self, $$props, $$invalidate) {
 var Avatar = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$66, create_fragment$66, safe_not_equal, {
+		init(this, options, instance$68, create_fragment$68, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$31);
@@ -11691,7 +11734,7 @@ const buttonPropsDefault = {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowDown.svelte
-function create_fragment$65(ctx) {
+function create_fragment$67(ctx) {
 	let svg;
 	let path;
 	return {
@@ -11737,7 +11780,7 @@ function create_fragment$65(ctx) {
 		}
 	};
 }
-function instance$65($$self, $$props, $$invalidate) {
+function instance$67($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -11747,14 +11790,14 @@ function instance$65($$self, $$props, $$invalidate) {
 var IconArrowDown = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$65, create_fragment$65, safe_not_equal, { color: 0 });
+		init(this, options, instance$67, create_fragment$67, safe_not_equal, { color: 0 });
 	}
 };
 var IconArrowDown_default = IconArrowDown;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowUp.svelte
-function create_fragment$64(ctx) {
+function create_fragment$66(ctx) {
 	let svg;
 	let path;
 	return {
@@ -11800,7 +11843,7 @@ function create_fragment$64(ctx) {
 		}
 	};
 }
-function instance$64($$self, $$props, $$invalidate) {
+function instance$66($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -11810,14 +11853,14 @@ function instance$64($$self, $$props, $$invalidate) {
 var IconArrowUp = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$64, create_fragment$64, safe_not_equal, { color: 0 });
+		init(this, options, instance$66, create_fragment$66, safe_not_equal, { color: 0 });
 	}
 };
 var IconArrowUp_default = IconArrowUp;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconUsers.svelte
-function create_fragment$63(ctx) {
+function create_fragment$65(ctx) {
 	let svg;
 	let path;
 	return {
@@ -11863,7 +11906,7 @@ function create_fragment$63(ctx) {
 		}
 	};
 }
-function instance$63($$self, $$props, $$invalidate) {
+function instance$65($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -11873,14 +11916,14 @@ function instance$63($$self, $$props, $$invalidate) {
 var IconUsers = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$63, create_fragment$63, safe_not_equal, { color: 0 });
+		init(this, options, instance$65, create_fragment$65, safe_not_equal, { color: 0 });
 	}
 };
 var IconUsers_default = IconUsers;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowLeft.svelte
-function create_fragment$62(ctx) {
+function create_fragment$64(ctx) {
 	let svg;
 	let path;
 	return {
@@ -11926,7 +11969,7 @@ function create_fragment$62(ctx) {
 		}
 	};
 }
-function instance$62($$self, $$props, $$invalidate) {
+function instance$64($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -11936,14 +11979,14 @@ function instance$62($$self, $$props, $$invalidate) {
 var IconArrowLeft = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$62, create_fragment$62, safe_not_equal, { color: 0 });
+		init(this, options, instance$64, create_fragment$64, safe_not_equal, { color: 0 });
 	}
 };
 var IconArrowLeft_default = IconArrowLeft;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowRight.svelte
-function create_fragment$61(ctx) {
+function create_fragment$63(ctx) {
 	let svg;
 	let path;
 	return {
@@ -11989,7 +12032,7 @@ function create_fragment$61(ctx) {
 		}
 	};
 }
-function instance$61($$self, $$props, $$invalidate) {
+function instance$63($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -11999,14 +12042,14 @@ function instance$61($$self, $$props, $$invalidate) {
 var IconArrowRight = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$61, create_fragment$61, safe_not_equal, { color: 0 });
+		init(this, options, instance$63, create_fragment$63, safe_not_equal, { color: 0 });
 	}
 };
 var IconArrowRight_default = IconArrowRight;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconBell.svelte
-function create_fragment$60(ctx) {
+function create_fragment$62(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12052,7 +12095,7 @@ function create_fragment$60(ctx) {
 		}
 	};
 }
-function instance$60($$self, $$props, $$invalidate) {
+function instance$62($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12062,14 +12105,14 @@ function instance$60($$self, $$props, $$invalidate) {
 var IconBell = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$60, create_fragment$60, safe_not_equal, { color: 0 });
+		init(this, options, instance$62, create_fragment$62, safe_not_equal, { color: 0 });
 	}
 };
 var IconBell_default = IconBell;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowUpFromSquare.svelte
-function create_fragment$59(ctx) {
+function create_fragment$61(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12115,7 +12158,7 @@ function create_fragment$59(ctx) {
 		}
 	};
 }
-function instance$59($$self, $$props, $$invalidate) {
+function instance$61($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12125,14 +12168,14 @@ function instance$59($$self, $$props, $$invalidate) {
 var IconArrowUpFromSquare = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$59, create_fragment$59, safe_not_equal, { color: 0 });
+		init(this, options, instance$61, create_fragment$61, safe_not_equal, { color: 0 });
 	}
 };
 var IconArrowUpFromSquare_default = IconArrowUpFromSquare;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconTicket.svelte
-function create_fragment$58(ctx) {
+function create_fragment$60(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12178,7 +12221,7 @@ function create_fragment$58(ctx) {
 		}
 	};
 }
-function instance$58($$self, $$props, $$invalidate) {
+function instance$60($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12188,14 +12231,14 @@ function instance$58($$self, $$props, $$invalidate) {
 var IconTicket = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$58, create_fragment$58, safe_not_equal, { color: 0 });
+		init(this, options, instance$60, create_fragment$60, safe_not_equal, { color: 0 });
 	}
 };
 var IconTicket_default = IconTicket;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconTrack.svelte
-function create_fragment$57(ctx) {
+function create_fragment$59(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12241,7 +12284,7 @@ function create_fragment$57(ctx) {
 		}
 	};
 }
-function instance$57($$self, $$props, $$invalidate) {
+function instance$59($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12251,14 +12294,14 @@ function instance$57($$self, $$props, $$invalidate) {
 var IconTrack = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$57, create_fragment$57, safe_not_equal, { color: 0 });
+		init(this, options, instance$59, create_fragment$59, safe_not_equal, { color: 0 });
 	}
 };
 var IconTrack_default = IconTrack;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCartShopping.svelte
-function create_fragment$56(ctx) {
+function create_fragment$58(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12304,7 +12347,7 @@ function create_fragment$56(ctx) {
 		}
 	};
 }
-function instance$56($$self, $$props, $$invalidate) {
+function instance$58($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12314,14 +12357,14 @@ function instance$56($$self, $$props, $$invalidate) {
 var IconCartShopping = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$56, create_fragment$56, safe_not_equal, { color: 0 });
+		init(this, options, instance$58, create_fragment$58, safe_not_equal, { color: 0 });
 	}
 };
 var IconCartShopping_default = IconCartShopping;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircle.svelte
-function create_fragment$55(ctx) {
+function create_fragment$57(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12367,7 +12410,7 @@ function create_fragment$55(ctx) {
 		}
 	};
 }
-function instance$55($$self, $$props, $$invalidate) {
+function instance$57($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12377,14 +12420,14 @@ function instance$55($$self, $$props, $$invalidate) {
 var IconCircle = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$55, create_fragment$55, safe_not_equal, { color: 0 });
+		init(this, options, instance$57, create_fragment$57, safe_not_equal, { color: 0 });
 	}
 };
 var IconCircle_default = IconCircle;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleQuestion.svelte
-function create_fragment$54(ctx) {
+function create_fragment$56(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12430,7 +12473,7 @@ function create_fragment$54(ctx) {
 		}
 	};
 }
-function instance$54($$self, $$props, $$invalidate) {
+function instance$56($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12440,14 +12483,14 @@ function instance$54($$self, $$props, $$invalidate) {
 var IconCircleQuestion = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$54, create_fragment$54, safe_not_equal, { color: 0 });
+		init(this, options, instance$56, create_fragment$56, safe_not_equal, { color: 0 });
 	}
 };
 var IconCircleQuestion_default = IconCircleQuestion;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCheck.svelte
-function create_fragment$53(ctx) {
+function create_fragment$55(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12493,7 +12536,7 @@ function create_fragment$53(ctx) {
 		}
 	};
 }
-function instance$53($$self, $$props, $$invalidate) {
+function instance$55($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12503,14 +12546,14 @@ function instance$53($$self, $$props, $$invalidate) {
 var IconCheck = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$53, create_fragment$53, safe_not_equal, { color: 0 });
+		init(this, options, instance$55, create_fragment$55, safe_not_equal, { color: 0 });
 	}
 };
 var IconCheck_default = IconCheck;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconXMark.svelte
-function create_fragment$52(ctx) {
+function create_fragment$54(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12556,7 +12599,7 @@ function create_fragment$52(ctx) {
 		}
 	};
 }
-function instance$52($$self, $$props, $$invalidate) {
+function instance$54($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12566,14 +12609,14 @@ function instance$52($$self, $$props, $$invalidate) {
 var IconXMark = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$52, create_fragment$52, safe_not_equal, { color: 0 });
+		init(this, options, instance$54, create_fragment$54, safe_not_equal, { color: 0 });
 	}
 };
 var IconXMark_default = IconXMark;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPaperPlane.svelte
-function create_fragment$51(ctx) {
+function create_fragment$53(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12619,7 +12662,7 @@ function create_fragment$51(ctx) {
 		}
 	};
 }
-function instance$51($$self, $$props, $$invalidate) {
+function instance$53($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12629,14 +12672,14 @@ function instance$51($$self, $$props, $$invalidate) {
 var IconPaperPlane = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$51, create_fragment$51, safe_not_equal, { color: 0 });
+		init(this, options, instance$53, create_fragment$53, safe_not_equal, { color: 0 });
 	}
 };
 var IconPaperPlane_default = IconPaperPlane;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCopy.svelte
-function create_fragment$50(ctx) {
+function create_fragment$52(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12682,7 +12725,7 @@ function create_fragment$50(ctx) {
 		}
 	};
 }
-function instance$50($$self, $$props, $$invalidate) {
+function instance$52($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12692,14 +12735,14 @@ function instance$50($$self, $$props, $$invalidate) {
 var IconCopy = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$50, create_fragment$50, safe_not_equal, { color: 0 });
+		init(this, options, instance$52, create_fragment$52, safe_not_equal, { color: 0 });
 	}
 };
 var IconCopy_default = IconCopy;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleXMark.svelte
-function create_fragment$49(ctx) {
+function create_fragment$51(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12745,7 +12788,7 @@ function create_fragment$49(ctx) {
 		}
 	};
 }
-function instance$49($$self, $$props, $$invalidate) {
+function instance$51($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12755,14 +12798,14 @@ function instance$49($$self, $$props, $$invalidate) {
 var IconCircleXMark = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$49, create_fragment$49, safe_not_equal, { color: 0 });
+		init(this, options, instance$51, create_fragment$51, safe_not_equal, { color: 0 });
 	}
 };
 var IconCircleXMark_default = IconCircleXMark;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconHeart.svelte
-function create_fragment$48(ctx) {
+function create_fragment$50(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12808,7 +12851,7 @@ function create_fragment$48(ctx) {
 		}
 	};
 }
-function instance$48($$self, $$props, $$invalidate) {
+function instance$50($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12818,14 +12861,14 @@ function instance$48($$self, $$props, $$invalidate) {
 var IconHeart = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$48, create_fragment$48, safe_not_equal, { color: 0 });
+		init(this, options, instance$50, create_fragment$50, safe_not_equal, { color: 0 });
 	}
 };
 var IconHeart_default = IconHeart;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconMagnifyingGrass.svelte
-function create_fragment$47(ctx) {
+function create_fragment$49(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12871,7 +12914,7 @@ function create_fragment$47(ctx) {
 		}
 	};
 }
-function instance$47($$self, $$props, $$invalidate) {
+function instance$49($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12881,14 +12924,14 @@ function instance$47($$self, $$props, $$invalidate) {
 var IconMagnifyingGrass = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$47, create_fragment$47, safe_not_equal, { color: 0 });
+		init(this, options, instance$49, create_fragment$49, safe_not_equal, { color: 0 });
 	}
 };
 var IconMagnifyingGrass_default = IconMagnifyingGrass;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconStar.svelte
-function create_fragment$46(ctx) {
+function create_fragment$48(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12934,7 +12977,7 @@ function create_fragment$46(ctx) {
 		}
 	};
 }
-function instance$46($$self, $$props, $$invalidate) {
+function instance$48($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -12944,14 +12987,14 @@ function instance$46($$self, $$props, $$invalidate) {
 var IconStar = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$46, create_fragment$46, safe_not_equal, { color: 0 });
+		init(this, options, instance$48, create_fragment$48, safe_not_equal, { color: 0 });
 	}
 };
 var IconStar_default = IconStar;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleInfo.svelte
-function create_fragment$45(ctx) {
+function create_fragment$47(ctx) {
 	let svg;
 	let path;
 	return {
@@ -12997,7 +13040,7 @@ function create_fragment$45(ctx) {
 		}
 	};
 }
-function instance$45($$self, $$props, $$invalidate) {
+function instance$47($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13007,14 +13050,14 @@ function instance$45($$self, $$props, $$invalidate) {
 var IconCircleInfo = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$45, create_fragment$45, safe_not_equal, { color: 0 });
+		init(this, options, instance$47, create_fragment$47, safe_not_equal, { color: 0 });
 	}
 };
 var IconCircleInfo_default = IconCircleInfo;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconEnvelope.svelte
-function create_fragment$44(ctx) {
+function create_fragment$46(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13060,7 +13103,7 @@ function create_fragment$44(ctx) {
 		}
 	};
 }
-function instance$44($$self, $$props, $$invalidate) {
+function instance$46($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13070,14 +13113,14 @@ function instance$44($$self, $$props, $$invalidate) {
 var IconEnvelope = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$44, create_fragment$44, safe_not_equal, { color: 0 });
+		init(this, options, instance$46, create_fragment$46, safe_not_equal, { color: 0 });
 	}
 };
 var IconEnvelope_default = IconEnvelope;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconGift.svelte
-function create_fragment$43(ctx) {
+function create_fragment$45(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13123,7 +13166,7 @@ function create_fragment$43(ctx) {
 		}
 	};
 }
-function instance$43($$self, $$props, $$invalidate) {
+function instance$45($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13133,14 +13176,14 @@ function instance$43($$self, $$props, $$invalidate) {
 var IconGift = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$43, create_fragment$43, safe_not_equal, { color: 0 });
+		init(this, options, instance$45, create_fragment$45, safe_not_equal, { color: 0 });
 	}
 };
 var IconGift_default = IconGift;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPaperclip.svelte
-function create_fragment$42(ctx) {
+function create_fragment$44(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13187,7 +13230,7 @@ function create_fragment$42(ctx) {
 		}
 	};
 }
-function instance$42($$self, $$props, $$invalidate) {
+function instance$44($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13197,14 +13240,14 @@ function instance$42($$self, $$props, $$invalidate) {
 var IconPaperclip = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$42, create_fragment$42, safe_not_equal, { color: 0 });
+		init(this, options, instance$44, create_fragment$44, safe_not_equal, { color: 0 });
 	}
 };
 var IconPaperclip_default = IconPaperclip;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconFire.svelte
-function create_fragment$41(ctx) {
+function create_fragment$43(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13251,7 +13294,7 @@ function create_fragment$41(ctx) {
 		}
 	};
 }
-function instance$41($$self, $$props, $$invalidate) {
+function instance$43($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13261,14 +13304,14 @@ function instance$41($$self, $$props, $$invalidate) {
 var IconFire = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$41, create_fragment$41, safe_not_equal, { color: 0 });
+		init(this, options, instance$43, create_fragment$43, safe_not_equal, { color: 0 });
 	}
 };
 var IconFire_default = IconFire;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconLink.svelte
-function create_fragment$40(ctx) {
+function create_fragment$42(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13315,7 +13358,7 @@ function create_fragment$40(ctx) {
 		}
 	};
 }
-function instance$40($$self, $$props, $$invalidate) {
+function instance$42($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13325,14 +13368,14 @@ function instance$40($$self, $$props, $$invalidate) {
 var IconLink = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$40, create_fragment$40, safe_not_equal, { color: 0 });
+		init(this, options, instance$42, create_fragment$42, safe_not_equal, { color: 0 });
 	}
 };
 var IconLink_default = IconLink;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconBuildings.svelte
-function create_fragment$39(ctx) {
+function create_fragment$41(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13378,7 +13421,7 @@ function create_fragment$39(ctx) {
 		}
 	};
 }
-function instance$39($$self, $$props, $$invalidate) {
+function instance$41($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13388,14 +13431,14 @@ function instance$39($$self, $$props, $$invalidate) {
 var IconBuildings = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$39, create_fragment$39, safe_not_equal, { color: 0 });
+		init(this, options, instance$41, create_fragment$41, safe_not_equal, { color: 0 });
 	}
 };
 var IconBuildings_default = IconBuildings;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconChevronsRight.svelte
-function create_fragment$38(ctx) {
+function create_fragment$40(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13441,7 +13484,7 @@ function create_fragment$38(ctx) {
 		}
 	};
 }
-function instance$38($$self, $$props, $$invalidate) {
+function instance$40($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13451,14 +13494,14 @@ function instance$38($$self, $$props, $$invalidate) {
 var IconChevronsRight = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$38, create_fragment$38, safe_not_equal, { color: 0 });
+		init(this, options, instance$40, create_fragment$40, safe_not_equal, { color: 0 });
 	}
 };
 var IconChevronsRight_default = IconChevronsRight;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconChevronRight.svelte
-function create_fragment$37(ctx) {
+function create_fragment$39(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13504,7 +13547,7 @@ function create_fragment$37(ctx) {
 		}
 	};
 }
-function instance$37($$self, $$props, $$invalidate) {
+function instance$39($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13514,14 +13557,14 @@ function instance$37($$self, $$props, $$invalidate) {
 var IconChevronRight = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$37, create_fragment$37, safe_not_equal, { color: 0 });
+		init(this, options, instance$39, create_fragment$39, safe_not_equal, { color: 0 });
 	}
 };
 var IconChevronRight_default = IconChevronRight;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPhone.svelte
-function create_fragment$36(ctx) {
+function create_fragment$38(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13567,7 +13610,7 @@ function create_fragment$36(ctx) {
 		}
 	};
 }
-function instance$36($$self, $$props, $$invalidate) {
+function instance$38($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13577,14 +13620,14 @@ function instance$36($$self, $$props, $$invalidate) {
 var IconPhone = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$36, create_fragment$36, safe_not_equal, { color: 0 });
+		init(this, options, instance$38, create_fragment$38, safe_not_equal, { color: 0 });
 	}
 };
 var IconPhone_default = IconPhone;
 
 //#endregion
 //#region src/components-flex/icon/variants/IconLocationDot.svelte
-function create_fragment$35(ctx) {
+function create_fragment$37(ctx) {
 	let svg;
 	let path;
 	return {
@@ -13630,7 +13673,7 @@ function create_fragment$35(ctx) {
 		}
 	};
 }
-function instance$35($$self, $$props, $$invalidate) {
+function instance$37($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 	$$self.$$set = ($$props$1) => {
 		if ("color" in $$props$1) $$invalidate(0, color = $$props$1.color);
@@ -13640,7 +13683,7 @@ function instance$35($$self, $$props, $$invalidate) {
 var IconLocationDot = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$35, create_fragment$35, safe_not_equal, { color: 0 });
+		init(this, options, instance$37, create_fragment$37, safe_not_equal, { color: 0 });
 	}
 };
 var IconLocationDot_default = IconLocationDot;
@@ -13817,10 +13860,9 @@ function create_dynamic_element$10(ctx) {
 		}
 	};
 }
-function create_fragment$34(ctx) {
+function create_fragment$36(ctx) {
 	let previous_tag = ctx[5];
 	let svelte_element_anchor;
-	let current;
 	let svelte_element = ctx[5] && create_dynamic_element$10(ctx);
 	return {
 		c() {
@@ -13855,7 +13897,6 @@ function create_fragment$34(ctx) {
 		i: noop,
 		o(local) {
 			transition_out(svelte_element);
-			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element_anchor);
@@ -13863,12 +13904,12 @@ function create_fragment$34(ctx) {
 		}
 	};
 }
-function instance$34($$self, $$props, $$invalidate) {
+function instance$36($$self, $$props, $$invalidate) {
 	let style;
 	let IconComponent;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const getSizeCss = () => {
 		return {
@@ -13901,7 +13942,7 @@ function instance$34($$self, $$props, $$invalidate) {
 var Icon = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$34, create_fragment$34, safe_not_equal, {
+		init(this, options, instance$36, create_fragment$36, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$30);
@@ -14081,7 +14122,7 @@ function darkenColor(color, percent) {
 function add_css$29(target) {
 	append_styles(target, "svelte-l0rauj", ".button.svelte-l0rauj{display:inline-flex;gap:0.8em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;color:var(--color);border-color:var(--border-color);background-color:var(--bg-color)}.button.svelte-l0rauj:hover{background-color:var(--hover-bg-color);border-color:var(--hover-border-color)}.button-icon.svelte-l0rauj{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
 }
-function create_if_block$10(ctx) {
+function create_if_block$11(ctx) {
 	let div;
 	let icon;
 	let current;
@@ -14148,7 +14189,7 @@ function create_dynamic_element$9(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$10(ctx);
+	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$11(ctx);
 	let svelte_element_levels = [
 		ctx[3],
 		{ id: svelte_element_id_value = ctx[0].id },
@@ -14209,7 +14250,7 @@ function create_dynamic_element$9(ctx) {
 				if_block.p(ctx$1, dirty);
 				if (dirty & 1) transition_in(if_block, 1);
 			} else {
-				if_block = create_if_block$10(ctx$1);
+				if_block = create_if_block$11(ctx$1);
 				if_block.c();
 				transition_in(if_block, 1);
 				if_block.m(svelte_element, t0);
@@ -14251,10 +14292,9 @@ function create_dynamic_element$9(ctx) {
 		}
 	};
 }
-function create_fragment$33(ctx) {
+function create_fragment$35(ctx) {
 	let previous_tag = ctx[4];
 	let svelte_element_anchor;
-	let current;
 	let svelte_element = ctx[4] && create_dynamic_element$9(ctx);
 	return {
 		c() {
@@ -14289,7 +14329,6 @@ function create_fragment$33(ctx) {
 		i: noop,
 		o(local) {
 			transition_out(svelte_element);
-			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element_anchor);
@@ -14297,12 +14336,12 @@ function create_fragment$33(ctx) {
 		}
 	};
 }
-function instance$33($$self, $$props, $$invalidate) {
+function instance$35($$self, $$props, $$invalidate) {
 	let variables$1;
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const { brandKit } = useBrandKit();
 	const buttonThemeStyles = getButtonThemeStyles(brandKit);
@@ -14382,7 +14421,7 @@ function instance$33($$self, $$props, $$invalidate) {
 var Button = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$33, create_fragment$33, safe_not_equal, {
+		init(this, options, instance$35, create_fragment$35, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$29);
@@ -14488,7 +14527,7 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 function add_css$28(target) {
 	append_styles(target, "svelte-z8gomx", ".button-outlined.svelte-z8gomx{display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;background-color:var(--bg-color)}.button-outlined.svelte-z8gomx:hover{background-color:var(--hover-bg-color)}.button-outlined-icon.svelte-z8gomx{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
-function create_if_block$9(ctx) {
+function create_if_block$10(ctx) {
 	let div;
 	let icon;
 	let current;
@@ -14553,7 +14592,7 @@ function create_dynamic_element$8(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$9(ctx);
+	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$10(ctx);
 	let svelte_element_levels = [
 		ctx[3],
 		{ class: "button-outlined" },
@@ -14610,7 +14649,7 @@ function create_dynamic_element$8(ctx) {
 				if_block.p(ctx$1, dirty);
 				if (dirty & 1) transition_in(if_block, 1);
 			} else {
-				if_block = create_if_block$9(ctx$1);
+				if_block = create_if_block$10(ctx$1);
 				if_block.c();
 				transition_in(if_block, 1);
 				if_block.m(svelte_element, t0);
@@ -14650,10 +14689,9 @@ function create_dynamic_element$8(ctx) {
 		}
 	};
 }
-function create_fragment$32(ctx) {
+function create_fragment$34(ctx) {
 	let previous_tag = ctx[4];
 	let svelte_element_anchor;
-	let current;
 	let svelte_element = ctx[4] && create_dynamic_element$8(ctx);
 	return {
 		c() {
@@ -14688,7 +14726,6 @@ function create_fragment$32(ctx) {
 		i: noop,
 		o(local) {
 			transition_out(svelte_element);
-			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element_anchor);
@@ -14696,12 +14733,12 @@ function create_fragment$32(ctx) {
 		}
 	};
 }
-function instance$32($$self, $$props, $$invalidate) {
+function instance$34($$self, $$props, $$invalidate) {
 	let variables$1;
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const buttonThemeStyles = getButtonOutlinedThemeStyles(brandKit);
@@ -14748,7 +14785,7 @@ function instance$32($$self, $$props, $$invalidate) {
 var ButtonOutlined = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$32, create_fragment$32, safe_not_equal, {
+		init(this, options, instance$34, create_fragment$34, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$28);
@@ -14819,7 +14856,7 @@ const getButtonTextThemeStyles = getPropStyles(callback$2);
 function add_css$27(target) {
 	append_styles(target, "svelte-l90o4j", ".button-text.svelte-l90o4j{display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border:0;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;background-color:rgba(255, 255, 255, 0)}.button-text.svelte-l90o4j:hover{background-color:var(--hover-bg-color)}.button-text-icon.svelte-l90o4j{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
 }
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
 	let div;
 	let icon;
 	let current;
@@ -14884,7 +14921,7 @@ function create_dynamic_element$7(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$8(ctx);
+	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$9(ctx);
 	let svelte_element_levels = [
 		ctx[3],
 		{ class: "button-text" },
@@ -14941,7 +14978,7 @@ function create_dynamic_element$7(ctx) {
 				if_block.p(ctx$1, dirty);
 				if (dirty & 1) transition_in(if_block, 1);
 			} else {
-				if_block = create_if_block$8(ctx$1);
+				if_block = create_if_block$9(ctx$1);
 				if_block.c();
 				transition_in(if_block, 1);
 				if_block.m(svelte_element, t0);
@@ -14981,10 +15018,9 @@ function create_dynamic_element$7(ctx) {
 		}
 	};
 }
-function create_fragment$31(ctx) {
+function create_fragment$33(ctx) {
 	let previous_tag = ctx[4];
 	let svelte_element_anchor;
-	let current;
 	let svelte_element = ctx[4] && create_dynamic_element$7(ctx);
 	return {
 		c() {
@@ -15019,7 +15055,6 @@ function create_fragment$31(ctx) {
 		i: noop,
 		o(local) {
 			transition_out(svelte_element);
-			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element_anchor);
@@ -15027,12 +15062,12 @@ function create_fragment$31(ctx) {
 		}
 	};
 }
-function instance$31($$self, $$props, $$invalidate) {
+function instance$33($$self, $$props, $$invalidate) {
 	let variables$1;
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const themeStyles = getButtonTextThemeStyles(brandKit);
@@ -15073,7 +15108,7 @@ function instance$31($$self, $$props, $$invalidate) {
 var ButtonText = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$31, create_fragment$31, safe_not_equal, {
+		init(this, options, instance$33, create_fragment$33, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$27);
@@ -15118,10 +15153,9 @@ const getTextThemeStyles = getPropStyles(callback$1);
 function add_css$26(target) {
 	append_styles(target, "svelte-18wmfyq", ".close-button.svelte-18wmfyq.svelte-18wmfyq{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;flex-shrink:0;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s}.close-button.svelte-18wmfyq svg.svelte-18wmfyq{transition:transform 0.12s}.close-button.svelte-18wmfyq:hover svg.svelte-18wmfyq{transform:rotate(90deg)}.close-button-order-one.svelte-18wmfyq.svelte-18wmfyq{order:1}.close-button-order-two.svelte-18wmfyq.svelte-18wmfyq{order:2}");
 }
-function create_if_block$7(ctx) {
+function create_if_block$8(ctx) {
 	let span;
 	let t;
-	let span_class_value;
 	return {
 		c() {
 			span = element("span");
@@ -15140,7 +15174,7 @@ function create_if_block$7(ctx) {
 		},
 		h() {
 			attr(span, "style", ctx[3]);
-			attr(span, "class", span_class_value = "close-button-label " + (ctx[11] ? "close-button-order-one" : "") + " svelte-18wmfyq");
+			attr(span, "class", "close-button-label " + (ctx[11] ? "close-button-order-one" : "") + " svelte-18wmfyq");
 		},
 		m(target, anchor) {
 			insert_hydration(target, span, anchor);
@@ -15164,7 +15198,7 @@ function create_dynamic_element$6(ctx) {
 	let svelte_element_class_value;
 	let mounted;
 	let dispose;
-	let if_block = ctx[5] && create_if_block$7(ctx);
+	let if_block = ctx[5] && create_if_block$8(ctx);
 	let svelte_element_levels = [
 		ctx[6],
 		{ id: svelte_element_id_value = ctx[0].id },
@@ -15240,7 +15274,7 @@ function create_dynamic_element$6(ctx) {
 			if (dirty & 4) attr(span, "style", ctx$1[2]);
 			if (ctx$1[5]) if (if_block) if_block.p(ctx$1, dirty);
 			else {
-				if_block = create_if_block$7(ctx$1);
+				if_block = create_if_block$8(ctx$1);
 				if_block.c();
 				if_block.m(svelte_element, null);
 			}
@@ -15267,7 +15301,7 @@ function create_dynamic_element$6(ctx) {
 		}
 	};
 }
-function create_fragment$30(ctx) {
+function create_fragment$32(ctx) {
 	let previous_tag = ctx[7];
 	let svelte_element_anchor;
 	let svelte_element = ctx[7] && create_dynamic_element$6(ctx);
@@ -15309,7 +15343,7 @@ function create_fragment$30(ctx) {
 		}
 	};
 }
-function instance$30($$self, $$props, $$invalidate) {
+function instance$32($$self, $$props, $$invalidate) {
 	let hasLabel;
 	let styleObj;
 	let style;
@@ -15322,7 +15356,7 @@ function instance$30($$self, $$props, $$invalidate) {
 	let { eventName = "" } = $$props;
 	let { eventValue = void 0 } = $$props;
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props.onClick ? props : {
 		onClick: {
 			operation: "closeApp",
@@ -15424,7 +15458,7 @@ function instance$30($$self, $$props, $$invalidate) {
 var CloseButton = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$30, create_fragment$30, safe_not_equal, {
+		init(this, options, instance$32, create_fragment$32, safe_not_equal, {
 			props: 0,
 			layerId: 1,
 			eventName: 12,
@@ -15593,7 +15627,7 @@ function create_dynamic_element$5(ctx) {
 		}
 	};
 }
-function create_fragment$29(ctx) {
+function create_fragment$31(ctx) {
 	let previous_tag = ctx[5];
 	let svelte_element_anchor;
 	let svelte_element = ctx[5] && create_dynamic_element$5(ctx);
@@ -15635,13 +15669,13 @@ function create_fragment$29(ctx) {
 		}
 	};
 }
-function instance$29($$self, $$props, $$invalidate) {
+function instance$31($$self, $$props, $$invalidate) {
 	let styleObj;
 	let style;
 	let imgStyle;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const aspectVariantStyles = ASPECT_VARIANT[props.aspectVariant]?.getProps();
 	const width = props.width ?? "100%";
@@ -15688,7 +15722,7 @@ function instance$29($$self, $$props, $$invalidate) {
 var Image = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$29, create_fragment$29, safe_not_equal, {
+		init(this, options, instance$31, create_fragment$31, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$25);
@@ -15803,7 +15837,7 @@ function create_dynamic_element$4(ctx) {
 		}
 	};
 }
-function create_fragment$28(ctx) {
+function create_fragment$30(ctx) {
 	let previous_tag = "div";
 	let svelte_element_anchor;
 	let current;
@@ -15850,13 +15884,13 @@ function create_fragment$28(ctx) {
 		}
 	};
 }
-function instance$28($$self, $$props, $$invalidate) {
+function instance$30($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	$$self.$$set = ($$props$1) => {
 		if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
@@ -15896,7 +15930,7 @@ function instance$28($$self, $$props, $$invalidate) {
 var Layout = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$28, create_fragment$28, safe_not_equal, {
+		init(this, options, instance$30, create_fragment$30, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$24);
@@ -15946,7 +15980,6 @@ function create_each_block$4(ctx) {
 	let i_1;
 	let i_1_style_value;
 	let t;
-	let button_style_value;
 	let mounted;
 	let dispose;
 	function click_handler() {
@@ -15973,7 +16006,7 @@ function create_each_block$4(ctx) {
 				...ctx[5],
 				background: ctx[36].isActive ? "#555555" : "#AAAAAA"
 			}));
-			attr(button, "style", button_style_value = objToStyle({
+			attr(button, "style", objToStyle({
 				padding: "4px",
 				border: 0,
 				background: "none"
@@ -16002,7 +16035,7 @@ function create_each_block$4(ctx) {
 		}
 	};
 }
-function create_fragment$27(ctx) {
+function create_fragment$29(ctx) {
 	let div2;
 	let div0;
 	let ul;
@@ -16126,7 +16159,7 @@ function create_fragment$27(ctx) {
 	};
 }
 const THROTTLE = 16;
-function instance$27($$self, $$props, $$invalidate) {
+function instance$29($$self, $$props, $$invalidate) {
 	let indicators;
 	let itemWidthPercentage;
 	let baseContainerStyle;
@@ -16137,7 +16170,7 @@ function instance$27($$self, $$props, $$invalidate) {
 	let { layerId } = $$props;
 	let { props } = $$props;
 	let { overrideStyle } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	let containerElement;
 	let slotElement;
 	let currentIndex = 0;
@@ -16323,7 +16356,7 @@ function instance$27($$self, $$props, $$invalidate) {
 var Slider = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$27, create_fragment$27, safe_not_equal, {
+		init(this, options, instance$29, create_fragment$29, safe_not_equal, {
 			layerId: 0,
 			props: 1,
 			overrideStyle: 2
@@ -16400,7 +16433,7 @@ function create_dynamic_element$3(ctx) {
 		}
 	};
 }
-function create_fragment$26(ctx) {
+function create_fragment$28(ctx) {
 	let li;
 	let previous_tag = ctx[3];
 	let li_id_value;
@@ -16469,11 +16502,11 @@ function create_fragment$26(ctx) {
 		}
 	};
 }
-function instance$26($$self, $$props, $$invalidate) {
+function instance$28($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { layerId } = $$props;
 	let { props } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	$$self.$$set = ($$props$1) => {
 		if ("layerId" in $$props$1) $$invalidate(0, layerId = $$props$1.layerId);
@@ -16493,7 +16526,7 @@ function instance$26($$self, $$props, $$invalidate) {
 var SliderItem = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$26, create_fragment$26, safe_not_equal, {
+		init(this, options, instance$28, create_fragment$28, safe_not_equal, {
 			layerId: 0,
 			props: 1
 		}, add_css$22);
@@ -16546,7 +16579,7 @@ const TEXT_VARIANTS = { size: {
 function add_css$21(target) {
 	append_styles(target, "svelte-vifn7y", ".text.svelte-vifn7y{margin:0;word-break:break-all;text-decoration:none}");
 }
-function create_fragment$25(ctx) {
+function create_fragment$27(ctx) {
 	let p;
 	let p_class_value;
 	let p_id_value;
@@ -16590,12 +16623,12 @@ function create_fragment$25(ctx) {
 		}
 	};
 }
-function instance$25($$self, $$props, $$invalidate) {
+function instance$27($$self, $$props, $$invalidate) {
 	let escapedHTML;
 	let style;
 	let { props = { content: "" } } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	const themeStyles = getTextThemeStyles(brandKit);
 	const fontFamilyStyles = props.fontFamilyVariant in FONT_FAMILY_VARIANT ? FONT_FAMILY_VARIANT[props.fontFamilyVariant].getProps(brandKit) : FONT_FAMILY_VARIANT.default.getProps(brandKit);
@@ -16675,7 +16708,7 @@ function instance$25($$self, $$props, $$invalidate) {
 var Text = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$25, create_fragment$25, safe_not_equal, {
+		init(this, options, instance$27, create_fragment$27, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$21);
@@ -16688,7 +16721,7 @@ var Text_default = Text;
 function add_css$20(target) {
 	append_styles(target, "svelte-dxr423", ".rich-text.svelte-dxr423 p{margin:0;word-break:break-all;text-decoration:none}.rich-text.svelte-dxr423 p + p{margin-top:0.75em}");
 }
-function create_fragment$24(ctx) {
+function create_fragment$26(ctx) {
 	let div;
 	let raw_value = ctx[0].content + "";
 	let div_id_value;
@@ -16733,11 +16766,11 @@ function create_fragment$24(ctx) {
 		}
 	};
 }
-function instance$24($$self, $$props, $$invalidate) {
+function instance$26($$self, $$props, $$invalidate) {
 	let style;
 	let { props = { content: "" } } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	const themeStyles = getTextThemeStyles(brandKit);
 	const fontFamilyStyles = props.fontFamilyVariant in FONT_FAMILY_VARIANT ? FONT_FAMILY_VARIANT[props.fontFamilyVariant].getProps(brandKit) : FONT_FAMILY_VARIANT.default.getProps(brandKit);
@@ -16795,7 +16828,7 @@ function instance$24($$self, $$props, $$invalidate) {
 var RichText = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$24, create_fragment$24, safe_not_equal, {
+		init(this, options, instance$26, create_fragment$26, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$20);
@@ -16860,7 +16893,7 @@ const getTextLinkThemeStyles = getPropStyles(callback);
 function add_css$19(target) {
 	append_styles(target, "svelte-dc9m5n", ".link.svelte-dc9m5n{-webkit-appearance:none;border:0;background:none;padding:0;display:inline-flex}.link.svelte-dc9m5n,.link.svelte-dc9m5n:visited,.link.svelte-dc9m5n:link{color:var(--color)}.link.svelte-dc9m5n:hover{color:var(--hover-color)}.link.svelte-dc9m5n:active{color:var(--active-color)}.link.underline-hover-on.svelte-dc9m5n{text-decoration:none}.link.underline-hover-on.svelte-dc9m5n:hover{text-decoration:underline}.link.underline-hover-off.svelte-dc9m5n{text-decoration:underline}.link.underline-hover-off.svelte-dc9m5n:hover{text-decoration:none}.link.underline-on.svelte-dc9m5n{text-decoration:underline}.link.underline-off.svelte-dc9m5n{text-decoration:none}");
 }
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let icon;
 	let current;
 	icon = new Icon_default({ props: { props: {
@@ -16913,7 +16946,7 @@ function create_dynamic_element$2(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$6(ctx);
+	let if_block = ctx[0].isIcon && ctx[0].iconVariant && create_if_block$7(ctx);
 	let svelte_element_levels = [
 		ctx[4],
 		{ id: svelte_element_id_value = ctx[0].id },
@@ -16969,7 +17002,7 @@ function create_dynamic_element$2(ctx) {
 				if_block.p(ctx$1, dirty);
 				if (dirty & 1) transition_in(if_block, 1);
 			} else {
-				if_block = create_if_block$6(ctx$1);
+				if_block = create_if_block$7(ctx$1);
 				if_block.c();
 				transition_in(if_block, 1);
 				if_block.m(svelte_element, t);
@@ -17010,10 +17043,9 @@ function create_dynamic_element$2(ctx) {
 		}
 	};
 }
-function create_fragment$23(ctx) {
+function create_fragment$25(ctx) {
 	let previous_tag = ctx[5];
 	let svelte_element_anchor;
-	let current;
 	let svelte_element = ctx[5] && create_dynamic_element$2(ctx);
 	return {
 		c() {
@@ -17048,7 +17080,6 @@ function create_fragment$23(ctx) {
 		i: noop,
 		o(local) {
 			transition_out(svelte_element);
-			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element_anchor);
@@ -17056,13 +17087,13 @@ function create_fragment$23(ctx) {
 		}
 	};
 }
-function instance$23($$self, $$props, $$invalidate) {
+function instance$25($$self, $$props, $$invalidate) {
 	let escapedHTML;
 	let variables$1;
 	let style;
 	let { props = { label: "" } } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	const { attributes, element: element$1, handleClick } = useClickable_default({
 		...props,
@@ -17124,7 +17155,7 @@ function instance$23($$self, $$props, $$invalidate) {
 var TextLink = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$23, create_fragment$23, safe_not_equal, {
+		init(this, options, instance$25, create_fragment$25, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$19);
@@ -17159,7 +17190,7 @@ const TEXT_LINK_UNDERLINE = {
 function add_css$18(target) {
 	append_styles(target, "svelte-18nkdjz", ".v2-background.svelte-18nkdjz{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
 	let div;
 	let div_class_value;
 	let mounted;
@@ -17194,9 +17225,9 @@ function create_if_block$5(ctx) {
 		}
 	};
 }
-function create_fragment$22(ctx) {
+function create_fragment$24(ctx) {
 	let if_block_anchor;
-	let if_block = ctx[0] && create_if_block$5(ctx);
+	let if_block = ctx[0] && create_if_block$6(ctx);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -17213,7 +17244,7 @@ function create_fragment$22(ctx) {
 		p(ctx$1, [dirty]) {
 			if (ctx$1[0]) if (if_block) if_block.p(ctx$1, dirty);
 			else {
-				if_block = create_if_block$5(ctx$1);
+				if_block = create_if_block$6(ctx$1);
 				if_block.c();
 				if_block.m(if_block_anchor.parentNode, if_block_anchor);
 			}
@@ -17230,7 +17261,7 @@ function create_fragment$22(ctx) {
 		}
 	};
 }
-function instance$22($$self, $$props, $$invalidate) {
+function instance$24($$self, $$props, $$invalidate) {
 	let { backgroundOverlay = false } = $$props;
 	let { class: className = void 0 } = $$props;
 	const dispatch = createEventDispatcher();
@@ -17249,7 +17280,7 @@ function instance$22($$self, $$props, $$invalidate) {
 var BackgroundOverlay = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$22, create_fragment$22, safe_not_equal, {
+		init(this, options, instance$24, create_fragment$24, safe_not_equal, {
 			backgroundOverlay: 0,
 			class: 1
 		}, add_css$18);
@@ -17262,7 +17293,7 @@ var BackgroundOverlay_default = BackgroundOverlay;
 function add_css$17(target) {
 	append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{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);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-45ue06{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);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
-function create_else_block(ctx) {
+function create_else_block$1(ctx) {
 	let backgroundoverlay;
 	let current;
 	backgroundoverlay = new BackgroundOverlay_default({ props: { backgroundOverlay: ctx[4] } });
@@ -17363,7 +17394,7 @@ function create_if_block_2$1(ctx) {
 		}
 	};
 }
-function create_if_block_1$2(ctx) {
+function create_if_block_1$3(ctx) {
 	return {
 		c: noop,
 		l: noop,
@@ -17374,10 +17405,9 @@ function create_if_block_1$2(ctx) {
 		d: noop
 	};
 }
-function create_if_block$4(ctx) {
+function create_if_block$5(ctx) {
 	let div;
 	let div_class_value;
-	let div_style_value;
 	let div_intro;
 	let current;
 	const default_slot_template = ctx[25].default;
@@ -17406,7 +17436,7 @@ function create_if_block$4(ctx) {
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
 			attr(div, "data-layer-id", ctx[2]);
-			attr(div, "style", div_style_value = Array.from(ctx[13]).join(";"));
+			attr(div, "style", Array.from(ctx[13]).join(";"));
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -17445,7 +17475,7 @@ function create_if_block$4(ctx) {
 		}
 	};
 }
-function create_fragment$21(ctx) {
+function create_fragment$23(ctx) {
 	let show_if;
 	let current_block_type_index;
 	let if_block0;
@@ -17455,9 +17485,9 @@ function create_fragment$21(ctx) {
 	let mounted;
 	let dispose;
 	const if_block_creators = [
-		create_if_block_1$2,
+		create_if_block_1$3,
 		create_if_block_2$1,
-		create_else_block
+		create_else_block$1
 	];
 	const if_blocks = [];
 	function select_block_type(ctx$1, dirty) {
@@ -17468,7 +17498,7 @@ function create_fragment$21(ctx) {
 	}
 	current_block_type_index = select_block_type(ctx, -1);
 	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-	let if_block1 = ctx[8] && create_if_block$4(ctx);
+	let if_block1 = ctx[8] && create_if_block$5(ctx);
 	return {
 		c() {
 			if_block0.c();
@@ -17518,7 +17548,7 @@ function create_fragment$21(ctx) {
 				if_block1.p(ctx, dirty);
 				if (dirty & 256) transition_in(if_block1, 1);
 			} else {
-				if_block1 = create_if_block$4(ctx);
+				if_block1 = create_if_block$5(ctx);
 				if_block1.c();
 				transition_in(if_block1, 1);
 				if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
@@ -17552,7 +17582,7 @@ function create_fragment$21(ctx) {
 		}
 	};
 }
-function instance$21($$self, $$props, $$invalidate) {
+function instance$23($$self, $$props, $$invalidate) {
 	let close$2;
 	let backgroundClick;
 	let backgroundClickPC;
@@ -17738,7 +17768,7 @@ function instance$21($$self, $$props, $$invalidate) {
 var Modal = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$21, create_fragment$21, safe_not_equal, {
+		init(this, options, instance$23, create_fragment$23, safe_not_equal, {
 			useBreakPoint: 0,
 			placement: 14,
 			breakPoint: 15,
@@ -17758,7 +17788,7 @@ var Modal_default = Modal;
 function add_css$16(target) {
 	append_styles(target, "svelte-igivoz", ".code.svelte-igivoz{flex-grow:1;flex-shrink:0;align-self:stretch}");
 }
-function create_fragment$20(ctx) {
+function create_fragment$22(ctx) {
 	let div;
 	let raw_value = ctx[0].rawHtml + "";
 	let div_id_value;
@@ -17804,7 +17834,7 @@ function unescapeBraces(str) {
 	if (!str) return str;
 	return str.replace(/\\([{}])/g, "$1");
 }
-function instance$20($$self, $$props, $$invalidate) {
+function instance$22($$self, $$props, $$invalidate) {
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	function injectJavaScript() {
@@ -17841,7 +17871,7 @@ function instance$20($$self, $$props, $$invalidate) {
 var Code = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$20, create_fragment$20, safe_not_equal, {
+		init(this, options, instance$22, create_fragment$22, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$16);
@@ -17858,7 +17888,7 @@ const LIST_ITEM_CONTEXT_KEY = "ListItemContext";
 function add_css$15(target) {
 	append_styles(target, "svelte-v2vy6p", ".list.svelte-v2vy6p{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;--border-width:0;--border-style:solit;--border-color:rgba(255, 255, 255, 0);border-top-width:var(--border-width);border-top-style:var(--border-style);border-top-color:var(--border-color);border-bottom-width:var(--border-width);border-bottom-style:var(--border-style);border-bottom-color:var(--border-color)}");
 }
-function create_fragment$19(ctx) {
+function create_fragment$21(ctx) {
 	let ul;
 	let ul_id_value;
 	let ul_class_value;
@@ -17918,16 +17948,15 @@ function create_fragment$19(ctx) {
 		}
 	};
 }
-function instance$19($$self, $$props, $$invalidate) {
+function instance$21($$self, $$props, $$invalidate) {
 	let variables$1;
 	let actionTableData;
-	let items;
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { layerId } = $$props;
 	let { props } = $$props;
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const vars = getVariables();
 	setContext(LIST_ITEM_CONTEXT_KEY, {
 		paddingTop: props.itemPaddingTop,
@@ -17952,7 +17981,7 @@ function instance$19($$self, $$props, $$invalidate) {
 			"--border-style": props.borderStyle ?? "solid"
 		} : {} });
 		if ($$self.$$.dirty & 2) $: $$invalidate(4, actionTableData = vars[props.actionTableKey]);
-		if ($$self.$$.dirty & 16) $: items = Array.isArray(actionTableData) ? actionTableData : null;
+		if ($$self.$$.dirty & 16) {}
 		if ($$self.$$.dirty & 10) $: $$invalidate(2, style = objToStyle({
 			width: props.width ?? "100%",
 			...variables$1
@@ -17971,7 +18000,7 @@ function instance$19($$self, $$props, $$invalidate) {
 var List = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$19, create_fragment$19, safe_not_equal, {
+		init(this, options, instance$21, create_fragment$21, safe_not_equal, {
 			layerId: 0,
 			props: 1
 		}, add_css$15);
@@ -18058,7 +18087,7 @@ function create_dynamic_element$1(ctx) {
 		}
 	};
 }
-function create_fragment$18(ctx) {
+function create_fragment$20(ctx) {
 	let li;
 	let previous_tag = ctx[5];
 	let li_id_value;
@@ -18130,7 +18159,7 @@ function create_fragment$18(ctx) {
 		}
 	};
 }
-function instance$18($$self, $$props, $$invalidate) {
+function instance$20($$self, $$props, $$invalidate) {
 	let variables$1;
 	let style;
 	let innerStyle;
@@ -18138,7 +18167,7 @@ function instance$18($$self, $$props, $$invalidate) {
 	let { layerId } = $$props;
 	let { props } = $$props;
 	let { item } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const context = getContext(LIST_ITEM_CONTEXT_KEY) || {};
 	$$self.$$set = ($$props$1) => {
@@ -18179,7 +18208,7 @@ function instance$18($$self, $$props, $$invalidate) {
 var ListItem = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$18, create_fragment$18, safe_not_equal, {
+		init(this, options, instance$20, create_fragment$20, safe_not_equal, {
 			layerId: 0,
 			props: 1,
 			item: 7
@@ -18216,7 +18245,7 @@ function splitNumberAndUnit(value) {
 function add_css$13(target) {
 	append_styles(target, "svelte-9pwfkr", ".multi-column.svelte-9pwfkr{padding:0;margin:0;list-style:none;display:flex;flex-direction:row}");
 }
-function create_fragment$17(ctx) {
+function create_fragment$19(ctx) {
 	let ul;
 	let ul_id_value;
 	let ul_class_value;
@@ -18276,13 +18305,13 @@ function create_fragment$17(ctx) {
 		}
 	};
 }
-function instance$17($$self, $$props, $$invalidate) {
+function instance$19($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { layerId } = $$props;
 	let { props } = $$props;
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	let listGap = (() => {
 		if (!props.gap) return "0";
 		const { number, unit } = splitNumberAndUnit(props.gap);
@@ -18327,7 +18356,7 @@ function instance$17($$self, $$props, $$invalidate) {
 var MultiColumn = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$17, create_fragment$17, safe_not_equal, {
+		init(this, options, instance$19, create_fragment$19, safe_not_equal, {
 			layerId: 0,
 			props: 1
 		}, add_css$13);
@@ -18403,7 +18432,7 @@ function create_dynamic_element(ctx) {
 		}
 	};
 }
-function create_fragment$16(ctx) {
+function create_fragment$18(ctx) {
 	let li;
 	let previous_tag = ctx[4];
 	let li_id_value;
@@ -18475,13 +18504,13 @@ function create_fragment$16(ctx) {
 		}
 	};
 }
-function instance$16($$self, $$props, $$invalidate) {
+function instance$18($$self, $$props, $$invalidate) {
 	let variables$1;
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { layerId } = $$props;
 	let { props } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const context = getContext(MULTI_COLUMN_ITEM_CONTEXT_KEY) || {};
 	$$self.$$set = ($$props$1) => {
@@ -18520,7 +18549,7 @@ function instance$16($$self, $$props, $$invalidate) {
 var MultiColumnItem = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$16, create_fragment$16, safe_not_equal, {
+		init(this, options, instance$18, create_fragment$18, safe_not_equal, {
 			layerId: 0,
 			props: 1
 		}, add_css$12);
@@ -18533,7 +18562,7 @@ var MultiColumnItem_default = MultiColumnItem;
 function add_css$11(target) {
 	append_styles(target, "svelte-odfkc2", ".youtube.svelte-odfkc2{position:relative;aspect-ratio:16 / 9;width:100%;border-radius:3px}.youtube.svelte-odfkc2 iframe{position:absolute;width:100%;height:100%;object-fit:cover}");
 }
-function create_fragment$15(ctx) {
+function create_fragment$17(ctx) {
 	let div1;
 	let div0;
 	let div1_id_value;
@@ -18599,11 +18628,11 @@ function onPlayerStateChange(event) {
 			break;
 	}
 }
-function instance$15($$self, $$props, $$invalidate) {
+function instance$17($$self, $$props, $$invalidate) {
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	if (!window.YT) {
 		const tag = document.createElement("script");
 		tag.src = "https://www.youtube.com/iframe_api";
@@ -18682,7 +18711,7 @@ function instance$15($$self, $$props, $$invalidate) {
 var Youtube = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$15, create_fragment$15, safe_not_equal, {
+		init(this, options, instance$17, create_fragment$17, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$11);
@@ -18707,7 +18736,7 @@ const get_default_slot_context$1 = (ctx) => ({
 	min: ctx[3],
 	sec: ctx[2]
 });
-function create_fragment$14(ctx) {
+function create_fragment$16(ctx) {
 	let div;
 	let div_id_value;
 	let div_class_value;
@@ -18779,7 +18808,7 @@ function formatTimeDiff(ms) {
 		sec: diffSec
 	};
 }
-function instance$14($$self, $$props, $$invalidate) {
+function instance$16($$self, $$props, $$invalidate) {
 	let day;
 	let hour;
 	let min;
@@ -18787,7 +18816,7 @@ function instance$14($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	let remainingTime;
 	let timeLimit = props.timeLimit ? new Date(props.timeLimit) : /* @__PURE__ */ new Date();
 	function onEachSecond() {
@@ -18833,7 +18862,7 @@ function instance$14($$self, $$props, $$invalidate) {
 var CountDown = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$14, create_fragment$14, safe_not_equal, {
+		init(this, options, instance$16, create_fragment$16, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$10);
@@ -18843,8 +18872,8 @@ var CountDown_default = CountDown;
 
 //#endregion
 //#region src/hooks/useText.ts
-const useText = (props) => {
-	useInjectCustomizeCss(props);
+const useText = (props, layerId) => {
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	const themeStyles = getTextThemeStyles(brandKit);
 	const fontFamilyStyles = props.fontFamilyVariant in FONT_FAMILY_VARIANT ? FONT_FAMILY_VARIANT[props.fontFamilyVariant].getProps(brandKit) : FONT_FAMILY_VARIANT.default.getProps(brandKit);
@@ -18900,7 +18929,7 @@ const useText = (props) => {
 
 //#endregion
 //#region src/components-flex/count-down/CountDownValue.svelte
-function create_fragment$13(ctx) {
+function create_fragment$15(ctx) {
 	let span;
 	let t;
 	let span_id_value;
@@ -18946,14 +18975,14 @@ function create_fragment$13(ctx) {
 		}
 	};
 }
-function instance$13($$self, $$props, $$invalidate) {
+function instance$15($$self, $$props, $$invalidate) {
 	let value;
 	let $countdownStore;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	let countdownStore = getContext("countdownStore");
 	component_subscribe($$self, countdownStore, (value$1) => $$invalidate(5, $countdownStore = value$1));
-	let { style } = useText(props);
+	let { style } = useText(props, layerId);
 	$$self.$$set = ($$props$1) => {
 		if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
 		if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
@@ -18982,7 +19011,7 @@ function instance$13($$self, $$props, $$invalidate) {
 var CountDownValue = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$13, create_fragment$13, safe_not_equal, {
+		init(this, options, instance$15, create_fragment$15, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		});
@@ -18995,7 +19024,7 @@ var CountDownValue_default = CountDownValue;
 function add_css$9(target) {
 	append_styles(target, "svelte-orhp4c", ".clipboard.svelte-orhp4c{position:relative;display:inline-flex}.clipboard-button.svelte-orhp4c{position:relative;display:inline-flex;align-items:center;white-space:nowrap;gap:12px;background:none;border:0;transition:0.12s;cursor:pointer}.clipboard-button.svelte-orhp4c:hover{opacity:0.8}.clipboard-button.svelte-orhp4c:active{opacity:0.6}.clipboard-tooltip.svelte-orhp4c{position:absolute;top:-8px;left:50%;display:block;transform:translate(-50%, -100%);padding:4px 10px;background-color:#333333;color:#ffffff;font-size:11px;font-weight:bold;border-radius:4px;transition:transform 0.2s ease-out;white-space:nowrap;pointer-events:none}.clipboard-tooltip.svelte-orhp4c:after{content:'';display:block;position:absolute;bottom:0;left:50%;width:8px;height:8px;background-color:#333333;border-radius:1px;transform:translate(-50%, 40%) rotate(45deg)}.clipboard-tooltip[aria-hidden='true'].svelte-orhp4c{opacity:0;transform:translate(-50%, -80%)}");
 }
-function create_fragment$12(ctx) {
+function create_fragment$14(ctx) {
 	let div;
 	let button;
 	let t0;
@@ -19090,11 +19119,11 @@ function create_fragment$12(ctx) {
 		}
 	};
 }
-function instance$12($$self, $$props, $$invalidate) {
+function instance$14($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	let buttonElement;
 	let showTooltip = false;
 	const handleClick = (e) => {
@@ -19133,7 +19162,7 @@ function instance$12($$self, $$props, $$invalidate) {
 var ClipCopy = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$12, create_fragment$12, safe_not_equal, {
+		init(this, options, instance$14, create_fragment$14, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$9);
@@ -19146,7 +19175,7 @@ var ClipCopy_default = ClipCopy;
 function add_css$8(target) {
 	append_styles(target, "svelte-nekp9e", ".form.svelte-nekp9e{width:100%}");
 }
-function create_fragment$11(ctx) {
+function create_fragment$13(ctx) {
 	let div;
 	let div_id_value;
 	let div_class_value;
@@ -19203,11 +19232,11 @@ function create_fragment$11(ctx) {
 		}
 	};
 }
-function instance$11($$self, $$props, $$invalidate) {
+function instance$13($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	$$self.$$set = ($$props$1) => {
 		if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
 		if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
@@ -19223,7 +19252,7 @@ function instance$11($$self, $$props, $$invalidate) {
 var Form = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$11, create_fragment$11, safe_not_equal, {
+		init(this, options, instance$13, create_fragment$13, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$8);
@@ -19253,7 +19282,7 @@ function add_css$7(target) {
 }
 const get_default_slot_changes = (dirty) => ({ "data-layer-id": dirty & 2 });
 const get_default_slot_context = (ctx) => ({ "data-layer-id": ctx[1] });
-function create_if_block_1$1(ctx) {
+function create_if_block_1$2(ctx) {
 	let dt;
 	let span;
 	let t0_value = ctx[0].label + "";
@@ -19341,7 +19370,7 @@ function create_if_block_2(ctx) {
 		}
 	};
 }
-function create_if_block$3(ctx) {
+function create_if_block$4(ctx) {
 	let p;
 	let t;
 	return {
@@ -19372,17 +19401,17 @@ function create_if_block$3(ctx) {
 		}
 	};
 }
-function create_fragment$10(ctx) {
+function create_fragment$12(ctx) {
 	let dl;
 	let dd;
 	let t;
 	let dl_id_value;
 	let dl_class_value;
 	let current;
-	let if_block0 = ctx[0].label && create_if_block_1$1(ctx);
+	let if_block0 = ctx[0].label && create_if_block_1$2(ctx);
 	const default_slot_template = ctx[8].default;
 	const default_slot = create_slot(default_slot_template, ctx, ctx[7], get_default_slot_context);
-	let if_block1 = ctx[3] && ctx[2] && create_if_block$3(ctx);
+	let if_block1 = ctx[3] && ctx[2] && create_if_block$4(ctx);
 	return {
 		c() {
 			dl = element("dl");
@@ -19434,7 +19463,7 @@ function create_fragment$10(ctx) {
 		p(ctx$1, [dirty]) {
 			if (ctx$1[0].label) if (if_block0) if_block0.p(ctx$1, dirty);
 			else {
-				if_block0 = create_if_block_1$1(ctx$1);
+				if_block0 = create_if_block_1$2(ctx$1);
 				if_block0.c();
 				if_block0.m(dl, dd);
 			}
@@ -19447,7 +19476,7 @@ function create_fragment$10(ctx) {
 			}
 			if (ctx$1[3] && ctx$1[2]) if (if_block1) if_block1.p(ctx$1, dirty);
 			else {
-				if_block1 = create_if_block$3(ctx$1);
+				if_block1 = create_if_block$4(ctx$1);
 				if_block1.c();
 				if_block1.m(dd, null);
 			}
@@ -19481,13 +19510,13 @@ function create_fragment$10(ctx) {
 		}
 	};
 }
-function instance$10($$self, $$props, $$invalidate) {
+function instance$12($$self, $$props, $$invalidate) {
 	let variables$1;
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	let registeredFieldName = "";
 	let errorMessage = null;
@@ -19520,7 +19549,9 @@ function instance$10($$self, $$props, $$invalidate) {
 					type: props.fieldType,
 					name: props.fieldName,
 					defaultValue: props.defaultValue,
-					required: props.required
+					required: props.required,
+					validations: props.validations,
+					isIdentify: props.isIdentify
 				});
 				formStore.subscribe(($store) => {
 					$$invalidate(2, errorMessage = $store.states[props.fieldName]?.errorMessage ?? null);
@@ -19545,7 +19576,7 @@ function instance$10($$self, $$props, $$invalidate) {
 var FormField = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$10, create_fragment$10, safe_not_equal, {
+		init(this, options, instance$12, create_fragment$12, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$7);
@@ -19565,12 +19596,22 @@ const FORM_FIELD_LABEL_THEME = {
 	gray: "グレー",
 	brand: "ブランド"
 };
+const FORM_IDENTIFY_FIELD_TYPE = {
+	email: "メールアドレス",
+	subscription: "メールマガジン登録",
+	phone: "電話番号",
+	phone_subscribe: "SMS配信許可",
+	first_name: "名前（名）",
+	last_name: "名前（姓）",
+	address: "住所"
+};
 const FORM_FIELD_TYPE = {
 	INPUT: "input",
 	SELECT: "select",
 	CHECKBOX: "checkbox",
 	CHECKBOXES: "checkboxes",
 	RADIOS: "radio",
+	BOOLEAN: "boolean",
 	TEXTAREA: "textarea"
 };
 const FORM_FIELD_VARIANT = {
@@ -19596,7 +19637,7 @@ const FORM_INPUT_TYPE = {
 
 //#endregion
 //#region src/components-flex/state/Header.svelte
-function create_if_block$2(ctx) {
+function create_if_block$3(ctx) {
 	let link;
 	return {
 		c() {
@@ -19627,9 +19668,9 @@ function create_if_block$2(ctx) {
 		}
 	};
 }
-function create_fragment$9(ctx) {
+function create_fragment$11(ctx) {
 	let if_block_anchor;
-	let if_block = ctx[0] && create_if_block$2(ctx);
+	let if_block = ctx[0] && create_if_block$3(ctx);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -19648,7 +19689,7 @@ function create_fragment$9(ctx) {
 		p(ctx$1, [dirty]) {
 			if (ctx$1[0]) if (if_block) if_block.p(ctx$1, dirty);
 			else {
-				if_block = create_if_block$2(ctx$1);
+				if_block = create_if_block$3(ctx$1);
 				if_block.c();
 				if_block.m(if_block_anchor.parentNode, if_block_anchor);
 			}
@@ -19665,7 +19706,7 @@ function create_fragment$9(ctx) {
 		}
 	};
 }
-function instance$9($$self, $$props, $$invalidate) {
+function instance$11($$self, $$props, $$invalidate) {
 	let $fonts;
 	component_subscribe($$self, fonts, ($$value) => $$invalidate(1, $fonts = $$value));
 	let googleFontUrl = "";
@@ -19683,14 +19724,14 @@ function instance$9($$self, $$props, $$invalidate) {
 var Header = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$9, create_fragment$9, safe_not_equal, {});
+		init(this, options, instance$11, create_fragment$11, safe_not_equal, {});
 	}
 };
 var Header_default = Header;
 
 //#endregion
 //#region src/components-flex/state/State.svelte
-function create_fragment$8(ctx) {
+function create_fragment$10(ctx) {
 	let header;
 	let t;
 	let current;
@@ -19737,7 +19778,7 @@ function create_fragment$8(ctx) {
 		}
 	};
 }
-function instance$8($$self, $$props, $$invalidate) {
+function instance$10($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { customBrandKit = void 0 } = $$props;
 	setContext("brandKit", getBrandKit(customBrandKit));
@@ -19754,7 +19795,7 @@ function instance$8($$self, $$props, $$invalidate) {
 var State = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { customBrandKit: 0 });
+		init(this, options, instance$10, create_fragment$10, safe_not_equal, { customBrandKit: 0 });
 	}
 };
 var State_default$1 = State;
@@ -19764,7 +19805,7 @@ var State_default$1 = State;
 function add_css$6(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
-function create_if_block$1(ctx) {
+function create_if_block$2(ctx) {
 	let div;
 	let t;
 	let current;
@@ -19819,10 +19860,10 @@ function create_if_block$1(ctx) {
 		}
 	};
 }
-function create_fragment$7(ctx) {
+function create_fragment$9(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = ctx[1] === ctx[0] && create_if_block$1(ctx);
+	let if_block = ctx[1] === ctx[0] && create_if_block$2(ctx);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -19842,7 +19883,7 @@ function create_fragment$7(ctx) {
 				if_block.p(ctx$1, dirty);
 				if (dirty & 3) transition_in(if_block, 1);
 			} else {
-				if_block = create_if_block$1(ctx$1);
+				if_block = create_if_block$2(ctx$1);
 				if_block.c();
 				transition_in(if_block, 1);
 				if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -19871,7 +19912,7 @@ function create_fragment$7(ctx) {
 	};
 }
 const STATE_ITEM_CONTEXT_KEY = Symbol();
-function instance$7($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, ($$value) => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -19894,7 +19935,7 @@ function instance$7($$self, $$props, $$invalidate) {
 var StateItem = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { path: 0 }, add_css$6);
+		init(this, options, instance$9, create_fragment$9, safe_not_equal, { path: 0 }, add_css$6);
 	}
 };
 var StateItem_default$1 = StateItem;
@@ -19904,7 +19945,7 @@ var StateItem_default$1 = StateItem;
 function add_css$5(target) {
 	append_styles(target, "svelte-13tkwh0", ".embed.svelte-13tkwh0{width:var(--width);height:var(--height);aspect-ratio:var(--aspect)}.embed.svelte-13tkwh0 iframe{vertical-align:bottom;max-width:100%;width:var(--width) !important;height:var(--height) !important;aspect-ratio:var(--aspect) !important}");
 }
-function create_fragment$6(ctx) {
+function create_fragment$8(ctx) {
 	let div;
 	let raw_value = ctx[0].iframe + "";
 	let div_id_value;
@@ -19949,13 +19990,13 @@ function create_fragment$6(ctx) {
 		}
 	};
 }
-function instance$6($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let variables$1;
 	let styleObj;
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const aspectVariantStyles = ASPECT_VARIANT[props.aspectVariant]?.getProps();
 	const width = props.width ?? "100%";
 	$$self.$$set = ($$props$1) => {
@@ -19985,7 +20026,7 @@ function instance$6($$self, $$props, $$invalidate) {
 var Embed = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, {
+		init(this, options, instance$8, create_fragment$8, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$5);
@@ -20061,7 +20102,7 @@ function create_default_slot$5(ctx) {
 		}
 	};
 }
-function create_fragment$5(ctx) {
+function create_fragment$7(ctx) {
 	let formfield;
 	let current;
 	formfield = new FormField_default({ props: {
@@ -20105,16 +20146,15 @@ function create_fragment$5(ctx) {
 		}
 	};
 }
-function instance$5($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let variant;
 	let size;
 	let variables$1;
 	let style;
-	let type;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	let value = "";
 	const handleBlur = () => {
 		if (props.fieldName) {
@@ -20150,7 +20190,7 @@ function instance$5($$self, $$props, $$invalidate) {
 			};
 		})());
 		if ($$self.$$.dirty & 256) $: $$invalidate(3, style = objToStyle({ ...variables$1 }));
-		if ($$self.$$.dirty & 1) $: type = (() => {
+		if ($$self.$$.dirty & 1) $: (() => {
 			if (props.inputType === "url") return "url";
 			if (props.inputType === "tel") return "tel";
 			if (props.inputType === "email") return "email";
@@ -20173,7 +20213,7 @@ function instance$5($$self, $$props, $$invalidate) {
 var FormInput = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, {
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$4);
@@ -20252,7 +20292,7 @@ function create_default_slot$4(ctx) {
 		}
 	};
 }
-function create_fragment$4(ctx) {
+function create_fragment$6(ctx) {
 	let formfield;
 	let current;
 	formfield = new FormField_default({ props: {
@@ -20296,7 +20336,7 @@ function create_fragment$4(ctx) {
 		}
 	};
 }
-function instance$4($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let variant;
 	let size;
 	let variables$1;
@@ -20304,7 +20344,7 @@ function instance$4($$self, $$props, $$invalidate) {
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	let value = "";
 	const handleBlur = () => {
 		if (props.fieldName) {
@@ -20357,7 +20397,7 @@ function instance$4($$self, $$props, $$invalidate) {
 var FormTextarea = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$4, create_fragment$4, safe_not_equal, {
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$3);
@@ -20519,7 +20559,7 @@ function create_default_slot$3(ctx) {
 		}
 	};
 }
-function create_fragment$3(ctx) {
+function create_fragment$5(ctx) {
 	let formfield;
 	let current;
 	formfield = new FormField_default({ props: {
@@ -20563,7 +20603,7 @@ function create_fragment$3(ctx) {
 		}
 	};
 }
-function instance$3($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let variant;
 	let size;
 	let isEmpty$1;
@@ -20572,7 +20612,7 @@ function instance$3($$self, $$props, $$invalidate) {
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	let value = "";
 	const handleChange = () => {
 		if (props.fieldName) {
@@ -20624,7 +20664,7 @@ function instance$3($$self, $$props, $$invalidate) {
 var FormSelect = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, {
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$2);
@@ -20807,7 +20847,7 @@ function create_default_slot$2(ctx) {
 		}
 	};
 }
-function create_fragment$2(ctx) {
+function create_fragment$4(ctx) {
 	let formfield;
 	let current;
 	formfield = new FormField_default({ props: {
@@ -20851,7 +20891,7 @@ function create_fragment$2(ctx) {
 		}
 	};
 }
-function instance$2($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let variant;
 	let size;
 	let options;
@@ -20859,7 +20899,7 @@ function instance$2($$self, $$props, $$invalidate) {
 	let listStyles;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	let values = [];
 	const handleChange = () => {
@@ -20903,7 +20943,7 @@ function instance$2($$self, $$props, $$invalidate) {
 			})(),
 			"--checkbox-check-size": (() => {
 				if (size === "small") return "14x";
-				if (size === "large") return "20px";
+				if (size === "large") return "18px";
 				return "16px";
 			})(),
 			"--checkbox-check-radius": (() => {
@@ -20940,7 +20980,7 @@ function instance$2($$self, $$props, $$invalidate) {
 var FormCheckboxes = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$2, create_fragment$2, safe_not_equal, {
+		init(this, options, instance$4, create_fragment$4, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css$1);
@@ -21123,7 +21163,7 @@ function create_default_slot$1(ctx) {
 		}
 	};
 }
-function create_fragment$1(ctx) {
+function create_fragment$3(ctx) {
 	let formfield;
 	let current;
 	formfield = new FormField_default({ props: {
@@ -21167,7 +21207,7 @@ function create_fragment$1(ctx) {
 		}
 	};
 }
-function instance$1($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
 	let variant;
 	let size;
 	let options;
@@ -21175,7 +21215,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	let listStyles;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
-	useInjectCustomizeCss(props);
+	useInjectCustomizeCss(props, layerId);
 	const { brandKit } = useBrandKit();
 	let value = "";
 	const handleChange = () => {
@@ -21261,7 +21301,7 @@ function instance$1($$self, $$props, $$invalidate) {
 var FormRadios = class extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1, create_fragment$1, safe_not_equal, {
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, {
 			props: 0,
 			layerId: 1
 		}, add_css);
@@ -21269,6 +21309,290 @@ var FormRadios = class extends SvelteComponent {
 };
 var FormRadios_default = FormRadios;
 
+//#endregion
+//#region src/components-flex/form/FormBoolean.svelte
+function create_fragment$2(ctx) {
+	let formradios;
+	let current;
+	formradios = new FormRadios_default({ props: {
+		layerId: ctx[1],
+		props: ctx[0]
+	} });
+	return {
+		c() {
+			create_component(formradios.$$.fragment);
+		},
+		l(nodes) {
+			claim_component(formradios.$$.fragment, nodes);
+		},
+		m(target, anchor) {
+			mount_component(formradios, target, anchor);
+			current = true;
+		},
+		p(ctx$1, [dirty]) {
+			const formradios_changes = {};
+			if (dirty & 2) formradios_changes.layerId = ctx$1[1];
+			if (dirty & 1) formradios_changes.props = ctx$1[0];
+			formradios.$set(formradios_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(formradios.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(formradios.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(formradios, detaching);
+		}
+	};
+}
+function instance$2($$self, $$props, $$invalidate) {
+	let { props = {} } = $$props;
+	let { layerId = "" } = $$props;
+	$$self.$$set = ($$props$1) => {
+		if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
+		if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
+	};
+	return [props, layerId];
+}
+var FormBoolean = class extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$2, create_fragment$2, safe_not_equal, {
+			props: 0,
+			layerId: 1
+		});
+	}
+};
+var FormBoolean_default = FormBoolean;
+
+//#endregion
+//#region src/components-flex/form/FormIdentifyField.svelte
+function create_else_block(ctx) {
+	return {
+		c: noop,
+		l: noop,
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+function create_if_block_1$1(ctx) {
+	let formboolean;
+	let current;
+	formboolean = new FormBoolean_default({ props: {
+		layerId: ctx[0],
+		props: ctx[1]
+	} });
+	return {
+		c() {
+			create_component(formboolean.$$.fragment);
+		},
+		l(nodes) {
+			claim_component(formboolean.$$.fragment, nodes);
+		},
+		m(target, anchor) {
+			mount_component(formboolean, target, anchor);
+			current = true;
+		},
+		p(ctx$1, dirty) {
+			const formboolean_changes = {};
+			if (dirty & 1) formboolean_changes.layerId = ctx$1[0];
+			if (dirty & 2) formboolean_changes.props = ctx$1[1];
+			formboolean.$set(formboolean_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(formboolean.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(formboolean.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(formboolean, detaching);
+		}
+	};
+}
+function create_if_block$1(ctx) {
+	let forminput;
+	let current;
+	forminput = new FormInput_default({ props: {
+		layerId: ctx[0],
+		props: ctx[2]
+	} });
+	return {
+		c() {
+			create_component(forminput.$$.fragment);
+		},
+		l(nodes) {
+			claim_component(forminput.$$.fragment, nodes);
+		},
+		m(target, anchor) {
+			mount_component(forminput, target, anchor);
+			current = true;
+		},
+		p(ctx$1, dirty) {
+			const forminput_changes = {};
+			if (dirty & 1) forminput_changes.layerId = ctx$1[0];
+			if (dirty & 4) forminput_changes.props = ctx$1[2];
+			forminput.$set(forminput_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(forminput.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(forminput.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(forminput, detaching);
+		}
+	};
+}
+function create_fragment$1(ctx) {
+	let current_block_type_index;
+	let if_block;
+	let if_block_anchor;
+	let current;
+	const if_block_creators = [
+		create_if_block$1,
+		create_if_block_1$1,
+		create_else_block
+	];
+	const if_blocks = [];
+	function select_block_type(ctx$1, dirty) {
+		if (ctx$1[2]) return 0;
+		if (ctx$1[1]) return 1;
+		return 2;
+	}
+	current_block_type_index = select_block_type(ctx, -1);
+	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+	return {
+		c() {
+			if_block.c();
+			if_block_anchor = empty();
+		},
+		l(nodes) {
+			if_block.l(nodes);
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if_blocks[current_block_type_index].m(target, anchor);
+			insert_hydration(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx$1, [dirty]) {
+			let previous_block_index = current_block_type_index;
+			current_block_type_index = select_block_type(ctx$1, dirty);
+			if (current_block_type_index === previous_block_index) if_blocks[current_block_type_index].p(ctx$1, dirty);
+			else {
+				group_outros();
+				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+					if_blocks[previous_block_index] = null;
+				});
+				check_outros();
+				if_block = if_blocks[current_block_type_index];
+				if (!if_block) {
+					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx$1);
+					if_block.c();
+				} else if_block.p(ctx$1, dirty);
+				transition_in(if_block, 1);
+				if_block.m(if_block_anchor.parentNode, if_block_anchor);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if_blocks[current_block_type_index].d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+function instance$1($$self, $$props, $$invalidate) {
+	let fieldType;
+	let fieldProps;
+	let inputProps;
+	let booleanProps;
+	let { props = {} } = $$props;
+	let { layerId = "" } = $$props;
+	useInjectCustomizeCss(props, layerId);
+	const identifyType = props.identifyType ?? "email";
+	$$self.$$set = ($$props$1) => {
+		if ("props" in $$props$1) $$invalidate(3, props = $$props$1.props);
+		if ("layerId" in $$props$1) $$invalidate(0, layerId = $$props$1.layerId);
+	};
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & 40) $: $$invalidate(4, fieldProps = (() => {
+			return {
+				...props,
+				fieldType,
+				fieldName: identifyType,
+				isIdentify: true
+			};
+		})());
+		if ($$self.$$.dirty & 56) $: $$invalidate(2, inputProps = (() => {
+			if (fieldType !== "input") return null;
+			return {
+				...fieldProps,
+				...props.inputProps ?? {}
+			};
+		})());
+		if ($$self.$$.dirty & 56) $: $$invalidate(1, booleanProps = (() => {
+			if (fieldType !== "boolean") return null;
+			return {
+				...fieldProps,
+				...props.checkerProps ?? {}
+			};
+		})());
+	};
+	$: $$invalidate(5, fieldType = (() => {
+		switch (identifyType) {
+			case "phone_subscribe":
+			case "subscription": return "boolean";
+			case "address":
+			case "first_name":
+			case "last_name":
+			case "email":
+			case "phone":
+			default: return "input";
+		}
+	})());
+	return [
+		layerId,
+		booleanProps,
+		inputProps,
+		props,
+		fieldProps,
+		fieldType
+	];
+}
+var FormIdentifyField = class extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$1, create_fragment$1, safe_not_equal, {
+			props: 3,
+			layerId: 0
+		});
+	}
+};
+var FormIdentifyField_default = FormIdentifyField;
+
 //#endregion
 //#region src/components-flex/shared/styles.ts
 const ROUND_STYLES = {
@@ -21541,7 +21865,11 @@ __export(index_svelte5_exports, {
 	FORM_FIELD_TYPE: () => FORM_FIELD_TYPE,
 	FORM_FIELD_VARIANT: () => FORM_FIELD_VARIANT,
 	FORM_FIELD_VARIANT_FOR_CHECKER: () => FORM_FIELD_VARIANT_FOR_CHECKER,
+	FORM_IDENTIFY_FIELD_TYPE: () => FORM_IDENTIFY_FIELD_TYPE,
 	FORM_INPUT_TYPE: () => FORM_INPUT_TYPE,
+	FORM_VALIDATION_DEFAULT_ERROR_MESSAGES: () => FORM_VALIDATION_DEFAULT_ERROR_MESSAGES,
+	FORM_VALIDATION_REGEX: () => FORM_VALIDATION_REGEX,
+	FORM_VALIDATION_TYPE: () => FORM_VALIDATION_TYPE,
 	FlexAvatar: () => Avatar_default,
 	FlexButton: () => Button_default,
 	FlexButtonOutlined: () => ButtonOutlined_default,
@@ -21554,8 +21882,10 @@ __export(index_svelte5_exports, {
 	FlexDirections: () => FlexDirections,
 	FlexEmbed: () => Embed_default,
 	FlexForm: () => Form_default,
+	FlexFormBoolean: () => FormBoolean_default,
 	FlexFormCheckboxes: () => FormCheckboxes_default,
 	FlexFormField: () => FormField_default,
+	FlexFormIdentifyField: () => FormIdentifyField_default,
 	FlexFormInput: () => FormInput_default,
 	FlexFormRadios: () => FormRadios_default,
 	FlexFormSelect: () => FormSelect_default$1,
@@ -21646,6 +21976,7 @@ __export(index_svelte5_exports, {
 	flexComponentSchemes: () => flexComponentSchemes,
 	formData: () => formData,
 	formStore: () => formStore,
+	formSubmittedIdentifyValues: () => formSubmittedIdentifyValues,
 	formSubmittedValues: () => formSubmittedValues,
 	getActionRoot: () => getActionRoot$1,
 	getAnsweredQuestion: () => getAnsweredQuestion,
@@ -22021,4 +22352,4 @@ var ThumbnailPreview = class extends SvelteComponent {
 var ThumbnailPreview_default = ThumbnailPreview;
 
 //#endregion
-export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_INPUT_TYPE, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Form_default as FlexForm, FormField_default as FlexFormField, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_IDENTIFY_FIELD_TYPE, FORM_INPUT_TYPE, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Form_default as FlexForm, FormField_default as FlexFormField, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };