@plaidev/karte-action-sdk 1.1.235-28695221.a9f041a7 → 1.1.235-28695399.37fa4bea

package/dist/hydrate/index.es.js

@@ -14044,7 +14044,7 @@ class Icon extends SvelteComponent {
 /* src/components-flex/button/Button.svelte generated by Svelte v3.53.1 */
 
 function add_css$6(target) {
-	append_styles(target, "svelte-kz1c6t", ".v2-button.svelte-kz1c6t{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}.v2-button-icon.svelte-kz1c6t{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
+	append_styles(target, "svelte-bo01kn", ".button.svelte-bo01kn{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}.button-icon.svelte-bo01kn{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
 }
 
 // (127:2) {#if (props.isIcon && props.iconVariant)}
@@ -14077,7 +14077,7 @@ function create_if_block$2(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "v2-button-icon svelte-kz1c6t");
+			attr(div, "class", "button-icon svelte-bo01kn");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -14151,7 +14151,7 @@ function create_fragment$6(ctx) {
 		h() {
 			attr(button, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(button, "style", /*style*/ ctx[2]);
-			attr(button, "class", "v2-button svelte-kz1c6t");
+			attr(button, "class", "button svelte-bo01kn");
 		},
 		m(target, anchor) {
 			insert_hydration(target, button, anchor);
@@ -14399,13 +14399,28 @@ const BUTTON_ICON_ANGLE = {
 /* src/components-flex/close-button/CloseButton.svelte generated by Svelte v3.53.1 */
 
 function add_css$5(target) {
-	append_styles(target, "svelte-1dgpo5m", ".close-button.svelte-1dgpo5m{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background:none;border:0;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}");
+	append_styles(target, "svelte-13071ty", ".close-button.svelte-13071ty{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s}");
 }
 
 function create_fragment$5(ctx) {
 	let button;
 	let svg;
 	let path;
+	let mounted;
+	let dispose;
+
+	let button_levels = [
+		{ "data-layer-id": /*layerId*/ ctx[0] },
+		{ class: "close-button" },
+		{ style: /*style*/ ctx[1] },
+		dataAttrStopPropagation('click')
+	];
+
+	let button_data = {};
+
+	for (let i = 0; i < button_levels.length; i += 1) {
+		button_data = assign(button_data, button_levels[i]);
+	}
 
 	return {
 		c() {
@@ -14444,45 +14459,68 @@ function create_fragment$5(ctx) {
 			set_style(svg, "height", "75%");
 			attr(svg, "viewBox", "0 0 50 50");
 			attr(svg, "fill", "#666666");
-			attr(button, "data-layer-id", /*layerId*/ ctx[0]);
-			attr(button, "class", "close-button svelte-1dgpo5m");
-			attr(button, "style", /*style*/ ctx[1]);
+			set_attributes(button, button_data);
+			toggle_class(button, "svelte-13071ty", true);
 		},
 		m(target, anchor) {
 			insert_hydration(target, button, anchor);
 			append_hydration(button, svg);
 			append_hydration(svg, path);
+			if (button.autofocus) button.focus();
+
+			if (!mounted) {
+				dispose = listen(button, "click", prevent_default(checkStopPropagation('click', /*handleClick*/ ctx[2])));
+				mounted = true;
+			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*layerId*/ 1) {
-				attr(button, "data-layer-id", /*layerId*/ ctx[0]);
-			}
+			set_attributes(button, button_data = get_spread_update(button_levels, [
+				dirty & /*layerId*/ 1 && { "data-layer-id": /*layerId*/ ctx[0] },
+				{ class: "close-button" },
+				dirty & /*style*/ 2 && { style: /*style*/ ctx[1] },
+				dataAttrStopPropagation('click')
+			]));
 
-			if (dirty & /*style*/ 2) {
-				attr(button, "style", /*style*/ ctx[1]);
-			}
+			toggle_class(button, "svelte-13071ty", true);
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(button);
+			mounted = false;
+			dispose();
 		}
 	};
 }
 
 function instance$5($$self, $$props, $$invalidate) {
 	let style;
+	let { onClick = { operation: 'closeApp', args: ['button'] } } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
+	let { eventName = '' } = $$props;
+	let { eventValue = undefined } = $$props;
+
+	function handleClick() {
+		if (eventName) {
+			send_event(eventName, eventValue);
+		}
+
+		execOnClickOperation(onClick);
+	}
+
 	const size = props.size ?? 24;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('onClick' in $$props) $$invalidate(3, onClick = $$props.onClick);
+		if ('props' in $$props) $$invalidate(4, props = $$props.props);
 		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
+		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 4) {
+		if ($$self.$$.dirty & /*props*/ 16) {
 			$$invalidate(1, style = objToStyle({
 				width: `${size}px`,
 				height: `${size}px`,
@@ -14492,13 +14530,28 @@ function instance$5($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [layerId, style, props];
+	return [layerId, style, handleClick, onClick, props, eventName, eventValue];
 }
 
 class CloseButton extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 2, layerId: 0 }, add_css$5);
+
+		init(
+			this,
+			options,
+			instance$5,
+			create_fragment$5,
+			safe_not_equal,
+			{
+				onClick: 3,
+				props: 4,
+				layerId: 0,
+				eventName: 5,
+				eventValue: 6
+			},
+			add_css$5
+		);
 	}
 }
 
@@ -14983,7 +15036,7 @@ class BackgroundOverlay extends SvelteComponent {
 /* src/components-flex/modal/Modal.svelte generated by Svelte v3.53.1 */
 
 function add_css(target) {
-	append_styles(target, "svelte-1fow8xp", ".v2-modal.svelte-1fow8xp{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.v2-modal.svelte-1fow8xp > .button{flex:auto;display:flex}.v2-close.svelte-1fow8xp{position:absolute;top:8px;right:8px}.v2-close.svelte-1fow8xp > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.v2-close.svelte-1fow8xp > .button:hover{transform:rotate(90deg)}@media screen and (min-width: 641px){.v2-modal-bp.svelte-1fow8xp{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);margin:var(--modal-bp-margin-pc) !important}.v2-background-bp-pc{display:block}.v2-background-bp-sp{display:none}}@media screen and (max-width: 640px){.v2-modal-bp.svelte-1fow8xp{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);margin:var(--modal-bp-margin-sp) !important}.v2-background-bp-pc{display:none}.v2-background-bp-sp{display:block}}");
+	append_styles(target, "svelte-1ks2ecq", ".modal.svelte-1ks2ecq{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1ks2ecq > .button{flex:auto;display:flex}.close.svelte-1ks2ecq{position:absolute;top:8px;right:8px}.close.svelte-1ks2ecq > .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-1ks2ecq > .button:hover{transform:rotate(90deg)}@media screen and (min-width: 641px){.modal-bp.svelte-1ks2ecq{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);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-1ks2ecq{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);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 
 // (264:0) {:else}
@@ -14993,12 +15046,12 @@ function create_else_block(ctx) {
 
 	backgroundoverlay = new BackgroundOverlay({
 			props: {
-				backgroundOverlay: /*backgroundOverlay*/ ctx[4]
+				backgroundOverlay: /*backgroundOverlay*/ ctx[7]
 			}
 		});
 
 	backgroundoverlay.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[12])) /*backgroundClick*/ ctx[12].apply(this, arguments);
+		if (is_function(/*backgroundClick*/ ctx[15])) /*backgroundClick*/ ctx[15].apply(this, arguments);
 	});
 
 	return {
@@ -15015,7 +15068,7 @@ function create_else_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay_changes = {};
-			if (dirty[0] & /*backgroundOverlay*/ 16) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[4];
+			if (dirty[0] & /*backgroundOverlay*/ 128) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[7];
 			backgroundoverlay.$set(backgroundoverlay_changes);
 		},
 		i(local) {
@@ -15042,24 +15095,24 @@ function create_if_block_3(ctx) {
 
 	backgroundoverlay0 = new BackgroundOverlay({
 			props: {
-				class: "v2-background-bp-pc",
-				backgroundOverlay: /*backgroundOverlayPC*/ ctx[5]
+				class: "background-bp-pc",
+				backgroundOverlay: /*backgroundOverlayPC*/ ctx[8]
 			}
 		});
 
 	backgroundoverlay0.$on("click", function () {
-		if (is_function(/*backgroundClickPC*/ ctx[11])) /*backgroundClickPC*/ ctx[11].apply(this, arguments);
+		if (is_function(/*backgroundClickPC*/ ctx[14])) /*backgroundClickPC*/ ctx[14].apply(this, arguments);
 	});
 
 	backgroundoverlay1 = new BackgroundOverlay({
 			props: {
-				class: "v2-background-bp-sp ",
-				backgroundOverlay: /*backgroundOverlaySP*/ ctx[6]
+				class: "background-bp-sp ",
+				backgroundOverlay: /*backgroundOverlaySP*/ ctx[9]
 			}
 		});
 
 	backgroundoverlay1.$on("click", function () {
-		if (is_function(/*backgroundClickSP*/ ctx[10])) /*backgroundClickSP*/ ctx[10].apply(this, arguments);
+		if (is_function(/*backgroundClickSP*/ ctx[13])) /*backgroundClickSP*/ ctx[13].apply(this, arguments);
 	});
 
 	return {
@@ -15082,10 +15135,10 @@ function create_if_block_3(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay0_changes = {};
-			if (dirty[0] & /*backgroundOverlayPC*/ 32) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[5];
+			if (dirty[0] & /*backgroundOverlayPC*/ 256) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[8];
 			backgroundoverlay0.$set(backgroundoverlay0_changes);
 			const backgroundoverlay1_changes = {};
-			if (dirty[0] & /*backgroundOverlaySP*/ 64) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[6];
+			if (dirty[0] & /*backgroundOverlaySP*/ 512) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[9];
 			backgroundoverlay1.$set(backgroundoverlay1_changes);
 		},
 		i(local) {
@@ -15128,7 +15181,7 @@ function create_if_block(ctx) {
 	let div1_class_value;
 	let div1_intro;
 	let current;
-	let if_block = /*closable*/ ctx[13] && create_if_block_1(ctx);
+	let if_block = /*closable*/ ctx[16] && create_if_block_1(ctx);
 	const default_slot_template = /*#slots*/ ctx[30].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[29], null);
 
@@ -15160,10 +15213,10 @@ function create_if_block(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(['v2-modal', /*useBreakPoint*/ ctx[0] ? 'v2-modal-bp' : ''].join(' ')) + " svelte-1fow8xp"));
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-1ks2ecq"));
 			attr(div1, "role", "dialog");
 			attr(div1, "aria-modal", "true");
-			attr(div1, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
+			attr(div1, "style", Array.from(/*modalStyles*/ ctx[18]).join(';'));
 		},
 		m(target, anchor) {
 			insert_hydration(target, div1, anchor);
@@ -15181,11 +15234,11 @@ function create_if_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*closable*/ ctx[13]) {
+			if (/*closable*/ ctx[16]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty[0] & /*closable*/ 8192) {
+					if (dirty[0] & /*closable*/ 65536) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -15219,7 +15272,7 @@ function create_if_block(ctx) {
 				}
 			}
 
-			if (!current || dirty[0] & /*useBreakPoint*/ 1 && div1_class_value !== (div1_class_value = "" + (null_to_empty(['v2-modal', /*useBreakPoint*/ ctx[0] ? 'v2-modal-bp' : ''].join(' ')) + " svelte-1fow8xp"))) {
+			if (!current || dirty[0] & /*useBreakPoint*/ 1 && div1_class_value !== (div1_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-1ks2ecq"))) {
 				attr(div1, "class", div1_class_value);
 			}
 		},
@@ -15231,7 +15284,7 @@ function create_if_block(ctx) {
 			if (!div1_intro) {
 				add_render_callback(() => {
 					div1_intro = create_in_transition(div1, customAnimation, {
-						transforms: /*transforms*/ ctx[3],
+						transforms: /*transforms*/ ctx[6],
 						animationStyle: /*animation*/ ctx[1]
 					});
 
@@ -15262,7 +15315,12 @@ function create_if_block_1(ctx) {
 	let current;
 
 	closebutton = new CloseButton({
-			props: { props: /*closeButtonProps*/ ctx[2] }
+			props: {
+				onClick: /*onClose*/ ctx[2],
+				eventName: /*closeEventName*/ ctx[3],
+				eventValue: /*closeEventValue*/ ctx[4],
+				props: /*closeButtonProps*/ ctx[5]
+			}
 		});
 
 	return {
@@ -15279,8 +15337,8 @@ function create_if_block_1(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "v2-close svelte-1fow8xp");
-			set_style(div, "z-index", /*$maximumZindex*/ ctx[14] + 1);
+			attr(div, "class", "close svelte-1ks2ecq");
+			set_style(div, "z-index", /*$maximumZindex*/ ctx[17] + 1);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -15289,11 +15347,14 @@ function create_if_block_1(ctx) {
 		},
 		p(ctx, dirty) {
 			const closebutton_changes = {};
-			if (dirty[0] & /*closeButtonProps*/ 4) closebutton_changes.props = /*closeButtonProps*/ ctx[2];
+			if (dirty[0] & /*onClose*/ 4) closebutton_changes.onClick = /*onClose*/ ctx[2];
+			if (dirty[0] & /*closeEventName*/ 8) closebutton_changes.eventName = /*closeEventName*/ ctx[3];
+			if (dirty[0] & /*closeEventValue*/ 16) closebutton_changes.eventValue = /*closeEventValue*/ ctx[4];
+			if (dirty[0] & /*closeButtonProps*/ 32) closebutton_changes.props = /*closeButtonProps*/ ctx[5];
 			closebutton.$set(closebutton_changes);
 
-			if (!current || dirty[0] & /*$maximumZindex*/ 16384) {
-				set_style(div, "z-index", /*$maximumZindex*/ ctx[14] + 1);
+			if (!current || dirty[0] & /*$maximumZindex*/ 131072) {
+				set_style(div, "z-index", /*$maximumZindex*/ ctx[17] + 1);
 			}
 		},
 		i(local) {
@@ -15333,7 +15394,7 @@ function create_fragment(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[8] && create_if_block(ctx);
+	let if_block1 = /*visible*/ ctx[11] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -15357,7 +15418,7 @@ function create_fragment(ctx) {
 
 			if (!mounted) {
 				dispose = listen(window, "keydown", function () {
-					if (is_function(/*handle_keydown*/ ctx[9])) /*handle_keydown*/ ctx[9].apply(this, arguments);
+					if (is_function(/*handle_keydown*/ ctx[12])) /*handle_keydown*/ ctx[12].apply(this, arguments);
 				});
 
 				mounted = true;
@@ -15391,11 +15452,11 @@ function create_fragment(ctx) {
 				if_block0.m(t.parentNode, t);
 			}
 
-			if (/*visible*/ ctx[8]) {
+			if (/*visible*/ ctx[11]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty[0] & /*visible*/ 256) {
+					if (dirty[0] & /*visible*/ 2048) {
 						transition_in(if_block1, 1);
 					}
 				} else {
@@ -15445,7 +15506,7 @@ function instance($$self, $$props, $$invalidate) {
 	let handle_keydown;
 	let visible;
 	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(14, $maximumZindex = $$value));
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(17, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { clickEventName = '' } = $$props;
@@ -15476,7 +15537,7 @@ function instance($$self, $$props, $$invalidate) {
 	let modal;
 
 	onMount$1(() => {
-		$$invalidate(8, visible = true);
+		$$invalidate(11, visible = true);
 	});
 
 	onDestroy$1(() => setPreviousFocus());
@@ -15484,28 +15545,28 @@ function instance($$self, $$props, $$invalidate) {
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			modal = $$value;
-			$$invalidate(7, modal);
+			$$invalidate(10, modal);
 		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(16, onClick = $$props.onClick);
-		if ('clickEventName' in $$props) $$invalidate(17, clickEventName = $$props.clickEventName);
-		if ('clickEventValue' in $$props) $$invalidate(18, clickEventValue = $$props.clickEventValue);
+		if ('onClick' in $$props) $$invalidate(19, onClick = $$props.onClick);
+		if ('clickEventName' in $$props) $$invalidate(20, clickEventName = $$props.clickEventName);
+		if ('clickEventValue' in $$props) $$invalidate(21, clickEventValue = $$props.clickEventValue);
 		if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
-		if ('placement' in $$props) $$invalidate(19, placement = $$props.placement);
-		if ('breakPoint' in $$props) $$invalidate(20, breakPoint = $$props.breakPoint);
-		if ('elasticity' in $$props) $$invalidate(21, elasticity = $$props.elasticity);
+		if ('placement' in $$props) $$invalidate(22, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(23, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(24, elasticity = $$props.elasticity);
 		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('onClose' in $$props) $$invalidate(22, onClose = $$props.onClose);
-		if ('closeEventName' in $$props) $$invalidate(23, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(24, closeEventValue = $$props.closeEventValue);
-		if ('closeButtonProps' in $$props) $$invalidate(2, closeButtonProps = $$props.closeButtonProps);
+		if ('onClose' in $$props) $$invalidate(2, onClose = $$props.onClose);
+		if ('closeEventName' in $$props) $$invalidate(3, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(4, closeEventValue = $$props.closeEventValue);
+		if ('closeButtonProps' in $$props) $$invalidate(5, closeButtonProps = $$props.closeButtonProps);
 		if ('$$scope' in $$props) $$invalidate(29, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, onClose*/ 29360128) {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, onClose*/ 28) {
 			$$invalidate(28, close = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -15515,23 +15576,23 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*onClose*/ 4194304) {
-			$$invalidate(13, closable = haveFunction(onClose));
+		if ($$self.$$.dirty[0] & /*onClose*/ 4) {
+			$$invalidate(16, closable = haveFunction(onClose));
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 1572865) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 12582913) {
 			{
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundOverlay;
-					$$invalidate(5, backgroundOverlayPC = pc ?? false);
+					$$invalidate(8, backgroundOverlayPC = pc ?? false);
 					const sp = breakPoint?.SP?.placement?.backgroundOverlay;
-					$$invalidate(6, backgroundOverlaySP = sp ?? false);
+					$$invalidate(9, backgroundOverlaySP = sp ?? false);
 				}
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 1572865) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 12582913) {
 			{
 				if (placement && placement.backgroundClick) {
 					$$invalidate(25, backgroundClickFunction = placement.backgroundClick);
@@ -15553,8 +15614,8 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunction*/ 58720256) {
-			$$invalidate(12, backgroundClick = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunction*/ 33554456) {
+			$$invalidate(15, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -15563,8 +15624,8 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 92274688) {
-			$$invalidate(11, backgroundClickPC = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 67108888) {
+			$$invalidate(14, backgroundClickPC = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -15573,8 +15634,8 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 159383552) {
-			$$invalidate(10, backgroundClickSP = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 134217752) {
+			$$invalidate(13, backgroundClickSP = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -15583,7 +15644,7 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint, transforms*/ 1572873) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint, transforms*/ 12582977) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
@@ -15595,7 +15656,7 @@ function instance($$self, $$props, $$invalidate) {
 					modalStyles.add(positionStyle);
 				}
 
-				$$invalidate(3, transforms = []);
+				$$invalidate(6, transforms = []);
 
 				DEVICE_IDS.forEach(deviceId => {
 
@@ -15613,7 +15674,7 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 1572865) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 12582913) {
 			// 表示位置の調整のスタイルを設定
 			{
 				let margin = DefaultModalPlacement.margin;
@@ -15637,7 +15698,7 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*elasticity, useBreakPoint, breakPoint*/ 3145729) {
+		if ($$self.$$.dirty[0] & /*elasticity, useBreakPoint, breakPoint*/ 25165825) {
 			// 拡大方法のスタイルを設定
 			{
 				let elasticStyle = ElasticityStyle['none' ];
@@ -15660,18 +15721,21 @@ function instance($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty[0] & /*close*/ 268435456) {
-			$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
+			$$invalidate(12, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
 
-	$$invalidate(7, modal = null);
+	$$invalidate(10, modal = null);
 
 	// svelteコンポーネントのアニメーションを発火させるためにマウント時にvisibleをtrueにする。
-	$$invalidate(8, visible = false);
+	$$invalidate(11, visible = false);
 
 	return [
 		useBreakPoint,
 		animation,
+		onClose,
+		closeEventName,
+		closeEventValue,
 		closeButtonProps,
 		transforms,
 		backgroundOverlay,
@@ -15692,9 +15756,6 @@ function instance($$self, $$props, $$invalidate) {
 		placement,
 		breakPoint,
 		elasticity,
-		onClose,
-		closeEventName,
-		closeEventValue,
 		backgroundClickFunction,
 		backgroundClickFunctionPC,
 		backgroundClickFunctionSP,
@@ -15716,18 +15777,18 @@ class Modal extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				onClick: 16,
-				clickEventName: 17,
-				clickEventValue: 18,
+				onClick: 19,
+				clickEventName: 20,
+				clickEventValue: 21,
 				useBreakPoint: 0,
-				placement: 19,
-				breakPoint: 20,
-				elasticity: 21,
+				placement: 22,
+				breakPoint: 23,
+				elasticity: 24,
 				animation: 1,
-				onClose: 22,
-				closeEventName: 23,
-				closeEventValue: 24,
-				closeButtonProps: 2
+				onClose: 2,
+				closeEventName: 3,
+				closeEventValue: 4,
+				closeButtonProps: 5
 			},
 			add_css,
 			[-1, -1]

package/dist/index.es.js

@@ -13052,7 +13052,7 @@ class Icon extends SvelteComponent {
 /* src/components-flex/button/Button.svelte generated by Svelte v3.53.1 */
 
 function add_css$6(target) {
-	append_styles(target, "svelte-kz1c6t", ".v2-button.svelte-kz1c6t{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}.v2-button-icon.svelte-kz1c6t{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
+	append_styles(target, "svelte-bo01kn", ".button.svelte-bo01kn{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}.button-icon.svelte-bo01kn{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
 }
 
 // (127:2) {#if (props.isIcon && props.iconVariant)}
@@ -13075,7 +13075,7 @@ function create_if_block$2(ctx) {
 		c() {
 			div = element("div");
 			create_component(icon.$$.fragment);
-			attr(div, "class", "v2-button-icon svelte-kz1c6t");
+			attr(div, "class", "button-icon svelte-bo01kn");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -13129,7 +13129,7 @@ function create_fragment$6(ctx) {
 			t1 = text(t1_value);
 			attr(button, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(button, "style", /*style*/ ctx[2]);
-			attr(button, "class", "v2-button svelte-kz1c6t");
+			attr(button, "class", "button svelte-bo01kn");
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -13377,13 +13377,28 @@ const BUTTON_ICON_ANGLE = {
 /* src/components-flex/close-button/CloseButton.svelte generated by Svelte v3.53.1 */
 
 function add_css$5(target) {
-	append_styles(target, "svelte-1dgpo5m", ".close-button.svelte-1dgpo5m{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background:none;border:0;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}");
+	append_styles(target, "svelte-13071ty", ".close-button.svelte-13071ty{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s}");
 }
 
 function create_fragment$5(ctx) {
 	let button;
 	let svg;
 	let path;
+	let mounted;
+	let dispose;
+
+	let button_levels = [
+		{ "data-layer-id": /*layerId*/ ctx[0] },
+		{ class: "close-button" },
+		{ style: /*style*/ ctx[1] },
+		dataAttrStopPropagation('click')
+	];
+
+	let button_data = {};
+
+	for (let i = 0; i < button_levels.length; i += 1) {
+		button_data = assign(button_data, button_levels[i]);
+	}
 
 	return {
 		c() {
@@ -13396,45 +13411,68 @@ function create_fragment$5(ctx) {
 			set_style(svg, "height", "75%");
 			attr(svg, "viewBox", "0 0 50 50");
 			attr(svg, "fill", "#666666");
-			attr(button, "data-layer-id", /*layerId*/ ctx[0]);
-			attr(button, "class", "close-button svelte-1dgpo5m");
-			attr(button, "style", /*style*/ ctx[1]);
+			set_attributes(button, button_data);
+			toggle_class(button, "svelte-13071ty", true);
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
 			append(button, svg);
 			append(svg, path);
+			if (button.autofocus) button.focus();
+
+			if (!mounted) {
+				dispose = listen(button, "click", prevent_default(checkStopPropagation('click', /*handleClick*/ ctx[2])));
+				mounted = true;
+			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*layerId*/ 1) {
-				attr(button, "data-layer-id", /*layerId*/ ctx[0]);
-			}
+			set_attributes(button, button_data = get_spread_update(button_levels, [
+				dirty & /*layerId*/ 1 && { "data-layer-id": /*layerId*/ ctx[0] },
+				{ class: "close-button" },
+				dirty & /*style*/ 2 && { style: /*style*/ ctx[1] },
+				dataAttrStopPropagation('click')
+			]));
 
-			if (dirty & /*style*/ 2) {
-				attr(button, "style", /*style*/ ctx[1]);
-			}
+			toggle_class(button, "svelte-13071ty", true);
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(button);
+			mounted = false;
+			dispose();
 		}
 	};
 }
 
 function instance$5($$self, $$props, $$invalidate) {
 	let style;
+	let { onClick = { operation: 'closeApp', args: ['button'] } } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
+	let { eventName = '' } = $$props;
+	let { eventValue = undefined } = $$props;
+
+	function handleClick() {
+		if (eventName) {
+			send_event(eventName, eventValue);
+		}
+
+		execOnClickOperation(onClick);
+	}
+
 	const size = props.size ?? 24;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('onClick' in $$props) $$invalidate(3, onClick = $$props.onClick);
+		if ('props' in $$props) $$invalidate(4, props = $$props.props);
 		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
+		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 4) {
+		if ($$self.$$.dirty & /*props*/ 16) {
 			$$invalidate(1, style = objToStyle({
 				width: `${size}px`,
 				height: `${size}px`,
@@ -13444,13 +13482,28 @@ function instance$5($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [layerId, style, props];
+	return [layerId, style, handleClick, onClick, props, eventName, eventValue];
 }
 
 class CloseButton extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 2, layerId: 0 }, add_css$5);
+
+		init(
+			this,
+			options,
+			instance$5,
+			create_fragment$5,
+			safe_not_equal,
+			{
+				onClick: 3,
+				props: 4,
+				layerId: 0,
+				eventName: 5,
+				eventValue: 6
+			},
+			add_css$5
+		);
 	}
 }
 
@@ -13876,7 +13929,7 @@ class BackgroundOverlay extends SvelteComponent {
 /* src/components-flex/modal/Modal.svelte generated by Svelte v3.53.1 */
 
 function add_css(target) {
-	append_styles(target, "svelte-1fow8xp", ".v2-modal.svelte-1fow8xp{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.v2-modal.svelte-1fow8xp > .button{flex:auto;display:flex}.v2-close.svelte-1fow8xp{position:absolute;top:8px;right:8px}.v2-close.svelte-1fow8xp > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.v2-close.svelte-1fow8xp > .button:hover{transform:rotate(90deg)}@media screen and (min-width: 641px){.v2-modal-bp.svelte-1fow8xp{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);margin:var(--modal-bp-margin-pc) !important}.v2-background-bp-pc{display:block}.v2-background-bp-sp{display:none}}@media screen and (max-width: 640px){.v2-modal-bp.svelte-1fow8xp{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);margin:var(--modal-bp-margin-sp) !important}.v2-background-bp-pc{display:none}.v2-background-bp-sp{display:block}}");
+	append_styles(target, "svelte-1ks2ecq", ".modal.svelte-1ks2ecq{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1ks2ecq > .button{flex:auto;display:flex}.close.svelte-1ks2ecq{position:absolute;top:8px;right:8px}.close.svelte-1ks2ecq > .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-1ks2ecq > .button:hover{transform:rotate(90deg)}@media screen and (min-width: 641px){.modal-bp.svelte-1ks2ecq{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);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-1ks2ecq{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);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 
 // (264:0) {:else}
@@ -13886,12 +13939,12 @@ function create_else_block(ctx) {
 
 	backgroundoverlay = new BackgroundOverlay({
 			props: {
-				backgroundOverlay: /*backgroundOverlay*/ ctx[4]
+				backgroundOverlay: /*backgroundOverlay*/ ctx[7]
 			}
 		});
 
 	backgroundoverlay.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[12])) /*backgroundClick*/ ctx[12].apply(this, arguments);
+		if (is_function(/*backgroundClick*/ ctx[15])) /*backgroundClick*/ ctx[15].apply(this, arguments);
 	});
 
 	return {
@@ -13905,7 +13958,7 @@ function create_else_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay_changes = {};
-			if (dirty[0] & /*backgroundOverlay*/ 16) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[4];
+			if (dirty[0] & /*backgroundOverlay*/ 128) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[7];
 			backgroundoverlay.$set(backgroundoverlay_changes);
 		},
 		i(local) {
@@ -13932,24 +13985,24 @@ function create_if_block_3(ctx) {
 
 	backgroundoverlay0 = new BackgroundOverlay({
 			props: {
-				class: "v2-background-bp-pc",
-				backgroundOverlay: /*backgroundOverlayPC*/ ctx[5]
+				class: "background-bp-pc",
+				backgroundOverlay: /*backgroundOverlayPC*/ ctx[8]
 			}
 		});
 
 	backgroundoverlay0.$on("click", function () {
-		if (is_function(/*backgroundClickPC*/ ctx[11])) /*backgroundClickPC*/ ctx[11].apply(this, arguments);
+		if (is_function(/*backgroundClickPC*/ ctx[14])) /*backgroundClickPC*/ ctx[14].apply(this, arguments);
 	});
 
 	backgroundoverlay1 = new BackgroundOverlay({
 			props: {
-				class: "v2-background-bp-sp ",
-				backgroundOverlay: /*backgroundOverlaySP*/ ctx[6]
+				class: "background-bp-sp ",
+				backgroundOverlay: /*backgroundOverlaySP*/ ctx[9]
 			}
 		});
 
 	backgroundoverlay1.$on("click", function () {
-		if (is_function(/*backgroundClickSP*/ ctx[10])) /*backgroundClickSP*/ ctx[10].apply(this, arguments);
+		if (is_function(/*backgroundClickSP*/ ctx[13])) /*backgroundClickSP*/ ctx[13].apply(this, arguments);
 	});
 
 	return {
@@ -13967,10 +14020,10 @@ function create_if_block_3(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay0_changes = {};
-			if (dirty[0] & /*backgroundOverlayPC*/ 32) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[5];
+			if (dirty[0] & /*backgroundOverlayPC*/ 256) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[8];
 			backgroundoverlay0.$set(backgroundoverlay0_changes);
 			const backgroundoverlay1_changes = {};
-			if (dirty[0] & /*backgroundOverlaySP*/ 64) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[6];
+			if (dirty[0] & /*backgroundOverlaySP*/ 512) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[9];
 			backgroundoverlay1.$set(backgroundoverlay1_changes);
 		},
 		i(local) {
@@ -14012,7 +14065,7 @@ function create_if_block(ctx) {
 	let div1_class_value;
 	let div1_intro;
 	let current;
-	let if_block = /*closable*/ ctx[13] && create_if_block_1(ctx);
+	let if_block = /*closable*/ ctx[16] && create_if_block_1(ctx);
 	const default_slot_template = /*#slots*/ ctx[30].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[29], null);
 
@@ -14023,10 +14076,10 @@ function create_if_block(ctx) {
 			t = space();
 			div0 = element("div");
 			if (default_slot) default_slot.c();
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(['v2-modal', /*useBreakPoint*/ ctx[0] ? 'v2-modal-bp' : ''].join(' ')) + " svelte-1fow8xp"));
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-1ks2ecq"));
 			attr(div1, "role", "dialog");
 			attr(div1, "aria-modal", "true");
-			attr(div1, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
+			attr(div1, "style", Array.from(/*modalStyles*/ ctx[18]).join(';'));
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -14044,11 +14097,11 @@ function create_if_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*closable*/ ctx[13]) {
+			if (/*closable*/ ctx[16]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty[0] & /*closable*/ 8192) {
+					if (dirty[0] & /*closable*/ 65536) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -14082,7 +14135,7 @@ function create_if_block(ctx) {
 				}
 			}
 
-			if (!current || dirty[0] & /*useBreakPoint*/ 1 && div1_class_value !== (div1_class_value = "" + (null_to_empty(['v2-modal', /*useBreakPoint*/ ctx[0] ? 'v2-modal-bp' : ''].join(' ')) + " svelte-1fow8xp"))) {
+			if (!current || dirty[0] & /*useBreakPoint*/ 1 && div1_class_value !== (div1_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-1ks2ecq"))) {
 				attr(div1, "class", div1_class_value);
 			}
 		},
@@ -14094,7 +14147,7 @@ function create_if_block(ctx) {
 			if (!div1_intro) {
 				add_render_callback(() => {
 					div1_intro = create_in_transition(div1, customAnimation, {
-						transforms: /*transforms*/ ctx[3],
+						transforms: /*transforms*/ ctx[6],
 						animationStyle: /*animation*/ ctx[1]
 					});
 
@@ -14125,15 +14178,20 @@ function create_if_block_1(ctx) {
 	let current;
 
 	closebutton = new CloseButton({
-			props: { props: /*closeButtonProps*/ ctx[2] }
+			props: {
+				onClick: /*onClose*/ ctx[2],
+				eventName: /*closeEventName*/ ctx[3],
+				eventValue: /*closeEventValue*/ ctx[4],
+				props: /*closeButtonProps*/ ctx[5]
+			}
 		});
 
 	return {
 		c() {
 			div = element("div");
 			create_component(closebutton.$$.fragment);
-			attr(div, "class", "v2-close svelte-1fow8xp");
-			set_style(div, "z-index", /*$maximumZindex*/ ctx[14] + 1);
+			attr(div, "class", "close svelte-1ks2ecq");
+			set_style(div, "z-index", /*$maximumZindex*/ ctx[17] + 1);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -14142,11 +14200,14 @@ function create_if_block_1(ctx) {
 		},
 		p(ctx, dirty) {
 			const closebutton_changes = {};
-			if (dirty[0] & /*closeButtonProps*/ 4) closebutton_changes.props = /*closeButtonProps*/ ctx[2];
+			if (dirty[0] & /*onClose*/ 4) closebutton_changes.onClick = /*onClose*/ ctx[2];
+			if (dirty[0] & /*closeEventName*/ 8) closebutton_changes.eventName = /*closeEventName*/ ctx[3];
+			if (dirty[0] & /*closeEventValue*/ 16) closebutton_changes.eventValue = /*closeEventValue*/ ctx[4];
+			if (dirty[0] & /*closeButtonProps*/ 32) closebutton_changes.props = /*closeButtonProps*/ ctx[5];
 			closebutton.$set(closebutton_changes);
 
-			if (!current || dirty[0] & /*$maximumZindex*/ 16384) {
-				set_style(div, "z-index", /*$maximumZindex*/ ctx[14] + 1);
+			if (!current || dirty[0] & /*$maximumZindex*/ 131072) {
+				set_style(div, "z-index", /*$maximumZindex*/ ctx[17] + 1);
 			}
 		},
 		i(local) {
@@ -14186,7 +14247,7 @@ function create_fragment(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[8] && create_if_block(ctx);
+	let if_block1 = /*visible*/ ctx[11] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -14204,7 +14265,7 @@ function create_fragment(ctx) {
 
 			if (!mounted) {
 				dispose = listen(window, "keydown", function () {
-					if (is_function(/*handle_keydown*/ ctx[9])) /*handle_keydown*/ ctx[9].apply(this, arguments);
+					if (is_function(/*handle_keydown*/ ctx[12])) /*handle_keydown*/ ctx[12].apply(this, arguments);
 				});
 
 				mounted = true;
@@ -14238,11 +14299,11 @@ function create_fragment(ctx) {
 				if_block0.m(t.parentNode, t);
 			}
 
-			if (/*visible*/ ctx[8]) {
+			if (/*visible*/ ctx[11]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty[0] & /*visible*/ 256) {
+					if (dirty[0] & /*visible*/ 2048) {
 						transition_in(if_block1, 1);
 					}
 				} else {
@@ -14292,7 +14353,7 @@ function instance($$self, $$props, $$invalidate) {
 	let handle_keydown;
 	let visible;
 	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(14, $maximumZindex = $$value));
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(17, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { clickEventName = '' } = $$props;
@@ -14323,7 +14384,7 @@ function instance($$self, $$props, $$invalidate) {
 	let modal;
 
 	onMount$1(() => {
-		$$invalidate(8, visible = true);
+		$$invalidate(11, visible = true);
 	});
 
 	onDestroy$1(() => setPreviousFocus());
@@ -14331,28 +14392,28 @@ function instance($$self, $$props, $$invalidate) {
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			modal = $$value;
-			$$invalidate(7, modal);
+			$$invalidate(10, modal);
 		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(16, onClick = $$props.onClick);
-		if ('clickEventName' in $$props) $$invalidate(17, clickEventName = $$props.clickEventName);
-		if ('clickEventValue' in $$props) $$invalidate(18, clickEventValue = $$props.clickEventValue);
+		if ('onClick' in $$props) $$invalidate(19, onClick = $$props.onClick);
+		if ('clickEventName' in $$props) $$invalidate(20, clickEventName = $$props.clickEventName);
+		if ('clickEventValue' in $$props) $$invalidate(21, clickEventValue = $$props.clickEventValue);
 		if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
-		if ('placement' in $$props) $$invalidate(19, placement = $$props.placement);
-		if ('breakPoint' in $$props) $$invalidate(20, breakPoint = $$props.breakPoint);
-		if ('elasticity' in $$props) $$invalidate(21, elasticity = $$props.elasticity);
+		if ('placement' in $$props) $$invalidate(22, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(23, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(24, elasticity = $$props.elasticity);
 		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('onClose' in $$props) $$invalidate(22, onClose = $$props.onClose);
-		if ('closeEventName' in $$props) $$invalidate(23, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(24, closeEventValue = $$props.closeEventValue);
-		if ('closeButtonProps' in $$props) $$invalidate(2, closeButtonProps = $$props.closeButtonProps);
+		if ('onClose' in $$props) $$invalidate(2, onClose = $$props.onClose);
+		if ('closeEventName' in $$props) $$invalidate(3, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(4, closeEventValue = $$props.closeEventValue);
+		if ('closeButtonProps' in $$props) $$invalidate(5, closeButtonProps = $$props.closeButtonProps);
 		if ('$$scope' in $$props) $$invalidate(29, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, onClose*/ 29360128) {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, onClose*/ 28) {
 			$$invalidate(28, close = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -14362,26 +14423,26 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*onClose*/ 4194304) {
-			$$invalidate(13, closable = haveFunction(onClose));
+		if ($$self.$$.dirty[0] & /*onClose*/ 4) {
+			$$invalidate(16, closable = haveFunction(onClose));
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 1572865) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 12582913) {
 			{
 				if (placement && placement.backgroundOverlay) {
-					$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
+					$$invalidate(7, backgroundOverlay = placement.backgroundOverlay);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundOverlay;
-					$$invalidate(5, backgroundOverlayPC = pc ?? false);
+					$$invalidate(8, backgroundOverlayPC = pc ?? false);
 					const sp = breakPoint?.SP?.placement?.backgroundOverlay;
-					$$invalidate(6, backgroundOverlaySP = sp ?? false);
+					$$invalidate(9, backgroundOverlaySP = sp ?? false);
 				}
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 1572865) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 12582913) {
 			{
 				if (placement && placement.backgroundClick) {
 					$$invalidate(25, backgroundClickFunction = placement.backgroundClick);
@@ -14403,8 +14464,8 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunction*/ 58720256) {
-			$$invalidate(12, backgroundClick = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunction*/ 33554456) {
+			$$invalidate(15, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -14413,8 +14474,8 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 92274688) {
-			$$invalidate(11, backgroundClickPC = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 67108888) {
+			$$invalidate(14, backgroundClickPC = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -14423,8 +14484,8 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 159383552) {
-			$$invalidate(10, backgroundClickSP = () => {
+		if ($$self.$$.dirty[0] & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 134217752) {
+			$$invalidate(13, backgroundClickSP = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -14433,7 +14494,7 @@ function instance($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint, transforms*/ 1572873) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint, transforms*/ 12582977) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
@@ -14449,7 +14510,7 @@ function instance($$self, $$props, $$invalidate) {
 					modalStyles.add(positionStyle);
 				}
 
-				$$invalidate(3, transforms = []);
+				$$invalidate(6, transforms = []);
 
 				DEVICE_IDS.forEach(deviceId => {
 					if (useBreakPoint) {
@@ -14477,7 +14538,7 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 1572865) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 12582913) {
 			// 表示位置の調整のスタイルを設定
 			{
 				let margin = DefaultModalPlacement.margin;
@@ -14509,7 +14570,7 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*elasticity, useBreakPoint, breakPoint*/ 3145729) {
+		if ($$self.$$.dirty[0] & /*elasticity, useBreakPoint, breakPoint*/ 25165825) {
 			// 拡大方法のスタイルを設定
 			{
 				let elasticStyle = ElasticityStyle[elasticity];
@@ -14536,18 +14597,21 @@ function instance($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty[0] & /*close*/ 268435456) {
-			$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
+			$$invalidate(12, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
 
-	$$invalidate(7, modal = null);
+	$$invalidate(10, modal = null);
 
 	// svelteコンポーネントのアニメーションを発火させるためにマウント時にvisibleをtrueにする。
-	$$invalidate(8, visible = false);
+	$$invalidate(11, visible = false);
 
 	return [
 		useBreakPoint,
 		animation,
+		onClose,
+		closeEventName,
+		closeEventValue,
 		closeButtonProps,
 		transforms,
 		backgroundOverlay,
@@ -14568,9 +14632,6 @@ function instance($$self, $$props, $$invalidate) {
 		placement,
 		breakPoint,
 		elasticity,
-		onClose,
-		closeEventName,
-		closeEventValue,
 		backgroundClickFunction,
 		backgroundClickFunctionPC,
 		backgroundClickFunctionSP,
@@ -14592,18 +14653,18 @@ class Modal extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				onClick: 16,
-				clickEventName: 17,
-				clickEventValue: 18,
+				onClick: 19,
+				clickEventName: 20,
+				clickEventValue: 21,
 				useBreakPoint: 0,
-				placement: 19,
-				breakPoint: 20,
-				elasticity: 21,
+				placement: 22,
+				breakPoint: 23,
+				elasticity: 24,
 				animation: 1,
-				onClose: 22,
-				closeEventName: 23,
-				closeEventValue: 24,
-				closeButtonProps: 2
+				onClose: 2,
+				closeEventName: 3,
+				closeEventValue: 4,
+				closeButtonProps: 5
 			},
 			add_css,
 			[-1, -1]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.235-28695221.a9f041a7",
+  "version": "1.1.235-28695399.37fa4bea",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",