@plaidev/karte-action-sdk 1.1.245 → 1.1.246-28737598.88cb0f93

package/dist/index.es.js

@@ -2905,7 +2905,7 @@ const LAYOUT_COMPONENT_NAMES = [
 
 /* src/components/Header.svelte generated by Svelte v3.53.1 */
 
-function create_if_block$g(ctx) {
+function create_if_block$h(ctx) {
 	let link;
 
 	return {
@@ -2929,9 +2929,9 @@ function create_if_block$g(ctx) {
 	};
 }
 
-function create_fragment$1c(ctx) {
+function create_fragment$1f(ctx) {
 	let head;
-	let if_block = /*googleFontUrl*/ ctx[0] && create_if_block$g(ctx);
+	let if_block = /*googleFontUrl*/ ctx[0] && create_if_block$h(ctx);
 
 	return {
 		c() {
@@ -2947,7 +2947,7 @@ function create_fragment$1c(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$g(ctx);
+					if_block = create_if_block$h(ctx);
 					if_block.c();
 					if_block.m(head, null);
 				}
@@ -2965,7 +2965,7 @@ function create_fragment$1c(ctx) {
 	};
 }
 
-function instance$1c($$self, $$props, $$invalidate) {
+function instance$1f($$self, $$props, $$invalidate) {
 	let $fonts;
 	component_subscribe($$self, fonts, $$value => $$invalidate(1, $fonts = $$value));
 	let googleFontUrl = '';
@@ -2994,13 +2994,13 @@ function instance$1c($$self, $$props, $$invalidate) {
 class Header extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1c, create_fragment$1c, safe_not_equal, {});
+		init(this, options, instance$1f, create_fragment$1f, safe_not_equal, {});
 	}
 }
 
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$1b(ctx) {
+function create_fragment$1e(ctx) {
 	let header;
 	let t;
 	let current;
@@ -3059,7 +3059,7 @@ function create_fragment$1b(ctx) {
 	};
 }
 
-function instance$1b($$self, $$props, $$invalidate) {
+function instance$1e($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -3072,18 +3072,18 @@ function instance$1b($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1b, create_fragment$1b, safe_not_equal, {});
+		init(this, options, instance$1e, create_fragment$1e, safe_not_equal, {});
 	}
 }
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$D(target) {
-	append_styles(target, "svelte-1amihue", ".state-item.svelte-1amihue{position:absolute;display:none}");
+function add_css$F(target) {
+	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
 // (23:0) {#if $state === path}
-function create_if_block$f(ctx) {
+function create_if_block$g(ctx) {
 	let div;
 	let t;
 	let current;
@@ -3096,7 +3096,7 @@ function create_if_block$f(ctx) {
 			t = space();
 			if (default_slot) default_slot.c();
 			attr(div, "data-state-path", /*path*/ ctx[0]);
-			attr(div, "class", "state-item svelte-1amihue");
+			attr(div, "class", "state-item svelte-2qb6dm");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -3145,10 +3145,10 @@ function create_if_block$f(ctx) {
 	};
 }
 
-function create_fragment$1a(ctx) {
+function create_fragment$1d(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$f(ctx);
+	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$g(ctx);
 
 	return {
 		c() {
@@ -3169,7 +3169,7 @@ function create_fragment$1a(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$f(ctx);
+					if_block = create_if_block$g(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -3206,7 +3206,7 @@ function getStateItemContext() {
 	return getContext(STATE_ITEM_CONTEXT_KEY);
 }
 
-function instance$1a($$self, $$props, $$invalidate) {
+function instance$1d($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -3232,7 +3232,7 @@ function instance$1a($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1a, create_fragment$1a, safe_not_equal, { path: 0 }, add_css$D);
+		init(this, options, instance$1d, create_fragment$1d, safe_not_equal, { path: 0 }, add_css$F);
 	}
 }
 
@@ -3417,12 +3417,12 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 
 /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
 
-function add_css$C(target) {
-	append_styles(target, "svelte-g6ucc2", ".background.svelte-g6ucc2{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
+function add_css$E(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$e(ctx) {
+function create_if_block$f(ctx) {
 	let div;
 	let div_class_value;
 	let mounted;
@@ -3431,7 +3431,7 @@ function create_if_block$e(ctx) {
 	return {
 		c() {
 			div = element("div");
-			attr(div, "class", div_class_value = "" + (null_to_empty(['background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-g6ucc2"));
+			attr(div, "class", div_class_value = "" + (null_to_empty(['background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-1d4fta"));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -3442,7 +3442,7 @@ function create_if_block$e(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*className*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(['background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-g6ucc2"))) {
+			if (dirty & /*className*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(['background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-1d4fta"))) {
 				attr(div, "class", div_class_value);
 			}
 		},
@@ -3454,9 +3454,9 @@ function create_if_block$e(ctx) {
 	};
 }
 
-function create_fragment$19(ctx) {
+function create_fragment$1c(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverlay*/ ctx[0] && create_if_block$e(ctx);
+	let if_block = /*backgroundOverlay*/ ctx[0] && create_if_block$f(ctx);
 
 	return {
 		c() {
@@ -3472,7 +3472,7 @@ function create_fragment$19(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$e(ctx);
+					if_block = create_if_block$f(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -3490,7 +3490,7 @@ function create_fragment$19(ctx) {
 	};
 }
 
-function instance$19($$self, $$props, $$invalidate) {
+function instance$1c($$self, $$props, $$invalidate) {
 	let { backgroundOverlay = false } = $$props;
 	let { class: className = undefined } = $$props;
 	const dispatch = createEventDispatcher();
@@ -3507,7 +3507,7 @@ function instance$19($$self, $$props, $$invalidate) {
 let BackgroundOverlay$1 = class BackgroundOverlay extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$19, create_fragment$19, safe_not_equal, { backgroundOverlay: 0, class: 1 }, add_css$C);
+		init(this, options, instance$1c, create_fragment$1c, safe_not_equal, { backgroundOverlay: 0, class: 1 }, add_css$E);
 	}
 };
 
@@ -3547,8 +3547,8 @@ function checkStopPropagation(eventName, handler) {
 
 /* src/components/Button.svelte generated by Svelte v3.53.1 */
 
-function add_css$B(target) {
-	append_styles(target, "svelte-1kmu8zp", ".button.svelte-1kmu8zp{display:block;text-decoration:none;color:inherit;border:none;background:none;margin:0;padding:0}.button.svelte-1kmu8zp:link,.button.svelte-1kmu8zp:visited,.button.svelte-1kmu8zp:active,.button.svelte-1kmu8zp:hover{color:inherit}");
+function add_css$D(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}
@@ -3577,7 +3577,7 @@ function create_else_block$6(ctx) {
 			button = element("button");
 			if (default_slot) default_slot.c();
 			set_attributes(button, button_data);
-			toggle_class(button, "svelte-1kmu8zp", true);
+			toggle_class(button, "svelte-15k4deh", true);
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -3616,7 +3616,7 @@ function create_else_block$6(ctx) {
 				dataAttrStopPropagation('click')
 			]));
 
-			toggle_class(button, "svelte-1kmu8zp", true);
+			toggle_class(button, "svelte-15k4deh", true);
 		},
 		i(local) {
 			if (current) return;
@@ -3647,7 +3647,7 @@ function create_if_block_2$2(ctx) {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-1kmu8zp"));
+			attr(div, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-15k4deh"));
 			attr(div, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -3731,7 +3731,7 @@ function create_if_block_1$4(ctx) {
 			a = element("a");
 			if (default_slot) default_slot.c();
 			set_attributes(a, a_data);
-			toggle_class(a, "svelte-1kmu8zp", true);
+			toggle_class(a, "svelte-15k4deh", true);
 		},
 		m(target, anchor) {
 			insert(target, a, anchor);
@@ -3773,7 +3773,7 @@ function create_if_block_1$4(ctx) {
 				dataAttrStopPropagation('click')
 			]));
 
-			toggle_class(a, "svelte-1kmu8zp", true);
+			toggle_class(a, "svelte-15k4deh", true);
 		},
 		i(local) {
 			if (current) return;
@@ -3794,7 +3794,7 @@ function create_if_block_1$4(ctx) {
 }
 
 // (31:0) {#if disabled}
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[9].default;
@@ -3804,7 +3804,7 @@ function create_if_block$d(ctx) {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "" + (BUTTON_CLASS + " _disabled" + " svelte-1kmu8zp"));
+			attr(div, "class", "" + (BUTTON_CLASS + " _disabled" + " svelte-15k4deh"));
 			attr(div, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -3852,12 +3852,12 @@ function create_if_block$d(ctx) {
 	};
 }
 
-function create_fragment$18(ctx) {
+function create_fragment$1b(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$d, create_if_block_1$4, create_if_block_2$2, create_else_block$6];
+	const if_block_creators = [create_if_block$e, create_if_block_1$4, create_if_block_2$2, create_else_block$6];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -3925,7 +3925,7 @@ function create_fragment$18(ctx) {
 
 const BUTTON_CLASS = 'button';
 
-function instance$18($$self, $$props, $$invalidate) {
+function instance$1b($$self, $$props, $$invalidate) {
 	let disabled;
 	let $valuesAreValid;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -3991,8 +3991,8 @@ let Button$1 = class Button extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$18,
-			create_fragment$18,
+			instance$1b,
+			create_fragment$1b,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -4000,18 +4000,18 @@ let Button$1 = class Button extends SvelteComponent {
 				eventValue: 6,
 				style: 1
 			},
-			add_css$B
+			add_css$D
 		);
 	}
 };
 
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
-function add_css$A(target) {
-	append_styles(target, "svelte-1i2vo31", ".modal.svelte-1i2vo31{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1i2vo31 > .button{flex:auto;display:flex}.close.svelte-1i2vo31{position:absolute;top:0;right:0}.close.svelte-1i2vo31 > .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-1i2vo31 > .button:hover{transform:rotate(90deg)}.modal-content.svelte-1i2vo31{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-1i2vo31{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-1i2vo31{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}}");
+function add_css$C(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}
+// (278:0) {:else}
 function create_else_block$5(ctx) {
 	let backgroundoverlay;
 	let current;
@@ -4055,7 +4055,7 @@ function create_else_block$5(ctx) {
 	};
 }
 
-// (266:24) 
+// (267:24) 
 function create_if_block_3(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -4124,7 +4124,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (264:0) {#if isPreview()}
+// (265:0) {#if isPreview()}
 function create_if_block_2$1(ctx) {
 	return {
 		c: noop,
@@ -4136,8 +4136,8 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (280:0) {#if visible}
-function create_if_block$c(ctx) {
+// (281:0) {#if visible}
+function create_if_block$d(ctx) {
 	let div;
 	let button;
 	let div_class_value;
@@ -4149,7 +4149,7 @@ function create_if_block$c(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				eventName: /*clickEventName*/ ctx[1],
 				eventValue: /*clickEventValue*/ ctx[2],
-				$$slots: { default: [create_default_slot$b] },
+				$$slots: { default: [create_default_slot$c] },
 				$$scope: { ctx }
 			}
 		});
@@ -4158,7 +4158,7 @@ function create_if_block$c(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[3] ? 'modal-bp' : ''].join(' ')) + " svelte-1i2vo31"));
+			attr(div, "class", div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[3] ? 'modal-bp' : ''].join(' ')) + " svelte-1ijkyzl"));
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
 			attr(div, "style", Array.from(/*modalStyles*/ ctx[23]).join(';'));
@@ -4182,7 +4182,7 @@ function create_if_block$c(ctx) {
 
 			button.$set(button_changes);
 
-			if (!current || dirty[0] & /*useBreakPoint*/ 8 && div_class_value !== (div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[3] ? 'modal-bp' : ''].join(' ')) + " svelte-1i2vo31"))) {
+			if (!current || dirty[0] & /*useBreakPoint*/ 8 && div_class_value !== (div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[3] ? 'modal-bp' : ''].join(' ')) + " svelte-1ijkyzl"))) {
 				attr(div, "class", div_class_value);
 			}
 		},
@@ -4215,7 +4215,7 @@ function create_if_block$c(ctx) {
 	};
 }
 
-// (293:6) {#if closable}
+// (294:6) {#if closable}
 function create_if_block_1$3(ctx) {
 	let div;
 	let button;
@@ -4236,7 +4236,7 @@ function create_if_block_1$3(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "close svelte-1i2vo31");
+			attr(div, "class", "close svelte-1ijkyzl");
 			set_style(div, "z-index", /*$maximumZindex*/ ctx[22] + 1);
 		},
 		m(target, anchor) {
@@ -4277,7 +4277,7 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (295:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
+// (296:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -4310,8 +4310,8 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (292:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
-function create_default_slot$b(ctx) {
+// (293:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+function create_default_slot$c(ctx) {
 	let t;
 	let div;
 	let current;
@@ -4325,7 +4325,7 @@ function create_default_slot$b(ctx) {
 			t = space();
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "modal-content svelte-1i2vo31");
+			attr(div, "class", "modal-content svelte-1ijkyzl");
 			attr(div, "style", /*_style*/ ctx[5]);
 		},
 		m(target, anchor) {
@@ -4402,7 +4402,7 @@ function create_default_slot$b(ctx) {
 	};
 }
 
-function create_fragment$17(ctx) {
+function create_fragment$1a(ctx) {
 	let show_if;
 	let current_block_type_index;
 	let if_block0;
@@ -4423,7 +4423,7 @@ function create_fragment$17(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$c(ctx);
+	let if_block1 = /*visible*/ ctx[16] && create_if_block$d(ctx);
 
 	return {
 		c() {
@@ -4483,7 +4483,7 @@ function create_fragment$17(ctx) {
 						transition_in(if_block1, 1);
 					}
 				} else {
-					if_block1 = create_if_block$c(ctx);
+					if_block1 = create_if_block$d(ctx);
 					if_block1.c();
 					transition_in(if_block1, 1);
 					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
@@ -4520,7 +4520,7 @@ function create_fragment$17(ctx) {
 	};
 }
 
-function instance$17($$self, $$props, $$invalidate) {
+function instance$1a($$self, $$props, $$invalidate) {
 	let close;
 	let closable;
 	let backgroundClick;
@@ -4547,8 +4547,9 @@ function instance$17($$self, $$props, $$invalidate) {
 	let { _closeStyle = '' } = $$props;
 
 	// モーダル背景の設定
-	let backgroundOverlay = DefaultModalPlacement.backgroundOverlay;
+	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
 
+	let backgroundOverlay = DefaultModalPlacement.backgroundOverlay;
 	let backgroundOverlayPC = DefaultModalPlacement.backgroundOverlay;
 	let backgroundOverlaySP = DefaultModalPlacement.backgroundOverlay;
 
@@ -4609,7 +4610,7 @@ function instance$17($$self, $$props, $$invalidate) {
 
 		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
 			{
-				if (placement && placement.backgroundOverlay) {
+				if (isExistBackgroundOverlayValue) {
 					$$invalidate(12, backgroundOverlay = placement.backgroundOverlay);
 				}
 
@@ -4831,8 +4832,8 @@ let Modal$1 = class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$17,
-			create_fragment$17,
+			instance$1a,
+			create_fragment$1a,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -4850,7 +4851,7 @@ let Modal$1 = class Modal extends SvelteComponent {
 				closeButtonColor: 9,
 				_closeStyle: 10
 			},
-			add_css$A,
+			add_css$C,
 			[-1, -1]
 		);
 	}
@@ -4858,7 +4859,7 @@ let Modal$1 = class Modal extends SvelteComponent {
 
 /* src/components/Grid.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$16(ctx) {
+function create_fragment$19(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -4916,7 +4917,7 @@ function create_fragment$16(ctx) {
 	};
 }
 
-function instance$16($$self, $$props, $$invalidate) {
+function instance$19($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -4961,7 +4962,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$16, create_fragment$16, safe_not_equal, {
+		init(this, options, instance$19, create_fragment$19, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -4974,11 +4975,11 @@ class Grid extends SvelteComponent {
 
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$z(target) {
-	append_styles(target, "svelte-1cryhmb", ".grid-item.svelte-1cryhmb{word-break:break-all;position:relative}.grid-item-inner.svelte-1cryhmb{position:absolute;inset:0}");
+function add_css$B(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$15(ctx) {
+function create_fragment$18(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -4990,8 +4991,8 @@ function create_fragment$15(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			if (default_slot) default_slot.c();
-			attr(div0, "class", "grid-item-inner svelte-1cryhmb");
-			attr(div1, "class", "grid-item svelte-1cryhmb");
+			attr(div0, "class", "grid-item-inner svelte-n7kdl3");
+			attr(div1, "class", "grid-item svelte-n7kdl3");
 			attr(div1, "data-element-id", /*gridItemId*/ ctx[0]);
 			attr(div1, "data-grid-item-id", /*gridItemId*/ ctx[0]);
 			attr(div1, "style", /*_style*/ ctx[1]);
@@ -5052,7 +5053,7 @@ function create_fragment$15(ctx) {
 
 const GRID_ITEM_CONTEXT_KEY = 'GRID_ITEM';
 
-function instance$15($$self, $$props, $$invalidate) {
+function instance$18($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -5101,8 +5102,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$15,
-			create_fragment$15,
+			instance$18,
+			create_fragment$18,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -5113,7 +5114,7 @@ class GridItem extends SvelteComponent {
 				background: 7,
 				gridItemId: 0
 			},
-			add_css$z
+			add_css$B
 		);
 	}
 }
@@ -5148,7 +5149,7 @@ function create_else_block$4(ctx) {
 }
 
 // (11:2) {#if item.match(regexp)}
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
 	let br;
 
 	return {
@@ -5173,7 +5174,7 @@ function create_each_block$7(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$b;
+		if (show_if) return create_if_block$c;
 		return create_else_block$4;
 	}
 
@@ -5209,7 +5210,7 @@ function create_each_block$7(ctx) {
 	};
 }
 
-function create_fragment$14(ctx) {
+function create_fragment$17(ctx) {
 	let each_1_anchor;
 	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
@@ -5268,7 +5269,7 @@ function create_fragment$14(ctx) {
 
 const regexp = /(\r?\n)/;
 
-function instance$14($$self, $$props, $$invalidate) {
+function instance$17($$self, $$props, $$invalidate) {
 	let items;
 	let { text = 'サンプルSample' } = $$props;
 
@@ -5289,14 +5290,14 @@ function instance$14($$self, $$props, $$invalidate) {
 class RenderText extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$14, create_fragment$14, safe_not_equal, { text: 1 });
+		init(this, options, instance$17, create_fragment$17, safe_not_equal, { text: 1 });
 	}
 }
 
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$y(target) {
-	append_styles(target, "svelte-vz6867", ".text-element-wrapper.svelte-vz6867.svelte-vz6867{position:relative;height:100%}.text-element.svelte-vz6867.svelte-vz6867{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-vz6867.svelte-vz6867{text-decoration:none;color:inherit}.text-element-inner.svelte-vz6867.svelte-vz6867{width:100%;height:auto}.text-direction-vertical.svelte-vz6867.svelte-vz6867{writing-mode:vertical-rl}.text-direction-vertical.svelte-vz6867 .text-element-inner.svelte-vz6867{width:auto;height:100%}.tooltip.svelte-vz6867.svelte-vz6867{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-vz6867.svelte-vz6867:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-vz6867.svelte-vz6867{display:block}.tooltip-error.svelte-vz6867.svelte-vz6867{background-color:#c00}.tooltip-error.svelte-vz6867.svelte-vz6867:before{border-bottom:7px solid #c00}");
+function add_css$A(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}
@@ -5313,8 +5314,8 @@ function create_else_block$3(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			create_component(rendertext.$$.fragment);
-			attr(div0, "class", "text-element-inner svelte-vz6867");
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-vz6867"));
+			attr(div0, "class", "text-element-inner svelte-9ixs0b");
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-9ixs0b"));
 			attr(div1, "style", /*style*/ ctx[5]);
 		},
 		m(target, anchor) {
@@ -5328,7 +5329,7 @@ function create_else_block$3(ctx) {
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
 
-			if (!current || dirty & /*textDirection*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-vz6867"))) {
+			if (!current || dirty & /*textDirection*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-9ixs0b"))) {
 				attr(div1, "class", div1_class_value);
 			}
 
@@ -5353,7 +5354,7 @@ function create_else_block$3(ctx) {
 }
 
 // (80:2) {#if enableCopy}
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
 	let a;
 	let div0;
 	let rendertext;
@@ -5378,12 +5379,12 @@ function create_if_block$a(ctx) {
 			t2 = space();
 			div2 = element("div");
 			div2.textContent = "コピーできませんでした";
-			attr(div0, "class", "text-element-inner svelte-vz6867");
+			attr(div0, "class", "text-element-inner svelte-9ixs0b");
 			attr(a, "href", '');
-			attr(a, "class", a_class_value = "" + (null_to_empty(`text-element text-link-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-vz6867"));
+			attr(a, "class", a_class_value = "" + (null_to_empty(`text-element text-link-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-9ixs0b"));
 			attr(a, "style", /*style*/ ctx[5]);
-			attr(div1, "class", "tooltip svelte-vz6867");
-			attr(div2, "class", "tooltip tooltip-error svelte-vz6867");
+			attr(div1, "class", "tooltip svelte-9ixs0b");
+			attr(div2, "class", "tooltip tooltip-error svelte-9ixs0b");
 		},
 		m(target, anchor) {
 			insert(target, a, anchor);
@@ -5407,7 +5408,7 @@ function create_if_block$a(ctx) {
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
 
-			if (!current || dirty & /*textDirection*/ 2 && a_class_value !== (a_class_value = "" + (null_to_empty(`text-element text-link-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-vz6867"))) {
+			if (!current || dirty & /*textDirection*/ 2 && a_class_value !== (a_class_value = "" + (null_to_empty(`text-element text-link-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-9ixs0b"))) {
 				attr(a, "class", a_class_value);
 			}
 
@@ -5439,12 +5440,12 @@ function create_if_block$a(ctx) {
 	};
 }
 
-function create_fragment$13(ctx) {
+function create_fragment$16(ctx) {
 	let div;
 	let current_block_type_index;
 	let if_block;
 	let current;
-	const if_block_creators = [create_if_block$a, create_else_block$3];
+	const if_block_creators = [create_if_block$b, create_else_block$3];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -5459,7 +5460,7 @@ function create_fragment$13(ctx) {
 		c() {
 			div = element("div");
 			if_block.c();
-			attr(div, "class", "text-element-wrapper svelte-vz6867");
+			attr(div, "class", "text-element-wrapper svelte-9ixs0b");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -5509,7 +5510,7 @@ function create_fragment$13(ctx) {
 	};
 }
 
-function instance$13($$self, $$props, $$invalidate) {
+function instance$16($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'テキストのコンテンツ' } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -5605,8 +5606,8 @@ class TextElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$13,
-			create_fragment$13,
+			instance$16,
+			create_fragment$16,
 			safe_not_equal,
 			{
 				text: 0,
@@ -5617,19 +5618,19 @@ class TextElement extends SvelteComponent {
 				enableCopy: 2,
 				eventName: 10
 			},
-			add_css$y
+			add_css$A
 		);
 	}
 }
 
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$x(target) {
-	append_styles(target, "svelte-ujdxfc", ".text-button-element.svelte-ujdxfc{width:100%;height:100%}.text-button-element.svelte-ujdxfc > .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-ujdxfc > .button._disabled{cursor:not-allowed !important;opacity:0.2}.text-button-element.svelte-ujdxfc > .button:not(._disabled):active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button-element.svelte-ujdxfc > .button:not(._disabled):hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
+function add_css$z(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$a(ctx) {
+function create_default_slot$b(ctx) {
 	let rendertext;
 	let current;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
@@ -5662,7 +5663,7 @@ function create_default_slot$a(ctx) {
 	};
 }
 
-function create_fragment$12(ctx) {
+function create_fragment$15(ctx) {
 	let div;
 	let button;
 	let current;
@@ -5672,7 +5673,7 @@ function create_fragment$12(ctx) {
 				onClick: /*onClick*/ ctx[1],
 				style: /*style*/ ctx[3],
 				eventName: /*eventName*/ ctx[2],
-				$$slots: { default: [create_default_slot$a] },
+				$$slots: { default: [create_default_slot$b] },
 				$$scope: { ctx }
 			}
 		});
@@ -5681,7 +5682,7 @@ function create_fragment$12(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "text-button-element svelte-ujdxfc");
+			attr(div, "class", "text-button-element svelte-1vg84sc");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -5716,7 +5717,7 @@ function create_fragment$12(ctx) {
 	};
 }
 
-function instance$12($$self, $$props, $$invalidate) {
+function instance$15($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'ボタンのラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -5754,8 +5755,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$12,
-			create_fragment$12,
+			instance$15,
+			create_fragment$15,
 			safe_not_equal,
 			{
 				text: 0,
@@ -5765,19 +5766,19 @@ class TextButtonElement extends SvelteComponent {
 				_buttonStyle: 5,
 				_style: 6
 			},
-			add_css$x
+			add_css$z
 		);
 	}
 }
 
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$w(target) {
-	append_styles(target, "svelte-1alkh1m", ".image-element.svelte-1alkh1m{width:100%;height:100%;max-width:100%;max-height:100%;box-sizing:border-box}.image-element.svelte-1alkh1m > .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-1alkh1m > .button._disabled{cursor:not-allowed !important;opacity:0.2}.image-element.transport.svelte-1alkh1m > .button:not(._disabled):hover,.image-element.transport.svelte-1alkh1m > .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-1alkh1m{width:100%;height:100%}");
+function add_css$y(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$9(ctx) {
+function create_default_slot$a(ctx) {
 	let img;
 	let img_style_value;
 	let img_src_value;
@@ -5785,7 +5786,7 @@ function create_default_slot$9(ctx) {
 	return {
 		c() {
 			img = element("img");
-			attr(img, "class", "image svelte-1alkh1m");
+			attr(img, "class", "image svelte-t6tu0e");
 			attr(img, "loading", "lazy");
 			attr(img, "width", "auto");
 			attr(img, "height", "auto");
@@ -5827,7 +5828,7 @@ function create_default_slot$9(ctx) {
 	};
 }
 
-function create_fragment$11(ctx) {
+function create_fragment$14(ctx) {
 	let div;
 	let button;
 	let div_class_value;
@@ -5838,7 +5839,7 @@ function create_fragment$11(ctx) {
 				onClick: /*onClick*/ ctx[4],
 				style: /*_style*/ ctx[7],
 				eventName: /*eventName*/ ctx[5],
-				$$slots: { default: [create_default_slot$9] },
+				$$slots: { default: [create_default_slot$a] },
 				$$scope: { ctx }
 			}
 		});
@@ -5847,7 +5848,7 @@ function create_fragment$11(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", div_class_value = "image-element " + (/*transport*/ ctx[2] ? ' transport' : '') + " svelte-1alkh1m");
+			attr(div, "class", div_class_value = "image-element " + (/*transport*/ ctx[2] ? ' transport' : '') + " svelte-t6tu0e");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -5866,7 +5867,7 @@ function create_fragment$11(ctx) {
 
 			button.$set(button_changes);
 
-			if (!current || dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "image-element " + (/*transport*/ ctx[2] ? ' transport' : '') + " svelte-1alkh1m")) {
+			if (!current || dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "image-element " + (/*transport*/ ctx[2] ? ' transport' : '') + " svelte-t6tu0e")) {
 				attr(div, "class", div_class_value);
 			}
 		},
@@ -5886,7 +5887,7 @@ function create_fragment$11(ctx) {
 	};
 }
 
-function instance$11($$self, $$props, $$invalidate) {
+function instance$14($$self, $$props, $$invalidate) {
 	let { src = '' } = $$props;
 	let { alt = '画像の説明' } = $$props;
 	let { transport = false } = $$props;
@@ -5917,8 +5918,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$11,
-			create_fragment$11,
+			instance$14,
+			create_fragment$14,
 			safe_not_equal,
 			{
 				src: 0,
@@ -5930,18 +5931,18 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 6,
 				_style: 7
 			},
-			add_css$w
+			add_css$y
 		);
 	}
 }
 
 /* src/components/List.svelte generated by Svelte v3.53.1 */
 
-function add_css$v(target) {
-	append_styles(target, "svelte-1t8r9z", ".list.svelte-1t8r9z{display:flex;width:100%;height:100%;overflow:hidden;border-width:0px;border-style:solid;border-color:#000000}");
+function add_css$x(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$10(ctx) {
+function create_fragment$13(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[6].default;
@@ -5951,7 +5952,7 @@ function create_fragment$10(ctx) {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "list svelte-1t8r9z");
+			attr(div, "class", "list svelte-aquv6z");
 			attr(div, "style", /*style*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -6001,7 +6002,7 @@ function create_fragment$10(ctx) {
 
 const LIST_CONTEXT_KEY = Symbol();
 
-function instance$10($$self, $$props, $$invalidate) {
+function instance$13($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'vertical' } = $$props;
@@ -6068,8 +6069,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$10,
-			create_fragment$10,
+			instance$13,
+			create_fragment$13,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -6077,19 +6078,19 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$v
+			add_css$x
 		);
 	}
 }
 
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$u(target) {
-	append_styles(target, "svelte-1lbw8v2", ".list-item.svelte-1lbw8v2{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item.svelte-1lbw8v2 > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
+function add_css$w(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$8(ctx) {
+function create_default_slot$9(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[5].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
@@ -6136,7 +6137,7 @@ function create_default_slot$8(ctx) {
 	};
 }
 
-function create_fragment$$(ctx) {
+function create_fragment$12(ctx) {
 	let div;
 	let button;
 	let current;
@@ -6146,7 +6147,7 @@ function create_fragment$$(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*_style*/ ctx[2],
 				eventName: /*clickEventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$8] },
+				$$slots: { default: [create_default_slot$9] },
 				$$scope: { ctx }
 			}
 		});
@@ -6155,7 +6156,7 @@ function create_fragment$$(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "list-item svelte-1lbw8v2");
+			attr(div, "class", "list-item svelte-9n97pe");
 			attr(div, "style", /*listItemStyle*/ ctx[3]);
 		},
 		m(target, anchor) {
@@ -6195,7 +6196,7 @@ function create_fragment$$(ctx) {
 	};
 }
 
-function instance$$($$self, $$props, $$invalidate) {
+function instance$12($$self, $$props, $$invalidate) {
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { separator, background, direction, registerItem, unregisterItem } = getContext(LIST_CONTEXT_KEY);
@@ -6274,23 +6275,23 @@ function instance$$($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$$, create_fragment$$, safe_not_equal, { onClick: 0, clickEventName: 1, _style: 2 }, add_css$u);
+		init(this, options, instance$12, create_fragment$12, safe_not_equal, { onClick: 0, clickEventName: 1, _style: 2 }, add_css$w);
 	}
 }
 
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$t(target) {
-	append_styles(target, "svelte-w6jkzh", ".embed.svelte-w6jkzh{box-shadow:0 1px rgba(0, 0, 0, 0.06);overflow:hidden;width:100%;height:100%}.embed.svelte-w6jkzh iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
+function add_css$v(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$_(ctx) {
+function create_fragment$11(ctx) {
 	let div;
 
 	return {
 		c() {
 			div = element("div");
-			attr(div, "class", "embed svelte-w6jkzh");
+			attr(div, "class", "embed svelte-wocq4p");
 			attr(div, "style", /*_style*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -6311,7 +6312,7 @@ function create_fragment$_(ctx) {
 	};
 }
 
-function instance$_($$self, $$props, $$invalidate) {
+function instance$11($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = '' } = $$props;
 
@@ -6326,17 +6327,17 @@ function instance$_($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$_, create_fragment$_, safe_not_equal, { code: 0, _style: 1 }, add_css$t);
+		init(this, options, instance$11, create_fragment$11, safe_not_equal, { code: 0, _style: 1 }, add_css$v);
 	}
 }
 
 /* src/components/MovieYouTubeElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$s(target) {
-	append_styles(target, "svelte-ljxq7x", ".embed.svelte-ljxq7x{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-ljxq7x iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
+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$Z(ctx) {
+function create_fragment$10(ctx) {
 	let div1;
 	let div0;
 
@@ -6345,7 +6346,7 @@ function create_fragment$Z(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			attr(div0, "class", "karte-player");
-			attr(div1, "class", "embed svelte-ljxq7x");
+			attr(div1, "class", "embed svelte-vikz49");
 			attr(div1, "style", /*_style*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -6377,7 +6378,7 @@ function _setValue(obj, key, value) {
 	}
 }
 
-function instance$Z($$self, $$props, $$invalidate) {
+function instance$10($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(31, $system = $$value));
 	let { videoId = 'wt0OjOeX-JA' } = $$props;
@@ -6648,8 +6649,8 @@ class MovieYouTubeElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$Z,
-			create_fragment$Z,
+			instance$10,
+			create_fragment$10,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -6678,7 +6679,7 @@ class MovieYouTubeElement extends SvelteComponent {
 				mute: 25,
 				_style: 0
 			},
-			add_css$s,
+			add_css$u,
 			[-1, -1]
 		);
 	}
@@ -6686,11 +6687,11 @@ class MovieYouTubeElement extends SvelteComponent {
 
 /* src/components/MovieVimeoElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$r(target) {
-	append_styles(target, "svelte-ljxq7x", ".embed.svelte-ljxq7x{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-ljxq7x iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
+function add_css$t(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$Y(ctx) {
+function create_fragment$$(ctx) {
 	let div1;
 	let div0;
 
@@ -6699,7 +6700,7 @@ function create_fragment$Y(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			attr(div0, "class", "karte-player");
-			attr(div1, "class", "embed svelte-ljxq7x");
+			attr(div1, "class", "embed svelte-vikz49");
 			attr(div1, "style", /*_style*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -6721,7 +6722,7 @@ function create_fragment$Y(ctx) {
 	};
 }
 
-function instance$Y($$self, $$props, $$invalidate) {
+function instance$$($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId = "201239468" } = $$props;
@@ -6864,8 +6865,8 @@ class MovieVimeoElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$Y,
-			create_fragment$Y,
+			instance$$,
+			create_fragment$$,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -6875,18 +6876,18 @@ class MovieVimeoElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$r
+			add_css$t
 		);
 	}
 }
 
 /* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
 
-function add_css$q(target) {
-	append_styles(target, "svelte-1fjy5oo", ".textarea-wrapper.svelte-1fjy5oo{display:flex;align-items:center;width:100%;height:100%}.textarea.svelte-1fjy5oo{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-1fjy5oo::placeholder{color:var(--placeholder-color)}.textarea.svelte-1fjy5oo: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 add_css$s(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$X(ctx) {
+function create_fragment$_(ctx) {
 	let div;
 	let textarea;
 	let mounted;
@@ -6896,12 +6897,12 @@ function create_fragment$X(ctx) {
 		c() {
 			div = element("div");
 			textarea = element("textarea");
-			attr(textarea, "class", "textarea svelte-1fjy5oo");
+			attr(textarea, "class", "textarea svelte-zxvkkc");
 			textarea.value = /*$value*/ ctx[4];
 			textarea.required = /*required*/ ctx[1];
 			attr(textarea, "placeholder", /*placeholder*/ ctx[0]);
 			attr(textarea, "style", /*style*/ ctx[3]);
-			attr(div, "class", "textarea-wrapper svelte-1fjy5oo");
+			attr(div, "class", "textarea-wrapper svelte-zxvkkc");
 			attr(div, "style", /*styleVariables*/ ctx[2]);
 		},
 		m(target, anchor) {
@@ -6944,7 +6945,7 @@ function create_fragment$X(ctx) {
 	};
 }
 
-function instance$X($$self, $$props, $$invalidate) {
+function instance$_($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
 	let $value;
@@ -7032,8 +7033,8 @@ class FormTextarea extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$X,
-			create_fragment$X,
+			instance$_,
+			create_fragment$_,
 			safe_not_equal,
 			{
 				name: 7,
@@ -7045,15 +7046,15 @@ class FormTextarea extends SvelteComponent {
 				_textStyle: 11,
 				_placeholderStyle: 12
 			},
-			add_css$q
+			add_css$s
 		);
 	}
 }
 
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
-function add_css$p(target) {
-	append_styles(target, "svelte-1ntb6j8", ".radio-buttons.svelte-1ntb6j8{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-1ntb6j8{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-1ntb6j8{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-1ntb6j8: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-1ntb6j8{margin-left:0.5em}");
+function add_css$r(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}");
 }
 
 function get_each_context$6(ctx, list, i) {
@@ -7087,14 +7088,14 @@ function create_each_block$6(ctx) {
 			t1 = text(t1_value);
 			t2 = space();
 			attr(input, "type", "radio");
-			attr(input, "class", "radio-button-input svelte-1ntb6j8");
+			attr(input, "class", "radio-button-input svelte-17s08g");
 			attr(input, "style", /*buttonStyle*/ ctx[5]);
 			attr(input, "name", /*name*/ ctx[0]);
 			input.value = input_value_value = /*option*/ ctx[17];
 			input.checked = input_checked_value = /*option*/ ctx[17] === /*_value*/ ctx[3];
-			attr(span, "class", "radio-button-text svelte-1ntb6j8");
+			attr(span, "class", "radio-button-text svelte-17s08g");
 			attr(span, "style", span_style_value = `${/*_textStyle*/ ctx[2]} ${/*fontCss*/ ctx[6]}`);
-			attr(label, "class", "radio-button svelte-1ntb6j8");
+			attr(label, "class", "radio-button svelte-17s08g");
 		},
 		m(target, anchor) {
 			insert(target, label, anchor);
@@ -7142,7 +7143,7 @@ function create_each_block$6(ctx) {
 	};
 }
 
-function create_fragment$W(ctx) {
+function create_fragment$Z(ctx) {
 	let div;
 	let each_value = /*_options*/ ctx[4];
 	let each_blocks = [];
@@ -7159,7 +7160,7 @@ function create_fragment$W(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "radio-buttons svelte-1ntb6j8");
+			attr(div, "class", "radio-buttons svelte-17s08g");
 			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -7206,7 +7207,7 @@ function create_fragment$W(ctx) {
 	};
 }
 
-function instance$W($$self, $$props, $$invalidate) {
+function instance$Z($$self, $$props, $$invalidate) {
 	let _options;
 	let buttonStyle;
 	let _value;
@@ -7306,8 +7307,8 @@ class FormRadioButtons extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$W,
-			create_fragment$W,
+			instance$Z,
+			create_fragment$Z,
 			safe_not_equal,
 			{
 				name: 0,
@@ -7320,15 +7321,15 @@ class FormRadioButtons extends SvelteComponent {
 				buttonColor: 13,
 				buttonColorActive: 14
 			},
-			add_css$p
+			add_css$r
 		);
 	}
 }
 
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
 
-function add_css$o(target) {
-	append_styles(target, "svelte-iejizj", ".select.svelte-iejizj{width:100%;height:100%}.select-select.svelte-iejizj{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-iejizj: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-iejizj{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}");
+function add_css$q(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}");
 }
 
 function get_each_context$5(ctx, list, i) {
@@ -7359,7 +7360,7 @@ function create_else_block$2(ctx) {
 }
 
 // (105:10) {#if option}
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
 	let t_value = /*option*/ ctx[19] + "";
 	let t;
 
@@ -7387,7 +7388,7 @@ function create_each_block$5(ctx) {
 	let option_selected_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*option*/ ctx[19]) return create_if_block$9;
+		if (/*option*/ ctx[19]) return create_if_block$a;
 		return create_else_block$2;
 	}
 
@@ -7437,7 +7438,7 @@ function create_each_block$5(ctx) {
 	};
 }
 
-function create_fragment$V(ctx) {
+function create_fragment$Y(ctx) {
 	let div1;
 	let select;
 	let t;
@@ -7462,10 +7463,10 @@ function create_fragment$V(ctx) {
 
 			t = space();
 			div0 = element("div");
-			attr(select, "class", "select-select svelte-iejizj");
+			attr(select, "class", "select-select svelte-t9ynyj");
 			attr(select, "style", /*style*/ ctx[3]);
-			attr(div0, "class", "select-icon svelte-iejizj");
-			attr(div1, "class", "select svelte-iejizj");
+			attr(div0, "class", "select-icon svelte-t9ynyj");
+			attr(div1, "class", "select svelte-t9ynyj");
 			attr(div1, "style", /*styleVariables*/ ctx[2]);
 		},
 		m(target, anchor) {
@@ -7527,7 +7528,7 @@ function create_fragment$V(ctx) {
 	};
 }
 
-function instance$V($$self, $$props, $$invalidate) {
+function instance$Y($$self, $$props, $$invalidate) {
 	let _options;
 	let style;
 	let styleVariables;
@@ -7643,8 +7644,8 @@ class FormSelect extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$V,
-			create_fragment$V,
+			instance$Y,
+			create_fragment$Y,
 			safe_not_equal,
 			{
 				name: 7,
@@ -7659,15 +7660,15 @@ class FormSelect extends SvelteComponent {
 				iconColor: 15,
 				iconSize: 16
 			},
-			add_css$o
+			add_css$q
 		);
 	}
 }
 
 /* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
 
-function add_css$n(target) {
-	append_styles(target, "svelte-2pz1us", ".check-boxes.svelte-2pz1us.svelte-2pz1us{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%;gap:0px}.check-box.svelte-2pz1us.svelte-2pz1us{display:flex;align-items:center;position:relative;cursor:pointer}.check-box-input.svelte-2pz1us.svelte-2pz1us{width:var(--size);height:var(--size);margin:0;position:absolute;appearance:none;cursor:pointer}.check-box-check.svelte-2pz1us.svelte-2pz1us{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-2pz1us.svelte-2pz1us{display:inline-block;--icon-size:calc(var(--size) * 3 / 4);width:var(--icon-size);height:var(--icon-size)}.check-box-icon.svelte-2pz1us.svelte-2pz1us: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-2pz1us.svelte-2pz1us{background-color:var(--color-main-active)}.check-box-check._checked.svelte-2pz1us .check-box-icon.svelte-2pz1us:after{border-color:var(--color-sub-active)}.check-box-text.svelte-2pz1us.svelte-2pz1us{margin-left:0.5em;color:#333;font-size:12px;line-height:1.5}");
+function add_css$p(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}");
 }
 
 function get_each_context$4(ctx, list, i) {
@@ -7706,19 +7707,19 @@ function create_each_block$4(ctx) {
 			span2 = element("span");
 			t2 = text(t2_value);
 			t3 = space();
-			attr(input, "class", "check-box-input svelte-2pz1us");
+			attr(input, "class", "check-box-input svelte-1p65cg8");
 			attr(input, "type", "checkbox");
 			attr(input, "name", /*name*/ ctx[0]);
 			input.checked = input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[19]];
-			attr(span0, "class", "check-box-icon svelte-2pz1us");
+			attr(span0, "class", "check-box-icon svelte-1p65cg8");
 
 			attr(span1, "class", span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[19]]
 			? ' _checked'
-			: ''}`) + " svelte-2pz1us"));
+			: ''}`) + " svelte-1p65cg8"));
 
-			attr(span2, "class", "check-box-text svelte-2pz1us");
+			attr(span2, "class", "check-box-text svelte-1p65cg8");
 			attr(span2, "style", span2_style_value = `${/*_textStyle*/ ctx[2]} ${/*fontCss*/ ctx[6]}`);
-			attr(label, "class", "check-box svelte-2pz1us");
+			attr(label, "class", "check-box svelte-1p65cg8");
 			attr(label, "style", /*styleVariables*/ ctx[5]);
 		},
 		m(target, anchor) {
@@ -7750,7 +7751,7 @@ function create_each_block$4(ctx) {
 
 			if (dirty & /*isCheckedArray*/ 16 && span1_class_value !== (span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[19]]
 			? ' _checked'
-			: ''}`) + " svelte-2pz1us"))) {
+			: ''}`) + " svelte-1p65cg8"))) {
 				attr(span1, "class", span1_class_value);
 			}
 
@@ -7772,7 +7773,7 @@ function create_each_block$4(ctx) {
 	};
 }
 
-function create_fragment$U(ctx) {
+function create_fragment$X(ctx) {
 	let div;
 	let each_value = /*_options*/ ctx[3];
 	let each_blocks = [];
@@ -7789,7 +7790,7 @@ function create_fragment$U(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "check-boxes svelte-2pz1us");
+			attr(div, "class", "check-boxes svelte-1p65cg8");
 			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -7836,7 +7837,7 @@ function create_fragment$U(ctx) {
 	};
 }
 
-function instance$U($$self, $$props, $$invalidate) {
+function instance$X($$self, $$props, $$invalidate) {
 	let _options;
 	let styleVariables;
 	let isCheckedArray;
@@ -7942,8 +7943,8 @@ class FormCheckBoxes extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$U,
-			create_fragment$U,
+			instance$X,
+			create_fragment$X,
 			safe_not_equal,
 			{
 				name: 0,
@@ -7956,15 +7957,15 @@ class FormCheckBoxes extends SvelteComponent {
 				buttonColor: 13,
 				buttonColorActive: 14
 			},
-			add_css$n
+			add_css$p
 		);
 	}
 }
 
 /* src/components/FormRatingButtonsNumber.svelte generated by Svelte v3.53.1 */
 
-function add_css$m(target) {
-	append_styles(target, "svelte-9idbf1", ".rating-buttons.svelte-9idbf1{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-9idbf1{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}");
+function add_css$o(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}");
 }
 
 function get_each_context$3(ctx, list, i) {
@@ -7988,7 +7989,7 @@ function create_each_block$3(ctx) {
 			button = element("button");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(button, "class", "rating-button svelte-9idbf1");
+			attr(button, "class", "rating-button svelte-1iqf36p");
 			attr(button, "style", button_style_value = /*getTextButtonStyle*/ ctx[5](/*i*/ ctx[14] === /*_value*/ ctx[2]));
 		},
 		m(target, anchor) {
@@ -8020,7 +8021,7 @@ function create_each_block$3(ctx) {
 	};
 }
 
-function create_fragment$T(ctx) {
+function create_fragment$W(ctx) {
 	let div;
 	let each_value = [...Array(/*count*/ ctx[0]).keys()].map(/*func*/ ctx[12]);
 	let each_blocks = [];
@@ -8037,7 +8038,7 @@ function create_fragment$T(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "rating-buttons svelte-9idbf1");
+			attr(div, "class", "rating-buttons svelte-1iqf36p");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -8079,7 +8080,7 @@ function create_fragment$T(ctx) {
 	};
 }
 
-function instance$T($$self, $$props, $$invalidate) {
+function instance$W($$self, $$props, $$invalidate) {
 	let _value;
 	let $value;
 	let { name = '' } = $$props;
@@ -8161,8 +8162,8 @@ class FormRatingButtonsNumber extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$T,
-			create_fragment$T,
+			instance$W,
+			create_fragment$W,
 			safe_not_equal,
 			{
 				name: 6,
@@ -8173,15 +8174,15 @@ class FormRatingButtonsNumber extends SvelteComponent {
 				buttonStyle: 9,
 				buttonActiveStyle: 10
 			},
-			add_css$m
+			add_css$o
 		);
 	}
 }
 
 /* src/components/FormRatingButtonsFace.svelte generated by Svelte v3.53.1 */
 
-function add_css$l(target) {
-	append_styles(target, "svelte-1b5dvzw", ".rating-buttons.svelte-1b5dvzw{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.rating-button.svelte-1b5dvzw{appearance:none;background:none;border:none;margin:0;padding:0}.rating-button-image.svelte-1b5dvzw{cursor:pointer;user-select:none;-webkit-user-drag:none;width:100%;height:100%}.rating-button-image.svelte-1b5dvzw:not(._active){filter:grayscale(100%)}");
+function add_css$n(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%)}");
 }
 
 function get_each_context$2(ctx, list, i) {
@@ -8206,9 +8207,9 @@ function create_each_block$2(ctx) {
 			img = element("img");
 			t = space();
 			if (!src_url_equal(img.src, img_src_value = /*ICONS*/ ctx[2][/*i*/ ctx[10]])) attr(img, "src", img_src_value);
-			attr(img, "class", img_class_value = "" + (null_to_empty(`rating-button-image${/*i*/ ctx[10] === /*_value*/ ctx[1] ? ' _active' : ''}`) + " svelte-1b5dvzw"));
+			attr(img, "class", img_class_value = "" + (null_to_empty(`rating-button-image${/*i*/ ctx[10] === /*_value*/ ctx[1] ? ' _active' : ''}`) + " svelte-tbunko"));
 			attr(img, "alt", "rate" + /*i*/ ctx[10]);
-			attr(button, "class", "rating-button svelte-1b5dvzw");
+			attr(button, "class", "rating-button svelte-tbunko");
 			attr(button, "style", /*buttonStyle*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -8224,7 +8225,7 @@ function create_each_block$2(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty & /*_value*/ 2 && img_class_value !== (img_class_value = "" + (null_to_empty(`rating-button-image${/*i*/ ctx[10] === /*_value*/ ctx[1] ? ' _active' : ''}`) + " svelte-1b5dvzw"))) {
+			if (dirty & /*_value*/ 2 && img_class_value !== (img_class_value = "" + (null_to_empty(`rating-button-image${/*i*/ ctx[10] === /*_value*/ ctx[1] ? ' _active' : ''}`) + " svelte-tbunko"))) {
 				attr(img, "class", img_class_value);
 			}
 
@@ -8240,7 +8241,7 @@ function create_each_block$2(ctx) {
 	};
 }
 
-function create_fragment$S(ctx) {
+function create_fragment$V(ctx) {
 	let div;
 	let each_value = [...Array(count).keys()].reverse().map(func);
 	let each_blocks = [];
@@ -8257,7 +8258,7 @@ function create_fragment$S(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "rating-buttons svelte-1b5dvzw");
+			attr(div, "class", "rating-buttons svelte-tbunko");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -8302,7 +8303,7 @@ function create_fragment$S(ctx) {
 const count = 5;
 const func = i => i + 1;
 
-function instance$S($$self, $$props, $$invalidate) {
+function instance$V($$self, $$props, $$invalidate) {
 	let _value;
 	let buttonStyle;
 	let $value;
@@ -8358,17 +8359,17 @@ function instance$S($$self, $$props, $$invalidate) {
 class FormRatingButtonsFace extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$S, create_fragment$S, safe_not_equal, { name: 5, required: 6, size: 7 }, add_css$l);
+		init(this, options, instance$V, create_fragment$V, safe_not_equal, { name: 5, required: 6, size: 7 }, add_css$n);
 	}
 }
 
 /* src/components/FormIdentifyInput.svelte generated by Svelte v3.53.1 */
 
-function add_css$k(target) {
-	append_styles(target, "svelte-f14zo5", ".input-wrapper.svelte-f14zo5{display:flex;align-items:center;width:100%;height:100%}.input.svelte-f14zo5{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-f14zo5::placeholder{color:var(--placeholder-color)}.input.svelte-f14zo5: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-f14zo5{outline:none;border-width:var(--error-border-width) !important;border-color:var(--error-border-color) !important;border-style:var(--error-border-style) !important}");
+function add_css$m(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$R(ctx) {
+function create_fragment$U(ctx) {
 	let div;
 	let input;
 	let input_class_value;
@@ -8379,13 +8380,13 @@ function create_fragment$R(ctx) {
 		c() {
 			div = element("div");
 			input = element("input");
-			attr(input, "class", input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-f14zo5"));
+			attr(input, "class", input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-h8fqwx"));
 			attr(input, "type", "text");
 			input.value = /*$value*/ ctx[2];
 			input.required = /*required*/ ctx[0];
 			attr(input, "placeholder", /*placeholder*/ ctx[1]);
 			attr(input, "style", /*style*/ ctx[5]);
-			attr(div, "class", "input-wrapper svelte-f14zo5");
+			attr(div, "class", "input-wrapper svelte-h8fqwx");
 			attr(div, "style", /*styleVariables*/ ctx[4]);
 		},
 		m(target, anchor) {
@@ -8398,7 +8399,7 @@ function create_fragment$R(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*isValidForUI*/ 8 && input_class_value !== (input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-f14zo5"))) {
+			if (dirty & /*isValidForUI*/ 8 && input_class_value !== (input_class_value = "" + (null_to_empty(['input', /*isValidForUI*/ ctx[3] ? '' : '_error'].join(' ')) + " svelte-h8fqwx"))) {
 				attr(input, "class", input_class_value);
 			}
 
@@ -8432,7 +8433,7 @@ function create_fragment$R(ctx) {
 	};
 }
 
-function instance$R($$self, $$props, $$invalidate) {
+function instance$U($$self, $$props, $$invalidate) {
 	let style;
 	let styleVariables;
 	let isValidForUI;
@@ -8563,8 +8564,8 @@ class FormIdentifyInput extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$R,
-			create_fragment$R,
+			instance$U,
+			create_fragment$U,
 			safe_not_equal,
 			{
 				field: 9,
@@ -8578,18 +8579,18 @@ class FormIdentifyInput extends SvelteComponent {
 				_textStyle: 15,
 				_placeholderStyle: 16
 			},
-			add_css$k
+			add_css$m
 		);
 	}
 }
 
 /* src/components/FormIdentifyChoices.svelte generated by Svelte v3.53.1 */
 
-function add_css$j(target) {
-	append_styles(target, "svelte-pzrwlo", ".radio-buttons.svelte-pzrwlo{display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%}.radio-button.svelte-pzrwlo{cursor:pointer;display:flex;align-items:center}.radio-button-input.svelte-pzrwlo{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-pzrwlo: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-pzrwlo{margin-left:0.5em}");
+function add_css$l(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$Q(ctx) {
+function create_fragment$T(ctx) {
 	let div;
 	let label0;
 	let input0;
@@ -8624,20 +8625,20 @@ function create_fragment$Q(ctx) {
 			span1 = element("span");
 			t4 = text("いいえ");
 			attr(input0, "type", "radio");
-			attr(input0, "class", "radio-button-input svelte-pzrwlo");
+			attr(input0, "class", "radio-button-input svelte-8zbmyo");
 			attr(input0, "style", /*buttonStyle*/ ctx[2]);
 			input0.checked = input0_checked_value = /*$value*/ ctx[3] === true;
-			attr(span0, "class", "radio-button-text svelte-pzrwlo");
+			attr(span0, "class", "radio-button-text svelte-8zbmyo");
 			attr(span0, "style", span0_style_value = `${/*_textStyle*/ ctx[1]} ${/*fontCss*/ ctx[4]}`);
-			attr(label0, "class", "radio-button svelte-pzrwlo");
+			attr(label0, "class", "radio-button svelte-8zbmyo");
 			attr(input1, "type", "radio");
-			attr(input1, "class", "radio-button-input svelte-pzrwlo");
+			attr(input1, "class", "radio-button-input svelte-8zbmyo");
 			attr(input1, "style", /*buttonStyle*/ ctx[2]);
 			input1.checked = input1_checked_value = /*$value*/ ctx[3] === false;
-			attr(span1, "class", "radio-button-text svelte-pzrwlo");
+			attr(span1, "class", "radio-button-text svelte-8zbmyo");
 			attr(span1, "style", span1_style_value = `${/*_textStyle*/ ctx[1]} ${/*fontCss*/ ctx[4]}`);
-			attr(label1, "class", "radio-button svelte-pzrwlo");
-			attr(div, "class", "radio-buttons svelte-pzrwlo");
+			attr(label1, "class", "radio-button svelte-8zbmyo");
+			attr(div, "class", "radio-buttons svelte-8zbmyo");
 			attr(div, "style", /*_layoutStyle*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -8702,7 +8703,7 @@ function create_fragment$Q(ctx) {
 	};
 }
 
-function instance$Q($$self, $$props, $$invalidate) {
+function instance$T($$self, $$props, $$invalidate) {
 	let buttonStyle;
 	let $value;
 	let { field = 'subscription' } = $$props;
@@ -8784,8 +8785,8 @@ class FormIdentifyChoices extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$Q,
-			create_fragment$Q,
+			instance$T,
+			create_fragment$T,
 			safe_not_equal,
 			{
 				field: 6,
@@ -8797,15 +8798,15 @@ class FormIdentifyChoices extends SvelteComponent {
 				buttonColor: 10,
 				buttonColorActive: 11
 			},
-			add_css$j
+			add_css$l
 		);
 	}
 }
 
 /* src/components/Slide.svelte generated by Svelte v3.53.1 */
 
-function add_css$i(target) {
-	append_styles(target, "svelte-1qfq79t", ".root.svelte-1qfq79t{width:100%;height:100%;position:relative}.container.svelte-1qfq79t{width:100%;height:100%;position:relative;overflow:hidden;box-sizing:border-box;border-width:0px;border-style:solid;border-color:#000000}.slide.svelte-1qfq79t{height:100%;position:absolute;display:flex}.transition.svelte-1qfq79t{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-1qfq79t{height:100%;flex:none}.prev-button-container.svelte-1qfq79t,.next-button-container.svelte-1qfq79t{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button-container.svelte-1qfq79t{left:0}.next-button-container.svelte-1qfq79t{right:0}.move-button.svelte-1qfq79t{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;border:none;background:none;margin:0;padding:0}.navigation.svelte-1qfq79t{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-1qfq79t{flex-shrink:0;cursor:pointer;border:none;background:none;margin:0;padding:0;appearance:none}.navigation-item-inner.circle.svelte-1qfq79t{border-radius:51%}");
+function add_css$k(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%}");
 }
 
 function get_each_context$1(ctx, list, i) {
@@ -8834,9 +8835,9 @@ function create_if_block_1$2(ctx) {
 			attr(svg, "viewBox", "0 0 10 16");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(svg, "style", /*prevIconStyle*/ ctx[10]);
-			attr(button, "class", "move-button svelte-1qfq79t");
+			attr(button, "class", "move-button svelte-ji1fh");
 			attr(button, "style", /*_prevButtonContainerStyle*/ ctx[9]);
-			attr(div, "class", "prev-button-container svelte-1qfq79t");
+			attr(div, "class", "prev-button-container svelte-ji1fh");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -8867,7 +8868,7 @@ function create_if_block_1$2(ctx) {
 }
 
 // (380:2) {#if isVisibleNextButton}
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
 	let div;
 	let button;
 	let svg;
@@ -8885,9 +8886,9 @@ function create_if_block$8(ctx) {
 			attr(svg, "viewBox", "0 0 10 16");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(svg, "style", /*nextIconStyle*/ ctx[8]);
-			attr(button, "class", "move-button svelte-1qfq79t");
+			attr(button, "class", "move-button svelte-ji1fh");
 			attr(button, "style", /*_nextButtonContainerStyle*/ ctx[7]);
-			attr(div, "class", "next-button-container svelte-1qfq79t");
+			attr(div, "class", "next-button-container svelte-ji1fh");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -8935,9 +8936,9 @@ function create_each_block$1(ctx) {
 			button = element("button");
 			div = element("div");
 			t = space();
-			attr(div, "class", "navigation-item-inner circle svelte-1qfq79t");
+			attr(div, "class", "navigation-item-inner circle svelte-ji1fh");
 			attr(div, "style", div_style_value = /*getNavigationItemInnerStyle*/ ctx[5](/*i*/ ctx[63]));
-			attr(button, "class", "navigation-item svelte-1qfq79t");
+			attr(button, "class", "navigation-item svelte-ji1fh");
 			attr(button, "style", /*navigationItemStyle*/ ctx[6]);
 		},
 		m(target, anchor) {
@@ -8969,7 +8970,7 @@ function create_each_block$1(ctx) {
 	};
 }
 
-function create_fragment$P(ctx) {
+function create_fragment$S(ctx) {
 	let div3;
 	let div1;
 	let div0;
@@ -8982,7 +8983,7 @@ function create_fragment$P(ctx) {
 	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$2(ctx);
-	let if_block1 = /*isVisibleNextButton*/ ctx[11] && create_if_block$8(ctx);
+	let if_block1 = /*isVisibleNextButton*/ ctx[11] && create_if_block$9(ctx);
 	let each_value = /*items*/ ctx[1];
 	let each_blocks = [];
 
@@ -9014,14 +9015,14 @@ function create_fragment$P(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[13]) + " svelte-1qfq79t"));
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[13]) + " svelte-ji1fh"));
 			attr(div0, "style", /*slideStyle*/ ctx[14]);
-			attr(div1, "class", "container svelte-1qfq79t");
+			attr(div1, "class", "container svelte-ji1fh");
 			attr(div1, "style", /*_style*/ ctx[0]);
-			attr(div2, "class", "navigation svelte-1qfq79t");
+			attr(div2, "class", "navigation svelte-ji1fh");
 			attr(div2, "style", /*navigationStyle*/ ctx[4]);
 			set_attributes(div3, div3_data);
-			toggle_class(div3, "svelte-1qfq79t", true);
+			toggle_class(div3, "svelte-ji1fh", true);
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -9063,7 +9064,7 @@ function create_fragment$P(ctx) {
 				}
 			}
 
-			if (!current || dirty[0] & /*slideClass*/ 8192 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[13]) + " svelte-1qfq79t"))) {
+			if (!current || dirty[0] & /*slideClass*/ 8192 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[13]) + " svelte-ji1fh"))) {
 				attr(div0, "class", div0_class_value);
 			}
 
@@ -9092,7 +9093,7 @@ function create_fragment$P(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$8(ctx);
+					if_block1 = create_if_block$9(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -9129,7 +9130,7 @@ function create_fragment$P(ctx) {
 			}
 
 			set_attributes(div3, div3_data = get_spread_update(div3_levels, [{ class: "root" }, dataAttrStopPropagation('click')]));
-			toggle_class(div3, "svelte-1qfq79t", true);
+			toggle_class(div3, "svelte-ji1fh", true);
 		},
 		i(local) {
 			if (current) return;
@@ -9164,7 +9165,7 @@ function calcPositionIndex(shift, index, length) {
 	}
 }
 
-function instance$P($$self, $$props, $$invalidate) {
+function instance$S($$self, $$props, $$invalidate) {
 	let slideStyle;
 	let slideClass;
 	let _loop;
@@ -9617,8 +9618,8 @@ class Slide extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$P,
-			create_fragment$P,
+			instance$S,
+			create_fragment$S,
 			safe_not_equal,
 			{
 				loop: 18,
@@ -9632,7 +9633,7 @@ class Slide extends SvelteComponent {
 				navigationButton: 25,
 				navigationEdgePosition: 26
 			},
-			add_css$i,
+			add_css$k,
 			[-1, -1, -1]
 		);
 	}
@@ -9640,11 +9641,11 @@ class Slide extends SvelteComponent {
 
 /* src/components/SlideItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$h(target) {
-	append_styles(target, "svelte-1rv0qgo", ".item.svelte-1rv0qgo{height:100%;flex:none;position:relative}.item.svelte-1rv0qgo img{user-select:none;-webkit-user-drag:none}.item-inner.svelte-1rv0qgo{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;cursor:default;overflow:hidden}");
+function add_css$j(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$O(ctx) {
+function create_fragment$R(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -9656,9 +9657,9 @@ function create_fragment$O(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			if (default_slot) default_slot.c();
-			attr(div0, "class", "item-inner svelte-1rv0qgo");
+			attr(div0, "class", "item-inner svelte-9ygf1w");
 			attr(div0, "style", /*_style*/ ctx[0]);
-			attr(div1, "class", "item svelte-1rv0qgo");
+			attr(div1, "class", "item svelte-9ygf1w");
 			attr(div1, "style", /*itemStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -9711,7 +9712,7 @@ function create_fragment$O(ctx) {
 	};
 }
 
-function instance$O($$self, $$props, $$invalidate) {
+function instance$R($$self, $$props, $$invalidate) {
 	let itemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { registerItem, unregisterItem } = getContext('SLIDE');
@@ -9777,20 +9778,20 @@ function instance$O($$self, $$props, $$invalidate) {
 class SlideItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$O, create_fragment$O, safe_not_equal, { _style: 0 }, add_css$h);
+		init(this, options, instance$R, create_fragment$R, safe_not_equal, { _style: 0 }, add_css$j);
 	}
 }
 
 /* src/components/Countdown.svelte generated by Svelte v3.53.1 */
 
-function add_css$g(target) {
-	append_styles(target, "svelte-t87l6f", ".countdown.svelte-t87l6f{position:relative;width:100%;height:100%}.countdown-inner.svelte-t87l6f{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
+function add_css$i(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$N(ctx) {
+function create_fragment$Q(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -9802,9 +9803,9 @@ function create_fragment$N(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			if (default_slot) default_slot.c();
-			attr(div0, "class", "countdown-inner svelte-t87l6f");
+			attr(div0, "class", "countdown-inner svelte-rroxiz");
 			attr(div0, "style", /*_style*/ ctx[0]);
-			attr(div1, "class", "countdown svelte-t87l6f");
+			attr(div1, "class", "countdown svelte-rroxiz");
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -9870,7 +9871,7 @@ function formatTimeDiff(ms) {
 	};
 }
 
-function instance$N($$self, $$props, $$invalidate) {
+function instance$Q($$self, $$props, $$invalidate) {
 	let countdown;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { timeLimit = '2023/12/31 23:59:59' } = $$props;
@@ -9931,18 +9932,18 @@ function instance$N($$self, $$props, $$invalidate) {
 class Countdown extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$N, create_fragment$N, safe_not_equal, { timeLimit: 2, stateOnEnd: 3, _style: 0 }, add_css$g);
+		init(this, options, instance$Q, create_fragment$Q, safe_not_equal, { timeLimit: 2, stateOnEnd: 3, _style: 0 }, add_css$i);
 	}
 }
 
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
 
-function add_css$f(target) {
-	append_styles(target, "svelte-1c91vpe", ".box.svelte-1c91vpe{position:relative;width:100%;height:100%}.box.svelte-1c91vpe > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}");
+function add_css$h(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$7(ctx) {
+function create_default_slot$8(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[3].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
@@ -9989,7 +9990,7 @@ function create_default_slot$7(ctx) {
 	};
 }
 
-function create_fragment$M(ctx) {
+function create_fragment$P(ctx) {
 	let div;
 	let button;
 	let current;
@@ -9999,7 +10000,7 @@ function create_fragment$M(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*_style*/ ctx[2],
 				eventName: /*eventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$7] },
+				$$slots: { default: [create_default_slot$8] },
 				$$scope: { ctx }
 			}
 		});
@@ -10008,7 +10009,7 @@ function create_fragment$M(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "box svelte-1c91vpe");
+			attr(div, "class", "box svelte-1ccydfy");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -10043,7 +10044,7 @@ function create_fragment$M(ctx) {
 	};
 }
 
-function instance$M($$self, $$props, $$invalidate) {
+function instance$P($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { eventName = '' } = $$props;
@@ -10062,18 +10063,18 @@ function instance$M($$self, $$props, $$invalidate) {
 class Box extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$M, create_fragment$M, safe_not_equal, { onClick: 0, eventName: 1, _style: 2 }, add_css$f);
+		init(this, options, instance$P, create_fragment$P, safe_not_equal, { onClick: 0, eventName: 1, _style: 2 }, add_css$h);
 	}
 }
 
 /* src/components/IconElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$e(target) {
-	append_styles(target, "svelte-1mk6wi4", ".icon.svelte-1mk6wi4{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon.svelte-1mk6wi4 > .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-1mk6wi4 > .button._disabled{cursor:not-allowed !important;opacity:0.2}.icon.svelte-1mk6wi4 svg{width:var(--width);height:var(--height);color:var(--color);stroke:var(--stroke);fill:var(--fill)}");
+function add_css$g(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$7(ctx) {
+function create_if_block$8(ctx) {
 	let html_tag;
 	let html_anchor;
 
@@ -10098,9 +10099,9 @@ function create_if_block$7(ctx) {
 }
 
 // (55:2) <Button {onClick} {style} {eventName}>
-function create_default_slot$6(ctx) {
+function create_default_slot$7(ctx) {
 	let if_block_anchor;
-	let if_block = /*svg*/ ctx[3] && create_if_block$7(ctx);
+	let if_block = /*svg*/ ctx[3] && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -10116,7 +10117,7 @@ function create_default_slot$6(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$7(ctx);
+					if_block = create_if_block$8(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -10132,7 +10133,7 @@ function create_default_slot$6(ctx) {
 	};
 }
 
-function create_fragment$L(ctx) {
+function create_fragment$O(ctx) {
 	let div;
 	let button;
 	let current;
@@ -10142,7 +10143,7 @@ function create_fragment$L(ctx) {
 				onClick: /*onClick*/ ctx[0],
 				style: /*style*/ ctx[2],
 				eventName: /*eventName*/ ctx[1],
-				$$slots: { default: [create_default_slot$6] },
+				$$slots: { default: [create_default_slot$7] },
 				$$scope: { ctx }
 			}
 		});
@@ -10151,7 +10152,7 @@ function create_fragment$L(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "icon svelte-1mk6wi4");
+			attr(div, "class", "icon svelte-1mkvcuo");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -10193,7 +10194,7 @@ function parseData(dataUrl) {
 	return decodeURIComponent(data).replaceAll('\'', '"');
 }
 
-function instance$L($$self, $$props, $$invalidate) {
+function instance$O($$self, $$props, $$invalidate) {
 	let svg;
 	let styleVariables;
 	let style;
@@ -10241,8 +10242,8 @@ class IconElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$L,
-			create_fragment$L,
+			instance$O,
+			create_fragment$O,
 			safe_not_equal,
 			{
 				icon: 4,
@@ -10252,18 +10253,18 @@ class IconElement extends SvelteComponent {
 				color: 6,
 				_style: 7
 			},
-			add_css$e
+			add_css$g
 		);
 	}
 }
 
 /* src/components/CodeElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
-	append_styles(target, "svelte-1ng2n51", ".codeElement.svelte-1ng2n51{box-sizing:border-box;margin:0px;padding:0px;width:100%;height:100%}");
+function add_css$f(target) {
+	append_styles(target, "svelte-ymsb9l", ".codeElement.svelte-ymsb9l{box-sizing:border-box;margin:0px;padding:0px;width:100%;height:100%}");
 }
 
-function create_fragment$K(ctx) {
+function create_fragment$N(ctx) {
 	let div;
 	let switch_instance;
 	let current;
@@ -10286,7 +10287,7 @@ function create_fragment$K(ctx) {
 		c() {
 			div = element("div");
 			if (switch_instance) create_component(switch_instance.$$.fragment);
-			attr(div, "class", "codeElement svelte-1ng2n51");
+			attr(div, "class", "codeElement svelte-ymsb9l");
 			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
@@ -10343,7 +10344,7 @@ function create_fragment$K(ctx) {
 	};
 }
 
-function instance$K($$self, $$props, $$invalidate) {
+function instance$N($$self, $$props, $$invalidate) {
 	let $data,
 		$$unsubscribe_data = noop,
 		$$subscribe_data = () => ($$unsubscribe_data(), $$unsubscribe_data = subscribe(data, $$value => $$invalidate(4, $data = $$value)), data);
@@ -10368,17 +10369,17 @@ function instance$K($$self, $$props, $$invalidate) {
 class CodeElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$K, create_fragment$K, safe_not_equal, { name: 0, component: 1, data: 2, style: 3 }, add_css$d);
+		init(this, options, instance$N, create_fragment$N, safe_not_equal, { name: 0, component: 1, data: 2, style: 3 }, add_css$f);
 	}
 }
 
 /* src/components/Flex.svelte generated by Svelte v3.53.1 */
 
-function add_css$c(target) {
-	append_styles(target, "svelte-9v2qdg", ".flex.svelte-9v2qdg{display:flex}");
+function add_css$e(target) {
+	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
 
-function create_fragment$J(ctx) {
+function create_fragment$M(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -10389,7 +10390,7 @@ function create_fragment$J(ctx) {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "flex svelte-9v2qdg");
+			attr(div, "class", "flex svelte-1e71ejc");
 			attr(div, "style", div_style_value = "width:" + /*width*/ ctx[1] + "; height:" + /*height*/ ctx[2] + "; flex-direction:" + /*direction*/ ctx[0] + "; " + /*_style*/ ctx[3]);
 		},
 		m(target, anchor) {
@@ -10443,7 +10444,7 @@ function getFlexContext() {
 	return getContext(FlexContextKey);
 }
 
-function instance$J($$self, $$props, $$invalidate) {
+function instance$M($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'row' } = $$props;
 	let { width = '100%' } = $$props;
@@ -10469,8 +10470,8 @@ class Flex extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$J,
-			create_fragment$J,
+			instance$M,
+			create_fragment$M,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -10478,18 +10479,18 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$c
+			add_css$e
 		);
 	}
 }
 
 /* src/components/FlexItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$b(target) {
-	append_styles(target, "svelte-164ah5d", ".flex-item.svelte-164ah5d{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
+function add_css$d(target) {
+	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
 
-function create_fragment$I(ctx) {
+function create_fragment$L(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
@@ -10499,7 +10500,7 @@ function create_fragment$I(ctx) {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "flex-item svelte-164ah5d");
+			attr(div, "class", "flex-item svelte-1p0bk1x");
 			attr(div, "style", /*style*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -10547,7 +10548,7 @@ function create_fragment$I(ctx) {
 	};
 }
 
-function instance$I($$self, $$props, $$invalidate) {
+function instance$L($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = '' } = $$props;
@@ -10590,7 +10591,7 @@ function instance$I($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$I, create_fragment$I, safe_not_equal, { length: 1, _style: 2 }, add_css$b);
+		init(this, options, instance$L, create_fragment$L, safe_not_equal, { length: 1, _style: 2 }, add_css$d);
 	}
 }
 
@@ -10700,7 +10701,7 @@ function create_default_slot_1(ctx) {
 }
 
 // (106:0) <StateItem {path}>
-function create_default_slot$5(ctx) {
+function create_default_slot$6(ctx) {
 	let modal;
 	let current;
 
@@ -10765,14 +10766,14 @@ function create_default_slot$5(ctx) {
 	};
 }
 
-function create_fragment$H(ctx) {
+function create_fragment$K(ctx) {
 	let stateitem;
 	let current;
 
 	stateitem = new StateItem({
 			props: {
 				path: /*path*/ ctx[0],
-				$$slots: { default: [create_default_slot$5] },
+				$$slots: { default: [create_default_slot$6] },
 				$$scope: { ctx }
 			}
 		});
@@ -10810,7 +10811,7 @@ function create_fragment$H(ctx) {
 	};
 }
 
-function instance$H($$self, $$props, $$invalidate) {
+function instance$K($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -10881,7 +10882,7 @@ class GridModalState extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$H, create_fragment$H, safe_not_equal, {
+		init(this, options, instance$K, create_fragment$K, safe_not_equal, {
 			path: 0,
 			onClick: 1,
 			clickEventName: 2,
@@ -10906,11 +10907,11 @@ class GridModalState extends SvelteComponent {
 
 /* src/components/TextBlock.svelte generated by Svelte v3.53.1 */
 
-function add_css$a(target) {
-	append_styles(target, "svelte-akic2e", ".text-block.svelte-akic2e.svelte-akic2e{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:hidden}.text-block-inner.svelte-akic2e.svelte-akic2e{width:100%;height:auto}.text-direction-vertical.svelte-akic2e.svelte-akic2e{writing-mode:vertical-rl}.text-direction-vertical.svelte-akic2e .text-block-inner.svelte-akic2e{width:auto;height:100%}");
+function add_css$c(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$G(ctx) {
+function create_fragment$J(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -10923,8 +10924,8 @@ function create_fragment$G(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			create_component(rendertext.$$.fragment);
-			attr(div0, "class", "text-block-inner svelte-akic2e");
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-block text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-akic2e"));
+			attr(div0, "class", "text-block-inner svelte-15pej1m");
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-block text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-15pej1m"));
 			attr(div1, "style", /*style*/ ctx[2]);
 		},
 		m(target, anchor) {
@@ -10938,7 +10939,7 @@ function create_fragment$G(ctx) {
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
 
-			if (!current || dirty & /*textDirection*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-block text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-akic2e"))) {
+			if (!current || dirty & /*textDirection*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-block text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-15pej1m"))) {
 				attr(div1, "class", div1_class_value);
 			}
 
@@ -10962,7 +10963,7 @@ function create_fragment$G(ctx) {
 	};
 }
 
-function instance$G($$self, $$props, $$invalidate) {
+function instance$J($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
 	let { font = SYSTEM_FONT } = $$props;
@@ -10998,8 +10999,8 @@ class TextBlock extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$G,
-			create_fragment$G,
+			instance$J,
+			create_fragment$J,
 			safe_not_equal,
 			{
 				text: 0,
@@ -11008,18 +11009,18 @@ class TextBlock extends SvelteComponent {
 				textDirection: 1,
 				_style: 5
 			},
-			add_css$a
+			add_css$c
 		);
 	}
 }
 
 /* src/components/TextButtonBlock.svelte generated by Svelte v3.53.1 */
 
-function add_css$9(target) {
-	append_styles(target, "svelte-1c34p4n", ".text-button-block.svelte-1c34p4n{width:100%;height:100%;background-color:#000000;border-radius:4px}.text-button.svelte-1c34p4n{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-1c34p4n:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-1c34p4n:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
+function add_css$b(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$F(ctx) {
+function create_fragment$I(ctx) {
 	let div;
 	let button;
 	let rendertext;
@@ -11033,9 +11034,9 @@ function create_fragment$F(ctx) {
 			div = element("div");
 			button = element("button");
 			create_component(rendertext.$$.fragment);
-			attr(button, "class", "text-button svelte-1c34p4n");
+			attr(button, "class", "text-button svelte-ff0k6r");
 			attr(button, "style", /*_buttonStyle*/ ctx[1]);
-			attr(div, "class", "text-button-block svelte-1c34p4n");
+			attr(div, "class", "text-button-block svelte-ff0k6r");
 			attr(div, "style", /*_style*/ ctx[2]);
 		},
 		m(target, anchor) {
@@ -11080,7 +11081,7 @@ function create_fragment$F(ctx) {
 	};
 }
 
-function instance$F($$self, $$props, $$invalidate) {
+function instance$I($$self, $$props, $$invalidate) {
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 
@@ -11122,8 +11123,8 @@ class TextButtonBlock extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$F,
-			create_fragment$F,
+			instance$I,
+			create_fragment$I,
 			safe_not_equal,
 			{
 				text: 0,
@@ -11133,18 +11134,18 @@ class TextButtonBlock extends SvelteComponent {
 				_buttonStyle: 1,
 				_style: 2
 			},
-			add_css$9
+			add_css$b
 		);
 	}
 }
 
 /* src/components/ImageBlock.svelte generated by Svelte v3.53.1 */
 
-function add_css$8(target) {
-	append_styles(target, "svelte-1jus6sx", ".image-block.svelte-1jus6sx{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-1jus6sx{width:100%;height:100%}.transport.svelte-1jus6sx:hover,.transport.svelte-1jus6sx: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 add_css$a(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$E(ctx) {
+function create_fragment$H(ctx) {
 	let div;
 	let img;
 	let img_style_value;
@@ -11157,14 +11158,14 @@ function create_fragment$E(ctx) {
 		c() {
 			div = element("div");
 			img = element("img");
-			attr(img, "class", "image svelte-1jus6sx");
+			attr(img, "class", "image svelte-1pdw891");
 			attr(img, "loading", "lazy");
 			attr(img, "width", "auto");
 			attr(img, "height", "auto");
 			attr(img, "style", img_style_value = `${/*_imageStyle*/ ctx[4]} object-fit: ${/*objectFit*/ ctx[3]};`);
 			if (!src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) attr(img, "src", img_src_value);
 			attr(img, "alt", /*alt*/ ctx[1]);
-			attr(div, "class", div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-1jus6sx"));
+			attr(div, "class", div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-1pdw891"));
 			attr(div, "style", /*_style*/ ctx[5]);
 		},
 		m(target, anchor) {
@@ -11189,7 +11190,7 @@ function create_fragment$E(ctx) {
 				attr(img, "alt", /*alt*/ ctx[1]);
 			}
 
-			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-1jus6sx"))) {
+			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-1pdw891"))) {
 				attr(div, "class", div_class_value);
 			}
 
@@ -11207,7 +11208,7 @@ function create_fragment$E(ctx) {
 	};
 }
 
-function instance$E($$self, $$props, $$invalidate) {
+function instance$H($$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;
@@ -11247,8 +11248,8 @@ class ImageBlock extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$E,
-			create_fragment$E,
+			instance$H,
+			create_fragment$H,
 			safe_not_equal,
 			{
 				src: 0,
@@ -11260,7 +11261,7 @@ class ImageBlock extends SvelteComponent {
 				_imageStyle: 4,
 				_style: 5
 			},
-			add_css$8
+			add_css$a
 		);
 	}
 }
@@ -11360,8 +11361,8 @@ const toCssShadow = (p) => {
 
 /* src/components-flex/shared/elements/Clickable.svelte generated by Svelte v3.53.1 */
 
-function add_css$7(target) {
-	append_styles(target, "svelte-pmy3dt", ".clickable.svelte-pmy3dt:link,.clickable.svelte-pmy3dt:visited,.clickable.svelte-pmy3dt:active,.clickable.svelte-pmy3dt:hover{color:inherit}.clickable.svelte-pmy3dt{cursor:pointer;text-decoration:none}");
+function add_css$9(target) {
+	append_styles(target, "svelte-12c4e5i", ".clickable.svelte-12c4e5i:link,.clickable.svelte-12c4e5i:visited,.clickable.svelte-12c4e5i:active,.clickable.svelte-12c4e5i:hover{color:inherit}.clickable.svelte-12c4e5i:enabled{cursor:pointer}.clickable.svelte-12c4e5i{text-decoration:none}");
 }
 
 // (40:0) {:else}
@@ -11391,7 +11392,7 @@ function create_else_block$1(ctx) {
 			button = element("button");
 			if (default_slot) default_slot.c();
 			set_attributes(button, button_data);
-			toggle_class(button, "svelte-pmy3dt", true);
+			toggle_class(button, "svelte-12c4e5i", true);
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -11431,7 +11432,7 @@ function create_else_block$1(ctx) {
 				dataAttrStopPropagation('click')
 			]));
 
-			toggle_class(button, "svelte-pmy3dt", true);
+			toggle_class(button, "svelte-12c4e5i", true);
 		},
 		i(local) {
 			if (current) return;
@@ -11464,7 +11465,7 @@ function create_if_block_1$1(ctx) {
 			div = element("div");
 			if (default_slot) default_slot.c();
 			attr(div, "data-layer-id", /*layerId*/ ctx[2]);
-			attr(div, "class", div_class_value = "" + (null_to_empty(/*fixedClass*/ ctx[3]) + " svelte-pmy3dt"));
+			attr(div, "class", div_class_value = "" + (null_to_empty(/*fixedClass*/ ctx[3]) + " svelte-12c4e5i"));
 			attr(div, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -11496,7 +11497,7 @@ function create_if_block_1$1(ctx) {
 				attr(div, "data-layer-id", /*layerId*/ ctx[2]);
 			}
 
-			if (!current || dirty & /*fixedClass*/ 8 && div_class_value !== (div_class_value = "" + (null_to_empty(/*fixedClass*/ ctx[3]) + " svelte-pmy3dt"))) {
+			if (!current || dirty & /*fixedClass*/ 8 && div_class_value !== (div_class_value = "" + (null_to_empty(/*fixedClass*/ ctx[3]) + " svelte-12c4e5i"))) {
 				attr(div, "class", div_class_value);
 			}
 
@@ -11521,7 +11522,7 @@ function create_if_block_1$1(ctx) {
 }
 
 // (20:0) {#if onClick.operation === 'linkTo'}
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let a;
 	let a_href_value;
 	let a_target_value;
@@ -11557,7 +11558,7 @@ function create_if_block$6(ctx) {
 			a = element("a");
 			if (default_slot) default_slot.c();
 			set_attributes(a, a_data);
-			toggle_class(a, "svelte-pmy3dt", true);
+			toggle_class(a, "svelte-12c4e5i", true);
 		},
 		m(target, anchor) {
 			insert(target, a, anchor);
@@ -11600,7 +11601,7 @@ function create_if_block$6(ctx) {
 				dataAttrStopPropagation('click')
 			]));
 
-			toggle_class(a, "svelte-pmy3dt", true);
+			toggle_class(a, "svelte-12c4e5i", true);
 		},
 		i(local) {
 			if (current) return;
@@ -11620,12 +11621,12 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$D(ctx) {
+function create_fragment$G(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_block_creators = [create_if_block$7, create_if_block_1$1, create_else_block$1];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -11692,7 +11693,7 @@ function create_fragment$D(ctx) {
 
 const CLICKABLE_CLASS = 'clickable';
 
-function instance$D($$self, $$props, $$invalidate) {
+function instance$G($$self, $$props, $$invalidate) {
 	let fixedClass;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -11747,8 +11748,8 @@ class Clickable extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$D,
-			create_fragment$D,
+			instance$G,
+			create_fragment$G,
 			safe_not_equal,
 			{
 				onClick: 0,
@@ -11758,14 +11759,14 @@ class Clickable extends SvelteComponent {
 				layerId: 2,
 				className: 7
 			},
-			add_css$7
+			add_css$9
 		);
 	}
 }
 
 /* src/components-flex/avatar/Avatar.svelte generated by Svelte v3.53.1 */
 
-function create_default_slot$4(ctx) {
+function create_default_slot$5(ctx) {
 	let img;
 	let img_src_value;
 	let img_alt_value;
@@ -11799,7 +11800,7 @@ function create_default_slot$4(ctx) {
 	};
 }
 
-function create_fragment$C(ctx) {
+function create_fragment$F(ctx) {
 	let clickable;
 	let current;
 
@@ -11810,7 +11811,7 @@ function create_fragment$C(ctx) {
 				onClick: /*props*/ ctx[0].onClick,
 				eventName: /*props*/ ctx[0].eventName,
 				eventValue: /*props*/ ctx[0].eventValue,
-				$$slots: { default: [create_default_slot$4] },
+				$$slots: { default: [create_default_slot$5] },
 				$$scope: { ctx }
 			}
 		});
@@ -11852,7 +11853,7 @@ function create_fragment$C(ctx) {
 	};
 }
 
-function instance$C($$self, $$props, $$invalidate) {
+function instance$F($$self, $$props, $$invalidate) {
 	let style;
 	let imgStyle;
 	let { props = {} } = $$props;
@@ -11901,7 +11902,7 @@ function instance$C($$self, $$props, $$invalidate) {
 class Avatar extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$C, create_fragment$C, safe_not_equal, { props: 0, layerId: 1 });
+		init(this, options, instance$F, create_fragment$F, safe_not_equal, { props: 0, layerId: 1 });
 	}
 }
 
@@ -11926,8 +11927,13 @@ const BUTTON_SIZE = {
 };
 const BUTTON_THEME = {
     default: 'デフォルト',
-    theme: 'テーマカラー',
+    primary: 'プライマリー',
+    secondary: 'セカンダリー',
+    success: 'サクセス',
+    warning: 'ワーニング',
     alert: 'アラート',
+    info: 'インフォ',
+    neutral: 'ニュートラル',
     transparent: '背景なし',
 };
 const BUTTON_ROUND = {
@@ -11954,7 +11960,7 @@ const buttonPropsDefault = {
 
 /* src/components-flex/icon/variants/IconArrowDown.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$B(ctx) {
+function create_fragment$E(ctx) {
 	let svg;
 	let path;
 
@@ -11986,7 +11992,7 @@ function create_fragment$B(ctx) {
 	};
 }
 
-function instance$B($$self, $$props, $$invalidate) {
+function instance$E($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -11999,13 +12005,13 @@ function instance$B($$self, $$props, $$invalidate) {
 class IconArrowDown extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$B, create_fragment$B, safe_not_equal, { color: 0 });
+		init(this, options, instance$E, create_fragment$E, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconArrowUp.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$A(ctx) {
+function create_fragment$D(ctx) {
 	let svg;
 	let path;
 
@@ -12037,7 +12043,7 @@ function create_fragment$A(ctx) {
 	};
 }
 
-function instance$A($$self, $$props, $$invalidate) {
+function instance$D($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12050,13 +12056,13 @@ function instance$A($$self, $$props, $$invalidate) {
 class IconArrowUp extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$A, create_fragment$A, safe_not_equal, { color: 0 });
+		init(this, options, instance$D, create_fragment$D, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconUsers.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$z(ctx) {
+function create_fragment$C(ctx) {
 	let svg;
 	let path;
 
@@ -12088,7 +12094,7 @@ function create_fragment$z(ctx) {
 	};
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$C($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12101,13 +12107,13 @@ function instance$z($$self, $$props, $$invalidate) {
 class IconUsers extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$z, create_fragment$z, safe_not_equal, { color: 0 });
+		init(this, options, instance$C, create_fragment$C, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconArrowLeft.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$y(ctx) {
+function create_fragment$B(ctx) {
 	let svg;
 	let path;
 
@@ -12139,7 +12145,7 @@ function create_fragment$y(ctx) {
 	};
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$B($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12152,13 +12158,13 @@ function instance$y($$self, $$props, $$invalidate) {
 class IconArrowLeft extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$y, create_fragment$y, safe_not_equal, { color: 0 });
+		init(this, options, instance$B, create_fragment$B, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconArrowRight.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$x(ctx) {
+function create_fragment$A(ctx) {
 	let svg;
 	let path;
 
@@ -12190,7 +12196,7 @@ function create_fragment$x(ctx) {
 	};
 }
 
-function instance$x($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12203,13 +12209,13 @@ function instance$x($$self, $$props, $$invalidate) {
 class IconArrowRight extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$x, create_fragment$x, safe_not_equal, { color: 0 });
+		init(this, options, instance$A, create_fragment$A, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconBell.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$w(ctx) {
+function create_fragment$z(ctx) {
 	let svg;
 	let path;
 
@@ -12241,7 +12247,7 @@ function create_fragment$w(ctx) {
 	};
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12254,13 +12260,13 @@ function instance$w($$self, $$props, $$invalidate) {
 class IconBell extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$w, create_fragment$w, safe_not_equal, { color: 0 });
+		init(this, options, instance$z, create_fragment$z, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconArrowUpFromSquare.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$v(ctx) {
+function create_fragment$y(ctx) {
 	let svg;
 	let path;
 
@@ -12292,7 +12298,7 @@ function create_fragment$v(ctx) {
 	};
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12305,13 +12311,13 @@ function instance$v($$self, $$props, $$invalidate) {
 class IconArrowUpFromSquare extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$v, create_fragment$v, safe_not_equal, { color: 0 });
+		init(this, options, instance$y, create_fragment$y, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconTicket.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$u(ctx) {
+function create_fragment$x(ctx) {
 	let svg;
 	let path;
 
@@ -12343,7 +12349,7 @@ function create_fragment$u(ctx) {
 	};
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12356,13 +12362,13 @@ function instance$u($$self, $$props, $$invalidate) {
 class IconTicket extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$u, create_fragment$u, safe_not_equal, { color: 0 });
+		init(this, options, instance$x, create_fragment$x, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconTrack.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$t(ctx) {
+function create_fragment$w(ctx) {
 	let svg;
 	let path;
 
@@ -12394,7 +12400,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12407,13 +12413,13 @@ function instance$t($$self, $$props, $$invalidate) {
 class IconTrack extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$t, create_fragment$t, safe_not_equal, { color: 0 });
+		init(this, options, instance$w, create_fragment$w, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconCartShopping.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$s(ctx) {
+function create_fragment$v(ctx) {
 	let svg;
 	let path;
 
@@ -12445,7 +12451,7 @@ function create_fragment$s(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12458,13 +12464,13 @@ function instance$s($$self, $$props, $$invalidate) {
 class IconCartShopping extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$s, create_fragment$s, safe_not_equal, { color: 0 });
+		init(this, options, instance$v, create_fragment$v, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconCircle.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$r(ctx) {
+function create_fragment$u(ctx) {
 	let svg;
 	let path;
 
@@ -12496,7 +12502,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12509,13 +12515,13 @@ function instance$r($$self, $$props, $$invalidate) {
 class IconCircle extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$r, create_fragment$r, safe_not_equal, { color: 0 });
+		init(this, options, instance$u, create_fragment$u, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconCircleQuestion.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$q(ctx) {
+function create_fragment$t(ctx) {
 	let svg;
 	let path;
 
@@ -12547,7 +12553,7 @@ function create_fragment$q(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12560,13 +12566,13 @@ function instance$q($$self, $$props, $$invalidate) {
 class IconCircleQuestion extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$q, create_fragment$q, safe_not_equal, { color: 0 });
+		init(this, options, instance$t, create_fragment$t, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconCheck.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$p(ctx) {
+function create_fragment$s(ctx) {
 	let svg;
 	let path;
 
@@ -12598,7 +12604,7 @@ function create_fragment$p(ctx) {
 	};
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12611,13 +12617,13 @@ function instance$p($$self, $$props, $$invalidate) {
 class IconCheck extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$p, create_fragment$p, safe_not_equal, { color: 0 });
+		init(this, options, instance$s, create_fragment$s, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconXMark.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$o(ctx) {
+function create_fragment$r(ctx) {
 	let svg;
 	let path;
 
@@ -12649,7 +12655,7 @@ function create_fragment$o(ctx) {
 	};
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12662,13 +12668,13 @@ function instance$o($$self, $$props, $$invalidate) {
 class IconXMark extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$o, create_fragment$o, safe_not_equal, { color: 0 });
+		init(this, options, instance$r, create_fragment$r, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconPaperPlane.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$n(ctx) {
+function create_fragment$q(ctx) {
 	let svg;
 	let path;
 
@@ -12700,7 +12706,7 @@ function create_fragment$n(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12713,13 +12719,13 @@ function instance$n($$self, $$props, $$invalidate) {
 class IconPaperPlane extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$n, create_fragment$n, safe_not_equal, { color: 0 });
+		init(this, options, instance$q, create_fragment$q, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconCopy.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$m(ctx) {
+function create_fragment$p(ctx) {
 	let svg;
 	let path;
 
@@ -12751,7 +12757,7 @@ function create_fragment$m(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12764,13 +12770,13 @@ function instance$m($$self, $$props, $$invalidate) {
 class IconCopy extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$m, create_fragment$m, safe_not_equal, { color: 0 });
+		init(this, options, instance$p, create_fragment$p, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconCircleXMark.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$l(ctx) {
+function create_fragment$o(ctx) {
 	let svg;
 	let path;
 
@@ -12802,7 +12808,7 @@ function create_fragment$l(ctx) {
 	};
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12815,13 +12821,13 @@ function instance$l($$self, $$props, $$invalidate) {
 class IconCircleXMark extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$l, create_fragment$l, safe_not_equal, { color: 0 });
+		init(this, options, instance$o, create_fragment$o, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconHeart.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$k(ctx) {
+function create_fragment$n(ctx) {
 	let svg;
 	let path;
 
@@ -12853,7 +12859,7 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12866,13 +12872,13 @@ function instance$k($$self, $$props, $$invalidate) {
 class IconHeart extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$k, create_fragment$k, safe_not_equal, { color: 0 });
+		init(this, options, instance$n, create_fragment$n, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconMagnifyingGrass.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$j(ctx) {
+function create_fragment$m(ctx) {
 	let svg;
 	let path;
 
@@ -12904,7 +12910,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12917,13 +12923,13 @@ function instance$j($$self, $$props, $$invalidate) {
 class IconMagnifyingGrass extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$j, create_fragment$j, safe_not_equal, { color: 0 });
+		init(this, options, instance$m, create_fragment$m, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconStar.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$i(ctx) {
+function create_fragment$l(ctx) {
 	let svg;
 	let path;
 
@@ -12955,7 +12961,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -12968,13 +12974,13 @@ function instance$i($$self, $$props, $$invalidate) {
 class IconStar extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$i, create_fragment$i, safe_not_equal, { color: 0 });
+		init(this, options, instance$l, create_fragment$l, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconCircleInfo.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$h(ctx) {
+function create_fragment$k(ctx) {
 	let svg;
 	let path;
 
@@ -13006,7 +13012,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13019,13 +13025,13 @@ function instance$h($$self, $$props, $$invalidate) {
 class IconCircleInfo extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$h, create_fragment$h, safe_not_equal, { color: 0 });
+		init(this, options, instance$k, create_fragment$k, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconEnvelope.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$g(ctx) {
+function create_fragment$j(ctx) {
 	let svg;
 	let path;
 
@@ -13057,7 +13063,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13070,13 +13076,13 @@ function instance$g($$self, $$props, $$invalidate) {
 class IconEnvelope extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$g, create_fragment$g, safe_not_equal, { color: 0 });
+		init(this, options, instance$j, create_fragment$j, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconGift.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$f(ctx) {
+function create_fragment$i(ctx) {
 	let svg;
 	let path;
 
@@ -13108,7 +13114,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13121,13 +13127,13 @@ function instance$f($$self, $$props, $$invalidate) {
 class IconGift extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$f, create_fragment$f, safe_not_equal, { color: 0 });
+		init(this, options, instance$i, create_fragment$i, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconPaperclip.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$e(ctx) {
+function create_fragment$h(ctx) {
 	let svg;
 	let path;
 
@@ -13159,7 +13165,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13172,13 +13178,13 @@ function instance$e($$self, $$props, $$invalidate) {
 class IconPaperclip extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$e, create_fragment$e, safe_not_equal, { color: 0 });
+		init(this, options, instance$h, create_fragment$h, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconFire.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$d(ctx) {
+function create_fragment$g(ctx) {
 	let svg;
 	let path;
 
@@ -13210,7 +13216,7 @@ function create_fragment$d(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13223,13 +13229,13 @@ function instance$d($$self, $$props, $$invalidate) {
 class IconFire extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$d, create_fragment$d, safe_not_equal, { color: 0 });
+		init(this, options, instance$g, create_fragment$g, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconLink.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$c(ctx) {
+function create_fragment$f(ctx) {
 	let svg;
 	let path;
 
@@ -13261,7 +13267,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13274,13 +13280,13 @@ function instance$c($$self, $$props, $$invalidate) {
 class IconLink extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$c, create_fragment$c, safe_not_equal, { color: 0 });
+		init(this, options, instance$f, create_fragment$f, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconBuildings.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$b(ctx) {
+function create_fragment$e(ctx) {
 	let svg;
 	let path;
 
@@ -13312,7 +13318,7 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13325,13 +13331,13 @@ function instance$b($$self, $$props, $$invalidate) {
 class IconBuildings extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$b, create_fragment$b, safe_not_equal, { color: 0 });
+		init(this, options, instance$e, create_fragment$e, safe_not_equal, { color: 0 });
 	}
 }
 
 /* src/components-flex/icon/variants/IconChevronsRight.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$a(ctx) {
+function create_fragment$d(ctx) {
 	let svg;
 	let path;
 
@@ -13363,7 +13369,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let { color } = $$props;
 
 	$$self.$$set = $$props => {
@@ -13376,11 +13382,113 @@ function instance$a($$self, $$props, $$invalidate) {
 class IconChevronsRight extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$a, create_fragment$a, safe_not_equal, { color: 0 });
+		init(this, options, instance$d, create_fragment$d, safe_not_equal, { color: 0 });
 	}
 }
 
-const ICON_SIZE = {
+/* src/components-flex/icon/variants/IconPhone.svelte generated by Svelte v3.53.1 */
+
+function create_fragment$c(ctx) {
+	let svg;
+	let path;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			path = svg_element("path");
+			attr(path, "fill", /*color*/ ctx[0]);
+			attr(path, "d", "M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			set_style(svg, "width", "100%");
+			set_style(svg, "height", "100%");
+			attr(svg, "viewBox", "0 0 512 512");
+		},
+		m(target, anchor) {
+			insert(target, svg, anchor);
+			append(svg, path);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*color*/ 1) {
+				attr(path, "fill", /*color*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+function instance$c($$self, $$props, $$invalidate) {
+	let { color } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('color' in $$props) $$invalidate(0, color = $$props.color);
+	};
+
+	return [color];
+}
+
+class IconPhone extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$c, create_fragment$c, safe_not_equal, { color: 0 });
+	}
+}
+
+/* src/components-flex/icon/variants/IconLocationDot.svelte generated by Svelte v3.53.1 */
+
+function create_fragment$b(ctx) {
+	let svg;
+	let path;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			path = svg_element("path");
+			attr(path, "fill", /*color*/ ctx[0]);
+			attr(path, "d", "M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			set_style(svg, "width", "100%");
+			set_style(svg, "height", "100%");
+			attr(svg, "viewBox", "0 0 384 512");
+		},
+		m(target, anchor) {
+			insert(target, svg, anchor);
+			append(svg, path);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*color*/ 1) {
+				attr(path, "fill", /*color*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+function instance$b($$self, $$props, $$invalidate) {
+	let { color } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('color' in $$props) $$invalidate(0, color = $$props.color);
+	};
+
+	return [color];
+}
+
+class IconLocationDot extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$b, create_fragment$b, safe_not_equal, { color: 0 });
+	}
+}
+
+const ICON_SIZE = {
     x_small: {
         label: 'X Small',
         value: '12px',
@@ -13432,9 +13540,11 @@ const ICON_VARIANTS = {
     gift: IconGift,
     heart: IconHeart,
     link: IconLink,
+    locationDot: IconLocationDot,
     magnifying_grass: IconMagnifyingGrass,
     paperclip: IconPaperclip,
     paper_plane: IconPaperPlane,
+    phone: IconPhone,
     star: IconStar,
     ticket: IconTicket,
     truck: IconTrack,
@@ -13444,7 +13554,7 @@ const ICON_VARIANTS = {
 
 /* src/components-flex/icon/Icon.svelte generated by Svelte v3.53.1 */
 
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
 	let clickable;
 	let current;
 
@@ -13455,7 +13565,7 @@ function create_if_block$5(ctx) {
 				onClick: /*props*/ ctx[0].onClick,
 				eventName: /*props*/ ctx[0].eventName,
 				eventValue: /*props*/ ctx[0].eventValue,
-				$$slots: { default: [create_default_slot$3] },
+				$$slots: { default: [create_default_slot$4] },
 				$$scope: { ctx }
 			}
 		});
@@ -13498,7 +13608,7 @@ function create_if_block$5(ctx) {
 }
 
 // (26:2) <CLICKABLE layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
-function create_default_slot$3(ctx) {
+function create_default_slot$4(ctx) {
 	let switch_instance;
 	let switch_instance_anchor;
 	let current;
@@ -13570,80 +13680,454 @@ function create_default_slot$3(ctx) {
 	};
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*IconComponent*/ ctx[2] && create_if_block$5(ctx);
+	let if_block = /*IconComponent*/ ctx[2] && create_if_block$6(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (/*IconComponent*/ ctx[2]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*IconComponent*/ 4) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block$6(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		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(if_block_anchor);
+		}
+	};
+}
+
+function instance$a($$self, $$props, $$invalidate) {
+	let style;
+	let IconComponent;
+	let { props = {} } = $$props;
+	let { layerId = '' } = $$props;
+
+	const getSizeCss = () => {
+		return {
+			minWidth: props.width
+			? props.width
+			: ICON_SIZE[props.size ?? 'medium'].value,
+			width: props.width
+			? props.width
+			: ICON_SIZE[props.size ?? 'medium'].value,
+			height: props.height
+			? props.height
+			: ICON_SIZE[props.size ?? 'medium'].value
+		};
+	};
+
+	$$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({
+				display: 'flex',
+				alignItems: 'center',
+				overflow: 'hidden',
+				width: 'auto',
+				...getSizeCss(),
+				...toCssCommon(props)
+			}));
+		}
+
+		if ($$self.$$.dirty & /*props*/ 1) {
+			$$invalidate(2, IconComponent = ICON_VARIANTS[props.variant] ?? undefined);
+		}
+	};
+
+	return [props, layerId, IconComponent, style];
+}
+
+class Icon extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$a, create_fragment$a, safe_not_equal, { props: 0, layerId: 1 });
+	}
+}
+
+const BUTTON_SIZE_STYLES = {
+    extra_small: {
+        minHeight: '32px',
+        paddingInline: '12px',
+        fontSize: '12px',
+        paddingBlock: '8px',
+        lineHeight: 1.5,
+        borderRadius: '4px',
+    },
+    small: {
+        minHeight: '36px',
+        paddingInline: '16px',
+        fontSize: '13px',
+        paddingBlock: '8px',
+        lineHeight: 1.5,
+        borderRadius: '4px',
+    },
+    medium: {
+        minHeight: '40px',
+        paddingInline: '24px',
+        fontSize: '14px',
+        paddingBlock: '8px',
+        lineHeight: 1.5,
+        borderRadius: '4px',
+    },
+    large: {
+        minHeight: '48px',
+        paddingInline: '32px',
+        fontSize: '14px',
+        paddingBlock: '10px',
+        lineHeight: 1.5,
+        borderRadius: '4px',
+    },
+    extra_large: {
+        minHeight: '56px',
+        paddingInline: '40px',
+        fontSize: '17px',
+        paddingBlock: '12px',
+        lineHeight: 1.5,
+        borderRadius: '4px',
+    },
+};
+const BUTTON_THEME_STYLES = {
+    default: {
+        backgroundColor: '#33403e',
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    primary: {
+        backgroundColor: 'rgba(18,160,160,1)',
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    secondary: {
+        backgroundColor: '#f3f4f6',
+        color: '#000000',
+        fontWeight: 'bold',
+    },
+    success: {
+        backgroundColor: '#10b981',
+        color: '#ffffff',
+        fontWeight: 'bold',
+    },
+    warning: {
+        backgroundColor: '#fbbf24',
+        color: '#ffffff',
+        fontWeight: 'bold',
+    },
+    alert: {
+        backgroundColor: '#ef4444',
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    info: {
+        backgroundColor: '#0ea5e9',
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    neutral: {
+        backgroundColor: '#9ca3af',
+        color: '#333333',
+        fontWeight: 'bold',
+    },
+    transparent: {
+        backgroundColor: 'rgba(255, 255, 255, 0)',
+        color: '#00100ea1',
+        fontWeight: 'bold',
+    },
+};
+const BUTTON_ROUND_STYLES = {
+    none: {
+        borderRadius: 0,
+    },
+    default: {},
+    fulled: {
+        borderRadius: '56px',
+    },
+};
+const BUTTON_WRAP_STYLES = {
+    nowrap: {
+        whiteSpace: 'nowrap',
+    },
+    wrap: {
+        whiteSpace: 'pre-wrap',
+    },
+};
+
+function hexToRgb(hex) {
+    let r = 0, g = 0, b = 0;
+    if (hex.length === 4) {
+        r = parseInt(hex[1] + hex[1], 16);
+        g = parseInt(hex[2] + hex[2], 16);
+        b = parseInt(hex[3] + hex[3], 16);
+    }
+    else if (hex.length === 7) {
+        r = parseInt(hex[1] + hex[2], 16);
+        g = parseInt(hex[3] + hex[4], 16);
+        b = parseInt(hex[5] + hex[6], 16);
+    }
+    return { r, g, b };
+}
+function rgbToHex(r, g, b) {
+    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+}
+function darkenColor(color, percent) {
+    let r, g, b;
+    if (color.startsWith('rgba') || color.startsWith('rgb')) {
+        const rgbaMatch = color.replace(', ', ',').match(/rgba?\((\d+),(\d+),(\d+)(?:,[\d.]+)?\)/);
+        if (rgbaMatch) {
+            r = parseInt(rgbaMatch[1]);
+            g = parseInt(rgbaMatch[2]);
+            b = parseInt(rgbaMatch[3]);
+        }
+        else {
+            throw new Error('Invalid RGB/RGBA color format');
+        }
+    }
+    else if (color.startsWith('#')) {
+        const rgb = hexToRgb(color);
+        r = rgb.r;
+        g = rgb.g;
+        b = rgb.b;
+    }
+    else {
+        throw new Error('Unsupported color format');
+    }
+    // 色を暗くする
+    r = Math.round(r * (1 - percent));
+    g = Math.round(g * (1 - percent));
+    b = Math.round(b * (1 - percent));
+    return rgbToHex(r, g, b);
+}
+
+/* src/components-flex/button/Button.svelte generated by Svelte v3.53.1 */
+
+function add_css$8(target) {
+	append_styles(target, "svelte-jar2a9", ".button{background-color:var(--bg-color)}.button:hover{background-color:var(--hover-bg-color)}.button-icon.svelte-jar2a9{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
+}
+
+// (42:2) {#if props.isIcon && props.iconVariant}
+function create_if_block$5(ctx) {
+	let div;
+	let icon;
+	let current;
+
+	icon = new Icon({
+			props: {
+				props: {
+					variant: /*props*/ ctx[0].iconVariant,
+					color: /*props*/ ctx[0].color ?? /*buttonThemeStyle*/ ctx[3].color,
+					width: '1em',
+					height: '1em'
+				}
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			create_component(icon.$$.fragment);
+			attr(div, "class", "button-icon svelte-jar2a9");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(icon, div, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const icon_changes = {};
+
+			if (dirty & /*props*/ 1) icon_changes.props = {
+				variant: /*props*/ ctx[0].iconVariant,
+				color: /*props*/ ctx[0].color ?? /*buttonThemeStyle*/ ctx[3].color,
+				width: '1em',
+				height: '1em'
+			};
+
+			icon.$set(icon_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(icon.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(icon.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(icon);
+		}
+	};
+}
+
+// (41:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+function create_default_slot$3(ctx) {
+	let t0;
+	let span;
+	let t1_value = (/*props*/ ctx[0].label ?? buttonPropsDefault.label) + "";
+	let t1;
+	let current;
+	let if_block = /*props*/ ctx[0].isIcon && /*props*/ ctx[0].iconVariant && create_if_block$5(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			t0 = space();
+			span = element("span");
+			t1 = text(t1_value);
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t0, anchor);
+			insert(target, span, anchor);
+			append(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$5(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$9(ctx) {
+	let clickable;
+	let current;
+
+	clickable = new Clickable({
+			props: {
+				className: "button",
+				layerId: /*layerId*/ ctx[1],
+				style: /*style*/ ctx[2],
+				onClick: /*props*/ ctx[0].onClick,
+				eventName: /*props*/ ctx[0].eventName,
+				eventValue: /*props*/ ctx[0].eventValue,
+				$$slots: { default: [create_default_slot$3] },
+				$$scope: { ctx }
+			}
+		});
 
 	return {
 		c() {
-			if (if_block) if_block.c();
-			if_block_anchor = empty();
+			create_component(clickable.$$.fragment);
 		},
 		m(target, anchor) {
-			if (if_block) if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
+			mount_component(clickable, target, anchor);
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*IconComponent*/ ctx[2]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
-
-					if (dirty & /*IconComponent*/ 4) {
-						transition_in(if_block, 1);
-					}
-				} else {
-					if_block = create_if_block$5(ctx);
-					if_block.c();
-					transition_in(if_block, 1);
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				}
-			} else if (if_block) {
-				group_outros();
-
-				transition_out(if_block, 1, 1, () => {
-					if_block = null;
-				});
+			const clickable_changes = {};
+			if (dirty & /*layerId*/ 2) clickable_changes.layerId = /*layerId*/ ctx[1];
+			if (dirty & /*style*/ 4) clickable_changes.style = /*style*/ ctx[2];
+			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*/ 33) {
+				clickable_changes.$$scope = { dirty, ctx };
 			}
+
+			clickable.$set(clickable_changes);
 		},
 		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 (if_block) if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
+			destroy_component(clickable, detaching);
 		}
 	};
 }
 
 function instance$9($$self, $$props, $$invalidate) {
+	let variables;
 	let style;
-	let IconComponent;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
-
-	const getSizeCss = () => {
-		return {
-			minWidth: props.width
-			? props.width
-			: ICON_SIZE[props.size ?? 'medium'].value,
-			width: props.width
-			? props.width
-			: ICON_SIZE[props.size ?? 'medium'].value,
-			height: props.height
-			? props.height
-			: ICON_SIZE[props.size ?? 'medium'].value
-		};
-	};
+	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -13652,32 +14136,58 @@ function instance$9($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(3, style = objToStyle({
-				display: 'flex',
-				alignItems: 'center',
-				overflow: 'hidden',
-				width: 'auto',
-				...getSizeCss(),
-				...toCssCommon(props)
-			}));
+			$$invalidate(4, variables = {
+				'--bg-color': props.backgroundColor ?? buttonThemeStyle.backgroundColor,
+				'--hover-bg-color': darkenColor(props.backgroundColor ?? buttonThemeStyle.backgroundColor, 0.16)
+			});
 		}
 
-		if ($$self.$$.dirty & /*props*/ 1) {
-			$$invalidate(2, IconComponent = ICON_VARIANTS[props.variant] ?? undefined);
+		if ($$self.$$.dirty & /*props, variables*/ 17) {
+			$$invalidate(2, style = objToStyle({
+				display: 'inline-flex',
+				gap: '0.65em',
+				alignItems: 'center',
+				justifyContent: 'center',
+				outline: 0,
+				border: 0,
+				transition: 'background-color 0.12s, border-color 0.12s, color 0.12s',
+				width: props.width,
+				color: props.color ?? buttonThemeStyle.color,
+				fontWeight: props.fontWeight ?? buttonThemeStyle.fontWeight,
+				cursor: 'pointer',
+				...BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size],
+				...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
+				...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
+				...props.iconAngle
+				? { flexDirection: props.iconAngle }
+				: {},
+				...toCssCommon(props),
+				...toCssBorder(props),
+				...variables
+			}));
 		}
 	};
 
-	return [props, layerId, IconComponent, style];
+	return [props, layerId, style, buttonThemeStyle, variables];
 }
 
-class Icon extends SvelteComponent {
+class Button extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$9, create_fragment$9, safe_not_equal, { props: 0, layerId: 1 });
+		init(this, options, instance$9, create_fragment$9, safe_not_equal, { props: 0, layerId: 1 }, add_css$8);
 	}
 }
 
-const BUTTON_SIZE_STYLES = {
+const buttonOutlinedPropsDefault = {
+    label: 'ボタン',
+    size: 'medium',
+    theme: 'default',
+    round: 'default',
+    width: 'auto',
+    wrap: 'nowrap',
+};
+
+const BUTTON_OUTLINED_SIZE_STYLES = {
     extra_small: {
         minHeight: '32px',
         paddingInline: '12px',
@@ -13719,29 +14229,7 @@ const BUTTON_SIZE_STYLES = {
         borderRadius: '4px',
     },
 };
-const BUTTON_THEME_STYLES = {
-    theme: {
-        backgroundColor: 'rgba(18,160,160,1)',
-        color: '#FFFFFF',
-        fontWeight: 'bold',
-    },
-    default: {
-        backgroundColor: '#33403e',
-        color: '#FFFFFF',
-        fontWeight: 'bold',
-    },
-    transparent: {
-        backgroundColor: 'rgba(255, 255, 255, 0)',
-        color: '#00100ea1',
-        fontWeight: 'bold',
-    },
-    alert: {
-        backgroundColor: 'rgb(242,83,32,1)',
-        color: '#FFFFFF',
-        fontWeight: 'bold',
-    },
-};
-const BUTTON_ROUND_STYLES = {
+const BUTTON_OUTLINED_ROUND_STYLES = {
     none: {
         borderRadius: 0,
     },
@@ -13750,7 +14238,7 @@ const BUTTON_ROUND_STYLES = {
         borderRadius: '56px',
     },
 };
-const BUTTON_WRAP_STYLES = {
+const BUTTON_OUTLINED_WRAP_STYLES = {
     nowrap: {
         whiteSpace: 'nowrap',
     },
@@ -13758,100 +14246,14 @@ const BUTTON_WRAP_STYLES = {
         whiteSpace: 'pre-wrap',
     },
 };
-const BUTTON_VARIANTS = {
-    size: {
-        extra_small: {
-            minHeight: '32px',
-            paddingInline: '12px',
-            fontSize: '12px',
-            paddingBlock: '8px',
-            lineHeight: 1.5,
-            borderRadius: '4px',
-        },
-        small: {
-            minHeight: '36px',
-            paddingInline: '16px',
-            fontSize: '13px',
-            paddingBlock: '8px',
-            lineHeight: 1.5,
-            borderRadius: '4px',
-        },
-        medium: {
-            minHeight: '40px',
-            paddingInline: '24px',
-            fontSize: '14px',
-            paddingBlock: '8px',
-            lineHeight: 1.5,
-            borderRadius: '4px',
-        },
-        large: {
-            minHeight: '48px',
-            paddingInline: '32px',
-            fontSize: '14px',
-            paddingBlock: '10px',
-            lineHeight: 1.5,
-            borderRadius: '4px',
-        },
-        extra_large: {
-            minHeight: '56px',
-            paddingInline: '40px',
-            fontSize: '17px',
-            paddingBlock: '12px',
-            lineHeight: 1.5,
-            borderRadius: '4px',
-        },
-    },
-    theme: {
-        theme: {
-            backgroundColor: 'rgba(18,160,160,1)',
-            color: '#FFFFFF',
-            fontWeight: 'bold',
-        },
-        default: {
-            backgroundColor: '#33403e',
-            color: '#FFFFFF',
-            fontWeight: 'bold',
-            // 'bg-action-default hover:bg-action-default-hover text-default'
-        },
-        transparent: {
-            backgroundColor: 'rgba(255, 255, 255, 0)',
-            color: '#00100ea1',
-            fontWeight: 'bold',
-            // 'bg-action-default hover:bg-action-default-hover text-default'
-        },
-        alert: {
-            backgroundColor: 'rgb(242,83,32,1)',
-            color: '#FFFFFF',
-            fontWeight: 'bold',
-            // 'bg-negative hover:bg-negative-hover text-primitive-white font-bold'
-        },
-    },
-    round: {
-        none: {
-            borderRadius: 0,
-        },
-        default: {},
-        fulled: {
-            borderRadius: '56px',
-        },
-    },
-    wrap: {
-        nowrap: {
-            whiteSpace: 'nowrap',
-        },
-        wrap: {
-            whiteSpace: 'pre-wrap',
-        },
-    },
-};
 
-/* src/components-flex/button/Button.svelte generated by Svelte v3.53.1 */
+/* src/components-flex/button-outlined/ButtonOutlined.svelte generated by Svelte v3.53.1 */
 
-function add_css$6(target) {
-	append_styles(target, "svelte-bing7g", ".button-icon.svelte-bing7g{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
+function add_css$7(target) {
+	append_styles(target, "svelte-11hj92h", ".button-outlined{background-color:#ffffff}.button-outlined:hover{background-color:#f6f6f6}.button-outlined-icon.svelte-11hj92h{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
 
-// (36:2) {#if props.isIcon && props.iconVariant}
+// (46:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$4(ctx) {
 	let div;
 	let icon;
@@ -13872,7 +14274,7 @@ function create_if_block$4(ctx) {
 		c() {
 			div = element("div");
 			create_component(icon.$$.fragment);
-			attr(div, "class", "button-icon svelte-bing7g");
+			attr(div, "class", "button-outlined-icon svelte-11hj92h");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -13907,11 +14309,11 @@ function create_if_block$4(ctx) {
 	};
 }
 
-// (35:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+// (38:0) <Clickable   className="button-outlined"   {layerId}   {style}   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_value = (/*props*/ ctx[0].label ?? buttonOutlinedPropsDefault.label) + "";
 	let t1;
 	let current;
 	let if_block = /*props*/ ctx[0].isIcon && /*props*/ ctx[0].iconVariant && create_if_block$4(ctx);
@@ -13954,7 +14356,7 @@ function create_default_slot$2(ctx) {
 				check_outros();
 			}
 
-			if ((!current || dirty & /*props*/ 1) && t1_value !== (t1_value = (/*props*/ ctx[0].label ?? buttonPropsDefault.label) + "")) set_data(t1, t1_value);
+			if ((!current || dirty & /*props*/ 1) && t1_value !== (t1_value = (/*props*/ ctx[0].label ?? buttonOutlinedPropsDefault.label) + "")) set_data(t1, t1_value);
 		},
 		i(local) {
 			if (current) return;
@@ -13979,7 +14381,7 @@ function create_fragment$8(ctx) {
 
 	clickable = new Clickable({
 			props: {
-				className: "button",
+				className: "button-outlined",
 				layerId: /*layerId*/ ctx[1],
 				style: /*style*/ ctx[2],
 				onClick: /*props*/ ctx[0].onClick,
@@ -14031,7 +14433,7 @@ function instance$8($$self, $$props, $$invalidate) {
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
-	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
+	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonOutlinedPropsDefault.theme];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -14046,15 +14448,17 @@ function instance$8($$self, $$props, $$invalidate) {
 				alignItems: 'center',
 				justifyContent: 'center',
 				outline: 0,
-				border: 0,
+				borderWidth: '1px',
+				borderStyle: 'solid',
 				transition: 'background-color 0.12s, border-color 0.12s, color 0.12s',
 				width: props.width,
-				backgroundColor: props.backgroundColor ?? buttonThemeStyle.backgroundColor,
-				color: props.color ?? buttonThemeStyle.color,
+				color: props.color ?? buttonThemeStyle.backgroundColor,
+				borderColor: props.color ?? buttonThemeStyle.backgroundColor,
 				fontWeight: props.fontWeight ?? buttonThemeStyle.fontWeight,
-				...BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size],
-				...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
-				...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
+				cursor: 'pointer',
+				...BUTTON_OUTLINED_SIZE_STYLES[props.size ?? buttonOutlinedPropsDefault.size],
+				...BUTTON_OUTLINED_WRAP_STYLES[props.wrap ?? buttonOutlinedPropsDefault.wrap],
+				...BUTTON_OUTLINED_ROUND_STYLES[props.round ?? buttonOutlinedPropsDefault.round],
 				...props.iconAngle
 				? { flexDirection: props.iconAngle }
 				: {},
@@ -14067,17 +14471,17 @@ function instance$8($$self, $$props, $$invalidate) {
 	return [props, layerId, style, buttonThemeStyle];
 }
 
-class Button extends SvelteComponent {
+class ButtonOutlined extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { props: 0, layerId: 1 }, add_css$6);
+		init(this, options, instance$8, create_fragment$8, safe_not_equal, { props: 0, layerId: 1 }, add_css$7);
 	}
 }
 
 /* src/components-flex/text-button/TextButton.svelte generated by Svelte v3.53.1 */
 
-function add_css$5(target) {
-	append_styles(target, "svelte-11jxyiz", ".flex-text-button.svelte-11jxyiz{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;padding:0;text-decoration:underline;background-color:rgba(255, 255, 255, 0);transition:color 0.12s}.flex-text-button.svelte-11jxyiz:hover{text-decoration:none}.flex-text-button-icon.svelte-11jxyiz{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
+function add_css$6(target) {
+	append_styles(target, "svelte-2imv7z", ".flex-text-button.svelte-2imv7z{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;padding:0;text-decoration:underline;background-color:rgba(255, 255, 255, 0);transition:color 0.12s}.flex-text-button.svelte-2imv7z:hover{text-decoration:none}.flex-text-button-icon.svelte-2imv7z{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
 }
 
 // (103:4) {#if props.isIcon && props.iconVariant}
@@ -14099,7 +14503,7 @@ function create_if_block$3(ctx) {
 		c() {
 			div = element("div");
 			create_component(icon.$$.fragment);
-			attr(div, "class", "flex-text-button-icon svelte-11jxyiz");
+			attr(div, "class", "flex-text-button-icon svelte-2imv7z");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -14152,7 +14556,7 @@ function create_fragment$7(ctx) {
 			t1 = text(t1_value);
 			attr(button, "data-layer-id", /*layerId*/ ctx[1]);
 			attr(button, "style", /*style*/ ctx[2]);
-			attr(button, "class", "flex-text-button svelte-11jxyiz");
+			attr(button, "class", "flex-text-button svelte-2imv7z");
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -14339,7 +14743,7 @@ class TextButton extends SvelteComponent {
 				props: 0,
 				layerId: 1
 			},
-			add_css$5
+			add_css$6
 		);
 	}
 }
@@ -14388,8 +14792,8 @@ const CLOSE_BUTTON_LABEL_PLACEMENT = {
 
 /* src/components-flex/close-button/CloseButton.svelte generated by Svelte v3.53.1 */
 
-function add_css$4(target) {
-	append_styles(target, "svelte-1p6g3cd", ".close-button.svelte-1p6g3cd{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s}.close-button.svelte-1p6g3cd:hover{transform:rotate(90deg)}.close-button-order-one.svelte-1p6g3cd{order:1}.close-button-order-two.svelte-1p6g3cd{order:2}");
+function add_css$5(target) {
+	append_styles(target, "svelte-12v1h9t", ".close-button.svelte-12v1h9t{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s}.close-button.svelte-12v1h9t:hover{transform:rotate(90deg)}.close-button-order-one.svelte-12v1h9t{order:1}.close-button-order-two.svelte-12v1h9t{order:2}");
 }
 
 // (93:2) {#if hasLabel}
@@ -14405,7 +14809,7 @@ function create_if_block$2(ctx) {
 
 			attr(span, "class", "close-button-label " + (/*isLeftLabelPlacement*/ ctx[8]
 			? 'close-button-order-one'
-			: '') + " svelte-1p6g3cd");
+			: '') + " svelte-12v1h9t");
 		},
 		m(target, anchor) {
 			insert(target, span, anchor);
@@ -14466,7 +14870,7 @@ function create_fragment$6(ctx) {
 			attr(svg, "fill", /*color*/ ctx[6]);
 			attr(span, "style", /*iconStyle*/ ctx[1]);
 			set_attributes(button, button_data);
-			toggle_class(button, "svelte-1p6g3cd", true);
+			toggle_class(button, "svelte-12v1h9t", true);
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -14507,7 +14911,7 @@ function create_fragment$6(ctx) {
 				dataAttrStopPropagation('click')
 			]));
 
-			toggle_class(button, "svelte-1p6g3cd", true);
+			toggle_class(button, "svelte-12v1h9t", true);
 		},
 		i: noop,
 		o: noop,
@@ -14627,18 +15031,18 @@ class CloseButton extends SvelteComponent {
 				eventName: 10,
 				eventValue: 11
 			},
-			add_css$4
+			add_css$5
 		);
 	}
 }
 
 /* src/components-flex/image/Image.svelte generated by Svelte v3.53.1 */
 
-function add_css$3(target) {
-	append_styles(target, "svelte-1xwuxb4", ".image.svelte-1xwuxb4{max-width:100%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}.image-object.svelte-1xwuxb4{width:100%;overflow:hidden}.image-img.svelte-1xwuxb4{vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none}");
+function add_css$4(target) {
+	append_styles(target, "svelte-1nwdvab", ".image-object.svelte-1nwdvab{width:100%;overflow:hidden}.image-img.svelte-1nwdvab{vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}");
 }
 
-// (16:2) <CLICKABLE onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+// (21:0) <CLICKABLE layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
 function create_default_slot$1(ctx) {
 	let object;
 	let img;
@@ -14651,9 +15055,9 @@ function create_default_slot$1(ctx) {
 			img = element("img");
 			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, "class", "image-img svelte-1xwuxb4");
+			attr(img, "class", "image-img svelte-1nwdvab");
 			attr(object, "style", /*objectStyle*/ ctx[2]);
-			attr(object, "class", "image-object svelte-1xwuxb4");
+			attr(object, "class", "image-object svelte-1nwdvab");
 		},
 		m(target, anchor) {
 			insert(target, object, anchor);
@@ -14679,12 +15083,13 @@ function create_default_slot$1(ctx) {
 }
 
 function create_fragment$5(ctx) {
-	let div;
 	let clickable;
 	let current;
 
 	clickable = new Clickable({
 			props: {
+				layerId: /*layerId*/ ctx[1],
+				style: /*style*/ ctx[3],
 				onClick: /*props*/ ctx[0].onClick,
 				eventName: /*props*/ ctx[0].eventName,
 				eventValue: /*props*/ ctx[0].eventValue,
@@ -14695,19 +15100,16 @@ function create_fragment$5(ctx) {
 
 	return {
 		c() {
-			div = element("div");
 			create_component(clickable.$$.fragment);
-			attr(div, "data-layer-id", /*layerId*/ ctx[1]);
-			attr(div, "class", "image svelte-1xwuxb4");
-			attr(div, "style", /*style*/ ctx[3]);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			mount_component(clickable, div, null);
+			mount_component(clickable, target, anchor);
 			current = true;
 		},
 		p(ctx, [dirty]) {
 			const clickable_changes = {};
+			if (dirty & /*layerId*/ 2) clickable_changes.layerId = /*layerId*/ ctx[1];
+			if (dirty & /*style*/ 8) clickable_changes.style = /*style*/ ctx[3];
 			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;
@@ -14717,14 +15119,6 @@ function create_fragment$5(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;
@@ -14736,8 +15130,7 @@ function create_fragment$5(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div);
-			destroy_component(clickable);
+			destroy_component(clickable, detaching);
 		}
 	};
 }
@@ -14757,6 +15150,12 @@ function instance$5($$self, $$props, $$invalidate) {
 		if ($$self.$$.dirty & /*props*/ 1) {
 			$$invalidate(3, style = objToStyle({
 				width: props.width ?? '100%',
+				maxWidth: '100%',
+				overflow: 'hidden',
+				flexShrink: 0,
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
 				...toCssCommon(props)
 			}));
 		}
@@ -14772,7 +15171,7 @@ function instance$5($$self, $$props, $$invalidate) {
 class Image extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 0, layerId: 1 }, add_css$3);
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { props: 0, layerId: 1 }, add_css$4);
 	}
 }
 
@@ -14930,14 +15329,18 @@ const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
 
 /* src/components-flex/slider/Slider.svelte generated by Svelte v3.53.1 */
 
+function add_css$3(target) {
+	append_styles(target, "svelte-17ij7ip", ".container.svelte-17ij7ip{-webkit-user-drag:none}");
+}
+
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[19] = list[i];
-	child_ctx[21] = i;
+	child_ctx[29] = list[i];
+	child_ctx[31] = i;
 	return child_ctx;
 }
 
-// (87:4) {#each indicators ?? [] as indicator, i}
+// (151:4) {#each indicators ?? [] as indicator, i}
 function create_each_block(ctx) {
 	let button;
 	let i_1;
@@ -14947,7 +15350,7 @@ function create_each_block(ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[16](/*i*/ ctx[21]);
+		return /*click_handler*/ ctx[19](/*i*/ ctx[31]);
 	}
 
 	return {
@@ -14959,11 +15362,15 @@ function create_each_block(ctx) {
 			attr(i_1, "style", i_1_style_value = objToStyle({
 				.../*indicatorItemStyle*/ ctx[3],
 				...{
-					background: /*indicator*/ ctx[19].isActive ? '#555555' : '#AAAAAA'
+					background: /*indicator*/ ctx[29].isActive ? '#555555' : '#AAAAAA'
 				}
 			}));
 
-			attr(button, "style", objToStyle({ padding: '4px' }));
+			attr(button, "style", objToStyle({
+				padding: '4px',
+				border: 0,
+				background: 'none'
+			}));
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -14978,10 +15385,10 @@ function create_each_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty & /*indicatorItemStyle, indicators*/ 136 && i_1_style_value !== (i_1_style_value = objToStyle({
+			if (dirty[0] & /*indicatorItemStyle, indicators*/ 136 && i_1_style_value !== (i_1_style_value = objToStyle({
 				.../*indicatorItemStyle*/ ctx[3],
 				...{
-					background: /*indicator*/ ctx[19].isActive ? '#555555' : '#AAAAAA'
+					background: /*indicator*/ ctx[29].isActive ? '#555555' : '#AAAAAA'
 				}
 			}))) {
 				attr(i_1, "style", i_1_style_value);
@@ -15002,8 +15409,10 @@ function create_fragment$3(ctx) {
 	let t;
 	let div1;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[14].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[13], null);
+	let mounted;
+	let dispose;
+	const default_slot_template = /*#slots*/ ctx[17].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[16], null);
 	let each_value = /*indicators*/ ctx[7] ?? [];
 	let each_blocks = [];
 
@@ -15023,6 +15432,7 @@ function create_fragment$3(ctx) {
 				each_blocks[i].c();
 			}
 
+			attr(div0, "class", "container svelte-17ij7ip");
 			attr(div0, "style", div0_style_value = [/*containerStyle*/ ctx[5], /*overrideStyle*/ ctx[1]].join(' '));
 			attr(div1, "style", /*indicatorListStyle*/ ctx[4]);
 			attr(div2, "data-layer-id", /*layerId*/ ctx[0]);
@@ -15036,7 +15446,7 @@ function create_fragment$3(ctx) {
 				default_slot.m(div0, null);
 			}
 
-			/*div0_binding*/ ctx[15](div0);
+			/*div0_binding*/ ctx[18](div0);
 			append(div2, t);
 			append(div2, div1);
 
@@ -15045,28 +15455,37 @@ function create_fragment$3(ctx) {
 			}
 
 			current = true;
+
+			if (!mounted) {
+				dispose = [
+					listen(div0, "mousedown", /*handleMousedown*/ ctx[10]),
+					listen(div0, "touchstart", /*handleTouchstart*/ ctx[9])
+				];
+
+				mounted = true;
+			}
 		},
-		p(ctx, [dirty]) {
+		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 8192)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 65536)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[13],
+						/*$$scope*/ ctx[16],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[13])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[13], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[16])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[16], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*containerStyle, overrideStyle*/ 34 && div0_style_value !== (div0_style_value = [/*containerStyle*/ ctx[5], /*overrideStyle*/ ctx[1]].join(' '))) {
+			if (!current || dirty[0] & /*containerStyle, overrideStyle*/ 34 && div0_style_value !== (div0_style_value = [/*containerStyle*/ ctx[5], /*overrideStyle*/ ctx[1]].join(' '))) {
 				attr(div0, "style", div0_style_value);
 			}
 
-			if (dirty & /*objToStyle, handleClickIndicator, indicatorItemStyle, indicators*/ 392) {
+			if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/ 392) {
 				each_value = /*indicators*/ ctx[7] ?? [];
 				let i;
 
@@ -15089,15 +15508,15 @@ function create_fragment$3(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (!current || dirty & /*indicatorListStyle*/ 16) {
+			if (!current || dirty[0] & /*indicatorListStyle*/ 16) {
 				attr(div1, "style", /*indicatorListStyle*/ ctx[4]);
 			}
 
-			if (!current || dirty & /*layerId*/ 1) {
+			if (!current || dirty[0] & /*layerId*/ 1) {
 				attr(div2, "data-layer-id", /*layerId*/ ctx[0]);
 			}
 
-			if (!current || dirty & /*style*/ 64) {
+			if (!current || dirty[0] & /*style*/ 64) {
 				attr(div2, "style", /*style*/ ctx[6]);
 			}
 		},
@@ -15113,8 +15532,10 @@ function create_fragment$3(ctx) {
 		d(detaching) {
 			if (detaching) detach(div2);
 			if (default_slot) default_slot.d(detaching);
-			/*div0_binding*/ ctx[15](null);
+			/*div0_binding*/ ctx[18](null);
 			destroy_each(each_blocks, detaching);
+			mounted = false;
+			run_all(dispose);
 		}
 	};
 }
@@ -15132,9 +15553,11 @@ function instance$3($$self, $$props, $$invalidate) {
 	let { overrideStyle } = $$props;
 	let slotElement;
 	let currentIndex = 0;
+	let startX = 0;
+	let movedX = null;
 	let childCount = slotElement?.children?.length ?? 0;
 
-	const calcTransformX = (index, itemCount) => {
+	const calcTransformX = (index, itemCount, _movedX) => {
 		if (index === 0) return undefined;
 
 		const movingX = (() => {
@@ -15152,24 +15575,92 @@ function instance$3($$self, $$props, $$invalidate) {
 			return result;
 		})();
 
-		return `translateX(calc(-${movingX}% - ${(props.gap ?? 0) * index}px))`;
+		return `translateX(calc(-${movingX}% - ${(props.gap ?? 0) * index}px + ${(movedX ?? 0) * -1}px))`;
 	};
 
 	const handleClickIndicator = index => {
-		$$invalidate(10, currentIndex = index);
+		$$invalidate(12, currentIndex = index);
 	};
 
 	const setChildCount = () => {
 		const count = slotElement?.children?.length ?? 0;
 
 		if (count !== childCount) {
-			$$invalidate(11, childCount = slotElement?.children?.length ?? 0);
+			$$invalidate(14, childCount = slotElement?.children?.length ?? 0);
+		}
+	};
+
+	const toNext = (loop = false) => {
+		if (currentIndex < childCount - 1) {
+			$$invalidate(12, currentIndex = currentIndex + 1);
+		} else if (loop) {
+			$$invalidate(12, currentIndex = 0);
+		}
+	};
+
+	const toPrev = (loop = false) => {
+		if (currentIndex > 0) {
+			$$invalidate(12, currentIndex = currentIndex - 1);
+		}
+	};
+
+	const handleTouchmove = e => {
+		startX = startX - e.touches[0].clientX;
+	};
+
+	const handleTouchend = e => {
+		if (movedX >= 32) {
+			toNext();
+		} else if (movedX <= -32) {
+			toPrev();
+		}
+
+		$$invalidate(13, movedX = null);
+		document.removeEventListener('touchmove', handleTouchmove);
+		document.removeEventListener('touchend', handleTouchend);
+	};
+
+	const handleTouchstart = e => {
+		startX = e.touches[0].clientX;
+		document.addEventListener('touchmove', handleTouchmove, { passive: true });
+		document.addEventListener('touchend', handleTouchend, { passive: true });
+	};
+
+	const handleMousemove = e => {
+		$$invalidate(13, movedX = startX - e.clientX);
+	};
+
+	const handleMouseup = e => {
+		if (movedX >= 32) {
+			toNext();
+		} else if (movedX <= -32) {
+			toPrev();
 		}
+
+		$$invalidate(13, movedX = null);
+		document.removeEventListener('mousemove', handleMousemove);
+		document.removeEventListener('mouseup', handleMouseup);
+	};
+
+	const handleMousedown = e => {
+		console.log('mousedown');
+		startX = e.clientX;
+		document.addEventListener('mousemove', handleMousemove, { passive: true });
+		document.addEventListener('mouseup', handleMouseup, { passive: true });
 	};
 
 	onMount$1(() => {
 		setChildCount();
 		setInterval(setChildCount, 300);
+
+		if (props.auto) {
+			setInterval(
+				() => {
+					toNext(true);
+				},
+				props.interval ?? 5000
+			);
+		}
 	});
 
 	function div0_binding($$value) {
@@ -15183,21 +15674,21 @@ function instance$3($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
-		if ('props' in $$props) $$invalidate(9, props = $$props.props);
+		if ('props' in $$props) $$invalidate(11, props = $$props.props);
 		if ('overrideStyle' in $$props) $$invalidate(1, overrideStyle = $$props.overrideStyle);
-		if ('$$scope' in $$props) $$invalidate(13, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(16, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*childCount, currentIndex*/ 3072) {
+		if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 20480) {
 			$$invalidate(7, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
 		}
 
-		if ($$self.$$.dirty & /*props*/ 512) {
-			$$invalidate(12, itemWidthPercentage = props.itemWidthPercentage ?? 100);
+		if ($$self.$$.dirty[0] & /*props*/ 2048) {
+			$$invalidate(15, itemWidthPercentage = props.itemWidthPercentage ?? 100);
 		}
 
-		if ($$self.$$.dirty & /*props, itemWidthPercentage, currentIndex, childCount*/ 7680) {
+		if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX, currentIndex, childCount*/ 63488) {
 			$$invalidate(5, containerStyle = objToStyle({
 				display: 'grid',
 				// marginInline: `-${props.gap}px`,
@@ -15206,8 +15697,9 @@ function instance$3($$self, $$props, $$invalidate) {
 				gridAutoFlow: 'column',
 				gridAutoColumns: `minmax(${itemWidthPercentage}%, 1fr)`,
 				flexShrink: 0,
-				transition: 'transform 0.5s',
-				transform: calcTransformX(currentIndex, childCount)
+				transition: movedX === null ? 'transform 0.5s' : undefined,
+				transform: calcTransformX(currentIndex, childCount),
+				userSelect: 'none'
 			}));
 		}
 	};
@@ -15226,7 +15718,8 @@ function instance$3($$self, $$props, $$invalidate) {
 		height: '8px',
 		borderRadius: '100%',
 		display: 'block',
-		background: '#AAAAAA'
+		background: '#AAAAAA',
+		border: 0
 	});
 
 	return [
@@ -15239,8 +15732,11 @@ function instance$3($$self, $$props, $$invalidate) {
 		style,
 		indicators,
 		handleClickIndicator,
+		handleTouchstart,
+		handleMousedown,
 		props,
 		currentIndex,
+		movedX,
 		childCount,
 		itemWidthPercentage,
 		$$scope,
@@ -15253,7 +15749,7 @@ function instance$3($$self, $$props, $$invalidate) {
 class Slider extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, { layerId: 0, props: 9, overrideStyle: 1 });
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { layerId: 0, props: 11, overrideStyle: 1 }, add_css$3, [-1, -1]);
 	}
 }
 
@@ -15315,7 +15811,7 @@ const TEXT_VARIANTS = {
 /* src/components-flex/text/Text.svelte generated by Svelte v3.53.1 */
 
 function add_css$2(target) {
-	append_styles(target, "svelte-18qq8cj", ".text.svelte-18qq8cj{margin:0;word-break:break-all}");
+	append_styles(target, "svelte-1vl0c87", ".text.svelte-1vl0c87{margin:0;word-break:break-all}");
 }
 
 function create_fragment$2(ctx) {
@@ -15325,7 +15821,7 @@ function create_fragment$2(ctx) {
 		c() {
 			p = element("p");
 			attr(p, "data-layer-id", /*layerId*/ ctx[0]);
-			attr(p, "class", "text svelte-18qq8cj");
+			attr(p, "class", "text svelte-1vl0c87");
 			attr(p, "style", /*style*/ ctx[1]);
 		},
 		m(target, anchor) {
@@ -15417,7 +15913,7 @@ const LAYER_TEXT_SIZE = {
 /* src/components-flex/background-overlay/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
 
 function add_css$1(target) {
-	append_styles(target, "svelte-ed4ktn", ".v2-background.svelte-ed4ktn{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
+	append_styles(target, "svelte-18nkdjz", ".v2-background.svelte-18nkdjz{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
 
 // (14:0) {#if backgroundOverlay}
@@ -15430,7 +15926,7 @@ function create_if_block$1(ctx) {
 	return {
 		c() {
 			div = element("div");
-			attr(div, "class", div_class_value = "" + (null_to_empty(['v2-background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-ed4ktn"));
+			attr(div, "class", div_class_value = "" + (null_to_empty(['v2-background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-18nkdjz"));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -15441,7 +15937,7 @@ function create_if_block$1(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*className*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(['v2-background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-ed4ktn"))) {
+			if (dirty & /*className*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(['v2-background', /*className*/ ctx[1] || ''].join(' ')) + " svelte-18nkdjz"))) {
 				attr(div, "class", div_class_value);
 			}
 		},
@@ -15513,7 +16009,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-15b58xm", "*{box-sizing:border-box}.modal.svelte-15b58xm{position:fixed;z-index:2147483647;display:flex}.modal.svelte-15b58xm > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-15b58xm{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-15b58xm{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}
@@ -15654,7 +16150,7 @@ function create_if_block(ctx) {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-15b58xm"));
+			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(';'));
@@ -15687,7 +16183,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-15b58xm"))) {
+			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);
 			}
 		},
@@ -16203,4 +16699,4 @@ const ROUND_STYLES = {
     },
 };
 
-export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_THEME, BUTTON_THEME_STYLES, BUTTON_VARIANTS, BUTTON_WRAP_STYLES, BackgroundSizes, Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, Avatar as FlexAvatar, Button as FlexButton, CloseButton as FlexCloseButton, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, TextButton as FlexTextButton, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_VARIANTS, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_STYLES, SHADOW_VARIANT, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TEXT_BUTTON_COLOR, TEXT_BUTTON_ICON_ANGLE, TEXT_BUTTON_LINK_TARGET, TEXT_BUTTON_ROUND, TEXT_BUTTON_SIZE, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
+export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_THEME, BUTTON_THEME_STYLES, BUTTON_WRAP_STYLES, BackgroundSizes, Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, CloseButton as FlexCloseButton, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, TextButton as FlexTextButton, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_VARIANTS, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_STYLES, SHADOW_VARIANT, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TEXT_BUTTON_COLOR, TEXT_BUTTON_ICON_ANGLE, TEXT_BUTTON_LINK_TARGET, TEXT_BUTTON_ROUND, TEXT_BUTTON_SIZE, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };