windmill-components 1.558.3 → 1.596.0

package/package/components/chat/ChatMessage.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">import { Markdown } from 'svelte-exmarkdown';
+import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+import { Loader2, CheckCircle2, AlertTriangle } from 'lucide-svelte';
+import CodeDisplay from '../copilot/chat/script/CodeDisplay.svelte';
+import LinkRenderer from '../copilot/chat/LinkRenderer.svelte';
+import DisplayResult from '../DisplayResult.svelte';
+import { workspaceStore } from '../../stores';
+let { role, content, loading = false, success = undefined, stepName = undefined, enableMarkdown = true, enableS3Display = true, customCss = undefined } = $props();
+// Parse S3 objects if enabled
+const s3Object = $derived.by(() => {
+    if (!enableS3Display || role !== 'assistant' || !content)
+        return undefined;
+    try {
+        const parsed = JSON.parse(content);
+        if (parsed?.type === 'windmill_s3_object' && parsed?.s3) {
+            return parsed;
+        }
+    }
+    catch (e) {
+        // Not JSON
+    }
+    return undefined;
+});
+const messageClass = $derived.by(() => {
+    const base = 'max-w-[90%] min-w-0 rounded-lg w-fit break-words';
+    if (role === 'user') {
+        const userClass = `${base} ml-auto bg-surface-secondary p-3`;
+        return customCss?.userMessage?.class
+            ? `${userClass} ${customCss.userMessage.class}`
+            : userClass;
+    }
+    // assistant, tool, and system messages use the same styling
+    const assistantClass = `${base} mr-auto bg-surface border ${success !== false ? 'border-gray-200 dark:border-gray-600' : '!border-red-500'}`;
+    return customCss?.assistantMessage?.class
+        ? `${assistantClass} ${customCss.assistantMessage.class}`
+        : assistantClass;
+});
+const messageStyle = $derived.by(() => {
+    if (role === 'user') {
+        return customCss?.userMessage?.style;
+    }
+    return customCss?.assistantMessage?.style;
+});
+</script>
+
+<div class={messageClass} style={messageStyle}>
+	{#if stepName}
+		<div
+			class="bg-surface-secondary text-2xs text-tertiary mb-2 font-medium py-1 px-2 rounded-t-lg"
+		>
+			{stepName}
+		</div>
+	{/if}
+
+	{#if role === 'user'}
+		<p class="whitespace-pre-wrap text-sm text-right">{content}</p>
+	{:else if loading}
+		<div class="flex items-center gap-2 text-tertiary px-3 py-3">
+			<Loader2 size={16} class="animate-spin" />
+			<span>Processing...</span>
+		</div>
+	{:else if content}
+		{#if s3Object}
+			<div class="px-3 pb-3 {!stepName ? 'pt-3' : ''}">
+				<DisplayResult result={s3Object} workspaceId={$workspaceStore} noControls={true} />
+			</div>
+		{:else if enableMarkdown}
+			<div
+				class="flex flex-row items-center gap-2 px-3 pb-3 text-sm {!stepName
+					? 'pt-3'
+					: ''} overflow-x-auto"
+			>
+				{#if role === 'tool'}
+					{#if success !== false}
+						<CheckCircle2 class="w-3.5 h-3.5 text-green-500" />
+					{:else}
+						<AlertTriangle class="w-3.5 h-3.5 text-red-500" />
+					{/if}
+				{/if}
+				<div class="prose prose-sm dark:prose-invert break-words prose-headings:!text-base">
+					<Markdown
+						md={content}
+						plugins={[
+							gfmPlugin(),
+							{
+								renderer: {
+									pre: CodeDisplay,
+									a: LinkRenderer
+								}
+							}
+						]}
+					/>
+				</div>
+			</div>
+		{:else}
+			<p class="whitespace-pre-wrap text-sm px-3 pb-3 {!stepName ? 'pt-3' : ''}">{content}</p>
+		{/if}
+	{:else}
+		<p class="text-tertiary text-sm px-3 py-3">No result</p>
+	{/if}
+</div>

package/package/components/chat/ChatMessage.svelte.d.ts

@@ -0,0 +1,22 @@
+interface Props {
+    role: 'user' | 'assistant' | 'tool' | 'system';
+    content: string;
+    loading?: boolean;
+    success?: boolean;
+    stepName?: string;
+    enableMarkdown?: boolean;
+    enableS3Display?: boolean;
+    customCss?: {
+        userMessage?: {
+            class?: string;
+            style?: string;
+        };
+        assistantMessage?: {
+            class?: string;
+            style?: string;
+        };
+    };
+}
+declare const ChatMessage: import("svelte").Component<Props, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/package/components/chat/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function parseStreamDeltas(streamData: string): {
+    content: string;
+    type?: string;
+    success?: boolean;
+};

package/package/components/chat/utils.js

@@ -0,0 +1,26 @@
+export function parseStreamDeltas(streamData) {
+    const lines = streamData.trim().split('\n');
+    let content = '';
+    let type = 'message';
+    let success = true;
+    for (const line of lines) {
+        if (!line.trim())
+            continue;
+        try {
+            const parsed = JSON.parse(line);
+            if (parsed.type === 'tool_result') {
+                type = 'tool_result';
+                success = parsed.success;
+                const toolName = parsed.function_name;
+                content = success ? `Used ${toolName} tool` : `Failed to use ${toolName} tool`;
+            }
+            if (parsed.type === 'token_delta' && parsed.content) {
+                content += parsed.content;
+            }
+        }
+        catch (e) {
+            console.error('Failed to parse stream line:', line, e);
+        }
+    }
+    return { content, type, success };
+}

package/package/components/common/CloseButton.svelte

@@ -11,10 +11,11 @@ const dispatch = createEventDispatcher();
 	on:pointerdown={(e) => e.stopPropagation()}
 	startIcon={{ icon: Icon ?? X }}
 	iconOnly
-	size="sm"
+	unifiedSize="sm"
 	color="light"
+	wrapperClasses="shrink-0"
 	btnClasses={twMerge(
-		'hover:bg-surface-hover rounded-full p-0',
+		'hover:bg-surface-hover rounded-full p-0 !min-h-0',
 		noBg ? '' : 'bg-surface-secondary',
 		small ? 'w-6 h-6' : 'w-8 h-8',
 		className ?? ''

package/package/components/common/OnChange.svelte

@@ -1,6 +1,5 @@
 <!--
-	Useful to listen to changes on a list without recomputing the whole list
-	when a single item changes
+	DEPRECATED: Use nested $effect or watch() from 'runed' instead.
 -->
 
 <script lang="ts" generics="T">import { untrack } from 'svelte';

package/package/components/common/ResizeTransitionWrapper.svelte

@@ -1,5 +1,12 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
+<script lang="ts" module>"use strict";
+let CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT = 'CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT';
+</script>
+
+<script lang="ts">import { getContext, setContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 let { children, innerClass, class: className = '', horizontal, vertical, outerDivProps } = $props();
+let currentResizeTransitionWrapper = getContext(CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT) ?? false;
+setContext(CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT, true);
 let innerContainer = $state(null);
 let outerContainer = $state(null);
 let width = $state(null);
@@ -32,8 +39,13 @@ $effect(() => {
 });
 </script>
 
-<div bind:this={outerContainer} {...outerDivProps} class={className} {style}>
-	<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
-		{@render children()}
+<!-- Prevent nesting this component to avoid weird behavior -->
+{#if currentResizeTransitionWrapper}
+	{@render children()}
+{:else}
+	<div bind:this={outerContainer} {...outerDivProps} class={twMerge('relative', className)} {style}>
+		<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
+			{@render children()}
+		</div>
 	</div>
-</div>
+{/if}

package/package/components/common/Url.svelte

@@ -4,7 +4,7 @@ let { url = '', disabled = false, label = '' } = $props();
 </script>
 
 <div class="flex justify-start w-full">
-	<Badge color="gray" class="rounded-r-none h-[27px]">{label}</Badge>
+	<Badge color="gray" class="rounded-r-none h-[36px]">{label}</Badge>
 
 	<ClipboardPanel
 		content={url}

package/package/components/common/alert/Alert.svelte

@@ -21,14 +21,14 @@ const SvelteComponent = $derived(icons[type]);
 <div
 	class={twMerge(
 		notRounded ? '' : 'rounded-md',
-		size === 'sm' ? 'p-4' : 'p-2',
+		size === 'sm' ? 'p-4' : 'p-3',
 		classes[type].bgClass,
 		bgClass,
 		classNames
 	)}
 	style={bgStyle}
 >
-	<div class="flex">
+	<div class="flex flex-row items-center">
 		<div class="flex h-8 w-8 items-center justify-center rounded-full">
 			<SvelteComponent
 				class={twMerge(classes[type].iconClass, iconClass)}
@@ -37,14 +37,9 @@ const SvelteComponent = $derived(icons[type]);
 			/>
 		</div>
 		<div class={twMerge('ml-1 w-full')}>
-			<div class={twMerge('w-full flex flex-row items-center justify-between h-8')}>
+			<div class={twMerge('w-full flex flex-row items-center justify-between')}>
 				<span
-					class={twMerge(
-						size === 'sm' ? 'text-sm' : 'text-xs',
-						'font-medium',
-						classes[type].titleClass,
-						titleClass
-					)}
+					class={twMerge('text-xs font-semibold', classes[type].titleClass, titleClass)}
 					style={titleStyle}
 				>
 					{title}
@@ -66,11 +61,7 @@ const SvelteComponent = $derived(icons[type]);
 			{#if children && !isCollapsed}
 				<div transition:slide|local={{ duration: 200 }} class="mt-2">
 					<div
-						class={twMerge(
-							size === 'sm' ? 'text-sm' : 'text-xs',
-							classes[type].descriptionClass,
-							descriptionClass
-						)}
+						class={twMerge('text-xs', classes[type].descriptionClass, descriptionClass)}
 						style={descriptionStyle}
 					>
 						{@render children?.()}
@@ -79,11 +70,7 @@ const SvelteComponent = $derived(icons[type]);
 			{:else if children && !collapsible}
 				<div class="mb-2">
 					<div
-						class={twMerge(
-							size === 'sm' ? 'text-sm' : 'text-xs',
-							classes[type].descriptionClass,
-							descriptionClass
-						)}
+						class={twMerge('text-xs', classes[type].descriptionClass, descriptionClass)}
 						style={descriptionStyle}
 					>
 						{@render children?.()}

package/package/components/common/alert/model.js

@@ -1,9 +1,9 @@
 export const classes = {
     info: {
-        bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/40 dark:border-blue-700/40',
-        iconClass: 'text-blue-500 dark:text-blue-300',
-        titleClass: 'text-blue-800 dark:text-blue-100',
-        descriptionClass: 'text-blue-700 dark:text-blue-100'
+        bgClass: 'bg-blue-50 border-blue-100 border dark:bg-blue-900/60 dark:border-blue-700/40',
+        iconClass: 'text-blue-600 dark:text-blue-50',
+        titleClass: 'text-blue-700 dark:text-blue-50',
+        descriptionClass: 'text-blue-600 dark:text-blue-50/80'
     },
     warning: {
         bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/40 dark:border-yellow-700/40',

package/package/components/common/badge/Badge.svelte

@@ -1,80 +1,97 @@
-<script lang="ts">import { classNames } from '../../../utils';
+<script lang="ts">import { twMerge } from 'tailwind-merge';
 import { ColorModifier } from './model';
 import { X } from 'lucide-svelte';
-export let color = 'gray';
-export let large = false;
-export let small = false;
-export let href = '';
-export let rounded = false;
-export let dismissable = false;
-export let wrapperClass = '';
-export let baseClass = 'text-center';
-export let capitalize = false;
-export let icon = undefined;
-export let verySmall = false;
-let hidden = false;
+let { color = 'gray', large = false, small = false, href = '', rounded = false, dismissable = false, wrapperClass = '', baseClass = 'text-center text-primary font-normal min-h-5', capitalize = false, icon = undefined, verySmall = false, class: classNames = undefined, clickable = false, selected = false, children, onkeydown, onclick, ...rest } = $props();
+let hidden = $state(false);
 const colors = {
-    gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
-    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
-    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
-    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-100 dark:text-yellow-900',
-    orange: 'bg-orange-100 text-orange-800 dark:bg-orange-100 dark:text-orange-900',
-    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
-    violet: 'bg-violet-100 text-violet-800 dark:bg-violet-200 dark:text-violet-900',
-    ['dark-gray']: 'bg-gray-500 text-gray-100',
-    ['dark-blue']: 'bg-blue-500 text-blue-100',
-    ['dark-red']: 'bg-red-500 text-white',
-    ['dark-green']: 'bg-green-500 text-green-100',
-    ['dark-yellow']: 'bg-yellow-300 text-yellow-800',
-    ['dark-indigo']: 'bg-indigo-500 text-indigo-100',
-    ['dark-orange']: 'bg-orange-500 text-orange-100',
-    ['dark-violet']: 'bg-violet-500 text-violet-100'
+    gray: 'bg-surface-sunken text-primary',
+    blue: 'bg-blue-50 text-blue-800 dark:text-blue-100 dark:bg-blue-700/40',
+    red: 'bg-red-100 text-red-800 dark:bg-red-700/40 dark:text-red-100',
+    green: 'bg-green-100 text-green-700 dark:bg-green-700/40 dark:text-green-100',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-700/40 dark:text-yellow-100',
+    orange: 'bg-orange-100 text-orange-800 dark:bg-orange-700/40 dark:text-orange-100',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700/40 dark:text-indigo-100',
+    violet: 'bg-violet-100 text-violet-800 dark:bg-violet-800/30 dark:text-violet-100',
+    ['dark-gray']: 'bg-gray-500 text-gray-100 dark:bg-gray-600 dark:text-gray-200',
+    ['dark-blue']: 'bg-blue-500 text-blue-100 dark:bg-blue-600 dark:text-blue-200',
+    ['dark-red']: 'bg-red-500 text-white dark:bg-red-600 dark:text-red-100',
+    ['dark-green']: 'bg-green-500 text-green-100 dark:bg-green-600 dark:text-green-200',
+    ['dark-yellow']: 'bg-yellow-500 text-white dark:bg-yellow-600 dark:text-yellow-100',
+    ['dark-indigo']: 'bg-indigo-500 text-indigo-100 dark:bg-indigo-600 dark:text-indigo-200',
+    ['dark-orange']: 'bg-orange-500 text-orange-100 dark:bg-orange-600 dark:text-orange-200',
+    ['dark-violet']: 'bg-violet-500 text-violet-100 dark:bg-violet-600 dark:text-violet-200',
+    transparent: 'bg-transparent border'
+};
+const selectedColors = {
+    gray: 'bg-surface-input text-primary',
+    blue: 'bg-blue-500 text-white dark:bg-blue-600',
+    red: 'bg-red-500 text-white dark:bg-red-600',
+    green: 'bg-green-500 text-white dark:bg-green-600',
+    yellow: 'bg-yellow-500 text-white dark:bg-yellow-600',
+    orange: 'bg-orange-500 text-white dark:bg-orange-600',
+    indigo: 'bg-indigo-500 text-white dark:bg-indigo-600',
+    violet: 'bg-violet-500 text-white dark:bg-violet-600',
+    ['dark-gray']: 'bg-gray-700 text-gray-100 dark:bg-gray-800 dark:text-gray-200',
+    ['dark-blue']: 'bg-blue-700 text-blue-100 dark:bg-blue-800 dark:text-blue-200',
+    ['dark-red']: 'bg-red-700 text-white dark:bg-red-800 dark:text-red-100',
+    ['dark-green']: 'bg-green-700 text-green-100 dark:bg-green-800 dark:text-green-200',
+    ['dark-yellow']: 'bg-yellow-600 text-white dark:bg-yellow-700 dark:text-yellow-100',
+    ['dark-indigo']: 'bg-indigo-700 text-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
+    ['dark-orange']: 'bg-orange-700 text-orange-100 dark:bg-orange-800 dark:text-orange-200',
+    ['dark-violet']: 'bg-violet-700 text-violet-100 dark:bg-violet-800 dark:text-violet-200',
+    transparent: 'bg-surface-accent-selected text-accent border-gray-400 dark:border-gray-500'
 };
 const hovers = {
-    gray: 'hover:bg-gray-200 dark:hover:bg-gray-300',
-    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
-    red: 'hover:bg-red-200 dark:hover:bg-red-300',
-    green: 'hover:bg-green-200 dark:hover:bg-green-300',
-    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
-    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
-    orange: 'hover:bg-orange-200 dark:hover:bg-orange-300',
-    violet: 'hover:bg-violet-200 dark:hover:bg-violet-300'
+    gray: 'hover:bg-surface-hover',
+    blue: 'hover:bg-blue-200 dark:hover:bg-blue-700/40',
+    red: 'hover:bg-red-200 dark:hover:bg-red-500/25',
+    green: 'hover:bg-green-200 dark:hover:bg-green-500/25',
+    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-500/25',
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-500/25',
+    orange: 'hover:bg-orange-200 dark:hover:bg-orange-500/25',
+    violet: 'hover:bg-violet-200 dark:hover:bg-violet-500/25',
+    ['dark-gray']: 'hover:bg-gray-600 dark:hover:bg-gray-700',
+    ['dark-blue']: 'hover:bg-blue-600 dark:hover:bg-blue-700',
+    ['dark-red']: 'hover:bg-red-600 dark:hover:bg-red-700',
+    ['dark-green']: 'hover:bg-green-600 dark:hover:bg-green-700',
+    ['dark-yellow']: 'hover:bg-yellow-600 dark:hover:bg-yellow-700',
+    ['dark-indigo']: 'hover:bg-indigo-600 dark:hover:bg-indigo-700',
+    ['dark-orange']: 'hover:bg-orange-600 dark:hover:bg-orange-700',
+    ['dark-violet']: 'hover:bg-violet-600 dark:hover:bg-violet-700',
+    transparent: 'hover:bg-surface-hover dark:hover:border-gray-500'
 };
-$: badgeClass = classNames(baseClass, small
-    ? 'text-xs'
-    : verySmall
-        ? 'text-2xs'
-        : large
-            ? 'text-sm font-medium'
-            : 'text-xs font-semibold', colors[color], href &&
-    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', verySmall ? 'px-0.5 py-0.5' : '', 'flex flex-row gap-1 items-center', $$props.class);
+let badgeClass = $derived(twMerge(baseClass, small ? 'text-2xs' : verySmall ? 'text-2xs' : large ? 'text-xs' : 'text-2xs', selected ? selectedColors[color] : colors[color], clickable &&
+    !selected &&
+    (color.startsWith(ColorModifier)
+        ? hovers[color.replace(ColorModifier, '')]
+        : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded-md px-2 py-0.5', verySmall ? 'px-0.5 py-0.5' : '', 'flex flex-row gap-1 items-center', classNames));
 const handleHide = () => (hidden = !hidden);
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
-	on:click
-	on:keydown
+	{onclick}
+	{onkeydown}
 	class="inline-flex justify-center items-center whitespace-nowrap {wrapperClass}"
 >
 	<svelte:element
-		this={href ? 'a' : 'span'}
+		this={href ? 'a' : clickable ? 'button' : 'span'}
 		{href}
-		{...$$restProps}
+		{...rest}
 		class={badgeClass}
 		class:hidden
 		class:capitalize
+		role={clickable ? 'button' : undefined}
 	>
 		{#if icon?.icon && icon.position === 'left'}
-			<svelte:component this={icon.icon} size={14} />
+			<icon.icon size={12} />
 		{/if}
-		<slot />
+		{@render children?.()}
 		{#if icon?.icon && icon.position === 'right'}
-			<svelte:component this={icon.icon} size={14} />
+			<icon.icon size={12} />
 		{/if}
 		{#if dismissable}
-			<button on:click={handleHide}>
+			<button onclick={handleHide}>
 				<X size={10} />
 			</button>
 		{/if}

package/package/components/common/badge/Badge.svelte.d.ts

@@ -1,44 +1,24 @@
 import { type BadgeColor, type BadgeIconProps } from './model';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    color?: BadgeColor | undefined;
-    large?: boolean | undefined;
-    small?: boolean | undefined;
-    href?: string | undefined;
-    rounded?: boolean | undefined;
-    dismissable?: boolean | undefined;
-    wrapperClass?: string | undefined;
-    baseClass?: string | undefined;
-    capitalize?: boolean | undefined;
+interface Props {
+    color?: BadgeColor;
+    large?: boolean;
+    small?: boolean;
+    href?: string;
+    rounded?: boolean;
+    dismissable?: boolean;
+    wrapperClass?: string;
+    baseClass?: string;
+    capitalize?: boolean;
     icon?: BadgeIconProps | undefined;
-    verySmall?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    keydown: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Badge = InstanceType<typeof Badge>;
+    verySmall?: boolean;
+    class?: string | undefined;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+    clickable?: boolean;
+    selected?: boolean;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/package/components/common/badge/model.d.ts

@@ -1,6 +1,6 @@
 type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo' | 'orange' | 'violet';
 export declare const ColorModifier = "dark-";
-export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
+export type BadgeColor = BaseColor | 'transparent' | `${typeof ColorModifier}${BaseColor}`;
 export interface BadgeIconProps {
     position?: 'left' | 'right';
     icon: any;

package/package/components/common/breadcrumb/Breadcrumb.svelte

@@ -14,7 +14,7 @@ const dispatch = createEventDispatcher();
 		<Button
 			size="sm"
 			color="light"
-			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-tertiary'}
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-primary'}
 			on:click={() => dispatch('select', { index })}
 			disabled={selectedIndex - 1 === index ? disabled : false}
 		>