@plaidev/karte-action-sdk 1.1.270-29291355.57078a51c → 1.1.270-29364900.6ab45349e

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

@@ -1,17 +1,19 @@
 import "svelte/internal/disclose-version";
 import "svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
-import { get, writable } from "svelte/store";
+import { get, readable, writable } from "svelte/store";
 import { afterUpdate, beforeUpdate, createEventDispatcher, getContext, mount, onDestroy, onMount, setContext, tick, unmount } from "svelte";
 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
@@ -1300,13 +1386,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) => {
@@ -1320,6 +1420,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
 *
@@ -1560,8 +1673,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);
@@ -1685,10 +1797,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 });
 	}
 };
@@ -1799,8 +1910,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);
@@ -1832,9 +1942,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 = {
@@ -1876,8 +1987,7 @@ function createModal(App, options = {
 		sendErrorIfMessageOpenEventNotSent();
 		options.send("_message_state_changed", {
 			trigger,
-			oldState: getState(),
-			newState: ""
+			...toStateChangedData("", getState())
 		});
 		setOpened(false);
 		setClosed(true);
@@ -1909,8 +2019,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() });
@@ -1919,15 +2028,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,
@@ -1935,8 +2042,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);
 					});
 				},
@@ -2034,8 +2140,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;
 }
 /**
@@ -2096,8 +2201,7 @@ function createApp(App, options = {
 			}
 		}
 	};
-	const win = ensureActionRoot(isOnSite());
-	appArgs.target = win;
+	appArgs.target = ensureActionRoot(isOnSite());
 	return {
 		close: close$1,
 		show: () => {
@@ -2116,8 +2220,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: () => {}
 	};
@@ -2138,7 +2242,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
@@ -2290,8 +2394,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();
@@ -2442,8 +2545,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,
@@ -2458,8 +2560,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);
@@ -2533,8 +2634,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);
 }
 /**
@@ -2576,8 +2676,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,
@@ -2637,8 +2736,7 @@ function setVal(name, value) {
 * @public
 */
 function getVal(name) {
-	const cv = getVariables();
-	return cv[name];
+	return getVariables()[name];
 }
 /**
 * 変数が変更されたときに実行されるコールバック関数を設定する
@@ -2703,8 +2801,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);
 }
 /**
@@ -2776,8 +2873,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;
 	}
@@ -2894,15 +2990,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
@@ -3146,8 +3240,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);
@@ -3200,7 +3293,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();
@@ -3219,7 +3312,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);
 		};
@@ -3276,19 +3369,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(() => {
+		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();
 }
@@ -3297,19 +3465,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();
@@ -3343,353 +3512,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) => () => {
@@ -3715,6 +3675,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,
@@ -3745,6 +3741,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) {
@@ -3803,7 +3800,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) {
@@ -3825,79 +3822,324 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 }
 
 //#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/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/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(() => {
-		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
@@ -3926,89 +4168,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 = {
@@ -4059,10 +4343,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()));
@@ -4071,10 +4355,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()));
@@ -4083,10 +4367,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()));
@@ -4095,10 +4379,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()));
@@ -4107,10 +4391,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()));
@@ -4119,10 +4403,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()));
@@ -4131,10 +4415,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()));
@@ -4143,10 +4427,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()));
@@ -4155,10 +4439,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()));
@@ -4167,10 +4451,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()));
@@ -4179,10 +4463,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()));
@@ -4191,10 +4475,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()));
@@ -4203,10 +4487,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()));
@@ -4215,10 +4499,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()));
@@ -4227,10 +4511,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()));
@@ -4239,10 +4523,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()));
@@ -4251,10 +4535,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()));
@@ -4263,10 +4547,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()));
@@ -4275,10 +4559,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()));
@@ -4287,10 +4571,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()));
@@ -4299,10 +4583,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()));
@@ -4311,10 +4595,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()));
@@ -4323,10 +4607,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()));
@@ -4335,10 +4619,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()));
@@ -4347,10 +4631,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()));
@@ -4359,10 +4643,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()));
@@ -4371,10 +4655,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()));
@@ -4383,10 +4667,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()));
@@ -4395,10 +4679,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()));
@@ -4407,10 +4691,10 @@ 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()));
@@ -4419,10 +4703,34 @@ 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>`);
+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$17();
+	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()));
+	$.append($$anchor, svg);
+}
+
+//#endregion
+//#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$21();
 	var path = $.child(svg);
 	$.reset(svg);
 	$.template_effect(() => $.set_attribute(path, "fill", color()));
@@ -4472,7 +4780,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,
@@ -4496,54 +4806,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);
 			} });
@@ -4552,6 +4897,7 @@ function Icon($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -4722,126 +5068,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
@@ -4855,6 +5249,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 = {
@@ -4937,27 +5345,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(() => {
+		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,
@@ -4987,19 +5427,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,
@@ -5024,6 +5466,7 @@ function ButtonOutlined($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5086,25 +5529,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 });
 	});
@@ -5128,19 +5575,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,
@@ -5165,6 +5614,7 @@ function ButtonText($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5201,15 +5651,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();
@@ -5223,14 +5676,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: {
@@ -5260,6 +5705,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 !== "");
 	});
@@ -5311,24 +5766,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)));
@@ -5342,6 +5799,7 @@ function CloseButton($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5420,29 +5878,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"],
@@ -5460,27 +5923,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);
@@ -5490,6 +5955,7 @@ function Image($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment);
 	$.pop();
+	$$cleanup();
 }
 
 //#endregion
@@ -5513,61 +5979,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
@@ -5598,15 +6101,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 = {
+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-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <!></div>`);
+const $$css$21 = {
 	hash: "svelte-wwv1o",
 	code: ".slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}"
 };
 function Slider($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$24);
+	$.append_styles($$anchor, $$css$21);
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const baseContainerStyle = $.mutable_state();
@@ -5619,11 +6123,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;
@@ -5637,19 +6143,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) => {
@@ -5661,9 +6163,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();
@@ -5675,9 +6188,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;
@@ -5694,9 +6213,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;
@@ -5706,7 +6231,6 @@ function Slider($$anchor, $$props) {
 		document.addEventListener("click", handleClick, { capture: true });
 	};
 	onMount(() => {
-		setChildCount();
 		let autoSlideTimer;
 		if (props().auto) autoSlideTimer = setInterval(() => {
 			toNext();
@@ -5715,8 +6239,26 @@ function Slider($$anchor, $$props) {
 			if (autoSlideTimer) clearInterval(autoSlideTimer);
 		};
 	});
-	$.legacy_pre_effect(() => $.get(slotElement), () => {
-		if ($.get(slotElement)) $.set(childCount, $.get(slotElement).children.length);
+	onDestroy(() => {
+		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) => ({
@@ -5769,7 +6311,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);
@@ -5778,33 +6320,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_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);
@@ -5814,28 +6363,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);
@@ -5845,10 +6402,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
@@ -5881,124 +6439,150 @@ const TEXT_VARIANTS = { size: {
 	},
 	heading_medium: {
 		fontSize: "18px",
-		lineHeight: 1.5,
-		fontWeight: "bold"
-	},
-	heading_large: {
-		fontSize: "20px",
-		lineHeight: 1.5,
-		fontWeight: "bold"
-	}
-} };
-
-//#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();
+		lineHeight: 1.5,
+		fontWeight: "bold"
+	},
+	heading_large: {
+		fontSize: "20px",
+		lineHeight: 1.5,
+		fontWeight: "bold"
+	}
+} };
+
+//#endregion
+//#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, "");
@@ -6011,23 +6595,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(),
@@ -6049,7 +6629,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);
@@ -6116,105 +6696,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
@@ -6241,14 +6867,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();
@@ -6256,7 +6882,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);
@@ -6273,13 +6899,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();
@@ -6388,7 +7014,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);
@@ -6405,15 +7031,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(() => {}, () => {
@@ -6504,14 +7122,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) {
@@ -6527,33 +7145,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(() => {
 		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();
 }
 
@@ -6564,13 +7182,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();
@@ -6578,8 +7199,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",
@@ -6603,14 +7226,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);
@@ -6625,18 +7250,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();
@@ -6703,8 +7329,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] || ""
@@ -6718,13 +7343,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);
@@ -6777,20 +7402,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",
@@ -6813,13 +7443,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);
@@ -6834,18 +7466,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, "");
@@ -6942,13 +7575,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();
@@ -7042,23 +7675,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(),
@@ -7129,49 +7758,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
@@ -7347,7 +8053,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);
@@ -8444,8 +9150,7 @@ const flexComponentSchemes = {
 
 //#endregion
 //#region src/index.svelte5.ts
-var index_svelte5_exports = {};
-__export(index_svelte5_exports, {
+var index_svelte5_exports = /* @__PURE__ */ __export({
 	ACTION_HOOK_LABEL: () => ACTION_HOOK_LABEL,
 	ASPECT_VARIANT: () => ASPECT_VARIANT,
 	ASPECT_VARIANTS: () => ASPECT_VARIANTS,
@@ -8593,13 +9298,13 @@ __export(index_svelte5_exports, {
 	TEXT_THEME: () => TEXT_THEME,
 	TEXT_VARIANTS: () => TEXT_VARIANTS,
 	TextDirections: () => TextDirections,
+	USER_AGENT_VARIANT: () => USER_AGENT_VARIANT,
 	WritingModes: () => WritingModes,
 	addChoiceAnswer: () => addChoiceAnswer,
 	addFreeAnswer: () => addFreeAnswer,
 	afterUpdate: () => afterUpdate$1,
 	applyCss: () => applyCss,
 	applyGlobalCss: () => applyGlobalCss,
-	avatarPropsDefault: () => avatarPropsDefault,
 	beforeUpdate: () => beforeUpdate$1,
 	buttonOutlinedPropsDefault: () => buttonOutlinedPropsDefault,
 	buttonPropsDefault: () => buttonPropsDefault,
@@ -8687,6 +9392,7 @@ __export(index_svelte5_exports, {
 	tick: () => tick$1,
 	unregisterFormField: () => unregisterFormField,
 	useBrandKit: () => useBrandKit,
+	useResponsiveProps: () => useResponsiveProps,
 	validateFormField: () => validateFormField,
 	variables: () => variables,
 	widget: () => widget_exports