@hyvor/design 0.0.67 → 0.0.68

package/dist/marketing/Docs/Nav/NavCategory.svelte

@@ -2,38 +2,38 @@
 </script>
 
 <div class="nav-category">
-  <div class="name">
-    <span class="button-content">
-      {#if $$slots.start}
-        <span class="slot start"><slot name="start" /></span>
-      {/if}
+	<div class="name">
+		<span class="button-content">
+			{#if $$slots.start}
+				<span class="slot start"><slot name="start" /></span>
+			{/if}
 
-      {#if $$slots.end}
-        <span class="slot end"><slot name="end" /></span>
-      {/if}
-    </span>
-    {name}
-  </div>
-  <div class="nav-items">
-    <slot />
-  </div>
+			{#if $$slots.end}
+				<span class="slot end"><slot name="end" /></span>
+			{/if}
+		</span>
+		{name}
+	</div>
+	<div class="nav-items">
+		<slot />
+	</div>
 </div>
 
 <style>
-  .nav-category {
-    margin-bottom: 20px;
-  }
+	.nav-category {
+		margin-bottom: 20px;
+	}
 
-  .name {
-    font-weight: 600;
-    padding: 10px 25px;
-    display: flex;
-    align-items: center;
-  }
+	.name {
+		font-weight: 600;
+		padding: 10px 25px;
+		display: flex;
+		align-items: center;
+	}
 
-  .slot.start {
-    margin-right: 5px;
-    margin-left: 0;
-    display: flex;
-  }
+	.slot.start {
+		margin-right: 5px;
+		margin-left: 0;
+		display: flex;
+	}
 </style>

package/dist/marketing/Docs/Nav/NavItem.svelte

@@ -2,33 +2,30 @@
 export let href;
 </script>
 
-
-<a 
-    href={href}
-    class:active={href === $page.url.pathname}
-    aria-current={href === $page.url.pathname ? "page" : undefined}
+<a
+	{href}
+	class:active={href === $page.url.pathname}
+	aria-current={href === $page.url.pathname ? 'page' : undefined}
 >
-    <slot />
+	<slot />
 </a>
 
 <style>
+	a {
+		display: block;
+		padding: 4px 25px;
+		color: var(--text-light);
+		font-size: 14px;
+		letter-spacing: 0.3px;
+		border-left: 3px solid transparent;
+	}
 
-    a {
-        display: block;
-        padding: 4px 25px;
-        color: var(--text-light);
-        font-size: 14px;
-        letter-spacing: .3px;
-        border-left: 3px solid transparent;
-    }
-
-    a:hover {
-        background-color: var(--hover);
-    }
-
-    a.active {
-        background-color: var(--accent-lightest);
-        border-left: 3px solid var(--accent);
-    }
+	a:hover {
+		background-color: var(--hover);
+	}
 
-</style>
+	a.active {
+		background-color: var(--accent-lightest);
+		border-left: 3px solid var(--accent);
+	}
+</style>

package/dist/marketing/Docs/Sidebar/Sidebar.svelte

@@ -1,32 +1,29 @@
 <script>
-  import Toc from "../Toc.svelte";
-
+	import Toc from '../Toc.svelte';
 </script>
+
 <div class="sidebar">
-    <Toc />
+	<Toc />
 </div>
 
-
 <style>
+	.sidebar {
+		width: 220px;
+		top: var(--header-height, 0);
+		padding: 25px 0;
+		position: sticky;
+		flex-shrink: 0;
+		align-self: flex-start;
+	}
 
-    .sidebar {
-        width: 220px;
-        top: var(--header-height, 0);
-        padding: 25px 0;
-        position: sticky;
-        flex-shrink: 0;
-        align-self: flex-start;
-    }
-
-    @media (max-width: 992px) {
-        .sidebar {
-            order: 1;
-            position: relative;
-            top: initial;
-            padding: 0 15px;
-            margin-bottom: 20px;
-            width: 100%;
-        }
-    }
-
-</style>
+	@media (max-width: 992px) {
+		.sidebar {
+			order: 1;
+			position: relative;
+			top: initial;
+			padding: 0 15px;
+			margin-bottom: 20px;
+			width: 100%;
+		}
+	}
+</style>

package/dist/marketing/Docs/Toc.svelte

@@ -35,24 +35,22 @@ function handleMobileClick(e) {
 </script>
 
 <div class="wrap hds-box">
+	<div class="mobile">
+		<Button color="input" on:click={handleMobileClick}>
+			Table of Contents
+			<svelte:fragment slot="end">
+				{#if mobileShown}
+					<IconCaretDown size={14} />
+				{:else}
+					<IconCaretRight size={14} />
+				{/if}
+			</svelte:fragment>
+		</Button>
+	</div>
 
-    <div class="mobile">
-        <Button color="input" on:click={handleMobileClick}>
-            Table of Contents 
-            <svelte:fragment slot="end">
-                {#if mobileShown}
-                    <IconCaretDown size={14} />
-                {:else}
-                    <IconCaretRight size={14} />
-                {/if}
-            </svelte:fragment>
-        </Button>
-    </div>
-
-    <div class="toc-wrap" bind:this={tocElement}>
-        <Loader block padding={30} size="small" />
-    </div>
-
+	<div class="toc-wrap" bind:this={tocElement}>
+		<Loader block padding={30} size="small" />
+	</div>
 </div>
 
 <style>.wrap {
@@ -112,7 +110,7 @@ function handleMobileClick(e) {
   font-weight: 700;
 }
 .toc-wrap :global(.toc-link::before) {
-  background-color: #EEE;
+  background-color: #eee;
   content: " ";
   display: inline-block;
   height: inherit;
@@ -146,4 +144,4 @@ function handleMobileClick(e) {
   :global(.is-active-link::before) {
     background-color: #eee !important;
   }
-}</style>
+}</style>

package/dist/marketing/Document/Document.svelte

@@ -4,11 +4,11 @@ export let subtitle;
 </script>
 
 <section>
-    <div class="hds-container container">
-        <FeatureSectionTitle {title} />
-        <div class="date">{subtitle}</div>
-        <content><slot /></content>
-    </div>
+	<div class="hds-container container">
+		<FeatureSectionTitle {title} />
+		<div class="date">{subtitle}</div>
+		<content><slot /></content>
+	</div>
 </section>
 
 <style>* {

package/dist/marketing/Document/DocumentTitle.svelte

@@ -6,58 +6,58 @@ export let wrapStyle = void 0;
 </script>
 
 <div class="wrap document-title" style={wrapStyle}>
-    <h2 style={h2Style}>
-        {title}
-        {#if icon}
-            <div class="img-wrap">
-                <img src={icon} alt={title} />
-            </div>
-        {/if}
-    </h2>
+	<h2 style={h2Style}>
+		{title}
+		{#if icon}
+			<div class="img-wrap">
+				<img src={icon} alt={title} />
+			</div>
+		{/if}
+	</h2>
 
-    {#if subtitle}
-        <h3>{@html subtitle}</h3>
-    {/if}
+	{#if subtitle}
+		<h3>{@html subtitle}</h3>
+	{/if}
 </div>
 
 <style>
-    .wrap {
-        margin-top: 100px;
-    }
-    h2 {
-        font-size: 38px;
-        font-weight: 700;
-        margin-bottom: 10px;
-        margin-top: 20px;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    h3 {
-        font-size: 20px;
-        width: 650px;
-        max-width: 100%;
-        margin: 0 auto;
-        font-weight: normal;
-        line-height: 1.4;
-        text-align: center;
-    }
-    .img-wrap {
-        text-align: center;
-        margin-left: 20px;
-        display: inline-flex;
-        align-items: center;
-    }
-    img {
-        width: 85px;
-        height: 85px;
-    }
+	.wrap {
+		margin-top: 100px;
+	}
+	h2 {
+		font-size: 38px;
+		font-weight: 700;
+		margin-bottom: 10px;
+		margin-top: 20px;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	h3 {
+		font-size: 20px;
+		width: 650px;
+		max-width: 100%;
+		margin: 0 auto;
+		font-weight: normal;
+		line-height: 1.4;
+		text-align: center;
+	}
+	.img-wrap {
+		text-align: center;
+		margin-left: 20px;
+		display: inline-flex;
+		align-items: center;
+	}
+	img {
+		width: 85px;
+		height: 85px;
+	}
 
-    @media (max-width: 992px) {
-        h2 {
-            flex-direction: column-reverse;
-            gap: 15px;
-        }
-    }
+	@media (max-width: 992px) {
+		h2 {
+			flex-direction: column-reverse;
+			gap: 15px;
+		}
+	}
 </style>

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>