@plaidev/karte-action-sdk 1.1.156-28004326.6f979cf9 → 1.1.156-28011287.2697070d

package/dist/hydrate/index.es.js

@@ -3127,7 +3127,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 +3339,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;
@@ -4498,7 +4498,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 +4547,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 +4667,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 +4731,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 +4999,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 +5059,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 +8527,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 +8576,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 +8694,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 +8707,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 +8822,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

@@ -3153,7 +3153,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 +3315,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;
@@ -4369,7 +4369,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 +4415,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 +4523,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 +4571,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 +4819,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 +4876,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 +8018,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 +8064,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 +8164,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 +8177,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 +8278,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-28011287.2697070d",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",