@plaidev/karte-action-sdk 1.1.126-27949188.96bb611a → 1.1.126-27950980.e8e536b0

package/dist/hydrate/index.es.js

@@ -1289,6 +1289,11 @@ const WritingModes = ['horizontal-tb', 'vertical-lr'];
 /** @internal */
 const ListSeparatorTypes = ['none', 'border', 'gap'];
 /** @internal */
+const DefaultEdgePosition = {
+    edgeDistance: '8px',
+    edgeDirectionOffset: '0px',
+};
+/** @internal */
 const DefaultListSeparatorNone = {
     type: 'none',
 };
@@ -7024,137 +7029,153 @@ class FormRatingButtons extends SvelteComponent {
 /* src/components/Slide.svelte generated by Svelte v3.53.1 */
 
 function add_css$4(target) {
-	append_styles(target, "svelte-105wdod", ".root.svelte-105wdod{width:100%;height:100%;position:relative}.container.svelte-105wdod{width:100%;height:100%;position:relative;overflow:hidden}.slide.svelte-105wdod{height:100%;position:absolute;display:flex}.transition.svelte-105wdod{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-105wdod{height:100%;flex:none}.prev-button.svelte-105wdod,.next-button.svelte-105wdod{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button.svelte-105wdod{left:0}.next-button.svelte-105wdod{right:0}.button-container.svelte-105wdod{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box}.prev-icon.svelte-105wdod{width:20px;height:20px;box-sizing:border-box;border-right:solid 3px #000;border-top:solid 3px #000;transform:translateX(35.4%) rotate(-135deg)}.next-icon.svelte-105wdod{width:20px;height:20px;box-sizing:border-box;border-right:solid 3px #000;border-top:solid 3px #000;transform:translateX(-35.4%) rotate(45deg)}.navigation.svelte-105wdod{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-105wdod{flex-shrink:0;cursor:pointer}.navigation-item-inner.circle.svelte-105wdod{border-radius:51%}");
+	append_styles(target, "svelte-c7zaph", ".root.svelte-c7zaph{width:100%;height:100%;position:relative}.container.svelte-c7zaph{width:100%;height:100%;position:relative;overflow:hidden}.slide.svelte-c7zaph{height:100%;position:absolute;display:flex}.transition.svelte-c7zaph{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-c7zaph{height:100%;flex:none}.prev-button.svelte-c7zaph,.next-button.svelte-c7zaph{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button.svelte-c7zaph{left:0}.next-button.svelte-c7zaph{right:0}.button-container.svelte-c7zaph{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box}.navigation.svelte-c7zaph{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-c7zaph{flex-shrink:0;cursor:pointer}.navigation-item-inner.circle.svelte-c7zaph{border-radius:51%}");
 }
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[52] = list[i];
-	child_ctx[54] = i;
+	child_ctx[57] = list[i];
+	child_ctx[59] = i;
 	return child_ctx;
 }
 
-// (315:2) {#if isVisiblePrevButton}
+// (349:2) {#if isVisiblePrevButton}
 function create_if_block_1(ctx) {
-	let div2;
 	let div1;
 	let div0;
+	let svg;
+	let polygon;
 	let mounted;
 	let dispose;
 
 	return {
 		c() {
-			div2 = element("div");
 			div1 = element("div");
 			div0 = element("div");
+			svg = svg_element("svg");
+			polygon = svg_element("polygon");
 			this.h();
 		},
 		l(nodes) {
-			div2 = claim_element(nodes, "DIV", { class: true });
-			var div2_nodes = children(div2);
-			div1 = claim_element(div2_nodes, "DIV", { class: true, style: true });
+			div1 = claim_element(nodes, "DIV", { class: true });
 			var div1_nodes = children(div1);
 			div0 = claim_element(div1_nodes, "DIV", { class: true, style: true });
-			children(div0).forEach(detach);
+			var div0_nodes = children(div0);
+			svg = claim_svg_element(div0_nodes, "svg", { viewBox: true, xmlns: true, style: true });
+			var svg_nodes = children(svg);
+			polygon = claim_svg_element(svg_nodes, "polygon", { points: true });
+			children(polygon).forEach(detach);
+			svg_nodes.forEach(detach);
+			div0_nodes.forEach(detach);
 			div1_nodes.forEach(detach);
-			div2_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(div0, "class", "prev-icon svelte-105wdod");
-			attr(div0, "style", /*prevIconStyle*/ ctx[9]);
-			attr(div1, "class", "button-container svelte-105wdod");
-			attr(div1, "style", /*prevButtonContainerStyle*/ ctx[0]);
-			attr(div2, "class", "prev-button svelte-105wdod");
+			attr(polygon, "points", "8,0 10,2 4,8 10,14 8,16 0,8");
+			attr(svg, "viewBox", "0 0 10 16");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			attr(svg, "style", /*prevIconStyle*/ ctx[9]);
+			attr(div0, "class", "button-container svelte-c7zaph");
+			attr(div0, "style", /*_prevButtonContainerStyle*/ ctx[8]);
+			attr(div1, "class", "prev-button svelte-c7zaph");
 		},
 		m(target, anchor) {
-			insert_hydration(target, div2, anchor);
-			append_hydration(div2, div1);
+			insert_hydration(target, div1, anchor);
 			append_hydration(div1, div0);
+			append_hydration(div0, svg);
+			append_hydration(svg, polygon);
 
 			if (!mounted) {
-				dispose = listen(div2, "click", /*prev*/ ctx[14]);
+				dispose = listen(div1, "click", /*prev*/ ctx[14]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
 			if (dirty[0] & /*prevIconStyle*/ 512) {
-				attr(div0, "style", /*prevIconStyle*/ ctx[9]);
+				attr(svg, "style", /*prevIconStyle*/ ctx[9]);
 			}
 
-			if (dirty[0] & /*prevButtonContainerStyle*/ 1) {
-				attr(div1, "style", /*prevButtonContainerStyle*/ ctx[0]);
+			if (dirty[0] & /*_prevButtonContainerStyle*/ 256) {
+				attr(div0, "style", /*_prevButtonContainerStyle*/ ctx[8]);
 			}
 		},
 		d(detaching) {
-			if (detaching) detach(div2);
+			if (detaching) detach(div1);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (322:2) {#if isVisibleNextButton}
+// (358:2) {#if isVisibleNextButton}
 function create_if_block(ctx) {
-	let div2;
 	let div1;
 	let div0;
+	let svg;
+	let polygon;
 	let mounted;
 	let dispose;
 
 	return {
 		c() {
-			div2 = element("div");
 			div1 = element("div");
 			div0 = element("div");
+			svg = svg_element("svg");
+			polygon = svg_element("polygon");
 			this.h();
 		},
 		l(nodes) {
-			div2 = claim_element(nodes, "DIV", { class: true });
-			var div2_nodes = children(div2);
-			div1 = claim_element(div2_nodes, "DIV", { class: true, style: true });
+			div1 = claim_element(nodes, "DIV", { class: true });
 			var div1_nodes = children(div1);
 			div0 = claim_element(div1_nodes, "DIV", { class: true, style: true });
-			children(div0).forEach(detach);
+			var div0_nodes = children(div0);
+			svg = claim_svg_element(div0_nodes, "svg", { viewBox: true, xmlns: true, style: true });
+			var svg_nodes = children(svg);
+			polygon = claim_svg_element(svg_nodes, "polygon", { points: true });
+			children(polygon).forEach(detach);
+			svg_nodes.forEach(detach);
+			div0_nodes.forEach(detach);
 			div1_nodes.forEach(detach);
-			div2_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(div0, "class", "next-icon svelte-105wdod");
-			attr(div0, "style", /*nextIconStyle*/ ctx[8]);
-			attr(div1, "class", "button-container svelte-105wdod");
-			attr(div1, "style", /*nextButtonContainerStyle*/ ctx[1]);
-			attr(div2, "class", "next-button svelte-105wdod");
+			attr(polygon, "points", "2,0 10,8 2,16 0,14 6,8 0,2");
+			attr(svg, "viewBox", "0 0 10 16");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			attr(svg, "style", /*nextIconStyle*/ ctx[7]);
+			attr(div0, "class", "button-container svelte-c7zaph");
+			attr(div0, "style", /*_nextButtonContainerStyle*/ ctx[6]);
+			attr(div1, "class", "next-button svelte-c7zaph");
 		},
 		m(target, anchor) {
-			insert_hydration(target, div2, anchor);
-			append_hydration(div2, div1);
+			insert_hydration(target, div1, anchor);
 			append_hydration(div1, div0);
+			append_hydration(div0, svg);
+			append_hydration(svg, polygon);
 
 			if (!mounted) {
-				dispose = listen(div2, "click", /*next*/ ctx[15]);
+				dispose = listen(div1, "click", /*next*/ ctx[15]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*nextIconStyle*/ 256) {
-				attr(div0, "style", /*nextIconStyle*/ ctx[8]);
+			if (dirty[0] & /*nextIconStyle*/ 128) {
+				attr(svg, "style", /*nextIconStyle*/ ctx[7]);
 			}
 
-			if (dirty[0] & /*nextButtonContainerStyle*/ 2) {
-				attr(div1, "style", /*nextButtonContainerStyle*/ ctx[1]);
+			if (dirty[0] & /*_nextButtonContainerStyle*/ 64) {
+				attr(div0, "style", /*_nextButtonContainerStyle*/ ctx[6]);
 			}
 		},
 		d(detaching) {
-			if (detaching) detach(div2);
+			if (detaching) detach(div1);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (333:4) {#each items as _, i}
+// (371:4) {#each items as _, i}
 function create_each_block(ctx) {
 	let div1;
 	let div0;
@@ -7164,7 +7185,7 @@ function create_each_block(ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[29](/*i*/ ctx[54]);
+		return /*click_handler*/ ctx[34](/*i*/ ctx[59]);
 	}
 
 	return {
@@ -7184,10 +7205,10 @@ function create_each_block(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div0, "class", "navigation-item-inner circle svelte-105wdod");
-			attr(div0, "style", div0_style_value = /*getNavigationItemInnerStyle*/ ctx[6](/*i*/ ctx[54]));
-			attr(div1, "class", "navigation-item svelte-105wdod");
-			attr(div1, "style", /*navigationItemStyle*/ ctx[7]);
+			attr(div0, "class", "navigation-item-inner circle svelte-c7zaph");
+			attr(div0, "style", div0_style_value = /*getNavigationItemInnerStyle*/ ctx[4](/*i*/ ctx[59]));
+			attr(div1, "class", "navigation-item svelte-c7zaph");
+			attr(div1, "style", /*navigationItemStyle*/ ctx[5]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div1, anchor);
@@ -7202,12 +7223,12 @@ function create_each_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty[0] & /*getNavigationItemInnerStyle*/ 64 && div0_style_value !== (div0_style_value = /*getNavigationItemInnerStyle*/ ctx[6](/*i*/ ctx[54]))) {
+			if (dirty[0] & /*getNavigationItemInnerStyle*/ 16 && div0_style_value !== (div0_style_value = /*getNavigationItemInnerStyle*/ ctx[4](/*i*/ ctx[59]))) {
 				attr(div0, "style", div0_style_value);
 			}
 
-			if (dirty[0] & /*navigationItemStyle*/ 128) {
-				attr(div1, "style", /*navigationItemStyle*/ ctx[7]);
+			if (dirty[0] & /*navigationItemStyle*/ 32) {
+				attr(div1, "style", /*navigationItemStyle*/ ctx[5]);
 			}
 		},
 		d(detaching) {
@@ -7228,11 +7249,11 @@ function create_fragment$4(ctx) {
 	let t2;
 	let div2;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[26].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
+	const default_slot_template = /*#slots*/ ctx[31].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[30], null);
 	let if_block0 = /*isVisiblePrevButton*/ ctx[11] && create_if_block_1(ctx);
 	let if_block1 = /*isVisibleNextButton*/ ctx[10] && create_if_block(ctx);
-	let each_value = /*items*/ ctx[3];
+	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -7285,12 +7306,12 @@ function create_fragment$4(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-105wdod"));
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-c7zaph"));
 			attr(div0, "style", /*slideStyle*/ ctx[13]);
-			attr(div1, "class", "container svelte-105wdod");
-			attr(div2, "class", "navigation svelte-105wdod");
-			attr(div2, "style", /*navigationStyle*/ ctx[2]);
-			attr(div3, "class", "root svelte-105wdod");
+			attr(div1, "class", "container svelte-c7zaph");
+			attr(div2, "class", "navigation svelte-c7zaph");
+			attr(div2, "style", /*navigationStyle*/ ctx[3]);
+			attr(div3, "class", "root svelte-c7zaph");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div3, anchor);
@@ -7301,8 +7322,8 @@ function create_fragment$4(ctx) {
 				default_slot.m(div0, null);
 			}
 
-			/*div0_binding*/ ctx[27](div0);
-			/*div1_binding*/ ctx[28](div1);
+			/*div0_binding*/ ctx[32](div0);
+			/*div1_binding*/ ctx[33](div1);
 			append_hydration(div3, t0);
 			if (if_block0) if_block0.m(div3, null);
 			append_hydration(div3, t1);
@@ -7318,21 +7339,21 @@ function create_fragment$4(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 1073741824)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[30],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[30])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[30], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty[0] & /*slideClass*/ 4096 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-105wdod"))) {
+			if (!current || dirty[0] & /*slideClass*/ 4096 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-c7zaph"))) {
 				attr(div0, "class", div0_class_value);
 			}
 
@@ -7366,8 +7387,8 @@ function create_fragment$4(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty[0] & /*navigationItemStyle, set, getNavigationItemInnerStyle, items*/ 65736) {
-				each_value = /*items*/ ctx[3];
+			if (dirty[0] & /*navigationItemStyle, set, getNavigationItemInnerStyle, items*/ 65585) {
+				each_value = /*items*/ ctx[0];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -7389,8 +7410,8 @@ function create_fragment$4(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (!current || dirty[0] & /*navigationStyle*/ 4) {
-				attr(div2, "style", /*navigationStyle*/ ctx[2]);
+			if (!current || dirty[0] & /*navigationStyle*/ 8) {
+				attr(div2, "style", /*navigationStyle*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -7405,8 +7426,8 @@ function create_fragment$4(ctx) {
 		d(detaching) {
 			if (detaching) detach(div3);
 			if (default_slot) default_slot.d(detaching);
-			/*div0_binding*/ ctx[27](null);
-			/*div1_binding*/ ctx[28](null);
+			/*div0_binding*/ ctx[32](null);
+			/*div1_binding*/ ctx[33](null);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 			destroy_each(each_blocks, detaching);
@@ -7433,9 +7454,12 @@ function instance$4($$self, $$props, $$invalidate) {
 	let isVisiblePrevButton;
 	let isVisibleNextButton;
 	let prevIconStyle;
+	let _prevButtonContainerStyle;
 	let nextIconStyle;
+	let _nextButtonContainerStyle;
 	let navigationItemStyle;
 	let getNavigationItemInnerStyle;
+	let navigationStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { loop = false } = $$props;
 
@@ -7447,7 +7471,12 @@ function instance$4($$self, $$props, $$invalidate) {
 		size: '20px'
 	} } = $$props;
 
-	let { prevButtonContainerStyle = 'height: 48px; width: 24px; margin: 0 0 0 8px;' } = $$props;
+	let { prevButtonContainerStyle = 'height: 48px; width: 24px;' } = $$props;
+
+	let { prevButtonEdgePosition = {
+		edgeDistance: '8px',
+		edgeDirectionOffset: '0px'
+	} } = $$props;
 
 	let { nextButton = {
 		type: 'icon',
@@ -7457,7 +7486,12 @@ function instance$4($$self, $$props, $$invalidate) {
 		size: '20px'
 	} } = $$props;
 
-	let { nextButtonContainerStyle = 'height: 48px; width: 24px; margin: 0 8px 0 0;' } = $$props;
+	let { nextButtonContainerStyle = 'height: 48px; width: 24px;' } = $$props;
+
+	let { nextButtonEdgePosition = {
+		edgeDistance: '8px',
+		edgeDirectionOffset: '0px'
+	} } = $$props;
 
 	let { navigationButton = {
 		type: 'circle',
@@ -7466,18 +7500,22 @@ function instance$4($$self, $$props, $$invalidate) {
 		colorActive: '#666'
 	} } = $$props;
 
-	let { navigationStyle = 'margin: 0 0 8px 0' } = $$props;
+	let { navigationEdgePosition = {
+		edgeDistance: '8px',
+		edgeDirectionOffset: '0px'
+	} } = $$props;
+
 	let items = [];
 	const dispatch = createEventDispatcher();
 
 	setContext('SLIDE', {
 		registerItem: ({ onBeforeSlide, onMount, onResize }) => {
 			const id = new Date().getTime().toString();
-			$$invalidate(3, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
+			$$invalidate(0, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
 			return id;
 		},
 		unregisterItem: id => {
-			$$invalidate(3, items = items.filter(item => item.id !== id));
+			$$invalidate(0, items = items.filter(item => item.id !== id));
 		}
 	});
 
@@ -7504,7 +7542,7 @@ function instance$4($$self, $$props, $$invalidate) {
 						onBeforeSlide({ shiftCount, index, length: items.length });
 					});
 
-					$$invalidate(22, slidePosition = slidePosition + containerWidth * (calcPositionIndex(shiftCount, currentSlideId, items.length) - calcPositionIndex(previousShiftCount, currentSlideId, items.length)));
+					$$invalidate(27, slidePosition = slidePosition + containerWidth * (calcPositionIndex(shiftCount, currentSlideId, items.length) - calcPositionIndex(previousShiftCount, currentSlideId, items.length)));
 					previousShiftCount = shiftCount;
 					resolve();
 				});
@@ -7515,8 +7553,8 @@ function instance$4($$self, $$props, $$invalidate) {
 		if (transitioning) {
 			const slideRect = slideElement.getBoundingClientRect();
 			const containerRect = containerElement.getBoundingClientRect();
-			$$invalidate(23, transitioning = false);
-			$$invalidate(22, slidePosition = slideRect.x - containerRect.x);
+			$$invalidate(28, transitioning = false);
+			$$invalidate(27, slidePosition = slideRect.x - containerRect.x);
 		}
 	}
 
@@ -7536,10 +7574,10 @@ function instance$4($$self, $$props, $$invalidate) {
 				}
 			}
 
-			$$invalidate(23, transitioning = true);
-			$$invalidate(22, slidePosition = containerWidth * calcPositionIndex(shiftCount, slideIndex, items.length));
+			$$invalidate(28, transitioning = true);
+			$$invalidate(27, slidePosition = containerWidth * calcPositionIndex(shiftCount, slideIndex, items.length));
 			dispatch('change', { nextIndex: slideIndex });
-			$$invalidate(21, currentSlideId = slideIndex);
+			$$invalidate(26, currentSlideId = slideIndex);
 		});
 	}
 
@@ -7561,7 +7599,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			const updatedSlidePosition = slidePosition + dx;
 
 			window.requestAnimationFrame(() => {
-				$$invalidate(22, slidePosition = updatedSlidePosition);
+				$$invalidate(27, slidePosition = updatedSlidePosition);
 			});
 		}
 
@@ -7581,7 +7619,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			});
 		});
 
-		$$invalidate(22, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
+		$$invalidate(27, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
 	}
 
 	function handleMoveEnd() {
@@ -7634,7 +7672,7 @@ function instance$4($$self, $$props, $$invalidate) {
 	}
 
 	function handleTransitionEnd() {
-		$$invalidate(23, transitioning = false);
+		$$invalidate(28, transitioning = false);
 		fixSlidePosition();
 	}
 
@@ -7645,7 +7683,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			item.onMount({ containerElement });
 		});
 
-		$$invalidate(21, currentSlideId = 0);
+		$$invalidate(26, currentSlideId = 0);
 
 		if (_loop) {
 			await fixSlidePosition();
@@ -7702,14 +7740,14 @@ function instance$4($$self, $$props, $$invalidate) {
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			slideElement = $$value;
-			$$invalidate(5, slideElement);
+			$$invalidate(2, slideElement);
 		});
 	}
 
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			containerElement = $$value;
-			$$invalidate(4, containerElement);
+			$$invalidate(1, containerElement);
 		});
 	}
 
@@ -7718,71 +7756,95 @@ function instance$4($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('loop' in $$props) $$invalidate(17, loop = $$props.loop);
 		if ('prevButton' in $$props) $$invalidate(18, prevButton = $$props.prevButton);
-		if ('prevButtonContainerStyle' in $$props) $$invalidate(0, prevButtonContainerStyle = $$props.prevButtonContainerStyle);
-		if ('nextButton' in $$props) $$invalidate(19, nextButton = $$props.nextButton);
-		if ('nextButtonContainerStyle' in $$props) $$invalidate(1, nextButtonContainerStyle = $$props.nextButtonContainerStyle);
-		if ('navigationButton' in $$props) $$invalidate(20, navigationButton = $$props.navigationButton);
-		if ('navigationStyle' in $$props) $$invalidate(2, navigationStyle = $$props.navigationStyle);
-		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
+		if ('prevButtonContainerStyle' in $$props) $$invalidate(19, prevButtonContainerStyle = $$props.prevButtonContainerStyle);
+		if ('prevButtonEdgePosition' in $$props) $$invalidate(20, prevButtonEdgePosition = $$props.prevButtonEdgePosition);
+		if ('nextButton' in $$props) $$invalidate(21, nextButton = $$props.nextButton);
+		if ('nextButtonContainerStyle' in $$props) $$invalidate(22, nextButtonContainerStyle = $$props.nextButtonContainerStyle);
+		if ('nextButtonEdgePosition' in $$props) $$invalidate(23, nextButtonEdgePosition = $$props.nextButtonEdgePosition);
+		if ('navigationButton' in $$props) $$invalidate(24, navigationButton = $$props.navigationButton);
+		if ('navigationEdgePosition' in $$props) $$invalidate(25, navigationEdgePosition = $$props.navigationEdgePosition);
+		if ('$$scope' in $$props) $$invalidate(30, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*slidePosition*/ 4194304) {
+		if ($$self.$$.dirty[0] & /*slidePosition*/ 134217728) {
 			$$invalidate(13, slideStyle = slidePosition != null ? `left: ${slidePosition}px;` : '');
 		}
 
-		if ($$self.$$.dirty[0] & /*transitioning*/ 8388608) {
+		if ($$self.$$.dirty[0] & /*transitioning*/ 268435456) {
 			$$invalidate(12, slideClass = ['slide', transitioning ? 'transition' : ''].join(' '));
 		}
 
-		if ($$self.$$.dirty[0] & /*items, loop*/ 131080) {
-			$$invalidate(24, _loop = items.length >= 3 ? loop : false);
+		if ($$self.$$.dirty[0] & /*items, loop*/ 131073) {
+			$$invalidate(29, _loop = items.length >= 3 ? loop : false);
 		}
 
-		if ($$self.$$.dirty[0] & /*_loop, currentSlideId*/ 18874368) {
+		if ($$self.$$.dirty[0] & /*_loop, currentSlideId*/ 603979776) {
 			$$invalidate(11, isVisiblePrevButton = _loop || currentSlideId > 0);
 		}
 
-		if ($$self.$$.dirty[0] & /*_loop, currentSlideId, items*/ 18874376) {
+		if ($$self.$$.dirty[0] & /*_loop, currentSlideId, items*/ 603979777) {
 			$$invalidate(10, isVisibleNextButton = _loop || currentSlideId < items.length - 1);
 		}
 
 		if ($$self.$$.dirty[0] & /*prevButton*/ 262144) {
 			$$invalidate(9, prevIconStyle = prevButton.type === 'icon'
-			? `width: ${prevButton.size}; height: ${prevButton.size}; border-color: ${prevButton.color};`
+			? `height: ${prevButton.size}; fill: ${prevButton.color};`
 			: '');
 		}
 
-		if ($$self.$$.dirty[0] & /*nextButton*/ 524288) {
-			$$invalidate(8, nextIconStyle = nextButton.type === 'icon'
-			? `width: ${nextButton.size}; height: ${nextButton.size}; border-color: ${nextButton.color};`
+		if ($$self.$$.dirty[0] & /*prevButtonEdgePosition, prevButtonContainerStyle*/ 1572864) {
+			$$invalidate(8, _prevButtonContainerStyle = (() => {
+				const marginLeft = prevButtonEdgePosition.edgeDistance;
+				const marginTop = prevButtonEdgePosition.edgeDirectionOffset;
+				const marginString = `margin:${marginTop} 0 0 ${marginLeft}`;
+				return [...prevButtonContainerStyle.split(';'), marginString].join(';');
+			})());
+		}
+
+		if ($$self.$$.dirty[0] & /*nextButton*/ 2097152) {
+			$$invalidate(7, nextIconStyle = nextButton.type === 'icon'
+			? `height: ${nextButton.size}; fill: ${nextButton.color};`
 			: '');
 		}
 
-		if ($$self.$$.dirty[0] & /*navigationButton*/ 1048576) {
-			$$invalidate(7, navigationItemStyle = `padding: calc(${navigationButton.size} / 2);`);
+		if ($$self.$$.dirty[0] & /*nextButtonEdgePosition, nextButtonContainerStyle*/ 12582912) {
+			$$invalidate(6, _nextButtonContainerStyle = (() => {
+				const marginRight = nextButtonEdgePosition.edgeDistance;
+				const marginTop = nextButtonEdgePosition.edgeDirectionOffset;
+				const marginString = `margin:${marginTop} ${marginRight} 0 0`;
+				return [...nextButtonContainerStyle.split(';'), marginString].join(';');
+			})());
+		}
+
+		if ($$self.$$.dirty[0] & /*navigationButton*/ 16777216) {
+			$$invalidate(5, navigationItemStyle = `padding: calc(${navigationButton.size} / 2);`);
 		}
 
-		if ($$self.$$.dirty[0] & /*navigationButton, currentSlideId*/ 3145728) {
-			$$invalidate(6, getNavigationItemInnerStyle = i => `
+		if ($$self.$$.dirty[0] & /*navigationButton, currentSlideId*/ 83886080) {
+			$$invalidate(4, getNavigationItemInnerStyle = i => `
 width: ${navigationButton.size};
 height: ${navigationButton.size};
 background-color: ${i === currentSlideId
 			? navigationButton.colorActive
 			: navigationButton.color};`);
 		}
+
+		if ($$self.$$.dirty[0] & /*navigationEdgePosition*/ 33554432) {
+			$$invalidate(3, navigationStyle = `margin:0 0 ${navigationEdgePosition.edgeDistance} ${navigationEdgePosition.edgeDirectionOffset}`);
+		}
 	};
 
 	return [
-		prevButtonContainerStyle,
-		nextButtonContainerStyle,
-		navigationStyle,
 		items,
 		containerElement,
 		slideElement,
+		navigationStyle,
 		getNavigationItemInnerStyle,
 		navigationItemStyle,
+		_nextButtonContainerStyle,
 		nextIconStyle,
+		_prevButtonContainerStyle,
 		prevIconStyle,
 		isVisibleNextButton,
 		isVisiblePrevButton,
@@ -7793,8 +7855,13 @@ background-color: ${i === currentSlideId
 		set,
 		loop,
 		prevButton,
+		prevButtonContainerStyle,
+		prevButtonEdgePosition,
 		nextButton,
+		nextButtonContainerStyle,
+		nextButtonEdgePosition,
 		navigationButton,
+		navigationEdgePosition,
 		currentSlideId,
 		slidePosition,
 		transitioning,
@@ -7820,11 +7887,13 @@ class Slide extends SvelteComponent {
 			{
 				loop: 17,
 				prevButton: 18,
-				prevButtonContainerStyle: 0,
-				nextButton: 19,
-				nextButtonContainerStyle: 1,
-				navigationButton: 20,
-				navigationStyle: 2
+				prevButtonContainerStyle: 19,
+				prevButtonEdgePosition: 20,
+				nextButton: 21,
+				nextButtonContainerStyle: 22,
+				nextButtonEdgePosition: 23,
+				navigationButton: 24,
+				navigationEdgePosition: 25
 			},
 			add_css$4,
 			[-1, -1]
@@ -8375,4 +8444,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };
+export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultEdgePosition, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };