@14ch/svelte-ui 0.0.13 → 0.0.15

package/dist/components/TabItem.svelte

@@ -11,6 +11,7 @@
 	export type TabItemProps = {
 		// 基本プロパティ
 		tabItem: MenuItem;
+		pathPrefix?: string;
 
 		// スタイル/レイアウト
 		textColor: string;
@@ -31,6 +32,7 @@
 	let {
 		// 基本プロパティ
 		tabItem,
+		pathPrefix = '',
 
 		// スタイル/レイアウト
 		textColor,
@@ -47,10 +49,29 @@
 		// 状態/動作
 		isSelected = false
 	}: TabItemProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	// pathPrefixを付与したhrefを計算
+	const hrefWithPrefix = $derived.by(() => {
+		if (!tabItem.href) return undefined;
+		if (!pathPrefix) return tabItem.href;
+
+		// 既にpathPrefixが含まれている場合はそのまま
+		// pathPrefixが完全一致、またはpathPrefix + '/'で始まる場合
+		if (tabItem.href === pathPrefix || tabItem.href.startsWith(`${pathPrefix}/`)) {
+			return tabItem.href;
+		}
+
+		// pathPrefixを付与
+		return `${pathPrefix}${tabItem.href.startsWith('/') ? '' : '/'}${tabItem.href}`;
+	});
 </script>
 
 <a
-	href={tabItem.href}
+	href={hrefWithPrefix}
 	class="tab-item"
 	class:tab-item--selected={isSelected}
 	style="--svelte-ui-tab-item-text-color: {textColor}; --svelte-ui-tab-item-selected-text-color: {selectedTextColor}; --svelte-ui-tab-item-selected-bar-color: {selectedBarColor}"
@@ -70,9 +91,9 @@
 			>
 		</div>
 	{/if}
-	{#if tabItem.title}
+	{#if tabItem.label}
 		<div class="tab-item__label">
-			{tabItem.title}
+			{tabItem.label}
 		</div>
 	{/if}
 </a>

package/dist/components/TabItem.svelte.d.ts

@@ -2,6 +2,7 @@ import type { MenuItem } from '../types/menuItem';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 export type TabItemProps = {
     tabItem: MenuItem;
+    pathPrefix?: string;
     textColor: string;
     selectedTextColor: string;
     selectedBarColor: string;

package/dist/components/Textarea.svelte

@@ -12,9 +12,9 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
+	import type { FocusStyle } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -22,7 +22,7 @@
 	export type TextareaProps = {
 		// 基本プロパティ
 		name?: string;
-		value: string;
+		value: string | null | undefined;
 		placeholder?: string;
 
 		// HTML属性系
@@ -40,7 +40,7 @@
 		minHeight?: string | number | null;
 		maxHeight?: string | number | null;
 		inline?: boolean;
-		focusStyle?: 'background' | 'outline' | 'none';
+		focusStyle?: FocusStyle;
 		fullWidth?: boolean;
 		fullHeight?: boolean;
 		width?: string | number | null;
@@ -180,6 +180,8 @@
 	}: TextareaProps = $props();
 
 	let ref: HTMLTextAreaElement | null = null;
+	let displayTextRef: HTMLDivElement | null = $state(null);
+	let linkTextRef: HTMLDivElement | null = $state(null);
 	let isFocused: boolean = $state(false);
 
 	// =========================================================================
@@ -330,6 +332,18 @@
 		onpointercancel?.(event);
 	};
 
+	// スクロール同期
+	const handleScroll = () => {
+		if (!ref) return;
+		const scrollTop = ref.scrollTop;
+		if (displayTextRef) {
+			displayTextRef.scrollTop = scrollTop;
+		}
+		if (linkify && linkTextRef) {
+			linkTextRef.scrollTop = scrollTop;
+		}
+	};
+
 	// =========================================================================
 	// $derived
 	// =========================================================================
@@ -339,13 +353,14 @@
 
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
-		if (value !== '') {
-			const converted = convertToHtml(value);
-			let html = typeof converted === 'string' ? converted : String(converted ?? '');
+		const normalizedValue = value ?? '';
+		if (normalizedValue !== '') {
+			const converted = convertToHtml(normalizedValue);
+			const html = String(converted ?? '');
 			// 最後の行が空だったら空白を追加（高さ調整のため）
 			const lines = html.split('<br />');
 			if (lines.length > 0 && lines[lines.length - 1] === '') {
-				html += '&nbsp;';
+				return html + '&nbsp;';
 			}
 			return html;
 		} else {
@@ -360,11 +375,12 @@
 
 	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
 	const linkHtmlValue = $derived.by(() => {
-		if (!linkify || value === '') {
+		const normalizedValue = value ?? '';
+		if (!linkify || normalizedValue === '') {
 			return '';
 		}
-		const result = convertToHtmlWithLink(value);
-		return typeof result === 'string' ? result : String(result ?? '');
+		const result = convertToHtmlWithLink(normalizedValue);
+		return String(result ?? '');
 	});
 </script>
 
@@ -386,13 +402,14 @@
 >
 	<!-- autoResize時の表示用要素（HTMLレンダリングで高さ調整） -->
 	<div
+		bind:this={displayTextRef}
 		class="textarea__display-text"
 		data-placeholder={placeholder}
-		style="min-height: {minHeightStyle}; {customStyle}"
+		style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
 	>
 		{@html htmlValue}
 	</div>
-	<div class="textarea__input">
+	<div class="textarea__wrapper">
 		<textarea
 			{id}
 			{name}
@@ -436,32 +453,37 @@
 			onpointerleave={handlePointerLeave}
 			onpointermove={handlePointerMove}
 			onpointercancel={handlePointerCancel}
+			onscroll={handleScroll}
 			{...textareaAttributes}
 			{...restProps}
 		></textarea>
-		<!-- クリアボタン -->
-		{#if clearable && !disabled && !readonly}
-			<div class="textarea__clear-button">
-				<IconButton
-					ariaLabel={clearButtonAriaLabel}
-					color="var(--svelte-ui-textarea-text-color)"
-					onclick={(event) => {
-						event.stopPropagation();
-						clear();
-					}}
-					tabindex={-1}
-					iconFilled={true}
-					{iconVariant}
-					fontSize={18}>cancel</IconButton
-				>
-			</div>
-		{/if}
 	</div>
 	{#if linkify}
-		<div class="textarea__link-text" style="min-height: {minHeightStyle}; {customStyle}">
+		<div
+			bind:this={linkTextRef}
+			class="textarea__link-text"
+			style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
+		>
 			{@html linkHtmlValue}
 		</div>
 	{/if}
+	<!-- クリアボタン -->
+	{#if clearable && !disabled && !readonly}
+		<div class="textarea__clear-button">
+			<IconButton
+				ariaLabel={clearButtonAriaLabel}
+				color="var(--svelte-ui-text-color)"
+				onclick={(event) => {
+					event.stopPropagation();
+					clear();
+				}}
+				tabindex={-1}
+				iconFilled={true}
+				{iconVariant}
+				fontSize={18}>cancel</IconButton
+			>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -479,7 +501,7 @@
 		}
 	}
 
-	.textarea__input {
+	.textarea__wrapper {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -512,6 +534,14 @@
 		opacity: 1;
 		transition: none;
 		cursor: text !important;
+		overflow-y: auto;
+		overflow-x: hidden;
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
+
+		&::-webkit-scrollbar {
+			display: none; /* Chrome, Safari, Opera */
+		}
 
 		&::before {
 			content: '';
@@ -600,7 +630,8 @@
  * ============================================= */
 	.textarea--clearable {
 		textarea,
-		.textarea__display-text {
+		.textarea__display-text,
+		.textarea__link-text {
 			padding-right: var(--svelte-ui-textarea-icon-space);
 		}
 	}
@@ -686,9 +717,13 @@
 		opacity: 0;
 	}
 
-	/* フォーカス時はリンク用オーバーレイも非表示にして（display:none）、リンクが反応しないようにする */
+	/* フォーカス時はリンク用オーバーレイも非表示（opacity: 0）にして、リンクが反応しないようにする */
 	.textarea--focused .textarea__link-text {
-		display: none;
+		opacity: 0;
+	}
+
+	.textarea--focused .textarea__link-text :global(a) {
+		pointer-events: none;
 	}
 
 	/* =============================================
@@ -708,11 +743,12 @@
 			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-textarea-border-color);
 			border: none;
 			border-radius: var(--svelte-ui-textarea-border-radius);
-			color: var(--svelte-ui-textarea-text-color);
 		}
 
 		&.textarea--clearable {
-			textarea {
+			textarea,
+			.textarea__display-text,
+			.textarea__link-text {
 				padding-right: var(--svelte-ui-textarea-icon-space);
 			}
 		}

package/dist/components/Textarea.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusStyle } from '../types/propOptions';
 export type TextareaProps = {
     name?: string;
-    value: string;
+    value: string | null | undefined;
     placeholder?: string;
     id?: string | null;
     tabindex?: number | null;
@@ -17,7 +18,7 @@ export type TextareaProps = {
     minHeight?: string | number | null;
     maxHeight?: string | number | null;
     inline?: boolean;
-    focusStyle?: 'background' | 'outline' | 'none';
+    focusStyle?: FocusStyle;
     fullWidth?: boolean;
     fullHeight?: boolean;
     width?: string | number | null;

package/dist/components/skeleton/SkeletonAvatar.svelte

@@ -4,7 +4,6 @@
 	import SkeletonBox from './SkeletonBox.svelte';
 	import SkeletonText from './SkeletonText.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
-	import type { SkeletonAvatarConfig } from '../../types/skeleton';
 	import {
 		DEFAULT_AVATAR_IMAGE_CONFIG,
 		DEFAULT_TEXT_CONFIG_AVATAR,
@@ -15,37 +14,35 @@
 	// Props, States & Constants
 	// =========================================================================
 	export type SkeletonAvatarProps = {
-		avatarConfig?: Partial<SkeletonAvatarConfig>;
+		avatarImageSize?: string | number;
+		avatarImageRadius?: string | number;
+		textWidth?: string | number;
+		lines?: number;
+		fontSize?: string | number;
+		showName?: boolean;
 		animated?: boolean;
 	};
 
 	let {
-		// 基本プロパティ
-		avatarConfig = {},
+		avatarImageSize = DEFAULT_AVATAR_IMAGE_CONFIG.size,
+		avatarImageRadius = DEFAULT_AVATAR_IMAGE_CONFIG.radius,
+		textWidth = DEFAULT_TEXT_CONFIG_AVATAR.width,
+		lines = DEFAULT_TEXT_CONFIG_AVATAR.lines,
+		fontSize,
+		showName = DEFAULT_AVATAR_CONFIG.showName,
 		animated = true
 	}: SkeletonAvatarProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	// マージされた設定
-	const mergedAvatarImageConfig = $derived({
-		...DEFAULT_AVATAR_IMAGE_CONFIG,
-		...(avatarConfig.avatarImageConfig || {})
-	});
-
-	const mergedTextConfig = $derived({
-		...DEFAULT_TEXT_CONFIG_AVATAR,
-		...(avatarConfig.textConfig || {})
-	});
-
-	const mergedAvatarConfig = $derived({
-		...DEFAULT_AVATAR_CONFIG,
-		...avatarConfig
-	});
-
-	const avatarImageSizeStyle = $derived(getStyleFromNumber(mergedAvatarImageConfig.size));
-	const nameWidthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
+	const avatarImageSizeStyle = $derived(getStyleFromNumber(avatarImageSize));
+	const avatarImageRadiusStyle = $derived(
+		avatarImageRadius
+			? getStyleFromNumber(avatarImageRadius)
+			: 'var(--svelte-ui-skeleton-avatar-image-border-radius)'
+	);
+	const textWidthStyle = $derived(getStyleFromNumber(textWidth));
 </script>
 
 <div class="skeleton-avatar">
@@ -53,20 +50,13 @@
 		<SkeletonBox
 			width={avatarImageSizeStyle}
 			height={avatarImageSizeStyle}
-			radius="var(--svelte-ui-skeleton-avatar-image-border-radius)"
+			radius={avatarImageRadiusStyle}
 			{animated}
-			customStyle={mergedAvatarImageConfig.customStyle}
 		/>
 	</div>
-	{#if mergedAvatarConfig.showName}
+	{#if showName}
 		<div class="skeleton-avatar__text">
-			<SkeletonText
-				textConfig={{
-					width: nameWidthStyle,
-					lines: mergedTextConfig.lines
-				}}
-				{animated}
-			/>
+			<SkeletonText width={textWidthStyle} {lines} {fontSize} {animated} />
 		</div>
 	{/if}
 </div>

package/dist/components/skeleton/SkeletonAvatar.svelte.d.ts

@@ -1,6 +1,10 @@
-import type { SkeletonAvatarConfig } from '../../types/skeleton';
 export type SkeletonAvatarProps = {
-    avatarConfig?: Partial<SkeletonAvatarConfig>;
+    avatarImageSize?: string | number;
+    avatarImageRadius?: string | number;
+    textWidth?: string | number;
+    lines?: number;
+    fontSize?: string | number;
+    showName?: boolean;
     animated?: boolean;
 };
 declare const SkeletonAvatar: import("svelte").Component<SkeletonAvatarProps, {}, "">;

package/dist/components/skeleton/SkeletonButton.svelte

@@ -3,38 +3,40 @@
 <script lang="ts">
 	import SkeletonBox from './SkeletonBox.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
-	import type { SkeletonButtonConfig } from '../../types/skeleton';
 	import { DEFAULT_BUTTON_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
 	export type SkeletonButtonProps = {
-		buttonConfig?: Partial<SkeletonButtonConfig>;
+		width?: string | number;
+		height?: string | number;
+		radius?: string | number;
+		align?: 'left' | 'center' | 'right';
+		customStyle?: string;
 		animated?: boolean;
 	};
 
-	let { buttonConfig = {}, animated = true }: SkeletonButtonProps = $props();
+	let {
+		width = DEFAULT_BUTTON_CONFIG.width,
+		height = DEFAULT_BUTTON_CONFIG.height,
+		radius = DEFAULT_BUTTON_CONFIG.radius,
+		align = DEFAULT_BUTTON_CONFIG.align,
+		customStyle = DEFAULT_BUTTON_CONFIG.customStyle,
+		animated = true
+	}: SkeletonButtonProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	// マージされた設定
-	const mergedButtonConfig = $derived({
-		...DEFAULT_BUTTON_CONFIG,
-		...buttonConfig
-	});
-
-	const widthStyle = $derived(getStyleFromNumber(mergedButtonConfig.width));
-	const heightStyle = $derived(getStyleFromNumber(mergedButtonConfig.height));
+	const widthStyle = $derived(getStyleFromNumber(width));
+	const heightStyle = $derived(getStyleFromNumber(height));
 	const radiusStyle = $derived(
-		typeof mergedButtonConfig.radius === 'number'
-			? `${mergedButtonConfig.radius}px`
-			: mergedButtonConfig.radius
+		typeof radius === 'number' ? `${radius}px` : radius
 	);
 
 	// alignに応じたCSSクラスを生成
-	const alignClass = $derived(`skeleton-button--align-${mergedButtonConfig.align}`);
+	const alignClass = $derived(`skeleton-button--align-${align}`);
 </script>
 
 <div class="skeleton-button {alignClass}">
@@ -43,7 +45,7 @@
 		height={heightStyle}
 		radius={radiusStyle}
 		{animated}
-		customStyle={mergedButtonConfig.customStyle}
+		{customStyle}
 	/>
 </div>
 

package/dist/components/skeleton/SkeletonButton.svelte.d.ts

@@ -1,6 +1,9 @@
-import type { SkeletonButtonConfig } from '../../types/skeleton';
 export type SkeletonButtonProps = {
-    buttonConfig?: Partial<SkeletonButtonConfig>;
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+    align?: 'left' | 'center' | 'right';
+    customStyle?: string;
     animated?: boolean;
 };
 declare const SkeletonButton: import("svelte").Component<SkeletonButtonProps, {}, "">;

package/dist/components/skeleton/SkeletonHeading.svelte

@@ -3,41 +3,38 @@
 <script lang="ts">
 	import SkeletonText from './SkeletonText.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
-	import type { SkeletonHeadingConfig } from '../../types/skeleton';
 	import { DEFAULT_HEADING_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
 	export type SkeletonHeadingProps = {
-		headingConfig?: Partial<SkeletonHeadingConfig>;
+		width?: string | number;
+		fontSize?: string | number;
+		customStyle?: string;
 		animated?: boolean;
 	};
 
-	let { headingConfig = {}, animated = true }: SkeletonHeadingProps = $props();
+	let {
+		width = DEFAULT_HEADING_CONFIG.width,
+		fontSize = DEFAULT_HEADING_CONFIG.fontSize,
+		customStyle = DEFAULT_HEADING_CONFIG.customStyle,
+		animated = true
+	}: SkeletonHeadingProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	// マージされた設定
-	const mergedHeadingConfig = $derived({
-		...DEFAULT_HEADING_CONFIG,
-		...headingConfig
-	});
-
-	const widthStyle = $derived(getStyleFromNumber(mergedHeadingConfig.width));
+	const widthStyle = $derived(getStyleFromNumber(width));
 	const fontSizeStyle = $derived(
-		mergedHeadingConfig.fontSize
-			? typeof mergedHeadingConfig.fontSize === 'string' &&
-				mergedHeadingConfig.fontSize.startsWith('var(')
-				? mergedHeadingConfig.fontSize
-				: getStyleFromNumber(mergedHeadingConfig.fontSize)
-			: DEFAULT_HEADING_CONFIG.fontSize
+		typeof fontSize === 'string' && fontSize.startsWith('var(')
+			? fontSize
+			: getStyleFromNumber(fontSize)
 	);
 </script>
 
-<div class="skeleton-heading" style="font-size: {fontSizeStyle}; {mergedHeadingConfig.customStyle}">
-	<SkeletonText textConfig={{ width: widthStyle }} {animated} />
+<div class="skeleton-heading" style="font-size: {fontSizeStyle}; {customStyle}">
+	<SkeletonText width={widthStyle} {animated} />
 </div>
 
 <style>.skeleton-heading {

package/dist/components/skeleton/SkeletonHeading.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { SkeletonHeadingConfig } from '../../types/skeleton';
 export type SkeletonHeadingProps = {
-    headingConfig?: Partial<SkeletonHeadingConfig>;
+    width?: string | number;
+    fontSize?: string | number;
+    customStyle?: string;
     animated?: boolean;
 };
 declare const SkeletonHeading: import("svelte").Component<SkeletonHeadingProps, {}, "">;

package/dist/components/skeleton/SkeletonMedia.svelte

@@ -4,7 +4,6 @@
 	import SkeletonBox from './SkeletonBox.svelte';
 	import SkeletonText from './SkeletonText.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
-	import type { SkeletonMediaConfig } from '../../types/skeleton';
 	import {
 		DEFAULT_MEDIA_CONFIG,
 		DEFAULT_THUMBNAIL_CONFIG,
@@ -16,47 +15,44 @@
 	// =========================================================================
 	export type SkeletonMediaProps = {
 		width?: string | number;
-		mediaConfig?: Partial<SkeletonMediaConfig>;
+		layout?: 'horizontal' | 'vertical';
+		textWidth?: string | number;
+		lines?: number;
+		fontSize?: string | number;
+		thumbnailWidth?: string | number;
+		thumbnailHeight?: string | number;
+		thumbnailAspectRatio?: string | number;
+		thumbnailRadius?: string | number;
 		animated?: boolean;
 	};
 
-	let { width = '100%', mediaConfig = {}, animated = true }: SkeletonMediaProps = $props();
+	let {
+		width = '100%',
+		layout = DEFAULT_MEDIA_CONFIG.layout,
+		textWidth = DEFAULT_TEXT_CONFIG_MEDIA.width,
+		lines = DEFAULT_TEXT_CONFIG_MEDIA.lines,
+		fontSize,
+		thumbnailWidth = DEFAULT_THUMBNAIL_CONFIG.width,
+		thumbnailHeight,
+		thumbnailAspectRatio,
+		thumbnailRadius = DEFAULT_THUMBNAIL_CONFIG.radius,
+		animated = true
+	}: SkeletonMediaProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	// マージされた設定
-	const mergedMediaConfig = $derived({
-		...DEFAULT_MEDIA_CONFIG,
-		...mediaConfig
-	});
-
-	// レイアウト方向を取得
-	const layoutDirection = $derived(mergedMediaConfig.layout || 'horizontal');
-
-	// マージされた設定
-	const mergedThumbnailConfig = $derived({
-		...DEFAULT_THUMBNAIL_CONFIG,
-		...(mergedMediaConfig.thumbnailConfig || {})
-	});
-
-	const mergedTextConfig = $derived({
-		...DEFAULT_TEXT_CONFIG_MEDIA,
-		...(mergedMediaConfig.textConfig || {})
-	});
+	const layoutDirection = $derived(layout || 'horizontal');
 
 	const widthStyle = $derived(getStyleFromNumber(width));
-	const thumbnailWidthStyle = $derived(getStyleFromNumber(mergedThumbnailConfig.width));
-	const thumbnailHeightStyle = $derived(
-		mergedThumbnailConfig.height ? getStyleFromNumber(mergedThumbnailConfig.height) : ''
-	);
-	const textWidthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
+	const thumbnailWidthStyle = $derived(getStyleFromNumber(thumbnailWidth));
+	const thumbnailHeightStyle = $derived(thumbnailHeight ? getStyleFromNumber(thumbnailHeight) : '');
+	const textWidthStyle = $derived(getStyleFromNumber(textWidth));
 
 	// heightとaspectRatioの優先順位を制御
-	const finalThumbnailHeight = $derived(mergedThumbnailConfig.height ? thumbnailHeightStyle : '');
-	const finalThumbnailAspectRatio = $derived(
-		mergedThumbnailConfig.height ? undefined : mergedThumbnailConfig.aspectRatio
-	);
+	const finalThumbnailHeight = $derived(thumbnailHeight ? thumbnailHeightStyle : '');
+	const finalThumbnailAspectRatio = $derived(thumbnailHeight ? undefined : thumbnailAspectRatio);
+	const thumbnailRadiusStyle = $derived(thumbnailRadius ? getStyleFromNumber(thumbnailRadius) : '');
 </script>
 
 <div
@@ -68,18 +64,10 @@
 		width={thumbnailWidthStyle}
 		{...finalThumbnailHeight && { height: finalThumbnailHeight }}
 		aspectRatio={finalThumbnailAspectRatio}
-		radius={mergedThumbnailConfig.radius}
-		{animated}
-		customStyle={mergedThumbnailConfig.customStyle}
-	/>
-	<SkeletonText
-		textConfig={{
-			width: textWidthStyle,
-			lines: mergedTextConfig.lines,
-			fontSize: mergedTextConfig.fontSize
-		}}
+		radius={thumbnailRadiusStyle}
 		{animated}
 	/>
+	<SkeletonText width={textWidthStyle} {lines} {fontSize} {animated} />
 </div>
 
 <style>