@plaidev/karte-action-sdk 1.0.29 → 1.0.32

package/dist/index.es.d.ts

@@ -36,6 +36,7 @@ declare const PropTypes: readonly [
     "Length",
     "Color",
     "Alignment",
+    "State",
     "Style"
 ];
 type PropType = typeof PropTypes[number];
@@ -159,15 +160,15 @@ declare const ModalMarginTranslations: {
     };
 };
 type ModalMargin = {
-    left: string;
-    right: string;
-    top: string;
-    bottom: string;
+    left?: string;
+    right?: string;
+    top?: string;
+    bottom?: string;
 };
 type ModalPlacement = {
-    position: ModalPosition;
-    margin: ModalMargin;
-    backgroundOverlay: boolean;
+    position?: ModalPosition;
+    margin?: ModalMargin;
+    backgroundOverlay?: boolean;
 };
 declare const DefaultModalPlacement: ModalPlacement;
 type LongText = string;
@@ -230,10 +231,54 @@ 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 GridModalState } from './components/GridModalState.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';

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';
 
 /**
@@ -67,7 +67,7 @@ const getPositionStyle = (position) => {
         .trimStart();
 };
 const getMarginStyle = (margin) => {
-    return `margin: ${margin.top} ${margin.right} ${margin.bottom} ${margin.left};`;
+    return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
 };
 function onScroll(fn, rate) {
     const target = document.querySelector('body');
@@ -178,6 +178,7 @@ const PropTypes = [
     'Length',
     'Color',
     'Alignment',
+    'State',
     'Style',
 ];
 const MediaQueries = {
@@ -310,7 +311,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 +496,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 +699,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 +788,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 +873,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;
@@ -715,7 +888,7 @@ function create_if_block(ctx) {
 			svg = svg_element("svg");
 			path = svg_element("path");
 			attr(path, "d", "M5.78516 4.75L8.73828 1.82422C8.90234 1.66016 8.90234 1.35938 8.73828 1.19531L8.05469 0.511719C7.89062 0.347656 7.58984 0.347656 7.42578 0.511719L4.5 3.46484L1.54688 0.511719C1.38281 0.347656 1.08203 0.347656 0.917969 0.511719L0.234375 1.19531C0.0703125 1.35938 0.0703125 1.66016 0.234375 1.82422L3.1875 4.75L0.234375 7.70312C0.0703125 7.86719 0.0703125 8.16797 0.234375 8.33203L0.917969 9.01562C1.08203 9.17969 1.38281 9.17969 1.54688 9.01562L4.5 6.0625L7.42578 9.01562C7.58984 9.17969 7.89062 9.17969 8.05469 9.01562L8.73828 8.33203C8.90234 8.16797 8.90234 7.86719 8.73828 7.70312L5.78516 4.75Z");
-			attr(path, "fill", /*closeButtonColor*/ ctx[1]);
+			attr(path, "fill", /*closeButtonColor*/ ctx[3]);
 			attr(path, "fill-opacity", "0.8");
 			attr(svg, "width", "100%");
 			attr(svg, "height", "100%");
@@ -723,7 +896,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,16 +904,16 @@ 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;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*closeButtonColor*/ 2) {
-				attr(path, "fill", /*closeButtonColor*/ ctx[1]);
+			if (dirty & /*closeButtonColor*/ 8) {
+				attr(path, "fill", /*closeButtonColor*/ ctx[3]);
 			}
 
-			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 +925,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);
+	let if_block = /*closable*/ ctx[2] && create_if_block(ctx);
+	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 +944,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[1] + "");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -783,16 +955,11 @@ 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]) {
-			if (/*closable*/ ctx[0]) {
+		p(ctx, dirty) {
+			if (/*closable*/ ctx[2]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -806,21 +973,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*/ 194 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[7] + " " + /*marginStyle*/ ctx[6] + " " + /*_style*/ ctx[1] + "")) {
 				attr(div, "style", div_style_value);
 			}
 		},
@@ -837,7 +1004,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[0],
+				$$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*/ 1) animation_1_changes.animation = /*animation*/ ctx[0];
+
+			if (dirty & /*$$scope, pos, marginStyle, _style, modal, $maximumZindex, _closeStyle, closeButtonColor, closable*/ 525054) {
+				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,35 +1085,21 @@ 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 { placement = DefaultModalPlacement } = $$props;
+	let { animation = 'none' } = $$props;
+	let { _style = '' } = $$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 { _style = '' } = $$props;
 	let { _closeStyle = '' } = $$props;
 
 	/**
@@ -896,43 +1122,80 @@ 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 ('placement' in $$props) $$invalidate(12, placement = $$props.placement);
+		if ('animation' in $$props) $$invalidate(0, animation = $$props.animation);
+		if ('_style' in $$props) $$invalidate(1, _style = $$props._style);
+		if ('closable' in $$props) $$invalidate(2, closable = $$props.closable);
+		if ('closeButtonColor' in $$props) $$invalidate(3, closeButtonColor = $$props.closeButtonColor);
+		if ('eventName' in $$props) $$invalidate(13, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(14, eventValue = $$props.eventValue);
+		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*/ 4096) {
+			$$invalidate(8, backgroundOverray = placement && placement.backgroundOverlay != null
+			? placement.backgroundOverlay
+			: DefaultModalPlacement.backgroundOverlay);
+		}
+
+		if ($$self.$$.dirty & /*placement*/ 4096) {
+			$$invalidate(16, overwritePosition = isPreview()
+			? 'center'
+			: placement && placement.position != null
+				? placement.position
+				: DefaultModalPlacement.position);
+		}
+
+		if ($$self.$$.dirty & /*placement*/ 4096) {
+			$$invalidate(15, overwriteMargin = isPreview()
+			? {
+					left: '0px',
+					right: '0px',
+					top: '0px',
+					bottom: '0px'
+				}
+			: placement && placement.margin != null
+				? placement.margin
+				: DefaultModalPlacement.margin);
+		}
+
+		if ($$self.$$.dirty & /*overwritePosition*/ 65536) {
+			$$invalidate(7, pos = getPositionStyle(overwritePosition));
+		}
+
+		if ($$self.$$.dirty & /*overwriteMargin*/ 32768) {
+			$$invalidate(6, marginStyle = getMarginStyle(overwriteMargin));
+		}
+	};
 
 	return [
+		animation,
+		_style,
 		closable,
 		closeButtonColor,
-		_style,
 		_closeStyle,
 		modal,
 		marginStyle,
 		pos,
+		backgroundOverray,
 		$maximumZindex,
 		close,
 		handle_keydown,
+		placement,
 		eventName,
 		eventValue,
-		position,
-		margin,
-		$$scope,
+		overwriteMargin,
+		overwritePosition,
 		slots,
-		div_binding
+		div_binding,
+		$$scope
 	];
 }
 
@@ -947,14 +1210,14 @@ class Modal extends SvelteComponent {
 			create_fragment$8,
 			safe_not_equal,
 			{
-				closable: 0,
-				closeButtonColor: 1,
-				eventName: 10,
-				eventValue: 11,
-				position: 12,
-				margin: 13,
-				_style: 2,
-				_closeStyle: 3
+				placement: 12,
+				animation: 0,
+				_style: 1,
+				closable: 2,
+				closeButtonColor: 3,
+				eventName: 13,
+				eventValue: 14,
+				_closeStyle: 4
 			},
 			add_css$6
 		);
@@ -1077,12 +1340,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 +1360,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 +1389,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     {eventName}     {eventValue}     {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[7],
+				height: /*height*/ ctx[8],
+				rows: /*rows*/ ctx[9],
+				columns: /*columns*/ ctx[10],
+				gap: /*gap*/ ctx[11],
+				background: /*background*/ ctx[12],
+				$$slots: { default: [create_default_slot_2] },
 				$$scope: { ctx }
 			}
 		});
@@ -1154,14 +1417,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*/ 128) grid_changes.width = /*width*/ ctx[7];
+			if (dirty & /*height*/ 256) grid_changes.height = /*height*/ ctx[8];
+			if (dirty & /*rows*/ 512) grid_changes.rows = /*rows*/ ctx[9];
+			if (dirty & /*columns*/ 1024) grid_changes.columns = /*columns*/ ctx[10];
+			if (dirty & /*gap*/ 2048) grid_changes.gap = /*gap*/ ctx[11];
+			if (dirty & /*background*/ 4096) grid_changes.background = /*background*/ ctx[12];
+
+			if (dirty & /*$$scope*/ 131072) {
 				grid_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1182,25 +1445,25 @@ 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] },
+				eventName: /*eventName*/ ctx[4],
+				eventValue: /*eventValue*/ ctx[5],
+				closable: /*closable*/ ctx[2],
+				closeButtonColor: /*closeButtonColor*/ ctx[3],
+				_closeStyle: /*_closeStyle*/ ctx[6],
+				_style: /*_modalStyle*/ ctx[1],
+				$$slots: { default: [create_default_slot_1] },
 				$$scope: { ctx }
 			}
 		});
 
-	modal.$on("close", /*close*/ ctx[12]);
+	modal.$on("close", /*close*/ ctx[13]);
 
 	return {
 		c() {
@@ -1212,12 +1475,14 @@ 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 & /*$$scope, width, height, rows, columns, gap, background*/ 4198336) {
+			if (dirty & /*eventName*/ 16) modal_changes.eventName = /*eventName*/ ctx[4];
+			if (dirty & /*eventValue*/ 32) modal_changes.eventValue = /*eventValue*/ ctx[5];
+			if (dirty & /*closable*/ 4) modal_changes.closable = /*closable*/ ctx[2];
+			if (dirty & /*closeButtonColor*/ 8) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[3];
+			if (dirty & /*_closeStyle*/ 64) modal_changes._closeStyle = /*_closeStyle*/ ctx[6];
+			if (dirty & /*_modalStyle*/ 2) modal_changes._style = /*_modalStyle*/ ctx[1];
+
+			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 139136) {
 				modal_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1238,70 +1503,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 +1527,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, eventName, eventValue, closable, closeButtonColor, _closeStyle, _modalStyle, width, height, rows, columns, gap, background*/ 139262) {
 				stateitem_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1351,11 +1552,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,44 +1572,35 @@ 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(14, placement = $$props.placement);
+		if ('animation' in $$props) $$invalidate(15, 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(4, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(5, eventValue = $$props.eventValue);
+		if ('_closeStyle' in $$props) $$invalidate(6, _closeStyle = $$props._closeStyle);
+		if ('width' in $$props) $$invalidate(7, width = $$props.width);
+		if ('height' in $$props) $$invalidate(8, height = $$props.height);
+		if ('rows' in $$props) $$invalidate(9, rows = $$props.rows);
+		if ('columns' in $$props) $$invalidate(10, columns = $$props.columns);
+		if ('gap' in $$props) $$invalidate(11, gap = $$props.gap);
+		if ('background' in $$props) $$invalidate(12, background = $$props.background);
+		if ('$$scope' in $$props) $$invalidate(17, $$scope = $$props.$$scope);
 	};
 
 	return [
 		path,
-		animation,
 		_modalStyle,
 		closable,
 		closeButtonColor,
+		eventName,
+		eventValue,
 		_closeStyle,
 		width,
 		height,
@@ -1419,14 +1609,8 @@ function instance$6($$self, $$props, $$invalidate) {
 		gap,
 		background,
 		close,
-		_position,
-		margin,
-		_backgroundOverray,
 		placement,
-		position,
-		backgroundOverray,
-		eventName,
-		eventValue,
+		animation,
 		slots,
 		$$scope
 	];
@@ -1438,27 +1622,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: 14,
+			animation: 15,
+			_modalStyle: 1,
+			closable: 2,
+			closeButtonColor: 3,
+			eventName: 4,
+			eventValue: 5,
+			_closeStyle: 6,
+			width: 7,
+			height: 8,
+			rows: 9,
+			columns: 10,
+			gap: 11,
+			background: 12
 		});
 	}
 }
 
-/* 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}");
@@ -1916,38 +2098,36 @@ function create_fragment$1(ctx) {
 }
 
 function instance$1($$self, $$props, $$invalidate) {
-	let { text = 'クリック' } = $$props;
+	let { text = 'ボタンラベル' } = $$props;
 
 	/**
  * {
- * "title": {"ja": "クリック", "en": "Click"},
- * "folder": {"ja": "クリック時の動作", "en": "Behavior when clicking"}
+ * "title": {"ja": "イベントタイプ", "en": "Event Type"},
+ * "folder": {"ja": "クリックイベント", "en": "Click Event"}
  * }
  */
 	const dispatch = createEventDispatcher();
 
 	const click = () => {
 		if (eventName) {
-			send_event(eventName, eventValue);
+			send_event(eventName);
 		}
 
 		dispatch('click');
 	};
 
 	let { eventName = '' } = $$props;
-	let { eventValue = null } = $$props;
 	let { _buttonStyle = 'color:#ffffff; font-size:14px; font-weight:bold; justify-content:center; align-items:center; padding:1px 6px 1px 6px;' } = $$props;
 	let { _style = 'background-color: #000000; border-radius:4px;' } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
 		if ('eventName' in $$props) $$invalidate(4, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(5, eventValue = $$props.eventValue);
 		if ('_buttonStyle' in $$props) $$invalidate(1, _buttonStyle = $$props._buttonStyle);
 		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
 	};
 
-	return [text, _buttonStyle, _style, click, eventName, eventValue];
+	return [text, _buttonStyle, _style, click, eventName];
 }
 
 class TextButtonBlock extends SvelteComponent {
@@ -1963,7 +2143,6 @@ class TextButtonBlock extends SvelteComponent {
 			{
 				text: 0,
 				eventName: 4,
-				eventValue: 5,
 				_buttonStyle: 1,
 				_style: 2
 			},
@@ -2036,36 +2215,35 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
-	let { src = '' } = $$props;
-	let { alt = '' } = $$props;
-	let { eventName = '' } = $$props;
-	let { eventValue = null } = $$props;
-	let { _imageStyle = 'object-fit: contain;' } = $$props;
-	let { _style = '' } = $$props;
+	let { src = 'https://admin.karte.io/action-editor2/public/images/no_image_en.svg' } = $$props;
+	let { alt = 'No Image' } = $$props;
 
 	/**
- * {"title": {"ja": "クリック", "en": "Click"}}
+ * {"title": {"ja": "イベントタイプ", "en": "Event Type"}, "folder": {"ja": "クリックイベント", "en": "Click Event"}}
  */
 	const dispatch = createEventDispatcher();
 
 	const click = () => {
 		if (eventName) {
-			send_event(eventName, eventValue);
+			send_event(eventName);
 		}
 
 		dispatch('click');
 	};
 
+	let { eventName = '' } = $$props;
+	let { _imageStyle = 'object-fit: contain;' } = $$props;
+	let { _style = '' } = $$props;
+
 	$$self.$$set = $$props => {
 		if ('src' in $$props) $$invalidate(0, src = $$props.src);
 		if ('alt' in $$props) $$invalidate(1, alt = $$props.alt);
 		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
 		if ('_imageStyle' in $$props) $$invalidate(2, _imageStyle = $$props._imageStyle);
 		if ('_style' in $$props) $$invalidate(3, _style = $$props._style);
 	};
 
-	return [src, alt, _imageStyle, _style, click, eventName, eventValue];
+	return [src, alt, _imageStyle, _style, click, eventName];
 }
 
 class ImageBlock extends SvelteComponent {
@@ -2082,7 +2260,6 @@ class ImageBlock extends SvelteComponent {
 				src: 0,
 				alt: 1,
 				eventName: 5,
-				eventValue: 6,
 				_imageStyle: 2,
 				_style: 3
 			},
@@ -2091,4 +2268,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, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, 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.29",
+  "version": "1.0.32",
   "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",
@@ -74,6 +75,7 @@
     "test:watch": "vitest test",
     "test:ui": "vitest test --ui",
     "test:e2e": "vitest run spec",
+    "test:update": "vitest -u",
     "coverage": "vitest run test --coverage"
   },
   "publishConfig": {