@hyvor/design 0.0.66 → 0.0.68

package/dist/marketing/Footer/Footer.svelte

@@ -1,5 +1,13 @@
 <script>import Container from "../Container/Container.svelte";
-import { IconCopy, IconDiscord, IconEnvelope, IconGithub, IconLinkedin, IconTwitterX, IconYoutube } from "@hyvor/icons";
+import {
+  IconCopy,
+  IconDiscord,
+  IconEnvelope,
+  IconGithub,
+  IconLinkedin,
+  IconTwitterX,
+  IconYoutube
+} from "@hyvor/icons";
 import Link from "../../components/Link/Link.svelte";
 import IconButton from "../../components/IconButton/IconButton.svelte";
 import Tooltip from "../../components/Tooltip/Tooltip.svelte";
@@ -28,132 +36,116 @@ function handleCopy() {
 </script>
 
 <footer>
-
-    <Container>
-
-        <div class="footer-top">
-
-            <div class="footer-top-left">
-            
-                {#if email}
-                    <div class="email-wrap">
-                        <Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
-                            <IconEnvelope slot="start" />
-                            { email }
-                        </Link>
-                        <Tooltip text={emailCopied ? "Copied!" : "Copy email"} position="top">
-                            <IconButton 
-                                size="small" 
-                                variant="invisible" 
-                                on:click={handleCopy}
-                                on:mouseleave={() => emailCopied = false}
-                            >
-                                <IconCopy size={12} />
-                            </IconButton>
-                        </Tooltip>
-                    </div>
-                {/if}
-
-                <div class="social-media">
-                    {#if social.github}
-                        <a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
-                    {/if}
-                    {#if social.x}
-                        <a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
-                    {/if}
-                    {#if social.discord}
-                        <a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
-                    {/if}
-                    {#if social.youtube}
-                        <a href={social.discord} target="_blank" rel="nofollow"><IconYoutube /></a>
-                    {/if}
-                    {#if social.linkedin}
-                        <a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
-                    {/if}
-                </div>
-
-            </div>
-
-            <div class="footer-top-right">
-
-
-                <span class="language-toggle-wrap">
-                    <LanguageToggle />
-                </span>
-
-            </div>
-
-        </div>
-
-        <div class="footer-center">
-            <slot name="center" />
-        </div>
-
-        <div class="footer-bottom">
-            <div class="footer-bottom-left">
-                HYVOR © {year}
-            </div> 
-            <div class="footer-bottom-right">
-                From France 🇫🇷
-            </div>
-        </div>
-
-    </Container>
-
+	<Container>
+		<div class="footer-top">
+			<div class="footer-top-left">
+				{#if email}
+					<div class="email-wrap">
+						<Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
+							<IconEnvelope slot="start" />
+							{email}
+						</Link>
+						<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
+							<IconButton
+								size="small"
+								variant="invisible"
+								on:click={handleCopy}
+								on:mouseleave={() => (emailCopied = false)}
+							>
+								<IconCopy size={12} />
+							</IconButton>
+						</Tooltip>
+					</div>
+				{/if}
+
+				<div class="social-media">
+					{#if social.github}
+						<a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
+					{/if}
+					{#if social.x}
+						<a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
+					{/if}
+					{#if social.discord}
+						<a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
+					{/if}
+					{#if social.youtube}
+						<a href={social.discord} target="_blank" rel="nofollow"><IconYoutube /></a>
+					{/if}
+					{#if social.linkedin}
+						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
+					{/if}
+				</div>
+			</div>
+
+			<div class="footer-top-right">
+				<span class="language-toggle-wrap">
+					<LanguageToggle />
+				</span>
+			</div>
+		</div>
+
+		<div class="footer-center">
+			<slot name="center" />
+		</div>
+
+		<div class="footer-bottom">
+			<div class="footer-bottom-left">
+				HYVOR © {year}
+			</div>
+			<div class="footer-bottom-right">From France 🇫🇷</div>
+		</div>
+	</Container>
 </footer>
 
 <style>
+	footer {
+		border-top: 1px solid var(--border);
+	}
 
-    footer {
-        border-top: 1px solid var(--border)
-    }
-
-    .footer-top {
-        padding-top: 60px;
-        display: flex;
-        align-items: flex-start;
-    }
-    .footer-center {
-        padding-top: 50px;
-    }
-    .footer-top-left {
-        flex: 1;
-    }
-    .footer-top-right {
-        display: flex;
-    }
-    .email-wrap {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        margin-bottom: 15px;
-    }
-    .social-media a {
-        display: inline-block;
-        padding: 3px;
-        margin-right: 8px;
-        color: var(--text-light);
-    }
-    .social-media a:first-child {
-        padding-left: 0;
-    }
-    .social-media a:hover {
-        color: var(--accent);
-    }
-
-    .footer-bottom {
-        padding-top: 50px;
-        padding-bottom: 30px;
-        display: flex;
-    }
-    .footer-bottom-left {
-        flex: 1;
-    }
+	.footer-top {
+		padding-top: 60px;
+		display: flex;
+		align-items: flex-start;
+	}
+	.footer-center {
+		padding-top: 50px;
+	}
+	.footer-top-left {
+		flex: 1;
+	}
+	.footer-top-right {
+		display: flex;
+	}
+	.email-wrap {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		margin-bottom: 15px;
+	}
+	.social-media a {
+		display: inline-block;
+		padding: 3px;
+		margin-right: 8px;
+		color: var(--text-light);
+	}
+	.social-media a:first-child {
+		padding-left: 0;
+	}
+	.social-media a:hover {
+		color: var(--accent);
+	}
 
+	.footer-bottom {
+		padding-top: 50px;
+		padding-bottom: 30px;
+		display: flex;
+	}
+	.footer-bottom-left {
+		flex: 1;
+	}
 
 	.language-toggle-wrap {
 		margin-left: 8px;
 		font-size: 18px;
 	}
-
 </style>

package/dist/marketing/Footer/FooterLinkList.svelte

@@ -2,35 +2,33 @@
 </script>
 
 <div class="link-list">
-    <div class="title">{title}</div>
-    <div class="links">
-        <slot />
-    </div>
+	<div class="title">{title}</div>
+	<div class="links">
+		<slot />
+	</div>
 </div>
 
 <style>
+	.link-list {
+		flex: 1;
+	}
 
-    .link-list {
-        flex: 1;
-    }
+	.title {
+		font-weight: 600;
+		text-transform: uppercase;
+		margin-bottom: 10px;
+	}
 
-    .title {
-        font-weight: 600;
-        text-transform: uppercase;
-        margin-bottom: 10px;
-    }
+	.links {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
 
-    .links {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .links :global(a) {
-        margin-top: 12px;
-    }
-    .links :global(a:hover) {
-        text-decoration: underline;
-    }
-
-</style>
+	.links :global(a) {
+		margin-top: 12px;
+	}
+	.links :global(a:hover) {
+		text-decoration: underline;
+	}
+</style>

package/dist/marketing/Header/Header.svelte

@@ -11,20 +11,18 @@ export let darkToggle = true;
 </script>
 
 <header>
-
 	<Container as="nav">
-
 		<div class="nav-start">
-            <a class="nav-brand" href="/">
-                <img src={logo} alt="Hyvor Logo" width="30" height="30" />
+			<a class="nav-brand" href="/">
+				<img src={logo} alt="Hyvor Logo" width="30" height="30" />
 				<span class="brand-product">
 					<span class="brand">{name}</span>
 					{#if subName}
 						<span class="product">{subName}</span>
 					{/if}
 				</span>
-            </a>
-        </div>
+			</a>
+		</div>
 
 		<div class="nav-center">
 			<slot name="center" />
@@ -35,7 +33,6 @@ export let darkToggle = true;
 		</div>
 
 		<div class="dark-mobile">
-
 			{#if darkToggle}
 				<span class="dark-toggle-wrap">
 					<DarkToggle />
@@ -60,15 +57,11 @@ export let darkToggle = true;
 					</div>
 				</Dropdown>
 			</span> -->
-
 		</div>
 
 		<span class="mobile-nav-wrap">
 			<Dropdown align="end" width={300}>
-				<IconButton 
-					variant="invisible" 
-					slot="trigger"
-				>
+				<IconButton variant="invisible" slot="trigger">
 					<IconList size={18} />
 				</IconButton>
 				<div slot="content" class="mobile-content">
@@ -81,9 +74,7 @@ export let darkToggle = true;
 				</div>
 			</Dropdown>
 		</span>
-
 	</Container>
-
 </header>
 
 <div class="header-space" />
@@ -184,7 +175,8 @@ header :global(nav) {
     display: inline-block;
   }
 }
-.mobile-content, .mobile-inner {
+.mobile-content,
+.mobile-inner {
   display: flex;
   flex-direction: column;
 }

package/dist/marketing/Logo/LogoBlogs.svelte

@@ -0,0 +1,41 @@
+<script>export let size = 40;
+</script>
+
+<svg width={size} height={size} viewBox="0 0 132.29166 132.29167" version="1.1">
+	<g id="layer1">
+		<g id="g1067">
+			<rect
+				style="mix-blend-mode:normal;fill:#f1e8e8;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				id="rect1001"
+				width="77.870262"
+				height="123.57672"
+				x="26.535261"
+				y="5.0260782"
+				ry="38.935131"
+				transform="rotate(-0.58211807)"
+			/>
+			<path
+				id="path1003"
+				style="mix-blend-mode:normal;fill:#896c6b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				d="m 105.07895,65.75026 0.23219,22.852048 C 105.53028,110.17126 88.342531,127.71185 66.773582,127.931 45.204632,128.15014 27.664036,110.96239 27.44489,89.393446 L 27.212709,66.541399 Z"
+			/>
+			<g id="g1011" transform="matrix(1.0727824,0,0,1.0727824,-4.7282157,-11.786447)">
+				<path
+					id="path1005"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1007"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1009"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
+				/>
+			</g>
+		</g>
+	</g>
+</svg>

package/dist/marketing/Logo/LogoBlogs.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoBlogsProps = typeof __propDef.props;
+export type LogoBlogsEvents = typeof __propDef.events;
+export type LogoBlogsSlots = typeof __propDef.slots;
+export default class LogoBlogs extends SvelteComponent<LogoBlogsProps, LogoBlogsEvents, LogoBlogsSlots> {
+}
+export {};

package/dist/marketing/Logo/LogoCore.svelte

@@ -0,0 +1,41 @@
+<script>export let size = 40;
+</script>
+
+<svg width={size} height={size} viewBox="0 0 500 500" version="1.1">
+	<g id="layer1">
+		<g id="g5140" transform="translate(-986.41349,-538.31731)">
+			<rect
+				style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:27.0548;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				id="rect1001"
+				width="294.31281"
+				height="467.06161"
+				x="1081.1842"
+				y="567.30737"
+				ry="147.1564"
+				transform="rotate(-0.582118)"
+			/>
+			<path
+				id="path1003"
+				style="mix-blend-mode:normal;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:27.0548;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				d="m 1383.5623,786.82223 0.8775,86.36995 c 0.8283,81.52045 -64.1333,147.81562 -145.6537,148.64392 -81.5205,0.8282 -147.8157,-64.13337 -148.6439,-145.65379 l -0.8776,-86.36995 z"
+			/>
+			<g id="g1011" transform="matrix(4.0546107,0,0,4.0546107,968.54304,493.77011)">
+				<path
+					id="path1005"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1007"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1009"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
+				/>
+			</g>
+		</g>
+	</g>
+</svg>

package/dist/marketing/Logo/LogoCore.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoCoreProps = typeof __propDef.props;
+export type LogoCoreEvents = typeof __propDef.events;
+export type LogoCoreSlots = typeof __propDef.slots;
+export default class LogoCore extends SvelteComponent<LogoCoreProps, LogoCoreEvents, LogoCoreSlots> {
+}
+export {};

package/dist/marketing/Logo/LogoFortguard.svelte

@@ -0,0 +1,49 @@
+<script>export let size = 40;
+</script>
+
+<svg width={size} height={size} viewBox="0 0 132.29166 132.29167" version="1.1">
+	<defs id="defs959" />
+	<sodipodi:namedview
+		id="base"
+		pagecolor="#ffffff"
+		bordercolor="#666666"
+		borderopacity="1.0"
+		units="px"
+	/>
+	<g id="layer1">
+		<g id="g1067">
+			<rect
+				style="mix-blend-mode:normal;fill:#fbf7ff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				id="rect1001"
+				width="77.870262"
+				height="123.57672"
+				x="26.535261"
+				y="5.0260782"
+				ry="38.935131"
+				transform="rotate(-0.58211807)"
+			/>
+			<path
+				id="path1003"
+				style="mix-blend-mode:normal;fill:#836096;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				d="m 105.07895,65.75026 0.23219,22.852048 C 105.53028,110.17126 88.342531,127.71185 66.773582,127.931 45.204632,128.15014 27.664036,110.96239 27.44489,89.393446 L 27.212709,66.541399 Z"
+			/>
+			<g id="g1011" transform="matrix(1.0727824,0,0,1.0727824,-4.7282157,-11.786447)">
+				<path
+					id="path1005"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1007"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1009"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
+				/>
+			</g>
+		</g>
+	</g>
+</svg>

package/dist/marketing/Logo/LogoFortguard.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoFortguardProps = typeof __propDef.props;
+export type LogoFortguardEvents = typeof __propDef.events;
+export type LogoFortguardSlots = typeof __propDef.slots;
+export default class LogoFortguard extends SvelteComponent<LogoFortguardProps, LogoFortguardEvents, LogoFortguardSlots> {
+}
+export {};

package/dist/marketing/Logo/LogoTalk.svelte

@@ -0,0 +1,27 @@
+<script>export let size = 40;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 132.292 132.292"
+	><g stroke-width="7.158" stroke="#000" fill-rule="evenodd"
+		><rect
+			width="77.87"
+			height="123.577"
+			x="26.535"
+			y="5.026"
+			ry="38.935"
+			transform="rotate(359.418)"
+			fill="#fff3d3"
+		/><path
+			d="M105.079 65.75l.232 22.852c.219 21.569-16.969 39.11-38.538 39.329s-39.11-16.969-39.329-38.538l-.232-22.852z"
+			fill="#ffd969"
+		/></g
+	><path
+		d="M59.3 31.89c0-2.555-3.289-4.625-7.346-4.625s-7.346 2.071-7.346 4.625m43.076 0c0-2.555-3.289-4.625-7.346-4.625s-7.346 2.071-7.346 4.625m.271 15.859c0 2.555-3.289 4.625-7.346 4.625s-7.346-2.071-7.346-4.625"
+		stroke="#000"
+		paint-order="stroke fill markers"
+		fill="none"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="6.65"
+	/></svg
+>

package/dist/marketing/Logo/LogoTalk.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoTalkProps = typeof __propDef.props;
+export type LogoTalkEvents = typeof __propDef.events;
+export type LogoTalkSlots = typeof __propDef.slots;
+export default class LogoTalk extends SvelteComponent<LogoTalkProps, LogoTalkEvents, LogoTalkSlots> {
+}
+export {};

package/dist/marketing/index.d.ts

@@ -8,3 +8,4 @@ export { default as DocsContent } from './Docs/Content/Content.svelte';
 export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
+export { default as Document } from './Document/Document.svelte';

package/dist/marketing/index.js

@@ -8,3 +8,4 @@ export { default as DocsContent } from './Docs/Content/Content.svelte';
 export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
+export { default as Document } from './Document/Document.svelte';

package/dist/stores/dark.js

@@ -1,25 +1,25 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 export const dark = writable(false);
 export function setInitialState() {
     const isDark = isDarkScheme();
     if (isDark) {
         dark.set(true);
     }
-    dark.subscribe(isDark => {
+    dark.subscribe((isDark) => {
         if (isDark) {
-            document.documentElement.classList.add("dark");
-            window.localStorage.setItem("scheme-dark", "true");
+            document.documentElement.classList.add('dark');
+            window.localStorage.setItem('scheme-dark', 'true');
         }
         else {
-            document.documentElement.classList.remove("dark");
-            window.localStorage.removeItem("scheme-dark");
+            document.documentElement.classList.remove('dark');
+            window.localStorage.removeItem('scheme-dark');
         }
     });
 }
 function isDarkScheme() {
-    const localStorageData = window.localStorage.getItem("scheme-dark");
+    const localStorageData = window.localStorage.getItem('scheme-dark');
     if (localStorageData) {
         return !!localStorageData;
     }
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }