@plaidev/karte-action-sdk 1.1.261 → 1.1.262-29016950.d6ccaa08

package/dist/index.es.d.ts

@@ -938,6 +938,10 @@ declare const SYSTEM_FONT = "sans-serif, serif, monospace, system-ui";
 declare const Fonts: readonly [
     "sans-serif, serif, monospace, system-ui",
     "Noto Sans JP",
+    "Sawarabi Gothic",
+    "Zen Kaku Gothic New",
+    "Zen Maru Gothic",
+    "Shippori Mincho",
     "M PLUS Rounded 1c",
     "M PLUS 1p",
     "Kosugi Maru",
@@ -2343,13 +2347,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>;
-declare const SHADOW_VARIANT: {
-    readonly extra_small: "XSmall";
-    readonly small: "Small";
-    readonly medium: "Medium";
-    readonly large: "Large";
-};
+type PropStyles<Props extends Record<string, any>, K extends keyof Props> = Record<NonNullable<Props[K]>, Props | Properties>;
 declare const ROUND_VARIANT: {
     readonly extra_small: "XSmall (2px)";
     readonly small: "Small (4px)";
@@ -2359,20 +2357,28 @@ declare const ROUND_VARIANT: {
     readonly fulled: "Full (100%)";
 };
 declare const BUTTON_SIZE: {
-    readonly extra_small: "XSmall";
-    readonly small: "Small";
-    readonly medium: "Medium";
-    readonly large: "Large";
-    readonly extra_large: "XLarge";
+    readonly extra_small: "\u30A8\u30AF\u30B9\u30C8\u30E9 \u30B9\u30E2\u30FC\u30EB";
+    readonly small: "\u30B9\u30E2\u30FC\u30EB";
+    readonly medium: "\u30DF\u30C7\u30A3\u30A2\u30E0";
+    readonly large: "\u30E9\u30FC\u30B8";
+    readonly extra_large: "\u30A8\u30AF\u30B9\u30C8\u30E9 \u30E9\u30FC\u30B8";
 };
 declare const BUTTON_THEME: {
-    readonly default: "Default";
-    readonly general: "General";
-    readonly success: "Success";
-    readonly warning: "Warning";
-    readonly danger: "Dander";
-    readonly info: "Info";
-    readonly white: "White";
+    readonly default: "\u30CE\u30FC\u30DE\u30EB / \u30D6\u30E9\u30F3\u30C9";
+    readonly general: "\u30CE\u30FC\u30DE\u30EB / \u30B8\u30A7\u30CD\u30E9\u30EB";
+    readonly danger: "\u30CE\u30FC\u30DE\u30EB / \u30A2\u30E9\u30FC\u30C8";
+    readonly white: "\u30CE\u30FC\u30DE\u30EB / \u30DB\u30EF\u30A4\u30C8";
+    readonly default_outline: "\u30A2\u30A6\u30C8\u30E9\u30A4\u30F3 / \u30D6\u30E9\u30F3\u30C9";
+    readonly general_outline: "\u30A2\u30A6\u30C8\u30E9\u30A4\u30F3 / \u30B8\u30A7\u30CD\u30E9\u30EB";
+    readonly danger_outline: "\u30A2\u30A6\u30C8\u30E9\u30A4\u30F3 / \u30A2\u30E9\u30FC\u30C8";
+    readonly default_text: "\u30C6\u30AD\u30B9\u30C8 / \u30D6\u30E9\u30F3\u30C9";
+    readonly general_text: "\u30C6\u30AD\u30B9\u30C8 / \u30B8\u30A7\u30CD\u30E9\u30EB";
+    readonly danger_text: "\u30C6\u30AD\u30B9\u30C8 / \u30A2\u30E9\u30FC\u30C8";
+};
+declare const BUTTON_VARIANT: {
+    readonly normal: "\u30CE\u30FC\u30DE\u30EB";
+    readonly outline: "\u30A2\u30A6\u30C8\u30E9\u30A4\u30F3";
+    readonly text: "\u30C6\u30AD\u30B9\u30C8";
 };
 declare const BUTTON_ROUND: {
     readonly default: "\u30C7\u30D5\u30A9\u30EB\u30C8";
@@ -2387,7 +2393,7 @@ declare const BUTTON_ICON_ANGLE: {
     readonly row: "\u5DE6\u5074";
     readonly "row-reverse": "\u53F3\u5074";
 };
-type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & BorderProps & {
+type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & RadiusProps & BorderProps & {
     label?: string;
     // size
     size?: keyof typeof BUTTON_SIZE | string;
@@ -2397,8 +2403,10 @@ type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps & With
     fontSize?: Properties["fontSize"];
     // theme
     theme?: keyof typeof BUTTON_THEME | string;
+    variant?: keyof typeof BUTTON_VARIANT | string;
     color?: Properties["color"];
     backgroundColor?: Properties["backgroundColor"];
+    borderColor?: Properties["borderColor"];
     // others
     fontWeight?: Properties["fontWeight"];
     round?: keyof typeof BUTTON_ROUND;
@@ -2422,6 +2430,71 @@ declare const getBrandKit: (customBrandKit?: Partial<BrandKit>) => BrandKit;
 declare const useBrandKit: () => {
     brandKit: BrandKit;
 };
+type VariantStyles<Props extends object = object> = Props & {
+    hover?: Props;
+    active?: Props;
+};
+type VariantDefinition<Props extends object = object, Meta extends object = object> = {
+    name: string;
+    description?: string;
+    getProps: (brandKit?: BrandKit) => VariantStyles<Props>;
+    meta?: Meta;
+};
+type VariantDefinitionGroup<Props extends object = object, Meta extends object = object> = Record<string, VariantDefinition<Props, Meta>>;
+// ================================
+// Aspect
+// ================================
+declare const ASPECT_VARIANT: VariantDefinitionGroup<Omit<AspectProps, "aspectVariant">, object>;
+type AspectVariantCode = keyof typeof ASPECT_VARIANT;
+declare const ASPECT_VARIANTS: (VariantDefinition<Omit<AspectProps, "aspectVariant">, object> & {
+    code: string;
+})[];
+// ================================
+// FontFamily
+// ================================
+type FontVariantMeta = {
+    lang: "ja" | "en";
+    type: "kaku" | "maru" | "min";
+};
+declare const FONT_FAMILY_VARIANT: VariantDefinitionGroup<Omit<FontFamilyProps, "fontFamilyVariant">, FontVariantMeta>;
+type FontFamilyVariantCode = keyof typeof FONT_FAMILY_VARIANT;
+declare const FONT_FAMILY_VARIANTS: (VariantDefinition<Omit<FontFamilyProps, "fontFamilyVariant">, FontVariantMeta> & {
+    code: string;
+})[];
+declare const FONT_FAMILY_VARIANT_GROUPS: readonly [
+    {
+        readonly label: "\u65E5\u672C\u8A9E / \u89D2\u30B4\u30B7\u30C3\u30AF";
+        readonly variants: (VariantDefinition<Omit<FontFamilyProps, "fontFamilyVariant">, FontVariantMeta> & {
+            code: string;
+        })[];
+    },
+    {
+        readonly label: "\u65E5\u672C\u8A9E / \u4E38\u30B4\u30B7\u30C3\u30AF";
+        readonly variants: (VariantDefinition<Omit<FontFamilyProps, "fontFamilyVariant">, FontVariantMeta> & {
+            code: string;
+        })[];
+    },
+    {
+        readonly label: "\u65E5\u672C\u8A9E / \u660E\u671D";
+        readonly variants: (VariantDefinition<Omit<FontFamilyProps, "fontFamilyVariant">, FontVariantMeta> & {
+            code: string;
+        })[];
+    },
+    {
+        readonly label: "\u82F1\u8A9E";
+        readonly variants: (VariantDefinition<Omit<FontFamilyProps, "fontFamilyVariant">, FontVariantMeta> & {
+            code: string;
+        })[];
+    }
+];
+// ================================
+// Shadow
+// ================================
+declare const SHADOW_VARIANT: VariantDefinitionGroup<Omit<ShadowProps, "shadowVariant">, object>;
+type ShadowVariantCode = keyof typeof SHADOW_VARIANT;
+declare const SHADOW_VARIANTS: (VariantDefinition<Omit<ShadowProps, "shadowVariant">, object> & {
+    code: string;
+})[];
 type PositionPlaceProps = {
     top?: Properties["top"];
     left?: Properties["left"];
@@ -2479,6 +2552,7 @@ type BackgroundImageProps = {
 };
 type ShadowProps = {
     shadow?: Properties["boxShadow"];
+    shadowVariant?: ShadowVariantCode;
 };
 type WithIconProps = {
     isIcon?: boolean;
@@ -2491,6 +2565,14 @@ type LinkProps = {
     linkUrl?: string;
     linkTarget?: keyof typeof BUTTON_LINK_TARGET;
 };
+type AspectProps = {
+    aspectVariant?: AspectVariantCode | string;
+    aspect?: Properties["aspectRatio"];
+};
+type FontFamilyProps = {
+    fontFamilyVariant?: FontFamilyVariantCode;
+    fontFamily?: Properties["fontFamily"];
+};
 declare const AVATAR_SIZE: {
     readonly extra_small: "XS\uFF0848 x 48\uFF09";
     readonly small: "S\uFF0864 x 64\uFF09";
@@ -2515,38 +2597,32 @@ type AvatarProps = CommonProps & ClickableProps & BorderProps & {
 };
 declare const avatarPropsDefault: AvatarProps;
 declare const AVATAR_SIZE_STYLES: PropStyles<AvatarProps, "size">;
-declare const getButtonThemeStyles: (customBrandKit?: Partial<BrandKit>) => {
-    default: {
-        backgroundColor: string;
-        color: "#FFFFFF";
-    };
-    general: {
-        backgroundColor: "#e8e8e8";
-        color: "rgba(0, 16, 14, 0.7)";
-    };
-    success: {
-        backgroundColor: string;
-        color: "#ffffff";
-    };
-    warning: {
-        backgroundColor: string;
-        color: "#ffffff";
-    };
-    danger: {
-        backgroundColor: string;
-        color: "#FFFFFF";
-    };
-    info: {
-        backgroundColor: string;
-        color: "#FFFFFF";
-    };
-    white: {
-        backgroundColor: "#FFFFFF";
-        color: string;
-    };
-};
+declare const getButtonThemeStyles: (customBrandKit?: Partial<BrandKit>) => Record<string, Partial<MetaProps & {
+    top?: import("csstype").Property.Top<0 | (string & {})>;
+    left?: import("csstype").Property.Left<0 | (string & {})>;
+    right?: import("csstype").Property.Right<0 | (string & {})>;
+    bottom?: import("csstype").Property.Bottom<0 | (string & {})>;
+    transform?: import("csstype").Property.Transform;
+} & {
+    position?: import("csstype").Property.Position;
+} & CustomizeCssProps & BrandStyleProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & RadiusProps & BorderProps & {
+    label?: string;
+    size?: string;
+    height?: import("csstype").Property.Height<0 | (string & {})>;
+    paddingLeft?: import("csstype").Property.PaddingLeft<0 | (string & {})>;
+    paddingRight?: import("csstype").Property.PaddingRight<0 | (string & {})>;
+    fontSize?: import("csstype").Property.FontSize<0 | (string & {})>;
+    theme?: string;
+    variant?: string;
+    color?: import("csstype").Property.Color;
+    backgroundColor?: import("csstype").Property.BackgroundColor;
+    borderColor?: import("csstype").Property.BorderColor;
+    fontWeight?: import("csstype").Property.FontWeight;
+    round?: "none" | "default" | "fulled";
+    width?: import("csstype").Property.Width<0 | (string & {})>;
+    wrap?: "wrap" | "nowrap";
+} & import("csstype").Properties<0 | (string & {}), string & {}>>>;
 declare const BUTTON_SIZE_STYLES: PropStyles<ButtonProps, "size">;
-declare const BUTTON_THEME_STYLES: () => PropStyles<ButtonProps, "theme">;
 declare const BUTTON_ROUND_STYLES: PropStyles<ButtonProps, "round">;
 declare const BUTTON_WRAP_STYLES: PropStyles<ButtonProps, "wrap">;
 type ButtonOutlinedProps = CommonProps & ClickableProps & ShadowProps & WithIconProps & LinkProps & BorderProps & {
@@ -2574,37 +2650,37 @@ declare const getButtonOutlinedThemeStyles: (customBrandKit?: Partial<BrandKit>)
     default: {
         color: string;
         borderColor: string;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
     general: {
         color: string;
         borderColor: string;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
     success: {
         color: string;
         borderColor: string;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
     warning: {
         color: string;
         borderColor: string;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
     danger: {
         color: string;
         borderColor: string;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
     info: {
         color: string;
         borderColor: string;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
     white: {
-        color: "#FFFFFF";
-        borderColor: "#FFFFFF";
-        backgroundColor: "#000000";
+        color: string;
+        borderColor: string;
+        backgroundColor: string;
     };
 };
 declare const BUTTON_OUTLINED_ROUND_STYLES: PropStyles<ButtonOutlinedProps, "round">;
@@ -2645,35 +2721,35 @@ type ButtonTextProps = CommonProps & ClickableProps & LinkProps & WithIconProps
 declare const BUTTON_TEXT_SIZE_STYLES: PropStyles<ButtonTextProps, "size">;
 declare const getButtonTextThemeStyles: (customBrandKit?: Partial<BrandKit>) => {
     default: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
     link: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
     general: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
     success: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
     warning: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
     danger: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
     info: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
     white: {
-        backgroundColor: "#f3f4f6";
+        backgroundColor: string;
         color: string;
     };
 };
@@ -2778,14 +2854,28 @@ type IconProps = CommonProps & ClickableProps & {
     height?: Properties$0["height"];
 };
 declare const ICON_SIZE_STYLES: PropStyles<IconProps, "size">;
-type ImageProps = CommonProps & {
+declare const IMAGE_ROUND_SHAPE: {
+    readonly circle: "\u30B5\u30FC\u30AF\u30EB";
+    readonly square: "\u30B9\u30AF\u30A8\u30A2";
+    readonly rounded: "\u30E9\u30A6\u30F3\u30C9";
+};
+declare const IMAGE_ASPECT_VARIANTS: {
+    "1/1": string;
+    "2/1": string;
+    "3/2": string;
+    "4/3": string;
+    "16/9": string;
+    "16/5": string;
+    "1/2": string;
+    "2/3": string;
+    "3/4": string;
+    "9/16": string;
+};
+type ImageProps = CommonProps & ClickableProps & AspectProps & BorderProps & {
     image?: string;
     width?: Properties["width"];
-    aspect?: string;
     alt?: string;
-    onClick?: OnClickOperation;
-    eventName?: string;
-    eventValue?: object;
+    shape?: keyof typeof IMAGE_ROUND_SHAPE;
 };
 declare const LAYOUT_DISPLAY_TYPE: readonly [
     "inline-flex",
@@ -2823,39 +2913,39 @@ type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & BorderPro
     columnGap?: Properties["columnGap"];
     width?: Properties["width"];
 };
-type SliderProps = {
+type SliderProps = CommonProps & {
     gap: number;
     itemWidthPercentage: number;
     auto?: boolean;
+    loop?: boolean;
+    hideIndicator?: boolean;
     interval?: number;
 };
+type SliderItemProps = CommonProps & ClickableProps;
 declare const LAYER_TEXT_SIZE: {
-    readonly extra_small: "ExtraSmall";
-    readonly small: "Small";
-    readonly medium: "Medium";
-    readonly large: "Large";
-    readonly extra_large: "ExtraLarge";
-    readonly heading_extra_small: "HeadingExtraSmall";
-    readonly heading_small: "HeadingSmall";
-    readonly heading_medium: "HeadingMedium";
-    readonly heading_large: "HeadingLarge";
-    readonly heading_extra_large: "HeadingExtraLarge";
+    readonly small: "\u672C\u6587 / \u30B9\u30E2\u30FC\u30EB";
+    readonly medium: "\u672C\u6587 / \u30DF\u30C7\u30A3\u30A2\u30E0";
+    readonly large: "\u672C\u6587 / \u30E9\u30FC\u30B8";
+    readonly heading_extra_small: "\u898B\u51FA\u3057 / \u30B9\u30E2\u30FC\u30EB";
+    readonly heading_small: "\u898B\u51FA\u3057 / \u30DF\u30C7\u30A3\u30A2\u30E0";
+    readonly heading_medium: "\u898B\u51FA\u3057 / \u30E9\u30FC\u30B8";
+    readonly heading_large: "\u898B\u51FA\u3057 / \u30A8\u30AF\u30B9\u30C8\u30E9\u30E9\u30FC\u30B8";
 };
 declare const TEXT_THEME: {
-    readonly default: "Default";
-    readonly gray: "Gray";
-    readonly brand: "Brand";
-    readonly success: "Success";
-    readonly warning: "Warning";
-    readonly danger: "Danger";
-    readonly info: "Info";
-    readonly white: "White";
+    readonly default: "\u30C7\u30D5\u30A9\u30EB\u30C8";
+    readonly gray: "\u30B0\u30EC\u30FC";
+    readonly brand: "\u30D6\u30E9\u30F3\u30C9";
+    readonly success: "\u30B5\u30AF\u30BB\u30B9";
+    readonly warning: "\u30EF\u30FC\u30CB\u30F3\u30B0";
+    readonly danger: "\u30A2\u30E9\u30FC\u30C8";
+    readonly info: "\u30A4\u30F3\u30D5\u30A9";
+    readonly white: "\u30DB\u30EF\u30A4\u30C8";
 };
 declare const TEXT_STYLE: {
     readonly normal: "normal";
     readonly italic: "italic";
 };
-type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & CustomizeCssProps & PaddingProps & {
+type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & CustomizeCssProps & FontFamilyProps & PaddingProps & {
     content: string;
     theme?: keyof typeof TEXT_THEME;
     size?: keyof typeof LAYER_TEXT_SIZE;
@@ -2863,7 +2953,6 @@ type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorP
     fontStyle?: Properties["fontStyle"];
     fontSize?: Properties["fontSize"];
     fontWeight?: Properties["fontWeight"];
-    fontFamily?: string;
     lineHeight?: number;
     color?: Properties["color"];
     width?: Properties["width"];
@@ -2896,11 +2985,6 @@ declare const getTextThemeStyles: (customBrandKit?: Partial<BrandKit>) => {
 };
 declare const TEXT_VARIANTS: {
     size: {
-        extra_small: {
-            fontSize: string;
-            lineHeight: number;
-            fontWeight: string;
-        };
         small: {
             fontSize: string;
             lineHeight: number;
@@ -2916,11 +3000,6 @@ declare const TEXT_VARIANTS: {
             lineHeight: number;
             fontWeight: string;
         };
-        extra_large: {
-            fontSize: string;
-            lineHeight: number;
-            fontWeight: string;
-        };
         heading_extra_small: {
             fontSize: string;
             lineHeight: number;
@@ -2941,11 +3020,6 @@ declare const TEXT_VARIANTS: {
             lineHeight: number;
             fontWeight: string;
         };
-        heading_extra_large: {
-            fontSize: string;
-            lineHeight: number;
-            fontWeight: string;
-        };
     };
 };
 declare const TEXT_LINK_SIZE: {
@@ -2967,7 +3041,7 @@ declare const TEXT_LINK_UNDERLINE: {
     readonly on: "\u5E38\u306B\u8868\u793A";
     readonly off: "\u5E38\u306B\u975E\u8868\u793A";
 };
-type TextLinkProps = CommonProps & ClickableProps & LinkProps & WithIconProps & {
+type TextLinkProps = CommonProps & ClickableProps & LinkProps & FontFamilyProps & WithIconProps & {
     label: string;
     // size
     size?: keyof typeof TEXT_LINK_SIZE;
@@ -3001,14 +3075,103 @@ declare const getTextLinkThemeStyles: (customBrandKit?: Partial<BrandKit>) => {
         color: string;
     };
 };
+type ListProps = CommonProps & {
+    gap?: Properties["gap"];
+    borderWidth?: Properties["borderTopWidth"];
+    borderStyle?: Properties["borderTopStyle"];
+    borderColor?: Properties["borderTopColor"];
+    width?: Properties["width"];
+    itemPaddingTop?: Properties["paddingTop"];
+    itemPaddingLeft?: Properties["paddingLeft"];
+    itemPaddingRight?: Properties["paddingRight"];
+    itemPaddingBottom?: Properties["paddingBottom"];
+    itemHeight?: Properties["height"];
+    itemGap?: Properties["gap"];
+};
+type ListItemProps = CommonProps & ClickableProps & {
+    gap?: number;
+};
+declare const LIST_ITEM_CONTEXT_KEY = "ListItemContext";
+type ListItemContext = {
+    paddingTop?: Properties["paddingTop"];
+    paddingLeft?: Properties["paddingLeft"];
+    paddingRight?: Properties["paddingRight"];
+    paddingBottom?: Properties["paddingBottom"];
+    height?: Properties["paddingTop"];
+    borderTopWidth?: Properties["borderTopWidth"];
+    borderTopStyle?: Properties["borderTopStyle"];
+    borderTopColor?: Properties["borderTopColor"];
+    gap?: Properties["gap"];
+};
+type MultiColumnProps = CommonProps & {
+    gap?: Properties["columnGap"];
+    borderWidth?: Properties["borderTopWidth"];
+    borderStyle?: Properties["borderTopStyle"];
+    borderColor?: Properties["borderTopColor"];
+    width?: Properties["width"];
+    itemPaddingTop?: Properties["paddingTop"];
+    itemPaddingLeft?: Properties["paddingLeft"];
+    itemPaddingRight?: Properties["paddingRight"];
+    itemPaddingBottom?: Properties["paddingBottom"];
+    itemHeight?: Properties["height"];
+    itemGap?: Properties["gap"];
+};
+type MultiColumnItemProps = CommonProps & ClickableProps & {
+    gap?: number;
+};
+declare const MULTI_COLUMN_ITEM_CONTEXT_KEY = "MultiColumnItemContext";
+type MultiColumnItemContext = {
+    paddingTop?: Properties["paddingTop"];
+    paddingLeft?: Properties["paddingLeft"];
+    paddingRight?: Properties["paddingRight"];
+    paddingBottom?: Properties["paddingBottom"];
+    height?: Properties["paddingTop"];
+    borderLeftWidth?: Properties["borderTopWidth"];
+    borderLeftStyle?: Properties["borderTopStyle"];
+    borderLeftColor?: Properties["borderTopColor"];
+    gap?: Properties["gap"];
+    innerGap?: Properties["gap"];
+};
+type YoutubeProps = CommonProps & BorderProps & {
+    videoId?: string;
+    loop?: boolean;
+    autoplay?: boolean;
+    mute?: boolean;
+    controls?: boolean;
+    showInfo?: boolean;
+    showSubtitle?: boolean;
+    showFullScreen?: boolean;
+    showRelatedMovies?: boolean;
+    // styles
+    shape?: keyof typeof IMAGE_ROUND_SHAPE;
+    width?: Properties["width"];
+};
+type CountDownProps = CommonProps & {
+    timeLimit?: string;
+    onEnd?: OnClickOperation;
+};
+type CountDownValueType = "day" | "hour" | "minute" | "second";
+type CountDownValueProps = LayerTextProps & {
+    type: CountDownValueType;
+};
+type CountDownValues = {
+    day: string;
+    hour: string;
+    min: string;
+    sec: string;
+};
+type ClipboardProps = CommonProps & {
+    content?: string;
+    copiedEventName?: string;
+    noneTooltip?: boolean;
+};
 type CodeProps = CommonProps & {
     rawHtml?: string;
     rawCss?: string;
     rawScript?: string;
 };
-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, BrandStyleProps, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, WithIconProps, LinkProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, avatarPropsDefault, AVATAR_SIZE_STYLES, BUTTON_SIZE, BUTTON_THEME, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, buttonPropsDefault, getButtonThemeStyles, BUTTON_SIZE_STYLES, BUTTON_THEME_STYLES, BUTTON_ROUND_STYLES, BUTTON_WRAP_STYLES, ButtonOutlinedProps, buttonOutlinedPropsDefault, BUTTON_OUTLINED_SIZE_STYLES, getButtonOutlinedThemeStyles, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_THEME, ButtonTextProps, BUTTON_TEXT_SIZE_STYLES, getButtonTextThemeStyles, 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, getTextThemeStyles, TEXT_VARIANTS, TEXT_LINK_SIZE, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TextLinkProps, TEXT_LINK_SIZE_STYLES, getTextLinkThemeStyles, CodeProps, BrandKit, getBrandKit, useBrandKit, 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, ROUND_VARIANT, PositionProps, MetaProps, CustomizeCssProps, BrandStyleProps, CommonProps, ClickableProps, OverflowProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, WithIconProps, LinkProps, AspectProps, FontFamilyProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, avatarPropsDefault, AVATAR_SIZE_STYLES, BUTTON_SIZE, BUTTON_THEME, BUTTON_VARIANT, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, buttonPropsDefault, getButtonThemeStyles, BUTTON_SIZE_STYLES, BUTTON_ROUND_STYLES, BUTTON_WRAP_STYLES, ButtonOutlinedProps, buttonOutlinedPropsDefault, BUTTON_OUTLINED_SIZE_STYLES, getButtonOutlinedThemeStyles, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_THEME, ButtonTextProps, BUTTON_TEXT_SIZE_STYLES, getButtonTextThemeStyles, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, CLOSE_BUTTON_LABEL_PLACEMENT, CloseButtonProps, ICON_SIZE, ICON_VARIANTS, IconProps, ICON_SIZE_STYLES, IMAGE_ROUND_SHAPE, IMAGE_ASPECT_VARIANTS, ImageProps, LAYOUT_DISPLAY_TYPE, LayoutDisplayType, LAYOUT_DIRECTION, LayoutFlexDirection, LAYOUT_ALIGN, LayoutFlexAlign, LAYOUT_JUSTIFY, LayoutFlexJustify, LayerLayoutProps, SliderProps, SliderItemProps, LAYER_TEXT_SIZE, TEXT_THEME, TEXT_STYLE, LayerTextProps, getTextThemeStyles, TEXT_VARIANTS, TEXT_LINK_SIZE, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TextLinkProps, TEXT_LINK_SIZE_STYLES, getTextLinkThemeStyles, ListProps, ListItemProps, LIST_ITEM_CONTEXT_KEY, ListItemContext, MultiColumnProps, MultiColumnItemProps, MULTI_COLUMN_ITEM_CONTEXT_KEY, MultiColumnItemContext, YoutubeProps, CountDownProps, CountDownValueType, CountDownValueProps, CountDownValues, ClipboardProps, CodeProps, BrandKit, getBrandKit, useBrandKit, ROUND_STYLES, VariantStyles, VariantDefinition, VariantDefinitionGroup, ASPECT_VARIANT, AspectVariantCode, ASPECT_VARIANTS, FontVariantMeta, FONT_FAMILY_VARIANT, FontFamilyVariantCode, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, SHADOW_VARIANT, ShadowVariantCode, SHADOW_VARIANTS };
 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';
@@ -3052,7 +3215,18 @@ export { default as FlexIcon } from './components-flex/icon/Icon.svelte';
 export { default as FlexImage } from './components-flex/image/Image.svelte';
 export { default as FlexLayout } from './components-flex/layout/Layout.svelte';
 export { default as FlexSlider } from './components-flex/slider/Slider.svelte';
+export { default as FlexSliderItem } from './components-flex/slider/SliderItem.svelte';
 export { default as FlexText } from './components-flex/text/Text.svelte';
+export { default as FlexRichText } from './components-flex/rich-text/RichText.svelte';
 export { default as FlexTextLink } from './components-flex/text-link/TextLink.svelte';
 export { default as FlexModal } from './components-flex/modal/Modal.svelte';
 export { default as FlexCode } from './components-flex/code/Code.svelte';
+export { default as FlexList } from './components-flex/list/List.svelte';
+export { default as FlexListItem } from './components-flex/list/ListItem.svelte';
+export { default as FlexMultiColumn } from './components-flex/multi-column/MultiColumn.svelte';
+export { default as FlexMultiColumnItem } from './components-flex/multi-column/MultiColumnItem.svelte';
+export { default as FlexYoutube } from './components-flex/youtube/Youtube.svelte';
+export { default as FlexCountDown } from './components-flex/count-down/CountDown.svelte';
+export { default as FlexCountDownValue } from './components-flex/count-down/CountDownValue.svelte';
+export { default as FlexClipCopy } from './components-flex/clip-copy/ClipCopy.svelte';
+export { default as ThumbnailPreview } from './components-flex/ThumbnailPreview.svelte';