@plaidev/karte-action-sdk 1.1.264-29052187.465265af → 1.1.265-29058826.de4fe889

package/dist/hydrate/index.es.js

@@ -17,6 +17,11 @@ const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
 const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
 /** @internal */
 const DEVICE_IDS = ['PC', 'SP'];
+/** @internal */
+const DEVICE_QUERIES = {
+    PC: 'screen and (min-width: 641px)',
+    SP: 'screen and (max-width: 640px)',
+};
 // -------- The following codes are deprecated --------
 /**
  * 非推奨
@@ -1617,7 +1622,7 @@ const handleState = (event) => {
  *
  * @public
  */
-function onShow(fn) {
+function onShow$1(fn) {
     let { onShowHandlers } = getInternalHandlers();
     if (!onShowHandlers) {
         onShowHandlers = [];
@@ -1632,7 +1637,7 @@ function onShow(fn) {
  *
  * @public
  */
-function onClose(fn) {
+function onClose$1(fn) {
     let { onCloseHandlers } = getInternalHandlers();
     if (!onCloseHandlers) {
         onCloseHandlers = [];
@@ -1647,7 +1652,7 @@ function onClose(fn) {
  *
  * @public
  */
-function onChangeState(fn) {
+function onChangeState$1(fn) {
     let { onChangeStateHandlers } = getInternalHandlers();
     if (!onChangeStateHandlers) {
         onChangeStateHandlers = [];
@@ -1660,7 +1665,7 @@ function onChangeState(fn) {
  *
  * @public
  */
-function showAction() {
+function showAction$1() {
     const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
     window.dispatchEvent(event);
 }
@@ -1671,7 +1676,7 @@ function showAction() {
  *
  * @public
  */
-function closeAction(trigger = 'none') {
+function closeAction$1(trigger = 'none') {
     const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
     window.dispatchEvent(event);
 }
@@ -1684,11 +1689,11 @@ function closeAction(trigger = 'none') {
  *
  * @public
  */
-async function applyCss(css) {
+async function applyCss$1(css) {
     return new Promise((resolve, reject) => {
         const style = document.createElement('style');
         style.textContent = css;
-        const shadowRoot = getActionRoot();
+        const shadowRoot = getActionRoot$1();
         if (!shadowRoot)
             return;
         shadowRoot.append(style);
@@ -1696,7 +1701,7 @@ async function applyCss(css) {
         style.addEventListener('error', () => reject(style));
     });
 }
-async function fixFontFaceIssue(href, cssRules) {
+async function fixFontFaceIssue$1(href, cssRules) {
     const css = new CSSStyleSheet();
     // @ts-ignore
     await css.replace(cssRules);
@@ -1726,8 +1731,8 @@ async function fixFontFaceIssue(href, cssRules) {
  *
  * @public
  */
-async function loadStyle(href) {
-    const sr = getActionRoot();
+async function loadStyle$1(href) {
+    const sr = getActionRoot$1();
     if (!sr)
         return;
     let cssRules = '';
@@ -1742,7 +1747,7 @@ async function loadStyle(href) {
         return;
     // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
     // @see https://stackoverflow.com/a/63717709
-    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
+    const [rules, fontFaceRules] = await fixFontFaceIssue$1(href, cssRules);
     const css = new CSSStyleSheet();
     // @ts-ignore
     await css.replace(rules);
@@ -1757,7 +1762,7 @@ async function loadStyle(href) {
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
 }
 // @internal
-function getCssVariables(data) {
+function getCssVariables$1(data) {
     return Object.entries(data)
         .filter(([key, value]) => {
         return ['string', 'number'].includes(typeof value) && key.startsWith('--');
@@ -1772,7 +1777,7 @@ function getCssVariables(data) {
  *
  * @public
  */
-function getActionRoot() {
+function getActionRoot$1() {
     const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
     if (!root?.shadowRoot) {
         return null;
@@ -1874,7 +1879,7 @@ function createModal(App, options = {
             return;
         }
         const props = {
-            target: ensureActionRoot(!true),
+            target: ensureActionRoot$1(!true),
             hydrate: true,
             props: {
                 send: options.send,
@@ -1965,7 +1970,7 @@ function createModal(App, options = {
     return appCleanup;
 }
 /** @internal */
-function ensureActionRoot(useShadow = true) {
+function ensureActionRoot$1(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -1995,7 +2000,7 @@ function ensureActionRoot(useShadow = true) {
  *
  * @internal
  */
-const show = showAction;
+const show$1 = showAction$1;
 /**
  * 非推奨
  *
@@ -2003,7 +2008,7 @@ const show = showAction;
  *
  * @internal
  */
-const close = closeAction;
+const close$1 = closeAction$1;
 /**
  * 非推奨
  *
@@ -2011,7 +2016,7 @@ const close = closeAction;
  *
  * @internal
  */
-const ensureModalRoot = ensureActionRoot;
+const ensureModalRoot$1 = ensureActionRoot$1;
 /**
  * 非推奨
  *
@@ -2019,7 +2024,7 @@ const ensureModalRoot = ensureActionRoot;
  *
  * @internal
  */
-function createApp(App, options = {
+function createApp$1(App, options = {
     send: () => { },
     publish: () => { },
     props: {},
@@ -2050,7 +2055,7 @@ function createApp(App, options = {
         },
     };
     {
-        const win = ensureModalRoot(false);
+        const win = ensureModalRoot$1(false);
         appArgs.target = win;
         appArgs.hydrate = true;
     }
@@ -2073,8 +2078,8 @@ function createApp(App, options = {
  *
  * @internal
  */
-function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
-    const root = ensureModalRoot(false);
+function createFog$1({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
+    const root = ensureModalRoot$1(false);
     if (root.querySelector('.__krt-fog')) {
         return { fog: null, close: () => { } };
     }
@@ -2820,13 +2825,13 @@ var widget = /*#__PURE__*/Object.freeze({
   collection: collection,
   getState: getState,
   getVal: getVal,
-  hide: closeAction,
+  hide: closeAction$1,
   method: method,
   on: on,
   onChangeVal: onChangeVal,
   setState: setState,
   setVal: setVal,
-  show: showAction,
+  show: showAction$1,
   storage: storage
 });
 
@@ -17038,8 +17043,8 @@ function instance$k($$self, $$props, $$invalidate) {
 				flexDirection: props.direction,
 				alignItems: props.align,
 				justifyContent: props.justify,
-				rowGap: props.rowGap,
-				columnGap: props.columnGap,
+				rowGap: props.rowGap ?? props.gap,
+				columnGap: props.columnGap ?? props.gap,
 				width: props.width,
 				...toCssOverflow(props),
 				...toCssShadow(props),
@@ -18644,7 +18649,7 @@ function add_css$9(target) {
 	append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@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}}@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}}");
 }
 
-// (237:0) {:else}
+// (220:0) {:else}
 function create_else_block(ctx) {
 	let backgroundoverlay;
 	let current;
@@ -18691,7 +18696,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (226:24) 
+// (209:24) 
 function create_if_block_2(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -18765,7 +18770,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (224:0) {#if isPreview()}
+// (207:0) {#if !isOnSite}
 function create_if_block_1$1(ctx) {
 	return {
 		c: noop,
@@ -18778,15 +18783,15 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (240:0) {#if visible}
+// (223:0) {#if visible}
 function create_if_block$3(ctx) {
 	let div;
 	let div_class_value;
 	let div_style_value;
 	let div_intro;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[26].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
+	const default_slot_template = /*#slots*/ ctx[27].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
 
 	return {
 		c() {
@@ -18813,7 +18818,7 @@ function create_if_block$3(ctx) {
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
 			attr(div, "data-layer-id", /*layerId*/ ctx[2]);
-			attr(div, "style", div_style_value = [Array.from(/*modalStyles*/ ctx[14]).join(';'), /*style*/ ctx[9]].join(' '));
+			attr(div, "style", div_style_value = [Array.from(/*modalStyles*/ ctx[15]).join(';'), /*style*/ ctx[9]].join(' '));
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -18822,22 +18827,22 @@ function create_if_block$3(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[27](div);
+			/*div_binding*/ ctx[28](div);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 33554432)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[26],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
 						null
 					);
 				}
@@ -18851,7 +18856,7 @@ function create_if_block$3(ctx) {
 				attr(div, "data-layer-id", /*layerId*/ ctx[2]);
 			}
 
-			if (!current || dirty & /*style*/ 512 && div_style_value !== (div_style_value = [Array.from(/*modalStyles*/ ctx[14]).join(';'), /*style*/ ctx[9]].join(' '))) {
+			if (!current || dirty & /*style*/ 512 && div_style_value !== (div_style_value = [Array.from(/*modalStyles*/ ctx[15]).join(';'), /*style*/ ctx[9]].join(' '))) {
 				attr(div, "style", div_style_value);
 			}
 		},
@@ -18879,13 +18884,12 @@ function create_if_block$3(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[27](null);
+			/*div_binding*/ ctx[28](null);
 		}
 	};
 }
 
 function create_fragment$d(ctx) {
-	let show_if;
 	let current_block_type_index;
 	let if_block0;
 	let t;
@@ -18897,8 +18901,7 @@ function create_fragment$d(ctx) {
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
-		if (show_if == null) show_if = !!isPreview();
-		if (show_if) return 0;
+		if (!/*isOnSite*/ ctx[14]) return 0;
 		if (/*useBreakPoint*/ ctx[0]) return 1;
 		return 2;
 	}
@@ -19028,8 +19031,11 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	const { brandKit } = useBrandKit();
 
+	// falseが明示的に指定されている場合以外はtrueにする
+	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
+
 	// モーダル背景の設定
-	placement && placement.backgroundOverlay !== undefined;
+	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
 
 	let backgroundOverlay = DefaultModalPlacement.backgroundOverlay;
 	let backgroundOverlayPC = DefaultModalPlacement.backgroundOverlay;
@@ -19059,20 +19065,20 @@ function instance$d($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
-		if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
-		if ('breakPoint' in $$props) $$invalidate(16, breakPoint = $$props.breakPoint);
-		if ('elasticity' in $$props) $$invalidate(17, elasticity = $$props.elasticity);
+		if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(17, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(18, elasticity = $$props.elasticity);
 		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('props' in $$props) $$invalidate(18, props = $$props.props);
-		if ('closeEventName' in $$props) $$invalidate(19, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(20, closeEventValue = $$props.closeEventValue);
+		if ('props' in $$props) $$invalidate(19, props = $$props.props);
+		if ('closeEventName' in $$props) $$invalidate(20, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(21, closeEventValue = $$props.closeEventValue);
 		if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
-		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 1572864) {
-			$$invalidate(24, close = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
+			$$invalidate(25, close = () => {
 				const onClose = { operation: 'closeApp', args: ['button'] };
 
 				if (closeEventName) {
@@ -19083,8 +19089,11 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
 			{
+				if (isOnSite && isExistBackgroundOverlayValue) {
+					$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
+				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundOverlay;
@@ -19095,29 +19104,29 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
 			{
 				if (placement && placement.backgroundClick) {
-					$$invalidate(21, backgroundClickFunction = placement.backgroundClick);
+					$$invalidate(22, backgroundClickFunction = placement.backgroundClick);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundClick;
 
 					if (pc) {
-						$$invalidate(22, backgroundClickFunctionPC = pc);
+						$$invalidate(23, backgroundClickFunctionPC = pc);
 					}
 
 					const sp = breakPoint?.SP?.placement?.backgroundClick;
 
 					if (sp) {
-						$$invalidate(23, backgroundClickFunctionSP = sp);
+						$$invalidate(24, backgroundClickFunctionSP = sp);
 					}
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 3670016) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
 			$$invalidate(13, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -19127,7 +19136,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 5767168) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
 			$$invalidate(12, backgroundClickPC = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -19137,7 +19146,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 9961472) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
 			$$invalidate(11, backgroundClickSP = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -19147,12 +19156,16 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 98313) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
 				let position = DefaultModalPlacement.position;
 
+				if (isOnSite && placement && placement.position !== null) {
+					position = placement.position;
+				}
+
 				let positionStyle = getPositionStyle(position);
 
 				if (!useBreakPoint) {
@@ -19166,6 +19179,16 @@ function instance$d($$self, $$props, $$invalidate) {
 				$$invalidate(3, transforms = []);
 
 				DEVICE_IDS.forEach(deviceId => {
+					if (isOnSite && useBreakPoint) {
+						const positionWithBp = breakPoint[deviceId]?.placement?.position;
+
+						transforms.push({
+							query: DEVICE_QUERIES[deviceId],
+							...getTransform(positionWithBp)
+						});
+
+						positionStyle = getPositionStyle(positionWithBp);
+					}
 
 					const positionVariables = stringifyStyleObj(formatObjectKey({
 						obj: parseStyle(positionStyle),
@@ -19181,11 +19204,15 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
 			// 表示位置の調整のスタイルを設定
 			{
 				let margin = DefaultModalPlacement.margin;
 
+				if (isOnSite && placement && placement.margin !== null) {
+					margin = placement.margin;
+				}
+
 				let marginStyle = getMarginStyle(margin);
 
 				if (!useBreakPoint) {
@@ -19193,6 +19220,10 @@ function instance$d($$self, $$props, $$invalidate) {
 				}
 
 				DEVICE_IDS.forEach(deviceId => {
+					if (isOnSite && useBreakPoint) {
+						const marginWithBp = breakPoint[deviceId]?.placement?.margin;
+						marginStyle = getMarginStyle(marginWithBp);
+					}
 
 					const marginVariables = stringifyStyleObj(formatObjectKey({
 						obj: parseStyle(marginStyle),
@@ -19205,33 +19236,11 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*elasticity, useBreakPoint, breakPoint*/ 196609) {
-			// 拡大方法のスタイルを設定
-			{
-				let elasticStyle = ElasticityStyle['none' ];
-
-				if (!useBreakPoint) {
-					modalStyles.add(elasticStyle);
-				}
-
-				DEVICE_IDS.forEach(deviceId => {
-
-					const elasticityVariables = stringifyStyleObj(formatObjectKey({
-						obj: parseStyle(elasticStyle),
-						prefix: '--modal-bp-',
-						suffix: `-${deviceId.toLowerCase()}`
-					}));
-
-					modalStyles.add(elasticityVariables);
-				});
-			}
-		}
-
-		if ($$self.$$.dirty & /*close*/ 16777216) {
+		if ($$self.$$.dirty & /*close*/ 33554432) {
 			$$invalidate(10, handle_keydown = handleKeydown({ Escape: close }));
 		}
 
-		if ($$self.$$.dirty & /*props*/ 262144) {
+		if ($$self.$$.dirty & /*props*/ 524288) {
 			$$invalidate(9, style = objToStyle({
 				width: props.width,
 				...toCssOverflow(props),
@@ -19264,6 +19273,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		backgroundClickSP,
 		backgroundClickPC,
 		backgroundClick,
+		isOnSite,
 		modalStyles,
 		placement,
 		breakPoint,
@@ -19293,13 +19303,13 @@ class Modal extends SvelteComponent {
 			safe_not_equal,
 			{
 				useBreakPoint: 0,
-				placement: 15,
-				breakPoint: 16,
-				elasticity: 17,
+				placement: 16,
+				breakPoint: 17,
+				elasticity: 18,
 				animation: 1,
-				props: 18,
-				closeEventName: 19,
-				closeEventValue: 20,
+				props: 19,
+				closeEventName: 20,
+				closeEventValue: 21,
 				layerId: 2
 			},
 			add_css$9
@@ -20913,6 +20923,312 @@ class ClipCopy extends SvelteComponent {
 	}
 }
 
+/**
+ * モーダル(ポップアップ)に関連するコードの管理
+ *
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
+ */
+/**
+ * アクションが表示 (show) された後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onShow(fn) {
+    let { onShowHandlers } = getInternalHandlers();
+    if (!onShowHandlers) {
+        onShowHandlers = [];
+    }
+    onShowHandlers.push(fn);
+    setInternalHandlers({ onShowHandlers });
+}
+/**
+ * アクションがクローズ (close) される前にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onClose(fn) {
+    let { onCloseHandlers } = getInternalHandlers();
+    if (!onCloseHandlers) {
+        onCloseHandlers = [];
+    }
+    onCloseHandlers.push(fn);
+    setInternalHandlers({ onCloseHandlers });
+}
+/**
+ * アクションのステートが変更された (changeState) 後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onChangeState(fn) {
+    let { onChangeStateHandlers } = getInternalHandlers();
+    if (!onChangeStateHandlers) {
+        onChangeStateHandlers = [];
+    }
+    onChangeStateHandlers.push(fn);
+    setInternalHandlers({ onChangeStateHandlers });
+}
+/**
+ * アクションを表示する
+ *
+ * @public
+ */
+function showAction() {
+    const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
+    window.dispatchEvent(event);
+}
+/**
+ * アクションを閉じる
+ *
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
+ *
+ * @public
+ */
+function closeAction(trigger = 'none') {
+    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
+    window.dispatchEvent(event);
+}
+/**
+ * アクションに CSS を適用する
+ *
+ * @param css - 適用する CSS
+ *
+ * @returns 適用された style 要素を返す Promise
+ *
+ * @public
+ */
+async function applyCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        const shadowRoot = getActionRoot();
+        if (!shadowRoot)
+            return;
+        shadowRoot.append(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+async function fixFontFaceIssue(href, cssRules) {
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(cssRules);
+    const rules = [];
+    const fixedRules = [];
+    Array.from(css.cssRules).forEach(cssRule => {
+        if (cssRule.type !== 5) {
+            rules.push(cssRule.cssText);
+        }
+        // type 5 is @font-face
+        const split = href.split('/');
+        const stylePath = split.slice(0, split.length - 1).join('/');
+        const cssText = cssRule.cssText;
+        const newCssText = cssText.replace(
+        // relative paths
+        /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
+        if (cssText === newCssText)
+            return;
+        fixedRules.push(newCssText);
+    });
+    return [rules.join('\n'), fixedRules.join('\n')];
+}
+/**
+ * アクションにグローバルなスタイルを読み込む
+ *
+ * @param href - style ファイルのリンク URL
+ *
+ * @public
+ */
+async function loadStyle(href) {
+    const sr = getActionRoot();
+    if (!sr)
+        return;
+    let cssRules = '';
+    try {
+        const res = await fetch(href);
+        cssRules = await res.text();
+    }
+    catch (_) {
+        // pass
+    }
+    if (!cssRules)
+        return;
+    // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(rules);
+    const fontFaceCss = new CSSStyleSheet();
+    // @ts-ignore
+    await fontFaceCss.replace(fontFaceRules);
+    // @ts-ignore
+    sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
+    // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    // @ts-ignore
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
+}
+// @internal
+function getCssVariables(data) {
+    return Object.entries(data)
+        .filter(([key, value]) => {
+        return ['string', 'number'].includes(typeof value) && key.startsWith('--');
+    })
+        .map(([key, value]) => `${key}:${value}`)
+        .join(';');
+}
+/**
+ * アクションのルートの DOM 要素を取得する
+ *
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
+ *
+ * @public
+ */
+function getActionRoot() {
+    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (!root?.shadowRoot) {
+        return null;
+    }
+    return root.shadowRoot;
+}
+/** @internal */
+function ensureActionRoot() {
+    const systemConfig = getSystem();
+    const rootAttrs = {
+        class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
+        [`data-${KARTE_ACTION_RID}`]: actionId,
+        [`data-${KARTE_ACTION_SHORTEN_ID}`]: systemConfig.shortenId
+            ? systemConfig.shortenId
+            : ALL_ACTION_SHORTEN_ID,
+        style: { display: 'block' },
+    };
+    let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (el == null) {
+        el = h('div', rootAttrs);
+        document.body.appendChild(el);
+    }
+    const isShadow = !!document.body.attachShadow;
+    if (isShadow) {
+        return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
+    }
+    else {
+        return el;
+    }
+}
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const show = showAction;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const close = closeAction;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const ensureModalRoot = ensureActionRoot;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createApp(App, options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+    context: { api_key: '' },
+}) {
+    let app = null;
+    const close = () => {
+        if (app) {
+            {
+                // @ts-ignore -- Svelte5 では $destroy は存在しない
+                app.$destroy();
+            }
+            app = null;
+        }
+    };
+    const appArgs = {
+        target: null,
+        props: {
+            send: options.send,
+            publish: options.publish,
+            close,
+            data: {
+                ...options.props,
+                ...options.variables,
+            },
+        },
+    };
+    const win = ensureModalRoot();
+    appArgs.target = win;
+    return {
+        close,
+        show: () => {
+            if (app) {
+                return;
+            }
+            options.send('message_open');
+            app = // @ts-ignore -- Svelte5 では `App` はクラスではない
+                    new App(appArgs);
+        },
+    };
+}
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
+    const root = ensureModalRoot();
+    if (root.querySelector('.__krt-fog')) {
+        return { fog: null, close: () => { } };
+    }
+    const fog = document.createElement('div');
+    fog.className = '__krt-fog';
+    Object.assign(fog.style, {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        'z-index': zIndex,
+        'background-color': color,
+        opacity,
+    });
+    const close = () => {
+        onclick();
+        fog.remove();
+    };
+    fog.onclick = close;
+    root.appendChild(fog);
+    return { fog, close };
+}
+
 /* src/components-flex/state/Header.svelte generated by Svelte v3.53.1 */
 
 function create_if_block$2(ctx) {
@@ -21317,6 +21633,184 @@ const ROUND_STYLES = {
     },
 };
 
+const createProp = (key, type, suggestions = [], priority = 0, defaultValue = undefined) => {
+    return {
+        key,
+        type,
+        priority,
+        suggestions: suggestions,
+        default: defaultValue,
+    };
+};
+const byObj = (obj) => {
+    return Object.keys(obj);
+};
+const overflowProps = [
+    createProp('overflow', 'string', ['hidden', 'visible', 'scroll', 'auto']),
+];
+const borderProps = [
+    createProp('borderTopWidth', 'string'),
+    createProp('borderLeftWidth', 'string'),
+    createProp('borderRightWidth', 'string'),
+    createProp('borderBottomWidth', 'string'),
+    createProp('borderColor', 'color'),
+];
+const radiusProps = [
+    createProp('borderTopLeftRadius', 'string'),
+    createProp('borderTopRightRadius', 'string'),
+    createProp('borderBottomLeftRadius', 'string'),
+    createProp('borderBottomRightRadius', 'string'),
+];
+const paddingProps = [
+    createProp('paddingTop', 'string'),
+    createProp('paddingLeft', 'string'),
+    createProp('paddingRight', 'string'),
+    createProp('paddingBottom', 'string'),
+];
+const backgroundColorProps = [
+    createProp('backgroundColor', 'string'),
+];
+const backgroundImageProps = [
+    createProp('backgroundImageUrl', 'url'),
+];
+const flexComponentSchemes = {
+    FlexAvatar: {
+        props: [
+            createProp('size', 'string', byObj(AVATAR_SIZE), 10),
+            createProp('width', 'string', [], 5),
+            createProp('height', 'string', [], 5),
+            createProp('shape', 'string', byObj(AVATAR_SHAPE), 10),
+            createProp('image', 'url', [], 99),
+            // createProp('caption', 'string'),
+            createProp('alt', 'string', [], 50),
+            // TODO: clickable
+            ...borderProps,
+        ],
+    },
+    FlexButton: {
+        props: [
+            createProp('size', 'string', byObj(BUTTON_SIZE), 50),
+            createProp('label', 'string', [], 99),
+            createProp('paddingLeft', 'string'),
+            createProp('paddingRight', 'string'),
+            createProp('fontSize', 'string'),
+            createProp('theme', 'string', byObj(BUTTON_THEME), 50),
+            createProp('variant', 'string', byObj(BUTTON_VARIANT)),
+            createProp('color', 'color', [], 5),
+            createProp('backgroundColor', 'string', [], 5),
+            createProp('borderColor', 'string', [], 5),
+            createProp('fontWeight', 'string', ['normal', 'bold']),
+            createProp('round', 'string', byObj(BUTTON_ROUND)),
+            createProp('width', 'string', [], 10),
+            createProp('wrap', 'string', ['wrap', 'nowrap']),
+            // TODO: clickable
+            ...radiusProps,
+        ],
+    },
+    FlexClipCopy: {
+        props: [
+            createProp('content', 'string'),
+            createProp('copiedEventName', 'string'),
+            createProp('noneTooltip', 'boolean'),
+        ],
+    },
+    FlexCloseButton: {
+        props: [
+            createProp('size', 'number'),
+            createProp('placement', 'string', byObj(CLOSE_BUTTON_PLACEMENT), 99),
+            createProp('round', 'string', byObj(CLOSE_BUTTON_ROUND)),
+            createProp('bordered', 'boolean'),
+            createProp('color', 'color'),
+            createProp('backgroundColor', 'color'),
+            createProp('label', 'string'),
+            createProp('labelColor', 'color'),
+            createProp('labelPlacement', 'string', byObj(CLOSE_BUTTON_LABEL_PLACEMENT)),
+            createProp('top', 'string'),
+            createProp('left', 'string'),
+            createProp('right', 'string'),
+            createProp('bottom', 'string'),
+        ],
+    },
+    FlexCountDown: {
+        props: [
+            createProp('timeLimit', 'date_string', [], 99),
+            // createProp('timeLimit', 'date_string'),
+        ],
+    },
+    FlexIcon: {
+        props: [
+            createProp('variant', 'string', byObj(ICON_VARIANTS), 99),
+            createProp('size', 'string', byObj(ICON_SIZE), 50),
+            createProp('color', 'color', [], 5),
+            createProp('width', 'string', [], 10),
+            createProp('height', 'string', [], 10),
+        ],
+    },
+    FlexImage: {
+        props: [
+            createProp('image', 'url', [], 99),
+            createProp('aspect', 'string', Object.keys(ASPECT_VARIANT).map(key => ASPECT_VARIANT[key].getProps().aspect), 98),
+            createProp('width', 'string', [], 5),
+            createProp('height', 'string', [], 5),
+            createProp('shape', 'string', byObj(IMAGE_ROUND_SHAPE), 10),
+        ],
+    },
+    FlexLayout: {
+        props: [
+            createProp('display', 'string', ['flex', 'inline-flex', 'block']),
+            createProp('direction', 'string', ['row', 'column', 'row-reverse', 'column-reverse'], 10),
+            createProp('align', 'string', ['center', 'stretch', 'flex-start', 'flex-end'], 10),
+            createProp('justify', 'string', ['center', 'flex-start', 'flex-end', 'space-between'], 10),
+            createProp('gap', 'string', [], 10),
+            createProp('rowGap', 'string', [], 10),
+            createProp('columnGap', 'string', [], 10),
+            createProp('width', 'string', [], 5),
+            ...overflowProps,
+            ...borderProps,
+            ...radiusProps,
+            ...backgroundColorProps,
+            ...backgroundImageProps,
+            ...paddingProps,
+        ],
+    },
+    FlexList: {
+        props: [
+            createProp('gap', 'string', [], 10),
+            createProp('borderWidth', 'string', [], 10),
+            createProp('borderStyle', 'string', [], 10),
+            createProp('borderColor', 'string', [], 10),
+            createProp('itemPaddingTop', 'string', [], 5),
+            createProp('itemPaddingLeft', 'string', [], 5),
+            createProp('itemPaddingRight', 'string', [], 5),
+            createProp('itemPaddingBottom', 'string', [], 5),
+            createProp('itemGap', 'string', [], 5),
+        ],
+    },
+    FlexListItem: {
+        props: [
+            createProp('gap', 'number', [], 10),
+            // TODO: clickable
+        ],
+    },
+    FlexText: {
+        props: [
+            createProp('content', 'string', [], 99),
+            createProp('theme', 'string', byObj(TEXT_THEME), 50),
+            createProp('size', 'string', byObj(LAYER_TEXT_SIZE), 50),
+            createProp('align', 'string', [], 5),
+            createProp('fontStyle', 'string', [], 5),
+            createProp('fontSize', 'string', [], 5),
+            createProp('fontWeight', 'string', [], 5),
+            createProp('lineHeight', 'string', [], 5),
+            createProp('color', 'string', [], 5),
+            createProp('width', 'string', [], 10),
+            createProp('fontFamilyVariant', 'string', byObj(FONT_FAMILY_VARIANT), 10),
+            createProp('fontFamily', 'string', []),
+            // TODO: clickable
+        ],
+    },
+};
+
 var sdk = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ACTION_HOOK_LABEL: ACTION_HOOK_LABEL,
@@ -21457,11 +21951,13 @@ var sdk = /*#__PURE__*/Object.freeze({
   create: create,
   createApp: createApp,
   createFog: createFog,
+  createProp: createProp,
   destroy: destroy,
   destroyAction: destroyAction,
   ensureModalRoot: ensureModalRoot,
   eventHandlers: eventHandlers,
   finalize: finalize,
+  flexComponentSchemes: flexComponentSchemes,
   formData: formData,
   getActionRoot: getActionRoot,
   getAnsweredQuestion: getAnsweredQuestion,
@@ -21531,7 +22027,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (12:0) {#if component}
+// (13:0) {#if component}
 function create_if_block(ctx) {
 	let switch_instance;
 	let switch_instance_anchor;
@@ -21619,7 +22115,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (19:4) {#if option.children}
+// (20:4) {#if option.children}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -21710,7 +22206,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (20:6) {#each option.children as child}
+// (21:6) {#each option.children as child}
 function create_each_block(ctx) {
 	let thumbnailpreview;
 	let current;
@@ -21747,7 +22243,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (13:2) <svelte:component     this={component}     props={'previewProps' in option && typeof option.previewProps !== 'undefined'       ? option.previewProps       : option.props}   >
+// (14:2) <svelte:component     this={component}     props={'previewProps' in option && typeof option.previewProps !== 'undefined'       ? option.previewProps       : option.props}   >
 function create_default_slot(ctx) {
 	let if_block_anchor;
 	let current;
@@ -21868,8 +22364,9 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let component;
-	let { option } = $$props;
+	let { option = {} } = $$props;
 	let { customBrandKit = undefined } = $$props;
+	console.log('option', option);
 
 	const getComponent = key => {
 		return key in sdk ? sdk[key] : null;
@@ -21898,4 +22395,4 @@ class ThumbnailPreview extends SvelteComponent {
 	}
 }
 
-export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex, 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, Icon as FlexIcon, Image as FlexImage, FlexItem, 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, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement, ImageBlock, 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$1 as List, ListBackgroundTypes, ListDirections, ListItem$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide, SlideItem, State$1 as State, StateItem$1 as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as 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$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex, 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, Icon as FlexIcon, Image as FlexImage, FlexItem, 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, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement, ImageBlock, 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$1 as List, ListBackgroundTypes, ListDirections, ListItem$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide, SlideItem, State$1 as State, StateItem$1 as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss$1 as applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close$1 as close, closeAction$1 as closeAction, collection$1 as collection, create, createApp$1 as createApp, createFog$1 as createFog, createProp, destroy, destroyAction, ensureModalRoot$1 as ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot$1 as getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables$1 as getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle$1 as loadStyle, logger, onChangeState$1 as onChangeState, onClose$1 as onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow$1 as onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState$1 as setState, setVariables, show$1 as show, showAction$1 as showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget };