@plaidev/karte-action-sdk 1.0.30 → 1.0.33

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;
@@ -275,12 +276,14 @@ declare const collection: (config: {
     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 './State.svelte';
-export { default as GridModalState } from './GridModalState.svelte';
-export { default as GridItem } from './GridItem.svelte';
+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';
 
 /**
@@ -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 = {
@@ -482,7 +483,7 @@ function request(url, data, cb) {
     xhr.send(JSON.stringify({ ...data }));
 }
 
-/* src/components/Normalize.svelte generated by Svelte v3.44.1 */
+/* 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';");
@@ -495,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;
@@ -698,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)}");
@@ -787,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}");
@@ -872,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;
@@ -887,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%");
@@ -895,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);
@@ -903,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);
 			}
 		},
@@ -924,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() {
@@ -944,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);
@@ -955,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 {
@@ -978,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);
 			}
 		},
@@ -1009,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();
 		}
@@ -1017,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;
 
 	/**
@@ -1068,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
 	];
 }
 
@@ -1119,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
 		);
@@ -1249,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() {
@@ -1269,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
 					);
 				}
@@ -1298,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 }
 			}
 		});
@@ -1326,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 };
 			}
 
@@ -1354,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() {
@@ -1384,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 };
 			}
 
@@ -1410,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;
@@ -1498,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 };
 			}
 
@@ -1523,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;
@@ -1545,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,
@@ -1591,14 +1609,8 @@ function instance$6($$self, $$props, $$invalidate) {
 		gap,
 		background,
 		close,
-		_position,
-		margin,
-		_backgroundOverray,
 		placement,
-		position,
-		backgroundOverray,
-		eventName,
-		eventValue,
+		animation,
 		slots,
 		$$scope
 	];
@@ -1610,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}");
@@ -2088,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 {
@@ -2135,7 +2143,6 @@ class TextButtonBlock extends SvelteComponent {
 			{
 				text: 0,
 				eventName: 4,
-				eventValue: 5,
 				_buttonStyle: 1,
 				_style: 2
 			},
@@ -2208,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 {
@@ -2254,7 +2260,6 @@ class ImageBlock extends SvelteComponent {
 				src: 0,
 				alt: 1,
 				eventName: 5,
-				eventValue: 6,
 				_imageStyle: 2,
 				_style: 3
 			},
@@ -2263,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, 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 };
+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.30",
+  "version": "1.0.33",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -75,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": {