@plaidev/karte-action-sdk 1.0.28 → 1.0.31

package/dist/index.es.d.ts

@@ -230,13 +230,59 @@ declare function hasSuffix<Suffix extends "px" | "em" | "rem" | "%" | "fr" | "vw
 declare function toBr(text: string): string;
 declare function randStr(digit?: number): string;
 declare const _default: "dummy";
-export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, _default, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName };
-export { default as State } from './State.svelte';
-export { default as GridModalState } from './GridModalState.svelte';
-export { default as GridItem } from './GridItem.svelte';
+declare function hideOnScroll<Props extends {
+    hide_on_scroll: boolean;
+    hide_on_scroll_rate: number;
+    show_on_scroll_reenter: boolean;
+}>(props: Props, fn?: () => void): () => void;
+declare function hideOnTime<Props extends {
+    hide_on_time: boolean;
+    hide_on_time_count: number;
+}>(props: Props, fn?: () => void): () => void;
+declare function showOnScroll<Props extends {
+    show_on_scroll: boolean;
+    show_on_scroll_rate: number;
+    show_on_scroll_reenter: boolean;
+}>(props: Props, fn?: Function): () => void;
+declare function showOnTime<Props extends {
+    show_on_time: boolean;
+    show_on_time_count: number;
+}>(props: Props, fn?: Function): () => void;
+declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
+declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
+declare function createFog({ color, opacity, zIndex, onclick }: {
+    color?: string;
+    opacity?: string;
+    zIndex?: number;
+    onclick: () => void;
+}): {
+    fog: HTMLDivElement;
+    close: () => void;
+};
+type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
+declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
+declare const collection: (config: {
+    api_key: string;
+    table: string;
+    endpoint?: string;
+}) => {
+    get(key: string | string[], cb: (err: Error | null, items?: any) => void): void;
+    getByQuery(query_name: string, params: {
+        [p: string]: string | number | boolean | (string | number | boolean)[];
+    }, options: {
+        ignore_fields?: string[];
+    } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
+    set(key: string, value: string, cb: (err: Error | null) => void): void;
+};
+export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, _default, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
+export { default as State } from './components/State.svelte';
+export { default as StateItem } from './components/StateItem.svelte';
+export { default as Modal } from './components/Modal.svelte';
+export { default as GridModalState } from './components/GridModalState.svelte';
+export { default as Grid } from './components/Grid.svelte';
+export { default as GridItem } from './components/GridItem.svelte';
 export { default as Flex } from './components/Flex.svelte';
 export { default as FlexItem } from './components/FlexItem.svelte';
-export { default as Modal } from './components/Modal.svelte';
 export { default as TextBlock } from './components/TextBlock.svelte';
 export { default as TextButtonBlock } from './components/TextButtonBlock.svelte';
 export { default as ImageBlock } from './components/ImageBlock.svelte';

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { writable, get } from 'svelte/store';
-import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, noop, element, attr, listen, null_to_empty, append, svg_element, binding_callbacks, src_url_equal } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, noop, element, attr, listen, null_to_empty, append, binding_callbacks, svg_element, src_url_equal } from 'svelte/internal';
 import { createEventDispatcher, onDestroy, onMount, setContext, getContext } from 'svelte';
 
 /**
@@ -310,7 +310,179 @@ const ObjectFits = ['fill', 'contain', 'cover'];
 const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
 const BackgroundSizes = ['cover', 'contain', 'auto'];
 
-/* src/components/Normalize.svelte generated by Svelte v3.44.1 */
+const NOOP = () => { };
+function hideOnScroll(props, fn) {
+    return props.hide_on_scroll && props.hide_on_scroll_rate
+        ? onScroll(() => {
+            fn && fn();
+            return props.show_on_scroll_reenter;
+        }, props.hide_on_scroll_rate / 100)
+        : NOOP;
+}
+function hideOnTime(props, fn) {
+    return props.hide_on_time && props.hide_on_time_count
+        ? onTime(() => {
+            fn && fn();
+        }, props.hide_on_time_count * 1000)
+        : NOOP;
+}
+function showOnScroll(props, fn) {
+    return props.show_on_scroll && props.show_on_scroll_rate
+        ? onScroll(() => {
+            fn && fn();
+            return props.show_on_scroll_reenter;
+        }, props.show_on_scroll_rate / 100)
+        : NOOP;
+}
+function showOnTime(props, fn) {
+    return props.show_on_time && props.show_on_time_count
+        ? onTime(() => {
+            fn && fn();
+        }, props.show_on_time_count * 1000)
+        : NOOP;
+}
+
+const KARTE_MODAL_ROOT = 'karte-modal-root';
+function ensureModalRoot(useShadow = true) {
+    let el = document.getElementById(KARTE_MODAL_ROOT);
+    if (el == null) {
+        el = h('div', { id: KARTE_MODAL_ROOT });
+        document.body.appendChild(el);
+    }
+    const isShadow = !!document.body.attachShadow && useShadow;
+    if (isShadow) {
+        return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
+    }
+    else {
+        return el;
+    }
+}
+const h = (type, props, ...children) => {
+    const el = document.createElement(type);
+    for (const key of Object.keys(props)) {
+        const v = props[key];
+        if (key === 'style') {
+            Object.assign(el.style, v);
+        }
+        else {
+            // @ts-ignore
+            el[key] = v;
+        }
+    }
+    for (const child of children) {
+        el.appendChild(child);
+    }
+    return el;
+};
+function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
+    const root = ensureModalRoot(false);
+    if (root.querySelector('.__krt-fog')) {
+        return { fog: null, close: () => { } };
+    }
+    const fog = document.createElement('div');
+    fog.className = '__krt-fog';
+    Object.assign(fog.style, {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        'z-index': zIndex,
+        'background-color': color,
+        opacity,
+    });
+    const close = () => {
+        onclick();
+        fog.remove();
+    };
+    fog.onclick = close;
+    root.appendChild(fog);
+    return { fog, close };
+}
+function embed(target, replace, embed_method) {
+    if (embed_method == 'replace') {
+        if (target.parentNode) {
+            target.parentNode.replaceChild(replace, target);
+        }
+    }
+    else if (embed_method == 'append') {
+        target.append(replace);
+    }
+    else if (embed_method == 'prepend') {
+        target.prepend(replace);
+    }
+    else if (embed_method == 'after') {
+        target.after(replace);
+    }
+    else if (embed_method == 'before') {
+        target.before(replace);
+    }
+}
+
+const ENDPOINT = 'https://t.karte.io/collection';
+const collection = (config) => {
+    const endpoint = config.endpoint ?? ENDPOINT;
+    const api_key = config.api_key;
+    const table = config.table;
+    return {
+        get(key, cb) {
+            if (Array.isArray(key)) {
+                return request(`${endpoint}/getByKeys`, {
+                    api_key,
+                    name: table,
+                    keys: key,
+                }, cb);
+            }
+            else {
+                request(`${endpoint}/getByKey`, {
+                    api_key,
+                    name: table,
+                    key,
+                }, cb);
+            }
+        },
+        getByQuery(query_name, params, options, cb) {
+            request(`${endpoint}/getByQuery`, {
+                api_key,
+                name: table,
+                query_name,
+                params,
+                options,
+            }, cb);
+        },
+        set(key, value, cb) {
+            request(`${endpoint}/set`, {
+                api_key,
+                name: table,
+                key,
+                value,
+            }, cb);
+        },
+    };
+};
+function request(url, data, cb) {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState != 4) {
+            return;
+        }
+        if (xhr.status != 200) {
+            return cb(new Error(`fail to send collection api request. reason: ${xhr.responseText}`));
+        }
+        try {
+            data = JSON.parse(xhr.responseText);
+            return cb(null, data);
+        }
+        catch (err) {
+            return cb(err);
+        }
+    };
+    xhr.open('POST', url);
+    xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
+    xhr.send(JSON.stringify({ ...data }));
+}
+
+/* src/components/elements/Normalize.svelte generated by Svelte v3.44.1 */
 
 function add_css$9(target) {
 	append_styles(target, "svelte-zmz1k7", "@import 'https://cdn.skypack.dev/normalize.css';");
@@ -323,7 +495,7 @@ class Normalize extends SvelteComponent {
 	}
 }
 
-/* src/State.svelte generated by Svelte v3.44.1 */
+/* src/components/State.svelte generated by Svelte v3.44.1 */
 
 function create_fragment$c(ctx) {
 	let normalize;
@@ -526,7 +698,7 @@ class StateItem extends SvelteComponent {
 	}
 }
 
-/* src/components/BackgroundOverray.svelte generated by Svelte v3.44.1 */
+/* src/components/elements/BackgroundOverray.svelte generated by Svelte v3.44.1 */
 
 function add_css$8(target) {
 	append_styles(target, "svelte-1h4b6e3", ".background.svelte-1h4b6e3{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3)}");
@@ -615,7 +787,7 @@ class BackgroundOverray extends SvelteComponent {
 	}
 }
 
-/* src/components/Animation.svelte generated by Svelte v3.44.1 */
+/* src/components/elements/Animation.svelte generated by Svelte v3.44.1 */
 
 function add_css$7(target) {
 	append_styles(target, "svelte-sa0cac", "@keyframes svelte-sa0cac-fade{0%{opacity:0}100%{opacity:1}}.fade.svelte-sa0cac{animation-name:svelte-sa0cac-fade;animation-duration:1s}@keyframes svelte-sa0cac-bounce{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1)}}.bounce.svelte-sa0cac{animation-name:svelte-sa0cac-bounce;animation-duration:1s}@keyframes svelte-sa0cac-slide-down{0%{transform:translate3d(0, -100%, 0);visibility:visible}100%{transform:translate3d(0, 0, 0)}}.slide-down.svelte-sa0cac{animation-name:svelte-sa0cac-slide-down;animation-duration:1s;animation-delay:0.1s}@keyframes svelte-sa0cac-slide-up{0%{transform:translate3d(0, 100%, 0);visibility:visible}100%{transform:translate3d(0, 0, 0)}}.slide-up.svelte-sa0cac{animation-name:svelte-sa0cac-slide-up;animation-duration:1s;animation-delay:0.1s}@keyframes svelte-sa0cac-slide-left{0%{transform:translate3d(100%, 0, 0);visibility:visible}100%{transform:translate3d(0, 0, 0)}}.slide-left.svelte-sa0cac{animation-name:svelte-sa0cac-slide-left;animation-duration:1s;animation-delay:0.1s}@keyframes svelte-sa0cac-slide-right{0%{transform:translate3d(-100%, 0, 0);visibility:visible}100%{transform:translate3d(0, 0, 0)}}.slide-right.svelte-sa0cac{animation-name:svelte-sa0cac-slide-right;animation-duration:1s;animation-delay:0.1s}");
@@ -700,7 +872,7 @@ function add_css$6(target) {
 	append_styles(target, "svelte-1bxl6mz", ".modal.svelte-1bxl6mz{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-1bxl6mz{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-1bxl6mz:hover{transform:rotate(90deg)}");
 }
 
-// (79:2) {#if closable}
+// (84:4) {#if closable}
 function create_if_block(ctx) {
 	let button;
 	let svg;
@@ -723,7 +895,7 @@ function create_if_block(ctx) {
 			attr(svg, "fill", "none");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(button, "class", "close svelte-1bxl6mz");
-			attr(button, "style", button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[7] + 1) + "; " + /*_closeStyle*/ ctx[3] + "");
+			attr(button, "style", button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[9] + 1) + "; " + /*_closeStyle*/ ctx[4] + "");
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -731,7 +903,7 @@ function create_if_block(ctx) {
 			append(svg, path);
 
 			if (!mounted) {
-				dispose = listen(button, "click", /*close*/ ctx[8]);
+				dispose = listen(button, "click", /*close*/ ctx[10]);
 				mounted = true;
 			}
 		},
@@ -740,7 +912,7 @@ function create_if_block(ctx) {
 				attr(path, "fill", /*closeButtonColor*/ ctx[1]);
 			}
 
-			if (dirty & /*$maximumZindex, _closeStyle*/ 136 && button_style_value !== (button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[7] + 1) + "; " + /*_closeStyle*/ ctx[3] + "")) {
+			if (dirty & /*$maximumZindex, _closeStyle*/ 528 && button_style_value !== (button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[9] + 1) + "; " + /*_closeStyle*/ ctx[4] + "")) {
 				attr(button, "style", button_style_value);
 			}
 		},
@@ -752,16 +924,15 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$8(ctx) {
+// (72:0) <Animation {animation}>
+function create_default_slot$1(ctx) {
 	let div;
 	let t;
 	let div_style_value;
 	let current;
-	let mounted;
-	let dispose;
 	let if_block = /*closable*/ ctx[0] && create_if_block(ctx);
-	const default_slot_template = /*#slots*/ ctx[15].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[14], null);
+	const default_slot_template = /*#slots*/ ctx[17].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[19], null);
 
 	return {
 		c() {
@@ -772,7 +943,7 @@ function create_fragment$8(ctx) {
 			attr(div, "class", "modal svelte-1bxl6mz");
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
-			attr(div, "style", div_style_value = "" + /*pos*/ ctx[6] + " " + /*marginStyle*/ ctx[5] + " " + /*_style*/ ctx[2] + "");
+			attr(div, "style", div_style_value = "" + /*pos*/ ctx[7] + " " + /*marginStyle*/ ctx[6] + " " + /*_style*/ ctx[3] + "");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -783,15 +954,10 @@ function create_fragment$8(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[16](div);
+			/*div_binding*/ ctx[18](div);
 			current = true;
-
-			if (!mounted) {
-				dispose = listen(window, "keydown", /*handle_keydown*/ ctx[9]);
-				mounted = true;
-			}
 		},
-		p(ctx, [dirty]) {
+		p(ctx, dirty) {
 			if (/*closable*/ ctx[0]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
@@ -806,21 +972,21 @@ function create_fragment$8(ctx) {
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 16384)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 524288)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[14],
+						/*$$scope*/ ctx[19],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[14])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[14], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[19], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*pos, marginStyle, _style*/ 100 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[6] + " " + /*marginStyle*/ ctx[5] + " " + /*_style*/ ctx[2] + "")) {
+			if (!current || dirty & /*pos, marginStyle, _style*/ 200 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[7] + " " + /*marginStyle*/ ctx[6] + " " + /*_style*/ ctx[3] + "")) {
 				attr(div, "style", div_style_value);
 			}
 		},
@@ -837,7 +1003,80 @@ function create_fragment$8(ctx) {
 			if (detaching) detach(div);
 			if (if_block) if_block.d();
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[16](null);
+			/*div_binding*/ ctx[18](null);
+		}
+	};
+}
+
+function create_fragment$8(ctx) {
+	let backgroundoverray;
+	let t;
+	let animation_1;
+	let current;
+	let mounted;
+	let dispose;
+
+	backgroundoverray = new BackgroundOverray({
+			props: {
+				backgroundOverray: /*backgroundOverray*/ ctx[8]
+			}
+		});
+
+	backgroundoverray.$on("click", /*close*/ ctx[10]);
+
+	animation_1 = new Animation({
+			props: {
+				animation: /*animation*/ ctx[2],
+				$$slots: { default: [create_default_slot$1] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			create_component(backgroundoverray.$$.fragment);
+			t = space();
+			create_component(animation_1.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(backgroundoverray, target, anchor);
+			insert(target, t, anchor);
+			mount_component(animation_1, target, anchor);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(window, "keydown", /*handle_keydown*/ ctx[11]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			const backgroundoverray_changes = {};
+			if (dirty & /*backgroundOverray*/ 256) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[8];
+			backgroundoverray.$set(backgroundoverray_changes);
+			const animation_1_changes = {};
+			if (dirty & /*animation*/ 4) animation_1_changes.animation = /*animation*/ ctx[2];
+
+			if (dirty & /*$$scope, pos, marginStyle, _style, modal, $maximumZindex, _closeStyle, closeButtonColor, closable*/ 525051) {
+				animation_1_changes.$$scope = { dirty, ctx };
+			}
+
+			animation_1.$set(animation_1_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(backgroundoverray.$$.fragment, local);
+			transition_in(animation_1.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(backgroundoverray.$$.fragment, local);
+			transition_out(animation_1.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(backgroundoverray, detaching);
+			if (detaching) detach(t);
+			destroy_component(animation_1, detaching);
 			mounted = false;
 			dispose();
 		}
@@ -845,34 +1084,20 @@ function create_fragment$8(ctx) {
 }
 
 function instance$8($$self, $$props, $$invalidate) {
+	let backgroundOverray;
+	let overwritePosition;
+	let overwriteMargin;
 	let pos;
 	let marginStyle;
 	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(7, $maximumZindex = $$value));
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(9, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { closable = true } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
 	let { eventName = '' } = $$props;
 	let { eventValue = null } = $$props;
-	let { position = 'center' } = $$props;
-	const overwritePosition = isPreview() ? 'center' : position;
-
-	let { margin = {
-		left: '0px',
-		right: '0px',
-		top: '0px',
-		bottom: '0px'
-	} } = $$props;
-
-	const overwriteMargin = isPreview()
-	? {
-			left: '0px',
-			right: '0px',
-			top: '0px',
-			bottom: '0px'
-		}
-	: margin;
-
+	let { animation = 'none' } = $$props;
+	let { placement = DefaultModalPlacement } = $$props;
 	let { _style = '' } = $$props;
 	let { _closeStyle = '' } = $$props;
 
@@ -896,43 +1121,72 @@ function instance$8($$self, $$props, $$invalidate) {
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			modal = $$value;
-			$$invalidate(4, modal);
+			$$invalidate(5, modal);
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('closable' in $$props) $$invalidate(0, closable = $$props.closable);
 		if ('closeButtonColor' in $$props) $$invalidate(1, closeButtonColor = $$props.closeButtonColor);
-		if ('eventName' in $$props) $$invalidate(10, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(11, eventValue = $$props.eventValue);
-		if ('position' in $$props) $$invalidate(12, position = $$props.position);
-		if ('margin' in $$props) $$invalidate(13, margin = $$props.margin);
-		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
-		if ('_closeStyle' in $$props) $$invalidate(3, _closeStyle = $$props._closeStyle);
-		if ('$$scope' in $$props) $$invalidate(14, $$scope = $$props.$$scope);
+		if ('eventName' in $$props) $$invalidate(12, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(13, eventValue = $$props.eventValue);
+		if ('animation' in $$props) $$invalidate(2, animation = $$props.animation);
+		if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
+		if ('_style' in $$props) $$invalidate(3, _style = $$props._style);
+		if ('_closeStyle' in $$props) $$invalidate(4, _closeStyle = $$props._closeStyle);
+		if ('$$scope' in $$props) $$invalidate(19, $$scope = $$props.$$scope);
 	};
 
-	$$invalidate(6, pos = getPositionStyle(overwritePosition));
-	$$invalidate(5, marginStyle = getMarginStyle(overwriteMargin));
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*placement*/ 16384) {
+			$$invalidate(8, backgroundOverray = placement.backgroundOverlay);
+		}
+
+		if ($$self.$$.dirty & /*placement*/ 16384) {
+			$$invalidate(16, overwritePosition = isPreview() ? 'center' : placement.position);
+		}
+
+		if ($$self.$$.dirty & /*placement*/ 16384) {
+			$$invalidate(15, overwriteMargin = isPreview()
+			? {
+					left: '0px',
+					right: '0px',
+					top: '0px',
+					bottom: '0px'
+				}
+			: placement.margin);
+		}
+
+		if ($$self.$$.dirty & /*overwritePosition*/ 65536) {
+			$$invalidate(7, pos = getPositionStyle(overwritePosition));
+		}
+
+		if ($$self.$$.dirty & /*overwriteMargin*/ 32768) {
+			$$invalidate(6, marginStyle = getMarginStyle(overwriteMargin));
+		}
+	};
 
 	return [
 		closable,
 		closeButtonColor,
+		animation,
 		_style,
 		_closeStyle,
 		modal,
 		marginStyle,
 		pos,
+		backgroundOverray,
 		$maximumZindex,
 		close,
 		handle_keydown,
 		eventName,
 		eventValue,
-		position,
-		margin,
-		$$scope,
+		placement,
+		overwriteMargin,
+		overwritePosition,
 		slots,
-		div_binding
+		div_binding,
+		$$scope
 	];
 }
 
@@ -949,12 +1203,12 @@ class Modal extends SvelteComponent {
 			{
 				closable: 0,
 				closeButtonColor: 1,
-				eventName: 10,
-				eventValue: 11,
-				position: 12,
-				margin: 13,
-				_style: 2,
-				_closeStyle: 3
+				eventName: 12,
+				eventValue: 13,
+				animation: 2,
+				placement: 14,
+				_style: 3,
+				_closeStyle: 4
 			},
 			add_css$6
 		);
@@ -1077,12 +1331,12 @@ class Grid extends SvelteComponent {
 	}
 }
 
-/* src/GridModalState.svelte generated by Svelte v3.44.1 */
+/* src/components/GridModalState.svelte generated by Svelte v3.44.1 */
 
-function create_default_slot_3(ctx) {
+function create_default_slot_2(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[21].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
+	const default_slot_template = /*#slots*/ ctx[16].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[17], null);
 
 	return {
 		c() {
@@ -1097,15 +1351,15 @@ function create_default_slot_3(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 4194304)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 131072)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[22],
+						/*$$scope*/ ctx[17],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[17])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[17], dirty, null),
 						null
 					);
 				}
@@ -1126,20 +1380,20 @@ function create_default_slot_3(ctx) {
 	};
 }
 
-// (104:4) <Modal       {closable}       {closeButtonColor}       {_closeStyle}       position={_position}       {margin}       _style={_modalStyle}       on:close={close}     >
-function create_default_slot_2(ctx) {
+// (85:2) <Modal     {closable}     {closeButtonColor}     {_closeStyle}     _style={_modalStyle}     on:close={close}   >
+function create_default_slot_1(ctx) {
 	let grid;
 	let current;
 
 	grid = new Grid({
 			props: {
-				width: /*width*/ ctx[6],
-				height: /*height*/ ctx[7],
-				rows: /*rows*/ ctx[8],
-				columns: /*columns*/ ctx[9],
-				gap: /*gap*/ ctx[10],
-				background: /*background*/ ctx[11],
-				$$slots: { default: [create_default_slot_3] },
+				width: /*width*/ ctx[5],
+				height: /*height*/ ctx[6],
+				rows: /*rows*/ ctx[7],
+				columns: /*columns*/ ctx[8],
+				gap: /*gap*/ ctx[9],
+				background: /*background*/ ctx[10],
+				$$slots: { default: [create_default_slot_2] },
 				$$scope: { ctx }
 			}
 		});
@@ -1154,14 +1408,14 @@ function create_default_slot_2(ctx) {
 		},
 		p(ctx, dirty) {
 			const grid_changes = {};
-			if (dirty & /*width*/ 64) grid_changes.width = /*width*/ ctx[6];
-			if (dirty & /*height*/ 128) grid_changes.height = /*height*/ ctx[7];
-			if (dirty & /*rows*/ 256) grid_changes.rows = /*rows*/ ctx[8];
-			if (dirty & /*columns*/ 512) grid_changes.columns = /*columns*/ ctx[9];
-			if (dirty & /*gap*/ 1024) grid_changes.gap = /*gap*/ ctx[10];
-			if (dirty & /*background*/ 2048) grid_changes.background = /*background*/ ctx[11];
-
-			if (dirty & /*$$scope*/ 4194304) {
+			if (dirty & /*width*/ 32) grid_changes.width = /*width*/ ctx[5];
+			if (dirty & /*height*/ 64) grid_changes.height = /*height*/ ctx[6];
+			if (dirty & /*rows*/ 128) grid_changes.rows = /*rows*/ ctx[7];
+			if (dirty & /*columns*/ 256) grid_changes.columns = /*columns*/ ctx[8];
+			if (dirty & /*gap*/ 512) grid_changes.gap = /*gap*/ ctx[9];
+			if (dirty & /*background*/ 1024) grid_changes.background = /*background*/ ctx[10];
+
+			if (dirty & /*$$scope*/ 131072) {
 				grid_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1182,25 +1436,23 @@ function create_default_slot_2(ctx) {
 	};
 }
 
-// (103:2) <Animation {animation}>
-function create_default_slot_1(ctx) {
+// (84:0) <StateItem {path}>
+function create_default_slot(ctx) {
 	let modal;
 	let current;
 
 	modal = new Modal({
 			props: {
-				closable: /*closable*/ ctx[3],
-				closeButtonColor: /*closeButtonColor*/ ctx[4],
-				_closeStyle: /*_closeStyle*/ ctx[5],
-				position: /*_position*/ ctx[13],
-				margin: /*margin*/ ctx[14],
-				_style: /*_modalStyle*/ ctx[2],
-				$$slots: { default: [create_default_slot_2] },
+				closable: /*closable*/ ctx[2],
+				closeButtonColor: /*closeButtonColor*/ ctx[3],
+				_closeStyle: /*_closeStyle*/ ctx[4],
+				_style: /*_modalStyle*/ ctx[1],
+				$$slots: { default: [create_default_slot_1] },
 				$$scope: { ctx }
 			}
 		});
 
-	modal.$on("close", /*close*/ ctx[12]);
+	modal.$on("close", /*close*/ ctx[11]);
 
 	return {
 		c() {
@@ -1212,12 +1464,12 @@ function create_default_slot_1(ctx) {
 		},
 		p(ctx, dirty) {
 			const modal_changes = {};
-			if (dirty & /*closable*/ 8) modal_changes.closable = /*closable*/ ctx[3];
-			if (dirty & /*closeButtonColor*/ 16) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[4];
-			if (dirty & /*_closeStyle*/ 32) modal_changes._closeStyle = /*_closeStyle*/ ctx[5];
-			if (dirty & /*_modalStyle*/ 4) modal_changes._style = /*_modalStyle*/ ctx[2];
+			if (dirty & /*closable*/ 4) modal_changes.closable = /*closable*/ ctx[2];
+			if (dirty & /*closeButtonColor*/ 8) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[3];
+			if (dirty & /*_closeStyle*/ 16) modal_changes._closeStyle = /*_closeStyle*/ ctx[4];
+			if (dirty & /*_modalStyle*/ 2) modal_changes._style = /*_modalStyle*/ ctx[1];
 
-			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 4198336) {
+			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 133088) {
 				modal_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1238,70 +1490,6 @@ function create_default_slot_1(ctx) {
 	};
 }
 
-// (101:0) <StateItem {path}>
-function create_default_slot(ctx) {
-	let backgroundoverray;
-	let t;
-	let animation_1;
-	let current;
-
-	backgroundoverray = new BackgroundOverray({
-			props: {
-				backgroundOverray: /*_backgroundOverray*/ ctx[15]
-			}
-		});
-
-	backgroundoverray.$on("click", /*close*/ ctx[12]);
-
-	animation_1 = new Animation({
-			props: {
-				animation: /*animation*/ ctx[1],
-				$$slots: { default: [create_default_slot_1] },
-				$$scope: { ctx }
-			}
-		});
-
-	return {
-		c() {
-			create_component(backgroundoverray.$$.fragment);
-			t = space();
-			create_component(animation_1.$$.fragment);
-		},
-		m(target, anchor) {
-			mount_component(backgroundoverray, target, anchor);
-			insert(target, t, anchor);
-			mount_component(animation_1, target, anchor);
-			current = true;
-		},
-		p(ctx, dirty) {
-			const animation_1_changes = {};
-			if (dirty & /*animation*/ 2) animation_1_changes.animation = /*animation*/ ctx[1];
-
-			if (dirty & /*$$scope, closable, closeButtonColor, _closeStyle, _modalStyle, width, height, rows, columns, gap, background*/ 4198396) {
-				animation_1_changes.$$scope = { dirty, ctx };
-			}
-
-			animation_1.$set(animation_1_changes);
-		},
-		i(local) {
-			if (current) return;
-			transition_in(backgroundoverray.$$.fragment, local);
-			transition_in(animation_1.$$.fragment, local);
-			current = true;
-		},
-		o(local) {
-			transition_out(backgroundoverray.$$.fragment, local);
-			transition_out(animation_1.$$.fragment, local);
-			current = false;
-		},
-		d(detaching) {
-			destroy_component(backgroundoverray, detaching);
-			if (detaching) detach(t);
-			destroy_component(animation_1, detaching);
-		}
-	};
-}
-
 function create_fragment$6(ctx) {
 	let stateitem;
 	let current;
@@ -1326,7 +1514,7 @@ function create_fragment$6(ctx) {
 			const stateitem_changes = {};
 			if (dirty & /*path*/ 1) stateitem_changes.path = /*path*/ ctx[0];
 
-			if (dirty & /*$$scope, animation, closable, closeButtonColor, _closeStyle, _modalStyle, width, height, rows, columns, gap, background*/ 4198398) {
+			if (dirty & /*$$scope, closable, closeButtonColor, _closeStyle, _modalStyle, width, height, rows, columns, gap, background*/ 133118) {
 				stateitem_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1351,11 +1539,9 @@ function instance$6($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { placement = DefaultModalPlacement } = $$props;
-	let { position = 'center' } = $$props;
 	let { animation = 'none' } = $$props;
 	let { _modalStyle = '' } = $$props;
 	let { closable = true } = $$props;
-	let { backgroundOverray = false } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
 	let { eventName = '' } = $$props;
 	let { eventValue = null } = $$props;
@@ -1373,41 +1559,30 @@ function instance$6($$self, $$props, $$invalidate) {
 	const dispatch = createEventDispatcher();
 
 	const close = () => {
-		if (eventName) {
-			send_event(eventName, eventValue);
-		}
-
 		dispatch('close');
 	};
 
-	const _position = placement.position ?? position;
-	const margin = placement.margin;
-	const _backgroundOverray = placement.backgroundOverlay ?? backgroundOverray;
-
 	$$self.$$set = $$props => {
 		if ('path' in $$props) $$invalidate(0, path = $$props.path);
-		if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
-		if ('position' in $$props) $$invalidate(17, position = $$props.position);
-		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('_modalStyle' in $$props) $$invalidate(2, _modalStyle = $$props._modalStyle);
-		if ('closable' in $$props) $$invalidate(3, closable = $$props.closable);
-		if ('backgroundOverray' in $$props) $$invalidate(18, backgroundOverray = $$props.backgroundOverray);
-		if ('closeButtonColor' in $$props) $$invalidate(4, closeButtonColor = $$props.closeButtonColor);
-		if ('eventName' in $$props) $$invalidate(19, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(20, eventValue = $$props.eventValue);
-		if ('_closeStyle' in $$props) $$invalidate(5, _closeStyle = $$props._closeStyle);
-		if ('width' in $$props) $$invalidate(6, width = $$props.width);
-		if ('height' in $$props) $$invalidate(7, height = $$props.height);
-		if ('rows' in $$props) $$invalidate(8, rows = $$props.rows);
-		if ('columns' in $$props) $$invalidate(9, columns = $$props.columns);
-		if ('gap' in $$props) $$invalidate(10, gap = $$props.gap);
-		if ('background' in $$props) $$invalidate(11, background = $$props.background);
-		if ('$$scope' in $$props) $$invalidate(22, $$scope = $$props.$$scope);
+		if ('placement' in $$props) $$invalidate(12, placement = $$props.placement);
+		if ('animation' in $$props) $$invalidate(13, animation = $$props.animation);
+		if ('_modalStyle' in $$props) $$invalidate(1, _modalStyle = $$props._modalStyle);
+		if ('closable' in $$props) $$invalidate(2, closable = $$props.closable);
+		if ('closeButtonColor' in $$props) $$invalidate(3, closeButtonColor = $$props.closeButtonColor);
+		if ('eventName' in $$props) $$invalidate(14, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(15, eventValue = $$props.eventValue);
+		if ('_closeStyle' in $$props) $$invalidate(4, _closeStyle = $$props._closeStyle);
+		if ('width' in $$props) $$invalidate(5, width = $$props.width);
+		if ('height' in $$props) $$invalidate(6, height = $$props.height);
+		if ('rows' in $$props) $$invalidate(7, rows = $$props.rows);
+		if ('columns' in $$props) $$invalidate(8, columns = $$props.columns);
+		if ('gap' in $$props) $$invalidate(9, gap = $$props.gap);
+		if ('background' in $$props) $$invalidate(10, background = $$props.background);
+		if ('$$scope' in $$props) $$invalidate(17, $$scope = $$props.$$scope);
 	};
 
 	return [
 		path,
-		animation,
 		_modalStyle,
 		closable,
 		closeButtonColor,
@@ -1419,12 +1594,8 @@ function instance$6($$self, $$props, $$invalidate) {
 		gap,
 		background,
 		close,
-		_position,
-		margin,
-		_backgroundOverray,
 		placement,
-		position,
-		backgroundOverray,
+		animation,
 		eventName,
 		eventValue,
 		slots,
@@ -1438,27 +1609,25 @@ class GridModalState extends SvelteComponent {
 
 		init(this, options, instance$6, create_fragment$6, safe_not_equal, {
 			path: 0,
-			placement: 16,
-			position: 17,
-			animation: 1,
-			_modalStyle: 2,
-			closable: 3,
-			backgroundOverray: 18,
-			closeButtonColor: 4,
-			eventName: 19,
-			eventValue: 20,
-			_closeStyle: 5,
-			width: 6,
-			height: 7,
-			rows: 8,
-			columns: 9,
-			gap: 10,
-			background: 11
+			placement: 12,
+			animation: 13,
+			_modalStyle: 1,
+			closable: 2,
+			closeButtonColor: 3,
+			eventName: 14,
+			eventValue: 15,
+			_closeStyle: 4,
+			width: 5,
+			height: 6,
+			rows: 7,
+			columns: 8,
+			gap: 9,
+			background: 10
 		});
 	}
 }
 
-/* src/GridItem.svelte generated by Svelte v3.44.1 */
+/* src/components/GridItem.svelte generated by Svelte v3.44.1 */
 
 function add_css$5(target) {
 	append_styles(target, "svelte-g0rfgr", ".grid-item.svelte-g0rfgr{word-break:break-all}");
@@ -2091,4 +2260,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, TextBlock, TextButtonBlock, closeApp, closed, finalize, getMarginStyle, getPositionStyle, handleFocus, handleKeydown, hasSuffix, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, state, toBr };
+export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, closeApp, closed, collection, createFog, embed, ensureModalRoot, finalize, getMarginStyle, getPositionStyle, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.0.28",
+  "version": "1.0.31",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -43,6 +43,7 @@
     "node-fetch": "2.6.7",
     "picocolors": "^1.0.0",
     "playwright": "^1.23.4",
+    "preact": "10.5.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.7",
     "rollup-plugin-http-resolve": "4.0.1-alpha.0",