@websline/system-components 1.3.23 → 1.3.25

package/dist/assets/masks/checkmark.svg

@@ -0,0 +1 @@
+<svg height="16" width="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 19L4 13.0909" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>

package/dist/assets/masks/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 25" fill="none"><path d="M18 9.5332L12 15.5332L6 9.5332" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/dist/components/atoms/icon/components/index.d.ts

@@ -0,0 +1,111 @@
+export { default as Academy } from "./Academy.svelte";
+export { default as Add } from "./Add.svelte";
+export { default as Ai } from "./Ai.svelte";
+export { default as AiStars } from "./AiStars.svelte";
+export { default as AlignBottom } from "./AlignBottom.svelte";
+export { default as AlignBottomOne } from "./AlignBottomOne.svelte";
+export { default as AlignCenter } from "./AlignCenter.svelte";
+export { default as AlignCenterOne } from "./AlignCenterOne.svelte";
+export { default as AlignLeft } from "./AlignLeft.svelte";
+export { default as AlignMiddle } from "./AlignMiddle.svelte";
+export { default as AlignMiddleOne } from "./AlignMiddleOne.svelte";
+export { default as AlignRight } from "./AlignRight.svelte";
+export { default as AlignRightOne } from "./AlignRightOne.svelte";
+export { default as AlignTop } from "./AlignTop.svelte";
+export { default as AlignTopOne } from "./AlignTopOne.svelte";
+export { default as ArrowDown } from "./ArrowDown.svelte";
+export { default as ArrowUp } from "./ArrowUp.svelte";
+export { default as Attach } from "./Attach.svelte";
+export { default as Bed } from "./Bed.svelte";
+export { default as Block } from "./Block.svelte";
+export { default as Bold } from "./Bold.svelte";
+export { default as BoxIn } from "./BoxIn.svelte";
+export { default as BoxOut } from "./BoxOut.svelte";
+export { default as Calendar } from "./Calendar.svelte";
+export { default as Check } from "./Check.svelte";
+export { default as CheckboxStack } from "./CheckboxStack.svelte";
+export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft.svelte";
+export { default as ChevronDoubleRight } from "./ChevronDoubleRight.svelte";
+export { default as ChevronDown } from "./ChevronDown.svelte";
+export { default as Clipboard } from "./Clipboard.svelte";
+export { default as Close } from "./Close.svelte";
+export { default as CloseSmall } from "./CloseSmall.svelte";
+export { default as Computer } from "./Computer.svelte";
+export { default as Connect } from "./Connect.svelte";
+export { default as ConnectCrossed } from "./ConnectCrossed.svelte";
+export { default as ContactCard } from "./ContactCard.svelte";
+export { default as Controlling } from "./Controlling.svelte";
+export { default as Coupons } from "./Coupons.svelte";
+export { default as Crop } from "./Crop.svelte";
+export { default as Dashboard } from "./Dashboard.svelte";
+export { default as Database } from "./Database.svelte";
+export { default as Download } from "./Download.svelte";
+export { default as Dragger } from "./Dragger.svelte";
+export { default as Envelope } from "./Envelope.svelte";
+export { default as Envelopes } from "./Envelopes.svelte";
+export { default as Expand } from "./Expand.svelte";
+export { default as Eye } from "./Eye.svelte";
+export { default as EyeCrossed } from "./EyeCrossed.svelte";
+export { default as FilePDF } from "./FilePDF.svelte";
+export { default as Filter } from "./Filter.svelte";
+export { default as FocalPoint } from "./FocalPoint.svelte";
+export { default as FolderPlus } from "./FolderPlus.svelte";
+export { default as Food } from "./Food.svelte";
+export { default as Funnel } from "./Funnel.svelte";
+export { default as Globe } from "./Globe.svelte";
+export { default as History } from "./History.svelte";
+export { default as Hourglass } from "./Hourglass.svelte";
+export { default as Inbox } from "./Inbox.svelte";
+export { default as Info } from "./Info.svelte";
+export { default as Intergration } from "./Intergration.svelte";
+export { default as Italic } from "./Italic.svelte";
+export { default as Layout } from "./Layout.svelte";
+export { default as Link } from "./Link.svelte";
+export { default as LinkAi } from "./LinkAi.svelte";
+export { default as ListOrdered } from "./ListOrdered.svelte";
+export { default as ListTasks } from "./ListTasks.svelte";
+export { default as ListUnordered } from "./ListUnordered.svelte";
+export { default as Lock } from "./Lock.svelte";
+export { default as Menu } from "./Menu.svelte";
+export { default as Minus } from "./Minus.svelte";
+export { default as Notifications } from "./Notifications.svelte";
+export { default as Offer } from "./Offer.svelte";
+export { default as Out } from "./Out.svelte";
+export { default as Overflow } from "./Overflow.svelte";
+export { default as Page } from "./Page.svelte";
+export { default as PageClock } from "./PageClock.svelte";
+export { default as PageEdit } from "./PageEdit.svelte";
+export { default as PageLayout } from "./PageLayout.svelte";
+export { default as Pages } from "./Pages.svelte";
+export { default as Payment } from "./Payment.svelte";
+export { default as Pencil } from "./Pencil.svelte";
+export { default as Phone } from "./Phone.svelte";
+export { default as Picture } from "./Picture.svelte";
+export { default as Print } from "./Print.svelte";
+export { default as Redo } from "./Redo.svelte";
+export { default as Refresh } from "./Refresh.svelte";
+export { default as RefreshCircle } from "./RefreshCircle.svelte";
+export { default as Replace } from "./Replace.svelte";
+export { default as Report } from "./Report.svelte";
+export { default as Resource } from "./Resource.svelte";
+export { default as SEO } from "./SEO.svelte";
+export { default as Search } from "./Search.svelte";
+export { default as Settings } from "./Settings.svelte";
+export { default as Shop } from "./Shop.svelte";
+export { default as Smartphone } from "./Smartphone.svelte";
+export { default as Sort } from "./Sort.svelte";
+export { default as SpacingL } from "./SpacingL.svelte";
+export { default as SpacingM } from "./SpacingM.svelte";
+export { default as SpacingNone } from "./SpacingNone.svelte";
+export { default as SpacingS } from "./SpacingS.svelte";
+export { default as SpacingXL } from "./SpacingXL.svelte";
+export { default as Star } from "./Star.svelte";
+export { default as StyleGuide } from "./StyleGuide.svelte";
+export { default as Tablet } from "./Tablet.svelte";
+export { default as Translate } from "./Translate.svelte";
+export { default as TranslateCrossed } from "./TranslateCrossed.svelte";
+export { default as Trash } from "./Trash.svelte";
+export { default as Underline } from "./Underline.svelte";
+export { default as Undo } from "./Undo.svelte";
+export { default as WebslineSupport } from "./WebslineSupport.svelte";
+export { default as Width } from "./Width.svelte";

package/dist/components/atoms/icon/components/index.js

@@ -0,0 +1,111 @@
+export { default as Academy } from "./Academy.svelte";
+export { default as Add } from "./Add.svelte";
+export { default as Ai } from "./Ai.svelte";
+export { default as AiStars } from "./AiStars.svelte";
+export { default as AlignBottom } from "./AlignBottom.svelte";
+export { default as AlignBottomOne } from "./AlignBottomOne.svelte";
+export { default as AlignCenter } from "./AlignCenter.svelte";
+export { default as AlignCenterOne } from "./AlignCenterOne.svelte";
+export { default as AlignLeft } from "./AlignLeft.svelte";
+export { default as AlignMiddle } from "./AlignMiddle.svelte";
+export { default as AlignMiddleOne } from "./AlignMiddleOne.svelte";
+export { default as AlignRight } from "./AlignRight.svelte";
+export { default as AlignRightOne } from "./AlignRightOne.svelte";
+export { default as AlignTop } from "./AlignTop.svelte";
+export { default as AlignTopOne } from "./AlignTopOne.svelte";
+export { default as ArrowDown } from "./ArrowDown.svelte";
+export { default as ArrowUp } from "./ArrowUp.svelte";
+export { default as Attach } from "./Attach.svelte";
+export { default as Bed } from "./Bed.svelte";
+export { default as Block } from "./Block.svelte";
+export { default as Bold } from "./Bold.svelte";
+export { default as BoxIn } from "./BoxIn.svelte";
+export { default as BoxOut } from "./BoxOut.svelte";
+export { default as Calendar } from "./Calendar.svelte";
+export { default as Check } from "./Check.svelte";
+export { default as CheckboxStack } from "./CheckboxStack.svelte";
+export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft.svelte";
+export { default as ChevronDoubleRight } from "./ChevronDoubleRight.svelte";
+export { default as ChevronDown } from "./ChevronDown.svelte";
+export { default as Clipboard } from "./Clipboard.svelte";
+export { default as Close } from "./Close.svelte";
+export { default as CloseSmall } from "./CloseSmall.svelte";
+export { default as Computer } from "./Computer.svelte";
+export { default as Connect } from "./Connect.svelte";
+export { default as ConnectCrossed } from "./ConnectCrossed.svelte";
+export { default as ContactCard } from "./ContactCard.svelte";
+export { default as Controlling } from "./Controlling.svelte";
+export { default as Coupons } from "./Coupons.svelte";
+export { default as Crop } from "./Crop.svelte";
+export { default as Dashboard } from "./Dashboard.svelte";
+export { default as Database } from "./Database.svelte";
+export { default as Download } from "./Download.svelte";
+export { default as Dragger } from "./Dragger.svelte";
+export { default as Envelope } from "./Envelope.svelte";
+export { default as Envelopes } from "./Envelopes.svelte";
+export { default as Expand } from "./Expand.svelte";
+export { default as Eye } from "./Eye.svelte";
+export { default as EyeCrossed } from "./EyeCrossed.svelte";
+export { default as FilePDF } from "./FilePDF.svelte";
+export { default as Filter } from "./Filter.svelte";
+export { default as FocalPoint } from "./FocalPoint.svelte";
+export { default as FolderPlus } from "./FolderPlus.svelte";
+export { default as Food } from "./Food.svelte";
+export { default as Funnel } from "./Funnel.svelte";
+export { default as Globe } from "./Globe.svelte";
+export { default as History } from "./History.svelte";
+export { default as Hourglass } from "./Hourglass.svelte";
+export { default as Inbox } from "./Inbox.svelte";
+export { default as Info } from "./Info.svelte";
+export { default as Intergration } from "./Intergration.svelte";
+export { default as Italic } from "./Italic.svelte";
+export { default as Layout } from "./Layout.svelte";
+export { default as Link } from "./Link.svelte";
+export { default as LinkAi } from "./LinkAi.svelte";
+export { default as ListOrdered } from "./ListOrdered.svelte";
+export { default as ListTasks } from "./ListTasks.svelte";
+export { default as ListUnordered } from "./ListUnordered.svelte";
+export { default as Lock } from "./Lock.svelte";
+export { default as Menu } from "./Menu.svelte";
+export { default as Minus } from "./Minus.svelte";
+export { default as Notifications } from "./Notifications.svelte";
+export { default as Offer } from "./Offer.svelte";
+export { default as Out } from "./Out.svelte";
+export { default as Overflow } from "./Overflow.svelte";
+export { default as Page } from "./Page.svelte";
+export { default as PageClock } from "./PageClock.svelte";
+export { default as PageEdit } from "./PageEdit.svelte";
+export { default as PageLayout } from "./PageLayout.svelte";
+export { default as Pages } from "./Pages.svelte";
+export { default as Payment } from "./Payment.svelte";
+export { default as Pencil } from "./Pencil.svelte";
+export { default as Phone } from "./Phone.svelte";
+export { default as Picture } from "./Picture.svelte";
+export { default as Print } from "./Print.svelte";
+export { default as Redo } from "./Redo.svelte";
+export { default as Refresh } from "./Refresh.svelte";
+export { default as RefreshCircle } from "./RefreshCircle.svelte";
+export { default as Replace } from "./Replace.svelte";
+export { default as Report } from "./Report.svelte";
+export { default as Resource } from "./Resource.svelte";
+export { default as SEO } from "./SEO.svelte";
+export { default as Search } from "./Search.svelte";
+export { default as Settings } from "./Settings.svelte";
+export { default as Shop } from "./Shop.svelte";
+export { default as Smartphone } from "./Smartphone.svelte";
+export { default as Sort } from "./Sort.svelte";
+export { default as SpacingL } from "./SpacingL.svelte";
+export { default as SpacingM } from "./SpacingM.svelte";
+export { default as SpacingNone } from "./SpacingNone.svelte";
+export { default as SpacingS } from "./SpacingS.svelte";
+export { default as SpacingXL } from "./SpacingXL.svelte";
+export { default as Star } from "./Star.svelte";
+export { default as StyleGuide } from "./StyleGuide.svelte";
+export { default as Tablet } from "./Tablet.svelte";
+export { default as Translate } from "./Translate.svelte";
+export { default as TranslateCrossed } from "./TranslateCrossed.svelte";
+export { default as Trash } from "./Trash.svelte";
+export { default as Underline } from "./Underline.svelte";
+export { default as Undo } from "./Undo.svelte";
+export { default as WebslineSupport } from "./WebslineSupport.svelte";
+export { default as Width } from "./Width.svelte";

package/dist/components/atoms/icon/index.js

@@ -1,12 +1,7 @@
 // paths within the components folder are imported as component names automatically
 // e.g. ./components/subDir/testIcon.svelte -> subDirTestIcon
 // Check the icon story in Storybook to easily extract the icon name
-// NOTE: this doesn't return anything outside of this package, so a custom import is required in the consuming project
-const moduleRegistry = import.meta.glob("./**/*.svelte", {
-	eager: true,
-	base: "./components",
-	import: "default",
-});
+import * as moduleRegistry from "./components/index.js";
 
 const registry = {};
 

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -44,31 +44,30 @@
 	});
 </script>
 
-<div class={stylesByVariant.base({ class: baseClass })} {...rest}>
-	<button
-		class={stylesByVariant.button({ class: className })}
-		role="tab"
-		onclick={() => {
-			store.update(localeValue);
-		}}
-		type="button">
+<button
+	class={stylesByVariant.base({ class: baseClass || className })}
+	role="tab"
+	onclick={() => {
+		store.update(localeValue);
+	}}
+	type="button"
+	{...rest}>
+	{#if icon}
+		<Icon
+			class={stylesByVariant.icon()}
+			name={icon}
+			size={variant === "tabs" || size === "small" ? 16 : 24} />
+	{/if}
+	{#if children}
 		<div class={stylesByVariant.content()}>
-			{#if icon}
-				<Icon
-					class={stylesByVariant.icon()}
-					name={icon}
-					size={variant === "tabs" || size === "small" ? 16 : 24} />
-			{/if}
-			<span class={stylesByVariant.span()}>
-				{@render children?.()}
-			</span>
+			{@render children()}
 		</div>
-		{#if isActive}
-			<div
-				class={stylesByVariant.trigger({ appearance })}
-				in:send={{ key: "active-tab" }}
-				out:receive={{ key: "active-tab" }}>
-			</div>
-		{/if}
-	</button>
-</div>
+	{/if}
+	{#if isActive}
+		<div
+			class={stylesByVariant.trigger({ appearance })}
+			in:send={{ key: "active-tab" }}
+			out:receive={{ key: "active-tab" }}>
+		</div>
+	{/if}
+</button>

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts

@@ -1,161 +1,131 @@
 export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     size: {
-        small: {
-            button: string;
-        };
         medium: {
-            button: string;
-            span: string;
+            content: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, {
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     size: {
-        small: {
-            button: string;
-        };
         medium: {
-            button: string;
-            span: string;
+            content: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     size: {
-        small: {
-            button: string;
-        };
         medium: {
-            button: string;
-            span: string;
+            content: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;
 export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, {
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js

@@ -2,36 +2,28 @@ import { tv } from "../../../utils/tailwind.js";
 
 const toggleGroupItemVariants = tv({
 	slots: {
-		base: "relative h-full whitespace-nowrap",
-		button:
-			"block h-full cursor-pointer rounded-sm bg-transparent ui-select-label font-medium transition-[background,color]",
-		content: "relative z-2 flex items-center justify-center",
-		icon: "shrink-0",
-		span: "",
+		base: "relative inline-flex h-full cursor-pointer items-center justify-center rounded-sm bg-transparent px-1 ui-select-label font-medium whitespace-nowrap transition-[background,color]",
+		content: "relative z-2",
+		icon: "relative z-2 shrink-0",
 		trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-neutral-900 dark:text-neutral-200",
+				base: "text-neutral-900 dark:text-neutral-200",
 			},
 			false: {
-				button: "text-neutral-500",
+				base: "text-neutral-500",
 			},
 		},
 		size: {
-			small: {
-				button: "px-1",
-			},
 			medium: {
-				button: "px-2.5",
-				span: "px-2",
+				content: "px-2",
 			},
 		},
 		width: {
 			full: {
 				base: "w-full",
-				button: "w-full",
 			},
 		},
 	},
@@ -39,16 +31,14 @@ const toggleGroupItemVariants = tv({
 		{
 			appearance: "default",
 			class: {
-				button:
-					"hover:bg-neutral-300 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
+				base: "hover:bg-neutral-300 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
 				trigger: "dark:bg-neutral-700",
 			},
 		},
 		{
 			appearance: "raised",
 			class: {
-				button:
-					"hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
+				base: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
 				trigger: "dark:bg-neutral-800",
 			},
 		},
@@ -57,26 +47,23 @@ const toggleGroupItemVariants = tv({
 
 const toggleGroupItemTabVariants = tv({
 	slots: {
-		base: "relative h-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
-		button: "h-full cursor-pointer ui-button-default transition-[color]",
-		content: "flex items-center justify-center gap-1",
+		base: "relative inline-flex h-full cursor-pointer items-center justify-center gap-1 ui-button-default whitespace-nowrap transition-[color]",
+		content: "",
 		icon: "shrink-0",
-		span: "",
 		trigger: "absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-current",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-current",
+				base: "text-neutral-900 dark:text-neutral-200",
 			},
 			false: {
-				button: "text-neutral-500 hover:text-current",
+				base: "text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-200",
 			},
 		},
 		width: {
 			full: {
 				base: "w-full",
-				button: "w-full",
 			},
 		},
 	},

package/dist/index.css

@@ -0,0 +1,222 @@
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@utility display-1 {
+	font-size: 2.5625rem;
+	font-weight: 400;
+	letter-spacing: -0.05em;
+	line-height: 1.25;
+}
+@utility display-2 {
+	font-size: 2.125rem;
+	font-weight: 400;
+	letter-spacing: -0.05em;
+	line-height: 1.25;
+}
+
+@utility heading-h1 {
+	font-size: 1.75rem;
+	font-weight: 500;
+	letter-spacing: -0.04em;
+	line-height: 1.25;
+}
+@utility heading-h2 {
+	font-size: 1.4375rem;
+	font-weight: 500;
+	letter-spacing: -0.03em;
+	line-height: 1.28;
+}
+@utility heading-h3 {
+	font-size: 1.1875rem;
+	font-weight: 500;
+	letter-spacing: -0.01em;
+	line-height: 1.25;
+}
+@utility heading-h4 {
+	font-size: 1rem;
+	font-weight: 500;
+	letter-spacing: 0em;
+	line-height: 1.25;
+}
+
+@utility body-lead {
+	font-size: 1.2rem;
+	font-weight: 400;
+	letter-spacing: -0.01em;
+	line-height: 1.4;
+}
+@utility body-default {
+	font-size: 1rem;
+	font-weight: 400;
+	letter-spacing: 0em;
+	line-height: 1.5;
+}
+@utility body-small {
+	font-size: 0.875rem;
+	font-weight: 400;
+	letter-spacing: 0em;
+	line-height: 1.5;
+}
+
+@utility ui-title-1 {
+	font-size: 1.1875rem;
+	font-weight: 500;
+	letter-spacing: -0.01em;
+	line-height: 1.25;
+}
+@utility ui-title-2 {
+	font-size: 1rem;
+	font-weight: 500;
+	letter-spacing: 0em;
+	line-height: 1.25;
+}
+@utility ui-select-label {
+	font-size: 0.875rem;
+	font-weight: 400;
+	letter-spacing: 0.005em;
+	line-height: 1.4;
+}
+@utility ui-caption-helper {
+	font-size: 0.75rem;
+	font-weight: 400;
+	letter-spacing: 0.02em;
+	line-height: 1.5;
+}
+@utility ui-button-default {
+	font-size: 0.875rem;
+	font-weight: 500;
+	letter-spacing: 0.005em;
+	line-height: 1.4;
+}
+@utility ui-button-small {
+	font-size: 0.75rem;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+	line-height: 1.5;
+}
+@utility ui-tag-badge {
+	font-size: 0.75rem;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+	line-height: 1.4;
+}
+
+/* ==========================================================================
+	Z-INDEX UTILITIES
+	--------------------------------------------------------------------------
+	- AppBar sits above the main content
+	- Drawer overlays the AppBar
+	- Modal covers everything except Snackbar and Tooltip
+	- Snackbar appears above Modals
+	- Tooltip is always the topmost layer
+	========================================================================== */
+
+@utility z-appbar {
+	z-index: 1100;
+}
+@utility z-drawer {
+	z-index: 1200;
+}
+@utility z-modal-backdrop {
+	z-index: calc(1299 + var(--bits-dialog-depth, 0));
+}
+@utility z-modal {
+	z-index: calc(1300 + var(--bits-dialog-depth, 0));
+}
+@utility z-snackbar {
+	z-index: 1400;
+}
+@utility z-tooltip {
+	z-index: 1500;
+}
+
+@theme {
+	--font-body: "Borna", "sans-serif";
+	--font-sans: "Borna", sans-serif;
+
+	/* Box Shadows */
+
+	--shadow-sm: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
+	--shadow-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
+
+	/* Neutral Colors */
+	--color-neutral-50: #ffffff;
+	--color-neutral-100: #f1f1f2;
+	--color-neutral-200: #e4e4e2;
+	--color-neutral-300: #dadad8;
+	--color-neutral-400: #c1bfb8;
+	--color-neutral-500: #92908d;
+	--color-neutral-600: #75736f;
+	--color-neutral-700: #464441;
+	--color-neutral-800: #232220;
+	--color-neutral-900: #121110;
+	--color-neutral-1000: #000000;
+
+	/* Blue */
+	--color-blue-100: #d8efff;
+	--color-blue-200: #bce1ff;
+	--color-blue-300: #7fc1fd;
+	--color-blue-400: #3194fe;
+	--color-blue-500: #0000ff;
+	--color-blue-600: #00069f;
+	--color-blue-700: #00056f;
+	--color-blue-800: #00033f;
+	--color-blue-900: #000227;
+
+	/* Yellow */
+	--color-yellow-100: #fff3cd;
+	--color-yellow-200: #fff69c;
+	--color-yellow-300: #ffda6a;
+	--color-yellow-400: #ffcd39;
+	--color-yellow-500: #ffc107;
+	--color-yellow-600: #cc9a06;
+	--color-yellow-700: #997404;
+	--color-yellow-800: #664d03;
+	--color-yellow-900: #332701;
+
+	/* Orange */
+	--color-orange-100: #fae2d2;
+	--color-orange-200: #f5cda5;
+	--color-orange-300: #f2b67a;
+	--color-orange-400: #ee9e51;
+	--color-orange-500: #eb8632;
+	--color-orange-600: #bc6b27;
+	--color-orange-700: #8d511c;
+	--color-orange-800: #5e3512;
+	--color-orange-900: #2f1a07;
+
+	/* Red */
+	--color-red-100: #facbbf;
+	--color-red-200: #f6ad99;
+	--color-red-300: #f38e74;
+	--color-red-400: #ef704e;
+	--color-red-500: #ec5228;
+	--color-red-600: #ca4522;
+	--color-red-700: #872c14;
+	--color-red-800: #65200d;
+	--color-red-900: #431306;
+
+	/* Purple */
+	--color-purple-100: #ddcffa;
+	--color-purple-200: #bca0f6;
+	--color-purple-300: #9b72f1;
+	--color-purple-400: #7b43ee;
+	--color-purple-500: #5d15eb;
+	--color-purple-600: #4a11bc;
+	--color-purple-700: #370d8d;
+	--color-purple-800: #25075e;
+	--color-purple-900: #12032e;
+
+	/* Green */
+	--color-green-100: #e0eed4;
+	--color-green-200: #c5deaf;
+	--color-green-300: #abcf8b;
+	--color-green-400: #90bf66;
+	--color-green-500: #76b041;
+	--color-green-600: #5e8d34;
+	--color-green-700: #476a27;
+	--color-green-800: #2f461a;
+	--color-green-900: #18230d;
+}

package/dist/webfonts.css

@@ -0,0 +1,83 @@
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-regular-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-regular-webfont.woff")
+			format("woff");
+	font-weight: 400;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-regularitalic-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-regularitalic-webfont.woff")
+			format("woff");
+	font-weight: 400;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-medium-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-medium-webfont.woff")
+			format("woff");
+	font-weight: 500;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-mediumitalic-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-mediumitalic-webfont.woff")
+			format("woff");
+	font-weight: 500;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-semibold-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-semibold-webfont.woff")
+			format("woff");
+	font-weight: 600;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-semibolditalic-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-semibolditalic-webfont.woff")
+			format("woff");
+	font-weight: 600;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-bold-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-bold-webfont.woff")
+			format("woff");
+	font-weight: 700;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Borna";
+	src:
+		url("@websline/system-components/assets/fonts/borna-bolditalic-webfont.woff2")
+			format("woff2"),
+		url("@websline/system-components/assets/fonts/borna-bolditalic-webfont.woff")
+			format("woff");
+	font-weight: 700;
+	font-style: italic;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.23",
+  "version": "1.3.25",
   "publishConfig": {
     "access": "public"
   },
@@ -22,18 +22,25 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "svelte": "./dist/index.js",
+      "style": "./dist/index.css"
+    },
+    "./assets/*": "./dist/assets/*",
+    "./components/*": "./dist/components/*",
+    "./utils/*": "./dist/utils/*",
+    "./webfonts.css": {
+      "style": "./dist/webfonts.css"
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.20.2",
-    "@tiptap/extension-color": "^3.20.2",
-    "@tiptap/extension-highlight": "^3.20.2",
-    "@tiptap/extension-placeholder": "^3.20.2",
-    "@tiptap/extension-text-align": "^3.20.2",
-    "@tiptap/extension-text-style": "^3.20.2",
-    "@tiptap/pm": "^3.20.2",
-    "@tiptap/starter-kit": "^3.20.2",
+    "@tiptap/core": "^3.20.4",
+    "@tiptap/extension-color": "^3.20.4",
+    "@tiptap/extension-highlight": "^3.20.4",
+    "@tiptap/extension-placeholder": "^3.20.4",
+    "@tiptap/extension-text-align": "^3.20.4",
+    "@tiptap/extension-text-style": "^3.20.4",
+    "@tiptap/pm": "^3.20.4",
+    "@tiptap/starter-kit": "^3.20.4",
     "bits-ui": "^2.16.3",
     "dompurify": "^3.3.3",
     "tailwind-variants": "^3.2.2",
@@ -44,23 +51,23 @@
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.3",
-    "@eslint/js": "^9.39.4",
-    "@storybook/addon-a11y": "^10.2.19",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/addon-svelte-csf": "^5.0.11",
-    "@storybook/sveltekit": "^10.2.19",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.3.0",
+    "@storybook/addon-docs": "^10.3.0",
+    "@storybook/addon-svelte-csf": "^5.0.12",
+    "@storybook/sveltekit": "^10.3.0",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^25.5.0",
     "@vitest/browser": "^4.1.0",
-    "eslint": "^9.39.4",
+    "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.2.19",
+    "eslint-plugin-storybook": "^10.3.0",
     "eslint-plugin-svelte": "^3.15.2",
     "globals": "^17.4.0",
     "playwright": "^1.58.2",
@@ -69,11 +76,11 @@
     "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.18",
-    "storybook": "^10.2.19",
-    "svelte": "^5.53.12",
-    "tailwindcss": "^4.2.1",
+    "storybook": "^10.3.0",
+    "svelte": "^5.54.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.1",
     "vitest": "^4.1.0",
     "vitest-browser-svelte": "^2.1.0"
   },
@@ -82,7 +89,7 @@
   ],
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && npm run prepack",
+    "build": "vite build",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
     "test:unit": "vitest",