@plaidev/karte-action-sdk 1.1.156-28004326.6f979cf9 → 1.1.156-28011566.cc9ca327

package/dist/hydrate/index.es.js

@@ -1074,26 +1074,6 @@ async function loadGlobalStyle(href) {
         link.addEventListener('error', () => reject(link));
     });
 }
-/**
- * {@link hashCode} generate hash with FNV-1a hash
- *
- * @param s - Inputed string
- *
- * @returns Hashed string
- *
- * @see https://stackoverflow.com/a/22429679
- *
- * @internal
- */
-function hashCode(s) {
-    const SEED = 0x41653150;
-    let hash = SEED;
-    Array.from(s).forEach((c, index) => {
-        hash ^= c.charCodeAt(index);
-        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
-    });
-    return ('0000000' + (hash >>> 0).toString(16)).substr(-8);
-}
 
 /**
  * アクションのログの記録の管理
@@ -3127,7 +3107,7 @@ function create_if_block$5(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				eventName: /*clickEventName*/ ctx[1],
 				eventValue: /*clickEventValue*/ ctx[2],
-				$$slots: { default: [create_default_slot$4] },
+				$$slots: { default: [create_default_slot$6] },
 				$$scope: { ctx }
 			}
 		});
@@ -3339,7 +3319,7 @@ function create_default_slot_1$1(ctx) {
 }
 
 // (160:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
-function create_default_slot$4(ctx) {
+function create_default_slot$6(ctx) {
 	let t;
 	let div;
 	let current;
@@ -3910,8 +3890,8 @@ function create_fragment$q(ctx) {
 		h() {
 			attr(div0, "class", "grid-item-inner svelte-n7kdl3");
 			attr(div1, "class", "grid-item svelte-n7kdl3");
-			attr(div1, "data-grid-item-id", /*gridItemId*/ ctx[1]);
-			attr(div1, "style", /*_style*/ ctx[0]);
+			attr(div1, "data-grid-item-id", /*id*/ ctx[0]);
+			attr(div1, "style", /*_style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div1, anchor);
@@ -3939,8 +3919,12 @@ function create_fragment$q(ctx) {
 				}
 			}
 
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div1, "style", /*_style*/ ctx[0]);
+			if (!current || dirty & /*id*/ 1) {
+				attr(div1, "data-grid-item-id", /*id*/ ctx[0]);
+			}
+
+			if (!current || dirty & /*_style*/ 2) {
+				attr(div1, "style", /*_style*/ ctx[1]);
 			}
 		},
 		i(local) {
@@ -3968,13 +3952,7 @@ function instance$q($$self, $$props, $$invalidate) {
 	let { y2 } = $$props;
 	let { z } = $$props;
 	let { background = 'transparent' } = $$props;
-	let gridItemIdRaw = `${y1}-${x1}-${y2}-${x2}`;
-
-	if (z) {
-		gridItemIdRaw += `-${z}`;
-	}
-
-	const gridItemId = hashCode(gridItemIdRaw);
+	let { id } = $$props;
 
 	onMount(() => {
 		setMaximumZindex(z);
@@ -3987,12 +3965,13 @@ function instance$q($$self, $$props, $$invalidate) {
 		if ('y2' in $$props) $$invalidate(5, y2 = $$props.y2);
 		if ('z' in $$props) $$invalidate(6, z = $$props.z);
 		if ('background' in $$props) $$invalidate(7, background = $$props.background);
+		if ('id' in $$props) $$invalidate(0, id = $$props.id);
 		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*y1, x1, y2, x2, z, background*/ 252) {
-			$$invalidate(0, _style = [
+			$$invalidate(1, _style = [
 				`grid-area: ${y1 + 1} / ${x1 + 1} / ${y2 + 2} / ${x2 + 2}`,
 				`z-index: ${z}`,
 				`background: ${background}`,
@@ -4002,7 +3981,7 @@ function instance$q($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [_style, gridItemId, x1, x2, y1, y2, z, background, $$scope, slots];
+	return [id, _style, x1, x2, y1, y2, z, background, $$scope, slots];
 }
 
 class GridItem extends SvelteComponent {
@@ -4021,7 +4000,8 @@ class GridItem extends SvelteComponent {
 				y1: 4,
 				y2: 5,
 				z: 6,
-				background: 7
+				background: 7,
+				id: 0
 			},
 			add_css$o
 		);
@@ -4498,7 +4478,7 @@ function add_css$m(target) {
 }
 
 // (36:2) <Button onClick={onClick} {style} {eventName}>
-function create_default_slot$3(ctx) {
+function create_default_slot$5(ctx) {
 	let rendertext;
 	let current;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
@@ -4547,7 +4527,7 @@ function create_fragment$n(ctx) {
 				onClick: /*onClick*/ ctx[1],
 				style: /*style*/ ctx[3],
 				eventName: /*eventName*/ ctx[2],
-				$$slots: { default: [create_default_slot$3] },
+				$$slots: { default: [create_default_slot$5] },
 				$$scope: { ctx }
 			}
 		});
@@ -4667,7 +4647,7 @@ function add_css$l(target) {
 }
 
 // (40:2) <Button {onClick} style={_style} {eventName}>
-function create_default_slot$2(ctx) {
+function create_default_slot$4(ctx) {
 	let img;
 	let img_src_value;
 
@@ -4731,7 +4711,7 @@ function create_fragment$m(ctx) {
 				onClick: /*onClick*/ ctx[3],
 				style: /*_style*/ ctx[6],
 				eventName: /*eventName*/ ctx[4],
-				$$slots: { default: [create_default_slot$2] },
+				$$slots: { default: [create_default_slot$4] },
 				$$scope: { ctx }
 			}
 		});
@@ -4999,7 +4979,7 @@ function add_css$j(target) {
 }
 
 // (67:2) <Button {onClick} style={_style} eventName={clickEventName}>
-function create_default_slot$1(ctx) {
+function create_default_slot$3(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[5].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
@@ -5059,7 +5039,7 @@ function create_fragment$k(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*_style*/ ctx[2],
 				eventName: /*clickEventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$1] },
+				$$slots: { default: [create_default_slot$3] },
 				$$scope: { ctx }
 			}
 		});
@@ -8527,67 +8507,44 @@ class Countdown extends SvelteComponent {
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
 
 function add_css$6(target) {
-	append_styles(target, "svelte-aept6n", ".box-wrapper.svelte-aept6n{position:relative;width:100%;height:100%}.box.svelte-aept6n{position:absolute;inset:0}");
+	append_styles(target, "svelte-1d6pgu1", ".box.svelte-1d6pgu1{position:relative;width:100%;height:100%}.box.svelte-1d6pgu1 > .button{position:absolute;inset:0}");
 }
 
-function create_fragment$7(ctx) {
-	let div1;
-	let div0;
+// (24:2) <Button {onClick} style={_style} {eventName}>
+function create_default_slot$2(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[2].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);
+	const default_slot_template = /*#slots*/ ctx[3].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
 
 	return {
 		c() {
-			div1 = element("div");
-			div0 = element("div");
 			if (default_slot) default_slot.c();
-			this.h();
 		},
 		l(nodes) {
-			div1 = claim_element(nodes, "DIV", { class: true });
-			var div1_nodes = children(div1);
-			div0 = claim_element(div1_nodes, "DIV", { class: true, style: true });
-			var div0_nodes = children(div0);
-			if (default_slot) default_slot.l(div0_nodes);
-			div0_nodes.forEach(detach);
-			div1_nodes.forEach(detach);
-			this.h();
-		},
-		h() {
-			attr(div0, "class", "box svelte-aept6n");
-			attr(div0, "style", /*_style*/ ctx[0]);
-			attr(div1, "class", "box-wrapper svelte-aept6n");
+			if (default_slot) default_slot.l(nodes);
 		},
 		m(target, anchor) {
-			insert_hydration(target, div1, anchor);
-			append_hydration(div1, div0);
-
 			if (default_slot) {
-				default_slot.m(div0, null);
+				default_slot.m(target, anchor);
 			}
 
 			current = true;
 		},
-		p(ctx, [dirty]) {
+		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 16)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[1],
+						/*$$scope*/ ctx[4],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[4])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[4], dirty, null),
 						null
 					);
 				}
 			}
-
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div0, "style", /*_style*/ ctx[0]);
-			}
 		},
 		i(local) {
 			if (current) return;
@@ -8599,38 +8556,105 @@ function create_fragment$7(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div1);
 			if (default_slot) default_slot.d(detaching);
 		}
 	};
 }
 
+function create_fragment$7(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				style: /*_style*/ ctx[2],
+				eventName: /*eventName*/ ctx[1],
+				$$slots: { default: [create_default_slot$2] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+			claim_component(button.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "box svelte-1d6pgu1");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			mount_component(button, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const button_changes = {};
+			if (dirty & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
+			if (dirty & /*_style*/ 4) button_changes.style = /*_style*/ ctx[2];
+			if (dirty & /*eventName*/ 2) button_changes.eventName = /*eventName*/ ctx[1];
+
+			if (dirty & /*$$scope*/ 16) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(button);
+		}
+	};
+}
+
 function instance$7($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
 	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
-		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(1, eventName = $$props.eventName);
+		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
+		if ('$$scope' in $$props) $$invalidate(4, $$scope = $$props.$$scope);
 	};
 
-	return [_style, $$scope, slots];
+	return [onClick, eventName, _style, slots, $$scope];
 }
 
 class Box extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { _style: 0 }, add_css$6);
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, { onClick: 0, eventName: 1, _style: 2 }, add_css$6);
 	}
 }
 
 /* src/components/IconElement.svelte generated by Svelte v3.53.1 */
 
 function add_css$5(target) {
-	append_styles(target, "svelte-1773k1k", ".icon.svelte-1773k1k{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1773k1k svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
+	append_styles(target, "svelte-1mkvcuo", ".icon.svelte-1mkvcuo{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1mkvcuo > .button{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.icon.svelte-1mkvcuo > .button._disabled{cursor:not-allowed !important;opacity:0.2}.icon.svelte-1mkvcuo svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
 }
 
-// (39:2) {#if svg}
+// (56:4) {#if svg}
 function create_if_block(ctx) {
 	let html_tag;
 	let html_anchor;
@@ -8650,11 +8674,11 @@ function create_if_block(ctx) {
 			html_tag.a = html_anchor;
 		},
 		m(target, anchor) {
-			html_tag.m(/*svg*/ ctx[1], target, anchor);
+			html_tag.m(/*svg*/ ctx[3], target, anchor);
 			insert_hydration(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*svg*/ 2) html_tag.p(/*svg*/ ctx[1]);
+			if (dirty & /*svg*/ 8) html_tag.p(/*svg*/ ctx[3]);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -8663,54 +8687,105 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
-	let div;
-	let if_block = /*svg*/ ctx[1] && create_if_block(ctx);
+// (55:2) <Button {onClick} {style} {eventName}>
+function create_default_slot$1(ctx) {
+	let if_block_anchor;
+	let if_block = /*svg*/ ctx[3] && create_if_block(ctx);
 
 	return {
 		c() {
-			div = element("div");
 			if (if_block) if_block.c();
-			this.h();
+			if_block_anchor = empty();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", { class: true, style: true });
-			var div_nodes = children(div);
-			if (if_block) if_block.l(div_nodes);
-			div_nodes.forEach(detach);
-			this.h();
-		},
-		h() {
-			attr(div, "class", "icon svelte-1773k1k");
-			attr(div, "style", /*style*/ ctx[0]);
+			if (if_block) if_block.l(nodes);
+			if_block_anchor = empty();
 		},
 		m(target, anchor) {
-			insert_hydration(target, div, anchor);
-			if (if_block) if_block.m(div, null);
+			if (if_block) if_block.m(target, anchor);
+			insert_hydration(target, if_block_anchor, anchor);
 		},
-		p(ctx, [dirty]) {
-			if (/*svg*/ ctx[1]) {
+		p(ctx, dirty) {
+			if (/*svg*/ ctx[3]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
 					if_block = create_if_block(ctx);
 					if_block.c();
-					if_block.m(div, null);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
 			} else if (if_block) {
 				if_block.d(1);
 				if_block = null;
 			}
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
 
-			if (dirty & /*style*/ 1) {
-				attr(div, "style", /*style*/ ctx[0]);
+function create_fragment$6(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				style: /*style*/ ctx[2],
+				eventName: /*eventName*/ ctx[1],
+				$$slots: { default: [create_default_slot$1] },
+				$$scope: { ctx }
 			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+			claim_component(button.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "icon svelte-1mkvcuo");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			mount_component(button, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const button_changes = {};
+			if (dirty & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
+			if (dirty & /*style*/ 4) button_changes.style = /*style*/ ctx[2];
+			if (dirty & /*eventName*/ 2) button_changes.eventName = /*eventName*/ ctx[1];
+
+			if (dirty & /*$$scope, svg*/ 520) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
 		},
-		i: noop,
-		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			if (if_block) if_block.d();
+			destroy_component(button);
 		}
 	};
 }
@@ -8727,42 +8802,62 @@ function instance$6($$self, $$props, $$invalidate) {
 	let styleVariables;
 	let style;
 	let { icon = '' } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
 	let { size = '20px' } = $$props;
 	let { color = 'rgba(0, 16, 14, 0.8)' } = $$props;
 	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('icon' in $$props) $$invalidate(2, icon = $$props.icon);
-		if ('size' in $$props) $$invalidate(3, size = $$props.size);
-		if ('color' in $$props) $$invalidate(4, color = $$props.color);
-		if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
+		if ('icon' in $$props) $$invalidate(4, icon = $$props.icon);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(1, eventName = $$props.eventName);
+		if ('size' in $$props) $$invalidate(5, size = $$props.size);
+		if ('color' in $$props) $$invalidate(6, color = $$props.color);
+		if ('_style' in $$props) $$invalidate(7, _style = $$props._style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*icon*/ 4) {
-			$$invalidate(1, svg = (() => {
+		if ($$self.$$.dirty & /*icon*/ 16) {
+			$$invalidate(3, svg = (() => {
 				if (!icon) return;
 				const original = parseData(icon);
 				return original;
 			})());
 		}
 
-		if ($$self.$$.dirty & /*size, color*/ 24) {
-			$$invalidate(6, styleVariables = `--width: ${size}; --height: ${size}; --color: ${color}; --stroke: ${color}; --fill: ${color};`);
+		if ($$self.$$.dirty & /*size, color*/ 96) {
+			$$invalidate(8, styleVariables = `--width: ${size}; --height: ${size}; --color: ${color}; --stroke: ${color}; --fill: ${color};`);
 		}
 
-		if ($$self.$$.dirty & /*_style, styleVariables*/ 96) {
-			$$invalidate(0, style = [..._style.split(';'), ...styleVariables.split(';')].join(';'));
+		if ($$self.$$.dirty & /*_style, styleVariables*/ 384) {
+			$$invalidate(2, style = [..._style.split(';'), ...styleVariables.split(';')].join(';'));
 		}
 	};
 
-	return [style, svg, icon, size, color, _style, styleVariables];
+	return [onClick, eventName, style, svg, icon, size, color, _style, styleVariables];
 }
 
 class IconElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { icon: 2, size: 3, color: 4, _style: 5 }, add_css$5);
+
+		init(
+			this,
+			options,
+			instance$6,
+			create_fragment$6,
+			safe_not_equal,
+			{
+				icon: 4,
+				onClick: 0,
+				eventName: 1,
+				size: 5,
+				color: 6,
+				_style: 7
+			},
+			add_css$5
+		);
 	}
 }
 

package/dist/index.es.js

@@ -1124,26 +1124,6 @@ async function loadGlobalStyle(href) {
         link.addEventListener('error', () => reject(link));
     });
 }
-/**
- * {@link hashCode} generate hash with FNV-1a hash
- *
- * @param s - Inputed string
- *
- * @returns Hashed string
- *
- * @see https://stackoverflow.com/a/22429679
- *
- * @internal
- */
-function hashCode(s) {
-    const SEED = 0x41653150;
-    let hash = SEED;
-    Array.from(s).forEach((c, index) => {
-        hash ^= c.charCodeAt(index);
-        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
-    });
-    return ('0000000' + (hash >>> 0).toString(16)).substr(-8);
-}
 
 /**
  * アクションのログの記録の管理
@@ -3153,7 +3133,7 @@ function create_if_block$5(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				eventName: /*clickEventName*/ ctx[1],
 				eventValue: /*clickEventValue*/ ctx[2],
-				$$slots: { default: [create_default_slot$4] },
+				$$slots: { default: [create_default_slot$6] },
 				$$scope: { ctx }
 			}
 		});
@@ -3315,7 +3295,7 @@ function create_default_slot_1$1(ctx) {
 }
 
 // (160:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
-function create_default_slot$4(ctx) {
+function create_default_slot$6(ctx) {
 	let t;
 	let div;
 	let current;
@@ -3837,8 +3817,8 @@ function create_fragment$q(ctx) {
 			if (default_slot) default_slot.c();
 			attr(div0, "class", "grid-item-inner svelte-n7kdl3");
 			attr(div1, "class", "grid-item svelte-n7kdl3");
-			attr(div1, "data-grid-item-id", /*gridItemId*/ ctx[1]);
-			attr(div1, "style", /*_style*/ ctx[0]);
+			attr(div1, "data-grid-item-id", /*id*/ ctx[0]);
+			attr(div1, "style", /*_style*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -3866,8 +3846,12 @@ function create_fragment$q(ctx) {
 				}
 			}
 
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div1, "style", /*_style*/ ctx[0]);
+			if (!current || dirty & /*id*/ 1) {
+				attr(div1, "data-grid-item-id", /*id*/ ctx[0]);
+			}
+
+			if (!current || dirty & /*_style*/ 2) {
+				attr(div1, "style", /*_style*/ ctx[1]);
 			}
 		},
 		i(local) {
@@ -3895,13 +3879,7 @@ function instance$q($$self, $$props, $$invalidate) {
 	let { y2 } = $$props;
 	let { z } = $$props;
 	let { background = 'transparent' } = $$props;
-	let gridItemIdRaw = `${y1}-${x1}-${y2}-${x2}`;
-
-	if (z) {
-		gridItemIdRaw += `-${z}`;
-	}
-
-	const gridItemId = hashCode(gridItemIdRaw);
+	let { id } = $$props;
 
 	onMount(() => {
 		setMaximumZindex(z);
@@ -3914,12 +3892,13 @@ function instance$q($$self, $$props, $$invalidate) {
 		if ('y2' in $$props) $$invalidate(5, y2 = $$props.y2);
 		if ('z' in $$props) $$invalidate(6, z = $$props.z);
 		if ('background' in $$props) $$invalidate(7, background = $$props.background);
+		if ('id' in $$props) $$invalidate(0, id = $$props.id);
 		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*y1, x1, y2, x2, z, background*/ 252) {
-			$$invalidate(0, _style = [
+			$$invalidate(1, _style = [
 				`grid-area: ${y1 + 1} / ${x1 + 1} / ${y2 + 2} / ${x2 + 2}`,
 				`z-index: ${z}`,
 				`background: ${background}`,
@@ -3929,7 +3908,7 @@ function instance$q($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [_style, gridItemId, x1, x2, y1, y2, z, background, $$scope, slots];
+	return [id, _style, x1, x2, y1, y2, z, background, $$scope, slots];
 }
 
 class GridItem extends SvelteComponent {
@@ -3948,7 +3927,8 @@ class GridItem extends SvelteComponent {
 				y1: 4,
 				y2: 5,
 				z: 6,
-				background: 7
+				background: 7,
+				id: 0
 			},
 			add_css$o
 		);
@@ -4369,7 +4349,7 @@ function add_css$m(target) {
 }
 
 // (36:2) <Button onClick={onClick} {style} {eventName}>
-function create_default_slot$3(ctx) {
+function create_default_slot$5(ctx) {
 	let rendertext;
 	let current;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
@@ -4415,7 +4395,7 @@ function create_fragment$n(ctx) {
 				onClick: /*onClick*/ ctx[1],
 				style: /*style*/ ctx[3],
 				eventName: /*eventName*/ ctx[2],
-				$$slots: { default: [create_default_slot$3] },
+				$$slots: { default: [create_default_slot$5] },
 				$$scope: { ctx }
 			}
 		});
@@ -4523,7 +4503,7 @@ function add_css$l(target) {
 }
 
 // (40:2) <Button {onClick} style={_style} {eventName}>
-function create_default_slot$2(ctx) {
+function create_default_slot$4(ctx) {
 	let img;
 	let img_src_value;
 
@@ -4571,7 +4551,7 @@ function create_fragment$m(ctx) {
 				onClick: /*onClick*/ ctx[3],
 				style: /*_style*/ ctx[6],
 				eventName: /*eventName*/ ctx[4],
-				$$slots: { default: [create_default_slot$2] },
+				$$slots: { default: [create_default_slot$4] },
 				$$scope: { ctx }
 			}
 		});
@@ -4819,7 +4799,7 @@ function add_css$j(target) {
 }
 
 // (67:2) <Button {onClick} style={_style} eventName={clickEventName}>
-function create_default_slot$1(ctx) {
+function create_default_slot$3(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[5].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
@@ -4876,7 +4856,7 @@ function create_fragment$k(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*_style*/ ctx[2],
 				eventName: /*clickEventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$1] },
+				$$slots: { default: [create_default_slot$3] },
 				$$scope: { ctx }
 			}
 		});
@@ -8018,54 +7998,41 @@ class Countdown extends SvelteComponent {
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
 
 function add_css$6(target) {
-	append_styles(target, "svelte-aept6n", ".box-wrapper.svelte-aept6n{position:relative;width:100%;height:100%}.box.svelte-aept6n{position:absolute;inset:0}");
+	append_styles(target, "svelte-1d6pgu1", ".box.svelte-1d6pgu1{position:relative;width:100%;height:100%}.box.svelte-1d6pgu1 > .button{position:absolute;inset:0}");
 }
 
-function create_fragment$7(ctx) {
-	let div1;
-	let div0;
+// (24:2) <Button {onClick} style={_style} {eventName}>
+function create_default_slot$2(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[2].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);
+	const default_slot_template = /*#slots*/ ctx[3].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
 
 	return {
 		c() {
-			div1 = element("div");
-			div0 = element("div");
 			if (default_slot) default_slot.c();
-			attr(div0, "class", "box svelte-aept6n");
-			attr(div0, "style", /*_style*/ ctx[0]);
-			attr(div1, "class", "box-wrapper svelte-aept6n");
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, div0);
-
 			if (default_slot) {
-				default_slot.m(div0, null);
+				default_slot.m(target, anchor);
 			}
 
 			current = true;
 		},
-		p(ctx, [dirty]) {
+		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 16)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[1],
+						/*$$scope*/ ctx[4],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[4])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[4], dirty, null),
 						null
 					);
 				}
 			}
-
-			if (!current || dirty & /*_style*/ 1) {
-				attr(div0, "style", /*_style*/ ctx[0]);
-			}
 		},
 		i(local) {
 			if (current) return;
@@ -8077,38 +8044,95 @@ function create_fragment$7(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div1);
 			if (default_slot) default_slot.d(detaching);
 		}
 	};
 }
 
+function create_fragment$7(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				style: /*_style*/ ctx[2],
+				eventName: /*eventName*/ ctx[1],
+				$$slots: { default: [create_default_slot$2] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			attr(div, "class", "box svelte-1d6pgu1");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(button, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const button_changes = {};
+			if (dirty & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
+			if (dirty & /*_style*/ 4) button_changes.style = /*_style*/ ctx[2];
+			if (dirty & /*eventName*/ 2) button_changes.eventName = /*eventName*/ ctx[1];
+
+			if (dirty & /*$$scope*/ 16) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(button);
+		}
+	};
+}
+
 function instance$7($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
 	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
-		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(1, eventName = $$props.eventName);
+		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
+		if ('$$scope' in $$props) $$invalidate(4, $$scope = $$props.$$scope);
 	};
 
-	return [_style, $$scope, slots];
+	return [onClick, eventName, _style, slots, $$scope];
 }
 
 class Box extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { _style: 0 }, add_css$6);
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, { onClick: 0, eventName: 1, _style: 2 }, add_css$6);
 	}
 }
 
 /* src/components/IconElement.svelte generated by Svelte v3.53.1 */
 
 function add_css$5(target) {
-	append_styles(target, "svelte-1773k1k", ".icon.svelte-1773k1k{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1773k1k svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
+	append_styles(target, "svelte-1mkvcuo", ".icon.svelte-1mkvcuo{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1mkvcuo > .button{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.icon.svelte-1mkvcuo > .button._disabled{cursor:not-allowed !important;opacity:0.2}.icon.svelte-1mkvcuo svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
 }
 
-// (39:2) {#if svg}
+// (56:4) {#if svg}
 function create_if_block(ctx) {
 	let html_tag;
 	let html_anchor;
@@ -8120,11 +8144,11 @@ function create_if_block(ctx) {
 			html_tag.a = html_anchor;
 		},
 		m(target, anchor) {
-			html_tag.m(/*svg*/ ctx[1], target, anchor);
+			html_tag.m(/*svg*/ ctx[3], target, anchor);
 			insert(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*svg*/ 2) html_tag.p(/*svg*/ ctx[1]);
+			if (dirty & /*svg*/ 8) html_tag.p(/*svg*/ ctx[3]);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -8133,44 +8157,91 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
-	let div;
-	let if_block = /*svg*/ ctx[1] && create_if_block(ctx);
+// (55:2) <Button {onClick} {style} {eventName}>
+function create_default_slot$1(ctx) {
+	let if_block_anchor;
+	let if_block = /*svg*/ ctx[3] && create_if_block(ctx);
 
 	return {
 		c() {
-			div = element("div");
 			if (if_block) if_block.c();
-			attr(div, "class", "icon svelte-1773k1k");
-			attr(div, "style", /*style*/ ctx[0]);
+			if_block_anchor = empty();
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			if (if_block) if_block.m(div, null);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
 		},
-		p(ctx, [dirty]) {
-			if (/*svg*/ ctx[1]) {
+		p(ctx, dirty) {
+			if (/*svg*/ ctx[3]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
 					if_block = create_if_block(ctx);
 					if_block.c();
-					if_block.m(div, null);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
 			} else if (if_block) {
 				if_block.d(1);
 				if_block = null;
 			}
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
 
-			if (dirty & /*style*/ 1) {
-				attr(div, "style", /*style*/ ctx[0]);
+function create_fragment$6(ctx) {
+	let div;
+	let button;
+	let current;
+
+	button = new Button({
+			props: {
+				onClick: /*onClick*/ ctx[0],
+				style: /*style*/ ctx[2],
+				eventName: /*eventName*/ ctx[1],
+				$$slots: { default: [create_default_slot$1] },
+				$$scope: { ctx }
 			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(button.$$.fragment);
+			attr(div, "class", "icon svelte-1mkvcuo");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(button, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const button_changes = {};
+			if (dirty & /*onClick*/ 1) button_changes.onClick = /*onClick*/ ctx[0];
+			if (dirty & /*style*/ 4) button_changes.style = /*style*/ ctx[2];
+			if (dirty & /*eventName*/ 2) button_changes.eventName = /*eventName*/ ctx[1];
+
+			if (dirty & /*$$scope, svg*/ 520) {
+				button_changes.$$scope = { dirty, ctx };
+			}
+
+			button.$set(button_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(button.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(button.$$.fragment, local);
+			current = false;
 		},
-		i: noop,
-		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			if (if_block) if_block.d();
+			destroy_component(button);
 		}
 	};
 }
@@ -8187,42 +8258,62 @@ function instance$6($$self, $$props, $$invalidate) {
 	let styleVariables;
 	let style;
 	let { icon = '' } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
 	let { size = '20px' } = $$props;
 	let { color = 'rgba(0, 16, 14, 0.8)' } = $$props;
 	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('icon' in $$props) $$invalidate(2, icon = $$props.icon);
-		if ('size' in $$props) $$invalidate(3, size = $$props.size);
-		if ('color' in $$props) $$invalidate(4, color = $$props.color);
-		if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
+		if ('icon' in $$props) $$invalidate(4, icon = $$props.icon);
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(1, eventName = $$props.eventName);
+		if ('size' in $$props) $$invalidate(5, size = $$props.size);
+		if ('color' in $$props) $$invalidate(6, color = $$props.color);
+		if ('_style' in $$props) $$invalidate(7, _style = $$props._style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*icon*/ 4) {
-			$$invalidate(1, svg = (() => {
+		if ($$self.$$.dirty & /*icon*/ 16) {
+			$$invalidate(3, svg = (() => {
 				if (!icon) return;
 				const original = parseData(icon);
 				return original;
 			})());
 		}
 
-		if ($$self.$$.dirty & /*size, color*/ 24) {
-			$$invalidate(6, styleVariables = `--width: ${size}; --height: ${size}; --color: ${color}; --stroke: ${color}; --fill: ${color};`);
+		if ($$self.$$.dirty & /*size, color*/ 96) {
+			$$invalidate(8, styleVariables = `--width: ${size}; --height: ${size}; --color: ${color}; --stroke: ${color}; --fill: ${color};`);
 		}
 
-		if ($$self.$$.dirty & /*_style, styleVariables*/ 96) {
-			$$invalidate(0, style = [..._style.split(';'), ...styleVariables.split(';')].join(';'));
+		if ($$self.$$.dirty & /*_style, styleVariables*/ 384) {
+			$$invalidate(2, style = [..._style.split(';'), ...styleVariables.split(';')].join(';'));
 		}
 	};
 
-	return [style, svg, icon, size, color, _style, styleVariables];
+	return [onClick, eventName, style, svg, icon, size, color, _style, styleVariables];
 }
 
 class IconElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { icon: 2, size: 3, color: 4, _style: 5 }, add_css$5);
+
+		init(
+			this,
+			options,
+			instance$6,
+			create_fragment$6,
+			safe_not_equal,
+			{
+				icon: 4,
+				onClick: 0,
+				eventName: 1,
+				size: 5,
+				color: 6,
+				_style: 7
+			},
+			add_css$5
+		);
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.156-28004326.6f979cf9",
+  "version": "1.1.156-28011566.cc9ca327",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",