@plaidev/karte-action-sdk 1.1.268-29128731.e21f076b → 1.1.268-29132946.504b468b

package/dist/hydrate/index.es.js

@@ -12869,6 +12869,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
@@ -12885,11 +12931,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,
@@ -12905,16 +12952,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) => {
@@ -13175,6 +13225,7 @@ function create_fragment$58(ctx) {
 	};
 }
 function instance$58($$self, $$props, $$invalidate) {
+	let styleObj;
 	let style;
 	let imgStyle;
 	let { props = {} } = $$props;
@@ -13190,24 +13241,38 @@ function instance$58($$self, $$props, $$invalidate) {
 		square: { borderRadius: "0.25em" },
 		rounded: { borderRadius: "1em" }
 	} };
+	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;
+	};
 	$$self.$$set = ($$props$1) => {
 		if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
 		if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & 1) $: $$invalidate(3, style = objToStyle({
+		if ($$self.$$.dirty & 1) $: $$invalidate(7, styleObj = {
 			...VARIANTS.shape[props.shape ?? "square"],
 			width: props.width ?? avatarSizeStyle.width,
 			height: props.height ?? avatarSizeStyle.height,
 			...toCssCommon(props),
-			...toCssBorder(props)
+			...toCssBorder(props),
+			...toCssPadding(props)
+		});
+		if ($$self.$$.dirty & 128) $: $$invalidate(3, style = objToStyle(styleObj));
+		if ($$self.$$.dirty & 128) $: $$invalidate(2, imgStyle = objToStyle({
+			width: "100%",
+			height: "100%",
+			objectFit: "cover",
+			...toCssRadius({
+				borderTopLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
+				borderTopRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
+				borderBottomLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
+				borderBottomRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth)
+			})
 		}));
 	};
-	$: $$invalidate(2, imgStyle = objToStyle({
-		width: "100%",
-		height: "100%",
-		objectFit: "cover"
-	}));
 	return [
 		props,
 		layerId,
@@ -13215,7 +13280,8 @@ function instance$58($$self, $$props, $$invalidate) {
 		style,
 		attributes,
 		element$1,
-		handleClick
+		handleClick,
+		styleObj
 	];
 }
 var Avatar = class extends SvelteComponent {
@@ -17059,10 +17125,24 @@ 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
 function add_css$18(target) {
-	append_styles(target, "svelte-1xcn1yw", ".close-button.svelte-1xcn1yw.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.svelte-1xcn1yw{transition:transform 0.12s}.close-button.svelte-1xcn1yw:hover svg.svelte-1xcn1yw{transform:rotate(90deg)}.close-button-order-one.svelte-1xcn1yw.svelte-1xcn1yw{order:1}.close-button-order-two.svelte-1xcn1yw.svelte-1xcn1yw{order:2}");
+	append_styles(target, "svelte-18wmfyq", ".close-button.svelte-18wmfyq.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.svelte-18wmfyq{transition:transform 0.12s}.close-button.svelte-18wmfyq:hover svg.svelte-18wmfyq{transform:rotate(90deg)}.close-button-order-one.svelte-18wmfyq.svelte-18wmfyq{order:1}.close-button-order-two.svelte-18wmfyq.svelte-18wmfyq{order:2}");
 }
 function create_if_block$6(ctx) {
 	let span;
@@ -17098,7 +17178,7 @@ function create_if_block$6(ctx) {
 				/*labelStyle*/
 				ctx[2]
 );
-			attr(span, "class", span_class_value = "close-button-label " + (ctx[10] ? "close-button-order-one" : "") + " svelte-1xcn1yw");
+			attr(span, "class", span_class_value = "close-button-label " + (ctx[10] ? "close-button-order-one" : "") + " svelte-18wmfyq");
 		},
 		m(target, anchor) {
 			insert_hydration(target, span, anchor);
@@ -17186,7 +17266,7 @@ function create_dynamic_element$6(ctx) {
 				/*color*/
 				ctx[8]
 );
-			attr(svg, "class", "svelte-1xcn1yw");
+			attr(svg, "class", "svelte-18wmfyq");
 			attr(
 				span,
 				"style",
@@ -17198,7 +17278,7 @@ function create_dynamic_element$6(ctx) {
 				ctx[6]
 )) set_custom_element_data_map(svelte_element, svelte_element_data);
 			else set_attributes(svelte_element, svelte_element_data);
-			toggle_class(svelte_element, "svelte-1xcn1yw", true);
+			toggle_class(svelte_element, "svelte-18wmfyq", true);
 		},
 		m(target, anchor) {
 			insert_hydration(target, svelte_element, anchor);
@@ -17245,7 +17325,7 @@ function create_dynamic_element$6(ctx) {
 				ctx$1[6]
 )) set_custom_element_data_map(svelte_element, svelte_element_data);
 			else set_attributes(svelte_element, svelte_element_data);
-			toggle_class(svelte_element, "svelte-1xcn1yw", true);
+			toggle_class(svelte_element, "svelte-18wmfyq", true);
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element);
@@ -17303,13 +17383,17 @@ function create_fragment$22(ctx) {
 }
 function instance$22($$self, $$props, $$invalidate) {
 	let hasLabel;
+	let styleObj;
 	let style;
+	let borderWidth;
+	let paddingSize;
 	let labelStyle;
 	let iconStyle;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	let { eventName = "" } = $$props;
 	let { eventValue = void 0 } = $$props;
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props);
 	const { attributes, element: element$1, handleClick } = useClickable_default({
 		onClick: {
@@ -17345,7 +17429,7 @@ function instance$22($$self, $$props, $$invalidate) {
 		}
 	};
 	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";
 	$$self.$$set = ($$props$1) => {
@@ -17355,26 +17439,40 @@ function instance$22($$self, $$props, $$invalidate) {
 		if ("eventValue" in $$props$1) $$invalidate(13, eventValue = $$props$1.eventValue);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & 2048) $: $$invalidate(3, style = objToStyle({
-			...props.bordered && { border: "1px solid #666" },
-			height: `${size}px`,
-			boxSizing: "border-box",
+		if ($$self.$$.dirty & 2048) $: $$invalidate(16, 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)
-		}));
+		});
+		if ($$self.$$.dirty & 65536) $: $$invalidate(3, style = objToStyle(styleObj));
+		if ($$self.$$.dirty & 65536) $: $$invalidate(14, borderWidth = styleObj.borderTopWidth ? parseInt(styleObj.borderTopWidth) : 0);
+		if ($$self.$$.dirty & 65536) $: $$invalidate(15, paddingSize = styleObj.paddingTop ? parseInt(styleObj.paddingTop) : 6);
 		if ($$self.$$.dirty & 2048) $: $$invalidate(2, labelStyle = objToStyle({
-			color: props.labelColor ?? color,
+			color: props.labelColor ?? getTextThemeStyles(brandKit)[props.labelColorVariant]?.color ?? color,
 			fontSize: `${size / 2.1}px`
 		}));
+		if ($$self.$$.dirty & 49152) $: $$invalidate(1, iconStyle = objToStyle({
+			width: `${size - paddingSize * 2 - borderWidth * 2}px`,
+			height: `${size - paddingSize * 2 - borderWidth * 2}px`,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0
+		}));
 	};
 	$: $$invalidate(4, hasLabel = label !== void 0 && label !== "");
-	$: $$invalidate(1, iconStyle = objToStyle({
-		width: `${size - 12}px`,
-		height: `${size - 12}px`
-	}));
 	return [
 		layerId,
 		iconStyle,
@@ -17389,7 +17487,10 @@ function instance$22($$self, $$props, $$invalidate) {
 		isLeftLabelPlacement,
 		props,
 		eventName,
-		eventValue
+		eventValue,
+		borderWidth,
+		paddingSize,
+		styleObj
 	];
 }
 var CloseButton = class extends SvelteComponent {
@@ -17466,16 +17567,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"
 	}
 };
 
@@ -17492,9 +17593,9 @@ function create_dynamic_element$5(ctx) {
 	let mounted;
 	let dispose;
 	let svelte_element_levels = [
-		ctx[3],
+		ctx[4],
 		{ class: "image" },
-		{ style: ctx[2] },
+		{ style: ctx[3] },
 		{ "data-layer-id": ctx[1] }
 	];
 	let svelte_element_data = {};
@@ -17503,13 +17604,13 @@ function create_dynamic_element$5(ctx) {
 		c() {
 			svelte_element = element(
 				/*element*/
-				ctx[4]
+				ctx[5]
 );
 			img = element("img");
 			this.h();
 		},
 		l(nodes) {
-			svelte_element = claim_element(nodes, (ctx[4] || "null").toUpperCase(), {
+			svelte_element = claim_element(nodes, (ctx[5] || "null").toUpperCase(), {
 				class: true,
 				style: true,
 				"data-layer-id": true
@@ -17518,6 +17619,7 @@ function create_dynamic_element$5(ctx) {
 			img = claim_element(svelte_element_nodes, "IMG", {
 				src: true,
 				alt: true,
+				style: true,
 				class: true
 			});
 			svelte_element_nodes.forEach(detach);
@@ -17526,10 +17628,16 @@ function create_dynamic_element$5(ctx) {
 		h() {
 			if (!src_url_equal(img.src, img_src_value = ctx[0].image)) attr(img, "src", img_src_value);
 			attr(img, "alt", img_alt_value = ctx[0].alt);
+			attr(
+				img,
+				"style",
+				/*imgStyle*/
+				ctx[2]
+);
 			attr(img, "class", "image-img svelte-1olvu11");
 			if (/-/.test(
 				/*element*/
-				ctx[4]
+				ctx[5]
 )) set_custom_element_data_map(svelte_element, svelte_element_data);
 			else set_attributes(svelte_element, svelte_element_data);
 			toggle_class(svelte_element, "svelte-1olvu11", true);
@@ -17542,7 +17650,7 @@ function create_dynamic_element$5(ctx) {
 					svelte_element,
 					"click",
 					/*handleClick*/
-					ctx[5]
+					ctx[6]
 );
 				mounted = true;
 			}
@@ -17550,15 +17658,21 @@ function create_dynamic_element$5(ctx) {
 		p(ctx$1, dirty) {
 			if (dirty & 1 && !src_url_equal(img.src, img_src_value = ctx$1[0].image)) attr(img, "src", img_src_value);
 			if (dirty & 1 && img_alt_value !== (img_alt_value = ctx$1[0].alt)) attr(img, "alt", img_alt_value);
+			if (dirty & 4) attr(
+				img,
+				"style",
+				/*imgStyle*/
+				ctx$1[2]
+);
 			svelte_element_data = get_spread_update(svelte_element_levels, [
-				ctx$1[3],
+				ctx$1[4],
 				{ class: "image" },
-				dirty & 4 && { style: ctx$1[2] },
+				dirty & 8 && { style: ctx$1[3] },
 				dirty & 2 && { "data-layer-id": ctx$1[1] }
 			]);
 			if (/-/.test(
 				/*element*/
-				ctx$1[4]
+				ctx$1[5]
 )) set_custom_element_data_map(svelte_element, svelte_element_data);
 			else set_attributes(svelte_element, svelte_element_data);
 			toggle_class(svelte_element, "svelte-1olvu11", true);
@@ -17571,9 +17685,9 @@ function create_dynamic_element$5(ctx) {
 	};
 }
 function create_fragment$21(ctx) {
-	let previous_tag = ctx[4];
+	let previous_tag = ctx[5];
 	let svelte_element_anchor;
-	let svelte_element = ctx[4] && create_dynamic_element$5(ctx);
+	let svelte_element = ctx[5] && create_dynamic_element$5(ctx);
 	return {
 		c() {
 			if (svelte_element) svelte_element.c();
@@ -17588,14 +17702,14 @@ function create_fragment$21(ctx) {
 			insert_hydration(target, svelte_element_anchor, anchor);
 		},
 		p(ctx$1, [dirty]) {
-			if (ctx$1[4]) if (!previous_tag) {
+			if (ctx$1[5]) if (!previous_tag) {
 				svelte_element = create_dynamic_element$5(ctx$1);
 				svelte_element.c();
 				svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
 			} else if (safe_not_equal(
 				previous_tag,
 				/*element*/
-				ctx$1[4]
+				ctx$1[5]
 )) {
 				svelte_element.d(1);
 				svelte_element = create_dynamic_element$5(ctx$1);
@@ -17606,7 +17720,7 @@ function create_fragment$21(ctx) {
 				svelte_element.d(1);
 				svelte_element = null;
 			}
-			previous_tag = ctx$1[4];
+			previous_tag = ctx$1[5];
 		},
 		i: noop,
 		o: noop,
@@ -17617,35 +17731,53 @@ function create_fragment$21(ctx) {
 	};
 }
 function instance$21($$self, $$props, $$invalidate) {
+	let styleObj;
 	let style;
+	let imgStyle;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
 	useInjectCustomizeCss(props);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	const aspectVariantStyles = ASPECT_VARIANT[props.aspectVariant]?.getProps();
 	const width = props.width ?? "100%";
+	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;
+	};
 	$$self.$$set = ($$props$1) => {
 		if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
 		if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & 1) $: $$invalidate(2, style = objToStyle({
+		if ($$self.$$.dirty & 1) $: $$invalidate(7, 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)
+		});
+		if ($$self.$$.dirty & 128) $: $$invalidate(3, style = objToStyle(styleObj));
+		if ($$self.$$.dirty & 128) $: $$invalidate(2, imgStyle = objToStyle({ ...toCssRadius({
+			borderTopLeftRadius: calcImgRadius(styleObj.borderTopLeftRadius, styleObj.borderTopWidth),
+			borderTopRightRadius: calcImgRadius(styleObj.borderTopRightRadius, styleObj.borderTopWidth),
+			borderBottomLeftRadius: calcImgRadius(styleObj.borderBottomLeftRadius, styleObj.borderTopWidth),
+			borderBottomRightRadius: calcImgRadius(styleObj.borderBottomRightRadius, styleObj.borderTopWidth)
+		}) }));
 	};
 	return [
 		props,
 		layerId,
+		imgStyle,
 		style,
 		attributes,
 		element$1,
-		handleClick
+		handleClick,
+		styleObj
 	];
 }
 var Image = class extends SvelteComponent {
@@ -17841,6 +17973,7 @@ function instance$20($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = "" } = $$props;
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props);
 	const { attributes, element: element$1, handleClick } = useClickable_default(props);
 	$$self.$$set = ($$props$1) => {
@@ -17857,13 +17990,14 @@ function instance$20($$self, $$props, $$invalidate) {
 			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)
 		}));
 	};
 	return [
@@ -18579,20 +18713,6 @@ var SliderItem = class extends SvelteComponent {
 };
 var SliderItem_default = SliderItem;
 
-//#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: {
@@ -20136,11 +20256,9 @@ function instance$11($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { layerId } = $$props;
 	let { props } = $$props;
+	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,
@@ -20148,8 +20266,8 @@ function instance$11($$self, $$props, $$invalidate) {
 		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
 	});
 	$$self.$$set = ($$props$1) => {
@@ -20585,6 +20703,7 @@ function instance$9($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { layerId } = $$props;
 	let { props } = $$props;
+	const { brandKit } = useBrandKit();
 	useInjectCustomizeCss(props);
 	let listGap = (() => {
 		if (!props.gap) return "0";
@@ -20602,8 +20721,8 @@ function instance$9($$self, $$props, $$invalidate) {
 		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
 	});
@@ -22180,6 +22299,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,
@@ -22680,4 +22803,4 @@ var ThumbnailPreview = class extends SvelteComponent {
 var ThumbnailPreview_default = ThumbnailPreview;
 
 //#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, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, 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, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, 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 };