@plaidev/karte-action-sdk 1.1.268-29127795.266c63a4 → 1.1.268-29130290.f4c098fe

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

@@ -3164,6 +3164,52 @@ const SHADOW_VARIANT = {
 	}
 };
 const SHADOW_VARIANTS = toVariantArray(SHADOW_VARIANT);
+const BACKGROUND_COLOR_VARIANT = {
+	base: {
+		name: "ホワイト",
+		getProps: () => ({ backgroundColor: "#FFFFFF" })
+	},
+	dark: {
+		name: "ブラック",
+		getProps: () => ({ backgroundColor: "#000000" })
+	},
+	gray: {
+		name: "グレー",
+		getProps: () => ({ backgroundColor: "#ECECEC" })
+	},
+	brand: {
+		name: "ブランド",
+		getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_brand })
+	},
+	danger: {
+		name: "デンジャー",
+		getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_danger })
+	}
+};
+const BACKGROUND_COLOR_VARIANTS = toVariantArray(BACKGROUND_COLOR_VARIANT);
+const BORDER_COLOR_VARIANT = {
+	black: {
+		name: "ブラック",
+		getProps: () => ({ borderColor: "#000000" })
+	},
+	gray: {
+		name: "グレー",
+		getProps: () => ({ borderColor: "#DBDBDB" })
+	},
+	brand: {
+		name: "ブランド",
+		getProps: (kit) => ({ borderColor: getBrandKit(kit).color_brand })
+	},
+	danger: {
+		name: "デンジャー",
+		getProps: (kit) => ({ borderColor: getBrandKit(kit).color_danger })
+	},
+	base: {
+		name: "ホワイト",
+		getProps: () => ({ borderColor: "#FFFFFF" })
+	}
+};
+const BORDER_COLOR_VARIANTS = toVariantArray(BORDER_COLOR_VARIANT);
 
 //#endregion
 //#region src/components-flex/utils/prop-to-style.ts
@@ -3180,11 +3226,12 @@ const toCssPosition = (p) => {
 const toCssCommon = (p) => {
 	return { ...toCssPosition(p) };
 };
-const toCssBorder = (p) => {
+const toCssBorder = (p, brandKit) => {
 	const borderWidth = p?.borderTopWidth ?? p?.borderRightWidth ?? p?.borderLeftWidth ?? p?.borderBottomWidth ?? null;
 	if (borderWidth === null) return {};
+	const variant = BORDER_COLOR_VARIANT[p?.borderColorVariant];
 	return {
-		borderColor: p?.borderColor,
+		borderColor: p?.borderColor ?? variant?.getProps(brandKit)?.borderColor,
 		borderStyle: "solid",
 		borderTopWidth: p?.borderTopWidth,
 		borderLeftWidth: p?.borderLeftWidth,
@@ -3200,16 +3247,19 @@ const toCssPadding = (p) => {
 		paddingBottom: p?.paddingBottom
 	};
 };
-const toCssBackground = (p) => {
+const toCssBackground = (p, brandKit) => {
 	const url = p?.backgroundImageUrl;
+	const variant = BACKGROUND_COLOR_VARIANT[p?.backgroundColorVariant];
 	return {
-		backgroundImage: url ? `url(${url})` : void 0,
-		backgroundSize: url ? "cover" : void 0,
-		backgroundPositionX: p?.backgroundPositionX ?? "center",
-		backgroundPositionY: p?.backgroundPositionY ?? "center",
-		backgroundBlendMode: p?.backgroundBlendMode,
-		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor,
-		backgroundRepeat: "no-repeat"
+		backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
+		...url ? {
+			backgroundSize: url ? "cover" : void 0,
+			backgroundImage: url ? `url(${url})` : void 0,
+			backgroundPositionX: p?.backgroundPositionX ?? "center",
+			backgroundPositionY: p?.backgroundPositionY ?? "center",
+			backgroundBlendMode: p?.backgroundBlendMode,
+			backgroundRepeat: "no-repeat"
+		} : {}
 	};
 };
 const toCssRadius = (p) => {
@@ -3484,14 +3534,15 @@ const AVATAR_SIZE_STYLES = {
 
 //#endregion
 //#region src/components-flex/avatar/Avatar.svelte
-var root_1$8 = $$55.template(`<img class="avatar-image svelte-3nxn6f">`);
+var root_1$8 = $$55.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) {
 	$$55.push($$props, false);
 	$$55.append_styles($$anchor, $$css$22);
+	const styleObj = $$55.mutable_state();
 	const style = $$55.mutable_state();
 	const imgStyle = $$55.mutable_state();
 	let props = $$55.prop($$props, "props", 24, () => ({}));
@@ -3507,20 +3558,36 @@ function Avatar($$anchor, $$props) {
 		square: { borderRadius: "0.25em" },
 		rounded: { borderRadius: "1em" }
 	} };
-	$$55.legacy_pre_effect(() => ($$55.deep_read_state(props()), toCssBorder), () => {
-		$$55.set(style, objToStyle({
+	const calcImgRadius = (parentRadius, borderWidth) => {
+		const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
+		if (radiusSize === 0) return 0;
+		if (parentRadius === "100%") return "100%";
+		return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
+	};
+	$$55.legacy_pre_effect(() => ($$55.deep_read_state(props()), toCssPadding), () => {
+		$$55.set(styleObj, {
 			...VARIANTS.shape[props().shape ?? "square"],
 			width: props().width ?? avatarSizeStyle.width,
 			height: props().height ?? avatarSizeStyle.height,
 			...toCssCommon(props()),
-			...toCssBorder(props())
-		}));
+			...toCssBorder(props()),
+			...toCssPadding(props())
+		});
 	});
-	$$55.legacy_pre_effect(() => objToStyle, () => {
+	$$55.legacy_pre_effect(() => $$55.get(styleObj), () => {
+		$$55.set(style, objToStyle($$55.get(styleObj)));
+	});
+	$$55.legacy_pre_effect(() => $$55.get(styleObj), () => {
 		$$55.set(imgStyle, objToStyle({
 			width: "100%",
 			height: "100%",
-			objectFit: "cover"
+			objectFit: "cover",
+			...toCssRadius({
+				borderTopLeftRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth),
+				borderTopRightRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth),
+				borderBottomLeftRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth),
+				borderBottomRightRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth)
+			})
 		}));
 	});
 	$$55.legacy_pre_effect_reset();
@@ -3534,7 +3601,7 @@ function Avatar($$anchor, $$props) {
 			class: "avatar",
 			style: $$55.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-3nxn6f"));
+		}, "svelte-1xhdr99"));
 		$$55.event("click", $$element, handleClick);
 		var img = root_1$8();
 		$$55.template_effect(() => {
@@ -4261,11 +4328,11 @@ function darkenColor(color, percent) {
 
 //#endregion
 //#region src/components-flex/button/Button.svelte
-var root_2$4 = $$22.template(`<div class="button-icon svelte-o2gomt"><!></div>`);
+var root_2$4 = $$22.template(`<div class="button-icon svelte-l0rauj"><!></div>`);
 var root_1$7 = $$22.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) {
 	$$22.push($$props, false);
@@ -4349,7 +4416,7 @@ function Button($$anchor, $$props) {
 			style: $$22.get(style),
 			"data-layer-id": layerId(),
 			"data-variant": variant
-		}, "svelte-o2gomt"));
+		}, "svelte-l0rauj"));
 		$$22.event("click", $$element, handleClick);
 		var fragment_1 = root_1$7();
 		var node_1 = $$22.first_child(fragment_1);
@@ -4478,11 +4545,11 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 
 //#endregion
 //#region src/components-flex/button-outlined/ButtonOutlined.svelte
-var root_2$3 = $$21.template(`<div class="button-outlined-icon svelte-38fju1"><!></div>`);
-var root_1$6 = $$21.template(`<!> <span class="button-outlined-label svelte-38fju1"> </span>`, 1);
+var root_2$3 = $$21.template(`<div class="button-outlined-icon svelte-z8gomx"><!></div>`);
+var root_1$6 = $$21.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) {
 	$$21.push($$props, false);
@@ -4533,7 +4600,7 @@ function ButtonOutlined($$anchor, $$props) {
 			class: "button-outlined",
 			style: $$21.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-38fju1"));
+		}, "svelte-z8gomx"));
 		$$21.event("click", $$element, handleClick);
 		var fragment_1 = root_1$6();
 		var node_1 = $$21.first_child(fragment_1);
@@ -4627,11 +4694,11 @@ const getButtonTextThemeStyles = getPropStyles(callback$2);
 
 //#endregion
 //#region src/components-flex/button-text/ButtonText.svelte
-var root_2$2 = $$20.template(`<div class="button-text-icon svelte-1xgvp8r"><!></div>`);
-var root_1$5 = $$20.template(`<!> <span class="button-text-label svelte-1xgvp8r"> </span>`, 1);
+var root_2$2 = $$20.template(`<div class="button-text-icon svelte-l90o4j"><!></div>`);
+var root_1$5 = $$20.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) {
 	$$20.push($$props, false);
@@ -4676,7 +4743,7 @@ function ButtonText($$anchor, $$props) {
 			class: "button-text",
 			style: $$20.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-1xgvp8r"));
+		}, "svelte-l90o4j"));
 		$$20.event("click", $$element, handleClick);
 		var fragment_1 = root_1$5();
 		var node_1 = $$20.first_child(fragment_1);
@@ -4728,25 +4795,43 @@ const BUTTON_TEXT_THEME = {
 	white: "White"
 };
 
+//#endregion
+//#region src/components-flex/text/styles.ts
+const callback$1 = ({ brandKit }) => ({
+	default: { color: brandKit.color_text_primary },
+	gray: { color: brandKit.color_text_secondary },
+	brand: { color: brandKit.color_brand },
+	success: { color: brandKit.color_success },
+	warning: { color: brandKit.color_warning },
+	danger: { color: brandKit.color_danger },
+	info: { color: brandKit.color_info },
+	white: { color: brandKit.color_white }
+});
+const getTextThemeStyles = getPropStyles(callback$1);
+
 //#endregion
 //#region src/components-flex/close-button/CloseButton.svelte
 var root_2$1 = $$19.template(`<span></span>`);
-var root_1$4 = $$19.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 = $$19.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-18wmfyq"><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-18wmfyq",
+	code: ".close-button.svelte-18wmfyq {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;flex-shrink:0;transition:background-color 0.12s,\n      border-color 0.12s,\n      color 0.12s;}.close-button.svelte-18wmfyq svg:where(.svelte-18wmfyq) {transition:transform 0.12s;}.close-button.svelte-18wmfyq:hover svg:where(.svelte-18wmfyq) {transform:rotate(90deg);}.close-button-order-one.svelte-18wmfyq {order:1;}.close-button-order-two.svelte-18wmfyq {order:2;}"
 };
 function CloseButton($$anchor, $$props) {
 	$$19.push($$props, false);
 	$$19.append_styles($$anchor, $$css$17);
 	const hasLabel = $$19.mutable_state();
+	const styleObj = $$19.mutable_state();
 	const style = $$19.mutable_state();
+	const borderWidth = $$19.mutable_state();
+	const paddingSize = $$19.mutable_state();
 	const labelStyle = $$19.mutable_state();
 	const iconStyle = $$19.mutable_state();
 	let props = $$19.prop($$props, "props", 24, () => ({}));
 	let layerId = $$19.prop($$props, "layerId", 8, "");
 	let eventName = $$19.prop($$props, "eventName", 8, "");
 	let eventValue = $$19.prop($$props, "eventValue", 8, void 0);
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
 	const { attributes, element, handleClick } = useClickable_default({
 		onClick: {
@@ -4782,34 +4867,54 @@ function CloseButton($$anchor, $$props) {
 		}
 	};
 	const size = props().size ?? 24;
-	const color = props().color ?? "#666";
+	const color = props().color ?? getTextThemeStyles(brandKit)[props().colorVariant]?.color ?? "#666";
 	const label = props().label;
 	const isLeftLabelPlacement = props().labelPlacement === "left";
 	$$19.legacy_pre_effect(() => {}, () => {
 		$$19.set(hasLabel, label !== void 0 && label !== "");
 	});
 	$$19.legacy_pre_effect(() => ($$19.deep_read_state(props()), toCssBorder), () => {
-		$$19.set(style, objToStyle({
-			...props().bordered && { border: "1px solid #666" },
-			height: `${size}px`,
-			boxSizing: "border-box",
+		$$19.set(styleObj, {
+			...props().bordered && {
+				borderTopWidth: "1px",
+				borderLeftWidth: "1px",
+				borderRightWidth: "1px",
+				borderBottomWidth: "1px",
+				borderStyle: "solid",
+				borderColor: "#666666"
+			},
 			padding: "6px",
-			backgroundColor: props().backgroundColor ?? "transparent",
+			boxSizing: "border-box",
+			backgroundColor: toCssBackground(props(), brandKit)?.backgroundColor ?? "rgba(255,255,255,0)",
 			...VARIANTS.round[props().round ?? "default"],
+			...toCssPadding(props()),
 			...toCssCommon(props()),
 			...toCssBorder(props())
-		}));
+		});
 	});
-	$$19.legacy_pre_effect(() => $$19.deep_read_state(props()), () => {
+	$$19.legacy_pre_effect(() => $$19.get(styleObj), () => {
+		$$19.set(style, objToStyle($$19.get(styleObj)));
+	});
+	$$19.legacy_pre_effect(() => $$19.get(styleObj), () => {
+		$$19.set(borderWidth, $$19.get(styleObj).borderTopWidth ? parseInt($$19.get(styleObj).borderTopWidth) : 0);
+	});
+	$$19.legacy_pre_effect(() => $$19.get(styleObj), () => {
+		$$19.set(paddingSize, $$19.get(styleObj).paddingTop ? parseInt($$19.get(styleObj).paddingTop) : 6);
+	});
+	$$19.legacy_pre_effect(() => ($$19.deep_read_state(props()), getTextThemeStyles), () => {
 		$$19.set(labelStyle, objToStyle({
-			color: props().labelColor ?? color,
+			color: props().labelColor ?? getTextThemeStyles(brandKit)[props().labelColorVariant]?.color ?? color,
 			fontSize: `${size / 2.1}px`
 		}));
 	});
-	$$19.legacy_pre_effect(() => objToStyle, () => {
+	$$19.legacy_pre_effect(() => ($$19.get(paddingSize), $$19.get(borderWidth)), () => {
 		$$19.set(iconStyle, objToStyle({
-			width: `${size - 12}px`,
-			height: `${size - 12}px`
+			width: `${size - $$19.get(paddingSize) * 2 - $$19.get(borderWidth) * 2}px`,
+			height: `${size - $$19.get(paddingSize) * 2 - $$19.get(borderWidth) * 2}px`,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0
 		}));
 	});
 	$$19.legacy_pre_effect_reset();
@@ -4823,7 +4928,7 @@ function CloseButton($$anchor, $$props) {
 			class: `close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`,
 			"data-layer-id": layerId(),
 			style: $$19.get(style)
-		}, "svelte-3mvsv6"));
+		}, "svelte-18wmfyq"));
 		$$19.event("click", $$element, handleClick);
 		var fragment_1 = root_1$4();
 		var span = $$19.first_child(fragment_1);
@@ -4834,7 +4939,7 @@ function CloseButton($$anchor, $$props) {
 		{
 			var consequent = ($$anchor$2) => {
 				var span_1 = root_2$1();
-				$$19.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-3mvsv6");
+				$$19.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-18wmfyq");
 				span_1.textContent = label;
 				$$19.template_effect(() => $$19.set_style(span_1, $$19.get(labelStyle)));
 				$$19.append($$anchor$2, span_1);
@@ -4911,16 +5016,16 @@ const IMAGE_ROUND_STYLES = {
 		borderBottomRightRadius: 0
 	},
 	rounded: {
-		borderTopLeftRadius: "0.4em",
-		borderTopRightRadius: "0.4em",
-		borderBottomLeftRadius: "0.4em",
-		borderBottomRightRadius: "0.4em"
+		borderTopLeftRadius: "8px",
+		borderTopRightRadius: "8px",
+		borderBottomLeftRadius: "8px",
+		borderBottomRightRadius: "8px"
 	},
 	circle: {
-		borderTopLeftRadius: "0.8em",
-		borderTopRightRadius: "0.8em",
-		borderBottomLeftRadius: "0.8em",
-		borderBottomRightRadius: "0.8em"
+		borderTopLeftRadius: "16px",
+		borderTopRightRadius: "16px",
+		borderBottomLeftRadius: "16px",
+		borderBottomRightRadius: "16px"
 	}
 };
 
@@ -4934,23 +5039,43 @@ const $$css$16 = {
 function Image($$anchor, $$props) {
 	$$18.push($$props, false);
 	$$18.append_styles($$anchor, $$css$16);
+	const styleObj = $$18.mutable_state();
 	const style = $$18.mutable_state();
+	const imgStyle = $$18.mutable_state();
 	let props = $$18.prop($$props, "props", 24, () => ({}));
 	let layerId = $$18.prop($$props, "layerId", 8, "");
 	useInjectCustomizeCss(props());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
 	const width = props().width ?? "100%";
-	$$18.legacy_pre_effect(() => ($$18.deep_read_state(props()), toCssBorder), () => {
-		$$18.set(style, objToStyle({
+	const calcImgRadius = (parentRadius, borderWidth) => {
+		const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
+		if (radiusSize === 0) return 0;
+		if (parentRadius === "100%") return "100%";
+		return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
+	};
+	$$18.legacy_pre_effect(() => ($$18.deep_read_state(props()), toCssPadding), () => {
+		$$18.set(styleObj, {
 			...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? "square"],
 			width,
 			flexShrink: String(width).indexOf("px") !== -1 ? 0 : 1,
 			height: props().height ?? "auto",
 			aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
 			...toCssCommon(props()),
-			...toCssBorder(props())
-		}));
+			...toCssBorder(props()),
+			...toCssPadding(props())
+		});
+	});
+	$$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
+		$$18.set(style, objToStyle($$18.get(styleObj)));
+	});
+	$$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
+		$$18.set(imgStyle, objToStyle({ ...toCssRadius({
+			borderTopLeftRadius: calcImgRadius($$18.get(styleObj).borderTopLeftRadius, $$18.get(styleObj).borderTopWidth),
+			borderTopRightRadius: calcImgRadius($$18.get(styleObj).borderTopRightRadius, $$18.get(styleObj).borderTopWidth),
+			borderBottomLeftRadius: calcImgRadius($$18.get(styleObj).borderBottomLeftRadius, $$18.get(styleObj).borderTopWidth),
+			borderBottomRightRadius: calcImgRadius($$18.get(styleObj).borderBottomRightRadius, $$18.get(styleObj).borderTopWidth)
+		}) }));
 	});
 	$$18.legacy_pre_effect_reset();
 	$$18.init();
@@ -4969,6 +5094,7 @@ function Image($$anchor, $$props) {
 		$$18.template_effect(() => {
 			$$18.set_attribute(img, "src", props().image);
 			$$18.set_attribute(img, "alt", props().alt);
+			$$18.set_style(img, $$18.get(imgStyle));
 		});
 		$$18.append($$anchor$1, img);
 	});
@@ -4999,8 +5125,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) {
 	$$17.push($$props, false);
@@ -5008,6 +5134,7 @@ function Layout($$anchor, $$props) {
 	const style = $$17.mutable_state();
 	let props = $$17.prop($$props, "props", 24, () => ({}));
 	let layerId = $$17.prop($$props, "layerId", 8, "");
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	$$17.legacy_pre_effect(() => ($$17.deep_read_state(props()), toCssBorder), () => {
@@ -5019,13 +5146,14 @@ function Layout($$anchor, $$props) {
 			rowGap: props().rowGap ?? props().gap,
 			columnGap: props().columnGap ?? props().gap,
 			width: props().width,
+			height: props().height,
 			...toCssOverflow(props()),
 			...toCssShadow(props()),
 			...toCssRadius(props()),
-			...toCssBackground(props()),
+			...toCssBackground(props(), brandKit),
 			...toCssCommon(props()),
 			...toCssPadding(props()),
-			...toCssBorder(props())
+			...toCssBorder(props(), brandKit)
 		}));
 	});
 	$$17.legacy_pre_effect_reset();
@@ -5039,7 +5167,7 @@ function Layout($$anchor, $$props) {
 			class: "layout",
 			style: $$17.get(style),
 			"data-layer-id": layerId()
-		}, "svelte-139vx15"));
+		}, "svelte-1o103hp"));
 		$$17.event("click", $$element, handleClick);
 		var fragment_1 = $$17.comment();
 		var node_1 = $$17.first_child(fragment_1);
@@ -5325,20 +5453,6 @@ function SliderItem($$anchor, $$props) {
 	$$15.pop();
 }
 
-//#endregion
-//#region src/components-flex/text/styles.ts
-const callback$1 = ({ brandKit }) => ({
-	default: { color: brandKit.color_text_primary },
-	gray: { color: brandKit.color_text_secondary },
-	brand: { color: brandKit.color_brand },
-	success: { color: brandKit.color_success },
-	warning: { color: brandKit.color_warning },
-	danger: { color: brandKit.color_danger },
-	info: { color: brandKit.color_info },
-	white: { color: brandKit.color_white }
-});
-const getTextThemeStyles = getPropStyles(callback$1);
-
 //#endregion
 //#region src/components-flex/text/constants.ts
 const TEXT_VARIANTS = { size: {
@@ -6112,11 +6226,9 @@ function List($$anchor, $$props) {
 	const style = $$7.mutable_state();
 	let layerId = $$7.prop($$props, "layerId", 8);
 	let props = $$7.prop($$props, "props", 8);
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
 	const vars = getVariables();
-	console.log(vars);
-	console.log(props().actionTableKey);
-	console.log(vars[props().actionTableKey]);
 	setContext(LIST_ITEM_CONTEXT_KEY, {
 		paddingTop: props().itemPaddingTop,
 		paddingLeft: props().itemPaddingLeft,
@@ -6124,8 +6236,8 @@ function List($$anchor, $$props) {
 		paddingBottom: props().itemPaddingBottom,
 		height: props().itemHeight,
 		borderTopWidth: props().borderWidth,
-		borderTopColor: props().borderColor,
-		borderTopStyle: props().borderStyle,
+		borderTopColor: props().borderColor ?? BORDER_COLOR_VARIANT[props().borderColorVariant]?.getProps(brandKit)?.borderColor,
+		borderTopStyle: "solid",
 		gap: props().itemGap
 	});
 	$$7.legacy_pre_effect(() => $$7.deep_read_state(props()), () => {
@@ -6197,6 +6309,7 @@ function MultiColumn($$anchor, $$props) {
 	const style = $$6.mutable_state();
 	let layerId = $$6.prop($$props, "layerId", 8);
 	let props = $$6.prop($$props, "props", 8);
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
 	let listGap = (() => {
 		if (!props().gap) return "0";
@@ -6214,8 +6327,8 @@ function MultiColumn($$anchor, $$props) {
 		paddingRight: props().itemPaddingRight,
 		paddingBottom: props().itemPaddingBottom,
 		borderLeftWidth: props().borderWidth,
-		borderLeftColor: props().borderColor,
-		borderLeftStyle: props().borderStyle,
+		borderLeftColor: props().borderColor ?? BORDER_COLOR_VARIANT[props().borderColorVariant]?.getProps(brandKit)?.borderColor,
+		borderLeftStyle: props().borderStyle ?? "solid",
 		gap: listGap,
 		innerGap: props().itemGap
 	});
@@ -6584,10 +6697,10 @@ function CountDownValue($$anchor, $$props) {
 
 //#endregion
 //#region src/components-flex/clip-copy/ClipCopy.svelte
-var root = $$1.template(`<div class="clipboard svelte-30zd8m"><button class="clipboard-button svelte-30zd8m"><!></button> <span class="clipboard-tooltip svelte-30zd8m">コピーしました</span></div>`);
+var root = $$1.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) {
 	$$1.push($$props, false);
@@ -6845,6 +6958,10 @@ __export(index_svelte5_exports, {
 	AVATAR_SIZE_STYLES: () => AVATAR_SIZE_STYLES,
 	Alignments: () => Alignments,
 	AnimationStyles: () => AnimationStyles,
+	BACKGROUND_COLOR_VARIANT: () => BACKGROUND_COLOR_VARIANT,
+	BACKGROUND_COLOR_VARIANTS: () => BACKGROUND_COLOR_VARIANTS,
+	BORDER_COLOR_VARIANT: () => BORDER_COLOR_VARIANT,
+	BORDER_COLOR_VARIANTS: () => BORDER_COLOR_VARIANTS,
 	BUTTON_ICON_ANGLE: () => BUTTON_ICON_ANGLE,
 	BUTTON_LINK_TARGET: () => BUTTON_LINK_TARGET,
 	BUTTON_OUTLINED_ROUND_STYLES: () => BUTTON_OUTLINED_ROUND_STYLES,

package/package.json

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