From 46c431b1e1c519e566bb98d8b1b351355f67549b Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 2 Jun 2024 19:07:48 +0200
Subject: [PATCH 01/59] refactor: Update design functions and components for
 theme color generation

---
 lib/index.ts                                         |  3 ++-
 .../generateThemeColorSteps.ts}                      |  2 +-
 .../designFunctions/generateThemeColorSteps/index.ts |  1 +
 .../validateThemeColorSteps.ts}                      |  2 +-
 .../theme/FancyThemeProvider/FancyThemeProvider.tsx  |  6 +++---
 .../TgenerateObjectToCssVariables.model.ts}          |  0
 .../generateObjectToCssVariables.mdx}                | 10 +++++-----
 .../generateObjectToCssVariables.ts}                 |  6 +++---
 .../theme/generateObjectToCssVariables/index.ts      |  3 +++
 .../theme/generateThemeColor/generateThemeColor.ts   | 12 ++++++------
 src/design/theme/generateThemeToCssVars/index.ts     |  3 ---
 src/stories/Setup/SetupNext.mdx                      |  4 ++--
 12 files changed, 27 insertions(+), 25 deletions(-)
 rename src/design/{theme/generateThemeColor/utils/generateColorSteps.ts => designFunctions/generateThemeColorSteps/generateThemeColorSteps.ts} (95%)
 create mode 100644 src/design/designFunctions/generateThemeColorSteps/index.ts
 rename src/design/{theme/generateThemeColor/utils/validateColorSteps.ts => designFunctions/generateThemeColorSteps/validateThemeColorSteps.ts} (83%)
 rename src/design/theme/{generateThemeToCssVars/TgenerateThemeToCssVars.model.ts => generateObjectToCssVariables/TgenerateObjectToCssVariables.model.ts} (100%)
 rename src/design/theme/{generateThemeToCssVars/generateThemeToCssVars.mdx => generateObjectToCssVariables/generateObjectToCssVariables.mdx} (55%)
 rename src/design/theme/{generateThemeToCssVars/generateThemeToCssVars.ts => generateObjectToCssVariables/generateObjectToCssVariables.ts} (65%)
 create mode 100644 src/design/theme/generateObjectToCssVariables/index.ts
 delete mode 100644 src/design/theme/generateThemeToCssVars/index.ts

diff --git a/lib/index.ts b/lib/index.ts
index 73abd36dc..93e4cad01 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -182,6 +182,7 @@ export * from '@/design/designFunctions/leftRightCenterToFlexJustify';
 export * from '@/design/designFunctions/getThemeOrValueAsCss';
 export * from '@/design/designFunctions/calcBorderRadiusWithPadding';
 export * from '@/design/theme/theme';
+export * from '@/design/designFunctions/generateThemeColorSteps';
 
 // ---------- Interfaces ------- //
 export * from '@/types';
@@ -198,7 +199,7 @@ export * from '@/components/atoms/RawSlider/TRawSlider.model';
 // ---------- Store ------- //
 export * from '@/design/theme/themeStore';
 export * from '@/design/theme/globalStyle/DefaultStyle';
-export * from '@/design/theme/generateThemeToCssVars';
+export * from '@/design/theme/generateObjectToCssVariables';
 export * from '@/design/theme/applyThemeToDomStyleSheet';
 
 // ---------- SVGs ------- //
diff --git a/src/design/theme/generateThemeColor/utils/generateColorSteps.ts b/src/design/designFunctions/generateThemeColorSteps/generateThemeColorSteps.ts
similarity index 95%
rename from src/design/theme/generateThemeColor/utils/generateColorSteps.ts
rename to src/design/designFunctions/generateThemeColorSteps/generateThemeColorSteps.ts
index ca0c7a208..36b102f3d 100644
--- a/src/design/theme/generateThemeColor/utils/generateColorSteps.ts
+++ b/src/design/designFunctions/generateThemeColorSteps/generateThemeColorSteps.ts
@@ -59,7 +59,7 @@ interface IGenerateColorSteps {
   color: string;
   pimaryColor: string;
 }
-export default function generateColorSteps({ themeType, color, pimaryColor }: IGenerateColorSteps): ColorSteps {
+export default function generateThemeColorSteps({ themeType, color, pimaryColor }: IGenerateColorSteps): ColorSteps {
   const lightColors = lightenColors({ color, themeType, pimaryColor }); //generate the colors
   const obj: ColorSteps = {} as ColorSteps;
 
diff --git a/src/design/designFunctions/generateThemeColorSteps/index.ts b/src/design/designFunctions/generateThemeColorSteps/index.ts
new file mode 100644
index 000000000..fe11be7b3
--- /dev/null
+++ b/src/design/designFunctions/generateThemeColorSteps/index.ts
@@ -0,0 +1 @@
+export { default as generateThemeColorSteps } from './generateThemeColorSteps';
diff --git a/src/design/theme/generateThemeColor/utils/validateColorSteps.ts b/src/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps.ts
similarity index 83%
rename from src/design/theme/generateThemeColor/utils/validateColorSteps.ts
rename to src/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps.ts
index 2e8e0530c..fde5d0169 100644
--- a/src/design/theme/generateThemeColor/utils/validateColorSteps.ts
+++ b/src/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps.ts
@@ -1,4 +1,4 @@
-export default function validateColorSteps(colorSteps: object) {
+export default function validateThemeColorSteps(colorSteps: object) {
   const colorStepsKeys = Object.keys(colorSteps);
   if (colorStepsKeys.length !== 10) return false;
 
diff --git a/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx b/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
index 3e7f7f427..596aa1961 100644
--- a/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
+++ b/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider } from 'styled-components';
 import { themeStore } from '@/design/theme/themeStore';
 
 import { TFancyThemeProvider } from './TFancyThemeProvider.model';
-import { generateCssVariables } from '@/design/theme/generateThemeToCssVars';
+import { generateObjectToCssVariables } from '@/design/theme/generateObjectToCssVariables';
 import { applyThemeToDomStyleSheet } from '@/design/theme/applyThemeToDomStyleSheet';
 
 // --------------------------------------------------------------------------- //
@@ -27,7 +27,7 @@ export default function FancyThemeProvider(props: TFancyThemeProvider) {
   useEffect(() => {
     // if the theme is not initialized we don't need to apply the css vars
     if (!applyCssVars && !isInitialized) return;
-    const cssVars = generateCssVariables(themeState);
+    const cssVars = generateObjectToCssVariables(themeState);
     applyThemeToDomStyleSheet(cssVars);
   }, [theme, themeState, applyCssVars, isInitialized]);
 
@@ -37,7 +37,7 @@ export default function FancyThemeProvider(props: TFancyThemeProvider) {
     const getStyle = document.getElementById('fui-theme');
     if (!getStyle) return;
     getStyle.innerHTML = `:root {
-      ${generateCssVariables(themeState)}
+      ${generateObjectToCssVariables(themeState)}
     }`;
   }, [themeState, isDarkMode, applyCssVars]);
 
diff --git a/src/design/theme/generateThemeToCssVars/TgenerateThemeToCssVars.model.ts b/src/design/theme/generateObjectToCssVariables/TgenerateObjectToCssVariables.model.ts
similarity index 100%
rename from src/design/theme/generateThemeToCssVars/TgenerateThemeToCssVars.model.ts
rename to src/design/theme/generateObjectToCssVariables/TgenerateObjectToCssVariables.model.ts
diff --git a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.mdx b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.mdx
similarity index 55%
rename from src/design/theme/generateThemeToCssVars/generateThemeToCssVars.mdx
rename to src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.mdx
index ac229fca0..793a911f5 100644
--- a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.mdx
+++ b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.mdx
@@ -1,15 +1,15 @@
 ### Component Title
 
-`generateCssVariables` Function
+`generateObjectToCssVariables` Function
 
 ### Brief Description
 
-The `generateCssVariables` function dynamically generates CSS variables from a given theme object. It's designed to work recursively, allowing nested theme objects. This function facilitates the application of theming in CSS by converting theme properties into CSS custom properties (variables) with an optional prefix to namespace them, making it easier to maintain and switch themes dynamically in web projects.
+The `generateObjectToCssVariables` function dynamically generates CSS variables from a given theme object. It's designed to work recursively, allowing nested theme objects. This function facilitates the application of theming in CSS by converting theme properties into CSS custom properties (variables) with an optional prefix to namespace them, making it easier to maintain and switch themes dynamically in web projects.
 
 ### Setup Instructions
 
 1. Ensure you have a theme object that conforms to the `TThemeObject` type, which can include nested objects for structured themes.
-2. Import the `generateCssVariables` function into your project file where you wish to generate CSS variables.
+2. Import the `generateObjectToCssVariables` function into your project file where you wish to generate CSS variables.
 
    ```javascript
    import { fui-fancyui } from 'fui-fancyui';
@@ -31,7 +31,7 @@ const theme = {
   },
 };
 
-const cssVariablesString = generateCssVariables(theme);
+const cssVariablesString = generateObjectToCssVariables(theme);
 // Use the `cssVariablesString` to set CSS custom properties in your application
 ```
 
@@ -42,4 +42,4 @@ This example demonstrates how to convert a theme object with nested color and ba
 - **theme (`TThemeObject`)**: The theme object to convert into CSS variables. It must follow the `TThemeObject` structure, allowing nested objects for hierarchical themes. This is a required property.
 - **prefix (`string`)**: An optional prefix string to prepend to each CSS variable name, used for namespacing. Default is an empty string (`''`).
 
-This documentation outlines the `generateCssVariables` function's purpose, setup, usage, and its components, providing a clear overview of how to dynamically generate CSS variables from a theme object for web development projects.
+This documentation outlines the `generateObjectToCssVariables` function's purpose, setup, usage, and its components, providing a clear overview of how to dynamically generate CSS variables from a theme object for web development projects.
diff --git a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.ts b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.ts
similarity index 65%
rename from src/design/theme/generateThemeToCssVars/generateThemeToCssVars.ts
rename to src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.ts
index 66a4dc381..d544d5f87 100644
--- a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.ts
+++ b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.ts
@@ -1,14 +1,14 @@
-import { TThemeObject } from './TgenerateThemeToCssVars.model';
+import { TThemeObject } from './TgenerateObjectToCssVariables.model';
 
 // this function generates css variables from a theme object
-export default function generateCssVariables(theme: TThemeObject, prefix = '') {
+export default function generateObjectToCssVariables(theme: TThemeObject, prefix = '') {
   let cssVars = '';
 
   // iterate over the theme object
   Object.entries(theme).forEach(([key, value]) => {
     if (typeof value === 'object' && value !== null) {
       // Recursive case: value is an object
-      cssVars += generateCssVariables(value, `${prefix}${key}-`);
+      cssVars += generateObjectToCssVariables(value, `${prefix}${key}-`);
     } else if (typeof value === 'string') {
       // Base case: value is a string
       cssVars += `--${prefix}${key}: ${value};`;
diff --git a/src/design/theme/generateObjectToCssVariables/index.ts b/src/design/theme/generateObjectToCssVariables/index.ts
new file mode 100644
index 000000000..ba141a5bd
--- /dev/null
+++ b/src/design/theme/generateObjectToCssVariables/index.ts
@@ -0,0 +1,3 @@
+export { default as generateObjectToCssVariables } from './generateObjectToCssVariables';
+
+export type { TThemeValue, TThemeObject } from './TgenerateObjectToCssVariables.model';
diff --git a/src/design/theme/generateThemeColor/generateThemeColor.ts b/src/design/theme/generateThemeColor/generateThemeColor.ts
index 7063de045..729571999 100644
--- a/src/design/theme/generateThemeColor/generateThemeColor.ts
+++ b/src/design/theme/generateThemeColor/generateThemeColor.ts
@@ -1,8 +1,8 @@
 import { TUiColorsTypeObject } from '@/types/TUiColorsTypeObject';
-import generateColorSteps from './utils/generateColorSteps';
+import generateThemeColorSteps from '../../designFunctions/generateThemeColorSteps/generateThemeColorSteps';
 import { isColorValid } from '@/utils//validations/isColorValid';
 import { TUiColorTypes } from '@/types/TUiColorTypes';
-import validateColorSteps from '@/design/theme/generateThemeColor/utils/validateColorSteps';
+import validateThemeColorSteps from '@/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps';
 import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
 
 const themeColors = {
@@ -28,7 +28,7 @@ export function initialGenerateUiColors() {
   // generate for each theme color the color steps
   for (const color in themeColors) {
     // generate the color steps for the color
-    const generatedColor = generateColorSteps({
+    const generatedColor = generateThemeColorSteps({
       themeType: color as TUiColorTypes,
       color: themeColors[color as TUiColorsNotTransparent],
       pimaryColor: themeColors.secondary,
@@ -46,7 +46,7 @@ initialGenerateUiColors();
 export const regenerateUiColors = (isDarkTheme: boolean) => {
   for (const color in uiColors) {
     // generate the color steps for the color
-    const generatedColor = generateColorSteps({
+    const generatedColor = generateThemeColorSteps({
       themeType: color as TUiColorTypes,
       color: uiColors[color as TUiColorsNotTransparent]['0'],
       pimaryColor: isDarkTheme ? themeColors.primary : themeColors.secondary, // if the theme is dark, the primary color is the secondary color
@@ -85,7 +85,7 @@ export const updateThemeColors = (colorObject: IUiColorPops) => {
       // accentDarken should not provided by the user%
       if (colorType !== 'accentDarken' && colorObject[colorTypedkey] !== undefined) {
         // update the theme color with the new color
-        const generatedColorSteps = generateColorSteps({
+        const generatedColorSteps = generateThemeColorSteps({
           themeType: colorTypedkey,
           color: colorObject[colorTypedkey]! as string,
           pimaryColor: themeColors.secondary,
@@ -101,7 +101,7 @@ export const updateThemeColors = (colorObject: IUiColorPops) => {
 
       //Validate ColorSteps object (check if the object has the correct keys)
       // and then update the themeColor with the new color steps
-      if (validateColorSteps(colorSteps)) {
+      if (validateThemeColorSteps(colorSteps)) {
         uiColors[colorTypedkey] = colorSteps as TthemeColorGroup;
       }
     }
diff --git a/src/design/theme/generateThemeToCssVars/index.ts b/src/design/theme/generateThemeToCssVars/index.ts
deleted file mode 100644
index 09fb65cd5..000000000
--- a/src/design/theme/generateThemeToCssVars/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as generateCssVariables } from './generateThemeToCssVars';
-
-export type { TThemeValue, TThemeObject } from './TgenerateThemeToCssVars.model';
diff --git a/src/stories/Setup/SetupNext.mdx b/src/stories/Setup/SetupNext.mdx
index 84bc03e3d..291c0400f 100644
--- a/src/stories/Setup/SetupNext.mdx
+++ b/src/stories/Setup/SetupNext.mdx
@@ -97,7 +97,7 @@ This is needed because the CSS variables are not applied on the server-side rend
 'use client';
 
 import React, { useRef } from 'react';
-import { generateCssVariables, themeStore } from 'fui-fancyui';
+import { generateObjectToCssVariables, themeStore } from 'fui-fancyui';
 import { useServerInsertedHTML } from 'next/navigation';
 
 export default function ThemeObjectToCSSVars({ children }: { children: React.ReactNode }) {
@@ -110,7 +110,7 @@ export default function ThemeObjectToCSSVars({ children }: { children: React.Rea
   useServerInsertedHTML(() => {
     if (!isStyleInserted.current) {
       isStyleInserted.current = true;
-      const cssVars = generateCssVariables(themeState);
+      const cssVars = generateObjectToCssVariables(themeState);
 
       return <style id="fui-theme" dangerouslySetInnerHTML={{ __html: `:root {\n${cssVars}\n}` }} />;
     }

From 3f24fd27f619591d95aaa2bf49d63a123a85c0f5 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 2 Jun 2024 21:18:43 +0200
Subject: [PATCH 02/59] refactor: Update FancyThemeProvider to include
 styleSheetId prop

---
 src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx  | 6 +++---
 .../theme/FancyThemeProvider/TFancyThemeProvider.model.ts   | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx b/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
index 596aa1961..61cf83dbd 100644
--- a/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
+++ b/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
@@ -11,7 +11,7 @@ import { applyThemeToDomStyleSheet } from '@/design/theme/applyThemeToDomStyleSh
 // ---- The FancyThemeProvider handles the themeState and provided theme ----- //
 // --------------------------------------------------------------------------- //
 export default function FancyThemeProvider(props: TFancyThemeProvider) {
-  const { children, theme, applyCssVars = true } = props;
+  const { children, theme, applyCssVars = true, styleSheetId = 'fui-theme' } = props;
   const [isInitialized, setIsInitialized] = useState(false);
 
   const themeState = themeStore((state) => state.theme);
@@ -34,12 +34,12 @@ export default function FancyThemeProvider(props: TFancyThemeProvider) {
   // if the theme changes we update the css variables
   useEffect(() => {
     if (!applyCssVars) return;
-    const getStyle = document.getElementById('fui-theme');
+    const getStyle = document.getElementById(styleSheetId);
     if (!getStyle) return;
     getStyle.innerHTML = `:root {
       ${generateObjectToCssVariables(themeState)}
     }`;
-  }, [themeState, isDarkMode, applyCssVars]);
+  }, [themeState, isDarkMode, applyCssVars, styleSheetId]);
 
   // theme gets provided to all components
   //the theme gets saved in the theme store and can be accessed from there but first on the first render
diff --git a/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts b/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts
index e88670262..1535684fc 100644
--- a/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts
+++ b/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts
@@ -4,4 +4,5 @@ export type TFancyThemeProvider = {
   children?: React.ReactNode;
   theme?: TTheme;
   applyCssVars?: boolean;
+  styleSheetId?: string;
 };

From 1f6aa5048b38749cb0ff07bc696622df855263c1 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 3 Jun 2024 18:28:45 +0200
Subject: [PATCH 03/59] refactor: Add RawButton component to export list

---
 lib/index.ts                                                  | 1 +
 src/components/templates/FancyGridItem/FancyGridItem.model.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/index.ts b/lib/index.ts
index 93e4cad01..0759ed640 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -108,6 +108,7 @@ export * from '@/components/molecules/TabSwitch';
 export * from '@/components/molecules/FancyNavBar';
 export * from '@/components/molecules/LabeledInput';
 export * from '@/components/molecules/Stepper';
+export * from '@/components/atoms/RawButton';
 
 // ---------- Organisms ------- //
 export * from '@/components/organisms/FancyButton';
diff --git a/src/components/templates/FancyGridItem/FancyGridItem.model.ts b/src/components/templates/FancyGridItem/FancyGridItem.model.ts
index 5b0ec3405..efaf98426 100644
--- a/src/components/templates/FancyGridItem/FancyGridItem.model.ts
+++ b/src/components/templates/FancyGridItem/FancyGridItem.model.ts
@@ -3,7 +3,7 @@ import { ICustomBreakpoint } from '@/components/templates/FancyGrid/FancyGrid.mo
 import { TDynamicElement } from 'lib';
 
 export type TFancyGridItemProps = {
-  gridSpace: number;
+  gridSpace?: number;
   gridColumn?: string | number;
   gridRow?: string | number;
   children?: React.ReactNode;

From 7e2a0844a977f924105dcbfa076c8bdba3dfd9d0 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Mon, 3 Jun 2024 21:40:52 +0200
Subject: [PATCH 04/59] refactor: Include htmlProps in FancyGridItem component

---
 src/components/templates/FancyGridItem/FancyGridItem.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/templates/FancyGridItem/FancyGridItem.tsx b/src/components/templates/FancyGridItem/FancyGridItem.tsx
index 2f63eb059..56fbf0a5a 100644
--- a/src/components/templates/FancyGridItem/FancyGridItem.tsx
+++ b/src/components/templates/FancyGridItem/FancyGridItem.tsx
@@ -10,7 +10,7 @@ import { TDynamicElement } from '@/types/TDynamicElement';
 // ------------ The FancyGrid Item to get the space for the item - ----------- //
 // ------------------------------------------------<--------------------------- //
 function FancyGridItem<T extends React.ElementType = 'div'>(props: TFancyGridItemProps & TDynamicElement<T>) {
-  const { gridSpace, children, breakpoints, gridColumn, gridRow, as } = props;
+  const { gridSpace, children, breakpoints, gridColumn, gridRow, as, ...htmlProps } = props;
 
   return (
     <GridItem
@@ -19,6 +19,7 @@ function FancyGridItem<T extends React.ElementType = 'div'>(props: TFancyGridIte
       $gridColumn={gridColumn}
       $gridRow={gridRow}
       $breakpoints={breakpoints}
+      {...htmlProps}
     >
       {children}
     </GridItem>

From e44ff158b10f53f1e85d280f4f52180bbf1ab419 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Tue, 4 Jun 2024 17:32:53 +0200
Subject: [PATCH 05/59] refactor: Update FancySVGAtom.style.tsx to include
 support for 'inherit' theme type

---
 src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx | 4 +++-
 src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
index 2b21335a9..6ead3e4a8 100644
--- a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
+++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
@@ -33,7 +33,9 @@ export const StyledSVG = styled.i<IStyledSVGAtom & { theme: TTheme }>`
   width: ${({ $sizeC }) => sizes[$sizeC ?? 'xxs']};
   aspect-ratio: 1/1;
   color: ${({ $isActive, $systemMessage, $isPassive, theme, $themeType = 'secondary', $layer = 0 }) =>
-    !$isPassive && calcIconColor({ theme, $isActive, $systemMessage, $layer, $themeType })};
+    $themeType === 'inherit'
+      ? 'inherit'
+      : !$isPassive && calcIconColor({ theme, $isActive, $systemMessage, $layer, $themeType })};
   ${({ $externalStyle }) => $externalStyle};
   will-change: transform;
 
diff --git a/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts b/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts
index 91c7d1cf2..ca5958f03 100644
--- a/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts
+++ b/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts
@@ -14,7 +14,7 @@ export type TFancySVGAtom = {
   isPassive?: boolean;
   isActive?: boolean;
   systemMessage?: TUiColorsSystemMessage;
-  themeType?: TUiColorsNotTransparent;
+  themeType?: TUiColorsNotTransparent | 'inherit';
   layer?: TLayer;
 };
 

From ad9296d6bbdcaf230dcf6145aa3342af4c23560c Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Tue, 4 Jun 2024 17:33:06 +0200
Subject: [PATCH 06/59] refactor: Update FancyGrid and FancyGridItem components
 to use simpleGrid prop

---
 .../FancyLayoutRoute/FancyLayoutRoute.tsx     |  2 +-
 src/Routes/HeaderRoute/HeaderRoute.tsx        |  2 +-
 .../atoms/Header/docu/Header.stories.tsx      |  2 +-
 .../templates/FancyGrid/FancyGrid.model.ts    | 11 +++-
 .../templates/FancyGrid/FancyGrid.style.tsx   | 26 +++++---
 .../templates/FancyGrid/FancyGrid.tsx         | 23 ++++++-
 .../templates/FancyGrid/docu/FancyGrid.mdx    |  6 +-
 .../FancyGrid/docu/FancyGrid.stories.tsx      | 61 ++++++++++++++++++-
 .../FancyGridItem/docu/FancyGridItem.mdx      |  2 +-
 .../FancyGridTemplate/FancyGridTemplate.tsx   |  7 ++-
 .../docu/FancyGridTemplate.mdx                |  4 +-
 .../docu/FancyGridTemplate.stories.tsx        | 16 ++---
 .../FancyGridTemplateItem.tsx                 |  4 +-
 .../FancySkeletonGrid/FancySkeletonGrid.tsx   |  4 +-
 14 files changed, 134 insertions(+), 36 deletions(-)

diff --git a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx
index ae0c043f3..23b31ec2f 100644
--- a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx
+++ b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx
@@ -9,7 +9,7 @@ export default function FancyLayoutRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="Fancy Grid" style={{ height: '100%', width: '100%' }}>
-        <FancyGrid grid={6} gap="1rem">
+        <FancyGrid simpleGrid={6} gap="1rem">
           <FancyGrid.Item gridSpace={3} breakpoints={[{ breakpoint: '500px', gridSize: 6 }]}>
             <FancyButton label="Ji" wide />
           </FancyGrid.Item>
diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx
index a3f2eb539..ec2d7a8f2 100644
--- a/src/Routes/HeaderRoute/HeaderRoute.tsx
+++ b/src/Routes/HeaderRoute/HeaderRoute.tsx
@@ -122,7 +122,7 @@ export default function HeaderRoute() {
     <section>
       <FancyFlexBox className="hii"></FancyFlexBox>
       <Header externalStyle={{ height: '44px', padding: '0 12px' }}>
-        <FancyGrid grid={8} gap="12px">
+        <FancyGrid simpleGrid={8} gap="12px">
           <FancyGrid.Item gridSpace={1}>
             <FancyGrid.Item.FlexBox
               align="center"
diff --git a/src/components/atoms/Header/docu/Header.stories.tsx b/src/components/atoms/Header/docu/Header.stories.tsx
index 4de4659da..f8112e564 100644
--- a/src/components/atoms/Header/docu/Header.stories.tsx
+++ b/src/components/atoms/Header/docu/Header.stories.tsx
@@ -101,7 +101,7 @@ export const Primary: Story = {
 export const Advancedheader: Story = {
   render: (args) => (
     <Header {...args} externalStyle={{ height: '44px', padding: '0 12px' }}>
-      <FancyGrid grid={8} gap="12px">
+      <FancyGrid simpleGrid={8} gap="12px">
         <FancyGrid.Item gridSpace={2}>
           <FancyGrid.Item.FlexBox align="center" justify="flex-start" className={'mooiiin'}>
             <RawA style={{ height: '100%' }} href="https://fui.cool">
diff --git a/src/components/templates/FancyGrid/FancyGrid.model.ts b/src/components/templates/FancyGrid/FancyGrid.model.ts
index 291dfe4c5..bd4f15330 100644
--- a/src/components/templates/FancyGrid/FancyGrid.model.ts
+++ b/src/components/templates/FancyGrid/FancyGrid.model.ts
@@ -1,17 +1,26 @@
 import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+import { TThemeValueOrCSS } from 'lib';
 import { CSSProp } from 'styled-components';
 
 export interface ICustomBreakpoint {
   breakpoint: string; // Breakpoint-Größe, z.B. '768px'
   gridSize: number; // Anzahl der Spalten für diesen Breakpoint
   gap?: string; // Optional: Angepasster Gap für diesen Breakpoint
+  columns?: number; // Optional: Anzahl der Spalten für diesen Breakpoint
+  rows?: string[]; // Optional: Anzahl der Reihen für diesen Breakpoint
+  rowGap?: string; // Optional: Angepasster RowGap für diesen Breakpoint
+  columnGap?: string; // Optional: Angepasster ColumnGap für diesen Breakpoint
 }
 
 export interface FancyGridProps {
-  grid?: number;
+  simpleGrid?: number;
   gap?: string;
   padding?: TThemeArrayOrValueCSS;
   margin?: TThemeArrayOrValueCSS;
+  gridTemplateRows?: (string | number)[];
+  gridTemplateColumns?: (string | number)[];
+  rowGap?: TThemeValueOrCSS;
+  columnGap?: TThemeValueOrCSS;
   children?: React.ReactNode;
   externalStyle?: CSSProp;
   breakpoints?: ICustomBreakpoint[];
diff --git a/src/components/templates/FancyGrid/FancyGrid.style.tsx b/src/components/templates/FancyGrid/FancyGrid.style.tsx
index 16c8d90ef..7d93bffb7 100644
--- a/src/components/templates/FancyGrid/FancyGrid.style.tsx
+++ b/src/components/templates/FancyGrid/FancyGrid.style.tsx
@@ -3,25 +3,35 @@ import { css, styled } from 'styled-components';
 import { FancyGridProps } from '@/components/templates/FancyGrid/FancyGrid.model';
 import { TStyledPrefixAndOmiter } from '@/types/TStyledPrefixAndOmiter';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
+import { getThemeOrValueAsCSS } from '@/design/designFunctions/getThemeOrValueAsCss';
 
 type TFancyGridProps = TStyledPrefixAndOmiter<FancyGridProps>;
 export const GridContainer = styled.div<TFancyGridProps & { as: React.ElementType }>`
   display: grid;
-  grid-template-columns: repeat(${({ $grid }) => $grid}, 1fr);
-  grid-gap: ${({ $gap }) => $gap};
+
+  grid-template-columns: ${({ $simpleGrid }) => $simpleGrid && `repeat(${$simpleGrid})`};
+  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows?.join(' ')};
+  grid-template-columns: ${({ $gridTemplateColumns }) => $gridTemplateColumns?.join(' ')};
+  grid-row-gap: ${({ $rowGap }) => getThemeOrValueAsCSS($rowGap)};
+  grid-column-gap: ${({ $columnGap }) => getThemeOrValueAsCSS($columnGap)};
+
   margin: ${({ $margin }) => arrayToCssValues($margin, 'spacing')};
   padding: ${({ $padding }) => arrayToCssValues($padding, 'spacing')};
 
-  ${({ $externalStyle }) => $externalStyle}
-
+  // Breakpoint handling
+  /* Responsive Breakpoints */
   ${({ $breakpoints }) =>
-    $breakpoints &&
-    $breakpoints.map(
+    $breakpoints?.map(
       (breakpoint) => css`
         @media (min-width: ${breakpoint.breakpoint}) {
-          grid-template-columns: repeat(${breakpoint.gridSize}, 1fr);
-          ${breakpoint.gap ? `grid-gap: ${breakpoint.gap};` : ''}
+          grid-template-columns: ${breakpoint.gridSize && `repeat(${breakpoint.gridSize})`};
+          grid-template-columns: ${breakpoint?.rows?.join(' ')};
+          grid-template-rows: ${breakpoint?.rows?.join(' ')};
+          grid-row-gap: ${breakpoint.rowGap};
+          grid-column-gap: ${breakpoint.columnGap};
         }
       `
     )}
+
+  ${({ $externalStyle }) => $externalStyle}; // Apply external styles if providedƒ
 `;
diff --git a/src/components/templates/FancyGrid/FancyGrid.tsx b/src/components/templates/FancyGrid/FancyGrid.tsx
index a224fdb8b..fa65095d7 100644
--- a/src/components/templates/FancyGrid/FancyGrid.tsx
+++ b/src/components/templates/FancyGrid/FancyGrid.tsx
@@ -10,7 +10,21 @@ import { FancyGridItem } from '@/components/templates/FancyGridItem';
 // ------- The FancyGrid to allocate the grid and give the items space ------- //
 // --------------------------------------------------------------------------- //
 function FancyGrid<T extends React.ElementType = 'div'>(props: TDynamicElement<T> & FancyGridProps) {
-  const { children, grid = 12, gap, as, breakpoints, margin, padding, externalStyle } = props;
+  const {
+    children,
+    simpleGrid,
+    gap,
+    as,
+    breakpoints,
+    margin,
+    padding,
+    externalStyle,
+    gridTemplateColumns,
+    gridTemplateRows,
+    rowGap,
+    columnGap,
+    ...htmlProps
+  } = props;
 
   return (
     <GridContainer
@@ -19,8 +33,13 @@ function FancyGrid<T extends React.ElementType = 'div'>(props: TDynamicElement<T
       $margin={margin}
       $padding={padding}
       $externalStyle={externalStyle}
-      $grid={grid}
+      $simplesimpleGrid={simpleGrid}
+      $gridTemplateColumns={gridTemplateColumns}
+      $gridTemplateRows={gridTemplateRows}
+      $gridRowGap={rowGap}
+      $gridColumnGap={columnGap}
       $gap={gap}
+      {...htmlProps}
     >
       {children}
     </GridContainer>
diff --git a/src/components/templates/FancyGrid/docu/FancyGrid.mdx b/src/components/templates/FancyGrid/docu/FancyGrid.mdx
index 104e2783e..0caf0b480 100644
--- a/src/components/templates/FancyGrid/docu/FancyGrid.mdx
+++ b/src/components/templates/FancyGrid/docu/FancyGrid.mdx
@@ -25,7 +25,7 @@ import FancyGrid from './FancyGrid';
 
 const MyComponent = () => {
   return (
-    <FancyGrid grid={12} gap="10px">
+    <FancyGrid simpleGrid={12} gap="10px">
       {/* Place grid items here */}
     </FancyGrid>
   );
@@ -48,7 +48,7 @@ import FancyGrid, { FancyGridItem } from './FancyGrid';
 
 const MyComponent = () => {
   return (
-    <FancyGrid grid={12} gap="10px">
+    <FancyGrid simpleGrid={12} gap="10px">
       <FancyGridItem gridSpace={4}>{/* Content for the first item */}</FancyGridItem>
       <FancyGridItem gridSpace={4}>{/* Content for the second item */}</FancyGridItem>
       {/* More items... */}
@@ -72,7 +72,7 @@ const MyComponent = () => {
   const itemBreakpoints = [{ breakpoint: '768px', gridSize: 1 }];
 
   return (
-    <FancyGrid grid={12} gap="10px" breakpoints={gridBreakpoints}>
+    <FancyGrid simpleGrid={12} gap="10px" breakpoints={gridBreakpoints}>
       <FancyGridItem gridSpace={3} breakpoints={itemBreakpoints}>
         {/* Content for an item */}
       </FancyGridItem>
diff --git a/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx b/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
index 1200d2672..9207c7e3d 100644
--- a/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
+++ b/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
   },
   // Define arguments for the story
   argTypes: {
-    grid: {
+    simpleGrid: {
       description: 'The value of the input',
       defaultValue: '12',
       control: {
@@ -52,6 +52,30 @@ const meta = {
         type: 'object',
       },
     },
+    gridTemplateColumns: {
+      description: 'The grid template columns',
+      control: {
+        type: 'object',
+      },
+    },
+    gridTemplateRows: {
+      description: 'The grid template rows',
+      control: {
+        type: 'object',
+      },
+    },
+    rowGap: {
+      description: 'The row gap',
+      control: {
+        type: 'select',
+      },
+    },
+    columnGap: {
+      description: 'The column gap',
+      control: {
+        type: 'select',
+      },
+    },
   },
 } satisfies Meta<typeof FancyGrid>;
 
@@ -87,8 +111,41 @@ export const Primary: Story = {
   args: {
     padding: ['sm', 'md', 'lg', 'xl'],
     margin: ['sm', 'md', 'lg', 'xl'],
-    grid: 12,
+    simpleGrid: 12,
     gap: '12px',
     breakpoints: [{ breakpoint: '500px', gridSize: 6 }],
   },
 };
+
+// Define the secondary story with row and column grid
+export const Secondary: Story = {
+  render: (args) => (
+    <FancyGrid {...args}>
+      <FancyGrid.Item gridColumn={1} gridRow={1}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={2} gridRow={1}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={3} gridRow={1}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={1} gridRow={2}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={2} gridRow={2}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={3} gridRow={2}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+    </FancyGrid>
+  ),
+  args: {
+    padding: ['sm', 'md', 'lg', 'xl'],
+    margin: ['sm', 'md', 'lg', 'xl'],
+    gap: 'sm',
+    gridTemplateColumns: ['1fr', '1fr', '1fr'],
+    gridTemplateRows: ['1fr', '1fr'],
+  },
+};
diff --git a/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx b/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx
index 13ebc5b9f..13a5526df 100644
--- a/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx
+++ b/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx
@@ -30,7 +30,7 @@ import FancyGridItem from './FancyGridItem';
 
 const MyComponent = () => {
   return (
-    <FancyGrid grid={12} gap="10px">
+    <FancyGrid simpleGrid={12} gap="10px">
       <FancyGridItem gridSpace={6}>{/* Content for a half-width item */}</FancyGridItem>
       <FancyGridItem gridSpace={6}>{/* Content for another half-width item */}</FancyGridItem>
     </FancyGrid>
diff --git a/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx b/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx
index 9d91ab5cc..ae1504d6a 100644
--- a/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx
+++ b/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx
@@ -1,11 +1,12 @@
 import { StyledFancyGridTemplate } from '@/components/templates/FancyGridTemplate/FancyGridTemplate.style';
 import FancyGridTemplateItem from '@/components/templates/FancyGridTemplateItem/FancyGridTemplateItem';
 import { TFancyGridTemplate } from './TFancyGridTemplate.model';
+import { TDynamicElement } from '@/types/TDynamicElement';
 
 // --------------------------------------------------------------------------- //
 // ------------ The FancyGridTemplate Component to define the grid ---------- //
 // --------------------------------------------------------------------------- //
-function FancyGridTemplate(props: TFancyGridTemplate) {
+function FancyGridTemplate<T extends React.ElementType = 'div'>(props: TDynamicElement<T> & TFancyGridTemplate) {
   const {
     gridAreas,
     gridAreasBreakPoints,
@@ -14,6 +15,7 @@ function FancyGridTemplate(props: TFancyGridTemplate) {
     height = '100%',
     width = '100%',
     children,
+    ...htmlProps
   } = props;
 
   // Create a function to select grid areas based on breakpoints
@@ -25,13 +27,14 @@ function FancyGridTemplate(props: TFancyGridTemplate) {
       $gapRow={gapRow}
       $height={height}
       $width={width}
+      {...htmlProps}
     >
       {children}
     </StyledFancyGridTemplate>
   );
 }
 
-FancyGridTemplate.GridItem = FancyGridTemplateItem;
+FancyGridTemplate.Item = FancyGridTemplateItem;
 
 // export is needed after GridItem is added to FancyGridTemplate
 // for Storybook to work
diff --git a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx
index 2b4d95177..cdb2a670e 100644
--- a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx
+++ b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx
@@ -24,7 +24,7 @@ The `StyledFancyGridTemplate` is a styled `div` element that applies the grid la
 
 # GridItem Sub-component
 
-`FancyGridTemplate.GridItem` is a sub-component used to position children within the grid.
+`FancyGridTemplate.Item` is a sub-component used to position children within the grid.
 
 ### `FancyGridTemplateItem` Props
 
@@ -35,5 +35,5 @@ The `StyledFancyGridTemplate` is a styled `div` element that applies the grid la
 ### Usage
 
 ```jsx
-<FancyGridTemplate.GridItem gridArea="header">{/* children components here */}</FancyGridTemplate.GridItem>
+<FancyGridTemplate.Item gridArea="header">{/* children components here */}</FancyGridTemplate.Item>
 ```
diff --git a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx
index 79b1ab638..39c1afe04 100644
--- a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx
+++ b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx
@@ -82,24 +82,24 @@ export const Primary: Story = {
   render: (args) => (
     <FancyGridTemplate {...args}>
       {/* Header */}
-      <FancyGridTemplate.GridItem gridArea="header">
+      <FancyGridTemplate.Item gridArea="header">
         <div style={{ backgroundColor: '#ffcc00', height: '100%' }}>Header</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
 
       {/* Sidebar */}
-      <FancyGridTemplate.GridItem gridArea="sidebar">
+      <FancyGridTemplate.Item gridArea="sidebar">
         <div style={{ backgroundColor: '#00ccff', height: '100%' }}>Sidebar</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
 
       {/* Content */}
-      <FancyGridTemplate.GridItem gridArea="content">
+      <FancyGridTemplate.Item gridArea="content">
         <div style={{ backgroundColor: '#cccccc', height: '100%' }}>Content</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
 
       {/* Footer */}
-      <FancyGridTemplate.GridItem gridArea="footer">
+      <FancyGridTemplate.Item gridArea="footer">
         <div style={{ backgroundColor: '#ff6699', height: '100%' }}>Footer</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
     </FancyGridTemplate>
   ),
   args: {
diff --git a/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx b/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx
index 86261aaf8..1529f922c 100644
--- a/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx
+++ b/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx
@@ -1,10 +1,10 @@
 import { GridItem } from './FancyGridTemplateItem.style';
-import { TFancyGridTemplateItem } from './TFancyGridTemplateItem.model';
+import { TFancyGridTemplateItemWithHTMlAttrs } from './TFancyGridTemplateItem.model';
 
 // --------------------------------------------------------------------------- //
 // -------- The GridItem Component to fill the grid with the postion --------- //
 // --------------------------------------------------------------------------- //
-export default function FancyGridTemplateItem(props: TFancyGridTemplateItem) {
+export default function FancyGridTemplateItem(props: TFancyGridTemplateItemWithHTMlAttrs) {
   const { gridArea, externalStyle, children, ...htmlProps } = props;
 
   return (
diff --git a/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx b/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
index bb1de80ba..adc894ee5 100644
--- a/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
+++ b/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
@@ -18,9 +18,9 @@ export default function FancySkeletonGrid(props: TFancySkeletonGrid) {
   return (
     <FancyGridTemplate gridAreas={gridAreas} gridAreasBreakPoints={gridAreasBreakPoints} {...gridProps}>
       {[...set].map((item, i) => (
-        <FancyGridTemplate.GridItem key={i} gridArea={item}>
+        <FancyGridTemplate.Item key={i} gridArea={item}>
           <SkeletonBox sizeH="fit" sizeW="fit" borderRadius={borderRadius} themeType={themeType} layer={layer} />
-        </FancyGridTemplate.GridItem>
+        </FancyGridTemplate.Item>
       ))}
     </FancyGridTemplate>
   );

From dff9481812345685f3311ac050d813b2899e9cb6 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Wed, 5 Jun 2024 17:07:45 +0200
Subject: [PATCH 07/59] feat: Add FancyContentImage component for displaying
 images in FancyContent

---
 .../molecules/FancyContent/FancyContent.tsx   |  2 ++
 .../FancyContent/utils/FancyContentImage.tsx  | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/components/molecules/FancyContent/utils/FancyContentImage.tsx

diff --git a/src/components/molecules/FancyContent/FancyContent.tsx b/src/components/molecules/FancyContent/FancyContent.tsx
index a8c563304..f54fa65d4 100644
--- a/src/components/molecules/FancyContent/FancyContent.tsx
+++ b/src/components/molecules/FancyContent/FancyContent.tsx
@@ -5,6 +5,7 @@ import { TFancyContentHTMLAttrs } from './FancyContent.model';
 import FancyContentIcon from '@/components/molecules/FancyContent/utils/FancyContentIcon';
 import FancyContentTitle from '@/components/molecules/FancyContent/utils/FancyContentText';
 import FancyContentDescription from '@/components/molecules/FancyContent/utils/FancyContentDescription';
+import FancyContentImage from '@/components/molecules/FancyContent/utils/FancyContentImage';
 
 // --------------------------------------------------------------------------- //
 // ------- The conent Components handles the Content of The componets -------- //
@@ -74,6 +75,7 @@ function FancyContent(props: TFancyContentHTMLAttrs) {
 }
 
 // Link the subcomponents to the main component
+FancyContent.Image = FancyContentImage;
 FancyContent.Icon = FancyContentIcon;
 FancyContent.Title = FancyContentTitle;
 FancyContent.Description = FancyContentDescription;
diff --git a/src/components/molecules/FancyContent/utils/FancyContentImage.tsx b/src/components/molecules/FancyContent/utils/FancyContentImage.tsx
new file mode 100644
index 000000000..5a32dd1b8
--- /dev/null
+++ b/src/components/molecules/FancyContent/utils/FancyContentImage.tsx
@@ -0,0 +1,23 @@
+import { FancyImageWrapper, TFancyImageWrapperWithNativeAttrs } from '@/components/atoms/FancyImageWrapper';
+
+export default function FancyContentImage(props: TFancyImageWrapperWithNativeAttrs) {
+  const {
+    aspectRatio,
+    borderRadius = 'complete',
+    sizeH = 'fit',
+    children,
+    objectFit = 'cover',
+    ...wrapperProps
+  } = props;
+  return (
+    <FancyImageWrapper
+      sizeH={sizeH}
+      aspectRatio={aspectRatio}
+      borderRadius={borderRadius}
+      objectFit={objectFit}
+      {...wrapperProps}
+    >
+      {children}
+    </FancyImageWrapper>
+  );
+}

From 5131e091072c48096d8c6771e601718a1972346c Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Wed, 5 Jun 2024 17:07:55 +0200
Subject: [PATCH 08/59] refactor: Update FancyImageWrapper to use
 TThemeArrayOrValueCSS for borderRadius

---
 .../atoms/FancyImageWrapper/FancyImageWrapper.model.ts      | 3 ++-
 .../atoms/FancyImageWrapper/FancyImageWrapper.style.tsx     | 6 ++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts
index 10e682c1b..049f00594 100644
--- a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts
+++ b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts
@@ -3,13 +3,14 @@ import { CSSProp } from 'styled-components';
 
 import { TCssFiltersTypes } from '@/design/designFunctions/createCssFilterString';
 import { TComponentSizesExtended } from '@/types/TComponentSizes';
+import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
 
 export type TFancyImageWrapper = {
   aspectRatio?: string; // e.g. "16/9"
   children?: React.ReactNode;
   filter?: TCssFiltersTypes;
   externalStyle?: CSSProp;
-  borderRadius?: string;
+  borderRadius?: TThemeArrayOrValueCSS;
   sizeW?: TComponentSizesExtended | 'fit' | string;
   sizeH?: TComponentSizesExtended | 'fit' | string;
   objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
index 5630a2b28..bd042c621 100644
--- a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
+++ b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
@@ -7,8 +7,7 @@ import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 import { globalSizes } from '@/design/theme/globalSizes';
 import { TComponentSizesExtended } from '@/types/TComponentSizes';
 import { createCssFilterString } from '@/design/designFunctions/createCssFilterString';
-import { checkThemeValue } from '@/design/designFunctions/checkThemeValue';
-import { TBorderRadiusSizes } from '@/types/TBorderRadiusSizes';
+import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
 
 type TStyledImage = TStyledPrefixAndPicker<
   TFancyImageWrapper,
@@ -52,8 +51,7 @@ export const ImageWrapper = styled.div<TStyledImage & { theme: TTheme }>`
     width: 100%;
     height: 100%;
     object-fit: ${({ $objectFit }) => ($objectFit ? $objectFit : 'cover')};
-    border-radius: ${({ $borderRadius, theme }) =>
-      checkThemeValue($borderRadius) ? theme.borderRadius[$borderRadius as TBorderRadiusSizes] : $borderRadius};
+    border-radius: ${({ $borderRadius }) => arrayToCssValues($borderRadius, 'borderRadius')};
   }
 
   ${({ $externalStyle }) => $externalStyle};

From c9736a9f59ce646de1920c659e0bd6beb4e486e3 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Wed, 5 Jun 2024 20:15:33 +0200
Subject: [PATCH 09/59] refactor: Update FancyContentRoute to include image in
 FancyContent

---
 src/Routes/FancyContentRoute/FancyContentRoute.tsx   |  9 ++++++++-
 .../molecules/FancyContent/FancyContent.tsx          |  2 +-
 .../molecules/FancyContent/docu/FancyContent.mdx     |  2 ++
 .../FancyContent/docu/FancyContent.stories.tsx       | 12 ++++++++++++
 .../FancyContent/utils/FancyContentImage.tsx         |  2 +-
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/Routes/FancyContentRoute/FancyContentRoute.tsx b/src/Routes/FancyContentRoute/FancyContentRoute.tsx
index bcae62e78..2aabad820 100644
--- a/src/Routes/FancyContentRoute/FancyContentRoute.tsx
+++ b/src/Routes/FancyContentRoute/FancyContentRoute.tsx
@@ -14,7 +14,7 @@ export default function FancyContentRoute() {
           <FancyContent.Icon sizeC="xs" themeType="primary">
             <SVGCheckMark />
           </FancyContent.Icon>
-          <FancyContent.Title themeType="primary">Hiii</FancyContent.Title>
+          <FancyContent.Title>Hiii</FancyContent.Title>
           <FancyContent.Description>Hiii</FancyContent.Description>
         </FancyContent>
 
@@ -22,6 +22,13 @@ export default function FancyContentRoute() {
           <FancyContent.Description>Hiii</FancyContent.Description>
           <FancyContent.Title>Hiii</FancyContent.Title>
         </FancyContent>
+
+        <FancyContent align="center" justify="center" gapBetweenIcon="12px">
+          <FancyContent.Image sizeH="sm">
+            <img src="https://via.placeholder.com/150" alt="placeholder" />
+          </FancyContent.Image>
+          <FancyContent.Title>Hiii</FancyContent.Title>
+        </FancyContent>
       </DesignArea>
     </DesignWrapper>
   );
diff --git a/src/components/molecules/FancyContent/FancyContent.tsx b/src/components/molecules/FancyContent/FancyContent.tsx
index f54fa65d4..30d10bf6c 100644
--- a/src/components/molecules/FancyContent/FancyContent.tsx
+++ b/src/components/molecules/FancyContent/FancyContent.tsx
@@ -32,7 +32,7 @@ function FancyContent(props: TFancyContentHTMLAttrs) {
 
   React.Children.forEach(children, (child) => {
     if (React.isValidElement(child)) {
-      if (child.type === FancyContent.Icon) {
+      if (child.type === FancyContent.Icon || child.type === FancyContent.Image) {
         iconElement = child;
       } else {
         contentGroup.push(child);
diff --git a/src/components/molecules/FancyContent/docu/FancyContent.mdx b/src/components/molecules/FancyContent/docu/FancyContent.mdx
index b34e71822..351e4875e 100644
--- a/src/components/molecules/FancyContent/docu/FancyContent.mdx
+++ b/src/components/molecules/FancyContent/docu/FancyContent.mdx
@@ -54,6 +54,8 @@ function ExampleComponent() {
 
 <Canvas />
 
+<Canvas of={FancyContentStories.WithImage} />
+
 ## Component Properties
 
 <Controls />
diff --git a/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx b/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx
index b15047cc8..bf457647e 100644
--- a/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx
+++ b/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx
@@ -106,3 +106,15 @@ export const WithAllProps: Story = {
     directionTextGroup: 'column',
   },
 };
+
+export const WithImage: Story = {
+  render: (args) => (
+    <FancyContent {...args} align="center" justify="center">
+      <FancyContent.Image>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+      </FancyContent.Image>
+      <FancyContent.Title>Text</FancyContent.Title>
+    </FancyContent>
+  ),
+  args: {},
+};
diff --git a/src/components/molecules/FancyContent/utils/FancyContentImage.tsx b/src/components/molecules/FancyContent/utils/FancyContentImage.tsx
index 5a32dd1b8..dc3c66b2f 100644
--- a/src/components/molecules/FancyContent/utils/FancyContentImage.tsx
+++ b/src/components/molecules/FancyContent/utils/FancyContentImage.tsx
@@ -4,7 +4,7 @@ export default function FancyContentImage(props: TFancyImageWrapperWithNativeAtt
   const {
     aspectRatio,
     borderRadius = 'complete',
-    sizeH = 'fit',
+    sizeH = 'sm',
     children,
     objectFit = 'cover',
     ...wrapperProps

From 4279a6ac9a42eb47e7656fd61133acdf6c9e6eb3 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Wed, 5 Jun 2024 20:55:08 +0200
Subject: [PATCH 10/59] refactor: Update FancyImageWrapper to include position:
 relative for NextImage compatibility

---
 .../atoms/FancyImageWrapper/FancyImageWrapper.style.tsx          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
index bd042c621..1fa5ee010 100644
--- a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
+++ b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
@@ -46,6 +46,7 @@ export const ImageWrapper = styled.div<TStyledImage & { theme: TTheme }>`
   filter: ${({ $filter }) => $filter && createCssFilterString($filter)};
   aspect-ratio: ${({ $aspectRatio }) => ($aspectRatio ? `${$aspectRatio};` : '')};
   line-height: 0;
+  position: relative; // is needed for NextImage to work properly with fill
 
   img {
     width: 100%;

From 57453491cd304fc07eed3cb635fb2859b0a824c3 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Thu, 6 Jun 2024 16:14:52 +0200
Subject: [PATCH 11/59] chore: Update Button component to include className
 prop

---
 src/components/molecules/Button/Button.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/molecules/Button/Button.tsx b/src/components/molecules/Button/Button.tsx
index e20953602..cdc153306 100644
--- a/src/components/molecules/Button/Button.tsx
+++ b/src/components/molecules/Button/Button.tsx
@@ -20,6 +20,7 @@ export default function Button(props: TButtonWithNativeAttrs) {
     textHover,
     notAButton,
     noSize,
+    className,
     ...htmlProps
   } = props;
 
@@ -37,6 +38,7 @@ export default function Button(props: TButtonWithNativeAttrs) {
       $textHover={textHover}
       $disabled={disabled}
       $noSize={noSize}
+      className={className}
     >
       {children}
     </ButtonStyle>

From b5d1f90f44097f9eabf6f179f7c720f685045225 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Thu, 6 Jun 2024 21:51:22 +0200
Subject: [PATCH 12/59] refactor: Update FancyModal and related components for
 better modularity and reusability

---
 .../molecules/BottomBarIcon/sizeSettings.ts    |  4 ++--
 .../organisms/FancyModal/FancyModal.state.tsx  |  4 ++--
 src/components/organisms/FancyModal/index.ts   |  2 +-
 .../arrayToCssValues/TArrayValues.model.ts     | 10 +++++++++-
 .../arrayToCssValues/arrayToCssValues.ts       |  8 +++++++-
 .../calcBorderRadiusWithPadding.ts             | 18 ++++++++++++++++--
 .../calcBorderSizeMinusBoxSize.ts              | 12 +++++++++---
 7 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/BottomBarIcon/sizeSettings.ts b/src/components/molecules/BottomBarIcon/sizeSettings.ts
index ca71442bc..3d132b201 100644
--- a/src/components/molecules/BottomBarIcon/sizeSettings.ts
+++ b/src/components/molecules/BottomBarIcon/sizeSettings.ts
@@ -1,8 +1,8 @@
-import { TSpacings } from '@/types/TSpacings';
 import { TSizeSettings } from '@/types/TSizeSettings';
+import { TGlobalElementSizes } from '@/types/TGlobalElementSizes';
 
 type TSizeObj = {
-  sizeIcon: TSpacings;
+  sizeIcon: TGlobalElementSizes;
 };
 
 export const sizeSettings: TSizeSettings<TSizeObj> = {
diff --git a/src/components/organisms/FancyModal/FancyModal.state.tsx b/src/components/organisms/FancyModal/FancyModal.state.tsx
index 707599fbb..f2b6a621b 100644
--- a/src/components/organisms/FancyModal/FancyModal.state.tsx
+++ b/src/components/organisms/FancyModal/FancyModal.state.tsx
@@ -5,7 +5,7 @@ import { TModal } from '@/components/molecules/Modal';
 
 type TModalConfig = Omit<TModal, 'id' | 'children' | 'status' | 'isOpen'>;
 
-type IModals = {
+export type TFancyModals = {
   id: string;
   children: React.ReactNode;
   status: TModalStatus;
@@ -18,7 +18,7 @@ type IModals = {
 // --------------------- The state for the ModalModuel ----------------------- //
 // --------------------------------------------------------------------------- //
 interface IModalModule {
-  modals: IModals[];
+  modals: TFancyModals[];
   openModal: (id: string, content: React.ReactNode, config: TModalConfig) => void;
   removeModal: (id: string) => void;
   closeModal: (id: string) => void;
diff --git a/src/components/organisms/FancyModal/index.ts b/src/components/organisms/FancyModal/index.ts
index 98a19d74e..bf48e3fb4 100644
--- a/src/components/organisms/FancyModal/index.ts
+++ b/src/components/organisms/FancyModal/index.ts
@@ -1,3 +1,3 @@
 export { default as FancyModal } from './FancyModal';
-
+export { useFancyModalStore } from './FancyModal.state';
 export type { TFancyModal } from './TFancyModal.modal';
diff --git a/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts b/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts
index 2cc28a1a0..816471f88 100644
--- a/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts
+++ b/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts
@@ -8,7 +8,15 @@ export type TThemeArrayCssValues<T extends keyof TThemeValueMap = 'default'> = [
   TThemeValueOrCSS<T>?,
 ];
 
+export type TThemObjectCssValues<T extends keyof TThemeValueMap = 'default'> = {
+  t?: TThemeValueOrCSS<T>;
+  r?: TThemeValueOrCSS<T>;
+  b?: TThemeValueOrCSS<T>;
+  l?: TThemeValueOrCSS<T>;
+};
+
 // the input can be an array or a single value
 export type TThemeArrayOrValueCSS<T extends keyof TThemeValueMap = 'default'> =
   | TThemeArrayCssValues<T>
-  | TThemeValueOrCSS<T>;
+  | TThemeValueOrCSS<T>
+  | TThemObjectCssValues<T>;
diff --git a/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts b/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts
index 5884d13f1..69bf52115 100644
--- a/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts
+++ b/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts
@@ -9,7 +9,8 @@ const arrayToCssValues = <T extends keyof TThemeValueMap = 'default'>(
   values?: TThemeArrayOrValueCSS,
   themeSetting?: T
 ) => {
-  if (!values || !values.toString().length) return '';
+  if (!values || (typeof values !== 'object' && !values.toString().length) || Object.keys(values).length === 0)
+    return '';
 
   // Initialize an empty array for the cleaned values
   let cleanedValues: (string | number | TThemeValueMap[T])[] = [];
@@ -17,6 +18,11 @@ const arrayToCssValues = <T extends keyof TThemeValueMap = 'default'>(
   // Handle the case where values is a single value
   if (typeof values === 'string' || typeof values === 'number') {
     cleanedValues.push(values);
+  } else if (typeof values === 'object' && Array.isArray(values) === false) {
+    // Handle the case where values is an object
+    const { t = 0, r = 0, b = 0, l = 0 } = values;
+
+    cleanedValues = [t, r, b, l].filter((value): value is string | number | TThemeValueMap[T] => value !== undefined);
   } else if (Array.isArray(values)) {
     // Filter out undefined values and assert the type to exclude 'undefined'
     cleanedValues = values.filter((value): value is string | number | TThemeValueMap[T] => value !== undefined);
diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
index d824cf0dc..0feead84b 100644
--- a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
@@ -7,8 +7,22 @@ const calcBorderRadiusWithPadding = (
   inset = true
 ) => {
   // check if they are arrays or single values
-  const splitBorderRadius = Array.isArray(borderRadius) ? borderRadius : [borderRadius];
-  const splitPadding = Array.isArray(padding) ? padding : [padding];
+  let splitBorderRadius;
+
+  //handleborderRadius when its too an object
+  if (typeof borderRadius === 'object' && !Array.isArray(borderRadius)) {
+    splitBorderRadius = [borderRadius.t, borderRadius.r, borderRadius.b, borderRadius.l];
+  } else {
+    splitBorderRadius = Array.isArray(borderRadius) ? borderRadius : [borderRadius];
+  }
+
+  //handle padding when its too an object
+  let splitPadding;
+  if (typeof padding === 'object' && !Array.isArray(padding)) {
+    splitPadding = [padding.t, padding.r, padding.b, padding.l];
+  } else {
+    splitPadding = Array.isArray(padding) ? padding : [padding];
+  }
 
   // define empty arrays
   const paddingArray: string[] = [];
diff --git a/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts b/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts
index d845e25c2..33970fad0 100644
--- a/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts
+++ b/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts
@@ -17,9 +17,15 @@ export default function calcBorderSizeMinusBoxSize(padding?: TThemeArrayOrValueC
     return cssValues.join(' ');
   }
 
-  // if padding is a single value
-  const cssValue = getThemeOrValueAsCSS(padding, 'spacing');
-  return calcBorderMinusBox(parseInt(cssValue), borderSize);
+  if (typeof padding === 'object') {
+    const { t = 0, r = 0, b = 0, l = 0 } = padding;
+    const cssValues = [t, r, b, l].map((value) => {
+      const cssValue = getThemeOrValueAsCSS(value, 'spacing');
+      return calcBorderMinusBox(parseInt(cssValue), borderSize);
+    });
+
+    return cssValues.join(' ');
+  }
 }
 
 const calcBorderMinusBox = (padding: number, borderSize: number) => {

From 4eb73de6dc68e910a50def9003b5d5d8a8be03c6 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Thu, 6 Jun 2024 21:51:58 +0200
Subject: [PATCH 13/59] refactor: Update designSizes.ts and theme.ts for
 additional spacing options

---
 src/design/theme/designSizes.ts | 2 ++
 src/design/theme/theme.ts       | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/design/theme/designSizes.ts b/src/design/theme/designSizes.ts
index 7efab1fe1..c59bc8393 100644
--- a/src/design/theme/designSizes.ts
+++ b/src/design/theme/designSizes.ts
@@ -6,6 +6,8 @@ export const spacingPx = {
   lg: 24 + 'px',
   xl: 32 + 'px',
   xxl: 40 + 'px',
+  xxxl: 48 + 'px',
+  xxxxl: 56 + 'px',
 };
 
 // export const fontSizes = {
diff --git a/src/design/theme/theme.ts b/src/design/theme/theme.ts
index 57422fa71..e577f9206 100644
--- a/src/design/theme/theme.ts
+++ b/src/design/theme/theme.ts
@@ -115,6 +115,8 @@ export const theme = {
     lg: '24px',
     xl: '32px',
     xxl: '40px',
+    xxxl: '48px',
+    xxxxl: '56px',
   },
   fontSizes: {
     displayHero: {

From 599bde732bfbb6e18baacfc7fde2827b017261df Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Fri, 7 Jun 2024 15:20:46 +0200
Subject: [PATCH 14/59] refactor: Update FancyModalHeadLine component to
 support dynamic gap spacing

---
 .../FancyModalHeadLine.model.ts               |  7 ++-
 .../FancyModalHeadLine.style.tsx              | 12 ++++-
 .../FancyModalHeadLine/FancyModalHeadLine.tsx | 47 +++++++++++++++++--
 .../docu/FancyModalHeadLine.stories.tsx       |  6 ++-
 4 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
index 681951463..1ba2ae4a6 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
@@ -1,7 +1,10 @@
+import { TSpacings } from '@/types/TSpacings';
+
 export type TFancyModalHeadLine = {
-  title?: string;
-  subTitle?: string;
+  title?: string | React.ReactNode;
+  subTitle?: string | React.ReactNode;
   alignCenter?: boolean;
+  gap?: TSpacings;
   hr?: boolean;
 };
 
diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
index b57807376..9e2962749 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
@@ -1,12 +1,20 @@
+import { TSpacings } from '@/types/TSpacings';
 import { TTheme } from '@/types/TTheme';
+
 import { styled } from 'styled-components';
 
-export const StyledHeadLine = styled.div<{ $alignCenter?: boolean; theme: TTheme }>`
+type TFancyModalHeadLine = {
+  $alignCenter?: boolean;
+  theme: TTheme;
+  $gap?: TSpacings;
+};
+
+export const StyledHeadLine = styled.div<TFancyModalHeadLine>`
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  gap: ${({ theme }) => theme.spacing.xxs};
+  gap: ${({ theme, $gap }) => ($gap ? theme.spacing[$gap || 'xxs'] : '')};
   align-items: ${({ $alignCenter }) => ($alignCenter ? 'center' : 'flex-start')};
 
   hr {
diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
index 2cc9df721..bb7866b8f 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
@@ -3,18 +3,57 @@ import { FancyLine } from '@/components/atoms/FancyLine';
 
 import { TFancyModalHeadLine } from './FancyModalHeadLine.model';
 import { StyledHeadLine } from './FancyModalHeadLine.style';
+import React from 'react';
 
 // --------------------------------------------------------------------------- //
 // -------- The main HeadLineComponent for the heading for the modals -------- //
 // --------------------------------------------------------------------------- //
 export default function FancyModalHeadLine(props: TFancyModalHeadLine) {
-  const { title, subTitle, alignCenter = true, hr = true, ...htmlProps } = props;
+  const { title, subTitle, alignCenter = true, hr = true, gap = 'xxs', ...htmlProps } = props;
+
+  const TitleReactNode = createTitleNode(title);
+  const SubTitleReactNode = createSubtitleNode(subTitle);
 
   return (
-    <StyledHeadLine $alignCenter={alignCenter} {...htmlProps}>
-      {title && <Typography variant="bodytextLg">{title}</Typography>}
-      {subTitle && <Typography variant="bodytextSm">{subTitle}</Typography>}
+    <StyledHeadLine $alignCenter={alignCenter} $gap={gap} {...htmlProps}>
+      {title && TitleReactNode}
+      {subTitle && SubTitleReactNode}
       {hr && (title || subTitle) && <FancyLine direction="horizontal" />}
     </StyledHeadLine>
   );
 }
+
+function checkForValidReactNode(node?: React.ReactNode | string): node is React.ReactNode {
+  if (!node) return false;
+  if (React.isValidElement(node)) return true;
+
+  return false;
+}
+
+function createTitleNode(title: TFancyModalHeadLine['title']) {
+  if (title && typeof title === 'string') {
+    return (
+      <Typography variant="bodytextLg" fontWeight="bold">
+        {title}
+      </Typography>
+    );
+  }
+
+  if (checkForValidReactNode(title)) return title;
+
+  return null;
+}
+
+function createSubtitleNode(subTitle: TFancyModalHeadLine['subTitle']) {
+  if (subTitle && typeof subTitle === 'string') {
+    return (
+      <Typography variant="bodytextSm" fontWeight="bold">
+        {subTitle}
+      </Typography>
+    );
+  }
+
+  if (checkForValidReactNode(subTitle)) return subTitle;
+
+  return null;
+}
diff --git a/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx b/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
index 75149690c..b89b87ced 100644
--- a/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
+++ b/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
@@ -22,13 +22,15 @@ const meta = {
       },
     },
     title: {
-      description: 'The main title text to be displayed. If not provided, no title will be shown.',
+      description:
+        'The main title text to be displayed. If not provided, no title will be shown. It Supports React nodes, we recomend to use the Typography as prop.',
       control: {
         type: 'text',
       },
     },
     subTitle: {
-      description: 'The subtitle text to be displayed beneath the title. If not provided, no subtitle will be shown.',
+      description:
+        'The subtitle text to be displayed beneath the title. If not provided, no subtitle will be shown. It Supports React nodes, we recomend to use the Typography as prop',
       control: {
         type: 'text',
       },

From c2873acfd91262a70f2dfc37e65306d2c7163cd4 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Fri, 7 Jun 2024 15:21:08 +0200
Subject: [PATCH 15/59] refactor: Update ModalRoute and related components for
 better modularity and reusability

---
 src/Routes/ModalRoute/ModalRoute.tsx                |  4 +++-
 src/components/molecules/Modal/Modal.tsx            | 13 +++++++++++--
 .../organisms/FancyModal/FancyModal.state.tsx       |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/Routes/ModalRoute/ModalRoute.tsx b/src/Routes/ModalRoute/ModalRoute.tsx
index e5ea2aeae..5f7a0323c 100644
--- a/src/Routes/ModalRoute/ModalRoute.tsx
+++ b/src/Routes/ModalRoute/ModalRoute.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 import FancyModal from '../../components/organisms/FancyModal/FancyModal';
 import { useFancyModalStore } from '../../components/organisms/FancyModal/FancyModal.state';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
+import { FancyModalHeadLine } from '@/components/molecules/FancyModalHeadLine';
+import { Typography } from '@/components/atoms/Typography';
 
 export default function ModalRoute() {
   const createModal = useFancyModalStore((state) => state.openModal);
@@ -13,7 +15,7 @@ export default function ModalRoute() {
     createModal(
       'hi',
       <div>
-        hi
+        <FancyModalHeadLine title={'Test'} subTitle={<Typography variant="bodytextSm">Test</Typography>} />
         <FancyButton />
       </div>,
       { isCloseable: true }
diff --git a/src/components/molecules/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx
index d2f3f5e7c..dfb211ffe 100644
--- a/src/components/molecules/Modal/Modal.tsx
+++ b/src/components/molecules/Modal/Modal.tsx
@@ -14,14 +14,23 @@ export default function Modal(props: TModalWithHTMLAttributes) {
   // close the modal when the user clicks on the backdrop
   const closeModalHanlder = () => {
     if (isCloseable === false) return;
+    // enable the scroll on the body when the modal is closed
+    document.body.style.overflow = 'auto';
     //if a components needs controle from outside
     if (onClose && id) onClose(id);
     setModalVisible(false);
   };
 
   useEffect(() => {
-    if (isOpen) setModalVisible(true);
-    else setModalVisible(false);
+    if (isOpen) {
+      // disable the scroll on the body when the modal is open
+      document.body.style.overflow = 'hidden';
+      setModalVisible(true);
+    } else {
+      // enable the scroll on the body when the modal is closed
+      document.body.style.overflow = 'auto';
+      setModalVisible(false);
+    }
   }, [isOpen]);
 
   return (
diff --git a/src/components/organisms/FancyModal/FancyModal.state.tsx b/src/components/organisms/FancyModal/FancyModal.state.tsx
index f2b6a621b..de6c84b28 100644
--- a/src/components/organisms/FancyModal/FancyModal.state.tsx
+++ b/src/components/organisms/FancyModal/FancyModal.state.tsx
@@ -19,7 +19,7 @@ export type TFancyModals = {
 // --------------------------------------------------------------------------- //
 interface IModalModule {
   modals: TFancyModals[];
-  openModal: (id: string, content: React.ReactNode, config: TModalConfig) => void;
+  openModal: (id: string, content: React.ReactNode, config?: TModalConfig) => void;
   removeModal: (id: string) => void;
   closeModal: (id: string) => void;
 }

From b834ee797a13326e48496d423371eb8e53d181f2 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sat, 8 Jun 2024 21:33:57 +0200
Subject: [PATCH 16/59] refactor: Update Modal component to fix scroll behavior

---
 src/components/molecules/Modal/Modal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx
index dfb211ffe..bcdd4a580 100644
--- a/src/components/molecules/Modal/Modal.tsx
+++ b/src/components/molecules/Modal/Modal.tsx
@@ -24,11 +24,11 @@ export default function Modal(props: TModalWithHTMLAttributes) {
   useEffect(() => {
     if (isOpen) {
       // disable the scroll on the body when the modal is open
-      document.body.style.overflow = 'hidden';
+      document.body.style.overflowY = 'hidden';
       setModalVisible(true);
     } else {
       // enable the scroll on the body when the modal is closed
-      document.body.style.overflow = 'auto';
+      document.body.style.overflowY = 'auto';
       setModalVisible(false);
     }
   }, [isOpen]);

From 85c34220669fe5c4cac8056888468cb23ae41977 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 9 Jun 2024 00:39:56 +0200
Subject: [PATCH 17/59] feat: Add copyToClipBoard function to utils/functions

---
 lib/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/index.ts b/lib/index.ts
index 0759ed640..c13038d09 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -158,6 +158,7 @@ export * from '@/utils/hooks/useIntersectionObserver';
 export * from '@/utils/hooks/useWindowDimensions';
 export * from '@/design/theme/FancyThemeProvider';
 export * from '@/utils/functions/clampNumber';
+export * from '@/utils/functions/copyToClipBoard';
 
 // ---------- Design ------- //
 export * from '@/design/designFunctions/calcBorderRadiusOnAlignment';

From c12ae2f0a3e88492b9dc6f0629735baaf36bd9b8 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 9 Jun 2024 21:11:33 +0200
Subject: [PATCH 18/59] refactor: Add sizeC prop to FancyXButton for
 customizing SVG size

---
 src/components/atoms/FancyXButton/FancyXButton.model.ts  | 3 +++
 src/components/atoms/FancyXButton/FancyXButton.style.tsx | 5 ++++-
 src/components/atoms/FancyXButton/FancyXButton.tsx       | 6 +++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/atoms/FancyXButton/FancyXButton.model.ts b/src/components/atoms/FancyXButton/FancyXButton.model.ts
index d1b86a5cc..ac6a20c40 100644
--- a/src/components/atoms/FancyXButton/FancyXButton.model.ts
+++ b/src/components/atoms/FancyXButton/FancyXButton.model.ts
@@ -1,5 +1,7 @@
+import { TFancySVGAtom } from '@/components/atoms/FancySVGAtom';
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
+
 import React from 'react';
 import { CSSProp } from 'styled-components';
 
@@ -7,6 +9,7 @@ export type TFancyXButton = {
   themeType?: TUiColorsNotTransparent;
   layer?: TLayer;
   externalStyle?: CSSProp;
+  sizeC?: TFancySVGAtom['sizeC'];
 };
 
 export type TFancyXButtonNativeAttrs = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'>;
diff --git a/src/components/atoms/FancyXButton/FancyXButton.style.tsx b/src/components/atoms/FancyXButton/FancyXButton.style.tsx
index 439ad11c3..cc54353dc 100644
--- a/src/components/atoms/FancyXButton/FancyXButton.style.tsx
+++ b/src/components/atoms/FancyXButton/FancyXButton.style.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'styled-components';
+import { CSSProp, styled } from 'styled-components';
 
 import { TLayer } from '@/types/TLayer';
 import { TTheme } from '@/types/TTheme';
@@ -11,6 +11,7 @@ interface IStyledFancyXButton {
   $themeType?: TUiColorsNotTransparent;
   $layer?: TLayer;
   theme: TTheme;
+  $externalStyle?: CSSProp;
 }
 export const StyledFancyXButton = styled.button<IStyledFancyXButton>`
   padding: 0;
@@ -25,4 +26,6 @@ export const StyledFancyXButton = styled.button<IStyledFancyXButton>`
     color: ${({ $themeType = 'accent', $layer, theme }) =>
       Color(getBackgroundColor({ $themeType, $layer, theme })).darken(0.5).hex()};
   }
+
+  ${({ $externalStyle }) => $externalStyle}
 `;
diff --git a/src/components/atoms/FancyXButton/FancyXButton.tsx b/src/components/atoms/FancyXButton/FancyXButton.tsx
index f448b0c16..1d9517a25 100644
--- a/src/components/atoms/FancyXButton/FancyXButton.tsx
+++ b/src/components/atoms/FancyXButton/FancyXButton.tsx
@@ -7,11 +7,11 @@ import { SVGXlg } from '@/components/icons/';
 // --------------- The main Component for the X Close Button------- ---------- //
 // --------------------------------------------------------------------------- //
 export default function FancyXButton(props: TFancyXButtonWithHTMLAttrs) {
-  const { themeType, layer, ...htmlProps } = props;
+  const { themeType, layer, externalStyle, sizeC, ...htmlProps } = props;
   //check wich design comes in and add the right color object uiColor or systemMessages  to the button
   return (
-    <StyledFancyXButton $themeType={themeType} $layer={layer} {...htmlProps}>
-      <FancySVGAtom themeType={themeType} layer={layer}>
+    <StyledFancyXButton $themeType={themeType} $layer={layer} $externalStyle={externalStyle} {...htmlProps}>
+      <FancySVGAtom themeType={themeType} layer={layer} sizeC={sizeC}>
         <SVGXlg />
       </FancySVGAtom>
     </StyledFancyXButton>

From 0b1a3969052ac8d58d602ba4ff6eb3b9d9704c31 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 9 Jun 2024 21:15:11 +0200
Subject: [PATCH 19/59] refactor: Improve copyToClipBoard function for better
 cross-browser compatibility and fallback support

---
 .../copyToClipBoard/copyToClipBoard.ts        | 65 +++++++++++++------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/utils/functions/copyToClipBoard/copyToClipBoard.ts b/src/utils/functions/copyToClipBoard/copyToClipBoard.ts
index ed3165a31..e8b18877f 100644
--- a/src/utils/functions/copyToClipBoard/copyToClipBoard.ts
+++ b/src/utils/functions/copyToClipBoard/copyToClipBoard.ts
@@ -1,28 +1,55 @@
 // --------------------------------------------------------------------------- //
 // ------------------- function to copy to the Clipboard --------------------- //
 // --------------------------------------------------------------------------- //
-const copyToClipboard = async (value: string) => {
-  // Create a textarea element
-  const textarea = document.createElement('textarea');
-  // Set the value of the textarea to the text you want to copy
-  textarea.value = value.toString();
-  // Set the styles for the textarea to be hidden
-  textarea.style.position = 'absolute';
-  textarea.style.left = '-9999px';
-  textarea.style.top = '-9999px';
-  // Append the textarea to the DOM
-  document.body.appendChild(textarea);
-  // Select the content of the textarea
-  textarea.select();
-  // Copy the selected content
+// https://stackoverflow.com/a/53951634/938822
+const copyToClipboard = (textToCopyd: string) => {
+  let textarea;
+  let result;
+
   try {
-    await navigator.clipboard.writeText(value);
-    console.log('Text copied to clipboard');
+    // Create a textarea element
+    textarea = document.createElement('textarea');
+    textarea.setAttribute('readonly', 'true');
+    textarea.setAttribute('contenteditable', 'true');
+    textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
+    textarea.value = textToCopyd;
+
+    // Set the styles for the textarea to be hidden
+    document.body.appendChild(textarea);
+
+    // Select the content of the textarea
+    textarea.focus();
+    textarea.select();
+
+    // Copy the selected content
+    const range = document.createRange();
+    range.selectNodeContents(textarea);
+
+    // Remove all ranges from the selection.
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+
+    textarea.setSelectionRange(0, textarea.value.length);
+    result = document.execCommand('copy');
+    textarea.blur();
   } catch (err) {
-    console.error('Failed to copy text: ', err);
+    console.error(err);
+    result = null;
+  } finally {
+    if (textarea) document.body.removeChild(textarea);
+  }
+
+  // manual copy fallback using prompt
+  if (!result) {
+    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    const copyHotkey = isMac ? '⌘C' : 'CTRL+C';
+    result = prompt(`Press ${copyHotkey}`, textToCopyd);
+    if (!result) {
+      return false;
+    }
   }
-  // Remove the textarea from the DOM
-  document.body.removeChild(textarea);
+  return true;
 };
 
 export default copyToClipboard;

From 1e79916835a02a80fb2750790dae5e633c2f208e Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 9 Jun 2024 21:15:55 +0200
Subject: [PATCH 20/59] refactor: Update FancyModalHeadLine component to
 support dynamic gap spacing

---
 .../FancyModalHeadLine.model.ts               | 12 ++++--
 .../FancyModalHeadLine.style.tsx              | 39 +++++++++++++------
 .../FancyModalHeadLine/FancyModalHeadLine.tsx | 24 ++++++++----
 .../docu/FancyModalHeadLine.stories.tsx       | 20 ++++++++--
 4 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
index 1ba2ae4a6..f10bc742c 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
@@ -1,11 +1,15 @@
+import React from 'react';
+import { TFancyLine } from '@/components/atoms/FancyLine';
 import { TSpacings } from '@/types/TSpacings';
 
 export type TFancyModalHeadLine = {
+  alignCenter?: boolean;
   title?: string | React.ReactNode;
   subTitle?: string | React.ReactNode;
-  alignCenter?: boolean;
-  gap?: TSpacings;
-  hr?: boolean;
+  gapBetweenText?: TSpacings;
+  hr?: TFancyLine;
+  onXButtonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-export type TFancyModalHeadLineWithHTMLProps = TFancyModalHeadLine & React.HTMLProps<HTMLDivElement>;
+export type TFancyModalHeadLineWithHTMLProps = TFancyModalHeadLine &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
index 9e2962749..f71586972 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
@@ -1,24 +1,41 @@
-import { TSpacings } from '@/types/TSpacings';
-import { TTheme } from '@/types/TTheme';
-
 import { styled } from 'styled-components';
 
-type TFancyModalHeadLine = {
-  $alignCenter?: boolean;
-  theme: TTheme;
-  $gap?: TSpacings;
-};
+import { TSpacings } from '@/types/TSpacings';
+import { TTheme } from '@/types/TTheme';
+import { TFancyModalHeadLine } from './FancyModalHeadLine.model';
+import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 
-export const StyledHeadLine = styled.div<TFancyModalHeadLine>`
+export const StyledHeadLine = styled.div<{ theme: TTheme; $gap?: TSpacings }>`
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  gap: ${({ theme, $gap }) => ($gap ? theme.spacing[$gap || 'xxs'] : '')};
-  align-items: ${({ $alignCenter }) => ($alignCenter ? 'center' : 'flex-start')};
 
   hr {
     margin-top: ${({ theme }) => theme.spacing.xs};
     width: 100%;
   }
 `;
+
+type TStyledHeadLineTitles = TStyledPrefixAndPicker<TFancyModalHeadLine, 'alignCenter' | 'gapBetweenText'>;
+export const StyledHeadLineTitles = styled.span<TStyledHeadLineTitles & { theme: TTheme }>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ $alignCenter }) => ($alignCenter ? 'center' : 'flex-start')};
+  gap: ${({ theme, $gapBetweenText }) => $gapBetweenText && theme.spacing[$gapBetweenText || 'xxs']};
+  padding: ${({ $alignCenter, theme }) => ($alignCenter ? `0 ${theme.spacing.xl}` : `0 ${theme.spacing.xl} 0 0 `)};
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+export const HeadLineWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  position: relative;
+`;
+
+export const IconWrapper = styled.span`
+  position: absolute;
+  right: 12px;
+  top: 12px;
+`;
diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
index bb7866b8f..4e191d701 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
@@ -1,23 +1,31 @@
+import React from 'react';
 import { Typography } from '@/components/atoms/Typography';
 import { FancyLine } from '@/components/atoms/FancyLine';
 
-import { TFancyModalHeadLine } from './FancyModalHeadLine.model';
-import { StyledHeadLine } from './FancyModalHeadLine.style';
-import React from 'react';
+import { TFancyModalHeadLine, TFancyModalHeadLineWithHTMLProps } from './FancyModalHeadLine.model';
+import { HeadLineWrapper, StyledHeadLine, StyledHeadLineTitles, IconWrapper } from './FancyModalHeadLine.style';
+import { FancyXButton } from '@/components/atoms/FancyXButton';
 
 // --------------------------------------------------------------------------- //
 // -------- The main HeadLineComponent for the heading for the modals -------- //
 // --------------------------------------------------------------------------- //
-export default function FancyModalHeadLine(props: TFancyModalHeadLine) {
-  const { title, subTitle, alignCenter = true, hr = true, gap = 'xxs', ...htmlProps } = props;
+export default function FancyModalHeadLine(props: TFancyModalHeadLineWithHTMLProps) {
+  const { title, subTitle, alignCenter = false, hr = {}, gapBetweenText = 'xxs', onXButtonClick, ...htmlProps } = props;
 
   const TitleReactNode = createTitleNode(title);
   const SubTitleReactNode = createSubtitleNode(subTitle);
 
   return (
-    <StyledHeadLine $alignCenter={alignCenter} $gap={gap} {...htmlProps}>
-      {title && TitleReactNode}
-      {subTitle && SubTitleReactNode}
+    <StyledHeadLine {...htmlProps}>
+      <HeadLineWrapper>
+        <StyledHeadLineTitles $gapBetweenText={gapBetweenText} $alignCenter={alignCenter}>
+          {title && TitleReactNode}
+          {subTitle && SubTitleReactNode}
+        </StyledHeadLineTitles>
+        <IconWrapper>
+          <FancyXButton onClick={onXButtonClick && onXButtonClick} />
+        </IconWrapper>
+      </HeadLineWrapper>
       {hr && (title || subTitle) && <FancyLine direction="horizontal" />}
     </StyledHeadLine>
   );
diff --git a/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx b/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
index b89b87ced..c5add1bf2 100644
--- a/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
+++ b/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
@@ -37,9 +37,23 @@ const meta = {
     },
     hr: {
       description:
-        'Determines whether a decorative horizontal rule (`<hr>`) should be displayed beneath the title and subtitle. Defaults to `true`.',
+        'Determines whether a decorative horizontal rule (`<hr>`) should be displayed beneath the title and subtitle. FancyLine Props can be passed here.',
       control: {
-        type: 'boolean',
+        type: 'object',
+      },
+    },
+    onXButtonClick: {
+      description:
+        'Callback function that is triggered when the X button is clicked. If not provided, the X button will not be displayed.',
+      control: {
+        type: 'function',
+      },
+    },
+    gapBetweenText: {
+      description:
+        'The amount of space between the title and subtitle. This can be set to any of the predefined spacings in the theme. Defaults to `xxs`.',
+      control: {
+        type: 'select',
       },
     },
   },
@@ -55,6 +69,6 @@ export const Primary: Story = {
     alignCenter: true,
     title: 'Title',
     subTitle: 'SubTitle',
-    hr: true,
+    hr: {},
   },
 };

From 8226a6e235374488bb8a2c49bca620af361b8da3 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 9 Jun 2024 21:22:15 +0200
Subject: [PATCH 21/59] refactor: Improve copyToClipBoard function for better
 cross-browser compatibility and fallback support

---
 .../FancyColorDisplay/FancyColorDisplay.tsx        | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx b/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx
index 2cf5fb630..9399afbdd 100644
--- a/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx
+++ b/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx
@@ -19,14 +19,12 @@ export default function FancyColorDisplay(props: TFancyColorDisplay) {
 
   // Function to copy the color to the clipboard
   const copyValue = () => {
-    copyToClipBoard(colorValue.toString())
-      .then(() => {
-        setCopyd(true);
-        setTimeout(() => setCopyd(false), 1000);
-      })
-      .catch((err) => {
-        console.error('Failed to copy: ', err);
-      });
+    setCopyd(true);
+    copyToClipBoard(colorValue.toString());
+
+    setTimeout(() => {
+      setCopyd(false);
+    }, 500);
   };
 
   return (

From 1dc1c85add0869410f5c7f90d82b7f07957c756d Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 9 Jun 2024 21:22:57 +0200
Subject: [PATCH 22/59] refactor: Add useFancyToastMessageStore hook for
 managing toast message state

---
 src/components/organisms/FancyToastMessage/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/organisms/FancyToastMessage/index.ts b/src/components/organisms/FancyToastMessage/index.ts
index 3be8386b0..036167f52 100644
--- a/src/components/organisms/FancyToastMessage/index.ts
+++ b/src/components/organisms/FancyToastMessage/index.ts
@@ -1,3 +1,4 @@
 export { default as FancyToastMessage } from './FancyToastMessage';
+export { useFancyToastMessageStore } from './FancyToastMessage.state';
 
 export type { TFancyToastMessageStore, TFancyToastMessage } from './TFancyToastMessage.model';

From f5fa00dd6f73b5081bca3b0bf9be811280dd2a26 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 9 Jun 2024 21:23:43 +0200
Subject: [PATCH 23/59] refactor: Remove FancyModal import from ModalRoute.tsx
 and update StyledDialog styles

---
 src/Routes/ModalRoute/ModalRoute.tsx                    | 1 -
 src/components/atoms/SimpleDialog/SimpleDialog.style.ts | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Routes/ModalRoute/ModalRoute.tsx b/src/Routes/ModalRoute/ModalRoute.tsx
index 5f7a0323c..2b1c2fe35 100644
--- a/src/Routes/ModalRoute/ModalRoute.tsx
+++ b/src/Routes/ModalRoute/ModalRoute.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react';
 
-import FancyModal from '../../components/organisms/FancyModal/FancyModal';
 import { useFancyModalStore } from '../../components/organisms/FancyModal/FancyModal.state';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
 import { FancyModalHeadLine } from '@/components/molecules/FancyModalHeadLine';
diff --git a/src/components/atoms/SimpleDialog/SimpleDialog.style.ts b/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
index c22337c88..2c0b59e36 100644
--- a/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
+++ b/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
@@ -15,14 +15,14 @@ type TStyledDialog = {
 
 export const StyledDialog = styled(animated.div)<TStyledDialog>`
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: calc(50vh + env(safe-area-inset-bottom));
+  left: 50vw;
+  transform: translate(-50vh, -50vw);
   padding: ${({ theme }) => theme.spacing.xl};
   border-radius: ${({ theme }) => theme.borderRadius.lg};
   border: none;
   width: 70%;
-  max-height: 85%;
   ${({ theme, $themeType, $layer = 1 }) => getColorsForComponent({ theme, $themeType, $layer })}
   z-index: 1000;
+  outline: none;
 `;

From 654007d9581ce71b87347073b05be411655fb314 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 10 Jun 2024 17:09:55 +0200
Subject: [PATCH 24/59] refactor: Update useActiveBreakpoint hook for
 responsive design

---
 .../useActiveBreakpoint.mdx                   | 68 +++++++++++++++++++
 .../useActiveBreakpoint.ts                    | 29 ++++++++
 .../useWichBreakPointIsActive.mdx             | 44 ------------
 .../useWichBreakPointIsActive.ts              | 40 -----------
 4 files changed, 97 insertions(+), 84 deletions(-)
 create mode 100644 src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.mdx
 create mode 100644 src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.ts
 delete mode 100644 src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.mdx
 delete mode 100644 src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.ts

diff --git a/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.mdx b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.mdx
new file mode 100644
index 000000000..83702767a
--- /dev/null
+++ b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.mdx
@@ -0,0 +1,68 @@
+# useActiveBreakpoint Hook
+
+## Overview
+
+The `useActiveBreakpoint` hook simplifies responsive design in your React applications by dynamically determining the current active breakpoint based on user-defined media queries. It allows you to easily adjust layouts, styles, or content based on the screen size, making your components adaptable to different devices.
+
+## Importing the Hook
+
+Begin by importing the hook into your component file:
+
+```javascript
+import { useActiveBreakpoint } from 'fui-fancyui';
+```
+
+## Usage
+
+Here's how you utilize the hook in a functional component:
+
+```javascript
+import React from 'react';
+import { useActiveBreakpoint } from 'fui-fancyui';
+
+const MyComponent = () => {
+  // Define your breakpoints (adjust these as needed)
+  const breakpoints: Breakpoint[] = [
+    { identifier: 'xs', query: '(max-width: 575.98px)' },
+    { identifier: 'sm', query: '(min-width: 576px) and (max-width: 767.98px)' },
+    { identifier: 'md', query: '(min-width: 768px) and (max-width: 991.98px)' },
+    { identifier: 'lg', query: '(min-width: 992px) and (max-width: 1199.98px)' },
+    { identifier: 'xl', query: '(min-width: 1200px)' }
+  ];
+
+  const activeBreakpoint = useActiveBreakpoint(breakpoints);
+
+  return (
+    <div>
+      Current breakpoint: {activeBreakpoint || 'None'}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+**Explanation:**
+
+1. **Define Breakpoints:** Create an array of `Breakpoint` objects, each specifying an identifier (e.g., 'sm', 'md') and a corresponding media query string.
+2. **Call the Hook:** Pass your `breakpoints` array to the `useActiveBreakpoint` hook.
+3. **Access Active Breakpoint:** The hook returns the identifier of the active breakpoint (e.g., 'md') or `null` if no breakpoint matches.
+
+## Hook Definition
+
+- **Purpose:** To determine the currently active breakpoint from the provided user-defined breakpoints.
+- **Arguments:**
+  - `breakpoints` (required): An array of `Breakpoint` objects, where each object has an `identifier` (string) and a `query` (string).
+- **Return Value:**
+  - The identifier (string) of the active breakpoint if a match is found.
+  - `null` if none of the provided breakpoints match the current screen size.
+
+**How It Works:**
+
+- The hook uses `useState` to store the active breakpoint and `useEffect` to monitor window resize events.
+- On resize, it evaluates the media queries you provided and updates the state with the matching breakpoint identifier.
+
+## Important Considerations
+
+- **Breakpoint Definition:** Carefully define your breakpoints to match your design requirements. Consider standard breakpoints (xs, sm, md, lg, xl) or create custom ones.
+- **Null Handling:** Always handle the case where `null` is returned (e.g., on initial render or when no breakpoints match).
diff --git a/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.ts b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.ts
new file mode 100644
index 000000000..25638814d
--- /dev/null
+++ b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { TBreakpoint } from '@/types/TBreakPoint';
+
+export const useActiveBreakpoint = (breakpoints?: TBreakpoint[]) => {
+  // Helper to get the active breakpoint based on media query matches
+  const getActiveBreakpoint = (): string | null => {
+    if (!breakpoints) return null;
+
+    for (const breakpoint of breakpoints) {
+      if (window.matchMedia(breakpoint.query).matches) {
+        return breakpoint.id;
+      }
+    }
+    return null; // No match found
+  };
+
+  const [activeBreakpoint, setActiveBreakpoint] = useState<string | null>(getActiveBreakpoint());
+
+  useEffect(() => {
+    const handleResize = () => {
+      setActiveBreakpoint(getActiveBreakpoint());
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [breakpoints]); // Re-evaluate on breakpoints change
+
+  return activeBreakpoint;
+};
diff --git a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.mdx b/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.mdx
deleted file mode 100644
index 3b135d3e9..000000000
--- a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
-# useWichBreakPointIsActive Hook
-
-## Overview
-
-The `useWichBreakPointIsActive` hook is designed to help you easily determine the current active breakpoint in your React application. It leverages the `window.matchMedia()` API to detect changes in the viewport sizeC and returns the active breakpoint name based on your application's theme breakpoints.
-
-## Importing the Hook
-
-First, you need to import the hook into your component:
-
-```javascript
-import { useWichBreakPointIsActive } from 'path-to-your-hooks-folder';
-```
-
-## Usage
-
-You can use this hook in any functional component to get the current active breakpoint. This is particularly useful for responsive designs where different layouts or styles are needed for different screen sizes.
-
-```javascript
-import React from 'react';
-import { useWichBreakPointIsActive } from 'path-to-your-hooks-folder';
-
-const MyComponent = () => {
-  const activeBreakpoint = useWichBreakPointIsActive();
-
-  return <div>Current breakpoint: {activeBreakpoint}</div>;
-};
-
-export default MyComponent;
-```
-
-## Hook Definition
-
-Here's a breakdown of the `useWichBreakPointIsActive` hook:
-
-- **Purpose**: To determine the currently active breakpoint based on the window sizeC.
-- **Return Value**: Returns the name of the current active breakpoint as a string (e.g., 'sm', 'md', 'lg', 'xl', or 'xs').
-
-The hook uses the `useState` and `useEffect` hooks from React to maintain and update the state of the active breakpoint.
-
-## Note
-
-- The hook relies on the breakpoints defined in your theme store (`themeStore`). Make sure these are set up correctly.
-- The hook will automatically clean up the event listener on component unmount to prevent memory leaks.
diff --git a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.ts b/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.ts
deleted file mode 100644
index 9aed6c5c2..000000000
--- a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-import { themeStore } from '@/design/theme/themeStore';
-import { TBreakPoints } from 'lib';
-
-export const useWichBreakPointIsActive = () => {
-  const breakpoints = themeStore.getState().theme.breakpoints;
-
-  // Helper function to get the current breakpoint
-  const getCurrentBreakpoint = () => {
-    if (window.matchMedia(breakpoints.xl).matches) {
-      return 'xl';
-    } else if (window.matchMedia(breakpoints.lg).matches) {
-      return 'lg';
-    } else if (window.matchMedia(breakpoints.md).matches) {
-      return 'md';
-    } else if (window.matchMedia(breakpoints.sm).matches) {
-      return 'sm';
-    } else {
-      return 'xs';
-    }
-  };
-
-  // State to store the current breakpoint
-  const [activeBreakpoint, setActiveBreakpoint] = useState(getCurrentBreakpoint());
-
-  useEffect(() => {
-    // Update the breakpoint on window resize
-    const handleResize = () => {
-      setActiveBreakpoint(getCurrentBreakpoint());
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    // Cleanup the event listener on component unmount
-    return () => window.removeEventListener('resize', handleResize);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return activeBreakpoint as TBreakPoints;
-};

From c703c38c31ddd4d44482780b098c3ea702d45fcd Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 10 Jun 2024 17:12:28 +0200
Subject: [PATCH 25/59] feat: Add TBreakpoint type for defining breakpoints in
 responsive design

---
 src/types/TBreakPoint.ts                     | 4 ++++
 src/utils/hooks/useActiveBreakpoint/index.ts | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 src/types/TBreakPoint.ts
 create mode 100644 src/utils/hooks/useActiveBreakpoint/index.ts

diff --git a/src/types/TBreakPoint.ts b/src/types/TBreakPoint.ts
new file mode 100644
index 000000000..aae6c7de2
--- /dev/null
+++ b/src/types/TBreakPoint.ts
@@ -0,0 +1,4 @@
+export type TBreakpoint = {
+  id: string;
+  query: string; // Media query string (e.g., '(min-width: 768px)')
+};
diff --git a/src/utils/hooks/useActiveBreakpoint/index.ts b/src/utils/hooks/useActiveBreakpoint/index.ts
new file mode 100644
index 000000000..f46bbe83f
--- /dev/null
+++ b/src/utils/hooks/useActiveBreakpoint/index.ts
@@ -0,0 +1 @@
+export { useActiveBreakpoint } from './useActiveBreakpoint';

From aa149f66a0c29d83574ff02e91b60ca7320a7224 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 10 Jun 2024 17:12:49 +0200
Subject: [PATCH 26/59] refactor: Update FancySkeletonGrid component to use
 useActiveBreakpoint hook

---
 .../FancySkeletonGrid/FancySkeletonGrid.tsx          | 12 ++++++++++--
 .../FancySkeletonGrid/TFancySkeletonGrid.model.ts    |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx b/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
index adc894ee5..813281ffb 100644
--- a/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
+++ b/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
@@ -1,16 +1,24 @@
-import { useWichBreakPointIsActive } from '@/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive';
+import { useActiveBreakpoint } from '@/utils/hooks/useActiveBreakpoint';
 
 import { SkeletonBox } from '@/components/atoms/SkeletonBox';
 import { FancyGridTemplate } from '@/components/templates/FancyGridTemplate';
 import { TFancySkeletonGrid } from '@/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model';
 import { generateGridSet } from '@/components/templates/FancySkeletonGrid/utils/generateGidSet';
+import { themeStore } from '@/design/theme/themeStore';
 
 // --------------------------------------------------------------------------- //
 // -------- The Component generates Skeletonboxes based on the GridArea ------ //
 // --------------------------------------------------------------------------- //
 export default function FancySkeletonGrid(props: TFancySkeletonGrid) {
   const { gridAreas, gridAreasBreakPoints, layer, themeType, borderRadius, ...gridProps } = props;
-  const activeBreakPoint = useWichBreakPointIsActive();
+  const themeBreakPoints = themeStore((state) => state.theme.breakpoints);
+
+  const breakPointsArray = Object.keys(themeBreakPoints).map((key) => ({
+    id: key,
+    query: themeBreakPoints[key as keyof typeof themeBreakPoints],
+  }));
+
+  const activeBreakPoint = useActiveBreakpoint(breakPointsArray);
 
   // Generate a set of grid areas based on the gridAreas and gridAreasBreakPoints
   const set = generateGridSet({ gridAreas, gridAreasBreakPoints, activeBreakPoint });
diff --git a/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts b/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts
index 5d18f3786..6398a5552 100644
--- a/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts
+++ b/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts
@@ -1,5 +1,5 @@
 import { TSkeletonBox } from '@/components/atoms/SkeletonBox';
 import { TFancyGridTemplate } from '@/components/templates/FancyGridTemplate';
 
-export type TFancySkeletonGrid = Omit<TFancyGridTemplate, 'children'> &
+export type TFancySkeletonGrid = Omit<TFancyGridTemplate, 'children' | 'breakPoints'> &
   Omit<TSkeletonBox, 'aspectRatio' | 'sizeW' | 'sizeH'>;

From f428ba8df471dd402a84f34d9d12809a14f6ef73 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 10 Jun 2024 17:13:43 +0200
Subject: [PATCH 27/59] refactor: Update brakePoints.ts and theme.ts to use
 simplified breakpoint syntax

---
 src/design/theme/brakePoints.ts | 8 ++++----
 src/design/theme/theme.ts       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/design/theme/brakePoints.ts b/src/design/theme/brakePoints.ts
index e4ab5ea16..985dc436b 100644
--- a/src/design/theme/brakePoints.ts
+++ b/src/design/theme/brakePoints.ts
@@ -1,6 +1,6 @@
 export const breakpoints = {
-  sm: 'screen and (min-width: 576px)',
-  md: 'screen and (min-width: 768px)',
-  lg: 'screen and (min-width: 992px)',
-  xl: 'screen and (min-width: 1200px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
 };
diff --git a/src/design/theme/theme.ts b/src/design/theme/theme.ts
index e577f9206..09dc3522f 100644
--- a/src/design/theme/theme.ts
+++ b/src/design/theme/theme.ts
@@ -211,10 +211,10 @@ export const theme = {
     },
   },
   breakpoints: {
-    sm: 'screen and (min-width: 576px)',
-    md: 'screen and (min-width: 768px)',
-    lg: 'screen and (min-width: 992px)',
-    xl: 'screen and (min-width: 1200px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
   },
   globalElementSizes: {
     xxs: '16px',

From 913516c105f0b1507cf7e00658367cdd29754a31 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 10 Jun 2024 17:15:19 +0200
Subject: [PATCH 28/59] refactor: Add TBreakPoint type for defining breakpoints
 in responsive design

---
 src/types/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/types/index.ts b/src/types/index.ts
index 8e73058bd..c000071ac 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -21,3 +21,4 @@ export * from './TBreakPoints';
 export * from './TSizeSettings';
 export * from './TDynamicElement';
 export * from './TFlexDirection';
+export * from './TBreakPoint';

From ebe2bdb3adde3fc06694082e45042813d0b7b162 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 10 Jun 2024 17:15:34 +0200
Subject: [PATCH 29/59] refactor: Update FancyModalHeadLine component to use
 dynamic gap spacing

---
 .../FancyModalHeadLine/FancyModalHeadLine.style.tsx  |  6 +++---
 .../FancyGridTemplate/TFancyGridTemplate.model.ts    |  5 +++--
 .../FancySkeletonGrid/utils/generateGidSet.ts        | 12 ++++++------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
index f71586972..b4b9db787 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
@@ -34,8 +34,8 @@ export const HeadLineWrapper = styled.div`
   position: relative;
 `;
 
-export const IconWrapper = styled.span`
+export const IconWrapper = styled.span<{ theme: TTheme }>`
   position: absolute;
-  right: 12px;
-  top: 12px;
+  right: ${({ theme }) => theme.spacing.xs};
+  top: ${({ theme }) => theme.spacing.xs};
 `;
diff --git a/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts b/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts
index 236ac7528..662ee85d4 100644
--- a/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts
+++ b/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts
@@ -1,8 +1,8 @@
+import { TBreakpoint } from '@/types/TBreakPoint';
 import { TSpacings } from '@/types/TSpacings';
-import { TBreakPoints } from '@/types/TBreakPoints';
 
 export type TGridAreasBreakpoints = {
-  [key in TBreakPoints]?: string[];
+  [key: string]: string[];
 };
 
 // Define types for the props
@@ -14,4 +14,5 @@ export type TFancyGridTemplate = {
   gapRow?: TSpacings;
   width?: string;
   height?: string;
+  breakPoints?: TBreakpoint[];
 };
diff --git a/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts b/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts
index 8375d3583..70405eedf 100644
--- a/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts
+++ b/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts
@@ -1,14 +1,14 @@
-import { TBreakPoints } from '@/types/TBreakPoints';
+import { TGridAreasBreakpoints } from '@/components/templates/FancyGridTemplate/TFancyGridTemplate.model';
 import { TFancySkeletonGrid } from '@/components/templates/FancySkeletonGrid';
 
 // ---------- This generates the set for the object or array ------- //
-type TgnerateGridSet = {
+type TgnerateGridSet<BreakPointName extends keyof TGridAreasBreakpoints & string> = {
   gridAreas: TFancySkeletonGrid['gridAreas'];
   gridAreasBreakPoints: TFancySkeletonGrid['gridAreasBreakPoints'];
-  activeBreakPoint: TBreakPoints;
+  activeBreakPoint: BreakPointName | null;
 };
 
-export const generateGridSet = (props: TgnerateGridSet) => {
+export const generateGridSet = (props: TgnerateGridSet<keyof TGridAreasBreakpoints & string>) => {
   const { gridAreas, gridAreasBreakPoints, activeBreakPoint } = props;
   const set = new Set<string>();
 
@@ -24,10 +24,10 @@ export const generateGridSet = (props: TgnerateGridSet) => {
   if (gridAreas) addToSet(gridAreas);
 
   // gridAreas is an object with breakpoints
-  if (gridAreasBreakPoints) {
+  if (gridAreasBreakPoints && activeBreakPoint) {
     const value = gridAreasBreakPoints[activeBreakPoint];
 
-    addToSet(value!);
+    addToSet(value);
   }
 
   return set;

From d48fa172452c1c6f4d7c958e9eafc6b5ab4eaac1 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Tue, 11 Jun 2024 17:31:28 +0200
Subject: [PATCH 30/59] refactor: Update FancyTabSwitch component to use
 vertical direction and increase layer to 5

---
 .../ExperimentalRoute/ExperimentalRoute.tsx   | 31 ++++++++++---------
 src/Routes/TabSwitchRoute/TabSwitchRoute.tsx  |  4 +--
 .../TFancyTabSwitchButton.model.ts            |  6 ++--
 .../molecules/TabSwitch/TTabSwitch.model.ts   |  3 +-
 .../FancyTabSwitch/FancyTabSwitch.tsx         |  1 -
 .../FancyTabSwitch/TFancyTabSwitch.model.ts   |  3 +-
 src/types/TUiColorsMainAndAccent.ts           |  3 ++
 src/types/index.ts                            |  1 +
 8 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100644 src/types/TUiColorsMainAndAccent.ts

diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
index 0d039531e..a4ee7ea86 100644
--- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
+++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -11,6 +11,7 @@ import PasswordStrengthMeter from '@/components/atoms/PasswordStrengthMeter/Pass
 import styled from 'styled-components';
 import { FancyNumberInput } from '@/components/organisms/FancyNumberInput';
 import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
+import { FancyTabSwitch } from '@/components/organisms/FancyTabSwitch';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -79,27 +80,27 @@ export default function ExperimentalRoute() {
             onClick={() => switchTheme()}
           />
         </DesignArea>
-        <FancyFlexBox align="flex-start" justify="flex-start">
-          <FancyNumberInput
-            underline={false}
-            label="Day"
-            placeholder="DD"
-            maxLength={2}
-            externalStyle={{ maxWidth: '6ch !important' }}
-          />
-          <FancyNumberInput label="Month" placeholder="MM" maxLength={2} externalStyle={{ width: '6ch !important' }} />
-          <FancyNumberInput label="Year" placeholder="YYYY" maxLength={4} externalStyle={{ width: '7ch !important' }} />
-        </FancyFlexBox>
+
+        <FancyTabSwitch
+          wide
+          outlined
+          direction="vertical"
+          sizeC="lg"
+          label="test"
+          borderRadius={'xl'}
+          layer={5}
+          values={defaultProps}
+        />
       </DesignWrapper>
     </>
   );
 }
 
 const defaultProps = [
-  { label: 'hi1', value: 'hi1', id: '1' },
-  { label: 'hi2', value: 'hi2', id: '2' },
-  { label: 'hi3', value: 'hi3', id: '3' },
-  { label: 'hi4', value: 'hi4', id: '4' },
+  { label: 'hi1', value: 'hi1', itemKey: '1' },
+  { label: 'hi2', value: 'hi2', itemKey: '2' },
+  { label: 'hi3', value: 'hi3', itemKey: '3' },
+  { label: 'hi4', value: 'hi4', itemKey: '4' },
 ];
 
 const Box = styled.div`
diff --git a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
index 045e14ad1..263b89d53 100644
--- a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
+++ b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
@@ -141,14 +141,14 @@ export default function TabSwitchRoute() {
             />
 
             <FancyTabSwitch
+              direction="vertical"
               sizeC="lg"
               label="test"
               wide
               outlined
-              direction="vertical"
               values={switchValues}
               borderRadius={'xl'}
-              layer={3}
+              layer={5}
               currentSelect={test}
               handler={(id: string) => setTest(id)}
             />
diff --git a/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts b/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts
index 529284a5e..4e45e6dda 100644
--- a/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts
+++ b/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts
@@ -4,6 +4,8 @@ import { CSSProp } from 'styled-components';
 import { TComponentSizes } from '@/types/TComponentSizes';
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
+import { TUiColorsMainAndAccent } from '@/types/TUiColorsMainAndAccent';
+import { TTextAlignLR } from '@/types/TTextAlignLR';
 
 export type TTabSwitchDetailsLabelIcon = {
   itemKey: string;
@@ -21,9 +23,9 @@ export type TTabSwitchButton = {
   selected: boolean;
   onClick?: (key: string) => void;
   themeType?: TUiColorsMain;
-  activeTextThemeType?: TUiColorsMain;
+  activeTextThemeType?: TUiColorsMainAndAccent;
   layer?: TLayer;
-  iconAlign?: 'left' | 'right';
+  iconAlign?: TTextAlignLR;
   sizeC?: TComponentSizes;
   externalStyle?: CSSProp;
 };
diff --git a/src/components/molecules/TabSwitch/TTabSwitch.model.ts b/src/components/molecules/TabSwitch/TTabSwitch.model.ts
index fd2540e2a..c3d8b0a01 100644
--- a/src/components/molecules/TabSwitch/TTabSwitch.model.ts
+++ b/src/components/molecules/TabSwitch/TTabSwitch.model.ts
@@ -6,11 +6,13 @@ import { TTabSwitchDetailsChildren, TTabSwitchDetailsLabelIcon } from '@/compone
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
 import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+import { TUiColorsMainAndAccent } from '@/types/TUiColorsMainAndAccent';
 
 export type TTabSwitch = {
   wide?: boolean;
   sizeC?: TComponentSizes;
   textColor?: TUiColorsMain;
+  activeTextThemeType?: TUiColorsMainAndAccent;
   textLayer?: TLayer;
   disabled?: boolean;
   tabSpacing?: TSpacings;
@@ -22,7 +24,6 @@ export type TTabSwitch = {
   currentSelect?: string;
   iconAlign?: 'left' | 'right';
   switchIndicatorThemeType?: TUiColorsNotTransparent;
-  activeTextThemeType?: TUiColorsMain;
   handler?: (value: string) => void;
 };
 
diff --git a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
index 08ff6a244..499b49572 100644
--- a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
+++ b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
@@ -36,7 +36,6 @@ export default function FancyTabSwitch(props: FancyTabSwitchWithTabSwitchAtts) {
     <Fieldset label={label} disabled={disabled} className={className}>
       <FancyBox
         outlined={outlined}
-        outlinedRemoveBorder={true}
         themeType={themeType}
         layer={layer}
         borderRadius={generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC })}
diff --git a/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts b/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts
index ecabd648c..8985f91f1 100644
--- a/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts
+++ b/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts
@@ -2,13 +2,14 @@ import { TTabSwitchWithHTMLAtts } from '@/components/molecules/TabSwitch/TTabSwi
 import { TLayer } from '@/types/TLayer';
 import { TSpacings } from '@/types/TSpacings';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
+import { TUiColorsMainAndAccent } from '@/types/TUiColorsMainAndAccent';
 
 export type TFancyTabSwitch = {
   label?: string;
   themeType?: TUiColorsMain | 'transparent';
   layer?: TLayer;
   spacingToEdge?: TSpacings;
-  activeTextColor?: TUiColorsMain;
+  activeTextColor?: TUiColorsMainAndAccent;
 };
 
 export type FancyTabSwitchWithTabSwitchAtts = TFancyTabSwitch & Omit<TTabSwitchWithHTMLAtts, 'themeType'>;
diff --git a/src/types/TUiColorsMainAndAccent.ts b/src/types/TUiColorsMainAndAccent.ts
new file mode 100644
index 000000000..f831b8897
--- /dev/null
+++ b/src/types/TUiColorsMainAndAccent.ts
@@ -0,0 +1,3 @@
+import { TUiColorTypes } from './TUiColorTypes';
+
+export type TUiColorsMainAndAccent = Extract<TUiColorTypes, 'primary' | 'secondary' | 'accent'>;
diff --git a/src/types/index.ts b/src/types/index.ts
index c000071ac..d6afc9ed1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -22,3 +22,4 @@ export * from './TSizeSettings';
 export * from './TDynamicElement';
 export * from './TFlexDirection';
 export * from './TBreakPoint';
+export * from './TUiColorsMainAndAccent';

From 26f1b3114bcba6bbae4d5a8e0e31a80e78951f18 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Tue, 11 Jun 2024 18:32:20 +0200
Subject: [PATCH 31/59] refactor: Refactor calcBorderRadiusWithPadding to use
 props object for better readability and flexibility

---
 .../calcBorderRadiusWithPadding.ts                   | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
index 0feead84b..e663cff55 100644
--- a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
@@ -1,11 +1,8 @@
-import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+import { TcalcBorderRadiusWithPadding } from '@/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model';
 import { getThemeOrValueAsCSS } from '@/design/designFunctions/getThemeOrValueAsCss';
 
-const calcBorderRadiusWithPadding = (
-  borderRadius: TThemeArrayOrValueCSS,
-  padding: TThemeArrayOrValueCSS,
-  inset = true
-) => {
+const calcBorderRadiusWithPadding = (props: TcalcBorderRadiusWithPadding) => {
+  const { borderRadius, padding, inset = false, offset } = props;
   // check if they are arrays or single values
   let splitBorderRadius;
 
@@ -70,8 +67,9 @@ const calcBorderRadiusWithPadding = (
     // check if the border radius / padding is a valid css value
     const borderIsValid = borderRadius ? borderRadius : '0px';
     const formatPaddingAdd = paddingArray[index] ? `(${operator}${paddingArray[index]})` : '0px';
+    const offsetValue = offset ? ` + ${offset}` : '';
 
-    return `calc(${borderIsValid} + ${formatPaddingAdd})`;
+    return `calc(${borderIsValid} + ${formatPaddingAdd} ${offsetValue})`;
   });
 
   // return the new border radius as a string

From 9f83648ca6751aad4be3da6cb6914a1b50eff118 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Tue, 11 Jun 2024 19:03:20 +0200
Subject: [PATCH 32/59] refactor: Update FancyTabSwitch component to use
 vertical direction and increase layer to 1

---
 src/Routes/ExperimentalRoute/ExperimentalRoute.tsx    | 11 +----------
 .../organisms/FancyTabSwitch/FancyTabSwitch.tsx       | 11 ++++++-----
 .../TcalcBorderRadiusWithPadding.model.ts             |  8 ++++++++
 .../calcBorderRadiusWithPadding/index.ts              |  2 ++
 4 files changed, 17 insertions(+), 15 deletions(-)
 create mode 100644 src/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model.ts

diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
index a4ee7ea86..4ea85b77d 100644
--- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
+++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -81,16 +81,7 @@ export default function ExperimentalRoute() {
           />
         </DesignArea>
 
-        <FancyTabSwitch
-          wide
-          outlined
-          direction="vertical"
-          sizeC="lg"
-          label="test"
-          borderRadius={'xl'}
-          layer={5}
-          values={defaultProps}
-        />
+        <FancyTabSwitch wide label="test" layer={1} values={defaultProps} />
       </DesignWrapper>
     </>
   );
diff --git a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
index 499b49572..87b9ce82e 100644
--- a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
+++ b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
@@ -36,11 +36,12 @@ export default function FancyTabSwitch(props: FancyTabSwitchWithTabSwitchAtts) {
     <Fieldset label={label} disabled={disabled} className={className}>
       <FancyBox
         outlined={outlined}
+        outlinedRemoveBorder={outlined ? false : true}
         themeType={themeType}
         layer={layer}
         borderRadius={generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC })}
         externalStyle={css`
-          padding: ${arrayToCssValues(spacingToEdge, 'borderRadius')};
+          padding: ${arrayToCssValues(spacingToEdge, 'spacing')};
           overflow: hidden;
           background-color: ${themeType === 'transparent' && 'transparent'};
           border: ${themeType === 'transparent' && 'solid 1.5px transparent'};
@@ -53,10 +54,10 @@ export default function FancyTabSwitch(props: FancyTabSwitchWithTabSwitchAtts) {
           outlined={outlined}
           activeTextThemeType={activeTextColor}
           switchIndicatorThemeType={switchIndicatorThemeType}
-          borderRadius={calcBorderRadiusWithPadding(
-            generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC }) ?? '0',
-            spacingToEdge ?? '0'
-          )}
+          borderRadius={calcBorderRadiusWithPadding({
+            borderRadius: generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC }) ?? '0',
+            padding: spacingToEdge ?? '0',
+          })}
           textColor={getOpositMainThemeType(themeType)}
           wide={wide}
           sizeC={sizeC}
diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model.ts
new file mode 100644
index 000000000..524ee5c3e
--- /dev/null
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model.ts
@@ -0,0 +1,8 @@
+import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+
+export type TcalcBorderRadiusWithPadding = {
+  borderRadius: TThemeArrayOrValueCSS;
+  padding: TThemeArrayOrValueCSS;
+  inset?: boolean;
+  offset?: number;
+};
diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts
index c9a5ad896..212521e23 100644
--- a/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts
@@ -1 +1,3 @@
 export { default as calcBorderRadiusWithPadding } from './calcBorderRadiusWithPadding';
+
+export type { TcalcBorderRadiusWithPadding } from './TcalcBorderRadiusWithPadding.model';

From a616cb6e4081370a87e30629fffdf230cfa946d4 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Tue, 11 Jun 2024 21:51:38 +0200
Subject: [PATCH 33/59] refactor: Add FancyListBox component and update related
 files

---
 lib/index.ts                                                  | 1 +
 .../atoms/TitleForComponent/TitleForComponent.stories.tsx     | 4 ++--
 src/components/atoms/TitleForComponent/TitleForComponent.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/index.ts b/lib/index.ts
index c13038d09..acf0c0851 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -132,6 +132,7 @@ export * from '@/components/organisms/FancyNumberInput';
 export * from '@/components/organisms/FancyPasswordInput';
 export * from '@/components/organisms/FancyTextInput';
 export * from '@/components/organisms/FancyColorInput';
+export * from '@/components/organisms/FancyListBox';
 
 // ---------- Templates ------- //
 export * from '@/components/templates/FancyInfoCard';
diff --git a/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx b/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx
index 502dc3a1e..1be44a717 100644
--- a/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx
+++ b/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
   },
   // Define arguments for the story
   argTypes: {
-    titleAlign: {
+    align: {
       description: 'The alignment of the Title.',
       control: { type: 'select' },
       type: { name: 'string', required: false },
@@ -68,6 +68,6 @@ export const Primary: Story = {
       children: 'This is a text input',
     },
     gap: 'xs',
-    titleAlign: 'left',
+    align: 'left',
   },
 };
diff --git a/src/components/atoms/TitleForComponent/TitleForComponent.tsx b/src/components/atoms/TitleForComponent/TitleForComponent.tsx
index 4ebd18123..183a0a6c1 100644
--- a/src/components/atoms/TitleForComponent/TitleForComponent.tsx
+++ b/src/components/atoms/TitleForComponent/TitleForComponent.tsx
@@ -9,11 +9,11 @@ import { TTitleForComponent } from './TTitleForComponent.model';
 // ------ This Component Wrapps only the component and adds a Wrapper -------- //
 // --------------------------------------------------------------------------- //
 export default function TitleForComponent(props: TTitleForComponent) {
-  const { children, title, titleAlign, gap = 'xs' } = props;
+  const { children, title, align, gap = 'xs' } = props;
 
   return (
     <Wrapper $spacing={gap}>
-      {title && <TitleWrapper $align={titleAlign}>{getCorrectTitle(title)}</TitleWrapper>}
+      {title && <TitleWrapper $align={align}>{getCorrectTitle(title)}</TitleWrapper>}
       {children}
     </Wrapper>
   );

From 5415272b1f62458b5c6223427a9f39f6d1f49d7f Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Tue, 11 Jun 2024 21:52:27 +0200
Subject: [PATCH 34/59] refactor: Update FancyListBox component to use align
 prop instead of titleAlign

---
 src/components/organisms/FancyListBox/TFancyListBox.model.ts    | 2 +-
 .../organisms/FancyListBox/docu/FancyListBox.stories.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/FancyListBox/TFancyListBox.model.ts b/src/components/organisms/FancyListBox/TFancyListBox.model.ts
index 35775ee49..65e96e9ec 100644
--- a/src/components/organisms/FancyListBox/TFancyListBox.model.ts
+++ b/src/components/organisms/FancyListBox/TFancyListBox.model.ts
@@ -10,7 +10,7 @@ export type TFancyListBox = {
   children?: ReactNode;
   seperator?: TFancyLineWithHTMLAttributes;
   boxTitle?: {
-    titleAlign?: TTitleForComponent['titleAlign'];
+    align?: TTitleForComponent['align'];
     title: TTitleForComponent['title'];
   };
   themeType?: Exclude<TUiColorsMain, 'accent'>;
diff --git a/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx b/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
index 63c8ee62f..f36d6b1ce 100644
--- a/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
+++ b/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
@@ -125,7 +125,7 @@ export const WithMoreApplyedProps: Story = {
         variant: 'bodytextLg',
         children: 'Title',
       },
-      titleAlign: 'left',
+      align: 'left',
     },
     outlined: false,
     itemSettings: {

From 3ca43315d64c17bd5f4a477546286140089ee807 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Tue, 11 Jun 2024 21:53:07 +0200
Subject: [PATCH 35/59] refactor: Update TTitleForComponent model to use align
 prop instead of titleAlign

---
 .../atoms/TitleForComponent/TTitleForComponent.model.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts b/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts
index 92de9373f..288848f4d 100644
--- a/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts
+++ b/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts
@@ -7,5 +7,5 @@ export type TTitleForComponent = {
   children?: ReactNode;
   gap?: TSpacings;
   title?: TTypography | ReactNode;
-  titleAlign?: TTextAlignLC;
+  align?: TTextAlignLC;
 };

From 1da9a0730dc0fa4852f8247a6e69f89067cd5a18 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Wed, 12 Jun 2024 17:18:58 +0200
Subject: [PATCH 36/59] refactor: Update ListBox component to use ListBoxItem
 from ListBoxItem/ListBoxItem

---
 src/components/molecules/ListBox/ListBox.style.tsx | 1 +
 src/components/molecules/ListBox/ListBox.tsx       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/ListBox/ListBox.style.tsx b/src/components/molecules/ListBox/ListBox.style.tsx
index 4a1966f47..c39b27a07 100644
--- a/src/components/molecules/ListBox/ListBox.style.tsx
+++ b/src/components/molecules/ListBox/ListBox.style.tsx
@@ -18,6 +18,7 @@ export const generateFancyBoxStyle = (props: TgenerateFancyBoxStyle) => {
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
+    overflow: hidden;
     ${$boxShadow && boxShadow.md};
 
     ${$externalStyle}
diff --git a/src/components/molecules/ListBox/ListBox.tsx b/src/components/molecules/ListBox/ListBox.tsx
index a4cdfdc48..d9103ee3a 100644
--- a/src/components/molecules/ListBox/ListBox.tsx
+++ b/src/components/molecules/ListBox/ListBox.tsx
@@ -1,6 +1,6 @@
 import { FancyBox } from '@/components/atoms/FancyBox';
 import { generateFancyBoxStyle } from './ListBox.style';
-import { ListBoxItem } from './ListBoxItem';
+import { ListBoxItem } from './ListBoxItem/ListBoxItem';
 import { TListBoxWithFancyBoxAttrs } from './TListBox.model';
 
 // --------------------------------------------------------------------------- //

From 547012209e7af2ba5864b1fe173ceb30958c7dc6 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Wed, 12 Jun 2024 17:19:20 +0200
Subject: [PATCH 37/59] refactor: Update ListBoxItem component to use new
 structure and styling

---
 .../molecules/ListBox/ListBoxItem.tsx         | 39 -------------------
 .../ListBox/ListBoxItem/ListBoxItem.tsx       | 38 ++++++++++++++++++
 .../ListBox/ListBoxItem/TListBoxItem.model.ts | 13 +++++++
 3 files changed, 51 insertions(+), 39 deletions(-)
 delete mode 100644 src/components/molecules/ListBox/ListBoxItem.tsx
 create mode 100644 src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
 create mode 100644 src/components/molecules/ListBox/ListBoxItem/TListBoxItem.model.ts

diff --git a/src/components/molecules/ListBox/ListBoxItem.tsx b/src/components/molecules/ListBox/ListBoxItem.tsx
deleted file mode 100644
index 4700e42f2..000000000
--- a/src/components/molecules/ListBox/ListBoxItem.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { styled, CSSProp, css } from 'styled-components';
-
-import { RawLI } from '@/components/atoms/RawLI';
-import { TComponentSizes } from '@/types/TComponentSizes';
-import { sizeSettings } from './sizeSettings';
-import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
-
-export type TListBoxItemProps = {
-  children?: React.ReactNode;
-  externalStyle?: CSSProp;
-  sizeC?: TComponentSizes;
-};
-// --------------------------------------------------------------------------- //
-// ------- The List Item for The ListBox to handle the distances -------- //
-// --------------------------------------------------------------------------- //
-function ListBoxItem(props: TListBoxItemProps) {
-  const { children, externalStyle, sizeC = 'md' } = props;
-  return (
-    <StyledLi $sizeC={sizeC} $externalStyle={externalStyle}>
-      {children}
-    </StyledLi>
-  );
-}
-
-// This convention is used to allow the Storybook to render the component
-ListBoxItem.displayName = 'ListBox.Item';
-export { ListBoxItem };
-
-// ------------------------------------------- //
-// ------- The style for the component ------- //
-// ------------------------------------------- //
-// handle the distances between the items and the edeges of the list
-const StyledLi = styled(RawLI)<{ $externalStyle?: CSSProp; $sizeC: TComponentSizes }>`
-  ${({ $sizeC }) => css`
-    padding: ${arrayToCssValues(sizeSettings[$sizeC ?? 'md'].padding, 'spacing')};
-  `}
-
-  ${({ $externalStyle }) => $externalStyle}
-`;
diff --git a/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx b/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
new file mode 100644
index 000000000..0e3312498
--- /dev/null
+++ b/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
@@ -0,0 +1,38 @@
+import { css } from 'styled-components';
+
+import { FancyBox } from '@/components/atoms/FancyBox';
+import { TListBoxItemProps } from '@/components/molecules/ListBox/ListBoxItem/TListBoxItem.model';
+import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
+import { sizeSettings } from '../sizeSettings';
+import { generateBackgroundColor } from '@/design/designFunctions/generateItemTheme/utils/generateBackgroundColor';
+
+// --------------------------------------------------------------------------- //
+// ------- The List Item for The ListBox to handle the distances -------- //
+// --------------------------------------------------------------------------- //
+function ListBoxItem(props: TListBoxItemProps) {
+  const { children, externalStyle, sizeC = 'md', layer = 0, themeType = 'transparent', hoverLayer } = props;
+  return (
+    <FancyBox
+      as={'li'}
+      padding={arrayToCssValues(sizeSettings[sizeC ?? 'md'].padding, 'spacing')}
+      themeType={themeType}
+      layer={layer}
+      externalStyle={css`
+        list-style: none;
+        ${externalStyle}
+
+        &:hover {
+          background-color: ${generateBackgroundColor({ $themeType: themeType, $layer: hoverLayer })};
+        }
+
+        transition: background-color 0.3s;
+      `}
+    >
+      {children}
+    </FancyBox>
+  );
+}
+
+// This convention is used to allow the Storybook to render the component
+ListBoxItem.displayName = 'ListBox.Item';
+export { ListBoxItem };
diff --git a/src/components/molecules/ListBox/ListBoxItem/TListBoxItem.model.ts b/src/components/molecules/ListBox/ListBoxItem/TListBoxItem.model.ts
new file mode 100644
index 000000000..64055f949
--- /dev/null
+++ b/src/components/molecules/ListBox/ListBoxItem/TListBoxItem.model.ts
@@ -0,0 +1,13 @@
+import { CSSProp } from 'styled-components';
+import { TComponentSizes } from '@/types/TComponentSizes';
+import { TLayer } from '@/types/TLayer';
+import { TUiColorTypes } from '@/types/TUiColorTypes';
+
+export type TListBoxItemProps = {
+  children?: React.ReactNode;
+  externalStyle?: CSSProp;
+  sizeC?: TComponentSizes;
+  themeType?: TUiColorTypes;
+  layer?: TLayer;
+  hoverLayer?: TLayer;
+};

From 5f7ce3020556bf625cf937f803a6b33efa071bcf Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Wed, 12 Jun 2024 17:19:35 +0200
Subject: [PATCH 38/59] refactor: Update FancyListBoxRoute to use layer and
 itemSettings props

---
 .../FancyListBoxRoute/FancyListBoxRoute.tsx   |  9 ++++++++-
 .../FancyListBox/TFancyListBox.model.ts       |  5 +++--
 .../docu/FancyListBox.stories.tsx             | 20 +++++++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx b/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
index 736b5de27..448696e0a 100644
--- a/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
+++ b/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
@@ -5,7 +5,14 @@ export default function FancyListBoxRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="FancyListBox">
-        <FancyListBox>
+        <FancyListBox
+          layer={2}
+          itemSettings={{
+            hoverLayer: 3,
+            layer: 1,
+            themeType: 'primary',
+          }}
+        >
           <span>Moooiin</span>
 
           <span>Moooiin</span>
diff --git a/src/components/organisms/FancyListBox/TFancyListBox.model.ts b/src/components/organisms/FancyListBox/TFancyListBox.model.ts
index 65e96e9ec..d978b160e 100644
--- a/src/components/organisms/FancyListBox/TFancyListBox.model.ts
+++ b/src/components/organisms/FancyListBox/TFancyListBox.model.ts
@@ -2,16 +2,17 @@ import { ReactNode } from 'react';
 import { TFancyLineWithHTMLAttributes } from '@/components/atoms/FancyLine/TFancyLine.model';
 import { TTitleForComponent } from '@/components/atoms/TitleForComponent';
 import { TListBoxWithFancyBoxAttrs } from '@/components/molecules/ListBox';
-import { TListBoxItemProps } from '@/components/molecules/ListBox/ListBoxItem';
+import { TListBoxItemProps } from '@/components/molecules/ListBox/ListBoxItem/TListBoxItem.model';
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
 
 export type TFancyListBox = {
   children?: ReactNode;
-  seperator?: TFancyLineWithHTMLAttributes;
+  seperator?: TFancyLineWithHTMLAttributes | null;
   boxTitle?: {
     align?: TTitleForComponent['align'];
     title: TTitleForComponent['title'];
+    gap?: TTitleForComponent['gap'];
   };
   themeType?: Exclude<TUiColorsMain, 'accent'>;
   layer?: TLayer;
diff --git a/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx b/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
index f36d6b1ce..3a714d035 100644
--- a/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
+++ b/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
@@ -100,6 +100,26 @@ export const Primary: Story = {
   },
 };
 
+export const WithHoverStyle: Story = {
+  render: (args) => (
+    <FancyListBox {...args}>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+    </FancyListBox>
+  ),
+  args: {
+    itemSettings: {
+      themeType: 'primary',
+      layer: 1,
+      hoverLayer: 3,
+    },
+  },
+};
+
 export const WithMoreApplyedProps: Story = {
   render: (args) => (
     <FancyListBox {...args}>

From 01868710e05a7e2bad17ede9be700247de962d03 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Wed, 12 Jun 2024 21:22:18 +0200
Subject: [PATCH 39/59] refactor: Update Fieldset component to use legend
 instead of label

---
 src/components/molecules/Fieldset/Fieldset.style.tsx      | 4 ++--
 src/components/molecules/Fieldset/Fieldset.tsx            | 8 ++++----
 src/components/molecules/Fieldset/TFieldset.model.ts      | 4 ++--
 src/components/molecules/Fieldset/docu/Fieldset.mdx       | 4 ++--
 .../molecules/Fieldset/docu/Fieldset.stories.tsx          | 8 ++++----
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/molecules/Fieldset/Fieldset.style.tsx b/src/components/molecules/Fieldset/Fieldset.style.tsx
index ace6227e0..4eaab2881 100644
--- a/src/components/molecules/Fieldset/Fieldset.style.tsx
+++ b/src/components/molecules/Fieldset/Fieldset.style.tsx
@@ -11,6 +11,6 @@ export const StyledFieldset = styled.fieldset<{ $disabled?: boolean }>`
   ${({ $disabled }) => $disabled && disabledStyle}
 `;
 
-export const StyledLegend = styled.legend<{ alignLabel?: TTextAlignLC; theme: TTheme }>`
-  margin: 0 ${({ alignLabel }) => (alignLabel === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xxs};
+export const StyledLegend = styled.legend<{ $alignLegend?: TTextAlignLC; theme: TTheme }>`
+  margin: 0 ${({ $alignLegend }) => ($alignLegend === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xxs};
 `;
diff --git a/src/components/molecules/Fieldset/Fieldset.tsx b/src/components/molecules/Fieldset/Fieldset.tsx
index 35ed0baa5..ba51edc75 100644
--- a/src/components/molecules/Fieldset/Fieldset.tsx
+++ b/src/components/molecules/Fieldset/Fieldset.tsx
@@ -6,19 +6,19 @@ import { StyledFieldset, StyledLegend } from './Fieldset.style';
 // ---- A Fieldset that Provides a Label and a Fieldset for some childs ------ //
 // --------------------------------------------------------------------------- //
 export default function Fieldset(props: TFieldsetWithHTMLAttributes) {
-  const { children, label, alignLabel, typographySettings, disabled, ...htmlAttrs } = props;
+  const { children, legend, alignLegend, typographySettings, disabled, ...htmlAttrs } = props;
 
   return (
     <StyledFieldset $disabled={disabled} {...htmlAttrs}>
-      {label && (
-        <StyledLegend alignLabel={alignLabel}>
+      {legend && (
+        <StyledLegend $alignLegend={alignLegend}>
           <Typography
             elType={typographySettings?.elType || 'span'}
             variant={typographySettings?.variant ?? 'interactiveLg'}
             fontWeight={typographySettings?.fontWeight ?? 'bold'}
             {...typographySettings}
           >
-            {label}
+            {legend}
           </Typography>
         </StyledLegend>
       )}
diff --git a/src/components/molecules/Fieldset/TFieldset.model.ts b/src/components/molecules/Fieldset/TFieldset.model.ts
index 4d1202224..faaee3966 100644
--- a/src/components/molecules/Fieldset/TFieldset.model.ts
+++ b/src/components/molecules/Fieldset/TFieldset.model.ts
@@ -4,8 +4,8 @@ import { TTextAlignLC } from '@/types/TTextAlignLC';
 import { TTypography } from '@/components/atoms/Typography';
 
 export type TFieldset = {
-  label?: string;
-  alignLabel?: TTextAlignLC;
+  legend?: string;
+  alignLegend?: TTextAlignLC;
   typographySettings?: TTypography;
   disabled?: boolean;
 };
diff --git a/src/components/molecules/Fieldset/docu/Fieldset.mdx b/src/components/molecules/Fieldset/docu/Fieldset.mdx
index 1098cbe95..4c13eb0fb 100644
--- a/src/components/molecules/Fieldset/docu/Fieldset.mdx
+++ b/src/components/molecules/Fieldset/docu/Fieldset.mdx
@@ -26,7 +26,7 @@ import { TFieldset, TFieldsetWithHTMLAttributes } from 'fui-fancyui';
 
 ## Example Usage
 
-Below is an example demonstrating how to use the `Fieldset` component in a form. This example includes a label with customized typography settings.
+Below is an example demonstrating how to use the `Fieldset` component in a form. This example includes a legend with customized typography settings.
 
 ```jsx
 import React from 'react';
@@ -37,7 +37,7 @@ function ExampleForm() {
     <form>
       <Fieldset
         label="Personal Information"
-        alignLabel="center"
+        alignLegend="center"
         typographySettings={{
           elType: 'span',
           variant: 'interactiveLg',
diff --git a/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx b/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx
index 68d1c7776..b31fc0946 100644
--- a/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx
+++ b/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx
@@ -19,14 +19,14 @@ const meta = {
 
   // Define arguments for the story
   argTypes: {
-    alignLabel: {
+    alignLegend: {
       description: 'The alignment of the label relative to the fieldset.',
       control: {
         type: 'select',
         options: ['left', 'center'],
       },
     },
-    label: {
+    legend: {
       description: 'The label to be displayed for the fieldset.',
       control: {
         type: 'text',
@@ -61,8 +61,8 @@ export const Primary: Story = {
     </Fieldset>
   ),
   args: {
-    alignLabel: 'left',
-    label: 'This is a label',
+    alignLegend: 'left',
+    legend: 'This is a label',
     typographySettings: {
       variant: 'interactiveLg',
       fontWeight: 'bold',

From 70b5606d710c9c6387341bb4f8574abbb0ff8afb Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Wed, 12 Jun 2024 21:22:57 +0200
Subject: [PATCH 40/59] refactor: Update FancyChipList component to use legend
 instead of label

---
 .../organisms/FancyChipList/FancyChipList.model.ts          | 2 +-
 src/components/organisms/FancyChipList/FancyChipList.tsx    | 4 ++--
 .../organisms/FancyChipList/docu/FancyChipList.stories.tsx  | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/FancyChipList/FancyChipList.model.ts b/src/components/organisms/FancyChipList/FancyChipList.model.ts
index 5cd6b6c1e..5db87c399 100644
--- a/src/components/organisms/FancyChipList/FancyChipList.model.ts
+++ b/src/components/organisms/FancyChipList/FancyChipList.model.ts
@@ -11,7 +11,7 @@ export type TFancyChipList = {
   outlined?: boolean;
   chips?: TChip[];
   inputPlaceholder?: string;
-  label?: string;
+  legend?: string;
   sizeC?: 'sm' | 'md' | 'lg';
   editable?: boolean;
   handler?: (chips: TChip[]) => void;
diff --git a/src/components/organisms/FancyChipList/FancyChipList.tsx b/src/components/organisms/FancyChipList/FancyChipList.tsx
index 2a5570071..f66cb59ff 100644
--- a/src/components/organisms/FancyChipList/FancyChipList.tsx
+++ b/src/components/organisms/FancyChipList/FancyChipList.tsx
@@ -19,7 +19,7 @@ export default function FancyChipList(props: TFancyChipList) {
     chips = [],
     inputPlaceholder,
     outlined,
-    label,
+    legend,
     sizeC = 'md',
     editable,
     systemInformation,
@@ -66,7 +66,7 @@ export default function FancyChipList(props: TFancyChipList) {
   };
 
   return (
-    <Fieldset label={label} typographySettings={{ variant: 'interactiveLg' }}>
+    <Fieldset legend={legend} typographySettings={{ variant: 'interactiveLg' }}>
       <ChipList themeType={themeType} layer={layer} outlined={outlined} sizeC={sizeC} systemMessage={systemInformation}>
         {/* // Mapping through each chip in the state to render a FancyChip */}
         {chipState.map((chip, index) => (
diff --git a/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx b/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx
index 5cdf6a0e7..abf08ad04 100644
--- a/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx
+++ b/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx
@@ -28,7 +28,7 @@ const meta = {
         type: 'array',
       },
     },
-    label: {
+    legend: {
       description: 'The Label of the ChipList',
       control: {
         type: 'text',
@@ -80,7 +80,7 @@ export const Primary: Story = {
       { id: '2', label: 'Chip 2' },
     ],
     sizeC: 'md',
-    label: 'ChipList',
+    legend: 'ChipList',
     themeType: 'primary',
     layer: 1,
     outlined: false,
@@ -94,7 +94,7 @@ export const WithoutChips: Story = {
   args: {
     chips: [],
     sizeC: 'md',
-    label: 'ChipList',
+    legend: 'ChipList',
     themeType: 'primary',
     layer: 1,
     outlined: false,

From b8c284c71a4af9001ccca4befd89439d22c2595f Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Wed, 12 Jun 2024 21:23:29 +0200
Subject: [PATCH 41/59] refactor: Update FancyRadioList component to use legend
 instead of label

---
 .../templates/FancyRadioList/docu/FancyRadioList.stories.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx b/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx
index 41d2538ca..2a42a6516 100644
--- a/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx
+++ b/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx
@@ -47,8 +47,8 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: (args) => <FancyRadioList {...args} />,
   args: {
-    label: 'FancyRadioList',
-    alignLabel: 'left',
+    legend: 'FancyRadioList',
+    alignLegend: 'left',
     disabled: false,
     themeType: 'primary',
     layer: 1,

From 9f0fc459ae39ab4d25a5ff7eb865f4c98555c278 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Wed, 12 Jun 2024 21:24:46 +0200
Subject: [PATCH 42/59] refactor: Update CheckboxRoute to use legend prop
 instead of label in FancyRadioList

---
 lib/index.ts                                               | 1 +
 src/Routes/CheckboxRoute/CheckboxRoute.tsx                 | 2 +-
 src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/index.ts b/lib/index.ts
index acf0c0851..c0799c3c1 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -109,6 +109,7 @@ export * from '@/components/molecules/FancyNavBar';
 export * from '@/components/molecules/LabeledInput';
 export * from '@/components/molecules/Stepper';
 export * from '@/components/atoms/RawButton';
+export * from '@/components/molecules/Fieldset';
 
 // ---------- Organisms ------- //
 export * from '@/components/organisms/FancyButton';
diff --git a/src/Routes/CheckboxRoute/CheckboxRoute.tsx b/src/Routes/CheckboxRoute/CheckboxRoute.tsx
index 74823175a..78283070f 100644
--- a/src/Routes/CheckboxRoute/CheckboxRoute.tsx
+++ b/src/Routes/CheckboxRoute/CheckboxRoute.tsx
@@ -96,7 +96,7 @@ export default function CheckboxRoute() {
           </DesignArea>
         </DesignWrapper>
       </Card>
-      <FancyRadioList label="YAAAA MOOIIIN" name="hii" items={itemList} />
+      <FancyRadioList legend="YAAAA MOOIIIN" name="hii" items={itemList} />
     </>
   );
 }
diff --git a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
index 87b9ce82e..c7026c1b0 100644
--- a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
+++ b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
@@ -33,7 +33,7 @@ export default function FancyTabSwitch(props: FancyTabSwitchWithTabSwitchAtts) {
   } = props;
 
   return (
-    <Fieldset label={label} disabled={disabled} className={className}>
+    <Fieldset legend={label} disabled={disabled} className={className}>
       <FancyBox
         outlined={outlined}
         outlinedRemoveBorder={outlined ? false : true}

From 43c76b3302574a7d5ab4e3795313cc89d75920f1 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Fri, 14 Jun 2024 23:26:14 +0200
Subject: [PATCH 43/59] refactor: Update TDropDownSelect model to use
 TDropDownSelectItem type for values

---
 .../atoms/DropDownSelect/TDropDownSelect.model.ts          | 4 ++--
 src/components/atoms/DropDownSelect/index.ts               | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts b/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts
index b3702aec6..2d4770ac3 100644
--- a/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts
+++ b/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts
@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 
-type TItem = {
+export type TDropDownSelectItem = {
   value: string;
   key: string;
 };
@@ -8,7 +8,7 @@ type TItem = {
 // the incoming props
 export type TDropDownSelect = {
   align?: 'left' | 'center';
-  values?: TItem[] | string[];
+  values?: TDropDownSelectItem[] | string[];
   value?: string;
   disabled?: boolean;
   placeholder?: string;
diff --git a/src/components/atoms/DropDownSelect/index.ts b/src/components/atoms/DropDownSelect/index.ts
index 9f07a3e19..91dd76fc8 100644
--- a/src/components/atoms/DropDownSelect/index.ts
+++ b/src/components/atoms/DropDownSelect/index.ts
@@ -1 +1,8 @@
 export { default as DropDownSelect } from './DropDownSelect';
+
+export type {
+  TDropDownSelectItem,
+  TDropDownSelect,
+  TDropDownSelectNativeAttrs,
+  TDropDownSelectWithNativeAttrs,
+} from './TDropDownSelect.model';

From ee8dd681a185966086aa76585b76cb83fffc0ca9 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Fri, 14 Jun 2024 23:26:49 +0200
Subject: [PATCH 44/59] refactor: Update NumberInput component to use
 handleKeyDown directly

---
 src/components/atoms/NumberInput/NumberInput.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/atoms/NumberInput/NumberInput.tsx b/src/components/atoms/NumberInput/NumberInput.tsx
index 6b162d210..2674a5cbb 100644
--- a/src/components/atoms/NumberInput/NumberInput.tsx
+++ b/src/components/atoms/NumberInput/NumberInput.tsx
@@ -52,9 +52,7 @@ const NumberInput = forwardRef<HTMLInputElement, TNumberInputWithNativeAttrs>((p
       $layer={layer}
       max={max}
       onChange={handleChange}
-      onKeyDown={(e) => {
-        handleKeyDown(e);
-      }}
+      onKeyDown={handleKeyDown}
       $externalStyle={externalStyle}
       $width={inputWidth}
       $align={align}

From 5defbaa7003384433b609172d60608faa3cdeba4 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 16 Jun 2024 21:58:17 +0200
Subject: [PATCH 45/59] feat: Add textAlign property to Typography component

---
 src/components/atoms/Typography/Typography.model.ts  | 1 +
 src/components/atoms/Typography/Typography.style.tsx | 6 +++++-
 src/components/atoms/Typography/Typography.tsx       | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/Typography/Typography.model.ts b/src/components/atoms/Typography/Typography.model.ts
index e8aa5bc62..912c4c94f 100644
--- a/src/components/atoms/Typography/Typography.model.ts
+++ b/src/components/atoms/Typography/Typography.model.ts
@@ -13,6 +13,7 @@ export type TTypography = {
   externalStyle?: CSSProp;
   htmlFor?: string;
   themeType?: TUiColorsNotTransparent;
+  textAlign?: 'left' | 'center' | 'right';
   layer?: TLayer;
 } & Omit<React.HTMLAttributes<HTMLElement>, 'style'> &
   Omit<TgenerateFontVariants, 'themeFonts'>;
diff --git a/src/components/atoms/Typography/Typography.style.tsx b/src/components/atoms/Typography/Typography.style.tsx
index d640ad181..c27fe4364 100644
--- a/src/components/atoms/Typography/Typography.style.tsx
+++ b/src/components/atoms/Typography/Typography.style.tsx
@@ -13,10 +13,14 @@ export type TStyledComponentProps = {
 };
 
 // Base styled component for common styles
-export type TGenerateStyle = TStyledPrefixAndPicker<TTypography, 'themeType' | 'layer' | 'externalStyle'> &
+export type TGenerateStyle = TStyledPrefixAndPicker<
+  TTypography,
+  'themeType' | 'layer' | 'externalStyle' | 'textAlign'
+> &
   TStyledComponentProps;
 const BaseStyledComponent = styled.span<TStyledComponentProps & TGenerateStyle & { theme: TTheme }>`
   color: ${({ theme, $themeType, $layer = 0 }) => $themeType && getBackgroundColor({ theme, $themeType, $layer })};
+  ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign};`}
   ${({ $variant }) => $variant};
   ${({ $externalStyle }) => $externalStyle}
 `;
diff --git a/src/components/atoms/Typography/Typography.tsx b/src/components/atoms/Typography/Typography.tsx
index bbc61c1ae..7d5e5944b 100644
--- a/src/components/atoms/Typography/Typography.tsx
+++ b/src/components/atoms/Typography/Typography.tsx
@@ -20,6 +20,7 @@ export default function Typography(props: TTypography) {
     lineHeight,
     fontWeight,
     letterSpacing,
+    textAlign,
     ...htmlProps
   } = props;
   // get the theme font sizes
@@ -33,6 +34,7 @@ export default function Typography(props: TTypography) {
 
   return (
     <ComponentElement
+      $textAlign={textAlign}
       $variant={fontVariants[variant]}
       $themeType={themeType}
       $layer={layer}

From b767ed2da307bfb0e13be22c77440ddbf58af56c Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 17 Jun 2024 17:29:33 +0200
Subject: [PATCH 46/59] feat: Add DynamicComponentWrapper to atoms

---
 lib/index.ts                                  |  1 +
 .../DynamicComponentWrapper.mdx               | 48 +++++++++++++++++++
 .../DynamicComponentWrapper.tsx               | 11 +++++
 .../TDynamicComponentWrapper.model.ts         |  4 ++
 .../atoms/DynamicComponentWrapper/index.ts    |  3 ++
 5 files changed, 67 insertions(+)
 create mode 100644 src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx
 create mode 100644 src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx
 create mode 100644 src/components/atoms/DynamicComponentWrapper/TDynamicComponentWrapper.model.ts
 create mode 100644 src/components/atoms/DynamicComponentWrapper/index.ts

diff --git a/lib/index.ts b/lib/index.ts
index c0799c3c1..4aa3d1707 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -62,6 +62,7 @@ export * from '@/components/atoms/TitleForComponent';
 export * from '@/components/atoms/ColoredText';
 export * from '@/components/atoms/DisableBox';
 export * from '@/components/atoms/PasswordStrengthMeter';
+export * from '@/components/atoms/DynamicComponentWrapper';
 
 // ---------- Molecules ------- //
 export * from '@/components/molecules/FancyInfoText';
diff --git a/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx
new file mode 100644
index 000000000..aadf90ef1
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx
@@ -0,0 +1,48 @@
+import DynamicComponentWrapper from './DynamicComponentWrapper'; // Assuming component file is in the same directory
+
+# DynamicComponentWrapper
+
+Wrap React children with a dynamically specified component.
+
+## Overview
+
+This component provides a simple way to encapsulate each child element within a React component that you define. This is particularly useful for adding consistent styling or behavior across a group of children.
+
+## Props
+
+| Prop               | Type                 | Description                                                                                                     |
+| :----------------- | :------------------- | :-------------------------------------------------------------------------------------------------------------- |
+| `children`         | `React.ReactNode`    | The children elements to be wrapped.                                                                            |
+| `wrapperComponent` | `React.ReactElement` | The component to wrap each child. This must be a valid React element (e.g., `<div>`, a custom component, etc.). |
+
+## Usage
+
+```jsx
+import React from 'react';
+import DynamicComponentWrapper from 'fui-fancyui';
+
+const ExampleComponent = () => (
+  <DynamicComponentWrapper WrapperComponent={<Link href="http://fui.cool" />}>Click me!</DynamicComponentWrapper>
+);
+
+export default ExampleComponent;
+```
+
+In the above example:
+
+1. Each child (`<p>Child 1</p>` and `<p>Child 2</p>`) will be wrapped in an `<li>` element.
+2. The `<li>` element has a blue text color style applied to it.
+
+## Example
+
+```jsx
+<DynamicComponentWrapper wrapperComponent={<div style={{ border: '1px solid gray', padding: '10px' }}>}>
+  <h2>This is wrapped text</h2>
+  <p>Another wrapped paragraph.</p>
+</DynamicComponentWrapper>
+```
+
+## Considerations
+
+- **Valid React Elements:** Ensure `wrapperComponent` is a valid React element (not a component function).
+- **Deeply Nested Children:** This component works well for children at a single level. If your children have deep nesting, consider refactoring your child structure or using a more complex recursive approach.
diff --git a/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx
new file mode 100644
index 000000000..2c45fcd54
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx
@@ -0,0 +1,11 @@
+import { cloneElement } from 'react';
+import { TDynamicComponentWrapper } from './TDynamicComponentWrapper.model';
+
+// --------------------------------------------------------------------------- //
+// - This component wrapps every childrens with the passed wrapper component - //
+// --------------------------------------------------------------------------- //
+export default function DynamicComponentWrapper(props: TDynamicComponentWrapper) {
+  const { children, wrapperComponent } = props;
+
+  return cloneElement(wrapperComponent, {}, children);
+}
diff --git a/src/components/atoms/DynamicComponentWrapper/TDynamicComponentWrapper.model.ts b/src/components/atoms/DynamicComponentWrapper/TDynamicComponentWrapper.model.ts
new file mode 100644
index 000000000..f03c14c4a
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/TDynamicComponentWrapper.model.ts
@@ -0,0 +1,4 @@
+export type TDynamicComponentWrapper = {
+  children: React.ReactNode;
+  wrapperComponent: React.ReactElement;
+};
diff --git a/src/components/atoms/DynamicComponentWrapper/index.ts b/src/components/atoms/DynamicComponentWrapper/index.ts
new file mode 100644
index 000000000..e71bd643b
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/index.ts
@@ -0,0 +1,3 @@
+export { default as DynamicComponentWrapper } from './DynamicComponentWrapper';
+
+export type { TDynamicComponentWrapper } from './TDynamicComponentWrapper.model';

From ad2aab11feb6961ed08bd86d9175a5aa3d580bc1 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 17 Jun 2024 17:30:16 +0200
Subject: [PATCH 47/59] refactor: Remove unused import in DynamicElementWrapper
 component

---
 .../atoms/DynamicElementWrapper/DynamicElementWrapper.tsx       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx b/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx
index e9a8232fa..fbbbc5cc3 100644
--- a/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx
+++ b/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { TDynamicElementWrapperWithHTMLAttrs } from './TDynamicElementWrapper.model';
 import { StyledDynamicElementWrapper } from './DynamicElementWrapper.style';
 

From 34e7ebbe3777f5a2365f65427bc257238dec3ece Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 17 Jun 2024 17:30:46 +0200
Subject: [PATCH 48/59] refactor: Update Button and FancyButton styles to use
 inline-flex display

---
 src/components/molecules/Button/Button.style.tsx           | 1 -
 src/components/organisms/FancyButton/FancyButton.style.tsx | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/Button/Button.style.tsx b/src/components/molecules/Button/Button.style.tsx
index 52bd8590e..e566423ba 100644
--- a/src/components/molecules/Button/Button.style.tsx
+++ b/src/components/molecules/Button/Button.style.tsx
@@ -12,7 +12,6 @@ import { RawButton } from '@/components/atoms/RawButton';
 import { sizeSettings } from '@/components/molecules/Button/sizeSettings';
 
 export const ButtonStyle = styled.span<IGenerateThemeDesignForComponent & TStyledPrefixAndPicker<TButton>>`
-  display: inline-flex;
   height: fit-content;
   border: none;
   cursor: pointer;
diff --git a/src/components/organisms/FancyButton/FancyButton.style.tsx b/src/components/organisms/FancyButton/FancyButton.style.tsx
index 33ca3b031..506371aac 100644
--- a/src/components/organisms/FancyButton/FancyButton.style.tsx
+++ b/src/components/organisms/FancyButton/FancyButton.style.tsx
@@ -17,6 +17,7 @@ export const generateFancyButton = (props: IGenerateFancyButton) => {
   const { $sizeC, $oneToOne, $justifyContent, $iconAlign, $icon } = props;
 
   return css`
+    display: inline-flex;
     justify-content: ${$justifyContent ?? 'center'};
     ${$oneToOne && generate1To1Button($sizeC)};
     ${!$oneToOne && generateSize($sizeC, $icon, $iconAlign)};

From 197b1968741373143449a69987390ec477db9af1 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Mon, 17 Jun 2024 17:31:30 +0200
Subject: [PATCH 49/59] feat: Add DynamicComponentWrapper to ExperimentalRoute

---
 src/Routes/ExperimentalRoute/ExperimentalRoute.tsx           | 4 ++++
 src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx           | 2 ++
 src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx | 5 +++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
index 4ea85b77d..3a485361d 100644
--- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
+++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import { FancyNumberInput } from '@/components/organisms/FancyNumberInput';
 import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
 import { FancyTabSwitch } from '@/components/organisms/FancyTabSwitch';
+import DynamicComponentWrapper from '@/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -80,6 +81,9 @@ export default function ExperimentalRoute() {
             onClick={() => switchTheme()}
           />
         </DesignArea>
+        <DynamicComponentWrapper wrapperComponent={<a href="https://fui.cool" />}>
+          <p>Test</p>
+        </DynamicComponentWrapper>
 
         <FancyTabSwitch wide label="test" layer={1} values={defaultProps} />
       </DesignWrapper>
diff --git a/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx b/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
index 448696e0a..541aaf558 100644
--- a/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
+++ b/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
@@ -7,10 +7,12 @@ export default function FancyListBoxRoute() {
       <DesignArea title="FancyListBox">
         <FancyListBox
           layer={2}
+          sizeC="md"
           itemSettings={{
             hoverLayer: 3,
             layer: 1,
             themeType: 'primary',
+            sizeC: undefined,
           }}
         >
           <span>Moooiin</span>
diff --git a/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx b/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
index 0e3312498..7b04b5c40 100644
--- a/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
+++ b/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
@@ -10,11 +10,12 @@ import { generateBackgroundColor } from '@/design/designFunctions/generateItemTh
 // ------- The List Item for The ListBox to handle the distances -------- //
 // --------------------------------------------------------------------------- //
 function ListBoxItem(props: TListBoxItemProps) {
-  const { children, externalStyle, sizeC = 'md', layer = 0, themeType = 'transparent', hoverLayer } = props;
+  const { children, externalStyle, sizeC, layer = 0, themeType = 'transparent', hoverLayer } = props;
+
   return (
     <FancyBox
       as={'li'}
-      padding={arrayToCssValues(sizeSettings[sizeC ?? 'md'].padding, 'spacing')}
+      padding={sizeC ? arrayToCssValues(sizeSettings[sizeC].padding, 'spacing') : undefined}
       themeType={themeType}
       layer={layer}
       externalStyle={css`

From d6b2e7c275c4500a739d4bc33591c93fbcae552e Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Tue, 18 Jun 2024 16:16:53 +0200
Subject: [PATCH 50/59] refactor: Update Button and FancyButton styles to use
 inline-flex display

---
 src/Routes/BottonRoute/ButtonRoute.tsx     | 8 ++++++++
 src/components/molecules/Button/Button.tsx | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Routes/BottonRoute/ButtonRoute.tsx b/src/Routes/BottonRoute/ButtonRoute.tsx
index 2e4ee83f9..e873cfab2 100644
--- a/src/Routes/BottonRoute/ButtonRoute.tsx
+++ b/src/Routes/BottonRoute/ButtonRoute.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
 import { css } from 'styled-components';
+import { SVGChevronLeft } from '@/components/icons';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -99,6 +100,13 @@ export default function ButtonRoute() {
         />
       </DesignArea>
       <DesignArea title="1:1 Buttons" style={backgroundColor}>
+        <FancyButton
+          icon={
+            <span style={{ marginRight: '2px' }}>
+              <SVGChevronLeft />
+            </span>
+          }
+        />
         <FancyButton
           icon={Icon}
           sizeC="md"
diff --git a/src/components/molecules/Button/Button.tsx b/src/components/molecules/Button/Button.tsx
index cdc153306..ff91bdfdd 100644
--- a/src/components/molecules/Button/Button.tsx
+++ b/src/components/molecules/Button/Button.tsx
@@ -38,7 +38,7 @@ export default function Button(props: TButtonWithNativeAttrs) {
       $textHover={textHover}
       $disabled={disabled}
       $noSize={noSize}
-      className={className}
+      className={notAButton ? className : undefined}
     >
       {children}
     </ButtonStyle>
@@ -49,7 +49,7 @@ export default function Button(props: TButtonWithNativeAttrs) {
       {notAButton ? (
         <Button {...htmlProps} />
       ) : (
-        <StyledButton $wide={wide} {...htmlProps} disabled={disabled}>
+        <StyledButton $wide={wide} className={className} {...htmlProps} disabled={disabled}>
           <Button />
         </StyledButton>
       )}

From 72863251028ac70e40bf638ec82c857740512404 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Thu, 20 Jun 2024 16:27:37 +0200
Subject: [PATCH 51/59] refactor: Update SimpleDialog padding and width

---
 src/components/atoms/SimpleDialog/SimpleDialog.style.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/SimpleDialog/SimpleDialog.style.ts b/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
index 2c0b59e36..fb104cca8 100644
--- a/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
+++ b/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
@@ -18,10 +18,10 @@ export const StyledDialog = styled(animated.div)<TStyledDialog>`
   top: calc(50vh + env(safe-area-inset-bottom));
   left: 50vw;
   transform: translate(-50vh, -50vw);
-  padding: ${({ theme }) => theme.spacing.xl};
+  padding: ${({ theme }) => theme.spacing.lg};
   border-radius: ${({ theme }) => theme.borderRadius.lg};
   border: none;
-  width: 70%;
+  width: 80%;
   ${({ theme, $themeType, $layer = 1 }) => getColorsForComponent({ theme, $themeType, $layer })}
   z-index: 1000;
   outline: none;

From f787d5aa6fa9fbede251f486333e3b7e1a3ef976 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Thu, 20 Jun 2024 16:36:18 +0200
Subject: [PATCH 52/59] feat: Add calcCSSValuesWithOffset utility function

---
 lib/index.ts                                  |  1 +
 .../calcCSSValuesWithOffset.mdx               | 60 +++++++++++++++++++
 .../calcCSSValuesWithOffset.ts                | 16 +++++
 .../calcCSSValuesWithOffset/index.ts          |  1 +
 4 files changed, 78 insertions(+)
 create mode 100644 src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.mdx
 create mode 100644 src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.ts
 create mode 100644 src/utils/functions/calcCSSValuesWithOffset/index.ts

diff --git a/lib/index.ts b/lib/index.ts
index 4aa3d1707..04b306d2f 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -162,6 +162,7 @@ export * from '@/utils/hooks/useWindowDimensions';
 export * from '@/design/theme/FancyThemeProvider';
 export * from '@/utils/functions/clampNumber';
 export * from '@/utils/functions/copyToClipBoard';
+export * from '@/utils/functions/calcCSSValuesWithOffset';
 
 // ---------- Design ------- //
 export * from '@/design/designFunctions/calcBorderRadiusOnAlignment';
diff --git a/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.mdx b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.mdx
new file mode 100644
index 000000000..f68c35364
--- /dev/null
+++ b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.mdx
@@ -0,0 +1,60 @@
+# `calcCSSValuesWithOffset`
+
+This utility function adjusts CSS values (like padding or margins) by a specified offset. It's designed to handle values containing multiple space-separated parts, such as "12px 15px".
+
+## Description
+
+`calcCSSValuesWithOffset` parses a string of CSS values, identifies numerical values with "px" units, adds the offset to those values, and returns a new string with the modified values.
+
+## Setup
+
+Ensure the function is imported into your component:
+
+```javascript
+import { calcCSSValuesWithOffset } from 'fui-fancyui';
+```
+
+## Usage
+
+```javascript
+const originalCSS = '12px 15px';
+const offsetAmount = 2;
+
+const newCSS = calcCSSValuesWithOffset(originalCSS, offsetAmount);
+console.log(newCSS); // Output: "14px 17px"
+```
+
+### Props
+
+| Prop        | Type     | Description                                               | Default |
+| :---------- | :------- | :-------------------------------------------------------- | :------ |
+| `cssValues` | `string` | The original CSS value string (e.g., "12px 15px")         | -       |
+| `offset`    | `number` | The amount to add to each numerical value with "px" units | -       |
+
+### Example with Dynamic CSS
+
+```jsx
+import { useState } from 'react';
+
+function MyComponent() {
+  const [padding, setPadding] = useState('10px 20px');
+  const [offset, setOffset] = useState(3);
+
+  const handleClick = () => {
+    const newPadding = calcCSSValuesWithOffset(padding, offset);
+    setPadding(newPadding);
+  };
+
+  return (
+    <div>
+      <div style={{ padding }}>This div's padding will change</div>
+      <button onClick={handleClick}>Increase Padding</button>
+    </div>
+  );
+}
+```
+
+### Key Points
+
+- **Non-px Units:** Values without "px" units (e.g., percentages, em) are left untouched.
+- **Error Handling:** Currently, there is no explicit error handling for invalid input (like "10px abc"). You might consider adding checks in a production environment.
diff --git a/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.ts b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.ts
new file mode 100644
index 000000000..b106ef832
--- /dev/null
+++ b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.ts
@@ -0,0 +1,16 @@
+const calcCSSValuesWithOffset = (cssValues: string, offset: number) => {
+  const values = cssValues.split(' ');
+
+  const newValues = values.map((value) => {
+    if (value.includes('px')) {
+      const number = Number(value.replace('px', ''));
+      return `${number + offset}px`;
+    }
+
+    return value;
+  });
+
+  return newValues.join(' ');
+};
+
+export default calcCSSValuesWithOffset;
diff --git a/src/utils/functions/calcCSSValuesWithOffset/index.ts b/src/utils/functions/calcCSSValuesWithOffset/index.ts
new file mode 100644
index 000000000..c0e0def48
--- /dev/null
+++ b/src/utils/functions/calcCSSValuesWithOffset/index.ts
@@ -0,0 +1 @@
+export { default as calcCSSValuesWithOffset } from './calcCSSValuesWithOffset';

From 4b520684b7fe030af7f2f890b971dbcf7e640650 Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Thu, 20 Jun 2024 16:36:41 +0200
Subject: [PATCH 53/59] refactor: Update ButtonRoute and FancyButton styles to
 use outlined property

---
 src/Routes/BottonRoute/ButtonRoute.tsx        |  4 +--
 .../molecules/Button/Button.style.tsx         |  2 +-
 .../utils/generateButtonSizeAndPadding.ts     | 22 ++++++++++++++-
 .../FancyButton/FancyButton.style.tsx         | 27 ++++++++++++++++---
 .../organisms/FancyButton/FancyButton.tsx     |  3 +++
 5 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/Routes/BottonRoute/ButtonRoute.tsx b/src/Routes/BottonRoute/ButtonRoute.tsx
index e873cfab2..a5f66470f 100644
--- a/src/Routes/BottonRoute/ButtonRoute.tsx
+++ b/src/Routes/BottonRoute/ButtonRoute.tsx
@@ -55,8 +55,8 @@ export default function ButtonRoute() {
       </DesignArea>
       <DesignArea title="Button Types in wide" style={backgroundColor}>
         <FancyButton icon={Icon} label="Button" themeType="primary" align="left" iconAlign="left" wide />
-        <FancyButton icon={Icon} label="Button" themeType="secondary" align="right" />
-        <FancyButton icon={Icon} label="Button" themeType="accent" />
+        <FancyButton icon={Icon} outlined sizeC="sm" label="Button" themeType="secondary" align="right" />
+        <FancyButton icon={Icon} label="Button" sizeC="sm" themeType="accent" />
         <FancyButton icon={Icon} label="Button" themeType="transparent" align="left" />
       </DesignArea>
       <DesignArea title="Outlined Buttons" style={backgroundColor}>
diff --git a/src/components/molecules/Button/Button.style.tsx b/src/components/molecules/Button/Button.style.tsx
index e566423ba..7a7e24760 100644
--- a/src/components/molecules/Button/Button.style.tsx
+++ b/src/components/molecules/Button/Button.style.tsx
@@ -31,7 +31,7 @@ export const ButtonStyle = styled.span<IGenerateThemeDesignForComponent & TStyle
   ${({ $sizeC, $borderRadius }) =>
     $borderRadius !== false && generateBorderRadiusForComponent({ sizeC: $sizeC, borderRadius: $borderRadius })};
 
-  ${({ $sizeC, $noSize }) => !$noSize && generateButtonSizeAndPadding($sizeC ?? 'md', true)}
+  ${({ $sizeC, $noSize, $outlined }) => !$noSize && generateButtonSizeAndPadding($sizeC ?? 'md', true, $outlined)}
 
   font-size: ${({ $sizeC, theme }) => theme.fontSizes[sizeSettings[$sizeC ?? 'md'].fontSize].fontSize};
   font-weight: bold;
diff --git a/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts b/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts
index b715cd38a..f4ff06e5b 100644
--- a/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts
+++ b/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts
@@ -3,8 +3,28 @@ import { css } from 'styled-components';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
 import { TComponentSizes } from '@/types/TComponentSizes';
 import { sizeSettings } from '../sizeSettings';
+import { calcCSSValuesWithOffset } from '@/utils/functions/calcCSSValuesWithOffset';
+
+export const generateButtonSizeAndPadding = (
+  sizeC: TComponentSizes,
+  spacingLeftRightx2?: boolean,
+  outlined?: boolean
+) => {
+  // if the button is outlined, we need to shrink the padding by 2px
+  if (outlined) {
+    const generatedPadding = arrayToCssValues(
+      spacingLeftRightx2 ? sizeSettings[sizeC].padding : sizeSettings[sizeC].padding[0],
+      'spacing'
+    );
+
+    if (generatedPadding) {
+      const shrinkedPaddingWithBorder = calcCSSValuesWithOffset(generatedPadding, -2);
+      return css`
+        padding: ${shrinkedPaddingWithBorder};
+      `;
+    }
+  }
 
-export const generateButtonSizeAndPadding = (sizeC: TComponentSizes, spacingLeftRightx2?: boolean) => {
   return css`
     padding: ${arrayToCssValues(
       spacingLeftRightx2 ? sizeSettings[sizeC].padding : sizeSettings[sizeC].padding[0],
diff --git a/src/components/organisms/FancyButton/FancyButton.style.tsx b/src/components/organisms/FancyButton/FancyButton.style.tsx
index 506371aac..e04a7a13b 100644
--- a/src/components/organisms/FancyButton/FancyButton.style.tsx
+++ b/src/components/organisms/FancyButton/FancyButton.style.tsx
@@ -5,6 +5,7 @@ import { TLeftRightCenterToFlexJustify } from '@/design/designFunctions/leftRigh
 import { TComponentSizes } from '@/types/TComponentSizes';
 import { sizeSettings } from './sizeSettings';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
+import { calcCSSValuesWithOffset } from '@/utils/functions/calcCSSValuesWithOffset';
 
 interface IGenerateFancyButton {
   $sizeC: TComponentSizes;
@@ -12,15 +13,16 @@ interface IGenerateFancyButton {
   $justifyContent?: TLeftRightCenterToFlexJustify;
   $iconAlign?: 'left' | 'right';
   $icon?: boolean;
+  $outlined?: boolean;
 }
 export const generateFancyButton = (props: IGenerateFancyButton) => {
-  const { $sizeC, $oneToOne, $justifyContent, $iconAlign, $icon } = props;
+  const { $sizeC, $oneToOne, $justifyContent, $iconAlign, $icon, $outlined } = props;
 
   return css`
     display: inline-flex;
     justify-content: ${$justifyContent ?? 'center'};
     ${$oneToOne && generate1To1Button($sizeC)};
-    ${!$oneToOne && generateSize($sizeC, $icon, $iconAlign)};
+    ${!$oneToOne && generateSize($sizeC, $icon, $iconAlign, $outlined)};
   `;
 };
 
@@ -35,7 +37,12 @@ const generate1To1Button = ($sizeC: TComponentSizes) => {
   `;
 };
 
-const generateSize = ($sizeC: TComponentSizes, $icon?: boolean, $iconAlign?: IGenerateFancyButton['$iconAlign']) => {
+const generateSize = (
+  $sizeC: TComponentSizes,
+  $icon?: boolean,
+  $iconAlign?: IGenerateFancyButton['$iconAlign'],
+  outlined?: boolean
+) => {
   let padding = sizeSettings[$sizeC].padding;
 
   // if there is an icon, we need to adjust the padding
@@ -54,7 +61,19 @@ const generateSize = ($sizeC: TComponentSizes, $icon?: boolean, $iconAlign?: IGe
     padding = sizeSettings[$sizeC].padding;
   }
 
+  const cssValues = arrayToCssValues(padding, 'spacing');
+
+  // clac offset for outlined buttons
+  if (outlined && cssValues) {
+    const shrinkedPaddingWithBorder = calcCSSValuesWithOffset(cssValues, -2);
+
+    return css`
+      padding: ${shrinkedPaddingWithBorder};
+    `;
+  }
+
+  // return the padding
   return css`
-    padding: ${arrayToCssValues(padding, 'spacing')};
+    padding: ${cssValues};
   `;
 };
diff --git a/src/components/organisms/FancyButton/FancyButton.tsx b/src/components/organisms/FancyButton/FancyButton.tsx
index 9d4f6854c..18d52d5eb 100644
--- a/src/components/organisms/FancyButton/FancyButton.tsx
+++ b/src/components/organisms/FancyButton/FancyButton.tsx
@@ -24,6 +24,7 @@ export default function FancyButton(props: TFancyButtonWithHTMLAttrs) {
     externalStyle,
     oneToOne,
     gap,
+    outlined,
     ...buttonProps
   } = props;
   // handle icon alignment
@@ -35,12 +36,14 @@ export default function FancyButton(props: TFancyButtonWithHTMLAttrs) {
     $sizeC: sizeC,
     $oneToOne: oneToOne ?? (Boolean(!label) && Boolean(icon)),
     $justifyContent: leftRightCenterToFlexJustify[align ?? 'center'],
+    $outlined: outlined,
   });
 
   return (
     <Button
       sizeC={sizeC}
       noSize={true}
+      outlined={outlined}
       externalStyle={css`
         ${generateFancyStyle};
         ${externalStyle};

From b3c86f2de223e756e21f9cb2cd906daf2d8d3eba Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Thu, 20 Jun 2024 22:30:01 +0200
Subject: [PATCH 54/59] refactor: Update FancyModal to use
 createFancyModalStore instead of useFancyModalStore

---
 src/App.tsx                                   |  7 +++-
 src/Routes/ModalRoute/ModalRoute.tsx          |  7 ++--
 .../organisms/FancyModal/FancyModal.state.tsx | 42 ++++++++++---------
 .../organisms/FancyModal/FancyModal.tsx       | 37 ++++++----------
 .../organisms/FancyModal/TFancyModal.modal.ts |  4 ++
 .../FancyModal/docu/FancyModal.stories.tsx    | 33 +++++++++++++--
 src/components/organisms/FancyModal/index.ts  |  2 +-
 7 files changed, 78 insertions(+), 54 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bd1a96f0b..9cd7f54f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,7 +40,7 @@ import SkeletonRoute from '@/Routes/SkeletonRoute/SkeletonRoute';
 import TextGradientRoute from '@/Routes/TextGradientRoute/TextGradientRoute';
 import StepperRoute from '@/Routes/StepperRoute/StepperRoute';
 import PasswordStrengthMeterRoute from '@/Routes/PasswordStrengthMeterRoute/PasswordStrengthMeterRoute';
-
+import { useFancyModalStore } from './Routes/ModalRoute/ModalRoute';
 // const Icon = (
 //   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
 //     <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11.666 1.89c.682 0 1.139.47 1.187 1.107H14v-.11c-.053-1.187-1.024-2-2.342-2-1.604 0-2.518 1.05-2.518 2.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114h-1.147c-.048.615-.497 1.05-1.187 1.05-.839 0-1.318-.62-1.318-1.727v-.742c0-1.112.488-1.754 1.318-1.754zm-6.188.926h.044L6.542 11h1.006L9 5.001H7.818l-.82 4.355h-.056L5.97 5.001h-.94l-.972 4.355h-.053l-.827-4.355H2L3.452 11h1.005l1.02-4.184z" />
@@ -70,13 +70,16 @@ const OwnUl = styled.ul<{ theme: TTheme }>`
 `;
 
 function App() {
+  const closeModal = useFancyModalStore((state) => state.closeModal);
+  const modals = useFancyModalStore((state) => state.modals);
+
   return (
     <div className="App">
       <Router>
         <FancyThemeProvider>
           <DefaultStyle />
           <FancySwipeUpModal appendToDomID="modal" />
-          <FancyModal appendToDomID="modal" />
+          <FancyModal appendToDomID="modal" closeModal={closeModal} modals={modals} />
           <div>
             <nav>
               <OwnUl>
diff --git a/src/Routes/ModalRoute/ModalRoute.tsx b/src/Routes/ModalRoute/ModalRoute.tsx
index 2b1c2fe35..c1a213546 100644
--- a/src/Routes/ModalRoute/ModalRoute.tsx
+++ b/src/Routes/ModalRoute/ModalRoute.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
-
-import { useFancyModalStore } from '../../components/organisms/FancyModal/FancyModal.state';
+import { createFancyModalStore } from '../../components/organisms/FancyModal/FancyModal.state';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
 import { FancyModalHeadLine } from '@/components/molecules/FancyModalHeadLine';
 import { Typography } from '@/components/atoms/Typography';
 
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFancyModalStore = createFancyModalStore();
+
 export default function ModalRoute() {
   const createModal = useFancyModalStore((state) => state.openModal);
   const closeModal = useFancyModalStore((state) => state.closeModal);
diff --git a/src/components/organisms/FancyModal/FancyModal.state.tsx b/src/components/organisms/FancyModal/FancyModal.state.tsx
index de6c84b28..e59238039 100644
--- a/src/components/organisms/FancyModal/FancyModal.state.tsx
+++ b/src/components/organisms/FancyModal/FancyModal.state.tsx
@@ -20,25 +20,27 @@ export type TFancyModals = {
 interface IModalModule {
   modals: TFancyModals[];
   openModal: (id: string, content: React.ReactNode, config?: TModalConfig) => void;
-  removeModal: (id: string) => void;
   closeModal: (id: string) => void;
 }
-export const useFancyModalStore = create<IModalModule>((set) => ({
-  // the state array for the modals
-  modals: [],
-  // add a new modal to the state array
-  openModal: (id, children, config) =>
-    set((state) => ({
-      modals: [...state.modals, { id, children, status: 'open', config }],
-    })),
-  // change the status of the modal to closing
-  closeModal: (id) =>
-    set((state) => ({
-      modals: state.modals.map((modal) => (modal.id === id ? { ...modal, status: 'closing' } : modal)),
-    })),
-  // remove the modal from the state array
-  removeModal: (id) =>
-    set((state) => ({
-      modals: state.modals.filter((modal) => modal.id !== id),
-    })),
-}));
+
+export function createFancyModalStore() {
+  return create<IModalModule>((set) => ({
+    modals: [],
+    openModal: (id, children, config) =>
+      set((state) => ({
+        modals: [...state.modals, { id, children, status: 'open', config }],
+      })),
+    closeModal: (id) => {
+      set((state) => ({
+        modals: state.modals.map((modal) => (modal.id === id ? { ...modal, status: 'closing' } : modal)),
+      }));
+
+      setTimeout(() => {
+        // After animation duration (if applicable)
+        set((state) => ({
+          modals: state.modals.filter((modal) => modal.id !== id),
+        }));
+      }, 300); // Adjust delay if using a different transition time
+    },
+  }));
+}
diff --git a/src/components/organisms/FancyModal/FancyModal.tsx b/src/components/organisms/FancyModal/FancyModal.tsx
index 8ef3701b8..016c23932 100644
--- a/src/components/organisms/FancyModal/FancyModal.tsx
+++ b/src/components/organisms/FancyModal/FancyModal.tsx
@@ -2,40 +2,29 @@ import { Modal } from '@/components/molecules/Modal';
 import { FancyPortal } from '@/components/shared/FancyPortal';
 
 import { TFancyModal } from './TFancyModal.modal';
-import { useFancyModalStore } from './FancyModal.state';
 
 // --------------------------------------------------------------------------- //
 // ----------------- The modalModule to build up a Moadal  ------------------- //
 // --------------------------------------------------------------------------- //
-export default function FancyModal({ appendToDomID }: TFancyModal) {
-  const modals = useFancyModalStore((state) => state.modals);
-  const closeModal = useFancyModalStore((state) => state.closeModal);
-  const removeModal = useFancyModalStore((state) => state.removeModal);
+export default function FancyModal({ appendToDomID, modals, closeModal }: TFancyModal) {
+  // const closeModalHandler = (id: string) => {
+  //   // closing the modal is a two step process
+  //   // first we set the status to "closing" with the closeModal function
+  //   // this will trigger the animation in the modal component
+  //   closeModal(id);
 
-  const closeModalHandler = (id: string) => {
-    // closing the modal is a two step process
-    // first we set the status to "closing" with the closeModal function
-    // this will trigger the animation in the modal component
-    closeModal(id);
-
-    //wait for the animation and remove the modal from the store
-    setTimeout(() => {
-      removeModal(id);
-    }, 300);
-  };
+  //   //wait for the animation and remove the modal from the store
+  //   setTimeout(() => {
+  //     removeModal(id);
+  //   }, 300);
+  // };
 
   return (
     <>
       {/* ----- The FancModal Ports the Modal out of the root div in the spearte "modal" div ----- */}
       <FancyPortal appendToID={appendToDomID}>
-        {modals.map((modal, key) => (
-          <Modal
-            key={key}
-            isOpen={modal.status === 'open'}
-            onClose={() => closeModalHandler(modal.id)}
-            {...modal.config}
-          >
-            {/* ----- The Content of the Modal ----- */}
+        {modals?.map((modal, key) => (
+          <Modal key={key} isOpen={modal.status === 'open'} onClose={() => closeModal(modal.id)} {...modal.config}>
             {modal.children}
           </Modal>
         ))}
diff --git a/src/components/organisms/FancyModal/TFancyModal.modal.ts b/src/components/organisms/FancyModal/TFancyModal.modal.ts
index c8ae50571..c136dd7a4 100644
--- a/src/components/organisms/FancyModal/TFancyModal.modal.ts
+++ b/src/components/organisms/FancyModal/TFancyModal.modal.ts
@@ -1,3 +1,7 @@
+import { TFancyModals } from '@/components/organisms/FancyModal/FancyModal.state';
+
 export type TFancyModal = {
   appendToDomID: string;
+  modals: TFancyModals[];
+  closeModal: (id: string) => void;
 };
diff --git a/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx b/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
index 9e4ed229c..4334192fa 100644
--- a/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
+++ b/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
@@ -3,10 +3,11 @@ import { Meta, StoryObj } from '@storybook/react';
 
 // Import the component to be tested
 import FancyModal from '../FancyModal';
-import { useFancyModalStore } from '../FancyModal.state';
+import { createFancyModalStore } from '../FancyModal.state';
 import { FancyButton } from '../../FancyButton';
 import { TModal } from '../../../molecules/Modal';
 import { FancyTextInput } from '../../FancyTextInput';
+import { TFancyModal } from '@/components/organisms/FancyModal';
 
 // Define metadata for the story
 const meta = {
@@ -24,17 +25,39 @@ const meta = {
     },
   },
   // Define arguments for the story
-  argTypes: {},
+  argTypes: {
+    appendToDomID: {
+      description: 'The ID of the DOM element to which the modal should be appended.',
+      control: {
+        type: 'text',
+      },
+    },
+    modals: {
+      description: 'An array of modals to be displayed by the FancyModal component.',
+      control: {
+        type: 'object',
+      },
+    },
+    closeModal: {
+      description: 'A function to close the modal with the specified ID.',
+      control: {
+        type: 'function',
+      },
+    },
+  },
   // Add tags to the story
-} satisfies Meta<typeof HelperComponent>;
+} satisfies Meta<TFancyModal>;
 
 // Export the metadata
 export default meta;
 // Define the story object
 type Story = StoryObj<typeof meta>;
 
+const useFancyModalStore = createFancyModalStore();
+
 function HelperComponent(props: React.ComponentProps<typeof FancyModal> & Omit<TModal, 'onClose' | 'isOpen'>) {
   const { appendToDomID, children, ...configProps } = props;
+  const modals = useFancyModalStore((state) => state.modals);
   const openModal = useFancyModalStore((state) => state.openModal);
   const closeModal = useFancyModalStore((state) => state.closeModal);
 
@@ -54,7 +77,7 @@ function HelperComponent(props: React.ComponentProps<typeof FancyModal> & Omit<T
   };
   return (
     <>
-      <FancyModal appendToDomID="modal" />
+      <FancyModal appendToDomID="modal" modals={modals} closeModal={closeModal} />
       <FancyButton label="Open Modal" onClick={() => openModalHandler()} />
     </>
   );
@@ -71,7 +94,9 @@ export const Primary: Story = {
     </>
   ),
   args: {
+    modals: [],
     appendToDomID: '',
     children: <></>,
+    closeModal: () => {},
   },
 };
diff --git a/src/components/organisms/FancyModal/index.ts b/src/components/organisms/FancyModal/index.ts
index bf48e3fb4..9d5ee3681 100644
--- a/src/components/organisms/FancyModal/index.ts
+++ b/src/components/organisms/FancyModal/index.ts
@@ -1,3 +1,3 @@
 export { default as FancyModal } from './FancyModal';
-export { useFancyModalStore } from './FancyModal.state';
+export { createFancyModalStore } from './FancyModal.state';
 export type { TFancyModal } from './TFancyModal.modal';

From c5176ea419c997e77b25b919bcc9070ac1cbec1f Mon Sep 17 00:00:00 2001
From: MrTRyy <tobiastry@aol.de>
Date: Fri, 21 Jun 2024 15:25:24 +0200
Subject: [PATCH 55/59] chore: Update TabSwitchRoute and TabSwitch component
 styles

---
 src/Routes/TabSwitchRoute/TabSwitchRoute.tsx  | 13 ++++----
 .../molecules/TabSwitch/TTabSwitch.model.ts   |  2 +-
 .../molecules/TabSwitch/TabSwitch.tsx         |  6 ++--
 .../FancyTabSwitch/FancyTabSwitch.tsx         |  1 +
 .../calcBorderRadiusWithPadding.ts            | 33 +++++++++++--------
 5 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
index 263b89d53..726a75324 100644
--- a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
+++ b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
@@ -6,7 +6,7 @@ import { css } from 'styled-components';
 import { Card } from '@/components/molecules/Card';
 
 const switchValues = [
-  { itemKey: '1', value: 'Tab 1', label: 'Tab 1 djkjk dklkdd' },
+  { itemKey: '1', value: 'Tab 1', label: 'Tab 1 ' },
   { itemKey: '2', value: 'Tab 2', label: 'Tab 2' },
   { itemKey: '3', value: 'Tab 3', label: 'Tab 3' },
 ];
@@ -50,19 +50,20 @@ export default function TabSwitchRoute() {
 
   return (
     <>
-      <FancyTabSwitch
+      {/* <FancyTabSwitch
         label="test"
         sizeC="sm"
         values={switchValues1}
         borderRadius={'xxl'}
         currentSelect={test}
         handler={(id: string) => setTest(id)}
-      />
+      /> */}
       <Card layer={1}>
         <DesignWrapper>
           <DesignArea
             title="TabSwitch"
             style={css`
+              width: 500px;
               flex-direction: column;
             `}
           >
@@ -142,12 +143,11 @@ export default function TabSwitchRoute() {
 
             <FancyTabSwitch
               direction="vertical"
-              sizeC="lg"
+              sizeC="sm"
               label="test"
               wide
               outlined
               values={switchValues}
-              borderRadius={'xl'}
               layer={5}
               currentSelect={test}
               handler={(id: string) => setTest(id)}
@@ -156,8 +156,9 @@ export default function TabSwitchRoute() {
               label="test"
               wide
               values={switchValues}
+              spacingToEdge="xxs"
+              borderRadius={'md'}
               layer={2}
-              borderRadius={'xl'}
               currentSelect={test}
               handler={(id: string) => setTest(id)}
             />
diff --git a/src/components/molecules/TabSwitch/TTabSwitch.model.ts b/src/components/molecules/TabSwitch/TTabSwitch.model.ts
index c3d8b0a01..0ad6292bc 100644
--- a/src/components/molecules/TabSwitch/TTabSwitch.model.ts
+++ b/src/components/molecules/TabSwitch/TTabSwitch.model.ts
@@ -27,4 +27,4 @@ export type TTabSwitch = {
   handler?: (value: string) => void;
 };
 
-export type TTabSwitchWithHTMLAtts = TTabSwitch & React.HTMLAttributes<HTMLDivElement>;
+export type TTabSwitchWithHTMLAtts = TTabSwitch & React.HTMLAttributes<HTMLUListElement>;
diff --git a/src/components/molecules/TabSwitch/TabSwitch.tsx b/src/components/molecules/TabSwitch/TabSwitch.tsx
index b5c5b6777..f2dc4be6d 100644
--- a/src/components/molecules/TabSwitch/TabSwitch.tsx
+++ b/src/components/molecules/TabSwitch/TabSwitch.tsx
@@ -3,13 +3,13 @@ import React, { useRef, useState } from 'react';
 import { SwitchActiveIndicator } from '@/components/atoms/SwitchActiveIndicator';
 import { FancyTabSwitchButton } from '@/components/molecules/FancyTabSwitchButton';
 import { generateBorderRadiusForComponentOnlyValue } from '@/design/designFunctions/generateBorderRadiusForComponent';
-import { TTabSwitch } from './TTabSwitch.model';
+import { TTabSwitchWithHTMLAtts } from './TTabSwitch.model';
 import { ItemWrapper, ULButtonSwitchList } from './TabSwitch.style';
 
 // --------------------------------------------------------------------------- //
 // ------------ The tap SwitchComponent to slect specifc values -------------- //
 // --------------------------------------------------------------------------- //
-export default function TabSwitch(props: TTabSwitch) {
+export default function TabSwitch(props: TTabSwitchWithHTMLAtts) {
   const {
     values,
     textColor = 'secondary',
@@ -27,6 +27,7 @@ export default function TabSwitch(props: TTabSwitch) {
     activeTextThemeType,
     switchIndicatorThemeType,
     indicatorType,
+    ...htmlProps
   } = props;
 
   // Define the state for the currently selected tab
@@ -65,6 +66,7 @@ export default function TabSwitch(props: TTabSwitch) {
       $direction={direction}
       $disabled={disabled}
       role="radiogroup"
+      {...htmlProps}
     >
       {/* Generate a list item for each switch value */}
       {values.map((item, i) => (
diff --git a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
index c7026c1b0..8329f39d6 100644
--- a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
+++ b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
@@ -57,6 +57,7 @@ export default function FancyTabSwitch(props: FancyTabSwitchWithTabSwitchAtts) {
           borderRadius={calcBorderRadiusWithPadding({
             borderRadius: generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC }) ?? '0',
             padding: spacingToEdge ?? '0',
+            inset: true,
           })}
           textColor={getOpositMainThemeType(themeType)}
           wide={wide}
diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
index e663cff55..774a5d07e 100644
--- a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
@@ -54,26 +54,33 @@ const calcBorderRadiusWithPadding = (props: TcalcBorderRadiusWithPadding) => {
   }
 
   // define the operator for the css calc
-  const operator = inset ? '-' : '+';
+  const offsetValue = offset ? ` + ${offset}px` : '';
 
-  // generate the new border radius array with the padding in css calc
   const newBorderRadiusArray = borderRadiusArray.map((borderRadius, index) => {
-    // check if they have a unit when they are a number they doesn't have a unit
-    if (Number(borderRadius) || Number(paddingArray[index])) {
-      console.error('borderRadius and padding should have a unit');
-      return '';
+    const validBorderRadius = isValidCSSValue(borderRadius) ? borderRadius : '0px';
+    const padding = paddingArray[index];
+
+    // Handle negative padding for inset
+    const validPadding = isValidCSSValue(padding) ? padding : '0px';
+    const paddingValue =
+      inset && parseFloat(validPadding) < 0
+        ? ` + ${Math.abs(parseFloat(validPadding))}px` // Add for negative inset
+        : ` ${inset ? '-' : '+'} ${validPadding}`; // Correct spacing
+
+    // Use borderRadius if no padding needed
+    if (paddingValue.trim() === '+' || paddingValue.trim() === '-') {
+      return `${validBorderRadius}${offsetValue}`;
     }
 
-    // check if the border radius / padding is a valid css value
-    const borderIsValid = borderRadius ? borderRadius : '0px';
-    const formatPaddingAdd = paddingArray[index] ? `(${operator}${paddingArray[index]})` : '0px';
-    const offsetValue = offset ? ` + ${offset}` : '';
-
-    return `calc(${borderIsValid} + ${formatPaddingAdd} ${offsetValue})`;
+    return `calc(${validBorderRadius}${paddingValue}${offsetValue})`;
   });
-
   // return the new border radius as a string
   return newBorderRadiusArray.join(' ');
 };
 
+function isValidCSSValue(value: string) {
+  // This is a basic check. More comprehensive validation might be needed for production code.
+  return typeof value === 'string' && value.trim() !== '';
+}
+
 export default calcBorderRadiusWithPadding;

From 3937f8f074e87dbc9b71b7c3ddb2f01dbdbc9301 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Fri, 21 Jun 2024 23:09:08 +0200
Subject: [PATCH 56/59] refactor: Update FancyModal import to use
 createFancyModalStore

---
 src/Routes/ModalRoute/ModalRoute.tsx                     | 9 ++++++---
 src/components/organisms/FancyModal/TFancyModal.modal.ts | 2 +-
 .../{FancyModal.state.tsx => createFancyModalStore.tsx}  | 0
 .../organisms/FancyModal/docu/FancyModal.stories.tsx     | 2 +-
 src/components/organisms/FancyModal/index.ts             | 2 +-
 5 files changed, 9 insertions(+), 6 deletions(-)
 rename src/components/organisms/FancyModal/{FancyModal.state.tsx => createFancyModalStore.tsx} (100%)

diff --git a/src/Routes/ModalRoute/ModalRoute.tsx b/src/Routes/ModalRoute/ModalRoute.tsx
index c1a213546..7f13e7167 100644
--- a/src/Routes/ModalRoute/ModalRoute.tsx
+++ b/src/Routes/ModalRoute/ModalRoute.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { createFancyModalStore } from '../../components/organisms/FancyModal/FancyModal.state';
+import { createFancyModalStore } from '../../components/organisms/FancyModal/createFancyModalStore';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
 import { FancyModalHeadLine } from '@/components/molecules/FancyModalHeadLine';
 import { Typography } from '@/components/atoms/Typography';
@@ -15,7 +14,11 @@ export default function ModalRoute() {
     createModal(
       'hi',
       <div>
-        <FancyModalHeadLine title={'Test'} subTitle={<Typography variant="bodytextSm">Test</Typography>} />
+        <FancyModalHeadLine
+          onXButtonClick={() => closeModal('hi')}
+          title={'Test'}
+          subTitle={<Typography variant="bodytextSm">Test</Typography>}
+        />
         <FancyButton />
       </div>,
       { isCloseable: true }
diff --git a/src/components/organisms/FancyModal/TFancyModal.modal.ts b/src/components/organisms/FancyModal/TFancyModal.modal.ts
index c136dd7a4..c438436b0 100644
--- a/src/components/organisms/FancyModal/TFancyModal.modal.ts
+++ b/src/components/organisms/FancyModal/TFancyModal.modal.ts
@@ -1,4 +1,4 @@
-import { TFancyModals } from '@/components/organisms/FancyModal/FancyModal.state';
+import { TFancyModals } from '@/components/organisms/FancyModal/createFancyModalStore';
 
 export type TFancyModal = {
   appendToDomID: string;
diff --git a/src/components/organisms/FancyModal/FancyModal.state.tsx b/src/components/organisms/FancyModal/createFancyModalStore.tsx
similarity index 100%
rename from src/components/organisms/FancyModal/FancyModal.state.tsx
rename to src/components/organisms/FancyModal/createFancyModalStore.tsx
diff --git a/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx b/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
index 4334192fa..fc49b482f 100644
--- a/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
+++ b/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 // Import the component to be tested
 import FancyModal from '../FancyModal';
-import { createFancyModalStore } from '../FancyModal.state';
+import { createFancyModalStore } from '../createFancyModalStore';
 import { FancyButton } from '../../FancyButton';
 import { TModal } from '../../../molecules/Modal';
 import { FancyTextInput } from '../../FancyTextInput';
diff --git a/src/components/organisms/FancyModal/index.ts b/src/components/organisms/FancyModal/index.ts
index 9d5ee3681..9d3e26c9a 100644
--- a/src/components/organisms/FancyModal/index.ts
+++ b/src/components/organisms/FancyModal/index.ts
@@ -1,3 +1,3 @@
 export { default as FancyModal } from './FancyModal';
-export { createFancyModalStore } from './FancyModal.state';
+export { createFancyModalStore } from './createFancyModalStore';
 export type { TFancyModal } from './TFancyModal.modal';

From e2485b092da81fe8d29d2b7869fcde03a67ae98f Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sat, 22 Jun 2024 23:47:32 +0200
Subject: [PATCH 57/59] refactor: Update SystemMessage component to include
 HTML attributes

---
 lib/index.ts                                     |  1 +
 .../atoms/SystemMessage/SystemMessage.tsx        | 16 +++++++++++++---
 .../atoms/SystemMessage/TSystemMassage.model.ts  |  4 ++++
 src/components/atoms/SystemMessage/index.ts      |  3 ++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/lib/index.ts b/lib/index.ts
index 04b306d2f..a93bd829d 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -52,6 +52,7 @@ export * from '@/components/atoms/RawA';
 export * from '@/components/atoms/RawNav';
 export * from '@/components/atoms/FancySpacingBox';
 export * from '@/components/atoms/DateInput';
+export * from '@/components/atoms/SystemMessage';
 export * from '@/components/atoms/SystemMessageBox';
 export * from '@/components/atoms/NumberInput';
 export * from '@/components/atoms/PasswordInput';
diff --git a/src/components/atoms/SystemMessage/SystemMessage.tsx b/src/components/atoms/SystemMessage/SystemMessage.tsx
index cffbd03fe..dc10f9278 100644
--- a/src/components/atoms/SystemMessage/SystemMessage.tsx
+++ b/src/components/atoms/SystemMessage/SystemMessage.tsx
@@ -1,14 +1,23 @@
 import { StyledSystemMessageWrapper } from '@/components/atoms/SystemMessage/SystemMessage.style';
 import { Typography } from '@/components/atoms/Typography';
 
-import { TSystemMessage } from '@/components/atoms/SystemMessage/TSystemMassage.model';
+import { TSystemMessageWithHTMLAttrs } from '@/components/atoms/SystemMessage/TSystemMassage.model';
 import { TTypography } from '@/components/atoms/Typography/Typography.model';
 
 // --------------------------------------------------------------------------- //
 // ------- Only a SystemMessage(Text) that renders in different colors ------- //
 // --------------------------------------------------------------------------- //
-export default function SystemMessage(props: TSystemMessage & { textSettings?: TTypography }) {
-  const { themeType, layer, systemMessageState, children, textSettings, ownTypographyComponent, externalStyle } = props;
+export default function SystemMessage(props: TSystemMessageWithHTMLAttrs & { textSettings?: TTypography }) {
+  const {
+    themeType,
+    layer,
+    systemMessageState,
+    children,
+    textSettings,
+    ownTypographyComponent,
+    externalStyle,
+    ...htmlProps
+  } = props;
 
   return (
     <StyledSystemMessageWrapper
@@ -16,6 +25,7 @@ export default function SystemMessage(props: TSystemMessage & { textSettings?: T
       $layer={layer}
       $systemMessageState={systemMessageState}
       $externalStyle={externalStyle}
+      {...htmlProps}
     >
       {!ownTypographyComponent && (
         <Typography variant="subTextFootnote" tabIndex={-1} lineHeight={1} {...textSettings}>
diff --git a/src/components/atoms/SystemMessage/TSystemMassage.model.ts b/src/components/atoms/SystemMessage/TSystemMassage.model.ts
index 3bcc7e55e..b2685496f 100644
--- a/src/components/atoms/SystemMessage/TSystemMassage.model.ts
+++ b/src/components/atoms/SystemMessage/TSystemMassage.model.ts
@@ -12,3 +12,7 @@ export type TSystemMessage = {
   ownTypographyComponent?: boolean;
   externalStyle?: CSSProp;
 };
+
+export type TSystemMessageHTMLAttrs = React.HTMLAttributes<HTMLSpanElement>;
+
+export type TSystemMessageWithHTMLAttrs = TSystemMessage & TSystemMessageHTMLAttrs;
diff --git a/src/components/atoms/SystemMessage/index.ts b/src/components/atoms/SystemMessage/index.ts
index 731bbaf00..37d2392c0 100644
--- a/src/components/atoms/SystemMessage/index.ts
+++ b/src/components/atoms/SystemMessage/index.ts
@@ -1,2 +1,3 @@
 export { default as SystemMessage } from './SystemMessage';
-export type { TSystemMessage } from './TSystemMassage.model';
+
+export type { TSystemMessage, TSystemMessageHTMLAttrs, TSystemMessageWithHTMLAttrs } from './TSystemMassage.model';

From 57c3b05d1e93db063f3bd98a7b04557e791f059a Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 23 Jun 2024 13:28:51 +0200
Subject: [PATCH 58/59] refactor: Remove commented out code in FancyModal
 component

---
 .../organisms/FancyModal/FancyModal.tsx       | 12 ---
 .../organisms/FancyModal/docu/FancyModal.mdx  | 92 +++++++++++++------
 2 files changed, 65 insertions(+), 39 deletions(-)

diff --git a/src/components/organisms/FancyModal/FancyModal.tsx b/src/components/organisms/FancyModal/FancyModal.tsx
index 016c23932..3867d1d11 100644
--- a/src/components/organisms/FancyModal/FancyModal.tsx
+++ b/src/components/organisms/FancyModal/FancyModal.tsx
@@ -7,18 +7,6 @@ import { TFancyModal } from './TFancyModal.modal';
 // ----------------- The modalModule to build up a Moadal  ------------------- //
 // --------------------------------------------------------------------------- //
 export default function FancyModal({ appendToDomID, modals, closeModal }: TFancyModal) {
-  // const closeModalHandler = (id: string) => {
-  //   // closing the modal is a two step process
-  //   // first we set the status to "closing" with the closeModal function
-  //   // this will trigger the animation in the modal component
-  //   closeModal(id);
-
-  //   //wait for the animation and remove the modal from the store
-  //   setTimeout(() => {
-  //     removeModal(id);
-  //   }, 300);
-  // };
-
   return (
     <>
       {/* ----- The FancModal Ports the Modal out of the root div in the spearte "modal" div ----- */}
diff --git a/src/components/organisms/FancyModal/docu/FancyModal.mdx b/src/components/organisms/FancyModal/docu/FancyModal.mdx
index 8533d61e3..1fbe464b1 100644
--- a/src/components/organisms/FancyModal/docu/FancyModal.mdx
+++ b/src/components/organisms/FancyModal/docu/FancyModal.mdx
@@ -10,9 +10,15 @@ import * as FancyModalStoies from './FancyModal.stories';
 
 ### Setting Up FancyModal
 
-1. **Render the Main Component in the Base File**:
+1. **Create the Store:**
 
-   Ensure that the `<FancyModal />` component is added to a suitable location in your main file for correct modal behavior.
+   Begin by creating an instance of your modal store:
+
+   ```javascript
+   import { createFancyModalStore } from 'fui-fancyui';
+
+   const useFancyModalStore = createFancyModalStore();
+   ```
 
 2. **Specify the DOM Element for Rendering**:
 
@@ -22,57 +28,89 @@ import * as FancyModalStoies from './FancyModal.stories';
    <div id="modalTest"></div>
    ```
 
+3. **Render the FancyModal Component:**
+
+   In your desired location, render the `<FancyModal />` component. Provide it with the necessary props:
+
+   ```jsx
+   import { FancyModal } from 'fui-fancyui';
+
+   const useFancyModalStore = createFancyModalStore();
+
+   function MyComponent() {
+     const closeModal = useFancyModalStore((state) => state.closeModal);
+     const modals = useFancyModalStore((state) => state.modals);
+
+     return (
+       <body>
+         {/* ...other components */}
+         <FancyModal modals={modals} closeModal={closeModal} />
+       </body>
+     );
+   }
+   ```
+
 ### Implementing the Modal
 
-1. **Import the Store in the Component**:
+1. **Use the Store in Your Component:**
 
-   Within the component where you plan to initiate the modal, start by importing the `useFancyModalStore`.
+   Access the `openModal` and `closeModal` functions from the store you created:
 
-   ```jsx
+   ```javascript
    const openModal = useFancyModalStore((state) => state.openModal);
+   const closeModal = useFancyModalStore((state) => state.closeModal);
    ```
 
-2. **Open the Modal**:
+2. **Open the Modal:**
 
-   To display the modal, employ the `openModal` function. This function requires the following parameters:
+   Call the `openModal` function to trigger the modal. It requires the following:
 
-   - `appendToDomID`: The ID corresponding to the DOM element where the modal will appear.
-   - Child components: The specific content or components you want to show within the modal.
-   - Configuration object: This sets various modal properties.
+   - `id`: A unique identifier for your modal.
+   - `children`: The content you want to display inside the modal (JSX).
+   - `config` (optional): An object for customization (e.g., `isCloseAble`).
 
    ```jsx
+   const openMoal = useFancyModalStore((state) => state.openModal);
+   const closeModal = useFancyModalStore((state) => state.closeModal);
+
    const openModalHandler = () => {
      openModal(
-       'modalTest',
-       <div style={{ display: 'flex', direction: 'column', gap: '18px' }}>
+       'myUniqueModalId',
+       <div>
          <FancyTextInput label="Email" />
-         <FancyButton onClick={() => closeModal('modalTest')} label="Close Modal"></FancyButton>
+         <FancyButton onClick={() => closeModal('myUniqueModalId')} label="Close Modal" />
        </div>,
-       {
-         isCloseAble: false,
-       }
+       { isCloseAble: false } // Example configuration
      );
    };
    ```
 
-3. **Close the Modal**:
-
-   To terminate an active modal, use the `closeModal` method from the `useFancyModalStore`.
-
-   ```jsx
-   const closeModal = useFancyModalStore((state) => state.closeModal);
-   ```
+3. **Close the Modal:**
 
-   Subsequently, invoke `closeModal` using the ID of the modal you wish to shut, as depicted in the `openModalHandler` example.
+   Invoke `closeModal` with the unique `id` of the modal you want to close. (This is already handled within the button in the example above.)
 
 <Canvas />
 
 ### Configuration Options
 
-The FancyModal's adaptability is showcased through the configuration object provided during modal initiation. One available option is:
+You can still customize the `FancyModal` using the `config` object passed to `openModal`. For example:
 
-- `isCloseAble`: A boolean that denotes whether users can manually terminate the modal.
+- `isCloseAble`: Determines if users can manually close the modal.
+
+  ```jsx
+  const config = {
+  backDrop?: boolean; // default is true
+  onClose?: (id: string) => void;
+  isCloseable?: boolean; // is the modal closeable by the user
+  themeType?: TUiColorsNotTransparent;
+  layer?: TLayer;
+  }
+  ```
 
 ### Conclusion
 
-The evolved FancyModal, bolstered by `useFancyModalStore`, offers developers a smoother and more intuitive modal management experience. This refurbished framework undeniably simplifies the modal integration process, ensuring both efficient development and streamlined user interactions.
+The `createFancyModalStore` function now gives you more flexibility to manage multiple modal instances within your application. This enhanced architecture simplifies modal implementation and provides a cleaner, more scalable approach.
+
+```
+
+```

From 31443befe35984498917a0c777e10bebd591f661 Mon Sep 17 00:00:00 2001
From: MrTRyy <Tobiastry@aol.de>
Date: Sun, 23 Jun 2024 13:31:34 +0200
Subject: [PATCH 59/59] chore: Update package.json version to 0.5.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0c23a7533..e82dbcf41 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "name": "TobiTRy"
   },
   "private": false,
-  "version": "0.4.9",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",