windmill-components 1.309.6 → 1.339.2

package/package/components/apps/editor/settingsPanel/GridTabDisabled.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         field: RichConfiguration;
+        index: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -12,6 +12,7 @@ import { FunctionSquare, Loader2, Pen, Plug, Plug2, Upload, User } from 'lucide-
 import { fieldTypeToTsType } from '../../utils';
 import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte';
 import { Button } from '../../../common';
+import Toggle from '../../../Toggle.svelte';
 export let id;
 export let componentInput;
 export let key;
@@ -45,7 +46,9 @@ function applyConnection(connection) {
         ...componentInput,
         type: 'evalv2',
         expr: expr,
-        connections: [{ componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }]
+        connections: [
+            { componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }
+        ]
     };
     evalV2editor?.setCode(expr);
     $app = $app;
@@ -64,7 +67,7 @@ $: if (componentInput == undefined) {
 		<div class="flex justify-between items-end">
 			<div class="flex flex-row gap-4 items-center">
 				<div class="flex items-center">
-					<span class="text-xs font-semibold truncate text-primary">
+					<span class="!text-2xs font-semibold text-ellipsis text-primary">
 						{customTitle
 							? customTitle
 							: shouldCapitalize
@@ -109,7 +112,7 @@ $: if (componentInput == undefined) {
 						}}
 					>
 						<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" />
-						{#if userInputEnabled && !format?.startsWith('resource-')}
+						{#if userInputEnabled}
 							<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" />
 						{/if}
 						{#if fileUpload}
@@ -180,5 +183,23 @@ $: if (componentInput == undefined) {
 		{:else if componentInput?.type === 'user'}
 			<span class="text-2xs italic text-tertiary">Field's value is set by the user</span>
 		{/if}
+		{#if (componentInput?.type === 'evalv2' || componentInput?.type === 'connected' || componentInput?.type === 'user') && fieldType == 'object' && format?.startsWith('resource-')}
+			<div class="flex flex-row items-center">
+				<Toggle
+					size="xs"
+					bind:checked={componentInput.allowUserResources}
+					options={{
+						left: 'static resource select only',
+						right: 'resources from users allowed'
+					}}
+				/>
+				<Tooltip
+					>Apps are executed on behalf of publishers and by default cannot access viewer's
+					resources. If the resource passed here as a reference does not come from a static
+					'Resource Select' component (which will be whitelisted by the auto-generated policy), you
+					need to toggle this.</Tooltip
+				>
+			</div>
+		{/if}
 	</div>
 {/if}

package/package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from 'svelte';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte';
+import Tooltip from '../../../Tooltip.svelte';
 export let id;
 export let inputSpecs;
 export let inputSpecsConfiguration = undefined;
@@ -13,6 +14,7 @@ export let deletable = false;
 export let acceptSelf = false;
 export let recomputeOnInputChanged = true;
 export let showOnDemandOnlyToggle = false;
+export let overridenByComponent = [];
 $: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
 const dispatch = createEventDispatcher();
 </script>
@@ -20,7 +22,14 @@ const dispatch = createEventDispatcher();
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
 		{#each Object.keys(finalInputSpecsConfiguration) as k}
-			{#if finalInputSpecsConfiguration[k]?.type == 'oneOf'}
+			{#if overridenByComponent.includes(k)}
+				<div>
+					<span class="text-xs font-semibold truncate text-primary">
+						{k}
+					</span>
+					<div class="text-tertiary text-xs">Managed by the component</div>
+				</div>
+			{:else if finalInputSpecsConfiguration[k]?.type == 'oneOf'}
 				<OneOfInputSpecsEditor
 					{acceptSelf}
 					key={k}
@@ -55,6 +64,7 @@ const dispatch = createEventDispatcher();
 					loading={meta?.['loading']}
 					documentationLink={meta?.['documentationLink']}
 					markdownTooltip={meta?.['markdownTooltip']}
+					allowTypeChange={meta?.['allowTypeChange']}
 					{displayType}
 					{recomputeOnInputChanged}
 					{showOnDemandOnlyToggle}
@@ -65,6 +75,22 @@ const dispatch = createEventDispatcher();
 					</div>{/if}
 			{/if}
 		{/each}
+		{#if overridenByComponent.length > 0}
+			{#each overridenByComponent.filter((item) => Object.keys(finalInputSpecsConfiguration).indexOf(item) < 0) as k}
+				<div>
+					<span class="text-xs font-semibold truncate text-primary">
+						{k}
+					</span>
+					<div class="text-tertiary text-xs">
+						Managed by the component
+						<Tooltip light>
+							The input is managed by the component and cannot be edited here: It will be injected
+							by the component itself.
+						</Tooltip>
+					</div>
+				</div>
+			{/each}
+		{/if}
 	</div>
 {:else}
 	<div class="text-tertiary text-sm">No inputs</div>

package/package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         acceptSelf?: boolean | undefined;
         recomputeOnInputChanged?: boolean | undefined;
         showOnDemandOnlyToggle?: boolean | undefined;
+        overridenByComponent?: string[] | undefined;
     };
     events: {
         delete: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -6,7 +6,7 @@ export let recomputeIds = undefined;
 export let ownId;
 export let title = 'Trigger runnables on success';
 export let tooltip = 'Select components to recompute after this runnable has successfully run';
-export let documentationLink = 'https://www.windmill.dev/docs/apps/app-runnable-panel#recompute-others';
+export let documentationLink = 'https://www.windmill.dev/docs/apps/app-runnable-panel#trigger-runnables-on-success';
 const { runnableComponents } = getContext('AppViewerContext');
 function onChange(checked, id) {
     if (checked) {

package/package/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -147,8 +147,9 @@ onMount(() => {
 					</Badge>
 
 					<Tooltip light>
-						You can customise the CSS and the classes of this component instance. Theses
-						customisations will only be applied to this component.
+						You can customise the CSS and the classes of this component instance. These
+						customisations will only be applied to this component. You can also apply
+						custom classes set on the Global styling panel.
 					</Tooltip>
 				</div>
 			</Tab>
@@ -157,7 +158,7 @@ onMount(() => {
 					Global: {type ? ccomponents[type].name : ''}
 
 					<Tooltip light>
-						You can customise the CSS and the classes of all components of this type. Theses
+						You can customise the CSS and the classes of all components of this type. These
 						customisations will be applied to all components of this type.
 					</Tooltip>
 				</div>

package/package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -3,6 +3,7 @@ import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
 import { ClearableInput } from '../../../../common';
 import { createPopperActions } from 'svelte-popperjs';
 import { fade } from 'svelte/transition';
+import { zIndexes } from '../../../../../zIndexes';
 export let value = '#fff';
 const dispatch = createEventDispatcher();
 const [popperRef, popperContent] = createPopperActions();
@@ -21,8 +22,8 @@ function open() {
 	<div
 		transition:fade={{ duration: 150 }}
 		use:popperContent={{ placement: 'bottom', strategy: 'fixed' }}
-		class="color-picker-input z-[1002] !text-primary"
-		style="width: {width > 280 ? width : 280}px;"
+		class={`color-picker-input !text-primary`}
+		style="width: {width > 280 ? width : 280}px; z-index: {zIndexes.colorInput}"
 	>
 		<ColorPicker
 			bind:isOpen

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -109,6 +109,7 @@ let focus = false;
 					<div
 						class="p-1 !text-2xs absolute rounded-b border-b border-r border-l bg-surface w-full z-[5000] overflow-auto"
 					>
+						<!-- <div class="text-tertiary absolute top-0 right-0 !text-2xs">{id}.{field}</div> -->
 						<div class="float-right text-tertiary cursor-pointer"><X size={14} /></div>
 						<pre class="text-tertiary"
 							>{JSON.stringify($evalPreview[`${id}.${field}`] ?? null, null, 4) ?? 'null'}</pre

package/package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -109,27 +109,27 @@ function createScript() {
 					{#if !onlyFlow}
 						<Tab size="sm" value="inlinescripts">
 							<div class="flex gap-2 items-center my-1">
-								<Building size={18} />
+								<Building size={18} strokeWidth={1.5} />
 								Detached Inline Scripts
 							</div>
 						</Tab>
 						<Tab size="sm" value="workspacescripts">
 							<div class="flex gap-2 items-center my-1">
-								<Building size={18} />
+								<Building size={18} strokeWidth={1.5}/>
 								Workspace Scripts
 							</div>
 						</Tab>
 					{/if}
 					<Tab size="sm" value="workspaceflows">
 						<div class="flex gap-2 items-center my-1">
-							<Building size={18} />
+							<Building size={18} strokeWidth={1.5} />
 							Workspace Flows
 						</div>
 					</Tab>
 					{#if !onlyFlow}
 						<Tab size="sm" value="hubscripts">
 							<div class="flex gap-2 items-center my-1">
-								<Globe2 size={18} />
+								<Globe2 size={18} strokeWidth={1.5} />
 								Hub Scripts
 							</div>
 						</Tab>

package/package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -2,6 +2,7 @@
 import { secondaryMenuLeft, secondaryMenuRight } from './';
 import { getContext } from 'svelte';
 import CloseButton from '../../../../common/CloseButton.svelte';
+import { zIndexes } from '../../../../../zIndexes';
 const { selectedComponent } = getContext('AppViewerContext');
 export let right;
 let secondaryMenu = right ? secondaryMenuRight : secondaryMenuLeft;
@@ -13,10 +14,10 @@ $: if (right && lastSelected !== $selectedComponent) {
 }
 </script>
 
-<!-- z-index must be above the split pane handles' z-index (which is 1001 atm.) -->
 <div
 	bind:clientWidth={width}
-	class="absolute z-[1002] inset-0 overflow-hidden w-full"
+	class={`absolute inset-0 overflow-hidden w-full`}
+	style={`z-index: ${zIndexes.secondaryMenu}`}
 	class:pointer-events-none={!$secondaryMenu.isOpen}
 >
 	{#if $secondaryMenu.isOpen && $secondaryMenu.component}
@@ -28,7 +29,9 @@ $: if (right && lastSelected !== $selectedComponent) {
 				class="flex justify-between {right ? '' : 'flex-row-reverse'} items-center gap-1 px-3 py-2"
 			>
 				<CloseButton on:close={() => secondaryMenu?.close()} />
-				<div class="text-xs font-bold"> Style Panel</div>
+				{#if $secondaryMenu?.props?.type === 'style'}
+					<div class="text-xs font-bold"> Style Panel</div>
+				{/if}
 			</div>
 			<div class="relative h-full overflow-y-auto">
 				{#if typeof $secondaryMenu.component === 'string'}

package/package/components/apps/inputType.d.ts

@@ -14,10 +14,12 @@ export type InputConnectionEval = {
 export type ConnectedInput = {
     type: 'connected';
     connection: InputConnection | undefined;
+    allowUserResources?: boolean;
 };
 export type UserInput<U> = {
     type: 'user';
     value: U | undefined;
+    allowUserResources?: boolean;
 };
 export type UploadInput = {
     type: 'upload';
@@ -32,6 +34,7 @@ export type EvalInputV2 = {
     expr: string;
     connections: InputConnectionEval[];
     onDemandOnly?: boolean;
+    allowUserResources?: boolean;
 };
 export type RowInput = {
     type: 'row';
@@ -98,6 +101,7 @@ type InputConfiguration<T extends InputType, V extends InputType> = {
     };
     noStatic?: boolean;
     onDemandOnly?: boolean;
+    hideRefreshButton?: boolean;
 };
 export type StaticOptions = {
     selectOptions: readonly string[] | readonly {

package/package/components/apps/rx.d.ts

@@ -6,7 +6,7 @@ export interface Subscriber<T> {
     next(v: T): void;
 }
 export interface Observable<T> {
-    subscribe(x: Subscriber<T>, previousValue: T): void;
+    subscribe(x: Subscriber<T>, previousValue: T): () => void;
 }
 export interface Output<T> extends Observable<T> {
     set(x: T, force?: boolean): void;

package/package/components/apps/rx.js

@@ -97,6 +97,13 @@ export function settableOutput(state, previousValue) {
         if (value !== undefined && !deepEqual(value, npreviousValue)) {
             x.next(value);
         }
+        // return a callback to unsubscribe
+        return () => {
+            const index = subscribers.findIndex((y) => y === x || (y.id && y.id === x.id));
+            if (index !== -1) {
+                subscribers.splice(index, 1);
+            }
+        };
     }
     let lastHash = undefined;
     function set(x, force = false) {

package/package/components/apps/svelte-grid/Grid.svelte

@@ -3,12 +3,12 @@ import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
 import { onMount, createEventDispatcher } from 'svelte';
 import { getColumn, throttle } from './utils/other';
 import MoveResize from './MoveResize.svelte';
-import { sortGridItemsPosition } from '../editor/appUtils';
+import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT, sortGridItemsPosition } from '../editor/appUtils';
 const dispatch = createEventDispatcher();
 export let items;
-export let rowHeight;
+export let rowHeight = ROW_HEIGHT;
 export let cols;
-export let gap = [10, 10];
+export let gap = [ROW_GAP_X, ROW_GAP_Y];
 export let throttleUpdate = 100;
 export let throttleResize = 100;
 export let selectedIds;
@@ -106,6 +106,7 @@ const updateMatrix = ({ detail }) => {
     }
 };
 const throttleMatrix = throttle(updateMatrix, throttleResize);
+//let hiddenComponents = writable({})
 const handleRepaint = ({ detail }) => {
     if (!detail.isPointerUp) {
         throttleMatrix({ detail });
@@ -113,6 +114,14 @@ const handleRepaint = ({ detail }) => {
     else {
         updateMatrix({ detail });
     }
+    /**
+    setTimeout(() => {
+        $hiddenComponents = {
+            ...$hiddenComponents,
+            [detail.id]: updateComponentVisibility(detail, sortedItems, getComputedCols)
+        }
+    }, 0)
+    */
 };
 let moveResizes = {};
 let shadows = {};
@@ -162,7 +171,7 @@ export function handleInitMove({ detail }) {
 				nativeContainer={container}
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} />
+					<slot dataItem={item} hidden={false} />
 				{/if}
 			</MoveResize>
 		{/if}

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -3,7 +3,7 @@ import type { FilledItem } from './types';
 declare class __sveltets_Render<T> {
     props(): {
         items: FilledItem<T>[];
-        rowHeight: number;
+        rowHeight?: number | undefined;
         cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
@@ -31,6 +31,7 @@ declare class __sveltets_Render<T> {
     slots(): {
         default: {
             dataItem: FilledItem<T>;
+            hidden: boolean;
         };
     };
 }

package/package/components/apps/svelte-grid/types.d.ts

@@ -10,6 +10,7 @@ export interface Positon {
 
 interface ItemLayout extends Size, Positon {
 	fixed: boolean
+	fullHeight: boolean
 }
 
 export type FilledItem<T> = { [width: number]: Required<ItemLayout>; data: T; id: string }

package/package/components/apps/svelte-grid/utils/helper.js

@@ -5,6 +5,7 @@ function makeItem(item) {
     const { min = { w: 1, h: 1 }, max } = item;
     return {
         fixed: false,
+        fullHeight: false,
         min: {
             w: Math.max(1, min.w),
             h: Math.max(1, min.h)

package/package/components/apps/svelte-grid/utils/overlap.d.ts

@@ -0,0 +1,3 @@
+import type { FilledItem } from '../types';
+export declare function segmentsOverlap(x1: number, length1: number, x2: number, length2: number): boolean;
+export declare function updateComponentVisibility<T>(detail: FilledItem<T>, items: FilledItem<T>[], getComputedCols: number): boolean;

package/package/components/apps/svelte-grid/utils/overlap.js

@@ -0,0 +1,21 @@
+export function segmentsOverlap(x1, length1, x2, length2) {
+    const end1 = x1 + length1;
+    const end2 = x2 + length2;
+    return Math.max(x1, x2) < Math.min(end1, end2);
+}
+export function updateComponentVisibility(detail, items, getComputedCols) {
+    const c = items.find((x) => x.id === detail.id);
+    if (!c)
+        return false;
+    return items.some((item) => {
+        if (item?.data?.['fullHeight'] !== true || item.id === detail.id) {
+            return false;
+        }
+        if (item[getComputedCols]) {
+            let { x, y, w } = item[getComputedCols];
+            let { x: x1, y: y1, w: w1 } = c[getComputedCols];
+            return y < y1 && segmentsOverlap(x, w, x1, w1);
+        }
+        return false;
+    });
+}

package/package/components/apps/svelte-select/lib/Select.svelte.d.ts

@@ -7,9 +7,9 @@ export default class Select extends SvelteComponent<{
     id?: null | undefined;
     name?: null | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     filter?: typeof _filter | undefined;
     class?: string | undefined;
-    label?: string | undefined;
     items?: any;
     loading?: boolean | undefined;
     placeholder?: string | undefined;
@@ -111,9 +111,9 @@ declare const __propDef: {
         id?: null | undefined;
         name?: null | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         filter?: typeof _filter | undefined;
         class?: string | undefined;
-        label?: string | undefined;
         items?: any;
         loading?: boolean | undefined;
         placeholder?: string | undefined;

package/package/components/apps/svelte-select/lib/tailwind.css

@@ -114,7 +114,7 @@
 }
 
 .multi-item {
-    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden overflow-ellipsis whitespace-nowrap;
+    @apply bg-gray-100 mt-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden overflow-ellipsis whitespace-nowrap;
 }
 
 .multi-item.disabled {

package/package/components/apps/types.d.ts

@@ -221,6 +221,7 @@ export type AppEditorContext = {
     movingcomponents: Writable<string[] | undefined>;
     jobsDrawerOpen: Writable<boolean>;
     scale: Writable<number>;
+    stylePanel: () => any;
 };
 export type FocusedGrid = {
     parentComponentId: string;

package/package/components/apps/utils.js

@@ -1,4 +1,5 @@
 import { twMerge } from 'tailwind-merge';
+import { gridColumns } from './gridUtils';
 export const BG_PREFIX = 'bg_';
 export function migrateApp(app) {
     ;
@@ -13,6 +14,13 @@ export function migrateApp(app) {
             x.doNotRecomputeOnInputChanged = undefined;
         }
     });
+    allItems(app.grid, app.subgrids).forEach((x) => {
+        gridColumns.forEach((column) => {
+            if (x?.[column]?.fullHeight === undefined) {
+                x[column].fullHeight = false;
+            }
+        });
+    });
 }
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
@@ -27,7 +35,7 @@ export function schemaToInputsSpec(schema, defaultUserInput) {
     return Object.keys(schema.properties).reduce((accu, key) => {
         const property = schema.properties[key];
         accu[key] = {
-            type: defaultUserInput && !property.format?.startsWith('resource-') ? 'user' : 'static',
+            type: defaultUserInput ? 'user' : 'static',
             value: property.default,
             fieldType: property.type,
             format: property.format
@@ -198,7 +206,7 @@ declare function clearFiles(id: string): void;
 /**  Display a toast message
  * @param message message to display
  */
-declare function showToast(message: string, error: boolean): void;
+declare function showToast(message: string, error?: boolean): void;
 `
         : ''}
 
@@ -237,7 +245,9 @@ export function getAllScriptNames(app) {
         }
         if (gridItem.data.type === 'aggridcomponent' ||
             gridItem.data.type === 'aggridcomponentee' ||
-            gridItem.data.type === 'dbexplorercomponent') {
+            gridItem.data.type === 'dbexplorercomponent' ||
+            gridItem.data.type === 'aggridinfinitecomponent' ||
+            gridItem.data.type === 'aggridinfinitecomponentee') {
             gridItem.data.actions?.forEach((actionButton) => {
                 if (actionButton.componentInput?.type === 'runnable') {
                     if (actionButton.componentInput.runnable?.type === 'runnableByName') {

package/package/components/auditLogs/AuditLogsTable.svelte

@@ -86,7 +86,7 @@ function kindToBadgeColor(kind) {
 						{date}
 					</Cell>
 				</tr>
-				{#each logsByDay as { id, timestamp, username, operation: op, action_kind, resource }}
+				{#each logsByDay as { id, timestamp, username, operation: op, action_kind, resource, parameters }}
 					<Row
 						hoverable
 						selected={id === selectedId}
@@ -102,8 +102,11 @@ function kindToBadgeColor(kind) {
 						</Cell>
 						<Cell>
 							<div class="flex flex-row gap-2 items-center">
-								<div class="whitespace-nowrap overflow-x-auto no-scrollbar w-20">
+								<div class="whitespace-nowrap overflow-x-auto no-scrollbar w-48">
 									{username}
+									{#if parameters && 'end_user' in parameters}
+										<span> (end user: {parameters.end_user})</span>
+									{/if}
 								</div>
 								<Button
 									color="light"

package/package/components/build_workers.js

@@ -1,3 +1,4 @@
+// inline to make it a library component easy to be imported until this if fixed: https://github.com/vitejs/vite/pull/16418
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker&inline';
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker&inline';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&inline';

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

@@ -26,28 +26,28 @@ const icons = {
 };
 const classes = {
     info: {
-        bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/50 dark:border-blue-900',
-        iconClass: 'text-blue-500 dark:text-blue-400',
+        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-200'
+        descriptionClass: 'text-blue-700 dark:text-blue-100'
     },
     warning: {
-        bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/50 dark:border-yellow-900',
-        iconClass: 'text-yellow-500 dark:text-yellow-400',
-        titleClass: 'text-yellow-800 dark:text-yellow-100',
-        descriptionClass: 'text-yellow-700 dark:text-yellow-200'
+        bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/40 dark:border-yellow-700/40',
+        iconClass: 'text-yellow-500 dark:text-yellow-300/90',
+        titleClass: 'text-yellow-800 dark:text-yellow-100/90',
+        descriptionClass: 'text-yellow-700 dark:text-yellow-100/90'
     },
     error: {
-        bgClass: 'bg-red-50 border-red-200 border dark:bg-red-900/50 dark:border-red-900',
-        iconClass: 'text-red-500 dark:text-red-400',
-        titleClass: 'text-red-800 dark:text-red-100',
-        descriptionClass: 'text-red-700 dark:text-red-200'
+        bgClass: 'bg-red-50 border-red-200 border dark:bg-red-900/40 dark:border-red-700/40',
+        iconClass: 'text-red-500 dark:text-red-300/90',
+        titleClass: 'text-red-800 dark:text-red-100/90',
+        descriptionClass: 'text-red-700 dark:text-red-100/90'
     },
     success: {
-        bgClass: 'bg-green-50 border-green-200 border dark:bg-green-900/50 dark:border-green-900',
-        iconClass: 'text-green-500 dark:text-green-400',
-        titleClass: 'text-green-800 dark:text-green-100',
-        descriptionClass: 'text-green-700 dark:text-green-200'
+        bgClass: 'bg-green-50 border-green-200 border dark:bg-green-900/40 dark:border-green-700/40',
+        iconClass: 'text-green-500 dark:text-green-300/90',
+        titleClass: 'text-green-800 dark:text-green-100/90',
+        descriptionClass: 'text-green-700 dark:text-green-100/90'
     }
 };
 function toggleCollapse() {
@@ -76,7 +76,7 @@ function toggleCollapse() {
 				size={16}
 			/>
 		</div>
-		<div class={twMerge('ml-2 w-full')}>
+		<div class={twMerge('ml-1 w-full')}>
 			<div class={twMerge('w-full flex flex-row items-center justify-between h-8')}>
 				<span
 					class={twMerge(
@@ -117,7 +117,7 @@ function toggleCollapse() {
 					</div>
 				</div>
 			{:else if $$slots.default && !collapsible}
-				<div class="mt-2">
+				<div class="mb-2">
 					<div
 						class={twMerge(
 							size === 'sm' ? 'text-sm' : 'text-xs',

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

@@ -17,14 +17,16 @@ const colors = {
     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-200 dark:text-yellow-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',
     ['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-indigo']: 'bg-indigo-500 text-indigo-100',
+    ['dark-orange']: 'bg-orange-500 text-orange-100'
 };
 const hovers = {
     gray: 'hover:bg-gray-200 dark:hover:bg-gray-300',
@@ -32,7 +34,8 @@ const hovers = {
     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'
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
+    orange: 'hover:bg-orange-200 dark:hover:bg-orange-300'
 };
 $: badgeClass = classNames(baseClass, small ? 'text-xs' : 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', 'flex flex-row gap-1 items-center', $$props.class);

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

@@ -1,4 +1,4 @@
-type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
+type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo' | 'orange';
 export declare const ColorModifier = "dark-";
 export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
 export interface BadgeIconProps {