windmill-components 1.122.0 → 1.138.2

package/package/components/codeGen/prompts/fix.yaml

@@ -0,0 +1,113 @@
+system: |-
+  You fix the code shared by the user. Only output code. Wrap the code like that:
+  ```language
+  {code}
+  ```
+  Explain the error and the fix in the following format:
+  explanation: "Here's the explanation"
+  Also put the explanations in the code as comments.
+prompt: |-
+  Here's my environement: {environment}
+  Here's my code: 
+  ```{lang}
+  {code}
+  ```
+  I get the following error: {error}
+  Fix my code.
+prompts:
+  python3:
+    prompt: |-
+      Here's my python3 code: 
+      ```python
+      {code}
+      ```
+      Additional information: We have to export a "main" function and specify the parameter types but do not call it.
+      You have access to the following resource types, if you need them, you have to define the TypedDict exactly as specified (class name has to be IN LOWERCASE) and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the TypedDict name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      I get the following error: {error}
+      Fix my code.
+  deno:
+    prompt: |-
+      Here's my typescript code in a deno running environement: 
+      ```typescript
+      {code}
+      ```
+      Additional information: We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      I get the following error: {error}
+      Fix my code.
+  go:
+    prompt: |-
+      Here's my go code: 
+      ```go
+      {code}
+      ```
+      Additional information: We have to export a "main" function. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be "inner"
+      I get the following error: {error}
+      Fix my code.
+  bash:
+    prompt: |-
+      Here's my bash code: 
+      ```shell
+      {code}
+      ```
+      Additional information: Do not include "#!/bin/bash". Arguments are always string and can only be obtained with "var1="$1"", "var2="$2"", etc... You do not need to check if the arguments are present.
+      I get the following error: {error}
+      Fix my code.
+  postgresql:
+    prompt: |-
+      Here's my PostgreSQL code: 
+      ```sql
+      {code}
+      ```
+      Additional information: Arguments can be obtained directly in the statement with `$1::{type}`, `$2::{type}`, etc... Name the parameters by adding comments before the command like that: `-- $1 name1` or `-- $2 name = default` (one per row, do not include the type)
+      I get the following error: {error}
+      Fix my code.
+  mysql:
+    prompt: |-
+      Here's my MySQL code: 
+      ```sql
+      {code}
+      ```
+      Additional information: Arguments can be obtained directly in the statement with ?. Name the parameters by adding comments before the command like that: -- ? name1 ({type}) (one per row)
+      I get the following error: {error}
+      Fix my code.
+  nativets:
+    prompt: |-
+      Here's my typescript code: 
+      ```typescript
+      {code}
+      ```
+      Additional information: We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
+      You should use fetch and are not allowed to import any libraries.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      I get the following error: {error}
+      Fix my code.
+  bun:
+    prompt: |-
+      Here's my typescript code in a node.js running environment: 
+      ```typescript
+      {code}
+      ```
+      Additional information: We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      I get the following error: {error}
+      Fix my code.
+  frontend:
+    prompt: |-
+      Here's my client-side javascript code: 
+      ```typescript
+      {code}
+      ```
+      Additional information: You can access the context object with the ctx global variable. 
+      The app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'
+      You can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)
+      Use the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)
+      Use the recompute function to recompute a component: recompute(id: string)
+      Use the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)
+      The setValue function is meant to set or force the value of a component: setValue(id: string, value: any).
+      I get the following error: {error}
+      Fix my code.

package/package/components/codeGen/prompts/gen.yaml

@@ -0,0 +1,49 @@
+system: |-
+  You write code as queried by the user. Only output code. Wrap the code like that: 
+  ```language
+  {code}
+  ```
+  Put explanations directly in the code as comments.
+prompts:
+  python3:
+    prompt: |-
+      Write a function in python called "main". The function should {description}. Specify the parameter types. Do not call the main function.
+      You have access to the following resource types, if you need them, you have to define the TypedDict exactly as specified (class name has to be IN LOWERCASE) and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the TypedDict name conflicts with the imported object, rename the imported object NOT THE TYPE.
+  deno:
+    prompt: |-
+      Write a function in typescript called "main". The function should {description}. Specify the parameter types. You are in a Deno environment. You can import deno libraries or you can also import npm libraries like that: "import ... from "npm:{package}";". Export the "main" function like this: "export async function main(...)". Do not call the main function.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+  go:
+    prompt: |-
+      Write a function in go called "main". The function should {description}. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be "inner".
+  bash:
+    prompt: |-
+      Write bash code that should {description}. Do not include "#!/bin/bash". Arguments are always string and can only be obtained with "var1="$1"", "var2="$2"", etc... You do not need to check if the arguments are present.
+  postgresql:
+    prompt: |-
+      Write SQL code for a PostgreSQL that should {description}. Arguments can be obtained directly in the statement with `$1::{type}`, `$2::{type}`, etc... Name the parameters by adding comments before the command like that: `-- $1 name1` or `-- $2 name = default` (one per row, do not include the type)
+  mysql:
+    prompt: |-
+      Write SQL code for MySQL that should {description}. Arguments can be obtained directly in the statement with ?. Name the parameters by adding comments before the command like that: -- ? name1 ({type}) (one per row)
+  nativets:
+    prompt: |-
+      Write a function in typescript called "main". The function should {description}. Specify the parameter types. You should use fetch and are not allowed to import any libraries. Export the "main" function like this: "export async function main(...)". Do not call the main function.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+  bun:
+    prompt: |-
+      Write a function in typescript called "main". The function should {description}. Specify the parameter types. You are in a Node.js environment. You can import npm libraries. Export the "main" function like this: "export async function main(...)". Do not call the main function.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+  frontend:
+    prompt: |-
+      Write client-side javascript code that should {description}. You have access to a few helpers:
+      You can access the context object with the ctx global variable. 
+      The app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'
+      You can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)
+      Use the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)
+      Use the recompute function to recompute a component: recompute(id: string)
+      Use the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)
+      The setValue function is meant to set or force the value of a component: setValue(id: string, value: any).

package/package/components/codeGen/prompts/index.d.ts

@@ -0,0 +1,12 @@
+interface PromptsConfig {
+    system: string;
+    prompts: {
+        [key: string]: {
+            prompt: string;
+        };
+    };
+}
+declare const EDIT_CONFIG: PromptsConfig;
+declare const FIX_CONFIG: PromptsConfig;
+declare const GEN_CONFIG: PromptsConfig;
+export { EDIT_CONFIG, FIX_CONFIG, GEN_CONFIG };

package/package/components/codeGen/prompts/index.js

@@ -0,0 +1,7 @@
+import editObj from './edit.yaml';
+import fixObj from './fix.yaml';
+import genObj from './gen.yaml';
+const EDIT_CONFIG = editObj;
+const FIX_CONFIG = fixObj;
+const GEN_CONFIG = genObj;
+export { EDIT_CONFIG, FIX_CONFIG, GEN_CONFIG };

package/package/components/codeGen/utils.d.ts

@@ -0,0 +1,4 @@
+import type { Schema } from '../../common';
+import type { ResourceType } from '../../gen';
+export declare function pythonCompile(schema: Schema): string;
+export declare function formatResourceTypes(resourceTypes: ResourceType[], lang: 'python3' | 'typescript'): string;

package/package/components/codeGen/utils.js

@@ -0,0 +1,79 @@
+import { capitalize, toCamel } from '../../utils';
+function compile(schema) {
+    function rec(x, root = false) {
+        let res = '{\n';
+        const entries = Object.entries(x);
+        if (entries.length == 0) {
+            return 'any';
+        }
+        let i = 0;
+        for (let [name, prop] of entries) {
+            if (prop.type == 'object') {
+                res += `  ${name}: ${rec(prop.properties ?? {})}`;
+            }
+            else if (prop.type == 'array') {
+                res += `  ${name}: ${prop?.items?.type ?? 'any'}[]`;
+            }
+            else {
+                let typ = prop?.type ?? 'any';
+                if (typ == 'integer') {
+                    typ = 'number';
+                }
+                res += `  ${name}: ${typ}`;
+            }
+            i++;
+            if (i < entries.length) {
+                res += ',\n';
+            }
+        }
+        res += '\n}';
+        return res;
+    }
+    return rec(schema.properties, true);
+}
+export function pythonCompile(schema) {
+    let res = '';
+    const entries = Object.entries(schema.properties);
+    if (entries.length === 0) {
+        return 'dict';
+    }
+    let i = 0;
+    for (let [name, prop] of entries) {
+        let typ = 'dict';
+        if (prop.type === 'array') {
+            typ = 'list';
+        }
+        else if (prop.type === 'string') {
+            typ = 'str';
+        }
+        else if (prop.type === 'number') {
+            typ = 'float';
+        }
+        else if (prop.type === 'integer') {
+            typ = 'int';
+        }
+        else if (prop.type === 'boolean') {
+            typ = 'bool';
+        }
+        res += `    ${name}: ${typ}`;
+        i++;
+        if (i < entries.length) {
+            res += '\n';
+        }
+    }
+    return res;
+}
+export function formatResourceTypes(resourceTypes, lang) {
+    if (lang === 'python3') {
+        const result = resourceTypes.map((resourceType) => {
+            return `class ${resourceType.name}(TypedDict):\n${pythonCompile(resourceType.schema)}`;
+        });
+        return '\n' + result.join('\n\n');
+    }
+    else {
+        const result = resourceTypes.map((resourceType) => {
+            return `type ${toCamel(capitalize(resourceType.name))} = ${compile(resourceType.schema)}`;
+        });
+        return '\n' + result.join('\n\n');
+    }
+}

package/package/components/common/CloseButton.svelte

@@ -10,9 +10,9 @@
 
 <button
 	on:click={() => dispatch('close')}
-	class="hover:bg-gray-200 {noBg
+	class="hover:bg-surface-hover {noBg
 		? ''
-		: 'bg-gray-100'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
+		: 'bg-surface-secondary'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
 >
-	<Icon data={faClose} class="text-gray-500" />
+	<Icon data={faClose} class="text-secondary" />
 </button>

package/package/components/common/actionRow/ActionRow.svelte

@@ -7,7 +7,7 @@ let scrollY = 0;
 <svelte:window bind:scrollY />
 
 <div
-	class={'bg-white py-3 ' +
+	class={'bg-surface py-3 ' +
 		(stickToTop
 			? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 ' +
 			  (scrollY >= 30 ? 'border-opacity-100 ' : '')

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

@@ -16,28 +16,28 @@ const icons = {
 };
 const classes = {
     info: {
-        bgClass: 'bg-blue-50 border-blue-200 border',
-        iconClass: 'text-blue-500',
-        titleClass: 'text-blue-800',
-        descriptionClass: 'text-blue-700'
+        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',
+        titleClass: 'text-blue-800 dark:text-blue-100',
+        descriptionClass: 'text-blue-700 dark:text-blue-200'
     },
     warning: {
-        bgClass: 'bg-yellow-50 border-yellow-200 border',
-        iconClass: 'text-yellow-500',
-        titleClass: 'text-yellow-800',
-        descriptionClass: 'text-yellow-700'
+        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'
     },
     error: {
-        bgClass: 'bg-red-50 border-red-200 border',
-        iconClass: 'text-red-500',
-        titleClass: 'text-red-800',
-        descriptionClass: 'text-red-700'
+        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'
     },
     success: {
-        bgClass: 'bg-green-50 border-green-200 border',
-        iconClass: 'text-green-500',
-        titleClass: 'text-green-800',
-        descriptionClass: 'text-green-700'
+        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'
     }
 };
 </script>
@@ -64,8 +64,8 @@ const classes = {
 				)}
 			>
 				{title}&nbsp;{#if tooltip != '' || documentationLink}
-				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
-			{/if}
+					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+				{/if}
 			</span>
 			<div
 				class={classNames(

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-gray-500'}
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-tertiary'}
 			on:click={() => dispatch('select', { index })}
 			disabled={selectedIndex - 1 === index ? disabled : false}
 		>

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

@@ -44,34 +44,34 @@ const colorVariants = {
         divider: ''
     },
     blue: {
-        border: 'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
+        border: 'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus:bg-frost-100 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
         contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300',
         divider: 'divide-x divide-frost-600'
     },
     red: {
-        border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
+        border: 'border-red-600 hover:border-red-700 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
         contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300',
         divider: 'divide-x divide-red-700'
     },
     green: {
-        border: 'border-green-600 hover:border-green-700 bg-white hover:bg-green-100 text-green-600 hover:text-green-700 focus: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:ring-green-300',
         contained: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-300',
         divider: 'divide-x divide-green-700'
     },
     dark: {
-        border: 'border-gray-800 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
-        contained: 'bg-gray-700 hover:bg-gray-900 focus:bg-gray-900 text-white focus:ring-gray-300',
-        divider: 'divide-x divide-gray-800'
+        border: 'border-surface-inverse bg-surface hover:bg-surface-hover focus:bg-surface-hover text-primary hover:text-secondary focus:text-secondary focus:ring-surface-selected-inverse',
+        contained: 'bg-surface-inverse hover:bg-surface-inverse-hover focus:bg-surface-hover-inverse text-primary-inverse focus:ring-surface-selected-inverse',
+        divider: 'divide-x divide-gray-800 dark:divide-gray-200'
     },
     gray: {
-        border: 'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
+        border: 'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-surface hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-primary focus:text-primary focus:ring-gray-300',
         contained: 'bg-gray-700/90 hover:bg-gray-900/90 focus:bg-gray-900/90 text-white focus:ring-gray-300',
-        divider: 'divide-x divide-gray-700'
+        divider: 'divide-x divide-gray-700 dark:divide-gray-200'
     },
     light: {
-        border: 'border border-gray-300 bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
-        contained: 'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300',
-        divider: 'divide-x divide-gray-100'
+        border: 'border bg-surface hover:bg-surface-hover focus:bg-surface-hover text-primary hover:text-secondary focus:text-secondary focus:ring-surface-selected',
+        contained: 'bg-surface hover:bg-surface-hover focus:bg-surface-hover text-primary focus:ring-surface-selected',
+        divider: 'divide-x divide-gray-200 dark:divide-gray-700'
     }
 };
 async function onClick(event) {
@@ -107,7 +107,7 @@ $: buttonClass = twMerge('w-full', colorVariants?.[color]?.[variant], variant ==
 			{download}
 			class={twMerge(
 				buttonClass,
-				disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+				disabled ? '!bg-surface-disabled !text-tertiary !cursor-not-allowed' : ''
 			)}
 			{id}
 			{target}
@@ -137,7 +137,7 @@ $: buttonClass = twMerge('w-full', colorVariants?.[color]?.[variant], variant ==
 			on:blur
 			class={twMerge(
 				buttonClass,
-				disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+				disabled ? '!bg-surface-disabled !text-disabled !cursor-not-allowed' : ''
 			)}
 			{id}
 			tabindex={disabled ? -1 : 0}
@@ -169,7 +169,7 @@ $: buttonClass = twMerge('w-full', colorVariants?.[color]?.[variant], variant ==
 						<MenuItem on:click={item.onClick} href={item.href}>
 							<div
 								class={classNames(
-									'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+									'!text-secondary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
 								)}
 							>
 								{#if item.icon}

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

@@ -20,7 +20,7 @@ const popperOptions = {
 };
 </script>
 
-<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
+<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full ">
 	<span use:popperRef>
 		<MenuButton
 			class={twMerge('h-full w-full flex flex-row gap-2 items-center', hasPadding ? 'px-2' : '')}
@@ -42,7 +42,7 @@ const popperOptions = {
 				leaveTo="transform opacity-0 scale-95"
 			>
 				<MenuItems
-					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-white shadow-md focus:outline-none"
+					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-surface shadow-md focus:outline-none"
 				>
 					<div class="my-1">
 						<slot name="items" />

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

@@ -0,0 +1,62 @@
+<script>import { ArrowRight, Calendar } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { Button, Popup } from '..';
+export let date;
+export let label;
+const dispatch = createEventDispatcher();
+let value = date;
+let input;
+$: if (date && input) {
+    input.value = new Date(date).toISOString().slice(0, 16);
+}
+function save() {
+    dispatch('change', value);
+    input.blur();
+}
+function bg(e) {
+    if (e.key === 'Tab') {
+        e.stopPropagation();
+    }
+}
+</script>
+
+<Popup floatingConfig={{ placement: 'top-end', strategy: 'absolute' }} let:close>
+	<svelte:fragment slot="button">
+		<button
+			title="Open calendar picker"
+			class="absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2 items-center text-primary bg-surface border rounded center-center hover:bg-surface-hover transition-all cursor-pointer"
+			aria-label="Open calendar picker"
+			on:click={() => {
+				input?.focus()
+			}}
+		>
+			<Calendar size={14} />
+		</button>
+	</svelte:fragment>
+
+	<label class="block text-primary">
+		<div class="pb-1 text-sm text-secondary">{label}</div>
+		<div class="flex w-full">
+			<input
+				type="datetime-local"
+				bind:value
+				class="!w-auto grow"
+				bind:this={input}
+				on:keydown={bg}
+			/>
+			<Button
+				size="xs"
+				color="dark"
+				buttonType="button"
+				btnClasses="!p-1 !w-[34px] !ml-1"
+				aria-label="Save ID"
+				on:click={() => {
+					save()
+					close(null)
+				}}
+			>
+				<ArrowRight size={18} />
+			</Button>
+		</div>
+	</label>
+</Popup>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        date: string | undefined;
+        label: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CalendarPickerProps = typeof __propDef.props;
+export type CalendarPickerEvents = typeof __propDef.events;
+export type CalendarPickerSlots = typeof __propDef.slots;
+export default class CalendarPicker extends SvelteComponentTyped<CalendarPickerProps, CalendarPickerEvents, CalendarPickerSlots> {
+}
+export {};

package/package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -47,21 +47,23 @@ function fadeFast(node) {
 			<div class="flex min-h-full items-center justify-center p-4">
 				<div
 					class={classNames(
-						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
 							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
 					)}
 				>
 					<div class="flex">
-						<div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-							<Icon data={faWarning} class="text-red-500" />
+						<div
+							class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-800/50"
+						>
+							<Icon data={faWarning} class="text-red-500 dark:text-red-400" />
 						</div>
 						<div class="ml-4 text-left flex-1">
-							<h3 class="text-lg font-medium text-gray-900">
+							<h3 class="text-lg font-medium text-primary">
 								{title}
 							</h3>
-							<div class="mt-2 text-sm text-gray-500">
+							<div class="mt-2 text-sm text-secondary">
 								<slot />
 							</div>
 						</div>

package/package/components/common/drawer/Drawer.svelte

@@ -91,7 +91,7 @@ onMount(() => {
 	.drawer.open {
 		height: 100%;
 		width: 100%;
-		z-index: 1002;
+		z-index: var(--zIndex, 1002);
 		transition: z-index var(--duration) step-start;
 		pointer-events: auto;
 	}
@@ -102,7 +102,7 @@ onMount(() => {
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background: rgba(100, 100, 100, 0.5);
+		background: rgba(0, 0, 0, 0.5);
 		opacity: 0;
 		z-index: 2;
 		transition: opacity var(--duration) ease;
@@ -120,9 +120,11 @@ onMount(() => {
 	.panel {
 		position: fixed;
 		width: 100%;
-		background: white;
+		--tw-bg-opacity: 1;
+		background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
 		z-index: 3;
 		transition: transform var(--duration) ease;
+		height: 100%;
 	}
 
 	.panel.left {

package/package/components/common/drawer/DrawerContent.svelte

@@ -7,14 +7,15 @@ export let noPadding = false;
 export let forceOverflowVisible = false;
 export let tooltip = '';
 export let documentationLink = undefined;
+export let fullScreen = true;
 </script>
 
-<div class="flex flex-col divide-y h-screen max-h-screen">
+<div class={classNames('flex flex-col divide-y ', fullScreen ? 'h-screen max-h-screen' : 'h-full')}>
 	<div class="flex justify-between w-full items-center px-2 py-2 gap-2">
 		<div class="flex items-center gap-2 min-w-0">
 			<CloseButton on:close />
 
-			<span class="font-semibold truncate text-gray-800"
+			<span class="font-semibold truncate text-primary"
 				>{title ?? ''}
 				{#if tooltip != '' || documentationLink}
 					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         forceOverflowVisible?: boolean | undefined;
         tooltip?: string | undefined;
         documentationLink?: string | undefined;
+        fullScreen?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/package/components/common/fileInput/FileInput.svelte

@@ -84,9 +84,9 @@ async function dispatchChange() {
 
 <button
 	class={twMerge(
-		`relative center-center flex-col text-center font-medium text-gray-600 
+		`relative center-center flex-col text-center font-medium text-tertiary 
 		border-2 border-dashed border-gray-400 hover:border-blue-500 
-		focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
+		focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50 
 		duration-200 rounded-lg p-1`,
 		c
 	)}
@@ -102,7 +102,7 @@ async function dispatchChange() {
 					Selected file{files.length > 1 ? 's' : ''}:
 				</div>
 			</slot>
-			<ul class="relative z-20 max-w-[500px] bg-white rounded-lg overflow-hidden mx-auto">
+			<ul class="relative z-20 max-w-[500px] bg-surface rounded-lg overflow-hidden mx-auto">
 				{#each files as { name }, i}
 					<li
 						class="flex justify-between items-center font-normal text-sm