@hyvor/design 2.0.5 → 2.0.7

package/dist/cloud/CloudContext/CloudContext.svelte

@@ -4,7 +4,7 @@
 		incrementCloudContextId,
 		setCloudContext,
 		type CloudContext as CloudContextType
-	} from './cloudContext.svelte.js';
+	} from './cloudContextState.svelte.js';
 	import { onMount } from 'svelte';
 	import { track } from '../../marketing/index.js';
 

package/dist/cloud/CloudContext/CloudContext.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CloudContext as CloudContextType } from './cloudContext.svelte.js';
+import { type CloudContext as CloudContextType } from './cloudContextState.svelte.js';
 interface Props {
     context: CloudContextType;
     children: import('svelte').Snippet;

package/dist/cloud/HyvorBar/BarNotice/BarLicense.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCloudContext } from '../../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../../CloudContext/cloudContextState.svelte.js';
 	import Tag from '../../../components/Tag/Tag.svelte';
 	import Tooltip from '../../../components/Tooltip/Tooltip.svelte';
 	import IconBuilding from '@hyvor/icons/IconBuilding';

package/dist/cloud/HyvorBar/BarNotice/BarNotice.svelte

@@ -2,7 +2,7 @@
 	import { barHasFailedInvoices } from '../bar.js';
 	import { Tag, Tooltip } from '../../../components/index.js';
 	import IconExclamationCircle from '@hyvor/icons/IconExclamationCircle';
-	import { getCloudContext } from '../../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../../CloudContext/cloudContextState.svelte.js';
 
 	const { instance } = $derived(getCloudContext());
 </script>

package/dist/cloud/HyvorBar/BarProducts/BarProducts.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ActionList, ActionListItem, Dropdown } from '../../../components/index.js';
 	import IconGrid from '@hyvor/icons/IconGrid';
-	import { getCloudContext } from '../../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../../CloudContext/cloudContextState.svelte.js';
 	import { getProductsGroupedBySuite, getSuiteName } from './products.js';
 	import IconButton from '../../../components/IconButton/IconButton.svelte';
 	import ActionListGroup from '../../../components/ActionList/ActionListGroup.svelte';

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -20,7 +20,7 @@
 	import Trustpilot from './img/Trustpilot.svelte';
 	import { SOCIAL_LINKS } from '../../marketing/social.js';
 	import IconTwitterX from '@hyvor/icons/IconTwitterX';
-	import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 	import { PRODUCTS } from './BarProducts/products.js';
 
 	let supportDropdown = $state(false);

package/dist/cloud/HyvorBar/BarUpdatesList.svelte

@@ -11,7 +11,7 @@
 		Tag,
 		IconMessage
 	} from '../../components/index.js';
-	import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 
 	let updates: BarUpdate[] = $state([]);
 	let loading = $state(true);

package/dist/cloud/HyvorBar/BarUser.svelte

@@ -5,7 +5,7 @@
 	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
 	import ActionList from '../../components/ActionList/ActionList.svelte';
 	import ActionListItem from '../../components/ActionList/ActionListItem.svelte';
-	import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 
 	const cloudContext = $derived(getCloudContext());
 	const logoutUrl = `${cloudContext.instance}/account/logout`;

package/dist/cloud/HyvorBar/BarUserPicture.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import UserPicture from '../@components/UserPicture.svelte';
-	import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 
 	const { user } = $derived(getCloudContext());
 </script>

package/dist/cloud/HyvorBar/BarUserPreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 	import BarUserPicture from './BarUserPicture.svelte';
 
 	const { user } = $derived(getCloudContext());

package/dist/cloud/HyvorBar/HyvorBar.svelte

@@ -8,7 +8,7 @@
 	import BarNotice from './BarNotice/BarNotice.svelte';
 	import BarLicense from './BarNotice/BarLicense.svelte';
 	import BarOrganization from './Organization/BarOrganization.svelte';
-	import { cloudContextId, getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+	import { cloudContextId, getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 	import { PRODUCTS } from './BarProducts/products.js';
 
 	interface Props {

package/dist/cloud/HyvorBar/Organization/BarOrganization.svelte

@@ -3,7 +3,7 @@
 	import DropdownContent from '../../../components/Dropdown/DropdownContent.svelte';
 	import OrganizationSwitcher from '../../OrganizationSwitcher/OrganizationSwitcher.svelte';
 	import OrganizationCreator from '../../OrganizationCreator/OrganizationCreator.svelte';
-	import { getCloudContext } from '../../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext } from '../../CloudContext/cloudContextState.svelte.js';
 	import Tooltip from '../../../components/Tooltip/Tooltip.svelte';
 
 	let disableTooltip = $state(false);

package/dist/cloud/HyvorBar/bar.js

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 export const barUnreadUpdates = writable(0);
 export const barHasFailedInvoices = writable(false);
 export async function initBar() {

package/dist/cloud/OrganizationCreator/OrganizationCreator.svelte

@@ -6,13 +6,13 @@
 	import {
 		getCloudContext,
 		type CloudContextOrganization
-	} from '../CloudContext/cloudContext.svelte.js';
-	import { addToLoadedOrganizations } from '../OrganizationSwitcher/organizationSwitcher.svelte.js';
+	} from '../CloudContext/cloudContextState.svelte.js';
+	import { addToLoadedOrganizations } from '../OrganizationSwitcher/organizationSwitcherState.svelte.js';
 	import {
 		createOrganization,
 		getCreatorOpened,
 		setCreatorOpened
-	} from './organizationCreator.svelte.js';
+	} from './organizationCreatorState.svelte.js';
 
 	let name = $state('');
 	let input: HTMLInputElement | undefined = $state(undefined);

package/dist/cloud/OrganizationCreator/{organizationCreator.svelte.d.ts → organizationCreatorState.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { type CloudContextOrganization } from '../CloudContext/cloudContext.svelte.js';
+import { type CloudContextOrganization } from '../CloudContext/cloudContextState.svelte.js';
 export declare function getCreatorOpened(): boolean;
 export declare function setCreatorOpened(opened?: boolean): void;
 export declare function createOrganization(name: string): Promise<CloudContextOrganization>;

package/dist/cloud/OrganizationCreator/{organizationCreator.svelte.js → organizationCreatorState.svelte.js}

@@ -1,4 +1,4 @@
-import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 let creatorOpened = $state(false);
 export function getCreatorOpened() {
     return creatorOpened;

package/dist/cloud/OrganizationMembers/OrganizationMembersSearch.svelte

@@ -2,7 +2,10 @@
 	import { clickOutside, IconMessage, toast } from '../../components/index.js';
 	import Loader from '../../components/Loader/Loader.svelte';
 	import TextInput from '../../components/TextInput/TextInput.svelte';
-	import { getCloudContext, type OrganizationMember } from '../CloudContext/cloudContext.svelte.js';
+	import {
+		getCloudContext,
+		type OrganizationMember
+	} from '../CloudContext/cloudContextState.svelte.js';
 	import { searchMembers } from './members.js';
 	import { dropdownSlide } from '../../components/Dropdown/dropdownSlide.js';
 	import UserPicture from '../@components/UserPicture.svelte';

package/dist/cloud/OrganizationMembers/members.d.ts

@@ -1,2 +1,2 @@
-import { type OrganizationMember } from '../CloudContext/cloudContext.svelte.js';
+import { type OrganizationMember } from '../CloudContext/cloudContextState.svelte.js';
 export declare function searchMembers(search: string): Promise<OrganizationMember[]>;

package/dist/cloud/OrganizationMembers/members.js

@@ -1,4 +1,4 @@
-import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 export async function searchMembers(search) {
     const { instance, organization } = getCloudContext();
     const query = new URLSearchParams({

package/dist/cloud/OrganizationSwitcher/OrganizationSwitcher.svelte

@@ -10,13 +10,13 @@
 	import {
 		getCloudContext,
 		type CloudContextOrganization
-	} from '../CloudContext/cloudContext.svelte.js';
+	} from '../CloudContext/cloudContextState.svelte.js';
 	import {
 		getMyOrganizations,
 		getLoadedOrganizations,
 		switchOrganization
-	} from './organizationSwitcher.svelte.js';
-	import { setCreatorOpened } from '../OrganizationCreator/organizationCreator.svelte.js';
+	} from './organizationSwitcherState.svelte.js';
+	import { setCreatorOpened } from '../OrganizationCreator/organizationCreatorState.svelte.js';
 
 	let loading = $state(true);
 	let error = $state('');

package/dist/cloud/OrganizationSwitcher/{organizationSwitcher.svelte.d.ts → organizationSwitcherState.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { type CloudContextOrganization } from '../CloudContext/cloudContext.svelte.js';
+import { type CloudContextOrganization } from '../CloudContext/cloudContextState.svelte.js';
 export declare function getLoadedOrganizations(): CloudContextOrganization[] | undefined;
 export declare function addToLoadedOrganizations(org: CloudContextOrganization): void;
 export declare function getMyOrganizations(): Promise<CloudContextOrganization[]>;

package/dist/cloud/OrganizationSwitcher/{organizationSwitcher.svelte.js → organizationSwitcherState.svelte.js}

@@ -1,4 +1,4 @@
-import { getCloudContext } from '../CloudContext/cloudContext.svelte.js';
+import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 let loadedOrganizations = $state(undefined);
 export function getLoadedOrganizations() {
     return loadedOrganizations;

package/dist/cloud/ResourceCreator/ResourceCreator.svelte

@@ -6,15 +6,15 @@
 	import {
 		getCloudContext,
 		type CloudContextOrganization
-	} from '../CloudContext/cloudContext.svelte.js';
+	} from '../CloudContext/cloudContextState.svelte.js';
 	import OrganizationSwitcher from '../OrganizationSwitcher/OrganizationSwitcher.svelte';
 	import Accordian from './Accordian.svelte';
 	import TextInput from '../../components/TextInput/TextInput.svelte';
 	import SplitControl from '../../components/SplitControl/SplitControl.svelte';
 	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
-	import { createOrganization } from '../OrganizationCreator/organizationCreator.svelte.js';
+	import { createOrganization } from '../OrganizationCreator/organizationCreatorState.svelte.js';
 	import { toast } from '../../components/index.js';
-	import { addToLoadedOrganizations } from '../OrganizationSwitcher/organizationSwitcher.svelte.js';
+	import { addToLoadedOrganizations } from '../OrganizationSwitcher/organizationSwitcherState.svelte.js';
 	import FormControl from '../../components/FormControl/FormControl.svelte';
 	import Validation from '../../components/FormControl/Validation.svelte';
 

package/dist/cloud/ResourceCreator/ResourceCreator.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CloudContextOrganization } from '../CloudContext/cloudContext.svelte.js';
+import { type CloudContextOrganization } from '../CloudContext/cloudContextState.svelte.js';
 interface Props {
     children?: import('svelte').Snippet<[
         {

package/dist/cloud/index.d.ts

@@ -1,5 +1,5 @@
 export { default as CloudContext } from './CloudContext/CloudContext.svelte';
-export { getCloudContext, setCloudContext, type CloudContext as CloudContextType, type CloudContextUser, type CloudContextOrganization, type OrganizationRole, type OrganizationMember, type ResolvedLicense } from './CloudContext/cloudContext.svelte.js';
+export { getCloudContext, setCloudContext, type CloudContext as CloudContextType, type CloudContextUser, type CloudContextOrganization, type OrganizationRole, type OrganizationMember, type ResolvedLicense } from './CloudContext/cloudContextState.svelte.js';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';

package/dist/cloud/index.js

@@ -1,5 +1,5 @@
 export { default as CloudContext } from './CloudContext/CloudContext.svelte';
-export { getCloudContext, setCloudContext } from './CloudContext/cloudContext.svelte.js';
+export { getCloudContext, setCloudContext } from './CloudContext/cloudContextState.svelte.js';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';

package/dist/components/ActionList/ActionListItem.svelte

@@ -20,7 +20,7 @@
 	}
 
 	let {
-		selected = $bindable(false),
+		selected = $bindable(),
 		disabled = false,
 		type = 'default',
 		start,
@@ -30,8 +30,6 @@
 		...rest
 	}: Props = $props();
 
-	selected = selection() !== 'none' && selected;
-
 	const dispatch = createEventDispatcher();
 
 	function handleClick() {

package/dist/components/ActionList/Selected.svelte

@@ -4,13 +4,13 @@
 
 	interface Props {
 		selection: 'none' | 'single' | 'multi';
-		selected: boolean;
+		selected?: boolean | undefined;
 	}
 
-	let { selection, selected = $bindable(false) }: Props = $props();
+	let { selection, selected = $bindable() }: Props = $props();
 </script>
 
-{#if selection !== 'none'}
+{#if selection !== 'none' && selected !== undefined}
 	<span class="selected">
 		{#if selection === 'multi'}
 			<span style="transform:scale(0.9);transform-origin:top">

package/dist/components/ActionList/Selected.svelte.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     selection: 'none' | 'single' | 'multi';
-    selected: boolean;
+    selected?: boolean | undefined;
 }
 declare const Selected: import("svelte").Component<Props, {}, "selected">;
 type Selected = ReturnType<typeof Selected>;

package/dist/components/Button/Button.svelte

@@ -121,6 +121,7 @@
   font-weight: 600;
   font-size: 14px;
   border-radius: 20px;
+  line-height: 1;
   cursor: pointer;
   --local-hover-shadow-size: 2.5px;
   --local-hover-shadow-color: var(--accent-light);
@@ -160,8 +161,7 @@
 
 /* Sizes */
 .button.x-small {
-  height: 20px;
-  padding: 0 8px;
+  padding: 4px 8px;
   font-size: 12px;
   --local-hover-shadow-size: 1px;
 }
@@ -170,8 +170,7 @@
 }
 
 .button.small {
-  height: 26px;
-  padding: 0 12px;
+  padding: 6px 12px;
   --local-hover-shadow-size: 2px;
 }
 .button.small:active {
@@ -185,13 +184,11 @@
 }
 
 .button.medium {
-  height: 30px;
-  padding: 0 14px;
+  padding: 8px 14px;
 }
 
 .button.large {
-  height: 36px;
-  padding: 0 20px;
+  padding: 11px 20px;
   --local-hover-shadow-size: 3px;
 }
 .button.large:active {
@@ -199,8 +196,7 @@
 }
 
 .button.x-large {
-  height: 40px;
-  padding: 0 26px;
+  padding: 12px 26px;
   font-size: 16px;
 }
 

package/dist/components/ConsoleLoader/ConsoleLoader.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	interface Props {
+		logo: string;
+		size?: number;
+	}
+
+	let { logo, size = 100 }: Props = $props();
+</script>
+
+<div class="loader">
+	<div class="hyvor-icon">
+		<img src={logo} alt="Logo" width={size} height={size} />
+	</div>
+	<div class="shadow-wrap">
+		<div class="shadow" style="width: calc({size}px * 0.95); height: calc({size}px * 0.12);"></div>
+	</div>
+</div>
+
+<style>
+	@keyframes bounce {
+		0% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(-24px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes shadowPulse {
+		0%,
+		100% {
+			transform: scale(1.2);
+			opacity: 1;
+		}
+		50% {
+			transform: scale(0.8);
+			opacity: 0.4;
+		}
+	}
+
+	.loader {
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		inset: 0;
+	}
+
+	.hyvor-icon {
+		animation: bounce 1.2s infinite;
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.shadow-wrap {
+		height: 20px;
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.shadow {
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+		filter: blur(8px);
+		will-change: transform, opacity;
+		animation: shadowPulse 1.2s infinite;
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    logo: string;
+    size?: number;
+}
+declare const ConsoleLoader: import("svelte").Component<Props, {}, "">;
+type ConsoleLoader = ReturnType<typeof ConsoleLoader>;
+export default ConsoleLoader;

package/dist/components/FileUploader/FileUploader.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import IconCardImage from '@hyvor/icons/IconCardImage';
 	import IconCaretLeft from '@hyvor/icons/IconCaretLeft';
 	import IconCloudUpload from '@hyvor/icons/IconCloudUpload';
 	import Button from '../Button/Button.svelte';
@@ -46,8 +45,8 @@
 						Back
 					</Button>
 				{:else}
-					<TabNav bind:active={tab}>
-						<TabNavItem name="upload">
+					<TabNav>
+						<TabNavItem name="upload" active>
 							{#snippet start()}
 								<IconCloudUpload />
 							{/snippet}

package/dist/components/TabNav/TabNav.svelte

@@ -1,31 +1,23 @@
 <script lang="ts">
-	import { onMount, setContext } from 'svelte';
-	import { writable } from 'svelte/store';
+	import { setContext } from 'svelte';
 
 	interface Props {
-		active: string;
+		basePath?: string;
+		replaceState?: boolean;
 		children?: import('svelte').Snippet;
-		[key: string]: any;
 	}
 
-	let { active = $bindable(), children, ...rest }: Props = $props();
+	let { children, basePath, replaceState = false }: Props = $props();
 
-	const activeStore = writable(active);
-	setContext('tab-nav-active', activeStore);
+	const tabNavState = {
+		basePath,
+		replaceState
+	};
 
-	$effect(() => {
-		activeStore.set(active);
-	});
-
-	onMount(() => {
-		const unsubscribe = activeStore.subscribe((value) => {
-			active = value;
-		});
-		return unsubscribe;
-	});
+	setContext('tab-nav-state', tabNavState);
 </script>
 
-<div class="tab-nav" {...rest}>
+<div class="tab-nav">
 	{@render children?.()}
 </div>
 

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

@@ -1,8 +1,8 @@
 interface Props {
-    active: string;
+    basePath?: string;
+    replaceState?: boolean;
     children?: import('svelte').Snippet;
-    [key: string]: any;
 }
-declare const TabNav: import("svelte").Component<Props, {}, "active">;
+declare const TabNav: import("svelte").Component<Props, {}, "">;
 type TabNav = ReturnType<typeof TabNav>;
 export default TabNav;

package/dist/components/TabNav/TabNavItem.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { createBubbler, handlers } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { getContext } from 'svelte';
-	import type { Writable } from 'svelte/store';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import type { TabNavState } from './tabnav.js';
 
 	interface Props {
 		active?: boolean;
@@ -11,26 +10,40 @@
 		start?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
-		[key: string]: any;
+		index?: boolean; // index for path-based activation
+
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let { active = false, name, start, children, end, index, onclick }: Props = $props();
+
+	const tabNavState = getContext('tab-nav-state') as TabNavState;
+
+	function getTabPath() {
+		if (!tabNavState.basePath) return '';
+		return index ? `${tabNavState.basePath}` : `${tabNavState.basePath}/${name}`;
 	}
 
-	let { active = false, name, start, children, end, ...rest }: Props = $props();
+	let isActive = $derived.by(() => {
+		if (active) return true;
 
-	const activeStore = getContext('tab-nav-active') as Writable<string>;
+		if (tabNavState.basePath) {
+			const currentUrl = page.url.pathname;
+			return currentUrl === getTabPath();
+		}
 
-	let isActive = $derived($activeStore === name || active);
+		return false;
+	});
 
-	function handleClick() {
-		activeStore.set(name);
+	function handleClick(event: MouseEvent) {
+		if (tabNavState.basePath) {
+			goto(getTabPath());
+		}
+		onclick?.(event);
 	}
 </script>
 
-<button
-	class="tab"
-	class:active={isActive}
-	onclick={handlers(handleClick, bubble('click'))}
-	{...rest}
->
+<button class="tab" class:active={isActive} onclick={handleClick}>
 	{#if start}
 		<span class="start">
 			{@render start?.()}

package/dist/components/TabNav/TabNavItem.svelte.d.ts

@@ -4,7 +4,8 @@ interface Props {
     start?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
     end?: import('svelte').Snippet;
-    [key: string]: any;
+    index?: boolean;
+    onclick?: (event: MouseEvent) => void;
 }
 declare const TabNavItem: import("svelte").Component<Props, {}, "">;
 type TabNavItem = ReturnType<typeof TabNavItem>;

package/dist/components/TabNav/tabnav.d.ts

@@ -0,0 +1,4 @@
+export interface TabNavState {
+    basePath: string | undefined;
+    replaceState: boolean;
+}

package/dist/components/TabNav/tabnav.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as DetailCard } from './DetailCard/DetailCard.svelte';

package/dist/components/index.js

@@ -14,6 +14,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as DetailCard } from './DetailCard/DetailCard.svelte';

package/package.json

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