typescript-overlay-essentials 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-overlay-essentials",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet: \\n - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen), \\n - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann, \\n - [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat, \\n - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext, \\n - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann, \\n - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann, \\n - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird, \\n - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2), \\n - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat, \\n - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.",
   "keywords": [
     "typescript",
@@ -32,11 +32,26 @@
   "license": "ISC",
   "author": "Julian Koch",
   "type": "module",
-  "main": "index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"No test needed\""
+    "build": "tsc"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
     "react-select": "^5.10.2"
+  },
+  "peerDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   }
 }

package/.github/workflows/npm-publish.yml

@@ -1,32 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: typescript-overlay-essentials
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-      - run: npm ci
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/ConfirmationBox.css

@@ -1,69 +0,0 @@
-.confirmation-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10000;
-}
-
-.confirmation-box {
-    background-color: var(--Hellgrau, white);
-    color: var(--HellSchwarz,#2c2c2c);
-    padding: 2rem;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
-    max-width: 500px;
-    width: 90%;
-    text-align: center;
-    animation: fadeIn 0.3s ease-in-out;
-    position: relative;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.confirmation-box p {
-    margin-bottom: 0.5em;
-}
-
-.confirmation-box .headline {
-    margin-bottom: 0.75em;
-}
-
-.confirmation-box .confirmation-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-    .confirmation-box .confirmation-buttons button {
-        font-size: 85%;
-        padding: 0.5rem 1.1rem;
-    }
-
-.confirmation-box .closeButton {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-}
-
-    .confirmation-box .close-icon:hover {
-        color: var(--HSDAkzent);
-        cursor: pointer;
-    }
-

package/ConfirmationBox.tsx

@@ -1,148 +0,0 @@
-import { useEffect, useState, useRef, CSSProperties } from 'react';
-import * as React from 'react';
-import './ConfirmationBox.css';
-
-// Um die ConfirmationBox zu nutzen, muss der State die folgende Struktur haben:
-export interface ConfirmationBoxState {
-    headline?: string | undefined;
-    message?: string | undefined;
-    message1?: string | undefined;
-    message2?: string | undefined;
-    cancelButtonText?: string | undefined;
-    proceedButtonText?: string | undefined;
-    handlerOk?: ((args?: unknown) => void) | undefined;
-    handlerCancel?: ((args?: unknown) => void) | undefined;
-    handlerArgs?: unknown;
-    addCloseButton?: boolean | undefined;
-    activateConfirm?: boolean | undefined;
-    proceedButtonStyle?: CSSProperties | undefined;
-    cancelButtonStyle?: CSSProperties | undefined;
-}
-
-// Der standard ComfirmationBox Status, der zur Initialisierung genutzt werden kann
-export const defaultConfirmationState: ConfirmationBoxState = {
-    headline: undefined,
-    message: undefined,
-    message1: undefined,
-    message2: undefined,
-    cancelButtonText: undefined,
-    proceedButtonText: undefined,
-    handlerOk: undefined,
-    handlerCancel: undefined,
-    handlerArgs: undefined,
-    addCloseButton: false,
-    activateConfirm: undefined,
-    proceedButtonStyle: undefined,
-    cancelButtonStyle: undefined,
-};
-
-// Wobei alle Attribute grundsätzlich optional sind:
-// - headline: Eine fett hinterlegte Überschrift (optional)
-// - message1: ist die angezeigte Nachricht
-// - message2: ist optional und wird fett hinterlegt (z.B. ein wichtiger Hinweis oder ähnliches)
-// - message: ist optional und wird nur angezeigt, wenn message1 nicht gesetzt ist (damit message oder message1 genutzt werden kann)
-// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
-// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
-// - handlerOk: ist die Funktion die bei Bestätigung der Box ausgeführt wird (nutzt handlerargs, erwartet also nur 1 Argument!)
-// - handlerCancel: ist die Funktion die bei Ablehnung der Box ausgeführt wird (nutzt handlerargs, erwartet also nur 1 Argument!)
-// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
-// - handlerArgs: kann im handler als weitere Argumente genutzt werden
-// - activateConfirm: ist ein Boolean, der angibt ob die ConfirmationBox angezeigt werden soll oder nicht (wenn false, wird direkt handlerOk aufgerufen) (Standardmäßig true wenn nicht anders angegeben)
-// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
-// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
-
-export function ConfirmationBox({ state, setState }: { state: ConfirmationBoxState, setState: (state: ConfirmationBoxState) => void }): React.ReactElement {
-
-    // Wird verwendet um die Confirmation Boxen ein- und auszublenden
-    const [showConfirm, setShowConfirm] = useState(false);
-
-    // Damit der Fokus auf die Confirmation Box gesetzt wird, wenn sie geöffnet wird
-    // Und man sie mit Enter bestätigen kann
-    const overlayRef = useRef<HTMLDivElement>(null);
-
-    // Sobald der State von außen aktualisiert wird triggert diese Funktion
-    // Die setzt showConfirm auf true (oder ruft die übergebene Funktion auf wenn confirmationBoxen disabled sind)
-    useEffect(() => {
-        if (state?.handlerOk) {
-            if (state.activateConfirm ?? true) {
-                setShowConfirm(true);
-                setTimeout(() => { document.getElementById("confirmButton")?.focus(); }, 1);
-            }
-            else {
-                // Wenn activateConfirm explizit false ist, dann wird die übergebene Funktion direkt ausgeführt ohne ConfirmationBox
-                if (typeof state.handlerOk === 'function')
-                    state.handlerOk(state.handlerArgs);
-            }
-        }
-        setTimeout(() => {
-            overlayRef.current?.focus();
-        }, 0);
-    }, [state]);
-
-    const handleAction = (handler: ((args?: unknown) => void) | undefined) : void => {
-        setShowConfirm(false);
-        const tempState = {
-            handler: handler,
-            handlerArgs: state.handlerArgs
-        };
-        setState(defaultConfirmationState);
-        if (typeof tempState.handler === 'function')
-            tempState.handler(tempState.handlerArgs);
-    }
-
-    return showConfirm ?
-        <div className="confirmation-overlay"
-            tabIndex={0}
-            ref={overlayRef}>
-            <div className="confirmation-box">
-                {state.addCloseButton?
-                    <span className="closeButton">
-                        <svg xmlns="http://www.w3.org/2000/svg"
-                            tabIndex={0}
-                            className="close-icon"
-                            onClick={() => handleAction(undefined)}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault(); // Verhindert Scroll bei Space
-                                    handleAction(undefined);
-                                }
-                            }}
-                            role="button" aria-label="Dialog schließen"
-                            width="24" height="24" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-                        </svg>
-                    </span> : 
-                <></>}
-                {state?.headline !== undefined ? <p className="headline" style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline}</strong></p> : <></>}
-                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state.message1 ?? state.message ?? ""}</p>
-                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state.message2 ?? ""}</strong></p>
-                <div className="confirmation-buttons">
-                    <button
-                        onClick={() => handleAction(state.handlerCancel)}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerCancel);
-                            }
-                        }}
-                        className="px-4 py-2 bg-gray-300 rounded"
-                        style={state?.cancelButtonStyle !== undefined ? state.cancelButtonStyle : {}}>
-                        {state.cancelButtonText ? state.cancelButtonText : "Abbrechen"}
-                    </button>
-                    <button onClick={() => handleAction(state.handlerOk)}
-                        id="confirmButton"
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerOk);
-                            }
-                        }}
-                        className="px-4 py-2 bg-blue-600 text-white rounded"
-                        style={state?.proceedButtonStyle !== undefined ? state.proceedButtonStyle : {}}>
-                        {state.proceedButtonText ? state.proceedButtonText : "OK"}
-                    </button>
-                </div>
-            </div>
-        </div> : <></>;
-}

package/Dropdown.css

@@ -1,31 +0,0 @@
-.custom-select {
-    border-radius: 8px;
-    border: 1px solid var(--Mittelgrau);
-    color: black;
-    background-color: white;
-    -moz-box-align: center;
-    align-items: center;
-    cursor: default;
-    display: flex;
-    flex-wrap: wrap;
-    -moz-box-pack: justify;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-    font-size: 0.8em;
-}
-
-.dropdown__control {
-    width: 100%;
-}
-
-    .custom-select:hover, .dropdown__menu-list div:hover, .card .dropdown__menu-list div:hover {
-        cursor: pointer;
-    }
-
-    .dropdown__multi-value__remove {
-        color:  var(--FastSchwarz, black);
-    }
-
-.custom-select .dropdown__single-value {
-    color: var(--FastSchwarz, black);
-}

package/Dropdown.tsx

@@ -1,211 +0,0 @@
-import { useRef, useEffect, useState } from 'react';
-import * as React from 'react';
-import Select, { SingleValue, MultiValue}  from 'react-select'
-import type { CSSObject } from '@emotion/react';
-import './Dropdown.css';
-
-// Um das Dropdown Menü zu nutzen, müssen die Optionen das folgende Interface nutzen:
-export interface DropdownOption<T = string> {
-  value: T;
-  label: string;
-  disabled?: boolean;
-  indent?: number;
-}
-
-// Wobei alle Attribute außer dem value und dem label optional sind:
-// - value: Der Wert, der bei Auswahl gesetzt werden soll
-//      -> Dabei kann es sich um komplexe Objekte handeln, diese müssen dann ein Attribut id haben, mithilfe derer sie verglichen werden!
-// - label: Der String, der in der Auswahl angezeigt werden soll
-// - disabled: Kann auf true gesetzt werden, wenn diese Option nicht zur Auswahl verfügbar sein soll
-// - indent: Eine Zahl größer 0, kann angegeben werden, wenn die Option mit so vielen Strichen eingerückt werden soll (nur im Auswahlmenü)
-
-// Attribute vom Dropdown:
-// - selections: Das Array mit den Optionen die zur Auswahl stehen sollen
-// - value: Der Wert, der ausgewählt angezeigt werden soll (useState)
-// - onChange: Die Funktion die bei Änderung ausgeführt werden soll.
-//             Standardmäßig könnte z.B. {(value) => {value ? setValue(value) : setValue("")}} genutzt werden, wenn es sich bei value um einen String handelt
-// - maxMenuHeight: Maximale Menühöhe in Pixeln (Optional)
-// - menuPlacement: Ob das Menü oben oder unten platziert sein soll (Optional, Standard: Auto)
-// - width: Breite des Menüs als CSS Property (Optional)
-// - placeHolder: Der Platzhalter der angezeigt wird, wenn noch nichts ausgewählt ist (Optional) (Wird auch nur angezeigt, wenn value noch keinen validen Wert hat)
-// - defaultValue: Die Auswahl die von Anfang an ausgewählt ist (Optional) (sollten mehrere Werte übergeben werden, wird "isMulti" automatisch gesetzt)
-// - isMulti: Ob mehrere Optionen gleichzeitig ausgewählt werden können (Optional)
-//      - Daraufhin MUSS value ein Array sein und falls defaultValue angegeben ist, MUSS das auch ein Array sein
-// - cardColorVariant: Wenn auf true gesetzt, wird eine leicht andere Farbvariante gewählt
-// - ignoreDarkMode: Wenn auf true gesetzt wird der DarkMode ignoriert, der sonst standardmäßig angewendet wird
-// - ...rest (Optional): sorgt dafür, dass alle weiteren angegebenen Attribute (z.B. aria-label) direkt an React-Select weitergegeben werden
-
-export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeight, menuPlacement, width, placeHolder, defaultValue, isMulti = false, cardColorVariant = false, ignoreDarkMode = false, ...rest} :
-    {
-        selections: DropdownOption<T>[],
-        value: T | T[],
-        onChange: (value: T | T[] | undefined) => void,
-        maxMenuHeight?: number,
-        menuPlacement?: "top" | "bottom",
-        width?: React.CSSProperties["width"],
-        placeHolder?: string,
-        defaultValue?: DropdownOption<T> | DropdownOption<T>[],
-        isMulti?: boolean,
-        cardColorVariant?: boolean,
-        ignoreDarkMode?: boolean,
-    }): React.ReactElement {
-
-        const initializedRef = useRef(false);
-        
-        const options = selections.map(({value, label, disabled, indent}) => ({value: value, label: label, isDisabled: disabled ?? false, indent}));
-
-        if(!initializedRef.current && Array.isArray(value) && value.length === 0 && Array.isArray(defaultValue) && defaultValue.length > 0) {
-            value = options.filter(opt => (defaultValue as DropdownOption<T>[]).map(({value}) => (value)).includes(opt.value)).map(opt => opt.value);
-        } 
-
-        function usePrefersDarkMode() : boolean {
-            const [isDarkMode, setIsDarkMode] = useState(
-                window.matchMedia('(prefers-color-scheme: dark)').matches
-            );
-
-            useEffect(() => {
-                const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-                const handler = (event: MediaQueryListEvent) : void => setIsDarkMode(event.matches);
-                
-                // EventListener hinzufügen
-                mediaQuery.addEventListener('change', handler);
-
-                // Aufräumen
-                return () => mediaQuery.removeEventListener('change', handler);
-            }, []);
-
-            return isDarkMode;
-        }
-        const isDarkModeRaw = usePrefersDarkMode()
-        const isDarkMode = ignoreDarkMode ? false : isDarkModeRaw;
-
-        function hasId(value: unknown): value is { id: any } {
-            return typeof value === "object" && value !== null && "id" in value;
-        }
-
-        return isMulti || Array.isArray(defaultValue) ? (
-            <Select<DropdownOption<T>, true>
-                className = "custom-select" 
-                isMulti={true}
-                placeholder = {placeHolder ?? ""}
-                options = {options}
-                value={options.length > 0 && hasId(options[0].value) ? // Wenn die values der Optionen ids haben, handelt es sich um komplexe Objekte, die zur Auswahl stehen und müssen dahingehend verglichen werden
-                                options.filter(opt => (hasId(opt.value) && (value as T[]).find(val => hasId(val) && hasId(opt.value) && val.id ===  opt.value.id))) // Dann alle Optionen, die in den values per id vorkommen
-                                : options.filter(opt => ((value as T[]).includes(opt.value))) // Ansonsten einfach alle Optionen, die in den values vorkommen
-                      }
-                onChange={(selectedOption: MultiValue<DropdownOption<T>>) => {initializedRef.current = true; onChange(selectedOption.map((opt: DropdownOption<T>) => opt.value))}}
-                maxMenuHeight={maxMenuHeight ?? 280}
-                menuPlacement={menuPlacement ?? "auto"}
-                menuPosition="fixed"
-                classNamePrefix="dropdown"
-                defaultValue={options.filter(opt => (defaultValue as DropdownOption<T>[]).map(({value}) => (value)).includes(opt.value))}
-                formatOptionLabel={({ label, indent }: { label: string; indent?: number },{ context } : { context: string }) => {
-                    if (context === 'menu') {
-                        // Alle mit indent angegebenen Werte im Dropdown-Menü einrücken
-                        return  indent && indent > 0 ? '-'.repeat(indent) + '\u00A0' + label : label;
-                    } else {
-                        // Im ausgewählten Zustand: normal
-                        return label;
-                    }
-                }}
-                styles={{
-                    container: (provided: CSSObject) => ({
-                        ...provided,
-                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: isDarkMode? 'white' : 'black',
-                        ...(width ? { width } : {})
-                    }),
-                    control: () => ({
-                        display: 'flex',
-                        ...(width ? { width } : {})
-                    }),
-                    menu: (provided: CSSObject) => ({
-                        ...provided,
-                        borderRadius: '8px', // runde Ecken für das Dropdown
-                        overflow: 'hidden',
-                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: isDarkMode? 'white' : 'black',
-                        ...(width ? { width } : {})
-                    }),
-                    menuList: (provided: CSSObject) => ({
-                        ...provided,
-                        overflowY: "auto",
-                        padding: 0,
-                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: isDarkMode? 'white' : 'black',
-                    }),
-                    option: (provided: CSSObject, state: { isFocused: boolean; isSelected: boolean }) => ({
-                        ...provided,
-                        backgroundColor: state.isFocused ? 'var(--DunkelAkzent, red)' : state.isSelected ? 'var(--MittelAkzent, blue)' : 
-                            isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: state.isFocused ? 'white' : state.isSelected ? 'var(--FastSchwarz, black)' :
-                            isDarkMode? (cardColorVariant ? 'white' : 'white') : cardColorVariant ? 'black' : 'var(--FastSchwarz, black)',
-                        cursor: 'pointer',
-                    }),
-                }}
-                {...rest}
-            />
-        ) : (
-        <Select<DropdownOption<T>, false>
-                className = "custom-select" 
-                isMulti={false}
-                placeholder = {placeHolder ?? ""}
-                options = {options}
-                value={options.length > 0 && hasId(options[0].value) ? // Wenn die values der Optionen ids haben, handelt es sich um komplexe Objekte, die zur Auswahl stehen und müssen dahingehend verglichen werden
-                            options.find(opt => hasId(opt.value) && hasId(value) && opt.value.id === value.id) // Die eine Option mit der passenden id finden
-                            : options.find(opt => opt.value === value)} // Ohne Multi oder id nur die eine Option finden
-
-                onChange={(selectedOption: SingleValue<DropdownOption<T>>) => onChange(selectedOption?.value ?? undefined)}
-                maxMenuHeight={maxMenuHeight ?? 280}
-                menuPlacement={menuPlacement ?? "auto"}
-                menuPosition="fixed"
-                classNamePrefix="dropdown"
-                defaultValue={defaultValue}
-                formatOptionLabel={({ label, indent }: { label: string; indent?: number },{ context } : { context: string }) => {
-                    if (context === 'menu') {
-                        // Alle mit indent angegebenen Werte im Dropdown-Menü einrücken
-                        return  indent && indent > 0 ? '-'.repeat(indent) + '\u00A0' + label : label;
-                    } else {
-                        // Im ausgewählten Zustand: normal
-                        return label;
-                    }
-                }}
-                styles={{
-                    container: (provided: CSSObject) => ({
-                        ...provided,
-                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: isDarkMode? 'white' : 'black',
-                        ...(width ? { width } : {})
-                    }),
-                    control: () => ({
-                        display: 'flex',
-                        ...(width ? { width } : {})
-                    }),
-                    menu: (provided: CSSObject) => ({
-                        ...provided,
-                        borderRadius: '8px', // runde Ecken für das Dropdown
-                        overflow: 'hidden',
-                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: isDarkMode? 'white' : 'black',
-                        ...(width ? { width } : {})
-                    }),
-                    menuList: (provided: CSSObject) => ({
-                        ...provided,
-                        overflowY: "auto",
-                        padding: 0,
-                        backgroundColor: isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: isDarkMode? 'white' : 'black',
-                    }),
-                    option: (provided: CSSObject, state: { isFocused: boolean; isSelected: boolean }) => ({
-                        ...provided,
-                        backgroundColor: state.isFocused ? 'var(--DunkelAkzent, red)' : state.isSelected ? 'var(--MittelAkzent, blue)' : 
-                            isDarkMode? (cardColorVariant ? 'var(--FastSchwarz, black)' : 'black') : cardColorVariant ? 'var(--FastWeiß, white)' : 'white',
-                        color: state.isFocused ? 'white' : state.isSelected ? 'var(--FastSchwarz, black)' :
-                            isDarkMode? (cardColorVariant ? 'white' : 'white') : cardColorVariant ? 'black' : 'var(--FastSchwarz, black)',
-                        cursor: 'pointer',
-                    }),
-                }}
-                {...rest}
-            />
-        );
-    }

package/InfoOverlay.css

@@ -1,65 +0,0 @@
-.information-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10000;
-}
-
-.information-box {
-    background-color: var(--Hellgrau, white);
-    color: var(--HellSchwarz,#2c2c2c);
-    padding: 2rem;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
-    max-width: 500px;
-    width: 90%;
-    text-align: center;
-    animation: fadeIn 0.3s ease-in-out;
-    white-space: pre-line;
-    position: relative;
-}
-
-.information-box .headline {
-    margin-bottom: 0.75em;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.information-box .information-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-.information-box .information-buttons button {
-    font-size: 85%;
-    padding: 0.5rem 1.1rem;
-}
-
-.information-box .closeButton {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-}
-
-    .information-box .close-icon:hover {
-        color: var(--HSDAkzent);
-        cursor: pointer;
-    }