windmill-components 1.309.7 → 1.352.0

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

@@ -6,7 +6,6 @@ import IconSelectInput from './IconSelectInput.svelte';
 import ColorInput from './ColorInput.svelte';
 import TabSelectInput from './TabSelectInput.svelte';
 import Toggle from '../../../../Toggle.svelte';
-import SchemaEditor from '../../../../SchemaEditor.svelte';
 import autosize from '../../../../../autosize';
 import Button from '../../../../common/button/Button.svelte';
 import { Settings } from 'lucide-svelte';
@@ -19,6 +18,7 @@ import DBExplorerWizard from '../../../../wizards/DBExplorerWizard.svelte';
 import Label from '../../../../Label.svelte';
 import DateTimeInput from '../../../../DateTimeInput.svelte';
 import DBTableSelect from './DBTableSelect.svelte';
+import EditableSchemaDrawer from '../../../../schema/EditableSchemaDrawer.svelte';
 export let componentInput;
 export let fieldType = undefined;
 export let subFieldType = undefined;
@@ -26,7 +26,6 @@ export let selectOptions = undefined;
 export let placeholder = undefined;
 export let format = undefined;
 export let id;
-export let dragging = false;
 const { onchange } = getContext('AppViewerContext');
 $: componentInput && onchange?.();
 </script>
@@ -148,24 +147,18 @@ $: componentInput && onchange?.();
 				/>
 			{:else}
 				<div class="flex w-full flex-col">
-					{#if dragging}
-						<div class="text-xs text-secondary whitespace-pre border p-1"
-							>{JSON.stringify(componentInput.value, null, 2)}</div
-						>
-					{:else}
-						<JsonEditor
-							small
-							bind:value={componentInput.value}
-							code={JSON.stringify(componentInput.value, null, 2)}
-						/>
-					{/if}
+					<JsonEditor
+						small
+						bind:value={componentInput.value}
+						code={JSON.stringify(componentInput.value, null, 2)}
+					/>
 				</div>
 			{/if}
 		{:else if fieldType === 'array'}
 			<ArrayStaticInputEditor {id} {subFieldType} bind:componentInput on:deleteArrayItem />
 		{:else if fieldType === 'schema'}
 			<div class="w-full">
-				<SchemaEditor bind:schema={componentInput.value} lightMode />
+				<EditableSchemaDrawer bind:schema={componentInput.value} />
 			</div>
 		{:else if fieldType === 'ag-grid'}
 			<div class="flex flex-row rounded-md bg-surface items-center h-full">

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         placeholder?: string | undefined;
         format?: string | undefined;
         id: string | undefined;
-        dragging?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;

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 {

package/package/components/common/button/Button.svelte

@@ -51,22 +51,27 @@ const colorVariants = {
     },
     blue: {
         border: 'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
-        contained: 'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300',
+        contained: 'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
         divider: 'divide-x divide-frost-600'
     },
+    marine: {
+        border: 'border-marine-300 dark:border-marine-200 hover:border-marine-500 dark:hover:border-marine-400 focus-visible:border-marine-500 bg-surface hover:bg-marine-500 dark:hover:bg-marine-400 focus-visible:bg-marine-100 focus-visible:dark:text-marine-50 dark:focus-visible:bg-marine-500 text-marine-50 dark:text-marine-50 dark:hover:text-marine-50 hover:text-marine-50 focus-visible:text-marine-300 focus-visible:ring-marine-200',
+        contained: 'bg-marine-300 hover:bg-marine-500 focus-visible:bg-marine-500 text-gray-50 focus-visible:ring-marine-200 dark:bg-marine-200 dark:hover:bg-marine-400',
+        divider: 'divide-x divide-marine-500'
+    },
     red: {
-        border: 'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 ',
-        contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300',
+        border: 'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 dark:border-red-400/90 dark:text-red-400 dark:hover:border-red-400 dark:hover:bg-red-500/60 dark:hover:text-red-100',
+        contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300  dark:border-red-400/70 dark:bg-red-700/90 dark:hover:bg-red-900 dark:hover:border-red-300 dark:text-primary',
         divider: 'divide-x divide-red-700'
     },
     green: {
-        border: 'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus-visible:ring-green-300',
-        contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300',
+        border: 'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus-visible:ring-green-300 dark:hover:bg-green-800 dark:border-green-400/90',
+        contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300 dark:bg-green-700/90 dark:hover:bg-green-800',
         divider: 'divide-x divide-green-700'
     },
     dark: {
-        border: 'border-surface-inverse bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse',
-        contained: 'bg-surface-inverse hover:bg-surface-inverse-hover focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse',
+        border: 'border-marine-300 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-marine-200',
+        contained: 'bg-marine-400 hover:bg-marine-200 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
         divider: 'divide-x divide-gray-800 dark:divide-gray-200'
     },
     gray: {
@@ -108,16 +113,19 @@ const iconMap = {
     xl: 18
 };
 const iconOnlyPadding = {
-    xs2: 'm-[1px]',
-    xs: 'm-[1px]',
-    sm: 'm-[2px]',
-    md: 'm-[2px]',
-    lg: 'm-[5px]',
-    xl: 'm-[5px]'
+    xs2: 'm-[1px] qhd:m-[1.125px]',
+    xs: 'm-[1px] qhd:m-[1.125px]',
+    sm: 'm-[2px] qhd:m-[2.25px]',
+    md: 'm-[2px] qhd:m-[2.25px]',
+    lg: 'm-[5px] qhd:m-[5.625px]',
+    xl: 'm-[5px] qhd:m-[5.625px]'
 };
-$: lucideIconSize = iconMap[size] ?? 12;
+let innerWidth = 0;
+$: lucideIconSize = (iconMap[size] ?? 12) * (innerWidth > 2500 ? 1.125 : 1);
 </script>
 
+<svelte:window bind:innerWidth />
+
 <div
 	class="{dropdownItems && dropdownItems.length > 0 && variant === 'contained'
 		? colorVariants[color].divider

package/package/components/common/button/ButtonDropdown.svelte

@@ -25,6 +25,7 @@ const popperOptions = {
 	<span use:popperRef>
 		<MenuButton
 			class={twMerge('h-full w-full flex flex-row gap-2 items-center', hasPadding ? 'px-2' : '')}
+			
 		>
 			{#if $$slots.buttonReplacement}
 				<slot name="buttonReplacement" />

package/package/components/common/calendarPicker/CalendarPicker.svelte

@@ -4,6 +4,7 @@ import { Popup } from '..';
 import DateTimeInput from '../../DateTimeInput.svelte';
 export let date;
 export let label;
+export let useDropdown = false;
 const dispatch = createEventDispatcher();
 let input;
 export let placement = 'top-end';
@@ -28,6 +29,7 @@ export let placement = 'top-end';
 		<div class="pb-1 text-sm text-secondary">{label}</div>
 		<div class="flex w-full">
 			<DateTimeInput
+				{useDropdown}
 				value={date}
 				on:change={(e) => {
 					date = e.detail

package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         date: string | undefined;
         label: string;
+        useDropdown?: boolean | undefined;
         placement?: Placement | undefined;
     };
     events: {

package/package/components/common/drawer/ConditionalPortal.svelte

@@ -0,0 +1,9 @@
+<script>import Portal from 'svelte-portal';
+export let condition = false;
+</script>
+
+{#if condition}
+	<Portal><slot /></Portal>
+{:else}
+	<slot />
+{/if}

package/package/components/common/drawer/ConditionalPortal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        condition?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ConditionalPortalProps = typeof __propDef.props;
+export type ConditionalPortalEvents = typeof __propDef.events;
+export type ConditionalPortalSlots = typeof __propDef.slots;
+export default class ConditionalPortal extends SvelteComponent<ConditionalPortalProps, ConditionalPortalEvents, ConditionalPortalSlots> {
+}
+export {};