@plaidev/karte-action-sdk 1.1.270-29331701.75b2b3a0a → 1.1.270-29365389.cc95ce9c2

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

@@ -1,4 +1,4 @@
-import { get, writable } from "svelte/store";
+import { get, readable, writable } from "svelte/store";
 import { afterUpdate as afterUpdate$1, beforeUpdate as beforeUpdate$1, createEventDispatcher, getContext, mount, onDestroy as onDestroy$1, onMount as onMount$1, setContext, tick as tick$1, unmount } from "svelte";
 import "svelte/internal/disclose-version";
 import "svelte/internal/flags/legacy";
@@ -7,11 +7,13 @@ import { cubicOut, elasticOut, linear } from "svelte/easing";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (target, all) => {
+var __export = (all) => {
+	let target = {};
 	for (var name in all) __defProp(target, name, {
 		get: all[name],
 		enumerable: true
 	});
+	return target;
 };
 
 //#endregion
@@ -258,6 +260,29 @@ const h = (type, props, ...children) => {
 	for (const child of children) el.appendChild(child);
 	return el;
 };
+async function copyToClipboard(text) {
+	if (navigator.clipboard && window.isSecureContext) try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch (err) {
+		console.warn("navigator.clipboard failed:", err);
+	}
+	try {
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		textarea.setAttribute("readonly", "");
+		textarea.style.position = "fixed";
+		textarea.style.top = "-9999px";
+		document.body.appendChild(textarea);
+		textarea.select();
+		const success = document.execCommand("copy");
+		document.body.removeChild(textarea);
+		if (success) return true;
+	} catch (err) {
+		console.warn("execCommand fallback failed:", err);
+	}
+	return false;
+}
 
 //#endregion
 //#region src/prop.ts
@@ -387,6 +412,31 @@ const OnClickOperationOptions = [
 			default: "/"
 		}]
 	},
+	{
+		operation: "slideTo",
+		args: [
+			{
+				name: "name",
+				type: "SliderId",
+				default: ""
+			},
+			{
+				name: "target",
+				type: "SliderSlideTarget",
+				default: "next"
+			},
+			{
+				name: "slideNumber",
+				type: "NumberKeyword",
+				default: 1
+			},
+			{
+				name: "hiddenIsDisabled",
+				type: "BooleanKeyword",
+				default: false
+			}
+		]
+	},
 	{
 		operation: "callNativeFunction",
 		args: [{
@@ -732,14 +782,13 @@ function getSetting() {
 * @public
 */
 function setSetting(setting) {
-	actionSetting.update((current$1) => {
+	actionSetting.update((current) => {
 		return {
-			...current$1,
+			...current,
 			...setting
 		};
 	});
-	const current = getSetting();
-	return current;
+	return getSetting();
 }
 /**
 * {@link resetSetting} function to reset action setting
@@ -840,16 +889,39 @@ function getState() {
 */
 const states = writable([]);
 /**
+* Store to handle all state names
+*
+* @internal
+*/
+const stateNames = writable([]);
+/**
 * {@link getStates} function to add new state ID to list of state IDs.
 *
 * @param stateId - New state ID
+* @param stateName - New state Name
 *
 * @internal
 */
-function addState(stateId) {
-	if (!get(states)) states.set([]);
+function addState(stateId, stateName) {
+	if (!stateId) return;
+	if (!get(states)) {
+		states.set([]);
+		if (stateName) stateNames.set([]);
+	}
 	states.update((current) => {
-		current.push(stateId);
+		if (!current.includes(stateId)) {
+			current.push(stateId);
+			if (stateName) stateNames.update((names) => {
+				names.push(stateName);
+				return names;
+			});
+		} else {
+			const index = current.indexOf(stateId);
+			if (stateName && stateNames[index] !== stateName) stateNames.update((names) => {
+				names.push(stateName);
+				return names;
+			});
+		}
 		return current;
 	});
 }
@@ -867,6 +939,19 @@ function getStates() {
 	return get(states);
 }
 /**
+* ステート名一覧を取得する
+*
+* @remarks
+* アクションが表示されて設定されるため、{@link onShow} フック関数で利用できます。
+*
+* @returns すべてのステート名
+*
+* @public
+*/
+function getStateNames() {
+	return get(stateNames);
+}
+/**
 * Store to handle visibility of action
 *
 * @internal
@@ -1112,6 +1197,7 @@ const identifyFormData = writable({});
 * @internal
 */
 const formFields = writable({});
+const sliderStates = writable({});
 
 //#endregion
 //#region src/logger.ts
@@ -1331,13 +1417,27 @@ const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
 const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
 /** @internal */
 const send_event = (event_name, values) => {
-	const setting = getSetting();
-	setting?.send?.(event_name, values);
+	getSetting()?.send?.(event_name, values);
+};
+/** @internal */
+const toStateChangedData = (newState, oldState) => {
+	const states$1 = getStates();
+	const stateNames$1 = getStateNames();
+	const getVal$1 = (state$1) => states$1.indexOf(state$1) + 1;
+	const getName = (state$1) => {
+		if (!state$1) return "非表示時";
+		return stateNames$1[states$1.indexOf(state$1)] ?? state$1;
+	};
+	return {
+		newState: getName(newState),
+		oldState: getName(oldState),
+		newVal: states$1.length === 0 ? 1 : getVal$1(newState),
+		oldVal: states$1.length === 0 ? 0 : getVal$1(oldState)
+	};
 };
 /** @internal */
 const publish_edge = (topic, values) => {
-	const setting = getSetting();
-	setting?.publish?.(topic, values);
+	getSetting()?.publish?.(topic, values);
 };
 /** @internal */
 const initialize = (setting) => {
@@ -1351,6 +1451,19 @@ const initialize = (setting) => {
 const finalize = () => {
 	resetSetting();
 };
+/** @internal */
+function dispatchActionEvent(eventName, data) {
+	try {
+		window.dispatchEvent(new CustomEvent(eventName, data));
+		if (window.parent) window.parent.postMessage({
+			type: "action-sdk:event",
+			eventName,
+			data: data || {}
+		}, "*");
+	} catch (e) {
+		console.error(e);
+	}
+}
 /**
 * Dispatch the event to destroy KARTE action
 *
@@ -1591,8 +1704,7 @@ const loadActionTableRows = async (config, data, api_key, collection_endpoint) =
 	const defaultValue = config.query.default_value ?? null;
 	const keys = [];
 	let hasError = false;
-	const originalKeys = Array.isArray(config.query.keys) ? config.query.keys : [config.query.keys];
-	originalKeys.forEach((key) => {
+	(Array.isArray(config.query.keys) ? config.query.keys : [config.query.keys]).forEach((key) => {
 		const d = data[key];
 		if (d == null || d === "") {
 			console.warn("key is not found. key: ", key);
@@ -1716,10 +1828,9 @@ function closeAction$1(trigger = "none") {
 /** @internal */
 const handleState = (event) => {
 	if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
-		send_event("_message_state_changed", {
-			oldState: event.detail.from ?? "",
-			newState: event.detail.to ?? ""
-		});
+		const nextState = event.detail.to;
+		const currentState = getState();
+		send_event("_message_state_changed", toStateChangedData(nextState, currentState));
 		setState(event.detail.to, { disableInPreview: event.detail.disableInPreview });
 	}
 };
@@ -1830,8 +1941,7 @@ async function loadStyle(href) {
 	if (!sr) return;
 	let cssRules = "";
 	try {
-		const res = await fetch(href);
-		cssRules = await res.text();
+		cssRules = await (await fetch(href)).text();
 	} catch (_) {}
 	if (!cssRules) return;
 	const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
@@ -1863,9 +1973,10 @@ function getCssVariables(data) {
 * @public
 */
 function getActionRoot() {
-	const root$49 = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-	if (!root$49?.shadowRoot) return null;
-	return root$49.shadowRoot;
+	const root$56 = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+	if (!root$56) return null;
+	if (!root$56.shadowRoot) return root$56;
+	return root$56.shadowRoot;
 }
 /** @internal */
 function createModal(App, options = {
@@ -1907,8 +2018,7 @@ function createModal(App, options = {
 		sendErrorIfMessageOpenEventNotSent();
 		options.send("_message_state_changed", {
 			trigger,
-			oldState: getState(),
-			newState: ""
+			...toStateChangedData("", getState())
 		});
 		setOpened(false);
 		setClosed(true);
@@ -1940,8 +2050,7 @@ function createModal(App, options = {
 		if (!isOnSite() && trigger === "custom") return;
 		if (trigger === "custom" && (options.props.show_on_scroll || options.props.show_on_time)) return;
 		if (actionTablePromise) {
-			const result = await actionTablePromise;
-			if (!result.success) return;
+			if (!(await actionTablePromise).success) return;
 		}
 		if (!hasAlreadySentMessageOpenEvent) {
 			options.send("message_open", { state: getState() });
@@ -1950,15 +2059,13 @@ function createModal(App, options = {
 		sendErrorIfMessageOpenEventNotSent();
 		options.send("_message_state_changed", {
 			trigger,
-			oldState: "",
-			newState: getState()
+			...toStateChangedData(getState(), "")
 		});
 		setOpened(true);
 		setClosed(false);
 		if (app) return;
-		const target = ensureActionRoot(isOnSite());
 		const props = {
-			target,
+			target: ensureActionRoot(isOnSite()),
 			props: {
 				send: options.send,
 				publish: options.publish,
@@ -1966,8 +2073,7 @@ function createModal(App, options = {
 				onShow: (props$1) => {
 					const { onShowHandlers } = getInternalHandlers();
 					if (onShowHandlers) onShowHandlers.forEach((h$1) => {
-						const actionHookLog = { name: "onShow" };
-						console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+						console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify({ name: "onShow" })}`);
 						h$1(props$1);
 					});
 				},
@@ -2065,8 +2171,7 @@ function ensureActionRoot(useShadow = true) {
 		el = h("div", rootAttrs);
 		document.body.appendChild(el);
 	}
-	const isShadow = !!document.body.attachShadow && useShadow;
-	if (isShadow) return el.shadowRoot ?? el.attachShadow({ mode: "open" });
+	if (!!document.body.attachShadow && useShadow) return el.shadowRoot ?? el.attachShadow({ mode: "open" });
 	else return el;
 }
 /**
@@ -2127,8 +2232,7 @@ function createApp(App, options = {
 			}
 		}
 	};
-	const win = ensureActionRoot(isOnSite());
-	appArgs.target = win;
+	appArgs.target = ensureActionRoot(isOnSite());
 	return {
 		close: close$1,
 		show: () => {
@@ -2147,8 +2251,8 @@ function createApp(App, options = {
 */
 function createFog({ color = "#000", opacity = "50%", zIndex = 999, onclick }) {
 	console.log("createFog");
-	const root$49 = ensureModalRoot();
-	if (root$49.querySelector(".__krt-fog")) return {
+	const root$56 = ensureModalRoot();
+	if (root$56.querySelector(".__krt-fog")) return {
 		fog: null,
 		close: () => {}
 	};
@@ -2169,7 +2273,7 @@ function createFog({ color = "#000", opacity = "50%", zIndex = 999, onclick }) {
 		fog.remove();
 	};
 	fog.onclick = close$1;
-	root$49.appendChild(fog);
+	root$56.appendChild(fog);
 	return {
 		fog,
 		close: close$1
@@ -2321,8 +2425,7 @@ function create(App, options) {
 	const handleDestroy = () => {
 		const { onDestroyHandlers } = getInternalHandlers();
 		onDestroyHandlers?.forEach((h$1) => {
-			const actionHookLog = { name: "onDestroy" };
-			console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+			console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify({ name: "onDestroy" })}`);
 			h$1(actionProps);
 		});
 		const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
@@ -2473,8 +2576,7 @@ function formDataToEventValues$1(campaignId, formData$1) {
 		questions.push(name);
 		const value = dataItem.value;
 		const answerKey = `question_${name}`;
-		const answerValue = createAnswerValue$1(value);
-		answersMap[answerKey] = answerValue;
+		answersMap[answerKey] = createAnswerValue$1(value);
 	});
 	return { [campaignId]: {
 		questions,
@@ -2489,8 +2591,7 @@ function formDataToIdentifyEventValues$1(formData$1) {
 }
 /** @internal */
 function submit() {
-	const systemConfig = getSystem();
-	const campaignId = systemConfig.campaignId;
+	const campaignId = getSystem().campaignId;
 	if (campaignId) {
 		const formData$1 = get(formData);
 		const identifyFormData$1 = get(identifyFormData);
@@ -2564,8 +2665,7 @@ function removeAnswer(questionId) {
 * @public
 */
 function getAnsweredQuestion(questionId) {
-	const formData$1 = get(formData);
-	const valueState = formData$1[questionId];
+	const valueState = get(formData)[questionId];
 	if (valueState) return createAnswerValue$1(valueState.value);
 }
 /**
@@ -2607,8 +2707,7 @@ function sendAnswers() {
 
 //#endregion
 //#region src/widget.ts
-var widget_exports = {};
-__export(widget_exports, {
+var widget_exports = /* @__PURE__ */ __export({
 	collection: () => collection$1,
 	getState: () => getState$1,
 	getVal: () => getVal,
@@ -2668,8 +2767,7 @@ function setVal(name, value) {
 * @public
 */
 function getVal(name) {
-	const cv = getVariables();
-	return cv[name];
+	return getVariables()[name];
 }
 /**
 * 変数が変更されたときに実行されるコールバック関数を設定する
@@ -2734,8 +2832,7 @@ function on(name, callback$5) {
 * @public
 */
 function setState$1(stateId) {
-	const stateIds = getStates();
-	if (stateIds.includes(stateId)) return;
+	if (getStates().includes(stateId)) return;
 	setState(stateId);
 }
 /**
@@ -2807,8 +2904,7 @@ function getLocalStore(key) {
 		return;
 	}
 	if (item.val === void 0) return;
-	const now = (/* @__PURE__ */ new Date()).getTime();
-	if (now - item.last > item.expire) {
+	if ((/* @__PURE__ */ new Date()).getTime() - item.last > item.expire) {
 		localStorage.removeItem(lsKey);
 		return;
 	}
@@ -2925,15 +3021,13 @@ const formSubmittedIdentifyValues = writable({});
 * @public
 */
 const getFormFieldSchema = (name) => {
-	const store = get(formStore);
-	return store.schemas.find((v) => v.name === name) ?? void 0;
+	return get(formStore).schemas.find((v) => v.name === name) ?? void 0;
 };
 /**
 * @public
 */
 const getFormFieldState = (name) => {
-	const store = get(formStore);
-	return store.states[name] ?? void 0;
+	return get(formStore).states[name] ?? void 0;
 };
 /**
 * @public
@@ -3177,8 +3271,7 @@ function formDataToIdentifyEventValues(values) {
 * @public
 */
 function onSubmitForm(fn) {
-	const systemConfig = getSystem();
-	const campaignId = systemConfig.campaignId;
+	const campaignId = getSystem().campaignId;
 	if (campaignId) {
 		let hasInvalid = false;
 		const formData$1 = get(formStore);
@@ -3231,7 +3324,7 @@ function onSubmitForm(fn) {
 
 //#endregion
 //#region src/components-flex/state/Header.svelte
-var root_2$9 = $.template(`<link type="text/css" rel="stylesheet">`);
+var root_2$11 = $.template(`<link type="text/css" rel="stylesheet">`);
 function Header($$anchor, $$props) {
 	$.push($$props, false);
 	const [$$stores, $$cleanup] = $.setup_stores();
@@ -3250,7 +3343,7 @@ function Header($$anchor, $$props) {
 		var fragment = $.comment();
 		var node = $.first_child(fragment);
 		var consequent = ($$anchor$2) => {
-			var link = root_2$9();
+			var link = root_2$11();
 			$.template_effect(() => $.set_attribute(link, "href", $.get(googleFontUrl)));
 			$.append($$anchor$2, link);
 		};
@@ -3307,19 +3400,94 @@ const useBrandKit = () => {
 	return { brandKit: getContext("brandKit") || getBrandKit() };
 };
 
+//#endregion
+//#region src/components-flex/css.ts
+function createComponentRawCss(layerId, define) {
+	const rootSelector = `[data-layer-id="${layerId}"]`;
+	const gen = (selector, styles) => {
+		const childSelector = selector.startsWith("&") ? selector.slice(1) : ` ${selector}`;
+		const body = Object.entries(styles).map(([k, v]) => {
+			if (!v) return "";
+			return `${k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())}: ${v};`;
+		}).filter((v) => v !== "").join("\n");
+		return `${rootSelector}${childSelector} {\n${body}\n}`;
+	};
+	return define(gen).join("\n");
+}
+function toResponsiveSelector(responsiveSetting, body) {
+	const { mediaQueryCondition, userAgentCondition } = responsiveSetting;
+	if (mediaQueryCondition) {
+		const { raw, range, orientation } = mediaQueryCondition;
+		const prefix = `@media screen and`;
+		if (raw) return `${prefix} (${raw}) {\n${body}\n}`;
+		const orientationStyle = orientation ? ` and (orientation: ${orientation})` : "";
+		if (range) {
+			if (range.min && range.max) return `${prefix} (min-width: ${range.min}px)${orientationStyle} and (max-width: ${range.max}) {\n${body}\n}`;
+			else if (range.max) return `${prefix} (max-width: ${range.max}px)${orientationStyle} {\n${body}\n}`;
+			else if (range.min) return `${prefix} (min-width: ${range.min}px)${orientationStyle} {\n${body}\n}`;
+		}
+		return "";
+	} else if (userAgentCondition) return "";
+	return "";
+}
+function toStyleTag(css) {
+	return `<style>${css}</style>`;
+}
+
+//#endregion
+//#region src/components-flex/shared/StylePortal.svelte
+function StylePortal($$anchor, $$props) {
+	$.push($$props, false);
+	let cssText = $.prop($$props, "cssText", 8, "");
+	const actionRoot = getActionRoot();
+	const isShadowRoot = !!actionRoot && actionRoot instanceof ShadowRoot;
+	onMount$1(() => {
+		if (isShadowRoot) {
+			const style = document.createElement("style");
+			style.textContent = cssText();
+			actionRoot.appendChild(style);
+			return () => style.remove();
+		}
+	});
+	$.init();
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor$1) => {
+		var fragment_1 = $.comment();
+		var node_1 = $.first_child(fragment_1);
+		$.html(node_1, () => toStyleTag(cssText()), false, false);
+		$.append($$anchor$1, fragment_1);
+	};
+	$.if(node, ($$render) => {
+		if (!isShadowRoot) $$render(consequent);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+
 //#endregion
 //#region src/components-flex/state/State.svelte
-var root$48 = $.template(`<!> <!>`, 1);
+var root$55 = $.template(`<!> <!> <!>`, 1);
 function State($$anchor, $$props) {
 	$.push($$props, false);
 	let customBrandKit = $.prop($$props, "customBrandKit", 8, void 0);
+	let globalCssCode = $.prop($$props, "globalCssCode", 8, void 0);
 	setContext("brandKit", getBrandKit(customBrandKit()));
 	$.init();
-	var fragment = root$48();
+	var fragment = root$55();
 	var node = $.first_child(fragment);
-	Header(node, {});
+	var consequent = ($$anchor$1) => {
+		StylePortal($$anchor$1, { get cssText() {
+			return globalCssCode();
+		} });
+	};
+	$.if(node, ($$render) => {
+		if (globalCssCode()) $$render(consequent);
+	});
 	var node_1 = $.sibling(node, 2);
-	$.slot(node_1, $$props, "default", {}, null);
+	Header(node_1, {});
+	var node_2 = $.sibling(node_1, 2);
+	$.slot(node_2, $$props, "default", {}, null);
 	$.append($$anchor, fragment);
 	$.pop();
 }
@@ -3328,19 +3496,20 @@ function State($$anchor, $$props) {
 //#region src/components-flex/state/StateItem.svelte
 const STATE_ITEM_CONTEXT_KEY = Symbol();
 var root_1$15 = $.template(`<div class="state-item svelte-2qb6dm"></div> <!>`, 1);
-const $$css$33 = {
+const $$css$26 = {
 	hash: "svelte-2qb6dm",
 	code: ".state-item.svelte-2qb6dm {position:absolute;display:none;}"
 };
 function StateItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$33);
+	$.append_styles($$anchor, $$css$26);
 	const [$$stores, $$cleanup] = $.setup_stores();
 	const $state = () => $.store_get(state, "$state", $$stores);
 	let path = $.prop($$props, "path", 8);
+	let name = $.prop($$props, "name", 8, "");
 	setContext(STATE_ITEM_CONTEXT_KEY, { path: path() });
-	$.legacy_pre_effect(() => $.deep_read_state(path()), () => {
-		addState(path());
+	$.legacy_pre_effect(() => ($.deep_read_state(path()), $.deep_read_state(name())), () => {
+		addState(path(), name());
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
@@ -3374,353 +3543,144 @@ const ROUND_VARIANT = {
 };
 
 //#endregion
-//#region src/components-flex/avatar/types.ts
-const AVATAR_SIZE = {
-	extra_small: "XS（48 x 48）",
-	small: "S（64 x 64）",
-	medium: "M（88 x 88）",
-	large: "L（108 x 108）",
-	extra_large: "XL（128 x 128）"
-};
-const AVATAR_SHAPE = {
-	circle: "サークル",
-	square: "スクエア",
-	rounded: "ラウンド"
-};
-const avatarPropsDefault = {
-	size: "medium",
-	shape: "circle"
-};
+//#region src/components-flex/responsive.ts
+const USER_AGENT_VARIANT = {
+	smartphone: { regex: /iPhone|Android.*Mobile/i },
+	tablet: { regex: /iPad|Android(?!.*Mobile)/i },
+	pc: { regex: /Windows NT|Macintosh|Linux x86_64/i },
+	windows: { regex: /Windows NT/i },
+	mac: { regex: /Macintosh|Mac OS X/i },
+	ios: { regex: /iPhone|iPad|iPod/i },
+	android: { regex: /Android/i },
+	safari: { regex: /Safari/i },
+	chrome: { regex: /Chrome|CriOS/i },
+	firefox: { regex: /Firefox/i },
+	ios_webview: { regex: /iPhone|iPad|iPod/i },
+	android_webview: { regex: /; wv\)/i }
+};
+const isMatchMediaQueryCondition = (condition) => {
+	const { raw, range, orientation } = condition;
+	if (orientation) return window.matchMedia(`(orientation: ${condition.orientation})`).matches;
+	if (range) {
+		const { min, max } = range;
+		if (typeof min === "number" && typeof max === "number") return window.matchMedia(`(min-width: ${min}px) and (max-width: ${max}px)`).matches;
+		else if (typeof min === "number") return window.matchMedia(`(min-width: ${min}px)`).matches;
+		else if (typeof max === "number") return window.matchMedia(`(max-width: ${max}px)`).matches;
+	}
+	if (raw) return window.matchMedia(raw).matches;
+	return false;
+};
+const isMatchUserAgentCondition = (condition) => {
+	const { variants, regex } = condition;
+	if (variants) return variants.some((variant) => {
+		const regex$1 = USER_AGENT_VARIANT[variant]?.regex;
+		if (!regex$1) return false;
+		return new RegExp(regex$1).test(navigator.userAgent);
+	});
+	else if (regex) return new RegExp(regex).test(navigator.userAgent);
+	return false;
+};
+const isMatchResponsiveSetting = (setting) => {
+	const { mediaQueryCondition, userAgentCondition } = setting;
+	if (mediaQueryCondition) return isMatchMediaQueryCondition(mediaQueryCondition);
+	else if (userAgentCondition) return isMatchUserAgentCondition(userAgentCondition);
+	else return false;
+};
+function useResponsiveProps(props) {
+	return readable(props, (set) => {
+		if (!props.responsiveSettings) {
+			set(props);
+			return () => {};
+		}
+		const update = () => {
+			const matchedSetting = [...props.responsiveSettings ?? []].reverse().find(isMatchResponsiveSetting);
+			if (matchedSetting) set(Object.assign({}, props, matchedSetting.props ?? {}));
+			else set(props);
+		};
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("orientationchange", update);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("orientationchange", update);
+		};
+	});
+}
 
 //#endregion
-//#region src/components-flex/utils/obj-to-style.ts
-const toHyphenCase = (str) => {
-	let result = str.replace(/_/g, "-");
-	result = result.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-	return result;
+//#region src/functions.ts
+function _moveTo(to) {
+	const currentState = getState();
+	dispatchActionEvent(ACTION_CHANGE_STATE_EVENT, { detail: {
+		from: currentState,
+		to,
+		actionId
+	} });
+}
+/** @internal */
+const moveTo = (to) => () => {
+	_moveTo(to);
 };
-const objToStyle = (obj) => {
-	const styles = Object.entries(obj).map(([key, value]) => {
-		if (value === void 0) return "";
-		return `${toHyphenCase(key)}: ${value};`;
-	}).filter((v) => v !== "");
-	return styles.join(" ");
+/** @internal */
+const linkTo = (to, targetBlank = true, decode = false, keepNativeActionViewed = false) => () => {
+	const decodedTo = decode ? decodeURI(to) : to;
+	const { target } = getActionRunnerContext() ?? {};
+	async function sleep(ms) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+	async function _send() {
+		send_event("message_click", {
+			url: decodedTo,
+			state: getState()
+		});
+		await sleep(450);
+	}
+	let doTransitionByLocation = true;
+	const execAnchorClick = (href, blank) => {
+		const anchor = document.createElement("a");
+		anchor.style.position = "fixed";
+		anchor.style.visibility = "hidden";
+		anchor.href = href;
+		if (blank) anchor.target = "_blank";
+		document.body.appendChild(anchor);
+		anchor.click();
+		anchor.remove();
+	};
+	if (target === "native" && targetBlank && keepNativeActionViewed) {
+		const win = window;
+		const nativeMessageName = "open_url";
+		const nativeMessageData = {
+			url: decodedTo,
+			target: "_blank"
+		};
+		win.NativeBridge?.onReceivedMessage(nativeMessageName, JSON.stringify(nativeMessageData));
+		win.webkit?.messageHandlers[nativeMessageName]?.postMessage(nativeMessageData);
+		doTransitionByLocation = false;
+	}
+	Promise.race([_send(), sleep(650)]).then(() => {
+		if (doTransitionByLocation) execAnchorClick(decodedTo, targetBlank);
+	});
 };
-
-//#endregion
-//#region src/components-flex/variants.ts
-const toVariantArray = (group) => {
-	return Object.keys(group).map((key) => ({
-		...group[key],
-		code: key
-	}));
+/** @internal */
+const closeApp = (trigger) => () => {
+	dispatchActionEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
 };
-const ASPECT_VARIANT = {
-	square: {
-		name: "1：1",
-		description: "正方形の画角",
-		getProps: () => ({ aspect: "1 / 1" })
-	},
-	photo_hr: {
-		name: "3：2",
-		description: "一眼レフ、フィルムカメラ",
-		getProps: () => ({ aspect: "3 / 2" })
-	},
-	movie_old_hr: {
-		name: "4：3",
-		description: "iPhoneカメラ、デジカメ",
-		getProps: () => ({ aspect: "4 / 3" })
-	},
-	og_image: {
-		name: "1.91：1",
-		description: "SNSのOG画像、横長バナー",
-		getProps: () => ({ aspect: "1.91 / 1" })
-	},
-	movie_hr: {
-		name: "16：9",
-		getProps: () => ({ aspect: "16 / 9" }),
-		description: "Youtube、TV、横長バナー"
-	},
-	movie_old_vt: {
-		name: "3：4",
-		description: "iPhoneカメラ、デジカメ (タテ)",
-		getProps: () => ({ aspect: "3 / 4" })
-	},
-	movie_vt: {
-		name: "9：16",
-		description: "TikTok、Shortsなど縦型動画",
-		getProps: () => ({ aspect: "9 / 16" })
+/** @internal */
+const runScript = (handlerName) => () => {
+	const handler = getEventHandlers()[handlerName];
+	if (!handler) return;
+	try {
+		handler();
+	} catch (e) {
+		console.warn("Failed to run custom handler", handlerName, e);
 	}
 };
-const ASPECT_VARIANTS = toVariantArray(ASPECT_VARIANT);
-const createFontVariant = (font, lang, type) => {
-	return {
-		name: font,
-		meta: {
-			lang,
-			type
-		},
-		getProps: () => ({ fontFamily: font })
-	};
-};
-const FONT_FAMILY_VARIANT = {
-	default: {
-		name: `デフォルト`,
-		meta: {
-			type: "kaku",
-			lang: "ja"
-		},
-		getProps: (brandKit) => ({ fontFamily: brandKit?.font_family ?? SYSTEM_FONT })
-	},
-	noto_sans_jp: createFontVariant("Noto Sans JP", "ja", "kaku"),
-	sawarabi_gothic: createFontVariant("Sawarabi Gothic", "ja", "kaku"),
-	zen_kaku_gothic: createFontVariant("Zen Kaku Gothic", "ja", "kaku"),
-	biz_udp_gothic: createFontVariant("BIZ UDPGothic", "ja", "kaku"),
-	open_sans: createFontVariant("Open Sans", "ja", "kaku"),
-	sans_serif: createFontVariant("sans-serif", "ja", "kaku"),
-	m_plus_1p: createFontVariant("M PLUS 1p", "ja", "maru"),
-	m_plus_rounded_1c: createFontVariant("M PLUS Rounded 1c", "ja", "maru"),
-	kiwi_maru: createFontVariant("Kiwi Maru", "ja", "maru"),
-	zen_maru_gothic: createFontVariant("Zen Maru Gothic", "ja", "maru"),
-	noto_serif_jp: createFontVariant("Noto Serif JP", "ja", "min"),
-	shippori_micho: createFontVariant("Shippori Mincho", "ja", "min"),
-	biz_udp_micho: createFontVariant("BIZ UDPMincho", "ja", "min"),
-	serif: createFontVariant("serif", "ja", "min"),
-	anton: createFontVariant("Anton", "en", "kaku"),
-	barlow: createFontVariant("Barlow", "en", "kaku"),
-	fraunces: createFontVariant("Fraunces", "en", "kaku"),
-	inter: createFontVariant("Inter", "en", "kaku"),
-	lato: createFontVariant("Lato", "en", "kaku"),
-	lora: createFontVariant("Lora", "en", "kaku"),
-	monospace: createFontVariant("monospace", "en", "kaku"),
-	montserrat: createFontVariant("Montserrat", "en", "kaku"),
-	outfit: createFontVariant("Outfit", "en", "kaku"),
-	playfair_display: createFontVariant("Playfair Display", "en", "kaku"),
-	poppins: createFontVariant("Poppins", "en", "kaku"),
-	raleway: createFontVariant("Raleway", "en", "kaku"),
-	roboto: createFontVariant("Roboto", "en", "kaku"),
-	system_ui: createFontVariant("system-ui", "en", "kaku")
-};
-const FONT_FAMILY_VARIANTS = toVariantArray(FONT_FAMILY_VARIANT);
-const FONT_FAMILY_VARIANT_GROUPS = [
-	{
-		label: "日本語 / 角ゴシック",
-		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "ja" && v.meta?.type === "kaku")
-	},
-	{
-		label: "日本語 / 丸ゴシック",
-		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "ja" && v.meta?.type === "maru")
-	},
-	{
-		label: "日本語 / 明朝",
-		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "ja" && v.meta?.type === "min")
-	},
-	{
-		label: "英語",
-		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "en")
-	}
-];
-const SHADOW_VARIANT = {
-	extra_small: {
-		name: "エクストラスモール",
-		getProps: () => ({ shadow: "0 1px 2px 0 rgba(0,0,0,0.1)" })
-	},
-	small: {
-		name: "スモール",
-		getProps: () => ({ shadow: "0 2px 4px 1px rgba(0,0,0,0.1)" })
-	},
-	medium: {
-		name: "ミディアム",
-		getProps: () => ({ shadow: "0px 4px 8px 2px rgba(0,0,0,0.1)" })
-	},
-	large: {
-		name: "ラージ",
-		getProps: () => ({ shadow: "0px 8px 16px 4px rgba(0,0,0,0.1)" })
-	}
-};
-const SHADOW_VARIANTS = toVariantArray(SHADOW_VARIANT);
-const BACKGROUND_COLOR_VARIANT = {
-	base: {
-		name: "ホワイト",
-		getProps: () => ({ backgroundColor: "#FFFFFF" })
-	},
-	dark: {
-		name: "ブラック",
-		getProps: () => ({ backgroundColor: "#000000" })
-	},
-	gray: {
-		name: "グレー",
-		getProps: () => ({ backgroundColor: "#ECECEC" })
-	},
-	brand: {
-		name: "ブランド",
-		getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_brand })
-	},
-	danger: {
-		name: "デンジャー",
-		getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_danger })
-	}
-};
-const BACKGROUND_COLOR_VARIANTS = toVariantArray(BACKGROUND_COLOR_VARIANT);
-const BORDER_COLOR_VARIANT = {
-	black: {
-		name: "ブラック",
-		getProps: () => ({ borderColor: "#000000" })
-	},
-	gray: {
-		name: "グレー",
-		getProps: () => ({ borderColor: "#DBDBDB" })
-	},
-	brand: {
-		name: "ブランド",
-		getProps: (kit) => ({ borderColor: getBrandKit(kit).color_brand })
-	},
-	danger: {
-		name: "デンジャー",
-		getProps: (kit) => ({ borderColor: getBrandKit(kit).color_danger })
-	},
-	base: {
-		name: "ホワイト",
-		getProps: () => ({ borderColor: "#FFFFFF" })
-	}
-};
-const BORDER_COLOR_VARIANTS = toVariantArray(BORDER_COLOR_VARIANT);
-
-//#endregion
-//#region src/components-flex/utils/prop-to-style.ts
-const toCssPosition = (p) => {
-	return {
-		position: p?.position ?? "static",
-		top: p?.top,
-		left: p?.left,
-		bottom: p?.bottom,
-		right: p?.right,
-		transform: p?.transform
-	};
-};
-const toCssCommon = (p) => {
-	return { ...toCssPosition(p) };
-};
-const toCssBorder = (p, brandKit) => {
-	const borderWidth = p?.borderTopWidth ?? p?.borderRightWidth ?? p?.borderLeftWidth ?? p?.borderBottomWidth ?? null;
-	if (borderWidth === null) return {};
-	const variant = BORDER_COLOR_VARIANT[p?.borderColorVariant];
-	return {
-		borderColor: p?.borderColor ?? variant?.getProps(brandKit)?.borderColor,
-		borderStyle: "solid",
-		borderTopWidth: p?.borderTopWidth,
-		borderLeftWidth: p?.borderLeftWidth,
-		borderRightWidth: p?.borderRightWidth,
-		borderBottomWidth: p?.borderBottomWidth
-	};
-};
-const toCssPadding = (p) => {
-	return {
-		paddingTop: p?.paddingTop,
-		paddingLeft: p?.paddingLeft,
-		paddingRight: p?.paddingRight,
-		paddingBottom: p?.paddingBottom
-	};
-};
-const toCssBackground = (p, brandKit) => {
-	const url = p?.backgroundImageUrl;
-	const variant = BACKGROUND_COLOR_VARIANT[p?.backgroundColorVariant];
-	return {
-		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
-		...url ? {
-			backgroundSize: url ? p.backgroundSize ?? "cover" : void 0,
-			backgroundImage: url ? `url(${url})` : void 0,
-			backgroundPositionX: p?.backgroundPositionX ?? "center",
-			backgroundPositionY: p?.backgroundPositionY ?? "center",
-			backgroundBlendMode: p?.backgroundBlendMode,
-			backgroundRepeat: "no-repeat"
-		} : {}
-	};
-};
-const toCssRadius = (p) => {
-	return {
-		borderTopLeftRadius: p?.borderTopLeftRadius,
-		borderTopRightRadius: p?.borderTopRightRadius,
-		borderBottomLeftRadius: p?.borderBottomLeftRadius,
-		borderBottomRightRadius: p?.borderBottomRightRadius
-	};
-};
-const toCssShadow = (p) => {
-	const variant = SHADOW_VARIANT[p?.shadowVariant];
-	return { boxShadow: p?.shadow ?? variant?.getProps()?.shadow };
-};
-const toCssOverflow = (p) => {
-	return { overflow: p?.overflow };
-};
-
-//#endregion
-//#region src/functions.ts
-function _moveTo(to) {
-	const currentState = getState();
-	window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: {
-		from: currentState,
-		to,
-		actionId
-	} }));
-}
-/** @internal */
-const moveTo = (to) => () => {
-	_moveTo(to);
-};
-/** @internal */
-const linkTo = (to, targetBlank = true, decode = false, keepNativeActionViewed = false) => () => {
-	const decodedTo = decode ? decodeURI(to) : to;
-	const { target } = getActionRunnerContext() ?? {};
-	async function sleep(ms) {
-		return new Promise((resolve) => setTimeout(resolve, ms));
-	}
-	async function _send() {
-		send_event("message_click", {
-			url: decodedTo,
-			state: getState()
-		});
-		await sleep(450);
-	}
-	let doTransitionByLocation = true;
-	if (target === "native" && targetBlank && keepNativeActionViewed) {
-		const win = window;
-		const nativeMessageName = "open_url";
-		const nativeMessageData = {
-			url: decodedTo,
-			target: "_blank"
-		};
-		win.NativeBridge?.onReceivedMessage(nativeMessageName, JSON.stringify(nativeMessageData));
-		win.webkit?.messageHandlers[nativeMessageName]?.postMessage(nativeMessageData);
-		doTransitionByLocation = false;
-	} else if (target === "web" && targetBlank) {
-		window.open(decodedTo, "_blank");
-		doTransitionByLocation = false;
-	}
-	Promise.race([_send(), sleep(650)]).then(() => {
-		if (doTransitionByLocation) location.href = decodedTo;
-	});
-};
-/** @internal */
-const closeApp = (trigger) => () => {
-	window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
-};
-/** @internal */
-const runScript = (handlerName) => () => {
-	const handlers = getEventHandlers();
-	const handler = handlers[handlerName];
-	if (!handler) return;
-	try {
-		handler();
-	} catch (e) {
-		console.warn("Failed to run custom handler", handlerName, e);
-	}
-};
-/** @internal */
-const submitForm = (to) => () => {
-	const { values, identifyValues } = submit();
-	send_event("_answer_question", values);
-	if (Object.keys(identifyValues ?? {}).length > 0) send_event("identify", identifyValues);
-	_moveTo(to);
+/** @internal */
+const submitForm = (to) => () => {
+	const { values, identifyValues } = submit();
+	send_event("_answer_question", values);
+	if (Object.keys(identifyValues ?? {}).length > 0) send_event("identify", identifyValues);
+	_moveTo(to);
 };
 /** @internal */
 const submitFormProgress = (to) => () => {
@@ -3746,6 +3706,42 @@ const submitFormFinal = (to) => () => {
 	});
 };
 /** @internal */
+const slideTo = (name, target, slideNumber, _hiddenIsDisabled) => () => {
+	sliderStates.update((updater) => {
+		if (!updater[name]) return;
+		const state$1 = updater[name];
+		const toIndex = (() => {
+			if (target === "number") return typeof slideNumber === "number" ? slideNumber - 1 : 0;
+			else if (target === "prev") return state$1.currentIndex - 1;
+			else if (target === "next") return state$1.currentIndex + 1;
+			else if (target === "first") return 0;
+			else if (target === "end") return state$1.slides - 1;
+		})();
+		const is_next = (() => {
+			if (state$1.loop && state$1.currentIndex === state$1.slides - 1 && toIndex === 0) return true;
+			return toIndex > state$1.currentIndex;
+		})();
+		const is_prev = (() => {
+			if (state$1.loop && state$1.currentIndex === 0 && toIndex === state$1.slides - 1) return true;
+			return toIndex < state$1.currentIndex;
+		})();
+		const slide_no = toIndex + 1;
+		const is_finished = toIndex === state$1.slides - 1;
+		if (state$1.loop || toIndex <= state$1.slides - 1 && toIndex >= 0 && toIndex !== state$1.currentIndex) {
+			updater[name].currentIndex = toIndex < 0 ? state$1.slides - 1 : toIndex > state$1.slides - 1 ? 0 : toIndex;
+			send_event("_slide_to", {
+				name,
+				is_next,
+				is_prev,
+				slide_no,
+				is_finished,
+				slide_count: state$1.slides
+			});
+		}
+		return updater;
+	});
+};
+/** @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,
@@ -3776,6 +3772,7 @@ const execOnClickOperation = (onClickOperation) => {
 	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)();
+	else if (onClickOperation.operation === "slideTo") slideTo(...onClickOperation.args)();
 };
 function getAnimation(animation) {
 	switch (animation.type) {
@@ -3834,7 +3831,7 @@ const EASING = {
 *
 * @internal
 */
-function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1e3 }) {
+function customAnimation(_node, { transforms, animationStyle, delay = 0, duration = 1e3 }) {
 	if (!isOnSite()) return {};
 	let [x, y] = [0, 0];
 	for (const { query, x: tx, y: ty } of transforms) if (query == null || window.matchMedia(query).matches) {
@@ -3842,93 +3839,338 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 		y = ty;
 		break;
 	}
-	return {
-		delay,
-		duration,
-		easing: EASING[animationStyle],
-		css: (progress) => getAnimation({
-			type: animationStyle,
-			x,
-			y,
-			progress
-		})
-	};
-}
+	return {
+		delay,
+		duration,
+		easing: EASING[animationStyle],
+		css: (progress) => getAnimation({
+			type: animationStyle,
+			x,
+			y,
+			progress
+		})
+	};
+}
+
+//#endregion
+//#region src/hooks/useClickable.ts
+function useClickable(props = {}) {
+	const getHref = (onClick) => {
+		if (!onClick) return void 0;
+		if (onClick.operation === "callNativeFunction") return String(onClick.args[0]);
+		if (onClick.operation === "linkTo") {
+			const href = String(onClick.args[0]) || "";
+			return onClick.args[2] ?? false ? decodeURI(href) : href;
+		}
+	};
+	const getTarget = (onClick) => {
+		if (!onClick) return void 0;
+		if (onClick.operation !== "linkTo") return void 0;
+		return onClick.args[1] ? "_blank" : void 0;
+	};
+	function handleClick(e, { onClick, eventValue, eventName }, disabled) {
+		if (!onClick || onClick.operation === "none") return;
+		e.stopPropagation();
+		e.preventDefault();
+		if (disabled) return;
+		if (eventName) send_event(eventName, eventValue);
+		execOnClickOperation(onClick);
+	}
+	function getFixedElement({ onClick, element }) {
+		if (!onClick) return element ?? "div";
+		switch (onClick.operation) {
+			case "linkTo":
+			case "callNativeFunction": return "a";
+			case "none": return element;
+			default: return "button";
+		}
+	}
+	const defaultValue = {
+		element: getFixedElement(props),
+		attributes: {
+			href: getHref(props.onClick),
+			target: getTarget(props.onClick),
+			"data-clickable": props.onClick !== void 0 && props.onClick.operation !== "none",
+			disabled: false,
+			"aria-disabled": false,
+			"aria-hidden": false
+		},
+		handleClick: (e) => handleClick(e, props)
+	};
+	return readable(defaultValue, (set) => {
+		let unsubscribe = null;
+		if (props.onClick?.operation === "slideTo") {
+			const [sliderId, sliderTarget, slideNumber, hiddenIsDisabled] = props.onClick.args;
+			unsubscribe = sliderStates.subscribe(($states) => {
+				const state$1 = $states[sliderId];
+				if (!state$1 || state$1.loop) return;
+				let nextDisabled = false;
+				if (sliderTarget === "next") nextDisabled = state$1.currentIndex >= state$1.slides - 1;
+				else if (sliderTarget === "prev") nextDisabled = state$1.currentIndex <= 0;
+				else if (sliderTarget === "first") nextDisabled = state$1.currentIndex === 0;
+				else if (sliderTarget === "end") nextDisabled = state$1.currentIndex >= state$1.slides - 1;
+				else if (sliderTarget === "number" && typeof slideNumber !== "undefined") nextDisabled = state$1.currentIndex === slideNumber - 1;
+				set(Object.assign({}, defaultValue, {
+					attributes: {
+						...defaultValue.attributes,
+						disabled: nextDisabled,
+						"aria-disabled": nextDisabled,
+						"aria-hidden": hiddenIsDisabled && nextDisabled
+					},
+					handleClick: (e) => handleClick(e, props, nextDisabled)
+				}));
+			});
+		}
+		return () => {
+			if (unsubscribe) unsubscribe();
+		};
+	});
+}
+var useClickable_default = useClickable;
+
+//#endregion
+//#region src/components-flex/variants.ts
+const toVariantArray = (group) => {
+	return Object.keys(group).map((key) => ({
+		...group[key],
+		code: key
+	}));
+};
+const ASPECT_VARIANT = {
+	square: {
+		name: "1：1",
+		description: "正方形の画角",
+		getProps: () => ({ aspect: "1 / 1" })
+	},
+	photo_hr: {
+		name: "3：2",
+		description: "一眼レフ、フィルムカメラ",
+		getProps: () => ({ aspect: "3 / 2" })
+	},
+	movie_old_hr: {
+		name: "4：3",
+		description: "iPhoneカメラ、デジカメ",
+		getProps: () => ({ aspect: "4 / 3" })
+	},
+	og_image: {
+		name: "1.91：1",
+		description: "SNSのOG画像、横長バナー",
+		getProps: () => ({ aspect: "1.91 / 1" })
+	},
+	movie_hr: {
+		name: "16：9",
+		getProps: () => ({ aspect: "16 / 9" }),
+		description: "Youtube、TV、横長バナー"
+	},
+	movie_old_vt: {
+		name: "3：4",
+		description: "iPhoneカメラ、デジカメ (タテ)",
+		getProps: () => ({ aspect: "3 / 4" })
+	},
+	movie_vt: {
+		name: "9：16",
+		description: "TikTok、Shortsなど縦型動画",
+		getProps: () => ({ aspect: "9 / 16" })
+	}
+};
+const ASPECT_VARIANTS = toVariantArray(ASPECT_VARIANT);
+const createFontVariant = (font, lang, type) => {
+	return {
+		name: font,
+		meta: {
+			lang,
+			type
+		},
+		getProps: () => ({ fontFamily: font })
+	};
+};
+const FONT_FAMILY_VARIANT = {
+	default: {
+		name: `デフォルト`,
+		meta: {
+			type: "kaku",
+			lang: "ja"
+		},
+		getProps: (brandKit) => ({ fontFamily: brandKit?.font_family ?? SYSTEM_FONT })
+	},
+	noto_sans_jp: createFontVariant("Noto Sans JP", "ja", "kaku"),
+	sawarabi_gothic: createFontVariant("Sawarabi Gothic", "ja", "kaku"),
+	zen_kaku_gothic: createFontVariant("Zen Kaku Gothic", "ja", "kaku"),
+	biz_udp_gothic: createFontVariant("BIZ UDPGothic", "ja", "kaku"),
+	open_sans: createFontVariant("Open Sans", "ja", "kaku"),
+	sans_serif: createFontVariant("sans-serif", "ja", "kaku"),
+	m_plus_1p: createFontVariant("M PLUS 1p", "ja", "maru"),
+	m_plus_rounded_1c: createFontVariant("M PLUS Rounded 1c", "ja", "maru"),
+	kiwi_maru: createFontVariant("Kiwi Maru", "ja", "maru"),
+	zen_maru_gothic: createFontVariant("Zen Maru Gothic", "ja", "maru"),
+	noto_serif_jp: createFontVariant("Noto Serif JP", "ja", "min"),
+	shippori_micho: createFontVariant("Shippori Mincho", "ja", "min"),
+	biz_udp_micho: createFontVariant("BIZ UDPMincho", "ja", "min"),
+	serif: createFontVariant("serif", "ja", "min"),
+	anton: createFontVariant("Anton", "en", "kaku"),
+	barlow: createFontVariant("Barlow", "en", "kaku"),
+	fraunces: createFontVariant("Fraunces", "en", "kaku"),
+	inter: createFontVariant("Inter", "en", "kaku"),
+	lato: createFontVariant("Lato", "en", "kaku"),
+	lora: createFontVariant("Lora", "en", "kaku"),
+	monospace: createFontVariant("monospace", "en", "kaku"),
+	montserrat: createFontVariant("Montserrat", "en", "kaku"),
+	outfit: createFontVariant("Outfit", "en", "kaku"),
+	playfair_display: createFontVariant("Playfair Display", "en", "kaku"),
+	poppins: createFontVariant("Poppins", "en", "kaku"),
+	raleway: createFontVariant("Raleway", "en", "kaku"),
+	roboto: createFontVariant("Roboto", "en", "kaku"),
+	system_ui: createFontVariant("system-ui", "en", "kaku")
+};
+const FONT_FAMILY_VARIANTS = toVariantArray(FONT_FAMILY_VARIANT);
+const FONT_FAMILY_VARIANT_GROUPS = [
+	{
+		label: "日本語 / 角ゴシック",
+		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "ja" && v.meta?.type === "kaku")
+	},
+	{
+		label: "日本語 / 丸ゴシック",
+		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "ja" && v.meta?.type === "maru")
+	},
+	{
+		label: "日本語 / 明朝",
+		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "ja" && v.meta?.type === "min")
+	},
+	{
+		label: "英語",
+		variants: FONT_FAMILY_VARIANTS.filter((v) => v.meta?.lang === "en")
+	}
+];
+const SHADOW_VARIANT = {
+	extra_small: {
+		name: "エクストラスモール",
+		getProps: () => ({ shadow: "0 1px 2px 0 rgba(0,0,0,0.1)" })
+	},
+	small: {
+		name: "スモール",
+		getProps: () => ({ shadow: "0 2px 4px 1px rgba(0,0,0,0.1)" })
+	},
+	medium: {
+		name: "ミディアム",
+		getProps: () => ({ shadow: "0px 4px 8px 2px rgba(0,0,0,0.1)" })
+	},
+	large: {
+		name: "ラージ",
+		getProps: () => ({ shadow: "0px 8px 16px 4px rgba(0,0,0,0.1)" })
+	}
+};
+const SHADOW_VARIANTS = toVariantArray(SHADOW_VARIANT);
+const BACKGROUND_COLOR_VARIANT = {
+	base: {
+		name: "ホワイト",
+		getProps: () => ({ backgroundColor: "#FFFFFF" })
+	},
+	dark: {
+		name: "ブラック",
+		getProps: () => ({ backgroundColor: "#000000" })
+	},
+	gray: {
+		name: "グレー",
+		getProps: () => ({ backgroundColor: "#ECECEC" })
+	},
+	brand: {
+		name: "ブランド",
+		getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_brand })
+	},
+	danger: {
+		name: "デンジャー",
+		getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_danger })
+	}
+};
+const BACKGROUND_COLOR_VARIANTS = toVariantArray(BACKGROUND_COLOR_VARIANT);
+const BORDER_COLOR_VARIANT = {
+	black: {
+		name: "ブラック",
+		getProps: () => ({ borderColor: "#000000" })
+	},
+	gray: {
+		name: "グレー",
+		getProps: () => ({ borderColor: "#DBDBDB" })
+	},
+	brand: {
+		name: "ブランド",
+		getProps: (kit) => ({ borderColor: getBrandKit(kit).color_brand })
+	},
+	danger: {
+		name: "デンジャー",
+		getProps: (kit) => ({ borderColor: getBrandKit(kit).color_danger })
+	},
+	base: {
+		name: "ホワイト",
+		getProps: () => ({ borderColor: "#FFFFFF" })
+	}
+};
+const BORDER_COLOR_VARIANTS = toVariantArray(BORDER_COLOR_VARIANT);
 
 //#endregion
-//#region src/hooks/useClickable.ts
-const getHref = (onClick) => {
-	if (!onClick) return void 0;
-	if (onClick.operation === "callNativeFunction") return String(onClick.args[0]);
-	if (onClick.operation === "linkTo") {
-		const href = String(onClick.args[0]) || "";
-		const decode = onClick.args[2] ?? false;
-		return decode ? decodeURI(href) : href;
-	}
-	return void 0;
+//#region src/components-flex/utils/prop-to-style.ts
+const toCssPosition = (p) => {
+	return {
+		position: p?.position,
+		top: p?.top,
+		left: p?.left,
+		bottom: p?.bottom,
+		right: p?.right,
+		transform: p?.transform
+	};
 };
-const getTarget = (onClick) => {
-	if (!onClick) return void 0;
-	if (onClick.operation !== "linkTo") return void 0;
-	return onClick.args[1] ? "_blank" : void 0;
+const toCssCommon = (p) => {
+	return { ...toCssPosition(p) };
 };
-const useClickable = ({ eventValue = {}, eventName = "", onClick, element = "div" }) => {
-	const fixedElement = (() => {
-		if (!onClick) return element;
-		switch (onClick.operation) {
-			case "linkTo":
-			case "callNativeFunction": return "a";
-			case "none": return element;
-			default: return "button";
-		}
-	})();
-	const attributes = {
-		href: getHref(onClick),
-		target: getTarget(onClick),
-		"data-clickable": onClick !== void 0 && onClick.operation !== "none"
+const toCssBorder = (p, brandKit) => {
+	if ((p?.borderTopWidth ?? p?.borderRightWidth ?? p?.borderLeftWidth ?? p?.borderBottomWidth ?? null) === null) return {};
+	const variant = BORDER_COLOR_VARIANT[p?.borderColorVariant];
+	return {
+		borderColor: p?.borderColor ?? variant?.getProps(brandKit)?.borderColor,
+		borderStyle: "solid",
+		borderTopWidth: p?.borderTopWidth,
+		borderLeftWidth: p?.borderLeftWidth,
+		borderRightWidth: p?.borderRightWidth,
+		borderBottomWidth: p?.borderBottomWidth
 	};
-	function handleClick(e) {
-		if (!onClick || onClick.operation === "none") return;
-		e.stopPropagation();
-		e.preventDefault();
-		if (eventName) send_event(eventName, eventValue);
-		execOnClickOperation(onClick);
-	}
+};
+const toCssPadding = (p) => {
 	return {
-		element: fixedElement,
-		attributes,
-		handleClick
+		paddingTop: p?.paddingTop,
+		paddingLeft: p?.paddingLeft,
+		paddingRight: p?.paddingRight,
+		paddingBottom: p?.paddingBottom
 	};
 };
-var useClickable_default = useClickable;
-
-//#endregion
-//#region src/hooks/useInjectCustomizeCss.ts
-const DATA_ATTR_LAYER_ID_KEY = "data-customize-css-layer-id";
-const useInjectCustomizeCss = (props, layerId) => {
-	function injectCss() {
-		let headAppended = false;
-		const roots = Array.from(document.querySelectorAll(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`));
-		const style = document.createElement("style");
-		style.setAttribute(DATA_ATTR_LAYER_ID_KEY, layerId);
-		style.textContent = props.customizeCss;
-		roots.forEach((root$49) => {
-			if (root$49 && root$49.shadowRoot) {
-				const existingStyles = Array.from(root$49.shadowRoot.querySelectorAll(`style[${DATA_ATTR_LAYER_ID_KEY}='${layerId}']`));
-				existingStyles.forEach((style$1) => {
-					style$1.parentNode?.removeChild(style$1);
-				});
-				root$49.shadowRoot.appendChild(style);
-			} else if (!headAppended) {
-				document.head.appendChild(style);
-				headAppended = true;
-			}
-		});
-	}
-	onMount$1(() => {
-		if (!props.isCustomizeCss) return;
-		injectCss();
-	});
+const toCssBackground = (p, brandKit) => {
+	const url = p?.backgroundImageUrl;
+	const variant = BACKGROUND_COLOR_VARIANT[p?.backgroundColorVariant];
+	return {
+		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
+		...url ? {
+			backgroundSize: url ? p.backgroundSize ?? "cover" : void 0,
+			backgroundImage: url ? `url(${url})` : void 0,
+			backgroundPositionX: p?.backgroundPositionX ?? "center",
+			backgroundPositionY: p?.backgroundPositionY ?? "center",
+			backgroundBlendMode: p?.backgroundBlendMode,
+			backgroundRepeat: "no-repeat"
+		} : {}
+	};
+};
+const toCssRadius = (p) => {
+	return {
+		borderTopLeftRadius: p?.borderTopLeftRadius,
+		borderTopRightRadius: p?.borderTopRightRadius,
+		borderBottomLeftRadius: p?.borderBottomLeftRadius,
+		borderBottomRightRadius: p?.borderBottomRightRadius
+	};
+};
+const toCssShadow = (p) => {
+	const variant = SHADOW_VARIANT[p?.shadowVariant];
+	return { boxShadow: p?.shadow ?? variant?.getProps()?.shadow };
+};
+const toCssOverflow = (p) => {
+	return { overflow: p?.overflow };
 };
 
 //#endregion
@@ -3957,89 +4199,131 @@ const AVATAR_SIZE_STYLES = {
 };
 
 //#endregion
-//#region src/components-flex/avatar/Avatar.svelte
-var root_1$14 = $.template(`<img class="avatar-image svelte-1xhdr99">`);
-const $$css$32 = {
-	hash: "svelte-1xhdr99",
-	code: ".avatar.svelte-1xhdr99 {display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
+//#region src/components-flex/avatar/Avatar.css.ts
+var Avatar_css_default = (layerId, props) => {
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			overflow: "hidden",
+			flexShrink: "0",
+			border: "0",
+			background: "none",
+			padding: "0",
+			margin: "0",
+			textAlign: "center",
+			appearance: "none"
+		}),
+		toDynamicStyle$3(layerId, props),
+		...props.responsiveSettings?.map((v) => {
+			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$3(layerId, v.props));
+			else if (v.userAgentCondition) return "";
+			return "";
+		}) ?? [],
+		props.customizeCss
+	]);
+};
+const calcImgRadius = (parentRadius, borderWidth) => {
+	const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
+	if (radiusSize === 0) return 0;
+	if (parentRadius === "100%") return "100%";
+	return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
+};
+const toDynamicStyle$3 = (layerId, props) => {
+	const avatarSizeStyle = !isNaN(Number(props.size)) ? {
+		width: `${props.size}px`,
+		height: `${props.size}px`
+	} : AVATAR_SIZE_STYLES[props.size] || AVATAR_SIZE_STYLES["medium"];
+	const styleObj = {
+		...{ shape: {
+			circle: { borderRadius: "100%" },
+			square: { borderRadius: "0.25em" },
+			rounded: { borderRadius: "1em" }
+		} }.shape[props.shape ?? "square"],
+		width: props.width ?? avatarSizeStyle.width,
+		height: props.height ?? avatarSizeStyle.height,
+		...toCssCommon(props),
+		...toCssBorder(props),
+		...toCssPadding(props)
+	};
+	return createComponentRawCss(layerId, (style) => [style("", styleObj), style("img", {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		...toCssRadius({
+			borderTopLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
+			borderTopRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
+			borderBottomLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
+			borderBottomRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth)
+		})
+	})]);
 };
+
+//#endregion
+//#region src/components-flex/avatar/Avatar.svelte
+var root_1$14 = $.template(`<img class="avatar-image">`);
+var root$54 = $.template(`<!> <!>`, 1);
 function Avatar($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$32);
-	const styleObj = $.mutable_state();
-	const style = $.mutable_state();
-	const imgStyle = $.mutable_state();
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $rProps = () => $.store_get($.get(rProps), "$rProps", $$stores);
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const rProps = $.mutable_state();
+	const clickable = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
-	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
-	const avatarSizeStyle = !isNaN(Number(props().size)) ? {
-		width: `${props().size}px`,
-		height: `${props().size}px`
-	} : AVATAR_SIZE_STYLES[props().size] || AVATAR_SIZE_STYLES[avatarPropsDefault.size];
-	const VARIANTS = { shape: {
-		circle: { borderRadius: "100%" },
-		square: { borderRadius: "0.25em" },
-		rounded: { borderRadius: "1em" }
-	} };
-	const calcImgRadius = (parentRadius, borderWidth) => {
-		const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
-		if (radiusSize === 0) return 0;
-		if (parentRadius === "100%") return "100%";
-		return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
-	};
-	$.legacy_pre_effect(() => ($.deep_read_state(props()), toCssPadding), () => {
-		$.set(styleObj, {
-			...VARIANTS.shape[props().shape ?? "square"],
-			width: props().width ?? avatarSizeStyle.width,
-			height: props().height ?? avatarSizeStyle.height,
-			...toCssCommon(props()),
-			...toCssBorder(props()),
-			...toCssPadding(props())
-		});
-	});
-	$.legacy_pre_effect(() => $.get(styleObj), () => {
-		$.set(style, objToStyle($.get(styleObj)));
+	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
+	const cssText = Avatar_css_default(layerId(), props());
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(rProps, useResponsiveProps(props())), "$rProps", $$stores);
 	});
-	$.legacy_pre_effect(() => $.get(styleObj), () => {
-		$.set(imgStyle, objToStyle({
-			width: "100%",
-			height: "100%",
-			objectFit: "cover",
-			...toCssRadius({
-				borderTopLeftRadius: calcImgRadius($.get(styleObj).borderRadius, $.get(styleObj).borderTopWidth),
-				borderTopRightRadius: calcImgRadius($.get(styleObj).borderRadius, $.get(styleObj).borderTopWidth),
-				borderBottomLeftRadius: calcImgRadius($.get(styleObj).borderRadius, $.get(styleObj).borderTopWidth),
-				borderBottomRightRadius: calcImgRadius($.get(styleObj).borderRadius, $.get(styleObj).borderTopWidth)
-			})
-		}));
+	$.legacy_pre_effect(() => $rProps(), () => {
+		$.store_unsub($.set(clickable, useClickable_default($rProps())), "$clickable", $$stores);
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var fragment = $.comment();
+	var fragment = root$54();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
-			id: props().id,
+	StylePortal(node, { cssText });
+	var node_1 = $.sibling(node, 2);
+	$.element(node_1, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(($0) => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
+			id: $rProps().id,
 			class: $0,
-			style: $.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1xhdr99"), [() => ["avatar", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
-		$.event("click", $$element, handleClick);
+		}), [() => ["avatar", ...$rProps().classNames ?? []].join(" ")], $.derived_safe_equal);
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
 		var img = root_1$14();
 		$.template_effect(() => {
-			$.set_attribute(img, "src", props().image);
-			$.set_attribute(img, "alt", props().alt);
-			$.set_style(img, $.get(imgStyle));
+			$.set_attribute(img, "src", $rProps().image);
+			$.set_attribute(img, "alt", $rProps().alt);
 		});
 		$.append($$anchor$1, img);
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
+//#endregion
+//#region src/components-flex/avatar/types.ts
+const AVATAR_SIZE = {
+	extra_small: "XS（48 x 48）",
+	small: "S（64 x 64）",
+	medium: "M（88 x 88）",
+	large: "L（108 x 108）",
+	extra_large: "XL（128 x 128）"
+};
+const AVATAR_SHAPE = {
+	circle: "サークル",
+	square: "スクエア",
+	rounded: "ラウンド"
+};
+
 //#endregion
 //#region src/components-flex/button/types.ts
 const BUTTON_SIZE = {
@@ -4090,10 +4374,10 @@ const buttonPropsDefault = {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowDown.svelte
-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>`);
+var root$53 = $.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$47();
+	var svg = root$53();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4102,10 +4386,10 @@ function IconArrowDown($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowUp.svelte
-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>`);
+var root$52 = $.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$46();
+	var svg = root$52();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4114,10 +4398,10 @@ function IconArrowUp($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconUsers.svelte
-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>`);
+var root$51 = $.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$45();
+	var svg = root$51();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4126,10 +4410,10 @@ function IconUsers($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowLeft.svelte
-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>`);
+var root$50 = $.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$44();
+	var svg = root$50();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4138,10 +4422,10 @@ function IconArrowLeft($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowRight.svelte
-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>`);
+var root$49 = $.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$43();
+	var svg = root$49();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4150,10 +4434,10 @@ function IconArrowRight($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconBell.svelte
-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>`);
+var root$48 = $.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$42();
+	var svg = root$48();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4162,10 +4446,10 @@ function IconBell($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconArrowUpFromSquare.svelte
-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>`);
+var root$47 = $.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$41();
+	var svg = root$47();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4174,10 +4458,10 @@ function IconArrowUpFromSquare($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconTicket.svelte
-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>`);
+var root$46 = $.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$40();
+	var svg = root$46();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4186,10 +4470,10 @@ function IconTicket($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconTrack.svelte
-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>`);
+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="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$39();
+	var svg = root$45();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4198,10 +4482,10 @@ function IconTrack($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCartShopping.svelte
-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>`);
+var root$44 = $.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$38();
+	var svg = root$44();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4210,10 +4494,10 @@ function IconCartShopping($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircle.svelte
-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>`);
+var root$43 = $.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$37();
+	var svg = root$43();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4222,10 +4506,10 @@ function IconCircle($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleQuestion.svelte
-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>`);
+var root$42 = $.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$36();
+	var svg = root$42();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4234,10 +4518,10 @@ function IconCircleQuestion($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCheck.svelte
-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>`);
+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="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$35();
+	var svg = root$41();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4246,10 +4530,10 @@ function IconCheck($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconXMark.svelte
-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>`);
+var root$40 = $.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$34();
+	var svg = root$40();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4258,10 +4542,10 @@ function IconXMark($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPaperPlane.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="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$39 = $.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$33();
+	var svg = root$39();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4270,10 +4554,10 @@ function IconPaperPlane($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCopy.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="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$38 = $.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$32();
+	var svg = root$38();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4282,10 +4566,10 @@ function IconCopy($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleXMark.svelte
-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>`);
+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 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$31();
+	var svg = root$37();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4294,10 +4578,10 @@ function IconCircleXMark($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconHeart.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="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$36 = $.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$30();
+	var svg = root$36();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4306,10 +4590,10 @@ function IconHeart($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconMagnifyingGrass.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="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$35 = $.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$29();
+	var svg = root$35();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4318,10 +4602,10 @@ function IconMagnifyingGrass($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconStar.svelte
-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>`);
+var root$34 = $.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$28();
+	var svg = root$34();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4330,10 +4614,10 @@ function IconStar($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconCircleInfo.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="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$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 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$27();
+	var svg = root$33();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4342,10 +4626,10 @@ function IconCircleInfo($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconEnvelope.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="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$32 = $.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$26();
+	var svg = root$32();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4354,10 +4638,10 @@ function IconEnvelope($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconGift.svelte
-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>`);
+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="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$25();
+	var svg = root$31();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4366,10 +4650,10 @@ function IconGift($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPaperclip.svelte
-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>`);
+var root$30 = $.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$24();
+	var svg = root$30();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4378,10 +4662,10 @@ function IconPaperclip($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconFire.svelte
-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>`);
+var root$29 = $.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$23();
+	var svg = root$29();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4390,10 +4674,10 @@ function IconFire($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconLink.svelte
-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>`);
+var root$28 = $.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$22();
+	var svg = root$28();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4402,10 +4686,10 @@ function IconLink($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconBuildings.svelte
-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>`);
+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 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$21();
+	var svg = root$27();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4414,10 +4698,10 @@ function IconBuildings($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconChevronsRight.svelte
-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>`);
+var root$26 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 640 640"><path d="M534.6 342.6C547.1 330.1 547.1 309.8 534.6 297.3L342.6 105.3C330.1 92.8 309.8 92.8 297.3 105.3C284.8 117.8 284.8 138.1 297.3 150.6L466.7 320L297.4 489.4C284.9 501.9 284.9 522.2 297.4 534.7C309.9 547.2 330.2 547.2 342.7 534.7L534.7 342.7zM150.6 534.6L342.6 342.6C355.1 330.1 355.1 309.8 342.6 297.3L150.6 105.3C138.1 92.8 117.8 92.8 105.3 105.3C92.8 117.8 92.8 138.1 105.3 150.6L274.7 320L105.4 489.4C92.9 501.9 92.9 522.2 105.4 534.7C117.9 547.2 138.2 547.2 150.7 534.7z"></path></svg>`);
 function IconChevronsRight($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$20();
+	var svg = root$26();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4426,10 +4710,10 @@ function IconChevronsRight($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconChevronRight.svelte
-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>`);
+var root$25 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 640 640"><path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"></path></svg>`);
 function IconChevronRight($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$19();
+	var svg = root$25();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4438,10 +4722,34 @@ function IconChevronRight($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/icon/variants/IconPhone.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="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$24 = $.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$18();
+	var svg = root$24();
+	var path = $.child(svg);
+	$.reset(svg);
+	$.template_effect(() => $.set_attribute(path, "fill", color()));
+	$.append($$anchor, svg);
+}
+
+//#endregion
+//#region src/components-flex/icon/variants/IconLocationDot.svelte
+var root$23 = $.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$23();
+	var path = $.child(svg);
+	$.reset(svg);
+	$.template_effect(() => $.set_attribute(path, "fill", color()));
+	$.append($$anchor, svg);
+}
+
+//#endregion
+//#region src/components-flex/icon/variants/IconChevronLeft.svelte
+var root$22 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 640 640"><path d="M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z"></path></svg>`);
+function IconChevronLeft($$anchor, $$props) {
+	let color = $.prop($$props, "color", 8);
+	var svg = root$22();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4449,11 +4757,11 @@ function IconPhone($$anchor, $$props) {
 }
 
 //#endregion
-//#region src/components-flex/icon/variants/IconLocationDot.svelte
-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) {
+//#region src/components-flex/icon/variants/IconChevronsLeft.svelte
+var root$21 = $.ns_template(`<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;" viewBox="0 0 640 640"><path d="M105.4 297.4C92.9 309.9 92.9 330.2 105.4 342.7L297.4 534.7C309.9 547.2 330.2 547.2 342.7 534.7C355.2 522.2 355.2 501.9 342.7 489.4L173.3 320L342.6 150.6C355.1 138.1 355.1 117.8 342.6 105.3C330.1 92.8 309.8 92.8 297.3 105.3L105.3 297.3zM489.4 105.4L297.4 297.4C284.9 309.9 284.9 330.2 297.4 342.7L489.4 534.7C501.9 547.2 522.2 547.2 534.7 534.7C547.2 522.2 547.2 501.9 534.7 489.4L365.3 320L534.6 150.6C547.1 138.1 547.1 117.8 534.6 105.3C522.1 92.8 501.8 92.8 489.3 105.3z"></path></svg>`);
+function IconChevronsLeft($$anchor, $$props) {
 	let color = $.prop($$props, "color", 8);
-	var svg = root$17();
+	var svg = root$21();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4503,7 +4811,9 @@ const ICON_VARIANTS = {
 	cart_shopping: IconCartShopping,
 	check: IconCheck,
 	chevrons_right: IconChevronsRight,
+	chevrons_left: IconChevronsLeft,
 	chevron_right: IconChevronRight,
+	chevron_left: IconChevronLeft,
 	circle: IconCircle,
 	circle_info: IconCircleInfo,
 	circle_question: IconCircleQuestion,
@@ -4527,54 +4837,89 @@ const ICON_VARIANTS = {
 };
 
 //#endregion
-//#region src/components-flex/icon/Icon.svelte
-const $$css$31 = {
-	hash: "svelte-1kl9m59",
-	code: ".icon.svelte-1kl9m59 {display:flex;align-items:center;overflow:hidden;width:auto;cursor:pointer;text-decoration:none;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
+//#region src/components-flex/icon/Icon.css.ts
+var Icon_css_default = (layerId, props, _brandKit) => {
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			textDecoration: "none",
+			color: "inherit",
+			border: "0",
+			background: "none",
+			padding: "0"
+		}),
+		style("&[data-clickable=\"true\"]", { cursor: "pointer" }),
+		style("&[data-clickable=\"true\"]:hover", { opacity: .8 }),
+		style("&[aria-disabled=\"true\"]", {
+			opacity: "0.24",
+			cursor: "not-allowed"
+		}),
+		style("&[aria-disabled=\"true\"]:hover", { opacity: "0.24" }),
+		style("&[aria-hidden=\"true\"]", { display: "none" }),
+		toDynamicStyle$2(layerId, props),
+		...props.responsiveSettings?.map((v) => {
+			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$2(layerId, {
+				variant: v.props.variant ?? props.variant,
+				...v.props
+			}));
+			else if (v.userAgentCondition) return "";
+			return "";
+		}) ?? [],
+		props.customizeCss
+	]);
+};
+const toDynamicStyle$2 = (layerId, props) => {
+	return createComponentRawCss(layerId, (style) => [style("", {
+		minWidth: props.width ? props.width : ICON_SIZE[props.size ?? "medium"].value,
+		width: props.width ? props.width : ICON_SIZE[props.size ?? "medium"].value,
+		height: props.height ? props.height : ICON_SIZE[props.size ?? "medium"].value,
+		...toCssCommon(props)
+	})]);
 };
+
+//#endregion
+//#region src/components-flex/icon/Icon.svelte
+var root$20 = $.template(`<!> <!>`, 1);
 function Icon($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$31);
-	const style = $.mutable_state();
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $rProps = () => $.store_get($.get(rProps), "$rProps", $$stores);
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const rProps = $.mutable_state();
+	const clickable = $.mutable_state();
 	const IconComponent = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
-	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
-	const getSizeCss = () => {
-		return {
-			minWidth: props().width ? props().width : ICON_SIZE[props().size ?? "medium"].value,
-			width: props().width ? props().width : ICON_SIZE[props().size ?? "medium"].value,
-			height: props().height ? props().height : ICON_SIZE[props().size ?? "medium"].value
-		};
-	};
+	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
+	const cssText = Icon_css_default(layerId(), props());
 	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
-		$.set(style, objToStyle({
-			...getSizeCss(),
-			...toCssCommon(props())
-		}));
+		$.store_unsub($.set(rProps, useResponsiveProps(props())), "$rProps", $$stores);
 	});
-	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
-		$.set(IconComponent, ICON_VARIANTS[props().variant] ?? void 0);
+	$.legacy_pre_effect(() => $rProps(), () => {
+		$.store_unsub($.set(clickable, useClickable_default($rProps())), "$clickable", $$stores);
+	});
+	$.legacy_pre_effect(() => $rProps(), () => {
+		$.set(IconComponent, ICON_VARIANTS[$rProps().variant] ?? void 0);
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var fragment = $.comment();
+	var fragment = root$20();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	StylePortal(node, { cssText });
+	var node_1 = $.sibling(node, 2);
+	$.element(node_1, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(($0) => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			id: props().id,
 			class: $0,
-			style: $.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1kl9m59"), [() => ["icon", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
-		$.event("click", $$element, handleClick);
+		}), [() => ["icon", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
 		var fragment_1 = $.comment();
-		var node_1 = $.first_child(fragment_1);
+		var node_2 = $.first_child(fragment_1);
 		const expression = $.derived_safe_equal(() => props().color ?? "currentColor");
-		$.component(node_1, () => $.get(IconComponent), ($$anchor$2, $$component) => {
+		$.component(node_2, () => $.get(IconComponent), ($$anchor$2, $$component) => {
 			$$component($$anchor$2, { get color() {
 				return $.get(expression);
 			} });
@@ -4583,6 +4928,7 @@ function Icon($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -4753,126 +5099,174 @@ function darkenColor(color, percent) {
 }
 
 //#endregion
-//#region src/components-flex/button/Button.svelte
-var root_2$8 = $.template(`<div class="button-icon svelte-l0rauj"><!></div>`);
-var root_1$13 = $.template(`<!> <span class="button-label"> </span>`, 1);
-const $$css$30 = {
-	hash: "svelte-l0rauj",
-	code: ".button.svelte-l0rauj {display:inline-flex;gap:0.8em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;color:var(--color);border-color:var(--border-color);background-color:var(--bg-color);}.button.svelte-l0rauj:hover {background-color:var(--hover-bg-color);border-color:var(--hover-border-color);}.button-icon.svelte-l0rauj {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
+//#region src/components-flex/button/Button.css.ts
+var Button_css_default = (layerId, props, brandKit) => {
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			display: "inline-flex",
+			gap: "0.8em",
+			alignItems: "center",
+			justifyContent: "center",
+			textDecoration: "none",
+			outline: "0",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			lineHeight: "1.5",
+			transition: "background-color 0.12s, border-color 0.12s, color 0.12s",
+			cursor: "pointer"
+		}),
+		style("&[aria-disabled=\"true\"]", {
+			opacity: "0.24",
+			cursor: "not-allowed"
+		}),
+		style("&[aria-hidden=\"true\"]", { display: "none" }),
+		style(".button-icon", {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			marginLeft: "-0.2em",
+			marginRight: "-0.2em"
+		}),
+		toDynamicStyle$1(layerId, props, brandKit),
+		...props.responsiveSettings?.map((v) => {
+			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$1(layerId, v.props, brandKit));
+			else if (v.userAgentCondition) return "";
+			return "";
+		}) ?? [],
+		props.customizeCss
+	]);
+};
+const toDynamicStyle$1 = (layerId, props, brandKit) => {
+	const buttonThemeStyles = getButtonThemeStyles(brandKit);
+	const buttonThemeStyle = buttonThemeStyles[props.theme] || buttonThemeStyles[buttonPropsDefault.theme];
+	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size] || BUTTON_SIZE_STYLES[buttonPropsDefault.size];
+	const variantStyle = (() => {
+		switch (props.variant ?? buttonThemeStyle?.variant) {
+			case "outline": return createComponentRawCss(layerId, (style) => [style("", {
+				color: props.color ?? buttonThemeStyle.color,
+				borderColor: props.borderColor ?? buttonThemeStyle.borderColor,
+				backgroundColor: props.backgroundColor ?? buttonThemeStyle.backgroundColor
+			}), style("&:hover", {
+				borderColor: props.borderColor ?? props.color ?? buttonThemeStyle.borderColor,
+				backgroundColor: "#f3f4f6"
+			})]);
+			case "text": return createComponentRawCss(layerId, (style) => [style("", {
+				color: props.color ?? buttonThemeStyle.color,
+				borderColor: "rgba(255,255,255,0)",
+				backgroundColor: "rgba(255,255,255,0)"
+			}), style("&:hover", {
+				borderColor: "#f3f4f6",
+				backgroundColor: "#f3f4f6"
+			})]);
+			case "normal":
+			default: return createComponentRawCss(layerId, (style) => [style("", {
+				color: props.color ?? buttonThemeStyle.color,
+				borderColor: props.backgroundColor ?? buttonThemeStyle.backgroundColor,
+				backgroundColor: props.backgroundColor ?? buttonThemeStyle.backgroundColor
+			}), style("&:hover", {
+				borderColor: darkenColor(props.backgroundColor ?? buttonThemeStyle.backgroundColor, .16),
+				backgroundColor: darkenColor(props.backgroundColor ?? buttonThemeStyle.backgroundColor, .16)
+			})]);
+		}
+	})();
+	return createComponentRawCss(layerId, (style) => [style("", {
+		width: props.width,
+		fontWeight: props.fontWeight ?? "bold",
+		...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
+		...props.borderTopLeftRadius ? {
+			borderTopLeftRadius: props.borderTopLeftRadius,
+			borderTopRightRadius: props.borderTopRightRadius,
+			borderBottomLeftRadius: props.borderBottomLeftRadius,
+			borderBottomRightRadius: props.borderBottomRightRadius
+		} : BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
+		...props.iconAngle && { flexDirection: props.iconAngle },
+		height: props.height ?? buttonSizeStyle.height,
+		paddingLeft: props.paddingLeft ?? buttonSizeStyle.paddingLeft,
+		paddingRight: props.paddingRight ?? buttonSizeStyle.paddingRight,
+		fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
+		...toCssCommon(props),
+		...toCssBorder(props),
+		...toCssShadow(props)
+	}), variantStyle]);
 };
+
+//#endregion
+//#region src/components-flex/button/Button.svelte
+var root_3$1 = $.template(`<div class="button-icon"><!></div>`);
+var root_2$10 = $.template(`<!> <span class="button-label"> </span>`, 1);
+var root$19 = $.template(`<!> <!>`, 1);
 function Button($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$30);
-	const variables$1 = $.mutable_state();
-	const style = $.mutable_state();
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $rProps = () => $.store_get($.get(rProps), "$rProps", $$stores);
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const rProps = $.mutable_state();
+	const clickable = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
-	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
+	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
 	const { brandKit } = useBrandKit();
-	const buttonThemeStyles = getButtonThemeStyles(brandKit);
-	const buttonThemeStyle = buttonThemeStyles[props().theme] || buttonThemeStyles[buttonPropsDefault.theme];
-	const variant = (() => {
-		switch (props().variant ?? buttonThemeStyle?.variant) {
-			case "outline": return "outline";
-			case "text": return "text";
-			case "normal":
-			default:
-		}
-	})();
-	const buttonSizeStyle = BUTTON_SIZE_STYLES[props().size] || BUTTON_SIZE_STYLES[buttonPropsDefault.size];
-	$.legacy_pre_effect(() => ($.deep_read_state(props()), darkenColor), () => {
-		$.set(variables$1, (() => {
-			switch (variant) {
-				case "outline": return {
-					"--color": props().color ?? buttonThemeStyle.color,
-					"--border-color": props().borderColor ?? props().color ?? buttonThemeStyle.borderColor,
-					"--bg-color": props().backgroundColor ?? buttonThemeStyle.backgroundColor,
-					"--hover-border-color": props().borderColor ?? props().color ?? buttonThemeStyle.borderColor,
-					"--hover-bg-color": "#f3f4f6"
-				};
-				case "text": return {
-					"--color": props().color ?? buttonThemeStyle.color,
-					"--border-color": "rgba(255,255,255,0)",
-					"--bg-color": "rgba(255,255,255,0)",
-					"--hover-border-color": "#f3f4f6",
-					"--hover-bg-color": "#f3f4f6"
-				};
-				default: return {
-					"--color": props().color ?? buttonThemeStyle.color,
-					"--border-color": props().backgroundColor ?? buttonThemeStyle.backgroundColor,
-					"--bg-color": props().backgroundColor ?? buttonThemeStyle.backgroundColor,
-					"--hover-border-color": darkenColor(props().backgroundColor ?? buttonThemeStyle.backgroundColor, .16),
-					"--hover-bg-color": darkenColor(props().backgroundColor ?? buttonThemeStyle.backgroundColor, .16)
-				};
-			}
-		})());
+	const cssCode = Button_css_default(layerId(), props(), brandKit);
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(rProps, useResponsiveProps(props())), "$rProps", $$stores);
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.get(variables$1)), () => {
-		$.set(style, objToStyle({
-			width: props().width,
-			fontWeight: props().fontWeight ?? "bold",
-			...BUTTON_WRAP_STYLES[props().wrap ?? buttonPropsDefault.wrap],
-			...props().borderTopLeftRadius ? {
-				borderTopLeftRadius: props().borderTopLeftRadius,
-				borderTopRightRadius: props().borderTopRightRadius,
-				borderBottomLeftRadius: props().borderBottomLeftRadius,
-				borderBottomRightRadius: props().borderBottomRightRadius
-			} : BUTTON_ROUND_STYLES[props().round ?? buttonPropsDefault.round],
-			...props().iconAngle ? { flexDirection: props().iconAngle } : {},
-			height: props().height ?? buttonSizeStyle.height,
-			paddingLeft: props().paddingLeft ?? buttonSizeStyle.paddingLeft,
-			paddingRight: props().paddingRight ?? buttonSizeStyle.paddingRight,
-			fontSize: props().fontSize ?? buttonSizeStyle.fontSize,
-			...toCssCommon(props()),
-			...toCssBorder(props()),
-			...toCssShadow(props()),
-			...$.get(variables$1)
-		}));
+	$.legacy_pre_effect(() => $rProps(), () => {
+		$.store_unsub($.set(clickable, useClickable_default($rProps())), "$clickable", $$stores);
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var fragment = $.comment();
+	var fragment = root$19();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
-			id: props().id,
-			class: $0,
-			style: $.get(style),
-			"data-layer-id": layerId(),
-			"data-variant": variant
-		}, "svelte-l0rauj"), [() => ["button", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
-		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$13();
-		var node_1 = $.first_child(fragment_1);
-		var consequent = ($$anchor$2) => {
-			var div = root_2$8();
-			var node_2 = $.child(div);
-			const expression = $.derived_safe_equal(() => ({
-				variant: props().iconVariant,
-				color: props().iconColor ?? props().color ?? buttonThemeStyle.color,
-				width: "1em",
-				height: "1em"
-			}));
-			Icon(node_2, { get props() {
-				return $.get(expression);
-			} });
-			$.reset(div);
-			$.append($$anchor$2, div);
-		};
-		$.if(node_1, ($$render) => {
-			if (props().isIcon && props().iconVariant) $$render(consequent);
+	StylePortal(node, { cssText: cssCode });
+	var node_1 = $.sibling(node, 2);
+	var consequent_1 = ($$anchor$1) => {
+		var fragment_1 = $.comment();
+		var node_2 = $.first_child(fragment_1);
+		$.element(node_2, () => $clickable().element, false, ($$element, $$anchor$2) => {
+			let attributes;
+			$.template_effect(($0) => attributes = $.set_attributes($$element, attributes, {
+				...$clickable().attributes,
+				id: $rProps().id,
+				class: $0,
+				"data-layer-id": layerId(),
+				"data-variant": $rProps().variant
+			}), [() => ["button", ...$rProps().classNames ?? []].join(" ")], $.derived_safe_equal);
+			$.event("click", $$element, function(...$$args) {
+				$clickable().handleClick?.apply(this, $$args);
+			});
+			var fragment_2 = root_2$10();
+			var node_3 = $.first_child(fragment_2);
+			var consequent = ($$anchor$3) => {
+				var div = root_3$1();
+				var node_4 = $.child(div);
+				const expression = $.derived_safe_equal(() => ({
+					variant: $rProps().iconVariant,
+					color: $rProps().iconColor ?? $rProps().color,
+					width: "1em",
+					height: "1em"
+				}));
+				Icon(node_4, { get props() {
+					return $.get(expression);
+				} });
+				$.reset(div);
+				$.append($$anchor$3, div);
+			};
+			$.if(node_3, ($$render) => {
+				if (props().isIcon && props().iconVariant) $$render(consequent);
+			});
+			var span = $.sibling(node_3, 2);
+			var text = $.child(span, true);
+			$.reset(span);
+			$.template_effect(() => $.set_text(text, $rProps().label ?? buttonPropsDefault.label));
+			$.append($$anchor$2, fragment_2);
 		});
-		var span = $.sibling(node_1, 2);
-		var text = $.child(span, true);
-		$.reset(span);
-		$.template_effect(() => $.set_text(text, props().label ?? buttonPropsDefault.label));
 		$.append($$anchor$1, fragment_1);
+	};
+	$.if(node_1, ($$render) => {
+		if (!$rProps().hidden) $$render(consequent_1);
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -4886,6 +5280,20 @@ const buttonOutlinedPropsDefault = {
 	wrap: "nowrap"
 };
 
+//#endregion
+//#region src/components-flex/utils/obj-to-style.ts
+const toHyphenCase = (str) => {
+	let result = str.replace(/_/g, "-");
+	result = result.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+	return result;
+};
+const objToStyle = (obj) => {
+	return Object.entries(obj).map(([key, value]) => {
+		if (value === void 0) return "";
+		return `${toHyphenCase(key)}: ${value};`;
+	}).filter((v) => v !== "").join(" ");
+};
+
 //#endregion
 //#region src/components-flex/button-outlined/styles.ts
 const BUTTON_OUTLINED_SIZE_STYLES = {
@@ -4968,27 +5376,59 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 	wrap: { whiteSpace: "pre-wrap" }
 };
 
+//#endregion
+//#region src/hooks/useInjectCustomizeCss.ts
+const DATA_ATTR_LAYER_ID_KEY = "data-customize-css-layer-id";
+const useInjectCustomizeCss = (props, layerId) => {
+	function injectCss() {
+		let headAppended = false;
+		const roots = Array.from(document.querySelectorAll(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`));
+		const style = document.createElement("style");
+		style.setAttribute(DATA_ATTR_LAYER_ID_KEY, layerId);
+		style.textContent = props.customizeCss;
+		roots.forEach((root$56) => {
+			if (root$56 && root$56.shadowRoot) {
+				Array.from(root$56.shadowRoot.querySelectorAll(`style[${DATA_ATTR_LAYER_ID_KEY}='${layerId}']`)).forEach((style$1) => {
+					style$1.parentNode?.removeChild(style$1);
+				});
+				root$56.shadowRoot.appendChild(style);
+			} else if (!headAppended) {
+				document.head.appendChild(style);
+				headAppended = true;
+			}
+		});
+	}
+	onMount$1(() => {
+		if (!props.isCustomizeCss) return;
+		injectCss();
+	});
+};
+
 //#endregion
 //#region src/components-flex/button-outlined/ButtonOutlined.svelte
-var root_2$7 = $.template(`<div class="button-outlined-icon svelte-z8gomx"><!></div>`);
-var root_1$12 = $.template(`<!> <span class="button-outlined-label svelte-z8gomx"> </span>`, 1);
-const $$css$29 = {
+var root_2$9 = $.template(`<div class="button-outlined-icon svelte-z8gomx"><!></div>`);
+var root_1$13 = $.template(`<!> <span class="button-outlined-label svelte-z8gomx"> </span>`, 1);
+const $$css$25 = {
 	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$29);
+	$.append_styles($$anchor, $$css$25);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const clickable = $.mutable_state();
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
-	const { attributes, element, handleClick } = useClickable_default(props());
-	const buttonThemeStyles = getButtonOutlinedThemeStyles(brandKit);
-	const buttonThemeStyle = buttonThemeStyles[props().theme ?? buttonOutlinedPropsDefault.theme];
+	const buttonThemeStyle = getButtonOutlinedThemeStyles(brandKit)[props().theme ?? buttonOutlinedPropsDefault.theme];
 	const buttonSizeStyle = BUTTON_OUTLINED_SIZE_STYLES[props().size ?? buttonOutlinedPropsDefault.size];
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(clickable, useClickable_default(props())), "$clickable", $$stores);
+	});
 	$.legacy_pre_effect(() => ($.deep_read_state(props()), darkenColor), () => {
 		$.set(variables$1, {
 			"--bg-color": props().backgroundColor ?? buttonThemeStyle.backgroundColor,
@@ -5018,19 +5458,21 @@ function ButtonOutlined($$anchor, $$props) {
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	$.element(node, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(() => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			class: "button-outlined",
 			style: $.get(style),
 			"data-layer-id": layerId()
 		}, "svelte-z8gomx"));
-		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$12();
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
+		var fragment_1 = root_1$13();
 		var node_1 = $.first_child(fragment_1);
 		var consequent = ($$anchor$2) => {
-			var div = root_2$7();
+			var div = root_2$9();
 			var node_2 = $.child(div);
 			const expression = $.derived_safe_equal(() => ({
 				variant: props().iconVariant,
@@ -5055,6 +5497,7 @@ function ButtonOutlined($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5117,25 +5560,29 @@ const getButtonTextThemeStyles = getPropStyles(callback$2);
 
 //#endregion
 //#region src/components-flex/button-text/ButtonText.svelte
-var root_2$6 = $.template(`<div class="button-text-icon svelte-l90o4j"><!></div>`);
-var root_1$11 = $.template(`<!> <span class="button-text-label svelte-l90o4j"> </span>`, 1);
-const $$css$28 = {
+var root_2$8 = $.template(`<div class="button-text-icon svelte-l90o4j"><!></div>`);
+var root_1$12 = $.template(`<!> <span class="button-text-label svelte-l90o4j"> </span>`, 1);
+const $$css$24 = {
 	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$28);
+	$.append_styles($$anchor, $$css$24);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const clickable = $.mutable_state();
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
-	const { attributes, element, handleClick } = useClickable_default(props());
-	const themeStyles = getButtonTextThemeStyles(brandKit);
-	const buttonThemeStyle = themeStyles[props().theme ?? "default"];
+	const buttonThemeStyle = getButtonTextThemeStyles(brandKit)[props().theme ?? "default"];
 	const buttonSizeStyle = BUTTON_TEXT_SIZE_STYLES[props().size ?? "medium"];
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(clickable, useClickable_default(props())), "$clickable", $$stores);
+	});
 	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
 		$.set(variables$1, { "--hover-bg-color": props().backgroundColor ?? buttonThemeStyle.backgroundColor });
 	});
@@ -5159,19 +5606,21 @@ function ButtonText($$anchor, $$props) {
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	$.element(node, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(() => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			class: "button-text",
 			style: $.get(style),
 			"data-layer-id": layerId()
 		}, "svelte-l90o4j"));
-		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$11();
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
+		var fragment_1 = root_1$12();
 		var node_1 = $.first_child(fragment_1);
 		var consequent = ($$anchor$2) => {
-			var div = root_2$6();
+			var div = root_2$8();
 			var node_2 = $.child(div);
 			const expression = $.derived_safe_equal(() => ({
 				variant: props().iconVariant,
@@ -5196,6 +5645,7 @@ function ButtonText($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5232,15 +5682,18 @@ const getTextThemeStyles = getPropStyles(callback$1);
 
 //#endregion
 //#region src/components-flex/close-button/CloseButton.svelte
-var root_2$5 = $.template(`<span></span>`);
-var root_1$10 = $.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-18wmfyq"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
-const $$css$27 = {
+var root_2$7 = $.template(`<span></span>`);
+var root_1$11 = $.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$23 = {
 	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$27);
+	$.append_styles($$anchor, $$css$23);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const clickable = $.mutable_state();
 	const hasLabel = $.mutable_state();
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
@@ -5254,14 +5707,6 @@ function CloseButton($$anchor, $$props) {
 	let eventValue = $.prop($$props, "eventValue", 8, void 0);
 	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props().onClick ? props() : {
-		onClick: {
-			operation: "closeApp",
-			args: ["button"]
-		},
-		eventValue: eventValue(),
-		eventName: eventName()
-	});
 	const VARIANTS = {
 		placement: {
 			topRight: {
@@ -5291,6 +5736,16 @@ function CloseButton($$anchor, $$props) {
 	const color = props().color ?? getTextThemeStyles(brandKit)[props().colorVariant]?.color ?? "#666";
 	const label = props().label;
 	const isLeftLabelPlacement = props().labelPlacement === "left";
+	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.deep_read_state(eventValue()), $.deep_read_state(eventName())), () => {
+		$.store_unsub($.set(clickable, useClickable_default(props().onClick ? props() : {
+			onClick: {
+				operation: "closeApp",
+				args: ["button"]
+			},
+			eventValue: eventValue(),
+			eventName: eventName()
+		})), "$clickable", $$stores);
+	});
 	$.legacy_pre_effect(() => {}, () => {
 		$.set(hasLabel, label !== void 0 && label !== "");
 	});
@@ -5342,24 +5797,26 @@ function CloseButton($$anchor, $$props) {
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	$.element(node, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(($0) => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			id: props().id,
 			class: $0,
 			"data-layer-id": layerId(),
 			style: $.get(style)
 		}, "svelte-18wmfyq"), [() => [`close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`, ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
-		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$10();
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
+		var fragment_1 = root_1$11();
 		var span = $.first_child(fragment_1);
 		var svg = $.child(span);
 		$.set_attribute(svg, "fill", color);
 		$.reset(span);
 		var node_1 = $.sibling(span, 2);
 		var consequent = ($$anchor$2) => {
-			var span_1 = root_2$5();
+			var span_1 = root_2$7();
 			$.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)));
@@ -5373,6 +5830,7 @@ function CloseButton($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5451,29 +5909,34 @@ const IMAGE_ROUND_STYLES = {
 
 //#endregion
 //#region src/components-flex/image/Image.svelte
-var root_1$9 = $.template(`<img class="image-img svelte-1olvu11">`);
-const $$css$26 = {
+var root_1$10 = $.template(`<img class="image-img svelte-1olvu11">`);
+const $$css$22 = {
 	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$26);
+	$.append_styles($$anchor, $$css$22);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const clickable = $.mutable_state();
 	const styleObj = $.mutable_state();
 	const style = $.mutable_state();
 	const imgStyle = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
 	const width = props().width ?? "100%";
-	const calcImgRadius = (parentRadius, borderWidth) => {
+	const calcImgRadius$1 = (parentRadius, borderWidth) => {
 		const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
 		if (radiusSize === 0) return 0;
 		if (parentRadius === "100%") return "100%";
 		return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
 	};
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(clickable, useClickable_default(props())), "$clickable", $$stores);
+	});
 	$.legacy_pre_effect(() => ($.deep_read_state(props()), toCssPadding), () => {
 		$.set(styleObj, {
 			...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? "square"],
@@ -5491,27 +5954,29 @@ function Image($$anchor, $$props) {
 	});
 	$.legacy_pre_effect(() => $.get(styleObj), () => {
 		$.set(imgStyle, objToStyle({ ...toCssRadius({
-			borderTopLeftRadius: calcImgRadius($.get(styleObj).borderTopLeftRadius, $.get(styleObj).borderTopWidth),
-			borderTopRightRadius: calcImgRadius($.get(styleObj).borderTopRightRadius, $.get(styleObj).borderTopWidth),
-			borderBottomLeftRadius: calcImgRadius($.get(styleObj).borderBottomLeftRadius, $.get(styleObj).borderTopWidth),
-			borderBottomRightRadius: calcImgRadius($.get(styleObj).borderBottomRightRadius, $.get(styleObj).borderTopWidth)
+			borderTopLeftRadius: calcImgRadius$1($.get(styleObj).borderTopLeftRadius, $.get(styleObj).borderTopWidth),
+			borderTopRightRadius: calcImgRadius$1($.get(styleObj).borderTopRightRadius, $.get(styleObj).borderTopWidth),
+			borderBottomLeftRadius: calcImgRadius$1($.get(styleObj).borderBottomLeftRadius, $.get(styleObj).borderTopWidth),
+			borderBottomRightRadius: calcImgRadius$1($.get(styleObj).borderBottomRightRadius, $.get(styleObj).borderTopWidth)
 		}) }));
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	$.element(node, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(($0) => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			id: props().id,
 			class: $0,
 			style: $.get(style),
 			"data-layer-id": layerId()
 		}, "svelte-1olvu11"), [() => ["image", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
-		$.event("click", $$element, handleClick);
-		var img = root_1$9();
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
+		var img = root_1$10();
 		$.template_effect(() => {
 			$.set_attribute(img, "src", props().image);
 			$.set_attribute(img, "alt", props().alt);
@@ -5521,6 +5986,7 @@ function Image($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5544,61 +6010,98 @@ const IMAGE_ASPECT_VARIANTS = {
 };
 
 //#endregion
-//#region src/components-flex/layout/Layout.svelte
-const $$css$25 = {
-	hash: "svelte-1o103hp",
-	code: ".layout.svelte-1o103hp {text-decoration:none;color:inherit;}.layout[data-clickable='true'].svelte-1o103hp {cursor:pointer;}.layout[data-clickable='true'].svelte-1o103hp:hover {opacity:0.8;}"
+//#region src/components-flex/layout/Layout.css.ts
+var Layout_css_default = (layerId, props, brandKit) => {
+	const toDynamicStyle$4 = (_props) => {
+		return createComponentRawCss(layerId, (style) => [style("", {
+			display: _props.display ?? "flex",
+			flexDirection: _props.direction,
+			alignItems: _props.align,
+			justifyContent: _props.justify,
+			rowGap: _props.rowGap ?? _props.gap,
+			columnGap: _props.columnGap ?? _props.gap,
+			width: _props.width,
+			maxWidth: _props.maxWidth,
+			height: _props.height,
+			...toCssOverflow(_props),
+			...toCssShadow(_props),
+			...toCssRadius(_props),
+			...toCssBackground(_props, brandKit),
+			...toCssCommon(_props),
+			...toCssPadding(_props),
+			...toCssBorder(_props, brandKit)
+		})]);
+	};
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			textDecoration: "none",
+			color: "inherit"
+		}),
+		style("&[data-clickable=\"true\"]", { cursor: "pointer" }),
+		style("&[data-clickable=\"true\"]:hover", { opacity: .8 }),
+		toDynamicStyle$4(props),
+		...props.responsiveSettings?.map((v) => {
+			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$4(v.props));
+			else if (v.userAgentCondition) return "";
+			return "";
+		}) ?? [],
+		props.customizeCss
+	]);
 };
+
+//#endregion
+//#region src/components-flex/layout/Layout.svelte
+var root$18 = $.template(`<!> <!>`, 1);
 function Layout($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$25);
-	const style = $.mutable_state();
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $rProps = () => $.store_get($.get(rProps), "$rProps", $$stores);
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const rProps = $.mutable_state();
+	const clickable = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
-	let layerId = $.prop($$props, "layerId", 8, "");
+	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
 	const { brandKit } = useBrandKit();
-	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
-	$.legacy_pre_effect(() => ($.deep_read_state(props()), toCssBorder), () => {
-		$.set(style, objToStyle({
-			display: props().display ?? "flex",
-			flexDirection: props().direction,
-			alignItems: props().align,
-			justifyContent: props().justify,
-			rowGap: props().rowGap ?? props().gap,
-			columnGap: props().columnGap ?? props().gap,
-			width: props().width,
-			maxWidth: props().maxWidth,
-			height: props().height,
-			...toCssOverflow(props()),
-			...toCssShadow(props()),
-			...toCssRadius(props()),
-			...toCssBackground(props(), brandKit),
-			...toCssCommon(props()),
-			...toCssPadding(props()),
-			...toCssBorder(props(), brandKit)
-		}));
+	const cssCode = Layout_css_default(layerId(), props(), brandKit);
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(rProps, useResponsiveProps(props())), "$rProps", $$stores);
+	});
+	$.legacy_pre_effect(() => $rProps(), () => {
+		$.store_unsub($.set(clickable, useClickable_default($rProps())), "$clickable", $$stores);
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var fragment = $.comment();
+	var fragment = root$18();
 	var node = $.first_child(fragment);
-	$.element(node, () => "div", false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
-			id: props().id,
-			class: $0,
-			style: $.get(style),
-			"data-layer-id": layerId()
-		}, "svelte-1o103hp"), [() => ["layout", ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
-		$.event("click", $$element, handleClick);
+	StylePortal(node, { cssText: cssCode });
+	var node_1 = $.sibling(node, 2);
+	var consequent = ($$anchor$1) => {
 		var fragment_1 = $.comment();
-		var node_1 = $.first_child(fragment_1);
-		$.slot(node_1, $$props, "default", {}, null);
+		var node_2 = $.first_child(fragment_1);
+		$.element(node_2, () => "div", false, ($$element, $$anchor$2) => {
+			let attributes;
+			$.template_effect(($0) => attributes = $.set_attributes($$element, attributes, {
+				...$clickable().attributes,
+				id: $rProps().id,
+				class: $0,
+				"data-layer-id": layerId()
+			}), [() => ["layout", ...$rProps().classNames ?? []].join(" ")], $.derived_safe_equal);
+			$.event("click", $$element, function(...$$args) {
+				$clickable().handleClick?.apply(this, $$args);
+			});
+			var fragment_2 = $.comment();
+			var node_3 = $.first_child(fragment_2);
+			$.slot(node_3, $$props, "default", {}, null);
+			$.append($$anchor$2, fragment_2);
+		});
 		$.append($$anchor$1, fragment_1);
+	};
+	$.if(node_1, ($$render) => {
+		if (!$rProps().hidden) $$render(consequent);
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5629,15 +6132,16 @@ const LAYOUT_JUSTIFY = [
 
 //#endregion
 //#region src/components-flex/slider/Slider.svelte
-var root_1$8 = $.template(`<button><i></i></button>`);
-var root$16 = $.template(`<div><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
-const $$css$24 = {
-	hash: "svelte-wwv1o",
-	code: ".slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}"
+var root_2$6 = $.template(`<button><i></i></button>`);
+var root_1$9 = $.template(`<div></div>`);
+var root$17 = $.template(`<div><div class="slider-container svelte-i5qqzj"><ul class="slider-list svelte-i5qqzj"><!></ul></div> <!></div>`);
+const $$css$21 = {
+	hash: "svelte-i5qqzj",
+	code: ".slider.svelte-i5qqzj {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;margin:0;padding:0;}.slider-container.svelte-i5qqzj {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-i5qqzj {-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$24);
+	$.append_styles($$anchor, $$css$21);
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const baseContainerStyle = $.mutable_state();
@@ -5650,11 +6154,13 @@ function Slider($$anchor, $$props) {
 	useInjectCustomizeCss(props(), layerId());
 	let containerElement = $.mutable_state();
 	let slotElement = $.mutable_state();
-	let currentIndex = $.mutable_state(0);
 	let isDragging = false;
 	let startX = 0;
 	let movedX = $.mutable_state(null);
+	let sliderId = layerId();
+	let currentIndex = $.mutable_state(0);
 	let childCount = $.mutable_state(0);
+	let unsubscribeSliderState = $.mutable_state(null);
 	let transformX = $.mutable_state();
 	let lastFrame = 0;
 	const THROTTLE = 16;
@@ -5668,19 +6174,15 @@ function Slider($$anchor, $$props) {
 		return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
 	};
 	const handleClickIndicator = (index) => {
-		$.set(currentIndex, index);
-	};
-	const setChildCount = () => {
-		const count = $.get(slotElement)?.children?.length ?? 0;
-		if (count !== $.get(childCount)) $.set(childCount, $.get(slotElement)?.children?.length ?? 0);
+		slideTo(sliderId, "number", index + 1, false)();
 	};
 	const toNext = () => {
-		if ($.get(currentIndex) < $.get(childCount) - 1) $.set(currentIndex, $.get(currentIndex) + 1);
-		else if (props().loop) $.set(currentIndex, 0);
+		if ($.get(currentIndex) < $.get(childCount) - 1) slideTo(sliderId, "next", 0, false)();
+		else if (props().loop) slideTo(sliderId, "first", 0, false)();
 	};
 	const toPrev = () => {
-		if ($.get(currentIndex) > 0) $.set(currentIndex, $.get(currentIndex) - 1);
-		else if (props().loop) $.set(currentIndex, $.get(childCount) - 1);
+		if ($.get(currentIndex) > 0) slideTo(sliderId, "prev", 0, false)();
+		else if (props().loop) slideTo(sliderId, "end", 0, false)();
 	};
 	const handleClick = (e) => {
 		const isParentContainer = (el) => {
@@ -5692,9 +6194,20 @@ function Slider($$anchor, $$props) {
 			e.stopPropagation();
 		}
 	};
+	const disableChildrenClick = () => {
+		if ($.get(slotElement)) Array.from($.get(slotElement).children ?? []).forEach((child) => {
+			child.style.pointerEvents = "none";
+		});
+	};
+	const enableChildrenClick = () => {
+		if ($.get(slotElement)) Array.from($.get(slotElement).children ?? []).forEach((child) => {
+			child.style.pointerEvents = void 0;
+		});
+	};
 	const move = (moved) => {
 		$.set(movedX, moved);
 		if ((moved > 10 || moved < -10) && !isDragging) isDragging = true;
+		disableChildrenClick();
 	};
 	const handleTouchmove = (e) => {
 		const now = performance.now();
@@ -5706,9 +6219,15 @@ function Slider($$anchor, $$props) {
 		if ($.get(movedX) >= 32) toNext();
 		else if ($.get(movedX) <= -32) toPrev();
 		$.set(movedX, null);
+		setTimeout(() => {
+			isDragging = false;
+		}, 300);
 		document.removeEventListener("touchmove", handleTouchmove);
 		document.removeEventListener("touchend", handleTouchend);
 		document.removeEventListener("click", handleClick);
+		setTimeout(() => {
+			enableChildrenClick();
+		}, 100);
 	};
 	const handleTouchstart = (e) => {
 		startX = e.touches[0].clientX;
@@ -5725,9 +6244,15 @@ function Slider($$anchor, $$props) {
 		else if ($.get(movedX) <= -32) toPrev();
 		$.set(movedX, null);
 		if (isDragging) e.stopPropagation();
+		setTimeout(() => {
+			isDragging = false;
+		}, 300);
 		document.removeEventListener("mousemove", handleMousemove);
 		document.removeEventListener("mouseup", handleMouseup);
 		document.removeEventListener("click", handleClick);
+		setTimeout(() => {
+			enableChildrenClick();
+		}, 100);
 	};
 	const handleMousedown = (e) => {
 		startX = e.clientX;
@@ -5737,7 +6262,6 @@ function Slider($$anchor, $$props) {
 		document.addEventListener("click", handleClick, { capture: true });
 	};
 	onMount$1(() => {
-		setChildCount();
 		let autoSlideTimer;
 		if (props().auto) autoSlideTimer = setInterval(() => {
 			toNext();
@@ -5746,8 +6270,26 @@ function Slider($$anchor, $$props) {
 			if (autoSlideTimer) clearInterval(autoSlideTimer);
 		};
 	});
-	$.legacy_pre_effect(() => $.get(slotElement), () => {
-		if ($.get(slotElement)) $.set(childCount, $.get(slotElement).children.length);
+	onDestroy$1(() => {
+		if ($.get(unsubscribeSliderState)) $.get(unsubscribeSliderState)();
+	});
+	$.legacy_pre_effect(() => ($.get(slotElement), $.deep_read_state(props()), $.get(unsubscribeSliderState)), () => {
+		if (sliderId) {
+			sliderStates.update((updater) => {
+				updater[sliderId] = {
+					currentIndex: 0,
+					slides: $.get(slotElement)?.children?.length ?? 0,
+					loop: props().loop
+				};
+				return updater;
+			});
+			if ($.get(unsubscribeSliderState)) $.get(unsubscribeSliderState)();
+			$.set(unsubscribeSliderState, sliderStates.subscribe(($states) => {
+				const state$1 = $states[sliderId];
+				$.set(currentIndex, state$1?.currentIndex ?? 0);
+				$.set(childCount, state$1?.slides ?? 0);
+			}));
+		}
 	});
 	$.legacy_pre_effect(() => ($.get(childCount), $.get(currentIndex)), () => {
 		$.set(indicators, [...Array($.get(childCount))].map((_, i) => ({
@@ -5800,7 +6342,7 @@ function Slider($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var div = root$16();
+	var div = root$17();
 	var div_1 = $.child(div);
 	var ul = $.child(div_1);
 	var node = $.child(ul);
@@ -5809,33 +6351,40 @@ function Slider($$anchor, $$props) {
 	$.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
 	$.reset(div_1);
 	$.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$8();
-		var i_1 = $.child(button);
-		$.reset(button);
-		$.template_effect(($0, $1) => {
-			$.set_style(button, $0);
-			$.set_style(i_1, $1);
-		}, [() => objToStyle({
-			padding: "4px",
-			border: 0,
-			background: "none"
-		}), () => objToStyle({
-			...$.get(indicatorItemStyle),
-			background: $.get(indicator).isActive ? "#555555" : "#AAAAAA"
-		})], $.derived_safe_equal);
-		$.event("click", button, () => handleClickIndicator(i));
-		$.append($$anchor$1, button);
-	});
-	$.reset(div_2);
+	var node_1 = $.sibling(div_1, 2);
+	var consequent = ($$anchor$1) => {
+		var div_2 = root_1$9();
+		$.each(div_2, 5, () => $.get(indicators) ?? [], $.index, ($$anchor$2, indicator, i) => {
+			var button = root_2$6();
+			var i_1 = $.child(button);
+			$.reset(button);
+			$.template_effect(($0, $1) => {
+				$.set_style(button, $0);
+				$.set_style(i_1, $1);
+			}, [() => objToStyle({
+				padding: "4px",
+				border: 0,
+				background: "none"
+			}), () => objToStyle({
+				...$.get(indicatorItemStyle),
+				background: $.get(indicator).isActive ? "#555555" : "#AAAAAA"
+			})], $.derived_safe_equal);
+			$.event("click", button, () => handleClickIndicator(i));
+			$.append($$anchor$2, button);
+		});
+		$.reset(div_2);
+		$.template_effect(() => $.set_style(div_2, $.get(indicatorListStyle)));
+		$.append($$anchor$1, div_2);
+	};
+	$.if(node_1, ($$render) => {
+		if (!props().hideIndicator) $$render(consequent);
+	});
 	$.reset(div);
 	$.template_effect(($0, $1) => {
 		$.set_attribute(div, "id", props().id);
-		$.set_class(div, 1, $0, "svelte-wwv1o");
+		$.set_class(div, 1, $0, "svelte-i5qqzj");
 		$.set_attribute(div, "data-layer-id", layerId());
 		$.set_style(ul, $1);
-		$.set_style(div_2, $.get(indicatorListStyle));
 	}, [() => $.clsx(["slider", ...props().classNames ?? []].join(" ")), () => [$.get(containerStyle), overrideStyle()].join(" ")], $.derived_safe_equal);
 	$.event("mousedown", div_1, handleMousedown);
 	$.event("touchstart", div_1, handleTouchstart);
@@ -5845,28 +6394,36 @@ function Slider($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/slider/SliderItem.svelte
-var root$15 = $.template(`<li><!></li>`);
-const $$css$23 = {
-	hash: "svelte-1m93md9",
-	code: ".slider-item.svelte-1m93md9 {overflow:hidden;}.slider-item-inner.svelte-1m93md9 {text-decoration:none;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;text-align:left;color:inherit;-webkit-user-drag:none;user-select:none;}"
+var root$16 = $.template(`<li><!></li>`);
+const $$css$20 = {
+	hash: "svelte-1b4o9dd",
+	code: ".slider-item.svelte-1b4o9dd {display:block;overflow:hidden;}.slider-item-inner.svelte-1b4o9dd {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$23);
+	$.append_styles($$anchor, $$css$20);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const clickable = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
 	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(clickable, useClickable_default(props())), "$clickable", $$stores);
+	});
+	$.legacy_pre_effect_reset();
 	$.init();
-	var li = root$15();
+	var li = root$16();
 	var node = $.child(li);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	$.element(node, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(() => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			class: "slider-item-inner"
-		}, "svelte-1m93md9"));
-		$.event("click", $$element, handleClick);
+		}, "svelte-1b4o9dd"));
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
 		var fragment = $.comment();
 		var node_1 = $.first_child(fragment);
 		$.slot(node_1, $$props, "default", {}, null);
@@ -5876,10 +6433,11 @@ function SliderItem($$anchor, $$props) {
 	$.template_effect(($0) => {
 		$.set_attribute(li, "data-layer-id", layerId());
 		$.set_attribute(li, "id", props().id);
-		$.set_class(li, 1, $0, "svelte-1m93md9");
+		$.set_class(li, 1, $0, "svelte-1b4o9dd");
 	}, [() => $.clsx(["slider-item", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, li);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5923,113 +6481,139 @@ const TEXT_VARIANTS = { size: {
 } };
 
 //#endregion
-//#region src/components-flex/text/Text.svelte
-var root$14 = $.template(`<p><!></p>`);
-const $$css$22 = {
-	hash: "svelte-vifn7y",
-	code: ".text.svelte-vifn7y {margin:0;word-break:break-all;text-decoration:none;}"
-};
-function Text($$anchor, $$props) {
-	$.push($$props, false);
-	$.append_styles($$anchor, $$css$22);
-	const escapedHTML = $.mutable_state();
-	const style = $.mutable_state();
-	let props = $.prop($$props, "props", 24, () => ({ content: "" }));
-	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props(), layerId());
-	const { brandKit } = useBrandKit();
+//#region src/components-flex/text/Text.css.ts
+var Text_css_default = (layerId, props, brandKit) => {
 	const themeStyles = getTextThemeStyles(brandKit);
-	const fontFamilyStyles = props().fontFamilyVariant in FONT_FAMILY_VARIANT ? FONT_FAMILY_VARIANT[props().fontFamilyVariant].getProps(brandKit) : FONT_FAMILY_VARIANT.default.getProps(brandKit);
-	const fontFamily = props().fontFamily ?? fontFamilyStyles.fontFamily;
-	if (fontFamily) addFont(fontFamily);
-	const getColor = () => {
-		if (props().color) return props().color;
-		if (props().theme) return themeStyles[props().theme].color;
-		return void 0;
-	};
-	const getCssSize = () => {
+	const toDynamicStyle$4 = (_props) => {
+		const fontFamily = (() => {
+			if (_props.fontFamily) return _props.fontFamily;
+			return _props.fontFamilyVariant in FONT_FAMILY_VARIANT ? FONT_FAMILY_VARIANT[_props.fontFamilyVariant].getProps(brandKit).fontFamily : FONT_FAMILY_VARIANT.default.getProps(brandKit).fontFamily;
+		})();
+		if (fontFamily) addFont(fontFamily);
+		const color = (() => {
+			if (_props.color) return _props.color;
+			if (_props.theme) return themeStyles[_props.theme].color;
+		})();
 		const fontSize = (() => {
-			if (props().fontSize) return props().fontSize;
-			if (props().size) return TEXT_VARIANTS.size[props().size].fontSize;
-			return "14px";
+			if (_props.fontSize) return _props.fontSize;
+			if (_props.size) return TEXT_VARIANTS.size[_props.size].fontSize;
 		})();
 		const lineHeight = (() => {
-			if (props().lineHeight) return props().lineHeight;
-			if (props().size) return TEXT_VARIANTS.size[props().size].lineHeight;
-			return void 0;
+			if (_props.lineHeight) return _props.lineHeight;
+			if (_props.size) return TEXT_VARIANTS.size[_props.size].lineHeight;
 		})();
 		const fontWeight = (() => {
-			if (props().fontWeight) return props().fontWeight;
-			if (props().size) return TEXT_VARIANTS.size[props().size].fontWeight;
-			return void 0;
+			if (_props.fontWeight) return _props.fontWeight;
+			if (_props.size) return TEXT_VARIANTS.size[_props.size].fontWeight;
 		})();
 		const letterSpacing = (() => {
-			if (props().letterSpacing) if (props().letterSpacing.endsWith("%")) return `${parseInt(fontSize) * (parseInt(props().letterSpacing) / 100)}px`;
-			else return props().letterSpacing;
-			return void 0;
+			if (_props.letterSpacing) if (_props.letterSpacing.endsWith("%")) return `${parseInt(fontSize) * (parseInt(_props.letterSpacing) / 100)}px`;
+			else return _props.letterSpacing;
 		})();
-		return {
+		const lineClampStyles = (() => {
+			if (typeof _props.lineClamp !== "number") return {};
+			return {
+				display: "-webkit-box",
+				WebkitBoxOrient: "vertical",
+				WebkitLineClamp: _props.lineClamp,
+				overflow: "hidden"
+			};
+		})();
+		return createComponentRawCss(layerId, (style) => [style("", {
+			textAlign: _props.align,
+			width: _props.width,
+			fontFamily,
+			color,
 			fontSize,
-			lineHeight,
+			letterSpacing,
 			fontWeight,
-			letterSpacing
-		};
+			lineHeight,
+			...lineClampStyles,
+			...toCssRadius(_props),
+			...toCssBackground(_props),
+			...toCssCommon(_props),
+			...toCssPosition(_props),
+			...toCssPadding(_props),
+			...toCssBorder(_props)
+		})]);
 	};
-	const lineClampStyles = (() => {
-		if (typeof props().lineClamp !== "number") return {};
-		return {
-			display: "-webkit-box",
-			WebkitBoxOrient: "vertical",
-			WebkitLineClamp: props().lineClamp,
-			overflow: "hidden"
-		};
-	})();
-	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
-		$.set(escapedHTML, props().content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />"));
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			textDecoration: "none",
+			margin: "0",
+			wordBreak: "break-all"
+		}),
+		toDynamicStyle$4(props),
+		...props.responsiveSettings?.map((v) => {
+			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$4({
+				...v.props,
+				content: v.props.content ?? props.content
+			}));
+			else if (v.userAgentCondition) return "";
+			return "";
+		}) ?? [],
+		props.customizeCss
+	]);
+};
+
+//#endregion
+//#region src/components-flex/text/Text.svelte
+var root_1$8 = $.template(`<p><!></p>`);
+var root$15 = $.template(`<!> <!>`, 1);
+function Text($$anchor, $$props) {
+	$.push($$props, false);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $responsiveProps = () => $.store_get(responsiveProps, "$responsiveProps", $$stores);
+	const rProps = $.mutable_state();
+	const escapedHTML = $.mutable_state();
+	let props = $.prop($$props, "props", 24, () => ({ content: "" }));
+	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
+	useInjectCustomizeCss(props(), layerId());
+	const { brandKit } = useBrandKit();
+	const cssCode = Text_css_default(layerId(), props(), brandKit);
+	const responsiveProps = useResponsiveProps(props());
+	$.legacy_pre_effect(() => $responsiveProps(), () => {
+		$.set(rProps, $responsiveProps());
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(props()), toCssBorder), () => {
-		$.set(style, objToStyle({
-			position: props()?.position ?? "static",
-			textAlign: props().align,
-			width: props().width,
-			fontFamily,
-			color: getColor(),
-			...lineClampStyles,
-			...getCssSize(),
-			...toCssRadius(props()),
-			...toCssBackground(props()),
-			...toCssCommon(props()),
-			...toCssPosition(props()),
-			...toCssPadding(props()),
-			...toCssBorder(props())
-		}));
+	$.legacy_pre_effect(() => ($.get(rProps), $.deep_read_state(props())), () => {
+		$.set(escapedHTML, ($.get(rProps).content || props().content).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />"));
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var p = root$14();
-	var node = $.child(p);
-	$.html(node, () => $.get(escapedHTML), false, false);
-	$.reset(p);
-	$.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);
+	var fragment = root$15();
+	var node = $.first_child(fragment);
+	StylePortal(node, { cssText: cssCode });
+	var node_1 = $.sibling(node, 2);
+	var consequent = ($$anchor$1) => {
+		var p = root_1$8();
+		var node_2 = $.child(p);
+		$.html(node_2, () => $.get(escapedHTML), false, false);
+		$.reset(p);
+		$.template_effect(($0) => {
+			$.set_class(p, 1, $0);
+			$.set_attribute(p, "id", $.get(rProps).id);
+			$.set_attribute(p, "data-layer-id", layerId());
+		}, [() => $.clsx(["text", ...$.get(rProps).classNames ?? []].join(" "))], $.derived_safe_equal);
+		$.append($$anchor$1, p);
+	};
+	$.if(node_1, ($$render) => {
+		if (!$.get(rProps).hidden) $$render(consequent);
+	});
+	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
 //#region src/components-flex/rich-text/RichText.svelte
-var root$13 = $.template(`<div><!></div>`);
-const $$css$21 = {
+var root$14 = $.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$21);
+	$.append_styles($$anchor, $$css$19);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({ content: "" }));
 	let layerId = $.prop($$props, "layerId", 8, "");
@@ -6042,23 +6626,19 @@ function RichText($$anchor, $$props) {
 	const getColor = () => {
 		if (props().color) return props().color;
 		if (props().theme) return themeStyles[props().theme].color;
-		return void 0;
 	};
 	const getCssSize = () => {
 		const getFontSize = () => {
 			if (props().fontSize) return props().fontSize;
 			if (props().size) return TEXT_VARIANTS.size[props().size].fontSize;
-			return void 0;
 		};
 		const getLineHeight = () => {
 			if (props().lineHeight) return props().lineHeight;
 			if (props().size) return TEXT_VARIANTS.size[props().size].lineHeight;
-			return void 0;
 		};
 		const getFontWeight = () => {
 			if (props().fontWeight) return props().fontWeight;
 			if (props().size) return TEXT_VARIANTS.size[props().size].fontWeight;
-			return void 0;
 		};
 		return {
 			fontSize: getFontSize(),
@@ -6080,7 +6660,7 @@ function RichText($$anchor, $$props) {
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var div = root$13();
+	var div = root$14();
 	var node = $.child(div);
 	$.html(node, () => props().content, false, false);
 	$.reset(div);
@@ -6147,105 +6727,151 @@ const callback = ({ brandKit }) => ({
 const getTextLinkThemeStyles = getPropStyles(callback);
 
 //#endregion
-//#region src/components-flex/text-link/TextLink.svelte
-var root_1$7 = $.template(`<!> <span><!></span>`, 1);
-const $$css$20 = {
-	hash: "svelte-dc9m5n",
-	code: ".link.svelte-dc9m5n {-webkit-appearance:none;border:0;background:none;padding:0;display:inline-flex;}.link.svelte-dc9m5n,\n  .link.svelte-dc9m5n:visited,\n  .link.svelte-dc9m5n:link {color:var(--color);}.link.svelte-dc9m5n:hover {color:var(--hover-color);}.link.svelte-dc9m5n:active {color:var(--active-color);}.link.underline-hover-on.svelte-dc9m5n {text-decoration:none;}.link.underline-hover-on.svelte-dc9m5n:hover {text-decoration:underline;}.link.underline-hover-off.svelte-dc9m5n {text-decoration:underline;}.link.underline-hover-off.svelte-dc9m5n:hover {text-decoration:none;}.link.underline-on.svelte-dc9m5n {text-decoration:underline;}.link.underline-off.svelte-dc9m5n {text-decoration:none;}"
+//#region src/components-flex/text-link/TextLink.css.ts
+var TextLink_css_default = (layerId, props, brandKit) => {
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			textDecoration: "none",
+			margin: "0",
+			wordBreak: "break-all",
+			appearance: "none",
+			border: "0",
+			background: "none",
+			padding: "0",
+			display: "inline-flex",
+			gap: "0.5em",
+			alignItems: "center",
+			cursor: "pointer"
+		}),
+		style("&[aria-disabled=\"true\"]", {
+			opacity: "0.24",
+			cursor: "not-allowed"
+		}),
+		style("&[aria-disabled=\"true\"]:hover", { opacity: "0.24" }),
+		style("&[aria-hidden=\"true\"]", { display: "none" }),
+		toDynamicStyle(layerId, props, brandKit),
+		...props.responsiveSettings?.map((v) => {
+			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle(layerId, {
+				...v.props,
+				label: v.props.label ?? props.label
+			}, brandKit));
+			else if (v.userAgentCondition) return "";
+			return "";
+		}) ?? [],
+		props.customizeCss
+	]);
+};
+const toDynamicStyle = (layerId, props, brandKit) => {
+	const themeStyle = getTextLinkThemeStyles(brandKit)[props.theme ?? "link"];
+	const sizeStyle = TEXT_LINK_SIZE_STYLES[props.size ?? "medium"];
+	const fontFamilyStyles = props.fontFamilyVariant in FONT_FAMILY_VARIANT ? FONT_FAMILY_VARIANT[props.fontFamilyVariant].getProps(brandKit) : FONT_FAMILY_VARIANT.default.getProps(brandKit);
+	const fontFamily = props.fontFamily ?? fontFamilyStyles.fontFamily;
+	const color = props.color ?? themeStyle.color;
+	if (fontFamily) addFont(fontFamily);
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			fontFamily: `"${fontFamily}"`,
+			fontSize: props.fontSize ?? sizeStyle.fontSize,
+			fontWeight: props.fontWeight ?? "bold",
+			flexDirection: props.iconAngle,
+			color,
+			...toCssCommon(props),
+			...toCssPosition(props)
+		}),
+		style("&:visited", { color }),
+		style("&:link", { color }),
+		style("&:hover", { color: darkenColor(props.color ?? themeStyle.color, .12) }),
+		style("&:active", { color: darkenColor(props.color ?? themeStyle.color, .2) }),
+		...(() => {
+			switch (props.underline) {
+				case "on": return [style("", { textDecoration: "underline" })];
+				case "off": return [style("", { textDecoration: "none" })];
+				case "hover_off": return [style("", { textDecoration: "underline" }), style("&:hover", { textDecoration: "none" })];
+				case "hover_on":
+				default: return [style("", { textDecoration: "none" }), style("&:hover", { textDecoration: "underline" })];
+			}
+		})()
+	]);
 };
+
+//#endregion
+//#region src/components-flex/text-link/TextLink.svelte
+var root_2$5 = $.template(`<!> <span><!></span>`, 1);
+var root$13 = $.template(`<!> <!>`, 1);
 function TextLink($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$20);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $rProps = () => $.store_get($.get(rProps), "$rProps", $$stores);
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const rProps = $.mutable_state();
+	const clickable = $.mutable_state();
 	const escapedHTML = $.mutable_state();
-	const variables$1 = $.mutable_state();
-	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({ label: "" }));
 	let layerId = $.prop($$props, "layerId", 8, "");
-	useInjectCustomizeCss(props(), layerId());
 	const { brandKit } = useBrandKit();
-	const { attributes, element, handleClick } = useClickable_default({
-		...props(),
-		element: "span"
-	});
-	const themeStyles = getTextLinkThemeStyles(brandKit);
-	const themeStyle = themeStyles[props().theme ?? "link"];
-	const sizeStyle = TEXT_LINK_SIZE_STYLES[props().size ?? "medium"];
-	const fontFamilyStyles = props().fontFamilyVariant in FONT_FAMILY_VARIANT ? FONT_FAMILY_VARIANT[props().fontFamilyVariant].getProps(brandKit) : FONT_FAMILY_VARIANT.default.getProps(brandKit);
-	const fontFamily = props().fontFamily ?? fontFamilyStyles.fontFamily;
-	if (fontFamily) addFont(fontFamily);
-	const underlineClass = (() => {
-		switch (props().underline) {
-			case "hover_off": return "underline-hover-off";
-			case "hover_on": return "underline-hover-on";
-			case "on": return "underline-on";
-			case "off": return "underline-off";
-			default: return "underline-hover-on";
-		}
-	})();
+	const cssCode = TextLink_css_default(layerId(), props(), brandKit);
 	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
-		$.set(escapedHTML, props().label.replace(/&/g, "&lt;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />"));
+		$.store_unsub($.set(rProps, useResponsiveProps(props())), "$rProps", $$stores);
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(props()), darkenColor), () => {
-		$.set(variables$1, {
-			"--color": props().color ?? themeStyle.color,
-			"--hover-color": darkenColor(props().color ?? themeStyle.color, .12),
-			"--active-color": darkenColor(props().color ?? themeStyle.color, .2)
-		});
+	$.legacy_pre_effect(() => $rProps(), () => {
+		$.store_unsub($.set(clickable, useClickable_default({
+			...$rProps(),
+			element: "span"
+		})), "$clickable", $$stores);
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(props()), $.get(variables$1)), () => {
-		$.set(style, objToStyle({
-			display: "inline-flex",
-			gap: "0.5em",
-			alignItems: "center",
-			wordBreak: "break-all",
-			fontFamily: `"${fontFamily}"`,
-			fontSize: props().fontSize ?? sizeStyle.fontSize,
-			fontWeight: props().fontWeight ?? "bold",
-			flexDirection: props().iconAngle,
-			cursor: "pointer",
-			...toCssCommon(props()),
-			...toCssPosition(props()),
-			...$.get(variables$1)
-		}));
+	$.legacy_pre_effect(() => $rProps(), () => {
+		$.set(escapedHTML, $rProps().label.replace(/&/g, "&lt;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />"));
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
-	var fragment = $.comment();
+	var fragment = root$13();
 	var node = $.first_child(fragment);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(($0) => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
-			id: props().id,
-			class: $0,
-			style: $.get(style),
-			"data-layer-id": layerId()
-		}, "svelte-dc9m5n"), [() => [`link ${underlineClass}`, ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
-		$.event("click", $$element, handleClick);
-		var fragment_1 = root_1$7();
-		var node_1 = $.first_child(fragment_1);
-		var consequent = ($$anchor$2) => {
-			const expression = $.derived_safe_equal(() => ({
-				variant: props().iconVariant,
-				color: props().iconColor ?? props().color,
-				width: "1em",
-				height: "1em"
-			}));
-			Icon($$anchor$2, { get props() {
-				return $.get(expression);
-			} });
-		};
-		$.if(node_1, ($$render) => {
-			if (props().isIcon && props().iconVariant) $$render(consequent);
+	StylePortal(node, { cssText: cssCode });
+	var node_1 = $.sibling(node, 2);
+	var consequent_1 = ($$anchor$1) => {
+		var fragment_1 = $.comment();
+		var node_2 = $.first_child(fragment_1);
+		$.element(node_2, () => $clickable().element, false, ($$element, $$anchor$2) => {
+			let attributes;
+			$.template_effect(($0) => attributes = $.set_attributes($$element, attributes, {
+				...$clickable().attributes,
+				id: props().id,
+				class: $0,
+				"data-layer-id": layerId()
+			}), [() => [`link`, ...props().classNames ?? []].join(" ")], $.derived_safe_equal);
+			$.event("click", $$element, function(...$$args) {
+				$clickable().handleClick?.apply(this, $$args);
+			});
+			var fragment_2 = root_2$5();
+			var node_3 = $.first_child(fragment_2);
+			var consequent = ($$anchor$3) => {
+				const expression = $.derived_safe_equal(() => ({
+					variant: props().iconVariant,
+					color: props().iconColor ?? props().color,
+					width: "1em",
+					height: "1em"
+				}));
+				Icon($$anchor$3, { get props() {
+					return $.get(expression);
+				} });
+			};
+			$.if(node_3, ($$render) => {
+				if (props().isIcon && props().iconVariant) $$render(consequent);
+			});
+			var span = $.sibling(node_3, 2);
+			var node_4 = $.child(span);
+			$.html(node_4, () => $.get(escapedHTML), false, false);
+			$.reset(span);
+			$.append($$anchor$2, fragment_2);
 		});
-		var span = $.sibling(node_1, 2);
-		var node_2 = $.child(span);
-		$.html(node_2, () => $.get(escapedHTML), false, false);
-		$.reset(span);
 		$.append($$anchor$1, fragment_1);
+	};
+	$.if(node_1, ($$render) => {
+		if (!$rProps().hidden) $$render(consequent_1);
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -6272,14 +6898,14 @@ const TEXT_LINK_UNDERLINE = {
 
 //#endregion
 //#region src/components-flex/background-overlay/BackgroundOverlay.svelte
-var root_1$6 = $.template(`<div></div>`);
-const $$css$19 = {
+var root_1$7 = $.template(`<div></div>`);
+const $$css$18 = {
 	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$19);
+	$.append_styles($$anchor, $$css$18);
 	let backgroundOverlay = $.prop($$props, "backgroundOverlay", 8, false);
 	let className = $.prop($$props, "class", 8, void 0);
 	const dispatch = createEventDispatcher();
@@ -6287,7 +6913,7 @@ function BackgroundOverlay($$anchor, $$props) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor$1) => {
-		var div = root_1$6();
+		var div = root_1$7();
 		$.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);
@@ -6304,13 +6930,13 @@ function BackgroundOverlay($$anchor, $$props) {
 var root_2$4 = $.template(`<!> <!>`, 1);
 var root_4 = $.template(`<div role="dialog" aria-modal="true"><!></div>`);
 var root$12 = $.template(`<!> <!>`, 1);
-const $$css$18 = {
+const $$css$17 = {
 	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$18);
+	$.append_styles($$anchor, $$css$17);
 	const close$1 = $.mutable_state();
 	const backgroundClick = $.mutable_state();
 	const backgroundClickPC = $.mutable_state();
@@ -6419,7 +7045,7 @@ function Modal($$anchor, $$props) {
 			...getTransform(position$1)
 		});
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.deep_read_state(breakPoint()), $.deep_read_state(props()), toCssBorder), () => {
+	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.deep_read_state(breakPoint()), $.deep_read_state(props())), () => {
 		let margin = DefaultModalPlacement.margin;
 		if (!isCanvasPreview() && placement() && placement().margin !== null) margin = placement().margin;
 		let marginStyle = getMarginStyle(margin);
@@ -6436,15 +7062,7 @@ function Modal($$anchor, $$props) {
 			}));
 			modalStyles.add(marginVariables);
 		});
-		const propsStyle = objToStyle({
-			width: props().width,
-			...toCssPadding(props()),
-			...toCssOverflow(props()),
-			...toCssShadow(props()),
-			...toCssRadius(props()),
-			...toCssBackground(props()),
-			...toCssBorder(props())
-		});
+		const propsStyle = objToStyle({ width: props().width });
 		modalStyles.add(propsStyle);
 	});
 	$.legacy_pre_effect(() => {}, () => {
@@ -6535,14 +7153,14 @@ function Modal($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/code/Code.svelte
-var root$11 = $.template(`<div><!></div>`);
-const $$css$17 = {
+var root$11 = $.template(`<!> <div><!></div>`, 1);
+const $$css$16 = {
 	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$17);
+	$.append_styles($$anchor, $$css$16);
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
 	function unescapeBraces(str) {
@@ -6558,33 +7176,33 @@ function Code($$anchor, $$props) {
 			document.body.removeChild(script);
 		};
 	}
-	function injectCss() {
-		const style = document.createElement("style");
-		style.textContent = props().rawCss;
-		document.head.appendChild(style);
-		return () => {
-			document.head.removeChild(style);
-		};
-	}
 	onMount$1(() => {
 		const removeScript = injectJavaScript();
-		const removeCss = injectCss();
 		return () => {
 			removeScript();
-			removeCss();
 		};
 	});
 	$.init();
-	var div = root$11();
-	var node = $.child(div);
-	$.html(node, () => props().rawHtml, false, false);
+	var fragment = root$11();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor$1) => {
+		StylePortal($$anchor$1, { get cssText() {
+			return props().rawCss;
+		} });
+	};
+	$.if(node, ($$render) => {
+		if (props().rawCss) $$render(consequent);
+	});
+	var div = $.sibling(node, 2);
+	var node_1 = $.child(div);
+	$.html(node_1, () => props().rawHtml, false, false);
 	$.reset(div);
 	$.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);
+	$.append($$anchor, fragment);
 	$.pop();
 }
 
@@ -6595,13 +7213,16 @@ const LIST_ITEM_CONTEXT_KEY = "ListItemContext";
 //#endregion
 //#region src/components-flex/list/ListItem.svelte
 var root$10 = $.template(`<li><!></li>`);
-const $$css$16 = {
+const $$css$15 = {
 	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$16);
+	$.append_styles($$anchor, $$css$15);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const clickable = $.mutable_state();
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	const innerStyle = $.mutable_state();
@@ -6609,8 +7230,10 @@ function ListItem($$anchor, $$props) {
 	let props = $.prop($$props, "props", 8);
 	$.prop($$props, "item", 8);
 	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
 	const context = getContext(LIST_ITEM_CONTEXT_KEY) || {};
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(clickable, useClickable_default(props())), "$clickable", $$stores);
+	});
 	$.legacy_pre_effect(() => {}, () => {
 		$.set(variables$1, { ...context.borderTopWidth ? {
 			"--list-item-border-width": context.borderTopWidth ?? "0",
@@ -6634,14 +7257,16 @@ function ListItem($$anchor, $$props) {
 	$.init();
 	var li = root$10();
 	var node = $.child(li);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	$.element(node, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(() => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			class: "list-item-inner",
 			style: $.get(innerStyle)
 		}, "svelte-b4b4gh"));
-		$.event("click", $$element, handleClick);
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
 		var fragment = $.comment();
 		var node_1 = $.first_child(fragment);
 		$.slot(node_1, $$props, "default", {}, null);
@@ -6656,18 +7281,19 @@ function ListItem($$anchor, $$props) {
 	}, [() => $.clsx(["list-item", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, li);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
 //#region src/components-flex/list/List.svelte
 var root$9 = $.template(`<ul><!></ul>`);
-const $$css$15 = {
+const $$css$14 = {
 	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$15);
+	$.append_styles($$anchor, $$css$14);
 	const variables$1 = $.mutable_state();
 	const actionTableData = $.mutable_state();
 	const items = $.mutable_state();
@@ -6734,8 +7360,7 @@ function splitNumberAndUnit(value) {
 		number: void 0,
 		unit: ""
 	};
-	const regex = /^(-?\d*\.?\d+)([a-zA-Z%]*)$/;
-	const match = (typeof value !== "string" ? String(value) : value).match(regex);
+	const match = (typeof value !== "string" ? String(value) : value).match(/^(-?\d*\.?\d+)([a-zA-Z%]*)$/);
 	if (match) return {
 		number: parseFloat(match[1]),
 		unit: match[2] || ""
@@ -6749,13 +7374,13 @@ function splitNumberAndUnit(value) {
 //#endregion
 //#region src/components-flex/multi-column/MultiColumn.svelte
 var root$8 = $.template(`<ul><!></ul>`);
-const $$css$14 = {
+const $$css$13 = {
 	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$14);
+	$.append_styles($$anchor, $$css$13);
 	const style = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
@@ -6808,20 +7433,25 @@ function MultiColumn($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/multi-column/MultiColumnItem.svelte
 var root$7 = $.template(`<li><!></li>`);
-const $$css$13 = {
+const $$css$12 = {
 	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$13);
+	$.append_styles($$anchor, $$css$12);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $clickable = () => $.store_get($.get(clickable), "$clickable", $$stores);
+	const clickable = $.mutable_state();
 	const variables$1 = $.mutable_state();
 	const style = $.mutable_state();
 	let layerId = $.prop($$props, "layerId", 8);
 	let props = $.prop($$props, "props", 8);
 	useInjectCustomizeCss(props(), layerId());
-	const { attributes, element, handleClick } = useClickable_default(props());
 	const context = getContext(MULTI_COLUMN_ITEM_CONTEXT_KEY) || {};
+	$.legacy_pre_effect(() => $.deep_read_state(props()), () => {
+		$.store_unsub($.set(clickable, useClickable_default(props())), "$clickable", $$stores);
+	});
 	$.legacy_pre_effect(() => {}, () => {
 		$.set(variables$1, {
 			"--multi-column-item-padding-top": context.paddingTop ?? "0",
@@ -6844,13 +7474,15 @@ function MultiColumnItem($$anchor, $$props) {
 	$.init();
 	var li = root$7();
 	var node = $.child(li);
-	$.element(node, () => element, false, ($$element, $$anchor$1) => {
-		let attributes_1;
-		$.template_effect(() => attributes_1 = $.set_attributes($$element, attributes_1, {
-			...attributes,
+	$.element(node, () => $clickable().element, false, ($$element, $$anchor$1) => {
+		let attributes;
+		$.template_effect(() => attributes = $.set_attributes($$element, attributes, {
+			...$clickable().attributes,
 			class: "multi-column-item-inner"
 		}, "svelte-18bwzrs"));
-		$.event("click", $$element, handleClick);
+		$.event("click", $$element, function(...$$args) {
+			$clickable().handleClick?.apply(this, $$args);
+		});
 		var fragment = $.comment();
 		var node_1 = $.first_child(fragment);
 		$.slot(node_1, $$props, "default", {}, null);
@@ -6865,18 +7497,19 @@ function MultiColumnItem($$anchor, $$props) {
 	}, [() => $.clsx(["multi-column-item", ...props().classNames ?? []].join(" "))], $.derived_safe_equal);
 	$.append($$anchor, li);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
 //#region src/components-flex/youtube/Youtube.svelte
 var root$6 = $.template(`<div><div class="youtube-player"></div></div>`);
-const $$css$12 = {
+const $$css$11 = {
 	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$12);
+	$.append_styles($$anchor, $$css$11);
 	const style = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 8, "");
@@ -6973,13 +7606,13 @@ function Youtube($$anchor, $$props) {
 //#endregion
 //#region src/components-flex/count-down/CountDown.svelte
 var root$5 = $.template(`<div><!></div>`);
-const $$css$11 = {
+const $$css$10 = {
 	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$11);
+	$.append_styles($$anchor, $$css$10);
 	const day = $.mutable_state();
 	const hour = $.mutable_state();
 	const min = $.mutable_state();
@@ -7073,23 +7706,19 @@ const useText = (props, layerId) => {
 	const getColor = () => {
 		if (props.color) return props.color;
 		if (props.theme) return themeStyles[props.theme].color;
-		return void 0;
 	};
 	const getCssSize = () => {
 		const getFontSize = () => {
 			if (props.fontSize) return props.fontSize;
 			if (props.size) return TEXT_VARIANTS.size[props.size].fontSize;
-			return void 0;
 		};
 		const getLineHeight = () => {
 			if (props.lineHeight) return props.lineHeight;
 			if (props.size) return TEXT_VARIANTS.size[props.size].lineHeight;
-			return void 0;
 		};
 		const getFontWeight = () => {
 			if (props.fontWeight) return props.fontWeight;
 			if (props.size) return TEXT_VARIANTS.size[props.size].fontWeight;
-			return void 0;
 		};
 		return {
 			fontSize: getFontSize(),
@@ -7160,49 +7789,126 @@ function CountDownValue($$anchor, $$props) {
 }
 
 //#endregion
-//#region src/components-flex/clip-copy/ClipCopy.svelte
-var root$3 = $.template(`<div><button class="clipboard-button svelte-orhp4c"><!></button> <span class="clipboard-tooltip svelte-orhp4c">コピーしました</span></div>`);
-const $$css$10 = {
-	hash: "svelte-orhp4c",
-	code: ".clipboard.svelte-orhp4c {position:relative;display:inline-flex;}.clipboard-button.svelte-orhp4c {position:relative;display:inline-flex;align-items:center;white-space:nowrap;gap:12px;background:none;border:0;transition:0.12s;cursor:pointer;}.clipboard-button.svelte-orhp4c:hover {opacity:0.8;}.clipboard-button.svelte-orhp4c:active {opacity:0.6;}.clipboard-tooltip.svelte-orhp4c {position:absolute;top:-8px;left:50%;display:block;transform:translate(-50%, -100%);padding:4px 10px;background-color:#333333;color:#ffffff;font-size:11px;font-weight:bold;border-radius:4px;transition:transform 0.2s ease-out;white-space:nowrap;pointer-events:none;}.clipboard-tooltip.svelte-orhp4c:after {content:'';display:block;position:absolute;bottom:0;left:50%;width:8px;height:8px;background-color:#333333;border-radius:1px;transform:translate(-50%, 40%) rotate(45deg);}.clipboard-tooltip[aria-hidden='true'].svelte-orhp4c {opacity:0;transform:translate(-50%, -80%);}"
+//#region src/components-flex/clip-copy/ClipCopy.css.ts
+var ClipCopy_css_default = (layerId, _props) => {
+	return createComponentRawCss(layerId, (style) => [
+		style("", {
+			position: "relative",
+			display: "inline-flex"
+		}),
+		style(".clipboard-button", {
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			whiteSpace: "nowrap",
+			gap: "12px",
+			background: "none",
+			border: "0",
+			transition: "0.12s",
+			cursor: "pointer"
+		}),
+		style(".clipboard-button:hover", { opacity: "0.8" }),
+		style(".clipboard-button:active", { opacity: "0.6" }),
+		style(".clipboard-tooltip", {
+			position: "absolute",
+			top: "-8px",
+			left: "50%",
+			display: "block",
+			transform: "translate(-50%, -100%)",
+			padding: "4px 10px",
+			backgroundColor: "#333333",
+			color: "#ffffff",
+			fontSize: "11px",
+			fontWeight: "bold",
+			borderRadius: "4px",
+			transition: "transform 0.2s ease-out",
+			whiteSpace: "nowrap",
+			pointerEvents: "none"
+		}),
+		style(".clipboard-tooltip:after", {
+			content: "",
+			display: "block",
+			position: "absolute",
+			bottom: "0",
+			left: "50%",
+			width: "8px",
+			height: "8px",
+			backgroundColor: "#333333",
+			borderRadius: "1px",
+			transform: "translate(-50%, 40%) rotate(45deg)"
+		}),
+		style(".clipboard-tooltip[aria-hidden=\"true\"]", {
+			opacity: "0",
+			transform: "translate(-50%, -80%)"
+		})
+	]);
 };
+
+//#endregion
+//#region src/components-flex/clip-copy/ClipCopy.svelte
+var root_1$6 = $.template(`<div><button class="clipboard-button"><!></button> <span class="clipboard-tooltip">コピーしました</span></div>`);
+var root$3 = $.template(`<!> <!>`, 1);
 function ClipCopy($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$10);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const $responsiveProps = () => $.store_get(responsiveProps, "$responsiveProps", $$stores);
+	const rProps = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
-	let layerId = $.prop($$props, "layerId", 8, "");
+	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
 	useInjectCustomizeCss(props(), layerId());
 	let buttonElement = $.mutable_state();
 	let showTooltip = $.mutable_state(false);
-	const handleClick = (e) => {
+	const cssCode = ClipCopy_css_default(layerId(), props());
+	const responsiveProps = useResponsiveProps(props());
+	const handleClick = async (e) => {
 		e.preventDefault();
-		const targetText = props().content ?? $.get(buttonElement)?.innerText ?? "";
-		navigator.clipboard.writeText(targetText);
-		send_event("_click_copy", { text: targetText });
-		if (props().copiedEventName) send_event(props().copiedEventName, { text: targetText });
-		$.set(showTooltip, true);
-		setTimeout(() => {
-			$.set(showTooltip, false);
-		}, 3e3);
+		const targetText = $.get(rProps).content ?? $.get(buttonElement)?.innerText ?? "";
+		try {
+			if (await copyToClipboard(targetText)) {
+				send_event("_click_copy", { text: targetText });
+				if ($.get(rProps).copiedEventName) send_event($.get(rProps).copiedEventName, { text: targetText });
+				$.set(showTooltip, true);
+				setTimeout(() => {
+					$.set(showTooltip, false);
+				}, 3e3);
+			}
+		} catch (e$1) {
+			console.warn(e$1);
+		}
 	};
+	$.legacy_pre_effect(() => $responsiveProps(), () => {
+		$.set(rProps, $responsiveProps());
+	});
+	$.legacy_pre_effect_reset();
 	$.init();
-	var div = root$3();
-	var button = $.child(div);
-	var node = $.child(button);
-	$.slot(node, $$props, "default", {}, null);
-	$.reset(button);
-	$.bind_this(button, ($$value) => $.set(buttonElement, $$value), () => $.get(buttonElement));
-	var span = $.sibling(button, 2);
-	$.reset(div);
-	$.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);
+	var fragment = root$3();
+	var node = $.first_child(fragment);
+	StylePortal(node, { cssText: cssCode });
+	var node_1 = $.sibling(node, 2);
+	var consequent = ($$anchor$1) => {
+		var div = root_1$6();
+		var button = $.child(div);
+		var node_2 = $.child(button);
+		$.slot(node_2, $$props, "default", {}, null);
+		$.reset(button);
+		$.bind_this(button, ($$value) => $.set(buttonElement, $$value), () => $.get(buttonElement));
+		var span = $.sibling(button, 2);
+		$.reset(div);
+		$.template_effect(($0) => {
+			$.set_attribute(div, "id", $.get(rProps).id);
+			$.set_class(div, 1, $0);
+			$.set_attribute(div, "data-layer-id", layerId());
+			$.set_attribute(span, "aria-hidden", !$.get(showTooltip));
+		}, [() => $.clsx(["clipboard", ...$.get(rProps).classNames ?? []].join(" "))], $.derived_safe_equal);
+		$.event("click", button, handleClick);
+		$.append($$anchor$1, div);
+	};
+	$.if(node_1, ($$render) => {
+		if (!$.get(rProps).hidden) $$render(consequent);
+	});
+	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -7378,7 +8084,7 @@ function FormField($$anchor, $$props) {
 		$.append($$anchor$1, dt);
 	};
 	$.if(node, ($$render) => {
-		if (props().label) $$render(consequent_1);
+		if (props().label && props().showLabel) $$render(consequent_1);
 	});
 	var dd = $.sibling(node, 2);
 	var node_2 = $.child(dd);
@@ -8474,4 +9180,4 @@ const flexComponentSchemes = {
 };
 
 //#endregion
-export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_IDENTIFY_FIELD_TYPE, FORM_INPUT_TYPE, FORM_VALIDATION_DEFAULT_ERROR_MESSAGES, FORM_VALIDATION_REGEX, FORM_VALIDATION_TYPE, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormBoolean as FlexFormBoolean, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormIdentifyField as FlexFormIdentifyField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedIdentifyValues, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, validateFormField, variables, widget_exports as widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_IDENTIFY_FIELD_TYPE, FORM_INPUT_TYPE, FORM_VALIDATION_DEFAULT_ERROR_MESSAGES, FORM_VALIDATION_REGEX, FORM_VALIDATION_TYPE, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormBoolean as FlexFormBoolean, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormIdentifyField as FlexFormIdentifyField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, USER_AGENT_VARIANT, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedIdentifyValues, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, useResponsiveProps, validateFormField, variables, widget_exports as widget };