@plaidev/karte-action-sdk 1.1.250-28767263.2eb25df3 → 1.1.250-28786077.a0d6c5ff

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

@@ -2459,12 +2459,18 @@ declare const BUTTON_ICON_ANGLE: {
 };
 type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
     label?: string;
+    // size
     size?: keyof typeof BUTTON_SIZE;
     height?: Properties["height"];
     paddingLeft?: Properties["paddingLeft"];
     paddingRight?: Properties["paddingRight"];
     fontSize?: Properties["fontSize"];
+    // theme
     theme?: keyof typeof BUTTON_THEME;
+    fontWeight?: Properties["fontWeight"];
+    color?: Properties["color"];
+    backgroundColor?: Properties["backgroundColor"];
+    // others
     round?: keyof typeof BUTTON_ROUND;
     isLink?: boolean;
     isIcon?: boolean;
@@ -2474,9 +2480,6 @@ type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
     iconAngle?: keyof typeof BUTTON_ICON_ANGLE;
     width?: Properties["width"];
     wrap?: "wrap" | "nowrap";
-    fontWeight?: Properties["fontWeight"];
-    color?: Properties["color"];
-    backgroundColor?: Properties["backgroundColor"];
 };
 declare const buttonPropsDefault: ButtonProps;
 declare const BUTTON_SIZE_STYLES: PropStyles<ButtonProps, "size">;
@@ -2505,20 +2508,51 @@ declare const buttonOutlinedPropsDefault: ButtonOutlinedProps;
 declare const BUTTON_OUTLINED_SIZE_STYLES: PropStyles<ButtonOutlinedProps, "size">;
 declare const BUTTON_OUTLINED_ROUND_STYLES: PropStyles<ButtonOutlinedProps, "round">;
 declare const BUTTON_OUTLINED_WRAP_STYLES: PropStyles<ButtonOutlinedProps, "wrap">;
+declare const BUTTON_TEXT_SIZE: {
+    readonly small: "Small";
+    readonly medium: "Medium";
+    readonly large: "Large";
+};
+declare const BUTTON_TEXT_THEME: {
+    readonly default: "\u30C7\u30D5\u30A9\u30EB\u30C8";
+    readonly link: "Link";
+    readonly brand: "Brand";
+    readonly success: "Success";
+    readonly warning: "Warning";
+    readonly alert: "Danger";
+    readonly info: "Info";
+    readonly gray: "Gray";
+    readonly white: "White";
+};
 type ButtonTextProps = CommonProps & ClickableProps & {
     label?: string;
-    size?: keyof typeof BUTTON_SIZE;
-    theme?: keyof typeof BUTTON_THEME;
-    isLink?: boolean;
+    // size
+    size?: keyof typeof BUTTON_TEXT_SIZE;
+    height?: Properties["height"];
+    paddingLeft?: Properties["paddingLeft"];
+    paddingRight?: Properties["paddingRight"];
+    fontSize?: Properties["fontSize"];
+    // theme
+    theme?: keyof typeof BUTTON_TEXT_THEME;
+    fontWeight?: Properties["fontWeight"];
+    color?: Properties["color"];
+    backgroundColor?: Properties["backgroundColor"];
+    // icon
     isIcon?: boolean;
-    linkUrl?: string;
-    linkTarget?: keyof typeof BUTTON_LINK_TARGET;
     iconVariant?: string;
+    iconColor?: Properties["color"];
     iconAngle?: keyof typeof BUTTON_ICON_ANGLE;
+    // link
+    isLink?: boolean;
+    linkUrl?: string;
+    linkTarget?: keyof typeof BUTTON_LINK_TARGET;
+    // others
     width?: Properties["width"];
+    round?: keyof typeof BUTTON_ROUND;
     wrap?: "wrap" | "nowrap";
-    fontWeight?: Properties["fontWeight"];
 };
+declare const BUTTON_TEXT_SIZE_STYLES: PropStyles<ButtonTextProps, "size">;
+declare const BUTTON_TEXT_THEME_STYLES: PropStyles<ButtonTextProps, "theme">;
 declare const CLOSE_BUTTON_PLACEMENT: {
     readonly topRight: "topRight";
     readonly topLeft: "topLeft";
@@ -2749,7 +2783,7 @@ declare const TEXT_VARIANTS: {
 };
 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, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, 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_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, ButtonTextProps, 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, LayerTextProps, TEXT_VARIANTS, 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, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, 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_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, LayerTextProps, TEXT_VARIANTS, 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

@@ -15004,7 +15004,7 @@ const BUTTON_THEME_STYLES = {
     },
     transparent: {
         backgroundColor: 'rgba(255, 255, 255, 0)',
-        color: '#00100ea1',
+        color: 'rgba(0, 16, 14, 1)',
         fontWeight: 'bold',
     },
 };
@@ -15660,13 +15660,72 @@ class ButtonOutlined extends SvelteComponent {
 	}
 }
 
+const BUTTON_TEXT_SIZE_STYLES = {
+    small: {
+        height: '32px',
+        paddingLeft: '16px',
+        paddingRight: '16px',
+        fontSize: '12px',
+    },
+    medium: {
+        height: '40px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+        fontSize: '14px',
+    },
+    large: {
+        height: '48px',
+        paddingLeft: '32px',
+        paddingRight: '32px',
+        fontSize: '16px',
+    },
+};
+const BUTTON_TEXT_THEME_STYLES = {
+    default: {
+        backgroundColor: '#f3f4f6',
+        color: 'rgba(0, 16, 14, 1)',
+    },
+    link: {
+        backgroundColor: '#f3f4f6',
+        color: '#1558d6',
+    },
+    brand: {
+        backgroundColor: '#f3f4f6',
+        color: 'rgba(18,160,160,1)',
+    },
+    success: {
+        backgroundColor: '#f3f4f6',
+        color: '#10b981',
+    },
+    warning: {
+        backgroundColor: '#f3f4f6',
+        color: '#fbbf24',
+    },
+    alert: {
+        backgroundColor: '#f3f4f6',
+        color: '#ef4444',
+    },
+    info: {
+        backgroundColor: '#f3f4f6',
+        color: '#0ea5e9',
+    },
+    gray: {
+        backgroundColor: '#0ea5e9',
+        color: '#666666',
+    },
+    white: {
+        backgroundColor: '#f3f4f6',
+        color: '#FFFFFF',
+    },
+};
+
 /* src/components-flex/button-text/ButtonText.svelte generated by Svelte v3.53.1 */
 
 function add_css$6(target) {
-	append_styles(target, "svelte-z1kekb", ".flex-button-text-icon.svelte-z1kekb{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
+	append_styles(target, "svelte-30fvi7", ".flex-button-text:hover{background-color:var(--hover-bg-color)}.flex-button-text-icon.svelte-30fvi7{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
 }
 
-// (99:2) {#if props.isIcon && props.iconVariant}
+// (54:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$3(ctx) {
 	let div;
 	let icon;
@@ -15676,7 +15735,9 @@ function create_if_block$3(ctx) {
 			props: {
 				props: {
 					variant: /*props*/ ctx[0].iconVariant,
-					color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
+					color: /*props*/ ctx[0].color ?? /*buttonThemeStyle*/ ctx[3].color,
+					width: '1em',
+					height: '1em'
 				}
 			}
 		});
@@ -15695,7 +15756,7 @@ function create_if_block$3(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "flex-button-text-icon svelte-z1kekb");
+			attr(div, "class", "flex-button-text-icon svelte-30fvi7");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -15707,7 +15768,9 @@ function create_if_block$3(ctx) {
 
 			if (dirty & /*props*/ 1) icon_changes.props = {
 				variant: /*props*/ ctx[0].iconVariant,
-				color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
+				color: /*props*/ ctx[0].color ?? /*buttonThemeStyle*/ ctx[3].color,
+				width: '1em',
+				height: '1em'
 			};
 
 			icon.$set(icon_changes);
@@ -15728,7 +15791,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-// (91:0) <Clickable   className="flext-button-text"   {layerId}   {style}   onClick={props.onClick}   eventName={props.eventName}   eventValue={props.eventValue} >
+// (46:0) <Clickable   className="flex-button-text"   {layerId}   {style}   onClick={props.onClick}   eventName={props.eventName}   eventValue={props.eventValue} >
 function create_default_slot$2(ctx) {
 	let t0;
 	let span;
@@ -15808,7 +15871,7 @@ function create_fragment$7(ctx) {
 
 	clickable = new Clickable({
 			props: {
-				className: "flext-button-text",
+				className: "flex-button-text",
 				layerId: /*layerId*/ ctx[1],
 				style: /*style*/ ctx[2],
 				onClick: /*props*/ ctx[0].onClick,
@@ -15838,7 +15901,7 @@ function create_fragment$7(ctx) {
 			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
 			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
 
-			if (dirty & /*$$scope, props*/ 257) {
+			if (dirty & /*$$scope, props*/ 513) {
 				clickable_changes.$$scope = { dirty, ctx };
 			}
 
@@ -15860,67 +15923,15 @@ function create_fragment$7(ctx) {
 }
 
 function instance$7($$self, $$props, $$invalidate) {
+	let variables;
 	let style;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { eventName = '' } = $$props;
 	let { eventValue = undefined } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
-
-	const VARIANTS = {
-		size: {
-			extra_small: {
-				fontSize: '12px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			small: {
-				fontSize: '13px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			medium: {
-				fontSize: '14px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			large: {
-				fontSize: '14px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			extra_large: {
-				fontSize: '17px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			}
-		},
-		color: {
-			theme: {
-				color: 'rgba(18,160,160,1)',
-				fontWeight: 'bold'
-			},
-			default: { color: '#00100ea1', fontWeight: 'bold' }, // 'bg-action-default hover:bg-action-default-hover text-default'
-			alert: {
-				color: 'rgb(242,83,32,1)',
-				fontWeight: 'bold'
-			}, // 'bg-negative hover:bg-negative-hover text-primitive-white font-bold'
-			
-		},
-		wrap: {
-			nowrap: { whiteSpace: 'nowrap' },
-			wrap: { whiteSpace: 'pre-wrap' }
-		}
-	};
-
-	const getCustomColor = () => {
-		return {
-			color: VARIANTS.color[props.color ?? 'default'].color,
-			fontWeight: props.fontWeight
-			? props.fontWeight
-			: VARIANTS.color[props.color ?? 'default'].fontWeight
-		};
-	};
+	const buttonThemeStyle = BUTTON_TEXT_THEME_STYLES[props.theme ?? 'default'];
+	const buttonSizeStyle = BUTTON_TEXT_SIZE_STYLES[props.size ?? 'medium'];
 
 	$$self.$$set = $$props => {
 		if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
@@ -15932,26 +15943,49 @@ function instance$7($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
+			$$invalidate(7, variables = {
+				'--hover-bg-color': props.backgroundColor ?? buttonThemeStyle.backgroundColor
+			});
+		}
+
+		if ($$self.$$.dirty & /*props, variables*/ 129) {
 			$$invalidate(2, style = objToStyle({
 				display: 'inline-flex',
 				gap: '0.65em',
 				alignItems: 'center',
 				justifyContent: 'center',
+				outline: 0,
 				border: 0,
-				transition: 'color 0.12s',
+				transition: 'background-color 0.12s, color 0.12s',
 				width: props.width,
-				...VARIANTS.size[props.size ?? 'medium'],
-				...VARIANTS.wrap[props.wrap ?? 'nowrap'],
+				height: props.height ?? buttonSizeStyle.height,
+				paddingLeft: props.paddingLeft ?? buttonSizeStyle.paddingLeft,
+				paddingRight: props.paddingRight ?? buttonSizeStyle.paddingRight,
+				fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
+				color: props.color ?? buttonThemeStyle.color,
+				fontWeight: props.fontWeight ?? 'bold',
+				cursor: 'pointer',
+				...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
+				...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
 				...props.iconAngle
 				? { flexDirection: props.iconAngle }
 				: {},
-				...getCustomColor(),
-				...toCssCommon(props)
+				...toCssCommon(props),
+				...variables
 			}));
 		}
 	};
 
-	return [props, layerId, style, VARIANTS, onClick, eventName, eventValue];
+	return [
+		props,
+		layerId,
+		style,
+		buttonThemeStyle,
+		onClick,
+		eventName,
+		eventValue,
+		variables
+	];
 }
 
 class ButtonText extends SvelteComponent {
@@ -15976,6 +16010,23 @@ class ButtonText extends SvelteComponent {
 	}
 }
 
+const BUTTON_TEXT_SIZE = {
+    small: 'Small',
+    medium: 'Medium',
+    large: 'Large',
+};
+const BUTTON_TEXT_THEME = {
+    default: 'デフォルト',
+    link: 'Link',
+    brand: 'Brand',
+    success: 'Success',
+    warning: 'Warning',
+    alert: 'Danger',
+    info: 'Info',
+    gray: 'Gray',
+    white: 'White',
+};
+
 const CLOSE_BUTTON_PLACEMENT = {
     topRight: 'topRight',
     topLeft: 'topLeft',
@@ -18023,4 +18074,4 @@ const ROUND_STYLES = {
     },
 };
 
-export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, 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_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, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, 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_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, 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_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, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, 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_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

@@ -2459,12 +2459,18 @@ declare const BUTTON_ICON_ANGLE: {
 };
 type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
     label?: string;
+    // size
     size?: keyof typeof BUTTON_SIZE;
     height?: Properties["height"];
     paddingLeft?: Properties["paddingLeft"];
     paddingRight?: Properties["paddingRight"];
     fontSize?: Properties["fontSize"];
+    // theme
     theme?: keyof typeof BUTTON_THEME;
+    fontWeight?: Properties["fontWeight"];
+    color?: Properties["color"];
+    backgroundColor?: Properties["backgroundColor"];
+    // others
     round?: keyof typeof BUTTON_ROUND;
     isLink?: boolean;
     isIcon?: boolean;
@@ -2474,9 +2480,6 @@ type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
     iconAngle?: keyof typeof BUTTON_ICON_ANGLE;
     width?: Properties["width"];
     wrap?: "wrap" | "nowrap";
-    fontWeight?: Properties["fontWeight"];
-    color?: Properties["color"];
-    backgroundColor?: Properties["backgroundColor"];
 };
 declare const buttonPropsDefault: ButtonProps;
 declare const BUTTON_SIZE_STYLES: PropStyles<ButtonProps, "size">;
@@ -2505,20 +2508,51 @@ declare const buttonOutlinedPropsDefault: ButtonOutlinedProps;
 declare const BUTTON_OUTLINED_SIZE_STYLES: PropStyles<ButtonOutlinedProps, "size">;
 declare const BUTTON_OUTLINED_ROUND_STYLES: PropStyles<ButtonOutlinedProps, "round">;
 declare const BUTTON_OUTLINED_WRAP_STYLES: PropStyles<ButtonOutlinedProps, "wrap">;
+declare const BUTTON_TEXT_SIZE: {
+    readonly small: "Small";
+    readonly medium: "Medium";
+    readonly large: "Large";
+};
+declare const BUTTON_TEXT_THEME: {
+    readonly default: "\u30C7\u30D5\u30A9\u30EB\u30C8";
+    readonly link: "Link";
+    readonly brand: "Brand";
+    readonly success: "Success";
+    readonly warning: "Warning";
+    readonly alert: "Danger";
+    readonly info: "Info";
+    readonly gray: "Gray";
+    readonly white: "White";
+};
 type ButtonTextProps = CommonProps & ClickableProps & {
     label?: string;
-    size?: keyof typeof BUTTON_SIZE;
-    theme?: keyof typeof BUTTON_THEME;
-    isLink?: boolean;
+    // size
+    size?: keyof typeof BUTTON_TEXT_SIZE;
+    height?: Properties["height"];
+    paddingLeft?: Properties["paddingLeft"];
+    paddingRight?: Properties["paddingRight"];
+    fontSize?: Properties["fontSize"];
+    // theme
+    theme?: keyof typeof BUTTON_TEXT_THEME;
+    fontWeight?: Properties["fontWeight"];
+    color?: Properties["color"];
+    backgroundColor?: Properties["backgroundColor"];
+    // icon
     isIcon?: boolean;
-    linkUrl?: string;
-    linkTarget?: keyof typeof BUTTON_LINK_TARGET;
     iconVariant?: string;
+    iconColor?: Properties["color"];
     iconAngle?: keyof typeof BUTTON_ICON_ANGLE;
+    // link
+    isLink?: boolean;
+    linkUrl?: string;
+    linkTarget?: keyof typeof BUTTON_LINK_TARGET;
+    // others
     width?: Properties["width"];
+    round?: keyof typeof BUTTON_ROUND;
     wrap?: "wrap" | "nowrap";
-    fontWeight?: Properties["fontWeight"];
 };
+declare const BUTTON_TEXT_SIZE_STYLES: PropStyles<ButtonTextProps, "size">;
+declare const BUTTON_TEXT_THEME_STYLES: PropStyles<ButtonTextProps, "theme">;
 declare const CLOSE_BUTTON_PLACEMENT: {
     readonly topRight: "topRight";
     readonly topLeft: "topLeft";
@@ -2749,7 +2783,7 @@ declare const TEXT_VARIANTS: {
 };
 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, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, 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_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, ButtonTextProps, 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, LayerTextProps, TEXT_VARIANTS, 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, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, 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_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, LayerTextProps, TEXT_VARIANTS, 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

@@ -13919,7 +13919,7 @@ const BUTTON_THEME_STYLES = {
     },
     transparent: {
         backgroundColor: 'rgba(255, 255, 255, 0)',
-        color: '#00100ea1',
+        color: 'rgba(0, 16, 14, 1)',
         fontWeight: 'bold',
     },
 };
@@ -14533,13 +14533,72 @@ class ButtonOutlined extends SvelteComponent {
 	}
 }
 
+const BUTTON_TEXT_SIZE_STYLES = {
+    small: {
+        height: '32px',
+        paddingLeft: '16px',
+        paddingRight: '16px',
+        fontSize: '12px',
+    },
+    medium: {
+        height: '40px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+        fontSize: '14px',
+    },
+    large: {
+        height: '48px',
+        paddingLeft: '32px',
+        paddingRight: '32px',
+        fontSize: '16px',
+    },
+};
+const BUTTON_TEXT_THEME_STYLES = {
+    default: {
+        backgroundColor: '#f3f4f6',
+        color: 'rgba(0, 16, 14, 1)',
+    },
+    link: {
+        backgroundColor: '#f3f4f6',
+        color: '#1558d6',
+    },
+    brand: {
+        backgroundColor: '#f3f4f6',
+        color: 'rgba(18,160,160,1)',
+    },
+    success: {
+        backgroundColor: '#f3f4f6',
+        color: '#10b981',
+    },
+    warning: {
+        backgroundColor: '#f3f4f6',
+        color: '#fbbf24',
+    },
+    alert: {
+        backgroundColor: '#f3f4f6',
+        color: '#ef4444',
+    },
+    info: {
+        backgroundColor: '#f3f4f6',
+        color: '#0ea5e9',
+    },
+    gray: {
+        backgroundColor: '#0ea5e9',
+        color: '#666666',
+    },
+    white: {
+        backgroundColor: '#f3f4f6',
+        color: '#FFFFFF',
+    },
+};
+
 /* src/components-flex/button-text/ButtonText.svelte generated by Svelte v3.53.1 */
 
 function add_css$6(target) {
-	append_styles(target, "svelte-z1kekb", ".flex-button-text-icon.svelte-z1kekb{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
+	append_styles(target, "svelte-30fvi7", ".flex-button-text:hover{background-color:var(--hover-bg-color)}.flex-button-text-icon.svelte-30fvi7{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
 }
 
-// (99:2) {#if props.isIcon && props.iconVariant}
+// (54:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$3(ctx) {
 	let div;
 	let icon;
@@ -14549,7 +14608,9 @@ function create_if_block$3(ctx) {
 			props: {
 				props: {
 					variant: /*props*/ ctx[0].iconVariant,
-					color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
+					color: /*props*/ ctx[0].color ?? /*buttonThemeStyle*/ ctx[3].color,
+					width: '1em',
+					height: '1em'
 				}
 			}
 		});
@@ -14558,7 +14619,7 @@ function create_if_block$3(ctx) {
 		c() {
 			div = element("div");
 			create_component(icon.$$.fragment);
-			attr(div, "class", "flex-button-text-icon svelte-z1kekb");
+			attr(div, "class", "flex-button-text-icon svelte-30fvi7");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -14570,7 +14631,9 @@ function create_if_block$3(ctx) {
 
 			if (dirty & /*props*/ 1) icon_changes.props = {
 				variant: /*props*/ ctx[0].iconVariant,
-				color: /*VARIANTS*/ ctx[3].color[/*props*/ ctx[0].color ?? 'default'].color
+				color: /*props*/ ctx[0].color ?? /*buttonThemeStyle*/ ctx[3].color,
+				width: '1em',
+				height: '1em'
 			};
 
 			icon.$set(icon_changes);
@@ -14591,7 +14654,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-// (91:0) <Clickable   className="flext-button-text"   {layerId}   {style}   onClick={props.onClick}   eventName={props.eventName}   eventValue={props.eventValue} >
+// (46:0) <Clickable   className="flex-button-text"   {layerId}   {style}   onClick={props.onClick}   eventName={props.eventName}   eventValue={props.eventValue} >
 function create_default_slot$2(ctx) {
 	let t0;
 	let span;
@@ -14663,7 +14726,7 @@ function create_fragment$7(ctx) {
 
 	clickable = new Clickable({
 			props: {
-				className: "flext-button-text",
+				className: "flex-button-text",
 				layerId: /*layerId*/ ctx[1],
 				style: /*style*/ ctx[2],
 				onClick: /*props*/ ctx[0].onClick,
@@ -14690,7 +14753,7 @@ function create_fragment$7(ctx) {
 			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
 			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
 
-			if (dirty & /*$$scope, props*/ 257) {
+			if (dirty & /*$$scope, props*/ 513) {
 				clickable_changes.$$scope = { dirty, ctx };
 			}
 
@@ -14712,67 +14775,15 @@ function create_fragment$7(ctx) {
 }
 
 function instance$7($$self, $$props, $$invalidate) {
+	let variables;
 	let style;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { eventName = '' } = $$props;
 	let { eventValue = undefined } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
-
-	const VARIANTS = {
-		size: {
-			extra_small: {
-				fontSize: '12px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			small: {
-				fontSize: '13px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			medium: {
-				fontSize: '14px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			large: {
-				fontSize: '14px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			},
-			extra_large: {
-				fontSize: '17px',
-				lineHeight: 1.5,
-				borderRadius: '4px'
-			}
-		},
-		color: {
-			theme: {
-				color: 'rgba(18,160,160,1)',
-				fontWeight: 'bold'
-			},
-			default: { color: '#00100ea1', fontWeight: 'bold' }, // 'bg-action-default hover:bg-action-default-hover text-default'
-			alert: {
-				color: 'rgb(242,83,32,1)',
-				fontWeight: 'bold'
-			}, // 'bg-negative hover:bg-negative-hover text-primitive-white font-bold'
-			
-		},
-		wrap: {
-			nowrap: { whiteSpace: 'nowrap' },
-			wrap: { whiteSpace: 'pre-wrap' }
-		}
-	};
-
-	const getCustomColor = () => {
-		return {
-			color: VARIANTS.color[props.color ?? 'default'].color,
-			fontWeight: props.fontWeight
-			? props.fontWeight
-			: VARIANTS.color[props.color ?? 'default'].fontWeight
-		};
-	};
+	const buttonThemeStyle = BUTTON_TEXT_THEME_STYLES[props.theme ?? 'default'];
+	const buttonSizeStyle = BUTTON_TEXT_SIZE_STYLES[props.size ?? 'medium'];
 
 	$$self.$$set = $$props => {
 		if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
@@ -14784,26 +14795,49 @@ function instance$7($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*props*/ 1) {
+			$$invalidate(7, variables = {
+				'--hover-bg-color': props.backgroundColor ?? buttonThemeStyle.backgroundColor
+			});
+		}
+
+		if ($$self.$$.dirty & /*props, variables*/ 129) {
 			$$invalidate(2, style = objToStyle({
 				display: 'inline-flex',
 				gap: '0.65em',
 				alignItems: 'center',
 				justifyContent: 'center',
+				outline: 0,
 				border: 0,
-				transition: 'color 0.12s',
+				transition: 'background-color 0.12s, color 0.12s',
 				width: props.width,
-				...VARIANTS.size[props.size ?? 'medium'],
-				...VARIANTS.wrap[props.wrap ?? 'nowrap'],
+				height: props.height ?? buttonSizeStyle.height,
+				paddingLeft: props.paddingLeft ?? buttonSizeStyle.paddingLeft,
+				paddingRight: props.paddingRight ?? buttonSizeStyle.paddingRight,
+				fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
+				color: props.color ?? buttonThemeStyle.color,
+				fontWeight: props.fontWeight ?? 'bold',
+				cursor: 'pointer',
+				...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
+				...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
 				...props.iconAngle
 				? { flexDirection: props.iconAngle }
 				: {},
-				...getCustomColor(),
-				...toCssCommon(props)
+				...toCssCommon(props),
+				...variables
 			}));
 		}
 	};
 
-	return [props, layerId, style, VARIANTS, onClick, eventName, eventValue];
+	return [
+		props,
+		layerId,
+		style,
+		buttonThemeStyle,
+		onClick,
+		eventName,
+		eventValue,
+		variables
+	];
 }
 
 class ButtonText extends SvelteComponent {
@@ -14828,6 +14862,23 @@ class ButtonText extends SvelteComponent {
 	}
 }
 
+const BUTTON_TEXT_SIZE = {
+    small: 'Small',
+    medium: 'Medium',
+    large: 'Large',
+};
+const BUTTON_TEXT_THEME = {
+    default: 'デフォルト',
+    link: 'Link',
+    brand: 'Brand',
+    success: 'Success',
+    warning: 'Warning',
+    alert: 'Danger',
+    info: 'Info',
+    gray: 'Gray',
+    white: 'White',
+};
+
 const CLOSE_BUTTON_PLACEMENT = {
     topRight: 'topRight',
     topLeft: 'topLeft',
@@ -16754,4 +16805,4 @@ const ROUND_STYLES = {
     },
 };
 
-export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, 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_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, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, 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_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, 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_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, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Slider as FlexSlider, Text as FlexText, 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_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.250-28767263.2eb25df3",
+  "version": "1.1.250-28786077.a0d6c5ff",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",