@plaidev/karte-action-sdk 1.1.265 → 1.1.266-29065938.e3ec46c6

package/dist/svelte5/index.es.js

@@ -1640,57 +1640,12 @@ const handleState = (event) => {
         });
     }
 };
-/**
- * アクションが表示 (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() {
+function showAction$1() {
     const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
     window.dispatchEvent(event);
 }
@@ -1701,114 +1656,10 @@ function showAction() {
  *
  * @public
  */
-function closeAction(trigger = 'none') {
+function closeAction$1(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 createModal(App, options = {
     send: () => { },
@@ -1901,7 +1752,7 @@ function createModal(App, options = {
             return;
         }
         const props = {
-            target: ensureActionRoot(!false),
+            target: ensureActionRoot$1(!false),
             hydrate: false,
             props: {
                 send: options.send,
@@ -2019,7 +1870,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}`,
@@ -2042,115 +1893,6 @@ function ensureActionRoot(useShadow = true) {
         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 -- Svelte3 では `unmount` は存在しない
-                svelte.unmount(app);
-            }
-            app = null;
-        }
-    };
-    const appArgs = {
-        target: null,
-        props: {
-            send: options.send,
-            publish: options.publish,
-            close,
-            data: {
-                ...options.props,
-                ...options.variables,
-            },
-        },
-    };
-    {
-        const win = ensureModalRoot(true);
-        appArgs.target = win;
-    }
-    return {
-        close,
-        show: () => {
-            if (app) {
-                return;
-            }
-            options.send('message_open');
-            app =                         svelte.mount(App, appArgs)
-                ;
-        },
-    };
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
-    const root = ensureModalRoot(false);
-    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 };
-}
 
 /**
  * スクリプト接客が利用するコードの管理
@@ -2301,70 +2043,312 @@ function create(App, options) {
             onDestroyWidgetHandlers.forEach(h => h(actionProps));
         }
     };
-    // ここからメインの処理
-    setSystem({
-        // @ts-ignore
-        apiKey: data.api_key || null,
-        collection_endpoint: options.context.collection_endpoint,
-        shortenId: data.shorten_id || null,
-        campaignId: data.campaign_id || null,
-    });
-    setActionRunnerContext(options.context);
-    window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
-    window.addEventListener('beforeunload', dispatchDestroyEvent, false);
-    let modalCleanup = NOOP;
-    if (options.karteTemplate?.template_type === 'script' ||
-        options.karteTemplate?.template_content_types?.includes('script')) {
-        runScript$1(options);
+    // ここからメインの処理
+    setSystem({
+        // @ts-ignore
+        apiKey: data.api_key || null,
+        collection_endpoint: options.context.collection_endpoint,
+        shortenId: data.shorten_id || null,
+        campaignId: data.campaign_id || null,
+    });
+    setActionRunnerContext(options.context);
+    window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+    window.addEventListener('beforeunload', dispatchDestroyEvent, false);
+    let modalCleanup = NOOP;
+    if (options.karteTemplate?.template_type === 'script' ||
+        options.karteTemplate?.template_content_types?.includes('script')) {
+        runScript$1(options);
+    }
+    else {
+        modalCleanup = createModal(App, options);
+    }
+    return () => {
+        modalCleanup();
+        window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+    };
+}
+/**
+ * アクションの破棄する
+ *
+ * @public
+ */
+function destroyAction() {
+    setDestroyed(true);
+    dispatchDestroyEvent();
+}
+/**
+ * アクションが作成 (create) される前にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onCreate(fn) {
+    let { onCreateHandlers } = getInternalHandlers();
+    if (!onCreateHandlers) {
+        onCreateHandlers = [];
+    }
+    onCreateHandlers.push(fn);
+    setInternalHandlers({ onCreateHandlers });
+}
+/**
+ * アクションが破棄 (destroy) される前にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onDestroy(fn) {
+    let { onDestroyHandlers } = getInternalHandlers();
+    if (!onDestroyHandlers) {
+        onDestroyHandlers = [];
+    }
+    onDestroyHandlers.push(fn);
+    setInternalHandlers({ onDestroyHandlers });
+}
+// -------- The following codes are deprecated --------
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const showModal = create;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function destroy() {
+    setDestroyed(true);
+    dispatchDestroyEvent();
+}
+
+/**
+ * モーダル(ポップアップ)に関連するコードの管理
+ *
+ * アクションの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 {
-        modalCleanup = createModal(App, options);
+        return el;
     }
-    return () => {
-        modalCleanup();
-        window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
-    };
 }
 /**
- * アクションの破棄する
+ * 非推奨
  *
- * @public
+ * @deprecated 非推奨
+ *
+ * @internal
  */
-function destroyAction() {
-    setDestroyed(true);
-    dispatchDestroyEvent();
-}
+const show = showAction;
 /**
- * アクションが作成 (create) される前にフックする関数
+ * 非推奨
  *
- * @param fn - 呼び出されるフック関数
+ * @deprecated 非推奨
  *
- * @public
+ * @internal
  */
-function onCreate(fn) {
-    let { onCreateHandlers } = getInternalHandlers();
-    if (!onCreateHandlers) {
-        onCreateHandlers = [];
-    }
-    onCreateHandlers.push(fn);
-    setInternalHandlers({ onCreateHandlers });
-}
+const close = closeAction;
 /**
- * アクションが破棄 (destroy) される前にフックする関数
+ * 非推奨
  *
- * @param fn - 呼び出されるフック関数
+ * @deprecated 非推奨
  *
- * @public
+ * @internal
  */
-function onDestroy(fn) {
-    let { onDestroyHandlers } = getInternalHandlers();
-    if (!onDestroyHandlers) {
-        onDestroyHandlers = [];
-    }
-    onDestroyHandlers.push(fn);
-    setInternalHandlers({ onDestroyHandlers });
-}
-// -------- The following codes are deprecated --------
+const ensureModalRoot = ensureActionRoot;
 /**
  * 非推奨
  *
@@ -2372,7 +2356,51 @@ function onDestroy(fn) {
  *
  * @internal
  */
-const showModal = create;
+function createApp(App, options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+    context: { api_key: '' },
+}) {
+    let app = null;
+    const close = () => {
+        if (app) {
+            {
+                // @ts-ignore -- Svelte3 では `unmount` は存在しない
+                svelte.unmount(app);
+            }
+            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 -- Svelte3 では `mount` は存在しない
+                    svelte.mount(App, appArgs)
+                ;
+        },
+    };
+}
 /**
  * 非推奨
  *
@@ -2380,9 +2408,30 @@ const showModal = create;
  *
  * @internal
  */
-function destroy() {
-    setDestroyed(true);
-    dispatchDestroyEvent();
+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 };
 }
 
 const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
@@ -2792,13 +2841,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
 });
 
@@ -5202,11 +5251,11 @@ const IMAGE_ROUND_STYLES = {
     },
 };
 
-var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
+var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
 
 const $$css$g = {
-	hash: 'svelte-gzaieg',
-	code: '.image.svelte-gzaieg {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.image-img.svelte-gzaieg {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
+	hash: 'svelte-rewdem',
+	code: '.image.svelte-rewdem {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}.image-img.svelte-rewdem {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
 };
 
 function Image($$anchor, $$props) {
@@ -5221,6 +5270,7 @@ function Image($$anchor, $$props) {
 
 	const { attributes, element, handleClick } = useClickable(props());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
+	const width = props().width ?? '100%';
 
 	$.legacy_pre_effect(
 		() => (
@@ -5230,7 +5280,8 @@ function Image($$anchor, $$props) {
 		() => {
 			$.set(style, objToStyle({
 				...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
-				width: props().width ?? '100%',
+				width,
+				flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
 				height: props().height ?? 'auto',
 				aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
 				...toCssCommon(props()),
@@ -5257,7 +5308,7 @@ function Image($$anchor, $$props) {
 				style: $.get(style),
 				'data-layer-id': layerId()
 			},
-			'svelte-gzaieg'
+			'svelte-rewdem'
 		));
 
 		$.event('click', $$element, handleClick);
@@ -5322,8 +5373,8 @@ function Layout($$anchor, $$props) {
 				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()),
@@ -6296,17 +6347,17 @@ function Modal($$anchor, $$props) {
 	const backgroundClickSP = $.mutable_state();
 	const handle_keydown = $.mutable_state();
 	const visible = $.mutable_state();
-	const style = $.mutable_state();
 	let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
 	let placement = $.prop($$props, 'placement', 8);
 	let breakPoint = $.prop($$props, 'breakPoint', 8);
-	let elasticity = $.prop($$props, 'elasticity', 8);
+	$.prop($$props, 'elasticity', 8);
 	let animation = $.prop($$props, 'animation', 8, 'none');
 	let props = $.prop($$props, 'props', 24, () => ({}));
 	let closeEventName = $.prop($$props, 'closeEventName', 8, '');
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
+	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6352,7 +6403,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6458,7 +6509,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (placement() && placement().position !== null) {
+			if (!isCanvasPreview && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6475,7 +6526,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (useBreakPoint()) {
+				if (!isCanvasPreview && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6505,12 +6556,13 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(placement()),
 			$.deep_read_state(useBreakPoint()),
 			$.deep_read_state(breakPoint()),
-			parseStyle
+			$.deep_read_state(props()),
+			toCssBorder
 		),
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (placement() && placement().margin !== null) {
+			if (!isCanvasPreview && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6521,7 +6573,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (useBreakPoint()) {
+				if (!isCanvasPreview && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6535,38 +6587,18 @@ function Modal($$anchor, $$props) {
 
 				modalStyles.add(marginVariables);
 			});
-		}
-	);
-
-	$.legacy_pre_effect(
-		() => (
-			$.deep_read_state(elasticity()),
-			$.deep_read_state(useBreakPoint()),
-			$.deep_read_state(breakPoint()),
-			parseStyle
-		),
-		() => {
-			let elasticStyle = ElasticityStyle[elasticity()];
-
-			if (!useBreakPoint()) {
-				modalStyles.add(elasticStyle);
-			}
-
-			DEVICE_IDS.forEach((deviceId) => {
-				if (useBreakPoint()) {
-					const elasticityWithBp = breakPoint()[deviceId]?.elasticity;
-
-					elasticStyle = ElasticityStyle[elasticityWithBp];
-				}
 
-				const elasticityVariables = stringifyStyleObj(formatObjectKey({
-					obj: parseStyle(elasticStyle),
-					prefix: '--modal-bp-',
-					suffix: `-${deviceId.toLowerCase()}`
-				}));
-
-				modalStyles.add(elasticityVariables);
+			const propsStyle = objToStyle({
+				width: props().width,
+				...toCssOverflow(props()),
+				...toCssShadow(props()),
+				...toCssRadius(props()),
+				...toCssBackgroundImage(props()),
+				...toCssBackgroundColor(props()),
+				...toCssBorder(props())
 			});
+
+			modalStyles.add(propsStyle);
 		}
 	);
 
@@ -6582,24 +6614,6 @@ function Modal($$anchor, $$props) {
 		$.set(visible, false);
 	});
 
-	$.legacy_pre_effect(
-		() => (
-			$.deep_read_state(props()),
-			toCssBorder
-		),
-		() => {
-			$.set(style, objToStyle({
-				width: props().width,
-				...toCssOverflow(props()),
-				...toCssShadow(props()),
-				...toCssRadius(props()),
-				...toCssBackgroundImage(props()),
-				...toCssBackgroundColor(props()),
-				...toCssBorder(props())
-			}));
-		}
-	);
-
 	$.legacy_pre_effect_reset();
 	$.init();
 
@@ -6612,6 +6626,7 @@ function Modal($$anchor, $$props) {
 	var node = $.first_child(fragment);
 
 	{
+		var consequent = ($$anchor) => {};
 
 		var alternate = ($$anchor, $$elseif) => {
 			{
@@ -6672,7 +6687,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			$$render(alternate, false);
+			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6698,10 +6713,7 @@ function Modal($$anchor, $$props) {
 						'modal',
 						useBreakPoint() ? 'modal-bp' : ''
 					].join(' ')),
-					() => [
-						Array.from(modalStyles).join(';'),
-						$.get(style)
-					].join(' ')
+					() => Array.from(modalStyles).join(';')
 				],
 				$.derived_safe_equal
 			);
@@ -7639,4 +7651,182 @@ const ROUND_STYLES = {
     },
 };
 
-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, 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, 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, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$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 };
+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
+        ],
+    },
+};
+
+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, 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, 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, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, 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 };