@plaidev/karte-action-sdk 1.1.268-29138921.8752a776 → 1.1.268-29148584.667572de

package/dist/components-flex/props.d.ts

@@ -74,6 +74,7 @@ export type BackgroundColorProps = {
 };
 export type BackgroundImageProps = {
 	backgroundImageUrl?: string
+	backgroundSize?: Properties["backgroundSize"]
 	backgroundPositionX?: Properties["backgroundPositionX"]
 	backgroundPositionY?: Properties["backgroundPositionY"]
 	backgroundBlendMode?: Properties["backgroundBlendMode"]

package/dist/hydrate/components-flex/props.d.ts

@@ -74,6 +74,7 @@ export type BackgroundColorProps = {
 };
 export type BackgroundImageProps = {
 	backgroundImageUrl?: string
+	backgroundSize?: Properties["backgroundSize"]
 	backgroundPositionX?: Properties["backgroundPositionX"]
 	backgroundPositionY?: Properties["backgroundPositionY"]
 	backgroundBlendMode?: Properties["backgroundBlendMode"]

package/dist/hydrate/index.es.js

@@ -382,6 +382,14 @@ const OnClickOperationOptions = [
 			default: "/"
 		}]
 	},
+	{
+		operation: "callNativeFunction",
+		args: [{
+			name: "url",
+			type: "NativeFunction",
+			default: ""
+		}]
+	},
 	{
 		operation: "closeApp",
 		args: [{
@@ -2487,8 +2495,13 @@ async function loadGlobalStyle(href) {
 	return new Promise((resolve, reject) => {
 		const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
 		if (!action) return;
+		const DATA_ATTR_KEY = "data-krt-action-font";
+		const oldFontLink = document.querySelector(`link[${DATA_ATTR_KEY}]`);
+		if (oldFontLink) if (oldFontLink.getAttribute("href") === href) return;
+		else oldFontLink.parentElement?.removeChild(oldFontLink);
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
+		link.setAttribute(DATA_ATTR_KEY, "");
 		link.href = href;
 		link.type = "text/css";
 		action.appendChild(link);
@@ -4421,6 +4434,7 @@ const bootChat = (hide_launcher, placement_pc, placement_mobile, horizontal_spac
 /** @internal */
 const execOnClickOperation = (onClickOperation) => {
 	if (onClickOperation.operation === "linkTo") linkTo(...onClickOperation.args)();
+	else if (onClickOperation.operation === "callNativeFunction") linkTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "moveTo") moveTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "closeApp") closeApp(onClickOperation.args[0] || "button")();
 	else if (onClickOperation.operation === "runScript") runScript(onClickOperation.args[0])();
@@ -12957,7 +12971,7 @@ const toCssBackground = (p, brandKit) => {
 	return {
 		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
 		...url ? {
-			backgroundSize: url ? "cover" : void 0,
+			backgroundSize: url ? p.backgroundSize ?? "cover" : void 0,
 			backgroundImage: url ? `url(${url})` : void 0,
 			backgroundPositionX: p?.backgroundPositionX ?? "center",
 			backgroundPositionY: p?.backgroundPositionY ?? "center",
@@ -12986,10 +13000,13 @@ const toCssOverflow = (p) => {
 //#region src/hooks/useClickable.ts
 const getHref = (onClick) => {
 	if (!onClick) return void 0;
-	if (onClick.operation !== "linkTo") return void 0;
-	const href = String(onClick.args[0]) || "";
-	const decode = onClick.args[2] ?? false;
-	return decode ? decodeURI(href) : href;
+	if (onClick.operation === "callNativeFunction") return String(onClick.args[0]);
+	if (onClick.operation === "linkTo") {
+		const href = String(onClick.args[0]) || "";
+		const decode = onClick.args[2] ?? false;
+		return decode ? decodeURI(href) : href;
+	}
+	return void 0;
 };
 const getTarget = (onClick) => {
 	if (!onClick) return void 0;
@@ -13000,7 +13017,8 @@ const useClickable = ({ eventValue = {}, eventName = "", onClick, element: eleme
 	const fixedElement = (() => {
 		if (!onClick) return element$1;
 		switch (onClick.operation) {
-			case "linkTo": return "a";
+			case "linkTo":
+			case "callNativeFunction": return "a";
 			case "none": return element$1;
 			default: return "button";
 		}
@@ -19861,9 +19879,9 @@ function instance$13($$self, $$props, $$invalidate) {
 	let { layerId = "" } = $$props;
 	const { brandKit } = useBrandKit();
 	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== void 0;
-	let backgroundOverlay = DefaultModalPlacement.backgroundOverlay;
-	let backgroundOverlayPC = DefaultModalPlacement.backgroundOverlay;
-	let backgroundOverlaySP = DefaultModalPlacement.backgroundOverlay;
+	let backgroundOverlay = placement.position === "center";
+	let backgroundOverlayPC = placement.position === "center";
+	let backgroundOverlaySP = placement.position === "center";
 	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
 	let backgroundClickFunctionPC = DefaultModalPlacement.backgroundClick;
 	let backgroundClickFunctionSP = DefaultModalPlacement.backgroundClick;
@@ -21104,6 +21122,7 @@ function instance$7($$self, $$props, $$invalidate) {
 	let player = null;
 	function onPlayerReady() {
 		if (props.mute || props.autoplay) player.setVolume(0);
+		if (props.autoplay) player.playVideo();
 	}
 	const getPlayerVars = () => {
 		const boolToNumber = (bool, defaultValue = 0) => typeof bool === "boolean" ? bool ? 1 : 0 : defaultValue;
@@ -21113,6 +21132,7 @@ function instance$7($$self, $$props, $$invalidate) {
 			showinfo: 0,
 			iv_load_policy: 1,
 			modestbranding: 1,
+			mute: props.autoplay || props.mute ? 1 : 0,
 			rel: boolToNumber(props.showRelatedMovies),
 			autoplay: boolToNumber(props.autoplay),
 			controls: boolToNumber(props.controls),

package/dist/hydrate/prop.d.ts

@@ -66,6 +66,7 @@ type OperationArgumentTypes = {
 	Color: string
 	Handler: string
 	Trigger: string
+	NativeFunction: string
 };
 /** @internal */
 export type OperationArgumentType = keyof OperationArgumentTypes;
@@ -111,6 +112,13 @@ export declare const OnClickOperationOptions: readonly [{
 		readonly type: "TransitState"
 		readonly default: "/"
 	}]
+}, {
+	readonly operation: "callNativeFunction"
+	readonly args: readonly [{
+		readonly name: "url"
+		readonly type: "NativeFunction"
+		readonly default: ""
+	}]
 }, {
 	readonly operation: "closeApp"
 	readonly args: readonly [{

package/dist/index.es.js

@@ -382,6 +382,14 @@ const OnClickOperationOptions = [
 			default: "/"
 		}]
 	},
+	{
+		operation: "callNativeFunction",
+		args: [{
+			name: "url",
+			type: "NativeFunction",
+			default: ""
+		}]
+	},
 	{
 		operation: "closeApp",
 		args: [{
@@ -2457,8 +2465,13 @@ async function loadGlobalStyle(href) {
 	return new Promise((resolve, reject) => {
 		const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
 		if (!action) return;
+		const DATA_ATTR_KEY = "data-krt-action-font";
+		const oldFontLink = document.querySelector(`link[${DATA_ATTR_KEY}]`);
+		if (oldFontLink) if (oldFontLink.getAttribute("href") === href) return;
+		else oldFontLink.parentElement?.removeChild(oldFontLink);
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
+		link.setAttribute(DATA_ATTR_KEY, "");
 		link.href = href;
 		link.type = "text/css";
 		action.appendChild(link);
@@ -4171,6 +4184,7 @@ const bootChat = (hide_launcher, placement_pc, placement_mobile, horizontal_spac
 /** @internal */
 const execOnClickOperation = (onClickOperation) => {
 	if (onClickOperation.operation === "linkTo") linkTo(...onClickOperation.args)();
+	else if (onClickOperation.operation === "callNativeFunction") linkTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "moveTo") moveTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "closeApp") closeApp(onClickOperation.args[0] || "button")();
 	else if (onClickOperation.operation === "runScript") runScript(onClickOperation.args[0])();
@@ -11813,7 +11827,7 @@ const toCssBackground = (p, brandKit) => {
 	return {
 		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
 		...url ? {
-			backgroundSize: url ? "cover" : void 0,
+			backgroundSize: url ? p.backgroundSize ?? "cover" : void 0,
 			backgroundImage: url ? `url(${url})` : void 0,
 			backgroundPositionX: p?.backgroundPositionX ?? "center",
 			backgroundPositionY: p?.backgroundPositionY ?? "center",
@@ -11842,10 +11856,13 @@ const toCssOverflow = (p) => {
 //#region src/hooks/useClickable.ts
 const getHref = (onClick) => {
 	if (!onClick) return void 0;
-	if (onClick.operation !== "linkTo") return void 0;
-	const href = String(onClick.args[0]) || "";
-	const decode = onClick.args[2] ?? false;
-	return decode ? decodeURI(href) : href;
+	if (onClick.operation === "callNativeFunction") return String(onClick.args[0]);
+	if (onClick.operation === "linkTo") {
+		const href = String(onClick.args[0]) || "";
+		const decode = onClick.args[2] ?? false;
+		return decode ? decodeURI(href) : href;
+	}
+	return void 0;
 };
 const getTarget = (onClick) => {
 	if (!onClick) return void 0;
@@ -11856,7 +11873,8 @@ const useClickable = ({ eventValue = {}, eventName = "", onClick, element: eleme
 	const fixedElement = (() => {
 		if (!onClick) return element$1;
 		switch (onClick.operation) {
-			case "linkTo": return "a";
+			case "linkTo":
+			case "callNativeFunction": return "a";
 			case "none": return element$1;
 			default: return "button";
 		}
@@ -17768,9 +17786,9 @@ function instance$13($$self, $$props, $$invalidate) {
 	let { layerId = "" } = $$props;
 	const { brandKit } = useBrandKit();
 	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== void 0;
-	let backgroundOverlay = DefaultModalPlacement.backgroundOverlay;
-	let backgroundOverlayPC = DefaultModalPlacement.backgroundOverlay;
-	let backgroundOverlaySP = DefaultModalPlacement.backgroundOverlay;
+	let backgroundOverlay = placement.position === "center";
+	let backgroundOverlayPC = placement.position === "center";
+	let backgroundOverlaySP = placement.position === "center";
 	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
 	let backgroundClickFunctionPC = DefaultModalPlacement.backgroundClick;
 	let backgroundClickFunctionSP = DefaultModalPlacement.backgroundClick;
@@ -18905,6 +18923,7 @@ function instance$7($$self, $$props, $$invalidate) {
 	let player = null;
 	function onPlayerReady() {
 		if (props.mute || props.autoplay) player.setVolume(0);
+		if (props.autoplay) player.playVideo();
 	}
 	const getPlayerVars = () => {
 		const boolToNumber = (bool, defaultValue = 0) => typeof bool === "boolean" ? bool ? 1 : 0 : defaultValue;
@@ -18914,6 +18933,7 @@ function instance$7($$self, $$props, $$invalidate) {
 			showinfo: 0,
 			iv_load_policy: 1,
 			modestbranding: 1,
+			mute: props.autoplay || props.mute ? 1 : 0,
 			rel: boolToNumber(props.showRelatedMovies),
 			autoplay: boolToNumber(props.autoplay),
 			controls: boolToNumber(props.controls),

package/dist/prop.d.ts

@@ -66,6 +66,7 @@ type OperationArgumentTypes = {
 	Color: string
 	Handler: string
 	Trigger: string
+	NativeFunction: string
 };
 /** @internal */
 export type OperationArgumentType = keyof OperationArgumentTypes;
@@ -111,6 +112,13 @@ export declare const OnClickOperationOptions: readonly [{
 		readonly type: "TransitState"
 		readonly default: "/"
 	}]
+}, {
+	readonly operation: "callNativeFunction"
+	readonly args: readonly [{
+		readonly name: "url"
+		readonly type: "NativeFunction"
+		readonly default: ""
+	}]
 }, {
 	readonly operation: "closeApp"
 	readonly args: readonly [{

package/dist/svelte5/components-flex/props.d.ts

@@ -74,6 +74,7 @@ export type BackgroundColorProps = {
 };
 export type BackgroundImageProps = {
 	backgroundImageUrl?: string
+	backgroundSize?: Properties["backgroundSize"]
 	backgroundPositionX?: Properties["backgroundPositionX"]
 	backgroundPositionY?: Properties["backgroundPositionY"]
 	backgroundBlendMode?: Properties["backgroundBlendMode"]

package/dist/svelte5/hydrate/components-flex/props.d.ts

@@ -74,6 +74,7 @@ export type BackgroundColorProps = {
 };
 export type BackgroundImageProps = {
 	backgroundImageUrl?: string
+	backgroundSize?: Properties["backgroundSize"]
 	backgroundPositionX?: Properties["backgroundPositionX"]
 	backgroundPositionY?: Properties["backgroundPositionY"]
 	backgroundBlendMode?: Properties["backgroundBlendMode"]

package/dist/svelte5/hydrate/index.es.js

@@ -440,6 +440,14 @@ const OnClickOperationOptions = [
 			default: "/"
 		}]
 	},
+	{
+		operation: "callNativeFunction",
+		args: [{
+			name: "url",
+			type: "NativeFunction",
+			default: ""
+		}]
+	},
 	{
 		operation: "closeApp",
 		args: [{
@@ -2286,8 +2294,13 @@ async function loadGlobalStyle(href) {
 	return new Promise((resolve, reject) => {
 		const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
 		if (!action) return;
+		const DATA_ATTR_KEY = "data-krt-action-font";
+		const oldFontLink = document.querySelector(`link[${DATA_ATTR_KEY}]`);
+		if (oldFontLink) if (oldFontLink.getAttribute("href") === href) return;
+		else oldFontLink.parentElement?.removeChild(oldFontLink);
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
+		link.setAttribute(DATA_ATTR_KEY, "");
 		link.href = href;
 		link.type = "text/css";
 		action.appendChild(link);
@@ -3283,7 +3296,7 @@ const toCssBackground = (p, brandKit) => {
 	return {
 		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
 		...url ? {
-			backgroundSize: url ? "cover" : void 0,
+			backgroundSize: url ? p.backgroundSize ?? "cover" : void 0,
 			backgroundImage: url ? `url(${url})` : void 0,
 			backgroundPositionX: p?.backgroundPositionX ?? "center",
 			backgroundPositionY: p?.backgroundPositionY ?? "center",
@@ -3387,6 +3400,7 @@ const bootChat = (hide_launcher, placement_pc, placement_mobile, horizontal_spac
 /** @internal */
 const execOnClickOperation = (onClickOperation) => {
 	if (onClickOperation.operation === "linkTo") linkTo(...onClickOperation.args)();
+	else if (onClickOperation.operation === "callNativeFunction") linkTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "moveTo") moveTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "closeApp") closeApp(onClickOperation.args[0] || "button")();
 	else if (onClickOperation.operation === "runScript") runScript(onClickOperation.args[0])();
@@ -3475,10 +3489,13 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 //#region src/hooks/useClickable.ts
 const getHref = (onClick) => {
 	if (!onClick) return void 0;
-	if (onClick.operation !== "linkTo") return void 0;
-	const href = String(onClick.args[0]) || "";
-	const decode = onClick.args[2] ?? false;
-	return decode ? decodeURI(href) : href;
+	if (onClick.operation === "callNativeFunction") return String(onClick.args[0]);
+	if (onClick.operation === "linkTo") {
+		const href = String(onClick.args[0]) || "";
+		const decode = onClick.args[2] ?? false;
+		return decode ? decodeURI(href) : href;
+	}
+	return void 0;
 };
 const getTarget = (onClick) => {
 	if (!onClick) return void 0;
@@ -3489,7 +3506,8 @@ const useClickable = ({ eventValue = {}, eventName = "", onClick, element = "div
 	const fixedElement = (() => {
 		if (!onClick) return element;
 		switch (onClick.operation) {
-			case "linkTo": return "a";
+			case "linkTo":
+			case "callNativeFunction": return "a";
 			case "none": return element;
 			default: return "button";
 		}
@@ -5912,9 +5930,9 @@ function Modal($$anchor, $$props) {
 	let layerId = $$9.prop($$props, "layerId", 8, "");
 	const { brandKit } = useBrandKit();
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== void 0;
-	let backgroundOverlay = $$9.mutable_state(DefaultModalPlacement.backgroundOverlay);
-	let backgroundOverlayPC = $$9.mutable_state(DefaultModalPlacement.backgroundOverlay);
-	let backgroundOverlaySP = $$9.mutable_state(DefaultModalPlacement.backgroundOverlay);
+	let backgroundOverlay = $$9.mutable_state(placement().position === "center");
+	let backgroundOverlayPC = $$9.mutable_state(placement().position === "center");
+	let backgroundOverlaySP = $$9.mutable_state(placement().position === "center");
 	let backgroundClickFunction = $$9.mutable_state(DefaultModalPlacement.backgroundClick);
 	let backgroundClickFunctionPC = $$9.mutable_state(DefaultModalPlacement.backgroundClick);
 	let backgroundClickFunctionSP = $$9.mutable_state(DefaultModalPlacement.backgroundClick);
@@ -6467,6 +6485,7 @@ function Youtube($$anchor, $$props) {
 	let player = null;
 	function onPlayerReady() {
 		if (props().mute || props().autoplay) player.setVolume(0);
+		if (props().autoplay) player.playVideo();
 	}
 	function onStart() {}
 	function onPause() {}
@@ -6492,6 +6511,7 @@ function Youtube($$anchor, $$props) {
 			showinfo: 0,
 			iv_load_policy: 1,
 			modestbranding: 1,
+			mute: props().autoplay || props().mute ? 1 : 0,
 			rel: boolToNumber(props().showRelatedMovies),
 			autoplay: boolToNumber(props().autoplay),
 			controls: boolToNumber(props().controls),

package/dist/svelte5/hydrate/prop.d.ts

@@ -66,6 +66,7 @@ type OperationArgumentTypes = {
 	Color: string
 	Handler: string
 	Trigger: string
+	NativeFunction: string
 };
 /** @internal */
 export type OperationArgumentType = keyof OperationArgumentTypes;
@@ -111,6 +112,13 @@ export declare const OnClickOperationOptions: readonly [{
 		readonly type: "TransitState"
 		readonly default: "/"
 	}]
+}, {
+	readonly operation: "callNativeFunction"
+	readonly args: readonly [{
+		readonly name: "url"
+		readonly type: "NativeFunction"
+		readonly default: ""
+	}]
 }, {
 	readonly operation: "closeApp"
 	readonly args: readonly [{

package/dist/svelte5/index.es.js

@@ -440,6 +440,14 @@ const OnClickOperationOptions = [
 			default: "/"
 		}]
 	},
+	{
+		operation: "callNativeFunction",
+		args: [{
+			name: "url",
+			type: "NativeFunction",
+			default: ""
+		}]
+	},
 	{
 		operation: "closeApp",
 		args: [{
@@ -2255,8 +2263,13 @@ async function loadGlobalStyle(href) {
 	return new Promise((resolve, reject) => {
 		const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
 		if (!action) return;
+		const DATA_ATTR_KEY = "data-krt-action-font";
+		const oldFontLink = document.querySelector(`link[${DATA_ATTR_KEY}]`);
+		if (oldFontLink) if (oldFontLink.getAttribute("href") === href) return;
+		else oldFontLink.parentElement?.removeChild(oldFontLink);
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
+		link.setAttribute(DATA_ATTR_KEY, "");
 		link.href = href;
 		link.type = "text/css";
 		action.appendChild(link);
@@ -3252,7 +3265,7 @@ const toCssBackground = (p, brandKit) => {
 	return {
 		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
 		...url ? {
-			backgroundSize: url ? "cover" : void 0,
+			backgroundSize: url ? p.backgroundSize ?? "cover" : void 0,
 			backgroundImage: url ? `url(${url})` : void 0,
 			backgroundPositionX: p?.backgroundPositionX ?? "center",
 			backgroundPositionY: p?.backgroundPositionY ?? "center",
@@ -3356,6 +3369,7 @@ const bootChat = (hide_launcher, placement_pc, placement_mobile, horizontal_spac
 /** @internal */
 const execOnClickOperation = (onClickOperation) => {
 	if (onClickOperation.operation === "linkTo") linkTo(...onClickOperation.args)();
+	else if (onClickOperation.operation === "callNativeFunction") linkTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "moveTo") moveTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "closeApp") closeApp(onClickOperation.args[0] || "button")();
 	else if (onClickOperation.operation === "runScript") runScript(onClickOperation.args[0])();
@@ -3444,10 +3458,13 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 //#region src/hooks/useClickable.ts
 const getHref = (onClick) => {
 	if (!onClick) return void 0;
-	if (onClick.operation !== "linkTo") return void 0;
-	const href = String(onClick.args[0]) || "";
-	const decode = onClick.args[2] ?? false;
-	return decode ? decodeURI(href) : href;
+	if (onClick.operation === "callNativeFunction") return String(onClick.args[0]);
+	if (onClick.operation === "linkTo") {
+		const href = String(onClick.args[0]) || "";
+		const decode = onClick.args[2] ?? false;
+		return decode ? decodeURI(href) : href;
+	}
+	return void 0;
 };
 const getTarget = (onClick) => {
 	if (!onClick) return void 0;
@@ -3458,7 +3475,8 @@ const useClickable = ({ eventValue = {}, eventName = "", onClick, element = "div
 	const fixedElement = (() => {
 		if (!onClick) return element;
 		switch (onClick.operation) {
-			case "linkTo": return "a";
+			case "linkTo":
+			case "callNativeFunction": return "a";
 			case "none": return element;
 			default: return "button";
 		}
@@ -5881,9 +5899,9 @@ function Modal($$anchor, $$props) {
 	let layerId = $$9.prop($$props, "layerId", 8, "");
 	const { brandKit } = useBrandKit();
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== void 0;
-	let backgroundOverlay = $$9.mutable_state(DefaultModalPlacement.backgroundOverlay);
-	let backgroundOverlayPC = $$9.mutable_state(DefaultModalPlacement.backgroundOverlay);
-	let backgroundOverlaySP = $$9.mutable_state(DefaultModalPlacement.backgroundOverlay);
+	let backgroundOverlay = $$9.mutable_state(placement().position === "center");
+	let backgroundOverlayPC = $$9.mutable_state(placement().position === "center");
+	let backgroundOverlaySP = $$9.mutable_state(placement().position === "center");
 	let backgroundClickFunction = $$9.mutable_state(DefaultModalPlacement.backgroundClick);
 	let backgroundClickFunctionPC = $$9.mutable_state(DefaultModalPlacement.backgroundClick);
 	let backgroundClickFunctionSP = $$9.mutable_state(DefaultModalPlacement.backgroundClick);
@@ -6436,6 +6454,7 @@ function Youtube($$anchor, $$props) {
 	let player = null;
 	function onPlayerReady() {
 		if (props().mute || props().autoplay) player.setVolume(0);
+		if (props().autoplay) player.playVideo();
 	}
 	function onStart() {}
 	function onPause() {}
@@ -6461,6 +6480,7 @@ function Youtube($$anchor, $$props) {
 			showinfo: 0,
 			iv_load_policy: 1,
 			modestbranding: 1,
+			mute: props().autoplay || props().mute ? 1 : 0,
 			rel: boolToNumber(props().showRelatedMovies),
 			autoplay: boolToNumber(props().autoplay),
 			controls: boolToNumber(props().controls),

package/dist/svelte5/index.front2.es.js

@@ -441,6 +441,14 @@ const OnClickOperationOptions = [
 			default: "/"
 		}]
 	},
+	{
+		operation: "callNativeFunction",
+		args: [{
+			name: "url",
+			type: "NativeFunction",
+			default: ""
+		}]
+	},
 	{
 		operation: "closeApp",
 		args: [{
@@ -2256,8 +2264,13 @@ async function loadGlobalStyle(href) {
 	return new Promise((resolve, reject) => {
 		const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
 		if (!action) return;
+		const DATA_ATTR_KEY = "data-krt-action-font";
+		const oldFontLink = document.querySelector(`link[${DATA_ATTR_KEY}]`);
+		if (oldFontLink) if (oldFontLink.getAttribute("href") === href) return;
+		else oldFontLink.parentElement?.removeChild(oldFontLink);
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
+		link.setAttribute(DATA_ATTR_KEY, "");
 		link.href = href;
 		link.type = "text/css";
 		action.appendChild(link);
@@ -3253,7 +3266,7 @@ const toCssBackground = (p, brandKit) => {
 	return {
 		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
 		...url ? {
-			backgroundSize: url ? "cover" : void 0,
+			backgroundSize: url ? p.backgroundSize ?? "cover" : void 0,
 			backgroundImage: url ? `url(${url})` : void 0,
 			backgroundPositionX: p?.backgroundPositionX ?? "center",
 			backgroundPositionY: p?.backgroundPositionY ?? "center",
@@ -3357,6 +3370,7 @@ const bootChat = (hide_launcher, placement_pc, placement_mobile, horizontal_spac
 /** @internal */
 const execOnClickOperation = (onClickOperation) => {
 	if (onClickOperation.operation === "linkTo") linkTo(...onClickOperation.args)();
+	else if (onClickOperation.operation === "callNativeFunction") linkTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "moveTo") moveTo(...onClickOperation.args)();
 	else if (onClickOperation.operation === "closeApp") closeApp(onClickOperation.args[0] || "button")();
 	else if (onClickOperation.operation === "runScript") runScript(onClickOperation.args[0])();
@@ -3445,10 +3459,13 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
 //#region src/hooks/useClickable.ts
 const getHref = (onClick) => {
 	if (!onClick) return void 0;
-	if (onClick.operation !== "linkTo") return void 0;
-	const href = String(onClick.args[0]) || "";
-	const decode = onClick.args[2] ?? false;
-	return decode ? decodeURI(href) : href;
+	if (onClick.operation === "callNativeFunction") return String(onClick.args[0]);
+	if (onClick.operation === "linkTo") {
+		const href = String(onClick.args[0]) || "";
+		const decode = onClick.args[2] ?? false;
+		return decode ? decodeURI(href) : href;
+	}
+	return void 0;
 };
 const getTarget = (onClick) => {
 	if (!onClick) return void 0;
@@ -3459,7 +3476,8 @@ const useClickable = ({ eventValue = {}, eventName = "", onClick, element = "div
 	const fixedElement = (() => {
 		if (!onClick) return element;
 		switch (onClick.operation) {
-			case "linkTo": return "a";
+			case "linkTo":
+			case "callNativeFunction": return "a";
 			case "none": return element;
 			default: return "button";
 		}
@@ -5882,9 +5900,9 @@ function Modal($$anchor, $$props) {
 	let layerId = $$10.prop($$props, "layerId", 8, "");
 	const { brandKit } = useBrandKit();
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== void 0;
-	let backgroundOverlay = $$10.mutable_state(DefaultModalPlacement.backgroundOverlay);
-	let backgroundOverlayPC = $$10.mutable_state(DefaultModalPlacement.backgroundOverlay);
-	let backgroundOverlaySP = $$10.mutable_state(DefaultModalPlacement.backgroundOverlay);
+	let backgroundOverlay = $$10.mutable_state(placement().position === "center");
+	let backgroundOverlayPC = $$10.mutable_state(placement().position === "center");
+	let backgroundOverlaySP = $$10.mutable_state(placement().position === "center");
 	let backgroundClickFunction = $$10.mutable_state(DefaultModalPlacement.backgroundClick);
 	let backgroundClickFunctionPC = $$10.mutable_state(DefaultModalPlacement.backgroundClick);
 	let backgroundClickFunctionSP = $$10.mutable_state(DefaultModalPlacement.backgroundClick);
@@ -6437,6 +6455,7 @@ function Youtube($$anchor, $$props) {
 	let player = null;
 	function onPlayerReady() {
 		if (props().mute || props().autoplay) player.setVolume(0);
+		if (props().autoplay) player.playVideo();
 	}
 	function onStart() {}
 	function onPause() {}
@@ -6462,6 +6481,7 @@ function Youtube($$anchor, $$props) {
 			showinfo: 0,
 			iv_load_policy: 1,
 			modestbranding: 1,
+			mute: props().autoplay || props().mute ? 1 : 0,
 			rel: boolToNumber(props().showRelatedMovies),
 			autoplay: boolToNumber(props().autoplay),
 			controls: boolToNumber(props().controls),

package/dist/svelte5/prop.d.ts

@@ -66,6 +66,7 @@ type OperationArgumentTypes = {
 	Color: string
 	Handler: string
 	Trigger: string
+	NativeFunction: string
 };
 /** @internal */
 export type OperationArgumentType = keyof OperationArgumentTypes;
@@ -111,6 +112,13 @@ export declare const OnClickOperationOptions: readonly [{
 		readonly type: "TransitState"
 		readonly default: "/"
 	}]
+}, {
+	readonly operation: "callNativeFunction"
+	readonly args: readonly [{
+		readonly name: "url"
+		readonly type: "NativeFunction"
+		readonly default: ""
+	}]
 }, {
 	readonly operation: "closeApp"
 	readonly args: readonly [{

package/package.json

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