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

package/dist/svelte5/hydrate/index.es.js

@@ -1,6 +1,6 @@
 import { writable, get } from 'svelte/store';
 import * as svelte from 'svelte';
-import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, getContext, setContext } from 'svelte';
+import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, getContext, setContext, createEventDispatcher } from 'svelte';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
@@ -20,6 +20,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 --------
 /**
  * 非推奨
@@ -1599,57 +1604,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);
 }
@@ -1660,114 +1620,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: () => { },
@@ -1863,7 +1719,7 @@ function createModal(App, options = {
             return;
         }
         const props = {
-            target: ensureActionRoot(!true),
+            target: ensureActionRoot$1(!true),
             hydrate: true,
             props: {
                 send: options.send,
@@ -1955,7 +1811,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}`,
@@ -1978,164 +1834,53 @@ 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 = {
+/** @internal */
+async function runScript$1(options = {
     send: () => { },
     publish: () => { },
     props: {},
     variables: {},
     localVariablesQuery: undefined,
-    context: { api_key: '' },
+    karteTemplate: {},
+    context: { api_key: '', collection_endpoint: undefined },
 }) {
-    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,
-            },
-        },
+    if (!options.onCreate)
+        return;
+    let data = getVariables();
+    initialize({ send: options.send, initialState: data.initial_state });
+    initActionTable(options.localVariablesQuery);
+    const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
+    if (!success)
+        return;
+    // Action Tableの取得結果を反映する
+    data = getVariables();
+    const actionProps = {
+        send: options.send,
+        publish: options.publish,
+        data,
     };
-    {
-        const win = ensureModalRoot(false);
-        appArgs.target = win;
-        appArgs.hydrate = true;
+    options.send('script_fired');
+    // 旧Widget API IFの処理
+    const { onCreateHandlers } = getInternalHandlers();
+    if (onCreateHandlers) {
+        onCreateHandlers.forEach(h => {
+            h({ send: options.send, publish: options.publish, data });
+            console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
+        });
     }
-    return {
-        close,
-        show: () => {
-            if (app) {
-                return;
-            }
-            options.send('message_open');
-            app =                         svelte.hydrate(App, appArgs)
-                    
-                ;
-        },
-    };
+    options.onCreate(actionProps);
+    finalize();
 }
 /**
- * 非推奨
+ * ES Modules に対応していない JavaScript をページに読み込む
  *
- * @deprecated 非推奨
+ * @param src - JavaScript ファイルのリンク URL
  *
- * @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 };
-}
-
-/**
- * スクリプト接客が利用するコードの管理
- */
-/** @internal */
-async function runScript$1(options = {
-    send: () => { },
-    publish: () => { },
-    props: {},
-    variables: {},
-    localVariablesQuery: undefined,
-    karteTemplate: {},
-    context: { api_key: '', collection_endpoint: undefined },
-}) {
-    if (!options.onCreate)
-        return;
-    let data = getVariables();
-    initialize({ send: options.send, initialState: data.initial_state });
-    initActionTable(options.localVariablesQuery);
-    const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
-    if (!success)
-        return;
-    // Action Tableの取得結果を反映する
-    data = getVariables();
-    const actionProps = {
-        send: options.send,
-        publish: options.publish,
-        data,
-    };
-    options.send('script_fired');
-    // 旧Widget API IFの処理
-    const { onCreateHandlers } = getInternalHandlers();
-    if (onCreateHandlers) {
-        onCreateHandlers.forEach(h => {
-            h({ send: options.send, publish: options.publish, data });
-            console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
-        });
-    }
-    options.onCreate(actionProps);
-    finalize();
-}
-/**
- * ES Modules に対応していない JavaScript をページに読み込む
- *
- * @param src - JavaScript ファイルのリンク URL
- *
- * @public
+ * @public
  */
 async function loadGlobalScript(src) {
     return new Promise((resolve, reject) => {
@@ -2304,15 +2049,301 @@ function onDestroy(fn) {
     onDestroyHandlers.push(fn);
     setInternalHandlers({ onDestroyHandlers });
 }
-// -------- The following codes are deprecated --------
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const showModal = create;
+// -------- 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 {
+        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();
+    appArgs.target = win;
+    return {
+        close,
+        show: () => {
+            if (app) {
+                return;
+            }
+            options.send('message_open');
+            app = // @ts-ignore -- Svelte3 では `mount` は存在しない
+                    svelte.mount(App, appArgs)
+                ;
+        },
+    };
+}
 /**
  * 非推奨
  *
@@ -2320,9 +2351,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';
@@ -2732,13 +2784,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
 });
 
@@ -2783,7 +2835,7 @@ const LAYOUT_COMPONENT_NAMES = [
     'StateItem',
 ];
 
-var root_2$4 = $.template(`<link type="text/css" rel="stylesheet">`);
+var root_2$5 = $.template(`<link type="text/css" rel="stylesheet">`);
 
 function Header($$anchor, $$props) {
 	$.push($$props, false);
@@ -2819,7 +2871,7 @@ function Header($$anchor, $$props) {
 
 		{
 			var consequent = ($$anchor) => {
-				var link = root_2$4();
+				var link = root_2$5();
 
 				$.template_effect(() => $.set_attribute(link, 'href', $.get(googleFontUrl)));
 				$.append($$anchor, link);
@@ -2893,16 +2945,16 @@ function State($$anchor, $$props) {
 
 const STATE_ITEM_CONTEXT_KEY = Symbol();
 
-var root_1$8 = $.template(`<div class="state-item svelte-2qb6dm"></div> <!>`, 1);
+var root_1$9 = $.template(`<div class="state-item svelte-2qb6dm"></div> <!>`, 1);
 
-const $$css$m = {
+const $$css$n = {
 	hash: 'svelte-2qb6dm',
 	code: '.state-item.svelte-2qb6dm {position:absolute;display:none;}'
 };
 
 function StateItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$m);
+	$.append_styles($$anchor, $$css$n);
 
 	const [$$stores, $$cleanup] = $.setup_stores();
 	const $state = () => $.store_get(state, '$state', $$stores);
@@ -2922,7 +2974,7 @@ function StateItem($$anchor, $$props) {
 
 	{
 		var consequent = ($$anchor) => {
-			var fragment_1 = root_1$8();
+			var fragment_1 = root_1$9();
 			var div = $.first_child(fragment_1);
 			var node_1 = $.sibling(div, 2);
 
@@ -3430,16 +3482,16 @@ const AVATAR_SIZE_STYLES = {
     },
 };
 
-var root_1$7 = $.template(`<img class="avatar-image svelte-1krsdyx">`);
+var root_1$8 = $.template(`<img class="avatar-image svelte-1krsdyx">`);
 
-const $$css$l = {
+const $$css$m = {
 	hash: 'svelte-1krsdyx',
 	code: '.avatar.svelte-1krsdyx {display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0;}'
 };
 
 function Avatar($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$l);
+	$.append_styles($$anchor, $$css$m);
 
 	const style = $.mutable_state();
 	const imgStyle = $.mutable_state();
@@ -3511,7 +3563,7 @@ function Avatar($$anchor, $$props) {
 
 		$.event('click', $$element, handleClick);
 
-		var img = root_1$7();
+		var img = root_1$8();
 
 		$.template_effect(() => {
 			$.set_attribute(img, 'src', props().image);
@@ -4009,14 +4061,14 @@ const ICON_VARIANTS = {
     x_mark: IconXMark,
 };
 
-const $$css$k = {
+const $$css$l = {
 	hash: 'svelte-19rssou',
 	code: '.icon.svelte-19rssou {display:flex;align-items:center;overflow:hidden;width:auto;cursor:pointer;text-decoration:none;}'
 };
 
 function Icon($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$k);
+	$.append_styles($$anchor, $$css$l);
 
 	const style = $.mutable_state();
 	const IconComponent = $.mutable_state();
@@ -4280,17 +4332,17 @@ function darkenColor(color, percent) {
     return rgbToHex(r, g, b);
 }
 
-var root_2$3 = $.template(`<div class="button-icon svelte-o2gomt"><!></div>`);
-var root_1$6 = $.template(`<!> <span class="button-label"> </span>`, 1);
+var root_2$4 = $.template(`<div class="button-icon svelte-o2gomt"><!></div>`);
+var root_1$7 = $.template(`<!> <span class="button-label"> </span>`, 1);
 
-const $$css$j = {
+const $$css$k = {
 	hash: 'svelte-o2gomt',
 	code: '.button.svelte-o2gomt {display:inline-flex;gap:0.8em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;color:var(--color);border-color:var(--border-color);background-color:var(--bg-color);}.button.svelte-o2gomt:hover {background-color:var(--hover-bg-color);border-color:var(--hover-border-color);}.button-icon.svelte-o2gomt {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}'
 };
 
 function Button($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$j);
+	$.append_styles($$anchor, $$css$k);
 
 	const variables = $.mutable_state();
 	const style = $.mutable_state();
@@ -4410,12 +4462,12 @@ function Button($$anchor, $$props) {
 
 		$.event('click', $$element, handleClick);
 
-		var fragment_1 = root_1$6();
+		var fragment_1 = root_1$7();
 		var node_1 = $.first_child(fragment_1);
 
 		{
 			var consequent = ($$anchor) => {
-				var div = root_2$3();
+				var div = root_2$4();
 				var node_2 = $.child(div);
 
 				const expression = $.derived_safe_equal(() => ({
@@ -4551,17 +4603,17 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
     },
 };
 
-var root_2$2 = $.template(`<div class="button-outlined-icon svelte-38fju1"><!></div>`);
-var root_1$5 = $.template(`<!> <span class="button-outlined-label svelte-38fju1"> </span>`, 1);
+var root_2$3 = $.template(`<div class="button-outlined-icon svelte-38fju1"><!></div>`);
+var root_1$6 = $.template(`<!> <span class="button-outlined-label svelte-38fju1"> </span>`, 1);
 
-const $$css$i = {
+const $$css$j = {
 	hash: 'svelte-38fju1',
 	code: '.button-outlined.svelte-38fju1 {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:var(--bg-color);}.button-outlined.svelte-38fju1:hover {background-color:var(--hover-bg-color);}.button-outlined-icon.svelte-38fju1 {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em;}'
 };
 
 function ButtonOutlined($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$i);
+	$.append_styles($$anchor, $$css$j);
 
 	const variables = $.mutable_state();
 	const style = $.mutable_state();
@@ -4638,12 +4690,12 @@ function ButtonOutlined($$anchor, $$props) {
 
 		$.event('click', $$element, handleClick);
 
-		var fragment_1 = root_1$5();
+		var fragment_1 = root_1$6();
 		var node_1 = $.first_child(fragment_1);
 
 		{
 			var consequent = ($$anchor) => {
-				var div = root_2$2();
+				var div = root_2$3();
 				var node_2 = $.child(div);
 
 				const expression = $.derived_safe_equal(() => ({
@@ -4736,17 +4788,17 @@ const callback$2 = ({ brandKit }) => ({
 });
 const getButtonTextThemeStyles = getPropStyles(callback$2);
 
-var root_2$1 = $.template(`<div class="button-text-icon svelte-1xgvp8r"><!></div>`);
-var root_1$4 = $.template(`<!> <span class="button-text-label svelte-1xgvp8r"> </span>`, 1);
+var root_2$2 = $.template(`<div class="button-text-icon svelte-1xgvp8r"><!></div>`);
+var root_1$5 = $.template(`<!> <span class="button-text-label svelte-1xgvp8r"> </span>`, 1);
 
-const $$css$h = {
+const $$css$i = {
 	hash: 'svelte-1xgvp8r',
 	code: '.button-text.svelte-1xgvp8r {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border:0;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:rgba(255, 255, 255, 0);}.button-text.svelte-1xgvp8r:hover {background-color:var(--hover-bg-color);}.button-text-icon.svelte-1xgvp8r {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}'
 };
 
 function ButtonText($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$h);
+	$.append_styles($$anchor, $$css$i);
 
 	const variables = $.mutable_state();
 	const style = $.mutable_state();
@@ -4813,12 +4865,12 @@ function ButtonText($$anchor, $$props) {
 
 		$.event('click', $$element, handleClick);
 
-		var fragment_1 = root_1$4();
+		var fragment_1 = root_1$5();
 		var node_1 = $.first_child(fragment_1);
 
 		{
 			var consequent = ($$anchor) => {
-				var div = root_2$1();
+				var div = root_2$2();
 				var node_2 = $.child(div);
 
 				const expression = $.derived_safe_equal(() => ({
@@ -4871,17 +4923,17 @@ const BUTTON_TEXT_THEME = {
     white: 'White',
 };
 
-var root_2 = $.template(`<span></span>`);
-var root_1$3 = $.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-3mvsv6"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
+var root_2$1 = $.template(`<span></span>`);
+var root_1$4 = $.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-3mvsv6"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
 
-const $$css$g = {
+const $$css$h = {
 	hash: 'svelte-3mvsv6',
 	code: '.close-button.svelte-3mvsv6 {display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s;}.close-button.svelte-3mvsv6 svg:where(.svelte-3mvsv6) {transition:transform 0.12s;}.close-button.svelte-3mvsv6:hover svg:where(.svelte-3mvsv6) {transform:rotate(90deg);}.close-button-order-one.svelte-3mvsv6 {order:1;}.close-button-order-two.svelte-3mvsv6 {order:2;}'
 };
 
 function CloseButton($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$g);
+	$.append_styles($$anchor, $$css$h);
 
 	const hasLabel = $.mutable_state();
 	const style = $.mutable_state();
@@ -4984,7 +5036,7 @@ function CloseButton($$anchor, $$props) {
 
 		$.event('click', $$element, handleClick);
 
-		var fragment_1 = root_1$3();
+		var fragment_1 = root_1$4();
 		var span = $.first_child(fragment_1);
 		var svg = $.child(span);
 
@@ -4995,7 +5047,7 @@ function CloseButton($$anchor, $$props) {
 
 		{
 			var consequent = ($$anchor) => {
-				var span_1 = root_2();
+				var span_1 = root_2$1();
 
 				$.set_class(span_1, 1, `close-button-label ${(isLeftLabelPlacement ? 'close-button-order-one' : '') ?? ''}`, 'svelte-3mvsv6');
 				span_1.textContent = label;
@@ -5084,16 +5136,16 @@ const IMAGE_ROUND_STYLES = {
     },
 };
 
-var root_1$2 = $.template(`<img class="image-img svelte-gzaieg">`);
+var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
 
-const $$css$f = {
-	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;}'
+const $$css$g = {
+	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) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$f);
+	$.append_styles($$anchor, $$css$g);
 
 	const style = $.mutable_state();
 	let props = $.prop($$props, 'props', 24, () => ({}));
@@ -5103,6 +5155,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(
 		() => (
@@ -5112,7 +5165,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()),
@@ -5139,12 +5193,12 @@ function Image($$anchor, $$props) {
 				style: $.get(style),
 				'data-layer-id': layerId()
 			},
-			'svelte-gzaieg'
+			'svelte-rewdem'
 		));
 
 		$.event('click', $$element, handleClick);
 
-		var img = root_1$2();
+		var img = root_1$3();
 
 		$.template_effect(() => {
 			$.set_attribute(img, 'src', props().image);
@@ -5176,14 +5230,14 @@ const IMAGE_ASPECT_VARIANTS = {
     '9/16': '9 : 16',
 };
 
-const $$css$e = {
+const $$css$f = {
 	hash: 'svelte-139vx15',
 	code: '.layout.svelte-139vx15 {text-decoration:none;color:inherit;}.layout[data-clickable=true].svelte-139vx15 {cursor:pointer;}.layout[data-clickable=true].svelte-139vx15:hover {opacity:0.8;}'
 };
 
 function Layout($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$e);
+	$.append_styles($$anchor, $$css$f);
 
 	const style = $.mutable_state();
 	let props = $.prop($$props, 'props', 24, () => ({}));
@@ -5204,8 +5258,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()),
@@ -5258,17 +5312,17 @@ const LAYOUT_DIRECTION = ['column', 'column-reverse', 'row', 'row-reverse'];
 const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
 const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
 
-var root_1$1 = $.template(`<button><i></i></button>`);
+var root_1$2 = $.template(`<button><i></i></button>`);
 var root$d = $.template(`<div class="slider svelte-1slel1d"><ul class="slider-list svelte-1slel1d"><!></ul> <div></div></div>`);
 
-const $$css$d = {
+const $$css$e = {
 	hash: 'svelte-1slel1d',
 	code: '.slider-list.svelte-1slel1d {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
 };
 
 function Slider($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$d);
+	$.append_styles($$anchor, $$css$e);
 
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
@@ -5501,7 +5555,7 @@ function Slider($$anchor, $$props) {
 	var div_1 = $.sibling(ul, 2);
 
 	$.each(div_1, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
-		var button = root_1$1();
+		var button = root_1$2();
 		var i_1 = $.child(button);
 
 		$.reset(button);
@@ -5558,14 +5612,14 @@ function Slider($$anchor, $$props) {
 
 var root$c = $.template(`<li class="slider-item svelte-1amglxo"><!></li>`);
 
-const $$css$c = {
+const $$css$d = {
 	hash: 'svelte-1amglxo',
 	code: '.slider-item.svelte-1amglxo {overflow:hidden;}.slider-item-inner.svelte-1amglxo {text-decoration:none;background:none;border:0;margin:0;padding:0;color:inherit;-webkit-user-drag:none;user-select:none;}'
 };
 
 function SliderItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$c);
+	$.append_styles($$anchor, $$css$d);
 
 	let layerId = $.prop($$props, 'layerId', 8);
 	let props = $.prop($$props, 'props', 8);
@@ -5683,14 +5737,14 @@ const TEXT_VARIANTS = {
 
 var root$b = $.template(`<p class="text svelte-vifn7y"><!></p>`);
 
-const $$css$b = {
+const $$css$c = {
 	hash: 'svelte-vifn7y',
 	code: '.text.svelte-vifn7y {margin:0;word-break:break-all;text-decoration:none;}'
 };
 
 function Text($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$b);
+	$.append_styles($$anchor, $$css$c);
 
 	const escapedHTML = $.mutable_state();
 	const style = $.mutable_state();
@@ -5787,14 +5841,14 @@ function Text($$anchor, $$props) {
 
 var root$a = $.template(`<div class="rich-text svelte-dxr423"><!></div>`);
 
-const $$css$a = {
+const $$css$b = {
 	hash: 'svelte-dxr423',
 	code: '.rich-text.svelte-dxr423 p {margin:0;word-break:break-all;text-decoration:none;}.rich-text.svelte-dxr423 p + p {margin-top:0.75em;}'
 };
 
 function RichText($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$a);
+	$.append_styles($$anchor, $$css$b);
 
 	const style = $.mutable_state();
 	let props = $.prop($$props, 'props', 24, () => ({ content: '' }));
@@ -5944,16 +5998,16 @@ const callback = ({ brandKit }) => ({
 });
 const getTextLinkThemeStyles = getPropStyles(callback);
 
-var root_1 = $.template(`<!> <span><!></span>`, 1);
+var root_1$1 = $.template(`<!> <span><!></span>`, 1);
 
-const $$css$9 = {
+const $$css$a = {
 	hash: 'svelte-dc9m5n',
 	code: '.link.svelte-dc9m5n {-webkit-appearance:none;border:0;background:none;padding:0;display:inline-flex;}.link.svelte-dc9m5n,\n  .link.svelte-dc9m5n:visited,\n  .link.svelte-dc9m5n:link {color:var(--color);}.link.svelte-dc9m5n:hover {color:var(--hover-color);}.link.svelte-dc9m5n:active {color:var(--active-color);}.link.underline-hover-on.svelte-dc9m5n {text-decoration:none;}.link.underline-hover-on.svelte-dc9m5n:hover {text-decoration:underline;}.link.underline-hover-off.svelte-dc9m5n {text-decoration:underline;}.link.underline-hover-off.svelte-dc9m5n:hover {text-decoration:none;}.link.underline-on.svelte-dc9m5n {text-decoration:underline;}.link.underline-off.svelte-dc9m5n {text-decoration:none;}'
 };
 
 function TextLink($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$9);
+	$.append_styles($$anchor, $$css$a);
 
 	const escapedHTML = $.mutable_state();
 	const variables = $.mutable_state();
@@ -6058,7 +6112,7 @@ function TextLink($$anchor, $$props) {
 
 		$.event('click', $$element, handleClick);
 
-		var fragment_1 = root_1();
+		var fragment_1 = root_1$1();
 		var node_1 = $.first_child(fragment_1);
 
 		{
@@ -6114,9 +6168,52 @@ const TEXT_LINK_UNDERLINE = {
     off: '常に非表示',
 };
 
-$.template(`<div></div>`);
+var root_1 = $.template(`<div></div>`);
+
+const $$css$9 = {
+	hash: 'svelte-18nkdjz',
+	code: '.v2-background.svelte-18nkdjz {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646;}'
+};
+
+function BackgroundOverlay($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$9);
+
+	let backgroundOverlay = $.prop($$props, 'backgroundOverlay', 8, false);
+	let className = $.prop($$props, 'class', 8, undefined);
+	const dispatch = createEventDispatcher();
+
+	$.init();
+
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			var div = root_1();
+
+			$.template_effect(
+				($0) => $.set_class(div, 1, $0, 'svelte-18nkdjz'),
+				[
+					() => $.clsx(['v2-background', className() || ''].join(' '))
+				],
+				$.derived_safe_equal
+			);
+
+			$.event('click', div, () => dispatch('click'));
+			$.append($$anchor, div);
+		};
+
+		$.if(node, ($$render) => {
+			if (backgroundOverlay()) $$render(consequent);
+		});
+	}
+
+	$.append($$anchor, fragment);
+	$.pop();
+}
 
-$.template(`<!> <!>`, 1);
+var root_2 = $.template(`<!> <!>`, 1);
 var root_4 = $.template(`<div role="dialog" aria-modal="true"><!></div>`);
 var root$9 = $.template(`<!> <!>`, 1);
 
@@ -6135,20 +6232,20 @@ 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';
 	// モーダル背景の設定
-	placement() && placement().backgroundOverlay !== undefined;
-	$.mutable_state(DefaultModalPlacement.backgroundOverlay);
+	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
+	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
 	let backgroundOverlayPC = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
 	let backgroundOverlaySP = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
 	// モーダル背景のクリック動作の設定
@@ -6191,6 +6288,9 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
+			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
+				$.set(backgroundOverlay, placement().backgroundOverlay);
+			}
 
 			if (useBreakPoint()) {
 				const pc = breakPoint()?.PC?.placement?.backgroundOverlay;
@@ -6294,6 +6394,10 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
+			if (!isCanvasPreview && placement() && placement().position !== null) {
+				position = placement().position;
+			}
+
 			let positionStyle = getPositionStyle(position);
 
 			if (!useBreakPoint()) {
@@ -6307,6 +6411,16 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
+				if (!isCanvasPreview && useBreakPoint()) {
+					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
+
+					$.get(transforms).push({
+						query: DEVICE_QUERIES[deviceId],
+						...getTransform(positionWithBp)
+					});
+
+					positionStyle = getPositionStyle(positionWithBp);
+				}
 
 				const positionVariables = stringifyStyleObj(formatObjectKey({
 					obj: parseStyle(positionStyle),
@@ -6327,11 +6441,16 @@ 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 (!isCanvasPreview && placement() && placement().margin !== null) {
+				margin = placement().margin;
+			}
+
 			let marginStyle = getMarginStyle(margin);
 
 			if (!useBreakPoint()) {
@@ -6339,6 +6458,11 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
+				if (!isCanvasPreview && useBreakPoint()) {
+					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
+
+					marginStyle = getMarginStyle(marginWithBp);
+				}
 
 				const marginVariables = stringifyStyleObj(formatObjectKey({
 					obj: parseStyle(marginStyle),
@@ -6348,33 +6472,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['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);
+			const propsStyle = objToStyle({
+				width: props().width,
+				...toCssOverflow(props()),
+				...toCssShadow(props()),
+				...toCssRadius(props()),
+				...toCssBackgroundImage(props()),
+				...toCssBackgroundColor(props()),
+				...toCssBorder(props())
 			});
+
+			modalStyles.add(propsStyle);
 		}
 	);
 
@@ -6390,24 +6499,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();
 
@@ -6422,8 +6513,66 @@ function Modal($$anchor, $$props) {
 	{
 		var consequent = ($$anchor) => {};
 
+		var alternate = ($$anchor, $$elseif) => {
+			{
+				var consequent_1 = ($$anchor) => {
+					var fragment_1 = root_2();
+					var node_1 = $.first_child(fragment_1);
+
+					BackgroundOverlay(node_1, {
+						class: 'background-bp-pc',
+						get backgroundOverlay() {
+							return $.get(backgroundOverlayPC);
+						},
+						$$events: {
+							click(...$$args) {
+								$.get(backgroundClickPC)?.apply(this, $$args);
+							}
+						}
+					});
+
+					var node_2 = $.sibling(node_1, 2);
+
+					BackgroundOverlay(node_2, {
+						class: 'background-bp-sp ',
+						get backgroundOverlay() {
+							return $.get(backgroundOverlaySP);
+						},
+						$$events: {
+							click(...$$args) {
+								$.get(backgroundClickSP)?.apply(this, $$args);
+							}
+						}
+					});
+
+					$.append($$anchor, fragment_1);
+				};
+
+				var alternate_1 = ($$anchor) => {
+					BackgroundOverlay($$anchor, {
+						get backgroundOverlay() {
+							return $.get(backgroundOverlay);
+						},
+						$$events: {
+							click(...$$args) {
+								$.get(backgroundClick)?.apply(this, $$args);
+							}
+						}
+					});
+				};
+
+				$.if(
+					$$anchor,
+					($$render) => {
+						if (useBreakPoint()) $$render(consequent_1); else $$render(alternate_1, false);
+					},
+					$$elseif
+				);
+			}
+		};
+
 		$.if(node, ($$render) => {
-			$$render(consequent);
+			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6449,10 +6598,7 @@ function Modal($$anchor, $$props) {
 						'modal',
 						useBreakPoint() ? 'modal-bp' : ''
 					].join(' ')),
-					() => [
-						Array.from(modalStyles).join(';'),
-						$.get(style)
-					].join(' ')
+					() => Array.from(modalStyles).join(';')
 				],
 				$.derived_safe_equal
 			);
@@ -7390,4 +7536,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 };