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

package/dist/svelte5/index.front2.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,6 +7651,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,
@@ -7779,11 +7969,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,
@@ -7849,7 +8041,7 @@ function ThumbnailPreview($$anchor, $$props) {
 	$.push($$props, false);
 
 	const component = $.mutable_state();
-	let option = $.prop($$props, 'option', 8);
+	let option = $.prop($$props, 'option', 24, () => ({}));
 	let customBrandKit = $.prop($$props, 'customBrandKit', 8, undefined);
 
 	const getComponent = (key) => {