@plaidev/karte-action-sdk 1.1.260-28971692.91de26ce → 1.1.260-28976393.2b8b0962

package/dist/hydrate/index.es.js

@@ -1,5 +1,5 @@
 import { writable, get } from 'svelte/store';
-import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, setContext, getContext, createEventDispatcher } from 'svelte';
+import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, getContext, setContext, createEventDispatcher } from 'svelte';
 import { SvelteComponent, init, safe_not_equal, element, claim_element, children, detach, insert_hydration, noop, component_subscribe, attr, create_slot, create_component, space, claim_component, claim_space, mount_component, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, append_styles, empty, group_outros, check_outros, null_to_empty, listen, assign, set_attributes, toggle_class, get_spread_update, prevent_default, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, append_hydration, destroy_each, text, claim_text, set_data, src_url_equal, set_store_value, run_all, HtmlTagHydration, claim_html_tag, construct_svelte_component, subscribe, set_custom_element_data_map } from 'svelte/internal';
 import 'svelte/easing';
 
@@ -2950,6 +2950,38 @@ class Header extends SvelteComponent {
 	}
 }
 
+const BRAND_KIT_DEFAULT = {
+    font_family: 'sans-serif, serif, monospace, system-ui',
+    color_text_primary: '#222222',
+    color_text_secondary: '#555555',
+    color_brand: '#33403e',
+    color_link: '#1558d6',
+    color_danger: '#f44336',
+    color_warning: '#ffa726',
+    color_success: '#10b981',
+    color_info: '#29b6f6',
+    color_white: '#FFFFFF',
+};
+const getBrandKit = (customBrandKit) => {
+    return {
+        font_family: customBrandKit?.font_family ?? BRAND_KIT_DEFAULT.font_family,
+        color_text_primary: customBrandKit?.color_text_primary ?? BRAND_KIT_DEFAULT.color_text_primary,
+        color_text_secondary: customBrandKit?.color_text_secondary ?? BRAND_KIT_DEFAULT.color_text_secondary,
+        color_brand: customBrandKit?.color_brand ?? BRAND_KIT_DEFAULT.color_brand,
+        color_link: customBrandKit?.color_link ?? BRAND_KIT_DEFAULT.color_link,
+        color_danger: customBrandKit?.color_danger ?? BRAND_KIT_DEFAULT.color_danger,
+        color_warning: customBrandKit?.color_warning ?? BRAND_KIT_DEFAULT.color_warning,
+        color_success: customBrandKit?.color_success ?? BRAND_KIT_DEFAULT.color_success,
+        color_info: customBrandKit?.color_info ?? BRAND_KIT_DEFAULT.color_info,
+        color_white: customBrandKit?.color_white ?? BRAND_KIT_DEFAULT.color_white,
+    };
+};
+const useBrandKit = () => {
+    return {
+        brandKit: (getContext('brandKit') || getBrandKit()),
+    };
+};
+
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
 function create_fragment$1g(ctx) {
@@ -2957,8 +2989,8 @@ function create_fragment$1g(ctx) {
 	let t;
 	let current;
 	header = new Header({});
-	const default_slot_template = /*#slots*/ ctx[1].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[0], null);
+	const default_slot_template = /*#slots*/ ctx[2].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);
 
 	return {
 		c() {
@@ -2983,15 +3015,15 @@ function create_fragment$1g(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 1)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[0],
+						/*$$scope*/ ctx[1],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[0])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[0], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
 						null
 					);
 				}
@@ -3018,18 +3050,21 @@ function create_fragment$1g(ctx) {
 
 function instance$1g($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
+	let { customBrandKit = undefined } = $$props;
+	setContext('brandKit', getBrandKit(customBrandKit));
 
 	$$self.$$set = $$props => {
-		if ('$$scope' in $$props) $$invalidate(0, $$scope = $$props.$$scope);
+		if ('customBrandKit' in $$props) $$invalidate(0, customBrandKit = $$props.customBrandKit);
+		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
 	};
 
-	return [$$scope, slots];
+	return [customBrandKit, $$scope, slots];
 }
 
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$1g, create_fragment$1g, safe_not_equal, {});
+		init(this, options, instance$1g, create_fragment$1g, safe_not_equal, { customBrandKit: 0 });
 	}
 }
 
@@ -11941,6 +11976,23 @@ const ROUND_VARIANT = {
     fulled: 'Full (100%)',
 };
 
+const AVATAR_SIZE = {
+    extra_small: 'XS（48 x 48）',
+    small: 'S（64 x 64）',
+    medium: 'M（88 x 88）',
+    large: 'L（108 x 108）',
+    extra_large: 'XL（128 x 128）',
+};
+const AVATAR_SHAPE = {
+    circle: 'サークル',
+    square: 'スクエア',
+    rounded: 'ラウンド',
+};
+const avatarPropsDefault = {
+    size: 'medium',
+    shape: 'circle',
+};
+
 const toHyphenCase = (str) => {
     let result = str.replace(/_/g, '-');
     result = result.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -12106,13 +12158,36 @@ const useInjectCustomizeCss = (props) => {
     });
 };
 
+const AVATAR_SIZE_STYLES = {
+    extra_small: {
+        width: '48px',
+        height: '48px',
+    },
+    small: {
+        width: '64px',
+        height: '64px',
+    },
+    medium: {
+        width: '88px',
+        height: '88px',
+    },
+    large: {
+        width: '108px',
+        height: '108px',
+    },
+    extra_large: {
+        width: '128px',
+        height: '128px',
+    },
+};
+
 /* src/components-flex/avatar/Avatar.svelte generated by Svelte v3.53.1 */
 
 function add_css$d(target) {
-	append_styles(target, "svelte-1vk223g", ".avatar.svelte-1vk223g{display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}");
+	append_styles(target, "svelte-1krsdyx", ".avatar.svelte-1krsdyx{display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:0}");
 }
 
-// (35:0) <svelte:element   {...attributes}   this={element}   class="avatar"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (42:0) <svelte:element   {...attributes}   this={element}   class="avatar"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$8(ctx) {
 	let svelte_element;
 	let img;
@@ -12161,7 +12236,7 @@ function create_dynamic_element$8(ctx) {
 		},
 		h() {
 			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
-			attr(img, "class", "avatar-image svelte-1vk223g");
+			attr(img, "class", "avatar-image svelte-1krsdyx");
 			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
 			attr(img, "style", /*imgStyle*/ ctx[2]);
 
@@ -12171,7 +12246,7 @@ function create_dynamic_element$8(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1vk223g", true);
+			toggle_class(svelte_element, "svelte-1krsdyx", true);
 		},
 		m(target, anchor) {
 			insert_hydration(target, svelte_element, anchor);
@@ -12208,7 +12283,7 @@ function create_dynamic_element$8(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1vk223g", true);
+			toggle_class(svelte_element, "svelte-1krsdyx", true);
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element);
@@ -12274,15 +12349,21 @@ function instance$I($$self, $$props, $$invalidate) {
 	useInjectCustomizeCss(props);
 	const { attributes, element, handleClick } = useClickable(props);
 
+	const avatarSizeStyle = !isNaN(Number(props.size))
+	? {
+			width: `${props.size}px`,
+			height: `${props.size}px`
+		}
+	: AVATAR_SIZE_STYLES[props.size] || AVATAR_SIZE_STYLES[avatarPropsDefault.size];
+
 	const VARIANTS = {
 		shape: {
 			circle: { borderRadius: '100%' },
-			square: { borderRadius: '4px' }
+			square: { borderRadius: '0.25em' },
+			rounded: { borderRadius: '1em' }
 		}
 	};
 
-	const size = props.size ?? 64;
-
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
 		if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
@@ -12291,9 +12372,9 @@ function instance$I($$self, $$props, $$invalidate) {
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
 			$$invalidate(3, style = objToStyle({
-				width: `${size}px`,
-				height: `${size}px`,
 				...VARIANTS.shape[props.shape ?? 'square'],
+				width: props.width ?? avatarSizeStyle.width,
+				height: props.height ?? avatarSizeStyle.height,
 				...toCssCommon(props),
 				...toCssBorder(props)
 			}));
@@ -12316,18 +12397,6 @@ class Avatar extends SvelteComponent {
 	}
 }
 
-const AVATAR_SIZE = {
-    extra_small: 'XS（48 x 48）',
-    small: 'S（64 x 64）',
-    medium: 'M（88 x 88）',
-    large: 'L（108 x 108）',
-    extra_large: 'XL（128 x 128）',
-};
-const AVATAR_SHAPE = {
-    circle: 'サークル',
-    square: 'スクエア',
-};
-
 const BUTTON_SIZE = {
     extra_small: 'XSmall',
     small: 'Small',
@@ -14606,39 +14675,43 @@ class Icon extends SvelteComponent {
 	}
 }
 
-const BRAND_KIT = {
-    fontFamily: 'sans-serif, serif, monospace, system-ui',
-    colors: {
-        text_primary: {
-            main: '#222222',
-        },
-        text_secondary: {
-            main: '#555555',
-        },
-        brand: {
-            main: '#33403e',
-        },
-        link: {
-            main: '#1558d6',
-        },
-        danger: {
-            main: '#f44336',
-        },
-        warning: {
-            main: '#ffa726',
-        },
-        success: {
-            main: '#10b981',
-        },
-        info: {
-            main: '#29b6f6',
-        },
-        white: {
-            main: '#FFFFFF',
-        },
-    },
+const getPropStyles = (callback) => {
+    return (customBrandKit) => {
+        const brandKit = getBrandKit(customBrandKit);
+        return callback({ brandKit });
+    };
 };
 
+const getButtonThemeStyles = getPropStyles(({ brandKit }) => ({
+    default: {
+        backgroundColor: brandKit.color_brand,
+        color: '#FFFFFF',
+    },
+    general: {
+        backgroundColor: '#e8e8e8',
+        color: 'rgba(0, 16, 14, 0.7)',
+    },
+    success: {
+        backgroundColor: brandKit.color_success,
+        color: '#ffffff',
+    },
+    warning: {
+        backgroundColor: brandKit.color_warning,
+        color: '#ffffff',
+    },
+    danger: {
+        backgroundColor: brandKit.color_danger,
+        color: '#FFFFFF',
+    },
+    info: {
+        backgroundColor: brandKit.color_info,
+        color: '#FFFFFF',
+    },
+    white: {
+        backgroundColor: '#FFFFFF',
+        color: brandKit.color_text_primary,
+    },
+}));
 const BUTTON_SIZE_STYLES = {
     extra_small: {
         height: '32px',
@@ -14671,35 +14744,37 @@ const BUTTON_SIZE_STYLES = {
         fontSize: '16px',
     },
 };
-const BUTTON_THEME_STYLES = {
-    default: {
-        backgroundColor: BRAND_KIT.colors.brand.main,
-        color: '#FFFFFF',
-    },
-    general: {
-        backgroundColor: '#e8e8e8',
-        color: 'rgba(0, 16, 14, 0.7)',
-    },
-    success: {
-        backgroundColor: BRAND_KIT.colors.success.main,
-        color: '#ffffff',
-    },
-    warning: {
-        backgroundColor: BRAND_KIT.colors.warning.main,
-        color: '#ffffff',
-    },
-    danger: {
-        backgroundColor: BRAND_KIT.colors.danger.main,
-        color: '#FFFFFF',
-    },
-    info: {
-        backgroundColor: BRAND_KIT.colors.info.main,
-        color: '#FFFFFF',
-    },
-    white: {
-        backgroundColor: '#FFFFFF',
-        color: BRAND_KIT.colors.text_primary.main,
-    },
+const BUTTON_THEME_STYLES = () => {
+    return {
+        default: {
+            backgroundColor: getBrandKit().color_brand,
+            color: '#FFFFFF',
+        },
+        general: {
+            backgroundColor: '#e8e8e8',
+            color: 'rgba(0, 16, 14, 0.7)',
+        },
+        success: {
+            backgroundColor: getBrandKit().color_success,
+            color: '#ffffff',
+        },
+        warning: {
+            backgroundColor: getBrandKit().color_warning,
+            color: '#ffffff',
+        },
+        danger: {
+            backgroundColor: getBrandKit().color_danger,
+            color: '#FFFFFF',
+        },
+        info: {
+            backgroundColor: getBrandKit().color_info,
+            color: '#FFFFFF',
+        },
+        white: {
+            backgroundColor: '#FFFFFF',
+            color: getBrandKit().color_text_primary,
+        },
+    };
 };
 const BUTTON_ROUND_STYLES = {
     none: {
@@ -14773,7 +14848,7 @@ function add_css$b(target) {
 	append_styles(target, "svelte-1ix4ul", ".button.svelte-1ix4ul{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:var(--bg-color)}.button.svelte-1ix4ul:hover{background-color:var(--hover-bg-color)}.button-icon.svelte-1ix4ul{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
 
-// (49:2) {#if props.isIcon && props.iconVariant}
+// (52:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$6(ctx) {
 	let div;
 	let icon;
@@ -14839,7 +14914,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-// (41:0) <svelte:element   {...attributes}   this={element}   class="button"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (44:0) <svelte:element   {...attributes}   this={element}   class="button"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$6(ctx) {
 	let svelte_element;
 	let t0;
@@ -15030,7 +15105,9 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	useInjectCustomizeCss(props);
 	const { attributes, element, handleClick } = useClickable(props);
-	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme] || BUTTON_THEME_STYLES[buttonPropsDefault.theme];
+	const { brandKit } = useBrandKit();
+	const buttonThemeStyles = getButtonThemeStyles(brandKit);
+	const buttonThemeStyle = buttonThemeStyles[props.theme] || buttonThemeStyles[buttonPropsDefault.theme];
 	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size] || BUTTON_SIZE_STYLES[buttonPropsDefault.size];
 
 	$$self.$$set = $$props => {
@@ -15128,35 +15205,35 @@ const BUTTON_OUTLINED_SIZE_STYLES = {
         fontSize: '16px',
     },
 };
-const BUTTON_OUTLINED_THEME_STYLES = {
+const getButtonOutlinedThemeStyles = getPropStyles(({ brandKit }) => ({
     default: {
-        color: BRAND_KIT.colors.brand.main,
-        borderColor: BRAND_KIT.colors.brand.main,
+        color: brandKit.color_brand,
+        borderColor: brandKit.color_brand,
         backgroundColor: '#FFFFFF',
     },
     general: {
-        color: BRAND_KIT.colors.text_secondary.main,
-        borderColor: BRAND_KIT.colors.text_secondary.main,
+        color: brandKit.color_text_secondary,
+        borderColor: brandKit.color_text_secondary,
         backgroundColor: '#FFFFFF',
     },
     success: {
-        color: BRAND_KIT.colors.success.main,
-        borderColor: BRAND_KIT.colors.success.main,
+        color: brandKit.color_success,
+        borderColor: brandKit.color_success,
         backgroundColor: '#FFFFFF',
     },
     warning: {
-        color: BRAND_KIT.colors.warning.main,
-        borderColor: BRAND_KIT.colors.warning.main,
+        color: brandKit.color_warning,
+        borderColor: brandKit.color_warning,
         backgroundColor: '#FFFFFF',
     },
     danger: {
-        color: BRAND_KIT.colors.danger.main,
-        borderColor: BRAND_KIT.colors.danger.main,
+        color: brandKit.color_danger,
+        borderColor: brandKit.color_danger,
         backgroundColor: '#FFFFFF',
     },
     info: {
-        color: BRAND_KIT.colors.info.main,
-        borderColor: BRAND_KIT.colors.info.main,
+        color: brandKit.color_info,
+        borderColor: brandKit.color_info,
         backgroundColor: '#FFFFFF',
     },
     white: {
@@ -15164,7 +15241,7 @@ const BUTTON_OUTLINED_THEME_STYLES = {
         borderColor: '#FFFFFF',
         backgroundColor: '#000000',
     },
-};
+}));
 const BUTTON_OUTLINED_ROUND_STYLES = {
     none: {
         borderRadius: 0,
@@ -15191,7 +15268,7 @@ function add_css$a(target) {
 	append_styles(target, "svelte-38fju1", ".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}");
 }
 
-// (50:2) {#if props.isIcon && props.iconVariant}
+// (53:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$5(ctx) {
 	let div;
 	let icon;
@@ -15257,7 +15334,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (42:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (45:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$5(ctx) {
 	let svelte_element;
 	let t0;
@@ -15447,8 +15524,10 @@ function instance$a($$self, $$props, $$invalidate) {
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
 	useInjectCustomizeCss(props);
+	const { brandKit } = useBrandKit();
 	const { attributes, element, handleClick } = useClickable(props);
-	const buttonThemeStyle = BUTTON_OUTLINED_THEME_STYLES[props.theme ?? buttonOutlinedPropsDefault.theme];
+	const buttonThemeStyles = getButtonOutlinedThemeStyles(brandKit);
+	const buttonThemeStyle = buttonThemeStyles[props.theme ?? buttonOutlinedPropsDefault.theme];
 	const buttonSizeStyle = BUTTON_OUTLINED_SIZE_STYLES[props.size ?? buttonOutlinedPropsDefault.size];
 
 	$$self.$$set = $$props => {
@@ -15526,40 +15605,40 @@ const BUTTON_TEXT_SIZE_STYLES = {
         fontSize: '16px',
     },
 };
-const BUTTON_TEXT_THEME_STYLES = {
+const getButtonTextThemeStyles = getPropStyles(({ brandKit }) => ({
     default: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.brand.main,
+        color: brandKit.color_brand,
     },
     link: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.link.main,
+        color: brandKit.color_link,
     },
     general: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.text_primary.main,
+        color: brandKit.color_text_primary,
     },
     success: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.success.main,
+        color: brandKit.color_success,
     },
     warning: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.warning.main,
+        color: brandKit.color_warning,
     },
     danger: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.danger.main,
+        color: brandKit.color_danger,
     },
     info: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.info.main,
+        color: brandKit.color_info,
     },
     white: {
         backgroundColor: '#f3f4f6',
-        color: BRAND_KIT.colors.white.main,
+        color: brandKit.color_white,
     },
-};
+}));
 
 /* src/components-flex/button-text/ButtonText.svelte generated by Svelte v3.53.1 */
 
@@ -15567,7 +15646,7 @@ function add_css$9(target) {
 	append_styles(target, "svelte-1xgvp8r", ".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}");
 }
 
-// (46:2) {#if props.isIcon && props.iconVariant}
+// (49:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$4(ctx) {
 	let div;
 	let icon;
@@ -15633,7 +15712,7 @@ function create_if_block$4(ctx) {
 	};
 }
 
-// (38:0) <svelte:element   {...attributes}   this={element}   class="button-text"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (41:0) <svelte:element   {...attributes}   this={element}   class="button-text"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$4(ctx) {
 	let svelte_element;
 	let t0;
@@ -15823,8 +15902,10 @@ function instance$9($$self, $$props, $$invalidate) {
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
 	useInjectCustomizeCss(props);
+	const { brandKit } = useBrandKit();
 	const { attributes, element, handleClick } = useClickable(props);
-	const buttonThemeStyle = BUTTON_TEXT_THEME_STYLES[props.theme ?? 'default'];
+	const themeStyles = getButtonTextThemeStyles(brandKit);
+	const buttonThemeStyle = themeStyles[props.theme ?? 'default'];
 	const buttonSizeStyle = BUTTON_TEXT_SIZE_STYLES[props.size ?? 'medium'];
 
 	$$self.$$set = $$props => {
@@ -17166,32 +17247,32 @@ class Slider extends SvelteComponent {
 	}
 }
 
-const TEXT_THEME_STYLES = {
+const getTextThemeStyles = getPropStyles(({ brandKit }) => ({
     default: {
-        color: BRAND_KIT.colors.text_primary.main,
+        color: brandKit.color_text_primary,
     },
     gray: {
-        color: BRAND_KIT.colors.text_secondary.main,
+        color: brandKit.color_text_secondary,
     },
     brand: {
-        color: BRAND_KIT.colors.brand.main,
+        color: brandKit.color_brand,
     },
     success: {
-        color: BRAND_KIT.colors.success.main,
+        color: brandKit.color_success,
     },
     warning: {
-        color: BRAND_KIT.colors.warning.main,
+        color: brandKit.color_warning,
     },
     danger: {
-        color: BRAND_KIT.colors.danger.main,
+        color: brandKit.color_danger,
     },
     info: {
-        color: BRAND_KIT.colors.info.main,
+        color: brandKit.color_info,
     },
     white: {
-        color: BRAND_KIT.colors.white.main,
+        color: brandKit.color_white,
     },
-};
+}));
 
 const TEXT_VARIANTS = {
     size: {
@@ -17306,6 +17387,8 @@ function instance$4($$self, $$props, $$invalidate) {
 	let { props = { content: '' } } = $$props;
 	let { layerId = '' } = $$props;
 	useInjectCustomizeCss(props);
+	const { brandKit } = useBrandKit();
+	const themeStyles = getTextThemeStyles(brandKit);
 
 	if (props.fontFamily) {
 		addFont(props.fontFamily);
@@ -17313,7 +17396,7 @@ function instance$4($$self, $$props, $$invalidate) {
 
 	const getColor = () => {
 		if (props.color) return props.color;
-		if (props.theme) return TEXT_THEME_STYLES[props.theme].color;
+		if (props.theme) return themeStyles[props.theme].color;
 		return undefined;
 	};
 
@@ -17421,26 +17504,26 @@ const TEXT_LINK_SIZE_STYLES = {
         fontSize: '16px',
     },
 };
-const TEXT_LINK_THEME_STYLES = {
+const getTextLinkThemeStyles = getPropStyles(({ brandKit }) => ({
     default: {
-        color: BRAND_KIT.colors.text_primary.main,
+        color: brandKit.color_text_primary,
     },
     link: {
-        color: BRAND_KIT.colors.link.main,
+        color: brandKit.color_link,
     },
     brand: {
-        color: BRAND_KIT.colors.brand.main,
+        color: brandKit.color_brand,
     },
     alert: {
-        color: BRAND_KIT.colors.danger.main,
+        color: brandKit.color_danger,
     },
     gray: {
-        color: BRAND_KIT.colors.text_secondary.main,
+        color: brandKit.color_text_secondary,
     },
     white: {
-        color: BRAND_KIT.colors.white.main,
+        color: brandKit.color_white,
     },
-};
+}));
 
 /* src/components-flex/text-link/TextLink.svelte generated by Svelte v3.53.1 */
 
@@ -17448,7 +17531,7 @@ function add_css$3(target) {
 	append_styles(target, "svelte-1y4hh01", ".link.svelte-1y4hh01{-webkit-appearance:none;border:0;background:none;padding:0}.link.svelte-1y4hh01,.link.svelte-1y4hh01:visited,.link.svelte-1y4hh01:link{color:var(--color)}.link.svelte-1y4hh01:hover{color:var(--hover-color)}.link.svelte-1y4hh01:active{color:var(--active-color)}.link.underline-hover-on.svelte-1y4hh01{text-decoration:none}.link.underline-hover-on.svelte-1y4hh01:hover{text-decoration:underline}.link.underline-hover-off.svelte-1y4hh01{text-decoration:underline}.link.underline-hover-off.svelte-1y4hh01:hover{text-decoration:none}.link.underline-on.svelte-1y4hh01{text-decoration:underline}.link.underline-off.svelte-1y4hh01{text-decoration:none}");
 }
 
-// (69:2) {#if props.isIcon && props.iconVariant}
+// (71:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$2(ctx) {
 	let icon;
 	let current;
@@ -17502,7 +17585,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-// (61:0) <svelte:element   {...attributes}   this={element}   class={`link ${underlineClass}`}   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (63:0) <svelte:element   {...attributes}   this={element}   class={`link ${underlineClass}`}   style={style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element(ctx) {
 	let svelte_element;
 	let t;
@@ -17689,8 +17772,10 @@ function instance$3($$self, $$props, $$invalidate) {
 	let { props = { label: '' } } = $$props;
 	let { layerId = '' } = $$props;
 	useInjectCustomizeCss(props);
+	const { brandKit } = useBrandKit();
 	const { attributes, element, handleClick } = useClickable({ ...props, element: 'span' });
-	const themeStyle = TEXT_LINK_THEME_STYLES[props.theme ?? 'link'];
+	const themeStyles = getTextLinkThemeStyles(brandKit);
+	const themeStyle = themeStyles[props.theme ?? 'link'];
 	const sizeStyle = TEXT_LINK_SIZE_STYLES[props.size ?? 'medium'];
 
 	const underlineClass = (() => {
@@ -18684,4 +18769,4 @@ const ROUND_STYLES = {
     },
 };
 
-export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, Alignments, AnimationStyles, BRAND_KIT, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_THEME_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_TEXT_THEME_STYLES, BUTTON_THEME, BUTTON_THEME_STYLES, BUTTON_WRAP_STYLES, BackgroundSizes, Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, CloseButton as FlexCloseButton, Code as FlexCode, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, TextLink as FlexTextLink, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_STYLES, SHADOW_VARIANT, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_THEME_STYLES, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_THEME_STYLES, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, 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$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
+export { ACTION_HOOK_LABEL, 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_THEME_STYLES, BUTTON_WRAP_STYLES, BackgroundSizes, Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, CloseButton as FlexCloseButton, Code as FlexCode, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, TextLink as FlexTextLink, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_STYLES, SHADOW_VARIANT, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as 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$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget };