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

package/dist/index.es.js

@@ -15438,10 +15438,10 @@ const IMAGE_ROUND_STYLES = {
 /* src/components-flex/image/Image.svelte generated by Svelte v3.53.1 */
 
 function add_css$h(target) {
-	append_styles(target, "svelte-gzaieg", ".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}");
+	append_styles(target, "svelte-rewdem", ".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}");
 }
 
-// (24:0) <svelte:element   this={element}   {...attributes}   class="image"   {style}   data-layer-id={layerId}   on:click={handleClick} >
+// (26:0) <svelte:element   this={element}   {...attributes}   class="image"   {style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$5(ctx) {
 	let svelte_element;
 	let img;
@@ -15469,7 +15469,7 @@ function create_dynamic_element$5(ctx) {
 			img = element("img");
 			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
 			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
-			attr(img, "class", "image-img svelte-gzaieg");
+			attr(img, "class", "image-img svelte-rewdem");
 
 			if ((/-/).test(/*element*/ ctx[4])) {
 				set_custom_element_data_map(svelte_element, svelte_element_data);
@@ -15477,7 +15477,7 @@ function create_dynamic_element$5(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-gzaieg", true);
+			toggle_class(svelte_element, "svelte-rewdem", true);
 		},
 		m(target, anchor) {
 			insert(target, svelte_element, anchor);
@@ -15510,7 +15510,7 @@ function create_dynamic_element$5(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-gzaieg", true);
+			toggle_class(svelte_element, "svelte-rewdem", true);
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element);
@@ -15571,6 +15571,7 @@ function instance$l($$self, $$props, $$invalidate) {
 	useInjectCustomizeCss(props);
 	const { attributes, element, handleClick } = useClickable(props);
 	const aspectVariantStyles = ASPECT_VARIANT[props.aspectVariant]?.getProps();
+	const width = props.width ?? '100%';
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -15583,7 +15584,8 @@ function instance$l($$self, $$props, $$invalidate) {
 				...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),
@@ -17291,7 +17293,7 @@ function create_else_block(ctx) {
 		});
 
 	backgroundoverlay.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[13])) /*backgroundClick*/ ctx[13].apply(this, arguments);
+		if (is_function(/*backgroundClick*/ ctx[12])) /*backgroundClick*/ ctx[12].apply(this, arguments);
 	});
 
 	return {
@@ -17338,7 +17340,7 @@ function create_if_block_2(ctx) {
 		});
 
 	backgroundoverlay0.$on("click", function () {
-		if (is_function(/*backgroundClickPC*/ ctx[12])) /*backgroundClickPC*/ ctx[12].apply(this, arguments);
+		if (is_function(/*backgroundClickPC*/ ctx[11])) /*backgroundClickPC*/ ctx[11].apply(this, arguments);
 	});
 
 	backgroundoverlay1 = new BackgroundOverlay({
@@ -17349,7 +17351,7 @@ function create_if_block_2(ctx) {
 		});
 
 	backgroundoverlay1.$on("click", function () {
-		if (is_function(/*backgroundClickSP*/ ctx[11])) /*backgroundClickSP*/ ctx[11].apply(this, arguments);
+		if (is_function(/*backgroundClickSP*/ ctx[10])) /*backgroundClickSP*/ ctx[10].apply(this, arguments);
 	});
 
 	return {
@@ -17392,7 +17394,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (207:0) {#if !isOnSite}
+// (207:0) {#if isCanvasPreview}
 function create_if_block_1$1(ctx) {
 	return {
 		c: noop,
@@ -17408,11 +17410,10 @@ function create_if_block_1$1(ctx) {
 function create_if_block$3(ctx) {
 	let div;
 	let div_class_value;
-	let div_style_value;
 	let div_intro;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[27].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
+	const default_slot_template = /*#slots*/ ctx[26].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
 
 	return {
 		c() {
@@ -17422,7 +17423,7 @@ function create_if_block$3(ctx) {
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
 			attr(div, "data-layer-id", /*layerId*/ ctx[2]);
-			attr(div, "style", div_style_value = [Array.from(/*modalStyles*/ ctx[15]).join(';'), /*style*/ ctx[9]].join(' '));
+			attr(div, "style", Array.from(/*modalStyles*/ ctx[14]).join(';'));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -17431,22 +17432,22 @@ function create_if_block$3(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[28](div);
+			/*div_binding*/ ctx[27](div);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 33554432)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[26],
+						/*$$scope*/ ctx[25],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
 						null
 					);
 				}
@@ -17459,10 +17460,6 @@ function create_if_block$3(ctx) {
 			if (!current || dirty & /*layerId*/ 4) {
 				attr(div, "data-layer-id", /*layerId*/ ctx[2]);
 			}
-
-			if (!current || dirty & /*style*/ 512 && div_style_value !== (div_style_value = [Array.from(/*modalStyles*/ ctx[15]).join(';'), /*style*/ ctx[9]].join(' '))) {
-				attr(div, "style", div_style_value);
-			}
 		},
 		i(local) {
 			if (current) return;
@@ -17488,7 +17485,7 @@ function create_if_block$3(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[28](null);
+			/*div_binding*/ ctx[27](null);
 		}
 	};
 }
@@ -17505,7 +17502,7 @@ function create_fragment$d(ctx) {
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
-		if (!/*isOnSite*/ ctx[14]) return 0;
+		if (/*isCanvasPreview*/ ctx[13]) return 0;
 		if (/*useBreakPoint*/ ctx[0]) return 1;
 		return 2;
 	}
@@ -17530,7 +17527,7 @@ function create_fragment$d(ctx) {
 
 			if (!mounted) {
 				dispose = listen(window, "keydown", function () {
-					if (is_function(/*handle_keydown*/ ctx[10])) /*handle_keydown*/ ctx[10].apply(this, arguments);
+					if (is_function(/*handle_keydown*/ ctx[9])) /*handle_keydown*/ ctx[9].apply(this, arguments);
 				});
 
 				mounted = true;
@@ -17616,7 +17613,6 @@ function instance$d($$self, $$props, $$invalidate) {
 	let backgroundClickSP;
 	let handle_keydown;
 	let visible;
-	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { useBreakPoint = false } = $$props;
 	let { placement } = $$props;
@@ -17628,9 +17624,7 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { closeEventValue = null } = $$props;
 	let { layerId = '' } = $$props;
 	const { brandKit } = useBrandKit();
-
-	// falseが明示的に指定されている場合以外はtrueにする
-	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
+	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
 
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -17663,20 +17657,20 @@ function instance$d($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
-		if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
-		if ('breakPoint' in $$props) $$invalidate(17, breakPoint = $$props.breakPoint);
-		if ('elasticity' in $$props) $$invalidate(18, elasticity = $$props.elasticity);
+		if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(16, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(17, elasticity = $$props.elasticity);
 		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('props' in $$props) $$invalidate(19, props = $$props.props);
-		if ('closeEventName' in $$props) $$invalidate(20, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(21, closeEventValue = $$props.closeEventValue);
+		if ('props' in $$props) $$invalidate(18, props = $$props.props);
+		if ('closeEventName' in $$props) $$invalidate(19, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(20, closeEventValue = $$props.closeEventValue);
 		if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
-		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
-			$$invalidate(25, close = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 1572864) {
+			$$invalidate(24, close = () => {
 				const onClose = { operation: 'closeApp', args: ['button'] };
 
 				if (closeEventName) {
@@ -17687,9 +17681,9 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
 			{
-				if (isOnSite && isExistBackgroundOverlayValue) {
+				if (!isCanvasPreview && isExistBackgroundOverlayValue) {
 					$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
 				}
 
@@ -17702,30 +17696,30 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
 			{
 				if (placement && placement.backgroundClick) {
-					$$invalidate(22, backgroundClickFunction = placement.backgroundClick);
+					$$invalidate(21, backgroundClickFunction = placement.backgroundClick);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundClick;
 
 					if (pc) {
-						$$invalidate(23, backgroundClickFunctionPC = pc);
+						$$invalidate(22, backgroundClickFunctionPC = pc);
 					}
 
 					const sp = breakPoint?.SP?.placement?.backgroundClick;
 
 					if (sp) {
-						$$invalidate(24, backgroundClickFunctionSP = sp);
+						$$invalidate(23, backgroundClickFunctionSP = sp);
 					}
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
-			$$invalidate(13, backgroundClick = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 3670016) {
+			$$invalidate(12, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -17734,8 +17728,8 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
-			$$invalidate(12, backgroundClickPC = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 5767168) {
+			$$invalidate(11, backgroundClickPC = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -17744,8 +17738,8 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
-			$$invalidate(11, backgroundClickSP = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 9961472) {
+			$$invalidate(10, backgroundClickSP = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -17754,13 +17748,13 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 98313) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
 				let position = DefaultModalPlacement.position;
 
-				if (isOnSite && placement && placement.position !== null) {
+				if (!isCanvasPreview && placement && placement.position !== null) {
 					position = placement.position;
 				}
 
@@ -17777,7 +17771,7 @@ function instance$d($$self, $$props, $$invalidate) {
 				$$invalidate(3, transforms = []);
 
 				DEVICE_IDS.forEach(deviceId => {
-					if (isOnSite && useBreakPoint) {
+					if (!isCanvasPreview && useBreakPoint) {
 						const positionWithBp = breakPoint[deviceId]?.placement?.position;
 
 						transforms.push({
@@ -17802,12 +17796,12 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 360449) {
 			// 表示位置の調整のスタイルを設定
 			{
 				let margin = DefaultModalPlacement.margin;
 
-				if (isOnSite && placement && placement.margin !== null) {
+				if (!isCanvasPreview && placement && placement.margin !== null) {
 					margin = placement.margin;
 				}
 
@@ -17818,7 +17812,7 @@ function instance$d($$self, $$props, $$invalidate) {
 				}
 
 				DEVICE_IDS.forEach(deviceId => {
-					if (isOnSite && useBreakPoint) {
+					if (!isCanvasPreview && useBreakPoint) {
 						const marginWithBp = breakPoint[deviceId]?.placement?.margin;
 						marginStyle = getMarginStyle(marginWithBp);
 					}
@@ -17831,23 +17825,23 @@ function instance$d($$self, $$props, $$invalidate) {
 
 					modalStyles.add(marginVariables);
 				});
-			}
-		}
 
-		if ($$self.$$.dirty & /*close*/ 33554432) {
-			$$invalidate(10, handle_keydown = handleKeydown({ Escape: close }));
+				const propsStyle = objToStyle({
+					width: props.width,
+					...toCssOverflow(props),
+					...toCssShadow(props),
+					...toCssRadius(props),
+					...toCssBackgroundImage(props),
+					...toCssBackgroundColor(props),
+					...toCssBorder(props)
+				});
+
+				modalStyles.add(propsStyle);
+			}
 		}
 
-		if ($$self.$$.dirty & /*props*/ 524288) {
-			$$invalidate(9, style = objToStyle({
-				width: props.width,
-				...toCssOverflow(props),
-				...toCssShadow(props),
-				...toCssRadius(props),
-				...toCssBackgroundImage(props),
-				...toCssBackgroundColor(props),
-				...toCssBorder(props)
-			}));
+		if ($$self.$$.dirty & /*close*/ 16777216) {
+			$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
 
@@ -17866,12 +17860,11 @@ function instance$d($$self, $$props, $$invalidate) {
 		backgroundOverlaySP,
 		modal,
 		visible,
-		style,
 		handle_keydown,
 		backgroundClickSP,
 		backgroundClickPC,
 		backgroundClick,
-		isOnSite,
+		isCanvasPreview,
 		modalStyles,
 		placement,
 		breakPoint,
@@ -17901,13 +17894,13 @@ class Modal extends SvelteComponent {
 			safe_not_equal,
 			{
 				useBreakPoint: 0,
-				placement: 16,
-				breakPoint: 17,
-				elasticity: 18,
+				placement: 15,
+				breakPoint: 16,
+				elasticity: 17,
 				animation: 1,
-				props: 19,
-				closeEventName: 20,
-				closeEventValue: 21,
+				props: 18,
+				closeEventName: 19,
+				closeEventValue: 20,
 				layerId: 2
 			},
 			add_css$9
@@ -20446,7 +20439,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (13:0) {#if component}
+// (12:0) {#if component}
 function create_if_block(ctx) {
 	let switch_instance;
 	let switch_instance_anchor;
@@ -20530,7 +20523,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (20:4) {#if option.children}
+// (19:4) {#if option.children}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -20614,7 +20607,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (21:6) {#each option.children as child}
+// (20:6) {#each option.children as child}
 function create_each_block(ctx) {
 	let thumbnailpreview;
 	let current;
@@ -20648,7 +20641,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (14:2) <svelte:component     this={component}     props={'previewProps' in option && typeof option.previewProps !== 'undefined'       ? option.previewProps       : option.props}   >
+// (13:2) <svelte:component     this={component}     props={'previewProps' in option && typeof option.previewProps !== 'undefined'       ? option.previewProps       : option.props}   >
 function create_default_slot(ctx) {
 	let if_block_anchor;
 	let current;
@@ -20763,7 +20756,6 @@ function instance($$self, $$props, $$invalidate) {
 	let component;
 	let { option = {} } = $$props;
 	let { customBrandKit = undefined } = $$props;
-	console.log('option', option);
 
 	const getComponent = key => {
 		return key in sdk ? sdk[key] : null;

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

@@ -5136,11 +5136,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) {
@@ -5155,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(
 		() => (
@@ -5164,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()),
@@ -5191,7 +5193,7 @@ function Image($$anchor, $$props) {
 				style: $.get(style),
 				'data-layer-id': layerId()
 			},
-			'svelte-gzaieg'
+			'svelte-rewdem'
 		));
 
 		$.event('click', $$element, handleClick);
@@ -6230,7 +6232,6 @@ 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);
@@ -6241,8 +6242,7 @@ function Modal($$anchor, $$props) {
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
-	// falseが明示的に指定されている場合以外はtrueにする
-	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
+	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6288,7 +6288,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (isOnSite && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6394,7 +6394,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (isOnSite && placement() && placement().position !== null) {
+			if (!isCanvasPreview && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6411,7 +6411,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6441,12 +6441,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 (isOnSite && placement() && placement().margin !== null) {
+			if (!isCanvasPreview && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6457,7 +6458,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6471,6 +6472,18 @@ function Modal($$anchor, $$props) {
 
 				modalStyles.add(marginVariables);
 			});
+
+			const propsStyle = objToStyle({
+				width: props().width,
+				...toCssOverflow(props()),
+				...toCssShadow(props()),
+				...toCssRadius(props()),
+				...toCssBackgroundImage(props()),
+				...toCssBackgroundColor(props()),
+				...toCssBorder(props())
+			});
+
+			modalStyles.add(propsStyle);
 		}
 	);
 
@@ -6486,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();
 
@@ -6577,7 +6572,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (!isOnSite) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6603,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
 			);