@softwareone/spi-sv5-library 1.0.0 → 1.2.0

package/dist/Search/Search.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = {
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		onclear?: () => void;
+	} & Omit<HTMLInputAttributes, 'value' | 'type'>;
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Search',
+		disabled = false,
+		onclear,
+		...props
+	}: Props = $props();
+
+	const hasValue = $derived(!!value);
+
+	const handleClear = (event: Event) => {
+		event.stopPropagation();
+		value = '';
+		onclear?.();
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && hasValue) {
+			handleClear(event);
+			event.preventDefault();
+		}
+	};
+</script>
+
+<div class="search-container" class:disabled>
+	<div class="search-wrapper">
+		<span class="material-icons-outlined search-icon" aria-hidden="true">search</span>
+		<input
+			type="search"
+			class="search-input"
+			bind:value
+			{placeholder}
+			{disabled}
+			onkeydown={handleKeydown}
+			{...props}
+		/>
+
+		{#if hasValue && !disabled}
+			<button type="button" class="clear-button" onclick={handleClear} aria-label="Clear search">
+				<span class="material-icons-outlined" aria-hidden="true">close</span>
+			</button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.search-container {
+		position: relative;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.search-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border-radius: 8px;
+		border: 1px solid #6b7180;
+		background: #fff;
+		transition:
+			border-color 0.2s ease-in-out,
+			box-shadow 0.2s ease-in-out;
+	}
+
+	.search-wrapper:hover:not(:has(.search-input:disabled)),
+	.search-wrapper:focus-within {
+		border-color: #472aff;
+	}
+
+	.search-wrapper:focus-within {
+		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.search-input {
+		width: 100%;
+		padding: 8px 40px 8px 40px;
+		border: none;
+		background: transparent;
+		font-size: 14px;
+		color: #000;
+	}
+
+	.search-input:focus {
+		outline: none;
+	}
+
+	.search-input::placeholder {
+		color: #6b7180;
+	}
+
+	.search-input::-webkit-search-cancel-button,
+	.search-input::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+
+	.search-icon,
+	.clear-button {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		color: #6b7180;
+		font-size: 18px;
+	}
+
+	.search-icon {
+		left: 12px;
+		pointer-events: none;
+	}
+
+	.clear-button {
+		right: 12px;
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		border-radius: 4px;
+		transition:
+			color 0.2s ease-in-out,
+			background-color 0.2s ease-in-out;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.clear-button:hover,
+	.clear-button:focus {
+		color: #000;
+		outline: none;
+	}
+
+	.clear-button span {
+		font-size: 16px;
+	}
+
+	.disabled .search-wrapper {
+		border-color: #d1d5db;
+		background-color: #f3f4f6;
+	}
+
+	.disabled .search-input {
+		color: #6b7180;
+		cursor: not-allowed;
+	}
+
+	@media (max-width: 640px) {
+		.search-input {
+			font-size: 16px;
+		}
+	}
+</style>

package/dist/Search/Search.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onclear?: () => void;
+} & Omit<HTMLInputAttributes, 'value' | 'type'>;
+declare const Search: import("svelte").Component<Props, {}, "value">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/Spinner/Spinner.svelte

@@ -1,54 +1,43 @@
 <script lang="ts">
 	interface SpinnerProps {
-		size?: 'small' | 'medium' | 'large';
+		show: boolean;
+		size?: 'sm' | 'md' | 'lg';
 	}
 
-	let { size }: SpinnerProps = $props();
+	let { show = $bindable(false), size = 'lg' }: SpinnerProps = $props();
 
-	size = size || 'large';
-
-	const sizes = {
-		small: {
-			pxsize: '16px',
-			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4.2005 8C4.2005 10.0984 5.90159 11.7995 8 11.7995C10.0984 11.7995 11.7995 10.0984 11.7995 8C11.7995 5.90159 10.0984 4.2005 8 4.2005C5.90159 4.2005 4.2005 5.90159 4.2005 8Z" fill="#E0E5E8"/>
-  <path d="M8 13.8998C8 15.0597 8.95609 16.027 10.0763 15.7259C11.4189 15.365 12.6567 14.657 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.6567 1.34297 11.4189 0.634982 10.0763 0.274108C8.95609 -0.0269669 8 0.940313 8 2.10025C8 3.26019 9.00775 4.15735 9.99495 4.76635C10.244 4.91998 10.4764 5.10307 10.6867 5.31335C11.3992 6.02589 11.7995 6.99231 11.7995 8C11.7995 9.00769 11.3992 9.97411 10.6867 10.6867C10.4764 10.8969 10.244 11.08 9.99495 11.2336C9.00775 11.8427 8 12.7398 8 13.8998Z" fill="#472AFF"/>
-</svg>`
-		},
-		medium: {
-			pxsize: '33px',
-			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
-  <path d="M33 16.5C33 25.6127 25.6127 33 16.5 33C7.3873 33 0 25.6127 0 16.5C0 7.3873 7.3873 0 16.5 0C25.6127 0 33 7.3873 33 16.5ZM3.4924 16.5C3.4924 23.6839 9.3161 29.5076 16.5 29.5076C23.6839 29.5076 29.5076 23.6839 29.5076 16.5C29.5076 9.3161 23.6839 3.4924 16.5 3.4924C9.3161 3.4924 3.4924 9.3161 3.4924 16.5Z" fill="#E0E5E8"/>
-  <path d="M16.5 31.2538C16.5 32.2182 17.2841 33.0096 18.2431 32.9077C21.9784 32.511 25.4865 30.848 28.1673 28.1673C31.2616 25.0729 33 20.8761 33 16.5C33 12.1239 31.2616 7.92709 28.1673 4.83274C25.4865 2.15202 21.9784 0.488977 18.2431 0.0922724C17.2841 -0.00957781 16.5 0.781801 16.5 1.7462C16.5 2.7106 17.2853 3.48033 18.2411 3.6094C21.048 3.98847 23.6725 5.27693 25.6978 7.30224C28.1372 9.74164 29.5076 13.0502 29.5076 16.5C29.5076 19.9498 28.1372 23.2584 25.6978 25.6978C23.6725 27.7231 21.048 29.0115 18.2411 29.3906C17.2853 29.5197 16.5 30.2894 16.5 31.2538Z" fill="#472AFF"/>
-</svg>`
-		},
-		large: {
-			pxsize: '40px',
-			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
-  <path d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z" fill="#E0E5E8"/>
-  <path d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z" fill="#472AFF"/>
-</svg>`
-		}
+	const pixelSizes: Record<string, number> = {
+		sm: 16,
+		md: 33,
+		lg: 40
 	};
-
-	let pxsize = $state(sizes[size].pxsize);
-	let svg = $state(sizes[size].svg);
 </script>
 
+{#if show}
 <div class="spinner-container">
-	<div class="spinner" style="width: {pxsize}; height: {pxsize};">
-		{@html svg}
+	<div class="spinner" style="width: {pixelSizes[size]}px; height: {pixelSizes[size]}px;">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
+			<path
+				d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z"
+				fill="#E0E5E8"
+			/>
+			<path
+				d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z"
+				fill="#472AFF"
+			/>
+		</svg>
 	</div>
 </div>
+{/if}
 
 <style>
 	.spinner-container {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 100vw;
-		height: 100vh;
-		position: fixed;
+		width: 100%;
+		height: 100%;
+		position: absolute;
 		top: 0;
 		left: 0;
 		background-color: rgba(255, 255, 255, 0.8);

package/dist/Spinner/Spinner.svelte.d.ts

@@ -1,6 +1,7 @@
 interface SpinnerProps {
-    size?: 'small' | 'medium' | 'large';
+    show: boolean;
+    size?: 'sm' | 'md' | 'lg';
 }
-declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "show">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

package/dist/Toast/Toast.svelte

@@ -1,47 +1,47 @@
 <script lang="ts">
-	import { fly } from 'svelte/transition';
 	import { linear } from 'svelte/easing';
-	import { getToast } from './toastState.svelte';
+	import { fly, type FlyParams } from 'svelte/transition';
+
+	import { deleteToastById, getToast } from './toastState.svelte.js';
 
 	interface ToastProps {
 		duration?: number;
 	}
 
-	let { duration }:ToastProps = $props();
+	let { duration }: ToastProps = $props();
 
-	const toast = getToast(duration);
+	const TRANSITION_DURATION = 100;
+	const VERTICAL_DISTANCE = 8;
 
-	const getToastColor = (type: string): string => {
-		const colors: Record<string, string> = {
-			info: '#472AFF',
-			warning: '#E87D1E',
-			danger: '#DC182C',
-			neutral: '#6B7180',
-			success: '#008556'
-		};
-		return colors[type] || '#6B7180'; // Default to neutral if type is unknown
+	const transitionConfig: FlyParams = {
+		duration: TRANSITION_DURATION,
+		easing: linear,
+		y: VERTICAL_DISTANCE
 	};
 
+	const toastNotifications = getToast(duration);
 </script>
 
-{#if toast.msg.length > 0}
-	<div class="toast-container" in:fly={{ y: 100, duration: 100, easing: linear }} out:fly={{ y: 100, duration: 100, easing: linear }}>
-		{#each toast.msg as msg}
-			<div class="toast" in:fly={{ y: 100, duration: 100, easing: linear }} out:fly={{ y: 100, duration: 100, easing: linear }}>
-				<div>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="8"
-						height="36"
-						viewBox="0 0 8 36"
-						fill="none"
-					>
-						<rect width="8" height="36" rx="4" fill={getToastColor(msg.type)} />
-					</svg>
+{#if toastNotifications.toasts.length > 0}
+	<div class="toast-container" in:fly={transitionConfig} out:fly={transitionConfig}>
+		{#each toastNotifications.toasts as toast}
+			<div class="toast {toast.width ?? 'sm'}" in:fly={transitionConfig} out:fly={transitionConfig}>
+				<span class="status-indicator {toast.type}"></span>
+				<div class="toast-content-container">
+					<div class="toast-content">
+						<span>{toast.message}</span>
+						{#if toast.link}
+							<a class="toast-content-link" href={toast.link} title="View details">View details</a>
+						{/if}
+					</div>
 				</div>
-				<div class="toast-content">
-					<div>{msg.message}</div>
-					<div class="toast-content-link">View details</div>
+				<div class="toast-close-container">
+					<button
+						type="button"
+						class="toast-close-button material-icons"
+						aria-label="Close toast"
+						onclick={() => deleteToastById(toast.id)}>close</button
+					>
 				</div>
 			</div>
 		{/each}
@@ -50,19 +50,21 @@
 
 <style>
 	.toast-container {
-		position: fixed; 
+		position: fixed;
 		top: 96px;
 		right: 16px;
 		z-index: 9999;
 		display: flex;
 		flex-direction: column;
 		gap: 16px;
+		align-items: flex-end;
 	}
+
 	.toast {
+		width: var(--toast-width);
+		height: var(--toast-height);
 		display: inline-flex;
 		padding: 8px;
-		justify-content: flex-start;
-		align-items: center;
 		gap: 16px;
 		border-radius: 8px;
 		border: 1px solid #e0e5e8;
@@ -72,28 +74,93 @@
 			0px 1px 3px 0px rgba(51, 56, 64, 0.2),
 			0px 1px 16px 0px rgba(51, 56, 64, 0.1);
 	}
+
+	.toast.sm {
+		--toast-width: 400px;
+		--toast-height: 52px;
+		--toast-flex-direction: row;
+		--toast-gap: 8px;
+		--toast-close-button-align: center;
+	}
+
+	.toast.md {
+		--toast-width: 600px;
+		--toast-height: 88px;
+		--toast-flex-direction: column;
+		--toast-gap: 4px;
+		--toast-close-button-align: flex-start;
+	}
+
 	.toast-content {
 		display: flex;
+		justify-content: space-between;
+		flex-direction: var(--toast-flex-direction);
+		gap: var(--toast-gap);
 		padding: 8px 0px;
-		align-items: flex-start;
-		gap: 8px;
-		color: #000;
 		font-size: 14px;
-		font-style: normal;
 		font-weight: 400;
 		line-height: 20px;
 	}
+
+	.toast-content-container {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		flex-grow: 1;
+	}
+
+	.status-indicator {
+		width: 8px;
+		height: calc(var(--toast-height) - 20px);
+		flex-shrink: 0;
+		border-radius: 4px;
+		background-color: var(--toast-bg);
+	}
+
 	.toast-content-link {
 		display: flex;
-		align-items: flex-start;
+		align-items: center;
 		color: #2b1999;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px;
 	}
+
 	.toast-content-link:hover {
 		color: #472aff;
 		text-decoration: underline;
 	}
+
+	.status-indicator.info {
+		--toast-bg: #472aff;
+	}
+
+	.status-indicator.warning {
+		--toast-bg: #e87d1e;
+	}
+	.status-indicator.danger {
+		--toast-bg: #dc182c;
+	}
+	.status-indicator.neutral {
+		--toast-bg: #6b7180;
+	}
+	.status-indicator.success {
+		--toast-bg: #008556;
+	}
+
+	.toast-close-container {
+		display: flex;
+		align-items: var(--toast-close-button-align);
+	}
+
+	.toast-close-button {
+		background: none;
+		border: none;
+	}
+
+	.toast-close-button:hover {
+		cursor: pointer;
+		color: #434952;
+	}
+
+	.toast-close-button:focus {
+		outline: none;
+	}
 </style>

package/dist/Toast/toastState.svelte.d.ts

@@ -1,14 +1,18 @@
 type ToastType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+type ToastWidth = 'sm' | 'md';
 export interface Toast {
     type: ToastType;
     message: string;
+    width?: ToastWidth;
+    link?: string;
 }
 interface ToastState extends Toast {
     id: string;
 }
-export declare function getToast(duration?: number): {
-    msg: ToastState[];
+export declare const getToast: (duration?: number) => {
+    toasts: ToastState[];
     duration: number;
 };
-export declare function addToast(toast: Toast): void;
+export declare const addToast: (toast: Toast) => void;
+export declare const deleteToastById: (id: string) => void;
 export {};

package/dist/Toast/toastState.svelte.js

@@ -1,20 +1,23 @@
 const toastState = $state({
-    msg: [],
-    duration: 5000,
+    toasts: [],
+    duration: 5000
 });
-export function getToast(duration) {
+export const getToast = (duration) => {
     if (duration) {
         toastState.duration = duration;
     }
     return toastState;
-}
-export function addToast(toast) {
+};
+export const addToast = (toast) => {
     const newToast = { ...toast, id: crypto.randomUUID() };
-    toastState.msg.push(newToast);
+    toastState.toasts.push(newToast);
     scheduleToastRemoval(newToast.id);
-}
-function scheduleToastRemoval(id) {
+};
+const scheduleToastRemoval = (id) => {
     setTimeout(() => {
-        toastState.msg = toastState.msg.filter((toast) => toast.id !== id);
+        deleteToastById(id);
     }, toastState.duration);
-}
+};
+export const deleteToastById = (id) => {
+    toastState.toasts = toastState.toasts.filter((toast) => toast.id !== id);
+};

package/dist/Tooltip/Tooltip.svelte

@@ -46,8 +46,6 @@
 	tabindex="0"
 	onmouseenter={toggleTooltip}
 	onmouseleave={toggleTooltip}
-	onfocus={toggleTooltip}
-	onblur={toggleTooltip}
 >
 	{@render children()}
 

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import Accordion from './Accordion/Accordion.svelte';
 import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
@@ -8,8 +9,10 @@ import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Input from './Form/Input/Input.svelte';
-import Toggle from './Form/Toggle/Toggle.svelte';
+import Select from './Form/Select/Select.svelte';
+import type { SelectOption } from './Form/Select/selectState.svelte.js';
 import TextArea from './Form/TextArea/TextArea.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
 import Header from './Header/Header.svelte';
 import HeaderAccount from './Header/HeaderAccount.svelte';
 import HeaderLoader from './Header/HeaderLoader.svelte';
@@ -20,11 +23,16 @@ import Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import type { MenuItem } from './Menu/SidebarState.svelte';
 import Modal from './Modal/Modal.svelte';
+import type { ModalProps } from './Modal/modalState.svelte.js';
+import Notification from './Notification/Notification.svelte';
+import ProgressPage from './ProgressPage/ProgressPage.svelte';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
+import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
+import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
 import type { Tab } from './Tabs/tabsState.svelte.js';
 import Toaster from './Toast/Toast.svelte';
 import { addToast, type Toast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, TextArea, Modal, ProgressWizard, Sidebar, Spinner, Tabs, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type Tab, type Toast };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type Tab, type Toast };

package/dist/index.js

@@ -1,3 +1,4 @@
+import Accordion from './Accordion/Accordion.svelte';
 import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
@@ -8,8 +9,9 @@ import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Input from './Form/Input/Input.svelte';
-import Toggle from './Form/Toggle/Toggle.svelte';
+import Select from './Form/Select/Select.svelte';
 import TextArea from './Form/TextArea/TextArea.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
 import Header from './Header/Header.svelte';
 import HeaderAccount from './Header/HeaderAccount.svelte';
 import HeaderLoader from './Header/HeaderLoader.svelte';
@@ -19,10 +21,13 @@ import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svel
 import Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
+import Notification from './Notification/Notification.svelte';
+import ProgressPage from './ProgressPage/ProgressPage.svelte';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
+import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
 import Toaster from './Toast/Toast.svelte';
 import { addToast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, TextArea, Modal, ProgressWizard, Sidebar, Spinner, Tabs, Toaster, Toggle, Tooltip };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.0.0",
+	"version": "1.2.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -55,12 +55,10 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
+		"vite": "^6.0.0",
+		"zod": "^3.25.76"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.16.0",
-		"http-status-codes": "^2.3.0",
-		"lucide-svelte": "^0.475.0",
-		"zod": "^3.24.4"
+		"@sveltejs/kit": "^2.16.0"
 	}
 }