From 98a899bdeda31283a88cbf221d71b41e2cd042a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Thu, 6 Aug 2026 15:09:42 +0200
Subject: [PATCH 01/11] feat: move theme state to url

---
 bun.lock                             |   3 -
 lib/components/primitives/sonner.tsx |   4 -
 package.json                         |   1 -
 src/app/layout.tsx                   | 330 +++++++++++++--------------
 src/components/ThemeInitializer.tsx  |  39 ----
 src/components/ThemeProvider.tsx     |  27 ---
 src/components/ThemeSelector.tsx     |  39 +---
 src/hooks/use-theme-switcher.ts      | 196 +++++++---------
 vite.config.lib.ts                   |   1 -
 9 files changed, 250 insertions(+), 390 deletions(-)
 delete mode 100644 src/components/ThemeInitializer.tsx
 delete mode 100644 src/components/ThemeProvider.tsx

diff --git a/bun.lock b/bun.lock
index 23e452b..3ad600c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -77,7 +77,6 @@
         "date-fns": "^4.0.0",
         "embla-carousel-react": "^8.0.0",
         "input-otp": "^1.0.0",
-        "next-themes": "^0.3.0 || ^0.4.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-day-picker": "^9.13.0",
         "react-dom": "^18.0.0 || ^19.0.0",
@@ -1493,8 +1492,6 @@
 
     "next-mdx-remote": ["next-mdx-remote@6.0.0", "", { "dependencies": { "@babel/code-frame": "^7.23.5", "@mdx-js/mdx": "^3.0.1", "@mdx-js/react": "^3.0.1", "unist-util-remove": "^4.0.0", "unist-util-visit": "^5.1.0", "vfile": "^6.0.1", "vfile-matter": "^5.0.0" }, "peerDependencies": { "react": ">=16" } }, "sha512-cJEpEZlgD6xGjB4jL8BnI8FaYdN9BzZM4NwadPe1YQr7pqoWjg9EBCMv3nXBkuHqMRfv2y33SzUsuyNh9LFAQQ=="],
 
-    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
-
     "node-exports-info": ["node-exports-info@1.6.0", "", { "dependencies": { "array.prototype.flatmap": "^1.3.3", "es-errors": "^1.3.0", "object.entries": "^1.1.9", "semver": "^6.3.1" } }, "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw=="],
 
     "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
diff --git a/lib/components/primitives/sonner.tsx b/lib/components/primitives/sonner.tsx
index 30d08f7..fce13a5 100644
--- a/lib/components/primitives/sonner.tsx
+++ b/lib/components/primitives/sonner.tsx
@@ -7,15 +7,11 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from "lucide-react";
-import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
         success: <CircleCheckIcon className="size-4" />,
diff --git a/package.json b/package.json
index dfbefed..cce3500 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,6 @@
     "date-fns": "^4.0.0",
     "embla-carousel-react": "^8.0.0",
     "input-otp": "^1.0.0",
-    "next-themes": "^0.3.0 || ^0.4.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "^18.0.0 || ^19.0.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 62c6948..7b34e66 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Inter, Roboto, Montserrat } from "next/font/google";
+import { Inter } from "next/font/google";
 import Image from "next/image";
 import {
   Header,
@@ -29,34 +29,13 @@ import EinfraLogoLight from "../../public/einfra-logo.svg";
 import EinfraLogoDark from "../../public/e-INFRA_logo_RGB_bila.svg";
 import type { StaticImageData } from "next/image";
 import Link from "next/link";
-import { ThemeProvider } from "../components/ThemeProvider";
 import { ThemeSelector } from "../components/ThemeSelector";
-import { ThemeInitializer } from "../components/ThemeInitializer";
 import { SearchTrigger } from "../components/search/SearchTrigger";
-import { MobileNav } from "../components/MobileNav";
 import { Button } from "../../lib/components/primitives/button";
 import { Package } from "lucide-react";
 
-const NAV_ITEMS = [
-  { href: "/", label: "Home" },
-  { href: "/docs/foundations", label: "Foundations" },
-  { href: "/docs/components", label: "Components" },
-];
-
 const inter = Inter({ subsets: ["latin"] });
 
-// Roboto powers the EOSC theme; Montserrat is used for ELTER headings.
-// Exposed as CSS variables consumed by the branding themes in lib_public/*.css.
-const roboto = Roboto({
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
-  variable: "--font-roboto",
-});
-const montserrat = Montserrat({
-  subsets: ["latin"],
-  variable: "--font-montserrat",
-});
-
 export const metadata: Metadata = {
   title: "Design System e-INFRA CZ",
   description: "Design system showcase web for e-INFRA CZ",
@@ -68,18 +47,43 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${roboto.variable} ${montserrat.variable}`}
-      suppressHydrationWarning
-    >
+    <html lang="en" suppressHydrationWarning>
       <head>
         <script
           dangerouslySetInnerHTML={{
             __html: `
               (function() {
-                var branding = localStorage.getItem('theme-branding');
-                var colorMode = localStorage.getItem('theme-color-mode');
+                // Parse URL query params
+                var urlParams = new URLSearchParams(window.location.search);
+                var urlTheme = urlParams.get('theme');
+                var urlMode = urlParams.get('mode');
+
+                var VALID_BRANDING_THEMES = ['default', 'eosc', 'elter'];
+                var VALID_COLOR_MODES = ['light', 'dark'];
+
+                // Resolve branding theme: URL > localStorage > default
+                var branding;
+                if (urlTheme && VALID_BRANDING_THEMES.indexOf(urlTheme) !== -1) {
+                  branding = urlTheme;
+                } else {
+                  branding = localStorage.getItem('theme-branding');
+                  if (!branding || VALID_BRANDING_THEMES.indexOf(branding) === -1) {
+                    branding = 'default';
+                  }
+                }
+                localStorage.setItem('theme-branding', branding);
+
+                // Resolve color mode: URL > localStorage > default
+                var colorMode;
+                if (urlMode && VALID_COLOR_MODES.indexOf(urlMode) !== -1) {
+                  colorMode = urlMode;
+                } else {
+                  colorMode = localStorage.getItem('theme-color-mode');
+                  if (!colorMode || VALID_COLOR_MODES.indexOf(colorMode) === -1) {
+                    colorMode = 'light';
+                  }
+                }
+                localStorage.setItem('theme-color-mode', colorMode);
 
                 if (branding === 'eosc') {
                   document.documentElement.setAttribute('data-theme', 'eosc');
@@ -100,147 +104,137 @@ export default function RootLayout({
         />
       </head>
       <body className={inter.className}>
-        <ThemeInitializer />
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="light"
-          disableTransitionOnChange
-        >
-          <Header>
-            <HeaderContent container={false} className="w-full mx-4">
-              <HeaderLeft>
-                <Link href="/" className="flex items-center gap-2">
-                  <Image
-                    src={EinfraLogoLight as StaticImageData}
-                    alt="e-INFRA Logo (light mode)"
-                    width={120}
-                    height={16}
-                    className="h-12 w-auto dark:hidden"
-                  />
-                  <Image
-                    src={EinfraLogoDark as StaticImageData}
-                    alt="e-INFRA Logo (dark mode)"
-                    width={120}
-                    height={16}
-                    className="hidden h-20 w-auto dark:block"
-                  />
-                </Link>
-                <NavigationMenu className="hidden lg:flex">
-                  <NavigationMenuList>
-                    <NavigationMenuItem>
-                      <NavigationMenuLink href="/">Home</NavigationMenuLink>
-                    </NavigationMenuItem>
-                    <NavigationMenuItem>
-                      <NavigationMenuLink href="/docs/foundations">
-                        Foundations
-                      </NavigationMenuLink>
-                    </NavigationMenuItem>
-                    <NavigationMenuItem>
-                      <NavigationMenuLink href="/docs/components">
-                        Components
-                      </NavigationMenuLink>
-                    </NavigationMenuItem>
-                  </NavigationMenuList>
-                </NavigationMenu>
-              </HeaderLeft>
-              <HeaderRight>
-                <div className="hidden items-center gap-2 lg:flex">
-                  <Link
-                    href="https://github.com/CERIT-SC/design-system"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="ghost" size="sm" className="gap-2 text-sm">
-                      <svg
-                        className="w-5 h-5"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-                      </svg>
-                      GitHub
-                    </Button>
-                  </Link>
-                  <Link
-                    href="https://www.npmjs.com/package/@e-infra/design-system"
-                    target="_blank"
-                    rel="noopener noreferrer"
+        <Header>
+          <HeaderContent container={false} className="w-full mx-4">
+            <HeaderLeft>
+              <Link href="/" className="flex items-center gap-2">
+                <Image
+                  src={EinfraLogoLight as StaticImageData}
+                  alt="e-INFRA Logo (light mode)"
+                  width={120}
+                  height={16}
+                  className="h-12 w-auto dark:hidden"
+                />
+                <Image
+                  src={EinfraLogoDark as StaticImageData}
+                  alt="e-INFRA Logo (dark mode)"
+                  width={120}
+                  height={16}
+                  className="hidden h-20 w-auto dark:block"
+                />
+              </Link>
+              <NavigationMenu>
+                <NavigationMenuList>
+                  <NavigationMenuItem>
+                    <NavigationMenuLink href="/">Home</NavigationMenuLink>
+                  </NavigationMenuItem>
+                  <NavigationMenuItem>
+                    <NavigationMenuLink href="/docs/foundations">
+                      Foundations
+                    </NavigationMenuLink>
+                  </NavigationMenuItem>
+                  <NavigationMenuItem>
+                    <NavigationMenuLink href="/docs/components">
+                      Components
+                    </NavigationMenuLink>
+                  </NavigationMenuItem>
+                </NavigationMenuList>
+              </NavigationMenu>
+            </HeaderLeft>
+            <HeaderRight>
+              <Link
+                href="https://github.com/CERIT-SC/design-system"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button variant="ghost" size="sm" className="gap-2 text-sm">
+                  <svg
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
                   >
-                    <Button variant="ghost" size="sm" className="gap-2 text-sm">
-                      <Package className="w-5 h-5" />
-                      NPM package
-                    </Button>
-                  </Link>
-                  <SearchTrigger />
-                  <ThemeSelector />
-                </div>
-                <MobileNav items={NAV_ITEMS} className="lg:hidden" />
-              </HeaderRight>
-            </HeaderContent>
-          </Header>
-          {children}
-          <Footer>
-            <FooterContent>
-              <FooterLeft>
-                <FooterLogo>
-                  <Image
-                    src={EinfraLogoLight as StaticImageData}
-                    alt="e-INFRA Logo (light mode)"
-                    width={120}
-                    height={16}
-                    className="h-16 w-auto dark:hidden"
-                  />
-                  <Image
-                    src={EinfraLogoDark as StaticImageData}
-                    alt="e-INFRA Logo (dark mode)"
-                    width={120}
-                    height={16}
-                    className="hidden h-16 w-auto dark:block"
-                  />
-                </FooterLogo>
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                  </svg>
+                  GitHub
+                </Button>
+              </Link>
+              <Link
+                href="https://www.npmjs.com/package/@e-infra/design-system"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button variant="ghost" size="sm" className="gap-2 text-sm">
+                  <Package className="w-5 h-5" />
+                  NPM package
+                </Button>
+              </Link>
+              <SearchTrigger />
+              <ThemeSelector />
+            </HeaderRight>
+          </HeaderContent>
+        </Header>
+        {children}
+        <Footer>
+          <FooterContent>
+            <FooterLeft>
+              <FooterLogo>
+                <Image
+                  src={EinfraLogoLight as StaticImageData}
+                  alt="e-INFRA Logo (light mode)"
+                  width={120}
+                  height={16}
+                  className="h-16 w-auto dark:hidden"
+                />
+                <Image
+                  src={EinfraLogoDark as StaticImageData}
+                  alt="e-INFRA Logo (dark mode)"
+                  width={120}
+                  height={16}
+                  className="hidden h-16 w-auto dark:block"
+                />
+              </FooterLogo>
 
-                <FooterLeftText className="text-sm text-text-muted">
-                  The national Czech e-infrastructure for research and
-                  development. <br></br>Design system operated by CERIT-SC, ICS
-                  MUNI.
-                </FooterLeftText>
-              </FooterLeft>
-              <FooterRight>
-                <nav className="flex flex-col gap-2">
-                  <FooterNavHeading>Resources</FooterNavHeading>
-                  <FooterNavLink
-                    href="https://docs.e-infra.cz/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    e-INFRA Docs
-                  </FooterNavLink>
-                  <FooterNavLink
-                    href="https://blog.e-infra.cz/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    e-INFRA Blog
-                  </FooterNavLink>
-                </nav>
-                <nav className="flex flex-col gap-2">
-                  <FooterNavHeading>Legal</FooterNavHeading>
-                  <FooterNavLink
-                    href="https://www.e-infra.cz/en/personal-data-processing"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Privacy Policy
-                  </FooterNavLink>
-                </nav>
-              </FooterRight>
-            </FooterContent>
-            <FooterMeta
-              copyright={`Copyright © ${new Date().getFullYear().toString()} e-INFRA CZ`}
-            />
-          </Footer>
-        </ThemeProvider>
+              <FooterLeftText className="text-sm text-text-muted">
+                The national Czech e-infrastructure for research and
+                development. <br></br>Design system operated by CERIT-SC, ICS
+                MUNI.
+              </FooterLeftText>
+            </FooterLeft>
+            <FooterRight>
+              <nav className="flex flex-col gap-2">
+                <FooterNavHeading>Resources</FooterNavHeading>
+                <FooterNavLink
+                  href="https://docs.e-infra.cz/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  e-INFRA Docs
+                </FooterNavLink>
+                <FooterNavLink
+                  href="https://blog.e-infra.cz/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  e-INFRA Blog
+                </FooterNavLink>
+              </nav>
+              <nav className="flex flex-col gap-2">
+                <FooterNavHeading>Legal</FooterNavHeading>
+                <FooterNavLink
+                  href="https://www.e-infra.cz/en/personal-data-processing"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Privacy Policy
+                </FooterNavLink>
+              </nav>
+            </FooterRight>
+          </FooterContent>
+          <FooterMeta
+            copyright={`Copyright © ${new Date().getFullYear().toString()} e-INFRA CZ`}
+          />
+        </Footer>
       </body>
     </html>
   );
diff --git a/src/components/ThemeInitializer.tsx b/src/components/ThemeInitializer.tsx
deleted file mode 100644
index ec81e52..0000000
--- a/src/components/ThemeInitializer.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-
-/**
- * ThemeInitializer Component
- *
- * Synchronizes our custom branding theme (data-theme attribute)
- * with localStorage and ensures persistence across navigations.
- */
-export function ThemeInitializer() {
-  // Sync localStorage branding theme with DOM on mount
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-
-    const savedBranding = localStorage.getItem("theme-branding");
-    const savedColorMode = localStorage.getItem("theme-color-mode");
-
-    const html = document.documentElement;
-
-    // Apply branding theme
-    if (savedBranding === "eosc") {
-      html.dataset.theme = "eosc";
-    } else if (savedBranding === "elter") {
-      html.dataset.theme = "elter";
-    } else {
-      delete html.dataset.theme;
-    }
-
-    // Apply color mode
-    if (savedColorMode === "dark") {
-      html.classList.add("dark");
-    } else if (savedColorMode === "light") {
-      html.classList.remove("dark");
-    }
-  }, []);
-
-  return null;
-}
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
deleted file mode 100644
index 3821d0c..0000000
--- a/src/components/ThemeProvider.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-
-export type Theme =
-  | "light"
-  | "dark"
-  | "eosc"
-  | "eosc-dark"
-  | "elter"
-  | "elter-dark";
-
-type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>;
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return (
-    <NextThemesProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem={false} // Disable system theme to use our custom logic
-      {...props}
-    >
-      {children}
-    </NextThemesProvider>
-  );
-}
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 8bbbdbd..452764d 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Suspense } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,19 +14,7 @@ import {
   type BrandingTheme,
   type ColorMode,
 } from "../hooks/use-theme-switcher";
-import { useTheme } from "next-themes";
 
-/**
- * Themes that are actually defined in `lib_public` and loaded by the app
- * (see `src/app/globals.css`).
- *
- * Only the color modes with a corresponding stylesheet definition are listed:
- * - Default (`setup.css`): `:root` (light) + `.dark` (dark)
- * - EOSC (`eosc_setup.css`): `[data-theme="eosc"]` (light) + `[data-theme="eosc"].dark` (dark)
- * - ELTER (`elter_setup.css`): `[data-theme="elter"]` (light) + `[data-theme="elter"].dark` (dark)
- *
- * Add a mode here only once the matching CSS exists in `lib_public`.
- */
 const AVAILABLE_THEMES: {
   branding: BrandingTheme;
   label: string;
@@ -36,19 +25,7 @@ const AVAILABLE_THEMES: {
   { branding: "elter", label: "ELTER Branding", modes: ["light", "dark"] },
 ];
 
-/**
- * ThemeSelector Component
- *
- * Lists only the branding/color-mode combinations that have a stylesheet
- * defined in `lib_public` (see {@link AVAILABLE_THEMES}). For example, EOSC
- * and ELTER have no dark theme, so their dark modes are intentionally not
- * offered.
- *
- * Usage:
- *   import { ThemeSelector } from "@/components/ThemeSelector";
- *   <ThemeSelector />
- */
-export function ThemeSelector() {
+function ThemeSelectorInner() {
   const {
     brandingTheme,
     colorMode,
@@ -56,7 +33,6 @@ export function ThemeSelector() {
     setElterTheme,
     setDefaultTheme,
   } = useThemeSwitcher();
-  const { setTheme } = useTheme();
 
   const currentBrandingLabel =
     brandingTheme === "eosc"
@@ -73,9 +49,6 @@ export function ThemeSelector() {
     } else {
       setDefaultTheme(mode);
     }
-    // Keep next-themes in sync using only real CSS class names (light/dark).
-    // Branding is managed separately via data-theme by useThemeSwitcher.
-    setTheme(mode);
   };
 
   return (
@@ -120,3 +93,11 @@ export function ThemeSelector() {
     </DropdownMenu>
   );
 }
+
+export function ThemeSelector() {
+  return (
+    <Suspense fallback={null}>
+      <ThemeSelectorInner />
+    </Suspense>
+  );
+}
diff --git a/src/hooks/use-theme-switcher.ts b/src/hooks/use-theme-switcher.ts
index 96d0f02..189c2c9 100644
--- a/src/hooks/use-theme-switcher.ts
+++ b/src/hooks/use-theme-switcher.ts
@@ -1,195 +1,155 @@
 "use client";
 
-import { useCallback, useEffect, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
 
-export type BrandingTheme = "default" | "eosc" | "elter";
-export type ColorMode = "light" | "dark";
+export const VALID_BRANDING_THEMES = ["default", "eosc", "elter"] as const;
+export const VALID_COLOR_MODES = ["light", "dark"] as const;
 
-/**
- * Extended theme type combining branding and color mode
- */
-export type ExtendedTheme =
-  | "light" // Default light
-  | "dark" // Default dark
-  | "eosc" // EOSC light
-  | "eosc-dark" // EOSC dark
-  | "elter" // ELTER light
-  | "elter-dark"; // ELTER dark
+export type BrandingTheme = (typeof VALID_BRANDING_THEMES)[number];
+export type ColorMode = (typeof VALID_COLOR_MODES)[number];
 
-const THEME_CHANGE_EVENT = "theme-switcher-change";
+const isBrandingTheme = (value: string | null): value is BrandingTheme =>
+  VALID_BRANDING_THEMES.includes(value as BrandingTheme);
+const isColorMode = (value: string | null): value is ColorMode =>
+  VALID_COLOR_MODES.includes(value as ColorMode);
 
-function readSavedBrandingTheme(): BrandingTheme {
+function getInitialBrandingTheme(): BrandingTheme {
   if (typeof window === "undefined") return "default";
   const saved = localStorage.getItem("theme-branding");
-  return saved === "default" || saved === "eosc" || saved === "elter"
-    ? saved
-    : "default";
+  return isBrandingTheme(saved) ? saved : "default";
 }
 
-function readSavedColorMode(): ColorMode {
+function getInitialColorMode(): ColorMode {
   if (typeof window === "undefined") return "light";
   const saved = localStorage.getItem("theme-color-mode");
-  return saved === "light" || saved === "dark" ? saved : "light";
+  return isColorMode(saved) ? saved : "light";
 }
 
-function noop() {
-  /* no-op: nothing to unsubscribe on the server */
-}
-
-function subscribe(callback: () => void) {
-  if (typeof window === "undefined") return noop;
-  window.addEventListener("storage", callback);
-  window.addEventListener(THEME_CHANGE_EVENT, callback);
-  return () => {
-    window.removeEventListener("storage", callback);
-    window.removeEventListener(THEME_CHANGE_EVENT, callback);
-  };
-}
-
-function notify() {
-  if (typeof window === "undefined") return;
-  window.dispatchEvent(new Event(THEME_CHANGE_EVENT));
-}
-
-/**
- * Custom hook for managing extended themes (including EOSC branding)
- *
- * This provides theme switching independent of next-themes, using:
- * - `data-theme="eosc"` attribute for EOSC branding
- * - `data-theme="elter"` attribute for ELTER branding
- * - `.dark` class for dark mode
- *
- * Theme preferences are stored in localStorage:
- * - "theme-branding": "default" | "eosc" | "elter"
- * - "theme-color-mode": "light" | "dark"
- */
 export function useThemeSwitcher() {
-  const brandingTheme = useSyncExternalStore(
-    subscribe,
-    readSavedBrandingTheme,
-    () => "default" as BrandingTheme
-  );
-  const colorMode = useSyncExternalStore(
-    subscribe,
-    readSavedColorMode,
-    () => "light" as ColorMode
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const [brandingTheme, setBrandingTheme] = useState<BrandingTheme>(
+    getInitialBrandingTheme
   );
+  const [colorMode, setColorMode] = useState<ColorMode>(getInitialColorMode);
 
-  // Apply theme to DOM whenever it changes
-  useEffect(() => {
+  const applyTheme = useCallback((branding: BrandingTheme, mode: ColorMode) => {
     if (typeof document === "undefined") return;
 
     const html = document.documentElement;
-    if (brandingTheme === "eosc") {
+
+    // Handle branding theme
+    if (branding === "eosc") {
       html.dataset.theme = "eosc";
-    } else if (brandingTheme === "elter") {
+    } else if (branding === "elter") {
       html.dataset.theme = "elter";
     } else {
       delete html.dataset.theme;
     }
 
-    if (colorMode === "dark") {
+    // Handle color mode
+    if (mode === "dark") {
       html.classList.add("dark");
     } else {
       html.classList.remove("dark");
     }
-  }, [brandingTheme, colorMode]);
+  }, []);
 
-  /**
-   * Apply theme changes to both data-theme attribute and class
-   *
-   * For EOSC themes: sets data-theme="eosc" and applies .dark class if needed
-   * For ELTER themes: sets data-theme="elter" and applies .dark class if needed
-   * For default themes: removes data-theme and applies dark class if needed
-   */
-  const applyTheme = useCallback((branding: BrandingTheme, mode: ColorMode) => {
+  const updateUrlParams = useCallback(
+    (branding: BrandingTheme, mode: ColorMode) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("theme", branding);
+      params.set("mode", mode);
+      const query = params.toString();
+      router.replace(`${pathname}${query ? `?${query}` : ""}`, {
+        scroll: false,
+      });
+    },
+    [searchParams, pathname, router]
+  );
+
+  useEffect(() => {
+    const urlTheme = searchParams.get("theme");
+    const urlMode = searchParams.get("mode");
+
+    /* eslint-disable react-hooks/set-state-in-effect */
+    if (isBrandingTheme(urlTheme)) {
+      setBrandingTheme(urlTheme);
+      localStorage.setItem("theme-branding", urlTheme);
+      applyTheme(urlTheme, colorMode);
+    }
+
+    if (isColorMode(urlMode)) {
+      setColorMode(urlMode);
+      localStorage.setItem("theme-color-mode", urlMode);
+      applyTheme(brandingTheme, urlMode);
+    }
+    /* eslint-enable react-hooks/set-state-in-effect */
+  }, [searchParams, applyTheme, colorMode, brandingTheme]);
+
+  useEffect(() => {
     if (typeof document === "undefined") return;
 
     const html = document.documentElement;
-
-    // Handle branding theme
-    if (branding === "eosc") {
+    if (brandingTheme === "eosc") {
       html.dataset.theme = "eosc";
-    } else if (branding === "elter") {
+    } else if (brandingTheme === "elter") {
       html.dataset.theme = "elter";
     } else {
       delete html.dataset.theme;
     }
 
-    // Handle color mode
-    if (mode === "dark") {
+    if (colorMode === "dark") {
       html.classList.add("dark");
     } else {
       html.classList.remove("dark");
     }
-  }, []);
+  }, [brandingTheme, colorMode]);
 
-  /**
-   * Set EOSC branding theme
-   */
   const setEOSCTheme = useCallback(
     (mode: ColorMode = "light") => {
+      setBrandingTheme("eosc");
+      setColorMode(mode);
       localStorage.setItem("theme-branding", "eosc");
       localStorage.setItem("theme-color-mode", mode);
       applyTheme("eosc", mode);
-      notify();
+      updateUrlParams("eosc", mode);
     },
-    [applyTheme]
+    [applyTheme, updateUrlParams]
   );
 
-  /**
-   * Set ELTER branding theme
-   */
   const setElterTheme = useCallback(
     (mode: ColorMode = "light") => {
+      setBrandingTheme("elter");
+      setColorMode(mode);
       localStorage.setItem("theme-branding", "elter");
       localStorage.setItem("theme-color-mode", mode);
       applyTheme("elter", mode);
-      notify();
+      updateUrlParams("elter", mode);
     },
-    [applyTheme]
+    [applyTheme, updateUrlParams]
   );
 
-  /**
-   * Set default branding theme
-   */
   const setDefaultTheme = useCallback(
     (mode: ColorMode = "light") => {
+      setBrandingTheme("default");
+      setColorMode(mode);
       localStorage.setItem("theme-branding", "default");
       localStorage.setItem("theme-color-mode", mode);
       applyTheme("default", mode);
-      notify();
+      updateUrlParams("default", mode);
     },
-    [applyTheme]
+    [applyTheme, updateUrlParams]
   );
 
-  /**
-   * Toggle between EOSC and default themes
-   */
-  const toggleBrandingTheme = useCallback(() => {
-    const newBranding = brandingTheme === "eosc" ? "default" : "eosc";
-    localStorage.setItem("theme-branding", newBranding);
-    applyTheme(newBranding, colorMode);
-    notify();
-  }, [brandingTheme, colorMode, applyTheme]);
-
-  /**
-   * Toggle light/dark within current branding
-   */
-  const toggleColorMode = useCallback(() => {
-    const newMode = colorMode === "dark" ? "light" : "dark";
-    localStorage.setItem("theme-color-mode", newMode);
-    applyTheme(brandingTheme, newMode);
-    notify();
-  }, [colorMode, brandingTheme, applyTheme]);
-
   return {
     brandingTheme,
     colorMode,
     setEOSCTheme,
     setElterTheme,
     setDefaultTheme,
-    toggleBrandingTheme,
-    toggleColorMode,
   };
 }
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index 7860b0f..57f33d3 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -70,7 +70,6 @@ export default defineConfig({
         "react-day-picker",
         "embla-carousel-react",
         "input-otp",
-        "next-themes",
         "react-resizable-panels",
         "recharts",
         "sonner",

From 18769fed20f7a0db01cc761cf06f8bd45a9c1932 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Thu, 6 Aug 2026 15:11:52 +0200
Subject: [PATCH 02/11] fix: content top padding

---
 docs/getting-started/AI-agents-manual.mdx | 8 +++++---
 lib/components/layout/content.tsx         | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/getting-started/AI-agents-manual.mdx b/docs/getting-started/AI-agents-manual.mdx
index 751dba9..0c8464e 100644
--- a/docs/getting-started/AI-agents-manual.mdx
+++ b/docs/getting-started/AI-agents-manual.mdx
@@ -455,11 +455,13 @@ import { Content, ContentHeading, ContentSubheading, ContentBody } from '@e-infr
 
 | Component | Element | Built-in spacing |
 |---|---|---|
-| `Content` | `div` | `space-y-8 px-10 pb-10 mx-auto max-w-7xl` |
-| `ContentHeading` | wraps `H1` | — |
-| `ContentSubheading` | wraps `H2` | — |
+| `Content` | `div` | `mx-auto w-full max-w-7xl space-y-8 px-4 pt-8 pb-10 md:px-6 lg:px-8 xl:px-10` |
+| `ContentHeading` | wraps `H1` | `mb-6` |
+| `ContentSubheading` | wraps `H2` | `mt-12 mb-4 first:mt-0` |
 | `ContentBody` | `div` | `space-y-4` |
 
+Headings carry their own margins so a section heading sits closer to the body it introduces than to the section above it. These win over the container's `space-y-8` (Tailwind v4 wraps `space-y` in `:where()`), so pass `className` to adjust a single heading.
+
 ```tsx
 <Content>
   <ContentHeading>Page Title</ContentHeading>
diff --git a/lib/components/layout/content.tsx b/lib/components/layout/content.tsx
index 42189ed..9366fc0 100644
--- a/lib/components/layout/content.tsx
+++ b/lib/components/layout/content.tsx
@@ -13,7 +13,7 @@ const ContentContainer = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "space-y-8 px-4 pb-10 mx-auto max-w-7xl sm:px-6 lg:px-10",
+        "mx-auto w-full max-w-7xl space-y-8 px-4 pt-8 pb-10 md:px-6 lg:px-8 xl:px-10",
         className
       )}
       {...props}
@@ -30,7 +30,7 @@ export const ContentHeading = forwardRef<
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, children, ...props }, ref) => {
   return (
-    <H1 ref={ref} className={className} {...props}>
+    <H1 ref={ref} className={cn("mb-6", className)} {...props}>
       {children}
     </H1>
   );
@@ -43,7 +43,7 @@ export const ContentSubheading = forwardRef<
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, children, ...props }, ref) => {
   return (
-    <H2 ref={ref} className={className} {...props}>
+    <H2 ref={ref} className={cn("mt-12 mb-4 first:mt-0", className)} {...props}>
       {children}
     </H2>
   );

From 0b389d5cca10224b45ba40b7546a29c7f125d567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Thu, 6 Aug 2026 15:55:01 +0200
Subject: [PATCH 03/11] fix: fonts an typography

---
 README.md                            |  3 ++
 docs/foundations/themes.mdx          | 53 ++++++++++++++++++++++++++++
 docs/foundations/typography.mdx      |  2 ++
 docs/getting-started/quick-start.mdx |  5 +++
 lib_public/elter_setup.css           |  2 +-
 lib_public/eosc_setup.css            |  8 ++---
 package.json                         |  1 +
 src/app/layout.tsx                   | 19 ++++++++--
 8 files changed, 84 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index c77945c..d5c0e59 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,9 @@ export function Example() {
 
 - `@e-infra/design-system` - Components, utilities, and hooks
 - `@e-infra/design-system/setup.css` - Library CSS entry for Tailwind v4 setup
+- `@e-infra/design-system/eosc_setup.css` - EOSC branding theme
+- `@e-infra/design-system/elter_setup.css` - eLTER branding theme
+- `@e-infra/design-system/custom_setup.css` - 3-color custom theme generator
 
 ## Documentation
 
diff --git a/docs/foundations/themes.mdx b/docs/foundations/themes.mdx
index 80d8d69..a4c79b5 100644
--- a/docs/foundations/themes.mdx
+++ b/docs/foundations/themes.mdx
@@ -17,6 +17,59 @@ import '@e-infra/design-system/eosc_setup.css';   // EOSC theme
 import '@e-infra/design-system/elter_setup.css';  // ELTER theme
 ```
 
+## Theme Fonts
+
+The branding themes set a font family, but the library **does not ship the font
+files**. Each theme reads a CSS variable that your app is responsible for
+defining:
+
+| Theme | Variable | Font | Applies to |
+|-------|----------|------|------------|
+| `default` | — | inherits your app's font | everything |
+| `eosc` | `--font-roboto` | Roboto | body and headings |
+| `elter` | `--font-montserrat` | Montserrat | headings (`h1`–`h6`) only; body uses Helvetica Neue, which needs no loading |
+
+If the variable is missing the theme degrades gracefully — it falls back to a
+locally installed copy of the font, then to the system sans-serif — but you will
+not get the intended branding. To load the fonts properly:
+
+### Next.js (`next/font`)
+
+```tsx
+// app/layout.tsx
+import { Roboto, Montserrat } from 'next/font/google';
+
+const roboto = Roboto({ subsets: ['latin'], display: 'swap', variable: '--font-roboto' });
+const montserrat = Montserrat({ subsets: ['latin'], display: 'swap', variable: '--font-montserrat' });
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${roboto.variable} ${montserrat.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+### Any other bundler
+
+Load the fonts however you normally would (a `<link>` to Google Fonts, a
+self-hosted `@font-face`, …) and point the variable at the family name:
+
+```css
+:root {
+  --font-roboto: "Roboto";
+  --font-montserrat: "Montserrat";
+}
+```
+
+> **Gotcha if you write your own theme:** always give `var()` a fallback inside a
+> `font-family` stack — `var(--font-x, "X"), sans-serif`, never `var(--font-x),
+> sans-serif`. An undefined custom property with no fallback makes the entire
+> declaration invalid at computed-value time, so the browser throws the whole
+> stack away rather than continuing to the next entry. On `<html>` that means
+> falling all the way back to the default serif (Times New Roman).
+
 ## Theme Persistence
 
 Theme preferences are automatically persisted in `localStorage`:
diff --git a/docs/foundations/typography.mdx b/docs/foundations/typography.mdx
index 48531c9..ae09379 100644
--- a/docs/foundations/typography.mdx
+++ b/docs/foundations/typography.mdx
@@ -2,6 +2,8 @@
 
 The typography foundation exports lightweight React primitives with predefined Tailwind classes for headings, body text, links, code, quotes, and lists. These components inherit the active font family from the application; in this docs site, the base font is Inter. All components also accept `className`, which is merged with the default classes.
 
+Branding themes override that inherited font — EOSC uses Roboto and eLTER uses Montserrat for headings. Those font files are not bundled with the library; see [Theme Fonts](/docs/foundations/themes) for how to load them in your app.
+
 <ComponentPreview>
 <div className="flex flex-col gap-4 w-full">
   <H1>Heading 1</H1>
diff --git a/docs/getting-started/quick-start.mdx b/docs/getting-started/quick-start.mdx
index 9cc75c2..b88400c 100644
--- a/docs/getting-started/quick-start.mdx
+++ b/docs/getting-started/quick-start.mdx
@@ -77,6 +77,11 @@ export function Example() {
 
 - `@e-infra/design-system` — Components, utilities, and hooks
 - `@e-infra/design-system/setup.css` — Library CSS entry for Tailwind v4 setup
+- `@e-infra/design-system/eosc_setup.css` — EOSC branding theme
+- `@e-infra/design-system/elter_setup.css` — eLTER branding theme
+- `@e-infra/design-system/custom_setup.css` — 3-color custom theme generator
+
+The branding themes expect their fonts (Roboto for EOSC, Montserrat for eLTER) to be loaded by your app — see [Theme Fonts](/docs/foundations/themes).
 
 ## Next Steps
 
diff --git a/lib_public/elter_setup.css b/lib_public/elter_setup.css
index 12129ea..d6d2f51 100644
--- a/lib_public/elter_setup.css
+++ b/lib_public/elter_setup.css
@@ -21,7 +21,7 @@
     "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-heading:
-    var(--font-montserrat), "Montserrat", ui-sans-serif, system-ui, sans-serif,
+    var(--font-montserrat, "Montserrat"), ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   /* Transitions */
diff --git a/lib_public/eosc_setup.css b/lib_public/eosc_setup.css
index ec6b4fc..8a361cf 100644
--- a/lib_public/eosc_setup.css
+++ b/lib_public/eosc_setup.css
@@ -7,12 +7,8 @@
 /* ─── EOSC Light Theme ──────────────────────────────────────────── */
 [data-theme="eosc"] {
   --radius: 0.75rem;
-
-  /* Typography — EOSC uses Roboto.
-     The Roboto font files are loaded via next/font in the app and exposed as
-     the --font-roboto CSS variable (see src/app/layout.tsx). */
   --font-sans:
-    var(--font-roboto), "Roboto", ui-sans-serif, system-ui, sans-serif,
+    var(--font-roboto, "Roboto"), ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   /* Transitions */
@@ -26,7 +22,7 @@
 
   /* Text */
   --text: #0C0F10; /* --base-950 */
-  --text-muted: 55747B; /* --base-500 */
+  --text-muted: #55747B; /* --base-500 */
   --text-heading: #005B67; /* --primary-700 */
 
   /* Brand — EOSC primary colors */
diff --git a/package.json b/package.json
index cce3500..3cb2992 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     },
     "./setup.css": "./dist/setup.css",
     "./eosc_setup.css": "./dist/eosc_setup.css",
+    "./elter_setup.css": "./dist/elter_setup.css",
     "./custom_setup.css": "./dist/custom_setup.css"
   },
   "packageManager": "bun@1.3.11",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7b34e66..51e6785 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Inter } from "next/font/google";
+import { Inter, Montserrat, Roboto } from "next/font/google";
 import Image from "next/image";
 import {
   Header,
@@ -36,6 +36,17 @@ import { Package } from "lucide-react";
 
 const inter = Inter({ subsets: ["latin"] });
 
+const roboto = Roboto({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-roboto",
+});
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-montserrat",
+});
+
 export const metadata: Metadata = {
   title: "Design System e-INFRA CZ",
   description: "Design system showcase web for e-INFRA CZ",
@@ -47,7 +58,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${roboto.variable} ${montserrat.variable}`}
+      suppressHydrationWarning
+    >
       <head>
         <script
           dangerouslySetInnerHTML={{

From a7ca147ccce5af6ccb7ac13ef8d3bff528b8e0da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Thu, 6 Aug 2026 15:58:08 +0200
Subject: [PATCH 04/11] feat: remove panel component

---
 docs/foundations/spacing.mdx                |   8 +-
 docs/getting-started/AI-agents-manual.mdx   |   6 +-
 lib/components/index.ts                     |   1 -
 lib/components/primitives/panel.stories.tsx | 261 --------------------
 lib/components/primitives/panel.tsx         |  79 ------
 src/lib/component-registry.ts               |  15 --
 6 files changed, 7 insertions(+), 363 deletions(-)
 delete mode 100644 lib/components/primitives/panel.stories.tsx
 delete mode 100644 lib/components/primitives/panel.tsx

diff --git a/docs/foundations/spacing.mdx b/docs/foundations/spacing.mdx
index 81a7c95..2636d14 100644
--- a/docs/foundations/spacing.mdx
+++ b/docs/foundations/spacing.mdx
@@ -53,7 +53,7 @@ All examples on this page use the neutral surface palette (`background`, `surfac
 |-------|-------|----------------|-------|
 | `token-space-1` | 8px | `p-2`, `gap-2` | Inner component padding |
 | `token-space-2` | 16px | `p-4`, `gap-4` | Section gutter / default margin |
-| `token-space-3` | 24px | `p-6`, `gap-6` | Card / panel padding |
+| `token-space-3` | 24px | `p-6`, `gap-6` | Card padding |
 | `token-space-4` | 32px | `p-8`, `gap-8` | Section vertical rhythm |
 
 ### Tablet `md:` — 768px+
@@ -71,7 +71,7 @@ All examples on this page use the neutral surface palette (`background`, `surfac
 |-------|-------|----------------|-------|
 | `token-space-1` | 12px | `md:p-3`, `md:gap-3` | Inner component padding |
 | `token-space-2` | 24px | `md:p-6`, `md:gap-6` | Section gutter / default margin |
-| `token-space-3` | 32px | `md:p-8`, `md:gap-8` | Card / panel padding |
+| `token-space-3` | 32px | `md:p-8`, `md:gap-8` | Card padding |
 | `token-space-4` | 48px | `md:p-12`, `md:gap-12` | Section vertical rhythm |
 
 ### Desktop `lg:` — 1024px+
@@ -89,7 +89,7 @@ All examples on this page use the neutral surface palette (`background`, `surfac
 |-------|-------|----------------|-------|
 | `token-space-1` | 16px | `lg:p-4`, `lg:gap-4` | Inner component padding |
 | `token-space-2` | 32px | `lg:p-8`, `lg:gap-8` | Section gutter / default margin |
-| `token-space-3` | 48px | `lg:p-12`, `lg:gap-12` | Card / panel padding |
+| `token-space-3` | 48px | `lg:p-12`, `lg:gap-12` | Card padding |
 | `token-space-4` | 64px | `lg:p-16`, `lg:gap-16` | Section vertical rhythm |
 
 ### XL `xl:` — 1280px+
@@ -107,7 +107,7 @@ All examples on this page use the neutral surface palette (`background`, `surfac
 |-------|-------|----------------|-------|
 | `token-space-1` | 24px | `xl:p-6`, `xl:gap-6` | Inner component padding |
 | `token-space-2` | 48px | `xl:p-12`, `xl:gap-12` | Section gutter / default margin |
-| `token-space-3` | 64px | `xl:p-16`, `xl:gap-16` | Card / panel padding |
+| `token-space-3` | 64px | `xl:p-16`, `xl:gap-16` | Card padding |
 | `token-space-4` | 96px | `xl:p-24`, `xl:gap-24` | Section vertical rhythm |
 
 ## Usage
diff --git a/docs/getting-started/AI-agents-manual.mdx b/docs/getting-started/AI-agents-manual.mdx
index 0c8464e..b9ff069 100644
--- a/docs/getting-started/AI-agents-manual.mdx
+++ b/docs/getting-started/AI-agents-manual.mdx
@@ -220,7 +220,7 @@ Focus ring: `border-border-focus`.
 |---|---|---|---|---|---|
 | `token-space-1` | `p-2` 8px | `p-3` 12px | `p-4` 16px | `p-6` 24px | Inner component padding |
 | `token-space-2` | `p-4` 16px | `p-6` 24px | `p-8` 32px | `p-12` 48px | Section gutter |
-| `token-space-3` | `p-6` 24px | `p-8` 32px | `p-12` 48px | `p-16` 64px | Card / panel padding |
+| `token-space-3` | `p-6` 24px | `p-8` 32px | `p-12` 48px | `p-16` 64px | Card padding |
 | `token-space-4` | `p-8` 32px | `p-12` 48px | `p-16` 64px | `p-24` 96px | Section vertical rhythm |
 
 Common responsive patterns:
@@ -284,7 +284,7 @@ All components accept `className` (merged with defaults) and their native HTML e
 
 All imports from `@e-infra/design-system`. Do not import anything not in this list — it does not exist in the package.
 
-**Primitives** — accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, dialog, dropdown-menu, form (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage), input, label, menubar, navigation-menu, progress, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, stepper, switch, table, tabs, textarea, toggle, toggle-group, tooltip, panel
+**Primitives** — accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, dialog, dropdown-menu, form (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage), input, label, menubar, navigation-menu, progress, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, stepper, switch, table, tabs, textarea, toggle, toggle-group, tooltip
 
 **Foundations** — H1, H2, H3, H4, P, Lead, Strong, Small, Muted, Code, Link, Blockquote, List, OrderedList
 
@@ -671,7 +671,7 @@ All accept `className` (merged) and native element props.
 
 ### Component inventory — only import from this list
 
-**Primitives** — accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, dialog, dropdown-menu, form (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage), input, label, menubar, navigation-menu, progress, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, stepper, switch, table, tabs, textarea, toggle, toggle-group, tooltip, panel
+**Primitives** — accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, dialog, dropdown-menu, form (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage), input, label, menubar, navigation-menu, progress, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, stepper, switch, table, tabs, textarea, toggle, toggle-group, tooltip
 
 **Layout** — `Content` `ContentHeading` `ContentSubheading` `ContentBody` `Header` `HeaderContent` `HeaderLeft` `HeaderCenter` `HeaderRight` `Sidebar` `SidebarHeader` `SidebarContent` `SidebarFooter` `NavItem` `CollapsibleGroup`
 
diff --git a/lib/components/index.ts b/lib/components/index.ts
index 12f75ad..11da828 100644
--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@@ -37,7 +37,6 @@ export * from "./primitives/textarea";
 export * from "./primitives/toggle";
 export * from "./primitives/toggle-group";
 export * from "./primitives/tooltip";
-export * from "./primitives/panel";
 
 // Typography Components
 export * from "./foundations";
diff --git a/lib/components/primitives/panel.stories.tsx b/lib/components/primitives/panel.stories.tsx
deleted file mode 100644
index d430732..0000000
--- a/lib/components/primitives/panel.stories.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Panel,
-  PanelHeader,
-  PanelFooter,
-  PanelTitle,
-  PanelDescription,
-  PanelContent,
-} from "./panel";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Label } from "./label";
-import { Textarea } from "./textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
-import { Checkbox } from "./checkbox";
-import { RadioGroup, RadioGroupItem } from "./radio-group";
-import { Switch } from "./switch";
-import { Slider } from "./slider";
-
-const meta = {
-  title: "Primitives/Panel",
-  component: Panel,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Panel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Panel className="w-[350px]">
-      <PanelHeader>
-        <PanelTitle>Panel Title</PanelTitle>
-        <PanelDescription>Panel Description</PanelDescription>
-      </PanelHeader>
-      <PanelContent>
-        <p>Panel content goes here.</p>
-      </PanelContent>
-    </Panel>
-  ),
-};
-
-export const Simple: Story = {
-  render: () => (
-    <Panel className="w-[350px]">
-      <PanelHeader>
-        <PanelTitle>Simple Panel</PanelTitle>
-      </PanelHeader>
-      <PanelContent>
-        <p>This is a simple panel with minimal content.</p>
-      </PanelContent>
-    </Panel>
-  ),
-};
-
-export const Form: Story = {
-  render: () => (
-    <Panel className="w-[800px]">
-      <PanelHeader>
-        <PanelTitle>Example Form</PanelTitle>
-        <PanelDescription>All form components in one place</PanelDescription>
-      </PanelHeader>
-      <PanelContent className="space-y-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="space-y-2">
-            <Label htmlFor="text">Text Input</Label>
-            <Input id="text" type="text" placeholder="Enter text" />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="email">Email Input</Label>
-            <Input id="email" type="email" placeholder="email@example.com" />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="password">Password Input</Label>
-            <Input id="password" type="password" placeholder="••••••••" />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="number">Number Input</Label>
-            <Input id="number" type="number" placeholder="0" />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="disabled">Disabled Input</Label>
-            <Input id="disabled" disabled placeholder="Disabled" />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="readonly">Readonly Input</Label>
-            <Input id="readonly" readOnly defaultValue="Read only value" />
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="message">Textarea</Label>
-          <Textarea id="message" placeholder="Type your message here." />
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="message-large">Large Textarea</Label>
-          <Textarea
-            id="message-large"
-            placeholder="Type a longer message..."
-            rows={6}
-          />
-        </div>
-
-        <div className="space-y-2">
-          <Label>Select an option</Label>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select a fruit" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-              <SelectItem value="orange">Orange</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Checkbox id="terms" />
-          <Label htmlFor="terms">Accept terms and conditions</Label>
-        </div>
-
-        <div className="space-y-2">
-          <Label>Notifications</Label>
-          <RadioGroup defaultValue="all">
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="all" id="all" />
-              <Label htmlFor="all">All notifications</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="mentions" id="mentions" />
-              <Label htmlFor="mentions">Mentions only</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="none" id="none" />
-              <Label htmlFor="none">None</Label>
-            </div>
-          </RadioGroup>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Switch id="airplane-mode" />
-          <Label htmlFor="airplane-mode">Airplane Mode</Label>
-        </div>
-
-        <div className="space-y-2">
-          <Label>Volume</Label>
-          <Slider defaultValue={[50]} max={100} step={1} />
-        </div>
-      </PanelContent>
-      <PanelFooter>
-        <Button>Submit</Button>
-      </PanelFooter>
-    </Panel>
-  ),
-};
-
-export const DataDisplay: Story = {
-  render: () => (
-    <Panel className="w-[400px]">
-      <PanelHeader>
-        <PanelTitle>Resource Allocation</PanelTitle>
-        <PanelDescription>
-          Current allocation status for compute resources
-        </PanelDescription>
-      </PanelHeader>
-      <PanelContent>
-        <div className="space-y-4">
-          <div className="flex justify-between">
-            <span className="font-medium">CPU Cores</span>
-            <span>48 of 96 used</span>
-          </div>
-          <div className="h-2 rounded-full bg-surface">
-            <div
-              className="h-2 rounded-full bg-chart-1"
-              style={{ width: "50%" }}
-            ></div>
-          </div>
-          <div className="flex justify-between">
-            <span className="font-medium">Memory</span>
-            <span>128 GB of 256 GB used</span>
-          </div>
-          <div className="h-2 rounded-full bg-surface">
-            <div
-              className="h-2 rounded-full bg-chart-2"
-              style={{ width: "50%" }}
-            ></div>
-          </div>
-          <div className="flex justify-between">
-            <span className="font-medium">Storage</span>
-            <span>2.5 TB of 5 TB used</span>
-          </div>
-          <div className="h-2 rounded-full bg-surface">
-            <div
-              className="h-2 rounded-full bg-chart-3"
-              style={{ width: "50%" }}
-            ></div>
-          </div>
-        </div>
-      </PanelContent>
-    </Panel>
-  ),
-};
-
-export const InfrastructureStatus: Story = {
-  render: () => (
-    <Panel className="w-[400px]">
-      <PanelHeader>
-        <PanelTitle>e-INFRA CZ Services Status</PanelTitle>
-        <PanelDescription>
-          Real-time status of infrastructure services
-        </PanelDescription>
-      </PanelHeader>
-      <PanelContent className="space-y-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="bg-success size-3 rounded-full"></div>
-            <span>Compute Cluster</span>
-          </div>
-          <span className="text-success text-sm">Operational</span>
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="bg-success size-3 rounded-full"></div>
-            <span>Storage System</span>
-          </div>
-          <span className="text-success text-sm">Operational</span>
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="bg-warning size-3 rounded-full"></div>
-            <span>Network</span>
-          </div>
-          <span className="text-warning text-sm">Degraded</span>
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="bg-success size-3 rounded-full"></div>
-            <span>Authentication</span>
-          </div>
-          <span className="text-success text-sm">Operational</span>
-        </div>
-      </PanelContent>
-    </Panel>
-  ),
-};
diff --git a/lib/components/primitives/panel.tsx b/lib/components/primitives/panel.tsx
deleted file mode 100644
index ca7eb6b..0000000
--- a/lib/components/primitives/panel.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { cn } from "../../lib/utils";
-
-function Panel({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="panel"
-      className={cn(
-        "bg-surface text-text rounded-md border p-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function PanelHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="panel-header"
-      className={cn(
-        "@container/panel-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 has-data-[slot=panel-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function PanelTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="panel-title"
-      className={cn("text-xl leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function PanelDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="panel-description"
-      className={cn("text-text text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function PanelContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="panel-content"
-      className={cn("pt-6 text-base", className)}
-      {...props}
-    />
-  );
-}
-
-function PanelFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="panel-footer"
-      className={cn("flex items-center pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Panel,
-  PanelHeader,
-  PanelFooter,
-  PanelTitle,
-  PanelDescription,
-  PanelContent,
-};
diff --git a/src/lib/component-registry.ts b/src/lib/component-registry.ts
index 8ab59b0..d789605 100644
--- a/src/lib/component-registry.ts
+++ b/src/lib/component-registry.ts
@@ -140,14 +140,6 @@ import {
   PaginationNext,
   PaginationEllipsis,
 } from "../../lib/components/primitives/pagination";
-import {
-  Panel,
-  PanelContent,
-  PanelDescription,
-  PanelFooter,
-  PanelHeader,
-  PanelTitle,
-} from "../../lib/components/primitives/panel";
 import { Progress } from "../../lib/components/primitives/progress";
 import {
   RadioGroup,
@@ -416,13 +408,6 @@ export const componentRegistry: Record<string, React.ComponentType<any>> = {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-  // Panel
-  Panel,
-  PanelContent,
-  PanelDescription,
-  PanelFooter,
-  PanelHeader,
-  PanelTitle,
   // Progress
   Progress,
   // RadioGroup

From 79d02255ac43d35e96b2c8e2724759354f60e4c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Thu, 6 Aug 2026 16:25:46 +0200
Subject: [PATCH 05/11] fix: eosc color palette

---
 lib_public/eosc_setup.css | 194 +++++++++++++++++++-------------------
 1 file changed, 97 insertions(+), 97 deletions(-)

diff --git a/lib_public/eosc_setup.css b/lib_public/eosc_setup.css
index 8a361cf..ab35d6a 100644
--- a/lib_public/eosc_setup.css
+++ b/lib_public/eosc_setup.css
@@ -21,42 +21,42 @@
   --surface-raised: #D7E1E2; /* --base-200 */
 
   /* Text */
-  --text: #0C0F10; /* --base-950 */
+  --text: #091013; /* --base-950 */
   --text-muted: #55747B; /* --base-500 */
   --text-heading: #005B67; /* --primary-700 */
 
   /* Brand — EOSC primary colors */
-  --primary: #2A7180;
+  --primary: #2A7180; /* --primary-600 */
   --primary-foreground: #ffffff;
 
-  --secondary: #CCEAE8;
-  --secondary-foreground: #00363E;
+  --secondary: #CCEAE8; /* --secondary-200 */
+  --secondary-foreground: #061E1E; /* --secondary-950 */
 
-  --tertiary: #AC2D68;
-  --tertiary-foreground: #ffffff;
+  --tertiary: #AC2D68; /* --tertiary-600 */
+  --tertiary-foreground: #ffffff; 
 
   /* Borders */
-  --border: #d4d4d4;
-  --border-focus: #025960;
+  --border: #d4d4d4; /* TODO: check */
+  --border-focus: #025960; /* TODO: check */
 
   /* Semantic */
-  --info: #3F8ED4;
+  --info: #609BDC; /* TODO: check, --color-info-600 */
   --info-foreground: #ffffff;
-  --success: #5CAD50;
+  --success: #429443; /* TODO: check --color-success-600 */
   --success-foreground: #ffffff;
-  --warning: #CA9C40;
+  --warning: #CB9A47; /* TODO: check --color-warning-600 */
   --warning-foreground: #ffffff;
-  --error: #CC4F4B;
+  --error: #D13838; /* TODO: check --color-error-600 */
   --error-foreground: #ffffff;
 
   /* Charts — EOSC palette */
-  --chart-1: #14A6C0;
-  --chart-2: #F65D97;
-  --chart-3: #A07AEF;
-  --chart-4: #B85C00;
-  --chart-5: #15AA56;
-  --chart-6: #FFD04D;
-  --chart-7: #D7412F;
+  --chart-1: #009DB7;
+  --chart-2: #F15893;
+  --chart-3: #7F32FC;
+  --chart-4: #DC7200;
+  --chart-5: #00A52A;
+  --chart-6: #A99300;
+  --chart-7: #B10005;
 
   /* ── Primary Ramp ── */
   --color-primary-50: #EEF6F6;
@@ -172,47 +172,47 @@
   --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
 
   /* Surfaces — EOSC dark mode surface colours */
-  --background: #0C0F10;
-  --surface: #1F2527;
-  --surface-raised: #323B3E;
+  --background: #091013; /* --base-950 */
+  --surface: #001E26; /* --base-900 */
+  --surface-raised: #0C2C35; /* --base-800 */
 
   /* Text — EOSC dark mode text colours */
-  --text: #F1F4F4;
-  --text-muted: #A7B4B7; 
-  --text-heading: #7FB2BA;
+  --text: #F1F6F6; /* --base-50 */
+  --text-muted: #55747B; /* --base-500 */
+  --text-heading: #AECFD5; /* --primary-300 */
 
   /* Brand — EOSC dark mode brand colours */
   --primary: #2A7180; /* --color-primary-500 */
-  --primary-foreground: #EEF6F6; /* --color-primary-50 */
+  --primary-foreground: #ffffff;
 
-  --secondary: #70CDC6; /* --color-secondary-800 */
-  --secondary-foreground: #061E1E; /* --color-secondary-200 */
+  --secondary: #A6DED9; /* TODO: Check, --color-secondary-300 */ 
+  --secondary-foreground: #ffffff; /* --color-secondary-200 */
 
   --tertiary: #AC2D68; /* --color-tertiary-400 */
   --tertiary-foreground: #ffffff;
 
   /* Borders — EOSC dark mode border colours */
-  --border: #424D50;
-  --border-focus: #748387;
+  --border: #424D50; /* TODO: check */
+  --border-focus: #748387; /* TODO: check */
 
   /* Semantic — EOSC dark mode semantic colours */
-  --info: #6EADE3; /* --color-info-400 */
+  --info: #609BDC; /* TODO: check, --color-info-600 */
   --info-foreground: #ffffff;
-  --success: #7FC06B; /* --color-success-400 */
+  --success: #429443; /* TODO: check --color-success-600 */
   --success-foreground: #ffffff;
-  --warning: #D9AE5C; /* --color-warning-400 */
+  --warning: #CB9A47; /* TODO: check --color-warning-600 */
   --warning-foreground: #ffffff;
-  --error: #D36A63; /* --color-error-400 */
+  --error: #D13838; /* TODO: check --color-error-600 */
   --error-foreground: #ffffff;
 
   /* Charts — EOSC dark mode chart palette */
-  --chart-1: #1A8A9D;
-  --chart-2: #E5246D;
-  --chart-3: #6730D9;
-  --chart-4: #73400D;
-  --chart-5: #1D9B54;
-  --chart-6: #E7B323;
-  --chart-7: #933125;
+  --chart-1: #14A6C0;
+  --chart-2: #F65D97;
+  --chart-3: #9285FF;
+  --chart-4: #FF8800;
+  --chart-5: #00C739;
+  --chart-6: #F6CA00;
+  --chart-7: #E3000E;
 
   /* ── Primary Ramp ── */
   --color-primary-50: #EEF6F6;
@@ -254,69 +254,69 @@
   --color-tertiary-950: #37001B;
 
   /* ── Error Ramp ── */
-  --color-error-50: #FAEDEB;
-  --color-error-100: #F8E5E3;
-  --color-error-200: #F2C9C4;
-  --color-error-300: #E9A098;
-  --color-error-400: #D36A63;
-  --color-error-500: #CC4F4B;
-  --color-error-600: #BC3534;
-  --color-error-700: #AA2828;
-  --color-error-800: #931F20;
-  --color-error-900: #6C1819;
-  --color-error-950: #45100C;
+  --color-error-50: #FEF1EF;
+  --color-error-100: #FCE2DF;
+  --color-error-200: #FAC5BF;
+  --color-error-300: #F9A69E;
+  --color-error-400: #F7857D;
+  --color-error-500: #F65953;
+  --color-error-600: #D13838;
+  --color-error-700: #9C2C29;
+  --color-error-800: #6A1D1B;
+  --color-error-900: #3E0E0E;
+  --color-error-950: #290806;
 
-  /* ── Warning Ramp ── */
-  --color-warning-50: #FAF5EA;
-  --color-warning-100: #F4EFDF;
-  --color-warning-200: #EDDDB5;
-  --color-warning-300: #EBCF8B;
-  --color-warning-400: #D9AE5C;
-  --color-warning-500: #CA9C40;
-  --color-warning-600: #C48D23;
-  --color-warning-700: #A97821;
-  --color-warning-800: #7B5514;
-  --color-warning-900: #5C3F0E;
-  --color-warning-950: #392705;
+   /* ── Warning Ramp ── */
+  --color-warning-50: #FEF9ED;
+  --color-warning-100: #FCF6E5;
+  --color-warning-200: #FCEDC9;
+  --color-warning-300: #FAE3AC;
+  --color-warning-400: #FFD482;
+  --color-warning-500: #FFCA61;
+  --color-warning-600: #CB9A47;
+  --color-warning-700: #987133;
+  --color-warning-800: #664A20;
+  --color-warning-900: #37260D;
+  --color-warning-950: #1F1505;
 
   /* ── Success Ramp */
-  --color-success-50: #EEF5EB;
-  --color-success-100: #E5F0E2;
-  --color-success-200: #CFE4C9;
-  --color-success-300: #A9D29D;
-  --color-success-400: #7FC06B;
-  --color-success-500: #5CAD50;
-  --color-success-600: #43A044;
-  --color-success-700: #328739;
-  --color-success-800: #286E31;
-  --color-success-900: #1B5225;
-  --color-success-950: #103617;
+  --color-success-50: #E7FDDE;
+  --color-success-100: #D6F4CE;
+  --color-success-200: #B5E5A8;
+  --color-success-300: #96D682;
+  --color-success-400: #81C969;
+  --color-success-500: #5DBC4F;
+  --color-success-600: #429443;
+  --color-success-700: #2E6D32;
+  --color-success-800: #1D4A22;
+  --color-success-900: #0C2911;
+  --color-success-950: #051909;
 
   /* ── Info Ramp ── */
-  --color-info-50: #EEF6FD;
-  --color-info-100: #DDEDFB;
-  --color-info-200: #C4DFF7;
-  --color-info-300: #9FC9EF;
-  --color-info-400: #6EADE3;
-  --color-info-500: #3F8ED4;
-  --color-info-600: #196DBC;
-  --color-info-700: #155DA2;
-  --color-info-800: #124D86;
-  --color-info-900: #0D3862;
-  --color-info-950: #08233E;
+  --color-info-50: #F5FAFE;
+  --color-info-100: #EBF5FE;
+  --color-info-200: #D6EBFC;
+  --color-info-300: #BCDEFD;
+  --color-info-400: #A5D4FC;
+  --color-info-500: #8FC8FF;
+  --color-info-600: #609BDC;
+  --color-info-700: #4471A3;
+  --color-info-800: #2C4C70;
+  --color-info-900: #14293F;
+  --color-info-950: #0A1828;
 
   /* ── Base/Neutral Ramp ── */
-  --color-base-50: #F1F4F4;
-  --color-base-100: #EEF1F1;
-  --color-base-200: #E0E6E7;
-  --color-base-300: #C7D1D3;
-  --color-base-400: #A7B4B7;
-  --color-base-500: #748387;
-  --color-base-600: #576569;
-  --color-base-700: #424D50;
-  --color-base-800: #323B3E;
-  --color-base-900: #1F2527;
-  --color-base-950: #0C0F10;
+  --color-base-50: #F1F6F6;
+  --color-base-100: #E6EDED;
+  --color-base-200: #D7E1E2;
+  --color-base-300: #C1CED0;
+  --color-base-400: #9FB4B9;
+  --color-base-500: #55747B;
+  --color-base-600: #3A5860;
+  --color-base-700: #204149;
+  --color-base-800: #0C2C35;
+  --color-base-900: #001E26;
+  --color-base-950: #091013;
 }
 
 /* Apply Roboto to the EOSC theme. Kept unlayered so it overrides the app's

From b559b754bc162289c09b15fe2489c2a2ac508383 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Fri, 7 Aug 2026 16:08:58 +0200
Subject: [PATCH 06/11] fix: eosc color palette

---
 lib_public/eosc_setup.css | 215 +++++++++++++++++---------------------
 1 file changed, 94 insertions(+), 121 deletions(-)

diff --git a/lib_public/eosc_setup.css b/lib_public/eosc_setup.css
index ab35d6a..07c08e1 100644
--- a/lib_public/eosc_setup.css
+++ b/lib_public/eosc_setup.css
@@ -20,34 +20,34 @@
   --surface: #E6EDED; /* --base-100 */
   --surface-raised: #D7E1E2; /* --base-200 */
 
-  /* Text */
+ /* Text */
   --text: #091013; /* --base-950 */
-  --text-muted: #55747B; /* --base-500 */
-  --text-heading: #005B67; /* --primary-700 */
+  --text-muted: #3A5860; /* --base-600 */
+  --text-heading: #2A7180; /* --primary-600 */
 
   /* Brand — EOSC primary colors */
   --primary: #2A7180; /* --primary-600 */
   --primary-foreground: #ffffff;
 
-  --secondary: #CCEAE8; /* --secondary-200 */
-  --secondary-foreground: #061E1E; /* --secondary-950 */
+  --secondary: #C5E5EB; /* --secondary-200 */
+  --secondary-foreground: #04424C; /* --secondary-800 */
 
   --tertiary: #AC2D68; /* --tertiary-600 */
   --tertiary-foreground: #ffffff; 
 
   /* Borders */
-  --border: #d4d4d4; /* TODO: check */
-  --border-focus: #025960; /* TODO: check */
+  --border: #C1CED0; /* --base-300 */
+  --border-focus: #2A7180; /* --primary-600 */
 
   /* Semantic */
-  --info: #609BDC; /* TODO: check, --color-info-600 */
-  --info-foreground: #ffffff;
-  --success: #429443; /* TODO: check --color-success-600 */
-  --success-foreground: #ffffff;
-  --warning: #CB9A47; /* TODO: check --color-warning-600 */
-  --warning-foreground: #ffffff;
-  --error: #D13838; /* TODO: check --color-error-600 */
-  --error-foreground: #ffffff;
+  --info: #8FC8FF; /* --color-info-500 */
+  --info-foreground: #0A1828; /* --color-info-950 */
+  --success: #5DBC4F; /* --color-success-500 */
+  --success-foreground: #051909; /* --color-success-950 */
+  --warning: #FFCA61; /* --color-warning-500 */
+  --warning-foreground: #1F1505; /* --color-warning-950 */
+  --error: #F65953; /* --color-error-500 */
+  --error-foreground: #290806; /* --color-error-950 */
 
   /* Charts — EOSC palette */
   --chart-1: #009DB7;
@@ -58,7 +58,7 @@
   --chart-6: #A99300;
   --chart-7: #B10005;
 
-  /* ── Primary Ramp ── */
+/* ── Primary Ramp ── */
   --color-primary-50: #EEF6F6;
   --color-primary-100: #E6F0F1;
   --color-primary-200: #D1E4E7;
@@ -72,17 +72,17 @@
   --color-primary-950: #001F24;
 
   /* ── Secondary Ramp -─ */
-  --color-secondary-50: #EDF7F6;
-  --color-secondary-100: #E3F2F1;
-  --color-secondary-200: #CCEAE8;
-  --color-secondary-300: #A6DED9;
-  --color-secondary-400: #70CDC6;
-  --color-secondary-500: #37AEA7;
-  --color-secondary-600: #228781;
-  --color-secondary-700: #0F5A57;
-  --color-secondary-800: #0C4D4B;
-  --color-secondary-900: #093433;
-  --color-secondary-950: #061E1E;
+  --color-secondary-50:  #ECF7FA;
+  --color-secondary-100: #DEF1F4;
+  --color-secondary-200: #C5E5EB;
+  --color-secondary-300: #A0D3DD;
+  --color-secondary-400: #76BECC;
+  --color-secondary-500: #44A1B1;
+  --color-secondary-600: #118090;
+  --color-secondary-700: #0A606D;
+  --color-secondary-800: #04424C;
+  --color-secondary-900: #012A30;
+  --color-secondary-950: #001418;
 
   /* ── Tertiary Ramp ── */
   --color-tertiary-50: #FFEFF4;
@@ -171,39 +171,39 @@
   --transition-duration: 300ms;
   --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Surfaces — EOSC dark mode surface colours */
+/* Surfaces — EOSC dark mode surface colours */
   --background: #091013; /* --base-950 */
-  --surface: #001E26; /* --base-900 */
-  --surface-raised: #0C2C35; /* --base-800 */
+  --surface: #111B1E; /* --base-900 */
+  --surface-raised: #17282C; /* --base-800 */
 
   /* Text — EOSC dark mode text colours */
-  --text: #F1F6F6; /* --base-50 */
-  --text-muted: #55747B; /* --base-500 */
-  --text-heading: #AECFD5; /* --primary-300 */
+  --text: #FFFFFF; /* white */
+  --text-muted: #7E9AA0; /* --base-300 */
+  --text-heading: #76BBC8; /* --primary-300 */
 
   /* Brand — EOSC dark mode brand colours */
-  --primary: #2A7180; /* --color-primary-500 */
+  --primary: #267582; /* --color-primary-600 */
   --primary-foreground: #ffffff;
 
-  --secondary: #A6DED9; /* TODO: Check, --color-secondary-300 */ 
-  --secondary-foreground: #ffffff; /* --color-secondary-200 */
+  --secondary: #012930 ; /* --color-secondary-900 */ 
+  --secondary-foreground: #A0D0DA; /* --color-secondary-200 */
 
-  --tertiary: #AC2D68; /* --color-tertiary-400 */
+  --tertiary: #B83E73; /* --color-tertiary-600 */
   --tertiary-foreground: #ffffff;
 
   /* Borders — EOSC dark mode border colours */
-  --border: #424D50; /* TODO: check */
-  --border-focus: #748387; /* TODO: check */
-
-  /* Semantic — EOSC dark mode semantic colours */
-  --info: #609BDC; /* TODO: check, --color-info-600 */
-  --info-foreground: #ffffff;
-  --success: #429443; /* TODO: check --color-success-600 */
-  --success-foreground: #ffffff;
-  --warning: #CB9A47; /* TODO: check --color-warning-600 */
-  --warning-foreground: #ffffff;
-  --error: #D13838; /* TODO: check --color-error-600 */
-  --error-foreground: #ffffff;
+  --border: #1D3237; /* --base-700 */
+  --border-focus: #267582; /* --color-primary-600 */
+
+  /* Semantic - dark */
+  --info: #609BDC; /* --color-info-600 */
+  --info-foreground: #0A1828; /* --color-info-950 */
+  --success: #429443; /* --color-success-600 */
+  --success-foreground: #051909; /* --color-success-950 */
+  --warning: #CB9A47; /* --color-warning-600 */
+  --warning-foreground: #1F1505; /* --color-warning-950 */
+  --error: #D13838; /* --color-error-600 */
+  --error-foreground: #290806; /* --color-error-950 */
 
   /* Charts — EOSC dark mode chart palette */
   --chart-1: #14A6C0;
@@ -214,44 +214,44 @@
   --chart-6: #F6CA00;
   --chart-7: #E3000E;
 
-  /* ── Primary Ramp ── */
-  --color-primary-50: #EEF6F6;
-  --color-primary-100: #E6F0F1;
-  --color-primary-200: #D1E4E7;
-  --color-primary-300: #AECFD5;
-  --color-primary-400: #7FB2BA;
-  --color-primary-500: #7FB2BA;
-  --color-primary-600: #2A7180;
-  --color-primary-700: #005B67;
-  --color-primary-800: #004E59;
-  --color-primary-900: #00363E;
-  --color-primary-950: #001F24;
+   /* ── Primary Ramp — dark ── */
+  --color-primary-50:  #F1F4F4;
+  --color-primary-100: #D1E2E6;
+  --color-primary-200: #9ED1DB;
+  --color-primary-300: #76BBC8;
+  --color-primary-400: #52A3B2;
+  --color-primary-500: #378B9A;
+  --color-primary-600: #267582;
+  --color-primary-700: #145B66;
+  --color-primary-800: #09424B;
+  --color-primary-900: #03292F;
+  --color-primary-950: #001317;
 
   /* ── Secondary Ramp -─ */
-  --color-secondary-50: #EDF7F6;
-  --color-secondary-100: #E3F2F1;
-  --color-secondary-200: #CCEAE8;
-  --color-secondary-300: #A6DED9;
-  --color-secondary-400: #70CDC6;
-  --color-secondary-500: #37AEA7;
-  --color-secondary-600: #228781;
-  --color-secondary-700: #0F5A57;
-  --color-secondary-800: #0C4D4B;
-  --color-secondary-900: #093433;
-  --color-secondary-950: #061E1E;
+  --color-secondary-50:  #ECF5F7;
+  --color-secondary-100: #CCE4E8;
+  --color-secondary-200: #A0D0DA;
+  --color-secondary-300: #76BBC8;
+  --color-secondary-400: #50A3B2;
+  --color-secondary-500: #328C9B;
+  --color-secondary-600: #1C7584;
+  --color-secondary-700: #085C68;
+  --color-secondary-800: #04424B;
+  --color-secondary-900: #012930;
+  --color-secondary-950: #001317;
 
   /* ── Tertiary Ramp ── */
-  --color-tertiary-50: #FFEFF4;
-  --color-tertiary-100: #FFE6EE;
-  --color-tertiary-200: #FFD2E0;
-  --color-tertiary-300: #FFACC9;
-  --color-tertiary-400: #EC80A9;
-  --color-tertiary-500: #C94E7E;
-  --color-tertiary-600: #AC2D68;
-  --color-tertiary-700: #930051;
-  --color-tertiary-800: #7F0046;
-  --color-tertiary-900: #5A0030;
-  --color-tertiary-950: #37001B;
+  --color-tertiary-50:  #F9F1F3;
+  --color-tertiary-100: #EFD9E0;
+  --color-tertiary-200: #E8BCCA;
+  --color-tertiary-300: #E39AB3;
+  --color-tertiary-400: #DC769D;
+  --color-tertiary-500: #CE5687;
+  --color-tertiary-600: #B83E73;
+  --color-tertiary-700: #942659;
+  --color-tertiary-800: #6D163F;
+  --color-tertiary-900: #460B26;
+  --color-tertiary-950: #220210;
 
   /* ── Error Ramp ── */
   --color-error-50: #FEF1EF;
@@ -266,7 +266,7 @@
   --color-error-900: #3E0E0E;
   --color-error-950: #290806;
 
-   /* ── Warning Ramp ── */
+  /* ── Warning Ramp ── */
   --color-warning-50: #FEF9ED;
   --color-warning-100: #FCF6E5;
   --color-warning-200: #FCEDC9;
@@ -306,16 +306,16 @@
   --color-info-950: #0A1828;
 
   /* ── Base/Neutral Ramp ── */
-  --color-base-50: #F1F6F6;
-  --color-base-100: #E6EDED;
-  --color-base-200: #D7E1E2;
-  --color-base-300: #C1CED0;
-  --color-base-400: #9FB4B9;
-  --color-base-500: #55747B;
-  --color-base-600: #3A5860;
-  --color-base-700: #204149;
-  --color-base-800: #0C2C35;
-  --color-base-900: #001E26;
+  --color-base-50: #EAF2F3;
+  --color-base-100: #D0DCDF;
+  --color-base-200: #A9BEC3;
+  --color-base-300: #7E9AA0;
+  --color-base-400: #57767D;
+  --color-base-500: #3B585E;
+  --color-base-600: #284147;
+  --color-base-700: #1D3237;
+  --color-base-800: #17282C;
+  --color-base-900: #111B1E;
   --color-base-950: #091013;
 }
 
@@ -336,33 +336,6 @@
 }
 
 @layer utilities {
-  .eosc-slide-in-from-bottom {
-    animation: eoscSlideInFromBottom 0.3s ease-out;
-  }
-  .eosc-slide-out-to-bottom {
-    animation: eoscSlideOutToBottom 0.3s ease-in;
-  }
-  .eosc-animate-slideUp {
-    animation: eoscSlideInFromBottom 0.3s ease-out;
-  }
-
-  @keyframes eoscSlideInFromBottom {
-    from {
-      transform: translateY(100%);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-  @keyframes eoscSlideOutToBottom {
-    from {
-      transform: translateY(0);
-    }
-    to {
-      transform: translateY(100%);
-    }
-  }
-
   /* EOSC Transition defaults */
   .eosc-transition-default {
     transition-property: all;

From 76f5377a05d537d660c5d440ac5452344026670c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Fri, 7 Aug 2026 16:20:13 +0200
Subject: [PATCH 07/11] fix: add animation library

---
 lib_public/elter_setup.css | 27 ---------------------------
 lib_public/setup.css       | 15 ++++++++-------
 2 files changed, 8 insertions(+), 34 deletions(-)

diff --git a/lib_public/elter_setup.css b/lib_public/elter_setup.css
index d6d2f51..c519766 100644
--- a/lib_public/elter_setup.css
+++ b/lib_public/elter_setup.css
@@ -355,33 +355,6 @@
 }
 
 @layer utilities {
-  .elter-slide-in-from-bottom {
-    animation: elterSlideInFromBottom 0.3s ease-out;
-  }
-  .elter-slide-out-to-bottom {
-    animation: elterSlideOutToBottom 0.3s ease-in;
-  }
-  .elter-animate-slideUp {
-    animation: elterSlideInFromBottom 0.3s ease-out;
-  }
-
-  @keyframes elterSlideInFromBottom {
-    from {
-      transform: translateY(100%);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-  @keyframes elterSlideOutToBottom {
-    from {
-      transform: translateY(0);
-    }
-    to {
-      transform: translateY(100%);
-    }
-  }
-
   /* ELTER Transition defaults */
   .elter-transition-default {
     transition-property: all;
diff --git a/lib_public/setup.css b/lib_public/setup.css
index 301af62..4418518 100644
--- a/lib_public/setup.css
+++ b/lib_public/setup.css
@@ -1,9 +1,14 @@
 /**
  * e-INFRA CZ Design System Setup CSS
  */
+@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
+@theme {
+  --breakpoint-3xl: 120rem;
+}
+
 @theme inline {
   --radius-sm:  calc(var(--radius) - 4px);
   --radius-md:  calc(var(--radius) - 2px);
@@ -386,18 +391,14 @@
 }
 
 @layer utilities {
-  .slide-in-from-bottom { animation: slideInFromBottom 0.3s ease-out; }
-  .slide-out-to-bottom  { animation: slideOutToBottom 0.3s ease-in; }
-  .animate-slideUp      { animation: slideInFromBottom 0.3s ease-out; }
+  .animate-slideUp {
+    animation: slideInFromBottom 0.3s ease-out;
+  }
 
   @keyframes slideInFromBottom {
     from { transform: translateY(100%); }
     to   { transform: translateY(0); }
   }
-  @keyframes slideOutToBottom {
-    from { transform: translateY(0); }
-    to   { transform: translateY(100%); }
-  }
 
   /* Transition defaults */
   .transition-default {

From 5889ba68e66969fe4e3de36871bdc02602b6e5fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Fri, 7 Aug 2026 16:24:52 +0200
Subject: [PATCH 08/11] add animations package

---
 bun.lock     | 17 +++--------------
 package.json | 14 +++++---------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/bun.lock b/bun.lock
index 3ad600c..6e49bc3 100644
--- a/bun.lock
+++ b/bun.lock
@@ -11,6 +11,7 @@
         "rehype-highlight": "^7.0.2",
         "rehype-slug": "^6.0.0",
         "remark-gfm": "^4.0.1",
+        "tw-animate-css": "^1.4.0",
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
@@ -44,7 +45,6 @@
         "vite-plugin-dts": "^4.5.4",
       },
       "peerDependencies": {
-        "@hookform/resolvers": "^5.0.0",
         "@radix-ui/react-accordion": "^1.0.0",
         "@radix-ui/react-alert-dialog": "^1.0.0",
         "@radix-ui/react-aspect-ratio": "^1.0.0",
@@ -54,7 +54,6 @@
         "@radix-ui/react-context-menu": "^2.0.0",
         "@radix-ui/react-dialog": "^1.0.0",
         "@radix-ui/react-dropdown-menu": "^2.0.0",
-        "@radix-ui/react-hover-card": "^1.0.0",
         "@radix-ui/react-label": "^2.0.0",
         "@radix-ui/react-menubar": "^1.0.0",
         "@radix-ui/react-navigation-menu": "^1.0.0",
@@ -74,9 +73,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "cmdk": "^1.1.1",
-        "date-fns": "^4.0.0",
         "embla-carousel-react": "^8.0.0",
-        "input-otp": "^1.0.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-day-picker": "^9.13.0",
         "react-dom": "^18.0.0 || ^19.0.0",
@@ -86,8 +83,6 @@
         "sonner": "^1.0.0 || ^2.0.0",
         "tailwind-merge": "^2.0.0 || ^3.0.0",
         "tailwindcss": "^4.0.0",
-        "vaul": "^1.1.2",
-        "zod": "^3.0.0 || ^4.0.0",
       },
     },
   },
@@ -216,8 +211,6 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
-    "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
-
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
@@ -390,8 +383,6 @@
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
-    "@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg=="],
-
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
     "@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
@@ -1190,8 +1181,6 @@
 
     "inline-style-parser": ["inline-style-parser@0.2.7", "", {}, "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA=="],
 
-    "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
-
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
@@ -1766,6 +1755,8 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
     "typed-array-buffer": ["typed-array-buffer@1.0.3", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-typed-array": "^1.1.14" } }, "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw=="],
@@ -1820,8 +1811,6 @@
 
     "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
 
-    "vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
-
     "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
 
     "vfile-matter": ["vfile-matter@5.0.1", "", { "dependencies": { "vfile": "^6.0.0", "yaml": "^2.0.0" } }, "sha512-o6roP82AiX0XfkyTHyRCMXgHfltUNlXSEqCIS80f+mbAyiQBE2fxtDVMtseyytGx75sihiJFo/zR6r/4LTs2Cw=="],
diff --git a/package.json b/package.json
index 3cb2992..a7c97d7 100644
--- a/package.json
+++ b/package.json
@@ -51,9 +51,10 @@
     "lint:fix": "eslint --fix .",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\" \"lib/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\" \"lib/**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "type:check": "bun run typecheck:lib && bun run typecheck:showcase",
+    "type:check": "bun run typecheck:lib && bun run typecheck:showcase && bun run typecheck:stories",
     "typecheck:lib": "tsc --noEmit --project tsconfig.lib.json",
     "typecheck:showcase": "tsc --noEmit --project tsconfig.next.json",
+    "typecheck:stories": "tsc --noEmit --project tsconfig.stories.json",
     "tsc": "tsc --noEmit --watch",
     "check": "bun run type:check && bun run lint && bun run format:check"
   },
@@ -75,7 +76,8 @@
     "next-mdx-remote": "^6.0.0",
     "rehype-highlight": "^7.0.2",
     "rehype-slug": "^6.0.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -109,7 +111,6 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
-    "@hookform/resolvers": "^5.0.0",
     "@radix-ui/react-accordion": "^1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-aspect-ratio": "^1.0.0",
@@ -119,7 +120,6 @@
     "@radix-ui/react-context-menu": "^2.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^2.0.0",
-    "@radix-ui/react-hover-card": "^1.0.0",
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-menubar": "^1.0.0",
     "@radix-ui/react-navigation-menu": "^1.0.0",
@@ -139,9 +139,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.0.0",
     "embla-carousel-react": "^8.0.0",
-    "input-otp": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -150,8 +148,6 @@
     "recharts": "^3.6.0",
     "sonner": "^1.0.0 || ^2.0.0",
     "tailwind-merge": "^2.0.0 || ^3.0.0",
-    "tailwindcss": "^4.0.0",
-    "vaul": "^1.1.2",
-    "zod": "^3.0.0 || ^4.0.0"
+    "tailwindcss": "^4.0.0"
   }
 }
\ No newline at end of file

From e87e7f3743d5396d23460e71773306ae215e954b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?=
 <98467853+romanaduraciova@users.noreply.github.com>
Date: Fri, 7 Aug 2026 16:26:02 +0200
Subject: [PATCH 09/11] refactor: bug fixes

---
 .dockerignore                                 |  17 +++
 .github/workflows/app_deploy.yml              |   4 +-
 .github/workflows/lib_publish.yml             |   4 +-
 .github/workflows/pr_checks.yml               |   6 +-
 .github/workflows/storybook_deploy.yml        |   4 +-
 .gitignore                                    |   6 +-
 .npmignore                                    |  25 ----
 components.json                               |   2 +-
 deployment/containers/prod/Dockerfile.app.bun |   2 +-
 .../containers/prod/Dockerfile.storybook.bun  |   2 +-
 deployment/manifests/app-deployment.yaml      |  28 ++++-
 deployment/manifests/dev-app-deployment.yaml  |  28 ++++-
 .../manifests/storybook-deployment.yaml       |  20 +++
 eslint.config.mjs                             |   1 +
 global.d.ts                                   |   2 +-
 lib/components/compounds/feedback-form.tsx    |  23 ++--
 lib/components/index.ts                       |   7 +-
 lib/components/layout/sidebar.stories.tsx     |   8 +-
 .../primitives/accordion.stories.tsx          |   3 +
 lib/components/primitives/button.tsx          |   2 +-
 lib/components/primitives/chart.tsx           |  58 +++++----
 lib/components/primitives/form.tsx            |   8 +-
 lib/components/primitives/stepper.stories.tsx |   3 +
 lib/components/primitives/stepper.tsx         |  20 ++-
 next.config.ts                                |  27 ++--
 src/app/docs/[...slug]/page.tsx               |  76 ++++--------
 src/app/error.tsx                             |   7 +-
 src/app/layout.tsx                            | 116 +++++++++++-------
 src/components/docs/CodeBlock.tsx             |  11 +-
 src/components/docs/docs-typography.ts        |   2 -
 .../docs/foundations/LiveColorsShowcase.tsx   |  61 ++-------
 .../docs/foundations/ThemeSwatch.tsx          |  17 +--
 .../docs/previews/CookiesBannerPreview.tsx    |  13 +-
 src/components/landing/AnimatedBackground.tsx |   7 +-
 src/hooks/use-copy-to-clipboard.ts            |  48 ++++++++
 src/hooks/use-theme-switcher.ts               |  41 +++++--
 src/lib/component-registry.ts                 |   2 +-
 src/lib/docs-nav.ts                           |  46 +++++--
 src/lib/storybook.ts                          |  24 ++--
 tsconfig.stories.json                         |  16 +++
 vite.config.lib.ts                            |   7 +-
 41 files changed, 467 insertions(+), 337 deletions(-)
 delete mode 100644 .npmignore
 create mode 100644 src/hooks/use-copy-to-clipboard.ts
 create mode 100644 tsconfig.stories.json

diff --git a/.dockerignore b/.dockerignore
index e0a57b2..288ea4a 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +1,19 @@
+# Dependencies and build output — rebuilt inside the image
 **/node_modules
 **/dist
+.next
+storybook-static
+public/pagefind
+
+# Never ship into the build context
+.git
+.github
+.env
+.env.*
+
+# Local noise
+.DS_Store
+**/.DS_Store
+*.log
+.vscode
+.idea
diff --git a/.github/workflows/app_deploy.yml b/.github/workflows/app_deploy.yml
index be9e7dd..5c3d6af 100644
--- a/.github/workflows/app_deploy.yml
+++ b/.github/workflows/app_deploy.yml
@@ -23,7 +23,7 @@ jobs:
         uses: oven-sh/setup-bun@v2
 
       - name: Install Dependencies
-        run: bun ci
+        run: bun install --frozen-lockfile
 
       - name: Run Linter
         run: bun run lint
@@ -75,6 +75,8 @@ jobs:
           push: true
           tags: |
             ${{ vars.DOCKER_REGISTRY }}/design-system/app:prod
+          build-args: |
+            NEXT_PUBLIC_TAG=${{ steps.version.outputs.VERSION }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 
diff --git a/.github/workflows/lib_publish.yml b/.github/workflows/lib_publish.yml
index 4d713e3..b0a61b4 100644
--- a/.github/workflows/lib_publish.yml
+++ b/.github/workflows/lib_publish.yml
@@ -21,7 +21,7 @@ jobs:
         uses: oven-sh/setup-bun@v2
 
       - name: Install Dependencies
-        run: bun ci
+        run: bun install --frozen-lockfile
 
       - name: Run Linter
         run: bun run lint
@@ -59,7 +59,7 @@ jobs:
             https://registry.npmjs.org/|${{ secrets.NPMJS_TOKEN }}
 
       - name: Install Dependencies
-        run: bun ci
+        run: bun install --frozen-lockfile
 
       - name: Build Package
         run: bun run build:lib
diff --git a/.github/workflows/pr_checks.yml b/.github/workflows/pr_checks.yml
index 176966f..e86103d 100644
--- a/.github/workflows/pr_checks.yml
+++ b/.github/workflows/pr_checks.yml
@@ -7,8 +7,6 @@ on:
 jobs:
   Quality_Checks:
     runs-on: ubuntu-24.04
-    env:
-      BUN_VERSION: "1.1.13"
     steps:
       - name: Checkout Code
         uses: actions/checkout@v5
@@ -22,13 +20,13 @@ jobs:
         uses: oven-sh/setup-bun@v2
 
       - name: Install Dependencies
-        run: bun ci
+        run: bun install --frozen-lockfile
 
       - name: Run Linter
         run: bun run lint
 
       - name: Run Type Check
-        run: bun run typecheck:lib && bun run typecheck:showcase
+        run: bun run type:check
 
       - name: Run Formatting Check
         run: bun run format:check
diff --git a/.github/workflows/storybook_deploy.yml b/.github/workflows/storybook_deploy.yml
index 7ac217e..b8088bd 100644
--- a/.github/workflows/storybook_deploy.yml
+++ b/.github/workflows/storybook_deploy.yml
@@ -23,7 +23,7 @@ jobs:
         uses: oven-sh/setup-bun@v2
 
       - name: Install Dependencies
-        run: bun ci
+        run: bun install --frozen-lockfile
 
       - name: Run Linter
         run: bun run lint
@@ -75,7 +75,7 @@ jobs:
           push: true
           tags: |
             ${{ vars.DOCKER_REGISTRY }}/design-system/storybook:prod
-          cache-from: type:gha
+          cache-from: type=gha
           cache-to: type=gha,mode=max
 
   Deploy:
diff --git a/.gitignore b/.gitignore
index edb65f4..ad89fd7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,10 +28,8 @@ dist-ssr
 design-system-*.tgz
 
 # Build output
-*.js
-*.js.map
-!*.config.js
-!*.config.ts
+# Scoped to the emit directories: a bare `*.js` also swallows any new
+# plain-JS source file, which is silent and very confusing to debug.
 dist/
 types/
 .next/
diff --git a/.npmignore b/.npmignore
deleted file mode 100644
index 2f7a1e5..0000000
--- a/.npmignore
+++ /dev/null
@@ -1,25 +0,0 @@
-# Source files
-src/
-lib/
-
-# Config files
-vite.config.ts
-tsconfig*.json
-eslint.config.ts
-
-# Development files
-.vscode/
-node_modules/
-.git/
-.gitignore
-
-# Build artifacts
-*.log
-.DS_Store
-
-# Documentation
-README.md
-CONTRIBUTING.md
-CHANGELOG.md
-
-# Only include dist/ in the package
diff --git a/components.json b/components.json
index 136350e..6c731d1 100644
--- a/components.json
+++ b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/globals.css",
+    "css": "src/app/globals.css",
     "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
diff --git a/deployment/containers/prod/Dockerfile.app.bun b/deployment/containers/prod/Dockerfile.app.bun
index eb664ff..6a39a4c 100644
--- a/deployment/containers/prod/Dockerfile.app.bun
+++ b/deployment/containers/prod/Dockerfile.app.bun
@@ -1,4 +1,4 @@
-FROM oven/bun:1.3.9 AS base
+FROM oven/bun:1.3.11 AS base
 
 WORKDIR /app
 
diff --git a/deployment/containers/prod/Dockerfile.storybook.bun b/deployment/containers/prod/Dockerfile.storybook.bun
index fe8486d..46578d9 100644
--- a/deployment/containers/prod/Dockerfile.storybook.bun
+++ b/deployment/containers/prod/Dockerfile.storybook.bun
@@ -1,4 +1,4 @@
-FROM oven/bun:1.3.9 AS builder
+FROM oven/bun:1.3.11 AS builder
 
 WORKDIR /app
 
diff --git a/deployment/manifests/app-deployment.yaml b/deployment/manifests/app-deployment.yaml
index e573d24..8db2a9d 100644
--- a/deployment/manifests/app-deployment.yaml
+++ b/deployment/manifests/app-deployment.yaml
@@ -34,10 +34,30 @@ spec:
           ports:
             - name: probe-port
               containerPort: 80
+          startupProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 5
+            failureThreshold: 24
+          readinessProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 10
+            timeoutSeconds: 3
+            failureThreshold: 3
+          livenessProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 20
+            timeoutSeconds: 3
+            failureThreshold: 3
           resources:
             limits:
-              memory: "6Gi"
-              cpu: "2"
+              memory: "1Gi"
+              cpu: "1"
             requests:
-              memory: "3Gi"
-              cpu: "2"
+              memory: "256Mi"
+              cpu: "100m"
diff --git a/deployment/manifests/dev-app-deployment.yaml b/deployment/manifests/dev-app-deployment.yaml
index 21c6544..6ec0846 100644
--- a/deployment/manifests/dev-app-deployment.yaml
+++ b/deployment/manifests/dev-app-deployment.yaml
@@ -34,10 +34,30 @@ spec:
           ports:
             - name: probe-port
               containerPort: 80
+          startupProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 5
+            failureThreshold: 24
+          readinessProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 10
+            timeoutSeconds: 3
+            failureThreshold: 3
+          livenessProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 20
+            timeoutSeconds: 3
+            failureThreshold: 3
           resources:
             limits:
-              memory: "6Gi"
-              cpu: "2"
+              memory: "1Gi"
+              cpu: "1"
             requests:
-              memory: "3Gi"
-              cpu: "2"
+              memory: "256Mi"
+              cpu: "100m"
diff --git a/deployment/manifests/storybook-deployment.yaml b/deployment/manifests/storybook-deployment.yaml
index 0b62a47..ec48457 100644
--- a/deployment/manifests/storybook-deployment.yaml
+++ b/deployment/manifests/storybook-deployment.yaml
@@ -34,6 +34,26 @@ spec:
           ports:
             - name: probe-port
               containerPort: 8080
+          startupProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 5
+            failureThreshold: 24
+          readinessProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 10
+            timeoutSeconds: 3
+            failureThreshold: 3
+          livenessProbe:
+            httpGet:
+              path: /
+              port: probe-port
+            periodSeconds: 20
+            timeoutSeconds: 3
+            failureThreshold: 3
           resources:
             limits:
               memory: "1Gi"
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 9f96a57..bd73f12 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -17,6 +17,7 @@ export default defineConfig([
     ".next/**",
     "out/**",
     "build/**",
+    "storybook-static/**",
     "next-env.d.ts",
     "lib/**/*.stories.{js,cjs,mjs,ts,tsx}",
     "eslint.config.mjs",
diff --git a/global.d.ts b/global.d.ts
index 917c78b..dc96993 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,7 +1,7 @@
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
-      NEXT_PUBLIC_TAG: string;
+      NEXT_PUBLIC_TAG?: string;
     }
   }
 }
diff --git a/lib/components/compounds/feedback-form.tsx b/lib/components/compounds/feedback-form.tsx
index f673fed..d3ef15b 100644
--- a/lib/components/compounds/feedback-form.tsx
+++ b/lib/components/compounds/feedback-form.tsx
@@ -173,18 +173,21 @@ function FeedbackModal({
           const updateInterval = 50;
           const progressIncrement = 100 / (autoCloseDelay / updateInterval);
 
+          let elapsedProgress = 0;
           progressIntervalRef.current = setInterval(() => {
-            setProgress((prevProgress) => {
-              const newProgress = prevProgress + progressIncrement;
-              if (newProgress >= 100) {
-                clearInterval(progressIntervalRef.current ?? undefined);
-                requestAnimationFrame(() => {
-                  onClose();
-                });
-                return 100;
+            elapsedProgress += progressIncrement;
+
+            if (elapsedProgress >= 100) {
+              if (progressIntervalRef.current) {
+                clearInterval(progressIntervalRef.current);
+                progressIntervalRef.current = null;
               }
-              return newProgress;
-            });
+              setProgress(100);
+              onClose();
+              return;
+            }
+
+            setProgress(elapsedProgress);
           }, updateInterval);
         }
       } else {
diff --git a/lib/components/index.ts b/lib/components/index.ts
index 11da828..db8cdff 100644
--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@@ -10,8 +10,11 @@ export * from "./primitives/button";
 export * from "./primitives/calendar";
 export * from "./primitives/card";
 export * from "./primitives/carousel";
+export * from "./primitives/chart";
 export * from "./primitives/checkbox";
 export * from "./primitives/collapsible";
+export * from "./primitives/command";
+export * from "./primitives/context-menu";
 export * from "./primitives/dialog";
 export * from "./primitives/dropdown-menu";
 export * from "./primitives/form";
@@ -19,13 +22,15 @@ export * from "./primitives/input";
 export * from "./primitives/label";
 export * from "./primitives/menubar";
 export * from "./primitives/navigation-menu";
+export * from "./primitives/pagination";
+export * from "./primitives/popover";
 export * from "./primitives/progress";
 export * from "./primitives/radio-group";
+export * from "./primitives/resizable";
 export * from "./primitives/scroll-area";
 export * from "./primitives/select";
 export * from "./primitives/separator";
 export * from "./primitives/sheet";
-export * from "./layout/sidebar";
 export * from "./primitives/skeleton";
 export * from "./primitives/slider";
 export * from "./primitives/sonner";
diff --git a/lib/components/layout/sidebar.stories.tsx b/lib/components/layout/sidebar.stories.tsx
index f27aa32..9b53f24 100644
--- a/lib/components/layout/sidebar.stories.tsx
+++ b/lib/components/layout/sidebar.stories.tsx
@@ -7,13 +7,7 @@ import {
   NavItem,
   CollapsibleGroup,
 } from "./sidebar";
-import {
-  Home,
-  FileText,
-  Settings,
-  ChevronDown,
-  ChevronRight,
-} from "lucide-react";
+import { Home, FileText, Settings } from "lucide-react";
 
 const meta = {
   title: "Layout/Sidebar",
diff --git a/lib/components/primitives/accordion.stories.tsx b/lib/components/primitives/accordion.stories.tsx
index de7bc66..42902b5 100644
--- a/lib/components/primitives/accordion.stories.tsx
+++ b/lib/components/primitives/accordion.stories.tsx
@@ -13,6 +13,9 @@ const meta = {
     layout: "centered",
   },
   tags: ["autodocs"],
+  // Accordion requires `type`; satisfying it here keeps render-only stories
+  // below from each having to restate args.
+  args: { type: "single" },
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
diff --git a/lib/components/primitives/button.tsx b/lib/components/primitives/button.tsx
index 73c1d8a..0b2918f 100644
--- a/lib/components/primitives/button.tsx
+++ b/lib/components/primitives/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all duration-500 cursor-pointer hover:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all duration-500 cursor-pointer hover:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-border-focus focus-visible:ring-border-focus/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
diff --git a/lib/components/primitives/chart.tsx b/lib/components/primitives/chart.tsx
index fe26a8c..b7f65f7 100644
--- a/lib/components/primitives/chart.tsx
+++ b/lib/components/primitives/chart.tsx
@@ -67,38 +67,48 @@ function ChartContainer({
     </ChartContext.Provider>
   );
 }
+const SAFE_CSS_VALUE = /^[a-zA-Z0-9\s,.()%#/_-]+$/;
+
+const SAFE_CSS_IDENT = /[^a-zA-Z0-9_-]/g;
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const safeId = id.replace(SAFE_CSS_IDENT, "");
+
   const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme ?? config.color
+    ([, itemConfig]) => itemConfig.theme ?? itemConfig.color
   );
 
-  if (!colorConfig.length) {
+  if (!safeId || !colorConfig.length) {
     return null;
   }
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  );
+  const declarations = Object.entries(THEMES)
+    .map(([theme, prefix]) => {
+      const body = colorConfig
+        .map(([key, itemConfig]) => {
+          const color =
+            itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+            itemConfig.color;
+          if (!color || !SAFE_CSS_VALUE.test(color)) return null;
+
+          const safeKey = key.replace(SAFE_CSS_IDENT, "");
+          if (!safeKey) return null;
+
+          return `  --color-${safeKey}: ${color};`;
+        })
+        .filter((line) => line !== null)
+        .join("\n");
+
+      return body ? `${prefix} [data-chart=${safeId}] {\n${body}\n}` : null;
+    })
+    .filter((block) => block !== null)
+    .join("\n");
+
+  if (!declarations) {
+    return null;
+  }
+
+  return <style dangerouslySetInnerHTML={{ __html: declarations }} />;
 };
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
diff --git a/lib/components/primitives/form.tsx b/lib/components/primitives/form.tsx
index f4cc9e4..277d97c 100644
--- a/lib/components/primitives/form.tsx
+++ b/lib/components/primitives/form.tsx
@@ -46,16 +46,14 @@ const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  // This check is needed because the default context value is an empty object
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
   }
 
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
   const { id } = itemContext;
 
   return {
diff --git a/lib/components/primitives/stepper.stories.tsx b/lib/components/primitives/stepper.stories.tsx
index 61ebc0c..f3b22fd 100644
--- a/lib/components/primitives/stepper.stories.tsx
+++ b/lib/components/primitives/stepper.stories.tsx
@@ -25,6 +25,9 @@ const meta = {
     layout: "centered",
   },
   tags: ["autodocs"],
+  // Stepper requires `children`; satisfying it here keeps render-only stories
+  // below from each having to restate args.
+  args: { children: null },
 } satisfies Meta<typeof Stepper>;
 
 export default meta;
diff --git a/lib/components/primitives/stepper.tsx b/lib/components/primitives/stepper.tsx
index fb983bf..6afd122 100644
--- a/lib/components/primitives/stepper.tsx
+++ b/lib/components/primitives/stepper.tsx
@@ -54,20 +54,16 @@ export function Stepper({
   const previousInitialStepRef = React.useRef(initialStep);
 
   const nextStep = React.useCallback(() => {
-    setCurrentStep((prev) => {
-      const next = clampStep(prev + 1, totalSteps);
-      onStepChange?.(next);
-      return next;
-    });
-  }, [clampStep, totalSteps, onStepChange]);
+    const next = clampStep(currentStep + 1, totalSteps);
+    setCurrentStep(next);
+    onStepChange?.(next);
+  }, [clampStep, currentStep, totalSteps, onStepChange]);
 
   const previousStep = React.useCallback(() => {
-    setCurrentStep((prev) => {
-      const next = clampStep(prev - 1, totalSteps);
-      onStepChange?.(next);
-      return next;
-    });
-  }, [clampStep, totalSteps, onStepChange]);
+    const next = clampStep(currentStep - 1, totalSteps);
+    setCurrentStep(next);
+    onStepChange?.(next);
+  }, [clampStep, currentStep, totalSteps, onStepChange]);
 
   const goToStep = React.useCallback(
     (step: number) => {
diff --git a/next.config.ts b/next.config.ts
index 46bda45..0aee2b5 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -25,17 +25,28 @@ const nextConfig: NextConfig = {
       "@radix-ui/react-tooltip",
     ],
   },
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "*",
-      },
-    ],
-  },
   typescript: {
     ignoreBuildErrors: false,
   },
+  headers() {
+    return Promise.resolve([
+      {
+        source: "/:path*",
+        headers: [
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "X-Frame-Options", value: "SAMEORIGIN" },
+          {
+            key: "Referrer-Policy",
+            value: "strict-origin-when-cross-origin",
+          },
+          {
+            key: "Permissions-Policy",
+            value: "camera=(), microphone=(), geolocation=()",
+          },
+        ],
+      },
+    ]);
+  },
 };
 
 export default nextConfig;
diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx
index 5e55187..568385e 100644
--- a/src/app/docs/[...slug]/page.tsx
+++ b/src/app/docs/[...slug]/page.tsx
@@ -1,64 +1,47 @@
-import { readFileSync, readdirSync, statSync } from "fs";
-import { join } from "path";
+import { readFileSync } from "fs";
+import { notFound } from "next/navigation";
 import { compileMDX } from "next-mdx-remote/rsc";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 
 import { mdxComponents } from "../../../components/docs/MDXComponents";
 import { StorybookLink } from "../../../components/docs/StorybookLink";
+import {
+  DOCS_DIR,
+  collectMdxFiles,
+  resolveWithinDir,
+  toTitleCase,
+} from "../../../lib/docs-nav";
 import { pagefindBodyAttrs, sectionForSlug } from "../../../lib/docs-search";
 import { storybookUrlForSlug } from "../../../lib/storybook";
 
-import { H1, P } from "../../../../lib/components/foundations/typography";
-
-const DOCS_DIR = join(process.cwd(), "docs");
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface PageData {
-  source: string;
-}
-
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-/** Recursively collect every .mdx file path under a directory. */
-function collectMdxFiles(dir: string): string[] {
-  const entries = readdirSync(dir);
-  const files: string[] = [];
-  for (const entry of entries) {
-    const full = join(dir, entry);
-    if (statSync(full).isDirectory()) {
-      files.push(...collectMdxFiles(full));
-    } else if (entry.endsWith(".mdx")) {
-      files.push(full);
-    }
-  }
-  return files;
-}
-
-/** Read and parse an MDX file by its slug segments. */
-function readMdxFile(slug: string[]): {
-  source: string;
-} | null {
-  if (slug.length === 0) return null;
-
-  const filePath = join(DOCS_DIR, `${slug.join("/")}.mdx`);
+function readMdxFile(slug: string[]): { source: string } | null {
+  const filePath = resolveWithinDir(DOCS_DIR, slug, ".mdx");
+  if (!filePath) return null;
 
   try {
-    const raw = readFileSync(filePath, "utf-8");
-    return { source: raw };
+    return { source: readFileSync(filePath, "utf-8") };
   } catch {
     return null;
   }
 }
 
 function slugToTitle(slug: string[]): string {
-  const last = slug[slug.length - 1] ?? "docs";
-  return last.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  return toTitleCase(slug[slug.length - 1] ?? "docs");
 }
 
 // ─── Static Params ────────────────────────────────────────────────────────────
 
+/**
+ * Every doc page is enumerated from the filesystem below, so there is no such
+ * thing as a legitimate slug that isn't already known at build time. Refusing
+ * unknown params makes Next return a real 404 at the routing layer and means
+ * untrusted slug input never reaches `readMdxFile` in the first place.
+ */
+export const dynamicParams = false;
+
 export function generateStaticParams(): { slug: string[] }[] {
   try {
     const files = collectMdxFiles(DOCS_DIR);
@@ -83,11 +66,11 @@ export async function generateMetadata({
   const { slug } = await params;
   const page = readMdxFile(slug);
 
+  // Must bail here too, not just in the page component: if metadata resolves
+  // successfully Next flushes the document head and the status is locked at
+  // 200, so a later notFound() renders the 404 page under a 200 response.
   if (!page) {
-    return {
-      title: "Page Not Found",
-      description: "The requested documentation page was not found.",
-    };
+    notFound();
   }
 
   return {
@@ -105,15 +88,10 @@ export default async function DocsPage({
   const page = readMdxFile(slug);
 
   if (!page) {
-    return (
-      <article className="mx-auto p-10 space-y-8">
-        <H1>Page Not Found</H1>
-        <P>The requested documentation page could not be found.</P>
-      </article>
-    );
+    notFound();
   }
 
-  const { content } = await compileMDX<PageData>({
+  const { content } = await compileMDX({
     source: page.source,
     components: mdxComponents,
     options: {
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 867a367..777a396 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import {
   Alert,
   AlertTitle,
@@ -15,7 +16,11 @@ interface ErrorProps {
   reset: () => void;
 }
 
-export default function Error({ reset }: ErrorProps) {
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error("Unhandled application error", error);
+  }, [error]);
+
   return (
     <div className="relative flex items-center justify-center min-h-[calc(100dvh-4rem)] px-4">
       <div className="absolute top-1/4 left-1/3 bg-error/5 blur-3xl rounded-full w-96 h-96 -z-10" />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 51e6785..4aa9bcd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -30,6 +30,7 @@ import EinfraLogoDark from "../../public/e-INFRA_logo_RGB_bila.svg";
 import type { StaticImageData } from "next/image";
 import Link from "next/link";
 import { ThemeSelector } from "../components/ThemeSelector";
+import { MobileNav, type MobileNavItem } from "../components/MobileNav";
 import { SearchTrigger } from "../components/search/SearchTrigger";
 import { Button } from "../../lib/components/primitives/button";
 import { Package } from "lucide-react";
@@ -52,6 +53,13 @@ export const metadata: Metadata = {
   description: "Design system showcase web for e-INFRA CZ",
 };
 
+/** Primary header links, shared by the desktop nav and the mobile sheet. */
+const NAV_ITEMS: MobileNavItem[] = [
+  { href: "/", label: "Home" },
+  { href: "/docs/foundations", label: "Foundations" },
+  { href: "/docs/components", label: "Components" },
+];
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -76,29 +84,44 @@ export default function RootLayout({
                 var VALID_BRANDING_THEMES = ['default', 'eosc', 'elter'];
                 var VALID_COLOR_MODES = ['light', 'dark'];
 
+                function readStored(key) {
+                  try {
+                    return localStorage.getItem(key);
+                  } catch (e) {
+                    return null;
+                  }
+                }
+                function writeStored(key, value) {
+                  try {
+                    localStorage.setItem(key, value);
+                  } catch (e) {
+                    /* storage unavailable — in-memory for this page only */
+                  }
+                }
+
                 // Resolve branding theme: URL > localStorage > default
                 var branding;
                 if (urlTheme && VALID_BRANDING_THEMES.indexOf(urlTheme) !== -1) {
                   branding = urlTheme;
                 } else {
-                  branding = localStorage.getItem('theme-branding');
+                  branding = readStored('theme-branding');
                   if (!branding || VALID_BRANDING_THEMES.indexOf(branding) === -1) {
                     branding = 'default';
                   }
                 }
-                localStorage.setItem('theme-branding', branding);
+                writeStored('theme-branding', branding);
 
                 // Resolve color mode: URL > localStorage > default
                 var colorMode;
                 if (urlMode && VALID_COLOR_MODES.indexOf(urlMode) !== -1) {
                   colorMode = urlMode;
                 } else {
-                  colorMode = localStorage.getItem('theme-color-mode');
+                  colorMode = readStored('theme-color-mode');
                   if (!colorMode || VALID_COLOR_MODES.indexOf(colorMode) === -1) {
                     colorMode = 'light';
                   }
                 }
-                localStorage.setItem('theme-color-mode', colorMode);
+                writeStored('theme-color-mode', colorMode);
 
                 if (branding === 'eosc') {
                   document.documentElement.setAttribute('data-theme', 'eosc');
@@ -138,54 +161,53 @@ export default function RootLayout({
                   className="hidden h-20 w-auto dark:block"
                 />
               </Link>
-              <NavigationMenu>
+              <NavigationMenu className="hidden lg:flex">
                 <NavigationMenuList>
-                  <NavigationMenuItem>
-                    <NavigationMenuLink href="/">Home</NavigationMenuLink>
-                  </NavigationMenuItem>
-                  <NavigationMenuItem>
-                    <NavigationMenuLink href="/docs/foundations">
-                      Foundations
-                    </NavigationMenuLink>
-                  </NavigationMenuItem>
-                  <NavigationMenuItem>
-                    <NavigationMenuLink href="/docs/components">
-                      Components
-                    </NavigationMenuLink>
-                  </NavigationMenuItem>
+                  {NAV_ITEMS.map((item) => (
+                    <NavigationMenuItem key={item.href}>
+                      <NavigationMenuLink href={item.href}>
+                        {item.label}
+                      </NavigationMenuLink>
+                    </NavigationMenuItem>
+                  ))}
                 </NavigationMenuList>
               </NavigationMenu>
             </HeaderLeft>
             <HeaderRight>
-              <Link
-                href="https://github.com/CERIT-SC/design-system"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button variant="ghost" size="sm" className="gap-2 text-sm">
-                  <svg
-                    className="w-5 h-5"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-                  </svg>
-                  GitHub
-                </Button>
-              </Link>
-              <Link
-                href="https://www.npmjs.com/package/@e-infra/design-system"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button variant="ghost" size="sm" className="gap-2 text-sm">
-                  <Package className="w-5 h-5" />
-                  NPM package
-                </Button>
-              </Link>
-              <SearchTrigger />
-              <ThemeSelector />
+              {/* Below lg the same links, search and theme selector live
+                  inside the MobileNav sheet at the end of this block. */}
+              <div className="hidden items-center gap-2 lg:flex">
+                <Link
+                  href="https://github.com/CERIT-SC/design-system"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button variant="ghost" size="sm" className="gap-2 text-sm">
+                    <svg
+                      className="w-5 h-5"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                    </svg>
+                    GitHub
+                  </Button>
+                </Link>
+                <Link
+                  href="https://www.npmjs.com/package/@e-infra/design-system"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button variant="ghost" size="sm" className="gap-2 text-sm">
+                    <Package className="w-5 h-5" />
+                    NPM package
+                  </Button>
+                </Link>
+                <SearchTrigger />
+                <ThemeSelector />
+              </div>
+              <MobileNav items={NAV_ITEMS} className="lg:hidden" />
             </HeaderRight>
           </HeaderContent>
         </Header>
diff --git a/src/components/docs/CodeBlock.tsx b/src/components/docs/CodeBlock.tsx
index 9c0e065..4930608 100644
--- a/src/components/docs/CodeBlock.tsx
+++ b/src/components/docs/CodeBlock.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
 import { Check, Copy } from "lucide-react";
 import { createLowlight, common } from "lowlight";
+import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard";
 import { cn } from "../../../lib/lib/utils";
 import { Button } from "../../../lib/components/primitives/button";
 
@@ -87,15 +87,10 @@ export function CodeBlock({
   showLineNumbers = true,
   className,
 }: CodeBlockProps) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard(2000);
 
   const handleCopy = () => {
-    void navigator.clipboard.writeText(code).then(() => {
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 2000);
-    });
+    copy(code);
   };
 
   // Highlight — fall back to plain text if language is unregistered
diff --git a/src/components/docs/docs-typography.ts b/src/components/docs/docs-typography.ts
index 6663094..4a4c673 100644
--- a/src/components/docs/docs-typography.ts
+++ b/src/components/docs/docs-typography.ts
@@ -22,5 +22,3 @@ export const docsTypography = {
   tokenCode:
     "text-[11px] font-mono text-text-muted bg-transparent px-0 py-0 rounded-none",
 } as const;
-
-export type DocsTypographyKey = keyof typeof docsTypography;
diff --git a/src/components/docs/foundations/LiveColorsShowcase.tsx b/src/components/docs/foundations/LiveColorsShowcase.tsx
index 62eb107..05a25d9 100644
--- a/src/components/docs/foundations/LiveColorsShowcase.tsx
+++ b/src/components/docs/foundations/LiveColorsShowcase.tsx
@@ -1,13 +1,8 @@
 "use client";
 
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { Check, Copy, CopyCheck } from "lucide-react";
+import { useCopyToClipboard } from "../../../hooks/use-copy-to-clipboard";
 import {
   H2,
   H3,
@@ -118,22 +113,14 @@ function useResolvedColor<T extends HTMLElement = HTMLDivElement>(
 // ─── Copy-to-clipboard hex label ────────────────────────────────────────────
 
 function CopyableHex({ value, color }: { value: string; color: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const copy = () => {
-    if (!value) return;
-    void navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 1500);
-    });
-  };
+  const { copied, copy } = useCopyToClipboard();
 
   return (
     <button
       type="button"
-      onClick={copy}
+      onClick={() => {
+        copy(value);
+      }}
       disabled={!value}
       className="group/hex inline-flex items-center gap-1 font-mono text-sm rounded transition-opacity cursor-pointer disabled:opacity-40"
       title={value ? `Copy ${value}` : "Reading…"}
@@ -403,33 +390,16 @@ function RampSwatch({
   version: number;
 }) {
   const { ref, hex, text } = useResolvedColor<HTMLButtonElement>(version);
-  const [copied, setCopied] = useState(false);
-  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(
-    () => () => {
-      if (resetTimer.current) clearTimeout(resetTimer.current);
-    },
-    []
-  );
-
-  const copy = () => {
-    if (!hex) return;
-    void navigator.clipboard.writeText(hex).then(() => {
-      setCopied(true);
-      if (resetTimer.current) clearTimeout(resetTimer.current);
-      resetTimer.current = setTimeout(() => {
-        setCopied(false);
-      }, 1500);
-    });
-  };
+  const { copied, copy } = useCopyToClipboard();
 
   return (
     <div className="space-y-1">
       <button
         type="button"
         ref={ref}
-        onClick={copy}
+        onClick={() => {
+          copy(hex);
+        }}
         aria-label={
           hex ? `Copy ${cssVar}-${step} (${hex})` : `${cssVar}-${step}`
         }
@@ -569,17 +539,6 @@ function SurfaceStory() {
 export default function LiveColorsShowcase() {
   const version = useThemeVersion();
 
-  const [, forceRead] = useState(0);
-  const scheduleRead = useCallback(() => {
-    forceRead((n) => n + 1);
-  }, []);
-  useEffect(() => {
-    const id = setTimeout(scheduleRead, 50);
-    return () => {
-      clearTimeout(id);
-    };
-  }, [scheduleRead]);
-
   return (
     <div className="space-y-12 py-4">
       <header className="space-y-4">
diff --git a/src/components/docs/foundations/ThemeSwatch.tsx b/src/components/docs/foundations/ThemeSwatch.tsx
index bcd9808..fab3e92 100644
--- a/src/components/docs/foundations/ThemeSwatch.tsx
+++ b/src/components/docs/foundations/ThemeSwatch.tsx
@@ -1,26 +1,19 @@
 "use client";
 
-import { useState } from "react";
 import { Check } from "lucide-react";
+import { useCopyToClipboard } from "../../../hooks/use-copy-to-clipboard";
 import type { BrandColor } from "./theme-colors";
 
 export function ThemeSwatch({ color }: { color: BrandColor }) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard(1200);
   const hex = color.hex.toLowerCase();
 
-  const copy = () => {
-    void navigator.clipboard.writeText(hex).then(() => {
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 1200);
-    });
-  };
-
   return (
     <button
       type="button"
-      onClick={copy}
+      onClick={() => {
+        copy(hex);
+      }}
       title={`${color.name} · ${hex} (click to copy)`}
       aria-label={`${color.name} ${hex}`}
       className="group/swatch relative flex-1 h-16 transition-transform hover:z-10 hover:scale-105 cursor-pointer"
diff --git a/src/components/docs/previews/CookiesBannerPreview.tsx b/src/components/docs/previews/CookiesBannerPreview.tsx
index e218371..46a434e 100644
--- a/src/components/docs/previews/CookiesBannerPreview.tsx
+++ b/src/components/docs/previews/CookiesBannerPreview.tsx
@@ -5,17 +5,12 @@ import { CookiesBanner } from "../../../../lib/components/compounds/cookies-bann
 export function CookiesBannerPreview() {
   return (
     <div className="rounded-lg border border-dashed p-6">
+      {/* Handlers are intentionally no-ops: this is a static docs preview. */}
       <CookiesBanner
         className="static rounded-lg border shadow-none"
-        onReject={() => {
-          console.log("Reject clicked");
-        }}
-        onFunctional={() => {
-          console.log("Only Functional clicked");
-        }}
-        onAccept={() => {
-          console.log("Accept All clicked");
-        }}
+        onReject={() => undefined}
+        onFunctional={() => undefined}
+        onAccept={() => undefined}
       />
     </div>
   );
diff --git a/src/components/landing/AnimatedBackground.tsx b/src/components/landing/AnimatedBackground.tsx
index 2006a46..9bd00b2 100644
--- a/src/components/landing/AnimatedBackground.tsx
+++ b/src/components/landing/AnimatedBackground.tsx
@@ -173,7 +173,7 @@ export function AnimatedBackground() {
       canvas.height = height * dpr;
       canvas.style.width = `${String(width)}px`;
       canvas.style.height = `${String(height)}px`;
-      ctx.scale(dpr, dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     }
 
     function drawDotGrid() {
@@ -204,14 +204,17 @@ export function AnimatedBackground() {
         if (paths[i].points.length === 0) paths.splice(i, 1);
       }
 
-      requestAnimationFrame(animate);
+      rafId = requestAnimationFrame(animate);
     }
 
+    let rafId = 0;
+
     window.addEventListener("resize", resizeCanvas);
     resizeCanvas();
     animate();
 
     return () => {
+      cancelAnimationFrame(rafId);
       window.removeEventListener("resize", resizeCanvas);
     };
   }, []);
diff --git a/src/hooks/use-copy-to-clipboard.ts b/src/hooks/use-copy-to-clipboard.ts
new file mode 100644
index 0000000..1163221
--- /dev/null
+++ b/src/hooks/use-copy-to-clipboard.ts
@@ -0,0 +1,48 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseCopyToClipboardResult {
+  /** True for `resetDelay` ms after a successful copy. */
+  copied: boolean;
+  /** Writes `value` to the clipboard; no-op for an empty string. */
+  copy: (value: string) => void;
+}
+
+/**
+ * Copy text to the clipboard and flag it as copied for a short window.
+ *
+ * The reset timer is cleared on unmount and before each new copy, so a click
+ * followed by a quick unmount cannot set state on an unmounted component.
+ */
+export function useCopyToClipboard(
+  resetDelay = 1500
+): UseCopyToClipboardResult {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  const copy = useCallback(
+    (value: string) => {
+      if (!value) return;
+
+      void navigator.clipboard.writeText(value).then(() => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+        setCopied(true);
+        timeoutRef.current = setTimeout(() => {
+          setCopied(false);
+          timeoutRef.current = null;
+        }, resetDelay);
+      });
+    },
+    [resetDelay]
+  );
+
+  return { copied, copy };
+}
diff --git a/src/hooks/use-theme-switcher.ts b/src/hooks/use-theme-switcher.ts
index 189c2c9..89fedc0 100644
--- a/src/hooks/use-theme-switcher.ts
+++ b/src/hooks/use-theme-switcher.ts
@@ -10,19 +10,36 @@ export type BrandingTheme = (typeof VALID_BRANDING_THEMES)[number];
 export type ColorMode = (typeof VALID_COLOR_MODES)[number];
 
 const isBrandingTheme = (value: string | null): value is BrandingTheme =>
-  VALID_BRANDING_THEMES.includes(value as BrandingTheme);
+  value !== null &&
+  (VALID_BRANDING_THEMES as readonly string[]).includes(value);
 const isColorMode = (value: string | null): value is ColorMode =>
-  VALID_COLOR_MODES.includes(value as ColorMode);
+  value !== null && (VALID_COLOR_MODES as readonly string[]).includes(value);
+
+function readStored(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function writeStored(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // Storage unavailable — the theme still applies for this page.
+  }
+}
 
 function getInitialBrandingTheme(): BrandingTheme {
   if (typeof window === "undefined") return "default";
-  const saved = localStorage.getItem("theme-branding");
+  const saved = readStored("theme-branding");
   return isBrandingTheme(saved) ? saved : "default";
 }
 
 function getInitialColorMode(): ColorMode {
   if (typeof window === "undefined") return "light";
-  const saved = localStorage.getItem("theme-color-mode");
+  const saved = readStored("theme-color-mode");
   return isColorMode(saved) ? saved : "light";
 }
 
@@ -78,13 +95,13 @@ export function useThemeSwitcher() {
     /* eslint-disable react-hooks/set-state-in-effect */
     if (isBrandingTheme(urlTheme)) {
       setBrandingTheme(urlTheme);
-      localStorage.setItem("theme-branding", urlTheme);
+      writeStored("theme-branding", urlTheme);
       applyTheme(urlTheme, colorMode);
     }
 
     if (isColorMode(urlMode)) {
       setColorMode(urlMode);
-      localStorage.setItem("theme-color-mode", urlMode);
+      writeStored("theme-color-mode", urlMode);
       applyTheme(brandingTheme, urlMode);
     }
     /* eslint-enable react-hooks/set-state-in-effect */
@@ -113,8 +130,8 @@ export function useThemeSwitcher() {
     (mode: ColorMode = "light") => {
       setBrandingTheme("eosc");
       setColorMode(mode);
-      localStorage.setItem("theme-branding", "eosc");
-      localStorage.setItem("theme-color-mode", mode);
+      writeStored("theme-branding", "eosc");
+      writeStored("theme-color-mode", mode);
       applyTheme("eosc", mode);
       updateUrlParams("eosc", mode);
     },
@@ -125,8 +142,8 @@ export function useThemeSwitcher() {
     (mode: ColorMode = "light") => {
       setBrandingTheme("elter");
       setColorMode(mode);
-      localStorage.setItem("theme-branding", "elter");
-      localStorage.setItem("theme-color-mode", mode);
+      writeStored("theme-branding", "elter");
+      writeStored("theme-color-mode", mode);
       applyTheme("elter", mode);
       updateUrlParams("elter", mode);
     },
@@ -137,8 +154,8 @@ export function useThemeSwitcher() {
     (mode: ColorMode = "light") => {
       setBrandingTheme("default");
       setColorMode(mode);
-      localStorage.setItem("theme-branding", "default");
-      localStorage.setItem("theme-color-mode", mode);
+      writeStored("theme-branding", "default");
+      writeStored("theme-color-mode", mode);
       applyTheme("default", mode);
       updateUrlParams("default", mode);
     },
diff --git a/src/lib/component-registry.ts b/src/lib/component-registry.ts
index d789605..2496a43 100644
--- a/src/lib/component-registry.ts
+++ b/src/lib/component-registry.ts
@@ -289,7 +289,7 @@ import {
 // Plain object — safe to iterate with Object.keys / Object.entries in any
 // bundler (Turbopack, webpack, etc.)
 // ─────────────────────────────────────────────────────────────────────────────
-// eslint-disable-next-line --- IGNORE ---
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const componentRegistry: Record<string, React.ComponentType<any>> = {
   // Accordion
   Accordion,
diff --git a/src/lib/docs-nav.ts b/src/lib/docs-nav.ts
index b21fe37..526b343 100644
--- a/src/lib/docs-nav.ts
+++ b/src/lib/docs-nav.ts
@@ -1,5 +1,5 @@
 import { readdirSync, statSync } from "fs";
-import { join } from "path";
+import { join, resolve, sep } from "path";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -20,7 +20,7 @@ export interface NavSection {
 
 // ─── Config ───────────────────────────────────────────────────────────────────
 
-const DOCS_DIR = join(process.cwd(), "docs");
+export const DOCS_DIR = resolve(join(process.cwd(), "docs"));
 
 /**
  * Preferred section display order. Any section not listed here is appended
@@ -50,11 +50,40 @@ const STATIC_PAGES: (NavItem & { section: string })[] = [
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function toTitleCase(str: string): string {
+/** Turn a slug or filename into a display title: "getting-started" → "Getting Started". */
+export function toTitleCase(str: string): string {
   return str.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
-function collectMdxFiles(dir: string): string[] {
+export function resolveWithinDir(
+  baseDir: string,
+  slug: string[],
+  extension: string
+): string | null {
+  if (slug.length === 0) return null;
+
+  for (const segment of slug) {
+    if (
+      segment.length === 0 ||
+      segment === "." ||
+      segment === ".." ||
+      segment.includes("/") ||
+      segment.includes("\\") ||
+      segment.includes("\0")
+    ) {
+      return null;
+    }
+  }
+
+  const candidate = resolve(join(baseDir, `${slug.join("/")}${extension}`));
+  if (candidate !== baseDir && !candidate.startsWith(baseDir + sep)) {
+    return null;
+  }
+
+  return candidate;
+}
+
+export function collectMdxFiles(dir: string): string[] {
   let entries: string[];
   try {
     entries = readdirSync(dir);
@@ -116,12 +145,13 @@ export function buildDocsNavStructure(): NavSection[] {
 
     const title = toTitleCase(filename);
 
-    if (!sectionsMap.has(resolvedSection)) {
-      sectionsMap.set(resolvedSection, []);
+    let sectionItems = sectionsMap.get(resolvedSection);
+    if (!sectionItems) {
+      sectionItems = [];
+      sectionsMap.set(resolvedSection, sectionItems);
     }
 
-    // eslint-disable-next-line --- IGNORE ---
-    sectionsMap.get(resolvedSection)!.push({
+    sectionItems.push({
       title,
       slug: filename,
       path: `/docs/${relative}`,
diff --git a/src/lib/storybook.ts b/src/lib/storybook.ts
index 0864612..20ca6df 100644
--- a/src/lib/storybook.ts
+++ b/src/lib/storybook.ts
@@ -1,8 +1,10 @@
 import { readFileSync } from "fs";
-import { join } from "path";
+import { join, resolve } from "path";
+
+import { resolveWithinDir } from "./docs-nav";
 
 const STORYBOOK_BASE_PATH = "/storybook";
-const COMPONENTS_DIR = join(process.cwd(), "lib", "components");
+const COMPONENTS_DIR = resolve(join(process.cwd(), "lib", "components"));
 
 const TITLE_RE = /title:\s*["'`]([^"'`]+)["'`]/;
 
@@ -13,27 +15,27 @@ function sanitize(title: string): string {
     .replace(/^-+|-+$/g, "");
 }
 
-function storiesPathForSlug(slug: string[]): string | null {
+function storiesPathForSlug(slug: string[]): string[] | null {
   if (slug[0] === "components" && slug.length === 3) {
-    return join(slug[1], slug[2]);
+    return [slug[1], slug[2]];
   }
 
   if (slug[0] === "foundations" && slug.length === 2) {
-    return join("foundations", slug[1]);
+    return ["foundations", slug[1]];
   }
   return null;
 }
 
 export function storybookUrlForSlug(slug: string[]): string | null {
-  const relative = storiesPathForSlug(slug);
-  if (!relative) return null;
+  const segments = storiesPathForSlug(slug);
+  if (!segments) return null;
+
+  const filePath = resolveWithinDir(COMPONENTS_DIR, segments, ".stories.tsx");
+  if (!filePath) return null;
 
   let source: string;
   try {
-    source = readFileSync(
-      join(COMPONENTS_DIR, `${relative}.stories.tsx`),
-      "utf-8"
-    );
+    source = readFileSync(filePath, "utf-8");
   } catch {
     return null;
   }
diff --git a/tsconfig.stories.json b/tsconfig.stories.json
new file mode 100644
index 0000000..5342d6e
--- /dev/null
+++ b/tsconfig.stories.json
@@ -0,0 +1,16 @@
+{
+  // Stories are excluded from tsconfig.lib.json so they stay out of the
+  // published build and its .d.ts output. They are still the Storybook build
+  // input and the only executable check in the repo, so they get type-checked
+  // here instead of going entirely unverified.
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.stories.tsbuildinfo",
+    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
+    "declarationDir": null
+  },
+  "include": ["lib/**/*.stories.ts", "lib/**/*.stories.tsx", ".storybook"],
+  "exclude": []
+}
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index 57f33d3..49624e0 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -9,7 +9,7 @@ import autoprefixer from "autoprefixer";
 
 // https://vite.dev/config/
 export default defineConfig({
-  base: process.env.NODE_ENV === "production" ? "/ics-design-system/" : "/",
+  base: "/",
   plugins: [
     react(),
     tailwindcss(),
@@ -62,18 +62,13 @@ export default defineConfig({
         "clsx",
         "tailwind-merge",
         "lucide-react",
-        "@hookform/resolvers",
         "react-hook-form",
-        "zod",
         "cmdk",
-        "date-fns",
         "react-day-picker",
         "embla-carousel-react",
-        "input-otp",
         "react-resizable-panels",
         "recharts",
         "sonner",
-        "vaul",
       ],
       output: {
         // Rollup globals - Needed only for UMD builds

From 269b74a0bfadd903d39e3ceda10b52714ab0867c Mon Sep 17 00:00:00 2001
From: romanaduraciova <duraciovar@gmail.com>
Date: Fri, 7 Aug 2026 16:51:14 +0200
Subject: [PATCH 10/11] feat: add dev deployment script

---
 scripts/deploy-showcase-dev.sh | 81 ++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100755 scripts/deploy-showcase-dev.sh

diff --git a/scripts/deploy-showcase-dev.sh b/scripts/deploy-showcase-dev.sh
new file mode 100755
index 0000000..b06d934
--- /dev/null
+++ b/scripts/deploy-showcase-dev.sh
@@ -0,0 +1,81 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+cd "$(dirname "${BASH_SOURCE[0]}")/.."
+
+REGISTRY="${DOCKER_REGISTRY:-cerit.io}"
+IMAGE="${REGISTRY}/design-system/app:dev"
+NAMESPACE="${KUBE_NAMESPACE:-einfra-design-system-ns}"
+DEPLOYMENT_NAME="dev-app"
+DOCKERFILE="deployment/containers/prod/Dockerfile.app.bun"
+MANIFEST="deployment/manifests/dev-app-deployment.yaml"
+VERSION="$(git rev-parse --short HEAD)"
+ASSUME_YES=0
+
+usage() {
+  cat <<EOF
+Usage: $(basename "$0") [-y]
+
+Builds the showcase app (amd64) from ${DOCKERFILE}, pushes it to
+${IMAGE}, then applies ${MANIFEST} to namespace "${NAMESPACE}"
+and restarts the rollout so the new image is picked up.
+
+  -y    Skip the confirmation prompt (non-interactive use)
+EOF
+}
+
+while getopts "yh" opt; do
+  case "$opt" in
+    y) ASSUME_YES=1 ;;
+    h) usage; exit 0 ;;
+    *) usage; exit 1 ;;
+  esac
+done
+
+for cmd in docker kubectl; do
+  if ! command -v "$cmd" >/dev/null 2>&1; then
+    echo "Error: '$cmd' is required but not found on PATH." >&2
+    exit 1
+  fi
+done
+
+if ! docker buildx version >/dev/null 2>&1; then
+  echo "Error: docker buildx is required (used to build for linux/amd64)." >&2
+  exit 1
+fi
+
+CURRENT_CONTEXT="$(kubectl config current-context 2>/dev/null || echo "<none>")"
+
+echo "About to deploy the showcase dev instance:"
+echo "  Image:      ${IMAGE}"
+echo "  Build arg:  NEXT_PUBLIC_TAG=${VERSION}"
+echo "  Namespace:  ${NAMESPACE}"
+echo "  kubectl ctx: ${CURRENT_CONTEXT}"
+echo
+
+if [ "$ASSUME_YES" -ne 1 ]; then
+  read -r -p "Proceed? [y/N] " reply
+  case "$reply" in
+    [yY][eE][sS]|[yY]) ;;
+    *) echo "Aborted."; exit 1 ;;
+  esac
+fi
+
+echo "==> Building and pushing ${IMAGE} (linux/amd64)"
+docker buildx build \
+  --platform linux/amd64 \
+  -f "$DOCKERFILE" \
+  --build-arg "NEXT_PUBLIC_TAG=${VERSION}" \
+  -t "$IMAGE" \
+  --push \
+  .
+
+echo "==> Applying ${MANIFEST}"
+kubectl apply -f "$MANIFEST" --namespace="$NAMESPACE"
+
+echo "==> Restarting rollout so the dev tag is re-pulled"
+kubectl rollout restart "deployment/${DEPLOYMENT_NAME}" --namespace="$NAMESPACE"
+kubectl rollout status "deployment/${DEPLOYMENT_NAME}" --namespace="$NAMESPACE" --timeout=180s
+
+echo "==> Done. Dev instance updated in namespace ${NAMESPACE}."

From e29cecb0a5575fe3d005d93b300cf7224808a96d Mon Sep 17 00:00:00 2001
From: romanaduraciova <duraciovar@gmail.com>
Date: Fri, 7 Aug 2026 16:54:39 +0200
Subject: [PATCH 11/11] feat: bump the lib version, update changelog

---
 CHANGELOG.md | 9 +++++++++
 package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ded6a22..6f5c3a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## v0.1.9
+
+- Exported previously missing primitives (chart, command, context-menu, pagination, popover, resizable) from the component library
+- Removed the deprecated Panel component
+- Added animation utilities and an `elter_setup.css` export for the eLTER theme
+- Refined the EOSC color palette
+- Fixed feedback form auto-close/progress timing bug
+- Fixed minor styling issues in Button, Alert, Avatar, Checkbox, Switch, Sidebar and Content components
+
 ## v0.1.8
 
 - Added new color palette for eLTER design system
diff --git a/package.json b/package.json
index a7c97d7..4be7649 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@e-infra/design-system",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "keywords": [
     "react",
     "design system",