@plaidev/karte-action-sdk 1.1.270-29410833.25c7eb841 → 1.1.270-29420750.2ec690591

package/dist/svelte5/index.es.js

@@ -7,12 +7,17 @@ import { cubicOut, elasticOut, linear } from "svelte/easing";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (all) => {
+var __export = (all, symbols) => {
 	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
 	return target;
 };
 
@@ -53,6 +58,9 @@ const NOOP = (_args) => {};
 /** @internal */
 const isPreview = () => isInFrame();
 const isCanvasPreview = () => typeof document !== "undefined" ? (document?.querySelector("#preview")?.getAttribute("data-canvas-preview") ?? "false") === "true" : false;
+const getPreviewId = () => {
+	return typeof document !== "undefined" ? document.documentElement.getAttribute("data-krt-preview-id") ?? "" : "";
+};
 const isOnSite = () => typeof document !== "undefined" ? (document?.querySelector("#preview")?.getAttribute("data-on-site") ?? "true") === "true" : true;
 const isInFrame = () => window && window.self !== window.top;
 /** @internal */
@@ -191,17 +199,13 @@ function onScroll(rate, fn) {
 			html.scrollHeight,
 			html.clientHeight
 		]);
-		const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
-		const scrollRate = (scrollTop + viewHeight) / pageHeight;
+		const scrollRate = (scrollTop + Math.min(...[html.clientHeight, body.clientHeight])) / pageHeight;
 		contexts.forEach((ctx) => {
 			ctx.scrollRate = scrollRate;
 			ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
 			ctx.previousRate = ctx.scrollRate;
 			ctx.scrollTop = scrollTop;
-			if (canCall(ctx)) {
-				const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
-				updateStates(ctx, repeat);
-			}
+			if (canCall(ctx)) updateStates(ctx, !!_fn(Object.assign({ direction: direction(ctx) }, ctx)));
 		});
 	};
 	window.addEventListener("scroll", onScroll$1);
@@ -1146,6 +1150,33 @@ function setDestroyed(on$1) {
 *
 * @internal
 */
+const breakpoints = writable([]);
+/**
+* ブレイクポイントの一覧を取得する
+*
+* @returns 現在のブレイクポイントの一覧
+*/
+function getBreakpoints() {
+	return get(breakpoints);
+}
+/**
+* 変数を設定する
+*
+* @remarks
+* 設定したブレイクポイントは、ビジュアルエディタでブレイクポイントとして利用できます。
+*
+* @param values - ブレイクポイントの一覧
+*/
+function setBreakpoints(values) {
+	if (!get(breakpoints)) breakpoints.set([]);
+	breakpoints.update(() => values);
+	return getBreakpoints();
+}
+/**
+* Store to handle variables
+*
+* @internal
+*/
 const variables = writable({});
 /**
 * 変数の一覧を取得する
@@ -1445,6 +1476,9 @@ function dispatchDestroyEvent() {
 
 //#endregion
 //#region src/display-logic.ts
+/**
+* モーダル(ポップアップ)のロジックを管理する
+*/
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
 	if (direction === "down" && deltaRate > 0) downFn();
 	else if (condition && direction === "up" && deltaRate < 0) upFn();
@@ -1578,6 +1612,9 @@ function checkAndDo(checkFn, fn, ...conditionFns) {
 
 //#endregion
 //#region src/collection.ts
+/**
+* アクションテーブルに関連するコードの管理
+*/
 const DEFAULT_COLLECTION_ENDPOINT = "https://action-table.karte.io/collection";
 /**
 * アクションテーブルを管理するメソッドを取得する
@@ -1794,12 +1831,16 @@ function closeAction$1(trigger = "none") {
 
 //#endregion
 //#region src/modal.svelte5.tsx
+/**
+* モーダル(ポップアップ)に関連するコードの管理
+*
+* アクションのShow, Close, ChangeStateの状態はここで管理する。
+*/
 /** @internal */
 const handleState = (event) => {
 	if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
 		const nextState = event.detail.to;
-		const currentState = getState();
-		send_event("_message_state_changed", toStateChangedData(nextState, currentState));
+		send_event("_message_state_changed", toStateChangedData(nextState, getState()));
 		setState(event.detail.to, { disableInPreview: event.detail.disableInPreview });
 	}
 };
@@ -2011,8 +2052,7 @@ function createModal(App, options = {
 		return NOOP;
 	};
 	const handleClose = (event) => {
-		const trigger = event?.detail?.trigger ? event.detail.trigger : "none";
-		close$1(trigger);
+		close$1(event?.detail?.trigger ? event.detail.trigger : "none");
 	};
 	const show$1 = async (trigger = "none") => {
 		if (app) return;
@@ -2033,20 +2073,20 @@ function createModal(App, options = {
 		setOpened(true);
 		setClosed(false);
 		if (app) return;
-		const props = {
+		app = mount(App, {
 			target: ensureActionRoot(isOnSite()),
 			props: {
 				send: options.send,
 				publish: options.publish,
 				data,
-				onShow: (props$1) => {
+				onShow: (props) => {
 					const { onShowHandlers } = getInternalHandlers();
 					if (onShowHandlers) onShowHandlers.forEach((h$1) => {
 						console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify({ name: "onShow" })}`);
-						h$1(props$1);
+						h$1(props);
 					});
 				},
-				onChangeState: (props$1, newState) => {
+				onChangeState: (props, newState) => {
 					const { onChangeStateHandlers } = getInternalHandlers();
 					if (onChangeStateHandlers) onChangeStateHandlers.forEach((h$1) => {
 						const actionHookLog = {
@@ -2054,18 +2094,16 @@ function createModal(App, options = {
 							values: { newState }
 						};
 						console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
-						h$1(props$1, newState);
+						h$1(props, newState);
 					});
 					const { onChangeStateHandlers: onChangeWidgetStateHandlers } = getWidgetHandlers();
-					if (onChangeWidgetStateHandlers) onChangeStateHandlers.forEach((h$1) => h$1(props$1, newState));
+					if (onChangeWidgetStateHandlers) onChangeStateHandlers.forEach((h$1) => h$1(props, newState));
 				}
 			}
-		};
-		app = mount(App, props);
+		});
 	};
 	const handleShow = (event) => {
-		const trigger = event?.detail?.trigger ? event.detail.trigger : "none";
-		show$1(trigger);
+		show$1(event?.detail?.trigger ? event.detail.trigger : "none");
 	};
 	const currying = (conditionFn, options$1) => (fn) => conditionFn(options$1.props, fn);
 	const autoShow = () => {
@@ -2251,6 +2289,9 @@ function createFog({ color = "#000", opacity = "50%", zIndex = 999, onclick }) {
 
 //#endregion
 //#region src/script.ts
+/**
+* スクリプト接客が利用するコードの管理
+*/
 /** @internal */
 async function runScript$1(options = {
 	send: () => {},
@@ -2352,8 +2393,100 @@ async function loadGlobalStyle(href) {
 	});
 }
 
+//#endregion
+//#region src/preview.ts
+/** @internal */
+const initPreview = () => {
+	if (!isPreview()) return () => {};
+	let root$56;
+	let timer = null;
+	const previewId = getPreviewId();
+	const LAYER_ID_ATTR_KEY = "data-layer-id";
+	const toInfo = (element) => {
+		if (!element) return null;
+		const rect = element.getBoundingClientRect();
+		const styles = window.getComputedStyle(element);
+		return {
+			layerId: element.getAttribute(LAYER_ID_ATTR_KEY),
+			top: rect.top,
+			left: rect.left,
+			width: rect.width,
+			height: rect.height,
+			direction: styles?.flexDirection === "row" || styles?.flexDirection === "row-reverse" ? "row" : "column",
+			classNames: Array.from(element.classList.values()),
+			styles: {
+				direction: styles.flexDirection,
+				opacity: styles.opacity,
+				rowGap: styles.rowGap,
+				columnGap: styles.columnGap,
+				paddingLeft: styles.paddingLeft,
+				paddingRight: styles.paddingRight,
+				paddingTop: styles.paddingTop,
+				paddingBottom: styles.paddingBottom,
+				zIndex: styles.zIndex,
+				position: styles.position,
+				top: styles.top,
+				left: styles.left,
+				right: styles.right,
+				bottom: styles.bottom
+			}
+		};
+	};
+	const w$1 = (w$2) => w$2.parent === w$2 ? w$2 : w$2.parent;
+	const postUpdateLayers = () => {
+		const layerElements = Array.from(root$56.querySelectorAll(`[${LAYER_ID_ATTR_KEY}]`)).map((el) => toInfo(el));
+		if (layerElements.length === 0) return;
+		w$1(window).postMessage({
+			type: "KARTE-ACTION-PREVIEW-UPDATE-LAYERS",
+			detail: {
+				previewId,
+				layerElements
+			}
+		}, "*");
+	};
+	const rootObserver = new MutationObserver(postUpdateLayers);
+	const handleMessage = (e) => {
+		console.log("message", e);
+		const data = e.data;
+		if (data.event_name === "OVERRIDE_LAYER_STYLE") {
+			const { layerId = "", styles = [] } = data.detail || {};
+			const layerElement = root$56.querySelector(`[${LAYER_ID_ATTR_KEY}="${layerId}"]`);
+			if (!layerElement) return;
+			styles.forEach(({ key, value }) => {
+				layerElement.style.setProperty(key, value);
+			});
+		}
+	};
+	(() => {
+		const init = () => {
+			root$56 = getActionRoot();
+			if (root$56) {
+				rootObserver.observe(root$56, {
+					childList: true,
+					subtree: true,
+					characterData: true,
+					attributes: true
+				});
+				timer = setInterval(postUpdateLayers, 1e3);
+				window.addEventListener("message", handleMessage);
+			} else setTimeout(init, 30);
+		};
+		init();
+	})();
+	return () => {
+		if (timer) clearInterval(timer);
+		rootObserver.disconnect();
+		window.removeEventListener("message", handleMessage);
+	};
+};
+
 //#endregion
 //#region src/action.ts
+/**
+* Edgeが起動するアクションに関連するコードを管理する
+*
+* アクションのCreate, Destroyの状態はここで管理する。
+*/
 const emptyOptions = {
 	send: () => {},
 	publish: () => {},
@@ -2391,6 +2524,7 @@ function create(App, options) {
 		publish: options.publish,
 		data
 	};
+	const destroyPreview = initPreview();
 	const handleDestroy = () => {
 		const { onDestroyHandlers } = getInternalHandlers();
 		onDestroyHandlers?.forEach((h$1) => {
@@ -2399,6 +2533,7 @@ function create(App, options) {
 		});
 		const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
 		if (onDestroyWidgetHandlers) onDestroyWidgetHandlers.forEach((h$1) => h$1(actionProps));
+		destroyPreview();
 	};
 	setSystem({
 		apiKey: data.api_key || null,
@@ -2554,8 +2689,7 @@ function formDataToEventValues$1(campaignId, formData$1) {
 }
 function formDataToIdentifyEventValues$1(formData$1) {
 	return Object.fromEntries(Object.entries(formData$1).map(([name, dataItem]) => {
-		const value = dataItem.value;
-		return [name, value];
+		return [name, dataItem.value];
 	}));
 }
 /** @internal */
@@ -2676,6 +2810,9 @@ function sendAnswers() {
 
 //#endregion
 //#region src/widget.ts
+/**
+* エディタv1のWidget API 互換のインターフェース
+*/
 var widget_exports = /* @__PURE__ */ __export({
 	collection: () => collection$1,
 	getState: () => getState$1,
@@ -3374,29 +3511,25 @@ const useBrandKit = () => {
 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]) => {
+		return `${rootSelector}${selector.startsWith("&") ? selector.slice(1) : ` ${selector}`} {\n${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}`;
+		}).filter((v) => v !== "").join("\n")}\n}`;
 	};
 	return define(gen).join("\n");
 }
 function toResponsiveSelector(responsiveSetting, body) {
-	const { mediaQueryCondition, userAgentCondition } = responsiveSetting;
-	if (mediaQueryCondition) {
-		const { raw, range, orientation } = mediaQueryCondition;
+	const { breakpointId } = responsiveSetting;
+	const breakpoint = getBreakpoints().find((v) => v.id === breakpointId);
+	if (breakpoint && breakpoint.mediaQuery) {
+		const { maxWidth, minWidth, orientation } = breakpoint.mediaQuery;
 		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}`;
-		}
+		if (minWidth && maxWidth) return `${prefix} (min-width: ${minWidth}px)${orientationStyle} and (max-width: ${maxWidth}px) {\n${body}\n}`;
+		else if (maxWidth) return `${prefix} (max-width: ${maxWidth}px)${orientationStyle} {\n${body}\n}`;
+		else if (minWidth) return `${prefix} (min-width: ${minWidth}px)${orientationStyle} {\n${body}\n}`;
 		return "";
-	} else if (userAgentCondition) return "";
+	}
 	return "";
 }
 function toStyleTag(css) {
@@ -3441,7 +3574,9 @@ function State($$anchor, $$props) {
 	$.push($$props, false);
 	let customBrandKit = $.prop($$props, "customBrandKit", 8, void 0);
 	let globalCssCode = $.prop($$props, "globalCssCode", 8, void 0);
+	let breakpoints$1 = $.prop($$props, "breakpoints", 24, () => []);
 	setContext("brandKit", getBrandKit(customBrandKit()));
+	setBreakpoints(breakpoints$1());
 	$.init();
 	var fragment = root$55();
 	var node = $.first_child(fragment);
@@ -3512,57 +3647,25 @@ const ROUND_VARIANT = {
 };
 
 //#endregion
-//#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 }
-};
+//#region src/components-flex/responsiveProp.ts
 const isMatchMediaQueryCondition = (condition) => {
-	const { raw, range, orientation } = condition;
+	const { minWidth, maxWidth, 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;
+	if (typeof minWidth === "number" && typeof maxWidth === "number") return window.matchMedia(`(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`).matches;
+	else if (typeof minWidth === "number") return window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+	else if (typeof maxWidth === "number") return window.matchMedia(`(max-width: ${maxWidth}px)`).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 breakpoints$1 = getBreakpoints();
 		const update = () => {
-			const matchedSetting = [...props.responsiveSettings ?? []].reverse().find(isMatchResponsiveSetting);
+			const breakpoint = breakpoints$1.find((v) => v.mediaQuery && isMatchMediaQueryCondition(v.mediaQuery));
+			const matchedSetting = props.responsiveSettings.find((v) => v.breakpointId === breakpoint?.id);
 			if (matchedSetting) set(Object.assign({}, props, matchedSetting.props ?? {}));
 			else set(props);
 		};
@@ -3578,10 +3681,12 @@ function useResponsiveProps(props) {
 
 //#endregion
 //#region src/functions.ts
+/**
+* モーダル(ポップアップ)のコンポーネントが利用するコードの管理
+*/
 function _moveTo(to) {
-	const currentState = getState();
 	dispatchActionEvent(ACTION_CHANGE_STATE_EVENT, { detail: {
-		from: currentState,
+		from: getState(),
 		to,
 		actionId
 	} });
@@ -3746,36 +3851,12 @@ const execOnClickOperation = (onClickOperation) => {
 function getAnimation(animation) {
 	switch (animation.type) {
 		case "fade": return `opacity: ${animation.progress}`;
-		case "bounce": {
-			const translateX = animation.x;
-			const translateY = animation.y;
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
-		}
-		case "slide-down": {
-			const translateX = animation.x;
-			const translateY = animation.y - 100 * (1 - animation.progress);
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "slide-up": {
-			const translateX = animation.x;
-			const translateY = animation.y + 100 * (1 - animation.progress);
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "slide-left": {
-			const translateX = animation.x + 100 * (1 - animation.progress);
-			const translateY = animation.y;
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "slide-right": {
-			const translateX = animation.x - 100 * (1 - animation.progress);
-			const translateY = animation.y;
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "none": {
-			const translateX = animation.x;
-			const translateY = animation.y;
-			return `transform:  translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
+		case "bounce": return `transform: translate3d(${animation.x}%, ${animation.y}%, 0) scale(${animation.progress});`;
+		case "slide-down": return `transform: translate3d(${animation.x}%, ${animation.y - 100 * (1 - animation.progress)}%, 0);`;
+		case "slide-up": return `transform: translate3d(${animation.x}%, ${animation.y + 100 * (1 - animation.progress)}%, 0);`;
+		case "slide-left": return `transform: translate3d(${animation.x + 100 * (1 - animation.progress)}%, ${animation.y}%, 0);`;
+		case "slide-right": return `transform: translate3d(${animation.x - 100 * (1 - animation.progress)}%, ${animation.y}%, 0);`;
+		case "none": return `transform:  translate3d(${animation.x}%, ${animation.y}%, 0);`;
 		default:
 			console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
 			return "transform: none";
@@ -4185,11 +4266,7 @@ var Avatar_css_default = (layerId, props) => {
 			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.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$3(layerId, v.props))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -4825,14 +4902,10 @@ var Icon_css_default = (layerId, props, _brandKit) => {
 		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.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$2(layerId, {
+			variant: v.props.variant ?? props.variant,
+			...v.props
+		}))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -4904,8 +4977,7 @@ function Icon($$anchor, $$props) {
 //#region src/components-flex/styles.ts
 const getPropStyles = (callback$5) => {
 	return (customBrandKit) => {
-		const brandKit = getBrandKit(customBrandKit);
-		return callback$5({ brandKit });
+		return callback$5({ brandKit: getBrandKit(customBrandKit) });
 	};
 };
 
@@ -5097,11 +5169,7 @@ var Button_css_default = (layerId, props, brandKit) => {
 			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.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$1(layerId, v.props, brandKit))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -6009,11 +6077,7 @@ var Layout_css_default = (layerId, props, brandKit) => {
 		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.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$4(v.props))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -6496,14 +6560,10 @@ var Text_css_default = (layerId, props, brandKit) => {
 			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.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$4({
+			...v.props,
+			content: v.props.content ?? props.content
+		}))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -6701,14 +6761,10 @@ var TextLink_css_default = (layerId, props, brandKit) => {
 		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.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle(layerId, {
+			...v.props,
+			label: v.props.label ?? props.label
+		}, brandKit))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -7059,8 +7115,7 @@ function Modal($$anchor, $$props) {
 					$.get(backgroundClickPC)?.apply(this, $$args);
 				} }
 			});
-			var node_2 = $.sibling(node_1, 2);
-			BackgroundOverlay(node_2, {
+			BackgroundOverlay($.sibling(node_1, 2), {
 				class: "background-bp-sp ",
 				get zIndex() {
 					return props().zIndex;
@@ -7596,15 +7651,11 @@ function CountDown($$anchor, $$props) {
 		return limit - (/* @__PURE__ */ new Date()).getTime();
 	}
 	function formatTimeDiff(ms) {
-		const diffDay = Math.floor(ms / 1e3 / 60 / 60 / 24);
-		const diffHour = Math.floor(ms / 1e3 / 60 / 60) % 24;
-		const diffMin = Math.floor(ms / 1e3 / 60) % 60;
-		const diffSec = Math.floor(ms / 1e3) % 60;
 		return {
-			day: diffDay,
-			hour: diffHour,
-			min: diffMin,
-			sec: diffSec
+			day: Math.floor(ms / 1e3 / 60 / 60 / 24),
+			hour: Math.floor(ms / 1e3 / 60 / 60) % 24,
+			min: Math.floor(ms / 1e3 / 60) % 60,
+			sec: Math.floor(ms / 1e3) % 60
 		};
 	}
 	function onEachSecond() {
@@ -7696,24 +7747,22 @@ const useText = (props, layerId) => {
 			fontWeight: getFontWeight()
 		};
 	};
-	const escapedHTML = props.content.replace(/&/g, "&lt;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />");
-	const style = objToStyle({
-		position: props?.position ?? "static",
-		textAlign: props.align,
-		width: props.width,
-		fontFamily: `"${fontFamily}"`,
-		color: getColor(),
-		...getCssSize(),
-		...toCssRadius(props),
-		...toCssBackground(props),
-		...toCssCommon(props),
-		...toCssPosition(props),
-		...toCssPadding(props),
-		...toCssBorder(props)
-	});
 	return {
-		escapedHTML,
-		style
+		escapedHTML: props.content.replace(/&/g, "&lt;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />"),
+		style: objToStyle({
+			position: props?.position ?? "static",
+			textAlign: props.align,
+			width: props.width,
+			fontFamily: `"${fontFamily}"`,
+			color: getColor(),
+			...getCssSize(),
+			...toCssRadius(props),
+			...toCssBackground(props),
+			...toCssCommon(props),
+			...toCssPosition(props),
+			...toCssPadding(props),
+			...toCssBorder(props)
+		})
 	};
 };
 
@@ -7821,7 +7870,7 @@ var root$3 = $.template(`<!> <!>`, 1);
 function ClipCopy($$anchor, $$props) {
 	$.push($$props, false);
 	const [$$stores, $$cleanup] = $.setup_stores();
-	const $responsiveProps = () => $.store_get(responsiveProps, "$responsiveProps", $$stores);
+	const $responsiveSettings = () => $.store_get(responsiveSettings, "$responsiveSettings", $$stores);
 	const rProps = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
@@ -7829,7 +7878,7 @@ function ClipCopy($$anchor, $$props) {
 	let buttonElement = $.mutable_state();
 	let showTooltip = $.mutable_state(false);
 	const cssCode = ClipCopy_css_default(layerId(), props());
-	const responsiveProps = useResponsiveProps(props());
+	const responsiveSettings = useResponsiveProps(props());
 	const handleClick = async (e) => {
 		e.preventDefault();
 		const targetText = $.get(rProps).content ?? $.get(buttonElement)?.innerText ?? "";
@@ -7846,8 +7895,8 @@ function ClipCopy($$anchor, $$props) {
 			console.warn(e$1);
 		}
 	};
-	$.legacy_pre_effect(() => $responsiveProps(), () => {
-		$.set(rProps, $responsiveProps());
+	$.legacy_pre_effect(() => $responsiveSettings(), () => {
+		$.set(rProps, $responsiveSettings());
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
@@ -9150,4 +9199,4 @@ const flexComponentSchemes = {
 };
 
 //#endregion
-export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_IDENTIFY_FIELD_TYPE, FORM_INPUT_TYPE, FORM_VALIDATION_DEFAULT_ERROR_MESSAGES, FORM_VALIDATION_REGEX, FORM_VALIDATION_TYPE, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormBoolean as FlexFormBoolean, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormIdentifyField as FlexFormIdentifyField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, USER_AGENT_VARIANT, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedIdentifyValues, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, useResponsiveProps, validateFormField, variables, widget_exports as widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_IDENTIFY_FIELD_TYPE, FORM_INPUT_TYPE, FORM_VALIDATION_DEFAULT_ERROR_MESSAGES, FORM_VALIDATION_REGEX, FORM_VALIDATION_TYPE, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormBoolean as FlexFormBoolean, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormIdentifyField as FlexFormIdentifyField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedIdentifyValues, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initPreview, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, useResponsiveProps, validateFormField, variables, widget_exports as widget };