windmill-components 1.394.8 → 1.405.5

package/package/components/graph/model.d.ts

@@ -38,6 +38,7 @@ export type FlowStatusViewerContext = {
     hideTimeline?: boolean;
     hideNodeDefinition?: boolean;
     hideJobId?: boolean;
+    hideDownloadLogs: any;
 };
 export type GraphModuleState = {
     type: FlowStatusModule['type'];
@@ -60,6 +61,7 @@ export type GraphModuleState = {
     started_at?: number;
     suspend_count?: number;
     isListJob?: boolean;
+    skipped?: boolean;
 };
 export type NestedNodes = GraphItem[];
 export declare function isNode(item: GraphItem | NestedNodes | undefined): item is Node;

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -3,7 +3,6 @@ import { getBezierPath, BaseEdge, EdgeLabelRenderer } from '@xyflow/svelte';
 import { ClipboardCopy } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { getStraightLinePath } from '../utils';
-import InsertTriggerButton from '../../../flows/map/InsertTriggerButton.svelte';
 import { twMerge } from 'tailwind-merge';
 export let sourceX;
 export let sourceY;
@@ -27,32 +26,44 @@ $: completeEdge =
         ? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
         : edgePath;
 const { useDataflow } = getContext('FlowGraphContext');
-let menuOpen = false;
 </script>
 
 <EdgeLabelRenderer>
 	{#if data?.insertable && !$useDataflow && !data?.moving}
 		<div
-			class={twMerge('edgeButtonContainer nodrag nopan top-0', menuOpen ? 'z-50' : '')}
+			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
 			style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY + 2}px)"
 		>
 			<InsertModuleButton
 				disableAi={data.disableAi}
 				index={data.index ?? 0}
-				trigger={data.enableTrigger}
+				allowTrigger={data.enableTrigger}
 				modules={data?.modules ?? []}
 				on:new={(e) => {
-					data?.eventHandlers.insert({ modules: data.modules, index: data.index, detail: e.detail })
+					// console.log('new', e)
+					data?.eventHandlers.insert({
+						modules: data.modules,
+						index: data.index,
+						kind: e.detail.kind,
+						inlineScript: e.detail.inlineScript
+					})
+				}}
+				on:pickScript={(e) => {
+					// console.log('pickScript', e)
+					data?.eventHandlers.insert({
+						modules: data.modules,
+						index: data.index,
+						script: e.detail
+					})
 				}}
-				on:insert={(e) => {
+				on:pickFlow={(e) => {
+					// console.log('pickFlow', e)
 					data?.eventHandlers.insert({
 						modules: data.modules,
 						index: data.index,
-						script: e.detail,
-						detail: 'script'
+						flow: e.detail
 					})
 				}}
-				bind:open={menuOpen}
 			/>
 		</div>
 		{#if data.enableTrigger}
@@ -60,23 +71,34 @@ let menuOpen = false;
 				class="edgeButtonContainer nodrag nopan"
 				style:transform="translate(100%, 50%) translate({sourceX}px,{sourceY + 2}px)"
 			>
-				<InsertTriggerButton
+				<InsertModuleButton
 					disableAi={data.disableAi}
 					on:new={(e) => {
+						// console.log('new', e)
+						data?.eventHandlers.insert({
+							modules: data.modules,
+							index: data.index,
+							kind: e.detail.kind,
+							inlineScript: e.detail.inlineScript
+						})
+					}}
+					on:pickScript={(e) => {
+						// console.log('pickScript', e)
 						data?.eventHandlers.insert({
 							modules: data.modules,
 							index: data.index,
-							detail: e.detail
+							script: e.detail
 						})
 					}}
-					on:insert={(e) => {
+					on:pickFlow={(e) => {
+						// console.log('pickFlow', e)
 						data?.eventHandlers.insert({
 							modules: data.modules,
 							index: data.index,
-							script: e.detail,
-							detail: 'script'
+							flow: e.detail
 						})
 					}}
+					kind="trigger"
 					index={data?.index ?? 0}
 					modules={data?.modules ?? []}
 				/>

package/package/components/graph/renderers/nodes/BranchOneStart.svelte

@@ -29,7 +29,7 @@ hover:border-red-700"
 				data.eventHandlers.deleteBranch(
 					{
 						module: data.modules.find((m) => m.id === data.id),
-						index: data.branchIndex
+						index: data.branchIndex + 1
 					},
 					data.label
 				)

package/package/components/graph/renderers/nodes/InputNode.svelte

@@ -1,62 +1,42 @@
 <script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
-import { ExternalLink, Wand2 } from 'lucide-svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import Popover from '../../../Popover.svelte';
 import { getStateColor } from '../../util';
-import Menu from '../../../common/menu/Menu.svelte';
 import { getContext } from 'svelte';
-import { copilotInfo } from '../../../../stores';
-import { base } from '../../../../base';
+import FlowCopilotButton from '../../../flows/map/FlowCopilotButton.svelte';
+import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
 export let data;
-let openNoCopilot = false;
-const { drawerStore: copilotDrawerStore } = getContext('FlowCopilotContext') || {};
 const { selectedId } = getContext('FlowGraphContext');
 </script>
 
-<NodeWrapper enableTargetHandle={false} let:darkMode>
-	{#if data.insertable && !data.disableAi}
-		<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 z-10">
-			<Popover>
-				<div class={openNoCopilot ? 'z-10' : ''}>
-					<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
-						<button
-							title="AI Flow Builder"
-							on:pointerdown={$copilotInfo.exists_openai_resource_path
-								? (ev) => {
-										ev.preventDefault()
-										ev.stopPropagation()
-										$copilotDrawerStore?.openDrawer()
-								  }
-								: undefined}
-							slot="trigger"
-							type="button"
-							class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-7 h-7 flex items-center justify-center"
-						>
-							<Wand2 size={12} />
-						</button>
-						{#if !$copilotInfo.exists_openai_resource_path}
-							<div class="text-primary p-4">
-								<p class="text-sm w-80">
-									Enable Windmill AI in the
-									<a
-										href="{base}/workspace_settings?tab=openai"
-										target="_blank"
-										class="inline-flex flex-row items-center gap-1"
-										on:click={() => {
-											close()
-										}}
-									>
-										workspace settings
-										<ExternalLink size={16} />
-									</a>
-								</p>
-							</div>
-						{/if}
-					</Menu>
-				</div>
-
-				<svelte:fragment slot="text">AI Flow builder</svelte:fragment>
-			</Popover>
+<NodeWrapper let:darkMode>
+	{#if data.insertable && !data.disableAi && !data.hasPreprocessor}
+		<FlowCopilotButton className="-top-[4.25rem]" />
+	{/if}
+	{#if data.insertable && !data.hasPreprocessor}
+		<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 z-10">
+			<InsertModuleButton
+				disableAi={data.disableAi}
+				index={data.index ?? 0}
+				modules={data?.modules ?? []}
+				kind="preprocessor"
+				on:new={(e) => {
+					data?.eventHandlers.insert({
+						modules: data.modules,
+						index: data.index,
+						kind: e.detail.kind,
+						inlineScript: e.detail.inlineScript,
+						detail: 'preprocessor'
+					})
+				}}
+				on:pickScript={(e) => {
+					data?.eventHandlers.insert({
+						modules: data.modules,
+						index: data.index,
+						script: e.detail,
+						detail: 'preprocessor'
+					})
+				}}
+			/>
 		</div>
 	{/if}
 	<VirtualItem

package/package/components/graph/renderers/nodes/InputNode.svelte.d.ts

@@ -4,10 +4,15 @@ import type { FlowModule } from '../../../../gen';
 declare const __propDef: {
     props: {
         data: {
+            hasPreprocessor: boolean;
             insertable: boolean;
-            eventHandlers: GraphEventHandlers;
             modules: FlowModule[];
+            moving: string | undefined;
+            eventHandlers: GraphEventHandlers;
+            index: number;
+            enableTrigger: boolean;
             disableAi: boolean;
+            disableMoveIds: string[];
         };
     };
     events: {

package/package/components/graph/renderers/nodes/ModuleNode.svelte

@@ -29,11 +29,12 @@ let selectedIteration = -1;
 			  '/' +
 			  (state?.iteration_total ?? '?')
 			: ''}
-		bgColor={getStateColor(type, darkMode, true)}
+		bgColor={getStateColor(type, darkMode, true, state?.skipped)}
 		modules={data.modules ?? []}
 		moving={data.moving}
 		duration_ms={state?.duration_ms}
 		retries={data.retries}
+		disableAi={data.disableAi}
 		{flowJobs}
 		on:delete={(e) => {
 			data.eventHandlers.delete(e.detail, '')

package/package/components/graph/util.d.ts

@@ -7,4 +7,4 @@ export declare const NODE: {
         vertical: number;
     };
 };
-export declare function getStateColor(state: FlowStatusModule['type'] | undefined, isDark: boolean, nonVirtualItem?: boolean): string;
+export declare function getStateColor(state: FlowStatusModule['type'] | undefined, isDark: boolean, nonVirtualItem?: boolean, isSkipped?: boolean): string;

package/package/components/graph/util.js

@@ -6,10 +6,15 @@ export const NODE = {
         vertical: 50
     }
 };
-export function getStateColor(state, isDark, nonVirtualItem) {
+export function getStateColor(state, isDark, nonVirtualItem, isSkipped) {
     switch (state) {
         case 'Success':
-            return isDark ? '#059669' : 'rgb(193, 255, 216)';
+            if (isSkipped) {
+                return isDark ? '#1E3A8A' : 'rgb(191, 219, 254)';
+            }
+            else {
+                return isDark ? '#059669' : 'rgb(193, 255, 216)';
+            }
         case 'Failure':
             return isDark ? '#dc2626' : 'rgb(248 113 113)';
         case 'InProgress':

package/package/components/home/ListFiltersQuick.svelte

@@ -0,0 +1,51 @@
+<script>import { Folder, User, Circle } from 'lucide-svelte';
+import { APP_TO_ICON_COMPONENT } from '../icons';
+import { twMerge } from 'tailwind-merge';
+import { createEventDispatcher } from 'svelte';
+export let filters;
+export let selectedFilter = undefined;
+$: selectedAppFilter = selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined;
+export let resourceType = false;
+function getIconComponent(name) {
+    return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
+}
+const dispatch = createEventDispatcher();
+</script>
+
+{#if Array.isArray(filters) && filters.length > 0}
+	{#each filters as filter (filter)}
+		<div>
+			<button
+				class={twMerge(
+					'w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
+					filter === selectedAppFilter ? 'bg-surface-hover' : ''
+				)}
+				on:click={() => {
+					selectedFilter =
+						selectedAppFilter == filter ? undefined : { kind: 'integrations', name: filter }
+					dispatch('selected')
+				}}
+			>
+				<div class="flex justify-center flex-row items-center gap-2">
+					{#if resourceType}
+						{@const icon = getIconComponent(filter)}
+						{#if icon}
+							<svelte:component this={icon} height="14px" width="14px" />
+						{:else}
+							<div
+								class="w-[14px] h-[14px] text-gray-400 flex flex-row items-center justify-center"
+							>
+								<Circle size="12" />
+							</div>
+						{/if}
+					{:else if filter.startsWith('u/')}
+						<User class="mr-0.5" size={14} />
+					{:else if filter.startsWith('f/')}
+						<Folder class="mr-0.5" size={14} />
+					{/if}
+					<span class="text-left text-2xs text-primary font-normal">{filter}</span>
+				</div>
+			</button>
+		</div>
+	{/each}
+{/if}

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        filters: string[];
+        selectedFilter?: {
+            kind: 'owner' | 'integrations';
+            name: string | undefined;
+        } | undefined;
+        resourceType?: boolean | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListFiltersQuickProps = typeof __propDef.props;
+export type ListFiltersQuickEvents = typeof __propDef.events;
+export type ListFiltersQuickSlots = typeof __propDef.slots;
+export default class ListFiltersQuick extends SvelteComponent<ListFiltersQuickProps, ListFiltersQuickEvents, ListFiltersQuickSlots> {
+}
+export {};

package/package/components/icons/AnsibleIcon.svelte

@@ -0,0 +1,42 @@
+<script>
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+	{height}
+	preserveAspectRatio="xMidYMid"
+	viewBox="0 0 256 256"
+	{width}
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g fill="#1a1918" transform="translate(0 281.86)">
+		<path
+			d="m67.5168 32.0035c-.54152 0-1.12617-.13685-1.53212-.68583l-17.3835-22.8612v23.3187h-3.96431v-28.7142c0-1.14253.94592-2.0571 2.0278-2.0571.62971 0 1.17084.1826 1.57485.73158l17.3396 22.8159v-23.2276h3.96392v28.6681c0 1.18907-.94592 2.01175-2.02625 2.01175"
+		/>
+		<path
+			d="m100.306 32.278c-3.96276 0-8.10693-.82347-11.9803-2.28584l.94631-3.2927c3.55797 1.14332 7.43099 1.96639 11.034 1.96639 4.99958 0 7.61163-1.7834 7.61163-4.29759 0-2.28663-2.02741-3.42956-9.00817-6.72187-6.98076-3.29192-9.72722-5.39477-9.72722-9.51055 0-5.16563 3.96276-7.27006 11.4384-7.27006 3.10813 0 7.88162.64087 10.63 1.46395l-.63087 3.38302c-3.01839-.73119-6.80051-1.23402-9.90864-1.23402-5.26839 0-7.4306 1.00528-7.4306 3.52066 0 2.46844 1.57562 3.52026 8.96194 6.94982 7.79188 3.61216 9.77345 5.4413 9.77345 9.18992 0 5.4417-5.13515 8.13888-11.71 8.13888"
+		/>
+		<path d="m130.798 1.32367h4.09833v30.4511h-4.09833z" />
+		<path
+			d="m169.758 17.9669h-10.1798v10.334h10.1798c3.46746 0 5.58422-2.19514 5.58422-5.2591 0-2.88057-2.2065-5.07492-5.58422-5.07492m-1.98274-13.1685h-8.19705v9.73929h8.19705c3.28838 0 5.67512-2.10364 5.67512-5.02957 0-2.88057-2.07208-4.70972-5.67512-4.70972m2.02741 26.9766h-12.2499c-1.17162 0-2.07247-.91497-2.07247-2.0575v-26.3361c0-1.09796.90086-2.0575 2.07247-2.0575h10.1332c6.21509 0 9.90786 3.06317 9.90786 7.86439 0 2.60569-1.53134 5.02917-3.8738 6.44659 3.4694 1.05182 5.80992 3.932 5.80992 7.40691 0 4.84657-4.00743 8.73322-9.72722 8.73322"
+		/>
+		<path
+			d="m199.212 31.7751c-1.12422 0-2.02547-.96032-2.02547-2.0575v-28.3936h4.09755v26.7479h16.304v3.70326h-18.3761z"
+		/>
+		<path
+			d="m245.526 32.278c-8.3773 0-13.4215-3.10892-13.4215-9.37291 0-2.97207 1.66691-5.8069 4.90984-7.13281-2.61244-1.64616-3.96314-3.97814-3.96314-6.53848 0-5.66926 4.36987-8.36802 12.5658-8.36802 2.74763 0 6.62026.32063 9.86358 1.05261l-.45101 3.38302c-3.42201-.54898-6.62104-.86804-9.72839-.86804-5.31462 0-8.15238 1.46237-8.15238 4.98343 0 2.78947 2.61283 4.98382 6.08146 4.98382h7.02504c.99098 0 1.75626.77733 1.75626 1.73726 0 1.00568-.76528 1.78301-1.75626 1.78301h-7.56501c-3.9647 0-6.48546 1.96561-6.48546 4.98421 0 4.43484 4.09833 5.76075 9.23232 5.76075 2.79269 0 6.57442-.3648 9.63671-1.09678l.58697 3.33727c-2.92827.82347-6.757 1.37166-10.1347 1.37166"
+		/>
+		<path
+			d="m14.138 7.0347 7.17771 17.9843-10.8406-8.66933 3.66286-9.31493zm12.7514 22.1277-11.0399-26.9746c-.31505-.77733-.94592-1.18907-1.71159-1.18907s-1.44121.41174-1.75626 1.18907l-12.1179 29.5874h4.14456l4.79757-12.1983 14.3142 11.7408c.57571.47208.99098.68583 1.53212.68583 1.08033 0 2.02625-.82268 2.02625-2.01135 0-.19285-.06798-.49968-.18918-.82978z"
+		/>
+	</g>
+	<path
+		d="m255.879 127.868c0 70.4551-57.1101 127.565-127.566 127.565-70.4501 0-127.566-57.1096-127.566-127.565 0-70.4501 57.1161-127.566 127.566-127.566 70.4561 0 127.566 57.1161 127.566 127.566"
+		fill="#1a1918"
+	/>
+	<path
+		d="m130.46 78.2289 33.0116 81.4763-49.8635-39.2778 16.8519-42.1984zm58.6445 100.245-50.7786-122.202c-1.44952-3.52436-4.34807-5.38926-7.86591-5.38926-3.52436 0-6.63386 1.86489-8.08339 5.38926l-55.7329 134.04h19.0653l22.0623-55.2653 65.8389 53.1899c2.64792 2.14114 4.55852 3.1095 7.0422 3.1095 4.97389 0 9.32146-3.72878 9.32146-9.11101 0-.87594-.30939-2.2662-.86941-3.76143z"
+		fill="#fff"
+	/>
+</svg>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  AnsibleIconProps */
+/** @typedef {typeof __propDef.events}  AnsibleIconEvents */
+/** @typedef {typeof __propDef.slots}  AnsibleIconSlots */
+export default class AnsibleIcon extends SvelteComponent<{
+    height?: string | undefined;
+    width?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AnsibleIconProps = typeof __propDef.props;
+export type AnsibleIconEvents = typeof __propDef.events;
+export type AnsibleIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/icons/WindmillIcon.svelte

@@ -1,112 +1,126 @@
-<script>export let height = '24px';
+<script>import { customIcon } from './store';
+export let height = '24px';
 export let width = '24px';
 export let white = false;
 export let spin = undefined;
 </script>
 
-<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg
-	class={$$props.class}
-	class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
-	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
-	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
-	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
-	version="1.1"
-	id="Calque_1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	{width}
-	{height}
-	viewBox="0 0 256 256"
-	style="enable-background:new 0 0 256 256;"
-	xml:space="preserve"
->
-	<style>
-		.st0 {
-			fill: #ffffff;
-		}
-		.st1 {
-			opacity: 0.4;
-			fill: #ffffff;
-		}
-		.st2 {
-			fill: #bcd4fc;
-		}
-		.st2-gray {
-			fill: #cccccc;
-		}
-		.st3 {
-			fill: #3b82f6;
-		}
-		.st4 {
-			fill: #b3b3b3;
-		}
-		.st5 {
-			fill: url(#SVGID_1_);
-		}
-		.st6 {
-			fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
-		}
-		.st7 {
-			fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
-		}
-		.st8 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
-		}
-		.st9 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
-		}
-		.st10 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
-		}
-		.st11 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
-		}
-		.st12 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
-		}
-		.st13 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
-		}</style>
-	<g>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+{#if customIcon}
+	{#if white}
+		<img src={customIcon.white} alt="Windmill Custom icon" {width} {height} class={$$props.class} />
+	{:else}
+		<img
+			src={customIcon.normal}
+			alt="Windmill Custom icon"
+			{width}
+			{height}
+			class={$$props.class}
 		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
-		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
+	{/if}
+{:else}
+	<svg
+		class={$$props.class}
+		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
+		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+		class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+		version="1.1"
+		id="Calque_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		{width}
+		{height}
+		viewBox="0 0 256 256"
+		style="enable-background:new 0 0 256 256;"
+		xml:space="preserve"
+	>
+		<style>
+			.st0 {
+				fill: #ffffff;
+			}
+			.st1 {
+				opacity: 0.4;
+				fill: #ffffff;
+			}
+			.st2 {
+				fill: #bcd4fc;
+			}
+			.st2-gray {
+				fill: #cccccc;
+			}
+			.st3 {
+				fill: #3b82f6;
+			}
+			.st4 {
+				fill: #b3b3b3;
+			}
+			.st5 {
+				fill: url(#SVGID_1_);
+			}
+			.st6 {
+				fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
+			}
+			.st7 {
+				fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
+			}
+			.st8 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
+			}
+			.st9 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
+			}
+			.st10 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
+			}
+			.st11 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
+			}
+			.st12 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
+			}
+			.st13 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
+			}</style>
+		<g>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
 		"
-		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
-		/>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
-		/>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
-		/>
-	</g>
-</svg>
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
+			/>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
+			/>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
+			/>
+		</g>
+	</svg>
+{/if}