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

package/dist/index.es.js

@@ -5,12 +5,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;
 };
 
@@ -51,6 +56,9 @@ const NOOP = (_args) => {};
 /** @internal */
 const isPreview = () => false;
 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;
 /** @internal */
 const setPreviousFocus = () => {
@@ -188,17 +196,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);
@@ -1143,6 +1147,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({});
 /**
 * 変数の一覧を取得する
@@ -1426,6 +1457,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();
@@ -1559,6 +1593,9 @@ function checkAndDo(checkFn, fn, ...conditionFns) {
 
 //#endregion
 //#region src/collection.ts
+/**
+* アクションテーブルに関連するコードの管理
+*/
 const DEFAULT_COLLECTION_ENDPOINT = "https://action-table.karte.io/collection";
 /**
 * アクションテーブルを管理するメソッドを取得する
@@ -1752,6 +1789,11 @@ function initActionTable(localVariablesQuery) {
 
 //#endregion
 //#region src/modal.tsx
+/**
+* モーダル(ポップアップ)に関連するコードの管理
+*
+* アクションのShow, Close, ChangeStateの状態はここで管理する。
+*/
 /** @internal */
 const handleState = (event) => {
 	if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
@@ -1970,8 +2012,7 @@ function createModal(App, options = {
 		return NOOP;
 	};
 	const handleClose = (event) => {
-		const trigger = event?.detail?.trigger ? event.detail.trigger : "none";
-		close$2(trigger);
+		close$2(event?.detail?.trigger ? event.detail.trigger : "none");
 	};
 	const show$2 = async (trigger = "none") => {
 		if (app) return;
@@ -1992,21 +2033,21 @@ function createModal(App, options = {
 		setOpened(true);
 		setClosed(false);
 		if (app) return;
-		const props = {
+		app = new App({
 			target: ensureActionRoot$1(true),
 			hydrate: false,
 			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 = {
@@ -2014,18 +2055,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 = new App(props);
+		});
 	};
 	const handleShow = (event) => {
-		const trigger = event?.detail?.trigger ? event.detail.trigger : "none";
-		show$2(trigger);
+		show$2(event?.detail?.trigger ? event.detail.trigger : "none");
 	};
 	const currying = (conditionFn, options$1) => (fn) => conditionFn(options$1.props, fn);
 	const autoShow = () => {
@@ -2208,6 +2247,11 @@ function createFog({ color = "#000", opacity = "50%", zIndex = 999, onclick }) {
 //#endregion
 //#region src/modal.svelte5.tsx
 /**
+* モーダル(ポップアップ)に関連するコードの管理
+*
+* アクションのShow, Close, ChangeStateの状態はここで管理する。
+*/
+/**
 * アクションが表示 (show) された後にフックする関数
 *
 * @param fn - 呼び出されるフック関数
@@ -2476,6 +2520,9 @@ function createFog$1({ color = "#000", opacity = "50%", zIndex = 999, onclick })
 
 //#endregion
 //#region src/script.ts
+/**
+* スクリプト接客が利用するコードの管理
+*/
 /** @internal */
 async function runScript$1(options = {
 	send: () => {},
@@ -2577,8 +2624,100 @@ async function loadGlobalStyle(href) {
 	});
 }
 
+//#endregion
+//#region src/preview.ts
+/** @internal */
+const initPreview = () => {
+	if (!isPreview()) return () => {};
+	let root;
+	let timer = null;
+	const previewId = getPreviewId();
+	const LAYER_ID_ATTR_KEY = "data-layer-id";
+	const toInfo = (element$1) => {
+		if (!element$1) return null;
+		const rect = element$1.getBoundingClientRect();
+		const styles = window.getComputedStyle(element$1);
+		return {
+			layerId: element$1.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$1.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.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.querySelector(`[${LAYER_ID_ATTR_KEY}="${layerId}"]`);
+			if (!layerElement) return;
+			styles.forEach(({ key, value }) => {
+				layerElement.style.setProperty(key, value);
+			});
+		}
+	};
+	(() => {
+		const init$1 = () => {
+			root = getActionRoot$1();
+			if (root) {
+				rootObserver.observe(root, {
+					childList: true,
+					subtree: true,
+					characterData: true,
+					attributes: true
+				});
+				timer = setInterval(postUpdateLayers, 1e3);
+				window.addEventListener("message", handleMessage);
+			} else setTimeout(init$1, 30);
+		};
+		init$1();
+	})();
+	return () => {
+		if (timer) clearInterval(timer);
+		rootObserver.disconnect();
+		window.removeEventListener("message", handleMessage);
+	};
+};
+
 //#endregion
 //#region src/action.ts
+/**
+* Edgeが起動するアクションに関連するコードを管理する
+*
+* アクションのCreate, Destroyの状態はここで管理する。
+*/
 const emptyOptions = {
 	send: () => {},
 	publish: () => {},
@@ -2616,6 +2755,7 @@ function create(App, options) {
 		publish: options.publish,
 		data
 	};
+	const destroyPreview = initPreview();
 	const handleDestroy = () => {
 		const { onDestroyHandlers } = getInternalHandlers();
 		onDestroyHandlers?.forEach((h$1) => {
@@ -2624,6 +2764,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,
@@ -2765,8 +2906,7 @@ function validateFormData(formData$1, statePath) {
 /** @internal */
 const getValuesAreValidReadable = (statePath) => ({ subscribe(callback$5) {
 	return formData.subscribe((formData$1) => identifyFormData.subscribe((identifyFormData$1) => {
-		const valuesAreValid = validateFormData(formData$1, statePath) && validateFormData(identifyFormData$1, statePath);
-		callback$5(valuesAreValid);
+		callback$5(validateFormData(formData$1, statePath) && validateFormData(identifyFormData$1, statePath));
 	}));
 } });
 function createAnswerValue$1(value) {
@@ -2789,8 +2929,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 */
@@ -2911,6 +3050,9 @@ function sendAnswers() {
 
 //#endregion
 //#region src/widget.ts
+/**
+* エディタv1のWidget API 互換のインターフェース
+*/
 var widget_exports = /* @__PURE__ */ __export({
 	collection: () => collection$1,
 	getState: () => getState$1,
@@ -3841,10 +3983,12 @@ function onSubmitForm(fn) {
 
 //#endregion
 //#region src/functions.ts
+/**
+* モーダル(ポップアップ)のコンポーネントが利用するコードの管理
+*/
 function _moveTo(to) {
-	const currentState = getState();
 	dispatchActionEvent(ACTION_CHANGE_STATE_EVENT, { detail: {
-		from: currentState,
+		from: getState(),
 		to,
 		actionId
 	} });
@@ -4013,36 +4157,12 @@ const haveFunction = (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";
@@ -4181,6 +4301,10 @@ var BackgroundOverlay_default$1 = BackgroundOverlay$1;
 
 //#endregion
 //#region src/enhancedStopPropagation.ts
+/**
+* data属性とカスタムのイベントハンドラによるstopPropagation。
+* デフォルトのstopPropagationだと伝播先のpreventDefaultも無効化されてしまうため、それの対策。
+*/
 function createDataAttrKey(eventName) {
 	return `data-stop-propagation-${eventName}-${actionId}`;
 }
@@ -5112,10 +5236,7 @@ function instance$103($$self, $$props, $$invalidate) {
 			let elasticStyle = ElasticityStyle[isPreview() ? "none" : elasticity];
 			if (!useBreakPoint) modalStyles.add(elasticStyle);
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isPreview() && useBreakPoint) {
-					const elasticityWithBp = breakPoint[deviceId]?.elasticity;
-					elasticStyle = ElasticityStyle[elasticityWithBp];
-				}
+				if (!isPreview() && useBreakPoint) elasticStyle = ElasticityStyle[breakPoint[deviceId]?.elasticity];
 				const elasticityVariables = stringifyStyleObj(formatObjectKey({
 					obj: parseStyle(elasticStyle),
 					prefix: "--modal-bp-",
@@ -6475,12 +6596,11 @@ function instance$93($$self, $$props, $$invalidate) {
 	let domRef = null;
 	function sendMovieEvent(event_name, values = {}) {
 		if (!sendEvent) return;
-		const sentValues = {
+		send_event(event_name, {
 			campaign_id: $system.campaignId,
 			shorten_id: $system.shortenId,
 			...values
-		};
-		send_event(event_name, sentValues);
+		});
 	}
 	function sendPlaytime() {
 		if (!startDate) return;
@@ -6729,12 +6849,11 @@ function instance$92($$self, $$props, $$invalidate) {
 	let domRef = null;
 	function sendMovieEvent(event_name, values = {}) {
 		if (!sendEvent) return;
-		const sentValues = {
+		send_event(event_name, {
 			campaign_id: $system.campaignId,
 			shorten_id: $system.shortenId,
 			...values
-		};
-		send_event(event_name, sentValues);
+		});
 	}
 	function sendPlaytime() {
 		if (!startDate) return;
@@ -8723,8 +8842,7 @@ function instance$83($$self, $$props, $$invalidate) {
 		if (!moving) return;
 		if (previousMove) {
 			const dx = clientX - previousMove.clientX;
-			const dt = timeStamp - previousMove.timeStamp;
-			moveSpeed = dx / dt;
+			moveSpeed = dx / (timeStamp - previousMove.timeStamp);
 			const updatedSlidePosition = slidePosition + dx;
 			window.requestAnimationFrame(() => {
 				$$invalidate(28, slidePosition = updatedSlidePosition);
@@ -10648,29 +10766,25 @@ const toCssOverflow = (p) => {
 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) {
@@ -10720,11 +10834,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
 	]);
 };
@@ -10838,57 +10948,25 @@ var StylePortal = class extends SvelteComponent {
 var StylePortal_default = StylePortal;
 
 //#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;
-	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);
+	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 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);
 		};
@@ -12692,14 +12770,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
 	]);
 };
@@ -12902,8 +12976,7 @@ var Icon_default = Icon;
 //#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) });
 	};
 };
 
@@ -13095,11 +13168,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
 	]);
 };
@@ -14711,11 +14780,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
 	]);
 };
@@ -15625,14 +15690,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
 	]);
 };
@@ -15931,14 +15992,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
 	]);
 };
@@ -17788,15 +17845,11 @@ function calcRemainingTime(limit) {
 	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 instance$16($$self, $$props, $$invalidate) {
@@ -17893,24 +17946,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)
+		})
 	};
 };
 
@@ -18179,7 +18230,7 @@ function create_fragment$14(ctx) {
 }
 function instance$14($$self, $$props, $$invalidate) {
 	let rProps;
-	let $responsiveProps;
+	let $responsiveSettings;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = crypto.randomUUID() } = $$props;
@@ -18187,8 +18238,8 @@ function instance$14($$self, $$props, $$invalidate) {
 	let buttonElement;
 	let showTooltip = false;
 	const cssCode = ClipCopy_css_default(layerId, props);
-	const responsiveProps = useResponsiveProps(props);
-	component_subscribe($$self, responsiveProps, (value) => $$invalidate(8, $responsiveProps = value));
+	const responsiveSettings = useResponsiveProps(props);
+	component_subscribe($$self, responsiveSettings, (value) => $$invalidate(8, $responsiveSettings = value));
 	const handleClick = async (e) => {
 		e.preventDefault();
 		const targetText = rProps.content ?? buttonElement?.innerText ?? "";
@@ -18217,7 +18268,7 @@ function instance$14($$self, $$props, $$invalidate) {
 		if ("$$scope" in $$props$1) $$invalidate(9, $$scope = $$props$1.$$scope);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & 256) $: $$invalidate(3, rProps = $responsiveProps);
+		if ($$self.$$.dirty & 256) $: $$invalidate(3, rProps = $responsiveSettings);
 	};
 	return [
 		layerId,
@@ -18225,10 +18276,10 @@ function instance$14($$self, $$props, $$invalidate) {
 		showTooltip,
 		rProps,
 		cssCode,
-		responsiveProps,
+		responsiveSettings,
 		handleClick,
 		props,
-		$responsiveProps,
+		$responsiveSettings,
 		$$scope,
 		slots,
 		button_binding
@@ -18754,8 +18805,8 @@ function create_fragment$10(ctx) {
 	let current;
 	let if_block = ctx[0] && create_if_block$3(ctx);
 	header = new Header_default({});
-	const default_slot_template = ctx[3].default;
-	const default_slot = create_slot(default_slot_template, ctx, ctx[2], null);
+	const default_slot_template = ctx[4].default;
+	const default_slot = create_slot(default_slot_template, ctx, ctx[3], null);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -18790,7 +18841,7 @@ function create_fragment$10(ctx) {
 				check_outros();
 			}
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & 4)) update_slot_base(default_slot, default_slot_template, ctx$1, ctx$1[2], !current ? get_all_dirty_from_scope(ctx$1[2]) : get_slot_changes(default_slot_template, ctx$1[2], dirty, null), null);
+				if (default_slot.p && (!current || dirty & 8)) update_slot_base(default_slot, default_slot_template, ctx$1, ctx$1[3], !current ? get_all_dirty_from_scope(ctx$1[3]) : get_slot_changes(default_slot_template, ctx$1[3], dirty, null), null);
 			}
 		},
 		i(local) {
@@ -18819,15 +18870,19 @@ function instance$10($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { customBrandKit = void 0 } = $$props;
 	let { globalCssCode = void 0 } = $$props;
+	let { breakpoints: breakpoints$1 = [] } = $$props;
 	setContext("brandKit", getBrandKit(customBrandKit));
+	setBreakpoints(breakpoints$1);
 	$$self.$$set = ($$props$1) => {
 		if ("customBrandKit" in $$props$1) $$invalidate(1, customBrandKit = $$props$1.customBrandKit);
 		if ("globalCssCode" in $$props$1) $$invalidate(0, globalCssCode = $$props$1.globalCssCode);
-		if ("$$scope" in $$props$1) $$invalidate(2, $$scope = $$props$1.$$scope);
+		if ("breakpoints" in $$props$1) $$invalidate(2, breakpoints$1 = $$props$1.breakpoints);
+		if ("$$scope" in $$props$1) $$invalidate(3, $$scope = $$props$1.$$scope);
 	};
 	return [
 		globalCssCode,
 		customBrandKit,
+		breakpoints$1,
 		$$scope,
 		slots
 	];
@@ -18837,7 +18892,8 @@ var State = class extends SvelteComponent {
 		super();
 		init(this, options, instance$10, create_fragment$10, safe_not_equal, {
 			customBrandKit: 1,
-			globalCssCode: 0
+			globalCssCode: 0,
+			breakpoints: 2
 		});
 	}
 };
@@ -20917,7 +20973,6 @@ var index_svelte5_exports = /* @__PURE__ */ __export({
 	TEXT_THEME: () => TEXT_THEME,
 	TEXT_VARIANTS: () => TEXT_VARIANTS,
 	TextDirections: () => TextDirections,
-	USER_AGENT_VARIANT: () => USER_AGENT_VARIANT,
 	WritingModes: () => WritingModes,
 	addChoiceAnswer: () => addChoiceAnswer,
 	addFreeAnswer: () => addFreeAnswer,
@@ -20968,6 +21023,7 @@ var index_svelte5_exports = /* @__PURE__ */ __export({
 	getVariables: () => getVariables,
 	hideOnScroll: () => hideOnScroll,
 	hideOnTime: () => hideOnTime,
+	initPreview: () => initPreview,
 	initialize: () => initialize,
 	isOpened: () => isOpened,
 	listenLogger: () => listenLogger,
@@ -21306,4 +21362,4 @@ var ThumbnailPreview = class extends SvelteComponent {
 var ThumbnailPreview_default = ThumbnailPreview;
 
 //#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, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, 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, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Form_default as FlexForm, FormField_default as FlexFormField, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, 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, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Form_default as FlexForm, FormField_default as FlexFormField, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initPreview, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };