@plaidev/karte-action-sdk 1.1.270-29177657.a375e44e → 1.1.270-29270413.6a2b1dc5c

package/dist/svelte5/index.es.js

@@ -414,6 +414,22 @@ const OnClickOperationOptions = [
 			default: "/"
 		}]
 	},
+	{
+		operation: "submitFormFinal",
+		args: [{
+			name: "state",
+			type: "TransitState",
+			default: "/"
+		}]
+	},
+	{
+		operation: "submitFormProgress",
+		args: [{
+			name: "state",
+			type: "TransitState",
+			default: "/"
+		}]
+	},
 	{
 		operation: "bootChat",
 		args: [
@@ -1085,6 +1101,12 @@ const formData = writable({});
 * @internal
 */
 const identifyFormData = writable({});
+/**
+* Store for form data
+*
+* @internal
+*/
+const formFields = writable({});
 
 //#endregion
 //#region src/logger.ts
@@ -1805,9 +1827,9 @@ function getCssVariables(data) {
 * @public
 */
 function getActionRoot() {
-	const root$46 = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-	if (!root$46?.shadowRoot) return null;
-	return root$46.shadowRoot;
+	const root$49 = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+	if (!root$49?.shadowRoot) return null;
+	return root$49.shadowRoot;
 }
 /** @internal */
 function createModal(App, options = {
@@ -2089,8 +2111,8 @@ function createApp(App, options = {
 */
 function createFog({ color = "#000", opacity = "50%", zIndex = 999, onclick }) {
 	console.log("createFog");
-	const root$46 = ensureModalRoot();
-	if (root$46.querySelector(".__krt-fog")) return {
+	const root$49 = ensureModalRoot();
+	if (root$49.querySelector(".__krt-fog")) return {
 		fog: null,
 		close: () => {}
 	};
@@ -2111,7 +2133,7 @@ function createFog({ color = "#000", opacity = "50%", zIndex = 999, onclick }) {
 		fog.remove();
 	};
 	fog.onclick = close$1;
-	root$46.appendChild(fog);
+	root$49.appendChild(fog);
 	return {
 		fog,
 		close: close$1
@@ -2404,18 +2426,18 @@ function createInputRegisterer(formData$1) {
 const registerInput = createInputRegisterer(formData);
 /** @internal */
 const registerIdentifyInput = createInputRegisterer(identifyFormData);
-function createAnswerValue(value) {
+function createAnswerValue$1(value) {
 	if (Array.isArray(value)) return { choices: value };
 	else if (typeof value === "string") return { free_answer: value };
 }
-function formDataToEventValues(campaignId, formData$1) {
+function formDataToEventValues$1(campaignId, formData$1) {
 	const questions = [];
 	const answersMap = {};
 	Object.entries(formData$1).forEach(([name, dataItem]) => {
 		questions.push(name);
 		const value = dataItem.value;
 		const answerKey = `question_${name}`;
-		const answerValue = createAnswerValue(value);
+		const answerValue = createAnswerValue$1(value);
 		answersMap[answerKey] = answerValue;
 	});
 	return { [campaignId]: {
@@ -2423,7 +2445,7 @@ function formDataToEventValues(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];
@@ -2436,8 +2458,8 @@ function submit() {
 	if (campaignId) {
 		const formData$1 = get(formData);
 		const identifyFormData$1 = get(identifyFormData);
-		const values = formDataToEventValues(campaignId, formData$1);
-		const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
+		const values = formDataToEventValues$1(campaignId, formData$1);
+		const identifyValues = formDataToIdentifyEventValues$1(identifyFormData$1);
 		if (Object.keys(identifyValues).length > 0) identifyValues["user_id"] = getVariables()?.[USER_ID_VARIABLE_NAME];
 		return {
 			values,
@@ -2508,7 +2530,7 @@ function removeAnswer(questionId) {
 function getAnsweredQuestion(questionId) {
 	const formData$1 = get(formData);
 	const valueState = formData$1[questionId];
-	if (valueState) return createAnswerValue(valueState.value);
+	if (valueState) return createAnswerValue$1(valueState.value);
 }
 /**
 * 回答済の回答IDのリストを取得
@@ -2825,9 +2847,355 @@ const LAYOUT_COMPONENT_NAMES = [
 	"StateItem"
 ];
 
+//#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
+*/
+const formStore = writable({
+	schemas: [],
+	states: {}
+});
+const formSubmittedValues = writable({});
+const formSubmittedIdentifyValues = writable({});
+/**
+* @public
+*/
+const getFormFieldSchema = (name) => {
+	const store = get(formStore);
+	return store.schemas.find((v) => v.name === name) ?? void 0;
+};
+/**
+* @public
+*/
+const getFormFieldState = (name) => {
+	const store = get(formStore);
+	return store.states[name] ?? void 0;
+};
+/**
+* @public
+*/
+const getFormFieldValue = (name) => {
+	return getFormFieldState(name)?.value ?? void 0;
+};
+/**
+* @public
+*/
+const getFormValues = () => {
+	const store = get(formStore);
+	return Object.fromEntries(Object.entries(store.states).map(([name, state$1]) => [name, state$1.value]));
+};
+/**
+* @public
+*/
+const getFormErrors = () => {
+	const store = get(formStore);
+	return Object.fromEntries(Object.entries(store.states).map(([name, state$1]) => [name, state$1.errorMessage]));
+};
+/**
+* @public
+*/
+const setFormFieldValue = (name, value) => {
+	formStore.update((updater) => ({
+		...updater,
+		states: (() => {
+			const states$1 = { ...updater.states };
+			if (!(name in states$1)) return states$1;
+			states$1[name].value = value;
+			if (states$1[name].value !== value) states$1[name].isDirty = true;
+			const schema = updater.schemas.find((v) => v.name === name);
+			if (schema) {
+				const res = validateFormField(schema, value);
+				states$1[name].isValid = res.isValid;
+				states$1[name].errorMessage = res.error;
+			}
+			return states$1;
+		})()
+	}));
+	formSubmittedValues.update((updater) => ({
+		...updater,
+		[name]: value
+	}));
+};
+/**
+* @public
+*/
+const setFormFieldError = (name, errorMessage) => {
+	formStore.update((updater) => ({
+		...updater,
+		states: {
+			...updater.states,
+			[name]: {
+				...updater.states[name],
+				errorMessage,
+				isValid: errorMessage !== null
+			}
+		}
+	}));
+};
+/**
+* @public
+*/
+const setFormFieldTouched = (name) => {
+	formStore.update((updater) => ({
+		...updater,
+		states: {
+			...updater.states,
+			[name]: {
+				...updater.states[name],
+				isTouched: true
+			}
+		}
+	}));
+};
+/**
+* @public
+*/
+const registerFormField = (schemas) => {
+	schemas = Array.isArray(schemas) ? schemas : [schemas];
+	formStore.update((updater) => ({
+		schemas: (() => {
+			const resultSchemes = [...updater.schemas];
+			schemas.forEach((schema) => {
+				const index = resultSchemes.findIndex((rSchema) => rSchema.name === schema.name);
+				if (index >= 0) resultSchemes[index] = {
+					name: schema.name,
+					defaultValue: schema.defaultValue,
+					type: schema.type,
+					required: schema.required,
+					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(),
+					isIdentify: schema.isIdentify,
+					validations: schema.validations
+				});
+			});
+			return resultSchemes;
+		})(),
+		states: (() => {
+			const states$1 = { ...updater.states };
+			const submittedValues = get(formSubmittedValues);
+			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;
+		})()
+	}));
+};
+/**
+* @public
+*/
+const unregisterFormField = (fieldNames) => {
+	fieldNames = typeof fieldNames === "string" ? [fieldNames] : fieldNames;
+	formStore.update((updater) => ({
+		schemas: (() => {
+			return updater.schemas.filter((v) => !fieldNames.some((name) => name === v.name));
+		})(),
+		states: (() => {
+			const states$1 = { ...updater.states };
+			fieldNames.forEach((name) => {
+				if (name in states$1) delete states$1[name];
+			});
+			return states$1;
+		})()
+	}));
+};
+const validateFormField = (schema, value) => {
+	if (schema.required) {
+		if (schema.type === "checkboxes") {
+			if (Array.isArray(value) && value.length === 0) return {
+				isValid: false,
+				error: FORM_VALIDATION_DEFAULT_ERROR_MESSAGES["required"]
+			};
+		} else if (typeof value !== "string" || value.trim() === "") return {
+			isValid: false,
+			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 (value.type === "input" || value.type === "textarea") return { free_answer: String(value.value) };
+	else return { choices: Array.isArray(value) ? value : [value] };
+}
+function formDataToEventValues(campaignId, values) {
+	const questions = [];
+	const answersMap = {};
+	Object.entries(values).forEach(([name, value]) => {
+		questions.push(name);
+		const answerKey = `question_${name}`;
+		answersMap[answerKey] = createAnswerValue(value);
+	});
+	return { [campaignId]: {
+		questions,
+		...answersMap
+	} };
+}
+function formDataToIdentifyEventValues(values) {
+	return Object.fromEntries(Object.entries(values).map(([name, { value }]) => [name, value]));
+}
+/**
+* @public
+*/
+function onSubmitForm(fn) {
+	const systemConfig = getSystem();
+	const campaignId = systemConfig.campaignId;
+	if (campaignId) {
+		let hasInvalid = false;
+		const formData$1 = get(formStore);
+		const currentState = getState();
+		const currentStateSchemas = formData$1.schemas.filter((v) => v.statePath === currentState);
+		for (const schema of currentStateSchemas) {
+			const { isValid, error: error$1 } = validateFormField(schema, formData$1.states[schema.name]?.value);
+			setFormFieldError(schema.name, isValid ? null : error$1);
+			if (!isValid) hasInvalid = true;
+		}
+		formStore.update((updater) => ({
+			...updater,
+			states: (() => {
+				const states$1 = { ...updater.states };
+				currentStateSchemas.forEach((schema) => {
+					states$1[schema.name].isTouched = true;
+				});
+				return states$1;
+			})()
+		}));
+		if (hasInvalid) return;
+		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,
+			...newValues
+		}));
+		if (Object.keys(newIdentifyValues).length > 0) formSubmittedIdentifyValues.update((updater) => ({
+			...updater,
+			...newIdentifyValues
+		}));
+		fn({
+			currentStateIdentifyValues: formDataToIdentifyEventValues(newIdentifyValues),
+			allIdentifyValues: formDataToIdentifyEventValues(get(formSubmittedIdentifyValues)),
+			currentStateValues: formDataToEventValues(campaignId, newValues),
+			allValues: formDataToEventValues(campaignId, get(formSubmittedValues))
+		});
+	}
+}
+
 //#endregion
 //#region src/components-flex/state/Header.svelte
-var root_2$5 = $.template(`<link type="text/css" rel="stylesheet">`);
+var root_2$9 = $.template(`<link type="text/css" rel="stylesheet">`);
 function Header($$anchor, $$props) {
 	$.push($$props, false);
 	const [$$stores, $$cleanup] = $.setup_stores();
@@ -2845,16 +3213,14 @@ function Header($$anchor, $$props) {
 	$.head(($$anchor$1) => {
 		var fragment = $.comment();
 		var node = $.first_child(fragment);
-		{
-			var consequent = ($$anchor$2) => {
-				var link = root_2$5();
-				$.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();
@@ -2866,14 +3232,20 @@ function Header($$anchor, $$props) {
 const BRAND_KIT_DEFAULT = {
 	font_family: "sans-serif, serif, monospace, system-ui",
 	color_text_primary: "#222222",
-	color_text_secondary: "#555555",
+	color_text_secondary: "#666666",
 	color_brand: "#33403e",
 	color_link: "#1558d6",
 	color_danger: "#f44336",
 	color_warning: "#ffa726",
 	color_success: "#10b981",
 	color_info: "#29b6f6",
-	color_white: "#FFFFFF"
+	color_white: "#FFFFFF",
+	color_form_field_placeholder: "#CCCCCC",
+	color_form_field_border: "#DBDBDB",
+	color_form_field_focused_border: "",
+	color_form_field_focused_background: "",
+	color_form_field_accent: "",
+	color_form_field_background: "#f5f5f5"
 };
 const getBrandKit = (customBrandKit) => {
 	return {
@@ -2886,7 +3258,13 @@ const getBrandKit = (customBrandKit) => {
 		color_warning: customBrandKit?.color_warning ?? BRAND_KIT_DEFAULT.color_warning,
 		color_success: customBrandKit?.color_success ?? BRAND_KIT_DEFAULT.color_success,
 		color_info: customBrandKit?.color_info ?? BRAND_KIT_DEFAULT.color_info,
-		color_white: customBrandKit?.color_white ?? BRAND_KIT_DEFAULT.color_white
+		color_white: customBrandKit?.color_white ?? BRAND_KIT_DEFAULT.color_white,
+		color_form_field_placeholder: customBrandKit?.color_form_field_placeholder ?? BRAND_KIT_DEFAULT.color_form_field_placeholder,
+		color_form_field_border: customBrandKit?.color_form_field_border ?? BRAND_KIT_DEFAULT.color_form_field_border,
+		color_form_field_focused_border: customBrandKit?.color_form_field_focused_border ?? BRAND_KIT_DEFAULT.color_form_field_focused_border,
+		color_form_field_background: customBrandKit?.color_form_field_background ?? BRAND_KIT_DEFAULT.color_form_field_background,
+		color_form_field_focused_background: customBrandKit?.color_form_field_focused_background ?? BRAND_KIT_DEFAULT.color_form_field_focused_background,
+		color_form_field_accent: customBrandKit?.color_form_field_accent ?? BRAND_KIT_DEFAULT.color_form_field_accent
 	};
 };
 const useBrandKit = () => {
@@ -2895,13 +3273,13 @@ const useBrandKit = () => {
 
 //#endregion
 //#region src/components-flex/state/State.svelte
-var root$45 = $.template(`<!> <!>`, 1);
+var root$48 = $.template(`<!> <!>`, 1);
 function State($$anchor, $$props) {
 	$.push($$props, false);
 	let customBrandKit = $.prop($$props, "customBrandKit", 8, void 0);
 	setContext("brandKit", getBrandKit(customBrandKit()));
 	$.init();
-	var fragment = root$45();
+	var fragment = root$48();
 	var node = $.first_child(fragment);
 	Header(node, {});
 	var node_1 = $.sibling(node, 2);
@@ -2913,14 +3291,14 @@ function State($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/state/StateItem.svelte
 const STATE_ITEM_CONTEXT_KEY = Symbol();
-var root_1$9 = $.template(`<div class="state-item svelte-2qb6dm"></div> <!>`, 1);
-const $$css$23 = {
+var root_1$15 = $.template(`<div class="state-item svelte-2qb6dm"></div> <!>`, 1);
+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$23);
+	$.append_styles($$anchor, $$css$33);
 	const [$$stores, $$cleanup] = $.setup_stores();
 	const $state = () => $.store_get(state, "$state", $$stores);
 	let path = $.prop($$props, "path", 8);
@@ -2932,19 +3310,17 @@ function StateItem($$anchor, $$props) {
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	{
-		var consequent = ($$anchor$1) => {
-			var fragment_1 = root_1$9();
-			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();
@@ -3269,10 +3645,18 @@ const linkTo = (to, targetBlank = true, decode = false) => () => {
 		});
 		await sleep(450);
 	}
-	const isRequiredWindowOpen = target === "native" ? false : targetBlank;
-	if (isRequiredWindowOpen) window.open(decodedTo);
+	if (targetBlank) if (target === "native") {
+		const win = window;
+		const nativeMessageName = "open_url";
+		const nativeMessageData = {
+			url: decodedTo,
+			target: "_blank"
+		};
+		win.NativeBridge?.onReceivedMessage(nativeMessageName, JSON.stringify(nativeMessageData));
+		win.webkit?.messageHandlers[nativeMessageName]?.postMessage(nativeMessageData);
+	} else window.open(decodedTo, "_blank");
 	Promise.race([_send(), sleep(650)]).then(() => {
-		if (!isRequiredWindowOpen) location.href = decodedTo;
+		if (!targetBlank) location.href = decodedTo;
 	});
 };
 /** @internal */
@@ -3298,6 +3682,29 @@ const submitForm = (to) => () => {
 	_moveTo(to);
 };
 /** @internal */
+const submitFormProgress = (to) => () => {
+	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, 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);
+	});
+};
+/** @internal */
 const bootChat = (hide_launcher, placement_pc, placement_mobile, horizontal_spacing_pc, horizontal_spacing_mobile, vertical_spacing_pc, vertical_spacing_mobile, theme_color, header_title, header_description, launcher_image) => () => {
 	const options = {
 		hide_launcher,
@@ -3325,6 +3732,8 @@ const execOnClickOperation = (onClickOperation) => {
 	else if (onClickOperation.operation === "closeApp") closeApp(onClickOperation.args[0] || "button")();
 	else if (onClickOperation.operation === "runScript") runScript(onClickOperation.args[0])();
 	else if (onClickOperation.operation === "submitForm") submitForm(onClickOperation.args[0])();
+	else if (onClickOperation.operation === "submitFormFinal") submitFormFinal(onClickOperation.args[0])();
+	else if (onClickOperation.operation === "submitFormProgress") submitFormProgress(onClickOperation.args[0])();
 	else if (onClickOperation.operation === "bootChat") bootChat(...onClickOperation.args)();
 };
 function getAnimation(animation) {
@@ -3454,24 +3863,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 modalElement = document.querySelector(`.${KARTE_MODAL_ROOT}`);
+		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;
-		if (modalElement?.shadowRoot) modalElement.shadowRoot.appendChild(style);
-		else document.head.appendChild(style);
-		return () => {
-			if (modalElement?.shadowRoot) modalElement.shadowRoot.removeChild(style);
-			else document.head.removeChild(style);
-		};
+		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;
+			}
+		});
 	}
 	onMount$1(() => {
 		if (!props.isCustomizeCss) return;
-		const removeCss = injectCss();
-		return () => {
-			removeCss();
-		};
+		injectCss();
 	});
 };
 
@@ -3502,20 +3917,20 @@ const AVATAR_SIZE_STYLES = {
 
 //#endregion
 //#region src/components-flex/avatar/Avatar.svelte
-var root_1$8 = $.template(`<img class="avatar-image svelte-1xhdr99">`);
-const $$css$22 = {
+var root_1$14 = $.template(`<img class="avatar-image svelte-1xhdr99">`);
+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$22);
+	$.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`,
@@ -3564,14 +3979,15 @@ function Avatar($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
+		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
 			...attributes,
-			class: "avatar",
+			id: props().id,
+			class: $0,
 			style: $.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1xhdr99"));
+		}, "svelte-1xhdr99"), [() => ["avatar", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
 		$.event("click", $$element, handleClick);
-		var img = root_1$8();
+		var img = root_1$14();
 		$.template_effect(() => {
 			$.set_attribute(img, "src", props().image);
 			$.set_attribute(img, "alt", props().alt);
@@ -3633,10 +4049,10 @@ const buttonPropsDefault = {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowDown.svelte
-var root$44 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 384 512"><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path></svg>`);
+var root$47 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 384 512"><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path></svg>`);
 function IconArrowDown($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$44();
+	var svg = root$47();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3645,10 +4061,10 @@ function IconArrowDown($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowUp.svelte
-var root$43 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"></path></svg>`);
+var root$46 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"></path></svg>`);
 function IconArrowUp($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$43();
+	var svg = root$46();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3657,10 +4073,10 @@ function IconArrowUp($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconUsers.svelte
-var root$42 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 640 512"><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z"></path></svg>`);
+var root$45 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 640 512"><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z"></path></svg>`);
 function IconUsers($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$42();
+	var svg = root$45();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3669,10 +4085,10 @@ function IconUsers($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowLeft.svelte
-var root$41 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 448 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"></path></svg>`);
+var root$44 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 448 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"></path></svg>`);
 function IconArrowLeft($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$41();
+	var svg = root$44();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3681,10 +4097,10 @@ function IconArrowLeft($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowRight.svelte
-var root$40 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>`);
+var root$43 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>`);
 function IconArrowRight($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$40();
+	var svg = root$43();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3693,10 +4109,10 @@ function IconArrowRight($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconBell.svelte
-var root$39 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"></path></svg>`);
+var root$42 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"></path></svg>`);
 function IconBell($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$39();
+	var svg = root$42();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3705,10 +4121,10 @@ function IconBell($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowUpFromSquare.svelte
-var root$38 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"></path></svg>`);
+var root$41 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"></path></svg>`);
 function IconArrowUpFromSquare($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$38();
+	var svg = root$41();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3717,10 +4133,10 @@ function IconArrowUpFromSquare($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconTicket.svelte
-var root$37 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 576 512"><path d="M64 64C28.7 64 0 92.7 0 128v64c0 8.8 7.4 15.7 15.7 18.6C34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V320c0-8.8-7.4-15.7-15.7-18.6C541.5 294.9 528 277 528 256s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6V128c0-35.3-28.7-64-64-64H64zm64 112l0 160c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16V176c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM96 160c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V160z"></path></svg>`);
+var root$40 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 576 512"><path d="M64 64C28.7 64 0 92.7 0 128v64c0 8.8 7.4 15.7 15.7 18.6C34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V320c0-8.8-7.4-15.7-15.7-18.6C541.5 294.9 528 277 528 256s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6V128c0-35.3-28.7-64-64-64H64zm64 112l0 160c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16V176c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM96 160c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V160z"></path></svg>`);
 function IconTicket($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$37();
+	var svg = root$40();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3729,10 +4145,10 @@ function IconTicket($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconTrack.svelte
-var root$36 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 640 512"><path d="M48 0C21.5 0 0 21.5 0 48V368c0 26.5 21.5 48 48 48H64c0 53 43 96 96 96s96-43 96-96H384c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V288 256 237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H48zM416 160h50.7L544 237.3V256H416V160zM112 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm368-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>`);
+var root$39 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 640 512"><path d="M48 0C21.5 0 0 21.5 0 48V368c0 26.5 21.5 48 48 48H64c0 53 43 96 96 96s96-43 96-96H384c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V288 256 237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H48zM416 160h50.7L544 237.3V256H416V160zM112 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm368-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>`);
 function IconTrack($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$36();
+	var svg = root$39();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3741,10 +4157,10 @@ function IconTrack($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCartShopping.svelte
-var root$35 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>`);
+var root$38 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>`);
 function IconCartShopping($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$35();
+	var svg = root$38();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3753,10 +4169,10 @@ function IconCartShopping($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircle.svelte
-var root$34 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>`);
+var root$37 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>`);
 function IconCircle($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$34();
+	var svg = root$37();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3765,10 +4181,10 @@ function IconCircle($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleQuestion.svelte
-var root$33 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path></svg>`);
+var root$36 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path></svg>`);
 function IconCircleQuestion($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$33();
+	var svg = root$36();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3777,10 +4193,10 @@ function IconCircleQuestion($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCheck.svelte
-var root$32 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>`);
+var root$35 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>`);
 function IconCheck($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$32();
+	var svg = root$35();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3789,10 +4205,10 @@ function IconCheck($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconXMark.svelte
-var root$31 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 320 512"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path></svg>`);
+var root$34 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 320 512"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path></svg>`);
 function IconXMark($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$31();
+	var svg = root$34();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3801,10 +4217,10 @@ function IconXMark($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPaperPlane.svelte
-var root$30 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"></path></svg>`);
+var root$33 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"></path></svg>`);
 function IconPaperPlane($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$30();
+	var svg = root$33();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3813,10 +4229,10 @@ function IconPaperPlane($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCopy.svelte
-var root$29 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M224 0c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224zM64 160c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64H64V224h64V160H64z"></path></svg>`);
+var root$32 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M224 0c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224zM64 160c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64H64V224h64V160H64z"></path></svg>`);
 function IconCopy($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$29();
+	var svg = root$32();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3825,10 +4241,10 @@ function IconCopy($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleXMark.svelte
-var root$28 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"></path></svg>`);
+var root$31 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"></path></svg>`);
 function IconCircleXMark($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$28();
+	var svg = root$31();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3837,10 +4253,10 @@ function IconCircleXMark($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconHeart.svelte
-var root$27 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path></svg>`);
+var root$30 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path></svg>`);
 function IconHeart($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$27();
+	var svg = root$30();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3849,10 +4265,10 @@ function IconHeart($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconMagnifyingGrass.svelte
-var root$26 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>`);
+var root$29 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>`);
 function IconMagnifyingGrass($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$26();
+	var svg = root$29();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3861,10 +4277,10 @@ function IconMagnifyingGrass($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconStar.svelte
-var root$25 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg>`);
+var root$28 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg>`);
 function IconStar($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$25();
+	var svg = root$28();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3873,10 +4289,10 @@ function IconStar($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleInfo.svelte
-var root$24 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg>`);
+var root$27 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg>`);
 function IconCircleInfo($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$24();
+	var svg = root$27();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3885,10 +4301,10 @@ function IconCircleInfo($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconEnvelope.svelte
-var root$23 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>`);
+var root$26 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>`);
 function IconEnvelope($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$23();
+	var svg = root$26();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3897,10 +4313,10 @@ function IconEnvelope($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconGift.svelte
-var root$22 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z"></path></svg>`);
+var root$25 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z"></path></svg>`);
 function IconGift($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$22();
+	var svg = root$25();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3909,10 +4325,10 @@ function IconGift($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPaperclip.svelte
-var root$21 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"><path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"></path></svg>`);
+var root$24 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"><path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"></path></svg>`);
 function IconPaperclip($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$21();
+	var svg = root$24();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3921,10 +4337,10 @@ function IconPaperclip($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconFire.svelte
-var root$20 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"><path d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"></path></svg>`);
+var root$23 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"><path d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"></path></svg>`);
 function IconFire($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$20();
+	var svg = root$23();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3933,10 +4349,10 @@ function IconFire($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconLink.svelte
-var root$19 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"></path></svg>`);
+var root$22 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"></path></svg>`);
 function IconLink($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$19();
+	var svg = root$22();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3945,10 +4361,10 @@ function IconLink($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconBuildings.svelte
-var root$18 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 512 512"><path d="M256 0c-35.3 0-64 28.7-64 64l0 64L64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0 192 0c35.3 0 64-28.7 64-64l0-256 0-128c0-35.3-28.7-64-64-64L256 0zM64 304c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm208 16c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0zm112-16l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16zM80 192l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM256 80c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM400 64l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM256 208l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16zm144 16c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0z"></path></svg>`);
+var root$21 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 512 512"><path d="M256 0c-35.3 0-64 28.7-64 64l0 64L64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0 192 0c35.3 0 64-28.7 64-64l0-256 0-128c0-35.3-28.7-64-64-64L256 0zM64 304c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm208 16c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0zm112-16l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16zM80 192l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM256 80c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM400 64l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM256 208l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16zm144 16c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0z"></path></svg>`);
 function IconBuildings($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$18();
+	var svg = root$21();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3957,10 +4373,10 @@ function IconBuildings($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconChevronsRight.svelte
-var root$17 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 512 512"><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 233.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l192-192zm-384 192l192-192c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 41.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"></path></svg>`);
+var root$20 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 512 512"><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 233.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l192-192zm-384 192l192-192c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 41.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"></path></svg>`);
 function IconChevronsRight($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$17();
+	var svg = root$20();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3969,10 +4385,10 @@ function IconChevronsRight($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconChevronRight.svelte
-var root$16 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg>`);
+var root$19 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg>`);
 function IconChevronRight($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$16();
+	var svg = root$19();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3981,10 +4397,10 @@ function IconChevronRight($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPhone.svelte
-var root$15 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"></path></svg>`);
+var root$18 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"></path></svg>`);
 function IconPhone($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$15();
+	var svg = root$18();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -3993,10 +4409,10 @@ function IconPhone($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconLocationDot.svelte
-var root$14 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 384 512"><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"></path></svg>`);
+var root$17 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;" viewBox="0 0 384 512"><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"></path></svg>`);
 function IconLocationDot($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$14();
+	var svg = root$17();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4071,18 +4487,18 @@ const ICON_VARIANTS = {
 
 //#endregion
 //#region src/components-flex/icon/Icon.svelte
-const $$css$21 = {
+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$21);
+	$.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 {
@@ -4106,12 +4522,13 @@ function Icon($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
+		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
 			...attributes,
-			class: "icon",
+			id: props().id,
+			class: $0,
 			style: $.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1kl9m59"));
+		}, "svelte-1kl9m59"), [() => ["icon", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
 		$.event("click", $$element, handleClick);
 		var fragment_1 = $.comment();
 		var node_1 = $.first_child(fragment_1);
@@ -4296,20 +4713,20 @@ function darkenColor(color, percent) {
 
 //#endregion
 //#region src/components-flex/button/Button.svelte
-var root_2$4 = $.template(`<div class="button-icon svelte-l0rauj"><!></div>`);
-var root_1$7 = $.template(`<!> <span class="button-label"> </span>`, 1);
-const $$css$20 = {
+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$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$20);
+	$.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);
@@ -4378,36 +4795,35 @@ function Button($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
+		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
 			...attributes,
-			class: "button",
+			id: props().id,
+			class: $0,
 			style: $.get(style),
 			"data-layer-id": layerId(),
 			"data-variant": variant
-		}, "svelte-l0rauj"));
+		}, "svelte-l0rauj"), [() => ["button", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
 		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$7();
+		var fragment_1 = root_1$13();
 		var node_1 = $.first_child(fragment_1);
-		{
-			var consequent = ($$anchor$2) => {
-				var div = root_2$4();
-				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);
@@ -4513,20 +4929,20 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 
 //#endregion
 //#region src/components-flex/button-outlined/ButtonOutlined.svelte
-var root_2$3 = $.template(`<div class="button-outlined-icon svelte-z8gomx"><!></div>`);
-var root_1$6 = $.template(`<!> <span class="button-outlined-label svelte-z8gomx"> </span>`, 1);
-const $$css$19 = {
+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$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$19);
+	$.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);
@@ -4570,29 +4986,27 @@ function ButtonOutlined($$anchor, $$props) {
 			"data-layer-id": layerId()
 		}, "svelte-z8gomx"));
 		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$6();
+		var fragment_1 = root_1$12();
 		var node_1 = $.first_child(fragment_1);
-		{
-			var consequent = ($$anchor$2) => {
-				var div = root_2$3();
-				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 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);
 		$.template_effect(() => $.set_text(text, props().label ?? buttonOutlinedPropsDefault.label));
@@ -4662,20 +5076,20 @@ const getButtonTextThemeStyles = getPropStyles(callback$2);
 
 //#endregion
 //#region src/components-flex/button-text/ButtonText.svelte
-var root_2$2 = $.template(`<div class="button-text-icon svelte-l90o4j"><!></div>`);
-var root_1$5 = $.template(`<!> <span class="button-text-label svelte-l90o4j"> </span>`, 1);
-const $$css$18 = {
+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$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$18);
+	$.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);
@@ -4713,28 +5127,26 @@ function ButtonText($$anchor, $$props) {
 			"data-layer-id": layerId()
 		}, "svelte-l90o4j"));
 		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$5();
+		var fragment_1 = root_1$11();
 		var node_1 = $.first_child(fragment_1);
-		{
-			var consequent = ($$anchor$2) => {
-				var div = root_2$2();
-				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);
@@ -4779,15 +5191,15 @@ const getTextThemeStyles = getPropStyles(callback$1);
 
 //#endregion
 //#region src/components-flex/close-button/CloseButton.svelte
-var root_2$1 = $.template(`<span></span>`);
-var root_1$4 = $.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$17 = {
+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$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$17);
+	$.append_styles($$anchor, $$css$27);
 	const hasLabel = $.mutable_state();
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
@@ -4800,8 +5212,8 @@ function CloseButton($$anchor, $$props) {
 	let eventName = $.prop($$props, "eventName", 8, "");
 	let eventValue = $.prop($$props, "eventValue", 8, void 0);
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props());
-	const { attributes, element, handleClick } = useClickable_default({
+	useInjectCustomizeCss(props(), layerId());
+	const { attributes, element, handleClick } = useClickable_default(props().onClick ? props() : {
 		onClick: {
 			operation: "closeApp",
 			args: ["button"]
@@ -4891,31 +5303,30 @@ function CloseButton($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
+		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
 			...attributes,
-			class: `close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`,
+			id: props().id,
+			class: $0,
 			"data-layer-id": layerId(),
 			style: $.get(style)
-		}, "svelte-18wmfyq"));
+		}, "svelte-18wmfyq"), [() => [`close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`, ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
 		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$4();
+		var fragment_1 = root_1$10();
 		var span = $.first_child(fragment_1);
 		var svg = $.child(span);
 		$.set_attribute(svg, "fill", color);
 		$.reset(span);
 		var node_1 = $.sibling(span, 2);
-		{
-			var consequent = ($$anchor$2) => {
-				var span_1 = root_2$1();
-				$.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);
 	});
@@ -4999,20 +5410,20 @@ const IMAGE_ROUND_STYLES = {
 
 //#endregion
 //#region src/components-flex/image/Image.svelte
-var root_1$3 = $.template(`<img class="image-img svelte-1olvu11">`);
-const $$css$16 = {
+var root_1$9 = $.template(`<img class="image-img svelte-1olvu11">`);
+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$16);
+	$.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%";
@@ -5051,14 +5462,15 @@ function Image($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
+		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
 			...attributes,
-			class: "image",
+			id: props().id,
+			class: $0,
 			style: $.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1olvu11"));
+		}, "svelte-1olvu11"), [() => ["image", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
 		$.event("click", $$element, handleClick);
-		var img = root_1$3();
+		var img = root_1$9();
 		$.template_effect(() => {
 			$.set_attribute(img, "src", props().image);
 			$.set_attribute(img, "alt", props().alt);
@@ -5092,18 +5504,18 @@ const IMAGE_ASPECT_VARIANTS = {
 
 //#endregion
 //#region src/components-flex/layout/Layout.svelte
-const $$css$15 = {
+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$15);
+	$.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({
@@ -5114,6 +5526,7 @@ function Layout($$anchor, $$props) {
 			rowGap: props().rowGap ?? props().gap,
 			columnGap: props().columnGap ?? props().gap,
 			width: props().width,
+			maxWidth: props().maxWidth,
 			height: props().height,
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
@@ -5130,12 +5543,13 @@ function Layout($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	$.element(node, () => "div", false, ($$element, $$anchor$1) => {
 		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
+		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
 			...attributes,
-			class: "layout",
+			id: props().id,
+			class: $0,
 			style: $.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1o103hp"));
+		}, "svelte-1o103hp"), [() => ["layout", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
 		$.event("click", $$element, handleClick);
 		var fragment_1 = $.comment();
 		var node_1 = $.first_child(fragment_1);
@@ -5174,15 +5588,15 @@ const LAYOUT_JUSTIFY = [
 
 //#endregion
 //#region src/components-flex/slider/Slider.svelte
-var root_1$2 = $.template(`<button><i></i></button>`);
-var root$13 = $.template(`<div class="slider svelte-wwv1o"><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
-const $$css$14 = {
+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$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$14);
+	$.append_styles($$anchor, $$css$24);
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const baseContainerStyle = $.mutable_state();
@@ -5192,7 +5606,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);
@@ -5345,7 +5759,7 @@ function Slider($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var div = root$13();
+	var div = root$16();
 	var div_1 = $.child(div);
 	var ul = $.child(div_1);
 	var node = $.child(ul);
@@ -5356,7 +5770,7 @@ function Slider($$anchor, $$props) {
 	$.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
 	var div_2 = $.sibling(div_1, 2);
 	$.each(div_2, 5, () => $.get(indicators) ?? [], $.index, ($$anchor$1, indicator, i) => {
-		var button = root_1$2();
+		var button = root_1$8();
 		var i_1 = $.child(button);
 		$.reset(button);
 		$.template_effect(($0, $1) => {
@@ -5375,11 +5789,13 @@ function Slider($$anchor, $$props) {
 	});
 	$.reset(div_2);
 	$.reset(div);
-	$.template_effect(($0) => {
+	$.template_effect(($0, $1) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_class(div, 1, $0, "svelte-wwv1o");
 		$.set_attribute(div, "data-layer-id", layerId());
-		$.set_style(ul, $0);
+		$.set_style(ul, $1);
 		$.set_style(div_2, $.get(indicatorListStyle));
-	}, [() => [$.get(containerStyle), overrideStyle()].join(" ")], $.derived_safe_equal);
+	}, [() => $.clsx(["slider", ...props().classNames ?? []].join(" ")), () => [$.get(containerStyle), overrideStyle()].join(" ")], $.derived_safe_equal);
 	$.event("mousedown", div_1, handleMousedown);
 	$.event("touchstart", div_1, handleTouchstart);
 	$.append($$anchor, div);
@@ -5388,20 +5804,20 @@ function Slider($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/slider/SliderItem.svelte
-var root$12 = $.template(`<li class="slider-item svelte-1m93md9"><!></li>`);
-const $$css$13 = {
+var root$15 = $.template(`<li><!></li>`);
+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$13);
+	$.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$12();
+	var li = root$15();
 	var node = $.child(li);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
@@ -5416,7 +5832,11 @@ function SliderItem($$anchor, $$props) {
 		$.append($$anchor$1, fragment);
 	});
 	$.reset(li);
-	$.template_effect(() => $.set_attribute(li, "data-layer-id", layerId()));
+	$.template_effect(($0) => {
+		$.set_attribute(li, "data-layer-id", layerId());
+		$.set_attribute(li, "id", props().id);
+		$.set_class(li, 1, $0, "svelte-1m93md9");
+	}, [() => $.clsx(["slider-item", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, li);
 	$.pop();
 }
@@ -5463,19 +5883,19 @@ const TEXT_VARIANTS = { size: {
 
 //#endregion
 //#region src/components-flex/text/Text.svelte
-var root$11 = $.template(`<p class="text svelte-vifn7y"><!></p>`);
-const $$css$12 = {
+var root$14 = $.template(`<p><!></p>`);
+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$12);
+	$.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);
@@ -5545,32 +5965,34 @@ function Text($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var p = root$11();
+	var p = root$14();
 	var node = $.child(p);
 	$.html(node, () => $.get(escapedHTML), false, false);
 	$.reset(p);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_class(p, 1, $0, "svelte-vifn7y");
+		$.set_attribute(p, "id", props().id);
 		$.set_attribute(p, "data-layer-id", layerId());
 		$.set_style(p, $.get(style));
-	});
+	}, [() => $.clsx(["text", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, p);
 	$.pop();
 }
 
 //#endregion
 //#region src/components-flex/rich-text/RichText.svelte
-var root$10 = $.template(`<div class="rich-text svelte-dxr423"><!></div>`);
-const $$css$11 = {
+var root$13 = $.template(`<div><!></div>`);
+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$11);
+	$.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);
@@ -5617,14 +6039,16 @@ function RichText($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var div = root$10();
+	var div = root$13();
 	var node = $.child(div);
 	$.html(node, () => props().content, false, false);
 	$.reset(div);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_class(div, 1, $0, "svelte-dxr423");
 		$.set_style(div, $.get(style));
 		$.set_attribute(div, "data-layer-id", layerId());
-	});
+	}, [() => $.clsx(["rich-text", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, div);
 	$.pop();
 }
@@ -5683,20 +6107,20 @@ const getTextLinkThemeStyles = getPropStyles(callback);
 
 //#endregion
 //#region src/components-flex/text-link/TextLink.svelte
-var root_1$1 = $.template(`<!> <span><!></span>`, 1);
-const $$css$10 = {
+var root_1$7 = $.template(`<!> <span><!></span>`, 1);
+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$10);
+	$.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(),
@@ -5749,31 +6173,30 @@ function TextLink($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
+		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
 			...attributes,
-			class: `link ${underlineClass}`,
+			id: props().id,
+			class: $0,
 			style: $.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-dc9m5n"));
+		}, "svelte-dc9m5n"), [() => [`link ${underlineClass}`, ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
 		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$1();
+		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);
@@ -5808,47 +6231,45 @@ const TEXT_LINK_UNDERLINE = {
 
 //#endregion
 //#region src/components-flex/background-overlay/BackgroundOverlay.svelte
-var root_1 = $.template(`<div></div>`);
-const $$css$9 = {
+var root_1$6 = $.template(`<div></div>`);
+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$9);
+	$.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();
-			$.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();
 }
 
 //#endregion
 //#region src/components-flex/modal/Modal.svelte
-var root_2 = $.template(`<!> <!>`, 1);
+var root_2$4 = $.template(`<!> <!>`, 1);
 var root_4 = $.template(`<div role="dialog" aria-modal="true"><!></div>`);
-var root$9 = $.template(`<!> <!>`, 1);
-const $$css$8 = {
+var root$12 = $.template(`<!> <!>`, 1);
+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$8);
+	$.append_styles($$anchor, $$css$18);
 	const close$1 = $.mutable_state();
 	const backgroundClick = $.mutable_state();
 	const backgroundClickPC = $.mutable_state();
@@ -5858,7 +6279,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, "");
@@ -5976,6 +6397,7 @@ function Modal($$anchor, $$props) {
 		});
 		const propsStyle = objToStyle({
 			width: props().width,
+			...toCssPadding(props()),
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
 			...toCssRadius(props()),
@@ -5995,97 +6417,91 @@ function Modal($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var fragment = root$9();
+	var fragment = root$12();
 	$.event("keydown", $.window, function(...$$args) {
 		$.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();
-					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();
 }
 
 //#endregion
 //#region src/components-flex/code/Code.svelte
-var root$8 = $.template(`<div class="code svelte-igivoz"><!></div>`);
-const $$css$7 = {
+var root$11 = $.template(`<div><!></div>`);
+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$7);
+	$.append_styles($$anchor, $$css$17);
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	function unescapeBraces(str) {
@@ -6118,11 +6534,15 @@ function Code($$anchor, $$props) {
 		};
 	});
 	$.init();
-	var div = root$8();
+	var div = root$11();
 	var node = $.child(div);
 	$.html(node, () => props().rawHtml, false, false);
 	$.reset(div);
-	$.template_effect(() => $.set_attribute(div, "data-layer-id", layerId()));
+	$.template_effect(($0) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_class(div, 1, $0, "svelte-igivoz");
+		$.set_attribute(div, "data-layer-id", layerId());
+	}, [() => $.clsx(["code", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, div);
 	$.pop();
 }
@@ -6133,21 +6553,21 @@ const LIST_ITEM_CONTEXT_KEY = "ListItemContext";
 
 //#endregion
 //#region src/components-flex/list/ListItem.svelte
-var root$7 = $.template(`<li class="list-item svelte-b4b4gh"><!></li>`);
-const $$css$6 = {
+var root$10 = $.template(`<li><!></li>`);
+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$6);
+	$.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(() => {}, () => {
@@ -6171,7 +6591,7 @@ function ListItem($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var li = root$7();
+	var li = root$10();
 	var node = $.child(li);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
@@ -6187,24 +6607,26 @@ function ListItem($$anchor, $$props) {
 		$.append($$anchor$1, fragment);
 	});
 	$.reset(li);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_attribute(li, "id", props().id);
+		$.set_class(li, 1, $0, "svelte-b4b4gh");
 		$.set_attribute(li, "data-layer-id", layerId());
 		$.set_style(li, $.get(style));
-	});
+	}, [() => $.clsx(["list-item", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, li);
 	$.pop();
 }
 
 //#endregion
 //#region src/components-flex/list/List.svelte
-var root$6 = $.template(`<ul class="list svelte-v2vy6p"><!></ul>`);
-const $$css$5 = {
+var root$9 = $.template(`<ul><!></ul>`);
+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$5);
+	$.append_styles($$anchor, $$css$15);
 	const variables$1 = $.mutable_state();
 	const actionTableData = $.mutable_state();
 	const items = $.mutable_state();
@@ -6212,7 +6634,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,
@@ -6246,14 +6668,16 @@ function List($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var ul = root$6();
+	var ul = root$9();
 	var node = $.child(ul);
 	$.slot(node, $$props, "default", {}, null);
 	$.reset(ul);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_attribute(ul, "id", props().id);
+		$.set_class(ul, 1, $0, "svelte-v2vy6p");
 		$.set_attribute(ul, "data-layer-id", layerId());
 		$.set_style(ul, $.get(style));
-	});
+	}, [() => $.clsx(["list", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, ul);
 	$.pop();
 }
@@ -6283,19 +6707,19 @@ function splitNumberAndUnit(value) {
 
 //#endregion
 //#region src/components-flex/multi-column/MultiColumn.svelte
-var root$5 = $.template(`<ul class="list svelte-aoppwp"><!></ul>`);
-const $$css$4 = {
-	hash: "svelte-aoppwp",
-	code: ".list.svelte-aoppwp {padding:0;margin:0;list-style:none;display:flex;flex-direction:row;}"
+var root$8 = $.template(`<ul><!></ul>`);
+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$4);
+	$.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);
@@ -6326,33 +6750,35 @@ function MultiColumn($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var ul = root$5();
+	var ul = root$8();
 	var node = $.child(ul);
 	$.slot(node, $$props, "default", {}, null);
 	$.reset(ul);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
 		$.set_attribute(ul, "data-layer-id", layerId());
+		$.set_attribute(ul, "id", props().id);
+		$.set_class(ul, 1, $0, "svelte-9pwfkr");
 		$.set_style(ul, $.get(style));
-	});
+	}, [() => $.clsx(["multi-column", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, ul);
 	$.pop();
 }
 
 //#endregion
 //#region src/components-flex/multi-column/MultiColumnItem.svelte
-var root$4 = $.template(`<li class="multi-column-item svelte-18bwzrs"><!></li>`);
-const $$css$3 = {
+var root$7 = $.template(`<li><!></li>`);
+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$3);
+	$.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(() => {}, () => {
@@ -6375,7 +6801,7 @@ function MultiColumnItem($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var li = root$4();
+	var li = root$7();
 	var node = $.child(li);
 	$.element(node, () => element, false, ($$element, $$anchor$1) => {
 		let attributes_1;
@@ -6390,28 +6816,30 @@ function MultiColumnItem($$anchor, $$props) {
 		$.append($$anchor$1, fragment);
 	});
 	$.reset(li);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_attribute(li, "id", props().id);
+		$.set_class(li, 1, $0, "svelte-18bwzrs");
 		$.set_attribute(li, "data-layer-id", layerId());
 		$.set_style(li, $.get(style));
-	});
+	}, [() => $.clsx(["multi-column-item", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, li);
 	$.pop();
 }
 
 //#endregion
 //#region src/components-flex/youtube/Youtube.svelte
-var root$3 = $.template(`<div class="youtube svelte-odfkc2"><div class="youtube-player"></div></div>`);
-const $$css$2 = {
+var root$6 = $.template(`<div><div class="youtube-player"></div></div>`);
+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$2);
+	$.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";
@@ -6487,35 +6915,37 @@ function Youtube($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var div = root$3();
+	var div = root$6();
 	var div_1 = $.child(div);
 	$.bind_this(div_1, ($$value) => $.set(playerRef, $$value), () => $.get(playerRef));
 	$.reset(div);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_class(div, 1, $0, "svelte-odfkc2");
 		$.set_style(div, $.get(style));
 		$.set_attribute(div, "data-layer-id", layerId());
-	});
+	}, [() => $.clsx(["youtube", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, div);
 	$.pop();
 }
 
 //#endregion
 //#region src/components-flex/count-down/CountDown.svelte
-var root$2 = $.template(`<div class="countdown svelte-1n395il"><!></div>`);
-const $$css$1 = {
+var root$5 = $.template(`<div><!></div>`);
+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$1);
+	$.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) {
@@ -6564,7 +6994,7 @@ function CountDown($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var div = root$2();
+	var div = root$5();
 	var node = $.child(div);
 	$.slot(node, $$props, "default", {
 		get day() {
@@ -6581,15 +7011,19 @@ function CountDown($$anchor, $$props) {
 		}
 	}, null);
 	$.reset(div);
-	$.template_effect(() => $.set_attribute(div, "data-layer-id", layerId()));
+	$.template_effect(($0) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_class(div, 1, $0, "svelte-1n395il");
+		$.set_attribute(div, "data-layer-id", layerId());
+	}, [() => $.clsx(["countdown", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, div);
 	$.pop();
 }
 
 //#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);
@@ -6645,7 +7079,7 @@ const useText = (props) => {
 
 //#endregion
 //#region src/components-flex/count-down/CountDownValue.svelte
-var root$1 = $.template(`<span class="count-down-value"> </span>`);
+var root$4 = $.template(`<span> </span>`);
 function CountDownValue($$anchor, $$props) {
 	$.push($$props, false);
 	const [$$stores, $$cleanup] = $.setup_stores();
@@ -6654,7 +7088,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();
@@ -6669,14 +7103,16 @@ function CountDownValue($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var span = root$1();
+	var span = root$4();
 	$.set_style(span, style);
 	var text = $.child(span, true);
 	$.reset(span);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_attribute(span, "id", props().id);
+		$.set_class(span, 1, $0);
 		$.set_attribute(span, "data-layer-id", layerId());
 		$.set_text(text, $.get(value));
-	});
+	}, [() => $.clsx(["count-down-value", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, span);
 	$.pop();
 	$$cleanup();
@@ -6684,17 +7120,17 @@ function CountDownValue($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/clip-copy/ClipCopy.svelte
-var root = $.template(`<div class="clipboard svelte-orhp4c"><button class="clipboard-button svelte-orhp4c"><!></button> <span class="clipboard-tooltip svelte-orhp4c">コピーしました</span></div>`);
-const $$css = {
+var root$3 = $.template(`<div><button class="clipboard-button svelte-orhp4c"><!></button> <span class="clipboard-tooltip svelte-orhp4c">コピーしました</span></div>`);
+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);
+	$.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) => {
@@ -6709,7 +7145,7 @@ function ClipCopy($$anchor, $$props) {
 		}, 3e3);
 	};
 	$.init();
-	var div = root();
+	var div = root$3();
 	var button = $.child(div);
 	var node = $.child(button);
 	$.slot(node, $$props, "default", {}, null);
@@ -6717,15 +7153,950 @@ function ClipCopy($$anchor, $$props) {
 	$.bind_this(button, ($$value) => $.set(buttonElement, $$value), () => $.get(buttonElement));
 	var span = $.sibling(button, 2);
 	$.reset(div);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_class(div, 1, $0, "svelte-orhp4c");
 		$.set_attribute(div, "data-layer-id", layerId());
 		$.set_attribute(span, "aria-hidden", !$.get(showTooltip));
-	});
+	}, [() => $.clsx(["clipboard", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.event("click", button, handleClick);
 	$.append($$anchor, div);
 	$.pop();
 }
 
+//#endregion
+//#region src/components-flex/embed/Embed.svelte
+var root$2 = $.template(`<div><!></div>`);
+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$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(), layerId());
+	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
+	const width = props().width ?? "100%";
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variables$1, {
+			"--width": width,
+			"--height": props().height ?? "auto",
+			"--aspect": props().aspect ?? aspectVariantStyles?.aspect
+		});
+	});
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.get(variables$1)), () => {
+		$.set(styleObj, {
+			...toCssCommon(props()),
+			...$.get(variables$1)
+		});
+	});
+	$.legacy_pre_effect(() => $.get(styleObj), () => {
+		$.set(style, objToStyle($.get(styleObj)));
+	});
+	$.legacy_pre_effect_reset();
+	$.init();
+	var div = root$2();
+	var node = $.child(div);
+	$.html(node, () => props().iframe, false, false);
+	$.reset(div);
+	$.template_effect(($0) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_style(div, $.get(style));
+		$.set_class(div, 1, $0, "svelte-13tkwh0");
+		$.set_attribute(div, "data-layer-id", layerId());
+	}, [() => $.clsx(["embed", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
+	$.append($$anchor, div);
+	$.pop();
+}
+
+//#endregion
+//#region src/components-flex/form/Form.svelte
+var root$1 = $.template(`<div><!></div>`);
+const $$css$8 = {
+	hash: "svelte-nekp9e",
+	code: ".form.svelte-nekp9e {width:100%;}"
+};
+function Form($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$8);
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	useInjectCustomizeCss(props(), layerId());
+	$.init();
+	var div = root$1();
+	var node = $.child(div);
+	$.slot(node, $$props, "default", {}, null);
+	$.reset(div);
+	$.template_effect(($0) => {
+		$.set_attribute(div, "id", props().id);
+		$.set_class(div, 1, $0, "svelte-nekp9e");
+		$.set_attribute(div, "data-layer-id", layerId());
+	}, [() => $.clsx(["form", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
+	$.append($$anchor, div);
+	$.pop();
+}
+
+//#endregion
+//#region src/components-flex/form/styles.ts
+const getFormFieldLabelThemeStyles = getPropStyles(({ brandKit }) => {
+	return {
+		default: { color: brandKit.color_text_primary },
+		gray: { color: brandKit.color_text_secondary },
+		brand: { color: brandKit.color_brand }
+	};
+});
+const FORM_FIELD_LABEL_SIZE_STYLES = {
+	small: { fontSize: "12px" },
+	medium: { fontSize: "14px" },
+	large: { fontSize: "16px" }
+};
+
+//#endregion
+//#region src/components-flex/form/FormField.svelte
+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$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$7);
+	const variables$1 = $.mutable_state();
+	const style = $.mutable_state();
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	useInjectCustomizeCss(props(), layerId());
+	const { brandKit } = useBrandKit();
+	let registeredFieldName = $.mutable_state("");
+	let errorMessage = $.mutable_state(null);
+	let isShowErrorMessage = $.mutable_state(false);
+	const theme = getFormFieldLabelThemeStyles(brandKit)[props().labelTheme ?? "gray"];
+	const size = FORM_FIELD_LABEL_SIZE_STYLES[props().labelSize ?? "medium"];
+	onDestory(() => {
+		if (!$.get(registeredFieldName)) return;
+		unregisterFormField($.get(registeredFieldName));
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variables$1, {
+			"--danger-color": brandKit.color_danger,
+			"--form-field-direction": props().direction ?? "column",
+			"--form-field-gap": props().gap ?? "4px",
+			"--form-field-label-width": props().labelWidth ?? "100%",
+			"--form-field-label-font-size": size.fontSize,
+			"--form-field-label-color": theme.color
+		});
+	});
+	$.legacy_pre_effect(() => $.get(variables$1), () => {
+		$.set(style, objToStyle({ ...$.get(variables$1) }));
+	});
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.get(registeredFieldName), formStore), () => {
+		if (props().fieldName) {
+			if ($.get(registeredFieldName) && $.get(registeredFieldName) !== props().fieldName) unregisterFormField($.get(registeredFieldName));
+			registerFormField({
+				type: props().fieldType,
+				name: props().fieldName,
+				defaultValue: props().defaultValue,
+				required: props().required,
+				validations: props().validations,
+				isIdentify: props().isIdentify
+			});
+			formStore.subscribe(($store) => {
+				$.set(errorMessage, $store.states[props().fieldName]?.errorMessage ?? null);
+				$.set(isShowErrorMessage, $store.states[props().fieldName]?.isTouched ?? false);
+			});
+			$.set(registeredFieldName, props().fieldName);
+		}
+	});
+	$.legacy_pre_effect_reset();
+	$.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);
+	};
+	$.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);
+	});
+	$.reset(dd);
+	$.reset(dl);
+	$.template_effect(($0) => {
+		$.set_attribute(dl, "id", props().id);
+		$.set_class(dl, 1, $0, "svelte-1maygd6");
+		$.set_attribute(dl, "data-layer-id", layerId());
+		$.set_style(dl, $.get(style));
+	}, [() => $.clsx([
+		"field",
+		props().required ? "required" : "",
+		...props().classNames ?? []
+	].join(" "))], $.derived_safe_equal);
+	$.append($$anchor, dl);
+	$.pop();
+}
+
+//#endregion
+//#region src/components-flex/form/FormInput.svelte
+var root_1$4 = $.template(`<input type="text">`);
+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$6);
+	const variant = $.mutable_state();
+	const size = $.mutable_state();
+	const variables$1 = $.mutable_state();
+	const style = $.mutable_state();
+	const type = $.mutable_state();
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	const { brandKit } = useBrandKit();
+	useInjectCustomizeCss(props(), layerId());
+	let value = $.mutable_state("");
+	const handleBlur = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(value));
+		}
+	};
+	const handleInput = () => {
+		setFormFieldValue(props().fieldName, $.get(value));
+	};
+	onMount$1(() => {
+		if (props().fieldName) $.set(value, getFormFieldValue(props().fieldName));
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variant, props().variant ?? "outlined");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(size, props().size ?? "medium");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variables$1, (() => {
+			return {
+				"--form-input-width": props().width ?? "100%",
+				"--border-color": props().borderColor || brandKit.color_form_field_border,
+				"--focused-outline-color": props().focusedBorderColor || brandKit.color_form_field_focused_border || brandKit.color_brand,
+				"--placeholder-color": props().placeholderColor ?? brandKit.color_form_field_placeholder,
+				"--font-color": props().fontColor || brandKit.color_text_primary,
+				"--background-color": props().backgroundColor || brandKit.color_form_field_background
+			};
+		})());
+	});
+	$.legacy_pre_effect(() => $.get(variables$1), () => {
+		$.set(style, objToStyle({ ...$.get(variables$1) }));
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(type, (() => {
+			if (props().inputType === "url") return "url";
+			if (props().inputType === "tel") return "tel";
+			if (props().inputType === "email") return "email";
+			return "text";
+		})());
+	});
+	$.legacy_pre_effect_reset();
+	$.init();
+	FormField($$anchor, {
+		get layerId() {
+			return layerId();
+		},
+		get props() {
+			return props();
+		},
+		children: ($$anchor$1, $$slotProps) => {
+			var input = root_1$4();
+			$.remove_input_defaults(input);
+			$.template_effect(($0) => {
+				$.set_attribute(input, "placeholder", props().placeholder);
+				$.set_attribute(input, "name", props().fieldName);
+				$.set_class(input, 1, $0, "svelte-176cxs0");
+				$.set_style(input, $.get(style));
+			}, [() => $.clsx([
+				"form-input",
+				$.get(variant),
+				$.get(size)
+			].join(" "))], $.derived_safe_equal);
+			$.bind_value(input, () => $.get(value), ($$value) => $.set(value, $$value));
+			$.event("blur", input, handleBlur);
+			$.event("input", input, handleInput);
+			$.append($$anchor$1, input);
+		},
+		$$slots: { default: true }
+	});
+	$.pop();
+}
+
+//#endregion
+//#region src/components-flex/form/FormTextarea.svelte
+var root_1$3 = $.template(`<textarea></textarea>`);
+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$5);
+	const variant = $.mutable_state();
+	const size = $.mutable_state();
+	const variables$1 = $.mutable_state();
+	const style = $.mutable_state();
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	const { brandKit } = useBrandKit();
+	useInjectCustomizeCss(props(), layerId());
+	let value = $.mutable_state("");
+	const handleBlur = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(value));
+		}
+	};
+	const handleInput = () => {
+		setFormFieldValue(props().fieldName, $.get(value));
+	};
+	onMount$1(() => {
+		if (props().fieldName) $.set(value, getFormFieldValue(props().fieldName));
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variant, props().variant ?? "outlined");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(size, props().size ?? "medium");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variables$1, (() => {
+			return {
+				"--form-textarea-width": props().width ?? "100%",
+				"--border-color": props().borderColor || brandKit.color_form_field_border,
+				"--focused-outline-color": props().focusedBorderColor || brandKit.color_form_field_focused_border || brandKit.color_brand,
+				"--placeholder-color": props().placeholderColor ?? brandKit.color_form_field_placeholder,
+				"--font-color": props().fontColor || brandKit.color_text_primary,
+				"--background-color": props().backgroundColor || brandKit.color_form_field_background
+			};
+		})());
+	});
+	$.legacy_pre_effect(() => $.get(variables$1), () => {
+		$.set(style, objToStyle({ ...$.get(variables$1) }));
+	});
+	$.legacy_pre_effect_reset();
+	$.init();
+	FormField($$anchor, {
+		get layerId() {
+			return layerId();
+		},
+		get props() {
+			return props();
+		},
+		children: ($$anchor$1, $$slotProps) => {
+			var textarea = root_1$3();
+			$.remove_textarea_child(textarea);
+			$.template_effect(($0) => {
+				$.set_attribute(textarea, "placeholder", props().placeholder);
+				$.set_attribute(textarea, "rows", props().rows);
+				$.set_attribute(textarea, "name", props().fieldName);
+				$.set_class(textarea, 1, $0, "svelte-1oqg2c0");
+				$.set_style(textarea, $.get(style));
+			}, [() => $.clsx([
+				"form-textarea",
+				$.get(variant),
+				$.get(size)
+			].join(" "))], $.derived_safe_equal);
+			$.bind_value(textarea, () => $.get(value), ($$value) => $.set(value, $$value));
+			$.event("blur", textarea, handleBlur);
+			$.event("input", textarea, handleInput);
+			$.append($$anchor$1, textarea);
+		},
+		$$slots: { default: true }
+	});
+	$.pop();
+}
+
+//#endregion
+//#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$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$4);
+	const variant = $.mutable_state();
+	const size = $.mutable_state();
+	const isEmpty$1 = $.mutable_state();
+	const variables$1 = $.mutable_state();
+	const style = $.mutable_state();
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	const { brandKit } = useBrandKit();
+	useInjectCustomizeCss(props(), layerId());
+	let value = $.mutable_state("");
+	const handleChange = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(value));
+		}
+	};
+	onMount$1(() => {
+		if (props().fieldName) $.set(value, getFormFieldValue(props().fieldName));
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variant, props().variant ?? "outlined");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(size, props().size ?? "medium");
+	});
+	$.legacy_pre_effect(() => $.get(value), () => {
+		$.set(isEmpty$1, $.get(value) === "");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(variables$1, (() => {
+			return {
+				"--width": props().width ?? "100%",
+				"--border-color": props().borderColor || brandKit.color_form_field_border,
+				"--focused-outline-color": props().focusedBorderColor || brandKit.color_form_field_focused_border || brandKit.color_brand,
+				"--placeholder-color": props().placeholderColor ?? brandKit.color_form_field_placeholder,
+				"--font-color": props().fontColor || brandKit.color_text_primary,
+				"--background-color": props().backgroundColor || brandKit.color_form_field_background
+			};
+		})());
+	});
+	$.legacy_pre_effect(() => $.get(variables$1), () => {
+		$.set(style, objToStyle({ ...$.get(variables$1) }));
+	});
+	$.legacy_pre_effect_reset();
+	$.init();
+	FormField($$anchor, {
+		get layerId() {
+			return layerId();
+		},
+		get props() {
+			return props();
+		},
+		children: ($$anchor$1, $$slotProps) => {
+			var div = root_1$2();
+			var select = $.child(div);
+			$.template_effect(() => {
+				$.get(value);
+				$.invalidate_inner_signals(() => {
+					props();
+				});
+			});
+			var option_1 = $.child(select);
+			option_1.value = null == (option_1.__value = "") ? "" : "";
+			var text = $.child(option_1, true);
+			$.reset(option_1);
+			var node = $.sibling(option_1);
+			$.each(node, 1, () => props().options, $.index, ($$anchor$2, option) => {
+				var option_2 = root_2$2();
+				var option_2_value = {};
+				var text_1 = $.child(option_2, true);
+				$.reset(option_2);
+				$.template_effect(() => {
+					if (option_2_value !== (option_2_value = $.get(option).value)) option_2.value = null == (option_2.__value = $.get(option).value) ? "" : $.get(option).value;
+					$.set_text(text_1, $.get(option).label);
+				});
+				$.append($$anchor$2, option_2);
+			});
+			$.reset(select);
+			$.reset(div);
+			$.template_effect(($0) => {
+				$.set_class(div, 1, $0, "svelte-p118m");
+				$.set_style(div, $.get(style));
+				$.set_attribute(select, "name", props().fieldName);
+				$.set_text(text, props().placeholder ?? "選択してください");
+			}, [() => $.clsx([
+				"form-select",
+				$.get(variant),
+				$.get(size),
+				$.get(isEmpty$1) ? "empty" : ""
+			].join(" "))], $.derived_safe_equal);
+			$.bind_select_value(select, () => $.get(value), ($$value) => $.set(value, $$value));
+			$.event("change", select, handleChange);
+			$.append($$anchor$1, div);
+		},
+		$$slots: { default: true }
+	});
+	$.pop();
+}
+
+//#endregion
+//#region src/components-flex/form/types.ts
+const FORM_FIELD_LABEL_SIZE = {
+	small: "スモール",
+	medium: "ミディアム",
+	large: "ラージ"
+};
+const FORM_FIELD_LABEL_THEME = {
+	default: "デフォルト",
+	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 = {
+	outlined: "アウトライン",
+	underlined: "アンダーライン",
+	filled: "塗りつぶし"
+};
+const FORM_FIELD_VARIANT_FOR_CHECKER = {
+	outlined: "アウトライン",
+	filled: "塗りつぶし"
+};
+const FORM_FIELD_SIZE = {
+	small: "スモール",
+	medium: "ミディアム",
+	large: "ラージ"
+};
+const FORM_INPUT_TYPE = {
+	TEXT: "text",
+	URL: "url",
+	TEL: "tel",
+	EMAIL: "email"
+};
+
+//#endregion
+//#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$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$3);
+	const variant = $.mutable_state();
+	const size = $.mutable_state();
+	const options = $.mutable_state();
+	const variables$1 = $.mutable_state();
+	const listStyles = $.mutable_state();
+	const binding_group = [];
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	useInjectCustomizeCss(props(), layerId());
+	const { brandKit } = useBrandKit();
+	let values = $.mutable_state([]);
+	const handleChange = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(values));
+		}
+	};
+	onMount$1(() => {
+		if (props().fieldName) $.set(values, getFormFieldValue(props().fieldName));
+	});
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), FORM_FIELD_VARIANT_FOR_CHECKER), () => {
+		$.set(variant, props().variant && Object.keys(FORM_FIELD_VARIANT_FOR_CHECKER).includes(props().variant) ? props().variant : "outlined");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(size, props().size ?? "medium");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(options, (props().options ?? []).filter((v) => v.label && v.value));
+	});
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.get(size)), () => {
+		$.set(variables$1, {
+			"--checkboxes-display": props().layout === "grid" ? "grid" : "flex",
+			"--checkboxes-direction": (() => {
+				if (props().layout === "grid") return void 0;
+				return props().layout === "horizontal" ? "row" : "column";
+			})(),
+			"--checkboxes-grid-cols": (() => {
+				if (props().layout !== "grid") return void 0;
+				return `repeat(${props().layoutGridCols ?? 1},minmax(0,1fr))`;
+			})(),
+			"--checkboxes-gap-y": props().layoutGapY ?? "0",
+			"--checkboxes-gap-x": props().layoutGapX ?? "0",
+			"--checkbox-font-size": (() => {
+				if ($.get(size) === "small") return "12px";
+				if ($.get(size) === "large") return "16px";
+				return "14px";
+			})(),
+			"--checkbox-check-size": (() => {
+				if ($.get(size) === "small") return "14x";
+				if ($.get(size) === "large") return "18px";
+				return "16px";
+			})(),
+			"--checkbox-check-radius": (() => {
+				if ($.get(size) === "small") return "2px";
+				if ($.get(size) === "large") return "6px";
+				return "4px";
+			})(),
+			"--checkbox-gap": (() => {
+				if ($.get(size) === "small") return "6px";
+				if ($.get(size) === "large") return "12px";
+				return "8px";
+			})(),
+			"--accent-color": props().accentColor || brandKit.color_brand,
+			"--border-color": props().borderColor || brandKit.color_form_field_border,
+			"--font-color": props().fontColor || brandKit.color_text_primary,
+			"--background-color": props().backgroundColor || brandKit.color_form_field_background
+		});
+	});
+	$.legacy_pre_effect(() => $.get(variables$1), () => {
+		$.set(listStyles, objToStyle({ ...$.get(variables$1) }));
+	});
+	$.legacy_pre_effect_reset();
+	$.init();
+	FormField($$anchor, {
+		get layerId() {
+			return layerId();
+		},
+		get props() {
+			return props();
+		},
+		children: ($$anchor$1, $$slotProps) => {
+			var ul = root_1$1();
+			$.each(ul, 5, () => $.get(options), $.index, ($$anchor$2, option) => {
+				var li = root_2$1();
+				var label = $.child(li);
+				var input = $.child(label);
+				$.remove_input_defaults(input);
+				var input_value;
+				var span = $.sibling(input, 4);
+				var text = $.child(span, true);
+				$.reset(span);
+				$.reset(label);
+				$.reset(li);
+				$.template_effect(() => {
+					if (input_value !== (input_value = $.get(option).value)) input.value = null == (input.__value = $.get(option).value) ? "" : $.get(option).value;
+					$.set_attribute(input, "name", props().fieldName);
+					$.set_text(text, $.get(option).label);
+				});
+				$.bind_group(binding_group, [], input, () => {
+					$.get(option).value;
+					return $.get(values);
+				}, ($$value) => $.set(values, $$value));
+				$.event("change", input, handleChange);
+				$.append($$anchor$2, li);
+			});
+			$.reset(ul);
+			$.template_effect(($0) => {
+				$.set_class(ul, 1, $0, "svelte-rx48m9");
+				$.set_style(ul, $.get(listStyles));
+			}, [() => $.clsx([
+				"form-checkboxes",
+				$.get(variant),
+				$.get(size)
+			].join(" "))], $.derived_safe_equal);
+			$.append($$anchor$1, ul);
+		},
+		$$slots: { default: true }
+	});
+	$.pop();
+}
+
+//#endregion
+//#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$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$2);
+	const variant = $.mutable_state();
+	const size = $.mutable_state();
+	const options = $.mutable_state();
+	const variables$1 = $.mutable_state();
+	const listStyles = $.mutable_state();
+	const binding_group = [];
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	useInjectCustomizeCss(props(), layerId());
+	const { brandKit } = useBrandKit();
+	let value = $.mutable_state("");
+	const handleChange = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(value));
+		}
+	};
+	onMount$1(() => {
+		if (props().fieldName) $.set(value, getFormFieldValue(props().fieldName));
+	});
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), FORM_FIELD_VARIANT_FOR_CHECKER), () => {
+		$.set(variant, props().variant && Object.keys(FORM_FIELD_VARIANT_FOR_CHECKER).includes(props().variant) ? props().variant : "outlined");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(size, props().size ?? "medium");
+	});
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.set(options, (props().options ?? []).filter((v) => v.label && v.value));
+	});
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.get(size)), () => {
+		$.set(variables$1, {
+			"--radios-display": props().layout === "grid" ? "grid" : "flex",
+			"--radios-direction": (() => {
+				if (props().layout === "grid") return void 0;
+				return props().layout === "horizontal" ? "row" : "column";
+			})(),
+			"--radios-grid-cols": (() => {
+				if (props().layout !== "grid") return void 0;
+				return `repeat(${props().layoutGridCols ?? 1},minmax(0,1fr))`;
+			})(),
+			"--radios-gap-y": props().layoutGapY ?? "0",
+			"--radios-gap-x": props().layoutGapX ?? "0",
+			"--radio-font-size": (() => {
+				if ($.get(size) === "small") return "12px";
+				if ($.get(size) === "large") return "16px";
+				return "14px";
+			})(),
+			"--radio-check-size": (() => {
+				if ($.get(size) === "small") return "14px";
+				if ($.get(size) === "large") return "20px";
+				return "16px";
+			})(),
+			"--radio-check-icon-size": (() => {
+				if ($.get(size) === "small") return "8px";
+				if ($.get(size) === "large") return "14px";
+				return "10px";
+			})(),
+			"--radio-check-radius": (() => {
+				if ($.get(size) === "small") return "2px";
+				if ($.get(size) === "large") return "6px";
+				return "4px";
+			})(),
+			"--radio-gap": (() => {
+				if ($.get(size) === "small") return "6px";
+				if ($.get(size) === "large") return "12px";
+				return "8px";
+			})(),
+			"--accent-color": props().accentColor || brandKit.color_brand,
+			"--border-color": props().borderColor || brandKit.color_form_field_border,
+			"--font-color": props().fontColor || brandKit.color_text_primary,
+			"--background-color": props().backgroundColor || brandKit.color_form_field_background
+		});
+	});
+	$.legacy_pre_effect(() => $.get(variables$1), () => {
+		$.set(listStyles, objToStyle({ ...$.get(variables$1) }));
+	});
+	$.legacy_pre_effect_reset();
+	$.init();
+	FormField($$anchor, {
+		get layerId() {
+			return layerId();
+		},
+		get props() {
+			return props();
+		},
+		children: ($$anchor$1, $$slotProps) => {
+			var ul = root_1();
+			$.each(ul, 5, () => $.get(options), $.index, ($$anchor$2, option) => {
+				var li = root_2();
+				var label = $.child(li);
+				var input = $.child(label);
+				$.remove_input_defaults(input);
+				var input_value;
+				var span = $.sibling(input, 4);
+				var text = $.child(span, true);
+				$.reset(span);
+				$.reset(label);
+				$.reset(li);
+				$.template_effect(() => {
+					if (input_value !== (input_value = $.get(option).value)) input.value = null == (input.__value = $.get(option).value) ? "" : $.get(option).value;
+					$.set_attribute(input, "name", props().fieldName);
+					$.set_text(text, $.get(option).label);
+				});
+				$.bind_group(binding_group, [], input, () => {
+					$.get(option).value;
+					return $.get(value);
+				}, ($$value) => $.set(value, $$value));
+				$.event("change", input, handleChange);
+				$.append($$anchor$2, li);
+			});
+			$.reset(ul);
+			$.template_effect(($0) => {
+				$.set_class(ul, 1, $0, "svelte-ps4qqa");
+				$.set_style(ul, $.get(listStyles));
+			}, [() => $.clsx([
+				"form-radios",
+				$.get(variant),
+				$.get(size)
+			].join(" "))], $.derived_safe_equal);
+			$.append($$anchor$1, ul);
+		},
+		$$slots: { default: true }
+	});
+	$.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 = {
@@ -6934,4 +8305,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, 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, 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, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, 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 };