npm - @plaidev/karte-action-sdk - Versions diffs - 1.1.242-28715754.d90c0be3 → 1.1.242-28726540.145cfb7c - Mend

@plaidev/karte-action-sdk 1.1.242-28715754.d90c0be3 → 1.1.242-28726540.145cfb7c

Files changed (5) hide show

package/dist/hydrate/index.es.d.ts +16 -1
package/dist/hydrate/index.es.js +1139 -502
package/dist/index.es.d.ts +16 -1
package/dist/index.es.js +986 -413
package/package.json +1 -1

package/dist/hydrate/index.es.js CHANGED Viewed

@@ -2843,7 +2843,7 @@ const LAYOUT_COMPONENT_NAMES = [
 /* src/components/Header.svelte generated by Svelte v3.53.1 */
-function create_if_block$f(ctx) {
+function create_if_block$g(ctx) {
 	let link;
 	return {
@@ -2874,9 +2874,9 @@ function create_if_block$f(ctx) {
 	};
 }
-function create_fragment$1a(ctx) {
+function create_fragment$1b(ctx) {
 	let head;
-	let if_block = /*googleFontUrl*/ ctx[0] && create_if_block$f(ctx);
+	let if_block = /*googleFontUrl*/ ctx[0] && create_if_block$g(ctx);
 	return {
 		c() {
@@ -2898,7 +2898,7 @@ function create_fragment$1a(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$f(ctx);
+					if_block = create_if_block$g(ctx);
 					if_block.c();
 					if_block.m(head, null);
 				}
@@ -2916,7 +2916,7 @@ function create_fragment$1a(ctx) {
 	};
 }
-function instance$1a($$self, $$props, $$invalidate) {
+function instance$1b($$self, $$props, $$invalidate) {
 	let $fonts;
 	component_subscribe($$self, fonts, $$value => $$invalidate(1, $fonts = $$value));
 	let googleFontUrl = '';
@@ -2946,13 +2946,13 @@ function instance$1a($$self, $$props, $$invalidate) {
 class Header extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1a, create_fragment$1a, safe_not_equal, {});
+		init(this, options, instance$1b, create_fragment$1b, safe_not_equal, {});
 	}
 }
 /* src/components/State.svelte generated by Svelte v3.53.1 */
-function create_fragment$19(ctx) {
+function create_fragment$1a(ctx) {
 	let header;
 	let t;
 	let current;
@@ -3016,7 +3016,7 @@ function create_fragment$19(ctx) {
 	};
 }
-function instance$19($$self, $$props, $$invalidate) {
+function instance$1a($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	$$self.$$set = $$props => {
@@ -3029,18 +3029,18 @@ function instance$19($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$19, create_fragment$19, safe_not_equal, {});
+		init(this, options, instance$1a, create_fragment$1a, safe_not_equal, {});
 	}
 }
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
-function add_css$F(target) {
+function add_css$G(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 // (23:0) {#if $state === path}
-function create_if_block$e(ctx) {
+function create_if_block$f(ctx) {
 	let div;
 	let t;
 	let current;
@@ -3112,10 +3112,10 @@ function create_if_block$e(ctx) {
 	};
 }
-function create_fragment$18(ctx) {
+function create_fragment$19(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$e(ctx);
+	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$f(ctx);
 	return {
 		c() {
@@ -3140,7 +3140,7 @@ function create_fragment$18(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$e(ctx);
+					if_block = create_if_block$f(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -3177,7 +3177,7 @@ function getStateItemContext() {
 	return getContext(STATE_ITEM_CONTEXT_KEY);
 }
-function instance$18($$self, $$props, $$invalidate) {
+function instance$19($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -3203,7 +3203,7 @@ function instance$18($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$18, create_fragment$18, safe_not_equal, { path: 0 }, add_css$F);
+		init(this, options, instance$19, create_fragment$19, safe_not_equal, { path: 0 }, add_css$G);
 	}
 }
@@ -3329,12 +3329,12 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
-function add_css$E(target) {
+function add_css$F(target) {
 	append_styles(target, "svelte-1d4fta", ".background.svelte-1d4fta{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
 // (14:0) {#if backgroundOverlay}
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
 	let div;
 	let div_class_value;
 	let mounted;
@@ -3374,9 +3374,9 @@ function create_if_block$d(ctx) {
 	};
 }
-function create_fragment$17(ctx) {
+function create_fragment$18(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverlay*/ ctx[0] && create_if_block$d(ctx);
+	let if_block = /*backgroundOverlay*/ ctx[0] && create_if_block$e(ctx);
 	return {
 		c() {
@@ -3396,7 +3396,7 @@ function create_fragment$17(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$d(ctx);
+					if_block = create_if_block$e(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -3414,7 +3414,7 @@ function create_fragment$17(ctx) {
 	};
 }
-function instance$17($$self, $$props, $$invalidate) {
+function instance$18($$self, $$props, $$invalidate) {
 	let { backgroundOverlay = false } = $$props;
 	let { class: className = undefined } = $$props;
 	const dispatch = createEventDispatcher();
@@ -3431,7 +3431,7 @@ function instance$17($$self, $$props, $$invalidate) {
 let BackgroundOverlay$1 = class BackgroundOverlay extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$17, create_fragment$17, safe_not_equal, { backgroundOverlay: 0, class: 1 }, add_css$E);
+		init(this, options, instance$18, create_fragment$18, safe_not_equal, { backgroundOverlay: 0, class: 1 }, add_css$F);
 	}
 };
@@ -3471,12 +3471,12 @@ function checkStopPropagation(eventName, handler) {
 /* src/components/Button.svelte generated by Svelte v3.53.1 */
-function add_css$D(target) {
+function add_css$E(target) {
 	append_styles(target, "svelte-15k4deh", ".button.svelte-15k4deh{display:block;text-decoration:none;color:inherit;border:none;background:none;margin:0;padding:0}.button.svelte-15k4deh:link,.button.svelte-15k4deh:visited,.button.svelte-15k4deh:active,.button.svelte-15k4deh:hover{color:inherit}");
 }
 // (50:0) {:else}
-function create_else_block$5(ctx) {
+function create_else_block$6(ctx) {
 	let button;
 	let current;
 	let mounted;
@@ -3640,7 +3640,7 @@ function create_if_block_2$2(ctx) {
 }
 // (35:41)
-function create_if_block_1$3(ctx) {
+function create_if_block_1$4(ctx) {
 	let a;
 	let a_href_value;
 	let a_target_value;
@@ -3754,7 +3754,7 @@ function create_if_block_1$3(ctx) {
 }
 // (31:0) {#if disabled}
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[9].default;
@@ -3822,12 +3822,12 @@ function create_if_block$c(ctx) {
 	};
 }
-function create_fragment$16(ctx) {
+function create_fragment$17(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$c, create_if_block_1$3, create_if_block_2$2, create_else_block$5];
+	const if_block_creators = [create_if_block$d, create_if_block_1$4, create_if_block_2$2, create_else_block$6];
 	const if_blocks = [];
 	function select_block_type(ctx, dirty) {
@@ -3899,7 +3899,7 @@ function create_fragment$16(ctx) {
 const BUTTON_CLASS = 'button';
-function instance$16($$self, $$props, $$invalidate) {
+function instance$17($$self, $$props, $$invalidate) {
 	let disabled;
 	let $valuesAreValid;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -3965,8 +3965,8 @@ let Button$1 = class Button extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$16,
-			create_fragment$16,
+			instance$17,
+			create_fragment$17,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -3974,19 +3974,19 @@ let Button$1 = class Button extends SvelteComponent {
 				eventValue: 6,
 				style: 1
 			},
-			add_css$D
+			add_css$E
 		);
 	}
 };
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
-function add_css$C(target) {
+function add_css$D(target) {
 	append_styles(target, "svelte-1ijkyzl", ".modal.svelte-1ijkyzl{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1ijkyzl > .button{flex:auto;display:flex}.close.svelte-1ijkyzl{position:absolute;top:0;right:0}.close.svelte-1ijkyzl > .button{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-1ijkyzl > .button:hover{transform:rotate(90deg)}.modal-content.svelte-1ijkyzl{flex:auto;display:flex;justify-content:center;align-items:center;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}@media screen and (min-width: 641px){.modal-bp.svelte-1ijkyzl{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-1ijkyzl{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 // (277:0) {:else}
-function create_else_block$4(ctx) {
+function create_else_block$5(ctx) {
 	let backgroundoverlay;
 	let current;
@@ -4120,7 +4120,7 @@ function create_if_block_2$1(ctx) {
 }
 // (280:0) {#if visible}
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
 	let div;
 	let button;
 	let div_class_value;
@@ -4132,7 +4132,7 @@ function create_if_block$b(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				eventName: /*clickEventName*/ ctx[1],
 				eventValue: /*clickEventValue*/ ctx[2],
-				$$slots: { default: [create_default_slot$6] },
+				$$slots: { default: [create_default_slot$b] },
 				$$scope: { ctx }
 			}
 		});
@@ -4215,7 +4215,7 @@ function create_if_block$b(ctx) {
 }
 // (293:6) {#if closable}
-function create_if_block_1$2(ctx) {
+function create_if_block_1$3(ctx) {
 	let div;
 	let button;
 	let current;
@@ -4344,11 +4344,11 @@ function create_default_slot_1$1(ctx) {
 }
 // (292:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
-function create_default_slot$6(ctx) {
+function create_default_slot$b(ctx) {
 	let t;
 	let div;
 	let current;
-	let if_block = /*closable*/ ctx[21] && create_if_block_1$2(ctx);
+	let if_block = /*closable*/ ctx[21] && create_if_block_1$3(ctx);
 	const default_slot_template = /*#slots*/ ctx[31].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[33], null);
@@ -4393,7 +4393,7 @@ function create_default_slot$6(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block_1$2(ctx);
+					if_block = create_if_block_1$3(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(t.parentNode, t);
@@ -4447,7 +4447,7 @@ function create_default_slot$6(ctx) {
 	};
 }
-function create_fragment$15(ctx) {
+function create_fragment$16(ctx) {
 	let show_if;
 	let current_block_type_index;
 	let if_block0;
@@ -4456,7 +4456,7 @@ function create_fragment$15(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	const if_block_creators = [create_if_block_2$1, create_if_block_3, create_else_block$4];
+	const if_block_creators = [create_if_block_2$1, create_if_block_3, create_else_block$5];
 	const if_blocks = [];
 	function select_block_type(ctx, dirty) {
@@ -4468,7 +4468,7 @@ function create_fragment$15(ctx) {
 	current_block_type_index = select_block_type(ctx);
 	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-	let if_block1 = /*visible*/ ctx[16] && create_if_block$b(ctx);
+	let if_block1 = /*visible*/ ctx[16] && create_if_block$c(ctx);
 	return {
 		c() {
@@ -4534,7 +4534,7 @@ function create_fragment$15(ctx) {
 						transition_in(if_block1, 1);
 					}
 				} else {
-					if_block1 = create_if_block$b(ctx);
+					if_block1 = create_if_block$c(ctx);
 					if_block1.c();
 					transition_in(if_block1, 1);
 					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
@@ -4571,7 +4571,7 @@ function create_fragment$15(ctx) {
 	};
 }
-function instance$15($$self, $$props, $$invalidate) {
+function instance$16($$self, $$props, $$invalidate) {
 	let close;
 	let closable;
 	let backgroundClick;
@@ -4853,8 +4853,8 @@ let Modal$1 = class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$15,
-			create_fragment$15,
+			instance$16,
+			create_fragment$16,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -4872,7 +4872,7 @@ let Modal$1 = class Modal extends SvelteComponent {
 				closeButtonColor: 9,
 				_closeStyle: 10
 			},
-			add_css$C,
+			add_css$D,
 			[-1, -1]
 		);
 	}
@@ -4880,7 +4880,7 @@ let Modal$1 = class Modal extends SvelteComponent {
 /* src/components/Grid.svelte generated by Svelte v3.53.1 */
-function create_fragment$14(ctx) {
+function create_fragment$15(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -4948,7 +4948,7 @@ function create_fragment$14(ctx) {
 	};
 }
-function instance$14($$self, $$props, $$invalidate) {
+function instance$15($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -4993,7 +4993,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$14, create_fragment$14, safe_not_equal, {
+		init(this, options, instance$15, create_fragment$15, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -5006,11 +5006,11 @@ class Grid extends SvelteComponent {
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
-function add_css$B(target) {
+function add_css$C(target) {
 	append_styles(target, "svelte-n7kdl3", ".grid-item.svelte-n7kdl3{word-break:break-all;position:relative}.grid-item-inner.svelte-n7kdl3{position:absolute;inset:0}");
 }
-function create_fragment$13(ctx) {
+function create_fragment$14(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -5103,7 +5103,7 @@ function create_fragment$13(ctx) {
 const GRID_ITEM_CONTEXT_KEY = 'GRID_ITEM';
-function instance$13($$self, $$props, $$invalidate) {
+function instance$14($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -5152,8 +5152,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$13,
-			create_fragment$13,
+			instance$14,
+			create_fragment$14,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -5164,7 +5164,7 @@ class GridItem extends SvelteComponent {
 				background: 7,
 				gridItemId: 0
 			},
-			add_css$B
+			add_css$C
 		);
 	}
 }
@@ -5178,7 +5178,7 @@ function get_each_context$6(ctx, list, i) {
 }
 // (13:2) {:else}
-function create_else_block$3(ctx) {
+function create_else_block$4(ctx) {
 	let t_value = /*item*/ ctx[2] + "";
 	let t;
@@ -5202,7 +5202,7 @@ function create_else_block$3(ctx) {
 }
 // (11:2) {#if item.match(regexp)}
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
 	let br;
 	return {
@@ -5230,8 +5230,8 @@ function create_each_block$6(ctx) {
 	function select_block_type(ctx, dirty) {
 		if (dirty & /*items*/ 1) show_if = null;
 		if (show_if == null) show_if = !!/*item*/ ctx[2].match(regexp);
-		if (show_if) return create_if_block$a;
-		return create_else_block$3;
+		if (show_if) return create_if_block$b;
+		return create_else_block$4;
 	}
 	let current_block_type = select_block_type(ctx, -1);
@@ -5270,7 +5270,7 @@ function create_each_block$6(ctx) {
 	};
 }
-function create_fragment$12(ctx) {
+function create_fragment$13(ctx) {
 	let each_1_anchor;
 	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
@@ -5336,7 +5336,7 @@ function create_fragment$12(ctx) {
 const regexp = /(\r?\n)/;
-function instance$12($$self, $$props, $$invalidate) {
+function instance$13($$self, $$props, $$invalidate) {
 	let items;
 	let { text = 'サンプルSample' } = $$props;
@@ -5357,18 +5357,18 @@ function instance$12($$self, $$props, $$invalidate) {
 class RenderText extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$12, create_fragment$12, safe_not_equal, { text: 1 });
+		init(this, options, instance$13, create_fragment$13, safe_not_equal, { text: 1 });
 	}
 }
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
-function add_css$A(target) {
+function add_css$B(target) {
 	append_styles(target, "svelte-9ixs0b", ".text-element-wrapper.svelte-9ixs0b.svelte-9ixs0b{position:relative;height:100%}.text-element.svelte-9ixs0b.svelte-9ixs0b{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;margin:0px;padding:0px;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden;font-size:12px;line-height:1.5}.text-link-element.svelte-9ixs0b.svelte-9ixs0b{text-decoration:none;color:inherit}.text-element-inner.svelte-9ixs0b.svelte-9ixs0b{width:100%;height:auto}.text-direction-vertical.svelte-9ixs0b.svelte-9ixs0b{writing-mode:vertical-rl}.text-direction-vertical.svelte-9ixs0b .text-element-inner.svelte-9ixs0b{width:auto;height:100%}.tooltip.svelte-9ixs0b.svelte-9ixs0b{display:none;position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;background-color:#3d4948;white-space:nowrap;padding:4px 8px 4px 8px;border-radius:4px;font-size:12px;z-index:2147483647}.tooltip.svelte-9ixs0b.svelte-9ixs0b:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-9ixs0b.svelte-9ixs0b{display:block}.tooltip-error.svelte-9ixs0b.svelte-9ixs0b{background-color:#c00}.tooltip-error.svelte-9ixs0b.svelte-9ixs0b:before{border-bottom:7px solid #c00}");
 }
 // (94:2) {:else}
-function create_else_block$2(ctx) {
+function create_else_block$3(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -5434,7 +5434,7 @@ function create_else_block$2(ctx) {
 }
 // (80:2) {#if enableCopy}
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
 	let a;
 	let div0;
 	let rendertext;
@@ -5547,12 +5547,12 @@ function create_if_block$9(ctx) {
 	};
 }
-function create_fragment$11(ctx) {
+function create_fragment$12(ctx) {
 	let div;
 	let current_block_type_index;
 	let if_block;
 	let current;
-	const if_block_creators = [create_if_block$9, create_else_block$2];
+	const if_block_creators = [create_if_block$a, create_else_block$3];
 	const if_blocks = [];
 	function select_block_type(ctx, dirty) {
@@ -5627,7 +5627,7 @@ function create_fragment$11(ctx) {
 	};
 }
-function instance$11($$self, $$props, $$invalidate) {
+function instance$12($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'テキストのコンテンツ' } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -5723,8 +5723,8 @@ class TextElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$11,
-			create_fragment$11,
+			instance$12,
+			create_fragment$12,
 			safe_not_equal,
 			{
 				text: 0,
@@ -5735,19 +5735,19 @@ class TextElement extends SvelteComponent {
 				enableCopy: 2,
 				eventName: 10
 			},
-			add_css$A
+			add_css$B
 		);
 	}
 }
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
-function add_css$z(target) {
+function add_css$A(target) {
 	append_styles(target, "svelte-1vg84sc", ".text-button-element.svelte-1vg84sc{width:100%;height:100%}.text-button-element.svelte-1vg84sc > .button{display:flex;width:100%;height:100%;border:none;box-shadow:transparent;box-sizing:border-box;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden;color:#ffffff;font-size:14px;font-weight:bold;justify-content:center;align-items:center;padding:1px 6px 1px 6px;line-height:1.5;background-color:#33403e;border-radius:4px;cursor:pointer;border-width:0px;border-style:solid;border-color:#000000}.text-button-element.svelte-1vg84sc > .button._disabled{cursor:not-allowed !important;opacity:0.2}.text-button-element.svelte-1vg84sc > .button:not(._disabled):active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button-element.svelte-1vg84sc > .button:not(._disabled):hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
 // (48:2) <Button {onClick} {style} {eventName}>
-function create_default_slot$5(ctx) {
+function create_default_slot$a(ctx) {
 	let rendertext;
 	let current;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
@@ -5783,7 +5783,7 @@ function create_default_slot$5(ctx) {
 	};
 }
-function create_fragment$10(ctx) {
+function create_fragment$11(ctx) {
 	let div;
 	let button;
 	let current;
@@ -5793,7 +5793,7 @@ function create_fragment$10(ctx) {
 				onClick: /*onClick*/ ctx[1],
 				style: /*style*/ ctx[3],
 				eventName: /*eventName*/ ctx[2],
-				$$slots: { default: [create_default_slot$5] },
+				$$slots: { default: [create_default_slot$a] },
 				$$scope: { ctx }
 			}
 		});
@@ -5847,7 +5847,7 @@ function create_fragment$10(ctx) {
 	};
 }
-function instance$10($$self, $$props, $$invalidate) {
+function instance$11($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'ボタンのラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -5885,8 +5885,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$10,
-			create_fragment$10,
+			instance$11,
+			create_fragment$11,
 			safe_not_equal,
 			{
 				text: 0,
@@ -5896,19 +5896,19 @@ class TextButtonElement extends SvelteComponent {
 				_buttonStyle: 5,
 				_style: 6
 			},
-			add_css$z
+			add_css$A
 		);
 	}
 }
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
-function add_css$y(target) {
+function add_css$z(target) {
 	append_styles(target, "svelte-t6tu0e", ".image-element.svelte-t6tu0e{width:100%;height:100%;max-width:100%;max-height:100%;box-sizing:border-box}.image-element.svelte-t6tu0e > .button{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}.image-element.svelte-t6tu0e > .button._disabled{cursor:not-allowed !important;opacity:0.2}.image-element.transport.svelte-t6tu0e > .button:not(._disabled):hover,.image-element.transport.svelte-t6tu0e > .button:not(._disabled):focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}.image.svelte-t6tu0e{width:100%;height:100%}");
 }
 // (44:2) <Button {onClick} style={_style} {eventName}>
-function create_default_slot$4(ctx) {
+function create_default_slot$9(ctx) {
 	let img;
 	let img_style_value;
 	let img_src_value;
@@ -5974,7 +5974,7 @@ function create_default_slot$4(ctx) {
 	};
 }
-function create_fragment$$(ctx) {
+function create_fragment$10(ctx) {
 	let div;
 	let button;
 	let div_class_value;
@@ -5985,7 +5985,7 @@ function create_fragment$$(ctx) {
 				onClick: /*onClick*/ ctx[4],
 				style: /*_style*/ ctx[7],
 				eventName: /*eventName*/ ctx[5],
-				$$slots: { default: [create_default_slot$4] },
+				$$slots: { default: [create_default_slot$9] },
 				$$scope: { ctx }
 			}
 		});
@@ -6043,7 +6043,7 @@ function create_fragment$$(ctx) {
 	};
 }
-function instance$$($$self, $$props, $$invalidate) {
+function instance$10($$self, $$props, $$invalidate) {
 	let { src = '' } = $$props;
 	let { alt = '画像の説明' } = $$props;
 	let { transport = false } = $$props;
@@ -6074,8 +6074,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$$,
-			create_fragment$$,
+			instance$10,
+			create_fragment$10,
 			safe_not_equal,
 			{
 				src: 0,
@@ -6087,18 +6087,18 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 6,
 				_style: 7
 			},
-			add_css$y
+			add_css$z
 		);
 	}
 }
 /* src/components/List.svelte generated by Svelte v3.53.1 */
-function add_css$x(target) {
+function add_css$y(target) {
 	append_styles(target, "svelte-aquv6z", ".list.svelte-aquv6z{display:flex;width:100%;height:100%;overflow:hidden;border-width:0px;border-style:solid;border-color:#000000}");
 }
-function create_fragment$_(ctx) {
+function create_fragment$$(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[6].default;
@@ -6168,7 +6168,7 @@ function create_fragment$_(ctx) {
 const LIST_CONTEXT_KEY = Symbol();
-function instance$_($$self, $$props, $$invalidate) {
+function instance$$($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'vertical' } = $$props;
@@ -6235,8 +6235,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$_,
-			create_fragment$_,
+			instance$$,
+			create_fragment$$,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -6244,19 +6244,19 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$x
+			add_css$y
 		);
 	}
 }
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
-function add_css$w(target) {
+function add_css$x(target) {
 	append_styles(target, "svelte-9n97pe", ".list-item.svelte-9n97pe{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item.svelte-9n97pe > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
 }
 // (67:2) <Button {onClick} style={_style} eventName={clickEventName}>
-function create_default_slot$3(ctx) {
+function create_default_slot$8(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[5].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
@@ -6306,7 +6306,7 @@ function create_default_slot$3(ctx) {
 	};
 }
-function create_fragment$Z(ctx) {
+function create_fragment$_(ctx) {
 	let div;
 	let button;
 	let current;
@@ -6316,7 +6316,7 @@ function create_fragment$Z(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*_style*/ ctx[2],
 				eventName: /*clickEventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$3] },
+				$$slots: { default: [create_default_slot$8] },
 				$$scope: { ctx }
 			}
 		});
@@ -6375,7 +6375,7 @@ function create_fragment$Z(ctx) {
 	};
 }
-function instance$Z($$self, $$props, $$invalidate) {
+function instance$_($$self, $$props, $$invalidate) {
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { separator, background, direction, registerItem, unregisterItem } = getContext(LIST_CONTEXT_KEY);
@@ -6454,17 +6454,17 @@ function instance$Z($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$Z, create_fragment$Z, safe_not_equal, { onClick: 0, clickEventName: 1, _style: 2 }, add_css$w);
+		init(this, options, instance$_, create_fragment$_, safe_not_equal, { onClick: 0, clickEventName: 1, _style: 2 }, add_css$x);
 	}
 }
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
-function add_css$v(target) {
+function add_css$w(target) {
 	append_styles(target, "svelte-wocq4p", ".embed.svelte-wocq4p{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%}.embed.svelte-wocq4p iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
 }
-function create_fragment$Y(ctx) {
+function create_fragment$Z(ctx) {
 	let div;
 	return {
@@ -6500,7 +6500,7 @@ function create_fragment$Y(ctx) {
 	};
 }
-function instance$Y($$self, $$props, $$invalidate) {
+function instance$Z($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = '' } = $$props;
@@ -6515,17 +6515,17 @@ function instance$Y($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$Y, create_fragment$Y, safe_not_equal, { code: 0, _style: 1 }, add_css$v);
+		init(this, options, instance$Z, create_fragment$Z, safe_not_equal, { code: 0, _style: 1 }, add_css$w);
 	}
 }
 /* src/components/MovieYouTubeElement.svelte generated by Svelte v3.53.1 */
-function add_css$u(target) {
+function add_css$v(target) {
 	append_styles(target, "svelte-vikz49", ".embed.svelte-vikz49{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}.embed.svelte-vikz49 iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
-function create_fragment$X(ctx) {
+function create_fragment$Y(ctx) {
 	let div1;
 	let div0;
@@ -6577,7 +6577,7 @@ function _setValue(obj, key, value) {
 	}
 }
-function instance$X($$self, $$props, $$invalidate) {
+function instance$Y($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(31, $system = $$value));
 	let { videoId = 'wt0OjOeX-JA' } = $$props;
@@ -6848,8 +6848,8 @@ class MovieYouTubeElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$X,
-			create_fragment$X,
+			instance$Y,
+			create_fragment$Y,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -6878,7 +6878,7 @@ class MovieYouTubeElement extends SvelteComponent {
 				mute: 25,
 				_style: 0
 			},
-			add_css$u,
+			add_css$v,
 			[-1, -1]
 		);
 	}
@@ -6886,11 +6886,11 @@ class MovieYouTubeElement extends SvelteComponent {
 /* src/components/MovieVimeoElement.svelte generated by Svelte v3.53.1 */
-function add_css$t(target) {
+function add_css$u(target) {
 	append_styles(target, "svelte-vikz49", ".embed.svelte-vikz49{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}.embed.svelte-vikz49 iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
-function create_fragment$W(ctx) {
+function create_fragment$X(ctx) {
 	let div1;
 	let div0;
@@ -6932,7 +6932,7 @@ function create_fragment$W(ctx) {
 	};
 }
-function instance$W($$self, $$props, $$invalidate) {
+function instance$X($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId = "201239468" } = $$props;
@@ -7075,8 +7075,8 @@ class MovieVimeoElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$W,
-			create_fragment$W,
+			instance$X,
+			create_fragment$X,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -7086,18 +7086,18 @@ class MovieVimeoElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$t
+			add_css$u
 		);
 	}
 }
 /* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
-function add_css$s(target) {
+function add_css$t(target) {
 	append_styles(target, "svelte-zxvkkc", ".textarea-wrapper.svelte-zxvkkc{display:flex;align-items:center;width:100%;height:100%}.textarea.svelte-zxvkkc{width:100%;height:100%;box-sizing:border-box;resize:none;appearance:none;background-color:#fff;border:solid 2px #ccc;border-radius:6px;padding:6px 10px 6px 10px;font-size:12px;line-height:1.5}.textarea.svelte-zxvkkc::placeholder{color:var(--placeholder-color)}.textarea.svelte-zxvkkc:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}");
 }
-function create_fragment$V(ctx) {
+function create_fragment$W(ctx) {
 	let div;
 	let textarea;
 	let mounted;
@@ -7172,7 +7172,7 @@ function create_fragment$V(ctx) {
 	};
 }
-function instance$V($$self, $$props, $$invalidate) {
+function instance$W($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
 	let $value;
@@ -7260,8 +7260,8 @@ class FormTextarea extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$V,
-			create_fragment$V,
+			instance$W,
+			create_fragment$W,
 			safe_not_equal,
 			{
 				name: 7,
@@ -7273,14 +7273,14 @@ class FormTextarea extends SvelteComponent {
 				_textStyle: 11,
 				_placeholderStyle: 12
 			},
-			add_css$s
+			add_css$t
 		);
 	}
 }
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
-function add_css$r(target) {
+function add_css$s(target) {
 	append_styles(target, "svelte-17s08g", ".radio-buttons.svelte-17s08g{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-17s08g{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-17s08g{appearance:none;margin:0;box-sizing:border-box;border-radius:var(--size);position:relative;width:var(--size);height:var(--size);border:solid calc(var(--size) / 3) var(--color-main);background-color:var(--color-sub);cursor:pointer;flex:none}.radio-button-input.svelte-17s08g:checked{border:solid calc(var(--size) / 3) var(--color-main-active);background-color:var(--color-sub-active);box-shadow:0px 1px 8px 2px rgba(18,160,160,.08),0px 1px 4px -1px rgba(18,160,160,.24)}.radio-button-text.svelte-17s08g{margin-left:0.5em}");
 }
@@ -7393,7 +7393,7 @@ function create_each_block$5(ctx) {
 	};
 }
-function create_fragment$U(ctx) {
+function create_fragment$V(ctx) {
 	let div;
 	let each_value = /*_options*/ ctx[4];
 	let each_blocks = [];
@@ -7471,7 +7471,7 @@ function create_fragment$U(ctx) {
 	};
 }
-function instance$U($$self, $$props, $$invalidate) {
+function instance$V($$self, $$props, $$invalidate) {
 	let _options;
 	let buttonStyle;
 	let _value;
@@ -7571,8 +7571,8 @@ class FormRadioButtons extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$U,
-			create_fragment$U,
+			instance$V,
+			create_fragment$V,
 			safe_not_equal,
 			{
 				name: 0,
@@ -7585,14 +7585,14 @@ class FormRadioButtons extends SvelteComponent {
 				buttonColor: 13,
 				buttonColorActive: 14
 			},
-			add_css$r
+			add_css$s
 		);
 	}
 }
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
-function add_css$q(target) {
+function add_css$r(target) {
 	append_styles(target, "svelte-t9ynyj", ".select.svelte-t9ynyj{width:100%;height:100%}.select-select.svelte-t9ynyj{position:relative;appearance:none;width:100%;height:100%;cursor:pointer;background-color:#fff;border:solid 2px #ccc;border-radius:6px;padding:0 0 0 10px;font-size:12px;line-height:1.5}.select-select.svelte-t9ynyj:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.select-icon.svelte-t9ynyj{position:absolute;width:calc(var(--icon-size) / 1.41);height:calc(var(--icon-size) / 1.41);top:calc(50% - calc(var(--icon-size) / 4));right:calc(var(--icon-size) * 1.2);box-sizing:border-box;border-right:solid 2px var(--icon-color);border-top:solid 2px var(--icon-color);transform:translateY(-35.4%) rotate(135deg);pointer-events:none}");
 }
@@ -7604,7 +7604,7 @@ function get_each_context$4(ctx, list, i) {
 }
 // (107:10) {:else}
-function create_else_block$1(ctx) {
+function create_else_block$2(ctx) {
 	let t;
 	return {
@@ -7627,7 +7627,7 @@ function create_else_block$1(ctx) {
 }
 // (105:10) {#if option}
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
 	let t_value = /*option*/ ctx[19] + "";
 	let t;
@@ -7658,8 +7658,8 @@ function create_each_block$4(ctx) {
 	let option_selected_value;
 	function select_block_type(ctx, dirty) {
-		if (/*option*/ ctx[19]) return create_if_block$8;
-		return create_else_block$1;
+		if (/*option*/ ctx[19]) return create_if_block$9;
+		return create_else_block$2;
 	}
 	let current_block_type = select_block_type(ctx);
@@ -7719,7 +7719,7 @@ function create_each_block$4(ctx) {
 	};
 }
-function create_fragment$T(ctx) {
+function create_fragment$U(ctx) {
 	let div1;
 	let select;
 	let t;
@@ -7829,7 +7829,7 @@ function create_fragment$T(ctx) {
 	};
 }
-function instance$T($$self, $$props, $$invalidate) {
+function instance$U($$self, $$props, $$invalidate) {
 	let _options;
 	let style;
 	let styleVariables;
@@ -7945,8 +7945,8 @@ class FormSelect extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$T,
-			create_fragment$T,
+			instance$U,
+			create_fragment$U,
 			safe_not_equal,
 			{
 				name: 7,
@@ -7961,14 +7961,14 @@ class FormSelect extends SvelteComponent {
 				iconColor: 15,
 				iconSize: 16
 			},
-			add_css$q
+			add_css$r
 		);
 	}
 }
 /* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
-function add_css$p(target) {
+function add_css$q(target) {
 	append_styles(target, "svelte-1p65cg8", ".check-boxes.svelte-1p65cg8.svelte-1p65cg8{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%;gap:0px}.check-box.svelte-1p65cg8.svelte-1p65cg8{display:flex;align-items:center;position:relative;cursor:pointer}.check-box-input.svelte-1p65cg8.svelte-1p65cg8{width:var(--size);height:var(--size);margin:0;position:absolute;appearance:none;cursor:pointer}.check-box-check.svelte-1p65cg8.svelte-1p65cg8{display:inline-flex;background-color:var(--color-main);width:var(--size);height:var(--size);border-radius:calc(var(--size) / 4);justify-content:center;align-items:center;flex:none}.check-box-icon.svelte-1p65cg8.svelte-1p65cg8{display:inline-block;--icon-size:calc(var(--size) * 3 / 4);width:var(--icon-size);height:var(--icon-size)}.check-box-icon.svelte-1p65cg8.svelte-1p65cg8:after{content:'';display:block;box-sizing:border-box;width:45%;height:91%;transform:translate(60%, -8%) rotate(45deg);border-style:none solid solid none;border-width:2px;border-color:var(--color-sub)}.check-box-check._checked.svelte-1p65cg8.svelte-1p65cg8{background-color:var(--color-main-active)}.check-box-check._checked.svelte-1p65cg8 .check-box-icon.svelte-1p65cg8:after{border-color:var(--color-sub-active)}.check-box-text.svelte-1p65cg8.svelte-1p65cg8{margin-left:0.5em;color:#333;font-size:12px;line-height:1.5}");
 }
@@ -8097,7 +8097,7 @@ function create_each_block$3(ctx) {
 	};
 }
-function create_fragment$S(ctx) {
+function create_fragment$T(ctx) {
 	let div;
 	let each_value = /*_options*/ ctx[3];
 	let each_blocks = [];
@@ -8175,7 +8175,7 @@ function create_fragment$S(ctx) {
 	};
 }
-function instance$S($$self, $$props, $$invalidate) {
+function instance$T($$self, $$props, $$invalidate) {
 	let _options;
 	let styleVariables;
 	let isCheckedArray;
@@ -8281,8 +8281,8 @@ class FormCheckBoxes extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$S,
-			create_fragment$S,
+			instance$T,
+			create_fragment$T,
 			safe_not_equal,
 			{
 				name: 0,
@@ -8295,14 +8295,14 @@ class FormCheckBoxes extends SvelteComponent {
 				buttonColor: 13,
 				buttonColorActive: 14
 			},
-			add_css$p
+			add_css$q
 		);
 	}
 }
 /* src/components/FormRatingButtonsNumber.svelte generated by Svelte v3.53.1 */
-function add_css$o(target) {
+function add_css$p(target) {
 	append_styles(target, "svelte-1iqf36p", ".rating-buttons.svelte-1iqf36p{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-1iqf36p{cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s, box-shadow 0.2s;appearance:none;background:none;border:none;margin:0;padding:0}");
 }
@@ -8370,7 +8370,7 @@ function create_each_block$2(ctx) {
 	};
 }
-function create_fragment$R(ctx) {
+function create_fragment$S(ctx) {
 	let div;
 	let each_value = [...Array(/*count*/ ctx[0]).keys()].map(/*func*/ ctx[12]);
 	let each_blocks = [];
@@ -8443,7 +8443,7 @@ function create_fragment$R(ctx) {
 	};
 }
-function instance$R($$self, $$props, $$invalidate) {
+function instance$S($$self, $$props, $$invalidate) {
 	let _value;
 	let $value;
 	let { name = '' } = $$props;
@@ -8525,8 +8525,8 @@ class FormRatingButtonsNumber extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$R,
-			create_fragment$R,
+			instance$S,
+			create_fragment$S,
 			safe_not_equal,
 			{
 				name: 6,
@@ -8537,14 +8537,14 @@ class FormRatingButtonsNumber extends SvelteComponent {
 				buttonStyle: 9,
 				buttonActiveStyle: 10
 			},
-			add_css$o
+			add_css$p
 		);
 	}
 }
 /* src/components/FormRatingButtonsFace.svelte generated by Svelte v3.53.1 */
-function add_css$n(target) {
+function add_css$o(target) {
 	append_styles(target, "svelte-tbunko", ".rating-buttons.svelte-tbunko{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-tbunko{appearance:none;background:none;border:none;margin:0;padding:0}.rating-button-image.svelte-tbunko{cursor:pointer;user-select:none;-webkit-user-drag:none;width:100%;height:100%}.rating-button-image.svelte-tbunko:not(._active){filter:grayscale(100%)}");
 }
@@ -8615,7 +8615,7 @@ function create_each_block$1(ctx) {
 	};
 }
-function create_fragment$Q(ctx) {
+function create_fragment$R(ctx) {
 	let div;
 	let each_value = [...Array(count).keys()].reverse().map(func);
 	let each_blocks = [];
@@ -8691,7 +8691,7 @@ function create_fragment$Q(ctx) {
 const count = 5;
 const func = i => i + 1;
-function instance$Q($$self, $$props, $$invalidate) {
+function instance$R($$self, $$props, $$invalidate) {
 	let _value;
 	let buttonStyle;
 	let $value;
@@ -8747,17 +8747,17 @@ function instance$Q($$self, $$props, $$invalidate) {
 class FormRatingButtonsFace extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$Q, create_fragment$Q, safe_not_equal, { name: 5, required: 6, size: 7 }, add_css$n);
+		init(this, options, instance$R, create_fragment$R, safe_not_equal, { name: 5, required: 6, size: 7 }, add_css$o);
 	}
 }
 /* src/components/FormIdentifyInput.svelte generated by Svelte v3.53.1 */
-function add_css$m(target) {
+function add_css$n(target) {
 	append_styles(target, "svelte-h8fqwx", ".input-wrapper.svelte-h8fqwx{display:flex;align-items:center;width:100%;height:100%}.input.svelte-h8fqwx{width:100%;height:100%;box-sizing:border-box;resize:none;appearance:none;background-color:#fff;border:solid 2px #ccc;border-radius:6px;padding:6px 10px 6px 10px;font-size:12px;line-height:1.5}.input.svelte-h8fqwx::placeholder{color:var(--placeholder-color)}.input.svelte-h8fqwx:focus{outline:none;border-width:var(--focus-border-width) !important;border-color:var(--focus-border-color) !important;border-style:var(--focus-border-style) !important}.input._error.svelte-h8fqwx{outline:none;border-width:var(--error-border-width) !important;border-color:var(--error-border-color) !important;border-style:var(--error-border-style) !important}");
 }
-function create_fragment$P(ctx) {
+function create_fragment$Q(ctx) {
 	let div;
 	let input;
 	let input_class_value;
@@ -8838,7 +8838,7 @@ function create_fragment$P(ctx) {
 	};
 }
-function instance$P($$self, $$props, $$invalidate) {
+function instance$Q($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
 	let isValidForUI;
@@ -8969,8 +8969,8 @@ class FormIdentifyInput extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$P,
-			create_fragment$P,
+			instance$Q,
+			create_fragment$Q,
 			safe_not_equal,
 			{
 				field: 9,
@@ -8984,18 +8984,18 @@ class FormIdentifyInput extends SvelteComponent {
 				_textStyle: 15,
 				_placeholderStyle: 16
 			},
-			add_css$m
+			add_css$n
 		);
 	}
 }
 /* src/components/FormIdentifyChoices.svelte generated by Svelte v3.53.1 */
-function add_css$l(target) {
+function add_css$m(target) {
 	append_styles(target, "svelte-8zbmyo", ".radio-buttons.svelte-8zbmyo{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-8zbmyo{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-8zbmyo{appearance:none;margin:0;box-sizing:border-box;border-radius:var(--size);position:relative;width:var(--size);height:var(--size);border:solid calc(var(--size) / 3) var(--color-main);background-color:var(--color-sub);cursor:pointer;flex:none}.radio-button-input.svelte-8zbmyo:checked{border:solid calc(var(--size) / 3) var(--color-main-active);background-color:var(--color-sub-active);box-shadow:0px 1px 8px 2px rgba(18, 160, 160, 0.08), 0px 1px 4px -1px rgba(18, 160, 160, 0.24)}.radio-button-text.svelte-8zbmyo{margin-left:0.5em}");
 }
-function create_fragment$O(ctx) {
+function create_fragment$P(ctx) {
 	let div;
 	let label0;
 	let input0;
@@ -9136,7 +9136,7 @@ function create_fragment$O(ctx) {
 	};
 }
-function instance$O($$self, $$props, $$invalidate) {
+function instance$P($$self, $$props, $$invalidate) {
 	let buttonStyle;
 	let $value;
 	let { field = 'subscription' } = $$props;
@@ -9218,8 +9218,8 @@ class FormIdentifyChoices extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$O,
-			create_fragment$O,
+			instance$P,
+			create_fragment$P,
 			safe_not_equal,
 			{
 				field: 6,
@@ -9231,14 +9231,14 @@ class FormIdentifyChoices extends SvelteComponent {
 				buttonColor: 10,
 				buttonColorActive: 11
 			},
-			add_css$l
+			add_css$m
 		);
 	}
 }
 /* src/components/Slide.svelte generated by Svelte v3.53.1 */
-function add_css$k(target) {
+function add_css$l(target) {
 	append_styles(target, "svelte-ji1fh", ".root.svelte-ji1fh{width:100%;height:100%;position:relative}.container.svelte-ji1fh{width:100%;height:100%;position:relative;overflow:hidden;box-sizing:border-box;border-width:0px;border-style:solid;border-color:#000000}.slide.svelte-ji1fh{height:100%;position:absolute;display:flex}.transition.svelte-ji1fh{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-ji1fh{height:100%;flex:none}.prev-button-container.svelte-ji1fh,.next-button-container.svelte-ji1fh{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button-container.svelte-ji1fh{left:0}.next-button-container.svelte-ji1fh{right:0}.move-button.svelte-ji1fh{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;border:none;background:none;margin:0;padding:0}.navigation.svelte-ji1fh{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-ji1fh{flex-shrink:0;cursor:pointer;border:none;background:none;margin:0;padding:0;appearance:none}.navigation-item-inner.circle.svelte-ji1fh{border-radius:51%}");
 }
@@ -9250,7 +9250,7 @@ function get_each_context(ctx, list, i) {
 }
 // (371:2) {#if isVisiblePrevButton}
-function create_if_block_1$1(ctx) {
+function create_if_block_1$2(ctx) {
 	let div;
 	let button;
 	let svg;
@@ -9318,7 +9318,7 @@ function create_if_block_1$1(ctx) {
 }
 // (380:2) {#if isVisibleNextButton}
-function create_if_block$7(ctx) {
+function create_if_block$8(ctx) {
 	let div;
 	let button;
 	let svg;
@@ -9449,7 +9449,7 @@ function create_each_block(ctx) {
 	};
 }
-function create_fragment$N(ctx) {
+function create_fragment$O(ctx) {
 	let div3;
 	let div1;
 	let div0;
@@ -9461,8 +9461,8 @@ function create_fragment$N(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[32].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[31], null);
-	let if_block0 = /*isVisiblePrevButton*/ ctx[12] && create_if_block_1$1(ctx);
-	let if_block1 = /*isVisibleNextButton*/ ctx[11] && create_if_block$7(ctx);
+	let if_block0 = /*isVisiblePrevButton*/ ctx[12] && create_if_block_1$2(ctx);
+	let if_block1 = /*isVisibleNextButton*/ ctx[11] && create_if_block$8(ctx);
 	let each_value = /*items*/ ctx[1];
 	let each_blocks = [];
@@ -9588,7 +9588,7 @@ function create_fragment$N(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$1(ctx);
+					if_block0 = create_if_block_1$2(ctx);
 					if_block0.c();
 					if_block0.m(div3, t1);
 				}
@@ -9601,7 +9601,7 @@ function create_fragment$N(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$7(ctx);
+					if_block1 = create_if_block$8(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -9673,7 +9673,7 @@ function calcPositionIndex(shift, index, length) {
 	}
 }
-function instance$N($$self, $$props, $$invalidate) {
+function instance$O($$self, $$props, $$invalidate) {
 	let slideStyle;
 	let slideClass;
 	let _loop;
@@ -10126,8 +10126,8 @@ class Slide extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$N,
-			create_fragment$N,
+			instance$O,
+			create_fragment$O,
 			safe_not_equal,
 			{
 				loop: 18,
@@ -10141,7 +10141,7 @@ class Slide extends SvelteComponent {
 				navigationButton: 25,
 				navigationEdgePosition: 26
 			},
-			add_css$k,
+			add_css$l,
 			[-1, -1, -1]
 		);
 	}
@@ -10149,11 +10149,11 @@ class Slide extends SvelteComponent {
 /* src/components/SlideItem.svelte generated by Svelte v3.53.1 */
-function add_css$j(target) {
+function add_css$k(target) {
 	append_styles(target, "svelte-9ygf1w", ".item.svelte-9ygf1w{height:100%;flex:none;position:relative}.item.svelte-9ygf1w img{user-select:none;-webkit-user-drag:none}.item-inner.svelte-9ygf1w{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;cursor:default;overflow:hidden}");
 }
-function create_fragment$M(ctx) {
+function create_fragment$N(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -10233,7 +10233,7 @@ function create_fragment$M(ctx) {
 	};
 }
-function instance$M($$self, $$props, $$invalidate) {
+function instance$N($$self, $$props, $$invalidate) {
 	let itemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { registerItem, unregisterItem } = getContext('SLIDE');
@@ -10299,20 +10299,20 @@ function instance$M($$self, $$props, $$invalidate) {
 class SlideItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$M, create_fragment$M, safe_not_equal, { _style: 0 }, add_css$j);
+		init(this, options, instance$N, create_fragment$N, safe_not_equal, { _style: 0 }, add_css$k);
 	}
 }
 /* src/components/Countdown.svelte generated by Svelte v3.53.1 */
-function add_css$i(target) {
+function add_css$j(target) {
 	append_styles(target, "svelte-rroxiz", ".countdown.svelte-rroxiz{position:relative;width:100%;height:100%}.countdown-inner.svelte-rroxiz{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
 }
 const get_default_slot_changes = dirty => ({ countdown: dirty & /*countdown*/ 2 });
 const get_default_slot_context = ctx => ({ countdown: /*countdown*/ ctx[1] });
-function create_fragment$L(ctx) {
+function create_fragment$M(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -10405,7 +10405,7 @@ function formatTimeDiff(ms) {
 	};
 }
-function instance$L($$self, $$props, $$invalidate) {
+function instance$M($$self, $$props, $$invalidate) {
 	let countdown;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { timeLimit = '2023/12/31 23:59:59' } = $$props;
@@ -10462,18 +10462,18 @@ function instance$L($$self, $$props, $$invalidate) {
 class Countdown extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$L, create_fragment$L, safe_not_equal, { timeLimit: 2, stateOnEnd: 3, _style: 0 }, add_css$i);
+		init(this, options, instance$M, create_fragment$M, safe_not_equal, { timeLimit: 2, stateOnEnd: 3, _style: 0 }, add_css$j);
 	}
 }
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
-function add_css$h(target) {
+function add_css$i(target) {
 	append_styles(target, "svelte-1ccydfy", ".box.svelte-1ccydfy{position:relative;width:100%;height:100%}.box.svelte-1ccydfy > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
 }
 // (24:2) <Button {onClick} style={_style} {eventName}>
-function create_default_slot$2(ctx) {
+function create_default_slot$7(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[3].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
@@ -10523,7 +10523,7 @@ function create_default_slot$2(ctx) {
 	};
 }
-function create_fragment$K(ctx) {
+function create_fragment$L(ctx) {
 	let div;
 	let button;
 	let current;
@@ -10533,7 +10533,7 @@ function create_fragment$K(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*_style*/ ctx[2],
 				eventName: /*eventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$2] },
+				$$slots: { default: [create_default_slot$7] },
 				$$scope: { ctx }
 			}
 		});
@@ -10587,7 +10587,7 @@ function create_fragment$K(ctx) {
 	};
 }
-function instance$K($$self, $$props, $$invalidate) {
+function instance$L($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { eventName = '' } = $$props;
@@ -10606,18 +10606,18 @@ function instance$K($$self, $$props, $$invalidate) {
 class Box extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$K, create_fragment$K, safe_not_equal, { onClick: 0, eventName: 1, _style: 2 }, add_css$h);
+		init(this, options, instance$L, create_fragment$L, safe_not_equal, { onClick: 0, eventName: 1, _style: 2 }, add_css$i);
 	}
 }
 /* src/components/IconElement.svelte generated by Svelte v3.53.1 */
-function add_css$g(target) {
+function add_css$h(target) {
 	append_styles(target, "svelte-1mkvcuo", ".icon.svelte-1mkvcuo{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1mkvcuo > .button{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.icon.svelte-1mkvcuo > .button._disabled{cursor:not-allowed !important;opacity:0.2}.icon.svelte-1mkvcuo svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
 }
 // (56:4) {#if svg}
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let html_tag;
 	let html_anchor;
@@ -10650,9 +10650,9 @@ function create_if_block$6(ctx) {
 }
 // (55:2) <Button {onClick} {style} {eventName}>
-function create_default_slot$1(ctx) {
+function create_default_slot$6(ctx) {
 	let if_block_anchor;
-	let if_block = /*svg*/ ctx[3] && create_if_block$6(ctx);
+	let if_block = /*svg*/ ctx[3] && create_if_block$7(ctx);
 	return {
 		c() {
@@ -10672,7 +10672,7 @@ function create_default_slot$1(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$6(ctx);
+					if_block = create_if_block$7(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -10688,7 +10688,7 @@ function create_default_slot$1(ctx) {
 	};
 }
-function create_fragment$J(ctx) {
+function create_fragment$K(ctx) {
 	let div;
 	let button;
 	let current;
@@ -10698,7 +10698,7 @@ function create_fragment$J(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*style*/ ctx[2],
 				eventName: /*eventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$1] },
+				$$slots: { default: [create_default_slot$6] },
 				$$scope: { ctx }
 			}
 		});
@@ -10759,7 +10759,7 @@ function parseData(dataUrl) {
 	return decodeURIComponent(data).replaceAll('\'', '"');
 }
-function instance$J($$self, $$props, $$invalidate) {
+function instance$K($$self, $$props, $$invalidate) {
 	let svg;
 	let styleVariables;
 	let style;
@@ -10807,8 +10807,8 @@ class IconElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$J,
-			create_fragment$J,
+			instance$K,
+			create_fragment$K,
 			safe_not_equal,
 			{
 				icon: 4,
@@ -10818,18 +10818,18 @@ class IconElement extends SvelteComponent {
 				color: 6,
 				_style: 7
 			},
-			add_css$g
+			add_css$h
 		);
 	}
 }
 /* src/components/CodeElement.svelte generated by Svelte v3.53.1 */
-function add_css$f(target) {
+function add_css$g(target) {
 	append_styles(target, "svelte-ymsb9l", ".codeElement.svelte-ymsb9l{box-sizing:border-box;margin:0px;padding:0px;width:100%;height:100%}");
 }
-function create_fragment$I(ctx) {
+function create_fragment$J(ctx) {
 	let div;
 	let switch_instance;
 	let current;
@@ -10919,7 +10919,7 @@ function create_fragment$I(ctx) {
 	};
 }
-function instance$I($$self, $$props, $$invalidate) {
+function instance$J($$self, $$props, $$invalidate) {
 	let $data,
 		$$unsubscribe_data = noop,
 		$$subscribe_data = () => ($$unsubscribe_data(), $$unsubscribe_data = subscribe(data, $$value => $$invalidate(4, $data = $$value)), data);
@@ -10944,17 +10944,17 @@ function instance$I($$self, $$props, $$invalidate) {
 class CodeElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$I, create_fragment$I, safe_not_equal, { name: 0, component: 1, data: 2, style: 3 }, add_css$f);
+		init(this, options, instance$J, create_fragment$J, safe_not_equal, { name: 0, component: 1, data: 2, style: 3 }, add_css$g);
 	}
 }
 /* src/components/Flex.svelte generated by Svelte v3.53.1 */
-function add_css$e(target) {
+function add_css$f(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
-function create_fragment$H(ctx) {
+function create_fragment$I(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -11029,7 +11029,7 @@ function getFlexContext() {
 	return getContext(FlexContextKey);
 }
-function instance$H($$self, $$props, $$invalidate) {
+function instance$I($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'row' } = $$props;
 	let { width = '100%' } = $$props;
@@ -11055,8 +11055,8 @@ class Flex extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$H,
-			create_fragment$H,
+			instance$I,
+			create_fragment$I,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -11064,18 +11064,18 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$e
+			add_css$f
 		);
 	}
 }
 /* src/components/FlexItem.svelte generated by Svelte v3.53.1 */
-function add_css$d(target) {
+function add_css$e(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
-function create_fragment$G(ctx) {
+function create_fragment$H(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
@@ -11143,7 +11143,7 @@ function create_fragment$G(ctx) {
 	};
 }
-function instance$G($$self, $$props, $$invalidate) {
+function instance$H($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = '' } = $$props;
@@ -11186,7 +11186,7 @@ function instance$G($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$G, create_fragment$G, safe_not_equal, { length: 1, _style: 2 }, add_css$d);
+		init(this, options, instance$H, create_fragment$H, safe_not_equal, { length: 1, _style: 2 }, add_css$e);
 	}
 }
@@ -11302,7 +11302,7 @@ function create_default_slot_1(ctx) {
 }
 // (106:0) <StateItem {path}>
-function create_default_slot(ctx) {
+function create_default_slot$5(ctx) {
 	let modal;
 	let current;
@@ -11370,14 +11370,14 @@ function create_default_slot(ctx) {
 	};
 }
-function create_fragment$F(ctx) {
+function create_fragment$G(ctx) {
 	let stateitem;
 	let current;
 	stateitem = new StateItem({
 			props: {
 				path: /*path*/ ctx[0],
-				$$slots: { default: [create_default_slot] },
+				$$slots: { default: [create_default_slot$5] },
 				$$scope: { ctx }
 			}
 		});
@@ -11418,7 +11418,7 @@ function create_fragment$F(ctx) {
 	};
 }
-function instance$F($$self, $$props, $$invalidate) {
+function instance$G($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -11489,7 +11489,7 @@ class GridModalState extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$F, create_fragment$F, safe_not_equal, {
+		init(this, options, instance$G, create_fragment$G, safe_not_equal, {
 			path: 0,
 			onClick: 1,
 			clickEventName: 2,
@@ -11514,11 +11514,11 @@ class GridModalState extends SvelteComponent {
 /* src/components/TextBlock.svelte generated by Svelte v3.53.1 */
-function add_css$c(target) {
+function add_css$d(target) {
 	append_styles(target, "svelte-15pej1m", ".text-block.svelte-15pej1m.svelte-15pej1m{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:hidden}.text-block-inner.svelte-15pej1m.svelte-15pej1m{width:100%;height:auto}.text-direction-vertical.svelte-15pej1m.svelte-15pej1m{writing-mode:vertical-rl}.text-direction-vertical.svelte-15pej1m .text-block-inner.svelte-15pej1m{width:auto;height:100%}");
 }
-function create_fragment$E(ctx) {
+function create_fragment$F(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -11583,7 +11583,7 @@ function create_fragment$E(ctx) {
 	};
 }
-function instance$E($$self, $$props, $$invalidate) {
+function instance$F($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -11619,8 +11619,8 @@ class TextBlock extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$E,
-			create_fragment$E,
+			instance$F,
+			create_fragment$F,
 			safe_not_equal,
 			{
 				text: 0,
@@ -11629,18 +11629,18 @@ class TextBlock extends SvelteComponent {
 				textDirection: 1,
 				_style: 5
 			},
-			add_css$c
+			add_css$d
 		);
 	}
 }
 /* src/components/TextButtonBlock.svelte generated by Svelte v3.53.1 */
-function add_css$b(target) {
+function add_css$c(target) {
 	append_styles(target, "svelte-ff0k6r", ".text-button-block.svelte-ff0k6r{width:100%;height:100%;background-color:#000000;border-radius:4px}.text-button.svelte-ff0k6r{display:flex;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;color:#ffffff;font-size:14px;font-weight:bold;justify-content:center;align-items:center;padding:1px 6px 1px 6px;line-height:1.5}.text-button.svelte-ff0k6r:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-ff0k6r:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
-function create_fragment$D(ctx) {
+function create_fragment$E(ctx) {
 	let div;
 	let button;
 	let rendertext;
@@ -11714,7 +11714,7 @@ function create_fragment$D(ctx) {
 	};
 }
-function instance$D($$self, $$props, $$invalidate) {
+function instance$E($$self, $$props, $$invalidate) {
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -11756,8 +11756,8 @@ class TextButtonBlock extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$D,
-			create_fragment$D,
+			instance$E,
+			create_fragment$E,
 			safe_not_equal,
 			{
 				text: 0,
@@ -11767,18 +11767,18 @@ class TextButtonBlock extends SvelteComponent {
 				_buttonStyle: 1,
 				_style: 2
 			},
-			add_css$b
+			add_css$c
 		);
 	}
 }
 /* src/components/ImageBlock.svelte generated by Svelte v3.53.1 */
-function add_css$a(target) {
+function add_css$b(target) {
 	append_styles(target, "svelte-1pdw891", ".image-block.svelte-1pdw891{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}.image.svelte-1pdw891{width:100%;height:100%}.transport.svelte-1pdw891:hover,.transport.svelte-1pdw891:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
 }
-function create_fragment$C(ctx) {
+function create_fragment$D(ctx) {
 	let div;
 	let img;
 	let img_style_value;
@@ -11861,7 +11861,7 @@ function create_fragment$C(ctx) {
 	};
 }
-function instance$C($$self, $$props, $$invalidate) {
+function instance$D($$self, $$props, $$invalidate) {
 	let { src = 'https://admin.karte.io/action-editor2/public/images/no_image_en.svg' } = $$props;
 	let { alt = 'No Image' } = $$props;
 	let { transport = false } = $$props;
@@ -11901,8 +11901,8 @@ class ImageBlock extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$C,
-			create_fragment$C,
+			instance$D,
+			create_fragment$D,
 			safe_not_equal,
 			{
 				src: 0,
@@ -11914,7 +11914,7 @@ class ImageBlock extends SvelteComponent {
 				_imageStyle: 4,
 				_style: 5
 			},
-			add_css$a
+			add_css$b
 		);
 	}
 }
@@ -12012,107 +12012,570 @@ const toCssShadow = (p) => {
     };
 };
-/* src/components-flex/avatar/Avatar.svelte generated by Svelte v3.53.1 */
+/* src/components-flex/shared/elements/Clickable.svelte generated by Svelte v3.53.1 */
-function add_css$9(target) {
-	append_styles(target, "svelte-17xar9h", ".avatar.svelte-17xar9h{display:flex;align-items:center;overflow:hidden;flex-shrink:0}");
+function add_css$a(target) {
+	append_styles(target, "svelte-uxu0y3", ".clickable.svelte-uxu0y3{display:block;text-decoration:none;color:inherit;border:none;background:none;margin:0;padding:0}.clickable.svelte-uxu0y3:link,.clickable.svelte-uxu0y3:visited,.clickable.svelte-uxu0y3:active,.clickable.svelte-uxu0y3:hover{color:inherit}");
 }
-function create_fragment$B(ctx) {
-	let div;
-	let img;
-	let img_src_value;
-	let img_alt_value;
+// (35:0) {:else}
+function create_else_block$1(ctx) {
+	let button;
+	let current;
+	let mounted;
+	let dispose;
+	const default_slot_template = /*#slots*/ ctx[6].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[5], null);
+	let button_levels = [
+		{ class: CLICKABLE_CLASS },
+		{ style: /*style*/ ctx[1] },
+		dataAttrStopPropagation('click')
+	];
+	let button_data = {};
+	for (let i = 0; i < button_levels.length; i += 1) {
+		button_data = assign(button_data, button_levels[i]);
+	}
 	return {
 		c() {
-			div = element("div");
-			img = element("img");
+			button = element("button");
+			if (default_slot) default_slot.c();
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", {
-				class: true,
-				"data-layer-id": true,
-				style: true
-			});
-			var div_nodes = children(div);
-			img = claim_element(div_nodes, "IMG", { src: true, alt: true, style: true });
-			div_nodes.forEach(detach);
+			button = claim_element(nodes, "BUTTON", { class: true, style: true });
+			var button_nodes = children(button);
+			if (default_slot) default_slot.l(button_nodes);
+			button_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
-			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
-			attr(img, "style", /*imgStyle*/ ctx[2]);
-			attr(div, "class", "avatar svelte-17xar9h");
-			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
-			attr(div, "style", /*style*/ ctx[3]);
+			set_attributes(button, button_data);
+			toggle_class(button, "svelte-uxu0y3", true);
 		},
 		m(target, anchor) {
-			insert_hydration(target, div, anchor);
-			append_hydration(div, img);
-		},
-		p(ctx, [dirty]) {
-			if (dirty & /*props*/ 1 && !src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) {
-				attr(img, "src", img_src_value);
-			}
+			insert_hydration(target, button, anchor);
-			if (dirty & /*props*/ 1 && img_alt_value !== (img_alt_value = /*props*/ ctx[0].alt)) {
-				attr(img, "alt", img_alt_value);
+			if (default_slot) {
+				default_slot.m(button, null);
 			}
-			if (dirty & /*imgStyle*/ 4) {
-				attr(img, "style", /*imgStyle*/ ctx[2]);
-			}
+			if (button.autofocus) button.focus();
+			current = true;
-			if (dirty & /*layerId*/ 2) {
-				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			if (!mounted) {
+				dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[2]));
+				mounted = true;
 			}
-			if (dirty & /*style*/ 8) {
-				attr(div, "style", /*style*/ ctx[3]);
+		},
+		p(ctx, dirty) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 32)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[5],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[5])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[5], dirty, null),
+						null
+					);
+				}
 			}
+			set_attributes(button, button_data = get_spread_update(button_levels, [
+				{ class: CLICKABLE_CLASS },
+				(!current || dirty & /*style*/ 2) && { style: /*style*/ ctx[1] },
+				dataAttrStopPropagation('click')
+			]));
+			toggle_class(button, "svelte-uxu0y3", true);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
 		},
-		i: noop,
-		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(button);
+			if (default_slot) default_slot.d(detaching);
+			mounted = false;
+			dispose();
 		}
 	};
 }
-function instance$B($$self, $$props, $$invalidate) {
-	let style;
-	let imgStyle;
-	let { props = {} } = $$props;
-	let { layerId = '' } = $$props;
-	const VARIANTS = {
-		shape: {
-			circle: { borderRadius: '100%' },
-			square: { borderRadius: '4px' }
-		}
-	};
+// (28:39)
+function create_if_block_1$1(ctx) {
+	let div;
+	let current;
+	const default_slot_template = /*#slots*/ ctx[6].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[5], null);
-	const size = props.size ?? 64;
+	return {
+		c() {
+			div = element("div");
+			if (default_slot) default_slot.c();
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true, style: true });
+			var div_nodes = children(div);
+			if (default_slot) default_slot.l(div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "" + (null_to_empty(CLICKABLE_CLASS) + " svelte-uxu0y3"));
+			attr(div, "style", /*style*/ ctx[1]);
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
-	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(0, props = $$props.props);
-		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
-	};
+			if (default_slot) {
+				default_slot.m(div, null);
+			}
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(3, style = objToStyle({
-				width: `${size}px`,
-				height: `${size}px`,
-				...VARIANTS.shape[props.shape ?? 'square'],
-				...props.bordered && { border: `1px solid #dbdbdb` },
-				...toCssCommon(props)
-			}));
-		}
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 32)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[5],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[5])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[5], dirty, null),
+						null
+					);
+				}
+			}
+			if (!current || dirty & /*style*/ 2) {
+				attr(div, "style", /*style*/ ctx[1]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (default_slot) default_slot.d(detaching);
+		}
+	};
+}
+// (17:0) {#if onClick.operation === 'linkTo'}
+function create_if_block$6(ctx) {
+	let a;
+	let a_href_value;
+	let a_target_value;
+	let current;
+	let mounted;
+	let dispose;
+	const default_slot_template = /*#slots*/ ctx[6].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[5], null);
+	let a_levels = [
+		{ class: CLICKABLE_CLASS },
+		{ style: /*style*/ ctx[1] },
+		{
+			href: a_href_value = /*onClick*/ ctx[0].args[2]
+			? decodeURI(/*onClick*/ ctx[0].args[0])
+			: /*onClick*/ ctx[0].args[0]
+		},
+		{
+			target: a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null
+		},
+		dataAttrStopPropagation('click')
+	];
+	let a_data = {};
+	for (let i = 0; i < a_levels.length; i += 1) {
+		a_data = assign(a_data, a_levels[i]);
+	}
+	return {
+		c() {
+			a = element("a");
+			if (default_slot) default_slot.c();
+			this.h();
+		},
+		l(nodes) {
+			a = claim_element(nodes, "A", {
+				class: true,
+				style: true,
+				href: true,
+				target: true
+			});
+			var a_nodes = children(a);
+			if (default_slot) default_slot.l(a_nodes);
+			a_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			set_attributes(a, a_data);
+			toggle_class(a, "svelte-uxu0y3", true);
+		},
+		m(target, anchor) {
+			insert_hydration(target, a, anchor);
+			if (default_slot) {
+				default_slot.m(a, null);
+			}
+			current = true;
+			if (!mounted) {
+				dispose = listen(a, "click", prevent_default(checkStopPropagation('click', /*handleClick*/ ctx[2])));
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 32)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[5],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[5])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[5], dirty, null),
+						null
+					);
+				}
+			}
+			set_attributes(a, a_data = get_spread_update(a_levels, [
+				{ class: CLICKABLE_CLASS },
+				(!current || dirty & /*style*/ 2) && { style: /*style*/ ctx[1] },
+				(!current || dirty & /*onClick*/ 1 && a_href_value !== (a_href_value = /*onClick*/ ctx[0].args[2]
+				? decodeURI(/*onClick*/ ctx[0].args[0])
+				: /*onClick*/ ctx[0].args[0])) && { href: a_href_value },
+				(!current || dirty & /*onClick*/ 1 && a_target_value !== (a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null)) && { target: a_target_value },
+				dataAttrStopPropagation('click')
+			]));
+			toggle_class(a, "svelte-uxu0y3", true);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(a);
+			if (default_slot) default_slot.d(detaching);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+function create_fragment$C(ctx) {
+	let current_block_type_index;
+	let if_block;
+	let if_block_anchor;
+	let current;
+	const if_block_creators = [create_if_block$6, create_if_block_1$1, create_else_block$1];
+	const if_blocks = [];
+	function select_block_type(ctx, dirty) {
+		if (/*onClick*/ ctx[0].operation === 'linkTo') return 0;
+		if (/*onClick*/ ctx[0].operation === 'none') return 1;
+		return 2;
+	}
+	current_block_type_index = select_block_type(ctx);
+	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+	return {
+		c() {
+			if_block.c();
+			if_block_anchor = empty();
+		},
+		l(nodes) {
+			if_block.l(nodes);
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if_blocks[current_block_type_index].m(target, anchor);
+			insert_hydration(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			let previous_block_index = current_block_type_index;
+			current_block_type_index = select_block_type(ctx);
+			if (current_block_type_index === previous_block_index) {
+				if_blocks[current_block_type_index].p(ctx, dirty);
+			} else {
+				group_outros();
+				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+					if_blocks[previous_block_index] = null;
+				});
+				check_outros();
+				if_block = if_blocks[current_block_type_index];
+				if (!if_block) {
+					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+					if_block.c();
+				} else {
+					if_block.p(ctx, dirty);
+				}
+				transition_in(if_block, 1);
+				if_block.m(if_block_anchor.parentNode, if_block_anchor);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if_blocks[current_block_type_index].d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+const CLICKABLE_CLASS = 'clickable';
+function instance$C($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { eventName = '' } = $$props;
+	let { eventValue = undefined } = $$props;
+	let { style = '' } = $$props;
+	function handleClick() {
+		if (eventName) {
+			send_event(eventName, eventValue);
+		}
+		execOnClickOperation(onClick);
+	}
+	$$self.$$set = $$props => {
+		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
+		if ('eventName' in $$props) $$invalidate(3, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(4, eventValue = $$props.eventValue);
+		if ('style' in $$props) $$invalidate(1, style = $$props.style);
+		if ('$$scope' in $$props) $$invalidate(5, $$scope = $$props.$$scope);
+	};
+	return [onClick, style, handleClick, eventName, eventValue, $$scope, slots];
+}
+class Clickable extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(
+			this,
+			options,
+			instance$C,
+			create_fragment$C,
+			safe_not_equal,
+			{
+				onClick: 0,
+				eventName: 3,
+				eventValue: 4,
+				style: 1
+			},
+			add_css$a
+		);
+	}
+}
+/* src/components-flex/avatar/Avatar.svelte generated by Svelte v3.53.1 */
+function add_css$9(target) {
+	append_styles(target, "svelte-17xar9h", ".avatar.svelte-17xar9h{display:flex;align-items:center;overflow:hidden;flex-shrink:0}");
+}
+// (34:2) <CLICKABLE     onClick={props.onClick}     eventName={props.eventName}     eventValue={props.eventValue}   >
+function create_default_slot$4(ctx) {
+	let img;
+	let img_src_value;
+	let img_alt_value;
+	return {
+		c() {
+			img = element("img");
+			this.h();
+		},
+		l(nodes) {
+			img = claim_element(nodes, "IMG", { src: true, alt: true, style: true });
+			this.h();
+		},
+		h() {
+			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
+			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
+			attr(img, "style", /*imgStyle*/ ctx[2]);
+		},
+		m(target, anchor) {
+			insert_hydration(target, img, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*props*/ 1 && !src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) {
+				attr(img, "src", img_src_value);
+			}
+			if (dirty & /*props*/ 1 && img_alt_value !== (img_alt_value = /*props*/ ctx[0].alt)) {
+				attr(img, "alt", img_alt_value);
+			}
+			if (dirty & /*imgStyle*/ 4) {
+				attr(img, "style", /*imgStyle*/ ctx[2]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(img);
+		}
+	};
+}
+function create_fragment$B(ctx) {
+	let div;
+	let clickable;
+	let current;
+	clickable = new Clickable({
+			props: {
+				onClick: /*props*/ ctx[0].onClick,
+				eventName: /*props*/ ctx[0].eventName,
+				eventValue: /*props*/ ctx[0].eventValue,
+				$$slots: { default: [create_default_slot$4] },
+				$$scope: { ctx }
+			}
+		});
+	return {
+		c() {
+			div = element("div");
+			create_component(clickable.$$.fragment);
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", {
+				class: true,
+				"data-layer-id": true,
+				style: true
+			});
+			var div_nodes = children(div);
+			claim_component(clickable.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "avatar svelte-17xar9h");
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			attr(div, "style", /*style*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			mount_component(clickable, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const clickable_changes = {};
+			if (dirty & /*props*/ 1) clickable_changes.onClick = /*props*/ ctx[0].onClick;
+			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
+			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
+			if (dirty & /*$$scope, props, imgStyle*/ 69) {
+				clickable_changes.$$scope = { dirty, ctx };
+			}
+			clickable.$set(clickable_changes);
+			if (!current || dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+			if (!current || dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(clickable.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(clickable.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(clickable);
+		}
+	};
+}
+function instance$B($$self, $$props, $$invalidate) {
+	let style;
+	let imgStyle;
+	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
+	const VARIANTS = {
+		shape: {
+			circle: { borderRadius: '100%' },
+			square: { borderRadius: '4px' }
+		}
+	};
+	const size = props.size ?? 64;
+	$$self.$$set = $$props => {
+		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
+	};
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*props*/ 1) {
+			$$invalidate(3, style = objToStyle({
+				width: `${size}px`,
+				height: `${size}px`,
+				...VARIANTS.shape[props.shape ?? 'square'],
+				...props.bordered && { border: `1px solid #dbdbdb` },
+				...toCssCommon(props)
+			}));
+		}
 	};
 	$$invalidate(2, imgStyle = objToStyle({
@@ -14000,29 +14463,26 @@ function add_css$8(target) {
 	append_styles(target, "svelte-1ou0ruz", ".icon.svelte-1ou0ruz{display:flex;align-items:center;overflow:hidden;width:auto}");
 }
-// (20:0) {#if (IconComponent)}
+// (21:0) {#if (IconComponent)}
 function create_if_block$5(ctx) {
 	let div;
-	let switch_instance;
+	let clickable;
 	let current;
-	var switch_value = /*IconComponent*/ ctx[2];
-	function switch_props(ctx) {
-		return {
+	clickable = new Clickable({
 			props: {
-				color: /*props*/ ctx[0].color ?? 'currentColor'
+				onClick: /*props*/ ctx[0].onClick,
+				eventName: /*props*/ ctx[0].eventName,
+				eventValue: /*props*/ ctx[0].eventValue,
+				$$slots: { default: [create_default_slot$3] },
+				$$scope: { ctx }
 			}
-		};
-	}
-	if (switch_value) {
-		switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
-	}
+		});
 	return {
 		c() {
 			div = element("div");
-			if (switch_instance) create_component(switch_instance.$$.fragment);
+			create_component(clickable.$$.fragment);
 			this.h();
 		},
 		l(nodes) {
@@ -14033,7 +14493,7 @@ function create_if_block$5(ctx) {
 			});
 			var div_nodes = children(div);
-			if (switch_instance) claim_component(switch_instance.$$.fragment, div_nodes);
+			claim_component(clickable.$$.fragment, div_nodes);
 			div_nodes.forEach(detach);
 			this.h();
 		},
@@ -14044,7 +14504,76 @@ function create_if_block$5(ctx) {
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
-			if (switch_instance) mount_component(switch_instance, div, null);
+			mount_component(clickable, div, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const clickable_changes = {};
+			if (dirty & /*props*/ 1) clickable_changes.onClick = /*props*/ ctx[0].onClick;
+			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
+			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
+			if (dirty & /*$$scope, IconComponent, props*/ 37) {
+				clickable_changes.$$scope = { dirty, ctx };
+			}
+			clickable.$set(clickable_changes);
+			if (!current || dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			}
+			if (!current || dirty & /*style*/ 8) {
+				attr(div, "style", /*style*/ ctx[3]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(clickable.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(clickable.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(clickable);
+		}
+	};
+}
+// (23:4) <CLICKABLE onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+function create_default_slot$3(ctx) {
+	let switch_instance;
+	let switch_instance_anchor;
+	let current;
+	var switch_value = /*IconComponent*/ ctx[2];
+	function switch_props(ctx) {
+		return {
+			props: {
+				color: /*props*/ ctx[0].color ?? 'currentColor'
+			}
+		};
+	}
+	if (switch_value) {
+		switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
+	}
+	return {
+		c() {
+			if (switch_instance) create_component(switch_instance.$$.fragment);
+			switch_instance_anchor = empty();
+		},
+		l(nodes) {
+			if (switch_instance) claim_component(switch_instance.$$.fragment, nodes);
+			switch_instance_anchor = empty();
+		},
+		m(target, anchor) {
+			if (switch_instance) mount_component(switch_instance, target, anchor);
+			insert_hydration(target, switch_instance_anchor, anchor);
 			current = true;
 		},
 		p(ctx, dirty) {
@@ -14067,21 +14596,13 @@ function create_if_block$5(ctx) {
 					switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
 					create_component(switch_instance.$$.fragment);
 					transition_in(switch_instance.$$.fragment, 1);
-					mount_component(switch_instance, div, null);
+					mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
 				} else {
 					switch_instance = null;
 				}
 			} else if (switch_value) {
 				switch_instance.$set(switch_instance_changes);
 			}
-			if (!current || dirty & /*layerId*/ 2) {
-				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
-			}
-			if (!current || dirty & /*style*/ 8) {
-				attr(div, "style", /*style*/ ctx[3]);
-			}
 		},
 		i(local) {
 			if (current) return;
@@ -14093,8 +14614,8 @@ function create_if_block$5(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div);
-			if (switch_instance) destroy_component(switch_instance);
+			if (detaching) detach(switch_instance_anchor);
+			if (switch_instance) destroy_component(switch_instance, detaching);
 		}
 	};
 }
@@ -14377,7 +14898,7 @@ function add_css$7(target) {
 	append_styles(target, "svelte-cmn44g", ".button.svelte-cmn44g{display:inline-flex;align-content:center;justify-content:center;gap:0.8em;cursor:pointer;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}.button-icon.svelte-cmn44g{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
-// (45:2) {#if (props.isIcon && props.iconVariant)}
+// (37:4) {#if props.isIcon && props.iconVariant}
 function create_if_block$4(ctx) {
 	let div;
 	let icon;
@@ -14443,134 +14964,166 @@ function create_if_block$4(ctx) {
 	};
 }
-function create_fragment$7(ctx) {
-	let button;
+// (36:2) <CLICKABLE onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+function create_default_slot$2(ctx) {
 	let t0;
 	let span;
 	let t1_value = (/*props*/ ctx[0].label ?? buttonPropsDefault.label) + "";
 	let t1;
 	let current;
-	let mounted;
-	let dispose;
 	let if_block = /*props*/ ctx[0].isIcon && /*props*/ ctx[0].iconVariant && create_if_block$4(ctx);
 	return {
 		c() {
-			button = element("button");
 			if (if_block) if_block.c();
 			t0 = space();
 			span = element("span");
 			t1 = text(t1_value);
+		},
+		l(nodes) {
+			if (if_block) if_block.l(nodes);
+			t0 = claim_space(nodes);
+			span = claim_element(nodes, "SPAN", {});
+			var span_nodes = children(span);
+			t1 = claim_text(span_nodes, t1_value);
+			span_nodes.forEach(detach);
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert_hydration(target, t0, anchor);
+			insert_hydration(target, span, anchor);
+			append_hydration(span, t1);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*props*/ ctx[0].isIcon && /*props*/ ctx[0].iconVariant) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+					if (dirty & /*props*/ 1) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block$4(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(t0.parentNode, t0);
+				}
+			} else if (if_block) {
+				group_outros();
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+				check_outros();
+			}
+			if ((!current || dirty & /*props*/ 1) && t1_value !== (t1_value = (/*props*/ ctx[0].label ?? buttonPropsDefault.label) + "")) set_data(t1, t1_value);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(span);
+		}
+	};
+}
+function create_fragment$7(ctx) {
+	let div;
+	let clickable;
+	let current;
+	clickable = new Clickable({
+			props: {
+				onClick: /*props*/ ctx[0].onClick,
+				eventName: /*props*/ ctx[0].eventName,
+				eventValue: /*props*/ ctx[0].eventValue,
+				$$slots: { default: [create_default_slot$2] },
+				$$scope: { ctx }
+			}
+		});
+	return {
+		c() {
+			div = element("div");
+			create_component(clickable.$$.fragment);
 			this.h();
 		},
 		l(nodes) {
-			button = claim_element(nodes, "BUTTON", {
+			div = claim_element(nodes, "DIV", {
+				class: true,
 				"data-layer-id": true,
-				style: true,
-				class: true
+				style: true
 			});
-			var button_nodes = children(button);
-			if (if_block) if_block.l(button_nodes);
-			t0 = claim_space(button_nodes);
-			span = claim_element(button_nodes, "SPAN", {});
-			var span_nodes = children(span);
-			t1 = claim_text(span_nodes, t1_value);
-			span_nodes.forEach(detach);
-			button_nodes.forEach(detach);
+			var div_nodes = children(div);
+			claim_component(clickable.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(button, "data-layer-id", /*layerId*/ ctx[1]);
-			attr(button, "style", /*style*/ ctx[2]);
-			attr(button, "class", "button svelte-cmn44g");
+			attr(div, "class", "button svelte-cmn44g");
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			attr(div, "style", /*style*/ ctx[2]);
 		},
 		m(target, anchor) {
-			insert_hydration(target, button, anchor);
-			if (if_block) if_block.m(button, null);
-			append_hydration(button, t0);
-			append_hydration(button, span);
-			append_hydration(span, t1);
+			insert_hydration(target, div, anchor);
+			mount_component(clickable, div, null);
 			current = true;
-			if (!mounted) {
-				dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[4]));
-				mounted = true;
-			}
 		},
 		p(ctx, [dirty]) {
-			if (/*props*/ ctx[0].isIcon && /*props*/ ctx[0].iconVariant) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
-					if (dirty & /*props*/ 1) {
-						transition_in(if_block, 1);
-					}
-				} else {
-					if_block = create_if_block$4(ctx);
-					if_block.c();
-					transition_in(if_block, 1);
-					if_block.m(button, t0);
-				}
-			} else if (if_block) {
-				group_outros();
-				transition_out(if_block, 1, 1, () => {
-					if_block = null;
-				});
+			const clickable_changes = {};
+			if (dirty & /*props*/ 1) clickable_changes.onClick = /*props*/ ctx[0].onClick;
+			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
+			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
-				check_outros();
+			if (dirty & /*$$scope, props*/ 17) {
+				clickable_changes.$$scope = { dirty, ctx };
 			}
-			if ((!current || dirty & /*props*/ 1) && t1_value !== (t1_value = (/*props*/ ctx[0].label ?? buttonPropsDefault.label) + "")) set_data(t1, t1_value);
+			clickable.$set(clickable_changes);
 			if (!current || dirty & /*layerId*/ 2) {
-				attr(button, "data-layer-id", /*layerId*/ ctx[1]);
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			}
 			if (!current || dirty & /*style*/ 4) {
-				attr(button, "style", /*style*/ ctx[2]);
+				attr(div, "style", /*style*/ ctx[2]);
 			}
 		},
 		i(local) {
 			if (current) return;
-			transition_in(if_block);
+			transition_in(clickable.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			transition_out(if_block);
+			transition_out(clickable.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(button);
-			if (if_block) if_block.d();
-			mounted = false;
-			dispose();
+			if (detaching) detach(div);
+			destroy_component(clickable);
 		}
 	};
 }
 function instance$7($$self, $$props, $$invalidate) {
 	let style;
-	let { onClick = { operation: 'none', args: [] } } = $$props;
-	let { eventName = '' } = $$props;
-	let { eventValue = undefined } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
 	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
-	function handleClick() {
-		if (eventName) {
-			send_event(eventName, eventValue);
-		}
-		execOnClickOperation(onClick);
-	}
 	$$self.$$set = $$props => {
-		if ('onClick' in $$props) $$invalidate(5, onClick = $$props.onClick);
-		if ('eventName' in $$props) $$invalidate(6, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(7, eventValue = $$props.eventValue);
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
 		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
 	};
@@ -14601,37 +15154,13 @@ function instance$7($$self, $$props, $$invalidate) {
 		}
 	};
-	return [
-		props,
-		layerId,
-		style,
-		buttonThemeStyle,
-		handleClick,
-		onClick,
-		eventName,
-		eventValue
-	];
+	return [props, layerId, style, buttonThemeStyle];
 }
 class Button extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(
-			this,
-			options,
-			instance$7,
-			create_fragment$7,
-			safe_not_equal,
-			{
-				onClick: 5,
-				eventName: 6,
-				eventValue: 7,
-				props: 0,
-				layerId: 1
-			},
-			add_css$7
-		);
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, { props: 0, layerId: 1 }, add_css$7);
 	}
 }
@@ -15290,8 +15819,8 @@ function add_css$4(target) {
 	append_styles(target, "svelte-180u8ho", ".image.svelte-180u8ho{max-width:100%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}.image-object.svelte-180u8ho{width:100%;overflow:hidden}.image-img.svelte-180u8ho{vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none}");
 }
-function create_fragment$4(ctx) {
-	let div;
+// (16:2) <CLICKABLE onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+function create_default_slot$1(ctx) {
 	let object;
 	let img;
 	let img_src_value;
@@ -15299,24 +15828,15 @@ function create_fragment$4(ctx) {
 	return {
 		c() {
-			div = element("div");
 			object = element("object");
 			img = element("img");
 			this.h();
 		},
 		l(nodes) {
-			div = claim_element(nodes, "DIV", {
-				"data-layer-id": true,
-				class: true,
-				style: true
-			});
-			var div_nodes = children(div);
-			object = claim_element(div_nodes, "OBJECT", { style: true, class: true });
+			object = claim_element(nodes, "OBJECT", { style: true, class: true });
 			var object_nodes = children(object);
 			img = claim_element(object_nodes, "IMG", { src: true, alt: true, class: true });
 			object_nodes.forEach(detach);
-			div_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
@@ -15325,16 +15845,12 @@ function create_fragment$4(ctx) {
 			attr(img, "class", "image-img svelte-180u8ho");
 			attr(object, "style", /*objectStyle*/ ctx[2]);
 			attr(object, "class", "image-object svelte-180u8ho");
-			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
-			attr(div, "class", "image svelte-180u8ho");
-			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
-			insert_hydration(target, div, anchor);
-			append_hydration(div, object);
+			insert_hydration(target, object, anchor);
 			append_hydration(object, img);
 		},
-		p(ctx, [dirty]) {
+		p(ctx, dirty) {
 			if (dirty & /*props*/ 1 && !src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) {
 				attr(img, "src", img_src_value);
 			}
@@ -15346,19 +15862,88 @@ function create_fragment$4(ctx) {
 			if (dirty & /*objectStyle*/ 4) {
 				attr(object, "style", /*objectStyle*/ ctx[2]);
 			}
+		},
+		d(detaching) {
+			if (detaching) detach(object);
+		}
+	};
+}
+function create_fragment$4(ctx) {
+	let div;
+	let clickable;
+	let current;
+	clickable = new Clickable({
+			props: {
+				onClick: /*props*/ ctx[0].onClick,
+				eventName: /*props*/ ctx[0].eventName,
+				eventValue: /*props*/ ctx[0].eventValue,
+				$$slots: { default: [create_default_slot$1] },
+				$$scope: { ctx }
+			}
+		});
+	return {
+		c() {
+			div = element("div");
+			create_component(clickable.$$.fragment);
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", {
+				"data-layer-id": true,
+				class: true,
+				style: true
+			});
+			var div_nodes = children(div);
+			claim_component(clickable.$$.fragment, div_nodes);
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
+			attr(div, "class", "image svelte-180u8ho");
+			attr(div, "style", /*style*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			mount_component(clickable, div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const clickable_changes = {};
+			if (dirty & /*props*/ 1) clickable_changes.onClick = /*props*/ ctx[0].onClick;
+			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
+			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
+			if (dirty & /*$$scope, objectStyle, props*/ 21) {
+				clickable_changes.$$scope = { dirty, ctx };
+			}
-			if (dirty & /*layerId*/ 2) {
+			clickable.$set(clickable_changes);
+			if (!current || dirty & /*layerId*/ 2) {
 				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			}
-			if (dirty & /*style*/ 8) {
+			if (!current || dirty & /*style*/ 8) {
 				attr(div, "style", /*style*/ ctx[3]);
 			}
 		},
-		i: noop,
-		o: noop,
+		i(local) {
+			if (current) return;
+			transition_in(clickable.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(clickable.$$.fragment, local);
+			current = false;
+		},
 		d(detaching) {
 			if (detaching) detach(div);
+			destroy_component(clickable);
 		}
 	};
 }
@@ -15403,16 +15988,76 @@ function add_css$3(target) {
 	append_styles(target, "svelte-1g6q4hu", ".layout.svelte-1g6q4hu{margin:0}");
 }
+// (25:2) <CLICKABLE onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+function create_default_slot(ctx) {
+	let current;
+	const default_slot_template = /*#slots*/ ctx[3].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
+	return {
+		c() {
+			if (default_slot) default_slot.c();
+		},
+		l(nodes) {
+			if (default_slot) default_slot.l(nodes);
+		},
+		m(target, anchor) {
+			if (default_slot) {
+				default_slot.m(target, anchor);
+			}
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 16)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[4],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[4])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[4], dirty, null),
+						null
+					);
+				}
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot, local);
+			current = false;
+		},
+		d(detaching) {
+			if (default_slot) default_slot.d(detaching);
+		}
+	};
+}
 function create_fragment$3(ctx) {
 	let div;
+	let clickable;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[4].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);
+	clickable = new Clickable({
+			props: {
+				onClick: /*props*/ ctx[0].onClick,
+				eventName: /*props*/ ctx[0].eventName,
+				eventValue: /*props*/ ctx[0].eventValue,
+				$$slots: { default: [create_default_slot] },
+				$$scope: { ctx }
+			}
+		});
 	return {
 		c() {
 			div = element("div");
-			if (default_slot) default_slot.c();
+			create_component(clickable.$$.fragment);
 			this.h();
 		},
 		l(nodes) {
@@ -15423,60 +16068,52 @@ function create_fragment$3(ctx) {
 			});
 			var div_nodes = children(div);
-			if (default_slot) default_slot.l(div_nodes);
+			claim_component(clickable.$$.fragment, div_nodes);
 			div_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(div, "data-layer-id", /*layerId*/ ctx[0]);
+			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(div, "class", "layout svelte-1g6q4hu");
-			attr(div, "style", /*style*/ ctx[1]);
+			attr(div, "style", /*style*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
-			if (default_slot) {
-				default_slot.m(div, null);
-			}
+			mount_component(clickable, div, null);
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 8)) {
-					update_slot_base(
-						default_slot,
-						default_slot_template,
-						ctx,
-						/*$$scope*/ ctx[3],
-						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[3])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[3], dirty, null),
-						null
-					);
-				}
+			const clickable_changes = {};
+			if (dirty & /*props*/ 1) clickable_changes.onClick = /*props*/ ctx[0].onClick;
+			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
+			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
+			if (dirty & /*$$scope*/ 16) {
+				clickable_changes.$$scope = { dirty, ctx };
 			}
-			if (!current || dirty & /*layerId*/ 1) {
-				attr(div, "data-layer-id", /*layerId*/ ctx[0]);
+			clickable.$set(clickable_changes);
+			if (!current || dirty & /*layerId*/ 2) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[1]);
 			}
-			if (!current || dirty & /*style*/ 2) {
-				attr(div, "style", /*style*/ ctx[1]);
+			if (!current || dirty & /*style*/ 4) {
+				attr(div, "style", /*style*/ ctx[2]);
 			}
 		},
 		i(local) {
 			if (current) return;
-			transition_in(default_slot, local);
+			transition_in(clickable.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			transition_out(default_slot, local);
+			transition_out(clickable.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(div);
-			if (default_slot) default_slot.d(detaching);
+			destroy_component(clickable);
 		}
 	};
 }
@@ -15488,14 +16125,14 @@ function instance$3($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	$$self.$$set = $$props => {
-		if ('props' in $$props) $$invalidate(2, props = $$props.props);
-		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
-		if ('$$scope' in $$props) $$invalidate(3, $$scope = $$props.$$scope);
+		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
+		if ('$$scope' in $$props) $$invalidate(4, $$scope = $$props.$$scope);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*props*/ 4) {
-			$$invalidate(1, style = objToStyle({
+		if ($$self.$$.dirty & /*props*/ 1) {
+			$$invalidate(2, style = objToStyle({
 				display: props.display ?? 'flex',
 				flexDirection: props.direction,
 				alignItems: props.align,
@@ -15514,13 +16151,13 @@ function instance$3($$self, $$props, $$invalidate) {
 		}
 	};
-	return [layerId, style, props, $$scope, slots];
+	return [props, layerId, style, slots, $$scope];
 }
 class Layout extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, { props: 2, layerId: 0 }, add_css$3);
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { props: 0, layerId: 1 }, add_css$3);
 	}
 }
@@ -15811,7 +16448,7 @@ class BackgroundOverlay extends SvelteComponent {
 /* src/components-flex/modal/Modal.svelte generated by Svelte v3.53.1 */
 function add_css(target) {
-	append_styles(target, "svelte-5997yi", ".modal.svelte-5997yi{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-5997yi > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-5997yi{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-5997yi{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
+	append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 // (253:0) {:else}
@@ -15977,7 +16614,7 @@ function create_if_block(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-5997yi"));
+			attr(div, "class", div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-45ue06"));
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
 			attr(div, "style", Array.from(/*modalStyles*/ ctx[12]).join(';'));
@@ -16010,7 +16647,7 @@ function create_if_block(ctx) {
 				}
 			}
-			if (!current || dirty & /*useBreakPoint*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-5997yi"))) {
+			if (!current || dirty & /*useBreakPoint*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-45ue06"))) {
 				attr(div, "class", div_class_value);
 			}
 		},