@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha.1

package/dist/ui/components/SocialSection.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	import MailIcon from "../../assets/icons/mail.svg";
+	import GithubIcon from "../../assets/icons/github-mark.svg";
+	import LinkedinIcon from "../../assets/icons/linkedin.svg";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../elements/index";
+	import { ItchLogoHotLink } from "../../consts";
+
+	/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
+	let {
+		isSmallVersion = false,
+		email = "turnipxenon@gmail.com",
+		linkedinSlug = "turnip-xenon",
+		isSlot = false,
+		allowLinkedIn = true
+	} = $props();
+
+	let shouldShowExtra = $state(false);
+	const style = `
+		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
+		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
+	`;
+
+	onMount(() => {
+		shouldShowExtra = window.screen.availWidth >= 440;
+	});
+</script>
+
+<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
+	<PinyaButton
+		buttonVariant={ButtonVariant.SmallIcon}
+		title="https://github.com/TurnipXenon"
+		onclick={() => window.open("https://github.com/TurnipXenon")}>
+		<ImageIcon src={GithubIcon} alt="github icon" />
+		{#if (!isSmallVersion)}
+			<span>TurnipXenon</span>
+		{/if}
+	</PinyaButton>
+	{#if allowLinkedIn}
+		<PinyaButton
+			buttonVariant={ButtonVariant.SmallIcon}
+			title={`https://www.linkedin.com/in/${linkedinSlug}/`}
+			onclick={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
+			<ImageIcon src={LinkedinIcon} alt="linkedin icon" />
+			{#if (!isSmallVersion)}
+				<span>{linkedinSlug}</span>
+			{/if}
+		</PinyaButton>
+	{/if}
+	<PinyaButton
+		buttonVariant={ButtonVariant.SmallIcon}
+		title={`mailto:${email}`}
+		onclick={() => window.open(`mailto:${email}`)}>
+		<ImageIcon src={MailIcon} alt="mail icon" />
+		{#if (!isSmallVersion)}
+			<span>{email}</span>
+		{/if}
+	</PinyaButton>
+	{#if (shouldShowExtra)}
+		<div transition:scale>
+			<PinyaButton
+				buttonVariant={ButtonVariant.SmallIcon}
+				title="https://turnipxenon.itch.io/"
+				onclick={() => window.open("https://turnipxenon.itch.io/")}>
+				<ImageIcon src={ItchLogoHotLink} alt="itch icon" />
+				{#if (!isSmallVersion)}
+					<span>TurnipXenon</span>
+				{/if}
+			</PinyaButton>
+		</div>
+	{/if}
+</div>
+
+<style>
+    span {
+        font-size: 0.8em;
+    }
+
+    .socials {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: var(--preferred-justify-content);
+        gap: 0.7rem;
+    }
+</style>

package/dist/ui/components/SocialSection.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const SocialSection: import("svelte").Component<{
+    isSmallVersion?: boolean;
+    email?: string;
+    linkedinSlug?: string;
+    isSlot?: boolean;
+    allowLinkedIn?: boolean;
+}, {}, "">;
+type SocialSection = ReturnType<typeof SocialSection>;
+export default SocialSection;

package/dist/ui/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ModalBase } from "./ModalBase.svelte";
+export { default as FourPartCard } from "./FourPartCard.svelte";
+export { default as SocialSection } from "./SocialSection.svelte";

package/dist/ui/components/index.js

@@ -0,0 +1,3 @@
+export { default as ModalBase } from "./ModalBase.svelte";
+export { default as FourPartCard } from "./FourPartCard.svelte";
+export { default as SocialSection } from "./SocialSection.svelte";

package/{src/lib/components → dist/ui/components/randomized-background}/RandomizedBackground.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
-	import BgTiledAres from "$lib/assets/bg_tiled/bg_tiled_ares.png";
-	import BgTiledCorn from "$lib/assets/bg_tiled/bg_tiled_corn.png";
-	import BgTiledPineapple from "$lib/assets/bg_tiled/bg_tiled_pineapple.png";
-	import BgTiledReinhard from "$lib/assets/bg_tiled/bg_tiled_reinhard.png";
-	import BgTiledTomato from "$lib/assets/bg_tiled/bg_tiled_tomato.png";
-	import BgTiledTurnip from "$lib/assets/bg_tiled/bg_tiled_turnip.png";
-	import RandomizedImage from "$lib/components/RandomizedImage.svelte";
-	import { generatedDailySeed, mulberry32Generator } from "$pkg/util/util";
+	import { fade } from 'svelte/transition';
 
-	export let enable;
+	import BgTiledAres from '../../../assets/bg_tiled/bg_tiled_ares.png';
+	import BgTiledCorn from '../../../assets/bg_tiled/bg_tiled_corn.png';
+	import BgTiledPineapple from '../../../assets/bg_tiled/bg_tiled_pineapple.png';
+	import BgTiledReinhard from '../../../assets/bg_tiled/bg_tiled_reinhard.png';
+	import BgTiledTomato from '../../../assets/bg_tiled/bg_tiled_tomato.png';
+	import BgTiledTurnip from '../../../assets/bg_tiled/bg_tiled_turnip.png';
+	import RandomizedImage from './RandomizedImage.svelte';
+	import { generatedDailySeed, mulberry32Generator } from '../../../util/util';
+
+	let { enabled }: {
+		enabled: boolean
+	} = $props();
 
 	const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
 
 	const seed = generatedDailySeed();
 	const rng = mulberry32Generator(seed);
 
-	const shuffle = (array: any[]): any[] => {
+	const shuffle = <T>(array: T[]): T[] => {
 		// from: community wiki @ https://stackoverflow.com/a/2450976/17836168
 		let currentIndex = array.length,
 			randomIndex;
@@ -33,17 +37,21 @@
 		return array;
 	};
 
-	let generatedImageList: string[] = [];
+	let generatedImageList: string[] = $state([]);
 
-	for (let i = 0; i < 20; i++) {
-		shuffle(imageList);
-		generatedImageList = generatedImageList.concat(imageList);
-	}
+	$effect(() => {
+		let gi: string[] = [];
+		for (let i = 0; i < 20; i++) {
+			shuffle(imageList);
+			gi = gi.concat(imageList);
+		}
+		generatedImageList = gi;
+	});
 </script>
 
 <svelte:head>
 	<!-- from: https://dev.to/khromov/preloading-images-in-svelte-465h	-->
-	{#each imageList as image}
+	{#each imageList as image, idx (idx)}
 		<link rel="preload" as="image" href={image} />
 	{/each}
 	<link
@@ -54,15 +62,15 @@
 </svelte:head>
 
 <!--todo: add a letterbox beyond 1960px + 16 rem-->
-{#if enable}
-	<div class="default-background" aria-hidden="true">
-		{#each generatedImageList as imageItem}
-			<svelte:component this={RandomizedImage} src={imageItem} {rng} />
+{#if enabled && generatedImageList.length > 0}
+	<div class="default-background" aria-hidden="true" transition:fade>
+		{#each generatedImageList as imageItem, idx (idx)}
+			<RandomizedImage src={imageItem} {rng} />
 		{/each}
 	</div>
 {/if}
 
-<style lang="postcss">
+<style>
     .default-background {
         position: fixed;
         display: flex;

package/dist/ui/components/randomized-background/RandomizedBackground.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    enabled: boolean;
+};
+declare const RandomizedBackground: import("svelte").Component<$$ComponentProps, {}, "">;
+type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
+export default RandomizedBackground;

package/{src/lib/components → dist/ui/components/randomized-background}/RandomizedImage.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-	import { modeCurrent } from "@skeletonlabs/skeleton";
-
-	export let src: string;
-	export let rng: () => number;
+	let {
+		src,
+		rng
+	}: {
+		src: string,
+		rng: () => number
+	} = $props();
 	let rotateRandom = rng() * 90 - 45;
 
 	const paddingLeft = 1 + rng() * 5;
@@ -14,11 +17,10 @@
 	style="--paddingTop: {paddingTop}rem;
         --paddingLeft: {paddingLeft}rem;
         --paddingRight: {paddingRight}rem;">
-	<img {src} class="randomized-image-style"
+	<img {src} class="randomized-image"
 	     aria-hidden="true"
 	     style="--rotateRandom:{rotateRandom}deg;"
-	     alt=""
-	     class:darkMode={modeCurrent} />
+	     alt="" />
 </div>
 
 <style>
@@ -34,7 +36,7 @@
         transform: rotate(var(--rotateRandom));
     }
 
-    .darkMode {
-        filter: brightness(50%);
+    .randomized-image {
+        filter: var(--filter-randomized-image);
     }
 </style>

package/dist/ui/components/randomized-background/RandomizedImage.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    src: string;
+    rng: () => number;
+};
+declare const RandomizedImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type RandomizedImage = ReturnType<typeof RandomizedImage>;
+export default RandomizedImage;

package/dist/ui/elements/ColorScheme.d.ts

@@ -0,0 +1,10 @@
+export declare enum ColorScheme {
+    Primary = 0,
+    Secondary = 1,
+    Tertiary = 2,
+    Success = 3,
+    Warning = 4,
+    Error = 5,
+    Surface = 6,
+    Custom = 7
+}

package/dist/ui/elements/ColorScheme.js

@@ -0,0 +1,11 @@
+export var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme[ColorScheme["Primary"] = 0] = "Primary";
+    ColorScheme[ColorScheme["Secondary"] = 1] = "Secondary";
+    ColorScheme[ColorScheme["Tertiary"] = 2] = "Tertiary";
+    ColorScheme[ColorScheme["Success"] = 3] = "Success";
+    ColorScheme[ColorScheme["Warning"] = 4] = "Warning";
+    ColorScheme[ColorScheme["Error"] = 5] = "Error";
+    ColorScheme[ColorScheme["Surface"] = 6] = "Surface";
+    ColorScheme[ColorScheme["Custom"] = 7] = "Custom";
+})(ColorScheme || (ColorScheme = {}));

package/dist/ui/elements/GeneralUIProps.d.ts

@@ -0,0 +1,12 @@
+import type { ColorScheme } from './ColorScheme';
+import type { OnBackground } from './OnBackground';
+export interface GeneralUIProps {
+    /**
+     * Color scheme of the UI
+     */
+    colorScheme?: ColorScheme;
+    /**
+     * Color scheme of the background the UI is on
+     */
+    onBackground?: OnBackground;
+}

package/dist/ui/elements/ImageIcon.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import type { GeneralUIProps } from './GeneralUIProps';
+	import { ColorScheme } from './ColorScheme';
+
+	type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
+
+	const {
+		colorScheme = ColorScheme.Primary,
+		...props
+	}: PinyaButtonProps = $props();
+
+	const chooseTailwindClass = () => {
+		switch (colorScheme) {
+			case ColorScheme.Warning:
+				return 'btn preset-filled-warning-600-400 text-surface-100 hover:brightness-110';
+			case ColorScheme.Surface:
+				return 'btn preset-filled-surface-800-200 text-surface-100-900 hover:brightness-110';
+			default:
+				console.error('Unimplemented color scheme');
+			// eslint-disable-next-line no-fallthrough
+			case ColorScheme.Primary:
+				return 'icon-filter-on-primary-button';
+		}
+	};
+
+	const tailwindClass = chooseTailwindClass();
+</script>
+
+<img
+	{...props}
+	class={`image-icon ${tailwindClass}`}>
+
+<style>
+		:global(.image-icon) {
+        height: calc(var(--spacing) * 8);
+		}
+
+		:global(.small-icon-button .image-icon) {
+        height: calc(var(--spacing) * 6);
+		}
+
+    :global(.icon-filter-on-primary-button) {
+				/* based on secondary-950 */
+        filter: brightness(0) saturate(100%) invert(18%) sepia(10%) saturate(4620%) hue-rotate(331deg) brightness(90%) contrast(88%);
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :global(.icon-filter-on-primary-button) {
+						/* based on surface-0 */
+            filter: brightness(0) saturate(100%) invert(85%) sepia(3%) saturate(993%) hue-rotate(326deg) brightness(113%) contrast(105%);
+        }
+    }
+</style>

package/dist/ui/elements/ImageIcon.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { GeneralUIProps } from './GeneralUIProps';
+type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
+declare const ImageIcon: import("svelte").Component<PinyaButtonProps, {}, "">;
+type ImageIcon = ReturnType<typeof ImageIcon>;
+export default ImageIcon;

package/dist/ui/elements/OnBackground.d.ts

@@ -0,0 +1,3 @@
+export declare enum OnBackground {
+    SurfaceCard = 0
+}

package/dist/ui/elements/OnBackground.js

@@ -0,0 +1,4 @@
+export var OnBackground;
+(function (OnBackground) {
+    OnBackground[OnBackground["SurfaceCard"] = 0] = "SurfaceCard";
+})(OnBackground || (OnBackground = {}));

package/dist/ui/elements/TextLink.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	let {
+		children,
+		href
+	}: { href: string, children: Snippet } = $props();
+</script>
+
+<a
+	{href}
+	class="visited:text-surface-950 dark:visited:text-surface-400">
+	{@render children?.()}
+</a>
+
+<style>
+</style>

package/dist/ui/elements/TextLink.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    href: string;
+    children: Snippet;
+};
+declare const TextLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextLink = ReturnType<typeof TextLink>;
+export default TextLink;

package/dist/ui/elements/WrapperProps.d.ts

@@ -0,0 +1,4 @@
+import type { Snippet } from 'svelte';
+export type WrapperProps = {
+    children: Snippet;
+};

package/dist/ui/elements/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ImageIcon } from './ImageIcon.svelte';
+export { default as TextLink } from './TextLink.svelte';
+export * from './ColorScheme';
+export * from './GeneralUIProps';
+export * from './OnBackground';
+export * from './pinya-card/index';
+export * from './WrapperProps';
+export * from './pinya-button/index';

package/dist/ui/elements/index.js

@@ -0,0 +1,8 @@
+export { default as ImageIcon } from './ImageIcon.svelte';
+export { default as TextLink } from './TextLink.svelte';
+export * from './ColorScheme';
+export * from './GeneralUIProps';
+export * from './OnBackground';
+export * from './pinya-card/index';
+export * from './WrapperProps';
+export * from './pinya-button/index';

package/dist/ui/elements/pinya-button/component.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { ColorScheme } from '..';
+	import { ButtonVariant, type PinyaButtonProps } from './props';
+
+	let {
+		children,
+		colorScheme = ColorScheme.Primary,
+		paddingClass = '',
+		buttonVariant = ButtonVariant.Default,
+		colorClass = '',
+		...props
+	}: PinyaButtonProps = $props();
+
+	paddingClass = paddingClass
+		? paddingClass
+		: (
+			buttonVariant === ButtonVariant.Image
+				? 'pl-3 pr-3 pt-2 pb-2'
+				: 'pl-3 pr-3'
+		);
+
+	const chooseTailwindClass = () => {
+		switch (colorScheme) {
+			case ColorScheme.Custom:
+				return colorClass;
+			case ColorScheme.Warning:
+				return 'bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110';
+			case ColorScheme.Surface:
+				return 'bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110';
+			default:
+				console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
+			// eslint-disable-next-line no-fallthrough
+			case ColorScheme.Primary:
+				return 'bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110';
+		}
+	};
+
+	const tailwindClass = chooseTailwindClass();
+</script>
+
+<button
+	{...props}
+	class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
+	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass}`}
+>
+	{@render children()}
+</button>

package/dist/ui/elements/pinya-button/component.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type PinyaButtonProps } from './props';
+declare const Component: import("svelte").Component<PinyaButtonProps, {}, "">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/dist/ui/elements/pinya-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaButton } from './component.svelte';
+export * from './props';

package/dist/ui/elements/pinya-button/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaButton } from './component.svelte';
+export * from './props';

package/dist/ui/elements/pinya-button/props.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { GeneralUIProps } from '../GeneralUIProps';
+import type { WrapperProps } from '../WrapperProps';
+export declare enum ButtonVariant {
+    Default = 0,
+    Image = 1,
+    SmallIcon = 2
+}
+export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIProps & {
+    paddingClass?: string;
+    buttonVariant?: ButtonVariant;
+    colorClass?: string;
+};

package/dist/ui/elements/pinya-button/props.js

@@ -0,0 +1,6 @@
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
+    ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
+    ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
+})(ButtonVariant || (ButtonVariant = {}));

package/dist/ui/elements/pinya-card/component.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">/**
+* When with texts, wrap the text content inside a div so flex wont apply
+*/
+	import type { PinyaCardProps } from './props';
+
+	let {
+	paddingClass = 'pt-[1lh] pb-[1lh] pl-16 pr-16',
+	flexClass = 'flex flex-col',
+	widthClass = 'max-w-md',
+	className,
+	children
+}: PinyaCardProps = $props();
+</script>
+
+<div
+	class={`card bg-surface-200 dark:bg-surface-900 border-[2px] border-primary-500 dark:border-0 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass}`}
+>
+	{@render children?.()}
+</div>

package/dist/ui/elements/pinya-card/component.svelte.d.ts

@@ -0,0 +1,7 @@
+/**
+* When with texts, wrap the text content inside a div so flex wont apply
+*/
+import type { PinyaCardProps } from './props';
+declare const Component: import("svelte").Component<PinyaCardProps, {}, "">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/dist/ui/elements/pinya-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./component.svelte";
+export * from "./props";

package/dist/ui/elements/pinya-card/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./component.svelte";
+export * from "./props";

package/dist/ui/elements/pinya-card/props.d.ts

@@ -0,0 +1,7 @@
+import type { WrapperProps } from '..';
+export interface PinyaCardProps extends WrapperProps {
+    paddingClass?: string;
+    className?: string;
+    flexClass?: string;
+    widthClass?: string;
+}

package/dist/ui/modules/index.d.ts

@@ -0,0 +1 @@
+export * from "./seaweed/index";

package/dist/ui/modules/index.js

@@ -0,0 +1 @@
+export * from "./seaweed/index";

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { ModalProps } from 'svelte-modals';
+	import { setMode, userPrefersMode } from 'mode-watcher';
+
+	import { m } from '../../../../paraglide/messages';
+	import ModalBase from '../../../components/ModalBase.svelte';
+	import DarkIcon from '../../../../assets/icons/icon-dark-mode.svg';
+	import LightIcon from '../../../../assets/icons/icon-light-mode.svg';
+	import ConstrastIcon from '../../../../assets/icons/icon-contrast.svg';
+	import LanguagePicker from './LanguagePicker.svelte';
+
+	let props: ModalProps = $props();
+
+
+	interface ToggleItem {
+		key: 'light' | 'dark' | 'system'
+		imageSrc: string,
+		label: string,
+	}
+
+	const modes: ToggleItem[] = [
+		{ key: 'light', imageSrc: LightIcon, label: 'Light' },
+		{ key: 'dark', imageSrc: DarkIcon, label: 'Dark' },
+		{ key: 'system', imageSrc: ConstrastIcon, label: 'System' }
+	];
+
+	let selectedItem: ToggleItem = $state(modes[0]);
+
+	// when mode is edited outside, adjust toggle button
+	// do not use runes here because we only want explicit changes outside
+	// our control here!
+	userPrefersMode.subscribe((value) => {
+		const si = modes.find(m => m.key === value);
+		if (selectedItem !== si && si) {
+			selectedItem = si;
+		}
+	});
+
+	// when mode is changed inside the button, adjust the mode
+	$effect(() => {
+		switch (selectedItem?.key) {
+			case 'dark':
+				setMode('dark');
+				break;
+			case 'light':
+				setMode('light');
+				break;
+			case 'system':
+				setMode('system');
+				break;
+			default:
+				break;
+		}
+	});
+</script>
+
+<ModalBase {...props}>
+	<div class="wrapper">
+		<h2>{m.settings()}</h2>
+
+		<fieldset class="btn-group border-primary-500 border-2 flex-col p-2 md:flex-row">
+			<legend class="bg-surface-100-900 pl-4 pr-4">Mode</legend>
+			{#each modes as mode (mode)}
+				<button
+					type="button"
+					title={mode.label}
+					class={`btn pt-3 pb-3 hover:brightness-125
+				${mode.key === selectedItem.key ? 'bg-secondary-400 dark:bg-secondary-800' : 'preset-outlined-primary-300-700'}
+				`}
+					onclick={() => { setMode(mode.key) }}
+				>
+					<img
+						src={mode.imageSrc}
+						aria-hidden="true"
+						alt=""
+						class={`icon
+					${mode.key === selectedItem.key ? 'reverse' : ''}
+					`}
+					>
+					{mode.label}
+				</button>
+			{/each}
+		</fieldset>
+
+		<LanguagePicker />
+
+		<div class="actions">
+			<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
+							title="Close modal">
+				Close
+			</button>
+		</div>
+	</div>
+</ModalBase>
+
+<style>
+    .actions {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 1.4lh;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        text-align: start;
+        gap: 1lh;
+    }
+</style>