From bb57ba8dd2d74485ae6c76b7d161427736db0c9c Mon Sep 17 00:00:00 2001
From: StudioCMS <no-reply@studiocms.dev>
Date: Sun, 8 Dec 2024 09:25:31 +0000
Subject: [PATCH] [ci] lint

---
 docs/scripts/lib/utils.ts                     |  24 +-
 docs/src/components/Youtube.astro             |  16 +-
 docs/src/components/icons/GitHubIcon.astro    |   4 +-
 docs/src/components/landing/HeroSection.astro |  24 +-
 docs/src/components/landing/PageHeader.astro  |   8 +-
 .../components/landing/SocialProofCard.astro  |  18 +-
 .../landing/SocialProofSection.astro          |   4 +-
 docs/src/components/landing/styles.css        |  10 +-
 .../src/components/Checkbox.astro             |   2 +-
 .../studiocms_ui/src/components/Divider.astro |   4 +-
 .../src/components/Dropdown/Dropdown.astro    |  21 +-
 .../src/components/Dropdown/dropdown.ts       |   2 +-
 .../studiocms_ui/src/components/Footer.astro  |  16 +-
 .../studiocms_ui/src/components/Input.astro   |   2 +-
 .../src/components/Modal/Modal.astro          |  15 +-
 .../src/components/Modal/modal.ts             |   5 +-
 .../src/components/RadioGroup.astro           |   4 +-
 .../studiocms_ui/src/components/Row.astro     |   2 +-
 .../src/components/SearchSelect.astro         |   8 +-
 .../studiocms_ui/src/components/Select.astro  |   6 +-
 .../src/components/Sidebar/Single.astro       |   4 +-
 .../src/components/Sidebar/helpers.ts         |   2 +-
 .../src/components/Textarea.astro             |   6 +-
 .../src/components/ThemeToggle.astro          |   6 +-
 .../src/components/Toast/Toaster.astro        |   2 +-
 .../studiocms_ui/src/components/Toggle.astro  |   2 +-
 .../studiocms_ui/src/components/User.astro    |   4 +-
 packages/studiocms_ui/src/components/index.ts |  44 ++--
 .../studiocms_ui/src/layouts/RootLayout.astro |   2 +-
 packages/studiocms_ui/src/types/index.ts      |   2 +-
 .../studiocms_ui/src/utils/ThemeHelper.ts     | 248 +++++++++---------
 playground/astro.config.mts                   |   4 +-
 scripts/filter-warnings.cjs                   |  15 +-
 33 files changed, 278 insertions(+), 258 deletions(-)

diff --git a/docs/scripts/lib/utils.ts b/docs/scripts/lib/utils.ts
index e1ab91a..3fd6ef3 100644
--- a/docs/scripts/lib/utils.ts
+++ b/docs/scripts/lib/utils.ts
@@ -1,21 +1,21 @@
-import fs from 'node:fs'
-import { EOL } from 'node:os'
+import fs from 'node:fs';
+import { EOL } from 'node:os';
 
 export function normalizeLineEndings(contents: string) {
-	return contents.replace(/\r\n/g, '\n')
+	return contents.replace(/\r\n/g, '\n');
 }
 
 export function splitLines(contents: string) {
-	return normalizeLineEndings(contents).split(/\n/)
+	return normalizeLineEndings(contents).split(/\n/);
 }
 
 export function readFileLines(filePath: string) {
-	return splitLines(fs.readFileSync(filePath, 'utf8'))
+	return splitLines(fs.readFileSync(filePath, 'utf8'));
 }
 
 export function writeFileLines(filePath: string, lines: string | string[]) {
-	const normalizedLines = splitLines(Array.isArray(lines) ? lines.join('\n') : lines)
-	fs.writeFileSync(filePath, normalizedLines.join(EOL))
+	const normalizedLines = splitLines(Array.isArray(lines) ? lines.join('\n') : lines);
+	fs.writeFileSync(filePath, normalizedLines.join(EOL));
 }
 
 /**
@@ -29,10 +29,10 @@ export function serializeStringWithSingleQuotes(input: string): string {
 			'\n': '\\n',
 			'\r': '\\r',
 			'\t': '\\t',
-		}
+		};
 
-		return escapeMap[match] || match
-	})
+		return escapeMap[match] || match;
+	});
 
-	return `'${escapedString}'`
-}
\ No newline at end of file
+	return `'${escapedString}'`;
+}
diff --git a/docs/src/components/Youtube.astro b/docs/src/components/Youtube.astro
index ea35f96..6e16aac 100644
--- a/docs/src/components/Youtube.astro
+++ b/docs/src/components/Youtube.astro
@@ -1,12 +1,12 @@
 ---
-import { YouTube } from 'astro-embed';
-
-interface Props {
-	id: string;
-	title?: string;
-}
-
-const { id, title } = Astro.props;
+import { YouTube } from 'astro-embed';
+
+interface Props {
+	id: string;
+	title?: string;
+}
+
+const { id, title } = Astro.props;
 ---
 <YouTube id={id} title={title} />
 
diff --git a/docs/src/components/icons/GitHubIcon.astro b/docs/src/components/icons/GitHubIcon.astro
index 7406d9a..1a73477 100644
--- a/docs/src/components/icons/GitHubIcon.astro
+++ b/docs/src/components/icons/GitHubIcon.astro
@@ -2,8 +2,8 @@
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'svg'> {
-  width?: number;
-  height?: number;
+	width?: number;
+	height?: number;
 }
 
 const { width = 98, height = 96, ...props } = Astro.props;
diff --git a/docs/src/components/landing/HeroSection.astro b/docs/src/components/landing/HeroSection.astro
index 3343ca0..d3dd85c 100644
--- a/docs/src/components/landing/HeroSection.astro
+++ b/docs/src/components/landing/HeroSection.astro
@@ -1,17 +1,17 @@
 ---
 import {
-  Button,
-  Checkbox,
-  Divider,
-  Dropdown,
-  Input,
-  RadioGroup,
-  SearchSelect,
-  Select,
-  Textarea,
-  ThemeToggle,
-  Toggle,
-  User
+	Button,
+	Checkbox,
+	Divider,
+	Dropdown,
+	Input,
+	RadioGroup,
+	SearchSelect,
+	Select,
+	Textarea,
+	ThemeToggle,
+	Toggle,
+	User,
 } from '@studiocms/ui/components';
 
 import Icon from '@studiocms/ui/utils/Icon.astro';
diff --git a/docs/src/components/landing/PageHeader.astro b/docs/src/components/landing/PageHeader.astro
index 5f80f6d..867282d 100644
--- a/docs/src/components/landing/PageHeader.astro
+++ b/docs/src/components/landing/PageHeader.astro
@@ -1,11 +1,11 @@
 ---
 import Icon from '@studiocms/ui/utils/Icon.astro';
-import type { HeroIconName } from '@studiocms/ui/utils/iconType.js'
+import type { HeroIconName } from '@studiocms/ui/utils/iconType.js';
 
 interface Props {
-  icon: HeroIconName;
-  title: string;
-  subtitle?: string;
+	icon: HeroIconName;
+	title: string;
+	subtitle?: string;
 }
 
 const { icon, title, subtitle } = Astro.props;
diff --git a/docs/src/components/landing/SocialProofCard.astro b/docs/src/components/landing/SocialProofCard.astro
index 6c92f58..cbd2501 100644
--- a/docs/src/components/landing/SocialProofCard.astro
+++ b/docs/src/components/landing/SocialProofCard.astro
@@ -2,15 +2,15 @@
 import { Image } from 'astro:assets';
 
 interface Props {
-  avatar: string;
-  name: string;
-  handle: string;
-  message: string;
-  image?: {
-    path: string;
-    width: number;
-    height: number;
-  };
+	avatar: string;
+	name: string;
+	handle: string;
+	message: string;
+	image?: {
+		path: string;
+		width: number;
+		height: number;
+	};
 }
 
 const { avatar, name, handle, message, image } = Astro.props;
diff --git a/docs/src/components/landing/SocialProofSection.astro b/docs/src/components/landing/SocialProofSection.astro
index 4e1a734..9487a46 100644
--- a/docs/src/components/landing/SocialProofSection.astro
+++ b/docs/src/components/landing/SocialProofSection.astro
@@ -10,8 +10,8 @@ const chunkSize = socialProofEntries.length / 3;
 const chunkedSocialProofEntries = [];
 
 for (let i = 0; i < socialProofEntries.length; i += chunkSize) {
-    const chunk = socialProofEntries.slice(i, i + chunkSize);
-    chunkedSocialProofEntries.push(chunk);
+	const chunk = socialProofEntries.slice(i, i + chunkSize);
+	chunkedSocialProofEntries.push(chunk);
 }
 ---
 <section class="social-proof not-content">
diff --git a/docs/src/components/landing/styles.css b/docs/src/components/landing/styles.css
index 4df9b59..a3ee449 100644
--- a/docs/src/components/landing/styles.css
+++ b/docs/src/components/landing/styles.css
@@ -1,10 +1,10 @@
 form {
-  padding: 1.5rem;
-  background: hsl(var(--background-base)); 
+	padding: 1.5rem;
+	background: hsl(var(--background-base));
 }
 
 form > span {
-  font-size: 1.5em;
-  font-weight: 700;
-  margin-bottom: .75rem;
+	font-size: 1.5em;
+	font-weight: 700;
+	margin-bottom: .75rem;
 }
diff --git a/packages/studiocms_ui/src/components/Checkbox.astro b/packages/studiocms_ui/src/components/Checkbox.astro
index cafc98f..80e8c7e 100644
--- a/packages/studiocms_ui/src/components/Checkbox.astro
+++ b/packages/studiocms_ui/src/components/Checkbox.astro
@@ -11,7 +11,7 @@ interface Props {
 	disabled?: boolean;
 	name?: string;
 	isRequired?: boolean;
-};
+}
 
 const {
 	size = 'md',
diff --git a/packages/studiocms_ui/src/components/Divider.astro b/packages/studiocms_ui/src/components/Divider.astro
index e3b1c5f..53428cd 100644
--- a/packages/studiocms_ui/src/components/Divider.astro
+++ b/packages/studiocms_ui/src/components/Divider.astro
@@ -1,7 +1,7 @@
 ---
 interface Props {
-  background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
-};
+	background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
+}
 
 const { background = 'background-base' } = Astro.props;
 ---
diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
index adce91b..7e2bd99 100644
--- a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
+++ b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
@@ -8,9 +8,9 @@ interface Option {
 	value: string;
 	disabled?: boolean;
 	color?: StudioCMSColorway;
-  icon?: HeroIconName;
-  href?: string;
-};
+	icon?: HeroIconName;
+	href?: string;
+}
 
 interface Props {
 	options: Option[];
@@ -18,10 +18,17 @@ interface Props {
 	id: string;
 	align?: 'start' | 'center' | 'end';
 	triggerOn?: 'left' | 'right' | 'both';
-  offset?: number;
-};
-
-const { options, disabled = false, align = 'center', id, triggerOn = 'left', offset = 0 } = Astro.props;
+	offset?: number;
+}
+
+const {
+	options,
+	disabled = false,
+	align = 'center',
+	id,
+	triggerOn = 'left',
+	offset = 0,
+} = Astro.props;
 ---
 <div 
   class="sui-dropdown-container"
diff --git a/packages/studiocms_ui/src/components/Dropdown/dropdown.ts b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
index 048243a..8c948f0 100644
--- a/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
+++ b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
@@ -6,7 +6,7 @@ class DropdownHelper {
 	private alignment: 'start' | 'center' | 'end';
 	private triggerOn: 'left' | 'right' | 'both';
 	private fullWidth = false;
-	
+
 	active = false;
 
 	constructor(id: string, fullWidth?: boolean) {
diff --git a/packages/studiocms_ui/src/components/Footer.astro b/packages/studiocms_ui/src/components/Footer.astro
index 91487b3..fcd96d8 100644
--- a/packages/studiocms_ui/src/components/Footer.astro
+++ b/packages/studiocms_ui/src/components/Footer.astro
@@ -1,14 +1,14 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'footer'> {
-  links: {
-    [label: string]: {
-      label: string;
-      href: string;
-    }[];
-  },
-  copyright: string;
+	links: {
+		[label: string]: {
+			label: string;
+			href: string;
+		}[];
+	};
+	copyright: string;
 }
 
 const { copyright, links, ...props } = Astro.props;
diff --git a/packages/studiocms_ui/src/components/Input.astro b/packages/studiocms_ui/src/components/Input.astro
index de55cf8..55a37f5 100644
--- a/packages/studiocms_ui/src/components/Input.astro
+++ b/packages/studiocms_ui/src/components/Input.astro
@@ -11,7 +11,7 @@ interface Props extends HTMLAttributes<'input'> {
 	disabled?: boolean;
 	defaultValue?: string;
 	class?: string;
-};
+}
 
 const {
 	label,
diff --git a/packages/studiocms_ui/src/components/Modal/Modal.astro b/packages/studiocms_ui/src/components/Modal/Modal.astro
index 0969fed..478d922 100644
--- a/packages/studiocms_ui/src/components/Modal/Modal.astro
+++ b/packages/studiocms_ui/src/components/Modal/Modal.astro
@@ -4,8 +4,8 @@ import Icon from '../../utils/Icon.astro';
 import Button from '../Button.astro';
 
 interface ButtonType {
-  label: string;
-  color: StudioCMSColorway;
+	label: string;
+	color: StudioCMSColorway;
 }
 
 interface Props {
@@ -15,9 +15,16 @@ interface Props {
 	cancelButton?: string | ButtonType;
 	actionButton?: string | ButtonType;
 	isForm?: boolean;
-};
+}
 
-const { id, size = 'md', dismissable = true, isForm = false, cancelButton, actionButton } = Astro.props;
+const {
+	id,
+	size = 'md',
+	dismissable = true,
+	isForm = false,
+	cancelButton,
+	actionButton,
+} = Astro.props;
 ---
 <dialog
   popover
diff --git a/packages/studiocms_ui/src/components/Modal/modal.ts b/packages/studiocms_ui/src/components/Modal/modal.ts
index ca99a8f..170822b 100644
--- a/packages/studiocms_ui/src/components/Modal/modal.ts
+++ b/packages/studiocms_ui/src/components/Modal/modal.ts
@@ -33,7 +33,10 @@ class ModalHelper {
 	}
 
 	private addButtonListeners = (id: string, dismissable: boolean) => {
-		if (dismissable || (!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton)) {
+		if (
+			dismissable ||
+			(!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton)
+		) {
 			const xMarkButton = document.getElementById(`${id}-btn-x`) as HTMLButtonElement;
 			xMarkButton.addEventListener('click', this.hide);
 		}
diff --git a/packages/studiocms_ui/src/components/RadioGroup.astro b/packages/studiocms_ui/src/components/RadioGroup.astro
index b80107f..7328e5f 100644
--- a/packages/studiocms_ui/src/components/RadioGroup.astro
+++ b/packages/studiocms_ui/src/components/RadioGroup.astro
@@ -6,7 +6,7 @@ interface Option {
 	label: string;
 	value: string;
 	disabled?: boolean;
-};
+}
 
 interface Props {
 	label: string;
@@ -18,7 +18,7 @@ interface Props {
 	isRequired?: boolean;
 	horizontal?: boolean;
 	class?: string;
-};
+}
 
 const {
 	label,
diff --git a/packages/studiocms_ui/src/components/Row.astro b/packages/studiocms_ui/src/components/Row.astro
index fe52fa3..57cd750 100644
--- a/packages/studiocms_ui/src/components/Row.astro
+++ b/packages/studiocms_ui/src/components/Row.astro
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'astro/types';
 interface Props extends HTMLAttributes<'div'> {
 	alignCenter?: boolean;
 	gapSize?: 'sm' | 'md' | 'lg';
-};
+}
 
 const { alignCenter, gapSize = 'md', ...props } = Astro.props;
 ---
diff --git a/packages/studiocms_ui/src/components/SearchSelect.astro b/packages/studiocms_ui/src/components/SearchSelect.astro
index b5c4dfd..dd8cfe7 100644
--- a/packages/studiocms_ui/src/components/SearchSelect.astro
+++ b/packages/studiocms_ui/src/components/SearchSelect.astro
@@ -7,7 +7,7 @@ interface Option {
 	label: string;
 	value: string;
 	disabled?: boolean;
-};
+}
 
 interface Props {
 	label?: string;
@@ -18,8 +18,8 @@ interface Props {
 	options: Option[];
 	disabled?: boolean;
 	fullWidth?: boolean;
-    placeholder?: string;
-};
+	placeholder?: string;
+}
 
 const {
 	label,
@@ -30,7 +30,7 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
-    placeholder
+	placeholder,
 } = Astro.props;
 ---
 
diff --git a/packages/studiocms_ui/src/components/Select.astro b/packages/studiocms_ui/src/components/Select.astro
index 9bf7be2..e21631b 100644
--- a/packages/studiocms_ui/src/components/Select.astro
+++ b/packages/studiocms_ui/src/components/Select.astro
@@ -6,7 +6,7 @@ interface Option {
 	label: string;
 	value: string;
 	disabled?: boolean;
-};
+}
 
 interface Props {
 	label?: string;
@@ -18,7 +18,7 @@ interface Props {
 	disabled?: boolean;
 	fullWidth?: boolean;
 	placeholder?: string;
-};
+}
 
 const {
 	label,
@@ -29,7 +29,7 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
-    placeholder
+	placeholder,
 } = Astro.props;
 ---
 
diff --git a/packages/studiocms_ui/src/components/Sidebar/Single.astro b/packages/studiocms_ui/src/components/Sidebar/Single.astro
index 3e5a68f..a91e48b 100644
--- a/packages/studiocms_ui/src/components/Sidebar/Single.astro
+++ b/packages/studiocms_ui/src/components/Sidebar/Single.astro
@@ -1,7 +1,7 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props extends Exclude<HTMLAttributes<'aside'>, 'id'> {};
+interface Props extends Exclude<HTMLAttributes<'aside'>, 'id'> {}
 
 const props = Astro.props;
 ---
diff --git a/packages/studiocms_ui/src/components/Sidebar/helpers.ts b/packages/studiocms_ui/src/components/Sidebar/helpers.ts
index 53ea389..0bec3a6 100644
--- a/packages/studiocms_ui/src/components/Sidebar/helpers.ts
+++ b/packages/studiocms_ui/src/components/Sidebar/helpers.ts
@@ -40,7 +40,7 @@ class SingleSidebarHelper {
 		this.sidebarToggle.addEventListener('click', () => {
 			this.sidebar.classList.toggle('active');
 		});
-	}
+	};
 
 	public hideSidebarOnClick = (elementID: string) => {
 		const element = document.getElementById(elementID);
diff --git a/packages/studiocms_ui/src/components/Textarea.astro b/packages/studiocms_ui/src/components/Textarea.astro
index 9a53f2e..db55285 100644
--- a/packages/studiocms_ui/src/components/Textarea.astro
+++ b/packages/studiocms_ui/src/components/Textarea.astro
@@ -12,19 +12,19 @@ interface Props extends HTMLAttributes<'textarea'> {
 	name?: string;
 	disabled?: boolean;
 	defaultValue?: string;
-};
+}
 
 const {
 	label,
 	placeholder,
 	isRequired,
 	fullWidth,
-  fullHeight,
+	fullHeight,
 	resize,
 	name = generateID('textarea'),
 	disabled,
 	defaultValue,
-  ...props
+	...props
 } = Astro.props;
 ---
 <label 
diff --git a/packages/studiocms_ui/src/components/ThemeToggle.astro b/packages/studiocms_ui/src/components/ThemeToggle.astro
index 23973ce..4d6bede 100644
--- a/packages/studiocms_ui/src/components/ThemeToggle.astro
+++ b/packages/studiocms_ui/src/components/ThemeToggle.astro
@@ -1,8 +1,8 @@
 ---
-import type { ComponentProps } from "astro/types";
-import Button from "./Button.astro";
+import type { ComponentProps } from 'astro/types';
+import Button from './Button.astro';
 
-interface Props extends ComponentProps<typeof Button> {};
+interface Props extends ComponentProps<typeof Button> {}
 
 const props = Astro.props;
 ---
diff --git a/packages/studiocms_ui/src/components/Toast/Toaster.astro b/packages/studiocms_ui/src/components/Toast/Toaster.astro
index 07e642c..4a12905 100644
--- a/packages/studiocms_ui/src/components/Toast/Toaster.astro
+++ b/packages/studiocms_ui/src/components/Toast/Toaster.astro
@@ -11,7 +11,7 @@ interface Props {
 	closeButton?: boolean;
 	offset?: number;
 	gap?: number;
-};
+}
 
 const {
 	position = 'top-center',
diff --git a/packages/studiocms_ui/src/components/Toggle.astro b/packages/studiocms_ui/src/components/Toggle.astro
index c9aa948..495b007 100644
--- a/packages/studiocms_ui/src/components/Toggle.astro
+++ b/packages/studiocms_ui/src/components/Toggle.astro
@@ -10,7 +10,7 @@ interface Props {
 	disabled?: boolean;
 	name?: string;
 	isRequired?: boolean;
-};
+}
 
 const {
 	size = 'md',
diff --git a/packages/studiocms_ui/src/components/User.astro b/packages/studiocms_ui/src/components/User.astro
index 315e382..a1db51b 100644
--- a/packages/studiocms_ui/src/components/User.astro
+++ b/packages/studiocms_ui/src/components/User.astro
@@ -7,8 +7,8 @@ interface Props {
 	description: string;
 	avatar?: string;
 	class?: string;
-  loading?: 'eager' | 'lazy'; 
-};
+	loading?: 'eager' | 'lazy';
+}
 
 const { name, description, avatar, class: className, loading } = Astro.props;
 ---
diff --git a/packages/studiocms_ui/src/components/index.ts b/packages/studiocms_ui/src/components/index.ts
index 359e561..8083d81 100644
--- a/packages/studiocms_ui/src/components/index.ts
+++ b/packages/studiocms_ui/src/components/index.ts
@@ -1,26 +1,26 @@
-export { default as Button } from "./Button.astro";
-export { default as Divider } from "./Divider.astro";
-export { default as Input } from "./Input.astro";
-export { default as Row } from "./Row.astro";
-export { default as Center } from "./Center.astro";
-export { default as Textarea } from "./Textarea.astro";
-export { default as Checkbox } from "./Checkbox.astro";
-export { default as Toggle } from "./Toggle.astro";
-export { default as RadioGroup } from "./RadioGroup.astro";
-export { default as Toaster } from "./Toast/Toaster.astro";
-export { default as Card } from "./Card.astro";
-export { default as Modal } from "./Modal/Modal.astro";
-export { default as Select } from "./Select.astro";
-export { default as SearchSelect } from "./SearchSelect.astro";
-export { default as Dropdown } from "./Dropdown/Dropdown.astro";
-export { default as User } from "./User.astro";
+export { default as Button } from './Button.astro';
+export { default as Divider } from './Divider.astro';
+export { default as Input } from './Input.astro';
+export { default as Row } from './Row.astro';
+export { default as Center } from './Center.astro';
+export { default as Textarea } from './Textarea.astro';
+export { default as Checkbox } from './Checkbox.astro';
+export { default as Toggle } from './Toggle.astro';
+export { default as RadioGroup } from './RadioGroup.astro';
+export { default as Toaster } from './Toast/Toaster.astro';
+export { default as Card } from './Card.astro';
+export { default as Modal } from './Modal/Modal.astro';
+export { default as Select } from './Select.astro';
+export { default as SearchSelect } from './SearchSelect.astro';
+export { default as Dropdown } from './Dropdown/Dropdown.astro';
+export { default as User } from './User.astro';
 export { default as ThemeToggle } from './ThemeToggle.astro';
 export { default as Footer } from './Footer.astro';
 
-export { default as Sidebar } from "./Sidebar/Single.astro";
-export { default as DoubleSidebar } from "./Sidebar/Double.astro";
-export { SingleSidebarHelper, DoubleSidebarHelper } from "./Sidebar/helpers";
+export { default as Sidebar } from './Sidebar/Single.astro';
+export { default as DoubleSidebar } from './Sidebar/Double.astro';
+export { SingleSidebarHelper, DoubleSidebarHelper } from './Sidebar/helpers';
 
-export { toast } from "./Toast/toast";
-export { ModalHelper } from "./Modal/modal";
-export { DropdownHelper } from "./Dropdown/dropdown";
+export { toast } from './Toast/toast';
+export { ModalHelper } from './Modal/modal';
+export { DropdownHelper } from './Dropdown/dropdown';
diff --git a/packages/studiocms_ui/src/layouts/RootLayout.astro b/packages/studiocms_ui/src/layouts/RootLayout.astro
index 0c2da39..cc6727e 100644
--- a/packages/studiocms_ui/src/layouts/RootLayout.astro
+++ b/packages/studiocms_ui/src/layouts/RootLayout.astro
@@ -11,7 +11,7 @@ export interface RootLayoutProps {
 	headers?: HeadConfig | undefined;
 	lang?: string;
 	defaultTheme?: 'dark' | 'light';
-};
+}
 
 type Props = RootLayoutProps;
 
diff --git a/packages/studiocms_ui/src/types/index.ts b/packages/studiocms_ui/src/types/index.ts
index 1410825..2f95e94 100644
--- a/packages/studiocms_ui/src/types/index.ts
+++ b/packages/studiocms_ui/src/types/index.ts
@@ -8,4 +8,4 @@ export interface ToastProps {
 	duration?: number;
 	persistent?: boolean;
 	closeButton?: boolean;
-};
+}
diff --git a/packages/studiocms_ui/src/utils/ThemeHelper.ts b/packages/studiocms_ui/src/utils/ThemeHelper.ts
index 8e38e67..6867fb6 100644
--- a/packages/studiocms_ui/src/utils/ThemeHelper.ts
+++ b/packages/studiocms_ui/src/utils/ThemeHelper.ts
@@ -5,126 +5,134 @@ type ThemeChangeCallback = (newTheme: Theme, oldTheme: Theme) => void;
  * A helper to toggle, set and get the current StudioCMS UI theme.
  */
 class ThemeHelper {
-  private themeManagerElement: HTMLElement;
-  private observer: MutationObserver | undefined;
-  private themeChangeCallbacks: ThemeChangeCallback[] = [];
-
-  /**
-   * A helper to toggle, set and get the current StudioCMS UI theme.
-   * @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
-   */
-  constructor(themeProvider?: HTMLElement) {
-    this.themeManagerElement = themeProvider || document.documentElement;
-  }
-
-  /**
-   * Get the current theme.
-   * @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
-   * @returns {Theme} The current theme.
-   */
-  public getTheme = <T extends boolean>(resolveSystemTheme?: T): T extends true ? 'dark' | 'light' : Theme => {
-    const theme = this.themeManagerElement.dataset.theme as Theme || 'system';
-
-    if (!resolveSystemTheme) {
-      // Side note: Don't ask me why this type wizardry is needed but it gives proper return types so I don't care
-      return theme as T extends true ? 'dark' | 'light' : Theme; 
-    }
-    
-    if (this.themeManagerElement.dataset.theme !== 'system')  {
-      return this.themeManagerElement.dataset.theme as 'dark' | 'light';
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-      return 'light';
-    }
-
-    // This should (in theory) never happen since, at time of writing, window.matchMedia is supported
-    // by 96.83% of all browsers in use. (https://caniuse.com/mdn-api_window_matchmedia)
-    throw new Error('Unable to resolve theme. (Most likely cause: window.matchMedia is not supported by the browser)');
-  };
-
-  /**
-   * Sets the current theme.
-   * @param theme The new theme. One of `dark`, `light` or `system`.
-   */
-  public setTheme = (theme: Theme): void => {
-    this.themeManagerElement.dataset.theme = theme;
-  };
-
-  /**
-   * Toggles the current theme. 
-   * 
-   * If the theme is set to `system` (or no theme is set via the root element),
-   * the theme is set depending on the user's color scheme preference (set in the browser).
-   */
-  public toggleTheme = (): void => {
-    const theme = this.getTheme();
-
-    if (theme && theme === 'dark') {
-      this.setTheme('light');
-      return;
-    }
-
-    if (theme && theme === 'light') {
-      this.setTheme('dark');
-      return;
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      this.setTheme('light');
-      return;
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-      this.setTheme('dark');
-      return;
-    }
-  };
-
-  /**
-   * Register an element to act as a toggle! When clicked, it will toggle the theme.
-   * @param toggle The HTML element that should act as the toggle
-   */
-  public registerToggle = (toggle: HTMLElement | null): void => {
-    if (!toggle) {
-      console.error('Element passed to toggle registration does not exist.');
-      return;
-    };
-
-    if (!toggle.dataset.suiThemeToggle) {
-      toggle.addEventListener('click', this.toggleTheme);
-      toggle.dataset.suiThemeToggle = 'true';
-    }
-  };
-
-  /**
-   * Allows for adding a callback that gets called whenever the theme changes.
-   * @param callback The callback to be executed
-   */
-  public onThemeChange = (callback: ThemeChangeCallback): void => {
-    if (!this.observer) {
-      this.observer = new MutationObserver(this.themeManagerMutationHandler);
-      this.observer.observe(this.themeManagerElement, { attributes: true, attributeOldValue: true, attributeFilter: ['data-theme'] });
-    }
-
-    this.themeChangeCallbacks.push(callback);
-  };
-
-  /**
-   * Simply gets the first mutation and calls all registered callbacks. 
-   * @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
-   */
-  private themeManagerMutationHandler = (mutations: MutationRecord[]): void => {
-    if (!mutations[0]) return;
-
-    for (const callback of this.themeChangeCallbacks) {
-      callback(this.getTheme(), mutations[0].oldValue as Theme || 'system');
-    }
-  };
+	private themeManagerElement: HTMLElement;
+	private observer: MutationObserver | undefined;
+	private themeChangeCallbacks: ThemeChangeCallback[] = [];
+
+	/**
+	 * A helper to toggle, set and get the current StudioCMS UI theme.
+	 * @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
+	 */
+	constructor(themeProvider?: HTMLElement) {
+		this.themeManagerElement = themeProvider || document.documentElement;
+	}
+
+	/**
+	 * Get the current theme.
+	 * @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
+	 * @returns {Theme} The current theme.
+	 */
+	public getTheme = <T extends boolean>(
+		resolveSystemTheme?: T
+	): T extends true ? 'dark' | 'light' : Theme => {
+		const theme = (this.themeManagerElement.dataset.theme as Theme) || 'system';
+
+		if (!resolveSystemTheme) {
+			// Side note: Don't ask me why this type wizardry is needed but it gives proper return types so I don't care
+			return theme as T extends true ? 'dark' | 'light' : Theme;
+		}
+
+		if (this.themeManagerElement.dataset.theme !== 'system') {
+			return this.themeManagerElement.dataset.theme as 'dark' | 'light';
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+			return 'light';
+		}
+
+		// This should (in theory) never happen since, at time of writing, window.matchMedia is supported
+		// by 96.83% of all browsers in use. (https://caniuse.com/mdn-api_window_matchmedia)
+		throw new Error(
+			'Unable to resolve theme. (Most likely cause: window.matchMedia is not supported by the browser)'
+		);
+	};
+
+	/**
+	 * Sets the current theme.
+	 * @param theme The new theme. One of `dark`, `light` or `system`.
+	 */
+	public setTheme = (theme: Theme): void => {
+		this.themeManagerElement.dataset.theme = theme;
+	};
+
+	/**
+	 * Toggles the current theme.
+	 *
+	 * If the theme is set to `system` (or no theme is set via the root element),
+	 * the theme is set depending on the user's color scheme preference (set in the browser).
+	 */
+	public toggleTheme = (): void => {
+		const theme = this.getTheme();
+
+		if (theme && theme === 'dark') {
+			this.setTheme('light');
+			return;
+		}
+
+		if (theme && theme === 'light') {
+			this.setTheme('dark');
+			return;
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			this.setTheme('light');
+			return;
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+			this.setTheme('dark');
+			return;
+		}
+	};
+
+	/**
+	 * Register an element to act as a toggle! When clicked, it will toggle the theme.
+	 * @param toggle The HTML element that should act as the toggle
+	 */
+	public registerToggle = (toggle: HTMLElement | null): void => {
+		if (!toggle) {
+			console.error('Element passed to toggle registration does not exist.');
+			return;
+		}
+
+		if (!toggle.dataset.suiThemeToggle) {
+			toggle.addEventListener('click', this.toggleTheme);
+			toggle.dataset.suiThemeToggle = 'true';
+		}
+	};
+
+	/**
+	 * Allows for adding a callback that gets called whenever the theme changes.
+	 * @param callback The callback to be executed
+	 */
+	public onThemeChange = (callback: ThemeChangeCallback): void => {
+		if (!this.observer) {
+			this.observer = new MutationObserver(this.themeManagerMutationHandler);
+			this.observer.observe(this.themeManagerElement, {
+				attributes: true,
+				attributeOldValue: true,
+				attributeFilter: ['data-theme'],
+			});
+		}
+
+		this.themeChangeCallbacks.push(callback);
+	};
+
+	/**
+	 * Simply gets the first mutation and calls all registered callbacks.
+	 * @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
+	 */
+	private themeManagerMutationHandler = (mutations: MutationRecord[]): void => {
+		if (!mutations[0]) return;
+
+		for (const callback of this.themeChangeCallbacks) {
+			callback(this.getTheme(), (mutations[0].oldValue as Theme) || 'system');
+		}
+	};
 }
 
 export { ThemeHelper, type Theme };
diff --git a/playground/astro.config.mts b/playground/astro.config.mts
index c42a5c8..e5210f8 100644
--- a/playground/astro.config.mts
+++ b/playground/astro.config.mts
@@ -1,12 +1,12 @@
+import node from '@astrojs/node';
 import sentry from '@sentry/astro';
 import { defineConfig } from 'astro/config';
-import node from "@astrojs/node"
 
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://ui-testing.studiocms.dev',
 	adapter: node({
-		mode: "standalone",
+		mode: 'standalone',
 	}),
 	integrations: [
 		sentry({
diff --git a/scripts/filter-warnings.cjs b/scripts/filter-warnings.cjs
index d030338..0a41d57 100644
--- a/scripts/filter-warnings.cjs
+++ b/scripts/filter-warnings.cjs
@@ -7,22 +7,17 @@
  */
 
 // Remove Node's built-in `warning` listener which outputs all warnings to stderr
-process.removeAllListeners("warning");
+process.removeAllListeners('warning');
 
 // Add our own version that skips known warnings
-process.on("warning", (warning) => {
+process.on('warning', (warning) => {
 	const { name, message } = warning;
 	if (
-		name === "ExperimentalWarning" &&
-		(message.indexOf("--experimental-loader") > -1 ||
-			message.indexOf("Custom ESM Loaders") > -1)
-	)
-		return;
-	if (
-		name === "DeprecationWarning" &&
-		message.indexOf("Obsolete loader hook") > -1
+		name === 'ExperimentalWarning' &&
+		(message.indexOf('--experimental-loader') > -1 || message.indexOf('Custom ESM Loaders') > -1)
 	)
 		return;
+	if (name === 'DeprecationWarning' && message.indexOf('Obsolete loader hook') > -1) return;
 
 	console.warn(warning);
 });