@hyvor/design 2.0.12 → 2.0.16

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -12,7 +12,6 @@
 	import IconDiscord from '@hyvor/icons/IconDiscord';
 	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
 	import IconFileEarmark from '@hyvor/icons/IconFileEarmark';
-	import IconChatDots from '@hyvor/icons/IconChatDots';
 	import IconBluesky from '@hyvor/icons/IconBluesky';
 	import IconLinkedin from '@hyvor/icons/IconLinkedin';
 	import type { BarConfig } from './bar.js';
@@ -34,14 +33,6 @@
 
 	const cloudContext = $derived(getCloudContext());
 
-	function openLiveChat(e: any) {
-		e.preventDefault();
-		if ((window as any).$crisp) {
-			(window as any).$crisp.push(['do', 'chat:open']);
-		}
-		supportDropdown = false;
-	}
-
 	function getName() {
 		if (config.name) {
 			return config.name;
@@ -107,19 +98,6 @@
 					</ActionListItem>
 				</a>
 			{/if}
-			{#if config.chat}
-				<a href="/chat" onclick={openLiveChat}>
-					<ActionListItem>
-						Live Chat
-						{#snippet description()}
-							<div>Chat with our team</div>
-						{/snippet}
-						{#snippet start()}
-							<IconChatDots />
-						{/snippet}
-					</ActionListItem>
-				</a>
-			{/if}
 
 			<ActionListGroup title="Social">
 				<a href={SOCIAL_LINKS.discord} target="_blank">

package/dist/components/ConsoleLoader/ConsoleLoader.svelte

@@ -4,7 +4,7 @@
 		size?: number;
 	}
 
-	let { logo, size = 100 }: Props = $props();
+	let { logo, size = 80 }: Props = $props();
 </script>
 
 <div class="loader">

package/dist/components/Kbd/Kbd.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	type ModKey = 'mod' | 'ctrl' | 'alt' | 'shift' | 'meta';
+
+	const PLATFORM_LABELS: Record<ModKey, { mac: string; other: string }> = {
+		mod: { mac: '⌘', other: 'Ctrl' },
+		ctrl: { mac: '⌃', other: 'Ctrl' },
+		alt: { mac: '⌥', other: 'Alt' },
+		shift: { mac: '⇧', other: 'Shift' },
+		meta: { mac: '⌘', other: 'Win' }
+	};
+
+	const MAC_ARIA: Record<ModKey, string> = {
+		mod: 'Command',
+		ctrl: 'Control',
+		alt: 'Option',
+		shift: 'Shift',
+		meta: 'Command'
+	};
+
+	// Canonical Mac modifier order: Control → Option → Shift → Command
+	const MOD_ORDER: ModKey[] = ['ctrl', 'alt', 'shift', 'meta', 'mod'];
+	const MOD_SET = new Set<string>(MOD_ORDER);
+
+	interface Props {
+		keys: string | string[];
+		size?: 'small' | 'medium' | 'large' | (string & {});
+		[key: string]: any;
+	}
+
+	let { keys, size = 'small', ...rest }: Props = $props();
+
+	const PREDEFINED_SIZES = ['small', 'medium', 'large'];
+	let sizeClass = $derived(PREDEFINED_SIZES.includes(size) ? `size-${size}` : '');
+	let sizeStyle = $derived(!PREDEFINED_SIZES.includes(size) ? `font-size: ${size};` : undefined);
+
+	let isMac = $state(false);
+
+	onMount(() => {
+		const platform = (navigator as any).userAgentData?.platform ?? navigator.platform ?? '';
+		isMac = /mac/i.test(platform);
+	});
+
+	function keyLabel(key: string, mac: boolean): string {
+		const lower = key.toLowerCase();
+		if (MOD_SET.has(lower)) {
+			return mac ? PLATFORM_LABELS[lower as ModKey].mac : PLATFORM_LABELS[lower as ModKey].other;
+		}
+		return key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1);
+	}
+
+	function keyAria(key: string, mac: boolean): string {
+		const lower = key.toLowerCase();
+		if (MOD_SET.has(lower)) {
+			return mac ? MAC_ARIA[lower as ModKey] : PLATFORM_LABELS[lower as ModKey].other;
+		}
+		return key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1);
+	}
+
+	function sortKeys(keyArr: string[]): string[] {
+		const mods = MOD_ORDER.filter((m) => keyArr.some((k) => k.toLowerCase() === m));
+		const regular = keyArr.filter((k) => !MOD_SET.has(k.toLowerCase()));
+		return [...mods, ...regular];
+	}
+
+	let keyArray = $derived(Array.isArray(keys) ? keys : [keys]);
+	let sorted = $derived(sortKeys(keyArray));
+
+	let display = $derived(
+		isMac
+			? sorted.map((k) => keyLabel(k, true)).join('')
+			: sorted.map((k) => keyLabel(k, false)).join(' + ')
+	);
+
+	let ariaLabel = $derived(sorted.map((k) => keyAria(k, isMac)).join(' plus '));
+</script>
+
+<kbd aria-label={ariaLabel} class={sizeClass} style={sizeStyle} {...rest}>{display}</kbd>
+
+<style>kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  line-height: 1;
+  background-color: var(--hover-dark);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  color: var(--text);
+  white-space: nowrap;
+}
+kbd.size-small {
+  font-size: 0.7em;
+  min-width: 1.6em;
+  padding: 2px 5px;
+}
+kbd.size-medium {
+  font-size: 0.85em;
+  min-width: 1.8em;
+  padding: 3px 7px;
+}
+kbd.size-large {
+  font-size: 1em;
+  min-width: 2em;
+  padding: 4px 9px;
+}</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    keys: string | string[];
+    size?: 'small' | 'medium' | 'large' | (string & {});
+    [key: string]: any;
+}
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/Modal/Modal.svelte

@@ -18,6 +18,7 @@
 		closeOnEscape?: boolean;
 		loading?: boolean | string;
 		onclose?: () => void;
+		hasClose?: boolean | string;
 
 		footer?: Footer | Snippet;
 		children?: Snippet;
@@ -33,6 +34,7 @@
 		closeOnEscape = true,
 		loading = false,
 		onclose,
+		hasClose = true,
 		footer,
 		children
 	}: Props = $props();
@@ -89,14 +91,12 @@
 		role="presentation"
 		class="wrap"
 		bind:this={wrapEl}
-		in:fade={{ duration: 100 }}
-		out:fade={{ duration: 100 }}
+		transition:fade|global={{ duration: 100 }}
 		onclick={(e) => handleClose(e)}
 	>
 		<div
 			class="inner {size}"
-			in:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
-			out:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
+			transition:scale|global={{ duration: 100, start: 0.9, opacity: 0.9 }}
 			bind:this={innerEl}
 			{role}
 			aria-modal="true"
@@ -113,9 +113,11 @@
 				</div>
 
 				<div class="close-wrap">
-					<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
-						<IconX size={25} />
-					</IconButton>
+					{#if hasClose}
+						<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
+							<IconX size={25} />
+						</IconButton>
+					{/if}
 				</div>
 			</div>
 

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

@@ -10,6 +10,7 @@ interface Props {
     closeOnEscape?: boolean;
     loading?: boolean | string;
     onclose?: () => void;
+    hasClose?: boolean | string;
     footer?: Footer | Snippet;
     children?: Snippet;
 }

package/dist/components/NavLink/NavLink.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { legacyHandlers } from '../../legacy.js';
+	import { getContext } from 'svelte';
 	import { createBubbler } from 'svelte/legacy';
 
 	const bubble = createBubbler();
@@ -10,27 +12,61 @@
 		start?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
+
+		onkeyup?: (event: KeyboardEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		onkeypress?: (event: KeyboardEvent) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+		onclick?: (event: MouseEvent) => void;
+		onmouseover?: (event: MouseEvent) => void;
+		onmouseenter?: (event: MouseEvent) => void;
+		onmouseleave?: (event: MouseEvent) => void;
+		onchange?: (event: Event) => void;
+
 		[key: string]: any;
 	};
 
-	let { href, active = false, disabled = false, start, children, end, ...rest }: Props = $props();
+	const isNavLinkGroup = !!getContext('navlink-group');
+
+	let {
+		href,
+		active = false,
+		disabled = false,
+		start,
+		children,
+		end,
+		onkeyup,
+		onkeydown,
+		onkeypress,
+		onfocus,
+		onblur,
+		onclick,
+		onmouseover,
+		onmouseenter,
+		onmouseleave,
+		onchange,
+		...rest
+	}: Props = $props();
 </script>
 
 <a
 	{href}
 	{...rest}
+	class="nav-link"
 	class:active
 	class:disabled
-	onkeyup={bubble('keyup')}
-	onkeydown={bubble('keydown')}
-	onkeypress={bubble('keypress')}
-	onfocus={bubble('focus')}
-	onblur={bubble('blur')}
-	onclick={bubble('click')}
-	onmouseover={bubble('mouseover')}
-	onmouseenter={bubble('mouseenter')}
-	onmouseleave={bubble('mouseleave')}
-	onchange={bubble('change')}
+	class:group={isNavLinkGroup}
+	onkeyup={legacyHandlers(onkeyup, bubble('keyup'))}
+	onkeydown={legacyHandlers(onkeydown, bubble('keydown'))}
+	onkeypress={legacyHandlers(onkeypress, bubble('keypress'))}
+	onfocus={legacyHandlers(onfocus, bubble('focus'))}
+	onblur={legacyHandlers(onblur, bubble('blur'))}
+	onclick={legacyHandlers(onclick, bubble('click'))}
+	onmouseover={legacyHandlers(onmouseover, bubble('mouseover'))}
+	onmouseenter={legacyHandlers(onmouseenter, bubble('mouseenter'))}
+	onmouseleave={legacyHandlers(onmouseleave, bubble('mouseleave'))}
+	onchange={legacyHandlers(onchange, bubble('change'))}
 >
 	{#if start}
 		<span class="start">
@@ -52,6 +88,7 @@
 <style>
 	a {
 		display: flex;
+		width: 100%;
 		padding: 12px 29px;
 		font-size: 14px;
 		letter-spacing: 0.3px;
@@ -60,16 +97,16 @@
 		align-items: center;
 	}
 
-	a:hover {
+	a:hover:not(.group) {
 		background-color: var(--hover);
 	}
 
-	a.active {
+	a.active:not(.group) {
 		background-color: var(--accent-lightest);
 		border-left: 3px solid var(--accent);
 	}
 
-	:global(:root.dark) a.active {
+	:global(:root.dark) a.active:not(.group) {
 		background-color: color-mix(in srgb, var(--accent-lightest), transparent 80%);
 	}
 

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

@@ -5,6 +5,16 @@ type Props = {
     start?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
     end?: import('svelte').Snippet;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeypress?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+    onmouseover?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onchange?: (event: Event) => void;
     [key: string]: any;
 };
 declare const NavLink: import("svelte").Component<Props, {}, "">;

package/dist/components/NavLink/NavLinkGroup.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { setContext, onMount, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props {
+		children: Snippet;
+		activeBackground?: string;
+		activeBorderColor?: string;
+		hoverBackground?: string;
+		wrapProps?: HTMLAttributes<HTMLElement>;
+	}
+
+	let {
+		children,
+		activeBackground = 'var(--accent-lightest)',
+		activeBorderColor = 'var(--accent)',
+		hoverBackground = 'var(--hover)',
+		wrapProps = {}
+	}: Props = $props();
+
+	setContext('navlink-group', true);
+
+	let container: HTMLDivElement;
+	let indicator: HTMLDivElement;
+	let hoverIndicator: HTMLDivElement;
+	let visible = $state(false);
+	let hoverVisible = $state(false);
+	let firstRender = true;
+	let hoverFirstRender = true;
+	let hoverTarget: HTMLElement | null = null;
+
+	function positionIndicator(el: HTMLDivElement, target: HTMLElement, instant: boolean) {
+		const rect = target.getBoundingClientRect();
+
+		el.style.transition = instant ? 'none' : '';
+		el.style.top = `${rect.top}px`;
+		el.style.left = `${rect.left}px`;
+		el.style.width = `${rect.width}px`;
+		el.style.height = `${rect.height}px`;
+	}
+
+	function updateIndicator(instant = false) {
+		if (!container || !indicator) return;
+
+		const activeLink = container.querySelector<HTMLElement>('.nav-link.active');
+
+		if (!activeLink) {
+			visible = false;
+			return;
+		}
+
+		positionIndicator(indicator, activeLink, firstRender || instant);
+		visible = true;
+
+		if (firstRender) {
+			firstRender = false;
+		}
+	}
+
+	function updateHoverIndicator(target: HTMLElement | null, instant = false) {
+		if (!hoverIndicator) return;
+
+		if (!target || target.classList.contains('active') || target.classList.contains('disabled')) {
+			hoverVisible = false;
+			return;
+		}
+
+		positionIndicator(hoverIndicator, target, hoverFirstRender || instant);
+		hoverVisible = true;
+
+		if (hoverFirstRender) {
+			hoverFirstRender = false;
+		}
+	}
+
+	function onMouseOver(event: MouseEvent) {
+		hoverTarget = (event.target as HTMLElement).closest<HTMLElement>('.nav-link');
+		updateHoverIndicator(hoverTarget);
+	}
+
+	function onMouseLeave() {
+		hoverTarget = null;
+		hoverVisible = false;
+	}
+
+	function onScrollOrResize() {
+		updateIndicator(true);
+
+		if (hoverVisible && hoverTarget) {
+			updateHoverIndicator(hoverTarget, true);
+		}
+	}
+
+	onMount(() => {
+		updateIndicator();
+
+		const observer = new MutationObserver(() => updateIndicator());
+		observer.observe(container, {
+			attributes: true,
+			attributeFilter: ['class'],
+			subtree: true
+		});
+
+		container.addEventListener('mouseover', onMouseOver);
+		container.addEventListener('mouseleave', onMouseLeave);
+
+		window.addEventListener('resize', onScrollOrResize);
+		window.addEventListener('scroll', onScrollOrResize, true);
+
+		return () => {
+			observer.disconnect();
+			container.removeEventListener('mouseover', onMouseOver);
+			container.removeEventListener('mouseleave', onMouseLeave);
+			window.removeEventListener('resize', onScrollOrResize);
+			window.removeEventListener('scroll', onScrollOrResize, true);
+		};
+	});
+</script>
+
+<div
+	class="nav-link-group"
+	bind:this={container}
+	style:--nlg-active-bg={activeBackground}
+	style:--nlg-active-border={activeBorderColor}
+	style:--nlg-hover-bg={hoverBackground}
+	{...wrapProps}
+>
+	<div
+		class="nav-link-group-indicator hover"
+		class:visible={hoverVisible}
+		bind:this={hoverIndicator}
+	></div>
+	<div class="nav-link-group-indicator active" class:visible bind:this={indicator}></div>
+	{@render children?.()}
+</div>
+
+<style>
+	.nav-link-group {
+		position: relative;
+		z-index: 0;
+		width: 100%;
+	}
+
+	.nav-link-group-indicator {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 0;
+		height: 0;
+		pointer-events: none;
+		opacity: 0;
+		z-index: 0;
+		transition:
+			top 0.2s ease,
+			left 0.2s ease,
+			width 0.2s ease,
+			height 0.2s ease,
+			opacity 0.2s ease;
+	}
+
+	.nav-link-group-indicator.visible {
+		opacity: 1;
+	}
+
+	.nav-link-group-indicator.active {
+		background-color: var(--nlg-active-bg);
+		border-left: 3px solid var(--nlg-active-border);
+	}
+
+	.nav-link-group-indicator.hover {
+		z-index: 0;
+		background-color: var(--nlg-hover-bg);
+		transition:
+			top 0.1s ease,
+			left 0.1s ease,
+			width 0.1s ease,
+			height 0.1s ease,
+			opacity 0.1s ease;
+	}
+
+	:global(:root.dark) .nav-link-group-indicator.active {
+		background-color: color-mix(in srgb, var(--nlg-active-bg), transparent 80%);
+	}
+
+	:global(.nav-link.group) {
+		position: relative;
+		z-index: 1;
+	}
+</style>

package/dist/components/NavLink/NavLinkGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    children: Snippet;
+    activeBackground?: string;
+    activeBorderColor?: string;
+    hoverBackground?: string;
+    wrapProps?: HTMLAttributes<HTMLElement>;
+}
+declare const NavLinkGroup: import("svelte").Component<Props, {}, "">;
+type NavLinkGroup = ReturnType<typeof NavLinkGroup>;
+export default NavLinkGroup;

package/dist/components/TernaryStatus/TernaryStatus.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import IconXCircleFill from '@hyvor/icons/IconXCircleFill';
+	import IconDashCircleFill from '@hyvor/icons/IconDashCircleFill';
+
+	interface Props {
+		status: 'positive' | 'negative' | 'neutral';
+		text?: string;
+		iconSize?: number;
+		fontSize?: string;
+		color?: string;
+		icon?: Snippet | false;
+	}
+
+	let {
+		status,
+		text = undefined,
+		iconSize = 20,
+		fontSize = undefined,
+		color = undefined,
+		icon = undefined
+	}: Props = $props();
+
+	let resolvedText = $derived(
+		text ?? (status === 'positive' ? 'Yes' : status === 'negative' ? 'No' : '')
+	);
+
+	let resolvedColor = $derived(
+		color ??
+			(status === 'positive'
+				? 'var(--green)'
+				: status === 'negative'
+					? 'var(--red)'
+					: 'var(--text-light)')
+	);
+</script>
+
+<span class="ternary-status" style:color={resolvedColor} style:font-size={fontSize}>
+	{#if icon !== false}
+		<span class="icon">
+			{#if icon}
+				{@render icon()}
+			{:else if status === 'positive'}
+				<IconCheckCircleFill size={iconSize} />
+			{:else if status === 'negative'}
+				<IconXCircleFill size={iconSize} />
+			{:else}
+				<IconDashCircleFill size={iconSize} />
+			{/if}
+		</span>
+	{/if}
+	{#if resolvedText}
+		<span class="text">{resolvedText}</span>
+	{/if}
+</span>
+
+<style>
+	.ternary-status {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.icon {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    status: 'positive' | 'negative' | 'neutral';
+    text?: string;
+    iconSize?: number;
+    fontSize?: string;
+    color?: string;
+    icon?: Snippet | false;
+}
+declare const TernaryStatus: import("svelte").Component<Props, {}, "">;
+type TernaryStatus = ReturnType<typeof TernaryStatus>;
+export default TernaryStatus;

package/dist/components/index.d.ts

@@ -30,12 +30,14 @@ export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
 export { uploadFile, type FileUploaderConfig, type UploadedFile as FileUploaderUploadedFile, type SelectedFile as FileUploaderSelectedFile } from './FileUploader/file-uploader.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';
+export { default as Kbd } from './Kbd/Kbd.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as LoadButton } from './Loader/LoadButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
+export { default as NavLinkGroup } from './NavLink/NavLinkGroup.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
@@ -47,6 +49,7 @@ export { default as TableCell } from './Table/TableCell.svelte';
 export { default as TabNav } from './TabNav/TabNav.svelte';
 export { default as TabNavItem } from './TabNav/TabNavItem.svelte';
 export { default as Tag } from './Tag/Tag.svelte';
+export { default as TernaryStatus } from './TernaryStatus/TernaryStatus.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';

package/dist/components/index.js

@@ -30,12 +30,14 @@ export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
 export { uploadFile } from './FileUploader/file-uploader.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';
+export { default as Kbd } from './Kbd/Kbd.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as LoadButton } from './Loader/LoadButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
+export { default as NavLinkGroup } from './NavLink/NavLinkGroup.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
@@ -47,6 +49,7 @@ export { default as TableCell } from './Table/TableCell.svelte';
 export { default as TabNav } from './TabNav/TabNav.svelte';
 export { default as TabNavItem } from './TabNav/TabNavItem.svelte';
 export { default as Tag } from './Tag/Tag.svelte';
+export { default as TernaryStatus } from './TernaryStatus/TernaryStatus.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';

package/dist/variables.scss

@@ -22,11 +22,11 @@
     * In most cases, no need to extend these colors
     */
 	--green-light: #cadfca;
-	--green: #5d995d;
+	--green: #4b874b;
 	--green-dark: #335c33;
 
 	--red-dark: #ab2525;
-	--red: #db7474;
+	--red: #c05959;
 	--red-light: #ffdfdf;
 
 	--blue-dark: #334b81;
@@ -34,7 +34,7 @@
 	--blue-light: #dae5ff;
 
 	--orange-dark: #8b5b04;
-	--orange: #e2b500;
+	--orange: #a98526;
 	--orange-light: #efe3b4;
 
 	--gray-light: #ddd;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.0.12",
+	"version": "2.0.16",
 	"license": "MIT",
 	"private": false,
 	"repository": {