@softwareone/spi-sv5-library 1.0.0 → 1.1.0

package/README.md

@@ -15,32 +15,88 @@ npm install @softwareone/swo-spi-svelte5-library
 Import the components you need into your Svelte application:
 
 ```javascript
-import { Button, 
-		 Modal, 
-		 Spinner, 
-		 Toaster, 
-		 addToast, 
-		 type Toast, 
-		 Toggle, 
-		 Header, 
-		 Chips,
-		 Breadcrumbs,
-		 addBreadcrumbsNameMap,
-		 type BreadcrumbsNameMap,
-		 Footer,
-		 Card
-		 } from '@softwareone/swo-spi-svelte5-library';
+import {
+	Avatar,
+	Breadcrumbs,
+	Button,
+	Card,
+	Chips,
+	ErrorPage,
+	Footer,
+	Header,
+	HeaderAccount,
+	HeaderLoader,
+	HeaderLogo,
+	HighlightPanel,
+	Input,
+	Menu,
+	Modal,
+	ProgressWizard,
+	Sidebar,
+	Tabs,
+	TextArea,
+	Toaster,
+	Toggle,
+	Tooltip
+} from '@softwareone/swo-spi-svelte5-library';
+```
+
+Import the types you need into your Svelte application:
+
+```javascript
+import {
+	type BreadcrumbsNameMap,
+	type HighlightPanelColumn,
+	type MenuItem,
+	type ModalProps,
+	type ProgressWizardStep,
+	type Tab,
+	type Toast
+} from '@softwareone/swo-spi-svelte5-library';
 ```
 
 # List of components
 
+- Avatar
+- Breadcrumbs
 - Button
+- Card
+- Chips
+- ErrorPage
+- Footer
+- Form
+  - Input
+  - TextArea
+  - Toggle
+- Header (including a loader)
+  - HeaderAccount
+  - HeaderLoader
+  - HeaderLogo
+- HighlightPanel
+- Menu
+  - Sidebar
 - Modal
+- ProgressWizard
 - Spinner
+- Tabs
 - Toaster
-- Toggle
-- Header (including a loader)
+- Tooltip
+
+# List of types per component
+
 - Breadcrumbs
+  - BreadcrumbsNameMap
 - Chips
-- Footer
-- Card
+  - ChipType
+- HighlightPanel
+  - ColumnType
+  - HighlightPanelColumn
+  - ImageType
+- Menu
+  - MenuItem
+- Modal
+  - ModalProps
+- ProgressWizard
+  - ProgressWizardStep
+- Tab
+- Toast

package/dist/Button/Button.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	type Variant = 'primary' | 'secondary' | 'outline';
+	type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 	type VariantColor = 'primary' | 'danger';
 
 	interface ButtonProps extends HTMLButtonAttributes {
@@ -78,6 +78,17 @@
 		background: #eaecff;
 	}
 
+	.btn-outline-none-primary {
+		border: none;
+		background: #fff;
+		color: #472aff;
+	}
+
+	.btn-outline-none-primary:hover:not(:disabled),
+	.btn-outline-none-primary:focus:not(:disabled) {
+		background: #e0e5e8;
+	}
+
 	.btn-primary-danger {
 		background: #dc182c;
 		color: #fff;

package/dist/Button/Button.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type Variant = 'primary' | 'secondary' | 'outline';
+type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 type VariantColor = 'primary' | 'danger';
 interface ButtonProps extends HTMLButtonAttributes {
     variant?: Variant;

package/dist/Chips/Chips.svelte

@@ -1,74 +1,71 @@
 <script lang="ts">
-	import { ChipType } from '../index.js';
+	import { ChipType } from './chipsState.svelte.js';
 
 	interface ChipsProps {
 		type?: ChipType;
 		text?: string;
 	}
 
-	let { type, text }: ChipsProps = $props();
-
-	type = type || ChipType.Info;
-	text = text || type.charAt(0).toUpperCase() + type.slice(1); // Default to capitalized type
-
-	let className = `chip chip-${type}`;
+	let { type = ChipType.Info, text = type.charAt(0).toUpperCase() + type.slice(1) }: ChipsProps =
+		$props();
 </script>
 
-<div class={className}>
+<div class="chip {type}">
 	{text}
 </div>
 
 <style>
 	.chip {
-		display: inline-flex;
-		padding: 2px 8px;
-		align-items: center;
-		gap: 8px;
-		border-radius: 4px;
+		display: inline-block;
 		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
+		font-weight: 500;
 		line-height: 20px;
 		background: var(--chip-bg);
 		color: var(--chip-text);
+		padding: 2px 8px;
+		border-radius: 4px;
+		cursor: default;
 	}
 
 	.chip:hover {
-		background: var(--chip-hover);
+		background: var(--chip-bg-hover);
 	}
 
 	.chip:focus {
-		background: var(--chip-hover);
-		box-shadow: 0px 0px 0px 3px var(--chip-hover);
+		box-shadow: 0px 0px 0px 3px #959bff;
 	}
-
-	.chip-info {
-		--chip-bg: #eaecff;
+	.chip.info {
 		--chip-text: #3520bf;
-		--chip-hover: #959bff;
+		--chip-bg: #eaecff;
+		--chip-text-hover: #2b1999;
+		--chip-bg-hover: #959bff;
 	}
 
-	.chip-success {
-		--chip-bg: #e6f9f2;
+	.chip.success {
 		--chip-text: #00784d;
-		--chip-hover: #80e1ae;
+		--chip-bg: #e6f9f2;
+		--chip-text-hover: #005838;
+		--chip-bg-hover: #80e1ae;
 	}
 
-	.chip-warning {
-		--chip-bg: #fdf2e9;
+	.chip.warning {
 		--chip-text: #a15d26;
-		--chip-hover: #f1b178;
+		--chip-bg: #fdf2e9;
+		--chip-text-hover: #733f11;
+		--chip-bg-hover: #f1b178;
 	}
 
-	.chip-error {
-		--chip-bg: #fce8ea;
+	.chip.error {
 		--chip-text: #bb1425;
-		--chip-hover: #ee8c96;
+		--chip-bg: #fce8ea;
+		--chip-text-hover: #8f101d;
+		--chip-bg-hover: #ee8c96;
 	}
 
-	.chip-neutral {
-		--chip-bg: #f4f6f8;
+	.chip.neutral {
 		--chip-text: #434952;
-		--chip-hover: #e0e5e8;
+		--chip-bg: #f4f6f8;
+		--chip-text-hover: #25282d;
+		--chip-bg-hover: #e0e5e8;
 	}
 </style>

package/dist/Chips/Chips.svelte.d.ts

@@ -1,4 +1,4 @@
-import { ChipType } from '../index.js';
+import { ChipType } from './chipsState.svelte.js';
 interface ChipsProps {
     type?: ChipType;
     text?: string;

package/dist/ErrorPage/ErrorPage.svelte

@@ -2,22 +2,20 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 
-	import { StatusCodes } from 'http-status-codes';
-
 	import FeedbackIcon from '../assets/icons/feedback.svg';
 	import { Button } from '../index.js';
 
 	interface ErrorPageProps {
-		status: StatusCodes;
+		status: number;
 		title?: string;
 	}
 
 	let { status, title }: ErrorPageProps = $props();
 
 	const errorTitle: Record<number, string> = {
-		[StatusCodes.NOT_FOUND]: 'Page not found',
-		[StatusCodes.FORBIDDEN]: 'Access denied',
-		[StatusCodes.INTERNAL_SERVER_ERROR]: 'An unexpected error occurred'
+		[404]: 'Page not found',
+		[403]: 'Access denied',
+		[500]: 'An unexpected error occurred'
 	};
 </script>
 
@@ -26,7 +24,7 @@
 
 	<div class="feedback-detail">
 		<h1>{title || errorTitle[status]}</h1>
-		{#if status === StatusCodes.NOT_FOUND}
+		{#if status === 404}
 			<div>
 				<p>We couldn’t find the page:</p>
 				<p class="link">{page.url}</p>

package/dist/ErrorPage/ErrorPage.svelte.d.ts

@@ -1,6 +1,5 @@
-import { StatusCodes } from 'http-status-codes';
 interface ErrorPageProps {
-    status: StatusCodes;
+    status: number;
     title?: string;
 }
 declare const ErrorPage: import("svelte").Component<ErrorPageProps, {}, "">;

package/dist/Form/Input/Input.svelte

@@ -7,9 +7,9 @@
 	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
 		label?: string;
 		type?: InputType;
-		value?: string | number;
+		value?: string | number | null;
 		optional?: boolean;
-		error?: string;
+		error?: string | string[];
 		description?: string;
 		currency?: string;
 	}
@@ -45,12 +45,6 @@
 		money: 'number',
 		password: isPasswordVisible ? 'text' : 'password'
 	});
-
-	const handleInput = (event: Event): void => {
-		const target = event.target as HTMLInputElement;
-		value = type === 'number' || type === 'money' ? target.valueAsNumber : target.value;
-		oninput?.(event as Event & { currentTarget: EventTarget & HTMLInputElement });
-	};
 </script>
 
 <div class="form-container">
@@ -74,10 +68,10 @@
 		]}
 	>
 		<input
+			bind:value
 			{...props}
 			id={inputId}
 			type={transformationType[type] ?? type}
-			{value}
 			{disabled}
 			{readonly}
 			class={[
@@ -88,7 +82,6 @@
 				showDatePicker && 'form-input-date'
 			]}
 			aria-invalid={isInvalid}
-			oninput={handleInput}
 		/>
 
 		{#if type === 'money' && currency}
@@ -120,7 +113,7 @@
 	{/if}
 	{#if isInvalid}
 		<p class="form-message form-message-error">
-			{error}
+			{Array.isArray(error) ? error[0] : error}
 		</p>
 	{/if}
 </div>
@@ -351,7 +344,9 @@
 		border-color: #008556;
 	}
 
-	.form-input-wrapper.success:hover:not(:has(.form-input:disabled)):not(:has(.form-input:read-only)),
+	.form-input-wrapper.success:hover:not(:has(.form-input:disabled)):not(
+			:has(.form-input:read-only)
+		),
 	.form-input-wrapper.success:focus-within {
 		border-color: #10b981;
 	}

package/dist/Form/Input/Input.svelte.d.ts

@@ -3,9 +3,9 @@ type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
 interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
     label?: string;
     type?: InputType;
-    value?: string | number;
+    value?: string | number | null;
     optional?: boolean;
-    error?: string;
+    error?: string | string[];
     description?: string;
     currency?: string;
 }

package/dist/Form/TextArea/TextArea.svelte

@@ -3,9 +3,9 @@
 
 	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
 		label?: string;
-		value?: string;
+		value?: string | null;
 		optional?: boolean;
-		error?: string;
+		error?: string | string[];
 		description?: string;
 		maximumCharactersAllowed?: number;
 		resize?: boolean;
@@ -72,7 +72,7 @@
 				{/if}
 				{#if errorMessage}
 					<p class="form-message form-message-error">
-						{errorMessage}
+						{Array.isArray(errorMessage) ? errorMessage[0] : errorMessage}
 					</p>
 				{/if}
 			</div>
@@ -224,7 +224,9 @@
 		border-color: #008556;
 	}
 
-	.form-textarea-wrapper.success:hover:not(:has(.form-textarea:disabled)):not(:has(.form-textarea:read-only)),
+	.form-textarea-wrapper.success:hover:not(:has(.form-textarea:disabled)):not(
+			:has(.form-textarea:read-only)
+		),
 	.form-textarea-wrapper.success:focus-within {
 		border-color: #10b981;
 	}

package/dist/Form/TextArea/TextArea.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
     label?: string;
-    value?: string;
+    value?: string | null;
     optional?: boolean;
-    error?: string;
+    error?: string | string[];
     description?: string;
     maximumCharactersAllowed?: number;
     resize?: boolean;

package/dist/Header/Header.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { HeaderAccount, HeaderLoader, HeaderLogo, Menu, type MenuItem } from '../index.js';
+	import type { Snippet } from 'svelte';
+
+	import HeaderAccount from './HeaderAccount.svelte';
+	import HeaderLoader from './HeaderLoader.svelte';
+	import HeaderLogo from './HeaderLogo.svelte';
 
 	interface HeaderProps {
 		title?: string;
 		homeUrl?: string;
-		disableMenuButton?: boolean;
 		hideAccount?: boolean;
 		hideHelp?: boolean;
 		hideNotification?: boolean;
@@ -12,13 +15,12 @@
 		userName?: string;
 		profileUrl?: string;
 		hideLoader?: boolean;
-		menuItems: MenuItem[];
+		menu?: Snippet;
 	}
 
 	let {
 		title = 'Default Title',
 		homeUrl = '/',
-		disableMenuButton,
 		hideAccount,
 		hideHelp,
 		hideNotification,
@@ -26,47 +28,47 @@
 		userName = 'User Name',
 		profileUrl = '/profile',
 		hideLoader,
-		menuItems
+		menu
 	}: HeaderProps = $props();
 </script>
 
-<header class="header">
-	<section class="header-section">
-		<Menu {menuItems} {disableMenuButton} />
-		<a href={homeUrl}>
+<div class="header-container">
+	<nav class="header-section">
+		{#if !hideLoader}
+			<HeaderLoader />
+		{/if}
+		{@render menu?.()}
+		<a href={homeUrl} title="Home">
 			<HeaderLogo />
 		</a>
-		<section class="header-title">
+		<h2 class="header-title">
 			{title}
-		</section>
-	</section>
+		</h2>
+	</nav>
 
-	<section class="header-section">
+	<nav class="header-section">
 		{#if !hideHelp}
-			<button class="header-btn" aria-labelledby="help-button">
-				<span class="material-icons-outlined icon-span"> help_outline </span>
+			<button class="header-btn material-icons-outlined" aria-labelledby="help-button">
+				help_outline
 			</button>
 		{/if}
 		{#if !hideNotification}
-			<button class="header-btn" aria-labelledby="notifications-button">
-				<span class="material-icons-outlined icon-span"> notifications </span>
+			<button class="header-btn material-icons-outlined" aria-labelledby="notifications-button">
+				notifications
 			</button>
 		{/if}
 		{#if !hideAccount}
-			<a href={profileUrl}>
+			<a href={profileUrl} title="Profile">
 				<HeaderAccount {accountName} {userName} />
 			</a>
 		{/if}
-	</section>
-</header>
-
-{#if !hideLoader}
-	<HeaderLoader />
-{/if}
+	</nav>
+</div>
 
 <style>
-	.header {
+	.header-container {
 		display: flex;
+		gap: 24px;
 		justify-content: space-between;
 		align-items: center;
 		padding: 0px 24px;
@@ -78,24 +80,18 @@
 	.header-section {
 		display: flex;
 		align-items: center;
-		gap: 1.5rem;
+		gap: 24px;
 	}
 
 	.header-title {
 		color: #000;
 		font-size: 24px;
+		font-weight: 600;
 	}
 
 	.header-btn {
 		border: none;
 		background: transparent;
-	}
-
-	.icon-span {
 		color: #6b7180;
-		font-size: 24px;
-		font-weight: 400;
-		line-height: 20px;
-		word-wrap: break-word;
 	}
 </style>

package/dist/Header/Header.svelte.d.ts

@@ -1,8 +1,7 @@
-import { type MenuItem } from '../index.js';
+import type { Snippet } from 'svelte';
 interface HeaderProps {
     title?: string;
     homeUrl?: string;
-    disableMenuButton?: boolean;
     hideAccount?: boolean;
     hideHelp?: boolean;
     hideNotification?: boolean;
@@ -10,7 +9,7 @@ interface HeaderProps {
     userName?: string;
     profileUrl?: string;
     hideLoader?: boolean;
-    menuItems: MenuItem[];
+    menu?: Snippet;
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/Header/HeaderAccount.svelte

@@ -6,17 +6,14 @@
 		userName?: string;
 	}
 
-	let { accountName, userName }: HeaderAccountProps = $props();
-
-	accountName = accountName || 'SoftwareOne';
-	userName = userName || 'John Doe';
+	let { accountName = 'SoftwareOne', userName = 'John Doe' }: HeaderAccountProps = $props();
 </script>
 
 <div class="account-container">
 	<div class="account-avatar">
 		<Avatar text={userName} />
 	</div>
-	<div class="account">
+	<div class="account-info">
 		<div class="account-name">{accountName}</div>
 		<div class="account-more">
 			<div class="account-more-name">Operations | {userName}</div>
@@ -33,6 +30,7 @@
 		border-radius: 8px;
 		background: #fff;
 	}
+
 	.account-avatar {
 		display: flex;
 		width: 48px;
@@ -40,11 +38,13 @@
 		justify-content: center;
 		align-items: center;
 	}
-	.account {
+
+	.account-info {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
 	}
+
 	.account-name {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
@@ -60,11 +60,13 @@
 		font-weight: 500;
 		line-height: 20px;
 	}
+
 	.account-more {
 		display: flex;
 		align-items: center;
 		color: #6b7180;
 	}
+
 	.account-more-name {
 		display: -webkit-box;
 		width: auto;

package/dist/Header/HeaderLoader.svelte

@@ -23,11 +23,11 @@
 <style>
 	.navigation-loader {
 		position: fixed;
-		top: 80px;
+		top: 0px;
 		right: 0px;
 		left: 0px;
 		height: 3px;
-		z-index: 50;
+		z-index: 9999;
 		background: linear-gradient(90deg, #392D9C, #472AFF, #00c9cd);
 	}
 </style>

package/dist/Header/HeaderLogo.svelte

@@ -1,6 +1,3 @@
-<script lang="ts">
-</script>
-
 <svg xmlns="http://www.w3.org/2000/svg" width="65" height="24" viewBox="0 0 65 24" fill="none">
 	<path
 		d="M22.6371 14.1927C21.6122 19.5775 16.8887 23.4706 11.4225 23.4706C5.12455 23.4706 0 18.3245 0 12C0 5.66061 5.12455 0.529419 11.4225 0.529419C16.9036 0.529419 21.6122 4.42256 22.6371 9.80732V1.17082H29.1282V3.82591C30.9404 1.54372 32.9604 0.529419 35.649 0.529419C40.3725 0.529419 43.2987 3.96015 43.2987 9.509V9.91173C44.1899 4.2734 48.5866 0.529419 54.3499 0.529419C60.6776 0.529419 65 5.31753 65 12.2983V13.7452H49.6115C50.072 16.9075 51.9138 18.7123 54.6766 18.7123C56.6967 18.7123 58.1524 17.7726 58.598 16.1616H64.7029C63.8414 20.547 59.8012 23.4706 54.5875 23.4706C48.7351 23.4706 44.2047 19.7117 43.2987 14.1032V22.8292H36.7036V10.1951C36.7036 7.48039 35.3668 5.97385 32.9753 5.97385C30.7324 5.97385 29.247 7.64447 29.247 10.1951V22.8292H22.6371V14.1927ZM58.5535 9.56866C58.1376 6.74949 56.5334 5.10871 54.2162 5.10871C51.8841 5.10871 50.2502 6.71966 49.7155 9.56866H58.5535Z"
@@ -10,4 +7,10 @@
 		d="M0.88623 12.3732H1.7069C1.75786 12.6506 1.91609 12.7718 2.23792 12.7718C2.50612 12.7718 2.68312 12.6344 2.68312 12.4244C2.68312 12.2708 2.56512 12.1712 2.32911 12.1308L2.00996 12.0769C1.27779 11.953 0.958643 11.681 0.958643 11.1801C0.958643 10.6495 1.47357 10.2752 2.20306 10.2752C2.93791 10.2752 3.37774 10.5741 3.47697 11.1451H2.66435C2.6268 10.9215 2.4632 10.8003 2.19769 10.8003C1.94827 10.8003 1.76322 10.9458 1.76322 11.1424C1.76322 11.2878 1.87854 11.3686 2.14674 11.4171L2.49271 11.479C3.20073 11.6056 3.51184 11.8884 3.51184 12.4055C3.51184 12.963 3.00495 13.3373 2.24865 13.3373C1.43871 13.3373 0.942551 12.9872 0.88623 12.3732ZM3.64862 11.8157C3.64862 10.9242 4.29228 10.2752 5.18 10.2752C6.06235 10.2752 6.68456 10.9 6.68456 11.7914C6.68456 12.6937 6.04894 13.3373 5.15854 13.3373C4.26814 13.3373 3.64862 12.7125 3.64862 11.8157ZM5.81562 11.7968C5.81562 11.2609 5.56351 10.9215 5.16391 10.9215C4.76966 10.9215 4.51756 11.2663 4.51756 11.8022C4.51756 12.3516 4.7643 12.691 5.16391 12.691C5.5662 12.691 5.81562 12.3462 5.81562 11.7968ZM6.63897 10.364H7.11099V10.084C7.11099 9.43758 7.406 9.1521 8.06844 9.1521C8.17839 9.1521 8.31249 9.16287 8.38758 9.17634V9.7877C8.33931 9.785 8.33931 9.785 8.28031 9.785C8.03893 9.785 7.95848 9.85503 7.95848 10.0705V10.364H8.79524V9.46182H9.64005V10.364H10.9596L11.2653 11.7376C11.3082 11.9342 11.3511 12.1443 11.386 12.3409C11.4289 12.1362 11.4798 11.9315 11.5308 11.7403L11.8875 10.3856H12.5794L12.9415 11.7403C12.9844 11.9073 13.0354 12.1227 13.0783 12.3058C13.1292 12.0284 13.1561 11.8938 13.1909 11.7403L13.4967 10.364H14.3307L13.5154 13.2485H12.7028L12.2174 11.4009L11.7427 13.2485H10.9059L10.273 10.9673H9.64005V12.2816C9.64005 12.5294 9.72855 12.6129 9.98601 12.6129C10.0611 12.6129 10.1013 12.6102 10.1764 12.5967V13.2215C10.0343 13.2485 9.87337 13.2673 9.74464 13.2673C9.06343 13.2673 8.79524 13.0142 8.79524 12.3705V10.9673H7.95848V13.2485H7.11099V10.9673H6.63897V10.364ZM14.1725 12.5051C14.1725 11.9827 14.5104 11.7187 15.3767 11.5706C15.8433 11.4925 16.0123 11.3848 16.0123 11.1639C16.0123 10.9431 15.8487 10.8084 15.5778 10.8084C15.2909 10.8084 15.1273 10.9404 15.1085 11.1909H14.3281C14.3897 10.5984 14.8323 10.2752 15.5859 10.2752C16.4173 10.2752 16.8276 10.6765 16.8276 11.4925V12.6371C16.8276 12.9926 16.8464 13.095 16.9403 13.2485H16.1249C16.0847 13.1515 16.0579 13.0411 16.0472 12.893C15.8246 13.1865 15.5376 13.3212 15.1407 13.3212C14.5399 13.3212 14.1725 13.0115 14.1725 12.5051ZM15.5376 12.0069C15.1353 12.0877 14.9851 12.2008 14.9851 12.4244C14.9851 12.6506 15.13 12.7799 15.3874 12.7799C15.7763 12.7799 16.015 12.5321 16.015 12.1362V11.8669C15.8916 11.9261 15.7897 11.9557 15.5376 12.0069ZM17.2487 10.364H18.0881V10.8057C18.2705 10.4745 18.5092 10.3156 18.831 10.3156C18.8686 10.3156 18.9463 10.3236 19.0107 10.3371V11.0427C18.9571 11.0293 18.9007 11.0239 18.7827 11.0239C18.3697 11.0239 18.1042 11.2905 18.1042 11.7053V13.2485H17.2487V10.364ZM18.9839 11.8157C18.9839 10.8973 19.5846 10.2752 20.4724 10.2752C21.3172 10.2752 21.8857 10.9108 21.8857 11.8615V12.0096H19.8341C19.8904 12.489 20.1371 12.761 20.5153 12.761C20.7995 12.761 20.9846 12.6263 21.0463 12.3813H21.8455C21.7302 12.9549 21.1938 13.3373 20.5045 13.3373C19.6007 13.3373 18.9839 12.7206 18.9839 11.8157ZM21.0436 11.506C20.99 11.067 20.7861 10.8327 20.4563 10.8327C20.1264 10.8327 19.9199 11.0643 19.8501 11.506H21.0436Z"
 		fill="white"
 	/>
-</svg>
+</svg>
+
+<style>
+	svg {
+		display: block;
+	}
+</style>