npm - @turnipxenon/pineapple - Versions diffs - 3.1.0-alpha.1 → 3.1.0-alpha.10 - Mend

@turnipxenon/pineapple 3.1.0-alpha.1 → 3.1.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/README.md CHANGED Viewed

@@ -26,3 +26,106 @@ yarn build
 You can preview the production build with `yarn preview`.
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+## Installation as a package
+TODO: If you're curious how to install this on a fresh package or a package not using Skeleton, you can ask me to document the steps but I haven't explored that since I'm focused in migrating my projects. It should just be installing Skeleton v3 and then seeing the steps below.
+## Migration from v2 to v3
+```bash
+yarn add @turnipxenon2/pineapple
+```
+**Manual steps**
+We still have to do some manual set up to our project to make it work.
+1. Follow these steps here: https://www.skeleton.dev/docs/get-started/migrate-from-v2
+2. **Configure Tailwind.** Open your global stylesheet in `/src/styles/app.css` and add the following imports:
+```css
+@import 'tailwindcss';
+@import "@skeletonlabs/skeleton";
+@import "@skeletonlabs/skeleton/optional/presets";
+@import "@skeletonlabs/skeleton/themes/legacy";
+@import '../../../node_modules/@turnipxenon/pineapple/dist/styles/app.css';
+@import '../../../node_modules/@turnipxenon/pineapple/dist/styles/turnip-theme.css';
+@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
+@source '../../../node_modules/@turnipxenon/pineapple/dist/';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+```
+2. **Set Active Theme.** Open /src/app.html, then set the data-theme attribute on the HTML tag to define the active theme.
+```html
+<html lang="en" data-theme="turnip">
+...
+</html>
+```
+3. We have to setup +layout.svelte to and import some dependencies
+As a reference as to why we need to do above, we use the UI framework Skeleton, which has the same setup. But, we have to make some modifications to make our project and Skeleton to work as a package.
+**Reference**
+- https://next.skeleton.dev/docs/get-started/installation/sveltekit
+- https://inlang.com/m/gerre34r/library-inlang-paraglideJs/sveltekit
+- Just use skeleton or use the base project?
+**Current steps how to use this package in another project**
+1. Create using Skeleton: https://next.skeleton.dev/docs/get-started/installation/sveltekit
+2. Follow instructions and skeleton UI package
+3. Install pineapple
+4. Set up ModeWatcher and Modals, primarily in +layout.svelte
+5. Set up ParaglideJS internationalization (beta not SvelteKit)
+6. Add this to `+layout.svelte`
+```sveltehtml
+<script lang="ts">
+	import { PinyaPageLayout, PinyaBase } from '@turnipxenon/pineapple/templates';
+	import '../app.css';
+	let { children } = $props();
+</script>
+<PinyaBase>
+	<PinyaPageLayout>
+		{@render children()}
+	</PinyaPageLayout>
+</PinyaBase>
+```
+TODO: if we are happy with our base, publish it to github and link the corresponding git commits here
+7. Update to "@sveltejs/adapter-auto": "^4.0.0", we need node 22
+8. Add alias in svelte.config
+```js
+kit: {
+	alias: {
+		$pkg: path.resolve("./node_modules/@turnipxenon/pineapple/dist/lib")
+	}
+}
+```
+## Local linking
+1. In pineapple, run `yarn link`
+2. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
+**To unlink:**
+1. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
+2. In pineapple, run `yarn unlink`
+3. **If unlinking, remember to restart PC cause Windows symlinking is tricky**
+To reinstall a single package: `yarn add @turnipxenon/pineapple --no-package-lock --no-save`

package/dist/components/RandomizedBackground.svelte CHANGED Viewed

@@ -1,3 +1,7 @@
+<!--
+    @component
+    @deprecated
+-->
 <script lang="ts">
 	import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
 	import BgTiledCorn from "../assets/bg_tiled/bg_tiled_corn.png";

package/dist/components/RandomizedBackground.svelte.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 interface Props {
     enable: any;
 }
+/** @deprecated */
 declare const RandomizedBackground: import("svelte").Component<Props, {}, "">;
 type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
 export default RandomizedBackground;

package/dist/components/blog_template/BlogTemplate.svelte CHANGED Viewed

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import "./blog-template.css";
-	import { enableBackground } from "../../store";
-	import { onDestroy, onMount } from "svelte";
+	import { onDestroy, onMount, type Snippet } from "svelte";
 	import BlogTemplateInner from "./BlogTemplateInner.svelte";
 	import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
 	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-	import { default as Card } from "../Card.svelte";
+	import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
+	import { appState } from "../../ui/templates/index";
 	// grab page meta from the adjacent meta.json
 	interface Props {
@@ -13,7 +13,7 @@
 		shouldFillWholePage?: boolean;
 		shouldEnableDialogOverlay?: boolean;
 		includeDataNoSnippet?: boolean;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 	}
 	let {
@@ -24,7 +24,6 @@
 		children
 	}: Props = $props();
-	enableBackground.set(!shouldFillWholePage);
 	let initialDialogState = false;
 	onMount(() => {
@@ -33,10 +32,11 @@
 	});
 	onDestroy(() => {
-		enableBackground.set(true);
+		appState.bgOpacity = 1;
 		enableDialogueOverlay.set(initialDialogState);
 	});
+	appState.bgOpacity = shouldFillWholePage ? 0.2 : 1;
 </script>
 {#if shouldFillWholePage}
@@ -46,21 +46,18 @@
 		</BlogTemplateInner>
 	</div>
 {:else}
-	<Card includeDataNoSnippet={includeDataNoSnippet}>
-		{#snippet content()}
-				<div  class="default-card">
-				<BlogTemplateInner pageMeta={pageMeta}>
-					{@render children?.()}
-				</BlogTemplateInner>
-			</div>
-			{/snippet}
-	</Card>
+	<PinyaCard {includeDataNoSnippet} widthClass="max-w-4xl">
+		<BlogTemplateInner pageMeta={pageMeta}>
+			{@render children?.()}
+		</BlogTemplateInner>
+	</PinyaCard>
 {/if}
 <style>
     .whole-page {
-        height: 100%;
+        height: 100vh;
         width: 100%;
-        max-width: var(--default-card-max-width);
+        padding-right: 2em;
+        padding-left: 2em;
     }
 </style>

package/dist/components/blog_template/BlogTemplate.svelte.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import "./blog-template.css";
+import { type Snippet } from "svelte";
 import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
 interface Props {
     pageMeta: SimplePageMeta;
     shouldFillWholePage?: boolean;
     shouldEnableDialogOverlay?: boolean;
     includeDataNoSnippet?: boolean;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
 }
 declare const BlogTemplate: import("svelte").Component<Props, {}, "">;
 type BlogTemplate = ReturnType<typeof BlogTemplate>;

package/dist/components/dialog_manager/DialogManager.d.ts CHANGED Viewed

@@ -15,8 +15,8 @@ export declare class DialogManager implements IDialogManager {
     currentIndex: number;
     previousTimestamp: number;
     isDoneTransition: boolean;
-    currentPortrait: import("svelte/store").Writable<unknown>;
-    portraitMap: Map<string, any>;
+    currentPortrait: import("svelte/store").Writable<string>;
+    portraitMap: Map<string, string>;
     currentState: DialogState;
     currentReadableState: import("svelte/store").Writable<DialogState>;
     hidePercent: import("svelte/motion").Tweened<number>;
@@ -80,3 +80,4 @@ export declare class DialogManager implements IDialogManager {
     toggleDialogOverlay(): void;
     parseAndSetDialogTree(dialogYarn: string): Promise<DialogDetail[]>;
 }
+export declare const dialogManager: DialogManager;

package/dist/components/dialog_manager/DialogManager.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class DialogManager {
     currentIndex = 0;
     previousTimestamp = 0;
     isDoneTransition = false;
-    currentPortrait = writable();
+    currentPortrait = writable("");
     portraitMap = new Map();
     currentState = DialogState.Visible;
     currentReadableState = writable(this.currentState);
@@ -37,13 +37,14 @@ export class DialogManager {
         easing: backOut
     }); // 100 = 100%
     skipNextActiveTime = 0;
-    dialogProcessor = new DialogProcessor();
+    dialogProcessor;
     // for queueing actions
     _setDialogChoiceQueue = [];
     _setDialogChoiceMutex = false;
     onSetDialogListeners = [];
     enableDialogueOverlayCache = false;
     constructor() {
+        this.dialogProcessor = new DialogProcessor(this);
         enableDialogueOverlay.subscribe((value) => {
             // todo: investigate why we cant put setDialogDefault inside the then clause
             // ISSUE #82 https://github.com/TurnipXenon/pineapple/issues/82
@@ -162,7 +163,7 @@ export class DialogManager {
         // set the portrait
         let portraitValue = AresHappy;
         if (this.currentMessageMeta.portraitType) {
-            portraitValue = this.portraitMap.get(this.currentMessageMeta.portraitType);
+            portraitValue = this.portraitMap.get(this.currentMessageMeta.portraitType ?? AresHappy);
         }
         if (portraitValue) {
             this.currentPortrait.update(() => portraitValue);
@@ -212,7 +213,7 @@ export class DialogManager {
         if (!this.isDoneTransition && this.currentIndex > this.fullCurrentMessage.length) {
             const elementList = document.getElementsByClassName("dialog-choice");
             for (const el of elementList) {
-                el.addEventListener("click", (event) => {
+                el.addEventListener("click", () => {
                     // todo: make more robust; for now we're assuming first class is our choice
                     const choice = el.classList[0].split("-")[1];
                     this.setDialogChoice(this.dialogMessageMap.get(choice));
@@ -261,3 +262,4 @@ export class DialogManager {
         });
     }
 }
+export const dialogManager = new DialogManager();

package/dist/components/dialog_manager/DialogProcessor.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
-import { LineSelectorNode } from "./behavior_tree/line_core/LineSelectorNode";
+import type { IDialogManager } from "../..";
 /**
  * DialogProcessor processes dialogs
  */
 export declare class DialogProcessor {
-    processingTree: LineSelectorNode;
+    private readonly dialogManager;
+    private processingTree;
+    constructor(dialogManager: IDialogManager);
     /**
      * process the dialog line by line and return a presentable string
      * @param dialogDetail

package/dist/components/dialog_manager/DialogProcessor.js CHANGED Viewed

@@ -17,24 +17,29 @@ import { UnvisitCommand } from "./behavior_tree/line_processors/commands/Unvisit
  * DialogProcessor processes dialogs
  */
 export class DialogProcessor {
-    processingTree = new LineSelectorNode([
-        /*region comment based formats*/
-        new IgnoreJumpNode(), // must be prioritized above line comment node
-        new LineCommentNode(),
-        /*endregion commend based formats*/
-        new EndIfNode(),
-        new ElseIfNode(),
-        new ElseNode(),
-        new IfNode(),
-        new IgnoreGuardNode(),
-        /*region commands*/
-        new SetVariableNode(),
-        new DeclareCommand(),
-        new JumpCommand(),
-        new UnvisitCommand(),
-        /*endregion commands*/
-        new NormalLineProcessorNode()
-    ]);
+    dialogManager;
+    processingTree;
+    constructor(dialogManager) {
+        this.dialogManager = dialogManager;
+        this.processingTree = new LineSelectorNode([
+            /*region comment based formats*/
+            new IgnoreJumpNode(), // must be prioritized above line comment node
+            new LineCommentNode(),
+            /*endregion commend based formats*/
+            new EndIfNode(),
+            new ElseIfNode(),
+            new ElseNode(),
+            new IfNode(),
+            new IgnoreGuardNode(),
+            /*region commands*/
+            new SetVariableNode(),
+            new DeclareCommand(),
+            new JumpCommand(this.dialogManager),
+            new UnvisitCommand(),
+            /*endregion commands*/
+            new NormalLineProcessorNode()
+        ]);
+    }
     /**
      * process the dialog line by line and return a presentable string
      * @param dialogDetail

package/dist/components/dialog_manager/IDialogManager.d.ts CHANGED Viewed

@@ -7,7 +7,6 @@ import type { OnSetDialogChoiceCallback } from "./DialogManager";
 export interface IDialogManager {
     dialogMessageMap: Map<string, DialogDetail>;
     currentDialogTree: DialogDetail[];
-    fullCurrentMessage: string;
     currentMessageMeta: DialogDetail;
     currentMessage: Writable<string>;
     currentIndex: number;

package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { SetVariableNode } from "../SetVariableNode";
 import type { IDialogManager } from "../../../IDialogManager";
 export declare class JumpCommand implements LineBehaviorNode {
     setVariableNode: SetVariableNode;
-    dialogManager: undefined | IDialogManager;
-    constructor();
+    dialogManager: IDialogManager;
+    constructor(dialogManager: IDialogManager);
     process(nodeArgs: LineNodeArguments): LineBehaviorResult;
 }

package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.js CHANGED Viewed

@@ -1,16 +1,15 @@
 import { BehaviorStatus } from "../../core/BehaviorStatus";
 import { SetVariableNode } from "../SetVariableNode";
 import { btreeUtils } from "../../core/BTreeUtils";
-import { getDialogManager } from "../../../DialogMangerInit";
 export class JumpCommand {
     setVariableNode = new SetVariableNode();
-    dialogManager = undefined;
-    constructor() {
-        getDialogManager().then(dm => this.dialogManager = dm);
+    dialogManager;
+    constructor(dialogManager) {
+        this.dialogManager = dialogManager;
     }
     process(nodeArgs) {
         if (this.dialogManager === undefined) {
-            console.warn('Dialog Manger not yet initialized');
+            console.warn("Dialog Manger not yet initialized");
             return {
                 renderedLine: "",
                 nextState: nodeArgs.initState,

package/dist/components/dialog_overlay/DialogOverlay.svelte CHANGED Viewed

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import AresHappy from "../../assets/characters/ares/ares_happy.webp";
+	import { slide } from "svelte/transition";
 	import { onMount } from "svelte";
+	import AresHappy from "../../assets/characters/ares/ares_happy.webp";
 	import { DialogState } from "../../types/pineapple_fiber/DialogState";
-	import { getDialogManager } from "../dialog_manager/DialogMangerInit";
-	import type { IDialogManager } from "../dialog_manager/IDialogManager";
+	import { dialogManager } from "../dialog_manager/DialogManager";
 	import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
 	import { appState } from "../../ui/templates/index";
 	import CloseIcon from "../../assets/icons/close.svg";
 	import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
 	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-	import { PinyaButton } from "../../ui/elements/index";
-	import { slide } from "svelte/transition";
+	import PinyaButton from "../../ui/elements/PinyaButton/PinyaButton.svelte";
 	let currentMessage = $state("");
 	let currentPortrait = $state(AresHappy);
@@ -18,34 +18,31 @@
 	let hidePercent = $state(100);
 	let isHidden = $state(true);
-	let dialogManager: IDialogManager | undefined = $state(undefined);
 	onMount(() => {
-		getDialogManager()
-			.then(dm => {
-				dialogManager = dm;
-				dialogManager.currentMessage.subscribe((value) => {
-					currentMessage = value;
-				});
+		dialogManager.currentMessage.subscribe((value) => {
+			currentMessage = value;
+		});
-				dialogManager.currentPortrait.subscribe((value) => {
-					if (value) {
-						currentPortrait = value;
-					}
-				});
+		dialogManager.currentPortrait.subscribe((value) => {
+			console.log("sub value", value);
+			if (value) {
+				currentPortrait = value;
+			}
+		});
-				dialogManager.hidePercent.subscribe((value) => {
-					hidePercent = value * 0.4;
-					isHidden = false;
-				});
+		dialogManager.hidePercent.subscribe((value) => {
+			hidePercent = value * 0.4;
+			isHidden = false;
+		});
-				dialogManager.currentReadableState.subscribe((value) => {
-					isHidden = value === DialogState.Invisible;
-				});
+		dialogManager.currentReadableState.subscribe((value) => {
+			isHidden = value === DialogState.Invisible;
+		});
-				dialogManager.update(0);
-				isMounted = true;
-			});
+		console.log("CAlling update");
+		dialogManager.update(0);
+		isMounted = true;
 	});
@@ -84,13 +81,13 @@
 			paddingClass=""
 			className="dialog-name"
 		>
-			<div>
-				<b class="fake-h1">Turnip</b>
-			</div>
+			<div class="fake-h1">Turnip</div>
 		</PinyaCard>
 		<PinyaCard
 			widthClass="w-full"
 			className="dialog-text"
+			colorClass=""
+			flexClass=""
 		>
 			<!-- Made for 140 characters, like the original tweets -->
 			{@html currentMessage}
@@ -100,12 +97,11 @@
 {#if appState.allowDialog && isMounted}
-	<div class="fab-container" in:slide>
+	<div class="fab-container" transition:slide>
 		<PinyaButton
 			classes="fab"
-			onclick={()=>{
-	getDialogManager().then(dm => dm.toggleDialogOverlay());
-}}>
+			onclick={()=>{dialogManager.toggleDialogOverlay();}}
+		>
 			{#if (enableDialogueOverlayValue)}
 				<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
 			{:else }
@@ -118,12 +114,12 @@
 <style>
     :global(.dialog-text) {
         height: 100%;
-        padding: 1.2lh 2rem 0.5lh;
+        padding: 0.8lh 2rem 0.5lh;
     }
-    :global(.dialog-box *,.dialog-name *) {
-        font-size: clamp(1em, 5vw, 1.3em);
-        line-height: 1.5em;
+    :global(.dialog-text) {
+        font-size: clamp(1rem, 3vw, 1.75rem);
+        line-height: calc(clamp(1rem, 3vw, 1.75rem) * 1.5);
     }
     .dialog-elements {
@@ -143,16 +139,6 @@
         transform: translateY(var(--hidePercentHeight));
     }
-    .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;
-    }
     :global(.dialog-name) {
         padding-left: 2rem;
         padding-right: 2rem;
@@ -194,28 +180,30 @@
         transform: scaleX(-1);
     }
+    :global(html) {
+        --bg-dialog: rgba(255, 247, 225, 0.9);
+    }
+    :global(html.dark) {
+        --bg-dialog: rgba(76, 71, 59, 0.9);
+    }
     .dialog-box {
-        background-color: var(--color-surface-500);
+        background-color: var(--bg-dialog);
         position: fixed;
         bottom: 0;
         width: var(--dialog-box-width); /*75em + 4em padding*/
         height: var(--dialog-box-height);
-        max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+        max-width: calc(100vw - ((var(--fab-margin) * 3) + (clamp(2rem, 5vw, 4rem))));
         border-radius: 1rem;
     }
-    .dark .dialog-box {
-        background-color: rgb(var(--color-surface-900) / 0.95);
-        --tw-ring-color: rgb(var(--color-text-400));
-        /*background-color: red;*/
-    }
     :global(.fab) {
-        /*@apply btn preset-filled-tertiary-500;*/
+		    position: relative;
+        transform: scale3d(1, 1, 1.5);
         background-color: var(--color-tertiary-500);
         padding: 0.3rem;
-        width: 4em;
+        width: clamp(2rem, 5vw, 4rem);
         border-radius: 50%;
         z-index: 100;
         box-shadow: 3px 3px 3px var(--shadow-color);
@@ -224,7 +212,7 @@
     .fab-container {
         position: fixed;
-		    bottom: 0;
+        bottom: 0;
     }
     .fab-container:dir(ltr) {

package/dist/components/pineapple/PineappleBaseLayout.svelte CHANGED Viewed

@@ -20,7 +20,7 @@
 	import Toast from "./toast/Toast.svelte";
 	import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
 	import { fade } from "svelte/transition";
-	import { getDialogManager } from "../dialog_manager/DialogMangerInit";
+	import { dialogManager } from "../dialog_manager/DialogManager";
 	interface Props {
 		showDialogByDefault?: boolean;
@@ -77,7 +77,7 @@
 <!--todo: turn off hidden when it's time-->
 <button class="fab" onclick={()=>{
-	getDialogManager().then(dm => dm.toggleDialogOverlay());
+	dialogManager.toggleDialogOverlay();
 }}>
 	{#if (enableDialogueOverlayValue)}
 		<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
@@ -189,9 +189,8 @@
     }
     .fab {
-        /*@apply btn preset-filled-tertiary-500;*/
+		    position: fixed;
         padding: 0;
-        position: fixed;
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;

package/dist/index.d.ts CHANGED Viewed

@@ -11,4 +11,4 @@ export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
 export type { IDialogManager } from "./components/dialog_manager/IDialogManager";
-export { getDialogManager } from "./components/dialog_manager/DialogMangerInit";
+export { dialogManager } from "./components/dialog_manager/DialogManager";

package/dist/index.js CHANGED Viewed

@@ -11,4 +11,4 @@ export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
-export { getDialogManager } from "./components/dialog_manager/DialogMangerInit";
+export { dialogManager } from "./components/dialog_manager/DialogManager";

package/dist/scripts/pineapple_fiber/PineappleWeaver.js CHANGED Viewed

@@ -44,8 +44,7 @@ const pineappleWeaverRun = () => {
         const template = `// this file was generated by PineappleWeaver.ts
 // do not edit!
-import type { DialogDetail } from "@turnipxenon/pineapple";
-import { dialogManager, PortraitType } from "@turnipxenon/pineapple";
+import { type DialogDetail, dialogManager, PortraitType } from "@turnipxenon/pineapple";
 class _${fileName}Yarn {
 	dialogList: DialogDetail[] = [

package/dist/styles/app.css CHANGED Viewed

@@ -22,13 +22,15 @@ html {
     height: calc(var(--dialog-box-height) + 4em);
 }
-a.dialog-choice {
+.dialog-box a, .dialog-box b, .dialog-box i {
     font-size: inherit;
+}
+a.dialog-choice {
     cursor: url("$pkg/assets/icons/chat-cursor.svg"), auto;
 }
 a.external-link {
-    font-size: inherit;
     cursor: url("$pkg/assets/icons/external-link.svg"), auto;
 }