@plaidev/karte-action-sdk 1.1.270-29379017.f453cc451 → 1.1.270-29410070.b86a3f94e

package/dist/components-flex/props.d.ts

@@ -17,6 +17,7 @@ type PositionPlaceProps = {
 };
 export type PositionProps = PositionPlaceProps & {
 	position?: Properties["position"];
+	zIndex?: number;
 };
 export type MetaProps = {
 	displayName?: string;

package/dist/hydrate/components-flex/props.d.ts

@@ -17,6 +17,7 @@ type PositionPlaceProps = {
 };
 export type PositionProps = PositionPlaceProps & {
 	position?: Properties["position"];
+	zIndex?: number;
 };
 export type MetaProps = {
 	displayName?: string;

package/dist/hydrate/index.es.js

@@ -11239,8 +11239,8 @@ function useClickable(props = {}) {
 		if (eventName) send_event(eventName, eventValue);
 		execOnClickOperation(onClick);
 	}
-	function getFixedElement({ onClick, element: element$1 }) {
-		if (!onClick) return element$1 ?? "div";
+	function getFixedElement({ onClick, element: element$1 = "div" }) {
+		if (!onClick) return element$1;
 		switch (onClick.operation) {
 			case "linkTo":
 			case "callNativeFunction": return "a";
@@ -18165,22 +18165,27 @@ function create_if_block$9(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true });
+			div = claim_element(nodes, "DIV", {
+				class: true,
+				style: true
+			});
 			children(div).forEach(detach);
 			this.h();
 		},
 		h() {
 			attr(div, "class", div_class_value = null_to_empty(["v2-background", ctx[1] || ""].join(" ")) + " svelte-18nkdjz");
+			attr(div, "style", ctx[2]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
 			if (!mounted) {
-				dispose = listen(div, "click", ctx[3]);
+				dispose = listen(div, "click", ctx[5]);
 				mounted = true;
 			}
 		},
 		p(ctx$1, dirty) {
 			if (dirty & 2 && div_class_value !== (div_class_value = null_to_empty(["v2-background", ctx$1[1] || ""].join(" ")) + " svelte-18nkdjz")) attr(div, "class", div_class_value);
+			if (dirty & 4) attr(div, "style", ctx$1[2]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -18226,18 +18231,26 @@ function create_fragment$24(ctx) {
 	};
 }
 function instance$24($$self, $$props, $$invalidate) {
+	let style;
 	let { backgroundOverlay = false } = $$props;
+	let { zIndex = void 0 } = $$props;
 	let { class: className = void 0 } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch("click");
 	$$self.$$set = ($$props$1) => {
 		if ("backgroundOverlay" in $$props$1) $$invalidate(0, backgroundOverlay = $$props$1.backgroundOverlay);
+		if ("zIndex" in $$props$1) $$invalidate(4, zIndex = $$props$1.zIndex);
 		if ("class" in $$props$1) $$invalidate(1, className = $$props$1.class);
 	};
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & 16) $: $$invalidate(2, style = objToStyle({ zIndex }));
+	};
 	return [
 		backgroundOverlay,
 		className,
+		style,
 		dispatch,
+		zIndex,
 		click_handler
 	];
 }
@@ -18246,6 +18259,7 @@ var BackgroundOverlay = class extends SvelteComponent {
 		super();
 		init(this, options, instance$24, create_fragment$24, safe_not_equal, {
 			backgroundOverlay: 0,
+			zIndex: 4,
 			class: 1
 		}, add_css$17);
 	}
@@ -18260,9 +18274,12 @@ function add_css$16(target) {
 function create_else_block$1(ctx) {
 	let backgroundoverlay;
 	let current;
-	backgroundoverlay = new BackgroundOverlay_default({ props: { backgroundOverlay: ctx[4] } });
+	backgroundoverlay = new BackgroundOverlay_default({ props: {
+		backgroundOverlay: ctx[5],
+		zIndex: ctx[2].zIndex
+	} });
 	backgroundoverlay.$on("click", function() {
-		if (is_function(ctx[12])) ctx[12].apply(this, arguments);
+		if (is_function(ctx[13])) ctx[13].apply(this, arguments);
 	});
 	return {
 		c() {
@@ -18278,7 +18295,8 @@ function create_else_block$1(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay_changes = {};
-			if (dirty & 16) backgroundoverlay_changes.backgroundOverlay = ctx[4];
+			if (dirty & 32) backgroundoverlay_changes.backgroundOverlay = ctx[5];
+			if (dirty & 4) backgroundoverlay_changes.zIndex = ctx[2].zIndex;
 			backgroundoverlay.$set(backgroundoverlay_changes);
 		},
 		i(local) {
@@ -18302,17 +18320,19 @@ function create_if_block_2$1(ctx) {
 	let current;
 	backgroundoverlay0 = new BackgroundOverlay_default({ props: {
 		class: "background-bp-pc",
-		backgroundOverlay: ctx[5]
+		zIndex: ctx[2].zIndex,
+		backgroundOverlay: ctx[6]
 	} });
 	backgroundoverlay0.$on("click", function() {
-		if (is_function(ctx[11])) ctx[11].apply(this, arguments);
+		if (is_function(ctx[12])) ctx[12].apply(this, arguments);
 	});
 	backgroundoverlay1 = new BackgroundOverlay_default({ props: {
 		class: "background-bp-sp ",
-		backgroundOverlay: ctx[6]
+		zIndex: ctx[2].zIndex,
+		backgroundOverlay: ctx[7]
 	} });
 	backgroundoverlay1.$on("click", function() {
-		if (is_function(ctx[10])) ctx[10].apply(this, arguments);
+		if (is_function(ctx[11])) ctx[11].apply(this, arguments);
 	});
 	return {
 		c() {
@@ -18334,10 +18354,12 @@ function create_if_block_2$1(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay0_changes = {};
-			if (dirty & 32) backgroundoverlay0_changes.backgroundOverlay = ctx[5];
+			if (dirty & 4) backgroundoverlay0_changes.zIndex = ctx[2].zIndex;
+			if (dirty & 64) backgroundoverlay0_changes.backgroundOverlay = ctx[6];
 			backgroundoverlay0.$set(backgroundoverlay0_changes);
 			const backgroundoverlay1_changes = {};
-			if (dirty & 64) backgroundoverlay1_changes.backgroundOverlay = ctx[6];
+			if (dirty & 4) backgroundoverlay1_changes.zIndex = ctx[2].zIndex;
+			if (dirty & 128) backgroundoverlay1_changes.backgroundOverlay = ctx[7];
 			backgroundoverlay1.$set(backgroundoverlay1_changes);
 		},
 		i(local) {
@@ -18399,8 +18421,8 @@ function create_if_block$8(ctx) {
 			attr(div, "class", div_class_value = null_to_empty(["modal", ctx[0] ? "modal-bp" : ""].join(" ")) + " svelte-45ue06");
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
-			attr(div, "data-layer-id", ctx[2]);
-			attr(div, "style", Array.from(ctx[13]).join(";"));
+			attr(div, "data-layer-id", ctx[3]);
+			attr(div, "style", Array.from(ctx[14]).join(";"));
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -18414,14 +18436,14 @@ function create_if_block$8(ctx) {
 				if (default_slot.p && (!current || dirty & 16777216)) update_slot_base(default_slot, default_slot_template, ctx, ctx[24], !current ? get_all_dirty_from_scope(ctx[24]) : get_slot_changes(default_slot_template, ctx[24], dirty, null), null);
 			}
 			if (!current || dirty & 1 && div_class_value !== (div_class_value = null_to_empty(["modal", ctx[0] ? "modal-bp" : ""].join(" ")) + " svelte-45ue06")) attr(div, "class", div_class_value);
-			if (!current || dirty & 4) attr(div, "data-layer-id", ctx[2]);
+			if (!current || dirty & 8) attr(div, "data-layer-id", ctx[3]);
 		},
 		i(local) {
 			if (current) return;
 			transition_in(default_slot, local);
 			if (!div_intro) add_render_callback(() => {
 				div_intro = create_in_transition(div, customAnimation, {
-					transforms: ctx[3],
+					transforms: ctx[4],
 					animationStyle: ctx[1]
 				});
 				div_intro.start();
@@ -18462,7 +18484,7 @@ function create_fragment$23(ctx) {
 	}
 	current_block_type_index = select_block_type(ctx, -1);
 	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-	let if_block1 = ctx[8] && create_if_block$8(ctx);
+	let if_block1 = ctx[9] && create_if_block$8(ctx);
 	return {
 		c() {
 			if_block0.c();
@@ -18484,7 +18506,7 @@ function create_fragment$23(ctx) {
 			current = true;
 			if (!mounted) {
 				dispose = listen(window, "keydown", function() {
-					if (is_function(ctx[9])) ctx[9].apply(this, arguments);
+					if (is_function(ctx[10])) ctx[10].apply(this, arguments);
 				});
 				mounted = true;
 			}
@@ -18508,9 +18530,9 @@ function create_fragment$23(ctx) {
 				transition_in(if_block0, 1);
 				if_block0.m(t.parentNode, t);
 			}
-			if (ctx[8]) if (if_block1) {
+			if (ctx[9]) if (if_block1) {
 				if_block1.p(ctx, dirty);
-				if (dirty & 256) transition_in(if_block1, 1);
+				if (dirty & 512) transition_in(if_block1, 1);
 			} else {
 				if_block1 = create_if_block$8(ctx);
 				if_block1.c();
@@ -18579,25 +18601,25 @@ function instance$23($$self, $$props, $$invalidate) {
 	}];
 	let modal;
 	onMount$1(() => {
-		$$invalidate(8, visible = true);
+		$$invalidate(9, visible = true);
 	});
 	onDestroy$1(() => setPreviousFocus());
 	function div_binding($$value) {
 		binding_callbacks[$$value ? "unshift" : "push"](() => {
 			modal = $$value;
-			$$invalidate(7, modal);
+			$$invalidate(8, modal);
 		});
 	}
 	$$self.$$set = ($$props$1) => {
 		if ("useBreakPoint" in $$props$1) $$invalidate(0, useBreakPoint = $$props$1.useBreakPoint);
-		if ("placement" in $$props$1) $$invalidate(14, placement = $$props$1.placement);
-		if ("breakPoint" in $$props$1) $$invalidate(15, breakPoint = $$props$1.breakPoint);
-		if ("elasticity" in $$props$1) $$invalidate(16, elasticity = $$props$1.elasticity);
+		if ("placement" in $$props$1) $$invalidate(15, placement = $$props$1.placement);
+		if ("breakPoint" in $$props$1) $$invalidate(16, breakPoint = $$props$1.breakPoint);
+		if ("elasticity" in $$props$1) $$invalidate(17, elasticity = $$props$1.elasticity);
 		if ("animation" in $$props$1) $$invalidate(1, animation = $$props$1.animation);
-		if ("props" in $$props$1) $$invalidate(17, props = $$props$1.props);
+		if ("props" in $$props$1) $$invalidate(2, props = $$props$1.props);
 		if ("closeEventName" in $$props$1) $$invalidate(18, closeEventName = $$props$1.closeEventName);
 		if ("closeEventValue" in $$props$1) $$invalidate(19, closeEventValue = $$props$1.closeEventValue);
-		if ("layerId" in $$props$1) $$invalidate(2, layerId = $$props$1.layerId);
+		if ("layerId" in $$props$1) $$invalidate(3, layerId = $$props$1.layerId);
 		if ("$$scope" in $$props$1) $$invalidate(24, $$scope = $$props$1.$$scope);
 	};
 	$$self.$$.update = () => {
@@ -18609,16 +18631,16 @@ function instance$23($$self, $$props, $$invalidate) {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(onClose$2);
 		});
-		if ($$self.$$.dirty & 49153) $: {
-			if (!isCanvasPreview() && isExistBackgroundOverlayValue) $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
+		if ($$self.$$.dirty & 98305) $: {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) $$invalidate(5, backgroundOverlay = placement.backgroundOverlay);
 			if (useBreakPoint) {
 				const pc = breakPoint?.PC?.placement?.backgroundOverlay;
-				$$invalidate(5, backgroundOverlayPC = pc ?? false);
+				$$invalidate(6, backgroundOverlayPC = pc ?? false);
 				const sp = breakPoint?.SP?.placement?.backgroundOverlay;
-				$$invalidate(6, backgroundOverlaySP = sp ?? false);
+				$$invalidate(7, backgroundOverlaySP = sp ?? false);
 			}
 		}
-		if ($$self.$$.dirty & 49153) $: {
+		if ($$self.$$.dirty & 98305) $: {
 			if (placement && placement.backgroundClick) $$invalidate(20, backgroundClickFunction = placement.backgroundClick);
 			if (useBreakPoint) {
 				const pc = breakPoint?.PC?.placement?.backgroundClick;
@@ -18627,25 +18649,26 @@ function instance$23($$self, $$props, $$invalidate) {
 				if (sp) $$invalidate(22, backgroundClickFunctionSP = sp);
 			}
 		}
-		if ($$self.$$.dirty & 1835008) $: $$invalidate(12, backgroundClick = () => {
+		if ($$self.$$.dirty & 1835008) $: $$invalidate(13, backgroundClick = () => {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(backgroundClickFunction);
 		});
-		if ($$self.$$.dirty & 2883584) $: $$invalidate(11, backgroundClickPC = () => {
+		if ($$self.$$.dirty & 2883584) $: $$invalidate(12, backgroundClickPC = () => {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(backgroundClickFunctionPC);
 		});
-		if ($$self.$$.dirty & 4980736) $: $$invalidate(10, backgroundClickSP = () => {
+		if ($$self.$$.dirty & 4980736) $: $$invalidate(11, backgroundClickSP = () => {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(backgroundClickFunctionSP);
 		});
-		if ($$self.$$.dirty & 49161) $: {
+		if ($$self.$$.dirty & 98325) $: {
 			let position$1 = DefaultModalPlacement.position;
 			if (!isCanvasPreview() && placement && placement.position !== null) position$1 = placement.position;
 			let positionStyle = getPositionStyle(position$1);
 			if (!useBreakPoint) modalStyles.add(positionStyle);
+			if (props.zIndex) modalStyles.add(`z-index: ${props.zIndex}`);
 			if (brandKit) modalStyles.add(`font-family: ${brandKit.font_family}`);
-			$$invalidate(3, transforms = []);
+			$$invalidate(4, transforms = []);
 			DEVICE_IDS.forEach((deviceId) => {
 				if (!isCanvasPreview() && useBreakPoint) {
 					const positionWithBp = breakPoint[deviceId]?.placement?.position;
@@ -18667,7 +18690,7 @@ function instance$23($$self, $$props, $$invalidate) {
 				...getTransform(position$1)
 			});
 		}
-		if ($$self.$$.dirty & 180225) $: {
+		if ($$self.$$.dirty & 98309) $: {
 			let margin = DefaultModalPlacement.margin;
 			if (!isCanvasPreview() && placement && placement.margin !== null) margin = placement.margin;
 			let marginStyle = getMarginStyle(margin);
@@ -18687,13 +18710,14 @@ function instance$23($$self, $$props, $$invalidate) {
 			const propsStyle = objToStyle({ width: props.width });
 			modalStyles.add(propsStyle);
 		}
-		if ($$self.$$.dirty & 8388608) $: $$invalidate(9, handle_keydown = handleKeydown({ Escape: close$2 }));
+		if ($$self.$$.dirty & 8388608) $: $$invalidate(10, handle_keydown = handleKeydown({ Escape: close$2 }));
 	};
-	$: $$invalidate(7, modal = null);
-	$: $$invalidate(8, visible = false);
+	$: $$invalidate(8, modal = null);
+	$: $$invalidate(9, visible = false);
 	return [
 		useBreakPoint,
 		animation,
+		props,
 		layerId,
 		transforms,
 		backgroundOverlay,
@@ -18709,7 +18733,6 @@ function instance$23($$self, $$props, $$invalidate) {
 		placement,
 		breakPoint,
 		elasticity,
-		props,
 		closeEventName,
 		closeEventValue,
 		backgroundClickFunction,
@@ -18726,14 +18749,14 @@ var Modal = class extends SvelteComponent {
 		super();
 		init(this, options, instance$23, create_fragment$23, safe_not_equal, {
 			useBreakPoint: 0,
-			placement: 14,
-			breakPoint: 15,
-			elasticity: 16,
+			placement: 15,
+			breakPoint: 16,
+			elasticity: 17,
 			animation: 1,
-			props: 17,
+			props: 2,
 			closeEventName: 18,
 			closeEventValue: 19,
-			layerId: 2
+			layerId: 3
 		}, add_css$16);
 	}
 };

package/dist/index.es.js

@@ -10346,8 +10346,8 @@ function useClickable(props = {}) {
 		if (eventName) send_event(eventName, eventValue);
 		execOnClickOperation(onClick);
 	}
-	function getFixedElement({ onClick, element: element$1 }) {
-		if (!onClick) return element$1 ?? "div";
+	function getFixedElement({ onClick, element: element$1 = "div" }) {
+		if (!onClick) return element$1;
 		switch (onClick.operation) {
 			case "linkTo":
 			case "callNativeFunction": return "a";
@@ -16284,16 +16284,18 @@ function create_if_block$9(ctx) {
 		c() {
 			div = element("div");
 			attr(div, "class", div_class_value = null_to_empty(["v2-background", ctx[1] || ""].join(" ")) + " svelte-18nkdjz");
+			attr(div, "style", ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if (!mounted) {
-				dispose = listen(div, "click", ctx[3]);
+				dispose = listen(div, "click", ctx[5]);
 				mounted = true;
 			}
 		},
 		p(ctx$1, dirty) {
 			if (dirty & 2 && div_class_value !== (div_class_value = null_to_empty(["v2-background", ctx$1[1] || ""].join(" ")) + " svelte-18nkdjz")) attr(div, "class", div_class_value);
+			if (dirty & 4) attr(div, "style", ctx$1[2]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -16335,18 +16337,26 @@ function create_fragment$24(ctx) {
 	};
 }
 function instance$24($$self, $$props, $$invalidate) {
+	let style;
 	let { backgroundOverlay = false } = $$props;
+	let { zIndex = void 0 } = $$props;
 	let { class: className = void 0 } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch("click");
 	$$self.$$set = ($$props$1) => {
 		if ("backgroundOverlay" in $$props$1) $$invalidate(0, backgroundOverlay = $$props$1.backgroundOverlay);
+		if ("zIndex" in $$props$1) $$invalidate(4, zIndex = $$props$1.zIndex);
 		if ("class" in $$props$1) $$invalidate(1, className = $$props$1.class);
 	};
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & 16) $: $$invalidate(2, style = objToStyle({ zIndex }));
+	};
 	return [
 		backgroundOverlay,
 		className,
+		style,
 		dispatch,
+		zIndex,
 		click_handler
 	];
 }
@@ -16355,6 +16365,7 @@ var BackgroundOverlay = class extends SvelteComponent {
 		super();
 		init(this, options, instance$24, create_fragment$24, safe_not_equal, {
 			backgroundOverlay: 0,
+			zIndex: 4,
 			class: 1
 		}, add_css$17);
 	}
@@ -16369,9 +16380,12 @@ function add_css$16(target) {
 function create_else_block$1(ctx) {
 	let backgroundoverlay;
 	let current;
-	backgroundoverlay = new BackgroundOverlay_default({ props: { backgroundOverlay: ctx[4] } });
+	backgroundoverlay = new BackgroundOverlay_default({ props: {
+		backgroundOverlay: ctx[5],
+		zIndex: ctx[2].zIndex
+	} });
 	backgroundoverlay.$on("click", function() {
-		if (is_function(ctx[12])) ctx[12].apply(this, arguments);
+		if (is_function(ctx[13])) ctx[13].apply(this, arguments);
 	});
 	return {
 		c() {
@@ -16384,7 +16398,8 @@ function create_else_block$1(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay_changes = {};
-			if (dirty & 16) backgroundoverlay_changes.backgroundOverlay = ctx[4];
+			if (dirty & 32) backgroundoverlay_changes.backgroundOverlay = ctx[5];
+			if (dirty & 4) backgroundoverlay_changes.zIndex = ctx[2].zIndex;
 			backgroundoverlay.$set(backgroundoverlay_changes);
 		},
 		i(local) {
@@ -16408,17 +16423,19 @@ function create_if_block_2$1(ctx) {
 	let current;
 	backgroundoverlay0 = new BackgroundOverlay_default({ props: {
 		class: "background-bp-pc",
-		backgroundOverlay: ctx[5]
+		zIndex: ctx[2].zIndex,
+		backgroundOverlay: ctx[6]
 	} });
 	backgroundoverlay0.$on("click", function() {
-		if (is_function(ctx[11])) ctx[11].apply(this, arguments);
+		if (is_function(ctx[12])) ctx[12].apply(this, arguments);
 	});
 	backgroundoverlay1 = new BackgroundOverlay_default({ props: {
 		class: "background-bp-sp ",
-		backgroundOverlay: ctx[6]
+		zIndex: ctx[2].zIndex,
+		backgroundOverlay: ctx[7]
 	} });
 	backgroundoverlay1.$on("click", function() {
-		if (is_function(ctx[10])) ctx[10].apply(this, arguments);
+		if (is_function(ctx[11])) ctx[11].apply(this, arguments);
 	});
 	return {
 		c() {
@@ -16435,10 +16452,12 @@ function create_if_block_2$1(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay0_changes = {};
-			if (dirty & 32) backgroundoverlay0_changes.backgroundOverlay = ctx[5];
+			if (dirty & 4) backgroundoverlay0_changes.zIndex = ctx[2].zIndex;
+			if (dirty & 64) backgroundoverlay0_changes.backgroundOverlay = ctx[6];
 			backgroundoverlay0.$set(backgroundoverlay0_changes);
 			const backgroundoverlay1_changes = {};
-			if (dirty & 64) backgroundoverlay1_changes.backgroundOverlay = ctx[6];
+			if (dirty & 4) backgroundoverlay1_changes.zIndex = ctx[2].zIndex;
+			if (dirty & 128) backgroundoverlay1_changes.backgroundOverlay = ctx[7];
 			backgroundoverlay1.$set(backgroundoverlay1_changes);
 		},
 		i(local) {
@@ -16483,8 +16502,8 @@ function create_if_block$8(ctx) {
 			attr(div, "class", div_class_value = null_to_empty(["modal", ctx[0] ? "modal-bp" : ""].join(" ")) + " svelte-45ue06");
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
-			attr(div, "data-layer-id", ctx[2]);
-			attr(div, "style", Array.from(ctx[13]).join(";"));
+			attr(div, "data-layer-id", ctx[3]);
+			attr(div, "style", Array.from(ctx[14]).join(";"));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -16498,14 +16517,14 @@ function create_if_block$8(ctx) {
 				if (default_slot.p && (!current || dirty & 16777216)) update_slot_base(default_slot, default_slot_template, ctx, ctx[24], !current ? get_all_dirty_from_scope(ctx[24]) : get_slot_changes(default_slot_template, ctx[24], dirty, null), null);
 			}
 			if (!current || dirty & 1 && div_class_value !== (div_class_value = null_to_empty(["modal", ctx[0] ? "modal-bp" : ""].join(" ")) + " svelte-45ue06")) attr(div, "class", div_class_value);
-			if (!current || dirty & 4) attr(div, "data-layer-id", ctx[2]);
+			if (!current || dirty & 8) attr(div, "data-layer-id", ctx[3]);
 		},
 		i(local) {
 			if (current) return;
 			transition_in(default_slot, local);
 			if (!div_intro) add_render_callback(() => {
 				div_intro = create_in_transition(div, customAnimation, {
-					transforms: ctx[3],
+					transforms: ctx[4],
 					animationStyle: ctx[1]
 				});
 				div_intro.start();
@@ -16546,7 +16565,7 @@ function create_fragment$23(ctx) {
 	}
 	current_block_type_index = select_block_type(ctx, -1);
 	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-	let if_block1 = ctx[8] && create_if_block$8(ctx);
+	let if_block1 = ctx[9] && create_if_block$8(ctx);
 	return {
 		c() {
 			if_block0.c();
@@ -16562,7 +16581,7 @@ function create_fragment$23(ctx) {
 			current = true;
 			if (!mounted) {
 				dispose = listen(window, "keydown", function() {
-					if (is_function(ctx[9])) ctx[9].apply(this, arguments);
+					if (is_function(ctx[10])) ctx[10].apply(this, arguments);
 				});
 				mounted = true;
 			}
@@ -16586,9 +16605,9 @@ function create_fragment$23(ctx) {
 				transition_in(if_block0, 1);
 				if_block0.m(t.parentNode, t);
 			}
-			if (ctx[8]) if (if_block1) {
+			if (ctx[9]) if (if_block1) {
 				if_block1.p(ctx, dirty);
-				if (dirty & 256) transition_in(if_block1, 1);
+				if (dirty & 512) transition_in(if_block1, 1);
 			} else {
 				if_block1 = create_if_block$8(ctx);
 				if_block1.c();
@@ -16657,25 +16676,25 @@ function instance$23($$self, $$props, $$invalidate) {
 	}];
 	let modal;
 	onMount$1(() => {
-		$$invalidate(8, visible = true);
+		$$invalidate(9, visible = true);
 	});
 	onDestroy$1(() => setPreviousFocus());
 	function div_binding($$value) {
 		binding_callbacks[$$value ? "unshift" : "push"](() => {
 			modal = $$value;
-			$$invalidate(7, modal);
+			$$invalidate(8, modal);
 		});
 	}
 	$$self.$$set = ($$props$1) => {
 		if ("useBreakPoint" in $$props$1) $$invalidate(0, useBreakPoint = $$props$1.useBreakPoint);
-		if ("placement" in $$props$1) $$invalidate(14, placement = $$props$1.placement);
-		if ("breakPoint" in $$props$1) $$invalidate(15, breakPoint = $$props$1.breakPoint);
-		if ("elasticity" in $$props$1) $$invalidate(16, elasticity = $$props$1.elasticity);
+		if ("placement" in $$props$1) $$invalidate(15, placement = $$props$1.placement);
+		if ("breakPoint" in $$props$1) $$invalidate(16, breakPoint = $$props$1.breakPoint);
+		if ("elasticity" in $$props$1) $$invalidate(17, elasticity = $$props$1.elasticity);
 		if ("animation" in $$props$1) $$invalidate(1, animation = $$props$1.animation);
-		if ("props" in $$props$1) $$invalidate(17, props = $$props$1.props);
+		if ("props" in $$props$1) $$invalidate(2, props = $$props$1.props);
 		if ("closeEventName" in $$props$1) $$invalidate(18, closeEventName = $$props$1.closeEventName);
 		if ("closeEventValue" in $$props$1) $$invalidate(19, closeEventValue = $$props$1.closeEventValue);
-		if ("layerId" in $$props$1) $$invalidate(2, layerId = $$props$1.layerId);
+		if ("layerId" in $$props$1) $$invalidate(3, layerId = $$props$1.layerId);
 		if ("$$scope" in $$props$1) $$invalidate(24, $$scope = $$props$1.$$scope);
 	};
 	$$self.$$.update = () => {
@@ -16687,16 +16706,16 @@ function instance$23($$self, $$props, $$invalidate) {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(onClose$2);
 		});
-		if ($$self.$$.dirty & 49153) $: {
-			if (!isCanvasPreview() && isExistBackgroundOverlayValue) $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
+		if ($$self.$$.dirty & 98305) $: {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) $$invalidate(5, backgroundOverlay = placement.backgroundOverlay);
 			if (useBreakPoint) {
 				const pc = breakPoint?.PC?.placement?.backgroundOverlay;
-				$$invalidate(5, backgroundOverlayPC = pc ?? false);
+				$$invalidate(6, backgroundOverlayPC = pc ?? false);
 				const sp = breakPoint?.SP?.placement?.backgroundOverlay;
-				$$invalidate(6, backgroundOverlaySP = sp ?? false);
+				$$invalidate(7, backgroundOverlaySP = sp ?? false);
 			}
 		}
-		if ($$self.$$.dirty & 49153) $: {
+		if ($$self.$$.dirty & 98305) $: {
 			if (placement && placement.backgroundClick) $$invalidate(20, backgroundClickFunction = placement.backgroundClick);
 			if (useBreakPoint) {
 				const pc = breakPoint?.PC?.placement?.backgroundClick;
@@ -16705,25 +16724,26 @@ function instance$23($$self, $$props, $$invalidate) {
 				if (sp) $$invalidate(22, backgroundClickFunctionSP = sp);
 			}
 		}
-		if ($$self.$$.dirty & 1835008) $: $$invalidate(12, backgroundClick = () => {
+		if ($$self.$$.dirty & 1835008) $: $$invalidate(13, backgroundClick = () => {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(backgroundClickFunction);
 		});
-		if ($$self.$$.dirty & 2883584) $: $$invalidate(11, backgroundClickPC = () => {
+		if ($$self.$$.dirty & 2883584) $: $$invalidate(12, backgroundClickPC = () => {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(backgroundClickFunctionPC);
 		});
-		if ($$self.$$.dirty & 4980736) $: $$invalidate(10, backgroundClickSP = () => {
+		if ($$self.$$.dirty & 4980736) $: $$invalidate(11, backgroundClickSP = () => {
 			if (closeEventName) send_event(closeEventName, closeEventValue);
 			execOnClickOperation(backgroundClickFunctionSP);
 		});
-		if ($$self.$$.dirty & 49161) $: {
+		if ($$self.$$.dirty & 98325) $: {
 			let position$1 = DefaultModalPlacement.position;
 			if (!isCanvasPreview() && placement && placement.position !== null) position$1 = placement.position;
 			let positionStyle = getPositionStyle(position$1);
 			if (!useBreakPoint) modalStyles.add(positionStyle);
+			if (props.zIndex) modalStyles.add(`z-index: ${props.zIndex}`);
 			if (brandKit) modalStyles.add(`font-family: ${brandKit.font_family}`);
-			$$invalidate(3, transforms = []);
+			$$invalidate(4, transforms = []);
 			DEVICE_IDS.forEach((deviceId) => {
 				if (!isCanvasPreview() && useBreakPoint) {
 					const positionWithBp = breakPoint[deviceId]?.placement?.position;
@@ -16745,7 +16765,7 @@ function instance$23($$self, $$props, $$invalidate) {
 				...getTransform(position$1)
 			});
 		}
-		if ($$self.$$.dirty & 180225) $: {
+		if ($$self.$$.dirty & 98309) $: {
 			let margin = DefaultModalPlacement.margin;
 			if (!isCanvasPreview() && placement && placement.margin !== null) margin = placement.margin;
 			let marginStyle = getMarginStyle(margin);
@@ -16765,13 +16785,14 @@ function instance$23($$self, $$props, $$invalidate) {
 			const propsStyle = objToStyle({ width: props.width });
 			modalStyles.add(propsStyle);
 		}
-		if ($$self.$$.dirty & 8388608) $: $$invalidate(9, handle_keydown = handleKeydown({ Escape: close$2 }));
+		if ($$self.$$.dirty & 8388608) $: $$invalidate(10, handle_keydown = handleKeydown({ Escape: close$2 }));
 	};
-	$: $$invalidate(7, modal = null);
-	$: $$invalidate(8, visible = false);
+	$: $$invalidate(8, modal = null);
+	$: $$invalidate(9, visible = false);
 	return [
 		useBreakPoint,
 		animation,
+		props,
 		layerId,
 		transforms,
 		backgroundOverlay,
@@ -16787,7 +16808,6 @@ function instance$23($$self, $$props, $$invalidate) {
 		placement,
 		breakPoint,
 		elasticity,
-		props,
 		closeEventName,
 		closeEventValue,
 		backgroundClickFunction,
@@ -16804,14 +16824,14 @@ var Modal = class extends SvelteComponent {
 		super();
 		init(this, options, instance$23, create_fragment$23, safe_not_equal, {
 			useBreakPoint: 0,
-			placement: 14,
-			breakPoint: 15,
-			elasticity: 16,
+			placement: 15,
+			breakPoint: 16,
+			elasticity: 17,
 			animation: 1,
-			props: 17,
+			props: 2,
 			closeEventName: 18,
 			closeEventValue: 19,
-			layerId: 2
+			layerId: 3
 		}, add_css$16);
 	}
 };

package/dist/svelte5/components-flex/props.d.ts

@@ -17,6 +17,7 @@ type PositionPlaceProps = {
 };
 export type PositionProps = PositionPlaceProps & {
 	position?: Properties["position"];
+	zIndex?: number;
 };
 export type MetaProps = {
 	displayName?: string;

package/dist/svelte5/hydrate/components-flex/props.d.ts

@@ -17,6 +17,7 @@ type PositionPlaceProps = {
 };
 export type PositionProps = PositionPlaceProps & {
 	position?: Properties["position"];
+	zIndex?: number;
 };
 export type MetaProps = {
 	displayName?: string;

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

@@ -3876,8 +3876,8 @@ function useClickable(props = {}) {
 		if (eventName) send_event(eventName, eventValue);
 		execOnClickOperation(onClick);
 	}
-	function getFixedElement({ onClick, element }) {
-		if (!onClick) return element ?? "div";
+	function getFixedElement({ onClick, element = "div" }) {
+		if (!onClick) return element;
 		switch (onClick.operation) {
 			case "linkTo":
 			case "callNativeFunction": return "a";
@@ -6888,15 +6888,24 @@ const $$css$18 = {
 function BackgroundOverlay($$anchor, $$props) {
 	$.push($$props, false);
 	$.append_styles($$anchor, $$css$18);
+	const style = $.mutable_state();
 	let backgroundOverlay = $.prop($$props, "backgroundOverlay", 8, false);
+	let zIndex = $.prop($$props, "zIndex", 8, void 0);
 	let className = $.prop($$props, "class", 8, void 0);
 	const dispatch = createEventDispatcher();
+	$.legacy_pre_effect(() => $.deep_read_state(zIndex()), () => {
+		$.set(style, objToStyle({ zIndex: zIndex() }));
+	});
+	$.legacy_pre_effect_reset();
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor$1) => {
 		var div = root_1$7();
-		$.template_effect(($0) => $.set_class(div, 1, $0, "svelte-18nkdjz"), [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
+		$.template_effect(($0) => {
+			$.set_class(div, 1, $0, "svelte-18nkdjz");
+			$.set_style(div, $.get(style));
+		}, [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
 		$.event("click", div, () => dispatch("click"));
 		$.append($$anchor$1, div);
 	};
@@ -6999,11 +7008,12 @@ function Modal($$anchor, $$props) {
 			execOnClickOperation($.get(backgroundClickFunctionSP));
 		});
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.get(transforms), $.deep_read_state(breakPoint()), parseStyle), () => {
+	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.deep_read_state(props()), $.get(transforms), $.deep_read_state(breakPoint()), parseStyle), () => {
 		let position$1 = DefaultModalPlacement.position;
 		if (!isCanvasPreview() && placement() && placement().position !== null) position$1 = placement().position;
 		let positionStyle = getPositionStyle(position$1);
 		if (!useBreakPoint()) modalStyles.add(positionStyle);
+		if (props().zIndex) modalStyles.add(`z-index: ${props().zIndex}`);
 		if (brandKit) modalStyles.add(`font-family: ${brandKit.font_family}`);
 		$.set(transforms, []);
 		DEVICE_IDS.forEach((deviceId) => {
@@ -7070,6 +7080,9 @@ function Modal($$anchor, $$props) {
 			var node_1 = $.first_child(fragment_1);
 			BackgroundOverlay(node_1, {
 				class: "background-bp-pc",
+				get zIndex() {
+					return props().zIndex;
+				},
 				get backgroundOverlay() {
 					return $.get(backgroundOverlayPC);
 				},
@@ -7080,6 +7093,9 @@ function Modal($$anchor, $$props) {
 			var node_2 = $.sibling(node_1, 2);
 			BackgroundOverlay(node_2, {
 				class: "background-bp-sp ",
+				get zIndex() {
+					return props().zIndex;
+				},
 				get backgroundOverlay() {
 					return $.get(backgroundOverlaySP);
 				},
@@ -7094,6 +7110,9 @@ function Modal($$anchor, $$props) {
 				get backgroundOverlay() {
 					return $.get(backgroundOverlay);
 				},
+				get zIndex() {
+					return props().zIndex;
+				},
 				$$events: { click(...$$args) {
 					$.get(backgroundClick)?.apply(this, $$args);
 				} }

package/dist/svelte5/index.es.js

@@ -3845,8 +3845,8 @@ function useClickable(props = {}) {
 		if (eventName) send_event(eventName, eventValue);
 		execOnClickOperation(onClick);
 	}
-	function getFixedElement({ onClick, element }) {
-		if (!onClick) return element ?? "div";
+	function getFixedElement({ onClick, element = "div" }) {
+		if (!onClick) return element;
 		switch (onClick.operation) {
 			case "linkTo":
 			case "callNativeFunction": return "a";
@@ -6857,15 +6857,24 @@ const $$css$18 = {
 function BackgroundOverlay($$anchor, $$props) {
 	$.push($$props, false);
 	$.append_styles($$anchor, $$css$18);
+	const style = $.mutable_state();
 	let backgroundOverlay = $.prop($$props, "backgroundOverlay", 8, false);
+	let zIndex = $.prop($$props, "zIndex", 8, void 0);
 	let className = $.prop($$props, "class", 8, void 0);
 	const dispatch = createEventDispatcher();
+	$.legacy_pre_effect(() => $.deep_read_state(zIndex()), () => {
+		$.set(style, objToStyle({ zIndex: zIndex() }));
+	});
+	$.legacy_pre_effect_reset();
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor$1) => {
 		var div = root_1$7();
-		$.template_effect(($0) => $.set_class(div, 1, $0, "svelte-18nkdjz"), [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
+		$.template_effect(($0) => {
+			$.set_class(div, 1, $0, "svelte-18nkdjz");
+			$.set_style(div, $.get(style));
+		}, [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
 		$.event("click", div, () => dispatch("click"));
 		$.append($$anchor$1, div);
 	};
@@ -6968,11 +6977,12 @@ function Modal($$anchor, $$props) {
 			execOnClickOperation($.get(backgroundClickFunctionSP));
 		});
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.get(transforms), $.deep_read_state(breakPoint()), parseStyle), () => {
+	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.deep_read_state(props()), $.get(transforms), $.deep_read_state(breakPoint()), parseStyle), () => {
 		let position$1 = DefaultModalPlacement.position;
 		if (!isCanvasPreview() && placement() && placement().position !== null) position$1 = placement().position;
 		let positionStyle = getPositionStyle(position$1);
 		if (!useBreakPoint()) modalStyles.add(positionStyle);
+		if (props().zIndex) modalStyles.add(`z-index: ${props().zIndex}`);
 		if (brandKit) modalStyles.add(`font-family: ${brandKit.font_family}`);
 		$.set(transforms, []);
 		DEVICE_IDS.forEach((deviceId) => {
@@ -7039,6 +7049,9 @@ function Modal($$anchor, $$props) {
 			var node_1 = $.first_child(fragment_1);
 			BackgroundOverlay(node_1, {
 				class: "background-bp-pc",
+				get zIndex() {
+					return props().zIndex;
+				},
 				get backgroundOverlay() {
 					return $.get(backgroundOverlayPC);
 				},
@@ -7049,6 +7062,9 @@ function Modal($$anchor, $$props) {
 			var node_2 = $.sibling(node_1, 2);
 			BackgroundOverlay(node_2, {
 				class: "background-bp-sp ",
+				get zIndex() {
+					return props().zIndex;
+				},
 				get backgroundOverlay() {
 					return $.get(backgroundOverlaySP);
 				},
@@ -7063,6 +7079,9 @@ function Modal($$anchor, $$props) {
 				get backgroundOverlay() {
 					return $.get(backgroundOverlay);
 				},
+				get zIndex() {
+					return props().zIndex;
+				},
 				$$events: { click(...$$args) {
 					$.get(backgroundClick)?.apply(this, $$args);
 				} }

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

@@ -3845,8 +3845,8 @@ function useClickable(props = {}) {
 		if (eventName) send_event(eventName, eventValue);
 		execOnClickOperation(onClick);
 	}
-	function getFixedElement({ onClick, element }) {
-		if (!onClick) return element ?? "div";
+	function getFixedElement({ onClick, element = "div" }) {
+		if (!onClick) return element;
 		switch (onClick.operation) {
 			case "linkTo":
 			case "callNativeFunction": return "a";
@@ -6857,15 +6857,24 @@ const $$css$18 = {
 function BackgroundOverlay($$anchor, $$props) {
 	$.push($$props, false);
 	$.append_styles($$anchor, $$css$18);
+	const style = $.mutable_state();
 	let backgroundOverlay = $.prop($$props, "backgroundOverlay", 8, false);
+	let zIndex = $.prop($$props, "zIndex", 8, void 0);
 	let className = $.prop($$props, "class", 8, void 0);
 	const dispatch = createEventDispatcher();
+	$.legacy_pre_effect(() => $.deep_read_state(zIndex()), () => {
+		$.set(style, objToStyle({ zIndex: zIndex() }));
+	});
+	$.legacy_pre_effect_reset();
 	$.init();
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor$1) => {
 		var div = root_1$7();
-		$.template_effect(($0) => $.set_class(div, 1, $0, "svelte-18nkdjz"), [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
+		$.template_effect(($0) => {
+			$.set_class(div, 1, $0, "svelte-18nkdjz");
+			$.set_style(div, $.get(style));
+		}, [() => $.clsx(["v2-background", className() || ""].join(" "))], $.derived_safe_equal);
 		$.event("click", div, () => dispatch("click"));
 		$.append($$anchor$1, div);
 	};
@@ -6968,11 +6977,12 @@ function Modal($$anchor, $$props) {
 			execOnClickOperation($.get(backgroundClickFunctionSP));
 		});
 	});
-	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.get(transforms), $.deep_read_state(breakPoint()), parseStyle), () => {
+	$.legacy_pre_effect(() => ($.deep_read_state(placement()), $.deep_read_state(useBreakPoint()), $.deep_read_state(props()), $.get(transforms), $.deep_read_state(breakPoint()), parseStyle), () => {
 		let position$1 = DefaultModalPlacement.position;
 		if (!isCanvasPreview() && placement() && placement().position !== null) position$1 = placement().position;
 		let positionStyle = getPositionStyle(position$1);
 		if (!useBreakPoint()) modalStyles.add(positionStyle);
+		if (props().zIndex) modalStyles.add(`z-index: ${props().zIndex}`);
 		if (brandKit) modalStyles.add(`font-family: ${brandKit.font_family}`);
 		$.set(transforms, []);
 		DEVICE_IDS.forEach((deviceId) => {
@@ -7039,6 +7049,9 @@ function Modal($$anchor, $$props) {
 			var node_1 = $.first_child(fragment_1);
 			BackgroundOverlay(node_1, {
 				class: "background-bp-pc",
+				get zIndex() {
+					return props().zIndex;
+				},
 				get backgroundOverlay() {
 					return $.get(backgroundOverlayPC);
 				},
@@ -7049,6 +7062,9 @@ function Modal($$anchor, $$props) {
 			var node_2 = $.sibling(node_1, 2);
 			BackgroundOverlay(node_2, {
 				class: "background-bp-sp ",
+				get zIndex() {
+					return props().zIndex;
+				},
 				get backgroundOverlay() {
 					return $.get(backgroundOverlaySP);
 				},
@@ -7063,6 +7079,9 @@ function Modal($$anchor, $$props) {
 				get backgroundOverlay() {
 					return $.get(backgroundOverlay);
 				},
+				get zIndex() {
+					return props().zIndex;
+				},
 				$$events: { click(...$$args) {
 					$.get(backgroundClick)?.apply(this, $$args);
 				} }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.270-29379017.f453cc451",
+  "version": "1.1.270-29410070.b86a3f94e",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "type": "module",