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

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

@@ -371,6 +371,11 @@ const OnClickOperationOptions = [
 				name: "decode",
 				type: "BooleanKeyword",
 				default: false
+			},
+			{
+				name: "keep_native_action_viewed",
+				type: "BooleanKeyword",
+				default: false
 			}
 		]
 	},
@@ -2476,7 +2481,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];
@@ -2490,7 +2495,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,
@@ -2880,6 +2885,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
 */
@@ -2888,6 +2920,7 @@ const formStore = writable({
 	states: {}
 });
 const formSubmittedValues = writable({});
+const formSubmittedIdentifyValues = writable({});
 /**
 * @public
 */
@@ -2906,7 +2939,6 @@ const getFormFieldState = (name) => {
 * @public
 */
 const getFormFieldValue = (name) => {
-	console.log("getFormFieldValue", getFormFieldState(name)?.value ?? void 0);
 	return getFormFieldState(name)?.value ?? void 0;
 };
 /**
@@ -2994,14 +3026,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;
@@ -3009,21 +3045,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;
 		})()
@@ -3048,31 +3086,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);
@@ -3082,6 +3170,9 @@ function formDataToEventValues(campaignId, formData$1) {
 		...answersMap
 	} };
 }
+function formDataToIdentifyEventValues(values) {
+	return Object.fromEntries(Object.entries(values).map(([name, { value }]) => [name, value]));
+}
 /**
 * @public
 */
@@ -3109,13 +3200,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))
 		});
 	}
@@ -3141,16 +3249,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();
@@ -3222,13 +3328,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);
@@ -3240,19 +3346,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();
@@ -3564,7 +3668,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) {
@@ -3577,10 +3681,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 */
@@ -3607,18 +3724,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);
 	});
 };
@@ -3781,32 +3904,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$1(() => {
 		if (!props.isCustomizeCss) return;
-		const removeCss = injectCss();
-		return () => {
-			removeCss();
-		};
+		injectCss();
 	});
 };
 
@@ -3838,19 +3959,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`,
@@ -4407,18 +4528,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 {
@@ -4635,18 +4756,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);
@@ -4726,26 +4847,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);
@@ -4853,18 +4972,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);
@@ -4910,26 +5029,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);
@@ -5002,18 +5119,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);
@@ -5053,26 +5170,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);
@@ -5119,13 +5234,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();
@@ -5138,7 +5253,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",
@@ -5243,18 +5358,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);
 	});
@@ -5339,19 +5452,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%";
@@ -5432,18 +5545,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({
@@ -5518,13 +5631,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();
@@ -5534,7 +5647,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);
@@ -5733,16 +5846,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();
@@ -5812,18 +5925,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);
@@ -5910,17 +6023,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);
@@ -6036,19 +6149,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(),
@@ -6111,22 +6224,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);
@@ -6162,30 +6273,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();
 }
@@ -6195,13 +6304,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();
@@ -6211,7 +6320,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, "");
@@ -6354,78 +6463,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();
 }
@@ -6433,13 +6536,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) {
@@ -6492,20 +6595,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(() => {}, () => {
@@ -6558,13 +6661,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();
@@ -6572,7 +6675,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,
@@ -6646,18 +6749,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);
@@ -6705,18 +6808,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(() => {}, () => {
@@ -6767,17 +6870,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";
@@ -6870,20 +6973,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) {
@@ -6960,8 +7063,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);
@@ -7026,7 +7129,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();
@@ -7059,16 +7162,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) => {
@@ -7105,19 +7208,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()), () => {
@@ -7155,16 +7258,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);
@@ -7200,18 +7303,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);
@@ -7242,7 +7345,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);
@@ -7255,48 +7360,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) => {
@@ -7316,13 +7415,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();
@@ -7331,7 +7430,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) {
@@ -7409,13 +7508,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();
@@ -7423,7 +7522,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) {
@@ -7495,13 +7594,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();
@@ -7510,7 +7609,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) {
@@ -7613,12 +7712,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 = {
@@ -7646,13 +7755,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();
@@ -7661,7 +7770,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 = () => {
@@ -7702,7 +7811,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": (() => {
@@ -7778,13 +7887,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();
@@ -7793,7 +7902,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 = () => {
@@ -7911,6 +8020,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 = {
@@ -8119,4 +8346,4 @@ const flexComponentSchemes = {
 };
 
 //#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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, 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, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, 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, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, validateFormField, 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, 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, FORM_VALIDATION_DEFAULT_ERROR_MESSAGES, FORM_VALIDATION_REGEX, FORM_VALIDATION_TYPE, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormBoolean as FlexFormBoolean, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormIdentifyField as FlexFormIdentifyField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedIdentifyValues, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, 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, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, validateFormField, variables, widget_exports as widget };