windmill-components 1.122.0 → 1.138.2

package/package/components/graph/FlowGraph.svelte

@@ -1,14 +1,15 @@
 <script>import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
 import { FlowStatusModule } from '../../gen';
 import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
-import { defaultIfEmptyString, encodeState, truncateRev } from '../../utils';
-import { createEventDispatcher, setContext } from 'svelte';
+import { defaultIfEmptyString, encodeState } from '../../utils';
+import { createEventDispatcher, onMount, setContext } from 'svelte';
 import Svelvet from './svelvet/container/views/Svelvet.svelte';
 import MapItem from '../flows/map/MapItem.svelte';
 import VirtualItem from '../flows/map/VirtualItem.svelte';
 import { writable } from 'svelte/store';
 import { getDependeeAndDependentComponents } from '../flows/flowExplorer';
 import { deepEqual } from 'fast-equals';
+import DarkModeObserver from '../DarkModeObserver.svelte';
 export let success = undefined;
 export let modules = [];
 export let failureModule = undefined;
@@ -39,10 +40,11 @@ $: showDataflow =
         $selectedId !== 'Result';
 let dataflow = false;
 let dispatch = createEventDispatcher();
+let renderCount = 1;
 $: {
     dataflow;
     moving;
-    width && height && minHeight && $selectedId && flowModuleStates;
+    width && height && minHeight && $selectedId && flowModuleStates && renderCount;
     createGraph();
 }
 $: rebuildOnChange && triggerRebuild();
@@ -139,12 +141,13 @@ function getConvertedFlowModule(module, parent, edgeLabel, loopDepth, insertable
         const branches = [
             { summary: 'Default Branch', modules: module.value.default, removable: false },
             ...module.value.branches.map((b, i) => ({
-                summary: defaultIfEmptyString(b.summary, 'Branch ' + (i + 1)),
+                summary: defaultIfEmptyString(b.summary, 'Branch ' + (i + 1)) + '\n`' + b.expr + '`',
                 modules: b.modules,
                 removable: true
             }))
         ];
-        return flowModuleToBranch(module, modules, branches, ['', ...module.value.branches.map((x) => `${truncateRev(x.expr, 20)}`)], parent, loopDepth, false);
+        return flowModuleToBranch(module, modules, branches, [], //['', ...module.value.branches.map((x) => `${truncateRev(x.expr, 20)}`)],
+        parent, loopDepth, false);
     }
     else if (type === 'branchall') {
         const branches = module.value.branches.map((b, i) => ({
@@ -176,29 +179,31 @@ function getParentIds(items = undefined) {
     return [];
 }
 function getStateColor(state) {
+    const isDark = document.documentElement.classList.contains('dark');
     switch (state) {
         case FlowStatusModule.type.SUCCESS:
-            return 'rgb(193, 255, 216)';
+            return isDark ? '#059669' : 'rgb(193, 255, 216)';
         case FlowStatusModule.type.FAILURE:
-            return 'rgb(248 113 113)';
+            return isDark ? '#dc2626' : 'rgb(248 113 113)';
         case FlowStatusModule.type.IN_PROGRESS:
-            return 'rgb(253, 240, 176)';
+            return isDark ? '#f59e0b' : 'rgb(253, 240, 176)';
         case FlowStatusModule.type.WAITING_FOR_EVENTS:
-            return 'rgb(229, 176, 253)';
+            return isDark ? '#db2777' : 'rgb(229, 176, 253)';
         case FlowStatusModule.type.WAITING_FOR_EXECUTOR:
-            return 'rgb(255, 208, 193)';
+            return isDark ? '#ea580c' : 'rgb(255, 208, 193)';
         default:
-            return '#fff';
+            return isDark ? '#2e3440' : '#fff';
     }
 }
 function getResultColor() {
+    const isDark = document.documentElement.classList.contains('dark');
     switch (success) {
         case true:
             return getStateColor(FlowStatusModule.type.SUCCESS);
         case false:
             return getStateColor(FlowStatusModule.type.FAILURE);
         default:
-            return '#fff';
+            return isDark ? '#2e3440' : '#fff';
     }
 }
 function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules) {
@@ -282,7 +287,7 @@ function flowModuleToBranch(module, modules, branches, edgesLabel, parent = unde
     }
     branches.forEach(({ summary, modules, removable }, i) => {
         const items = [];
-        items.push(createVirtualNode(branchParent, summary, modules, 'after', edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined, undefined, undefined));
+        items.push(createVirtualNode(branchParent, summary, modules, 'after', edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined, undefined, undefined, false));
         if (modules.length) {
             modules.forEach((module, j) => {
                 const item = getConvertedFlowModule(module, items, undefined, loopDepth, j + 1 == modules?.length, modules);
@@ -403,7 +408,7 @@ function createEdges(nodes) {
     });
     return edges;
 }
-function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid, fixed_id) {
+function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid, fixed_id, center = true) {
     const id = fixed_id ?? -idGenerator.next().value - 2 + (offset ?? 0);
     return {
         type: 'node',
@@ -421,14 +426,19 @@ function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, of
                     label,
                     insertable,
                     modules,
-                    bgColor: label == 'Result' ? getResultColor() : '#dfe6ee',
+                    bgColor: label == 'Result'
+                        ? getResultColor()
+                        : document.documentElement.classList.contains('dark')
+                            ? '#2e3440'
+                            : '#dfe6ee',
                     selected: $selectedId == label,
                     index,
                     selectable,
                     whereInsert,
                     deleteBranch,
                     id: mid,
-                    moving
+                    moving,
+                    center
                 },
                 cb: (e, detail) => {
                     if (e == 'insert') {
@@ -492,27 +502,36 @@ function createErrorHandler(mod, parent_module) {
         loopDepth: 0
     };
 }
+function onThemeChange() {
+    renderCount++;
+}
+onMount(() => {
+    onThemeChange();
+});
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <div bind:clientWidth={width} class={fullSize ? '' : 'w-full h-full overflow-hidden relative'}>
 	{#if width && height}
-		<Svelvet
-			on:expand={() => {
-				localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
-				window.open('/view_graph', '_blank')
-			}}
-			{download}
-			highlightEdges={false}
-			locked
-			bind:dataflow
-			{nodes}
-			width={fullSize ? fullWidth : width}
-			{edges}
-			{height}
-			{scroll}
-			nodeSelected={showDataflow}
-			background={false}
-			bgColor="rgb(249 250 251)"
-		/>
+		{#key renderCount}
+			<Svelvet
+				on:expand={() => {
+					localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
+					window.open('/view_graph', '_blank')
+				}}
+				{download}
+				highlightEdges={false}
+				locked
+				bind:dataflow
+				{nodes}
+				width={fullSize ? fullWidth : width}
+				{edges}
+				{height}
+				{scroll}
+				nodeSelected={showDataflow}
+				background={false}
+			/>
+		{/key}
 	{/if}
 </div>

package/package/components/graph/svelvet/container/views/GraphView.svelte

@@ -7,7 +7,6 @@ import StepEdge from '../../edges/views/Edges/StepEdge.svelte';
 import Node from '../../nodes/views/Node.svelte';
 import { determineD3Instance } from '../..//d3/controllers/d3';
 import { findStore } from '../../store/controllers/storeApi';
-import { onDestroy } from 'svelte';
 import { Expand, Minus, Plus } from 'lucide-svelte';
 import Toggle from '../../../../Toggle.svelte';
 //these are typscripted as any, however they have been transformed inside of store.ts
@@ -41,7 +40,7 @@ let d3Zoom = determineD3Instance(boundary, d3, nodeSelected, width, height, move
 // d3Translate is used for the minimap
 onMount(() => {
     // actualizes the d3 instance
-    const nodes = d3.select(`.zoomable`).call(d3Zoom).on('dblclick.zoom', null);
+    const nodes = d3.select(`#zoomable-${canvasId}`).call(d3Zoom).on('dblclick.zoom', null);
     if (!scroll) {
         ;
         [nodes].forEach((d3Instance) => {
@@ -52,16 +51,18 @@ onMount(() => {
                 .on('DOMMouseScroll.zoom', null);
         });
     }
-    d3.select('#zoom_in').on('click', function () {
+    d3.select(`#zoom_in_${canvasId}`).on('click', function () {
         try {
+            // @ts-ignore
             d3Zoom.scaleBy(nodes.transition().duration(250), 1.4);
         }
         catch (e) {
             console.log('error', e);
         }
     });
-    d3.select('#zoom_out').on('click', function () {
+    d3.select(`#zoom_out_${canvasId}`).on('click', function () {
         try {
+            // @ts-ignore
             d3Zoom.scaleBy(nodes.transition().duration(250), 0.714);
         }
         catch (e) {
@@ -69,9 +70,6 @@ onMount(() => {
         }
     });
 });
-onDestroy(() => {
-    d3.select('svg').remove();
-});
 function handleZoom(e) {
     if (!$movementStore)
         return;
@@ -90,7 +88,7 @@ function handleZoom(e) {
 }
 </script>
 
-<div class="zoomable">
+<div class="zoomable" id={`zoomable-${canvasId}`}>
 	<!-- This is the container that holds GraphView and we have disabled right click functionality to prevent a sticking behavior -->
 	<div id="graphview-container">
 		<div class={`Nodes Nodes-${canvasId}`} on:contextmenu|preventDefault>
@@ -167,7 +165,7 @@ function handleZoom(e) {
 {#if showDataflowToggle}
 	<div id="dataflow_toggle">
 		<Toggle
-			textClass="!text-gray-600"
+			textClass="!text-secondary"
 			size="xs"
 			bind:checked={dataflow}
 			options={{
@@ -178,10 +176,10 @@ function handleZoom(e) {
 {/if}
 
 <div id="buttons">
-	<button title="Zoom In" id="zoom_in">
+	<button title="Zoom In" id={`zoom_in_${canvasId}`}>
 		<Plus size="14" class="flex justify-start m-1" />
 	</button>
-	<button title="Zoom Out" id="zoom_out">
+	<button title="Zoom Out" id={`zoom_out_${canvasId}`}>
 		<Minus size="14" class="flex justify-start m-1" />
 	</button>
 
@@ -207,15 +205,12 @@ function handleZoom(e) {
 
 	#buttons > button {
 		border-radius: 4px;
-		background-color: white;
-		border: #bbb solid 1px;
+		--tw-bg-opacity: 1;
+		background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
+		border-width: 1px;
 		transition: all;
 	}
 
-	#buttons > button:hover {
-		background-color: #eee;
-	}
-
 	.Nodes {
 		position: absolute;
 		width: 100%;

package/package/components/graph/svelvet/container/views/Svelvet.svelte

@@ -102,10 +102,8 @@ afterUpdate(() => {
 
 <!-- Now that a store has been created from the initial nodes and initial edges we drill props from the store down to the D3 GraphView along with the unique key -->
 <div
-	class="Svelvet"
-	style={`width: ${width}px; height: ${
-		fullHeight ? '100%' : height + 'px'
-	}; background-color: ${bgColor};`}
+	class="Svelvet bg-surface-secondary"
+	style={`width: ${width}px; height: ${fullHeight ? '100%' : height + 'px'};`}
 >
 	{#if error != ''}
 		<div class="error text-red-600 center-center p-4">{error}</div>

package/package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type EdgeTextProps = typeof __propDef.props;
+type EdgeTextProps_ = typeof __propDef.props;
+export { EdgeTextProps_ as EdgeTextProps };
 export type EdgeTextEvents = typeof __propDef.events;
 export type EdgeTextSlots = typeof __propDef.slots;
 export default class EdgeText extends SvelteComponentTyped<EdgeTextProps, EdgeTextEvents, EdgeTextSlots> {
 }
-export {};

package/package/components/home/ItemsList.svelte

@@ -208,7 +208,7 @@ let archived = false;
 />
 
 <CenteredPage>
-	<div class="flex flex-wrap gap-2 items-center justify-between w-full">
+	<div class="flex flex-wrap gap-2 items-center justify-between w-full mt-2">
 		<div class="flex justify-start">
 			<ToggleButtonGroup
 				bind:selected={itemKind}
@@ -238,13 +238,13 @@ let archived = false;
 			</ToggleButtonGroup>
 		</div>
 
-		<div class="relative text-gray-600 grow min-w-[100px]">
+		<div class="relative text-tertiary grow min-w-[100px]">
 			<!-- svelte-ignore a11y-autofocus -->
 			<input
 				autofocus
 				placeholder={HOME_SEARCH_PLACEHOLDER}
 				bind:value={filter}
-				class="bg-white !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
+				class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
 			/>
 			<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
 				<svg
@@ -269,14 +269,19 @@ let archived = false;
 		</div>
 	</div>
 	<div class="relative">
-		<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
+		<ListFilters
+			syncQuery
+			bind:selectedFilter={ownerFilter}
+			filters={owners}
+			bottomMargin={false}
+		/>
 		{#if filteredItems?.length == 0}
 			<div class="mt-10" />
 		{/if}
 		{#if !loading}
-			<div class="absolute -bottom-2 right-0 bg-white/90">
-				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} /></div
-			>
+			<div class="flex w-full flex-row-reverse">
+				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} />
+			</div>
 		{/if}
 	</div>
 	<div>
@@ -289,7 +294,7 @@ let archived = false;
 		{:else if filteredItems.length === 0}
 			<NoItemFound />
 		{:else}
-			<div class="border rounded-md divide-y divide-gray-200">
+			<div class="border rounded-md divide-y">
 				<!-- <VirtualList {items} let:item bind:start bind:end> -->
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
 					{#key item.summary}
@@ -352,7 +357,6 @@ let archived = false;
 					<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
 				>
 			{/if}
-			<div class="pb-80" />
 		{/if}
 	</div>
 </CenteredPage>

package/package/components/home/ListFilters.svelte

@@ -10,6 +10,7 @@ export let selectedFilter = undefined;
 export let resourceType = false;
 export let queryName = 'filter';
 export let syncQuery = false;
+export let bottomMargin = true;
 const queryChange = (url) => {
     if (syncQuery) {
         window.history.pushState(history.state, '', `?${url?.searchParams.toString()}`);
@@ -51,7 +52,7 @@ $: filtersAndSelected = selectedFilter
 </script>
 
 {#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
-	<div class="gap-2 w-full flex flex-wrap my-4">
+	<div class={`gap-2 w-full flex flex-wrap ${bottomMargin ? 'my-4' : 'mt-4'}`}>
 		{#each filtersAndSelected as filter (filter)}
 			<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
 				<Badge

package/package/components/home/ListFilters.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         resourceType?: boolean | undefined;
         queryName?: string | undefined;
         syncQuery?: boolean | undefined;
+        bottomMargin?: boolean | undefined;
         setQuery?: ((url: URL, key: string, value: string | undefined) => Promise<void>) | undefined;
     };
     events: {

package/package/components/home/NoItemFound.svelte

@@ -1,5 +1,5 @@
 <div class="flex justify-center items-center h-48">
-	<div class="text-gray-500 text-center">
+	<div class="text-tertiary text-center">
 		<div class="text-2xl font-bold">No items found</div>
 		<div class="text-sm">Try changing your search or filters</div>
 	</div>

package/package/components/icons/BigQueryIcon.svelte

@@ -0,0 +1,36 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 24 24"
+	><defs
+		><style>
+			.cls-1 {
+				fill: #aecbfa;
+			}
+			.cls-1,
+			.cls-2,
+			.cls-3 {
+				fill-rule: evenodd;
+			}
+			.cls-2 {
+				fill: #669df6;
+			}
+			.cls-3 {
+				fill: #4285f4;
+			}</style></defs
+	><title>Icon_24px_BigQuery_Color</title><g data-name="Product Icons"
+		><g
+			><path class="cls-1" d="M6.73,10.83v2.63A4.91,4.91,0,0,0,8.44,15.2V10.83Z" /><path
+				class="cls-2"
+				d="M9.89,8.41v7.53A7.62,7.62,0,0,0,11,16,8,8,0,0,0,12,16V8.41Z"
+			/><path class="cls-1" d="M13.64,11.86v3.29a5,5,0,0,0,1.7-1.82V11.86Z" /><path
+				class="cls-3"
+				d="M17.74,16.32l-1.42,1.42a.42.42,0,0,0,0,.6l3.54,3.54a.42.42,0,0,0,.59,0l1.43-1.43a.42.42,0,0,0,0-.59l-3.54-3.54a.42.42,0,0,0-.6,0"
+			/><path
+				class="cls-2"
+				d="M11,2a9,9,0,1,0,9,9,9,9,0,0,0-9-9m0,15.69A6.68,6.68,0,1,1,17.69,11,6.68,6.68,0,0,1,11,17.69"
+			/></g
+		></g
+	></svg
+>

package/package/components/icons/BigQueryIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BigQueryIconProps = typeof __propDef.props;
+export type BigQueryIconEvents = typeof __propDef.events;
+export type BigQueryIconSlots = typeof __propDef.slots;
+export default class BigQueryIcon extends SvelteComponentTyped<BigQueryIconProps, BigQueryIconEvents, BigQueryIconSlots> {
+}
+export {};

package/package/components/icons/PowershellIcon.svelte

@@ -0,0 +1,56 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	version="1.1"
+	id="PowerShell"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 204.691 154.521"
+	style="enable-background:new 0 0 204.691 154.521;"
+	xml:space="preserve"
+>
+	<g>
+		<path
+			style="display:none;fill-rule:evenodd;clip-rule:evenodd;fill:#2671BE;"
+			d="M-47.547,226.872
+		c0-97.129,0.094-194.259-0.195-291.387c-0.021-6.982,1.404-8.411,8.388-8.389c94.397,0.292,188.798,0.292,283.195,0
+		c6.984-0.022,8.41,1.407,8.389,8.389c-0.289,97.128-0.195,194.258-0.195,291.387c-3.238,2.008-6.837,1.129-10.268,1.131
+		c-93.015,0.049-186.031,0.049-279.047,0C-40.711,228.001-44.31,228.88-47.547,226.872z"
+		/>
+		<path
+			style="fill-rule:evenodd;clip-rule:evenodd;fill:#E0EAF5;"
+			d="M120.14,0.032c23.011-0.008,46.023-0.078,69.034,0.019
+		c13.68,0.056,17.537,4.627,14.588,18.137c-8.636,39.566-17.466,79.092-26.415,118.589c-2.83,12.484-9.332,17.598-22.465,17.637
+		c-46.023,0.137-92.046,0.152-138.068-0.006c-15.043-0.053-19-5.148-15.759-19.404C9.849,96.287,18.69,57.582,27.602,18.892
+		C30.997,4.148,36.099,0.1,51.104,0.057C74.116-0.008,97.128,0.04,120.14,0.032z"
+		/>
+		<path
+			style="fill-rule:evenodd;clip-rule:evenodd;fill:#2671BE;"
+			d="M85.365,149.813c-23.014-0.008-46.029,0.098-69.042-0.053
+		c-11.67-0.076-13.792-2.83-11.165-14.244c8.906-38.71,18.099-77.355,26.807-116.109C34.3,9.013,39.337,4.419,50.473,4.522
+		c46.024,0.427,92.056,0.137,138.083,0.184c11.543,0.011,13.481,2.48,10.89,14.187c-8.413,38.007-16.879,76.003-25.494,113.965
+		c-3.224,14.207-6.938,16.918-21.885,16.951C129.833,149.856,107.598,149.821,85.365,149.813z"
+		/>
+		<path
+			style="fill-rule:evenodd;clip-rule:evenodd;fill:#FDFDFE;"
+			d="M104.948,73.951c-1.543-1.81-3.237-3.894-5.031-5.886
+		c-10.173-11.3-20.256-22.684-30.61-33.815c-4.738-5.094-6.248-10.041-0.558-15.069c5.623-4.97,11.148-4.53,16.306,1.188
+		c14.365,15.919,28.713,31.856,43.316,47.556c5.452,5.864,4.182,9.851-1.823,14.196c-23.049,16.683-45.968,33.547-68.862,50.443
+		c-5.146,3.799-10.052,4.75-14.209-0.861c-4.586-6.189-0.343-9.871,4.414-13.335c17.013-12.392,33.993-24.83,50.9-37.366
+		C101.146,79.256,104.527,78.238,104.948,73.951z"
+		/>
+		<path
+			style="fill-rule:evenodd;clip-rule:evenodd;fill:#FCFDFD;"
+			d="M112.235,133.819c-6.196,0-12.401,0.213-18.583-0.068
+		c-4.932-0.223-7.9-2.979-7.838-8.174c0.06-4.912,2.536-8.605,7.463-8.738c13.542-0.363,27.104-0.285,40.651-0.02
+		c4.305,0.084,7.483,2.889,7.457,7.375c-0.031,5.146-2.739,9.133-8.25,9.465c-6.944,0.42-13.931,0.104-20.899,0.104
+		C112.235,133.78,112.235,133.8,112.235,133.819z"
+		/>
+	</g>
+</svg>

package/package/components/icons/PowershellIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PowershellIconProps = typeof __propDef.props;
+export type PowershellIconEvents = typeof __propDef.events;
+export type PowershellIconSlots = typeof __propDef.slots;
+export default class PowershellIcon extends SvelteComponentTyped<PowershellIconProps, PowershellIconEvents, PowershellIconSlots> {
+}
+export {};

package/package/components/icons/RestIcon.svelte

@@ -0,0 +1,21 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 1000 1000"
+	enable-background="new 0 0 1000 1000"
+	xml:space="preserve"
+>
+	<g
+		><path
+			d="M732.4,557.3c-4.2-0.8-12.5-1.2-25.2-1.2h-16.9v49.3h19.2c13.7,0,23-1,27.6-2.8c4.7-1.8,8.3-4.7,11-8.6c2.7-3.9,4-8.3,4-13.5c0-6.3-1.8-11.6-5.5-15.7C742.8,560.9,738.1,558.3,732.4,557.3z M845.2,483.1c-13.4,0-26.4,1.8-38.8,5.3c2.2-10,3.4-20.4,3.4-31c0-79.2-63.9-143.4-142.6-143.4c-32.5,0-62.6,11-86.5,29.5C541.2,274,467,227.2,381.7,227.2c-117.6,0-214.4,89.2-227.3,203.8C72.6,444,10,515.1,10,600.8c0,95,76.8,172,171.4,172h663.7l0,0c80,0,144.9-64.9,144.9-144.9C990.1,547.9,925.3,483.1,845.2,483.1z M342.1,700.5h-35v-76.1h-68.5v76.1h-35V526.7h35v68.5h68.5v-68.5h35V700.5z M497.3,556.1h-51.2v144.4h-35V556.1h-51.4v-29.4h137.5V556.1z M639,556.1h-51.2v144.4h-35V556.1h-51.4v-29.4H639V556.1z M782.3,607.1c-3.9,7.2-8.8,13-14.7,17.1c-5.9,4.1-11.9,6.9-18.1,8.2c-8.3,1.7-20.4,2.5-36.3,2.5h-22.8v65.6h-35l0-173.8h56.1c21.2,0,35.1,0.8,41.6,2.7c9.9,2.7,18.2,8.3,25,17c6.6,8.7,10,20,10,33.9C788.1,590.8,786,599.9,782.3,607.1z"
+		/></g
+	>
+</svg>

package/package/components/icons/RestIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RestIconProps = typeof __propDef.props;
+export type RestIconEvents = typeof __propDef.events;
+export type RestIconSlots = typeof __propDef.slots;
+export default class RestIcon extends SvelteComponentTyped<RestIconProps, RestIconEvents, RestIconSlots> {
+}
+export {};