@plaidev/karte-action-sdk 1.1.232-28663591.feead91d → 1.1.232-28684891.17fd688b

package/dist/hydrate/index.es.js

@@ -12005,7 +12005,12 @@ function create_fragment$w(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true, style: true });
+			div = claim_element(nodes, "DIV", {
+				class: true,
+				"data-layer-id": true,
+				style: true
+			});
+
 			var div_nodes = children(div);
 			img = claim_element(div_nodes, "IMG", { src: true, alt: true, style: true });
 			div_nodes.forEach(detach);
@@ -12014,9 +12019,10 @@ function create_fragment$w(ctx) {
 		h() {
 			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
 			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
-			attr(img, "style", /*imgStyle*/ ctx[1]);
+			attr(img, "style", /*imgStyle*/ ctx[2]);
 			attr(div, "class", "avatar svelte-17xar9h");
-			attr(div, "style", /*style*/ ctx[2]);
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -12031,12 +12037,16 @@ function create_fragment$w(ctx) {
 				attr(img, "alt", img_alt_value);
 			}
 
-			if (dirty & /*imgStyle*/ 2) {
-				attr(img, "style", /*imgStyle*/ ctx[1]);
+			if (dirty & /*imgStyle*/ 4) {
+				attr(img, "style", /*imgStyle*/ ctx[2]);
 			}
 
-			if (dirty & /*style*/ 4) {
-				attr(div, "style", /*style*/ ctx[2]);
+			if (dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+
+			if (dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
 			}
 		},
 		i: noop,
@@ -12051,6 +12061,7 @@ function instance$w($$self, $$props, $$invalidate) {
 	let style;
 	let imgStyle;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	const VARIANTS = {
 		shape: {
@@ -12063,11 +12074,12 @@ function instance$w($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(2, style = objToStyle({
+			$$invalidate(3, style = objToStyle({
 				width: `${size}px`,
 				height: `${size}px`,
 				...VARIANTS.shape[props.shape ?? 'square'],
@@ -12077,19 +12089,19 @@ function instance$w($$self, $$props, $$invalidate) {
 		}
 	};
 
-	$$invalidate(1, imgStyle = objToStyle({
+	$$invalidate(2, imgStyle = objToStyle({
 		width: '100%',
 		height: '100%',
 		objectFit: 'cover'
 	}));
 
-	return [props, imgStyle, style];
+	return [props, layerId, imgStyle, style];
 }
 
 class Avatar extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$w, create_fragment$w, safe_not_equal, { props: 0 }, add_css$6);
+		init(this, options, instance$w, create_fragment$w, safe_not_equal, { props: 0, layerId: 1 }, add_css$6);
 	}
 }
 
@@ -13823,12 +13835,12 @@ function add_css$5(target) {
 	append_styles(target, "svelte-1mx2edd", ".icon.svelte-1mx2edd{display:inline-flex;align-items:center;overflow:hidden;width:auto}");
 }
 
-// (14:0) {#if (IconComponent)}
+// (15:0) {#if (IconComponent)}
 function create_if_block$1(ctx) {
 	let div;
 	let switch_instance;
 	let current;
-	var switch_value = /*IconComponent*/ ctx[1];
+	var switch_value = /*IconComponent*/ ctx[2];
 
 	function switch_props(ctx) {
 		return {
@@ -13847,15 +13859,21 @@ function create_if_block$1(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true, style: true });
+			div = claim_element(nodes, "DIV", {
+				"data-layer-id": true,
+				class: true,
+				style: true
+			});
+
 			var div_nodes = children(div);
 			if (switch_instance) claim_component(switch_instance.$$.fragment, div_nodes);
 			div_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(div, "class", "icon svelte-1mx2edd");
-			attr(div, "style", /*style*/ ctx[2]);
+			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -13866,7 +13884,7 @@ function create_if_block$1(ctx) {
 			const switch_instance_changes = {};
 			if (dirty & /*props*/ 1) switch_instance_changes.color = /*props*/ ctx[0].color ?? '#333';
 
-			if (switch_value !== (switch_value = /*IconComponent*/ ctx[1])) {
+			if (switch_value !== (switch_value = /*IconComponent*/ ctx[2])) {
 				if (switch_instance) {
 					group_outros();
 					const old_component = switch_instance;
@@ -13890,8 +13908,12 @@ function create_if_block$1(ctx) {
 				switch_instance.$set(switch_instance_changes);
 			}
 
-			if (!current || dirty & /*style*/ 4) {
-				attr(div, "style", /*style*/ ctx[2]);
+			if (!current || dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+
+			if (!current || dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -13913,7 +13935,7 @@ function create_if_block$1(ctx) {
 function create_fragment$5(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*IconComponent*/ ctx[1] && create_if_block$1(ctx);
+	let if_block = /*IconComponent*/ ctx[2] && create_if_block$1(ctx);
 
 	return {
 		c() {
@@ -13930,11 +13952,11 @@ function create_fragment$5(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*IconComponent*/ ctx[1]) {
+			if (/*IconComponent*/ ctx[2]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*IconComponent*/ 2) {
+					if (dirty & /*IconComponent*/ 4) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -13973,14 +13995,16 @@ function instance$5($$self, $$props, $$invalidate) {
 	let style;
 	let IconComponent;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(2, style = objToStyle({
+			$$invalidate(3, style = objToStyle({
 				minWidth: props.size,
 				width: props.size,
 				height: props.size,
@@ -13989,17 +14013,17 @@ function instance$5($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(1, IconComponent = ICON_VARIANTS[props.variant] ?? undefined);
+			$$invalidate(2, IconComponent = ICON_VARIANTS[props.variant] ?? undefined);
 		}
 	};
 
-	return [props, IconComponent, style];
+	return [props, layerId, IconComponent, style];
 }
 
 class Icon extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 0 }, add_css$5);
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 0, layerId: 1 }, add_css$5);
 	}
 }
 
@@ -14009,7 +14033,7 @@ function add_css$4(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}");
 }
 
-// (126:2) {#if (props.isIcon && props.iconVariant)}
+// (127:2) {#if (props.isIcon && props.iconVariant)}
 function create_if_block(ctx) {
 	let div;
 	let icon;
@@ -14020,7 +14044,7 @@ function create_if_block(ctx) {
 				props: {
 					variant: /*props*/ ctx[0].iconVariant,
 					size: '1em',
-					color: /*VARIANTS*/ ctx[2].color[/*props*/ ctx[0].color ?? 'default'].color
+					color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
 				}
 			}
 		});
@@ -14052,7 +14076,7 @@ function create_if_block(ctx) {
 			if (dirty & /*props*/ 1) icon_changes.props = {
 				variant: /*props*/ ctx[0].iconVariant,
 				size: '1em',
-				color: /*VARIANTS*/ ctx[2].color[/*props*/ ctx[0].color ?? 'default'].color
+				color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
 			};
 
 			icon.$set(icon_changes);
@@ -14094,7 +14118,12 @@ function create_fragment$4(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			button = claim_element(nodes, "BUTTON", { style: true, class: true });
+			button = claim_element(nodes, "BUTTON", {
+				"data-layer-id": true,
+				style: true,
+				class: true
+			});
+
 			var button_nodes = children(button);
 			if (if_block) if_block.l(button_nodes);
 			t0 = claim_space(button_nodes);
@@ -14106,7 +14135,8 @@ function create_fragment$4(ctx) {
 			this.h();
 		},
 		h() {
-			attr(button, "style", /*style*/ ctx[1]);
+			attr(button, "data-layer-id", /*layerId*/ ctx[1]);
+			attr(button, "style", /*style*/ ctx[2]);
 			attr(button, "class", "v2-button svelte-kz1c6t");
 		},
 		m(target, anchor) {
@@ -14118,7 +14148,7 @@ function create_fragment$4(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[3]));
+				dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[4]));
 				mounted = true;
 			}
 		},
@@ -14148,8 +14178,12 @@ function create_fragment$4(ctx) {
 
 			if ((!current || dirty & /*props*/ 1) && t1_value !== (t1_value = /*props*/ ctx[0].label + "")) set_data(t1, t1_value);
 
-			if (!current || dirty & /*style*/ 2) {
-				attr(button, "style", /*style*/ ctx[1]);
+			if (!current || dirty & /*layerId*/ 2) {
+				attr(button, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+
+			if (!current || dirty & /*style*/ 4) {
+				attr(button, "style", /*style*/ ctx[2]);
 			}
 		},
 		i(local) {
@@ -14176,6 +14210,7 @@ function instance$4($$self, $$props, $$invalidate) {
 	let { eventName = '' } = $$props;
 	let { eventValue = undefined } = $$props;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	const VARIANTS = {
 		size: {
@@ -14265,15 +14300,16 @@ function instance$4($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
-		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
+		if ('onClick' in $$props) $$invalidate(5, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(6, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(7, eventValue = $$props.eventValue);
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(1, style = objToStyle({
+			$$invalidate(2, style = objToStyle({
 				display: 'inline-flex',
 				gap: '0.65em',
 				alignItems: 'center',
@@ -14294,7 +14330,7 @@ function instance$4($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [props, style, VARIANTS, handleClick, onClick, eventName, eventValue];
+	return [props, layerId, style, VARIANTS, handleClick, onClick, eventName, eventValue];
 }
 
 class Button extends SvelteComponent {
@@ -14308,10 +14344,11 @@ class Button extends SvelteComponent {
 			create_fragment$4,
 			safe_not_equal,
 			{
-				onClick: 4,
-				eventName: 5,
-				eventValue: 6,
-				props: 0
+				onClick: 5,
+				eventName: 6,
+				eventValue: 7,
+				props: 0,
+				layerId: 1
 			},
 			add_css$4
 		);
@@ -14364,7 +14401,12 @@ function create_fragment$3(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			button = claim_element(nodes, "BUTTON", { class: true, style: true });
+			button = claim_element(nodes, "BUTTON", {
+				"data-layer-id": true,
+				class: true,
+				style: true
+			});
+
 			var button_nodes = children(button);
 
 			svg = claim_svg_element(button_nodes, "svg", {
@@ -14388,8 +14430,9 @@ function create_fragment$3(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[0]);
+			attr(button, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, button, anchor);
@@ -14397,8 +14440,12 @@ function create_fragment$3(ctx) {
 			append_hydration(svg, path);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*style*/ 1) {
-				attr(button, "style", /*style*/ ctx[0]);
+			if (dirty & /*layerId*/ 1) {
+				attr(button, "data-layer-id", /*layerId*/ ctx[0]);
+			}
+
+			if (dirty & /*style*/ 2) {
+				attr(button, "style", /*style*/ ctx[1]);
 			}
 		},
 		i: noop,
@@ -14412,15 +14459,17 @@ function create_fragment$3(ctx) {
 function instance$3($$self, $$props, $$invalidate) {
 	let style;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 	const size = props.size ?? 24;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(1, props = $$props.props);
+		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 2) {
-			$$invalidate(0, style = objToStyle({
+		if ($$self.$$.dirty & /*props*/ 4) {
+			$$invalidate(1, style = objToStyle({
 				width: `${size}px`,
 				height: `${size}px`,
 				...props.bordered && { border: '1px solid #666' },
@@ -14429,13 +14478,13 @@ function instance$3($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [style, props];
+	return [layerId, style, props];
 }
 
 class CloseButton extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, { props: 1 }, add_css$3);
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { props: 2, layerId: 0 }, add_css$3);
 	}
 }
 
@@ -14460,7 +14509,12 @@ function create_fragment$2(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true, style: true });
+			div = claim_element(nodes, "DIV", {
+				"data-layer-id": true,
+				class: true,
+				style: true
+			});
+
 			var div_nodes = children(div);
 			object = claim_element(div_nodes, "OBJECT", { style: true, class: true });
 			var object_nodes = children(object);
@@ -14473,10 +14527,11 @@ function create_fragment$2(ctx) {
 			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
 			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
 			attr(img, "class", "image-img svelte-vojroc");
-			attr(object, "style", /*objectStyle*/ ctx[1]);
+			attr(object, "style", /*objectStyle*/ ctx[2]);
 			attr(object, "class", "image-object svelte-vojroc");
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(div, "class", "image svelte-vojroc");
-			attr(div, "style", /*style*/ ctx[2]);
+			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -14492,12 +14547,16 @@ function create_fragment$2(ctx) {
 				attr(img, "alt", img_alt_value);
 			}
 
-			if (dirty & /*objectStyle*/ 2) {
-				attr(object, "style", /*objectStyle*/ ctx[1]);
+			if (dirty & /*objectStyle*/ 4) {
+				attr(object, "style", /*objectStyle*/ ctx[2]);
 			}
 
-			if (dirty & /*style*/ 4) {
-				attr(div, "style", /*style*/ ctx[2]);
+			if (dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+
+			if (dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
 			}
 		},
 		i: noop,
@@ -14512,31 +14571,33 @@ function instance$2($$self, $$props, $$invalidate) {
 	let style;
 	let objectStyle;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(2, style = objToStyle({
+			$$invalidate(3, style = objToStyle({
 				width: props.width ?? '100%',
 				...toCssCommon(props)
 			}));
 		}
 
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(1, objectStyle = objToStyle({ aspectRatio: props.aspect }));
+			$$invalidate(2, objectStyle = objToStyle({ aspectRatio: props.aspect }));
 		}
 	};
 
-	return [props, objectStyle, style];
+	return [props, layerId, objectStyle, style];
 }
 
 class Image extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$2, create_fragment$2, safe_not_equal, { props: 0 }, add_css$2);
+		init(this, options, instance$2, create_fragment$2, safe_not_equal, { props: 0, layerId: 1 }, add_css$2);
 	}
 }
 
@@ -14549,8 +14610,8 @@ function add_css$1(target) {
 function create_fragment$1(ctx) {
 	let div;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[3].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[2], null);
+	const default_slot_template = /*#slots*/ ctx[4].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);
 
 	return {
 		c() {
@@ -14559,15 +14620,21 @@ function create_fragment$1(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true, style: true });
+			div = claim_element(nodes, "DIV", {
+				"data-layer-id": true,
+				class: true,
+				style: true
+			});
+
 			var div_nodes = children(div);
 			if (default_slot) default_slot.l(div_nodes);
 			div_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
+			attr(div, "data-layer-id", /*layerId*/ ctx[0]);
 			attr(div, "class", "layout svelte-1g6q4hu");
-			attr(div, "style", /*style*/ ctx[0]);
+			attr(div, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -14580,22 +14647,26 @@ function create_fragment$1(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 4)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 8)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[2],
+						/*$$scope*/ ctx[3],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[2])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[2], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[3])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[3], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*style*/ 1) {
-				attr(div, "style", /*style*/ ctx[0]);
+			if (!current || dirty & /*layerId*/ 1) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[0]);
+			}
+
+			if (!current || dirty & /*style*/ 2) {
+				attr(div, "style", /*style*/ ctx[1]);
 			}
 		},
 		i(local) {
@@ -14618,15 +14689,17 @@ function instance$1($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(1, props = $$props.props);
-		if ('$$scope' in $$props) $$invalidate(2, $$scope = $$props.$$scope);
+		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
+		if ('$$scope' in $$props) $$invalidate(3, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 2) {
-			$$invalidate(0, style = objToStyle({
+		if ($$self.$$.dirty & /*props*/ 4) {
+			$$invalidate(1, style = objToStyle({
 				display: props.display ?? 'flex',
 				flexDirection: props.direction,
 				alignItems: props.align,
@@ -14645,13 +14718,13 @@ function instance$1($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [style, props, $$scope, slots];
+	return [layerId, style, props, $$scope, slots];
 }
 
 class Layout extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1, create_fragment$1, safe_not_equal, { props: 1 }, add_css$1);
+		init(this, options, instance$1, create_fragment$1, safe_not_equal, { props: 2, layerId: 0 }, add_css$1);
 	}
 }
 
@@ -14675,23 +14748,33 @@ function create_fragment(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			p = claim_element(nodes, "P", { class: true, style: true });
+			p = claim_element(nodes, "P", {
+				"data-layer-id": true,
+				class: true,
+				style: true
+			});
+
 			var p_nodes = children(p);
 			p_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
+			attr(p, "data-layer-id", /*layerId*/ ctx[0]);
 			attr(p, "class", "text svelte-1vl0c87");
-			attr(p, "style", /*style*/ ctx[0]);
+			attr(p, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, p, anchor);
-			p.innerHTML = /*escapedHTML*/ ctx[1];
+			p.innerHTML = /*escapedHTML*/ ctx[2];
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*escapedHTML*/ 2) p.innerHTML = /*escapedHTML*/ ctx[1];
-			if (dirty & /*style*/ 1) {
-				attr(p, "style", /*style*/ ctx[0]);
+			if (dirty & /*escapedHTML*/ 4) p.innerHTML = /*escapedHTML*/ ctx[2];
+			if (dirty & /*layerId*/ 1) {
+				attr(p, "data-layer-id", /*layerId*/ ctx[0]);
+			}
+
+			if (dirty & /*style*/ 2) {
+				attr(p, "style", /*style*/ ctx[1]);
 			}
 		},
 		i: noop,
@@ -14706,18 +14789,20 @@ function instance($$self, $$props, $$invalidate) {
 	let escapedHTML;
 	let style;
 	let { props = { content: '' } } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('props' in $$props) $$invalidate(3, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 4) {
-			$$invalidate(1, escapedHTML = props.content.replace(/&/g, '&lt;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\n/g, '<br />'));
+		if ($$self.$$.dirty & /*props*/ 8) {
+			$$invalidate(2, escapedHTML = props.content.replace(/&/g, '&lt;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\n/g, '<br />'));
 		}
 
-		if ($$self.$$.dirty & /*props*/ 4) {
-			$$invalidate(0, style = objToStyle({
+		if ($$self.$$.dirty & /*props*/ 8) {
+			$$invalidate(1, style = objToStyle({
 				position: props?.position ?? 'static',
 				fontWeight: props.fontWeight,
 				fontSize: props.fontSize,
@@ -14733,13 +14818,13 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [style, escapedHTML, props];
+	return [layerId, style, escapedHTML, props];
 }
 
 class Text extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { props: 2 }, add_css);
+		init(this, options, instance, create_fragment, safe_not_equal, { props: 3, layerId: 0 }, add_css);
 	}
 }
 

package/dist/index.es.js

@@ -11350,9 +11350,10 @@ function create_fragment$w(ctx) {
 			img = element("img");
 			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
 			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
-			attr(img, "style", /*imgStyle*/ ctx[1]);
+			attr(img, "style", /*imgStyle*/ ctx[2]);
 			attr(div, "class", "avatar svelte-17xar9h");
-			attr(div, "style", /*style*/ ctx[2]);
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -11367,12 +11368,16 @@ function create_fragment$w(ctx) {
 				attr(img, "alt", img_alt_value);
 			}
 
-			if (dirty & /*imgStyle*/ 2) {
-				attr(img, "style", /*imgStyle*/ ctx[1]);
+			if (dirty & /*imgStyle*/ 4) {
+				attr(img, "style", /*imgStyle*/ ctx[2]);
+			}
+
+			if (dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			}
 
-			if (dirty & /*style*/ 4) {
-				attr(div, "style", /*style*/ ctx[2]);
+			if (dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
 			}
 		},
 		i: noop,
@@ -11387,6 +11392,7 @@ function instance$w($$self, $$props, $$invalidate) {
 	let style;
 	let imgStyle;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	const VARIANTS = {
 		shape: {
@@ -11399,11 +11405,12 @@ function instance$w($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(2, style = objToStyle({
+			$$invalidate(3, style = objToStyle({
 				width: `${size}px`,
 				height: `${size}px`,
 				...VARIANTS.shape[props.shape ?? 'square'],
@@ -11413,19 +11420,19 @@ function instance$w($$self, $$props, $$invalidate) {
 		}
 	};
 
-	$$invalidate(1, imgStyle = objToStyle({
+	$$invalidate(2, imgStyle = objToStyle({
 		width: '100%',
 		height: '100%',
 		objectFit: 'cover'
 	}));
 
-	return [props, imgStyle, style];
+	return [props, layerId, imgStyle, style];
 }
 
 class Avatar extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$w, create_fragment$w, safe_not_equal, { props: 0 }, add_css$6);
+		init(this, options, instance$w, create_fragment$w, safe_not_equal, { props: 0, layerId: 1 }, add_css$6);
 	}
 }
 
@@ -12855,12 +12862,12 @@ function add_css$5(target) {
 	append_styles(target, "svelte-1mx2edd", ".icon.svelte-1mx2edd{display:inline-flex;align-items:center;overflow:hidden;width:auto}");
 }
 
-// (14:0) {#if (IconComponent)}
+// (15:0) {#if (IconComponent)}
 function create_if_block$1(ctx) {
 	let div;
 	let switch_instance;
 	let current;
-	var switch_value = /*IconComponent*/ ctx[1];
+	var switch_value = /*IconComponent*/ ctx[2];
 
 	function switch_props(ctx) {
 		return {
@@ -12876,8 +12883,9 @@ function create_if_block$1(ctx) {
 		c() {
 			div = element("div");
 			if (switch_instance) create_component(switch_instance.$$.fragment);
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(div, "class", "icon svelte-1mx2edd");
-			attr(div, "style", /*style*/ ctx[2]);
+			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -12888,7 +12896,7 @@ function create_if_block$1(ctx) {
 			const switch_instance_changes = {};
 			if (dirty & /*props*/ 1) switch_instance_changes.color = /*props*/ ctx[0].color ?? '#333';
 
-			if (switch_value !== (switch_value = /*IconComponent*/ ctx[1])) {
+			if (switch_value !== (switch_value = /*IconComponent*/ ctx[2])) {
 				if (switch_instance) {
 					group_outros();
 					const old_component = switch_instance;
@@ -12912,8 +12920,12 @@ function create_if_block$1(ctx) {
 				switch_instance.$set(switch_instance_changes);
 			}
 
-			if (!current || dirty & /*style*/ 4) {
-				attr(div, "style", /*style*/ ctx[2]);
+			if (!current || dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+
+			if (!current || dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -12935,7 +12947,7 @@ function create_if_block$1(ctx) {
 function create_fragment$5(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*IconComponent*/ ctx[1] && create_if_block$1(ctx);
+	let if_block = /*IconComponent*/ ctx[2] && create_if_block$1(ctx);
 
 	return {
 		c() {
@@ -12948,11 +12960,11 @@ function create_fragment$5(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*IconComponent*/ ctx[1]) {
+			if (/*IconComponent*/ ctx[2]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*IconComponent*/ 2) {
+					if (dirty & /*IconComponent*/ 4) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -12991,14 +13003,16 @@ function instance$5($$self, $$props, $$invalidate) {
 	let style;
 	let IconComponent;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(2, style = objToStyle({
+			$$invalidate(3, style = objToStyle({
 				minWidth: props.size,
 				width: props.size,
 				height: props.size,
@@ -13007,17 +13021,17 @@ function instance$5($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(1, IconComponent = ICON_VARIANTS[props.variant] ?? undefined);
+			$$invalidate(2, IconComponent = ICON_VARIANTS[props.variant] ?? undefined);
 		}
 	};
 
-	return [props, IconComponent, style];
+	return [props, layerId, IconComponent, style];
 }
 
 class Icon extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 0 }, add_css$5);
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 0, layerId: 1 }, add_css$5);
 	}
 }
 
@@ -13027,7 +13041,7 @@ function add_css$4(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}");
 }
 
-// (126:2) {#if (props.isIcon && props.iconVariant)}
+// (127:2) {#if (props.isIcon && props.iconVariant)}
 function create_if_block(ctx) {
 	let div;
 	let icon;
@@ -13038,7 +13052,7 @@ function create_if_block(ctx) {
 				props: {
 					variant: /*props*/ ctx[0].iconVariant,
 					size: '1em',
-					color: /*VARIANTS*/ ctx[2].color[/*props*/ ctx[0].color ?? 'default'].color
+					color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
 				}
 			}
 		});
@@ -13060,7 +13074,7 @@ function create_if_block(ctx) {
 			if (dirty & /*props*/ 1) icon_changes.props = {
 				variant: /*props*/ ctx[0].iconVariant,
 				size: '1em',
-				color: /*VARIANTS*/ ctx[2].color[/*props*/ ctx[0].color ?? 'default'].color
+				color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
 			};
 
 			icon.$set(icon_changes);
@@ -13099,7 +13113,8 @@ function create_fragment$4(ctx) {
 			t0 = space();
 			span = element("span");
 			t1 = text(t1_value);
-			attr(button, "style", /*style*/ ctx[1]);
+			attr(button, "data-layer-id", /*layerId*/ ctx[1]);
+			attr(button, "style", /*style*/ ctx[2]);
 			attr(button, "class", "v2-button svelte-kz1c6t");
 		},
 		m(target, anchor) {
@@ -13111,7 +13126,7 @@ function create_fragment$4(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[3]));
+				dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[4]));
 				mounted = true;
 			}
 		},
@@ -13141,8 +13156,12 @@ function create_fragment$4(ctx) {
 
 			if ((!current || dirty & /*props*/ 1) && t1_value !== (t1_value = /*props*/ ctx[0].label + "")) set_data(t1, t1_value);
 
-			if (!current || dirty & /*style*/ 2) {
-				attr(button, "style", /*style*/ ctx[1]);
+			if (!current || dirty & /*layerId*/ 2) {
+				attr(button, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+
+			if (!current || dirty & /*style*/ 4) {
+				attr(button, "style", /*style*/ ctx[2]);
 			}
 		},
 		i(local) {
@@ -13169,6 +13188,7 @@ function instance$4($$self, $$props, $$invalidate) {
 	let { eventName = '' } = $$props;
 	let { eventValue = undefined } = $$props;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	const VARIANTS = {
 		size: {
@@ -13258,15 +13278,16 @@ function instance$4($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
-		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
+		if ('onClick' in $$props) $$invalidate(5, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(6, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(7, eventValue = $$props.eventValue);
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(1, style = objToStyle({
+			$$invalidate(2, style = objToStyle({
 				display: 'inline-flex',
 				gap: '0.65em',
 				alignItems: 'center',
@@ -13287,7 +13308,7 @@ function instance$4($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [props, style, VARIANTS, handleClick, onClick, eventName, eventValue];
+	return [props, layerId, style, VARIANTS, handleClick, onClick, eventName, eventValue];
 }
 
 class Button extends SvelteComponent {
@@ -13301,10 +13322,11 @@ class Button extends SvelteComponent {
 			create_fragment$4,
 			safe_not_equal,
 			{
-				onClick: 4,
-				eventName: 5,
-				eventValue: 6,
-				props: 0
+				onClick: 5,
+				eventName: 6,
+				eventValue: 7,
+				props: 0,
+				layerId: 1
 			},
 			add_css$4
 		);
@@ -13360,8 +13382,9 @@ function create_fragment$3(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[0]);
+			attr(button, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -13369,8 +13392,12 @@ function create_fragment$3(ctx) {
 			append(svg, path);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*style*/ 1) {
-				attr(button, "style", /*style*/ ctx[0]);
+			if (dirty & /*layerId*/ 1) {
+				attr(button, "data-layer-id", /*layerId*/ ctx[0]);
+			}
+
+			if (dirty & /*style*/ 2) {
+				attr(button, "style", /*style*/ ctx[1]);
 			}
 		},
 		i: noop,
@@ -13384,15 +13411,17 @@ function create_fragment$3(ctx) {
 function instance$3($$self, $$props, $$invalidate) {
 	let style;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 	const size = props.size ?? 24;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(1, props = $$props.props);
+		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 2) {
-			$$invalidate(0, style = objToStyle({
+		if ($$self.$$.dirty & /*props*/ 4) {
+			$$invalidate(1, style = objToStyle({
 				width: `${size}px`,
 				height: `${size}px`,
 				...props.bordered && { border: '1px solid #666' },
@@ -13401,13 +13430,13 @@ function instance$3($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [style, props];
+	return [layerId, style, props];
 }
 
 class CloseButton extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, { props: 1 }, add_css$3);
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { props: 2, layerId: 0 }, add_css$3);
 	}
 }
 
@@ -13432,10 +13461,11 @@ function create_fragment$2(ctx) {
 			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
 			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
 			attr(img, "class", "image-img svelte-vojroc");
-			attr(object, "style", /*objectStyle*/ ctx[1]);
+			attr(object, "style", /*objectStyle*/ ctx[2]);
 			attr(object, "class", "image-object svelte-vojroc");
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(div, "class", "image svelte-vojroc");
-			attr(div, "style", /*style*/ ctx[2]);
+			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -13451,12 +13481,16 @@ function create_fragment$2(ctx) {
 				attr(img, "alt", img_alt_value);
 			}
 
-			if (dirty & /*objectStyle*/ 2) {
-				attr(object, "style", /*objectStyle*/ ctx[1]);
+			if (dirty & /*objectStyle*/ 4) {
+				attr(object, "style", /*objectStyle*/ ctx[2]);
 			}
 
-			if (dirty & /*style*/ 4) {
-				attr(div, "style", /*style*/ ctx[2]);
+			if (dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+
+			if (dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
 			}
 		},
 		i: noop,
@@ -13471,31 +13505,33 @@ function instance$2($$self, $$props, $$invalidate) {
 	let style;
 	let objectStyle;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(2, style = objToStyle({
+			$$invalidate(3, style = objToStyle({
 				width: props.width ?? '100%',
 				...toCssCommon(props)
 			}));
 		}
 
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(1, objectStyle = objToStyle({ aspectRatio: props.aspect }));
+			$$invalidate(2, objectStyle = objToStyle({ aspectRatio: props.aspect }));
 		}
 	};
 
-	return [props, objectStyle, style];
+	return [props, layerId, objectStyle, style];
 }
 
 class Image extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$2, create_fragment$2, safe_not_equal, { props: 0 }, add_css$2);
+		init(this, options, instance$2, create_fragment$2, safe_not_equal, { props: 0, layerId: 1 }, add_css$2);
 	}
 }
 
@@ -13508,15 +13544,16 @@ function add_css$1(target) {
 function create_fragment$1(ctx) {
 	let div;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[3].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[2], null);
+	const default_slot_template = /*#slots*/ ctx[4].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);
 
 	return {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
+			attr(div, "data-layer-id", /*layerId*/ ctx[0]);
 			attr(div, "class", "layout svelte-1g6q4hu");
-			attr(div, "style", /*style*/ ctx[0]);
+			attr(div, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -13529,22 +13566,26 @@ function create_fragment$1(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 4)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 8)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[2],
+						/*$$scope*/ ctx[3],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[2])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[2], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[3])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[3], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*style*/ 1) {
-				attr(div, "style", /*style*/ ctx[0]);
+			if (!current || dirty & /*layerId*/ 1) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[0]);
+			}
+
+			if (!current || dirty & /*style*/ 2) {
+				attr(div, "style", /*style*/ ctx[1]);
 			}
 		},
 		i(local) {
@@ -13567,15 +13608,17 @@ function instance$1($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(1, props = $$props.props);
-		if ('$$scope' in $$props) $$invalidate(2, $$scope = $$props.$$scope);
+		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
+		if ('$$scope' in $$props) $$invalidate(3, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 2) {
-			$$invalidate(0, style = objToStyle({
+		if ($$self.$$.dirty & /*props*/ 4) {
+			$$invalidate(1, style = objToStyle({
 				display: props.display ?? 'flex',
 				flexDirection: props.direction,
 				alignItems: props.align,
@@ -13594,13 +13637,13 @@ function instance$1($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [style, props, $$scope, slots];
+	return [layerId, style, props, $$scope, slots];
 }
 
 class Layout extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1, create_fragment$1, safe_not_equal, { props: 1 }, add_css$1);
+		init(this, options, instance$1, create_fragment$1, safe_not_equal, { props: 2, layerId: 0 }, add_css$1);
 	}
 }
 
@@ -13621,17 +13664,22 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			p = element("p");
+			attr(p, "data-layer-id", /*layerId*/ ctx[0]);
 			attr(p, "class", "text svelte-1vl0c87");
-			attr(p, "style", /*style*/ ctx[0]);
+			attr(p, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, p, anchor);
-			p.innerHTML = /*escapedHTML*/ ctx[1];
+			p.innerHTML = /*escapedHTML*/ ctx[2];
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*escapedHTML*/ 2) p.innerHTML = /*escapedHTML*/ ctx[1];
-			if (dirty & /*style*/ 1) {
-				attr(p, "style", /*style*/ ctx[0]);
+			if (dirty & /*escapedHTML*/ 4) p.innerHTML = /*escapedHTML*/ ctx[2];
+			if (dirty & /*layerId*/ 1) {
+				attr(p, "data-layer-id", /*layerId*/ ctx[0]);
+			}
+
+			if (dirty & /*style*/ 2) {
+				attr(p, "style", /*style*/ ctx[1]);
 			}
 		},
 		i: noop,
@@ -13646,18 +13694,20 @@ function instance($$self, $$props, $$invalidate) {
 	let escapedHTML;
 	let style;
 	let { props = { content: '' } } = $$props;
+	let { layerId = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(2, props = $$props.props);
+		if ('props' in $$props) $$invalidate(3, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 4) {
-			$$invalidate(1, escapedHTML = props.content.replace(/&/g, '&lt;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\n/g, '<br />'));
+		if ($$self.$$.dirty & /*props*/ 8) {
+			$$invalidate(2, escapedHTML = props.content.replace(/&/g, '&lt;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\n/g, '<br />'));
 		}
 
-		if ($$self.$$.dirty & /*props*/ 4) {
-			$$invalidate(0, style = objToStyle({
+		if ($$self.$$.dirty & /*props*/ 8) {
+			$$invalidate(1, style = objToStyle({
 				position: props?.position ?? 'static',
 				fontWeight: props.fontWeight,
 				fontSize: props.fontSize,
@@ -13673,13 +13723,13 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [style, escapedHTML, props];
+	return [layerId, style, escapedHTML, props];
 }
 
 class Text extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { props: 2 }, add_css);
+		init(this, options, instance, create_fragment, safe_not_equal, { props: 3, layerId: 0 }, add_css);
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.232-28663591.feead91d",
+  "version": "1.1.232-28684891.17fd688b",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",