@websline/system-components 1.3.22 → 1.3.24

package/dist/components/atoms/icon/components/TranslateCrossed.svelte

@@ -3,7 +3,7 @@
 	 * @typedef {Object} Props
 	 * @property {string} [color=""] Icon color
 	 * @property {number} [height=24] Icon height
-	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [strokeWidth=1.5] Icon StrokeWidth
 	 * @property {number} [width=24] Icon width
 	 */
 

package/dist/components/atoms/icon/components/Trash.svelte

@@ -3,7 +3,7 @@
 	 * @typedef {Object} Props
 	 * @property {string} [color=""] Icon color
 	 * @property {number} [height=24] Icon height
-	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [strokeWidth=1.5] Icon StrokeWidth
 	 * @property {number} [width=24] Icon width
 	 */
 

package/dist/components/atoms/icon/components/Underline.svelte

@@ -3,7 +3,7 @@
 	 * @typedef {Object} Props
 	 * @property {string} [color=""] Icon color
 	 * @property {number} [height=24] Icon height
-	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [strokeWidth=1.5] Icon StrokeWidth
 	 * @property {number} [width=24] Icon width
 	 */
 

package/dist/components/atoms/icon/components/Undo.svelte

@@ -3,7 +3,7 @@
 	 * @typedef {Object} Props
 	 * @property {string} [color=""] Icon color
 	 * @property {number} [height=24] Icon height
-	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [strokeWidth=1.5] Icon StrokeWidth
 	 * @property {number} [width=24] Icon width
 	 */
 

package/dist/components/atoms/icon/components/Width.svelte

@@ -3,7 +3,7 @@
 	 * @typedef {Object} Props
 	 * @property {string} [color=""] Icon color
 	 * @property {number} [height=24] Icon height
-	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [strokeWidth=1.5] Icon StrokeWidth
 	 * @property {number} [width=24] Icon width
 	 */
 

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.d.ts

@@ -3,5 +3,6 @@ export const registry: {};
 export const synonyms: {
     "checkbox-stack": string;
     "file-pdf": string;
+    plus: string;
     unlink: string;
 };

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

@@ -1,19 +1,15 @@
 // 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 = {};
 
-// e.g. for backwards compatibility
+// e.g. for backwards compatibility (left = synonym, right = target icon)
 const synonyms = {
 	"checkbox-stack": "checkboxStack",
 	"file-pdf": "filePDF",
+	plus: "add",
 	unlink: "connectCrossed",
 };
 

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;
+}