@plaidev/karte-action-sdk 1.1.270-29228770.05dce6ca → 1.1.270-29270501.62e803ca6

package/dist/svelte5/index.front2.es.js

@@ -371,6 +371,11 @@ const OnClickOperationOptions = [
 				name: "decode",
 				type: "BooleanKeyword",
 				default: false
+			},
+			{
+				name: "keep_native_action_viewed",
+				type: "BooleanKeyword",
+				default: false
 			}
 		]
 	},
@@ -2445,7 +2450,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];
@@ -2459,7 +2464,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,
@@ -2849,6 +2854,33 @@ const LAYOUT_COMPONENT_NAMES = [
 
 //#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
 */
@@ -2857,6 +2889,7 @@ const formStore = writable({
 	states: {}
 });
 const formSubmittedValues = writable({});
+const formSubmittedIdentifyValues = writable({});
 /**
 * @public
 */
@@ -2875,7 +2908,6 @@ const getFormFieldState = (name) => {
 * @public
 */
 const getFormFieldValue = (name) => {
-	console.log("getFormFieldValue", getFormFieldState(name)?.value ?? void 0);
 	return getFormFieldState(name)?.value ?? void 0;
 };
 /**
@@ -2963,14 +2995,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;
@@ -2978,21 +3014,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;
 		})()
@@ -3017,31 +3055,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 } = 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) {
+			if (typeof value === "string" && new RegExp(regexp).test(value) === false) return {
+				isValid: false,
+				error: errorMessage || FORM_VALIDATION_DEFAULT_ERROR_MESSAGES[type]
+			};
+		}
+		if (type === "email") {
+			if (typeof value === "string" && new RegExp(regexp || 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 || 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 || 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);
@@ -3051,6 +3139,9 @@ function formDataToEventValues(campaignId, formData$1) {
 		...answersMap
 	} };
 }
+function formDataToIdentifyEventValues(values) {
+	return Object.fromEntries(Object.entries(values).map(([name, { value }]) => [name, value]));
+}
 /**
 * @public
 */
@@ -3078,13 +3169,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))
 		});
 	}
@@ -3110,16 +3218,14 @@ function Header($$anchor, $$props) {
 	$.head(($$anchor$1) => {
 		var fragment = $.comment();
 		var node = $.first_child(fragment);
-		{
-			var consequent = ($$anchor$2) => {
-				var link = root_2$9();
-				$.template_effect(() => $.set_attribute(link, "href", $.get(googleFontUrl)));
-				$.append($$anchor$2, link);
-			};
-			$.if(node, ($$render) => {
-				if ($.get(googleFontUrl)) $$render(consequent);
-			});
-		}
+		var consequent = ($$anchor$2) => {
+			var link = root_2$9();
+			$.template_effect(() => $.set_attribute(link, "href", $.get(googleFontUrl)));
+			$.append($$anchor$2, link);
+		};
+		$.if(node, ($$render) => {
+			if ($.get(googleFontUrl)) $$render(consequent);
+		});
 		$.append($$anchor$1, fragment);
 	});
 	$.pop();
@@ -3191,13 +3297,13 @@ function State($$anchor, $$props) {
 //#region src/components-flex/state/StateItem.svelte
 const STATE_ITEM_CONTEXT_KEY = Symbol();
 var root_1$15 = $.template(`<div class="state-item svelte-2qb6dm"></div> <!>`, 1);
-const $$css$31 = {
+const $$css$33 = {
 	hash: "svelte-2qb6dm",
 	code: ".state-item.svelte-2qb6dm {position:absolute;display:none;}"
 };
 function StateItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$31);
+	$.append_styles($$anchor, $$css$33);
 	const [$$stores, $$cleanup] = $.setup_stores();
 	const $state = () => $.store_get(state, "$state", $$stores);
 	let path = $.prop($$props, "path", 8);
@@ -3209,19 +3315,17 @@ function StateItem($$anchor, $$props) {
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	{
-		var consequent = ($$anchor$1) => {
-			var fragment_1 = root_1$15();
-			var div = $.first_child(fragment_1);
-			var node_1 = $.sibling(div, 2);
-			$.slot(node_1, $$props, "default", {}, null);
-			$.template_effect(() => $.set_attribute(div, "data-state-path", path()));
-			$.append($$anchor$1, fragment_1);
-		};
-		$.if(node, ($$render) => {
-			if ($state() === path()) $$render(consequent);
-		});
-	}
+	var consequent = ($$anchor$1) => {
+		var fragment_1 = root_1$15();
+		var div = $.first_child(fragment_1);
+		var node_1 = $.sibling(div, 2);
+		$.slot(node_1, $$props, "default", {}, null);
+		$.template_effect(() => $.set_attribute(div, "data-state-path", path()));
+		$.append($$anchor$1, fragment_1);
+	};
+	$.if(node, ($$render) => {
+		if ($state() === path()) $$render(consequent);
+	});
 	$.append($$anchor, fragment);
 	$.pop();
 	$$cleanup();
@@ -3533,7 +3637,7 @@ const moveTo = (to) => () => {
 	_moveTo(to);
 };
 /** @internal */
-const linkTo = (to, targetBlank = true, decode = false) => () => {
+const linkTo = (to, targetBlank = true, decode = false, keepNativeActionViewed = false) => () => {
 	const decodedTo = decode ? decodeURI(to) : to;
 	const { target } = getActionRunnerContext() ?? {};
 	async function sleep(ms) {
@@ -3546,10 +3650,23 @@ const linkTo = (to, targetBlank = true, decode = false) => () => {
 		});
 		await sleep(450);
 	}
-	const isRequiredWindowOpen = target === "native" ? false : targetBlank;
-	if (isRequiredWindowOpen) window.open(decodedTo);
+	let doTransitionByLocation = true;
+	if (target === "native" && targetBlank && keepNativeActionViewed) {
+		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);
+		doTransitionByLocation = false;
+	} else if (target === "web" && targetBlank) {
+		window.open(decodedTo, "_blank");
+		doTransitionByLocation = false;
+	}
 	Promise.race([_send(), sleep(650)]).then(() => {
-		if (!isRequiredWindowOpen) location.href = decodedTo;
+		if (doTransitionByLocation) location.href = decodedTo;
 	});
 };
 /** @internal */
@@ -3576,18 +3693,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);
 	});
 };
@@ -3750,32 +3873,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$49) => {
+			if (root$49 && root$49.shadowRoot) {
+				const existingStyles = Array.from(root$49.shadowRoot.querySelectorAll(`style[${DATA_ATTR_LAYER_ID_KEY}='${layerId}']`));
+				existingStyles.forEach((style$1) => {
+					style$1.parentNode?.removeChild(style$1);
+				});
+				root$49.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(() => {
 		if (!props.isCustomizeCss) return;
-		const removeCss = injectCss();
-		return () => {
-			removeCss();
-		};
+		injectCss();
 	});
 };
 
@@ -3807,19 +3928,19 @@ const AVATAR_SIZE_STYLES = {
 //#endregion
 //#region src/components-flex/avatar/Avatar.svelte
 var root_1$14 = $.template(`<img class="avatar-image svelte-1xhdr99">`);
-const $$css$30 = {
+const $$css$32 = {
 	hash: "svelte-1xhdr99",
 	code: ".avatar.svelte-1xhdr99 {display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
 };
 function Avatar($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$30);
+	$.append_styles($$anchor, $$css$32);
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
 	const imgStyle = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const avatarSizeStyle = !isNaN(Number(props().size)) ? {
 		width: `${props().size}px`,
@@ -4376,18 +4497,18 @@ const ICON_VARIANTS = {
 
 //#endregion
 //#region src/components-flex/icon/Icon.svelte
-const $$css$29 = {
+const $$css$31 = {
 	hash: "svelte-1kl9m59",
 	code: ".icon.svelte-1kl9m59 {display:flex;align-items:center;overflow:hidden;width:auto;cursor:pointer;text-decoration:none;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
 };
 function Icon($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$29);
+	$.append_styles($$anchor, $$css$31);
 	const style = $.mutable_state();
 	const IconComponent = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const getSizeCss = () => {
 		return {
@@ -4604,18 +4725,18 @@ function darkenColor(color, percent) {
 //#region src/components-flex/button/Button.svelte
 var root_2$8 = $.template(`<div class="button-icon svelte-l0rauj"><!></div>`);
 var root_1$13 = $.template(`<!> <span class="button-label"> </span>`, 1);
-const $$css$28 = {
+const $$css$30 = {
 	hash: "svelte-l0rauj",
 	code: ".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 Button($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$28);
+	$.append_styles($$anchor, $$css$30);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const { brandKit } = useBrandKit();
 	const buttonThemeStyles = getButtonThemeStyles(brandKit);
@@ -4695,26 +4816,24 @@ function Button($$anchor, $$props) {
 		$.event("click", $$element, handleClick);
 		var fragment_1 = root_1$13();
 		var node_1 = $.first_child(fragment_1);
-		{
-			var consequent = ($$anchor$2) => {
-				var div = root_2$8();
-				var node_2 = $.child(div);
-				const expression = $.derived_safe_equal(() => ({
-					variant: props().iconVariant,
-					color: props().iconColor ?? props().color ?? buttonThemeStyle.color,
-					width: "1em",
-					height: "1em"
-				}));
-				Icon(node_2, { get props() {
-					return $.get(expression);
-				} });
-				$.reset(div);
-				$.append($$anchor$2, div);
-			};
-			$.if(node_1, ($$render) => {
-				if (props().isIcon && props().iconVariant) $$render(consequent);
-			});
-		}
+		var consequent = ($$anchor$2) => {
+			var div = root_2$8();
+			var node_2 = $.child(div);
+			const expression = $.derived_safe_equal(() => ({
+				variant: props().iconVariant,
+				color: props().iconColor ?? props().color ?? buttonThemeStyle.color,
+				width: "1em",
+				height: "1em"
+			}));
+			Icon(node_2, { get props() {
+				return $.get(expression);
+			} });
+			$.reset(div);
+			$.append($$anchor$2, div);
+		};
+		$.if(node_1, ($$render) => {
+			if (props().isIcon && props().iconVariant) $$render(consequent);
+		});
 		var span = $.sibling(node_1, 2);
 		var text = $.child(span, true);
 		$.reset(span);
@@ -4822,18 +4941,18 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 //#region src/components-flex/button-outlined/ButtonOutlined.svelte
 var root_2$7 = $.template(`<div class="button-outlined-icon svelte-z8gomx"><!></div>`);
 var root_1$12 = $.template(`<!> <span class="button-outlined-label svelte-z8gomx"> </span>`, 1);
-const $$css$27 = {
+const $$css$29 = {
 	hash: "svelte-z8gomx",
 	code: ".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 ButtonOutlined($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$27);
+	$.append_styles($$anchor, $$css$29);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const buttonThemeStyles = getButtonOutlinedThemeStyles(brandKit);
@@ -4879,26 +4998,24 @@ function ButtonOutlined($$anchor, $$props) {
 		$.event("click", $$element, handleClick);
 		var fragment_1 = root_1$12();
 		var node_1 = $.first_child(fragment_1);
-		{
-			var consequent = ($$anchor$2) => {
-				var div = root_2$7();
-				var node_2 = $.child(div);
-				const expression = $.derived_safe_equal(() => ({
-					variant: props().iconVariant,
-					color: props().iconColor ?? props().color ?? buttonThemeStyle.color,
-					width: "1em",
-					height: "1em"
-				}));
-				Icon(node_2, { get props() {
-					return $.get(expression);
-				} });
-				$.reset(div);
-				$.append($$anchor$2, div);
-			};
-			$.if(node_1, ($$render) => {
-				if (props().isIcon && props().iconVariant) $$render(consequent);
-			});
-		}
+		var consequent = ($$anchor$2) => {
+			var div = root_2$7();
+			var node_2 = $.child(div);
+			const expression = $.derived_safe_equal(() => ({
+				variant: props().iconVariant,
+				color: props().iconColor ?? props().color ?? buttonThemeStyle.color,
+				width: "1em",
+				height: "1em"
+			}));
+			Icon(node_2, { get props() {
+				return $.get(expression);
+			} });
+			$.reset(div);
+			$.append($$anchor$2, div);
+		};
+		$.if(node_1, ($$render) => {
+			if (props().isIcon && props().iconVariant) $$render(consequent);
+		});
 		var span = $.sibling(node_1, 2);
 		var text = $.child(span, true);
 		$.reset(span);
@@ -4971,18 +5088,18 @@ const getButtonTextThemeStyles = getPropStyles(callback$2);
 //#region src/components-flex/button-text/ButtonText.svelte
 var root_2$6 = $.template(`<div class="button-text-icon svelte-l90o4j"><!></div>`);
 var root_1$11 = $.template(`<!> <span class="button-text-label svelte-l90o4j"> </span>`, 1);
-const $$css$26 = {
+const $$css$28 = {
 	hash: "svelte-l90o4j",
 	code: ".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 ButtonText($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$26);
+	$.append_styles($$anchor, $$css$28);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const themeStyles = getButtonTextThemeStyles(brandKit);
@@ -5022,26 +5139,24 @@ function ButtonText($$anchor, $$props) {
 		$.event("click", $$element, handleClick);
 		var fragment_1 = root_1$11();
 		var node_1 = $.first_child(fragment_1);
-		{
-			var consequent = ($$anchor$2) => {
-				var div = root_2$6();
-				var node_2 = $.child(div);
-				const expression = $.derived_safe_equal(() => ({
-					variant: props().iconVariant,
-					color: props().color ?? buttonThemeStyle.color,
-					width: "1em",
-					height: "1em"
-				}));
-				Icon(node_2, { get props() {
-					return $.get(expression);
-				} });
-				$.reset(div);
-				$.append($$anchor$2, div);
-			};
-			$.if(node_1, ($$render) => {
-				if (props().isIcon && props().iconVariant) $$render(consequent);
-			});
-		}
+		var consequent = ($$anchor$2) => {
+			var div = root_2$6();
+			var node_2 = $.child(div);
+			const expression = $.derived_safe_equal(() => ({
+				variant: props().iconVariant,
+				color: props().color ?? buttonThemeStyle.color,
+				width: "1em",
+				height: "1em"
+			}));
+			Icon(node_2, { get props() {
+				return $.get(expression);
+			} });
+			$.reset(div);
+			$.append($$anchor$2, div);
+		};
+		$.if(node_1, ($$render) => {
+			if (props().isIcon && props().iconVariant) $$render(consequent);
+		});
 		var span = $.sibling(node_1, 2);
 		var text = $.child(span, true);
 		$.reset(span);
@@ -5088,13 +5203,13 @@ const getTextThemeStyles = getPropStyles(callback$1);
 //#region src/components-flex/close-button/CloseButton.svelte
 var root_2$5 = $.template(`<span></span>`);
 var root_1$10 = $.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-18wmfyq"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
-const $$css$25 = {
+const $$css$27 = {
 	hash: "svelte-18wmfyq",
 	code: ".close-button.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:where(.svelte-18wmfyq) {transition:transform 0.12s;}.close-button.svelte-18wmfyq:hover svg:where(.svelte-18wmfyq) {transform:rotate(90deg);}.close-button-order-one.svelte-18wmfyq {order:1;}.close-button-order-two.svelte-18wmfyq {order:2;}"
 };
 function CloseButton($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$25);
+	$.append_styles($$anchor, $$css$27);
 	const hasLabel = $.mutable_state();
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
@@ -5107,7 +5222,7 @@ function CloseButton($$anchor, $$props) {
 	let eventName = $.prop($$props, "eventName", 8, "");
 	let eventValue = $.prop($$props, "eventValue", 8, void 0);
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props().onClick ? props() : {
 		onClick: {
 			operation: "closeApp",
@@ -5212,18 +5327,16 @@ function CloseButton($$anchor, $$props) {
 		$.set_attribute(svg, "fill", color);
 		$.reset(span);
 		var node_1 = $.sibling(span, 2);
-		{
-			var consequent = ($$anchor$2) => {
-				var span_1 = root_2$5();
-				$.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-18wmfyq");
-				span_1.textContent = label;
-				$.template_effect(() => $.set_style(span_1, $.get(labelStyle)));
-				$.append($$anchor$2, span_1);
-			};
-			$.if(node_1, ($$render) => {
-				if ($.get(hasLabel)) $$render(consequent);
-			});
-		}
+		var consequent = ($$anchor$2) => {
+			var span_1 = root_2$5();
+			$.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-18wmfyq");
+			span_1.textContent = label;
+			$.template_effect(() => $.set_style(span_1, $.get(labelStyle)));
+			$.append($$anchor$2, span_1);
+		};
+		$.if(node_1, ($$render) => {
+			if ($.get(hasLabel)) $$render(consequent);
+		});
 		$.template_effect(() => $.set_style(span, $.get(iconStyle)));
 		$.append($$anchor$1, fragment_1);
 	});
@@ -5308,19 +5421,19 @@ const IMAGE_ROUND_STYLES = {
 //#endregion
 //#region src/components-flex/image/Image.svelte
 var root_1$9 = $.template(`<img class="image-img svelte-1olvu11">`);
-const $$css$24 = {
+const $$css$26 = {
 	hash: "svelte-1olvu11",
 	code: ".image.svelte-1olvu11 {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}.image-img.svelte-1olvu11 {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}"
 };
 function Image($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$24);
+	$.append_styles($$anchor, $$css$26);
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
 	const imgStyle = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
 	const width = props().width ?? "100%";
@@ -5401,18 +5514,18 @@ const IMAGE_ASPECT_VARIANTS = {
 
 //#endregion
 //#region src/components-flex/layout/Layout.svelte
-const $$css$23 = {
+const $$css$25 = {
 	hash: "svelte-1o103hp",
 	code: ".layout.svelte-1o103hp {text-decoration:none;color:inherit;}.layout[data-clickable='true'].svelte-1o103hp {cursor:pointer;}.layout[data-clickable='true'].svelte-1o103hp:hover {opacity:0.8;}"
 };
 function Layout($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$23);
+	$.append_styles($$anchor, $$css$25);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	$.legacy_pre_effect(() => ($.deep_read_state(props()), toCssBorder), () => {
 		$.set(style, objToStyle({
@@ -5487,13 +5600,13 @@ const LAYOUT_JUSTIFY = [
 //#region src/components-flex/slider/Slider.svelte
 var root_1$8 = $.template(`<button><i></i></button>`);
 var root$16 = $.template(`<div><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
-const $$css$22 = {
+const $$css$24 = {
 	hash: "svelte-wwv1o",
 	code: ".slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}"
 };
 function Slider($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$22);
+	$.append_styles($$anchor, $$css$24);
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const baseContainerStyle = $.mutable_state();
@@ -5503,7 +5616,7 @@ function Slider($$anchor, $$props) {
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
 	let overrideStyle = $.prop($$props, "overrideStyle", 8);
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	let containerElement = $.mutable_state();
 	let slotElement = $.mutable_state();
 	let currentIndex = $.mutable_state(0);
@@ -5702,16 +5815,16 @@ function Slider($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/slider/SliderItem.svelte
 var root$15 = $.template(`<li><!></li>`);
-const $$css$21 = {
+const $$css$23 = {
 	hash: "svelte-1m93md9",
 	code: ".slider-item.svelte-1m93md9 {overflow:hidden;}.slider-item-inner.svelte-1m93md9 {text-decoration:none;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;text-align:left;color:inherit;-webkit-user-drag:none;user-select:none;}"
 };
 function SliderItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$21);
+	$.append_styles($$anchor, $$css$23);
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	$.init();
 	var li = root$15();
@@ -5781,18 +5894,18 @@ const TEXT_VARIANTS = { size: {
 //#endregion
 //#region src/components-flex/text/Text.svelte
 var root$14 = $.template(`<p><!></p>`);
-const $$css$20 = {
+const $$css$22 = {
 	hash: "svelte-vifn7y",
 	code: ".text.svelte-vifn7y {margin:0;word-break:break-all;text-decoration:none;}"
 };
 function Text($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$20);
+	$.append_styles($$anchor, $$css$22);
 	const escapedHTML = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({ content: "" }));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	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);
@@ -5879,17 +5992,17 @@ function Text($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/rich-text/RichText.svelte
 var root$13 = $.template(`<div><!></div>`);
-const $$css$19 = {
+const $$css$21 = {
 	hash: "svelte-dxr423",
 	code: ".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 RichText($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$19);
+	$.append_styles($$anchor, $$css$21);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({ content: "" }));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	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);
@@ -6005,19 +6118,19 @@ const getTextLinkThemeStyles = getPropStyles(callback);
 //#endregion
 //#region src/components-flex/text-link/TextLink.svelte
 var root_1$7 = $.template(`<!> <span><!></span>`, 1);
-const $$css$18 = {
+const $$css$20 = {
 	hash: "svelte-dc9m5n",
 	code: ".link.svelte-dc9m5n {-webkit-appearance:none;border:0;background:none;padding:0;display:inline-flex;}.link.svelte-dc9m5n,\n  .link.svelte-dc9m5n:visited,\n  .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 TextLink($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$18);
+	$.append_styles($$anchor, $$css$20);
 	const escapedHTML = $.mutable_state();
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({ label: "" }));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
 	const { attributes, element, handleClick } = useClickable_default({
 		...props(),
@@ -6080,22 +6193,20 @@ function TextLink($$anchor, $$props) {
 		$.event("click", $$element, handleClick);
 		var fragment_1 = root_1$7();
 		var node_1 = $.first_child(fragment_1);
-		{
-			var consequent = ($$anchor$2) => {
-				const expression = $.derived_safe_equal(() => ({
-					variant: props().iconVariant,
-					color: props().iconColor ?? props().color,
-					width: "1em",
-					height: "1em"
-				}));
-				Icon($$anchor$2, { get props() {
-					return $.get(expression);
-				} });
-			};
-			$.if(node_1, ($$render) => {
-				if (props().isIcon && props().iconVariant) $$render(consequent);
-			});
-		}
+		var consequent = ($$anchor$2) => {
+			const expression = $.derived_safe_equal(() => ({
+				variant: props().iconVariant,
+				color: props().iconColor ?? props().color,
+				width: "1em",
+				height: "1em"
+			}));
+			Icon($$anchor$2, { get props() {
+				return $.get(expression);
+			} });
+		};
+		$.if(node_1, ($$render) => {
+			if (props().isIcon && props().iconVariant) $$render(consequent);
+		});
 		var span = $.sibling(node_1, 2);
 		var node_2 = $.child(span);
 		$.html(node_2, () => $.get(escapedHTML), false, false);
@@ -6131,30 +6242,28 @@ const TEXT_LINK_UNDERLINE = {
 //#endregion
 //#region src/components-flex/background-overlay/BackgroundOverlay.svelte
 var root_1$6 = $.template(`<div></div>`);
-const $$css$17 = {
+const $$css$19 = {
 	hash: "svelte-18nkdjz",
 	code: ".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 BackgroundOverlay($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$17);
+	$.append_styles($$anchor, $$css$19);
 	let backgroundOverlay = $.prop($$props, "backgroundOverlay", 8, false);
 	let className = $.prop($$props, "class", 8, void 0);
 	const dispatch = createEventDispatcher();
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	{
-		var consequent = ($$anchor$1) => {
-			var div = root_1$6();
-			$.template_effect(($0) => $.set_class(div, 1, $0, "svelte-18nkdjz"), [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
-			$.event("click", div, () => dispatch("click"));
-			$.append($$anchor$1, div);
-		};
-		$.if(node, ($$render) => {
-			if (backgroundOverlay()) $$render(consequent);
-		});
-	}
+	var consequent = ($$anchor$1) => {
+		var div = root_1$6();
+		$.template_effect(($0) => $.set_class(div, 1, $0, "svelte-18nkdjz"), [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
+		$.event("click", div, () => dispatch("click"));
+		$.append($$anchor$1, div);
+	};
+	$.if(node, ($$render) => {
+		if (backgroundOverlay()) $$render(consequent);
+	});
 	$.append($$anchor, fragment);
 	$.pop();
 }
@@ -6164,13 +6273,13 @@ function BackgroundOverlay($$anchor, $$props) {
 var root_2$4 = $.template(`<!> <!>`, 1);
 var root_4 = $.template(`<div role="dialog" aria-modal="true"><!></div>`);
 var root$12 = $.template(`<!> <!>`, 1);
-const $$css$16 = {
+const $$css$18 = {
 	hash: "svelte-45ue06",
 	code: "* {box-sizing:border-box;}.modal.svelte-45ue06 {position:fixed;z-index:2147483647;display:flex;}.modal.svelte-45ue06 > .button {flex:auto;display:flex;}\n  /* PC */\n  @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;}\n  }\n\n  /* SP */\n  @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;}\n  }"
 };
 function Modal($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$16);
+	$.append_styles($$anchor, $$css$18);
 	const close$1 = $.mutable_state();
 	const backgroundClick = $.mutable_state();
 	const backgroundClickPC = $.mutable_state();
@@ -6180,7 +6289,7 @@ function Modal($$anchor, $$props) {
 	let useBreakPoint = $.prop($$props, "useBreakPoint", 8, false);
 	let placement = $.prop($$props, "placement", 8);
 	let breakPoint = $.prop($$props, "breakPoint", 8);
-	let elasticity = $.prop($$props, "elasticity", 8);
+	$.prop($$props, "elasticity", 8);
 	let animation = $.prop($$props, "animation", 8, "none");
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let closeEventName = $.prop($$props, "closeEventName", 8, "");
@@ -6323,78 +6432,72 @@ function Modal($$anchor, $$props) {
 		$.get(handle_keydown)?.apply(this, $$args);
 	});
 	var node = $.first_child(fragment);
-	{
-		var consequent = ($$anchor$1) => {};
-		var alternate = ($$anchor$1, $$elseif) => {
-			{
-				var consequent_1 = ($$anchor$2) => {
-					var fragment_1 = root_2$4();
-					var node_1 = $.first_child(fragment_1);
-					BackgroundOverlay(node_1, {
-						class: "background-bp-pc",
-						get backgroundOverlay() {
-							return $.get(backgroundOverlayPC);
-						},
-						$$events: { click(...$$args) {
-							$.get(backgroundClickPC)?.apply(this, $$args);
-						} }
-					});
-					var node_2 = $.sibling(node_1, 2);
-					BackgroundOverlay(node_2, {
-						class: "background-bp-sp ",
-						get backgroundOverlay() {
-							return $.get(backgroundOverlaySP);
-						},
-						$$events: { click(...$$args) {
-							$.get(backgroundClickSP)?.apply(this, $$args);
-						} }
-					});
-					$.append($$anchor$2, fragment_1);
-				};
-				var alternate_1 = ($$anchor$2) => {
-					BackgroundOverlay($$anchor$2, {
-						get backgroundOverlay() {
-							return $.get(backgroundOverlay);
-						},
-						$$events: { click(...$$args) {
-							$.get(backgroundClick)?.apply(this, $$args);
-						} }
-					});
-				};
-				$.if($$anchor$1, ($$render) => {
-					if (useBreakPoint()) $$render(consequent_1);
-					else $$render(alternate_1, false);
-				}, $$elseif);
-			}
+	var consequent = ($$anchor$1) => {};
+	var alternate = ($$anchor$1, $$elseif) => {
+		var consequent_1 = ($$anchor$2) => {
+			var fragment_1 = root_2$4();
+			var node_1 = $.first_child(fragment_1);
+			BackgroundOverlay(node_1, {
+				class: "background-bp-pc",
+				get backgroundOverlay() {
+					return $.get(backgroundOverlayPC);
+				},
+				$$events: { click(...$$args) {
+					$.get(backgroundClickPC)?.apply(this, $$args);
+				} }
+			});
+			var node_2 = $.sibling(node_1, 2);
+			BackgroundOverlay(node_2, {
+				class: "background-bp-sp ",
+				get backgroundOverlay() {
+					return $.get(backgroundOverlaySP);
+				},
+				$$events: { click(...$$args) {
+					$.get(backgroundClickSP)?.apply(this, $$args);
+				} }
+			});
+			$.append($$anchor$2, fragment_1);
 		};
-		$.if(node, ($$render) => {
-			if (isCanvasPreview()) $$render(consequent);
-			else $$render(alternate, false);
-		});
-	}
-	var node_3 = $.sibling(node, 2);
-	{
-		var consequent_2 = ($$anchor$1) => {
-			var div = root_4();
-			var node_4 = $.child(div);
-			$.slot(node_4, $$props, "default", {}, null);
-			$.reset(div);
-			$.bind_this(div, ($$value) => $.set(modal, $$value), () => $.get(modal));
-			$.template_effect(($0, $1) => {
-				$.set_class(div, 1, $0, "svelte-45ue06");
-				$.set_attribute(div, "data-layer-id", layerId());
-				$.set_style(div, $1);
-			}, [() => $.clsx(["modal", useBreakPoint() ? "modal-bp" : ""].join(" ")), () => Array.from(modalStyles).join(";")], $.derived_safe_equal);
-			$.transition(1, div, () => customAnimation, () => ({
-				transforms: $.get(transforms),
-				animationStyle: animation()
-			}));
-			$.append($$anchor$1, div);
+		var alternate_1 = ($$anchor$2) => {
+			BackgroundOverlay($$anchor$2, {
+				get backgroundOverlay() {
+					return $.get(backgroundOverlay);
+				},
+				$$events: { click(...$$args) {
+					$.get(backgroundClick)?.apply(this, $$args);
+				} }
+			});
 		};
-		$.if(node_3, ($$render) => {
-			if ($.get(visible)) $$render(consequent_2);
-		});
-	}
+		$.if($$anchor$1, ($$render) => {
+			if (useBreakPoint()) $$render(consequent_1);
+			else $$render(alternate_1, false);
+		}, $$elseif);
+	};
+	$.if(node, ($$render) => {
+		if (isCanvasPreview()) $$render(consequent);
+		else $$render(alternate, false);
+	});
+	var node_3 = $.sibling(node, 2);
+	var consequent_2 = ($$anchor$1) => {
+		var div = root_4();
+		var node_4 = $.child(div);
+		$.slot(node_4, $$props, "default", {}, null);
+		$.reset(div);
+		$.bind_this(div, ($$value) => $.set(modal, $$value), () => $.get(modal));
+		$.template_effect(($0, $1) => {
+			$.set_class(div, 1, $0, "svelte-45ue06");
+			$.set_attribute(div, "data-layer-id", layerId());
+			$.set_style(div, $1);
+		}, [() => $.clsx(["modal", useBreakPoint() ? "modal-bp" : ""].join(" ")), () => Array.from(modalStyles).join(";")], $.derived_safe_equal);
+		$.transition(1, div, () => customAnimation, () => ({
+			transforms: $.get(transforms),
+			animationStyle: animation()
+		}));
+		$.append($$anchor$1, div);
+	};
+	$.if(node_3, ($$render) => {
+		if ($.get(visible)) $$render(consequent_2);
+	});
 	$.append($$anchor, fragment);
 	$.pop();
 }
@@ -6402,13 +6505,13 @@ function Modal($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/code/Code.svelte
 var root$11 = $.template(`<div><!></div>`);
-const $$css$15 = {
+const $$css$17 = {
 	hash: "svelte-igivoz",
 	code: ".code.svelte-igivoz {flex-grow:1;flex-shrink:0;align-self:stretch;}\n  /*{@html props.rawCss}*/"
 };
 function Code($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$15);
+	$.append_styles($$anchor, $$css$17);
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	function unescapeBraces(str) {
@@ -6461,20 +6564,20 @@ const LIST_ITEM_CONTEXT_KEY = "ListItemContext";
 //#endregion
 //#region src/components-flex/list/ListItem.svelte
 var root$10 = $.template(`<li><!></li>`);
-const $$css$14 = {
+const $$css$16 = {
 	hash: "svelte-b4b4gh",
 	code: ".list-item.svelte-b4b4gh {margin:0;padding:0;}.list-item-inner.svelte-b4b4gh {display:flex;align-items:center;width:100%;text-decoration:none;color:inherit;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}.list-item-inner.svelte-b4b4gh:hover {opacity:0.8;}.list-item.svelte-b4b4gh:not(:first-child) {border-top-width:var(--list-item-border-width);border-top-style:var(--list-item-border-style);border-top-color:var(--list-item-border-color);}"
 };
 function ListItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$14);
+	$.append_styles($$anchor, $$css$16);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	const innerStyle = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
-	let item = $.prop($$props, "item", 8);
-	useInjectCustomizeCss(props());
+	$.prop($$props, "item", 8);
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const context = getContext(LIST_ITEM_CONTEXT_KEY) || {};
 	$.legacy_pre_effect(() => {}, () => {
@@ -6527,13 +6630,13 @@ function ListItem($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/list/List.svelte
 var root$9 = $.template(`<ul><!></ul>`);
-const $$css$13 = {
+const $$css$15 = {
 	hash: "svelte-v2vy6p",
 	code: ".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 List($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$13);
+	$.append_styles($$anchor, $$css$15);
 	const variables$1 = $.mutable_state();
 	const actionTableData = $.mutable_state();
 	const items = $.mutable_state();
@@ -6541,7 +6644,7 @@ function List($$anchor, $$props) {
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const vars = getVariables();
 	setContext(LIST_ITEM_CONTEXT_KEY, {
 		paddingTop: props().itemPaddingTop,
@@ -6615,18 +6718,18 @@ function splitNumberAndUnit(value) {
 //#endregion
 //#region src/components-flex/multi-column/MultiColumn.svelte
 var root$8 = $.template(`<ul><!></ul>`);
-const $$css$12 = {
+const $$css$14 = {
 	hash: "svelte-9pwfkr",
 	code: ".multi-column.svelte-9pwfkr {padding:0;margin:0;list-style:none;display:flex;flex-direction:row;}"
 };
 function MultiColumn($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$12);
+	$.append_styles($$anchor, $$css$14);
 	const style = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	let listGap = (() => {
 		if (!props().gap) return "0";
 		const { number, unit } = splitNumberAndUnit(props().gap);
@@ -6674,18 +6777,18 @@ function MultiColumn($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/multi-column/MultiColumnItem.svelte
 var root$7 = $.template(`<li><!></li>`);
-const $$css$11 = {
+const $$css$13 = {
 	hash: "svelte-18bwzrs",
 	code: ".multi-column-item.svelte-18bwzrs {margin:0;width:100%;padding-top:0;padding-bottom:0;padding-left:var(--multi-column-item-padding);padding-right:var(--multi-column-item-padding);}.multi-column-item-inner.svelte-18bwzrs {display:flex;flex-direction:column;align-items:center;gap:var(--multi-column-item-gap);width:100%;text-decoration:none;border:0;background:none;margin:0;text-align:left;-webkit-appearance:none;padding-top:var(--multi-column-item-padding-top);padding-left:var(--multi-column-item-padding-left);padding-right:var(--multi-column-item-padding-right);padding-bottom:var(--multi-column-item-padding-bottom);}.multi-column-item-inner.svelte-18bwzrs:hover {opacity:0.8;}.multi-column-item.svelte-18bwzrs:not(:first-child) {border-left-width:var(--multi-column-item-border-width);border-left-style:var(--multi-column-item-border-style);border-left-color:var(--multi-column-item-border-color);}"
 };
 function MultiColumnItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$11);
+	$.append_styles($$anchor, $$css$13);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const context = getContext(MULTI_COLUMN_ITEM_CONTEXT_KEY) || {};
 	$.legacy_pre_effect(() => {}, () => {
@@ -6736,17 +6839,17 @@ function MultiColumnItem($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/youtube/Youtube.svelte
 var root$6 = $.template(`<div><div class="youtube-player"></div></div>`);
-const $$css$10 = {
+const $$css$12 = {
 	hash: "svelte-odfkc2",
 	code: ".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 Youtube($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$10);
+	$.append_styles($$anchor, $$css$12);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	if (!window.YT) {
 		const tag = document.createElement("script");
 		tag.src = "https://www.youtube.com/iframe_api";
@@ -6839,20 +6942,20 @@ function Youtube($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/count-down/CountDown.svelte
 var root$5 = $.template(`<div><!></div>`);
-const $$css$9 = {
+const $$css$11 = {
 	hash: "svelte-1n395il",
 	code: ".countdown.svelte-1n395il {display:flex;align-items:center;gap:4px;}"
 };
 function CountDown($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$9);
+	$.append_styles($$anchor, $$css$11);
 	const day = $.mutable_state();
 	const hour = $.mutable_state();
 	const min = $.mutable_state();
 	const sec = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	let remainingTime = $.mutable_state();
 	let timeLimit = props().timeLimit ? new Date(props().timeLimit) : /* @__PURE__ */ new Date();
 	function calcRemainingTime(limit) {
@@ -6929,8 +7032,8 @@ function CountDown($$anchor, $$props) {
 
 //#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);
@@ -6995,7 +7098,7 @@ function CountDownValue($$anchor, $$props) {
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	let countdownStore = getContext("countdownStore");
-	let { style } = useText(props());
+	let { style } = useText(props(), layerId());
 	$.legacy_pre_effect(() => ($countdownStore(), $.deep_read_state(props())), () => {
 		$.set(value, (() => {
 			const { day, hour, min, sec } = $countdownStore();
@@ -7028,16 +7131,16 @@ function CountDownValue($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/clip-copy/ClipCopy.svelte
 var root$3 = $.template(`<div><button class="clipboard-button svelte-orhp4c"><!></button> <span class="clipboard-tooltip svelte-orhp4c">コピーしました</span></div>`);
-const $$css$8 = {
+const $$css$10 = {
 	hash: "svelte-orhp4c",
 	code: ".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 ClipCopy($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$8);
+	$.append_styles($$anchor, $$css$10);
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	let buttonElement = $.mutable_state();
 	let showTooltip = $.mutable_state(false);
 	const handleClick = (e) => {
@@ -7074,19 +7177,19 @@ function ClipCopy($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/embed/Embed.svelte
 var root$2 = $.template(`<div><!></div>`);
-const $$css$7 = {
+const $$css$9 = {
 	hash: "svelte-13tkwh0",
 	code: ".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 Embed($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$7);
+	$.append_styles($$anchor, $$css$9);
 	const variables$1 = $.mutable_state();
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
 	const width = props().width ?? "100%";
 	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
@@ -7124,16 +7227,16 @@ function Embed($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/form/Form.svelte
 var root$1 = $.template(`<div><!></div>`);
-const $$css$6 = {
+const $$css$8 = {
 	hash: "svelte-nekp9e",
 	code: ".form.svelte-nekp9e {width:100%;}"
 };
 function Form($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$6);
+	$.append_styles($$anchor, $$css$8);
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	$.init();
 	var div = root$1();
 	var node = $.child(div);
@@ -7169,18 +7272,18 @@ var root_2$3 = $.template(`<span class="field-required svelte-1maygd6">＊</span
 var root_1$5 = $.template(`<dt class="svelte-1maygd6"><span> </span> <!></dt>`);
 var root_3 = $.template(`<p class="field-error svelte-1maygd6"> </p>`);
 var root = $.template(`<dl><!> <dd class="svelte-1maygd6"><!> <!></dd></dl>`);
-const $$css$5 = {
+const $$css$7 = {
 	hash: "svelte-1maygd6",
 	code: ".field.svelte-1maygd6 {margin:0;padding:0;border:0;display:flex;width:100%;flex-direction:var(--form-field-direction);gap:var(--form-field-gap);}.field.svelte-1maygd6 > dt:where(.svelte-1maygd6) {position:relative;font-weight:bold;font-size:var(--form-field-label-font-size);width:var(--form-field-label-width);flex-shrink:0;color:var(--form-field-label-color);display:inline-flex;gap:0.4em;}.field-required.svelte-1maygd6 {flex-shrink:0;font-size:0.6em;color:var(--danger-color);}.field.svelte-1maygd6 > dd:where(.svelte-1maygd6) {position:relative;margin:0;flex-grow:1;}.field-error.svelte-1maygd6 {position:absolute;top:calc(100% + 8px);left:0;display:inline-flex;color:var(--danger-color);border:1px solid var(--danger-color);border-radius:4px;background-color:#fff;padding:6px 12px;font-size:12px;margin:0;z-index:10;}.field-error.svelte-1maygd6::after {content:'';display:block;position:absolute;top:0;left:8px;width:8px;height:8px;transform:rotate(45deg) translateY(-80%);border-top:1px solid var(--danger-color);border-left:1px solid var(--danger-color);border-radius:1px;background-color:#fff;}"
 };
 function FormField($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$5);
+	$.append_styles($$anchor, $$css$7);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
 	let registeredFieldName = $.mutable_state("");
 	let errorMessage = $.mutable_state(null);
@@ -7211,7 +7314,9 @@ function FormField($$anchor, $$props) {
 				type: props().fieldType,
 				name: props().fieldName,
 				defaultValue: props().defaultValue,
-				required: props().required
+				required: props().required,
+				validations: props().validations,
+				isIdentify: props().isIdentify
 			});
 			formStore.subscribe(($store) => {
 				$.set(errorMessage, $store.states[props().fieldName]?.errorMessage ?? null);
@@ -7224,48 +7329,42 @@ function FormField($$anchor, $$props) {
 	$.init();
 	var dl = root();
 	var node = $.child(dl);
-	{
-		var consequent_1 = ($$anchor$1) => {
-			var dt = root_1$5();
-			var span = $.child(dt);
-			var text = $.child(span, true);
-			$.reset(span);
-			var node_1 = $.sibling(span, 2);
-			{
-				var consequent = ($$anchor$2) => {
-					var span_1 = root_2$3();
-					$.append($$anchor$2, span_1);
-				};
-				$.if(node_1, ($$render) => {
-					if (props().required) $$render(consequent);
-				});
-			}
-			$.reset(dt);
-			$.template_effect(() => $.set_text(text, props().label));
-			$.append($$anchor$1, dt);
+	var consequent_1 = ($$anchor$1) => {
+		var dt = root_1$5();
+		var span = $.child(dt);
+		var text = $.child(span, true);
+		$.reset(span);
+		var node_1 = $.sibling(span, 2);
+		var consequent = ($$anchor$2) => {
+			var span_1 = root_2$3();
+			$.append($$anchor$2, span_1);
 		};
-		$.if(node, ($$render) => {
-			if (props().label) $$render(consequent_1);
+		$.if(node_1, ($$render) => {
+			if (props().required) $$render(consequent);
 		});
-	}
+		$.reset(dt);
+		$.template_effect(() => $.set_text(text, props().label));
+		$.append($$anchor$1, dt);
+	};
+	$.if(node, ($$render) => {
+		if (props().label) $$render(consequent_1);
+	});
 	var dd = $.sibling(node, 2);
 	var node_2 = $.child(dd);
 	$.slot(node_2, $$props, "default", { get "data-layer-id"() {
 		return layerId();
 	} }, null);
 	var node_3 = $.sibling(node_2, 2);
-	{
-		var consequent_2 = ($$anchor$1) => {
-			var p = root_3();
-			var text_1 = $.child(p, true);
-			$.reset(p);
-			$.template_effect(() => $.set_text(text_1, $.get(errorMessage)));
-			$.append($$anchor$1, p);
-		};
-		$.if(node_3, ($$render) => {
-			if ($.get(isShowErrorMessage) && $.get(errorMessage)) $$render(consequent_2);
-		});
-	}
+	var consequent_2 = ($$anchor$1) => {
+		var p = root_3();
+		var text_1 = $.child(p, true);
+		$.reset(p);
+		$.template_effect(() => $.set_text(text_1, $.get(errorMessage)));
+		$.append($$anchor$1, p);
+	};
+	$.if(node_3, ($$render) => {
+		if ($.get(isShowErrorMessage) && $.get(errorMessage)) $$render(consequent_2);
+	});
 	$.reset(dd);
 	$.reset(dl);
 	$.template_effect(($0) => {
@@ -7285,13 +7384,13 @@ function FormField($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/form/FormInput.svelte
 var root_1$4 = $.template(`<input type="text">`);
-const $$css$4 = {
+const $$css$6 = {
 	hash: "svelte-176cxs0",
 	code: ".form-input.svelte-176cxs0 {margin:0;width:var(--form-input-width);-webkit-appearance:none;color:var(--font-color);transition:all 0.2s;}.form-input.small.svelte-176cxs0 {font-size:12px;line-height:19px;padding:6px 10px 5px;border-radius:4px;}.form-input.medium.svelte-176cxs0 {font-size:14px;line-height:21px;padding:8px 12px 7px;border-radius:6px;}.form-input.large.svelte-176cxs0 {font-size:16px;line-height:25px;padding:11px 16px 10px;border-radius:8px;}.form-input.outlined.svelte-176cxs0 {border:1px solid var(--border-color);}.form-input.filled.svelte-176cxs0 {background-color:var(--background-color);border:1px solid var(--background-color);}.form-input.underlined.svelte-176cxs0 {border-radius:0;border-width:0 0 1px;border-style:solid;border-color:rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) var(--border-color);}.form-input.underlined.svelte-176cxs0:focus-visible {outline:0;border-bottom-color:1px solid var(--focused-outline-color);}.form-input.svelte-176cxs0:focus-visible {outline-color:var(--focused-outline-color);}.form-input.svelte-176cxs0::placeholder {color:var(--placeholder-color);}"
 };
 function FormInput($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$4);
+	$.append_styles($$anchor, $$css$6);
 	const variant = $.mutable_state();
 	const size = $.mutable_state();
 	const variables$1 = $.mutable_state();
@@ -7300,7 +7399,7 @@ function FormInput($$anchor, $$props) {
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	let value = $.mutable_state("");
 	const handleBlur = () => {
 		if (props().fieldName) {
@@ -7378,13 +7477,13 @@ function FormInput($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/form/FormTextarea.svelte
 var root_1$3 = $.template(`<textarea></textarea>`);
-const $$css$3 = {
+const $$css$5 = {
 	hash: "svelte-1oqg2c0",
 	code: ".form-textarea.svelte-1oqg2c0 {margin:0;width:var(--form-textarea-width);max-width:var(--form-textarea-width);min-width:var(--form-textarea-width);-webkit-appearance:none;vertical-align:bottom;color:var(--font-color);transition:all 0.2s;}.form-textarea.small.svelte-1oqg2c0 {font-size:12px;line-height:19px;padding:6px 10px 5px;border-radius:4px;}.form-textarea.medium.svelte-1oqg2c0 {font-size:14px;line-height:21px;padding:8px 12px 7px;border-radius:6px;}.form-textarea.large.svelte-1oqg2c0 {font-size:16px;line-height:25px;padding:11px 16px 10px;border-radius:8px;}.form-textarea.outlined.svelte-1oqg2c0 {border:1px solid var(--border-color);}.form-textarea.filled.svelte-1oqg2c0 {background-color:var(--background-color);border:1px solid var(--background-color);}.form-textarea.underlined.svelte-1oqg2c0 {border-radius:0;border-width:0 0 1px;border-style:solid;border-color:rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) var(--border-color);}.form-textarea.underlined.svelte-1oqg2c0:focus-visible {outline:0;border-bottom-color:1px solid var(--focused-outline-color);}.form-textarea.svelte-1oqg2c0:focus-visible {outline-color:var(--focused-outline-color);}.form-textarea.svelte-1oqg2c0::placeholder {color:var(--placeholder-color);}"
 };
 function FormTextarea($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$3);
+	$.append_styles($$anchor, $$css$5);
 	const variant = $.mutable_state();
 	const size = $.mutable_state();
 	const variables$1 = $.mutable_state();
@@ -7392,7 +7491,7 @@ function FormTextarea($$anchor, $$props) {
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	let value = $.mutable_state("");
 	const handleBlur = () => {
 		if (props().fieldName) {
@@ -7464,13 +7563,13 @@ function FormTextarea($$anchor, $$props) {
 //#region src/components-flex/form/FormSelect.svelte
 var root_2$2 = $.template(`<option class="svelte-p118m"> </option>`);
 var root_1$2 = $.template(`<div><select class="form-select-select svelte-p118m"><option disabled class="svelte-p118m"> </option><!></select></div>`);
-const $$css$2 = {
+const $$css$4 = {
 	hash: "svelte-p118m",
 	code: ".form-select.svelte-p118m {position:relative;display:inline-flex;width:var(--width);color:var(--font-color);}.form-select.empty.svelte-p118m select:where(.svelte-p118m) {color:var(--placeholder-color);}.form-select.svelte-p118m:after {content:'';display:block;position:absolute;top:50%;right:12px;width:6px;height:6px;border-bottom:1px solid var(--font-color);border-left:1px solid var(--font-color);transform:translateY(-75%) rotate(-45deg);}.form-select.svelte-p118m select:where(.svelte-p118m) {margin:0;width:100%;-webkit-appearance:none;transition:all 0.2s;}.form-select.small.svelte-p118m select:where(.svelte-p118m) {font-size:12px;line-height:19px;padding:6px 32px 5px 10px;border-radius:4px;}.form-select.medium.svelte-p118m select:where(.svelte-p118m) {font-size:14px;line-height:21px;padding:8px 36px 7px 12px;border-radius:6px;}.form-select.large.svelte-p118m select:where(.svelte-p118m) {font-size:16px;line-height:25px;padding:11px 40px 10px 16px;border-radius:8px;}.form-select.large.svelte-p118m:after {right:20px;}.form-select.outlined.svelte-p118m select:where(.svelte-p118m) {border:1px solid var(--border-color);}.form-select.filled.svelte-p118m select:where(.svelte-p118m) {background-color:var(--background-color);border:1px solid var(--background-color);}.form-select.underlined.svelte-p118m select:where(.svelte-p118m) {border-radius:0;border-width:0 0 1px;border-style:solid;border-color:rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) var(--border-color);}.form-select.underlined.svelte-p118m select:where(.svelte-p118m):focus-visible {outline:0;border-bottom-color:1px solid var(--focused-outline-color);}.form-select.svelte-p118m select:where(.svelte-p118m):focus-visible {outline-color:var(--focused-outline-color);}.form-select.svelte-p118m select:where(.svelte-p118m) option:where(.svelte-p118m) {color:var(--font-color);}"
 };
 function FormSelect($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$2);
+	$.append_styles($$anchor, $$css$4);
 	const variant = $.mutable_state();
 	const size = $.mutable_state();
 	const isEmpty$1 = $.mutable_state();
@@ -7479,7 +7578,7 @@ function FormSelect($$anchor, $$props) {
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	let value = $.mutable_state("");
 	const handleChange = () => {
 		if (props().fieldName) {
@@ -7582,12 +7681,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 = {
@@ -7615,13 +7724,13 @@ const FORM_INPUT_TYPE = {
 //#region src/components-flex/form/FormCheckboxes.svelte
 var root_2$1 = $.template(`<li><label class="form-checkbox svelte-rx48m9"><input type="checkbox" class="form-checkbox-input svelte-rx48m9"> <span class="form-checkbox-check svelte-rx48m9"><i class="form-checkbox-check-icon svelte-rx48m9"></i></span> <span class="form-checkbox-label svelte-rx48m9"> </span></label></li>`);
 var root_1$1 = $.template(`<ul></ul>`);
-const $$css$1 = {
+const $$css$3 = {
 	hash: "svelte-rx48m9",
 	code: ".form-checkboxes.svelte-rx48m9 {position:relative;display:var(--checkboxes-display);flex-direction:var(--checkboxes-direction);flex-wrap:wrap;column-gap:var(--checkboxes-gap-x);row-gap:var(--checkboxes-gap-y);grid-template-columns:var(--checkboxes-grid-cols);width:100%;list-style:none;padding:2px 0;}.form-checkboxes.outlined.svelte-rx48m9 .form-checkbox-check:where(.svelte-rx48m9) {background-color:#fff;border:1px solid var(--border-color);}.form-checkboxes.filled.svelte-rx48m9 .form-checkbox-check:where(.svelte-rx48m9) {background-color:var(--background-color);border:1px solid var(--background-color);}.form-checkbox.svelte-rx48m9 {display:flex;align-items:center;gap:var(--checkbox-gap);cursor:pointer;}.form-checkbox-input.svelte-rx48m9 {appearance:none;margin:0;width:var(--checkbox-check-size);height:var(--checkbox-check-size);cursor:pointer;position:absolute;}.form-checkbox-check.svelte-rx48m9 {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--checkbox-check-size);height:var(--checkbox-check-size);border-radius:var(--checkbox-check-radius);transition:0.2s;}.form-checkbox-check-icon.svelte-rx48m9 {display:block;width:0.625em;height:0.375em;border-bottom:2px solid white;border-left:2px solid white;transform:translateY(-25%) rotate(-45deg);opacity:0;transition:0.2s;}.form-checkbox-label.svelte-rx48m9 {font-size:var(--checkbox-font-size);color:var(--font-color);white-space:nowrap;user-select:none;}.form-checkbox-input.svelte-rx48m9:checked ~ .form-checkbox-check:where(.svelte-rx48m9) {background-color:var(--accent-color);border-color:var(--accent-color);}.form-checkbox-input.svelte-rx48m9:checked ~ .form-checkbox-check:where(.svelte-rx48m9) .form-checkbox-check-icon:where(.svelte-rx48m9) {opacity:1;}"
 };
 function FormCheckboxes($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$1);
+	$.append_styles($$anchor, $$css$3);
 	const variant = $.mutable_state();
 	const size = $.mutable_state();
 	const options = $.mutable_state();
@@ -7630,7 +7739,7 @@ function FormCheckboxes($$anchor, $$props) {
 	const binding_group = [];
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
 	let values = $.mutable_state([]);
 	const handleChange = () => {
@@ -7671,7 +7780,7 @@ function FormCheckboxes($$anchor, $$props) {
 			})(),
 			"--checkbox-check-size": (() => {
 				if ($.get(size) === "small") return "14x";
-				if ($.get(size) === "large") return "20px";
+				if ($.get(size) === "large") return "18px";
 				return "16px";
 			})(),
 			"--checkbox-check-radius": (() => {
@@ -7747,13 +7856,13 @@ function FormCheckboxes($$anchor, $$props) {
 //#region src/components-flex/form/FormRadios.svelte
 var root_2 = $.template(`<li><label class="form-radio svelte-ps4qqa"><input type="radio" class="form-radio-input svelte-ps4qqa"> <span class="form-radio-check svelte-ps4qqa"><i class="form-radio-check-icon svelte-ps4qqa"></i></span> <span class="form-radio-label svelte-ps4qqa"> </span></label></li>`);
 var root_1 = $.template(`<ul></ul>`);
-const $$css = {
+const $$css$2 = {
 	hash: "svelte-ps4qqa",
 	code: ".form-radios.svelte-ps4qqa {position:relative;display:var(--radios-display);flex-direction:var(--radios-direction);flex-wrap:wrap;column-gap:var(--radios-gap-x);row-gap:var(--radios-gap-y);grid-template-columns:var(--radios-grid-cols);width:100%;list-style:none;padding:2px 0;}.form-radios.outlined.svelte-ps4qqa .form-radio-check:where(.svelte-ps4qqa) {background-color:#fff;border:1px solid var(--border-color);}.form-radios.filled.svelte-ps4qqa .form-radio-check:where(.svelte-ps4qqa) {background-color:var(--background-color);border:1px solid var(--background-color);}.form-radio.svelte-ps4qqa {display:flex;align-items:center;gap:var(--radio-gap);cursor:pointer;}.form-radio-input.svelte-ps4qqa {appearance:none;width:var(--radio-check-size);height:var(--radio-check-size);margin:0;cursor:pointer;position:absolute;}.form-radio-check.svelte-ps4qqa {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--radio-check-size);height:var(--radio-check-size);border-radius:100%;transition:0.2s;}.form-radio-check-icon.svelte-ps4qqa {display:block;width:var(--radio-check-icon-size);height:var(--radio-check-icon-size);border-radius:100%;background-color:var(--accent-color);opacity:0;transition:0.2s;}.form-radio-label.svelte-ps4qqa {font-size:var(--radio-font-size);color:var(--font-color);white-space:nowrap;user-select:none;}.form-radio-input.svelte-ps4qqa:checked ~ .form-radio-check:where(.svelte-ps4qqa) {border-color:var(--accent-color);}.form-radio-input.svelte-ps4qqa:checked ~ .form-radio-check:where(.svelte-ps4qqa) .form-radio-check-icon:where(.svelte-ps4qqa) {opacity:1;}"
 };
 function FormRadios($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css);
+	$.append_styles($$anchor, $$css$2);
 	const variant = $.mutable_state();
 	const size = $.mutable_state();
 	const options = $.mutable_state();
@@ -7762,7 +7871,7 @@ function FormRadios($$anchor, $$props) {
 	const binding_group = [];
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props());
+	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
 	let value = $.mutable_state("");
 	const handleChange = () => {
@@ -7880,6 +7989,124 @@ function FormRadios($$anchor, $$props) {
 	$.pop();
 }
 
+//#endregion
+//#region src/components-flex/form/FormBoolean.svelte
+const $$css$1 = {
+	hash: "svelte-3kpd",
+	code: ""
+};
+function FormBoolean($$anchor, $$props) {
+	$.append_styles($$anchor, $$css$1);
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	FormRadios($$anchor, {
+		get layerId() {
+			return layerId();
+		},
+		get props() {
+			return props();
+		}
+	});
+}
+
+//#endregion
+//#region src/components-flex/form/FormIdentifyField.svelte
+const $$css = {
+	hash: "svelte-3kpd",
+	code: ""
+};
+function FormIdentifyField($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css);
+	const fieldType = $.mutable_state();
+	const fieldProps = $.mutable_state();
+	const inputProps = $.mutable_state();
+	const booleanProps = $.mutable_state();
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	useInjectCustomizeCss(props(), layerId());
+	const identifyType = props().identifyType ?? "email";
+	$.legacy_pre_effect(() => {}, () => {
+		$.set(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";
+			}
+		})());
+	});
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.get(fieldType)), () => {
+		$.set(fieldProps, (() => {
+			return {
+				...props(),
+				fieldType: $.get(fieldType),
+				fieldName: identifyType,
+				isIdentify: true
+			};
+		})());
+	});
+	$.legacy_pre_effect(() => ($.get(fieldType), $.get(fieldProps), $.deep_read_state(props())), () => {
+		$.set(inputProps, (() => {
+			if ($.get(fieldType) !== "input") return null;
+			return {
+				...$.get(fieldProps),
+				...props().inputProps ?? {}
+			};
+		})());
+	});
+	$.legacy_pre_effect(() => ($.get(fieldType), $.get(fieldProps), $.deep_read_state(props())), () => {
+		$.set(booleanProps, (() => {
+			if ($.get(fieldType) !== "boolean") return null;
+			return {
+				...$.get(fieldProps),
+				...props().checkerProps ?? {}
+			};
+		})());
+	});
+	$.legacy_pre_effect_reset();
+	$.init();
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor$1) => {
+		FormInput($$anchor$1, {
+			get layerId() {
+				return layerId();
+			},
+			get props() {
+				return $.get(inputProps);
+			}
+		});
+	};
+	var alternate = ($$anchor$1, $$elseif) => {
+		var consequent_1 = ($$anchor$2) => {
+			FormBoolean($$anchor$2, {
+				get layerId() {
+					return layerId();
+				},
+				get props() {
+					return $.get(booleanProps);
+				}
+			});
+		};
+		var alternate_1 = ($$anchor$2) => {};
+		$.if($$anchor$1, ($$render) => {
+			if ($.get(booleanProps)) $$render(consequent_1);
+			else $$render(alternate_1, false);
+		}, $$elseif);
+	};
+	$.if(node, ($$render) => {
+		if ($.get(inputProps)) $$render(consequent);
+		else $$render(alternate, false);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+
 //#endregion
 //#region src/components-flex/shared/styles.ts
 const ROUND_STYLES = {
@@ -8152,7 +8379,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,
 	FlexButton: () => Button,
 	FlexButtonOutlined: () => ButtonOutlined,
@@ -8165,8 +8396,10 @@ __export(index_svelte5_exports, {
 	FlexDirections: () => FlexDirections,
 	FlexEmbed: () => Embed,
 	FlexForm: () => Form,
+	FlexFormBoolean: () => FormBoolean,
 	FlexFormCheckboxes: () => FormCheckboxes,
 	FlexFormField: () => FormField,
+	FlexFormIdentifyField: () => FormIdentifyField,
 	FlexFormInput: () => FormInput,
 	FlexFormRadios: () => FormRadios,
 	FlexFormSelect: () => FormSelect,
@@ -8257,6 +8490,7 @@ __export(index_svelte5_exports, {
 	flexComponentSchemes: () => flexComponentSchemes,
 	formData: () => formData,
 	formStore: () => formStore,
+	formSubmittedIdentifyValues: () => formSubmittedIdentifyValues,
 	formSubmittedValues: () => formSubmittedValues,
 	getActionRoot: () => getActionRoot,
 	getAnsweredQuestion: () => getAnsweredQuestion,
@@ -8348,48 +8582,44 @@ function ThumbnailPreview($$anchor, $$props) {
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	{
-		var consequent_1 = ($$anchor$1) => {
-			var fragment_1 = $.comment();
-			var node_1 = $.first_child(fragment_1);
-			const expression = $.derived_safe_equal(() => "previewProps" in option() && typeof option().previewProps !== "undefined" ? option().previewProps : option().props);
-			$.component(node_1, () => $.get(component), ($$anchor$2, $$component) => {
-				$$component($$anchor$2, {
-					get props() {
-						return $.get(expression);
-					},
-					children: ($$anchor$3, $$slotProps) => {
-						var fragment_2 = $.comment();
-						var node_2 = $.first_child(fragment_2);
-						{
-							var consequent = ($$anchor$4) => {
-								var fragment_3 = $.comment();
-								var node_3 = $.first_child(fragment_3);
-								$.each(node_3, 1, () => option().children, $.index, ($$anchor$5, child) => {
-									var fragment_4 = $.comment();
-									var node_4 = $.first_child(fragment_4);
-									ThumbnailPreview(node_4, { get option() {
-										return $.get(child);
-									} });
-									$.append($$anchor$5, fragment_4);
-								});
-								$.append($$anchor$4, fragment_3);
-							};
-							$.if(node_2, ($$render) => {
-								if (option().children) $$render(consequent);
-							});
-						}
-						$.append($$anchor$3, fragment_2);
-					},
-					$$slots: { default: true }
-				});
+	var consequent_1 = ($$anchor$1) => {
+		var fragment_1 = $.comment();
+		var node_1 = $.first_child(fragment_1);
+		const expression = $.derived_safe_equal(() => "previewProps" in option() && typeof option().previewProps !== "undefined" ? option().previewProps : option().props);
+		$.component(node_1, () => $.get(component), ($$anchor$2, $$component) => {
+			$$component($$anchor$2, {
+				get props() {
+					return $.get(expression);
+				},
+				children: ($$anchor$3, $$slotProps) => {
+					var fragment_2 = $.comment();
+					var node_2 = $.first_child(fragment_2);
+					var consequent = ($$anchor$4) => {
+						var fragment_3 = $.comment();
+						var node_3 = $.first_child(fragment_3);
+						$.each(node_3, 1, () => option().children, $.index, ($$anchor$5, child) => {
+							var fragment_4 = $.comment();
+							var node_4 = $.first_child(fragment_4);
+							ThumbnailPreview(node_4, { get option() {
+								return $.get(child);
+							} });
+							$.append($$anchor$5, fragment_4);
+						});
+						$.append($$anchor$4, fragment_3);
+					};
+					$.if(node_2, ($$render) => {
+						if (option().children) $$render(consequent);
+					});
+					$.append($$anchor$3, fragment_2);
+				},
+				$$slots: { default: true }
 			});
-			$.append($$anchor$1, fragment_1);
-		};
-		$.if(node, ($$render) => {
-			if ($.get(component)) $$render(consequent_1);
 		});
-	}
+		$.append($$anchor$1, fragment_1);
+	};
+	$.if(node, ($$render) => {
+		if ($.get(component)) $$render(consequent_1);
+	});
 	$.append($$anchor, fragment);
 	$.pop();
 }