@plaidev/karte-action-sdk 1.1.270-29170585.8999f4d3 → 1.1.270-29228770.05dce6ca

package/dist/svelte5/index.front2.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]: {
@@ -2436,7 +2458,7 @@ function submit() {
 	if (campaignId) {
 		const formData$1 = get(formData);
 		const identifyFormData$1 = get(identifyFormData);
-		const values = formDataToEventValues(campaignId, formData$1);
+		const values = formDataToEventValues$1(campaignId, formData$1);
 		const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
 		if (Object.keys(identifyValues).length > 0) identifyValues["user_id"] = getVariables()?.[USER_ID_VARIABLE_NAME];
 		return {
@@ -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,252 @@ const LAYOUT_COMPONENT_NAMES = [
 	"StateItem"
 ];
 
+//#endregion
+//#region src/components-flex/form.ts
+/**
+* @internal
+*/
+const formStore = writable({
+	schemas: [],
+	states: {}
+});
+const formSubmittedValues = 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) => {
+	console.log("getFormFieldValue", getFormFieldState(name)?.value ?? void 0);
+	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()
+				};
+				else resultSchemes.push({
+					name: schema.name,
+					defaultValue: schema.defaultValue,
+					type: schema.type,
+					required: schema.required,
+					statePath: getState()
+				});
+			});
+			return resultSchemes;
+		})(),
+		states: (() => {
+			const states$1 = { ...updater.states };
+			const submittedValues = get(formSubmittedValues);
+			schemas.forEach((field) => {
+				if (!(field.name in states$1) && field.name) {
+					states$1[field.name] = {
+						isDirty: false,
+						isValid: false,
+						isTouched: false,
+						value: (() => {
+							if (submittedValues[field.name]) return submittedValues[field.name];
+							if (field.type === "checkboxes") return Array.isArray(field.defaultValue) ? field.defaultValue : [];
+							else return typeof field.defaultValue === "string" ? field.defaultValue : "";
+						})(),
+						errorMessage: null
+					};
+					console.log(`register ${field.name}`, JSON.stringify(states$1[field.name]));
+				}
+			});
+			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) => {
+	const store = get(formStore);
+	if (schema.required) {
+		if (schema.type === "checkboxes") {
+			if (value.length === 0) return {
+				isValid: false,
+				error: "1つ以上選択してください"
+			};
+		} else if (typeof value !== "string" || value.trim() === "") return {
+			isValid: false,
+			error: "入力してください"
+		};
+	}
+	return {
+		isValid: true,
+		error: void 0
+	};
+};
+function createAnswerValue(value) {
+	if (Array.isArray(value)) return { choices: value };
+	else if (typeof value === "string") return { free_answer: value };
+}
+function formDataToEventValues(campaignId, formData$1) {
+	const questions = [];
+	const answersMap = {};
+	Object.entries(formData$1).forEach(([name, value]) => {
+		questions.push(name);
+		const answerKey = `question_${name}`;
+		answersMap[answerKey] = createAnswerValue(value);
+	});
+	return { [campaignId]: {
+		questions,
+		...answersMap
+	} };
+}
+/**
+* @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 values = getFormValues();
+		formSubmittedValues.update((updater) => ({
+			...updater,
+			...values
+		}));
+		fn({
+			currentStateValues: formDataToEventValues(campaignId, values),
+			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();
@@ -2847,7 +3112,7 @@ function Header($$anchor, $$props) {
 		var node = $.first_child(fragment);
 		{
 			var consequent = ($$anchor$2) => {
-				var link = root_2$5();
+				var link = root_2$9();
 				$.template_effect(() => $.set_attribute(link, "href", $.get(googleFontUrl)));
 				$.append($$anchor$2, link);
 			};
@@ -2866,14 +3131,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 +3157,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 +3172,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 +3190,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$31 = {
 	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$31);
 	const [$$stores, $$cleanup] = $.setup_stores();
 	const $state = () => $.store_get(state, "$state", $$stores);
 	let path = $.prop($$props, "path", 8);
@@ -2934,7 +3211,7 @@ function StateItem($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	{
 		var consequent = ($$anchor$1) => {
-			var fragment_1 = root_1$9();
+			var fragment_1 = root_1$15();
 			var div = $.first_child(fragment_1);
 			var node_1 = $.sibling(div, 2);
 			$.slot(node_1, $$props, "default", {}, null);
@@ -3298,6 +3575,23 @@ const submitForm = (to) => () => {
 	_moveTo(to);
 };
 /** @internal */
+const submitFormProgress = (to) => () => {
+	onSubmitForm(({ currentStateValues }) => {
+		send_event("_answer_question_progress", {
+			...currentStateValues,
+			state: getState()
+		});
+		_moveTo(to);
+	});
+};
+/** @internal */
+const submitFormFinal = (to) => () => {
+	onSubmitForm(({ allValues }) => {
+		send_event("_answer_question", allValues);
+		_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 +3619,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) {
@@ -3456,14 +3752,22 @@ var useClickable_default = useClickable;
 //#region src/hooks/useInjectCustomizeCss.ts
 const useInjectCustomizeCss = (props) => {
 	function injectCss() {
-		const modalElement = document.querySelector(`.${KARTE_MODAL_ROOT}`);
+		const modalElements = Array.from(document.querySelectorAll(`.${KARTE_MODAL_ROOT}`));
 		const style = document.createElement("style");
+		let headAppended = false;
 		style.textContent = props.customizeCss;
-		if (modalElement?.shadowRoot) modalElement.shadowRoot.appendChild(style);
-		else document.head.appendChild(style);
+		modalElements.forEach((modalElement) => {
+			if (modalElement?.shadowRoot) modalElement.shadowRoot.appendChild(style);
+			else if (!headAppended) {
+				document.head.appendChild(style);
+				headAppended = true;
+			}
+		});
 		return () => {
-			if (modalElement?.shadowRoot) modalElement.shadowRoot.removeChild(style);
-			else document.head.removeChild(style);
+			modalElements.forEach((modalElement) => {
+				if (modalElement?.shadowRoot) modalElement.shadowRoot.removeChild(style);
+				else document.head.removeChild(style);
+			});
 		};
 	}
 	onMount(() => {
@@ -3502,14 +3806,14 @@ 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$30 = {
 	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$30);
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
 	const imgStyle = $.mutable_state();
@@ -3564,14 +3868,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 +3938,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 +3950,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 +3962,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 +3974,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 +3986,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 +3998,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 +4010,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 +4022,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 +4034,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 +4046,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 +4058,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 +4070,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 +4082,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 +4094,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 +4106,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 +4118,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 +4130,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 +4142,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 +4154,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 +4166,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 +4178,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 +4190,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 +4202,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 +4214,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 +4226,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 +4238,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 +4250,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 +4262,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 +4274,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 +4286,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 +4298,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,13 +4376,13 @@ const ICON_VARIANTS = {
 
 //#endregion
 //#region src/components-flex/icon/Icon.svelte
-const $$css$21 = {
+const $$css$29 = {
 	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$29);
 	const style = $.mutable_state();
 	const IconComponent = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
@@ -4106,12 +4411,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,15 +4602,15 @@ 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$28 = {
 	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$28);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
@@ -4378,19 +4684,20 @@ 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 div = root_2$8();
 				var node_2 = $.child(div);
 				const expression = $.derived_safe_equal(() => ({
 					variant: props().iconVariant,
@@ -4513,15 +4820,15 @@ 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$27 = {
 	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$27);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
@@ -4570,11 +4877,11 @@ 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 div = root_2$7();
 				var node_2 = $.child(div);
 				const expression = $.derived_safe_equal(() => ({
 					variant: props().iconVariant,
@@ -4662,15 +4969,15 @@ 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$26 = {
 	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$26);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
@@ -4713,11 +5020,11 @@ 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 div = root_2$6();
 				var node_2 = $.child(div);
 				const expression = $.derived_safe_equal(() => ({
 					variant: props().iconVariant,
@@ -4779,15 +5086,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$25 = {
 	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$25);
 	const hasLabel = $.mutable_state();
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
@@ -4801,7 +5108,7 @@ function CloseButton($$anchor, $$props) {
 	let eventValue = $.prop($$props, "eventValue", 8, void 0);
 	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
-	const { attributes, element, handleClick } = useClickable_default({
+	const { attributes, element, handleClick } = useClickable_default(props().onClick ? props() : {
 		onClick: {
 			operation: "closeApp",
 			args: ["button"]
@@ -4891,14 +5198,15 @@ 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);
@@ -4906,7 +5214,7 @@ function CloseButton($$anchor, $$props) {
 		var node_1 = $.sibling(span, 2);
 		{
 			var consequent = ($$anchor$2) => {
-				var span_1 = root_2$1();
+				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)));
@@ -4999,14 +5307,14 @@ 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$24 = {
 	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$24);
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
 	const imgStyle = $.mutable_state();
@@ -5051,14 +5359,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,13 +5401,13 @@ const IMAGE_ASPECT_VARIANTS = {
 
 //#endregion
 //#region src/components-flex/layout/Layout.svelte
-const $$css$15 = {
+const $$css$23 = {
 	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$23);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
@@ -5114,6 +5423,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 +5440,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 +5485,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$22 = {
 	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$22);
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const baseContainerStyle = $.mutable_state();
@@ -5345,7 +5656,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 +5667,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 +5686,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 +5701,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$21 = {
 	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$21);
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
 	useInjectCustomizeCss(props());
 	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 +5729,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,14 +5780,14 @@ 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$20 = {
 	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$20);
 	const escapedHTML = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({ content: "" }));
@@ -5545,28 +5862,30 @@ 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$19 = {
 	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$19);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({ content: "" }));
 	let layerId = $.prop($$props, "layerId", 8, "");
@@ -5617,14 +5936,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,14 +6004,14 @@ 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$18 = {
 	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$18);
 	const escapedHTML = $.mutable_state();
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
@@ -5749,14 +6070,15 @@ 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) => {
@@ -5808,14 +6130,14 @@ 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$17 = {
 	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$17);
 	let backgroundOverlay = $.prop($$props, "backgroundOverlay", 8, false);
 	let className = $.prop($$props, "class", 8, void 0);
 	const dispatch = createEventDispatcher();
@@ -5824,7 +6146,7 @@ function BackgroundOverlay($$anchor, $$props) {
 	var node = $.first_child(fragment);
 	{
 		var consequent = ($$anchor$1) => {
-			var div = root_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);
@@ -5839,16 +6161,16 @@ function BackgroundOverlay($$anchor, $$props) {
 
 //#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$16 = {
 	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$16);
 	const close$1 = $.mutable_state();
 	const backgroundClick = $.mutable_state();
 	const backgroundClickPC = $.mutable_state();
@@ -5976,6 +6298,7 @@ function Modal($$anchor, $$props) {
 		});
 		const propsStyle = objToStyle({
 			width: props().width,
+			...toCssPadding(props()),
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
 			...toCssRadius(props()),
@@ -5995,7 +6318,7 @@ 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);
 	});
@@ -6005,7 +6328,7 @@ function Modal($$anchor, $$props) {
 		var alternate = ($$anchor$1, $$elseif) => {
 			{
 				var consequent_1 = ($$anchor$2) => {
-					var fragment_1 = root_2();
+					var fragment_1 = root_2$4();
 					var node_1 = $.first_child(fragment_1);
 					BackgroundOverlay(node_1, {
 						class: "background-bp-pc",
@@ -6078,14 +6401,14 @@ function Modal($$anchor, $$props) {
 
 //#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$15 = {
 	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$15);
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	function unescapeBraces(str) {
@@ -6118,11 +6441,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,14 +6460,14 @@ 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$14 = {
 	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$14);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	const innerStyle = $.mutable_state();
@@ -6171,7 +6498,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 +6514,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$13 = {
 	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$13);
 	const variables$1 = $.mutable_state();
 	const actionTableData = $.mutable_state();
 	const items = $.mutable_state();
@@ -6246,14 +6575,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,14 +6614,14 @@ 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$12 = {
+	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$12);
 	const style = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
@@ -6326,28 +6657,30 @@ 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$11 = {
 	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$11);
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
@@ -6375,7 +6708,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,24 +6723,26 @@ 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$10 = {
 	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$10);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
@@ -6487,28 +6822,30 @@ 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$9 = {
 	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$9);
 	const day = $.mutable_state();
 	const hour = $.mutable_state();
 	const min = $.mutable_state();
@@ -6564,7 +6901,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,7 +6918,11 @@ 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();
 }
@@ -6645,7 +6986,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();
@@ -6669,14 +7010,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,14 +7027,14 @@ 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$8 = {
 	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$8);
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	useInjectCustomizeCss(props());
@@ -6709,7 +7052,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 +7060,826 @@ 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$7 = {
+	hash: "svelte-13tkwh0",
+	code: ".embed.svelte-13tkwh0 {width:var(--width);height:var(--height);aspect-ratio:var(--aspect);}.embed.svelte-13tkwh0 iframe {vertical-align:bottom;max-width:100%;width:var(--width) !important;height:var(--height) !important;aspect-ratio:var(--aspect) !important;}"
+};
+function Embed($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$7);
+	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());
+	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$6 = {
+	hash: "svelte-nekp9e",
+	code: ".form.svelte-nekp9e {width:100%;}"
+};
+function Form($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$6);
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	useInjectCustomizeCss(props());
+	$.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$5 = {
+	hash: "svelte-1maygd6",
+	code: ".field.svelte-1maygd6 {margin:0;padding:0;border:0;display:flex;width:100%;flex-direction:var(--form-field-direction);gap:var(--form-field-gap);}.field.svelte-1maygd6 > dt:where(.svelte-1maygd6) {position:relative;font-weight:bold;font-size:var(--form-field-label-font-size);width:var(--form-field-label-width);flex-shrink:0;color:var(--form-field-label-color);display:inline-flex;gap:0.4em;}.field-required.svelte-1maygd6 {flex-shrink:0;font-size:0.6em;color:var(--danger-color);}.field.svelte-1maygd6 > dd:where(.svelte-1maygd6) {position:relative;margin:0;flex-grow:1;}.field-error.svelte-1maygd6 {position:absolute;top:calc(100% + 8px);left:0;display:inline-flex;color:var(--danger-color);border:1px solid var(--danger-color);border-radius:4px;background-color:#fff;padding:6px 12px;font-size:12px;margin:0;z-index:10;}.field-error.svelte-1maygd6::after {content:'';display:block;position:absolute;top:0;left:8px;width:8px;height:8px;transform:rotate(45deg) translateY(-80%);border-top:1px solid var(--danger-color);border-left:1px solid var(--danger-color);border-radius:1px;background-color:#fff;}"
+};
+function FormField($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$5);
+	const variables$1 = $.mutable_state();
+	const style = $.mutable_state();
+	let props = $.prop($$props, "props", 24, () => ({}));
+	let layerId = $.prop($$props, "layerId", 8, "");
+	useInjectCustomizeCss(props());
+	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
+			});
+			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$4 = {
+	hash: "svelte-176cxs0",
+	code: ".form-input.svelte-176cxs0 {margin:0;width:var(--form-input-width);-webkit-appearance:none;color:var(--font-color);transition:all 0.2s;}.form-input.small.svelte-176cxs0 {font-size:12px;line-height:19px;padding:6px 10px 5px;border-radius:4px;}.form-input.medium.svelte-176cxs0 {font-size:14px;line-height:21px;padding:8px 12px 7px;border-radius:6px;}.form-input.large.svelte-176cxs0 {font-size:16px;line-height:25px;padding:11px 16px 10px;border-radius:8px;}.form-input.outlined.svelte-176cxs0 {border:1px solid var(--border-color);}.form-input.filled.svelte-176cxs0 {background-color:var(--background-color);border:1px solid var(--background-color);}.form-input.underlined.svelte-176cxs0 {border-radius:0;border-width:0 0 1px;border-style:solid;border-color:rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) var(--border-color);}.form-input.underlined.svelte-176cxs0:focus-visible {outline:0;border-bottom-color:1px solid var(--focused-outline-color);}.form-input.svelte-176cxs0:focus-visible {outline-color:var(--focused-outline-color);}.form-input.svelte-176cxs0::placeholder {color:var(--placeholder-color);}"
+};
+function FormInput($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$4);
+	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());
+	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(() => {
+		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$3 = {
+	hash: "svelte-1oqg2c0",
+	code: ".form-textarea.svelte-1oqg2c0 {margin:0;width:var(--form-textarea-width);max-width:var(--form-textarea-width);min-width:var(--form-textarea-width);-webkit-appearance:none;vertical-align:bottom;color:var(--font-color);transition:all 0.2s;}.form-textarea.small.svelte-1oqg2c0 {font-size:12px;line-height:19px;padding:6px 10px 5px;border-radius:4px;}.form-textarea.medium.svelte-1oqg2c0 {font-size:14px;line-height:21px;padding:8px 12px 7px;border-radius:6px;}.form-textarea.large.svelte-1oqg2c0 {font-size:16px;line-height:25px;padding:11px 16px 10px;border-radius:8px;}.form-textarea.outlined.svelte-1oqg2c0 {border:1px solid var(--border-color);}.form-textarea.filled.svelte-1oqg2c0 {background-color:var(--background-color);border:1px solid var(--background-color);}.form-textarea.underlined.svelte-1oqg2c0 {border-radius:0;border-width:0 0 1px;border-style:solid;border-color:rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) var(--border-color);}.form-textarea.underlined.svelte-1oqg2c0:focus-visible {outline:0;border-bottom-color:1px solid var(--focused-outline-color);}.form-textarea.svelte-1oqg2c0:focus-visible {outline-color:var(--focused-outline-color);}.form-textarea.svelte-1oqg2c0::placeholder {color:var(--placeholder-color);}"
+};
+function FormTextarea($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$3);
+	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());
+	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(() => {
+		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$2 = {
+	hash: "svelte-p118m",
+	code: ".form-select.svelte-p118m {position:relative;display:inline-flex;width:var(--width);color:var(--font-color);}.form-select.empty.svelte-p118m select:where(.svelte-p118m) {color:var(--placeholder-color);}.form-select.svelte-p118m:after {content:'';display:block;position:absolute;top:50%;right:12px;width:6px;height:6px;border-bottom:1px solid var(--font-color);border-left:1px solid var(--font-color);transform:translateY(-75%) rotate(-45deg);}.form-select.svelte-p118m select:where(.svelte-p118m) {margin:0;width:100%;-webkit-appearance:none;transition:all 0.2s;}.form-select.small.svelte-p118m select:where(.svelte-p118m) {font-size:12px;line-height:19px;padding:6px 32px 5px 10px;border-radius:4px;}.form-select.medium.svelte-p118m select:where(.svelte-p118m) {font-size:14px;line-height:21px;padding:8px 36px 7px 12px;border-radius:6px;}.form-select.large.svelte-p118m select:where(.svelte-p118m) {font-size:16px;line-height:25px;padding:11px 40px 10px 16px;border-radius:8px;}.form-select.large.svelte-p118m:after {right:20px;}.form-select.outlined.svelte-p118m select:where(.svelte-p118m) {border:1px solid var(--border-color);}.form-select.filled.svelte-p118m select:where(.svelte-p118m) {background-color:var(--background-color);border:1px solid var(--background-color);}.form-select.underlined.svelte-p118m select:where(.svelte-p118m) {border-radius:0;border-width:0 0 1px;border-style:solid;border-color:rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) var(--border-color);}.form-select.underlined.svelte-p118m select:where(.svelte-p118m):focus-visible {outline:0;border-bottom-color:1px solid var(--focused-outline-color);}.form-select.svelte-p118m select:where(.svelte-p118m):focus-visible {outline-color:var(--focused-outline-color);}.form-select.svelte-p118m select:where(.svelte-p118m) option:where(.svelte-p118m) {color:var(--font-color);}"
+};
+function FormSelect($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$2);
+	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());
+	let value = $.mutable_state("");
+	const handleChange = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(value));
+		}
+	};
+	onMount(() => {
+		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_FIELD_TYPE = {
+	INPUT: "input",
+	SELECT: "select",
+	CHECKBOX: "checkbox",
+	CHECKBOXES: "checkboxes",
+	RADIOS: "radio",
+	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$1 = {
+	hash: "svelte-rx48m9",
+	code: ".form-checkboxes.svelte-rx48m9 {position:relative;display:var(--checkboxes-display);flex-direction:var(--checkboxes-direction);flex-wrap:wrap;column-gap:var(--checkboxes-gap-x);row-gap:var(--checkboxes-gap-y);grid-template-columns:var(--checkboxes-grid-cols);width:100%;list-style:none;padding:2px 0;}.form-checkboxes.outlined.svelte-rx48m9 .form-checkbox-check:where(.svelte-rx48m9) {background-color:#fff;border:1px solid var(--border-color);}.form-checkboxes.filled.svelte-rx48m9 .form-checkbox-check:where(.svelte-rx48m9) {background-color:var(--background-color);border:1px solid var(--background-color);}.form-checkbox.svelte-rx48m9 {display:flex;align-items:center;gap:var(--checkbox-gap);cursor:pointer;}.form-checkbox-input.svelte-rx48m9 {appearance:none;margin:0;width:var(--checkbox-check-size);height:var(--checkbox-check-size);cursor:pointer;position:absolute;}.form-checkbox-check.svelte-rx48m9 {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--checkbox-check-size);height:var(--checkbox-check-size);border-radius:var(--checkbox-check-radius);transition:0.2s;}.form-checkbox-check-icon.svelte-rx48m9 {display:block;width:0.625em;height:0.375em;border-bottom:2px solid white;border-left:2px solid white;transform:translateY(-25%) rotate(-45deg);opacity:0;transition:0.2s;}.form-checkbox-label.svelte-rx48m9 {font-size:var(--checkbox-font-size);color:var(--font-color);white-space:nowrap;user-select:none;}.form-checkbox-input.svelte-rx48m9:checked ~ .form-checkbox-check:where(.svelte-rx48m9) {background-color:var(--accent-color);border-color:var(--accent-color);}.form-checkbox-input.svelte-rx48m9:checked ~ .form-checkbox-check:where(.svelte-rx48m9) .form-checkbox-check-icon:where(.svelte-rx48m9) {opacity:1;}"
+};
+function FormCheckboxes($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$1);
+	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());
+	const { brandKit } = useBrandKit();
+	let values = $.mutable_state([]);
+	const handleChange = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(values));
+		}
+	};
+	onMount(() => {
+		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 "20px";
+				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 = {
+	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);
+	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());
+	const { brandKit } = useBrandKit();
+	let value = $.mutable_state("");
+	const handleChange = () => {
+		if (props().fieldName) {
+			setFormFieldTouched(props().fieldName);
+			setFormFieldValue(props().fieldName, $.get(value));
+		}
+	};
+	onMount(() => {
+		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/shared/styles.ts
 const ROUND_STYLES = {
@@ -6992,6 +8146,13 @@ __export(index_svelte5_exports, {
 	FONT_FAMILY_VARIANT: () => FONT_FAMILY_VARIANT,
 	FONT_FAMILY_VARIANTS: () => FONT_FAMILY_VARIANTS,
 	FONT_FAMILY_VARIANT_GROUPS: () => FONT_FAMILY_VARIANT_GROUPS,
+	FORM_FIELD_LABEL_SIZE: () => FORM_FIELD_LABEL_SIZE,
+	FORM_FIELD_LABEL_THEME: () => FORM_FIELD_LABEL_THEME,
+	FORM_FIELD_SIZE: () => FORM_FIELD_SIZE,
+	FORM_FIELD_TYPE: () => FORM_FIELD_TYPE,
+	FORM_FIELD_VARIANT: () => FORM_FIELD_VARIANT,
+	FORM_FIELD_VARIANT_FOR_CHECKER: () => FORM_FIELD_VARIANT_FOR_CHECKER,
+	FORM_INPUT_TYPE: () => FORM_INPUT_TYPE,
 	FlexAvatar: () => Avatar,
 	FlexButton: () => Button,
 	FlexButtonOutlined: () => ButtonOutlined,
@@ -7002,6 +8163,14 @@ __export(index_svelte5_exports, {
 	FlexCountDown: () => CountDown,
 	FlexCountDownValue: () => CountDownValue,
 	FlexDirections: () => FlexDirections,
+	FlexEmbed: () => Embed,
+	FlexForm: () => Form,
+	FlexFormCheckboxes: () => FormCheckboxes,
+	FlexFormField: () => FormField,
+	FlexFormInput: () => FormInput,
+	FlexFormRadios: () => FormRadios,
+	FlexFormSelect: () => FormSelect,
+	FlexFormTextarea: () => FormTextarea,
 	FlexIcon: () => Icon,
 	FlexImage: () => Image,
 	FlexLayout: () => Layout,
@@ -7087,6 +8256,8 @@ __export(index_svelte5_exports, {
 	finalize: () => finalize,
 	flexComponentSchemes: () => flexComponentSchemes,
 	formData: () => formData,
+	formStore: () => formStore,
+	formSubmittedValues: () => formSubmittedValues,
 	getActionRoot: () => getActionRoot,
 	getAnsweredQuestion: () => getAnsweredQuestion,
 	getAnsweredQuestionIds: () => getAnsweredQuestionIds,
@@ -7097,6 +8268,11 @@ __export(index_svelte5_exports, {
 	getCssVariables: () => getCssVariables,
 	getEventHandlers: () => getEventHandlers,
 	getEvents: () => getEvents,
+	getFormErrors: () => getFormErrors,
+	getFormFieldSchema: () => getFormFieldSchema,
+	getFormFieldState: () => getFormFieldState,
+	getFormFieldValue: () => getFormFieldValue,
+	getFormValues: () => getFormValues,
 	getLogs: () => getLogs,
 	getState: () => getState,
 	getStates: () => getStates,
@@ -7125,13 +8301,18 @@ __export(index_svelte5_exports, {
 	onMount: () => onMount$1,
 	onScroll: () => onScroll,
 	onShow: () => onShow,
+	onSubmitForm: () => onSubmitForm,
 	onTime: () => onTime,
+	registerFormField: () => registerFormField,
 	removeAnswer: () => removeAnswer,
 	resetEventHandlers: () => resetEventHandlers,
 	resetVariables: () => resetVariables,
 	sendAnswer: () => sendAnswer,
 	sendAnswers: () => sendAnswers,
 	setEventHandlers: () => setEventHandlers,
+	setFormFieldError: () => setFormFieldError,
+	setFormFieldTouched: () => setFormFieldTouched,
+	setFormFieldValue: () => setFormFieldValue,
 	setSetting: () => setSetting,
 	setState: () => setState,
 	setVariables: () => setVariables,
@@ -7142,7 +8323,9 @@ __export(index_svelte5_exports, {
 	showOnTime: () => showOnTime,
 	state: () => state,
 	tick: () => tick$1,
+	unregisterFormField: () => unregisterFormField,
 	useBrandKit: () => useBrandKit,
+	validateFormField: () => validateFormField,
 	variables: () => variables,
 	widget: () => widget_exports
 });