@plaidev/karte-action-sdk 1.0.25 → 1.0.28

package/dist/index.es.d.ts

@@ -140,13 +140,6 @@ declare const ModalPositionTranslations: {
         en: string;
     };
 };
-type ModalMarginSides = "left" | "right" | "top" | "bottom";
-type ModalMargin<T extends ModalMarginSides = ModalMarginSides> = {
-    side: T;
-    length: string;
-};
-type ModalMarginX = ModalMargin<"left" | "right">;
-type ModalMarginY = ModalMargin<"top" | "bottom">;
 declare const ModalMarginTranslations: {
     left: {
         ja: string;
@@ -165,6 +158,18 @@ declare const ModalMarginTranslations: {
         en: string;
     };
 };
+type ModalMargin = {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+type ModalPlacement = {
+    position: ModalPosition;
+    margin: ModalMargin;
+    backgroundOverlay: boolean;
+};
+declare const DefaultModalPlacement: ModalPlacement;
 type LongText = string;
 type Url = string;
 type Image = string;
@@ -204,6 +209,12 @@ declare const Repeats: readonly [
     "no-repeat"
 ];
 type Repeat = typeof Repeats[number];
+declare const BackgroundSizes: readonly [
+    "cover",
+    "contain",
+    "auto"
+];
+type BackgroundSize = typeof BackgroundSizes[number];
 type Style = string;
 type StateName = string;
 declare const handleFocus: (node: HTMLElement | null) => (e: any) => void;
@@ -212,17 +223,20 @@ declare const handleKeydown: (handlers: {
     [eventName: string]: (e: any) => void;
 }) => (e: any) => void;
 declare const getPositionStyle: (position: ModalPosition) => string;
-declare const getMarginStyle: (modalMargins: ModalMargin[]) => string;
+declare const getMarginStyle: (margin: ModalMargin) => string;
 declare function onScroll(fn: Function, rate: number): () => void;
 declare function onTime(fn: Function, time: number): () => void;
 declare function hasSuffix<Suffix extends "px" | "em" | "rem" | "%" | "fr" | "vw" | "vh" | "">(value: string, suffix: Suffix): value is `${number}${Suffix}`;
 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, ModalMargin, ModalMarginX, ModalMarginY, ModalMarginTranslations, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, Style, StateName };
+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';
 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, element, attr, listen, noop, null_to_empty, svg_element, append, binding_callbacks } 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, svg_element, binding_callbacks, src_url_equal } from 'svelte/internal';
 import { createEventDispatcher, onDestroy, onMount, setContext, getContext } from 'svelte';
 
 /**
@@ -66,16 +66,7 @@ const getPositionStyle = (position) => {
     }, '')
         .trimStart();
 };
-const getMarginStyle = (modalMargins) => {
-    const margin = {
-        left: '0',
-        right: '0',
-        top: '0',
-        bottom: '0',
-    };
-    modalMargins.forEach(modalMargin => {
-        margin[modalMargin.side] = modalMargin.length;
-    });
+const getMarginStyle = (margin) => {
     return `margin: ${margin.top} ${margin.right} ${margin.bottom} ${margin.left};`;
 };
 function onScroll(fn, rate) {
@@ -286,44 +277,55 @@ const ModalPositionTranslations = {
 };
 const ModalMarginTranslations = {
     left: {
-        ja: '左からの距離',
+        ja: '左側からの距離',
         en: 'Left',
     },
     right: {
-        ja: '右からの距離',
+        ja: '右側からの距離',
         en: 'Right',
     },
     top: {
-        ja: '上からの距離',
+        ja: '上側からの距離',
         en: 'Top',
     },
     bottom: {
-        ja: '下からの距離',
+        ja: '下側からの距離',
         en: 'Bottom',
     },
 };
+const DefaultModalPlacement = {
+    position: 'center',
+    margin: {
+        left: '0px',
+        right: '0px',
+        top: '0px',
+        bottom: '0px',
+    },
+    backgroundOverlay: true,
+};
 const LengthUnits = ['px', 'em', 'rem', 'vw', 'fr', '%'];
 const Justifies = ['flex-start', 'center', 'flex-end'];
 const Alignments = ['flex-start', 'center', 'flex-end'];
 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 */
 
-function add_css$6(target) {
+function add_css$9(target) {
 	append_styles(target, "svelte-zmz1k7", "@import 'https://cdn.skypack.dev/normalize.css';");
 }
 
 class Normalize extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, null, safe_not_equal, {}, add_css$6);
+		init(this, options, null, null, safe_not_equal, {}, add_css$9);
 	}
 }
 
 /* src/State.svelte generated by Svelte v3.44.1 */
 
-function create_fragment$9(ctx) {
+function create_fragment$c(ctx) {
 	let normalize;
 	let t;
 	let current;
@@ -382,7 +384,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -395,7 +397,7 @@ function instance$9($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$9, create_fragment$9, safe_not_equal, {});
+		init(this, options, instance$c, create_fragment$c, safe_not_equal, {});
 	}
 }
 
@@ -448,7 +450,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$b(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$2(ctx);
@@ -503,7 +505,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -520,13 +522,13 @@ function instance$8($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { path: 0 });
+		init(this, options, instance$b, create_fragment$b, safe_not_equal, { path: 0 });
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.44.1 */
 
-function add_css$5(target) {
+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)}");
 }
 
@@ -558,7 +560,7 @@ function create_if_block$1(ctx) {
 	};
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$a(ctx) {
 	let if_block_anchor;
 	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$1(ctx);
 
@@ -594,7 +596,7 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let { backgroundOverray = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
@@ -609,17 +611,17 @@ function instance$7($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { backgroundOverray: 0 }, add_css$5);
+		init(this, options, instance$a, create_fragment$a, safe_not_equal, { backgroundOverray: 0 }, add_css$8);
 	}
 }
 
 /* src/components/Animation.svelte generated by Svelte v3.44.1 */
 
-function add_css$4(target) {
+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}");
 }
 
-function create_fragment$6(ctx) {
+function create_fragment$9(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[3].default;
@@ -672,7 +674,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { animation = 'none' } = $$props;
 	const overwriteAnimation = isPreview() ? 'none' : animation;
@@ -688,17 +690,17 @@ function instance$6($$self, $$props, $$invalidate) {
 class Animation extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { animation: 1 }, add_css$4);
+		init(this, options, instance$9, create_fragment$9, safe_not_equal, { animation: 1 }, add_css$7);
 	}
 }
 
 /* src/components/Modal.svelte generated by Svelte v3.44.1 */
 
-function add_css$3(target) {
+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)}");
 }
 
-// (82:2) {#if closable}
+// (79:2) {#if closable}
 function create_if_block(ctx) {
 	let button;
 	let svg;
@@ -750,7 +752,7 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$5(ctx) {
+function create_fragment$8(ctx) {
 	let div;
 	let t;
 	let div_style_value;
@@ -758,8 +760,8 @@ function create_fragment$5(ctx) {
 	let mounted;
 	let dispose;
 	let if_block = /*closable*/ ctx[0] && create_if_block(ctx);
-	const default_slot_template = /*#slots*/ ctx[16].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[15], null);
+	const default_slot_template = /*#slots*/ ctx[15].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[14], null);
 
 	return {
 		c() {
@@ -770,7 +772,7 @@ function create_fragment$5(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] + " " + /*margin*/ ctx[5] + " " + /*_style*/ ctx[2] + "");
+			attr(div, "style", div_style_value = "" + /*pos*/ ctx[6] + " " + /*marginStyle*/ ctx[5] + " " + /*_style*/ ctx[2] + "");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -781,7 +783,7 @@ function create_fragment$5(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[17](div);
+			/*div_binding*/ ctx[16](div);
 			current = true;
 
 			if (!mounted) {
@@ -804,21 +806,21 @@ function create_fragment$5(ctx) {
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 32768)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 16384)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[15],
+						/*$$scope*/ ctx[14],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[15])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[15], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[14])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[14], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*pos, margin, _style*/ 100 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[6] + " " + /*margin*/ ctx[5] + " " + /*_style*/ ctx[2] + "")) {
+			if (!current || dirty & /*pos, marginStyle, _style*/ 100 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[6] + " " + /*marginStyle*/ ctx[5] + " " + /*_style*/ ctx[2] + "")) {
 				attr(div, "style", div_style_value);
 			}
 		},
@@ -835,16 +837,16 @@ function create_fragment$5(ctx) {
 			if (detaching) detach(div);
 			if (if_block) if_block.d();
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[17](null);
+			/*div_binding*/ ctx[16](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let pos;
-	let margin;
+	let marginStyle;
 	let $maximumZindex;
 	component_subscribe($$self, maximumZindex, $$value => $$invalidate(7, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -854,8 +856,23 @@ function instance$5($$self, $$props, $$invalidate) {
 	let { eventValue = null } = $$props;
 	let { position = 'center' } = $$props;
 	const overwritePosition = isPreview() ? 'center' : position;
-	let { modalMarginX = { side: 'left', length: '0' } } = $$props;
-	let { modalMarginY = { side: 'top', length: '0' } } = $$props;
+
+	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;
 
@@ -889,20 +906,14 @@ function instance$5($$self, $$props, $$invalidate) {
 		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 ('modalMarginX' in $$props) $$invalidate(13, modalMarginX = $$props.modalMarginX);
-		if ('modalMarginY' in $$props) $$invalidate(14, modalMarginY = $$props.modalMarginY);
+		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(15, $$scope = $$props.$$scope);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*modalMarginX, modalMarginY*/ 24576) {
-			$$invalidate(5, margin = getMarginStyle([modalMarginX, modalMarginY]));
-		}
+		if ('$$scope' in $$props) $$invalidate(14, $$scope = $$props.$$scope);
 	};
 
 	$$invalidate(6, pos = getPositionStyle(overwritePosition));
+	$$invalidate(5, marginStyle = getMarginStyle(overwriteMargin));
 
 	return [
 		closable,
@@ -910,7 +921,7 @@ function instance$5($$self, $$props, $$invalidate) {
 		_style,
 		_closeStyle,
 		modal,
-		margin,
+		marginStyle,
 		pos,
 		$maximumZindex,
 		close,
@@ -918,8 +929,7 @@ function instance$5($$self, $$props, $$invalidate) {
 		eventName,
 		eventValue,
 		position,
-		modalMarginX,
-		modalMarginY,
+		margin,
 		$$scope,
 		slots,
 		div_binding
@@ -933,8 +943,8 @@ class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$5,
-			create_fragment$5,
+			instance$8,
+			create_fragment$8,
 			safe_not_equal,
 			{
 				closable: 0,
@@ -942,19 +952,18 @@ class Modal extends SvelteComponent {
 				eventName: 10,
 				eventValue: 11,
 				position: 12,
-				modalMarginX: 13,
-				modalMarginY: 14,
+				margin: 13,
 				_style: 2,
 				_closeStyle: 3
 			},
-			add_css$3
+			add_css$6
 		);
 	}
 }
 
 /* src/components/Grid.svelte generated by Svelte v3.44.1 */
 
-function create_fragment$4(ctx) {
+function create_fragment$7(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -1012,7 +1021,7 @@ function create_fragment$4(ctx) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -1057,7 +1066,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$4, create_fragment$4, safe_not_equal, {
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -1072,8 +1081,8 @@ class Grid extends SvelteComponent {
 
 function create_default_slot_3(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[19].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], null);
+	const default_slot_template = /*#slots*/ ctx[21].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
 
 	return {
 		c() {
@@ -1088,15 +1097,15 @@ function create_default_slot_3(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 1048576)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 4194304)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[20],
+						/*$$scope*/ ctx[22],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[20], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
 						null
 					);
 				}
@@ -1117,19 +1126,19 @@ function create_default_slot_3(ctx) {
 	};
 }
 
-// (104:4) <Modal       {closable}       {closeButtonColor}       {_closeStyle}       {position}       {modalMarginX}       {modalMarginY}       _style={_modalStyle}       on:close={close}     >
+// (104:4) <Modal       {closable}       {closeButtonColor}       {_closeStyle}       position={_position}       {margin}       _style={_modalStyle}       on:close={close}     >
 function create_default_slot_2(ctx) {
 	let grid;
 	let current;
 
 	grid = new Grid({
 			props: {
-				width: /*width*/ ctx[10],
-				height: /*height*/ ctx[11],
-				rows: /*rows*/ ctx[12],
-				columns: /*columns*/ ctx[13],
-				gap: /*gap*/ ctx[14],
-				background: /*background*/ ctx[15],
+				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] },
 				$$scope: { ctx }
 			}
@@ -1145,14 +1154,14 @@ function create_default_slot_2(ctx) {
 		},
 		p(ctx, dirty) {
 			const grid_changes = {};
-			if (dirty & /*width*/ 1024) grid_changes.width = /*width*/ ctx[10];
-			if (dirty & /*height*/ 2048) grid_changes.height = /*height*/ ctx[11];
-			if (dirty & /*rows*/ 4096) grid_changes.rows = /*rows*/ ctx[12];
-			if (dirty & /*columns*/ 8192) grid_changes.columns = /*columns*/ ctx[13];
-			if (dirty & /*gap*/ 16384) grid_changes.gap = /*gap*/ ctx[14];
-			if (dirty & /*background*/ 32768) grid_changes.background = /*background*/ ctx[15];
-
-			if (dirty & /*$$scope*/ 1048576) {
+			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) {
 				grid_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1180,19 +1189,18 @@ function create_default_slot_1(ctx) {
 
 	modal = new Modal({
 			props: {
-				closable: /*closable*/ ctx[6],
-				closeButtonColor: /*closeButtonColor*/ ctx[8],
-				_closeStyle: /*_closeStyle*/ ctx[9],
-				position: /*position*/ ctx[1],
-				modalMarginX: /*modalMarginX*/ ctx[2],
-				modalMarginY: /*modalMarginY*/ ctx[3],
-				_style: /*_modalStyle*/ ctx[5],
+				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] },
 				$$scope: { ctx }
 			}
 		});
 
-	modal.$on("close", /*close*/ ctx[16]);
+	modal.$on("close", /*close*/ ctx[12]);
 
 	return {
 		c() {
@@ -1204,15 +1212,12 @@ function create_default_slot_1(ctx) {
 		},
 		p(ctx, dirty) {
 			const modal_changes = {};
-			if (dirty & /*closable*/ 64) modal_changes.closable = /*closable*/ ctx[6];
-			if (dirty & /*closeButtonColor*/ 256) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[8];
-			if (dirty & /*_closeStyle*/ 512) modal_changes._closeStyle = /*_closeStyle*/ ctx[9];
-			if (dirty & /*position*/ 2) modal_changes.position = /*position*/ ctx[1];
-			if (dirty & /*modalMarginX*/ 4) modal_changes.modalMarginX = /*modalMarginX*/ ctx[2];
-			if (dirty & /*modalMarginY*/ 8) modal_changes.modalMarginY = /*modalMarginY*/ ctx[3];
-			if (dirty & /*_modalStyle*/ 32) modal_changes._style = /*_modalStyle*/ ctx[5];
-
-			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 1113088) {
+			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) {
 				modal_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1242,15 +1247,15 @@ function create_default_slot(ctx) {
 
 	backgroundoverray = new BackgroundOverray({
 			props: {
-				backgroundOverray: /*backgroundOverray*/ ctx[7]
+				backgroundOverray: /*_backgroundOverray*/ ctx[15]
 			}
 		});
 
-	backgroundoverray.$on("click", /*close*/ ctx[16]);
+	backgroundoverray.$on("click", /*close*/ ctx[12]);
 
 	animation_1 = new Animation({
 			props: {
-				animation: /*animation*/ ctx[4],
+				animation: /*animation*/ ctx[1],
 				$$slots: { default: [create_default_slot_1] },
 				$$scope: { ctx }
 			}
@@ -1269,13 +1274,10 @@ function create_default_slot(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const backgroundoverray_changes = {};
-			if (dirty & /*backgroundOverray*/ 128) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[7];
-			backgroundoverray.$set(backgroundoverray_changes);
 			const animation_1_changes = {};
-			if (dirty & /*animation*/ 16) animation_1_changes.animation = /*animation*/ ctx[4];
+			if (dirty & /*animation*/ 2) animation_1_changes.animation = /*animation*/ ctx[1];
 
-			if (dirty & /*$$scope, closable, closeButtonColor, _closeStyle, position, modalMarginX, modalMarginY, _modalStyle, width, height, rows, columns, gap, background*/ 1113966) {
+			if (dirty & /*$$scope, closable, closeButtonColor, _closeStyle, _modalStyle, width, height, rows, columns, gap, background*/ 4198396) {
 				animation_1_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1300,7 +1302,7 @@ function create_default_slot(ctx) {
 	};
 }
 
-function create_fragment$3(ctx) {
+function create_fragment$6(ctx) {
 	let stateitem;
 	let current;
 
@@ -1324,7 +1326,7 @@ function create_fragment$3(ctx) {
 			const stateitem_changes = {};
 			if (dirty & /*path*/ 1) stateitem_changes.path = /*path*/ ctx[0];
 
-			if (dirty & /*$$scope, animation, closable, closeButtonColor, _closeStyle, position, modalMarginX, modalMarginY, _modalStyle, width, height, rows, columns, gap, background, backgroundOverray*/ 1114110) {
+			if (dirty & /*$$scope, animation, closable, closeButtonColor, _closeStyle, _modalStyle, width, height, rows, columns, gap, background*/ 4198398) {
 				stateitem_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1345,12 +1347,11 @@ function create_fragment$3(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
+	let { placement = DefaultModalPlacement } = $$props;
 	let { position = 'center' } = $$props;
-	let { modalMarginX = { side: 'left', length: '0' } } = $$props;
-	let { modalMarginY = { side: 'top', length: '0' } } = $$props;
 	let { animation = 'none' } = $$props;
 	let { _modalStyle = '' } = $$props;
 	let { closable = true } = $$props;
@@ -1379,37 +1380,36 @@ function instance$3($$self, $$props, $$invalidate) {
 		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 ('position' in $$props) $$invalidate(1, position = $$props.position);
-		if ('modalMarginX' in $$props) $$invalidate(2, modalMarginX = $$props.modalMarginX);
-		if ('modalMarginY' in $$props) $$invalidate(3, modalMarginY = $$props.modalMarginY);
-		if ('animation' in $$props) $$invalidate(4, animation = $$props.animation);
-		if ('_modalStyle' in $$props) $$invalidate(5, _modalStyle = $$props._modalStyle);
-		if ('closable' in $$props) $$invalidate(6, closable = $$props.closable);
-		if ('backgroundOverray' in $$props) $$invalidate(7, backgroundOverray = $$props.backgroundOverray);
-		if ('closeButtonColor' in $$props) $$invalidate(8, closeButtonColor = $$props.closeButtonColor);
-		if ('eventName' in $$props) $$invalidate(17, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(18, eventValue = $$props.eventValue);
-		if ('_closeStyle' in $$props) $$invalidate(9, _closeStyle = $$props._closeStyle);
-		if ('width' in $$props) $$invalidate(10, width = $$props.width);
-		if ('height' in $$props) $$invalidate(11, height = $$props.height);
-		if ('rows' in $$props) $$invalidate(12, rows = $$props.rows);
-		if ('columns' in $$props) $$invalidate(13, columns = $$props.columns);
-		if ('gap' in $$props) $$invalidate(14, gap = $$props.gap);
-		if ('background' in $$props) $$invalidate(15, background = $$props.background);
-		if ('$$scope' in $$props) $$invalidate(20, $$scope = $$props.$$scope);
+		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);
 	};
 
 	return [
 		path,
-		position,
-		modalMarginX,
-		modalMarginY,
 		animation,
 		_modalStyle,
 		closable,
-		backgroundOverray,
 		closeButtonColor,
 		_closeStyle,
 		width,
@@ -1419,6 +1419,12 @@ function instance$3($$self, $$props, $$invalidate) {
 		gap,
 		background,
 		close,
+		_position,
+		margin,
+		_backgroundOverray,
+		placement,
+		position,
+		backgroundOverray,
 		eventName,
 		eventValue,
 		slots,
@@ -1430,36 +1436,35 @@ class GridModalState extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, {
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, {
 			path: 0,
-			position: 1,
-			modalMarginX: 2,
-			modalMarginY: 3,
-			animation: 4,
-			_modalStyle: 5,
-			closable: 6,
-			backgroundOverray: 7,
-			closeButtonColor: 8,
-			eventName: 17,
-			eventValue: 18,
-			_closeStyle: 9,
-			width: 10,
-			height: 11,
-			rows: 12,
-			columns: 13,
-			gap: 14,
-			background: 15
+			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
 		});
 	}
 }
 
 /* src/GridItem.svelte generated by Svelte v3.44.1 */
 
-function add_css$2(target) {
+function add_css$5(target) {
 	append_styles(target, "svelte-g0rfgr", ".grid-item.svelte-g0rfgr{word-break:break-all}");
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$5(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -1517,7 +1522,7 @@ function create_fragment$2(ctx) {
 	};
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -1563,8 +1568,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$2,
-			create_fragment$2,
+			instance$5,
+			create_fragment$5,
 			safe_not_equal,
 			{
 				x1: 1,
@@ -1574,18 +1579,18 @@ class GridItem extends SvelteComponent {
 				z: 5,
 				background: 6
 			},
-			add_css$2
+			add_css$5
 		);
 	}
 }
 
 /* src/components/Flex.svelte generated by Svelte v3.44.1 */
 
-function add_css$1(target) {
+function add_css$4(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
 
-function create_fragment$1(ctx) {
+function create_fragment$4(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -1650,7 +1655,7 @@ function getFlexContext() {
 	return getContext(FlexContextKey);
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'row' } = $$props;
 	let { width = '100%' } = $$props;
@@ -1676,8 +1681,8 @@ class Flex extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$1,
-			create_fragment$1,
+			instance$4,
+			create_fragment$4,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -1685,18 +1690,18 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$1
+			add_css$4
 		);
 	}
 }
 
 /* src/components/FlexItem.svelte generated by Svelte v3.44.1 */
 
-function add_css(target) {
+function add_css$3(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
 
-function create_fragment(ctx) {
+function create_fragment$3(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
@@ -1754,7 +1759,7 @@ function create_fragment(ctx) {
 	};
 }
 
-function instance($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = '' } = $$props;
@@ -1797,8 +1802,293 @@ function instance($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { length: 1, _style: 2 }, add_css);
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { length: 1, _style: 2 }, add_css$3);
+	}
+}
+
+/* src/components/TextBlock.svelte generated by Svelte v3.44.1 */
+
+function add_css$2(target) {
+	append_styles(target, "svelte-1xf20ux", ".text-block.svelte-1xf20ux{display:flex;width:100%;height:100%;box-sizing:border-box}.text-block-inner.svelte-1xf20ux{width:100%}");
+}
+
+function create_fragment$2(ctx) {
+	let div1;
+	let div0;
+	let raw_value = toBr(/*text*/ ctx[0]) + "";
+
+	return {
+		c() {
+			div1 = element("div");
+			div0 = element("div");
+			attr(div0, "class", "text-block-inner svelte-1xf20ux");
+			attr(div1, "class", "text-block svelte-1xf20ux");
+			attr(div1, "style", /*_style*/ ctx[1]);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+			div0.innerHTML = raw_value;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*text*/ 1 && raw_value !== (raw_value = toBr(/*text*/ ctx[0]) + "")) div0.innerHTML = raw_value;
+			if (dirty & /*_style*/ 2) {
+				attr(div1, "style", /*_style*/ ctx[1]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+		}
+	};
+}
+
+function instance$2($$self, $$props, $$invalidate) {
+	let { text = 'サンプルSample' } = $$props;
+	let { _style = 'font-size:12px;' } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('text' in $$props) $$invalidate(0, text = $$props.text);
+		if ('_style' in $$props) $$invalidate(1, _style = $$props._style);
+	};
+
+	return [text, _style];
+}
+
+class TextBlock extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$2, create_fragment$2, safe_not_equal, { text: 0, _style: 1 }, add_css$2);
+	}
+}
+
+/* src/components/TextButtonBlock.svelte generated by Svelte v3.44.1 */
+
+function add_css$1(target) {
+	append_styles(target, "svelte-1t5i3za", ".text-button-block.svelte-1t5i3za{width:100%;height:100%}.text-button.svelte-1t5i3za{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s}.text-button.svelte-1t5i3za:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-1t5i3za:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
+}
+
+function create_fragment$1(ctx) {
+	let div;
+	let button;
+	let raw_value = toBr(/*text*/ ctx[0]) + "";
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div = element("div");
+			button = element("button");
+			attr(button, "class", "text-button svelte-1t5i3za");
+			attr(button, "style", /*_buttonStyle*/ ctx[1]);
+			attr(div, "class", "text-button-block svelte-1t5i3za");
+			attr(div, "style", /*_style*/ ctx[2]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, button);
+			button.innerHTML = raw_value;
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*click*/ ctx[3]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*text*/ 1 && raw_value !== (raw_value = toBr(/*text*/ ctx[0]) + "")) button.innerHTML = raw_value;
+			if (dirty & /*_buttonStyle*/ 2) {
+				attr(button, "style", /*_buttonStyle*/ ctx[1]);
+			}
+
+			if (dirty & /*_style*/ 4) {
+				attr(div, "style", /*_style*/ ctx[2]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$1($$self, $$props, $$invalidate) {
+	let { text = 'クリック' } = $$props;
+
+	/**
+ * {
+ * "title": {"ja": "クリック", "en": "Click"},
+ * "folder": {"ja": "クリック時の動作", "en": "Behavior when clicking"}
+ * }
+ */
+	const dispatch = createEventDispatcher();
+
+	const click = () => {
+		if (eventName) {
+			send_event(eventName, eventValue);
+		}
+
+		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];
+}
+
+class TextButtonBlock extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance$1,
+			create_fragment$1,
+			safe_not_equal,
+			{
+				text: 0,
+				eventName: 4,
+				eventValue: 5,
+				_buttonStyle: 1,
+				_style: 2
+			},
+			add_css$1
+		);
+	}
+}
+
+/* src/components/ImageBlock.svelte generated by Svelte v3.44.1 */
+
+function add_css(target) {
+	append_styles(target, "svelte-95tcq4", ".image-block.svelte-95tcq4{display:flex;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;overflow:hidden;box-sizing:border-box}.image.svelte-95tcq4{width:100%;height:100%}");
+}
+
+function create_fragment(ctx) {
+	let div;
+	let img;
+	let img_src_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div = element("div");
+			img = element("img");
+			attr(img, "class", "image svelte-95tcq4");
+			attr(img, "loading", "lazy");
+			attr(img, "width", "auto");
+			attr(img, "height", "auto");
+			attr(img, "style", /*_imageStyle*/ ctx[2]);
+			if (!src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) attr(img, "src", img_src_value);
+			attr(img, "alt", /*alt*/ ctx[1]);
+			attr(div, "class", "image-block svelte-95tcq4");
+			attr(div, "style", /*_style*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, img);
+
+			if (!mounted) {
+				dispose = listen(div, "click", /*click*/ ctx[4]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*_imageStyle*/ 4) {
+				attr(img, "style", /*_imageStyle*/ ctx[2]);
+			}
+
+			if (dirty & /*src*/ 1 && !src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) {
+				attr(img, "src", img_src_value);
+			}
+
+			if (dirty & /*alt*/ 2) {
+				attr(img, "alt", /*alt*/ ctx[1]);
+			}
+
+			if (dirty & /*_style*/ 8) {
+				attr(div, "style", /*_style*/ ctx[3]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+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;
+
+	/**
+ * {"title": {"ja": "クリック", "en": "Click"}}
+ */
+	const dispatch = createEventDispatcher();
+
+	const click = () => {
+		if (eventName) {
+			send_event(eventName, eventValue);
+		}
+
+		dispatch('click');
+	};
+
+	$$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];
+}
+
+class ImageBlock extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				src: 0,
+				alt: 1,
+				eventName: 5,
+				eventValue: 6,
+				_imageStyle: 2,
+				_style: 3
+			},
+			add_css
+		);
 	}
 }
 
-export { Alignments, AnimationStyleTranslations, AnimationStyles, Directions, Flex, FlexItem, GridItem, GridModalState, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, 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, finalize, getMarginStyle, getPositionStyle, handleFocus, handleKeydown, hasSuffix, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, state, toBr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.0.25",
+  "version": "1.0.28",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -23,7 +23,9 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@plaidev/action-compiler": "^0.4.178",
+    "@plaidev/action-compiler": "^0.4.180",
+    "@plaidev/sender-types": "^0.4.140",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -31,17 +33,26 @@
     "@sveltejs/vite-plugin-svelte": "1.0.0-next.37",
     "@testing-library/svelte": "^3.1.3",
     "@tsconfig/svelte": "^2.0.1",
+    "@types/serve-static": "^1.13.10",
     "@vitest/ui": "latest",
+    "c8": "^7.12.0",
     "happy-dom": "^6.0.3",
-    "jiti": "1.14.0",
+    "isomorphic-fetch": "3.0.0",
+    "jiti": "^1.14.0",
+    "listhen": "^0.2.13",
     "node-fetch": "2.6.7",
+    "picocolors": "^1.0.0",
+    "playwright": "^1.23.4",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.7",
     "rollup-plugin-http-resolve": "4.0.1-alpha.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-serve": "^2.0.0",
     "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "^2.0.7",
+    "serve": "^14.0.1",
+    "serve-static": "^1.15.0",
     "svelte": "3.44.1",
     "svelte-check": "^2.2.7",
     "svelte-preprocess": "4.9.8",
@@ -51,13 +62,19 @@
   },
   "scripts": {
     "dev": "jiti ./scripts/preview.ts",
+    "setup:default": "jiti ./scripts/default.ts",
+    "setup:template": "jiti ./scripts/template.ts",
+    "setup:concat": "jiti ./scripts/concat.ts",
+    "setup:compile": "jiti ./scripts/compile.ts",
+    "prepare": "npm run setup:default && npm run setup:template && npm run setup:concat",
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage"
+    "test": "vitest run test",
+    "test:watch": "vitest test",
+    "test:ui": "vitest test --ui",
+    "test:e2e": "vitest run spec",
+    "coverage": "vitest run test --coverage"
   },
   "publishConfig": {
     "access": "public"