@plaidev/karte-action-sdk 1.0.24 → 1.0.25

package/dist/index.es.d.ts

@@ -140,6 +140,31 @@ declare const ModalPositionTranslations: {
         en: string;
     };
 };
+type ModalMarginSides = "left" | "right" | "top" | "bottom";
+type ModalMargin<T extends ModalMarginSides = ModalMarginSides> = {
+    side: T;
+    length: string;
+};
+type ModalMarginX = ModalMargin<"left" | "right">;
+type ModalMarginY = ModalMargin<"top" | "bottom">;
+declare const ModalMarginTranslations: {
+    left: {
+        ja: string;
+        en: string;
+    };
+    right: {
+        ja: string;
+        en: string;
+    };
+    top: {
+        ja: string;
+        en: string;
+    };
+    bottom: {
+        ja: string;
+        en: string;
+    };
+};
 type LongText = string;
 type Url = string;
 type Image = string;
@@ -187,13 +212,14 @@ declare const handleKeydown: (handlers: {
     [eventName: string]: (e: any) => void;
 }) => (e: any) => void;
 declare const getPositionStyle: (position: ModalPosition) => string;
+declare const getMarginStyle: (modalMargins: ModalMargin[]) => string;
 declare function onScroll(fn: Function, rate: number): () => void;
 declare function onTime(fn: Function, time: number): () => void;
 declare function hasSuffix<Suffix extends "px" | "em" | "rem" | "%" | "fr" | "vw" | "vh" | "">(value: string, suffix: Suffix): value is `${number}${Suffix}`;
 declare function toBr(text: string): string;
 declare function randStr(digit?: number): string;
 declare const _default: "dummy";
-export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, _default, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, Style, StateName };
+export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, _default, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMargin, ModalMarginX, ModalMarginY, ModalMarginTranslations, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, Style, StateName };
 export { default as State } from './State.svelte';
 export { default as GridModalState } from './GridModalState.svelte';
 export { default as GridItem } from './GridItem.svelte';

package/dist/index.es.js

@@ -66,6 +66,18 @@ const getPositionStyle = (position) => {
     }, '')
         .trimStart();
 };
+const getMarginStyle = (modalMargins) => {
+    const margin = {
+        left: '0',
+        right: '0',
+        top: '0',
+        bottom: '0',
+    };
+    modalMargins.forEach(modalMargin => {
+        margin[modalMargin.side] = modalMargin.length;
+    });
+    return `margin: ${margin.top} ${margin.right} ${margin.bottom} ${margin.left};`;
+};
 function onScroll(fn, rate) {
     const target = document.querySelector('body');
     // TBD ページが長いときの対策
@@ -272,6 +284,24 @@ const ModalPositionTranslations = {
         en: 'Bottom Right',
     },
 };
+const ModalMarginTranslations = {
+    left: {
+        ja: '左からの距離',
+        en: 'Left',
+    },
+    right: {
+        ja: '右からの距離',
+        en: 'Right',
+    },
+    top: {
+        ja: '上からの距離',
+        en: 'Top',
+    },
+    bottom: {
+        ja: '下からの距離',
+        en: 'Bottom',
+    },
+};
 const LengthUnits = ['px', 'em', 'rem', 'vw', 'fr', '%'];
 const Justifies = ['flex-start', 'center', 'flex-end'];
 const Alignments = ['flex-start', 'center', 'flex-end'];
@@ -665,10 +695,10 @@ class Animation extends SvelteComponent {
 /* src/components/Modal.svelte generated by Svelte v3.44.1 */
 
 function add_css$3(target) {
-	append_styles(target, "svelte-1ra4zfg", ".modal.svelte-1ra4zfg{position:absolute;box-sizing:border-box;z-index:2147483647}.close.svelte-1ra4zfg{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-1ra4zfg:hover{transform:rotate(90deg)}");
+	append_styles(target, "svelte-1bxl6mz", ".modal.svelte-1bxl6mz{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-1bxl6mz{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-1bxl6mz:hover{transform:rotate(90deg)}");
 }
 
-// (78:2) {#if closable}
+// (82:2) {#if closable}
 function create_if_block(ctx) {
 	let button;
 	let svg;
@@ -690,8 +720,8 @@ function create_if_block(ctx) {
 			attr(svg, "viewBox", "0 0 9 10");
 			attr(svg, "fill", "none");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(button, "class", "close svelte-1ra4zfg");
-			attr(button, "style", button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[6] + 1) + "; " + /*_closeStyle*/ ctx[3] + "");
+			attr(button, "class", "close svelte-1bxl6mz");
+			attr(button, "style", button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[7] + 1) + "; " + /*_closeStyle*/ ctx[3] + "");
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -708,7 +738,7 @@ function create_if_block(ctx) {
 				attr(path, "fill", /*closeButtonColor*/ ctx[1]);
 			}
 
-			if (dirty & /*$maximumZindex, _closeStyle*/ 72 && button_style_value !== (button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[6] + 1) + "; " + /*_closeStyle*/ ctx[3] + "")) {
+			if (dirty & /*$maximumZindex, _closeStyle*/ 136 && button_style_value !== (button_style_value = "z-index:" + (/*$maximumZindex*/ ctx[7] + 1) + "; " + /*_closeStyle*/ ctx[3] + "")) {
 				attr(button, "style", button_style_value);
 			}
 		},
@@ -728,8 +758,8 @@ function create_fragment$5(ctx) {
 	let mounted;
 	let dispose;
 	let if_block = /*closable*/ ctx[0] && create_if_block(ctx);
-	const default_slot_template = /*#slots*/ ctx[15].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[14], null);
+	const default_slot_template = /*#slots*/ ctx[16].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[15], null);
 
 	return {
 		c() {
@@ -737,10 +767,10 @@ function create_fragment$5(ctx) {
 			if (if_block) if_block.c();
 			t = space();
 			if (default_slot) default_slot.c();
-			attr(div, "class", "modal svelte-1ra4zfg");
+			attr(div, "class", "modal svelte-1bxl6mz");
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
-			attr(div, "style", div_style_value = "position:" + (/*overwriteFixed*/ ctx[7] ? 'fixed' : 'absolute') + "; " + /*pos*/ ctx[5] + " " + /*_style*/ ctx[2] + "");
+			attr(div, "style", div_style_value = "" + /*pos*/ ctx[6] + " " + /*margin*/ ctx[5] + " " + /*_style*/ ctx[2] + "");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -751,7 +781,7 @@ function create_fragment$5(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[16](div);
+			/*div_binding*/ ctx[17](div);
 			current = true;
 
 			if (!mounted) {
@@ -774,21 +804,21 @@ function create_fragment$5(ctx) {
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 16384)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 32768)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[14],
+						/*$$scope*/ ctx[15],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[14])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[14], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[15])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[15], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*pos, _style*/ 36 && div_style_value !== (div_style_value = "position:" + (/*overwriteFixed*/ ctx[7] ? 'fixed' : 'absolute') + "; " + /*pos*/ ctx[5] + " " + /*_style*/ ctx[2] + "")) {
+			if (!current || dirty & /*pos, margin, _style*/ 100 && div_style_value !== (div_style_value = "" + /*pos*/ ctx[6] + " " + /*margin*/ ctx[5] + " " + /*_style*/ ctx[2] + "")) {
 				attr(div, "style", div_style_value);
 			}
 		},
@@ -805,7 +835,7 @@ function create_fragment$5(ctx) {
 			if (detaching) detach(div);
 			if (if_block) if_block.d();
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[16](null);
+			/*div_binding*/ ctx[17](null);
 			mounted = false;
 			dispose();
 		}
@@ -814,8 +844,9 @@ function create_fragment$5(ctx) {
 
 function instance$5($$self, $$props, $$invalidate) {
 	let pos;
+	let margin;
 	let $maximumZindex;
-	component_subscribe($$self, maximumZindex, $$value => $$invalidate(6, $maximumZindex = $$value));
+	component_subscribe($$self, maximumZindex, $$value => $$invalidate(7, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { closable = true } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
@@ -823,8 +854,8 @@ function instance$5($$self, $$props, $$invalidate) {
 	let { eventValue = null } = $$props;
 	let { position = 'center' } = $$props;
 	const overwritePosition = isPreview() ? 'center' : position;
-	let { fixed = false } = $$props;
-	const overwriteFixed = isPreview() ? false : fixed;
+	let { modalMarginX = { side: 'left', length: '0' } } = $$props;
+	let { modalMarginY = { side: 'top', length: '0' } } = $$props;
 	let { _style = '' } = $$props;
 	let { _closeStyle = '' } = $$props;
 
@@ -858,13 +889,20 @@ function instance$5($$self, $$props, $$invalidate) {
 		if ('eventName' in $$props) $$invalidate(10, eventName = $$props.eventName);
 		if ('eventValue' in $$props) $$invalidate(11, eventValue = $$props.eventValue);
 		if ('position' in $$props) $$invalidate(12, position = $$props.position);
-		if ('fixed' in $$props) $$invalidate(13, fixed = $$props.fixed);
+		if ('modalMarginX' in $$props) $$invalidate(13, modalMarginX = $$props.modalMarginX);
+		if ('modalMarginY' in $$props) $$invalidate(14, modalMarginY = $$props.modalMarginY);
 		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
 		if ('_closeStyle' in $$props) $$invalidate(3, _closeStyle = $$props._closeStyle);
-		if ('$$scope' in $$props) $$invalidate(14, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(15, $$scope = $$props.$$scope);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*modalMarginX, modalMarginY*/ 24576) {
+			$$invalidate(5, margin = getMarginStyle([modalMarginX, modalMarginY]));
+		}
 	};
 
-	$$invalidate(5, pos = getPositionStyle(overwritePosition));
+	$$invalidate(6, pos = getPositionStyle(overwritePosition));
 
 	return [
 		closable,
@@ -872,15 +910,16 @@ function instance$5($$self, $$props, $$invalidate) {
 		_style,
 		_closeStyle,
 		modal,
+		margin,
 		pos,
 		$maximumZindex,
-		overwriteFixed,
 		close,
 		handle_keydown,
 		eventName,
 		eventValue,
 		position,
-		fixed,
+		modalMarginX,
+		modalMarginY,
 		$$scope,
 		slots,
 		div_binding
@@ -903,7 +942,8 @@ class Modal extends SvelteComponent {
 				eventName: 10,
 				eventValue: 11,
 				position: 12,
-				fixed: 13,
+				modalMarginX: 13,
+				modalMarginY: 14,
 				_style: 2,
 				_closeStyle: 3
 			},
@@ -1032,8 +1072,8 @@ class Grid extends SvelteComponent {
 
 function create_default_slot_3(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[18].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[19], null);
+	const default_slot_template = /*#slots*/ ctx[19].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], null);
 
 	return {
 		c() {
@@ -1048,15 +1088,15 @@ function create_default_slot_3(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 524288)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 1048576)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[19],
+						/*$$scope*/ ctx[20],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[19], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[20], dirty, null),
 						null
 					);
 				}
@@ -1077,19 +1117,19 @@ function create_default_slot_3(ctx) {
 	};
 }
 
-// (99:4) <Modal       {closable}       {closeButtonColor}       {_closeStyle}       {position}       {fixed}       _style={_modalStyle}       on:close={close}     >
+// (104:4) <Modal       {closable}       {closeButtonColor}       {_closeStyle}       {position}       {modalMarginX}       {modalMarginY}       _style={_modalStyle}       on:close={close}     >
 function create_default_slot_2(ctx) {
 	let grid;
 	let current;
 
 	grid = new Grid({
 			props: {
-				width: /*width*/ ctx[9],
-				height: /*height*/ ctx[10],
-				rows: /*rows*/ ctx[11],
-				columns: /*columns*/ ctx[12],
-				gap: /*gap*/ ctx[13],
-				background: /*background*/ ctx[14],
+				width: /*width*/ ctx[10],
+				height: /*height*/ ctx[11],
+				rows: /*rows*/ ctx[12],
+				columns: /*columns*/ ctx[13],
+				gap: /*gap*/ ctx[14],
+				background: /*background*/ ctx[15],
 				$$slots: { default: [create_default_slot_3] },
 				$$scope: { ctx }
 			}
@@ -1105,14 +1145,14 @@ function create_default_slot_2(ctx) {
 		},
 		p(ctx, dirty) {
 			const grid_changes = {};
-			if (dirty & /*width*/ 512) grid_changes.width = /*width*/ ctx[9];
-			if (dirty & /*height*/ 1024) grid_changes.height = /*height*/ ctx[10];
-			if (dirty & /*rows*/ 2048) grid_changes.rows = /*rows*/ ctx[11];
-			if (dirty & /*columns*/ 4096) grid_changes.columns = /*columns*/ ctx[12];
-			if (dirty & /*gap*/ 8192) grid_changes.gap = /*gap*/ ctx[13];
-			if (dirty & /*background*/ 16384) grid_changes.background = /*background*/ ctx[14];
-
-			if (dirty & /*$$scope*/ 524288) {
+			if (dirty & /*width*/ 1024) grid_changes.width = /*width*/ ctx[10];
+			if (dirty & /*height*/ 2048) grid_changes.height = /*height*/ ctx[11];
+			if (dirty & /*rows*/ 4096) grid_changes.rows = /*rows*/ ctx[12];
+			if (dirty & /*columns*/ 8192) grid_changes.columns = /*columns*/ ctx[13];
+			if (dirty & /*gap*/ 16384) grid_changes.gap = /*gap*/ ctx[14];
+			if (dirty & /*background*/ 32768) grid_changes.background = /*background*/ ctx[15];
+
+			if (dirty & /*$$scope*/ 1048576) {
 				grid_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1133,25 +1173,26 @@ function create_default_slot_2(ctx) {
 	};
 }
 
-// (98:2) <Animation {animation}>
+// (103:2) <Animation {animation}>
 function create_default_slot_1(ctx) {
 	let modal;
 	let current;
 
 	modal = new Modal({
 			props: {
-				closable: /*closable*/ ctx[4],
-				closeButtonColor: /*closeButtonColor*/ ctx[5],
-				_closeStyle: /*_closeStyle*/ ctx[8],
-				position: /*position*/ ctx[3],
-				fixed: /*fixed*/ ctx[6],
-				_style: /*_modalStyle*/ ctx[7],
+				closable: /*closable*/ ctx[6],
+				closeButtonColor: /*closeButtonColor*/ ctx[8],
+				_closeStyle: /*_closeStyle*/ ctx[9],
+				position: /*position*/ ctx[1],
+				modalMarginX: /*modalMarginX*/ ctx[2],
+				modalMarginY: /*modalMarginY*/ ctx[3],
+				_style: /*_modalStyle*/ ctx[5],
 				$$slots: { default: [create_default_slot_2] },
 				$$scope: { ctx }
 			}
 		});
 
-	modal.$on("close", /*close*/ ctx[15]);
+	modal.$on("close", /*close*/ ctx[16]);
 
 	return {
 		c() {
@@ -1163,14 +1204,15 @@ function create_default_slot_1(ctx) {
 		},
 		p(ctx, dirty) {
 			const modal_changes = {};
-			if (dirty & /*closable*/ 16) modal_changes.closable = /*closable*/ ctx[4];
-			if (dirty & /*closeButtonColor*/ 32) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[5];
-			if (dirty & /*_closeStyle*/ 256) modal_changes._closeStyle = /*_closeStyle*/ ctx[8];
-			if (dirty & /*position*/ 8) modal_changes.position = /*position*/ ctx[3];
-			if (dirty & /*fixed*/ 64) modal_changes.fixed = /*fixed*/ ctx[6];
-			if (dirty & /*_modalStyle*/ 128) modal_changes._style = /*_modalStyle*/ ctx[7];
-
-			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 556544) {
+			if (dirty & /*closable*/ 64) modal_changes.closable = /*closable*/ ctx[6];
+			if (dirty & /*closeButtonColor*/ 256) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[8];
+			if (dirty & /*_closeStyle*/ 512) modal_changes._closeStyle = /*_closeStyle*/ ctx[9];
+			if (dirty & /*position*/ 2) modal_changes.position = /*position*/ ctx[1];
+			if (dirty & /*modalMarginX*/ 4) modal_changes.modalMarginX = /*modalMarginX*/ ctx[2];
+			if (dirty & /*modalMarginY*/ 8) modal_changes.modalMarginY = /*modalMarginY*/ ctx[3];
+			if (dirty & /*_modalStyle*/ 32) modal_changes._style = /*_modalStyle*/ ctx[5];
+
+			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 1113088) {
 				modal_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1191,7 +1233,7 @@ function create_default_slot_1(ctx) {
 	};
 }
 
-// (96:0) <StateItem {path}>
+// (101:0) <StateItem {path}>
 function create_default_slot(ctx) {
 	let backgroundoverray;
 	let t;
@@ -1200,15 +1242,15 @@ function create_default_slot(ctx) {
 
 	backgroundoverray = new BackgroundOverray({
 			props: {
-				backgroundOverray: /*backgroundOverray*/ ctx[2]
+				backgroundOverray: /*backgroundOverray*/ ctx[7]
 			}
 		});
 
-	backgroundoverray.$on("click", /*close*/ ctx[15]);
+	backgroundoverray.$on("click", /*close*/ ctx[16]);
 
 	animation_1 = new Animation({
 			props: {
-				animation: /*animation*/ ctx[1],
+				animation: /*animation*/ ctx[4],
 				$$slots: { default: [create_default_slot_1] },
 				$$scope: { ctx }
 			}
@@ -1228,12 +1270,12 @@ function create_default_slot(ctx) {
 		},
 		p(ctx, dirty) {
 			const backgroundoverray_changes = {};
-			if (dirty & /*backgroundOverray*/ 4) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[2];
+			if (dirty & /*backgroundOverray*/ 128) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[7];
 			backgroundoverray.$set(backgroundoverray_changes);
 			const animation_1_changes = {};
-			if (dirty & /*animation*/ 2) animation_1_changes.animation = /*animation*/ ctx[1];
+			if (dirty & /*animation*/ 16) animation_1_changes.animation = /*animation*/ ctx[4];
 
-			if (dirty & /*$$scope, closable, closeButtonColor, _closeStyle, position, fixed, _modalStyle, width, height, rows, columns, gap, background*/ 557048) {
+			if (dirty & /*$$scope, closable, closeButtonColor, _closeStyle, position, modalMarginX, modalMarginY, _modalStyle, width, height, rows, columns, gap, background*/ 1113966) {
 				animation_1_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1282,7 +1324,7 @@ function create_fragment$3(ctx) {
 			const stateitem_changes = {};
 			if (dirty & /*path*/ 1) stateitem_changes.path = /*path*/ ctx[0];
 
-			if (dirty & /*$$scope, animation, closable, closeButtonColor, _closeStyle, position, fixed, _modalStyle, width, height, rows, columns, gap, background, backgroundOverray*/ 557054) {
+			if (dirty & /*$$scope, animation, closable, closeButtonColor, _closeStyle, position, modalMarginX, modalMarginY, _modalStyle, width, height, rows, columns, gap, background, backgroundOverray*/ 1114110) {
 				stateitem_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1306,15 +1348,16 @@ function create_fragment$3(ctx) {
 function instance$3($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
-	let { animation = 'none' } = $$props;
-	let { backgroundOverray = false } = $$props;
 	let { position = 'center' } = $$props;
+	let { modalMarginX = { side: 'left', length: '0' } } = $$props;
+	let { modalMarginY = { side: 'top', length: '0' } } = $$props;
+	let { animation = 'none' } = $$props;
+	let { _modalStyle = '' } = $$props;
 	let { closable = true } = $$props;
+	let { backgroundOverray = false } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
 	let { eventName = '' } = $$props;
 	let { eventValue = null } = $$props;
-	let { fixed = false } = $$props;
-	let { _modalStyle = '' } = $$props;
 	let { _closeStyle = '' } = $$props;
 	let { width = '512px' } = $$props;
 	let { height = '256px' } = $$props;
@@ -1338,34 +1381,36 @@ function instance$3($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('path' in $$props) $$invalidate(0, path = $$props.path);
-		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('backgroundOverray' in $$props) $$invalidate(2, backgroundOverray = $$props.backgroundOverray);
-		if ('position' in $$props) $$invalidate(3, position = $$props.position);
-		if ('closable' in $$props) $$invalidate(4, closable = $$props.closable);
-		if ('closeButtonColor' in $$props) $$invalidate(5, closeButtonColor = $$props.closeButtonColor);
-		if ('eventName' in $$props) $$invalidate(16, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(17, eventValue = $$props.eventValue);
-		if ('fixed' in $$props) $$invalidate(6, fixed = $$props.fixed);
-		if ('_modalStyle' in $$props) $$invalidate(7, _modalStyle = $$props._modalStyle);
-		if ('_closeStyle' in $$props) $$invalidate(8, _closeStyle = $$props._closeStyle);
-		if ('width' in $$props) $$invalidate(9, width = $$props.width);
-		if ('height' in $$props) $$invalidate(10, height = $$props.height);
-		if ('rows' in $$props) $$invalidate(11, rows = $$props.rows);
-		if ('columns' in $$props) $$invalidate(12, columns = $$props.columns);
-		if ('gap' in $$props) $$invalidate(13, gap = $$props.gap);
-		if ('background' in $$props) $$invalidate(14, background = $$props.background);
-		if ('$$scope' in $$props) $$invalidate(19, $$scope = $$props.$$scope);
+		if ('position' in $$props) $$invalidate(1, position = $$props.position);
+		if ('modalMarginX' in $$props) $$invalidate(2, modalMarginX = $$props.modalMarginX);
+		if ('modalMarginY' in $$props) $$invalidate(3, modalMarginY = $$props.modalMarginY);
+		if ('animation' in $$props) $$invalidate(4, animation = $$props.animation);
+		if ('_modalStyle' in $$props) $$invalidate(5, _modalStyle = $$props._modalStyle);
+		if ('closable' in $$props) $$invalidate(6, closable = $$props.closable);
+		if ('backgroundOverray' in $$props) $$invalidate(7, backgroundOverray = $$props.backgroundOverray);
+		if ('closeButtonColor' in $$props) $$invalidate(8, closeButtonColor = $$props.closeButtonColor);
+		if ('eventName' in $$props) $$invalidate(17, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(18, eventValue = $$props.eventValue);
+		if ('_closeStyle' in $$props) $$invalidate(9, _closeStyle = $$props._closeStyle);
+		if ('width' in $$props) $$invalidate(10, width = $$props.width);
+		if ('height' in $$props) $$invalidate(11, height = $$props.height);
+		if ('rows' in $$props) $$invalidate(12, rows = $$props.rows);
+		if ('columns' in $$props) $$invalidate(13, columns = $$props.columns);
+		if ('gap' in $$props) $$invalidate(14, gap = $$props.gap);
+		if ('background' in $$props) $$invalidate(15, background = $$props.background);
+		if ('$$scope' in $$props) $$invalidate(20, $$scope = $$props.$$scope);
 	};
 
 	return [
 		path,
-		animation,
-		backgroundOverray,
 		position,
+		modalMarginX,
+		modalMarginY,
+		animation,
+		_modalStyle,
 		closable,
+		backgroundOverray,
 		closeButtonColor,
-		fixed,
-		_modalStyle,
 		_closeStyle,
 		width,
 		height,
@@ -1387,22 +1432,23 @@ class GridModalState extends SvelteComponent {
 
 		init(this, options, instance$3, create_fragment$3, safe_not_equal, {
 			path: 0,
-			animation: 1,
-			backgroundOverray: 2,
-			position: 3,
-			closable: 4,
-			closeButtonColor: 5,
-			eventName: 16,
-			eventValue: 17,
-			fixed: 6,
-			_modalStyle: 7,
-			_closeStyle: 8,
-			width: 9,
-			height: 10,
-			rows: 11,
-			columns: 12,
-			gap: 13,
-			background: 14
+			position: 1,
+			modalMarginX: 2,
+			modalMarginY: 3,
+			animation: 4,
+			_modalStyle: 5,
+			closable: 6,
+			backgroundOverray: 7,
+			closeButtonColor: 8,
+			eventName: 17,
+			eventValue: 18,
+			_closeStyle: 9,
+			width: 10,
+			height: 11,
+			rows: 12,
+			columns: 13,
+			gap: 14,
+			background: 15
 		});
 	}
 }
@@ -1755,4 +1801,4 @@ class FlexItem extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyleTranslations, AnimationStyles, Directions, Flex, FlexItem, GridItem, GridModalState, Justifies, LengthUnits, MediaQueries, Modal, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, closeApp, closed, finalize, getPositionStyle, handleFocus, handleKeydown, hasSuffix, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, state, toBr };
+export { Alignments, AnimationStyleTranslations, AnimationStyles, Directions, Flex, FlexItem, GridItem, GridModalState, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, closeApp, closed, finalize, getMarginStyle, getPositionStyle, handleFocus, handleKeydown, hasSuffix, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, state, toBr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",