@hyvor/design 2.1.22 → 2.1.23

package/dist/components/Base/Base.svelte

@@ -1,21 +1,60 @@
 <script lang="ts">
-	import ConfirmModalProvider from './../Modal/ConfirmModalProvider.svelte';
-	import DarkProvider from './../Dark/DarkProvider.svelte';
-	import ToastProvider from '../Toast/ToastProvider.svelte';
-	import FileUploaderProvider from '../FileUploader/FileUploaderProvider.svelte';
 	import fontsCss from './fonts.css?inline';
+	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';
 
 	interface Props {
 		dark?: boolean;
 		children?: import('svelte').Snippet;
+		marketing?: boolean;
 	}
 
-	let { dark = false, children }: Props = $props();
+	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;
+	});
 </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">
@@ -26,9 +65,23 @@
 	<DarkProvider />
 {/if}
 
-<ToastProvider />
-<ConfirmModalProvider />
-<FileUploaderProvider />
+{#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}
 
 <style>
 	:global(:root) {

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

@@ -1,6 +1,7 @@
 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,11 +1,12 @@
 <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);
@@ -13,6 +14,7 @@
 
 		if (partner) {
 			showModal = true;
+			modalNeeded = true;
 		}
 	});
 
@@ -44,31 +46,35 @@
 	}
 </script>
 
-<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>
+{#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}
 
 <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,6 +66,13 @@
 		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)
 	);
@@ -159,18 +166,15 @@
 								<IconEnvelope size={14} />
 								{email}
 							</a>
-							<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>
+							{#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}
 						</div>
 					{/if}
 
@@ -233,6 +237,19 @@
 	{/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",
+	"version": "2.1.23",
 	"license": "MIT",
 	"private": false,
 	"sideEffects": [