@plaidev/karte-action-sdk 1.1.268-29127338.e0debfc5 → 1.1.268-29128731.e21f076b

package/dist/svelte5/components-flex/layout/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { BackgroundColorProps, BackgroundImageProps, BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
 export declare const LAYOUT_DISPLAY_TYPE: readonly ["inline-flex", "flex", "block"];
 export type LayoutDisplayType = (typeof LAYOUT_DISPLAY_TYPE)[number];
 export declare const LAYOUT_DIRECTION: readonly ["column", "column-reverse", "row", "row-reverse"];
@@ -8,7 +8,7 @@ export declare const LAYOUT_ALIGN: readonly ["flex-start", "center", "flex-end",
 export type LayoutFlexAlign = (typeof LAYOUT_ALIGN)[number];
 export declare const LAYOUT_JUSTIFY: readonly ["flex-start", "center", "flex-end", "space-between"];
 export type LayoutFlexJustify = (typeof LAYOUT_JUSTIFY)[number];
-export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundColorProps & BackgroundImageProps & PaddingProps & {
+export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & PaddingProps & {
 	display?: LayoutDisplayType
 	direction?: LayoutFlexDirection
 	align?: LayoutFlexAlign

package/dist/svelte5/components-flex/modal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundColorProps, BackgroundImageProps } from "../props.js";
-export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundColorProps & BackgroundImageProps & {
+import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
+export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & {
 	width?: Properties["width"]
 };

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

@@ -65,6 +65,14 @@ export type BackgroundImageProps = {
 	backgroundBlendMode?: Properties["backgroundBlendMode"]
 	backgroundBlendColor?: Properties["backgroundColor"]
 };
+export type BackgroundProps = {
+	backgroundColor?: Properties["backgroundColor"]
+	backgroundImageUrl?: string
+	backgroundPositionX?: Properties["backgroundPositionX"]
+	backgroundPositionY?: Properties["backgroundPositionY"]
+	backgroundBlendMode?: Properties["backgroundBlendMode"]
+	backgroundBlendColor?: Properties["backgroundColor"]
+};
 export type ShadowProps = {
 	shadow?: Properties["boxShadow"]
 	shadowVariant?: ShadowVariantCode

package/dist/svelte5/components-flex/utils/prop-to-style.d.ts

@@ -1,11 +1,10 @@
 import type { Properties } from "csstype";
-import type { BackgroundColorProps, BackgroundImageProps, BorderProps, CommonProps, OverflowProps, PaddingProps, PositionProps, RadiusProps, ShadowProps } from "../props.js";
+import type { BorderProps, CommonProps, OverflowProps, PaddingProps, PositionProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
 export declare const toCssPosition: (p?: PositionProps) => Properties;
 export declare const toCssCommon: (p?: CommonProps) => Properties;
 export declare const toCssBorder: (p?: BorderProps) => Properties;
 export declare const toCssPadding: (p?: PaddingProps) => Properties;
-export declare const toCssBackgroundImage: (p?: BackgroundImageProps) => Properties;
-export declare const toCssBackgroundColor: (p?: BackgroundColorProps) => Properties;
+export declare const toCssBackground: (p?: BackgroundProps) => Properties;
 export declare const toCssRadius: (p?: RadiusProps) => Properties;
 export declare const toCssShadow: (p?: ShadowProps) => Properties;
 export declare const toCssOverflow: (p?: OverflowProps) => Properties;

package/dist/svelte5/hydrate/components-flex/layout/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { BackgroundColorProps, BackgroundImageProps, BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
 export declare const LAYOUT_DISPLAY_TYPE: readonly ["inline-flex", "flex", "block"];
 export type LayoutDisplayType = (typeof LAYOUT_DISPLAY_TYPE)[number];
 export declare const LAYOUT_DIRECTION: readonly ["column", "column-reverse", "row", "row-reverse"];
@@ -8,7 +8,7 @@ export declare const LAYOUT_ALIGN: readonly ["flex-start", "center", "flex-end",
 export type LayoutFlexAlign = (typeof LAYOUT_ALIGN)[number];
 export declare const LAYOUT_JUSTIFY: readonly ["flex-start", "center", "flex-end", "space-between"];
 export type LayoutFlexJustify = (typeof LAYOUT_JUSTIFY)[number];
-export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundColorProps & BackgroundImageProps & PaddingProps & {
+export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & PaddingProps & {
 	display?: LayoutDisplayType
 	direction?: LayoutFlexDirection
 	align?: LayoutFlexAlign

package/dist/svelte5/hydrate/components-flex/modal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundColorProps, BackgroundImageProps } from "../props.js";
-export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundColorProps & BackgroundImageProps & {
+import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
+export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & {
 	width?: Properties["width"]
 };

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

@@ -65,6 +65,14 @@ export type BackgroundImageProps = {
 	backgroundBlendMode?: Properties["backgroundBlendMode"]
 	backgroundBlendColor?: Properties["backgroundColor"]
 };
+export type BackgroundProps = {
+	backgroundColor?: Properties["backgroundColor"]
+	backgroundImageUrl?: string
+	backgroundPositionX?: Properties["backgroundPositionX"]
+	backgroundPositionY?: Properties["backgroundPositionY"]
+	backgroundBlendMode?: Properties["backgroundBlendMode"]
+	backgroundBlendColor?: Properties["backgroundColor"]
+};
 export type ShadowProps = {
 	shadow?: Properties["boxShadow"]
 	shadowVariant?: ShadowVariantCode

package/dist/svelte5/hydrate/components-flex/utils/prop-to-style.d.ts

@@ -1,11 +1,10 @@
 import type { Properties } from "csstype";
-import type { BackgroundColorProps, BackgroundImageProps, BorderProps, CommonProps, OverflowProps, PaddingProps, PositionProps, RadiusProps, ShadowProps } from "../props.js";
+import type { BorderProps, CommonProps, OverflowProps, PaddingProps, PositionProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
 export declare const toCssPosition: (p?: PositionProps) => Properties;
 export declare const toCssCommon: (p?: CommonProps) => Properties;
 export declare const toCssBorder: (p?: BorderProps) => Properties;
 export declare const toCssPadding: (p?: PaddingProps) => Properties;
-export declare const toCssBackgroundImage: (p?: BackgroundImageProps) => Properties;
-export declare const toCssBackgroundColor: (p?: BackgroundColorProps) => Properties;
+export declare const toCssBackground: (p?: BackgroundProps) => Properties;
 export declare const toCssRadius: (p?: RadiusProps) => Properties;
 export declare const toCssShadow: (p?: ShadowProps) => Properties;
 export declare const toCssOverflow: (p?: OverflowProps) => Properties;

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

@@ -3230,7 +3230,7 @@ const toCssPadding = (p) => {
 		paddingBottom: p?.paddingBottom
 	};
 };
-const toCssBackgroundImage = (p) => {
+const toCssBackground = (p) => {
 	const url = p?.backgroundImageUrl;
 	return {
 		backgroundImage: url ? `url(${url})` : void 0,
@@ -3238,12 +3238,10 @@ const toCssBackgroundImage = (p) => {
 		backgroundPositionX: p?.backgroundPositionX ?? "center",
 		backgroundPositionY: p?.backgroundPositionY ?? "center",
 		backgroundBlendMode: p?.backgroundBlendMode,
-		backgroundColor: p?.backgroundBlendColor
+		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor,
+		backgroundRepeat: "no-repeat"
 	};
 };
-const toCssBackgroundColor = (p) => {
-	return { backgroundColor: p?.backgroundColor };
-};
 const toCssRadius = (p) => {
 	return {
 		borderTopLeftRadius: p?.borderTopLeftRadius,
@@ -3516,10 +3514,10 @@ const AVATAR_SIZE_STYLES = {
 
 //#endregion
 //#region src/components-flex/avatar/Avatar.svelte
-var root_1$8 = $$54.template(`<img class="avatar-image svelte-3nxn6f">`);
+var root_1$8 = $$54.template(`<img class="avatar-image svelte-1xhdr99">`);
 const $$css$22 = {
-	hash: "svelte-3nxn6f",
-	code: ".avatar.svelte-3nxn6f {display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
+	hash: "svelte-1xhdr99",
+	code: ".avatar.svelte-1xhdr99 {display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
 };
 function Avatar($$anchor, $$props) {
 	$$54.push($$props, false);
@@ -3566,7 +3564,7 @@ function Avatar($$anchor, $$props) {
 			class: "avatar",
 			style: $$54.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-3nxn6f"));
+		}, "svelte-1xhdr99"));
 		$$54.event("click", $$element, handleClick);
 		var img = root_1$8();
 		$$54.template_effect(() => {
@@ -4293,11 +4291,11 @@ function darkenColor(color, percent) {
 
 //#endregion
 //#region src/components-flex/button/Button.svelte
-var root_2$4 = $$21.template(`<div class="button-icon svelte-o2gomt"><!></div>`);
+var root_2$4 = $$21.template(`<div class="button-icon svelte-l0rauj"><!></div>`);
 var root_1$7 = $$21.template(`<!> <span class="button-label"> </span>`, 1);
 const $$css$20 = {
-	hash: "svelte-o2gomt",
-	code: ".button.svelte-o2gomt {display:inline-flex;gap:0.8em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;color:var(--color);border-color:var(--border-color);background-color:var(--bg-color);}.button.svelte-o2gomt:hover {background-color:var(--hover-bg-color);border-color:var(--hover-border-color);}.button-icon.svelte-o2gomt {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
+	hash: "svelte-l0rauj",
+	code: ".button.svelte-l0rauj {display:inline-flex;gap:0.8em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;color:var(--color);border-color:var(--border-color);background-color:var(--bg-color);}.button.svelte-l0rauj:hover {background-color:var(--hover-bg-color);border-color:var(--hover-border-color);}.button-icon.svelte-l0rauj {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
 };
 function Button($$anchor, $$props) {
 	$$21.push($$props, false);
@@ -4381,7 +4379,7 @@ function Button($$anchor, $$props) {
 			style: $$21.get(style),
 			"data-layer-id": layerId(),
 			"data-variant": variant
-		}, "svelte-o2gomt"));
+		}, "svelte-l0rauj"));
 		$$21.event("click", $$element, handleClick);
 		var fragment_1 = root_1$7();
 		var node_1 = $$21.first_child(fragment_1);
@@ -4510,11 +4508,11 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 
 //#endregion
 //#region src/components-flex/button-outlined/ButtonOutlined.svelte
-var root_2$3 = $$20.template(`<div class="button-outlined-icon svelte-38fju1"><!></div>`);
-var root_1$6 = $$20.template(`<!> <span class="button-outlined-label svelte-38fju1"> </span>`, 1);
+var root_2$3 = $$20.template(`<div class="button-outlined-icon svelte-z8gomx"><!></div>`);
+var root_1$6 = $$20.template(`<!> <span class="button-outlined-label svelte-z8gomx"> </span>`, 1);
 const $$css$19 = {
-	hash: "svelte-38fju1",
-	code: ".button-outlined.svelte-38fju1 {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:var(--bg-color);}.button-outlined.svelte-38fju1:hover {background-color:var(--hover-bg-color);}.button-outlined-icon.svelte-38fju1 {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em;}"
+	hash: "svelte-z8gomx",
+	code: ".button-outlined.svelte-z8gomx {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;background-color:var(--bg-color);}.button-outlined.svelte-z8gomx:hover {background-color:var(--hover-bg-color);}.button-outlined-icon.svelte-z8gomx {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em;}"
 };
 function ButtonOutlined($$anchor, $$props) {
 	$$20.push($$props, false);
@@ -4565,7 +4563,7 @@ function ButtonOutlined($$anchor, $$props) {
 			class: "button-outlined",
 			style: $$20.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-38fju1"));
+		}, "svelte-z8gomx"));
 		$$20.event("click", $$element, handleClick);
 		var fragment_1 = root_1$6();
 		var node_1 = $$20.first_child(fragment_1);
@@ -4659,11 +4657,11 @@ const getButtonTextThemeStyles = getPropStyles(callback$2);
 
 //#endregion
 //#region src/components-flex/button-text/ButtonText.svelte
-var root_2$2 = $$19.template(`<div class="button-text-icon svelte-1xgvp8r"><!></div>`);
-var root_1$5 = $$19.template(`<!> <span class="button-text-label svelte-1xgvp8r"> </span>`, 1);
+var root_2$2 = $$19.template(`<div class="button-text-icon svelte-l90o4j"><!></div>`);
+var root_1$5 = $$19.template(`<!> <span class="button-text-label svelte-l90o4j"> </span>`, 1);
 const $$css$18 = {
-	hash: "svelte-1xgvp8r",
-	code: ".button-text.svelte-1xgvp8r {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border:0;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:rgba(255, 255, 255, 0);}.button-text.svelte-1xgvp8r:hover {background-color:var(--hover-bg-color);}.button-text-icon.svelte-1xgvp8r {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
+	hash: "svelte-l90o4j",
+	code: ".button-text.svelte-l90o4j {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border:0;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;background-color:rgba(255, 255, 255, 0);}.button-text.svelte-l90o4j:hover {background-color:var(--hover-bg-color);}.button-text-icon.svelte-l90o4j {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
 };
 function ButtonText($$anchor, $$props) {
 	$$19.push($$props, false);
@@ -4708,7 +4706,7 @@ function ButtonText($$anchor, $$props) {
 			class: "button-text",
 			style: $$19.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1xgvp8r"));
+		}, "svelte-l90o4j"));
 		$$19.event("click", $$element, handleClick);
 		var fragment_1 = root_1$5();
 		var node_1 = $$19.first_child(fragment_1);
@@ -4763,10 +4761,10 @@ const BUTTON_TEXT_THEME = {
 //#endregion
 //#region src/components-flex/close-button/CloseButton.svelte
 var root_2$1 = $$18.template(`<span></span>`);
-var root_1$4 = $$18.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-3mvsv6"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
+var root_1$4 = $$18.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-1xcn1yw"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
 const $$css$17 = {
-	hash: "svelte-3mvsv6",
-	code: ".close-button.svelte-3mvsv6 {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;}.close-button.svelte-3mvsv6 svg:where(.svelte-3mvsv6) {transition:transform 0.12s;}.close-button.svelte-3mvsv6:hover svg:where(.svelte-3mvsv6) {transform:rotate(90deg);}.close-button-order-one.svelte-3mvsv6 {order:1;}.close-button-order-two.svelte-3mvsv6 {order:2;}"
+	hash: "svelte-1xcn1yw",
+	code: ".close-button.svelte-1xcn1yw {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,\n      border-color 0.12s,\n      color 0.12s;}.close-button.svelte-1xcn1yw svg:where(.svelte-1xcn1yw) {transition:transform 0.12s;}.close-button.svelte-1xcn1yw:hover svg:where(.svelte-1xcn1yw) {transform:rotate(90deg);}.close-button-order-one.svelte-1xcn1yw {order:1;}.close-button-order-two.svelte-1xcn1yw {order:2;}"
 };
 function CloseButton($$anchor, $$props) {
 	$$18.push($$props, false);
@@ -4855,7 +4853,7 @@ function CloseButton($$anchor, $$props) {
 			class: `close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`,
 			"data-layer-id": layerId(),
 			style: $$18.get(style)
-		}, "svelte-3mvsv6"));
+		}, "svelte-1xcn1yw"));
 		$$18.event("click", $$element, handleClick);
 		var fragment_1 = root_1$4();
 		var span = $$18.first_child(fragment_1);
@@ -4866,7 +4864,7 @@ function CloseButton($$anchor, $$props) {
 		{
 			var consequent = ($$anchor$2) => {
 				var span_1 = root_2$1();
-				$$18.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-3mvsv6");
+				$$18.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-1xcn1yw");
 				span_1.textContent = label;
 				$$18.template_effect(() => $$18.set_style(span_1, $$18.get(labelStyle)));
 				$$18.append($$anchor$2, span_1);
@@ -5031,8 +5029,8 @@ const IMAGE_ASPECT_VARIANTS = {
 //#endregion
 //#region src/components-flex/layout/Layout.svelte
 const $$css$15 = {
-	hash: "svelte-139vx15",
-	code: ".layout.svelte-139vx15 {text-decoration:none;color:inherit;}.layout[data-clickable=true].svelte-139vx15 {cursor:pointer;}.layout[data-clickable=true].svelte-139vx15:hover {opacity:0.8;}"
+	hash: "svelte-1o103hp",
+	code: ".layout.svelte-1o103hp {text-decoration:none;color:inherit;}.layout[data-clickable='true'].svelte-1o103hp {cursor:pointer;}.layout[data-clickable='true'].svelte-1o103hp:hover {opacity:0.8;}"
 };
 function Layout($$anchor, $$props) {
 	$$16.push($$props, false);
@@ -5054,8 +5052,7 @@ function Layout($$anchor, $$props) {
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
 			...toCssRadius(props()),
-			...toCssBackgroundColor(props()),
-			...toCssBackgroundImage(props()),
+			...toCssBackground(props()),
 			...toCssCommon(props()),
 			...toCssPadding(props()),
 			...toCssBorder(props())
@@ -5072,7 +5069,7 @@ function Layout($$anchor, $$props) {
 			class: "layout",
 			style: $$16.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-139vx15"));
+		}, "svelte-1o103hp"));
 		$$16.event("click", $$element, handleClick);
 		var fragment_1 = $$16.comment();
 		var node_1 = $$16.first_child(fragment_1);
@@ -5471,7 +5468,7 @@ function Text($$anchor, $$props) {
 			color: getColor(),
 			...getCssSize(),
 			...toCssRadius(props()),
-			...toCssBackgroundColor(props()),
+			...toCssBackground(props()),
 			...toCssCommon(props()),
 			...toCssPosition(props()),
 			...toCssPadding(props()),
@@ -5913,8 +5910,7 @@ function Modal($$anchor, $$props) {
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
 			...toCssRadius(props()),
-			...toCssBackgroundImage(props()),
-			...toCssBackgroundColor(props()),
+			...toCssBackground(props()),
 			...toCssBorder(props())
 		});
 		modalStyles.add(propsStyle);
@@ -6565,7 +6561,7 @@ const useText = (props) => {
 		color: getColor(),
 		...getCssSize(),
 		...toCssRadius(props),
-		...toCssBackgroundColor(props),
+		...toCssBackground(props),
 		...toCssCommon(props),
 		...toCssPosition(props),
 		...toCssPadding(props),
@@ -6618,10 +6614,10 @@ function CountDownValue($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/clip-copy/ClipCopy.svelte
-var root = $.template(`<div class="clipboard svelte-30zd8m"><button class="clipboard-button svelte-30zd8m"><!></button> <span class="clipboard-tooltip svelte-30zd8m">コピーしました</span></div>`);
+var root = $.template(`<div class="clipboard svelte-orhp4c"><button class="clipboard-button svelte-orhp4c"><!></button> <span class="clipboard-tooltip svelte-orhp4c">コピーしました</span></div>`);
 const $$css = {
-	hash: "svelte-30zd8m",
-	code: ".clipboard.svelte-30zd8m {position:relative;display:inline-flex;}.clipboard-button.svelte-30zd8m {position:relative;display:inline-flex;align-items:center;white-space:nowrap;gap:12px;background:none;border:0;transition:0.12s;cursor:pointer;}.clipboard-button.svelte-30zd8m:hover {opacity:0.8;}.clipboard-button.svelte-30zd8m:active {opacity:0.6;}.clipboard-tooltip.svelte-30zd8m {position:absolute;top:-8px;left:50%;display:block;transform:translate(-50%, -100%);padding:4px 10px;background-color:#333333;color:#ffffff;font-size:11px;font-weight:bold;border-radius:4px;transition:transform 0.2s ease-out;white-space:nowrap;pointer-events:none;}.clipboard-tooltip.svelte-30zd8m:after {content:'';display:block;position:absolute;bottom:0;left:50%;width:8px;height:8px;background-color:#333333;border-radius:1px;transform:translate(-50%, 40%) rotate(45deg);}.clipboard-tooltip[aria-hidden=\"true\"].svelte-30zd8m {opacity:0;transform:translate(-50%, -80%);}"
+	hash: "svelte-orhp4c",
+	code: ".clipboard.svelte-orhp4c {position:relative;display:inline-flex;}.clipboard-button.svelte-orhp4c {position:relative;display:inline-flex;align-items:center;white-space:nowrap;gap:12px;background:none;border:0;transition:0.12s;cursor:pointer;}.clipboard-button.svelte-orhp4c:hover {opacity:0.8;}.clipboard-button.svelte-orhp4c:active {opacity:0.6;}.clipboard-tooltip.svelte-orhp4c {position:absolute;top:-8px;left:50%;display:block;transform:translate(-50%, -100%);padding:4px 10px;background-color:#333333;color:#ffffff;font-size:11px;font-weight:bold;border-radius:4px;transition:transform 0.2s ease-out;white-space:nowrap;pointer-events:none;}.clipboard-tooltip.svelte-orhp4c:after {content:'';display:block;position:absolute;bottom:0;left:50%;width:8px;height:8px;background-color:#333333;border-radius:1px;transform:translate(-50%, 40%) rotate(45deg);}.clipboard-tooltip[aria-hidden='true'].svelte-orhp4c {opacity:0;transform:translate(-50%, -80%);}"
 };
 function ClipCopy($$anchor, $$props) {
 	$.push($$props, false);

package/dist/svelte5/index.es.js

@@ -3199,7 +3199,7 @@ const toCssPadding = (p) => {
 		paddingBottom: p?.paddingBottom
 	};
 };
-const toCssBackgroundImage = (p) => {
+const toCssBackground = (p) => {
 	const url = p?.backgroundImageUrl;
 	return {
 		backgroundImage: url ? `url(${url})` : void 0,
@@ -3207,12 +3207,10 @@ const toCssBackgroundImage = (p) => {
 		backgroundPositionX: p?.backgroundPositionX ?? "center",
 		backgroundPositionY: p?.backgroundPositionY ?? "center",
 		backgroundBlendMode: p?.backgroundBlendMode,
-		backgroundColor: p?.backgroundBlendColor
+		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor,
+		backgroundRepeat: "no-repeat"
 	};
 };
-const toCssBackgroundColor = (p) => {
-	return { backgroundColor: p?.backgroundColor };
-};
 const toCssRadius = (p) => {
 	return {
 		borderTopLeftRadius: p?.borderTopLeftRadius,
@@ -3485,10 +3483,10 @@ const AVATAR_SIZE_STYLES = {
 
 //#endregion
 //#region src/components-flex/avatar/Avatar.svelte
-var root_1$8 = $$54.template(`<img class="avatar-image svelte-3nxn6f">`);
+var root_1$8 = $$54.template(`<img class="avatar-image svelte-1xhdr99">`);
 const $$css$22 = {
-	hash: "svelte-3nxn6f",
-	code: ".avatar.svelte-3nxn6f {display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
+	hash: "svelte-1xhdr99",
+	code: ".avatar.svelte-1xhdr99 {display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0;background:none;padding:0;margin:0;text-align:left;-webkit-appearance:none;}"
 };
 function Avatar($$anchor, $$props) {
 	$$54.push($$props, false);
@@ -3535,7 +3533,7 @@ function Avatar($$anchor, $$props) {
 			class: "avatar",
 			style: $$54.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-3nxn6f"));
+		}, "svelte-1xhdr99"));
 		$$54.event("click", $$element, handleClick);
 		var img = root_1$8();
 		$$54.template_effect(() => {
@@ -4262,11 +4260,11 @@ function darkenColor(color, percent) {
 
 //#endregion
 //#region src/components-flex/button/Button.svelte
-var root_2$4 = $$21.template(`<div class="button-icon svelte-o2gomt"><!></div>`);
+var root_2$4 = $$21.template(`<div class="button-icon svelte-l0rauj"><!></div>`);
 var root_1$7 = $$21.template(`<!> <span class="button-label"> </span>`, 1);
 const $$css$20 = {
-	hash: "svelte-o2gomt",
-	code: ".button.svelte-o2gomt {display:inline-flex;gap:0.8em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;color:var(--color);border-color:var(--border-color);background-color:var(--bg-color);}.button.svelte-o2gomt:hover {background-color:var(--hover-bg-color);border-color:var(--hover-border-color);}.button-icon.svelte-o2gomt {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
+	hash: "svelte-l0rauj",
+	code: ".button.svelte-l0rauj {display:inline-flex;gap:0.8em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;color:var(--color);border-color:var(--border-color);background-color:var(--bg-color);}.button.svelte-l0rauj:hover {background-color:var(--hover-bg-color);border-color:var(--hover-border-color);}.button-icon.svelte-l0rauj {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
 };
 function Button($$anchor, $$props) {
 	$$21.push($$props, false);
@@ -4350,7 +4348,7 @@ function Button($$anchor, $$props) {
 			style: $$21.get(style),
 			"data-layer-id": layerId(),
 			"data-variant": variant
-		}, "svelte-o2gomt"));
+		}, "svelte-l0rauj"));
 		$$21.event("click", $$element, handleClick);
 		var fragment_1 = root_1$7();
 		var node_1 = $$21.first_child(fragment_1);
@@ -4479,11 +4477,11 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 
 //#endregion
 //#region src/components-flex/button-outlined/ButtonOutlined.svelte
-var root_2$3 = $$20.template(`<div class="button-outlined-icon svelte-38fju1"><!></div>`);
-var root_1$6 = $$20.template(`<!> <span class="button-outlined-label svelte-38fju1"> </span>`, 1);
+var root_2$3 = $$20.template(`<div class="button-outlined-icon svelte-z8gomx"><!></div>`);
+var root_1$6 = $$20.template(`<!> <span class="button-outlined-label svelte-z8gomx"> </span>`, 1);
 const $$css$19 = {
-	hash: "svelte-38fju1",
-	code: ".button-outlined.svelte-38fju1 {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:var(--bg-color);}.button-outlined.svelte-38fju1:hover {background-color:var(--hover-bg-color);}.button-outlined-icon.svelte-38fju1 {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em;}"
+	hash: "svelte-z8gomx",
+	code: ".button-outlined.svelte-z8gomx {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;background-color:var(--bg-color);}.button-outlined.svelte-z8gomx:hover {background-color:var(--hover-bg-color);}.button-outlined-icon.svelte-z8gomx {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em;}"
 };
 function ButtonOutlined($$anchor, $$props) {
 	$$20.push($$props, false);
@@ -4534,7 +4532,7 @@ function ButtonOutlined($$anchor, $$props) {
 			class: "button-outlined",
 			style: $$20.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-38fju1"));
+		}, "svelte-z8gomx"));
 		$$20.event("click", $$element, handleClick);
 		var fragment_1 = root_1$6();
 		var node_1 = $$20.first_child(fragment_1);
@@ -4628,11 +4626,11 @@ const getButtonTextThemeStyles = getPropStyles(callback$2);
 
 //#endregion
 //#region src/components-flex/button-text/ButtonText.svelte
-var root_2$2 = $$19.template(`<div class="button-text-icon svelte-1xgvp8r"><!></div>`);
-var root_1$5 = $$19.template(`<!> <span class="button-text-label svelte-1xgvp8r"> </span>`, 1);
+var root_2$2 = $$19.template(`<div class="button-text-icon svelte-l90o4j"><!></div>`);
+var root_1$5 = $$19.template(`<!> <span class="button-text-label svelte-l90o4j"> </span>`, 1);
 const $$css$18 = {
-	hash: "svelte-1xgvp8r",
-	code: ".button-text.svelte-1xgvp8r {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border:0;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:rgba(255, 255, 255, 0);}.button-text.svelte-1xgvp8r:hover {background-color:var(--hover-bg-color);}.button-text-icon.svelte-1xgvp8r {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
+	hash: "svelte-l90o4j",
+	code: ".button-text.svelte-l90o4j {display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border:0;line-height:1.5;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;cursor:pointer;background-color:rgba(255, 255, 255, 0);}.button-text.svelte-l90o4j:hover {background-color:var(--hover-bg-color);}.button-text-icon.svelte-l90o4j {display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;}"
 };
 function ButtonText($$anchor, $$props) {
 	$$19.push($$props, false);
@@ -4677,7 +4675,7 @@ function ButtonText($$anchor, $$props) {
 			class: "button-text",
 			style: $$19.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1xgvp8r"));
+		}, "svelte-l90o4j"));
 		$$19.event("click", $$element, handleClick);
 		var fragment_1 = root_1$5();
 		var node_1 = $$19.first_child(fragment_1);
@@ -4732,10 +4730,10 @@ const BUTTON_TEXT_THEME = {
 //#endregion
 //#region src/components-flex/close-button/CloseButton.svelte
 var root_2$1 = $$18.template(`<span></span>`);
-var root_1$4 = $$18.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-3mvsv6"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
+var root_1$4 = $$18.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-1xcn1yw"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
 const $$css$17 = {
-	hash: "svelte-3mvsv6",
-	code: ".close-button.svelte-3mvsv6 {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;}.close-button.svelte-3mvsv6 svg:where(.svelte-3mvsv6) {transition:transform 0.12s;}.close-button.svelte-3mvsv6:hover svg:where(.svelte-3mvsv6) {transform:rotate(90deg);}.close-button-order-one.svelte-3mvsv6 {order:1;}.close-button-order-two.svelte-3mvsv6 {order:2;}"
+	hash: "svelte-1xcn1yw",
+	code: ".close-button.svelte-1xcn1yw {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,\n      border-color 0.12s,\n      color 0.12s;}.close-button.svelte-1xcn1yw svg:where(.svelte-1xcn1yw) {transition:transform 0.12s;}.close-button.svelte-1xcn1yw:hover svg:where(.svelte-1xcn1yw) {transform:rotate(90deg);}.close-button-order-one.svelte-1xcn1yw {order:1;}.close-button-order-two.svelte-1xcn1yw {order:2;}"
 };
 function CloseButton($$anchor, $$props) {
 	$$18.push($$props, false);
@@ -4824,7 +4822,7 @@ function CloseButton($$anchor, $$props) {
 			class: `close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`,
 			"data-layer-id": layerId(),
 			style: $$18.get(style)
-		}, "svelte-3mvsv6"));
+		}, "svelte-1xcn1yw"));
 		$$18.event("click", $$element, handleClick);
 		var fragment_1 = root_1$4();
 		var span = $$18.first_child(fragment_1);
@@ -4835,7 +4833,7 @@ function CloseButton($$anchor, $$props) {
 		{
 			var consequent = ($$anchor$2) => {
 				var span_1 = root_2$1();
-				$$18.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-3mvsv6");
+				$$18.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-1xcn1yw");
 				span_1.textContent = label;
 				$$18.template_effect(() => $$18.set_style(span_1, $$18.get(labelStyle)));
 				$$18.append($$anchor$2, span_1);
@@ -5000,8 +4998,8 @@ const IMAGE_ASPECT_VARIANTS = {
 //#endregion
 //#region src/components-flex/layout/Layout.svelte
 const $$css$15 = {
-	hash: "svelte-139vx15",
-	code: ".layout.svelte-139vx15 {text-decoration:none;color:inherit;}.layout[data-clickable=true].svelte-139vx15 {cursor:pointer;}.layout[data-clickable=true].svelte-139vx15:hover {opacity:0.8;}"
+	hash: "svelte-1o103hp",
+	code: ".layout.svelte-1o103hp {text-decoration:none;color:inherit;}.layout[data-clickable='true'].svelte-1o103hp {cursor:pointer;}.layout[data-clickable='true'].svelte-1o103hp:hover {opacity:0.8;}"
 };
 function Layout($$anchor, $$props) {
 	$$16.push($$props, false);
@@ -5023,8 +5021,7 @@ function Layout($$anchor, $$props) {
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
 			...toCssRadius(props()),
-			...toCssBackgroundColor(props()),
-			...toCssBackgroundImage(props()),
+			...toCssBackground(props()),
 			...toCssCommon(props()),
 			...toCssPadding(props()),
 			...toCssBorder(props())
@@ -5041,7 +5038,7 @@ function Layout($$anchor, $$props) {
 			class: "layout",
 			style: $$16.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-139vx15"));
+		}, "svelte-1o103hp"));
 		$$16.event("click", $$element, handleClick);
 		var fragment_1 = $$16.comment();
 		var node_1 = $$16.first_child(fragment_1);
@@ -5440,7 +5437,7 @@ function Text($$anchor, $$props) {
 			color: getColor(),
 			...getCssSize(),
 			...toCssRadius(props()),
-			...toCssBackgroundColor(props()),
+			...toCssBackground(props()),
 			...toCssCommon(props()),
 			...toCssPosition(props()),
 			...toCssPadding(props()),
@@ -5882,8 +5879,7 @@ function Modal($$anchor, $$props) {
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
 			...toCssRadius(props()),
-			...toCssBackgroundImage(props()),
-			...toCssBackgroundColor(props()),
+			...toCssBackground(props()),
 			...toCssBorder(props())
 		});
 		modalStyles.add(propsStyle);
@@ -6534,7 +6530,7 @@ const useText = (props) => {
 		color: getColor(),
 		...getCssSize(),
 		...toCssRadius(props),
-		...toCssBackgroundColor(props),
+		...toCssBackground(props),
 		...toCssCommon(props),
 		...toCssPosition(props),
 		...toCssPadding(props),
@@ -6587,10 +6583,10 @@ function CountDownValue($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/clip-copy/ClipCopy.svelte
-var root = $.template(`<div class="clipboard svelte-30zd8m"><button class="clipboard-button svelte-30zd8m"><!></button> <span class="clipboard-tooltip svelte-30zd8m">コピーしました</span></div>`);
+var root = $.template(`<div class="clipboard svelte-orhp4c"><button class="clipboard-button svelte-orhp4c"><!></button> <span class="clipboard-tooltip svelte-orhp4c">コピーしました</span></div>`);
 const $$css = {
-	hash: "svelte-30zd8m",
-	code: ".clipboard.svelte-30zd8m {position:relative;display:inline-flex;}.clipboard-button.svelte-30zd8m {position:relative;display:inline-flex;align-items:center;white-space:nowrap;gap:12px;background:none;border:0;transition:0.12s;cursor:pointer;}.clipboard-button.svelte-30zd8m:hover {opacity:0.8;}.clipboard-button.svelte-30zd8m:active {opacity:0.6;}.clipboard-tooltip.svelte-30zd8m {position:absolute;top:-8px;left:50%;display:block;transform:translate(-50%, -100%);padding:4px 10px;background-color:#333333;color:#ffffff;font-size:11px;font-weight:bold;border-radius:4px;transition:transform 0.2s ease-out;white-space:nowrap;pointer-events:none;}.clipboard-tooltip.svelte-30zd8m:after {content:'';display:block;position:absolute;bottom:0;left:50%;width:8px;height:8px;background-color:#333333;border-radius:1px;transform:translate(-50%, 40%) rotate(45deg);}.clipboard-tooltip[aria-hidden=\"true\"].svelte-30zd8m {opacity:0;transform:translate(-50%, -80%);}"
+	hash: "svelte-orhp4c",
+	code: ".clipboard.svelte-orhp4c {position:relative;display:inline-flex;}.clipboard-button.svelte-orhp4c {position:relative;display:inline-flex;align-items:center;white-space:nowrap;gap:12px;background:none;border:0;transition:0.12s;cursor:pointer;}.clipboard-button.svelte-orhp4c:hover {opacity:0.8;}.clipboard-button.svelte-orhp4c:active {opacity:0.6;}.clipboard-tooltip.svelte-orhp4c {position:absolute;top:-8px;left:50%;display:block;transform:translate(-50%, -100%);padding:4px 10px;background-color:#333333;color:#ffffff;font-size:11px;font-weight:bold;border-radius:4px;transition:transform 0.2s ease-out;white-space:nowrap;pointer-events:none;}.clipboard-tooltip.svelte-orhp4c:after {content:'';display:block;position:absolute;bottom:0;left:50%;width:8px;height:8px;background-color:#333333;border-radius:1px;transform:translate(-50%, 40%) rotate(45deg);}.clipboard-tooltip[aria-hidden='true'].svelte-orhp4c {opacity:0;transform:translate(-50%, -80%);}"
 };
 function ClipCopy($$anchor, $$props) {
 	$.push($$props, false);