@plaidev/karte-action-sdk 1.1.270-29331701.75b2b3a0a → 1.1.270-29364900.6ab45349e

package/dist/svelte5/components-flex/text/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { BackgroundColorProps, BorderProps, ClickableProps, CommonProps, CustomizeCssProps, LinkProps, PaddingProps, RadiusProps, WithIconProps, FontFamilyProps } from "../props.js";
+import type { BackgroundColorProps, BorderProps, ClickableProps, CommonProps, CustomizeCssProps, LinkProps, PaddingProps, RadiusProps, WithIconProps, FontFamilyProps, FlexComponentProps } from "../props.js";
 export declare const LAYER_TEXT_SIZE: {
 	readonly small: "本文 / スモール";
 	readonly medium: "本文 / ミディアム";
@@ -23,8 +23,8 @@ export declare const TEXT_STYLE: {
 	readonly normal: "normal";
 	readonly italic: "italic";
 };
-export type LayerTextProps = CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & CustomizeCssProps & FontFamilyProps & PaddingProps & {
-	content: string;
+export type LayerTextProps = FlexComponentProps<CommonProps & BorderProps & RadiusProps & BackgroundColorProps & WithIconProps & LinkProps & ClickableProps & CustomizeCssProps & FontFamilyProps & PaddingProps & {
+	content?: string;
 	theme?: keyof typeof TEXT_THEME;
 	size?: keyof typeof LAYER_TEXT_SIZE;
 	align?: Properties["textAlign"];
@@ -36,4 +36,4 @@ export type LayerTextProps = CommonProps & BorderProps & RadiusProps & Backgroun
 	lineClamp?: number;
 	color?: Properties["color"];
 	width?: Properties["width"];
-};
+}>;

package/dist/svelte5/components-flex/text-link/TextLink.css.d.ts

@@ -0,0 +1,4 @@
+import { TextLinkProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: TextLinkProps, brandKit?: BrandKit) => string;
+export default _default;

package/dist/svelte5/components-flex/text-link/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { ClickableProps, CommonProps, LinkProps, WithIconProps, FontFamilyProps } from "../props.js";
+import type { ClickableProps, CommonProps, LinkProps, WithIconProps, FontFamilyProps, FlexComponentProps } from "../props.js";
 export declare const TEXT_LINK_SIZE: {
 	readonly small: "Small";
 	readonly medium: "Medium";
@@ -19,8 +19,8 @@ export declare const TEXT_LINK_UNDERLINE: {
 	readonly on: "常に表示";
 	readonly off: "常に非表示";
 };
-export type TextLinkProps = CommonProps & ClickableProps & LinkProps & FontFamilyProps & WithIconProps & {
-	label: string;
+export type TextLinkProps = FlexComponentProps<CommonProps & ClickableProps & LinkProps & FontFamilyProps & WithIconProps & {
+	label?: string;
 	size?: keyof typeof TEXT_LINK_SIZE;
 	lineHeight?: number;
 	fontSize?: Properties["fontSize"];
@@ -28,4 +28,4 @@ export type TextLinkProps = CommonProps & ClickableProps & LinkProps & FontFamil
 	color?: Properties["color"];
 	underline?: keyof typeof TEXT_LINK_UNDERLINE;
 	fontWeight?: Properties["fontWeight"];
-};
+}>;

package/dist/svelte5/components-flex/youtube/types.d.ts

@@ -1,7 +1,7 @@
-import type { CommonProps, BorderProps } from "../props.js";
+import type { CommonProps, BorderProps, FlexComponentProps } from "../props.js";
 import type { IMAGE_ROUND_SHAPE } from "../image/types.js";
 import type { Properties } from "csstype";
-export type YoutubeProps = CommonProps & BorderProps & {
+export type YoutubeProps = FlexComponentProps<CommonProps & BorderProps & {
 	videoId?: string;
 	loop?: boolean;
 	autoplay?: boolean;
@@ -13,4 +13,4 @@ export type YoutubeProps = CommonProps & BorderProps & {
 	showRelatedMovies?: boolean;
 	shape?: keyof typeof IMAGE_ROUND_SHAPE;
 	width?: Properties["width"];
-};
+}>;

package/dist/svelte5/functions.d.ts

@@ -1,4 +1,4 @@
-import type { OnClickOperation, AnimationStyle } from "./prop.js";
+import { OnClickOperation, AnimationStyle, SliderTarget } from "./prop.js";
 import type { CloseTrigger } from "./modal.js";
 /** @internal */
 export declare const none: () => () => void;
@@ -17,6 +17,8 @@ export declare const submitFormProgress: (to: string) => () => void;
 /** @internal */
 export declare const submitFormFinal: (to: string) => () => void;
 /** @internal */
+export declare const slideTo: (name: string, target: SliderTarget | string, slideNumber: number | undefined, _hiddenIsDisabled: boolean | undefined) => () => void;
+/** @internal */
 export declare const bootChat: (hide_launcher: boolean, placement_pc: string, placement_mobile: string, horizontal_spacing_pc: number, horizontal_spacing_mobile: number, vertical_spacing_pc: number, vertical_spacing_mobile: number, theme_color: string, header_title: string, header_description: string, launcher_image: string) => () => void;
 /** @internal */
 export declare const execOnClickOperation: (onClickOperation: OnClickOperation) => void;
@@ -61,7 +63,7 @@ interface CustomAnimationOptions {
 *
 * @internal
 */
-export declare function customAnimation(node: Element, { transforms, animationStyle, delay, duration }: CustomAnimationOptions): {
+export declare function customAnimation(_node: Element, { transforms, animationStyle, delay, duration }: CustomAnimationOptions): {
 	delay?: undefined;
 	duration?: undefined;
 	easing?: undefined;

package/dist/svelte5/hooks/useClickable.d.ts

@@ -1,7 +1,9 @@
 import type { ClickableProps } from "../components-flex/props.js";
-declare const useClickable: ({ eventValue, eventName, onClick, element }: ClickableProps) => {
+import { Readable } from "svelte/store";
+type UseClickableResult = {
 	element: string;
 	attributes: Record<string, any>;
 	handleClick: (e: MouseEvent) => void;
 };
+declare function useClickable(props?: ClickableProps): Readable<UseClickableResult>;
 export default useClickable;

package/dist/svelte5/hydrate/actionEvent.d.ts

@@ -12,11 +12,20 @@ export declare const ACTION_CHANGE_STATE_EVENT: string;
 /** @internal */
 export declare const send_event: (event_name: string, values?: any) => void;
 /** @internal */
+export declare const toStateChangedData: (newState: string, oldState: string) => {
+	newState: string;
+	oldState: string;
+	newVal: number;
+	oldVal: number;
+};
+/** @internal */
 export declare const publish_edge: (topic: string, values?: any) => void;
 /** @internal */
 export declare const initialize: (setting?: ActionSetting) => () => void;
 /** @internal */
 export declare const finalize: () => void;
+/** @internal */
+export declare function dispatchActionEvent(eventName: string, data?: object): void;
 /**
 * Dispatch the event to destroy KARTE action
 *

package/dist/svelte5/hydrate/components-flex/avatar/Avatar.css.d.ts

@@ -0,0 +1,3 @@
+import { AvatarProps } from "./types.js";
+declare const _default: (layerId: string, props: AvatarProps) => string;
+export default _default;

package/dist/svelte5/hydrate/components-flex/avatar/types.d.ts

@@ -1,5 +1,5 @@
-import type { BorderProps, ClickableProps, CommonProps, PaddingProps } from "../props.js";
-import type { Properties } from "csstype";
+import type { BorderProps, ClickableProps, CommonProps, FlexComponentProps, PaddingProps } from "../props.js";
+import { Properties } from "csstype";
 export declare const AVATAR_SIZE: {
 	readonly extra_small: "XS（48 x 48）";
 	readonly small: "S（64 x 64）";
@@ -12,7 +12,7 @@ export declare const AVATAR_SHAPE: {
 	readonly square: "スクエア";
 	readonly rounded: "ラウンド";
 };
-export type AvatarProps = CommonProps & ClickableProps & PaddingProps & BorderProps & {
+export type AvatarProps = FlexComponentProps<CommonProps & ClickableProps & PaddingProps & BorderProps & {
 	size?: keyof typeof AVATAR_SIZE | number;
 	width?: Properties["width"];
 	height?: Properties["height"];
@@ -20,5 +20,4 @@ export type AvatarProps = CommonProps & ClickableProps & PaddingProps & BorderPr
 	image?: string;
 	caption?: string;
 	alt?: string;
-};
-export declare const avatarPropsDefault: AvatarProps;
+}>;

package/dist/svelte5/hydrate/components-flex/button/Button.css.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: ButtonProps, brandKit?: BrandKit) => string;
+export default _default;

package/dist/svelte5/hydrate/components-flex/button/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps, RadiusProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps, RadiusProps, FlexComponentProps } from "../props.js";
 export declare const BUTTON_SIZE: {
 	readonly extra_small: "エクストラ スモール";
 	readonly small: "スモール";
@@ -37,7 +37,7 @@ export declare const BUTTON_ICON_ANGLE: {
 	readonly row: "左側";
 	readonly "row-reverse": "右側";
 };
-export type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & RadiusProps & BorderProps & {
+export type ButtonProps = FlexComponentProps<CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & RadiusProps & BorderProps & {
 	label?: string;
 	size?: keyof typeof BUTTON_SIZE | string;
 	height?: Properties["height"];
@@ -53,5 +53,5 @@ export type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps
 	round?: keyof typeof BUTTON_ROUND;
 	width?: Properties["width"];
 	wrap?: "wrap" | "nowrap";
-};
+}>;
 export declare const buttonPropsDefault: ButtonProps;

package/dist/svelte5/hydrate/components-flex/button-outlined/types.d.ts

@@ -1,7 +1,7 @@
 import type { Properties } from "csstype";
-import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps, FlexComponentProps } from "../props.js";
 import type { BUTTON_THEME, BUTTON_ROUND, BUTTON_SIZE } from "../button/types.js";
-export type ButtonOutlinedProps = CommonProps & ClickableProps & ShadowProps & WithIconProps & LinkProps & BorderProps & {
+export type ButtonOutlinedProps = FlexComponentProps<CommonProps & ClickableProps & ShadowProps & WithIconProps & LinkProps & BorderProps & {
 	label?: string;
 	size?: keyof typeof BUTTON_SIZE;
 	height?: Properties["height"];
@@ -16,5 +16,5 @@ export type ButtonOutlinedProps = CommonProps & ClickableProps & ShadowProps & W
 	round?: keyof typeof BUTTON_ROUND;
 	fontWeight?: Properties["fontWeight"];
 	wrap?: "wrap" | "nowrap";
-};
+}>;
 export declare const buttonOutlinedPropsDefault: ButtonOutlinedProps;

package/dist/svelte5/hydrate/components-flex/button-text/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { ClickableProps, CommonProps, LinkProps, WithIconProps } from "../props.js";
+import type { ClickableProps, CommonProps, LinkProps, WithIconProps, FlexComponentProps } from "../props.js";
 import type { BUTTON_ROUND } from "../button/types.js";
 export declare const BUTTON_TEXT_SIZE: {
 	readonly small: "Small";
@@ -16,7 +16,7 @@ export declare const BUTTON_TEXT_THEME: {
 	readonly info: "Info";
 	readonly white: "White";
 };
-export type ButtonTextProps = CommonProps & ClickableProps & LinkProps & WithIconProps & {
+export type ButtonTextProps = FlexComponentProps<CommonProps & ClickableProps & LinkProps & WithIconProps & {
 	label?: string;
 	size?: keyof typeof BUTTON_TEXT_SIZE;
 	height?: Properties["height"];
@@ -30,4 +30,4 @@ export type ButtonTextProps = CommonProps & ClickableProps & LinkProps & WithIco
 	width?: Properties["width"];
 	round?: keyof typeof BUTTON_ROUND;
 	wrap?: "wrap" | "nowrap";
-};
+}>;

package/dist/svelte5/hydrate/components-flex/clip-copy/ClipCopy.css.d.ts

@@ -0,0 +1,3 @@
+import { ClipboardProps } from "./types.js";
+declare const _default: (layerId: string, _props: ClipboardProps) => string;
+export default _default;

package/dist/svelte5/hydrate/components-flex/clip-copy/types.d.ts

@@ -1,6 +1,6 @@
-import type { CommonProps } from "../props.js";
-export type ClipboardProps = CommonProps & {
+import type { CommonProps, FlexComponentProps } from "../props.js";
+export type ClipboardProps = FlexComponentProps<CommonProps & {
 	content?: string;
 	copiedEventName?: string;
 	noneTooltip?: boolean;
-};
+}>;

package/dist/svelte5/hydrate/components-flex/close-button/types.d.ts

@@ -1,4 +1,4 @@
-import type { BorderProps, ClickableProps, CommonProps, BackgroundColorProps, ColorProps, PaddingProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, BackgroundColorProps, ColorProps, PaddingProps, FlexComponentProps } from "../props.js";
 import type { Properties } from "csstype";
 import type { TEXT_THEME } from "../text/types.js";
 export declare const CLOSE_BUTTON_PLACEMENT: {
@@ -16,7 +16,7 @@ export declare const CLOSE_BUTTON_LABEL_PLACEMENT: {
 	readonly right: "right";
 	readonly left: "left";
 };
-export type CloseButtonProps = CommonProps & BackgroundColorProps & ClickableProps & ColorProps & PaddingProps & BorderProps & {
+export type CloseButtonProps = FlexComponentProps<CommonProps & BackgroundColorProps & ClickableProps & ColorProps & PaddingProps & BorderProps & {
 	size?: number;
 	placement?: keyof typeof CLOSE_BUTTON_PLACEMENT;
 	round?: keyof typeof CLOSE_BUTTON_ROUND;
@@ -29,4 +29,4 @@ export type CloseButtonProps = CommonProps & BackgroundColorProps & ClickablePro
 	right?: Properties["right"];
 	left?: Properties["left"];
 	bottom?: Properties["bottom"];
-};
+}>;

package/dist/svelte5/hydrate/components-flex/code/types.d.ts

@@ -1,6 +1,6 @@
-import type { CommonProps } from "../props.js";
-export type CodeProps = CommonProps & {
+import type { CommonProps, FlexComponentProps } from "../props.js";
+export type CodeProps = FlexComponentProps<CommonProps & {
 	rawHtml?: string;
 	rawCss?: string;
 	rawScript?: string;
-};
+}>;

package/dist/svelte5/hydrate/components-flex/count-down/types.d.ts

@@ -1,14 +1,14 @@
-import type { CommonProps } from "../props.js";
+import type { CommonProps, FlexComponentProps } from "../props.js";
 import type { OnClickOperation } from "../../prop.js";
 import type { LayerTextProps } from "../text/types.js";
-export type CountDownProps = CommonProps & {
+export type CountDownProps = FlexComponentProps<CommonProps & {
 	timeLimit?: string;
 	onEnd?: OnClickOperation;
-};
+}>;
 export type CountDownValueType = "day" | "hour" | "minute" | "second";
-export type CountDownValueProps = LayerTextProps & {
+export type CountDownValueProps = FlexComponentProps<LayerTextProps & {
 	type: CountDownValueType;
-};
+}>;
 export type CountDownValues = {
 	day: number;
 	hour: number;

package/dist/svelte5/hydrate/components-flex/css.d.ts

@@ -0,0 +1,5 @@
+import { Properties } from "csstype";
+import { ResponsiveSetting } from "./responsive.js";
+export declare function createComponentRawCss(layerId: string, define: (style: (selector: string, styles: Properties) => string) => string[]): string;
+export declare function toResponsiveSelector(responsiveSetting: ResponsiveSetting<any>, body: string): string;
+export declare function toStyleTag(css: string): string;

package/dist/svelte5/hydrate/components-flex/embed/types.d.ts

@@ -1,7 +1,7 @@
-import type { CommonProps, AspectProps } from "../props.js";
+import type { CommonProps, AspectProps, FlexComponentProps } from "../props.js";
 import type { Properties } from "csstype";
-export type EmbedProps = CommonProps & AspectProps & {
+export type EmbedProps = FlexComponentProps<CommonProps & AspectProps & {
 	iframe?: string;
 	width?: Properties["width"];
 	height?: Properties["height"];
-};
+}>;

package/dist/svelte5/hydrate/components-flex/form/types.d.ts

@@ -1,9 +1,6 @@
-import type { CommonProps } from "../props.js";
+import type { CommonProps, FlexComponentProps } from "../props.js";
 import { Properties } from "csstype";
 import { FormStoreValidation } from "../form.js";
-export type FormProps = CommonProps & {
-	fields: FormField[];
-};
 export declare const FORM_FIELD_LABEL_SIZE: {
 	readonly small: "スモール";
 	readonly medium: "ミディアム";
@@ -23,29 +20,7 @@ export declare const FORM_IDENTIFY_FIELD_TYPE: {
 	readonly last_name: "名前（姓）";
 	readonly address: "住所";
 };
-type FieldProps = CommonProps & {
-	required?: boolean;
-	defaultValue?: string | string[];
-	validations?: FormStoreValidation[];
-	direction?: "row" | "column";
-	gap?: Properties["rowGap"];
-	showLabel?: boolean;
-	label?: string;
-	labelWidth?: Properties["width"];
-	labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
-	labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
-};
-export type FormFieldProps = CommonProps & FieldProps & {
-	fieldName?: string;
-	fieldType?: FormFieldType;
-	isIdentify?: boolean;
-};
 export type FormIdentifyFieldType = keyof typeof FORM_IDENTIFY_FIELD_TYPE;
-export type FormIdentifyFieldProps = CommonProps & FieldProps & {
-	identifyType: FormIdentifyFieldType;
-	inputProps?: FormInputStyleProps;
-	checkerProps?: FormCheckerStyleProps & FormOptionsProps;
-};
 export declare const FORM_FIELD_TYPE: {
 	readonly INPUT: "input";
 	readonly SELECT: "select";
@@ -98,21 +73,46 @@ export type FormInputStyleProps = {
 	fontColor?: string;
 	placeholderColor?: string;
 };
-export type FormInputProps = FormFieldProps & FormInputStyleProps & {
-	inputType?: FormInputType;
+export type FormProps = FlexComponentProps<CommonProps & {
+	fields: FormField[];
+}>;
+type FieldProps = CommonProps & {
+	required?: boolean;
+	defaultValue?: string | string[];
+	validations?: FormStoreValidation[];
+	direction?: "row" | "column";
+	gap?: Properties["rowGap"];
+	showLabel?: boolean;
+	label?: string;
+	labelWidth?: Properties["width"];
+	labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
+	labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
 };
-export type FormTextareaProps = FormFieldProps & FormInputStyleProps & {
+export type FormFieldProps = FlexComponentProps<CommonProps & FieldProps & {
+	fieldName?: string;
+	fieldType?: FormFieldType;
+	isIdentify?: boolean;
+}>;
+export type FormIdentifyFieldProps = FlexComponentProps<CommonProps & FieldProps & {
+	identifyType: FormIdentifyFieldType;
+	inputProps?: FormInputStyleProps;
+	checkerProps?: FormCheckerStyleProps & FormOptionsProps;
+}>;
+export type FormInputProps = FlexComponentProps<FormFieldProps & FormInputStyleProps & {
+	inputType?: FormInputType;
+}>;
+export type FormTextareaProps = FlexComponentProps<FormFieldProps & FormInputStyleProps & {
 	rows?: number;
-};
+}>;
 export type FormOptionsProps = {
 	options?: {
 		label: string;
 		value: string;
 	}[];
 };
-export type FormSelectProps = FormFieldProps & FormInputStyleProps & FormOptionsProps & {
+export type FormSelectProps = FlexComponentProps<FormFieldProps & FormInputStyleProps & FormOptionsProps & {
 	variant?: FormFieldVariant;
-};
+}>;
 export type FormCheckerStyleProps = {
 	variant?: FormFieldVariantForChecker;
 	layout?: "vertical" | "horizontal" | "grid";
@@ -125,7 +125,7 @@ export type FormCheckerStyleProps = {
 	backgroundColor?: string;
 	size?: FormFieldSize;
 };
-export type FormCheckboxesProps = FormFieldProps & FormOptionsProps & FormCheckerStyleProps;
-export type FormRadiosProps = FormFieldProps & FormOptionsProps & FormCheckerStyleProps;
-export type FormBooleanProps = FormFieldProps & FormOptionsProps & FormCheckerStyleProps;
+export type FormCheckboxesProps = FlexComponentProps<FormFieldProps & FormOptionsProps & FormCheckerStyleProps>;
+export type FormRadiosProps = FlexComponentProps<FormFieldProps & FormOptionsProps & FormCheckerStyleProps>;
+export type FormBooleanProps = FlexComponentProps<FormFieldProps & FormOptionsProps & FormCheckerStyleProps>;
 export {};

package/dist/svelte5/hydrate/components-flex/icon/Icon.css.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: IconProps, _brandKit?: BrandKit) => string;
+export default _default;

package/dist/svelte5/hydrate/components-flex/icon/types.d.ts

@@ -1,4 +1,4 @@
-import type { ClickableProps, CommonProps } from "../props.js";
+import type { ClickableProps, CommonProps, FlexComponentProps } from "../props.js";
 import type { Properties } from "preact/src/jsx-csstype";
 export declare const ICON_SIZE: {
 	[key: string]: {
@@ -9,10 +9,10 @@ export declare const ICON_SIZE: {
 export declare const ICON_VARIANTS: {
 	[key: string]: any;
 };
-export type IconProps = CommonProps & ClickableProps & {
-	variant: string;
+export type IconProps = FlexComponentProps<CommonProps & ClickableProps & {
+	variant?: string;
 	size?: keyof typeof ICON_SIZE;
 	color?: Properties["color"];
 	width?: Properties["width"];
 	height?: Properties["height"];
-};
+}>;

package/dist/svelte5/hydrate/components-flex/image/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps, PaddingProps } from "../props.js";
+import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps, PaddingProps, FlexComponentProps } from "../props.js";
 export declare const IMAGE_ROUND_SHAPE: {
 	readonly circle: "ラウンド / ミディアム";
 	readonly rounded: "ラウンド / スモール";
@@ -17,10 +17,10 @@ export declare const IMAGE_ASPECT_VARIANTS: {
 	"3/4": string;
 	"9/16": string;
 };
-export type ImageProps = CommonProps & ClickableProps & AspectProps & RadiusProps & PaddingProps & BorderProps & {
+export type ImageProps = FlexComponentProps<CommonProps & ClickableProps & AspectProps & RadiusProps & PaddingProps & BorderProps & {
 	image?: string;
 	width?: Properties["width"];
 	height?: Properties["height"];
 	alt?: string;
 	shape?: keyof typeof IMAGE_ROUND_SHAPE;
-};
+}>;

package/dist/svelte5/hydrate/components-flex/layout/Layout.css.d.ts

@@ -0,0 +1,4 @@
+import { LayerLayoutProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: LayerLayoutProps, brandKit?: BrandKit) => string;
+export default _default;

package/dist/svelte5/hydrate/components-flex/layout/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps, BackgroundProps, FlexComponentProps } from "../props.js";
 export declare const LAYOUT_DISPLAY_TYPE: readonly ["inline-flex", "flex", "block"];
 export type LayoutDisplayType = (typeof LAYOUT_DISPLAY_TYPE)[number];
 export declare const LAYOUT_DIRECTION: readonly ["column", "column-reverse", "row", "row-reverse"];
@@ -8,7 +8,7 @@ export declare const LAYOUT_ALIGN: readonly ["flex-start", "center", "flex-end",
 export type LayoutFlexAlign = (typeof LAYOUT_ALIGN)[number];
 export declare const LAYOUT_JUSTIFY: readonly ["flex-start", "center", "flex-end", "space-between"];
 export type LayoutFlexJustify = (typeof LAYOUT_JUSTIFY)[number];
-export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & PaddingProps & {
+export type LayerLayoutProps = FlexComponentProps<CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & PaddingProps & {
 	display?: LayoutDisplayType;
 	direction?: LayoutFlexDirection;
 	align?: LayoutFlexAlign;
@@ -19,4 +19,4 @@ export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & Bo
 	width?: Properties["width"];
 	maxWidth?: Properties["maxWidth"];
 	height?: Properties["height"];
-};
+}>;

package/dist/svelte5/hydrate/components-flex/list/types.d.ts

@@ -1,6 +1,6 @@
 import type { Properties } from "csstype";
-import type { CommonProps, ClickableProps, ActionTableProps, BorderSingleProps } from "../props.js";
-export type ListProps = CommonProps & BorderSingleProps & ActionTableProps & {
+import type { CommonProps, ClickableProps, ActionTableProps, BorderSingleProps, FlexComponentProps } from "../props.js";
+export type ListProps = FlexComponentProps<CommonProps & BorderSingleProps & ActionTableProps & {
 	gap?: Properties["gap"];
 	width?: Properties["width"];
 	itemPaddingTop?: Properties["paddingTop"];
@@ -9,10 +9,10 @@ export type ListProps = CommonProps & BorderSingleProps & ActionTableProps & {
 	itemPaddingBottom?: Properties["paddingBottom"];
 	itemHeight?: Properties["height"];
 	itemGap?: Properties["gap"];
-};
-export type ListItemProps = CommonProps & ClickableProps & {
+}>;
+export type ListItemProps = FlexComponentProps<CommonProps & ClickableProps & {
 	gap?: number;
-};
+}>;
 export declare const LIST_ITEM_CONTEXT_KEY = "ListItemContext";
 export type ListItemContext = {
 	paddingTop?: Properties["paddingTop"];

package/dist/svelte5/hydrate/components-flex/modal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps, PaddingProps } from "../props.js";
-export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & PaddingProps & BackgroundProps & {
+import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps, PaddingProps, FlexComponentProps } from "../props.js";
+export type FrameModalProps = FlexComponentProps<CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & PaddingProps & BackgroundProps & {
 	width?: Properties["width"];
-};
+}>;

package/dist/svelte5/hydrate/components-flex/multi-column/types.d.ts

@@ -1,6 +1,6 @@
 import type { Properties } from "csstype";
-import type { CommonProps, ClickableProps, BorderSingleProps } from "../props.js";
-export type MultiColumnProps = CommonProps & BorderSingleProps & {
+import type { CommonProps, ClickableProps, BorderSingleProps, FlexComponentProps } from "../props.js";
+export type MultiColumnProps = FlexComponentProps<CommonProps & BorderSingleProps & {
 	gap?: Properties["columnGap"];
 	width?: Properties["width"];
 	itemPaddingTop?: Properties["paddingTop"];
@@ -9,10 +9,10 @@ export type MultiColumnProps = CommonProps & BorderSingleProps & {
 	itemPaddingBottom?: Properties["paddingBottom"];
 	itemHeight?: Properties["height"];
 	itemGap?: Properties["gap"];
-};
-export type MultiColumnItemProps = CommonProps & ClickableProps & {
+}>;
+export type MultiColumnItemProps = FlexComponentProps<CommonProps & ClickableProps & {
 	gap?: number;
-};
+}>;
 export declare const MULTI_COLUMN_ITEM_CONTEXT_KEY = "MultiColumnItemContext";
 export type MultiColumnItemContext = {
 	paddingTop?: Properties["paddingTop"];

package/dist/svelte5/hydrate/components-flex/props.d.ts

@@ -4,6 +4,10 @@ import type { BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET } from "./button/types.js";
 import type { BrandKit } from "./brand-kit.js";
 import type { AspectVariantCode, FontFamilyVariantCode, ShadowVariantCode, BackgroundColorVariantCode } from "./variants.js";
 import type { TEXT_THEME } from "./text/types.js";
+import { type ResponsiveSetting } from "./responsive.js";
+export type FlexComponentProps<T extends object> = T & {
+	responsiveSettings?: ResponsiveSetting<T>[];
+};
 type PositionPlaceProps = {
 	top?: Properties["top"];
 	left?: Properties["left"];
@@ -31,7 +35,10 @@ export type BrandStyleProps = {
 export type ActionTableProps = {
 	actionTableKey?: string;
 };
-export type CommonProps = MetaProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
+export type VisibilityProps = {
+	hidden?: boolean;
+};
+export type CommonProps = MetaProps & VisibilityProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
 export type ClickableProps = {
 	onClick?: OnClickOperation;
 	eventName?: string;

package/dist/svelte5/hydrate/components-flex/responsive.d.ts

@@ -0,0 +1,26 @@
+import { FlexComponentProps } from "./props.js";
+import { Readable } from "svelte/store";
+export declare const USER_AGENT_VARIANT: Record<string, {
+	regex: RegExp;
+}>;
+export type MediaQueryCondition = {
+	range?: {
+		min?: number;
+		max?: number;
+	};
+	raw?: string;
+	orientation?: "portrait" | "landscape";
+};
+export type UserAgentVariant = keyof typeof USER_AGENT_VARIANT;
+export type UserAgentCondition = {
+	variants?: UserAgentVariant[];
+	regex?: string;
+};
+export type ResponsiveSetting<T extends object> = {
+	id: string;
+	label: string;
+	mediaQueryCondition?: MediaQueryCondition;
+	userAgentCondition?: UserAgentCondition;
+	props: Partial<T>;
+};
+export declare function useResponsiveProps<T extends object>(props: FlexComponentProps<T>): Readable<T>;

package/dist/svelte5/hydrate/components-flex/slider/types.d.ts

@@ -1,10 +1,11 @@
-import type { CommonProps, ClickableProps } from "../props.js";
-export type SliderProps = CommonProps & {
+import type { CommonProps, ClickableProps, FlexComponentProps } from "../props.js";
+export type SliderProps = FlexComponentProps<CommonProps & {
+	name?: string;
 	gap: number;
 	itemWidthPercentage: number;
 	auto?: boolean;
 	loop?: boolean;
 	hideIndicator?: boolean;
 	interval?: number;
-};
-export type SliderItemProps = CommonProps & ClickableProps;
+}>;
+export type SliderItemProps = FlexComponentProps<CommonProps & ClickableProps>;

package/dist/svelte5/hydrate/components-flex/text/Text.css.d.ts

@@ -0,0 +1,4 @@
+import { LayerTextProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: LayerTextProps, brandKit?: BrandKit) => string;
+export default _default;