@plaidev/karte-action-sdk 1.1.207-28216182.2d812378 → 1.1.208-28223127.8251d5b4

package/dist/index.es.js

@@ -15,6 +15,8 @@ const KARTE_ACTION_SHORTEN_ID = 'karte-action-id';
 const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
 /** @internal */
 const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
+/** @internal */
+const DEVICE_IDS = ['PC', 'SP'];
 // -------- The following codes are deprecated --------
 /**
  * 非推奨
@@ -96,7 +98,12 @@ const getMarginStyle = (margin) => {
 };
 /** @internal */
 const parseStyle = (style) => {
-    return Object.fromEntries(style.split(';').map(attr => attr.split(':').map(str => str.trim())));
+    return style
+        ? Object.fromEntries(style
+            .split(';')
+            .filter(attr => attr.trim())
+            .map(attr => attr.split(':').map(str => str.trim())))
+        : {};
 };
 /** @internal */
 const stringifyStyleObj = (styleObj) => {
@@ -104,6 +111,8 @@ const stringifyStyleObj = (styleObj) => {
         .map(([key, value]) => `${key}:${value}`)
         .join(';');
 };
+/** @internal */
+const formatObjectKey = ({ obj, prefix, suffix, }) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [`${prefix ?? ''}${key}${suffix ?? ''}`, value]));
 /**
  * スクロール率が達したときに呼び出すコールバックを登録します
  *
@@ -333,6 +342,8 @@ const ElasticityStyle = {
     horizontal: 'width: 100%',
 };
 /** @internal */
+const DefaultElasticity = 'none';
+/** @internal */
 const TextDirections = ['horizontal', 'vertical'];
 /** @internal */
 const OnClickOperationOptions = [
@@ -571,6 +582,17 @@ const DefaultFormButtonColor = {
     main: '#2aab9f',
     sub: '#fff',
 };
+/** @internal */
+const DefaultModalBreakPoint = {
+    PC: {
+        placement: DefaultModalPlacement,
+        elasticity: DefaultElasticity,
+    },
+    SP: {
+        placement: DefaultModalPlacement,
+        elasticity: DefaultElasticity,
+    },
+};
 
 /**
  * Store to handle action setting
@@ -3272,7 +3294,7 @@ function add_css$r(target) {
 }
 
 // (50:0) {:else}
-function create_else_block$3(ctx) {
+function create_else_block$4(ctx) {
 	let button;
 	let current;
 	let mounted;
@@ -3357,7 +3379,7 @@ function create_else_block$3(ctx) {
 }
 
 // (46:39) 
-function create_if_block_2(ctx) {
+function create_if_block_2$1(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[9].default;
@@ -3577,7 +3599,7 @@ function create_fragment$u(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$6, create_if_block_1$2, create_if_block_2, create_else_block$3];
+	const if_block_creators = [create_if_block$6, create_if_block_1$2, create_if_block_2$1, create_else_block$4];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -3728,14 +3750,139 @@ class Button extends SvelteComponent {
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
 function add_css$q(target) {
-	append_styles(target, "svelte-yvwr7u", ".modal.svelte-yvwr7u{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-yvwr7u > .button{flex:auto;display:flex}.close.svelte-yvwr7u{position:absolute;top:0;right:0}.close.svelte-yvwr7u > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-yvwr7u > .button:hover{transform:rotate(90deg)}.modal-content.svelte-yvwr7u{flex:auto;display:flex;justify-content:center;align-items:center;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
+	append_styles(target, "svelte-1j0m3x1", ".modal.svelte-1j0m3x1{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1j0m3x1 > .button{flex:auto;display:flex}.close.svelte-1j0m3x1{position:absolute;top:0;right:0}.close.svelte-1j0m3x1 > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-1j0m3x1 > .button:hover{transform:rotate(90deg)}.modal-content.svelte-1j0m3x1{flex:auto;display:flex;justify-content:center;align-items:center;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}@media screen and (min-width: 641px){.modal-bp.svelte-1j0m3x1{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc) !important;margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-1j0m3x1{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp) !important;margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 
-// (145:0) {#if visible}
+// (265:0) {:else}
+function create_else_block$3(ctx) {
+	let backgroundoverlay;
+	let current;
+
+	backgroundoverlay = new BackgroundOverlay({
+			props: {
+				backgroundOverlay: /*backgroundOverlay*/ ctx[11]
+			}
+		});
+
+	backgroundoverlay.$on("click", function () {
+		if (is_function(/*backgroundClick*/ ctx[20])) /*backgroundClick*/ ctx[20].apply(this, arguments);
+	});
+
+	return {
+		c() {
+			create_component(backgroundoverlay.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(backgroundoverlay, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			const backgroundoverlay_changes = {};
+			if (dirty[0] & /*backgroundOverlay*/ 2048) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[11];
+			backgroundoverlay.$set(backgroundoverlay_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(backgroundoverlay.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(backgroundoverlay.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(backgroundoverlay, detaching);
+		}
+	};
+}
+
+// (254:24) 
+function create_if_block_3(ctx) {
+	let backgroundoverlay0;
+	let t;
+	let backgroundoverlay1;
+	let current;
+
+	backgroundoverlay0 = new BackgroundOverlay({
+			props: {
+				class: "background-bp-pc",
+				backgroundOverlay: /*backgroundOverlayPC*/ ctx[12]
+			}
+		});
+
+	backgroundoverlay0.$on("click", function () {
+		if (is_function(/*backgroundClickPC*/ ctx[19])) /*backgroundClickPC*/ ctx[19].apply(this, arguments);
+	});
+
+	backgroundoverlay1 = new BackgroundOverlay({
+			props: {
+				class: "background-bp-sp ",
+				backgroundOverlay: /*backgroundOverlaySP*/ ctx[13]
+			}
+		});
+
+	backgroundoverlay1.$on("click", function () {
+		if (is_function(/*backgroundClickSP*/ ctx[18])) /*backgroundClickSP*/ ctx[18].apply(this, arguments);
+	});
+
+	return {
+		c() {
+			create_component(backgroundoverlay0.$$.fragment);
+			t = space();
+			create_component(backgroundoverlay1.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(backgroundoverlay0, target, anchor);
+			insert(target, t, anchor);
+			mount_component(backgroundoverlay1, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			const backgroundoverlay0_changes = {};
+			if (dirty[0] & /*backgroundOverlayPC*/ 4096) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[12];
+			backgroundoverlay0.$set(backgroundoverlay0_changes);
+			const backgroundoverlay1_changes = {};
+			if (dirty[0] & /*backgroundOverlaySP*/ 8192) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[13];
+			backgroundoverlay1.$set(backgroundoverlay1_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(backgroundoverlay0.$$.fragment, local);
+			transition_in(backgroundoverlay1.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(backgroundoverlay0.$$.fragment, local);
+			transition_out(backgroundoverlay1.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(backgroundoverlay0, detaching);
+			if (detaching) detach(t);
+			destroy_component(backgroundoverlay1, detaching);
+		}
+	};
+}
+
+// (252:0) {#if isPreview()}
+function create_if_block_2(ctx) {
+	return {
+		c: noop,
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+
+// (268:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let button;
-	let div_style_value;
+	let div_class_value;
 	let div_intro;
 	let current;
 
@@ -3753,32 +3900,32 @@ function create_if_block$5(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "modal svelte-yvwr7u");
+			attr(div, "class", div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[3] ? 'modal-bp' : ''].join(' ')) + " svelte-1j0m3x1"));
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
-			attr(div, "style", div_style_value = "" + /*pos*/ ctx[16] + " " + /*marginStyle*/ ctx[14] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[17]] + "");
+			attr(div, "style", Array.from(/*modalStyles*/ ctx[23]).join(';'));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			mount_component(button, div, null);
-			/*div_binding*/ ctx[28](div);
+			/*div_binding*/ ctx[32](div);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const button_changes = {};
-			if (dirty & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
-			if (dirty & /*clickEventName*/ 2) button_changes.eventName = /*clickEventName*/ ctx[1];
-			if (dirty & /*clickEventValue*/ 4) button_changes.eventValue = /*clickEventValue*/ ctx[2];
+			if (dirty[0] & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
+			if (dirty[0] & /*clickEventName*/ 2) button_changes.eventName = /*clickEventName*/ ctx[1];
+			if (dirty[0] & /*clickEventValue*/ 4) button_changes.eventValue = /*clickEventValue*/ ctx[2];
 
-			if (dirty & /*$$scope, _style, $maximumZindex, onClose, _closeStyle, closeEventName, closeEventValue, closeButtonColor, closable*/ 538444784) {
+			if (dirty[0] & /*_style, $maximumZindex, onClose, _closeStyle, closeEventName, closeEventValue, closeButtonColor, closable*/ 6293472 | dirty[1] & /*$$scope*/ 4) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
 			button.$set(button_changes);
 
-			if (!current || dirty & /*pos, marginStyle, overwriteElasticity*/ 212992 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[16] + " " + /*marginStyle*/ ctx[14] + " " + ElasticityStyle[/*overwriteElasticity*/ ctx[17]] + "")) {
-				attr(div, "style", div_style_value);
+			if (!current || dirty[0] & /*useBreakPoint*/ 8 && div_class_value !== (div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[3] ? 'modal-bp' : ''].join(' ')) + " svelte-1j0m3x1"))) {
+				attr(div, "class", div_class_value);
 			}
 		},
 		i(local) {
@@ -3788,8 +3935,8 @@ function create_if_block$5(ctx) {
 			if (!div_intro) {
 				add_render_callback(() => {
 					div_intro = create_in_transition(div, customAnimation, {
-						transform: /*transform*/ ctx[15],
-						animationStyle: /*animation*/ ctx[3]
+						transform: /*transform*/ ctx[14],
+						animationStyle: /*animation*/ ctx[4]
 					});
 
 					div_intro.start();
@@ -3805,12 +3952,12 @@ function create_if_block$5(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			destroy_component(button);
-			/*div_binding*/ ctx[28](null);
+			/*div_binding*/ ctx[32](null);
 		}
 	};
 }
 
-// (162:6) {#if closable}
+// (281:6) {#if closable}
 function create_if_block_1$1(ctx) {
 	let div;
 	let button;
@@ -3818,10 +3965,10 @@ function create_if_block_1$1(ctx) {
 
 	button = new Button({
 			props: {
-				onClick: /*onClose*/ ctx[5],
-				style: /*_closeStyle*/ ctx[9],
-				eventName: /*closeEventName*/ ctx[6],
-				eventValue: /*closeEventValue*/ ctx[7],
+				onClick: /*onClose*/ ctx[6],
+				style: /*_closeStyle*/ ctx[10],
+				eventName: /*closeEventName*/ ctx[7],
+				eventValue: /*closeEventValue*/ ctx[8],
 				$$slots: { default: [create_default_slot_1$1] },
 				$$scope: { ctx }
 			}
@@ -3831,8 +3978,8 @@ function create_if_block_1$1(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "close svelte-yvwr7u");
-			set_style(div, "z-index", /*$maximumZindex*/ ctx[20] + 1);
+			attr(div, "class", "close svelte-1j0m3x1");
+			set_style(div, "z-index", /*$maximumZindex*/ ctx[22] + 1);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -3841,19 +3988,19 @@ function create_if_block_1$1(ctx) {
 		},
 		p(ctx, dirty) {
 			const button_changes = {};
-			if (dirty & /*onClose*/ 32) button_changes.onClick = /*onClose*/ ctx[5];
-			if (dirty & /*_closeStyle*/ 512) button_changes.style = /*_closeStyle*/ ctx[9];
-			if (dirty & /*closeEventName*/ 64) button_changes.eventName = /*closeEventName*/ ctx[6];
-			if (dirty & /*closeEventValue*/ 128) button_changes.eventValue = /*closeEventValue*/ ctx[7];
+			if (dirty[0] & /*onClose*/ 64) button_changes.onClick = /*onClose*/ ctx[6];
+			if (dirty[0] & /*_closeStyle*/ 1024) button_changes.style = /*_closeStyle*/ ctx[10];
+			if (dirty[0] & /*closeEventName*/ 128) button_changes.eventName = /*closeEventName*/ ctx[7];
+			if (dirty[0] & /*closeEventValue*/ 256) button_changes.eventValue = /*closeEventValue*/ ctx[8];
 
-			if (dirty & /*$$scope, closeButtonColor*/ 536871168) {
+			if (dirty[0] & /*closeButtonColor*/ 512 | dirty[1] & /*$$scope*/ 4) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
 			button.$set(button_changes);
 
-			if (!current || dirty & /*$maximumZindex*/ 1048576) {
-				set_style(div, "z-index", /*$maximumZindex*/ ctx[20] + 1);
+			if (!current || dirty[0] & /*$maximumZindex*/ 4194304) {
+				set_style(div, "z-index", /*$maximumZindex*/ ctx[22] + 1);
 			}
 		},
 		i(local) {
@@ -3872,7 +4019,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (164:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
+// (283:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -3882,7 +4029,7 @@ function create_default_slot_1$1(ctx) {
 			svg = svg_element("svg");
 			path = svg_element("path");
 			attr(path, "d", "M5.78516 4.75L8.73828 1.82422C8.90234 1.66016 8.90234 1.35938 8.73828 1.19531L8.05469 0.511719C7.89062 0.347656 7.58984 0.347656 7.42578 0.511719L4.5 3.46484L1.54688 0.511719C1.38281 0.347656 1.08203 0.347656 0.917969 0.511719L0.234375 1.19531C0.0703125 1.35938 0.0703125 1.66016 0.234375 1.82422L3.1875 4.75L0.234375 7.70312C0.0703125 7.86719 0.0703125 8.16797 0.234375 8.33203L0.917969 9.01562C1.08203 9.17969 1.38281 9.17969 1.54688 9.01562L4.5 6.0625L7.42578 9.01562C7.58984 9.17969 7.89062 9.17969 8.05469 9.01562L8.73828 8.33203C8.90234 8.16797 8.90234 7.86719 8.73828 7.70312L5.78516 4.75Z");
-			attr(path, "fill", /*closeButtonColor*/ ctx[8]);
+			attr(path, "fill", /*closeButtonColor*/ ctx[9]);
 			attr(path, "fill-opacity", "0.8");
 			attr(svg, "width", "100%");
 			attr(svg, "height", "100%");
@@ -3895,8 +4042,8 @@ function create_default_slot_1$1(ctx) {
 			append(svg, path);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*closeButtonColor*/ 256) {
-				attr(path, "fill", /*closeButtonColor*/ ctx[8]);
+			if (dirty[0] & /*closeButtonColor*/ 512) {
+				attr(path, "fill", /*closeButtonColor*/ ctx[9]);
 			}
 		},
 		d(detaching) {
@@ -3905,14 +4052,14 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (161:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+// (280:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
 function create_default_slot$6(ctx) {
 	let t;
 	let div;
 	let current;
-	let if_block = /*closable*/ ctx[19] && create_if_block_1$1(ctx);
-	const default_slot_template = /*#slots*/ ctx[27].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[29], null);
+	let if_block = /*closable*/ ctx[21] && create_if_block_1$1(ctx);
+	const default_slot_template = /*#slots*/ ctx[31].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[33], null);
 
 	return {
 		c() {
@@ -3920,8 +4067,8 @@ function create_default_slot$6(ctx) {
 			t = space();
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "modal-content svelte-yvwr7u");
-			attr(div, "style", /*_style*/ ctx[4]);
+			attr(div, "class", "modal-content svelte-1j0m3x1");
+			attr(div, "style", /*_style*/ ctx[5]);
 		},
 		m(target, anchor) {
 			if (if_block) if_block.m(target, anchor);
@@ -3935,11 +4082,11 @@ function create_default_slot$6(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (/*closable*/ ctx[19]) {
+			if (/*closable*/ ctx[21]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*closable*/ 524288) {
+					if (dirty[0] & /*closable*/ 2097152) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -3959,22 +4106,22 @@ function create_default_slot$6(ctx) {
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 536870912)) {
+				if (default_slot.p && (!current || dirty[1] & /*$$scope*/ 4)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[29],
+						/*$$scope*/ ctx[33],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[29])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[29], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[33])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[33], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*_style*/ 16) {
-				attr(div, "style", /*_style*/ ctx[4]);
+			if (!current || dirty[0] & /*_style*/ 32) {
+				attr(div, "style", /*_style*/ ctx[5]);
 			}
 		},
 		i(local) {
@@ -3998,71 +4145,96 @@ function create_default_slot$6(ctx) {
 }
 
 function create_fragment$t(ctx) {
-	let backgroundoverlay;
+	let show_if;
+	let current_block_type_index;
+	let if_block0;
 	let t;
-	let if_block_anchor;
+	let if_block1_anchor;
 	let current;
 	let mounted;
 	let dispose;
+	const if_block_creators = [create_if_block_2, create_if_block_3, create_else_block$3];
+	const if_blocks = [];
 
-	backgroundoverlay = new BackgroundOverlay({
-			props: {
-				backgroundOverlay: /*backgroundOverlay*/ ctx[10]
-			}
-		});
-
-	backgroundoverlay.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[18])) /*backgroundClick*/ ctx[18].apply(this, arguments);
-	});
+	function select_block_type(ctx, dirty) {
+		if (show_if == null) show_if = !!isPreview();
+		if (show_if) return 0;
+		if (/*useBreakPoint*/ ctx[3]) return 1;
+		return 2;
+	}
 
-	let if_block = /*visible*/ ctx[12] && create_if_block$5(ctx);
+	current_block_type_index = select_block_type(ctx);
+	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+	let if_block1 = /*visible*/ ctx[16] && create_if_block$5(ctx);
 
 	return {
 		c() {
-			create_component(backgroundoverlay.$$.fragment);
+			if_block0.c();
 			t = space();
-			if (if_block) if_block.c();
-			if_block_anchor = empty();
+			if (if_block1) if_block1.c();
+			if_block1_anchor = empty();
 		},
 		m(target, anchor) {
-			mount_component(backgroundoverlay, target, anchor);
+			if_blocks[current_block_type_index].m(target, anchor);
 			insert(target, t, anchor);
-			if (if_block) if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
+			if (if_block1) if_block1.m(target, anchor);
+			insert(target, if_block1_anchor, anchor);
 			current = true;
 
 			if (!mounted) {
 				dispose = listen(window, "keydown", function () {
-					if (is_function(/*handle_keydown*/ ctx[13])) /*handle_keydown*/ ctx[13].apply(this, arguments);
+					if (is_function(/*handle_keydown*/ ctx[17])) /*handle_keydown*/ ctx[17].apply(this, arguments);
 				});
 
 				mounted = true;
 			}
 		},
-		p(new_ctx, [dirty]) {
+		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			const backgroundoverlay_changes = {};
-			if (dirty & /*backgroundOverlay*/ 1024) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[10];
-			backgroundoverlay.$set(backgroundoverlay_changes);
+			let previous_block_index = current_block_type_index;
+			current_block_type_index = select_block_type(ctx);
 
-			if (/*visible*/ ctx[12]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
+			if (current_block_type_index === previous_block_index) {
+				if_blocks[current_block_type_index].p(ctx, dirty);
+			} else {
+				group_outros();
 
-					if (dirty & /*visible*/ 4096) {
-						transition_in(if_block, 1);
+				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+					if_blocks[previous_block_index] = null;
+				});
+
+				check_outros();
+				if_block0 = if_blocks[current_block_type_index];
+
+				if (!if_block0) {
+					if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+					if_block0.c();
+				} else {
+					if_block0.p(ctx, dirty);
+				}
+
+				transition_in(if_block0, 1);
+				if_block0.m(t.parentNode, t);
+			}
+
+			if (/*visible*/ ctx[16]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+
+					if (dirty[0] & /*visible*/ 65536) {
+						transition_in(if_block1, 1);
 					}
 				} else {
-					if_block = create_if_block$5(ctx);
-					if_block.c();
-					transition_in(if_block, 1);
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+					if_block1 = create_if_block$5(ctx);
+					if_block1.c();
+					transition_in(if_block1, 1);
+					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
 				}
-			} else if (if_block) {
+			} else if (if_block1) {
 				group_outros();
 
-				transition_out(if_block, 1, 1, () => {
-					if_block = null;
+				transition_out(if_block1, 1, 1, () => {
+					if_block1 = null;
 				});
 
 				check_outros();
@@ -4070,20 +4242,20 @@ function create_fragment$t(ctx) {
 		},
 		i(local) {
 			if (current) return;
-			transition_in(backgroundoverlay.$$.fragment, local);
-			transition_in(if_block);
+			transition_in(if_block0);
+			transition_in(if_block1);
 			current = true;
 		},
 		o(local) {
-			transition_out(backgroundoverlay.$$.fragment, local);
-			transition_out(if_block);
+			transition_out(if_block0);
+			transition_out(if_block1);
 			current = false;
 		},
 		d(detaching) {
-			destroy_component(backgroundoverlay, detaching);
+			if_blocks[current_block_type_index].d(detaching);
 			if (detaching) detach(t);
-			if (if_block) if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
+			if (if_block1) if_block1.d(detaching);
+			if (detaching) detach(if_block1_anchor);
 			mounted = false;
 			dispose();
 		}
@@ -4094,35 +4266,45 @@ function instance$t($$self, $$props, $$invalidate) {
 	let close;
 	let closable;
 	let backgroundClick;
-	let overwritePosition;
-	let overwriteMargin;
-	let overwriteElasticity;
-	let pos;
-	let transform;
-	let marginStyle;
+	let backgroundClickPC;
+	let backgroundClickSP;
 	let handle_keydown;
 	let visible;
 	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(20, $maximumZindex = $$value));
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(22, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { clickEventName = '' } = $$props;
 	let { clickEventValue = null } = $$props;
-	let { placement = DefaultModalPlacement } = $$props;
+	let { useBreakPoint = false } = $$props;
+	let { placement } = $$props;
+	let { breakPoint } = $$props;
+	let { elasticity } = $$props;
 	let { animation = 'none' } = $$props;
 	let { _style = '' } = $$props;
-	let { elasticity = 'none' } = $$props;
 	let { onClose = { operation: 'closeApp', args: ['button'] } } = $$props;
 	let { closeEventName = '' } = $$props;
 	let { closeEventValue = null } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
 	let { _closeStyle = '' } = $$props;
+
+	// モーダル背景の設定
 	let backgroundOverlay = DefaultModalPlacement.backgroundOverlay;
+
+	let backgroundOverlayPC = DefaultModalPlacement.backgroundOverlay;
+	let backgroundOverlaySP = DefaultModalPlacement.backgroundOverlay;
+
+	// モーダル背景のクリック動作の設定
 	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
+
+	let backgroundClickFunctionPC = DefaultModalPlacement.backgroundClick;
+	let backgroundClickFunctionSP = DefaultModalPlacement.backgroundClick;
+	let modalStyles = new Set([]);
+	let transform = getTransform('center');
 	let modal;
 
 	onMount$1(() => {
-		$$invalidate(12, visible = true);
+		$$invalidate(16, visible = true);
 	});
 
 	onDestroy$1(() => setPreviousFocus());
@@ -4130,7 +4312,7 @@ function instance$t($$self, $$props, $$invalidate) {
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			modal = $$value;
-			$$invalidate(11, modal);
+			$$invalidate(15, modal);
 		});
 	}
 
@@ -4138,21 +4320,23 @@ function instance$t($$self, $$props, $$invalidate) {
 		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
 		if ('clickEventName' in $$props) $$invalidate(1, clickEventName = $$props.clickEventName);
 		if ('clickEventValue' in $$props) $$invalidate(2, clickEventValue = $$props.clickEventValue);
-		if ('placement' in $$props) $$invalidate(21, placement = $$props.placement);
-		if ('animation' in $$props) $$invalidate(3, animation = $$props.animation);
-		if ('_style' in $$props) $$invalidate(4, _style = $$props._style);
-		if ('elasticity' in $$props) $$invalidate(22, elasticity = $$props.elasticity);
-		if ('onClose' in $$props) $$invalidate(5, onClose = $$props.onClose);
-		if ('closeEventName' in $$props) $$invalidate(6, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(7, closeEventValue = $$props.closeEventValue);
-		if ('closeButtonColor' in $$props) $$invalidate(8, closeButtonColor = $$props.closeButtonColor);
-		if ('_closeStyle' in $$props) $$invalidate(9, _closeStyle = $$props._closeStyle);
-		if ('$$scope' in $$props) $$invalidate(29, $$scope = $$props.$$scope);
+		if ('useBreakPoint' in $$props) $$invalidate(3, useBreakPoint = $$props.useBreakPoint);
+		if ('placement' in $$props) $$invalidate(24, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(25, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(26, elasticity = $$props.elasticity);
+		if ('animation' in $$props) $$invalidate(4, animation = $$props.animation);
+		if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
+		if ('onClose' in $$props) $$invalidate(6, onClose = $$props.onClose);
+		if ('closeEventName' in $$props) $$invalidate(7, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(8, closeEventValue = $$props.closeEventValue);
+		if ('closeButtonColor' in $$props) $$invalidate(9, closeButtonColor = $$props.closeButtonColor);
+		if ('_closeStyle' in $$props) $$invalidate(10, _closeStyle = $$props._closeStyle);
+		if ('$$scope' in $$props) $$invalidate(33, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, onClose*/ 224) {
-			$$invalidate(24, close = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, onClose*/ 448) {
+			$$invalidate(30, close = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -4161,28 +4345,49 @@ function instance$t($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*onClose*/ 32) {
-			$$invalidate(19, closable = haveFunction(onClose));
+		if ($$self.$$.dirty[0] & /*onClose*/ 64) {
+			$$invalidate(21, closable = haveFunction(onClose));
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 2097152) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
 			{
 				if (placement && placement.backgroundOverlay) {
-					$$invalidate(10, backgroundOverlay = placement.backgroundOverlay);
+					$$invalidate(11, backgroundOverlay = placement.backgroundOverlay);
+				}
+
+				if (useBreakPoint) {
+					const pc = breakPoint?.PC?.placement?.backgroundOverlay;
+					$$invalidate(12, backgroundOverlayPC = pc ?? false);
+					const sp = breakPoint?.SP?.placement?.backgroundOverlay;
+					$$invalidate(13, backgroundOverlaySP = sp ?? false);
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 2097152) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
 			{
 				if (placement && placement.backgroundClick) {
-					$$invalidate(23, backgroundClickFunction = placement.backgroundClick);
+					$$invalidate(27, backgroundClickFunction = placement.backgroundClick);
+				}
+
+				if (useBreakPoint) {
+					const pc = breakPoint?.PC?.placement?.backgroundClick;
+
+					if (pc) {
+						$$invalidate(28, backgroundClickFunctionPC = pc);
+					}
+
+					const sp = breakPoint?.SP?.placement?.backgroundClick;
+
+					if (sp) {
+						$$invalidate(29, backgroundClickFunctionSP = sp);
+					}
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 8388800) {
-			$$invalidate(18, backgroundClick = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunction*/ 134218112) {
+			$$invalidate(20, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -4191,48 +4396,135 @@ function instance$t($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 2097152) {
-			$$invalidate(26, overwritePosition = placement && placement.position != null
-				? placement.position
-				: DefaultModalPlacement.position);
-		}
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 268435840) {
+			$$invalidate(19, backgroundClickPC = () => {
+				if (closeEventName) {
+					send_event(closeEventName, closeEventValue);
+				}
 
-		if ($$self.$$.dirty & /*placement*/ 2097152) {
-			$$invalidate(25, overwriteMargin = placement && placement.margin != null
-				? placement.margin
-				: DefaultModalPlacement.margin);
+				execOnClickOperation(backgroundClickFunctionPC);
+			});
 		}
 
-		if ($$self.$$.dirty & /*elasticity*/ 4194304) {
-			$$invalidate(17, overwriteElasticity = elasticity);
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 536871296) {
+			$$invalidate(18, backgroundClickSP = () => {
+				if (closeEventName) {
+					send_event(closeEventName, closeEventValue);
+				}
+
+				execOnClickOperation(backgroundClickFunctionSP);
+			});
 		}
 
-		if ($$self.$$.dirty & /*overwritePosition*/ 67108864) {
-			$$invalidate(16, pos = getPositionStyle(overwritePosition));
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
+			// 表示位置のスタイルとアニメーションの動きを設定
+			{
+				// 表示位置のスタイルの設定
+				let position = DefaultModalPlacement.position;
+
+				if (placement && placement.position !== null) {
+					position = placement.position;
+				}
+
+				let positionStyle = getPositionStyle(position);
+
+				if (!useBreakPoint) {
+					modalStyles.add(positionStyle);
+				}
+
+				DEVICE_IDS.forEach(deviceId => {
+					if (useBreakPoint) {
+						const positionWithBp = breakPoint[deviceId]?.placement?.position;
+						positionStyle = getPositionStyle(positionWithBp);
+					}
+
+					const positionVariables = stringifyStyleObj(formatObjectKey({
+						obj: parseStyle(positionStyle),
+						prefix: '--modal-bp-',
+						suffix: `-${deviceId.toLowerCase()}`
+					}));
+
+					modalStyles.add(positionVariables);
+				});
+
+				// アニメーションの動きの設定
+				$$invalidate(14, transform = getTransform(position));
+			}
 		}
 
-		if ($$self.$$.dirty & /*overwritePosition*/ 67108864) {
-			$$invalidate(15, transform = getTransform(overwritePosition));
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
+			// 表示位置の調整のスタイルを設定
+			{
+				let margin = DefaultModalPlacement.margin;
+
+				if (placement && placement.margin !== null) {
+					margin = placement.margin;
+				}
+
+				let marginStyle = getMarginStyle(margin);
+
+				if (!useBreakPoint) {
+					modalStyles.add(marginStyle);
+				}
+
+				DEVICE_IDS.forEach(deviceId => {
+					if (useBreakPoint) {
+						const marginWithBp = breakPoint[deviceId]?.placement?.margin;
+						marginStyle = getMarginStyle(marginWithBp);
+					}
+
+					const marginVariables = stringifyStyleObj(formatObjectKey({
+						obj: parseStyle(marginStyle),
+						prefix: '--modal-bp-',
+						suffix: `-${deviceId.toLowerCase()}`
+					}));
+
+					modalStyles.add(marginVariables);
+				});
+			}
 		}
 
-		if ($$self.$$.dirty & /*overwriteMargin*/ 33554432) {
-			$$invalidate(14, marginStyle = getMarginStyle(overwriteMargin));
+		if ($$self.$$.dirty[0] & /*elasticity, useBreakPoint, breakPoint*/ 100663304) {
+			// 拡大方法のスタイルを設定
+			{
+				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);
+				});
+			}
 		}
 
-		if ($$self.$$.dirty & /*close*/ 16777216) {
-			$$invalidate(13, handle_keydown = handleKeydown({ Escape: close }));
+		if ($$self.$$.dirty[0] & /*close*/ 1073741824) {
+			$$invalidate(17, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
 
-	$$invalidate(11, modal = null);
+	$$invalidate(15, modal = null);
 
 	// svelteコンポーネントのアニメーションを発火させるためにマウント時にvisibleをtrueにする。
-	$$invalidate(12, visible = false);
+	$$invalidate(16, visible = false);
 
 	return [
 		onClick,
 		clickEventName,
 		clickEventValue,
+		useBreakPoint,
 		animation,
 		_style,
 		onClose,
@@ -4241,22 +4533,25 @@ function instance$t($$self, $$props, $$invalidate) {
 		closeButtonColor,
 		_closeStyle,
 		backgroundOverlay,
+		backgroundOverlayPC,
+		backgroundOverlaySP,
+		transform,
 		modal,
 		visible,
 		handle_keydown,
-		marginStyle,
-		transform,
-		pos,
-		overwriteElasticity,
+		backgroundClickSP,
+		backgroundClickPC,
 		backgroundClick,
 		closable,
 		$maximumZindex,
+		modalStyles,
 		placement,
+		breakPoint,
 		elasticity,
 		backgroundClickFunction,
+		backgroundClickFunctionPC,
+		backgroundClickFunctionSP,
 		close,
-		overwriteMargin,
-		overwritePosition,
 		slots,
 		div_binding,
 		$$scope
@@ -4277,17 +4572,20 @@ class Modal extends SvelteComponent {
 				onClick: 0,
 				clickEventName: 1,
 				clickEventValue: 2,
-				placement: 21,
-				animation: 3,
-				_style: 4,
-				elasticity: 22,
-				onClose: 5,
-				closeEventName: 6,
-				closeEventValue: 7,
-				closeButtonColor: 8,
-				_closeStyle: 9
+				useBreakPoint: 3,
+				placement: 24,
+				breakPoint: 25,
+				elasticity: 26,
+				animation: 4,
+				_style: 5,
+				onClose: 6,
+				closeEventName: 7,
+				closeEventValue: 8,
+				closeButtonColor: 9,
+				_closeStyle: 10
 			},
-			add_css$q
+			add_css$q,
+			[-1, -1]
 		);
 	}
 }
@@ -10256,4 +10554,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultFormButtonColor, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
+export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };