@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

package/dist/ui.mjs

@@ -108,7 +108,7 @@ import {
   ToggleButton,
   ToggleGroup,
   Widget
-} from "./chunk-RZXHZWUB.mjs";
+} from "./chunk-SBBKXV35.mjs";
 import {
   ButtonChrome,
   DropdownButton,
@@ -120,7 +120,7 @@ import {
   IconByName,
   Tooltip,
   TooltipProvider
-} from "./chunk-G53YLHVE.mjs";
+} from "./chunk-E5ZBQYEX.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",
@@ -57,9 +57,9 @@
   },
   "files": [
     "dist",
+    "scripts",
     "src/app/globals.css",
     "src/components/ui",
-    "src/components/charts",
     "src/components/icons",
     "src/suite",
     "src/styles/themes.css",
@@ -87,14 +87,10 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "next": ">=16.2.7",
     "tailwindcss": "^3.4.0",
-    "d3-scale": "^4.0.2",
     "iconoir-react": ">=7.11.1",
     "motion": ">=12"
   },
   "peerDependenciesMeta": {
-    "d3-scale": {
-      "optional": true
-    },
     "iconoir-react": {
       "optional": true
     },

package/scripts/install-theme-dev.sh

@@ -0,0 +1,60 @@
+#!/bin/sh
+# Dev-only: copy this package tree into an app's node_modules so Next.js
+# Turbopack resolves CSS/exports from real files (not a broken file: link).
+#
+# Host must have built dist first: `bun run build:lib` in this repo.
+# Safe to skip when THEME_DIR is missing (production images).
+#
+# Usage (from an app directory, Docker or local):
+#   THEME_DIR=/the-old-ui TARGET=/app/node_modules/@xenide-io/the-old-ui-theme \
+#     sh /the-old-ui/scripts/install-theme-dev.sh
+# Or via each app's thin wrapper under scripts/install-theme-dev.sh.
+
+set -e
+
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname "$0")" && pwd)
+THEME_DIR=${THEME_DIR:-$(CDPATH= cd -- "$SCRIPT_DIR/.." && pwd)}
+
+if [ -z "${TARGET:-}" ]; then
+  if [ -d /app/node_modules ]; then
+    TARGET=/app/node_modules/@xenide-io/the-old-ui-theme
+  elif [ -d ./node_modules ]; then
+    TARGET=$(pwd)/node_modules/@xenide-io/the-old-ui-theme
+  else
+    echo "install-theme-dev: set TARGET=.../node_modules/@xenide-io/the-old-ui-theme" >&2
+    exit 1
+  fi
+fi
+
+if [ ! -d "$THEME_DIR" ]; then
+  echo "install-theme-dev: $THEME_DIR not found, skipping"
+  exit 0
+fi
+
+if [ ! -d "$THEME_DIR/dist" ]; then
+  echo "install-theme-dev: $THEME_DIR/dist is missing."
+  echo "Run: cd \"$THEME_DIR\" && bun run build:lib"
+  exit 1
+fi
+
+echo "install-theme-dev: copying $THEME_DIR -> $TARGET"
+
+rm -rf "$TARGET"
+mkdir -p "$TARGET"
+
+# tar preserves structure and is faster than cp for many small files.
+tar -C "$THEME_DIR" -cf - \
+  --exclude='.git' \
+  --exclude='.next' \
+  --exclude='node_modules' \
+  --exclude='test-results' \
+  --exclude='playwright-report' \
+  --exclude='coverage' \
+  --exclude='out' \
+  --exclude='*.log' \
+  --exclude='.DS_Store' \
+  --exclude='.turbo' \
+  --exclude='*.tsbuildinfo' \
+  . | tar -C "$TARGET" -xf -
+
+echo "install-theme-dev: done"

package/scripts/sync-posthog-icons.mjs

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/**
+ * Compare local Lemon glyphs with PostHog open-source icons.tsx.
+ * Usage: node scripts/sync-posthog-icons.mjs
+ *
+ * Downloads: frontend/src/lib/lemon-ui/icons/icons.tsx
+ * Reports path mismatches — Material-only icons (bell, volume, …) are expected.
+ */
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const POSTHOG_URL =
+  "https://raw.githubusercontent.com/PostHog/posthog/master/frontend/src/lib/lemon-ui/icons/icons.tsx";
+const LOCAL = resolve("src/components/icons/icons.tsx");
+const CACHE = resolve("scripts/.posthog-icons.tsx");
+
+function extractPhBlock(source, name) {
+  const start = source.indexOf(`export function ${name}(`);
+  if (start < 0) return null;
+  const next = source.indexOf("\nexport function Icon", start + 10);
+  return source.slice(start, next > 0 ? next : start + 4000);
+}
+
+function extractOurBlock(source, name) {
+  const start = source.indexOf(`export const ${name} =`);
+  if (start < 0) return null;
+  const next = source.indexOf("\nexport const Icon", start + 10);
+  const nextFn = source.indexOf("\nexport function Icon", start + 10);
+  const end = [next, nextFn].filter((x) => x > 0).sort((a, b) => a - b)[0] || start + 4000;
+  return source.slice(start, end);
+}
+
+function normPaths(block) {
+  if (!block) return "";
+  const fills = [...block.matchAll(/fill\(\s*\n?\s*"([^"]+)"/g)].map((m) => m[1]);
+  const ds = [...block.matchAll(/<path d="([^"]+)"/g)].map((m) => m[1]);
+  const attrs = [...block.matchAll(/\sd="([^"]+)"/g)].map((m) => m[1]);
+  return [...fills, ...ds, ...attrs].join("|").replace(/\s/g, "");
+}
+
+async function main() {
+  const response = await fetch(POSTHOG_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch PostHog icons: ${response.status}`);
+  }
+  const ph = await response.text();
+  writeFileSync(CACHE, ph);
+
+  const local = readFileSync(LOCAL, "utf8");
+  const phNames = new Set([...ph.matchAll(/export function (Icon\w+)/g)].map((m) => m[1]));
+  const ourNames = [...local.matchAll(/export const (Icon\w+)/g)]
+    .map((m) => m[1])
+    .filter((n) => n !== "IconSpinner");
+
+  const shared = ourNames.filter((n) => phNames.has(n));
+  const materialOnly = ourNames.filter((n) => !phNames.has(n));
+  const mismatches = shared.filter(
+    (n) => normPaths(extractPhBlock(ph, n)) !== normPaths(extractOurBlock(local, n)),
+  );
+
+  console.log(`Compared ${shared.length} shared icons with PostHog master.`);
+  if (mismatches.length) {
+    console.log("\nPath mismatches (update src/components/icons/icons.tsx):");
+    mismatches.forEach((n) => console.log(`  - ${n}`));
+  } else {
+    console.log("All shared PostHog icons match.");
+  }
+  console.log(`\nMaterial-only icons (${materialOnly.length}): ${materialOnly.join(", ")}`);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});

package/src/app/globals.css

@@ -1,5 +1,6 @@
 @import "../styles/themes.css";
 @import "../styles/typography.css";
+@import "../styles/suite-skin.css";
 
 @tailwind base;
 @tailwind components;

package/src/components/ui/Chip.tsx

@@ -14,31 +14,49 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip({
   className,
   ...props
 }, ref) {
+  const chipClassName = cn(
+    "ph-chip",
+    selected && "ph-chip--selected",
+    className
+  );
+
+  if (onRemove) {
+    const removeLabel =
+      typeof children === "string" ? `Remove ${children}` : "Remove";
+
+    return (
+      <span className={chipClassName}>
+        <button
+          ref={ref}
+          type="button"
+          className="min-w-0 bg-transparent p-0 text-inherit"
+          {...props}
+        >
+          <span className="ph-chip__text">{children}</span>
+        </button>
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={props.disabled}
+          className="ph-chip__remove"
+          aria-label={removeLabel}
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+            <path d="M2 2l6 6M8 2l-6 6" />
+          </svg>
+        </button>
+      </span>
+    );
+  }
+
   return (
     <button
       ref={ref}
       type="button"
-      className={cn(
-        "ph-chip",
-        selected && "ph-chip--selected",
-        className
-      )}
+      className={chipClassName}
       {...props}
     >
       <span className="ph-chip__text">{children}</span>
-      {onRemove && (
-        <span
-          role="button"
-          tabIndex={-1}
-          onClick={(e) => { e.stopPropagation(); onRemove(); }}
-          className="ph-chip__remove"
-          aria-label="Remove"
-        >
-          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M2 2l6 6M8 2l-6 6" />
-          </svg>
-        </span>
-      )}
     </button>
   );
 });

package/src/components/ui/CommandPalette.test.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { CommandPalette } from "@/components/ui/CommandPalette";
+
+describe("command palette", () => {
+  it("behaves as a modal dialog and restores focus when dismissed", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open commands
+          </button>
+          <CommandPalette
+            isOpen={open}
+            onClose={() => setOpen(false)}
+            items={[
+              { id: "reports", label: "Open reports", onSelect },
+            ]}
+          />
+        </>
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Open commands" });
+    await user.click(trigger);
+
+    expect(screen.getByRole("dialog", { name: "Command palette" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Search commands" })).toHaveFocus();
+
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/components/ui/CommandPalette.tsx

@@ -18,6 +18,10 @@ interface CommandPaletteProps {
   onClose: () => void;
   placeholder?: string;
   className?: string;
+  id?: string;
+  dataTest?: string;
+  inputId?: string;
+  inputDataTest?: string;
 }
 
 export function CommandPalette({
@@ -26,21 +30,32 @@ export function CommandPalette({
   onClose,
   placeholder = "Type a command or search...",
   className,
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
 }: CommandPaletteProps) {
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
 
   const filtered = items.filter((item) =>
-    item.label.toLowerCase().includes(query.toLowerCase())
+    item.label.toLowerCase().includes(query.toLowerCase()),
   );
 
   useEffect(() => {
-    if (isOpen) {
-      setQuery("");
-      setSelectedIndex(0);
-      inputRef.current?.focus();
-    }
+    if (!isOpen) return;
+    previousFocusRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    setQuery("");
+    setSelectedIndex(0);
+    inputRef.current?.focus();
+
+    return () => previousFocusRef.current?.focus();
   }, [isOpen]);
 
   useEffect(() => {
@@ -49,10 +64,12 @@ export function CommandPalette({
 
       switch (e.key) {
         case "ArrowDown":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i + 1) % filtered.length);
           break;
         case "ArrowUp":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
           break;
@@ -64,6 +81,22 @@ export function CommandPalette({
         case "Escape":
           onClose();
           break;
+        case "Tab": {
+          const focusable = panelRef.current?.querySelectorAll<HTMLElement>(
+            'input, button, [href], [tabindex]:not([tabindex="-1"])',
+          );
+          if (!focusable?.length) break;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+          break;
+        }
       }
     };
 
@@ -74,18 +107,32 @@ export function CommandPalette({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm">
+    <div
+      id={id}
+      data-test={dataTest}
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
       <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
         className={cn(
           "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-          className
+          className,
         )}
       >
         <div className="flex items-center gap-3 border-b border-ph-border px-4 py-3">
           <IconSearch className="h-5 w-5 text-ph-mutedtext" />
           <input
             ref={inputRef}
+            id={inputId}
+            data-test={inputDataTest}
             type="text"
+            aria-label="Search commands"
             value={query}
             onChange={(e) => {
               setQuery(e.target.value);
@@ -108,6 +155,8 @@ export function CommandPalette({
               <button
                 key={item.id}
                 type="button"
+                id={`command-${item.id}`}
+                data-test={`command-${item.id}`}
                 onClick={() => {
                   item.onSelect();
                   onClose();
@@ -117,7 +166,7 @@ export function CommandPalette({
                   "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
                   index === selectedIndex
                     ? "bg-ph-muted text-ph-ink"
-                    : "text-ph-subtle"
+                    : "text-ph-subtle",
                 )}
               >
                 {item.icon && <span className="h-5 w-5">{item.icon}</span>}

package/src/components/ui/DropdownMenu.tsx

@@ -35,11 +35,14 @@ interface DropdownOpenProps {
 }
 
 export interface DropdownMenuProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "children">,
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "children">,
     DropdownPlacementProps,
     DropdownOpenProps {
   /** Custom non-interactive trigger node, such as an avatar or icon chip. */
   trigger: ReactNode;
+  triggerId?: string;
+  triggerDataTest?: string;
   /** Accessible name when the trigger has no visible text. */
   "aria-label": string;
   children: ReactNode;
@@ -47,7 +50,8 @@ export interface DropdownMenuProps
 }
 
 export interface DropdownButtonProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "children">,
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "children">,
     DropdownPlacementProps,
     DropdownOpenProps {
   /** Visible button label. */
@@ -67,8 +71,12 @@ export interface DropdownButtonProps
 }
 
 export type DropdownItemProps = ButtonHTMLAttributes<HTMLButtonElement>;
-export type DropdownRadioGroupProps = ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioGroup>;
-export type DropdownRadioItemProps = ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioItem>;
+export type DropdownRadioGroupProps = ComponentPropsWithoutRef<
+  typeof DropdownPrimitive.RadioGroup
+>;
+export type DropdownRadioItemProps = ComponentPropsWithoutRef<
+  typeof DropdownPrimitive.RadioItem
+>;
 
 const sizeClass: Record<ButtonSize, string> = {
   xs: "ph-btn-xs",
@@ -106,7 +114,11 @@ function DropdownContent({
         sticky="partial"
       >
         {children}
-        <DropdownPrimitive.Arrow className="ph-dropdown-arrow" width={12} height={6} />
+        <DropdownPrimitive.Arrow
+          className="ph-dropdown-arrow"
+          width={12}
+          height={6}
+        />
       </DropdownPrimitive.Content>
     </DropdownPrimitive.Portal>
   );
@@ -115,6 +127,8 @@ function DropdownContent({
 /** Collision-aware menu that flips sides and shifts its alignment to remain visible. */
 export function DropdownMenu({
   trigger,
+  triggerId,
+  triggerDataTest,
   children,
   align,
   side,
@@ -141,7 +155,13 @@ export function DropdownMenu({
         modal={modal}
       >
         <DropdownPrimitive.Trigger asChild disabled={disabled}>
-          <button type="button" className="ph-dropdown-trigger" aria-label={ariaLabel}>
+          <button
+            type="button"
+            id={triggerId}
+            data-test={triggerDataTest}
+            className="ph-dropdown-trigger"
+            aria-label={ariaLabel}
+          >
             {trigger}
           </button>
         </DropdownPrimitive.Trigger>
@@ -187,7 +207,9 @@ export function DropdownButton({
   disabled,
   ...props
 }: DropdownButtonProps) {
-  const trailing = sideIcon ?? <IconChevronDown className="h-4 w-4" aria-hidden />;
+  const trailing = sideIcon ?? (
+    <IconChevronDown className="h-4 w-4" aria-hidden />
+  );
 
   return (
     <div className={cn("ph-dropdown", className)} {...props}>
@@ -210,7 +232,12 @@ export function DropdownButton({
             )}
             aria-label={ariaLabel}
           >
-            <ButtonChrome label={label} icon={icon} sideIcon={trailing} split={split} />
+            <ButtonChrome
+              label={label}
+              icon={icon}
+              sideIcon={trailing}
+              split={split}
+            />
           </button>
         </DropdownPrimitive.Trigger>
         <DropdownContent
@@ -229,7 +256,12 @@ export function DropdownButton({
   );
 }
 
-export function DropdownItem({ className, children, disabled, ...props }: DropdownItemProps) {
+export function DropdownItem({
+  className,
+  children,
+  disabled,
+  ...props
+}: DropdownItemProps) {
   return (
     <DropdownPrimitive.Item asChild disabled={disabled}>
       <button
@@ -248,9 +280,16 @@ export function DropdownRadioGroup(props: DropdownRadioGroupProps) {
   return <DropdownPrimitive.RadioGroup {...props} />;
 }
 
-export function DropdownRadioItem({ className, children, ...props }: DropdownRadioItemProps) {
+export function DropdownRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownRadioItemProps) {
   return (
-    <DropdownPrimitive.RadioItem className={cn("ph-dropdown-item ph-dropdown-radio-item", className)} {...props}>
+    <DropdownPrimitive.RadioItem
+      className={cn("ph-dropdown-item ph-dropdown-radio-item", className)}
+      {...props}
+    >
       <span className="ph-dropdown-item-indicator" aria-hidden>
         <DropdownPrimitive.ItemIndicator>
           <IconCheck className="h-3.5 w-3.5" />

package/src/components/ui/SegmentedControl.tsx

@@ -27,9 +27,10 @@ export function SegmentedControl({ options, value, onChange, className }: Segmen
         <button
           key={option.value}
           type="button"
+          aria-pressed={value === option.value}
           onClick={() => onChange(option.value)}
           className={cn(
-            "relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
+            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
             value === option.value
               ? "bg-ph-surface text-ph-ink shadow-ph"
               : "text-ph-subtle hover:text-ph-ink"

package/src/components/ui/SettingsLayout.tsx

@@ -20,7 +20,10 @@ export interface SettingsNavProps extends ComponentPropsWithoutRef<"div"> {
   groups: readonly SettingsNavGroup[];
 }
 
-export interface SettingsLayoutProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+export interface SettingsLayoutProps extends Omit<
+  ComponentPropsWithoutRef<"section">,
+  "title"
+> {
   title: ReactNode;
   description?: ReactNode;
   actions?: ReactNode;
@@ -40,12 +43,21 @@ export function SettingsNav({ groups, className, ...props }: SettingsNavProps) {
               <a
                 key={item.id}
                 href={item.href}
-                className={cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active")}
+                id={`settings-nav-${item.id}`}
+                data-test={`settings-nav-${item.id}`}
+                className={cn(
+                  "ph-settings-nav__item",
+                  item.active && "ph-settings-nav__item--active",
+                )}
                 aria-current={item.active ? "page" : undefined}
               >
-                {item.icon ? <span className="ph-settings-nav__icon">{item.icon}</span> : null}
+                {item.icon ? (
+                  <span className="ph-settings-nav__icon">{item.icon}</span>
+                ) : null}
                 <span>{item.label}</span>
-                {item.badge ? <span className="ph-settings-nav__badge">{item.badge}</span> : null}
+                {item.badge ? (
+                  <span className="ph-settings-nav__badge">{item.badge}</span>
+                ) : null}
               </a>
             ))}
           </div>
@@ -72,7 +84,9 @@ export function SettingsLayout({
           <h2>{title}</h2>
           {description ? <p>{description}</p> : null}
         </div>
-        {actions ? <div className="ph-settings-layout__actions">{actions}</div> : null}
+        {actions ? (
+          <div className="ph-settings-layout__actions">{actions}</div>
+        ) : null}
       </header>
 
       <details className="ph-settings-layout__mobile-nav">

package/src/components/ui/ThemeSwitcher.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { persistTheme, readStoredTheme, THEME_GROUPS, THEMES, type ThemeId } from "@/themes";
+import {
+  DEFAULT_THEME_ID,
+  persistTheme,
+  readStoredTheme,
+  THEME_GROUPS,
+  THEMES,
+  type ThemeId,
+} from "@/themes";
 import { cn } from "@/lib/cn";
 
 export interface ThemeSwitcherProps {
@@ -10,7 +17,7 @@ export interface ThemeSwitcherProps {
 
 /** Colour-only theme picker — persists to localStorage and sets html[data-theme]. */
 export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
-  const [themeId, setThemeId] = useState<ThemeId>("hedgehog-light");
+  const [themeId, setThemeId] = useState<ThemeId>(DEFAULT_THEME_ID);
 
   useEffect(() => {
     const id = readStoredTheme() as ThemeId;
@@ -20,7 +27,9 @@ export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
 
   return (
     <label className={cn("flex min-w-0 items-center gap-2", className)}>
-      <span className="shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm">Theme</span>
+      <span className="shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm">
+        Theme
+      </span>
       <select
         className="ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm"
         value={themeId}