@turnipxenon/pineapple 2.9.0 → 2.10.0

package/src/lib/components/dialog_manager/behavior_tree/line_processors/NormalLineProcessorNode.ts

@@ -1,48 +0,0 @@
-import type { LineNodeArguments } from "$lib/components/dialog_manager/behavior_tree/line_core/LineNodeArguments";
-import type { LineBehaviorResult } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorResult";
-import { browser } from "$app/environment";
-import { BehaviorStatus } from "$lib/components/dialog_manager/behavior_tree/core/BehaviorStatus";
-import type { LineBehaviorNode } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorNode";
-
-/**
- * This is a leaf node that ALWAYS returns success
- * It processes the line in search for variables it can replace when rendered
- */
-export class NormalLineProcessorNode implements LineBehaviorNode {
-	process(nodeArgs: LineNodeArguments): LineBehaviorResult {
-		const renderedLine = nodeArgs.line
-			.split("{$") // look for initial token
-			.map((token, index) => {
-				if (index == 0) {
-					return token; // ignore first character
-				}
-
-				return token
-					.split("}") // split at the end and dont process the rest
-					.map((varToken, index) => {
-						if (index == 0 && browser) {
-							const varValue = localStorage.getItem(`$${varToken}`);
-							if (varValue !== null) {
-								// null guard
-								return varValue;
-							}
-
-							// just return the token I guess? LOL
-							console.warn(
-								`Null variable in yarn: ${varToken}. Make sure that all variables were set before using them.`
-							);
-						}
-
-						return varToken;
-					})
-					.join(""); // combine all variable replaced strings
-			})
-			.join(""); // combine all processed strings
-
-		return {
-			nextState: nodeArgs.initState,
-			renderedLine: renderedLine,
-			status: BehaviorStatus.Success
-		};
-	}
-}

package/src/lib/components/dialog_manager/behavior_tree/line_processors/SetVariableNode.ts

@@ -1,37 +0,0 @@
-import type { LineNodeArguments } from "$lib/components/dialog_manager/behavior_tree/line_core/LineNodeArguments";
-import type { LineBehaviorResult } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorResult";
-import { BehaviorStatus } from "$lib/components/dialog_manager/behavior_tree/core/BehaviorStatus";
-import { btreeUtils } from "$lib/components/dialog_manager/behavior_tree/core/BTreeUtils";
-import { dialogVariableStore } from "$lib/components/dialog_manager/DialogManagerStore";
-import type { LineBehaviorNode } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorNode";
-import { expressionEvaluator } from "$lib/components/dialog_manager/behavior_tree/expression/ExpressionEvaluator";
-
-/**
- * This is a leaf node that returns:
- * - Success: if it is a set line, and updates a new entry in localStorage
- * - Failure: if it is not a set line
- */
-export class SetVariableNode implements LineBehaviorNode {
-	process(nodeArgs: LineNodeArguments): LineBehaviorResult {
-		if (!nodeArgs.line.startsWith("<<set")) {
-			return {
-				nextState: nodeArgs.initState,
-				renderedLine: "",
-				status: BehaviorStatus.Failure
-			};
-		}
-
-		const setValuePair = nodeArgs.line.split("=");
-		const key = setValuePair[0].slice("<<set ".length).trim();
-		setValuePair.shift();
-		const preValue = setValuePair.join("=").trim();
-		const value = expressionEvaluator.evaluateFreeform(preValue, "");
-		dialogVariableStore.setItem(key, btreeUtils.peek(value));
-
-		return {
-			nextState: nodeArgs.initState,
-			renderedLine: "",
-			status: BehaviorStatus.Success
-		};
-	}
-}

package/src/lib/components/dialog_manager/behavior_tree/line_processors/commands/DeclareCommand.ts

@@ -1,48 +0,0 @@
-import type { LineBehaviorNode } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorNode";
-import type { LineNodeArguments } from "$lib/components/dialog_manager/behavior_tree/line_core/LineNodeArguments";
-import type { LineBehaviorResult } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorResult";
-import { BehaviorStatus } from "$lib/components/dialog_manager/behavior_tree/core/BehaviorStatus";
-import { SetVariableNode } from "$lib/components/dialog_manager/behavior_tree/line_processors/SetVariableNode";
-
-export class DeclareCommand implements LineBehaviorNode {
-	setVariableNode = new SetVariableNode();
-
-	process(nodeArgs: LineNodeArguments): LineBehaviorResult {
-		if (!nodeArgs.line.startsWith("<<declare")) {
-			return {
-				renderedLine: "",
-				nextState: nodeArgs.initState,
-				status: BehaviorStatus.Failure
-			};
-		}
-
-		// determine if we need to set?
-		const setValuePair = nodeArgs.line.split("=");
-		const key = setValuePair[0].slice("<<declare ".length).trim(); // remove "<<declare "
-		if (localStorage.getItem(key) !== null) {
-			return {
-				renderedLine: "",
-				nextState: nodeArgs.initState,
-				status: BehaviorStatus.Success
-			};
-		}
-
-		// if it does not exist, let's set it!
-		setValuePair.shift();
-		const preValue = setValuePair.join("=").split(" as ");
-		preValue.pop(); // remove " as ??? >>"
-		const value = preValue.join(" as ");
-
-		const result = this.setVariableNode.process({
-			initState: nodeArgs.initState,
-			line: `<<set ${key} = ${value}>>`, // faking the line lol
-			lineIndex: nodeArgs.lineIndex
-		});
-
-		return {
-			nextState: result.nextState,
-			renderedLine: "",
-			status: BehaviorStatus.Success
-		};
-	}
-}

package/src/lib/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.ts

@@ -1,51 +0,0 @@
-import type { LineBehaviorNode } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorNode";
-import type { LineNodeArguments } from "$lib/components/dialog_manager/behavior_tree/line_core/LineNodeArguments";
-import type { LineBehaviorResult } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorResult";
-import { BehaviorStatus } from "$lib/components/dialog_manager/behavior_tree/core/BehaviorStatus";
-import { SetVariableNode } from "$lib/components/dialog_manager/behavior_tree/line_processors/SetVariableNode";
-import { dialogManager } from "$lib/components/dialog_manager/DialogManagerStore";
-import { btreeUtils } from "$lib/components/dialog_manager/behavior_tree/core/BTreeUtils";
-
-export class JumpCommand implements LineBehaviorNode {
-	setVariableNode = new SetVariableNode();
-
-	process(nodeArgs: LineNodeArguments): LineBehaviorResult {
-		if (!nodeArgs.line.startsWith("<<jump")) {
-			return {
-				renderedLine: "",
-				nextState: nodeArgs.initState,
-				status: BehaviorStatus.Failure
-			};
-		}
-
-		if (nodeArgs.initState.ignoreJumps) {
-			return {
-				nextState: nodeArgs.initState,
-				renderedLine: "",
-				status: BehaviorStatus.Success
-			};
-		}
-
-		const choiceName = nodeArgs.line
-			.slice("<<jump ".length, nodeArgs.line.length - ">>".length)
-			.replace(/^\{/, "") // remove possible " at the start: https://stackoverflow.com/a/2182602
-			.replace(/}$/, ""); // remove possible " at the end: https://stackoverflow.com/a/12249011;
-		const dialogChoice = dialogManager.dialogMessageMap.get(btreeUtils.simplifyToken(choiceName));
-		if (dialogChoice !== undefined) {
-			// force choice
-			dialogManager.setDialogChoice(dialogChoice);
-		} else {
-			console.error(
-				`Unknown jump node at line ${
-					nodeArgs.lineIndex + 1
-				}: ${choiceName} or ${btreeUtils.simplifyToken(choiceName)}`
-			);
-		}
-
-		return {
-			nextState: nodeArgs.initState,
-			renderedLine: "",
-			status: BehaviorStatus.Success
-		};
-	}
-}

package/src/lib/components/dialog_manager/behavior_tree/line_processors/commands/UnvisitCommand.ts

@@ -1,34 +0,0 @@
-import type { LineBehaviorNode } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorNode";
-import type { LineNodeArguments } from "$lib/components/dialog_manager/behavior_tree/line_core/LineNodeArguments";
-import type { LineBehaviorResult } from "$lib/components/dialog_manager/behavior_tree/line_core/LineBehaviorResult";
-import { BehaviorStatus } from "$lib/components/dialog_manager/behavior_tree/core/BehaviorStatus";
-import { dialogVariableStore } from "$lib/components/dialog_manager/DialogManagerStore";
-import { browser } from "$app/environment";
-
-/**
- * Unvisits a node
- */
-export class UnvisitCommand implements LineBehaviorNode {
-	process(nodeArgs: LineNodeArguments): LineBehaviorResult {
-		if (!nodeArgs.line.startsWith("<<unvisit") || !browser) {
-			return {
-				renderedLine: "",
-				nextState: nodeArgs.initState,
-				status: BehaviorStatus.Failure
-			};
-		}
-
-		const nodeName = nodeArgs.line
-			.slice("<<unvisit ".length, nodeArgs.line.length - ">>".length)
-			.replace(/^\{/, "") // remove possible " at the start: https://stackoverflow.com/a/2182602
-			.replace(/}$/, ""); // remove possible " at the end: https://stackoverflow.com/a/12249011;
-		const key = `+${nodeName}`;
-		dialogVariableStore.removeItem(key);
-
-		return {
-			nextState: nodeArgs.initState,
-			renderedLine: "",
-			status: BehaviorStatus.Success
-		};
-	}
-}

package/src/lib/components/dialog_overlay/DialogOverlay.svelte

@@ -1,130 +0,0 @@
-<script lang="ts">
-	import AresHappy from "$pkg/assets/characters/ares/ares_happy.webp";
-	import { onMount } from "svelte";
-	import { dialogManager } from "$pkg/components/dialog_manager/DialogManagerStore";
-	import { DialogState } from "$pkg/types/pineapple_fiber/DialogState";
-
-	let currentMessage = "";
-	dialogManager.currentMessage.subscribe((value) => {
-		currentMessage = value;
-	});
-
-	let currentPortrait = AresHappy;
-	dialogManager.currentPortrait.subscribe((value) => {
-		if (value) {
-			currentPortrait = value;
-		}
-	});
-
-	let hidePercent = 100;
-	let isHidden = true;
-	onMount(() => {
-		dialogManager.hidePercent.subscribe((value) => {
-			hidePercent = value * 0.4;
-			isHidden = false;
-		});
-
-		dialogManager.currentReadableState.subscribe((value) => {
-			isHidden = value === DialogState.Invisible;
-		});
-
-		dialogManager.update(0);
-	});
-
-	const onDialogClick = () => {
-		dialogManager.skipAnimation();
-	};
-
-</script>
-
-<div class="dialog-elements"
-     hidden={isHidden}
-     style="--hidePercentWidth: -{hidePercent}vw;
-            --hidePercentHeight: {hidePercent}vh;">
-	<div class="dialog-portrait-container">
-		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
-	</div>
-	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
-		<div class="card dialog-name">
-			<p><b>Turnip</b></p>
-		</div>
-		<section class="dialog-padding">
-			<!-- Made for 140 characters, like the original tweets -->
-			{@html currentMessage}
-		</section>
-	</div>
-</div>
-
-<style>
-    .dialog-elements {
-        position: fixed;
-        z-index: 10;
-    }
-
-    .dialog-elements:dir(ltr) {
-        left: 0;
-    }
-
-    .dialog-elements:dir(rtl) {
-        right: 0;
-    }
-
-    .dialog-elements > div {
-        transform: translateY(var(--hidePercentHeight));
-    }
-
-    .dialog-box *,
-    .dialog-name * {
-        font-size: clamp(1em, 5vw, 1.3em);
-        line-height: 1.5em;
-    }
-
-    .dialog-padding :global(p) {
-        font-size: clamp(1em, 5vw, 1.3em) !important;
-        line-height: 1.5em !important;
-    }
-
-    .dialog-padding {
-        padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
-    }
-
-    .dialog-name {
-        @apply pt-2 px-4;
-        position: fixed;
-    }
-
-    .dialog-name:dir(ltr) {
-        /* for centering vertically */
-        transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
-    }
-
-    .dialog-name:dir(rtl) {
-        /* for centering vertically */
-        transform: translateX(calc(clamp(0em, 5vw - 0.5em, 1em) * -1)) translateY(-50%);
-    }
-
-    .dialog-portrait-container {
-        position: fixed;
-        bottom: 0;
-        height: clamp(30rem, 75vw, 40rem);
-        width: auto;
-    }
-
-    .dialog-portrait-container:dir(ltr) {
-        transform: translateX(var(--hidePercentWidth));
-        left: clamp(-4rem, calc(5vw - 5em), 0rem);
-    }
-
-    .dialog-portrait-container:dir(rtl) {
-        transform: translateX(calc(var(--hidePercentWidth) * -1));
-        right: clamp(-4rem, calc(5vw - 5em), 0rem);
-    }
-
-    .dialog-portrait {
-        height: 100%;
-    }
-
-    .dialog-portrait:dir(rtl) {
-        transform: scaleX(-1);
-    }
-</style>

package/src/lib/components/index.ts

@@ -1,9 +0,0 @@
-// noinspection JSUnusedGlobalSymbols
-
-export { default as LazyAsset } from "./LazyAsset.svelte";
-export { default as Card } from "./Card.svelte";
-export { default as Chip } from "./chip/Chip.svelte";
-export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
-export { default as SocialSection } from "./SocialSection.svelte";
-export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
-export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";

package/src/lib/components/layouts/LayoutConstants.ts

@@ -1 +0,0 @@
-export const AppShellBackground = "app-shell-token";

package/src/lib/components/layouts/SeaweedBaseLayout.svelte

@@ -1,96 +0,0 @@
-<script lang="ts">
-	// For auto dark/light mode
-	import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
-	import RandomizedBackground from "$lib/components/RandomizedBackground.svelte";
-
-	// store
-	import { enableBackground } from "$lib/store";
-	// assets
-	import { enableDialogueOverlay } from "$lib/components/dialog_manager/DialogManagerStore";
-	import { writable } from "svelte/store";
-	import { fly } from "svelte/transition";
-	// todo: clean up all these imports!
-
-	export let shouldDisplayLeadingIcons = false;
-
-	let enableBackgroundValue = true;
-	enableBackground.subscribe((value) => {
-		enableBackgroundValue = value;
-	});
-
-	enableDialogueOverlay.set(false); // false by default until we unlock the fab for public
-
-	let shouldDisplaySocialIcons = writable(false);
-</script>
-
-<!-- App Shell -->
-<svelte:head>
-	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
-</svelte:head>
-
-<AppShell>
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar slotDefault="place-content-start"
-		        background="app-shell-token">
-			<svelte:fragment slot="lead">
-				<span class="lead-slot-placeholder"></span>
-
-				{#if $$slots.extraLeadingIcons && shouldDisplayLeadingIcons}
-					<div transition:fly={{x:-10}}>
-						<slot name="extraLeadingIcons" />
-					</div>
-				{:else if $$slots.extraLeadingIcons}
-					<div hidden>
-						<slot name="s" />
-					</div>
-				{/if}
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<LightSwitch bgLight="bg-surface-400" />
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
-
-	<RandomizedBackground enable={enableBackgroundValue} />
-
-	<!--{#if enableDialogueOverlayValue}-->
-	<!-- Page Route Content -->
-	<div class="default-page-container">
-		<slot shouldDisplaySocialIcons={shouldDisplaySocialIcons} />
-		<div class="footer-space" />
-	</div>
-	<!-- todo: eventually re-add	-->
-	<!--	<DialogOverlay />-->
-</AppShell>
-
-<style lang="postcss">
-    :root {
-        --dialog-start-pad: clamp(0em, 5vw, 2em);
-        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
-        --dialog-box-height: clamp(15em, 50vw, 18em);
-    }
-
-    .default-page-container {
-        max-width: 2100px;
-        margin: 4em auto;
-        flex-direction: column;
-        z-index: 0;
-    }
-
-    .lead-slot-placeholder {
-        height: 3em;
-        margin-inline-end: 0.5em;
-    }
-
-    /*todo: consider left handedness or customizability*/
-    /*.fab {*/
-    /*    @apply btn-icon variant-filled-surface;*/
-    /*    position: fixed;*/
-    /*    height: 5em;*/
-    /*    width: 5em;*/
-    /*    bottom: 3em;*/
-    /*    right: 2em;*/
-    /*    box-shadow: 0.5em 0.5em 0.5em gray;*/
-    /*}*/
-</style>

package/src/lib/components/navigation_component/NavigationComponent.svelte

@@ -1,152 +0,0 @@
-<script lang="ts">
-	import NavigationControl from "$pkg/components/navigation_component/NavigationControl.svelte";
-	import { Card, createGoToFunction } from "$pkg";
-	import { parsePageMeta, type ParsePageMetaCompareFn } from "$pkg/components/navigation_component/PageMeta";
-
-	export let fileList: Record<string, unknown>;
-	export let jsonList: Record<string, unknown>;
-	export let title: string | undefined = undefined;
-	export let imageMap = new Map<string, string>();
-	export let shouldAllowControl = true;
-
-	/**
-	 * Should include a slash before and after the path
-	 */
-	export let parentSubpath: string;
-	export let allowUpperControl = true;
-	export let compareFn: undefined | ParsePageMetaCompareFn = undefined;
-	export let pageSize = 5;
-	export let currentIndex = 0;
-
-	const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
-
-	$: visiblePages = pageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize);
-</script>
-
-<div class="navigation-wrapper">
-	{#if (title)}
-		<Card>
-			<h1 slot="content" class="default-card navigation-title">
-				{title}
-			</h1>
-		</Card>
-	{/if}
-
-	{#if allowUpperControl && shouldAllowControl}
-		<NavigationControl bind:currentIndex={currentIndex}
-		                   bind:contentLength={pageFlatList.length}
-		                   bind:pageSize={pageSize}></NavigationControl>
-	{/if}
-
-	<div class="navigation-component">
-		<!-- all the misc routes-->
-		{#each visiblePages as pageMeta}
-			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
-			<button class="navigation-element"
-			        title={fullPath}
-			        on:click={createGoToFunction(fullPath)}>
-				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl}
-					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
-				{/if}
-				<section class="blurb-text">
-					<h2>{pageMeta.title}</h2>
-					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
-					<p>{pageMeta.description ?? ""}</p>
-					Tags:
-					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
-						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
-						{/each}
-					{:else}
-						None
-					{/if}
-				</section>
-			</button>
-		{/each}
-
-		{#if visiblePages.length === 0}
-			<Card>
-				<p class="default-card" slot="content">Sorry, no content was found</p>
-			</Card>
-		{/if}
-	</div>
-
-	{#if shouldAllowControl}
-		<NavigationControl bind:currentIndex={currentIndex}
-		                   bind:contentLength={pageFlatList.length}
-		                   bind:pageSize={pageSize}></NavigationControl>
-	{/if}
-
-</div>
-
-<style lang="postcss">
-    @container (max-width: 800px) {
-        img {
-            max-height: 20rem;
-            width: 100%;
-            flex-basis: 100%;
-            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
-        }
-
-        .navigation-element {
-            flex-direction: column;
-        }
-    }
-
-    @container (min-width: 801px) {
-        .navigation-element {
-            flex-direction: row;
-        }
-
-        img {
-            width: 20em;
-        }
-    }
-
-    .navigation-element {
-        @apply btn card card-hover bg-surface-100 dark:bg-surface-900;
-        container-type: inline-size;
-        display: flex;
-        text-align: start;
-        align-items: flex-start;
-        padding: 0;
-    }
-
-    img {
-        height: 20em;
-        object-fit: cover;
-        padding: var(--theme-border-base);
-        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
-    }
-
-    .navigation-component {
-        container-type: inline-size;
-        display: flex;
-        flex-direction: column;
-        gap: 2em;
-    }
-
-    .navigation-title {
-        text-align: center;
-        max-width: initial;
-    }
-
-    .blurb-text {
-        padding: 2em;
-        flex-grow: 1;
-        white-space: initial;
-        min-width: 0;
-    }
-
-    .navigation-wrapper {
-        display: flex;
-        flex-direction: column;
-        max-width: 1000px;
-        width: 100%;
-    }
-
-    .tag-container {
-        margin: 0.25lh 0;
-    }
-</style>

package/src/lib/components/navigation_component/NavigationControl.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-
-	export let currentIndex = 0;
-	export let contentLength: number;
-	export let pageSize: number;
-
-	import { Card } from "$pkg";
-	import { page } from "$app/stores";
-	import { goto } from "$app/navigation";
-
-	const queryIndex = $page.url.searchParams.get("index");
-	if (queryIndex) {
-		currentIndex = parseInt(queryIndex) || 0;
-	}
-	const queryPageSize = $page.url.searchParams.get("pageSize");
-	if (queryPageSize) {
-		pageSize = parseInt(queryPageSize) || 5;
-	}
-
-	const movePage = (isNext: boolean) => {
-		if (isNext) {
-			currentIndex = currentIndex + 1;
-		} else {
-			currentIndex = currentIndex - 1;
-		}
-
-		const query = new URLSearchParams($page.url.searchParams.toString());
-		query.set("index", currentIndex.toString());
-		goto(`?${query.toString()}`);
-	};
-
-	onMount(() => {
-		const query = new URLSearchParams($page.url.searchParams.toString());
-		query.set("index", currentIndex.toString());
-		query.set("pageSize", pageSize.toString());
-		goto(`?${query.toString()}`);
-	});
-</script>
-
-<div class="navigation-control-container">
-	<button class="navigation-control-button"
-	        disabled={currentIndex <= 0}
-	        on:click={() => {movePage(false)}}>{"<"}</button>
-	<Card marginBottom="0"><p slot="content" style="margin: 1em">Page {currentIndex + 1}</p></Card>
-	<button class="navigation-control-button"
-	        disabled={(currentIndex + 1) * pageSize >= contentLength}
-	        on:click={() => {movePage(true)}}>{">"}</button>
-</div>
-
-<style lang="postcss">
-    .navigation-control-container {
-        display: flex;
-        justify-content: space-between;
-        margin: 1lh 0;
-    }
-
-    .navigation-control-button {
-        @apply btn variant-filled-secondary;
-    }
-</style>