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

package/dist/svelte5/index.es.js

@@ -3163,6 +3163,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
@@ -3179,11 +3225,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,
@@ -3199,16 +3246,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) => {
@@ -3483,14 +3533,15 @@ 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);
 	$$54.append_styles($$anchor, $$css$22);
+	const styleObj = $$54.mutable_state();
 	const style = $$54.mutable_state();
 	const imgStyle = $$54.mutable_state();
 	let props = $$54.prop($$props, "props", 24, () => ({}));
@@ -3506,20 +3557,36 @@ function Avatar($$anchor, $$props) {
 		square: { borderRadius: "0.25em" },
 		rounded: { borderRadius: "1em" }
 	} };
-	$$54.legacy_pre_effect(() => ($$54.deep_read_state(props()), toCssBorder), () => {
-		$$54.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;
+	};
+	$$54.legacy_pre_effect(() => ($$54.deep_read_state(props()), toCssPadding), () => {
+		$$54.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())
+		});
 	});
-	$$54.legacy_pre_effect(() => objToStyle, () => {
+	$$54.legacy_pre_effect(() => $$54.get(styleObj), () => {
+		$$54.set(style, objToStyle($$54.get(styleObj)));
+	});
+	$$54.legacy_pre_effect(() => $$54.get(styleObj), () => {
 		$$54.set(imgStyle, objToStyle({
 			width: "100%",
 			height: "100%",
-			objectFit: "cover"
+			objectFit: "cover",
+			...toCssRadius({
+				borderTopLeftRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth),
+				borderTopRightRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth),
+				borderBottomLeftRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth),
+				borderBottomRightRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth)
+			})
 		}));
 	});
 	$$54.legacy_pre_effect_reset();
@@ -3533,7 +3600,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(() => {
@@ -4260,11 +4327,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);
@@ -4348,7 +4415,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);
@@ -4477,11 +4544,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);
@@ -4532,7 +4599,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);
@@ -4626,11 +4693,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);
@@ -4675,7 +4742,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);
@@ -4727,25 +4794,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 = $$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-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) {
 	$$18.push($$props, false);
 	$$18.append_styles($$anchor, $$css$17);
 	const hasLabel = $$18.mutable_state();
+	const styleObj = $$18.mutable_state();
 	const style = $$18.mutable_state();
+	const borderWidth = $$18.mutable_state();
+	const paddingSize = $$18.mutable_state();
 	const labelStyle = $$18.mutable_state();
 	const iconStyle = $$18.mutable_state();
 	let props = $$18.prop($$props, "props", 24, () => ({}));
 	let layerId = $$18.prop($$props, "layerId", 8, "");
 	let eventName = $$18.prop($$props, "eventName", 8, "");
 	let eventValue = $$18.prop($$props, "eventValue", 8, void 0);
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
 	const { attributes, element, handleClick } = useClickable_default({
 		onClick: {
@@ -4781,34 +4866,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";
 	$$18.legacy_pre_effect(() => {}, () => {
 		$$18.set(hasLabel, label !== void 0 && label !== "");
 	});
 	$$18.legacy_pre_effect(() => ($$18.deep_read_state(props()), toCssBorder), () => {
-		$$18.set(style, objToStyle({
-			...props().bordered && { border: "1px solid #666" },
-			height: `${size}px`,
-			boxSizing: "border-box",
+		$$18.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())
-		}));
+		});
 	});
-	$$18.legacy_pre_effect(() => $$18.deep_read_state(props()), () => {
+	$$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
+		$$18.set(style, objToStyle($$18.get(styleObj)));
+	});
+	$$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
+		$$18.set(borderWidth, $$18.get(styleObj).borderTopWidth ? parseInt($$18.get(styleObj).borderTopWidth) : 0);
+	});
+	$$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
+		$$18.set(paddingSize, $$18.get(styleObj).paddingTop ? parseInt($$18.get(styleObj).paddingTop) : 6);
+	});
+	$$18.legacy_pre_effect(() => ($$18.deep_read_state(props()), getTextThemeStyles), () => {
 		$$18.set(labelStyle, objToStyle({
-			color: props().labelColor ?? color,
+			color: props().labelColor ?? getTextThemeStyles(brandKit)[props().labelColorVariant]?.color ?? color,
 			fontSize: `${size / 2.1}px`
 		}));
 	});
-	$$18.legacy_pre_effect(() => objToStyle, () => {
+	$$18.legacy_pre_effect(() => ($$18.get(paddingSize), $$18.get(borderWidth)), () => {
 		$$18.set(iconStyle, objToStyle({
-			width: `${size - 12}px`,
-			height: `${size - 12}px`
+			width: `${size - $$18.get(paddingSize) * 2 - $$18.get(borderWidth) * 2}px`,
+			height: `${size - $$18.get(paddingSize) * 2 - $$18.get(borderWidth) * 2}px`,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0
 		}));
 	});
 	$$18.legacy_pre_effect_reset();
@@ -4822,7 +4927,7 @@ function CloseButton($$anchor, $$props) {
 			class: `close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`,
 			"data-layer-id": layerId(),
 			style: $$18.get(style)
-		}, "svelte-3mvsv6"));
+		}, "svelte-18wmfyq"));
 		$$18.event("click", $$element, handleClick);
 		var fragment_1 = root_1$4();
 		var span = $$18.first_child(fragment_1);
@@ -4833,7 +4938,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-18wmfyq");
 				span_1.textContent = label;
 				$$18.template_effect(() => $$18.set_style(span_1, $$18.get(labelStyle)));
 				$$18.append($$anchor$2, span_1);
@@ -4910,16 +5015,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"
 	}
 };
 
@@ -4933,23 +5038,43 @@ const $$css$16 = {
 function Image($$anchor, $$props) {
 	$$17.push($$props, false);
 	$$17.append_styles($$anchor, $$css$16);
+	const styleObj = $$17.mutable_state();
 	const style = $$17.mutable_state();
+	const imgStyle = $$17.mutable_state();
 	let props = $$17.prop($$props, "props", 24, () => ({}));
 	let layerId = $$17.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%";
-	$$17.legacy_pre_effect(() => ($$17.deep_read_state(props()), toCssBorder), () => {
-		$$17.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;
+	};
+	$$17.legacy_pre_effect(() => ($$17.deep_read_state(props()), toCssPadding), () => {
+		$$17.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())
+		});
+	});
+	$$17.legacy_pre_effect(() => $$17.get(styleObj), () => {
+		$$17.set(style, objToStyle($$17.get(styleObj)));
+	});
+	$$17.legacy_pre_effect(() => $$17.get(styleObj), () => {
+		$$17.set(imgStyle, objToStyle({ ...toCssRadius({
+			borderTopLeftRadius: calcImgRadius($$17.get(styleObj).borderTopLeftRadius, $$17.get(styleObj).borderTopWidth),
+			borderTopRightRadius: calcImgRadius($$17.get(styleObj).borderTopRightRadius, $$17.get(styleObj).borderTopWidth),
+			borderBottomLeftRadius: calcImgRadius($$17.get(styleObj).borderBottomLeftRadius, $$17.get(styleObj).borderTopWidth),
+			borderBottomRightRadius: calcImgRadius($$17.get(styleObj).borderBottomRightRadius, $$17.get(styleObj).borderTopWidth)
+		}) }));
 	});
 	$$17.legacy_pre_effect_reset();
 	$$17.init();
@@ -4968,6 +5093,7 @@ function Image($$anchor, $$props) {
 		$$17.template_effect(() => {
 			$$17.set_attribute(img, "src", props().image);
 			$$17.set_attribute(img, "alt", props().alt);
+			$$17.set_style(img, $$17.get(imgStyle));
 		});
 		$$17.append($$anchor$1, img);
 	});
@@ -4998,8 +5124,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);
@@ -5007,6 +5133,7 @@ function Layout($$anchor, $$props) {
 	const style = $$16.mutable_state();
 	let props = $$16.prop($$props, "props", 24, () => ({}));
 	let layerId = $$16.prop($$props, "layerId", 8, "");
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
 	const { attributes, element, handleClick } = useClickable_default(props());
 	$$16.legacy_pre_effect(() => ($$16.deep_read_state(props()), toCssBorder), () => {
@@ -5018,13 +5145,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)
 		}));
 	});
 	$$16.legacy_pre_effect_reset();
@@ -5038,7 +5166,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);
@@ -5324,20 +5452,6 @@ function SliderItem($$anchor, $$props) {
 	$$14.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: {
@@ -6111,11 +6225,9 @@ function List($$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());
 	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,
@@ -6123,8 +6235,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
 	});
 	$$6.legacy_pre_effect(() => $$6.deep_read_state(props()), () => {
@@ -6196,6 +6308,7 @@ function MultiColumn($$anchor, $$props) {
 	const style = $$5.mutable_state();
 	let layerId = $$5.prop($$props, "layerId", 8);
 	let props = $$5.prop($$props, "props", 8);
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props());
 	let listGap = (() => {
 		if (!props().gap) return "0";
@@ -6213,8 +6326,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
 	});
@@ -6583,10 +6696,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);
@@ -6833,4 +6946,4 @@ const flexComponentSchemes = {
 };
 
 //#endregion
-export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };