@plaidev/karte-action-sdk 1.1.256-28876509.00a83155 → 1.1.256-28896802.16eb7121

package/dist/hydrate/index.es.d.ts

@@ -2343,10 +2343,7 @@ declare const afterUpdate: typeof afterUpdateSvelte;
 declare const tick: typeof tickSvelte;
 // @internal
 declare const LAYOUT_COMPONENT_NAMES: string[];
-type PropStyles<Props extends Record<string, any>, K extends keyof Props> = Record<NonNullable<Props[K]>, Properties & Partial<{
-    hover: Properties;
-    active: Properties;
-}>>;
+type PropStyles<Props extends Record<string, any>, K extends keyof Props> = Record<NonNullable<Props[K]>, Properties>;
 declare const SHADOW_VARIANT: {
     readonly extra_small: "XSmall";
     readonly small: "Small";
@@ -2393,13 +2390,13 @@ declare const BUTTON_ICON_ANGLE: {
 type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & BorderProps & {
     label?: string;
     // size
-    size?: keyof typeof BUTTON_SIZE;
+    size?: keyof typeof BUTTON_SIZE | string;
     height?: Properties["height"];
     paddingLeft?: Properties["paddingLeft"];
     paddingRight?: Properties["paddingRight"];
     fontSize?: Properties["fontSize"];
     // theme
-    theme?: keyof typeof BUTTON_THEME;
+    theme?: keyof typeof BUTTON_THEME | string;
     color?: Properties["color"];
     backgroundColor?: Properties["backgroundColor"];
     // others
@@ -2656,6 +2653,7 @@ type IconProps = CommonProps & ClickableProps & {
     width?: Properties$0["width"];
     height?: Properties$0["height"];
 };
+declare const ICON_SIZE_STYLES: PropStyles<IconProps, "size">;
 type ImageProps = CommonProps & {
     image?: string;
     width?: Properties["width"];
@@ -2733,7 +2731,7 @@ declare const TEXT_STYLE: {
     readonly normal: "normal";
     readonly italic: "italic";
 };
-type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & PaddingProps & {
+type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & CustomizeCssProps & PaddingProps & {
     content: string;
     theme?: keyof typeof TEXT_THEME;
     size?: keyof typeof LAYER_TEXT_SIZE;
@@ -2861,7 +2859,7 @@ type BrandKit = {
 declare const BRAND_KIT: BrandKit;
 declare const SHADOW_STYLES: Record<keyof typeof SHADOW_VARIANT, Properties>;
 declare const ROUND_STYLES: Record<keyof typeof ROUND_VARIANT, Pick<Properties, "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius">>;
-export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, PropStyles, SHADOW_VARIANT, ROUND_VARIANT, PositionProps, MetaProps, CustomizeCssProps, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, WithIconProps, LinkProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE, BUTTON_THEME, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, buttonPropsDefault, BUTTON_SIZE_STYLES, BUTTON_THEME_STYLES, BUTTON_ROUND_STYLES, BUTTON_WRAP_STYLES, ButtonOutlinedProps, buttonOutlinedPropsDefault, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_THEME_STYLES, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_THEME, ButtonTextProps, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME_STYLES, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, CLOSE_BUTTON_LABEL_PLACEMENT, CloseButtonProps, ICON_SIZE, ICON_VARIANTS, IconProps, ImageProps, LAYOUT_DISPLAY_TYPE, LayoutDisplayType, LAYOUT_DIRECTION, LayoutFlexDirection, LAYOUT_ALIGN, LayoutFlexAlign, LAYOUT_JUSTIFY, LayoutFlexJustify, LayerLayoutProps, SliderProps, LAYER_TEXT_SIZE, TEXT_THEME, TEXT_STYLE, LayerTextProps, TEXT_THEME_STYLES, TEXT_VARIANTS, TEXT_LINK_SIZE, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TextLinkProps, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME_STYLES, CodeProps, BrandKitColor, BrandKitColors, BrandKit, BRAND_KIT, SHADOW_STYLES, ROUND_STYLES };
+export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, PropStyles, SHADOW_VARIANT, ROUND_VARIANT, PositionProps, MetaProps, CustomizeCssProps, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, WithIconProps, LinkProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE, BUTTON_THEME, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, buttonPropsDefault, BUTTON_SIZE_STYLES, BUTTON_THEME_STYLES, BUTTON_ROUND_STYLES, BUTTON_WRAP_STYLES, ButtonOutlinedProps, buttonOutlinedPropsDefault, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_THEME_STYLES, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_THEME, ButtonTextProps, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME_STYLES, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, CLOSE_BUTTON_LABEL_PLACEMENT, CloseButtonProps, ICON_SIZE, ICON_VARIANTS, IconProps, ICON_SIZE_STYLES, ImageProps, LAYOUT_DISPLAY_TYPE, LayoutDisplayType, LAYOUT_DIRECTION, LayoutFlexDirection, LAYOUT_ALIGN, LayoutFlexAlign, LAYOUT_JUSTIFY, LayoutFlexJustify, LayerLayoutProps, SliderProps, LAYER_TEXT_SIZE, TEXT_THEME, TEXT_STYLE, LayerTextProps, TEXT_THEME_STYLES, TEXT_VARIANTS, TEXT_LINK_SIZE, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TextLinkProps, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME_STYLES, CodeProps, BrandKitColor, BrandKitColors, BrandKit, BRAND_KIT, SHADOW_STYLES, ROUND_STYLES };
 export type { SystemConfig, ActionVariables, ActionEventHandler, ActionProps, ActionOptions, ActionHook, ActionHookLog, ActionChangeStateHook, SendFunction, PublishFunction, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionCloseHook, ShowTrigger, CloseTrigger, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';

package/dist/hydrate/index.es.js

@@ -15021,8 +15021,8 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	useInjectCustomizeCss(props);
 	const { attributes, element, handleClick } = useClickable(props);
-	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
-	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size];
+	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme] || BUTTON_THEME_STYLES[buttonPropsDefault.theme];
+	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size] || BUTTON_SIZE_STYLES[buttonPropsDefault.size];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -15121,32 +15121,39 @@ const BUTTON_OUTLINED_SIZE_STYLES = {
 };
 const BUTTON_OUTLINED_THEME_STYLES = {
     default: {
-        backgroundColor: BRAND_KIT.colors.brand.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.brand.main,
+        borderColor: BRAND_KIT.colors.brand.main,
+        backgroundColor: '#FFFFFF',
     },
     general: {
-        backgroundColor: BRAND_KIT.colors.text_secondary.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.text_secondary.main,
+        borderColor: BRAND_KIT.colors.text_secondary.main,
+        backgroundColor: '#FFFFFF',
     },
     success: {
-        backgroundColor: BRAND_KIT.colors.success.main,
-        color: '#ffffff',
+        color: BRAND_KIT.colors.success.main,
+        borderColor: BRAND_KIT.colors.success.main,
+        backgroundColor: '#FFFFFF',
     },
     warning: {
-        backgroundColor: BRAND_KIT.colors.warning.main,
-        color: '#ffffff',
+        color: BRAND_KIT.colors.warning.main,
+        borderColor: BRAND_KIT.colors.warning.main,
+        backgroundColor: '#FFFFFF',
     },
     danger: {
-        backgroundColor: BRAND_KIT.colors.danger.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.danger.main,
+        borderColor: BRAND_KIT.colors.danger.main,
+        backgroundColor: '#FFFFFF',
     },
     info: {
-        backgroundColor: BRAND_KIT.colors.info.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.info.main,
+        borderColor: BRAND_KIT.colors.info.main,
+        backgroundColor: '#FFFFFF',
     },
     white: {
-        backgroundColor: '#FFFFFF',
-        color: BRAND_KIT.colors.text_primary.main,
+        color: '#FFFFFF',
+        borderColor: '#FFFFFF',
+        backgroundColor: '#000000',
     },
 };
 const BUTTON_OUTLINED_ROUND_STYLES = {
@@ -15172,10 +15179,10 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 /* src/components-flex/button-outlined/ButtonOutlined.svelte generated by Svelte v3.53.1 */
 
 function add_css$a(target) {
-	append_styles(target, "svelte-b990ec", ".button-outlined.svelte-b990ec{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:#ffffff}.button-outlined.svelte-b990ec:hover{background-color:#f6f6f6}.button-outlined-icon.svelte-b990ec{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
+	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}");
 }
 
-// (44:2) {#if props.isIcon && props.iconVariant}
+// (50:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$5(ctx) {
 	let div;
 	let icon;
@@ -15206,7 +15213,7 @@ function create_if_block$5(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "button-outlined-icon svelte-b990ec");
+			attr(div, "class", "button-outlined-icon svelte-38fju1");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -15241,7 +15248,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (36:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (42: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;
@@ -15293,7 +15300,7 @@ function create_dynamic_element$5(ctx) {
 			this.h();
 		},
 		h() {
-			attr(span, "class", "button-outlined-label svelte-b990ec");
+			attr(span, "class", "button-outlined-label svelte-38fju1");
 
 			if ((/-/).test(/*element*/ ctx[4])) {
 				set_custom_element_data_map(svelte_element, svelte_element_data);
@@ -15301,7 +15308,7 @@ function create_dynamic_element$5(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-b990ec", true);
+			toggle_class(svelte_element, "svelte-38fju1", true);
 		},
 		m(target, anchor) {
 			insert_hydration(target, svelte_element, anchor);
@@ -15355,7 +15362,7 @@ function create_dynamic_element$5(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-b990ec", true);
+			toggle_class(svelte_element, "svelte-38fju1", true);
 		},
 		i(local) {
 			if (current) return;
@@ -15426,6 +15433,7 @@ function create_fragment$a(ctx) {
 }
 
 function instance$a($$self, $$props, $$invalidate) {
+	let variables;
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
@@ -15441,10 +15449,17 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
+			$$invalidate(7, variables = {
+				'--bg-color': props.backgroundColor ?? buttonThemeStyle.backgroundColor,
+				'--hover-bg-color': darkenColor(props.backgroundColor ?? buttonThemeStyle.backgroundColor, 0.032)
+			});
+		}
+
+		if ($$self.$$.dirty & /*props, variables*/ 129) {
 			$$invalidate(2, style = objToStyle({
 				width: props.width,
-				color: props.color ?? buttonThemeStyle.backgroundColor,
-				borderColor: props.color ?? buttonThemeStyle.backgroundColor,
+				color: props.color ?? buttonThemeStyle.color,
+				borderColor: props.borderColor ?? props.color ?? buttonThemeStyle.borderColor,
 				fontWeight: props.fontWeight ?? 'bold',
 				...BUTTON_OUTLINED_WRAP_STYLES[props.wrap ?? buttonOutlinedPropsDefault.wrap],
 				...BUTTON_OUTLINED_ROUND_STYLES[props.round ?? buttonOutlinedPropsDefault.round],
@@ -15457,12 +15472,22 @@ function instance$a($$self, $$props, $$invalidate) {
 				fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
 				...toCssCommon(props),
 				...toCssBorder(props),
-				...toCssShadow(props)
+				...toCssShadow(props),
+				...variables
 			}));
 		}
 	};
 
-	return [props, layerId, style, attributes, element, handleClick, buttonThemeStyle];
+	return [
+		props,
+		layerId,
+		style,
+		attributes,
+		element,
+		handleClick,
+		buttonThemeStyle,
+		variables
+	];
 }
 
 class ButtonOutlined extends SvelteComponent {
@@ -16222,6 +16247,37 @@ class CloseButton extends SvelteComponent {
 	}
 }
 
+const ICON_SIZE_STYLES = {
+    x_small: {
+        width: '12px',
+        height: '12px',
+    },
+    small: {
+        width: '16px',
+        height: '16px',
+    },
+    medium: {
+        width: '20px',
+        height: '20px',
+    },
+    large: {
+        width: '24px',
+        height: '24px',
+    },
+    x_large: {
+        width: '32px',
+        height: '32px',
+    },
+    x2_large: {
+        width: '40px',
+        height: '40px',
+    },
+    x3_large: {
+        width: '48px',
+        height: '48px',
+    },
+};
+
 /* src/components-flex/image/Image.svelte generated by Svelte v3.53.1 */
 
 function add_css$7(target) {
@@ -18598,4 +18654,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_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, 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 };

package/dist/index.es.d.ts

@@ -2343,10 +2343,7 @@ declare const afterUpdate: typeof afterUpdateSvelte;
 declare const tick: typeof tickSvelte;
 // @internal
 declare const LAYOUT_COMPONENT_NAMES: string[];
-type PropStyles<Props extends Record<string, any>, K extends keyof Props> = Record<NonNullable<Props[K]>, Properties & Partial<{
-    hover: Properties;
-    active: Properties;
-}>>;
+type PropStyles<Props extends Record<string, any>, K extends keyof Props> = Record<NonNullable<Props[K]>, Properties>;
 declare const SHADOW_VARIANT: {
     readonly extra_small: "XSmall";
     readonly small: "Small";
@@ -2393,13 +2390,13 @@ declare const BUTTON_ICON_ANGLE: {
 type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & BorderProps & {
     label?: string;
     // size
-    size?: keyof typeof BUTTON_SIZE;
+    size?: keyof typeof BUTTON_SIZE | string;
     height?: Properties["height"];
     paddingLeft?: Properties["paddingLeft"];
     paddingRight?: Properties["paddingRight"];
     fontSize?: Properties["fontSize"];
     // theme
-    theme?: keyof typeof BUTTON_THEME;
+    theme?: keyof typeof BUTTON_THEME | string;
     color?: Properties["color"];
     backgroundColor?: Properties["backgroundColor"];
     // others
@@ -2656,6 +2653,7 @@ type IconProps = CommonProps & ClickableProps & {
     width?: Properties$0["width"];
     height?: Properties$0["height"];
 };
+declare const ICON_SIZE_STYLES: PropStyles<IconProps, "size">;
 type ImageProps = CommonProps & {
     image?: string;
     width?: Properties["width"];
@@ -2733,7 +2731,7 @@ declare const TEXT_STYLE: {
     readonly normal: "normal";
     readonly italic: "italic";
 };
-type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & PaddingProps & {
+type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & CustomizeCssProps & PaddingProps & {
     content: string;
     theme?: keyof typeof TEXT_THEME;
     size?: keyof typeof LAYER_TEXT_SIZE;
@@ -2861,7 +2859,7 @@ type BrandKit = {
 declare const BRAND_KIT: BrandKit;
 declare const SHADOW_STYLES: Record<keyof typeof SHADOW_VARIANT, Properties>;
 declare const ROUND_STYLES: Record<keyof typeof ROUND_VARIANT, Pick<Properties, "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius">>;
-export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, PropStyles, SHADOW_VARIANT, ROUND_VARIANT, PositionProps, MetaProps, CustomizeCssProps, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, WithIconProps, LinkProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE, BUTTON_THEME, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, buttonPropsDefault, BUTTON_SIZE_STYLES, BUTTON_THEME_STYLES, BUTTON_ROUND_STYLES, BUTTON_WRAP_STYLES, ButtonOutlinedProps, buttonOutlinedPropsDefault, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_THEME_STYLES, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_THEME, ButtonTextProps, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME_STYLES, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, CLOSE_BUTTON_LABEL_PLACEMENT, CloseButtonProps, ICON_SIZE, ICON_VARIANTS, IconProps, ImageProps, LAYOUT_DISPLAY_TYPE, LayoutDisplayType, LAYOUT_DIRECTION, LayoutFlexDirection, LAYOUT_ALIGN, LayoutFlexAlign, LAYOUT_JUSTIFY, LayoutFlexJustify, LayerLayoutProps, SliderProps, LAYER_TEXT_SIZE, TEXT_THEME, TEXT_STYLE, LayerTextProps, TEXT_THEME_STYLES, TEXT_VARIANTS, TEXT_LINK_SIZE, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TextLinkProps, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME_STYLES, CodeProps, BrandKitColor, BrandKitColors, BrandKit, BRAND_KIT, SHADOW_STYLES, ROUND_STYLES };
+export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, PropStyles, SHADOW_VARIANT, ROUND_VARIANT, PositionProps, MetaProps, CustomizeCssProps, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, WithIconProps, LinkProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE, BUTTON_THEME, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, buttonPropsDefault, BUTTON_SIZE_STYLES, BUTTON_THEME_STYLES, BUTTON_ROUND_STYLES, BUTTON_WRAP_STYLES, ButtonOutlinedProps, buttonOutlinedPropsDefault, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_THEME_STYLES, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_THEME, ButtonTextProps, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME_STYLES, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, CLOSE_BUTTON_LABEL_PLACEMENT, CloseButtonProps, ICON_SIZE, ICON_VARIANTS, IconProps, ICON_SIZE_STYLES, ImageProps, LAYOUT_DISPLAY_TYPE, LayoutDisplayType, LAYOUT_DIRECTION, LayoutFlexDirection, LAYOUT_ALIGN, LayoutFlexAlign, LAYOUT_JUSTIFY, LayoutFlexJustify, LayerLayoutProps, SliderProps, LAYER_TEXT_SIZE, TEXT_THEME, TEXT_STYLE, LayerTextProps, TEXT_THEME_STYLES, TEXT_VARIANTS, TEXT_LINK_SIZE, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TextLinkProps, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME_STYLES, CodeProps, BrandKitColor, BrandKitColors, BrandKit, BRAND_KIT, SHADOW_STYLES, ROUND_STYLES };
 export type { SystemConfig, ActionVariables, ActionEventHandler, ActionProps, ActionOptions, ActionHook, ActionHookLog, ActionChangeStateHook, SendFunction, PublishFunction, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionCloseHook, ShowTrigger, CloseTrigger, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';

package/dist/index.es.js

@@ -13930,8 +13930,8 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	useInjectCustomizeCss(props);
 	const { attributes, element, handleClick } = useClickable(props);
-	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
-	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size];
+	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme] || BUTTON_THEME_STYLES[buttonPropsDefault.theme];
+	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size] || BUTTON_SIZE_STYLES[buttonPropsDefault.size];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -14030,32 +14030,39 @@ const BUTTON_OUTLINED_SIZE_STYLES = {
 };
 const BUTTON_OUTLINED_THEME_STYLES = {
     default: {
-        backgroundColor: BRAND_KIT.colors.brand.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.brand.main,
+        borderColor: BRAND_KIT.colors.brand.main,
+        backgroundColor: '#FFFFFF',
     },
     general: {
-        backgroundColor: BRAND_KIT.colors.text_secondary.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.text_secondary.main,
+        borderColor: BRAND_KIT.colors.text_secondary.main,
+        backgroundColor: '#FFFFFF',
     },
     success: {
-        backgroundColor: BRAND_KIT.colors.success.main,
-        color: '#ffffff',
+        color: BRAND_KIT.colors.success.main,
+        borderColor: BRAND_KIT.colors.success.main,
+        backgroundColor: '#FFFFFF',
     },
     warning: {
-        backgroundColor: BRAND_KIT.colors.warning.main,
-        color: '#ffffff',
+        color: BRAND_KIT.colors.warning.main,
+        borderColor: BRAND_KIT.colors.warning.main,
+        backgroundColor: '#FFFFFF',
     },
     danger: {
-        backgroundColor: BRAND_KIT.colors.danger.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.danger.main,
+        borderColor: BRAND_KIT.colors.danger.main,
+        backgroundColor: '#FFFFFF',
     },
     info: {
-        backgroundColor: BRAND_KIT.colors.info.main,
-        color: '#FFFFFF',
+        color: BRAND_KIT.colors.info.main,
+        borderColor: BRAND_KIT.colors.info.main,
+        backgroundColor: '#FFFFFF',
     },
     white: {
-        backgroundColor: '#FFFFFF',
-        color: BRAND_KIT.colors.text_primary.main,
+        color: '#FFFFFF',
+        borderColor: '#FFFFFF',
+        backgroundColor: '#000000',
     },
 };
 const BUTTON_OUTLINED_ROUND_STYLES = {
@@ -14081,10 +14088,10 @@ const BUTTON_OUTLINED_WRAP_STYLES = {
 /* src/components-flex/button-outlined/ButtonOutlined.svelte generated by Svelte v3.53.1 */
 
 function add_css$a(target) {
-	append_styles(target, "svelte-b990ec", ".button-outlined.svelte-b990ec{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:#ffffff}.button-outlined.svelte-b990ec:hover{background-color:#f6f6f6}.button-outlined-icon.svelte-b990ec{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
+	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}");
 }
 
-// (44:2) {#if props.isIcon && props.iconVariant}
+// (50:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$5(ctx) {
 	let div;
 	let icon;
@@ -14105,7 +14112,7 @@ function create_if_block$5(ctx) {
 		c() {
 			div = element("div");
 			create_component(icon.$$.fragment);
-			attr(div, "class", "button-outlined-icon svelte-b990ec");
+			attr(div, "class", "button-outlined-icon svelte-38fju1");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -14140,7 +14147,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (36:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (42: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;
@@ -14172,7 +14179,7 @@ function create_dynamic_element$5(ctx) {
 			t0 = space();
 			span = element("span");
 			t1 = text(t1_value);
-			attr(span, "class", "button-outlined-label svelte-b990ec");
+			attr(span, "class", "button-outlined-label svelte-38fju1");
 
 			if ((/-/).test(/*element*/ ctx[4])) {
 				set_custom_element_data_map(svelte_element, svelte_element_data);
@@ -14180,7 +14187,7 @@ function create_dynamic_element$5(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-b990ec", true);
+			toggle_class(svelte_element, "svelte-38fju1", true);
 		},
 		m(target, anchor) {
 			insert(target, svelte_element, anchor);
@@ -14234,7 +14241,7 @@ function create_dynamic_element$5(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-b990ec", true);
+			toggle_class(svelte_element, "svelte-38fju1", true);
 		},
 		i(local) {
 			if (current) return;
@@ -14301,6 +14308,7 @@ function create_fragment$a(ctx) {
 }
 
 function instance$a($$self, $$props, $$invalidate) {
+	let variables;
 	let style;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
@@ -14316,10 +14324,17 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
+			$$invalidate(7, variables = {
+				'--bg-color': props.backgroundColor ?? buttonThemeStyle.backgroundColor,
+				'--hover-bg-color': darkenColor(props.backgroundColor ?? buttonThemeStyle.backgroundColor, 0.032)
+			});
+		}
+
+		if ($$self.$$.dirty & /*props, variables*/ 129) {
 			$$invalidate(2, style = objToStyle({
 				width: props.width,
-				color: props.color ?? buttonThemeStyle.backgroundColor,
-				borderColor: props.color ?? buttonThemeStyle.backgroundColor,
+				color: props.color ?? buttonThemeStyle.color,
+				borderColor: props.borderColor ?? props.color ?? buttonThemeStyle.borderColor,
 				fontWeight: props.fontWeight ?? 'bold',
 				...BUTTON_OUTLINED_WRAP_STYLES[props.wrap ?? buttonOutlinedPropsDefault.wrap],
 				...BUTTON_OUTLINED_ROUND_STYLES[props.round ?? buttonOutlinedPropsDefault.round],
@@ -14332,12 +14347,22 @@ function instance$a($$self, $$props, $$invalidate) {
 				fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
 				...toCssCommon(props),
 				...toCssBorder(props),
-				...toCssShadow(props)
+				...toCssShadow(props),
+				...variables
 			}));
 		}
 	};
 
-	return [props, layerId, style, attributes, element, handleClick, buttonThemeStyle];
+	return [
+		props,
+		layerId,
+		style,
+		attributes,
+		element,
+		handleClick,
+		buttonThemeStyle,
+		variables
+	];
 }
 
 class ButtonOutlined extends SvelteComponent {
@@ -15017,6 +15042,37 @@ class CloseButton extends SvelteComponent {
 	}
 }
 
+const ICON_SIZE_STYLES = {
+    x_small: {
+        width: '12px',
+        height: '12px',
+    },
+    small: {
+        width: '16px',
+        height: '16px',
+    },
+    medium: {
+        width: '20px',
+        height: '20px',
+    },
+    large: {
+        width: '24px',
+        height: '24px',
+    },
+    x_large: {
+        width: '32px',
+        height: '32px',
+    },
+    x2_large: {
+        width: '40px',
+        height: '40px',
+    },
+    x3_large: {
+        width: '48px',
+        height: '48px',
+    },
+};
+
 /* src/components-flex/image/Image.svelte generated by Svelte v3.53.1 */
 
 function add_css$7(target) {
@@ -17257,4 +17313,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_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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.256-28876509.00a83155",
+  "version": "1.1.256-28896802.16eb7121",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@microsoft/api-documenter": "7.19.28",
-    "@microsoft/api-extractor": "7.33.8",
+    "@microsoft/api-extractor": "7.48.0",
     "@rollup/plugin-alias": "^4.0.0",
     "@rollup/plugin-commonjs": "^23.0.1",
     "@rollup/plugin-json": "^5.0.0",