@hyvor/design 2.1.22-beta.4 → 2.1.22

package/dist/components/Base/Base.svelte

@@ -1,60 +1,21 @@
 <script lang="ts">
-	import fontsCss from './fonts.css?inline';
+	import ConfirmModalProvider from './../Modal/ConfirmModalProvider.svelte';
 	import DarkProvider from './../Dark/DarkProvider.svelte';
-	import { toastStore } from '../Toast/toast.js';
-	import { confirmStore } from '../Modal/confirm.js';
-	import { fileUploaderConfig } from '../FileUploader/file-uploader.js';
+	import ToastProvider from '../Toast/ToastProvider.svelte';
+	import FileUploaderProvider from '../FileUploader/FileUploaderProvider.svelte';
+	import fontsCss from './fonts.css?inline';
 
 	interface Props {
 		dark?: boolean;
 		children?: import('svelte').Snippet;
-		marketing?: boolean;
 	}
 
-	let { dark = false, children, marketing = false }: Props = $props();
-
-	let needsToast = $state(false);
-	let needsConfirm = $state(false);
-	let needsFileUploader = $state(false);
-
-	$effect(() => {
-		if ($toastStore.length > 0) needsToast = true;
-	});
-	$effect(() => {
-		if ($confirmStore !== null) needsConfirm = true;
-	});
-	$effect(() => {
-		if ($fileUploaderConfig !== null) needsFileUploader = true;
-	});
+	let { dark = false, children }: Props = $props();
 </script>
 
 <svelte:head>
 	<link rel="preconnect" href="https://media.hyvor.com" />
-	<link rel="preconnect" href="https://media.hyvor.com" crossorigin="" />
-
 	{@html '<style>' + fontsCss + '</style>'}
-
-	{#if marketing}
-		<link
-			rel="preload"
-			href="https://media.hyvor.com/fonts/source-serif-4-latin-600-normal.DouSKlru.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin=""
-		/>
-		<link
-			rel="preload"
-			href="https://media.hyvor.com/fonts/source-serif-4-latin-400-normal.DJ5YJwmz.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin=""
-		/>
-		<style>
-			:root {
-				font-family: var(--font-serif) !important;
-			}
-		</style>
-	{/if}
 </svelte:head>
 
 <div id="hds-base">
@@ -65,23 +26,9 @@
 	<DarkProvider />
 {/if}
 
-{#if needsToast}
-	{#await import('../Toast/ToastProvider.svelte') then m}
-		<m.default />
-	{/await}
-{/if}
-
-{#if needsConfirm}
-	{#await import('../Modal/ConfirmModalProvider.svelte') then m}
-		<m.default />
-	{/await}
-{/if}
-
-{#if needsFileUploader}
-	{#await import('../FileUploader/FileUploaderProvider.svelte') then m}
-		<m.default />
-	{/await}
-{/if}
+<ToastProvider />
+<ConfirmModalProvider />
+<FileUploaderProvider />
 
 <style>
 	:global(:root) {

package/dist/components/Base/Base.svelte.d.ts

@@ -1,7 +1,6 @@
 interface Props {
     dark?: boolean;
     children?: import('svelte').Snippet;
-    marketing?: boolean;
 }
 declare const Base: import("svelte").Component<Props, {}, "">;
 type Base = ReturnType<typeof Base>;

package/dist/marketing/Affiliate/Affiliate.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Link from '../../components/Link/Link.svelte';
+	import Modal from '../../components/Modal/Modal.svelte';
 	import { replaceState } from '$app/navigation';
 	import { onMount } from 'svelte';
 
 	let partner: string | null = $state(null);
 	let showModal = $state(false);
-	// Modal (and its Loader dependency) is only loaded once we actually need to show it
-	let modalNeeded = $state(false);
 
 	onMount(() => {
 		const params = new URLSearchParams(window.location.search);
@@ -14,7 +13,6 @@
 
 		if (partner) {
 			showModal = true;
-			modalNeeded = true;
 		}
 	});
 
@@ -46,35 +44,31 @@
 	}
 </script>
 
-{#if modalNeeded}
-	{#await import('../../components/Modal/Modal.svelte') then m}
-		<m.default
-			title="Referred by {partner}"
-			bind:show={showModal}
-			closeOnOutsideClick={false}
-			footer={{
-				cancel: {
-					text: 'Do not track'
-				},
-				confirm: {
-					text: 'Ok, Visit Site'
-				}
-			}}
-			on:confirm={handleConsent}
-		>
-			<div class="notice">
-				You visited our site through our affiliate partner <strong>{partner}</strong>. To track
-				this referral, we will place a small cookie in your browser. This cookie helps us identify
-				which affiliate partner referred you if you sign up. It does not collect any personal data.
-			</div>
-			<p>
-				You can read more in our <Link href="https://hyvor.com/privacy" target="_blank"
-					>Privacy Policy</Link
-				>.
-			</p>
-		</m.default>
-	{/await}
-{/if}
+<Modal
+	title="Referred by {partner}"
+	bind:show={showModal}
+	closeOnOutsideClick={false}
+	footer={{
+		cancel: {
+			text: 'Do not track'
+		},
+		confirm: {
+			text: 'Ok, Visit Site'
+		}
+	}}
+	on:confirm={handleConsent}
+>
+	<div class="notice">
+		You visited our site through our affiliate partner <strong>{partner}</strong>. To track this
+		referral, we will place a small cookie in your browser. This cookie helps us identify which
+		affiliate partner referred you if you sign up. It does not collect any personal data.
+	</div>
+	<p>
+		You can read more in our <Link href="https://hyvor.com/privacy" target="_blank"
+			>Privacy Policy</Link
+		>.
+	</p>
+</Modal>
 
 <style>
 	.notice {

package/dist/marketing/Footer/Footer.svelte

@@ -11,11 +11,11 @@
 	import IconBluesky from '@hyvor/icons/IconBluesky';
 	import IconLockFill from '@hyvor/icons/IconLockFill';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
+	import Tooltip from '../../components/Tooltip/Tooltip.svelte';
 	import LanguageToggle from '../../components/Internationalization/LanguageToggle.svelte';
 	import { SOCIAL_LINKS, type Socials } from '../social.js';
 	import Affiliate from '../Affiliate/Affiliate.svelte';
 	import RecordVisit from './RecordVisit.svelte';
-	import { onMount } from 'svelte';
 
 	const year = new Date().getFullYear();
 
@@ -66,13 +66,6 @@
 		gdprText = 'GDPR Compliant',
 		fromFranceText = 'From France'
 	}: Props = $props();
-
-	// load Tooltip after mount to avoid including it in builds
-	let tooltipReady = $state(false);
-	onMount(() => {
-		tooltipReady = true;
-	});
-
 	const mascotLogo = $derived(
 		logo || (product ? `${instance}/api/public/logo/${product}.svg` : undefined)
 	);
@@ -166,18 +159,18 @@
 								<IconEnvelope size={14} />
 								{email}
 							</a>
-							{#if tooltipReady}
-								{#await import('../../components/Tooltip/Tooltip.svelte') then m}
-									<m.default
-										text={emailCopied ? copiedLabel : copyEmailLabel}
-										position="top"
-									>
-										{@render CopyButton()}
-									</m.default>
-								{/await}
-							{:else}
-								{@render CopyButton()}
-							{/if}
+							<Tooltip text={emailCopied ? copiedLabel : copyEmailLabel} position="top">
+								<IconButton
+									size="small"
+									variant="invisible"
+									color="input"
+									aria-label={emailCopied ? copiedLabel : copyEmailLabel}
+									onclick={handleCopyEmail}
+									onmouseleave={() => (emailCopied = false)}
+								>
+									<IconCopy size={12} />
+								</IconButton>
+							</Tooltip>
 						</div>
 					{/if}
 
@@ -185,12 +178,7 @@
 						{#each SOCIAL_PLATFORMS as platform (platform.key)}
 							{@const href = socialLinks[platform.key]}
 							{#if href}
-								<a
-									{href}
-									target="_blank"
-									rel="nofollow"
-									aria-label={platform.label}
-								>
+								<a {href} target="_blank" rel="nofollow" aria-label={platform.label}>
 									<platform.icon size={16} />
 								</a>
 							{/if}
@@ -219,11 +207,7 @@
 								<svg class="ring" viewBox="0 0 32 32" aria-hidden="true">
 									<circle cx="16" cy="16" r="16" fill="#173a8a" />
 									{#each gdprStars as s}
-										<path
-											d={gdprStarPath}
-											fill="#ffcd3c"
-											transform="translate({s.x}, {s.y})"
-										/>
+										<path d={gdprStarPath} fill="#ffcd3c" transform="translate({s.x}, {s.y})" />
 									{/each}
 								</svg>
 								<span class="lock"><IconLockFill size={10} /></span>
@@ -249,19 +233,6 @@
 	{/if}
 </div>
 
-{#snippet CopyButton()}
-	<IconButton
-		size="small"
-		variant="invisible"
-		color="input"
-		aria-label={emailCopied ? copiedLabel : copyEmailLabel}
-		onclick={handleCopyEmail}
-		onmouseleave={() => (emailCopied = false)}
-	>
-		<IconCopy size={12} />
-	</IconButton>
-{/snippet}
-
 <style>
 	.footer-outer {
 		position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.22-beta.4",
+	"version": "2.1.22",
 	"license": "MIT",
 	"private": false,
 	"sideEffects": [