@axzydev/axzy_ui_system 1.2.12 → 1.2.14

package/src/components/{topbar → organisms/topbar}/topbar.tsx

@@ -1,8 +1,8 @@
 import { FaUserCircle, FaBars } from "react-icons/fa";
-import useClickOutside from "../../hooks/useClickOutside";
+import useClickOutside from "@/hooks/useClickOutside";
 import { useRef, useState } from "react";
 import { ITTopBarProps } from "./topbar.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * ITTopBar — sticky top navigation bar with logo, nav items, and user avatar dropdown.
@@ -60,8 +60,8 @@ export default function ITTopBar({
     <header 
       className="sticky top-0 z-40 backdrop-blur-md transition-all duration-300"
       style={{
-        backgroundColor: "var(--topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--topbar-border, rgba(15, 23, 42, 0.06))",
+        backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
         boxShadow: "var(--shadow-xs)",
       }}
     >
@@ -75,9 +75,9 @@ export default function ITTopBar({
             <button
               className="lg:hidden p-2.5 rounded-xl transition-colors duration-200"
               style={{
-                 color: "var(--topbar-icon, #64748b)",
+                 color: "var(--it-topbar-icon, #64748b)",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)"}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)"}
               onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "transparent"}
               onClick={onToggleMobileMenu}
             >
@@ -96,7 +96,7 @@ export default function ITTopBar({
             {logoText && (
               <ITText as="span" 
                  className="text-[1.15rem] font-bold tracking-tight"
-                 style={{ color: "var(--topbar-text, #0f172a)" }}
+                 style={{ color: "var(--it-topbar-text, #0f172a)" }}
               >
                 {logoText}
               </ITText>
@@ -105,19 +105,19 @@ export default function ITTopBar({
 
           {/* Top Navigation Items (Desktop) */}
           {navItems && navItems.length > 0 && (
-            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--topbar-border, rgba(15, 23, 42, 0.06))" }}>
+            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }}>
               {navItems.map((item) => (
                 <button
                   key={item.id}
                   onClick={() => onNavItemClick?.(item.id)}
                   className="px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]"
-                  style={{ color: "var(--topbar-text, #475569)" }}
+                  style={{ color: "var(--it-topbar-text, #475569)" }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.color = "var(--topbar-text, #0f172a)";
-                    e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)";
+                    e.currentTarget.style.color = "var(--it-topbar-text, #0f172a)";
+                    e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.color = "var(--topbar-text, #475569)";
+                    e.currentTarget.style.color = "var(--it-topbar-text, #475569)";
                     e.currentTarget.style.backgroundColor = "transparent";
                   }}
                 >
@@ -138,10 +138,10 @@ export default function ITTopBar({
               type="button"
               className="flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200"
               style={{
-                backgroundColor: isUserMenuOpen ? "var(--topbar-user-hover, #f1f5f9)" : "transparent",
+                backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent",
               }}
               onMouseEnter={(e) => {
-                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)";
+                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
               }}
               onMouseLeave={(e) => {
                 if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
@@ -158,7 +158,7 @@ export default function ITTopBar({
                   />
                 ) : (
                   <div className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm">
-                     <FaUserCircle className="w-6 h-6" style={{ color: "var(--topbar-icon, #94a3b8)" }} />
+                     <FaUserCircle className="w-6 h-6" style={{ color: "var(--it-topbar-icon, #94a3b8)" }} />
                   </div>
                 )}
                 {/* Active dot indicator */}
@@ -169,13 +169,13 @@ export default function ITTopBar({
               <div className="hidden sm:flex flex-col text-left py-0.5">
                 <ITText as="span" 
                   className="font-semibold text-[0.85rem] leading-tight"
-                  style={{ color: "var(--topbar-user-text, #0f172a)" }}
+                  style={{ color: "var(--it-topbar-user-text, #0f172a)" }}
                 >
                   {userMenu.userName}
                 </ITText>
                 <ITText as="span" 
                   className="text-[0.7rem] font-medium"
-                  style={{ color: "var(--topbar-user-subtitle, #64748b)" }}
+                  style={{ color: "var(--it-topbar-user-subtitle, #64748b)" }}
                 >
                   {userMenu.userEmail}
                 </ITText>
@@ -190,16 +190,16 @@ export default function ITTopBar({
                 ${isUserMenuOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-2 pointer-events-none"}
               `}
               style={{ 
-                backgroundColor: "var(--topbar-user-dropdown-bg, #ffffff)",
-                border: "1px solid var(--topbar-user-dropdown-border, #f1f5f9)"
+                backgroundColor: "var(--it-topbar-user-dropdown-bg, #ffffff)",
+                border: "1px solid var(--it-topbar-user-dropdown-border, #f1f5f9)"
               }}
             >
                {/* Dropdown Header */}
-              <div className="px-5 py-4 border-b" style={{ borderColor: "var(--topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--topbar-user-bg, #f8fafc)" }}>
-                <ITText as="span" className="block font-bold text-[0.9rem]" style={{ color: "var(--topbar-user-text, #0f172a)" }}>
+              <div className="px-5 py-4 border-b" style={{ borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }}>
+                <ITText as="span" className="block font-bold text-[0.9rem]" style={{ color: "var(--it-topbar-user-text, #0f172a)" }}>
                   {userMenu.userName}
                 </ITText>
-                <ITText as="span" className="block text-xs font-medium truncate mt-0.5" style={{ color: "var(--topbar-user-subtitle, #64748b)" }}>
+                <ITText as="span" className="block text-xs font-medium truncate mt-0.5" style={{ color: "var(--it-topbar-user-subtitle, #64748b)" }}>
                   {userMenu.userEmail}
                 </ITText>
               </div>
@@ -215,14 +215,14 @@ export default function ITTopBar({
                           <div className="h-px bg-slate-100 my-1 mx-2"></div>
                        )}
                       <button
-                        onClick={(e) => {
+                        onClick={() => {
                            m.onClick();
                            setIsUserMenuOpen(false);
                         }}
                         className="block w-full text-left px-3 py-2.5 rounded-xl text-[0.875rem] font-medium transition-colors duration-150"
-                        style={{ color: isDestructive ? 'var(--color-danger-500)' : "var(--topbar-user-text, #334155)" }}
+                        style={{ color: isDestructive ? 'var(--color-danger-500)' : "var(--it-topbar-user-text, #334155)" }}
                         onMouseEnter={(e) => {
-                          e.currentTarget.style.backgroundColor = isDestructive ? 'var(--color-danger-50)' : "var(--topbar-user-item-hover, #f8fafc)";
+                          e.currentTarget.style.backgroundColor = isDestructive ? 'var(--color-danger-50)' : "var(--it-topbar-user-item-hover, #f8fafc)";
                         }}
                         onMouseLeave={(e) => {
                           e.currentTarget.style.backgroundColor = "transparent";

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './tripleFilter.stories';
+import * as StoriesData from './tripleFilter.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITTripleFilter
 

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.props.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ColorsTypes } from "@/types/colors.types";
 
 export interface ITTripleFilterOption<T> {

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.stories.tsx

@@ -4,7 +4,6 @@ import ITTripleFilter from './tripleFilter';
 const meta: Meta<typeof ITTripleFilter> = {
   title: 'Components/ITTripleFilter',
   component: ITTripleFilter,
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ITTripleFilterProps } from "./tripleFilter.props";
 import { ColorsTypes } from "@/types/colors.types";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const colorMap: Record<ColorsTypes, string> = {
   primary: "text-primary-600",

package/src/components/{layout → templates/layout}/layout.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './layout.stories';
+import * as StoriesData from './layout.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITLayout
 

package/src/components/{layout → templates/layout}/layout.props.ts

@@ -1,5 +1,5 @@
-import { ITTopBarProps } from "../topbar/topbar.props";
-import { ITSidebarProps } from "../sidebar/sidebar.props";
+import { ITTopBarProps } from "@/components/organisms/topbar/topbar.props";
+import { ITSidebarProps } from "@/components/organisms/sidebar/sidebar.props";
 
 export interface ITLayoutProps {
   /** Top bar configuration and props */

package/src/components/{layout → templates/layout}/layout.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITLayout from './layout';
+import ITLayout from '@/components/templates/layout/layout';
 import { FaHome, FaUsers, FaChartBar, FaCog, FaShieldAlt } from 'react-icons/fa';
 
 const meta: Meta<typeof ITLayout> = {
@@ -17,7 +17,6 @@ const meta: Meta<typeof ITLayout> = {
       },
     },
   },
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/components/{layout → templates/layout}/layout.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import clsx from "clsx";
-import ITTopBar from "../topbar/topbar";
-import ITSidebar from "../sidebar/sidebar";
+import ITTopBar from "@/components/organisms/topbar/topbar";
+import ITSidebar from "@/components/organisms/sidebar/sidebar";
 import { ITLayoutProps } from "./layout.props";
 import { theme } from "@/theme/theme";
 

package/src/components/{page → templates/page}/page.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './page.stories';
+import * as StoriesData from './page.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITPage
 

package/src/components/{page → templates/page}/page.props.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ITBreadcrumbItem } from "../breadcrumbs/breadcrumbs.props";
+import { ITBreadcrumbItem } from "@/components/molecules/breadcrumbs/breadcrumbs.props";
 
 /** Props for the ITPage component. */
 export interface ITPageProps {

package/src/components/{page → templates/page}/page.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import ITPage from "./page";
-import ITButton from "../button/button";
-import ITCard from "../card/card";
+import ITPage from "@/components/templates/page/page";
+import ITButton from "@/components/atoms/button/button";
+import ITCard from "@/components/molecules/card/card";
 
 const meta: Meta<typeof ITPage> = {
   title: "Components/Layout/ITPage",
   component: ITPage,
-  tags: ["autodocs"],
 };
 
 export default meta;
@@ -36,8 +35,8 @@ export const WithBreadcrumbsAndActions: Story = {
     ],
     actions: (
       <>
-        <ITButton label="Cancelar" variant="outlined" size="small" />
-        <ITButton label="Guardar" size="small" />
+        <ITButton label="Cancelar" variant="outlined" size="sm" />
+        <ITButton label="Guardar" size="sm" />
       </>
     ),
     children: (
@@ -73,7 +72,7 @@ export const Empty: Story = {
     empty: true,
     emptyTitle: "Sin notificaciones",
     emptyDescription: "No tienes notificaciones pendientes.",
-    emptyAction: <ITButton label="Recargar" size="small" onClick={() => alert("Refresh")} />,
+    emptyAction: <ITButton label="Recargar" size="sm" onClick={() => alert("Refresh")} />,
     children: null,
   },
 };

package/src/components/{page → templates/page}/page.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx";
 import { ITPageProps } from "./page.props";
-import ITPageHeader from "../page-header/page-header";
-import ITSkeleton from "../skeleton/skeleton";
-import ITEmptyState from "../empty-state/empty-state";
-import ITButton from "../button/button";
-import ITStack from "../stack/stack";
+import ITPageHeader from "@/components/organisms/page-header/page-header";
+import ITSkeleton from "@/components/atoms/skeleton/skeleton";
+import ITEmptyState from "@/components/molecules/empty-state/empty-state";
+import ITButton from "@/components/atoms/button/button";
+import ITStack from "@/components/atoms/stack/stack";
 
 const hasHeader = (props: ITPageProps) =>
   !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction || props.icon);
@@ -92,7 +92,7 @@ export default function ITPage(props: ITPageProps) {
               <ITButton
                 label={errorActionLabel || "Reintentar"}
                 onClick={onRetry}
-                size="small"
+                size="sm"
               />
             ) : undefined
           }

package/src/components/theme-provider/themePresets.ts

@@ -0,0 +1,154 @@
+import { ITThemePalette } from "./themeProvider.props";
+
+/** Paleta por defecto del sistema (fallback de `ITThemeProvider`). */
+export const DEFAULT_PALETTE: ITThemePalette = {
+  primary: "#06b6d4", // Cyan
+  secondary: "#6b7280", // Gray
+  ternary: "#8b5cf6", // Purple/Violet
+  danger: "#ef4444", // Red
+  success: "#22c55e", // Green
+  info: "#3b82f6", // Blue
+  alert: "#f97316", // Orange
+  warning: "#eab308", // Yellow
+  layout: {
+    sidebarBg: "#ffffff", // White (light mode default)
+    sidebarText: "#334155", // Slate-700 (dark text for light sidebar)
+    navbarBg: "#ffffff", // White
+    navbarText: "#1e293b", // Slate-800
+  },
+  table: {
+    headerBg: "#f8fafc", // Slate-50
+    headerText: "#334155", // Slate-700
+    rowBg: "#ffffff", // White
+    rowText: "#1e293b", // Slate-800
+  },
+};
+
+/** Presets de colores para el FAB/theme-designer. */
+export const PRESETS: { name: string; colors: ITThemePalette }[] = [
+  {
+    name: "Midnight Indigo 🌌",
+    colors: {
+      primary: "#6366f1",
+      secondary: "#475569",
+      ternary: "#f472b6",
+      danger: "#ef4444",
+      success: "#34d399",
+      info: "#06b6d4",
+      alert: "#fb923c",
+      warning: "#fbbf24",
+      layout: {
+        sidebarBg: "#0b1120",
+        sidebarText: "#94a3b8",
+        navbarBg: "#0f172a",
+        navbarText: "#f1f5f9",
+      },
+      table: {
+        headerBg: "#f1f5f9",
+        headerText: "#334155",
+        rowBg: "#ffffff",
+        rowText: "#0f172a",
+      },
+    },
+  },
+  {
+    name: "Coral Reef 🪸",
+    colors: {
+      primary: "#f43f5e",
+      secondary: "#57534e",
+      ternary: "#f97316",
+      danger: "#b91c1c",
+      success: "#14b8a6",
+      info: "#6366f1",
+      alert: "#eab308",
+      warning: "#fde047",
+      layout: {
+        sidebarBg: "#0c0808",
+        sidebarText: "#fda4af",
+        navbarBg: "#1c1212",
+        navbarText: "#fff1f2",
+      },
+      table: {
+        headerBg: "#fff1f2",
+        headerText: "#881337",
+        rowBg: "#ffffff",
+        rowText: "#1c1212",
+      },
+    },
+  },
+  {
+    name: "Oceanic Teal 🌊",
+    colors: {
+      primary: "#0d9488",
+      secondary: "#64748b",
+      ternary: "#a78bfa",
+      danger: "#e11d48",
+      success: "#22c55e",
+      info: "#0284c7",
+      alert: "#ea580c",
+      warning: "#ca8a04",
+      layout: {
+        sidebarBg: "#042f2e",
+        sidebarText: "#5eead4",
+        navbarBg: "#062b2a",
+        navbarText: "#ccfbf1",
+      },
+      table: {
+        headerBg: "#f0fdfa",
+        headerText: "#115e59",
+        rowBg: "#ffffff",
+        rowText: "#042f2e",
+      },
+    },
+  },
+  {
+    name: "Golden Hour ☀️",
+    colors: {
+      primary: "#d97706",
+      secondary: "#78716c",
+      ternary: "#db2777",
+      danger: "#dc2626",
+      success: "#65a30d",
+      info: "#2563eb",
+      alert: "#f97316",
+      warning: "#facc15",
+      layout: {
+        sidebarBg: "#fefce8",
+        sidebarText: "#713f12",
+        navbarBg: "#fffbeb",
+        navbarText: "#451a03",
+      },
+      table: {
+        headerBg: "#fefce8",
+        headerText: "#713f12",
+        rowBg: "#ffffff",
+        rowText: "#292524",
+      },
+    },
+  },
+  {
+    name: "Deep Forest 🌲",
+    colors: {
+      primary: "#16a34a",
+      secondary: "#57534e",
+      ternary: "#d946ef",
+      danger: "#dc2626",
+      success: "#14b8a6",
+      info: "#0ea5e9",
+      alert: "#f97316",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#052e16",
+        sidebarText: "#86efac",
+        navbarBg: "#0b3b1c",
+        navbarText: "#dcfce7",
+      },
+      table: {
+        headerBg: "#f0fdf4",
+        headerText: "#166534",
+        rowBg: "#ffffff",
+        rowText: "#052e16",
+      },
+    },
+  },
+];

package/src/components/theme-provider/themeProvider.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './themeProvider.stories';
+import * as StoriesData from './themeProvider.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITThemeProvider
 
@@ -14,6 +14,9 @@ Root theme context that injects CSS custom properties into the entire component
 | `theme` | `Partial<ITThemePalette>` | — | Partial palette overrides merged with the default theme. Supports primary, secondary, ternary, danger, success, info, alert, warning, layout, and table colors. |
 | `children` | `React.ReactNode` | — | The subtree that receives the theme context and CSS variables. |
 | `showFab` | `boolean` | `false` | Whether to show the floating action button for opening the theme designer drawer. |
+| `density` | `number` | `1` | Global density/compactness factor: values below `1` shrink base sizes (fonts, paddings, gaps), above `1` grow them. Applies by scaling the root font-size so every `rem`-based token compacts together while the layout stays fluid. Clamped to `0.5`–`1.5`. |
+| `radius` | `number` | — | Global border radius in **px** applied to the whole rounding scale. `2` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ square. No override when omitted (Tailwind defaults). |
+| `shadow` | `number` | `2` | Global shadow strength level: `0` ⇒ none, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. No override when omitted (keeps defaults). |
 
 ### ITThemePalette Shape
 
@@ -57,6 +60,11 @@ import { ITThemeProvider } from '@axzydev/axzy_ui_system';
 <ITThemeProvider showFab>
   <App />
 </ITThemeProvider>
+
+{/* Cuadrado en todos lados y sombras nivel 2 */}
+<ITThemeProvider radius={2} shadow={2}>
+  <App />
+</ITThemeProvider>
 ```
 
 ## Notes

package/src/components/theme-provider/themeProvider.props.ts

@@ -46,4 +46,10 @@ export interface ITThemeProviderProps {
   children: React.ReactNode;
   /** Whether to render the floating action button (bottom-right) that opens the live theme-designer drawer, letting end users tweak colors and persist their choice. Set to `false` to hide the FAB in production and only theme via the `theme` prop. @default true */
   showFab?: boolean;
+  /** Global density/compactness factor. Values below 1 shrink the UI's base sizes, above 1 grow them (e.g. `0.8` = 80%: smaller fonts, paddings, gaps, spacing). Applied by scaling the root font-size so every `rem`-based token in Tailwind components compacts together, keeping the layout fluid (no empty margins, unlike CSS zoom). Clamped to `0.5`–`1.5`. @default 1 */
+  density?: number;
+  /** Global border radius in pixels applied to the entire rounding scale (`rounded-sm/md/lg/xl/2xl/…`). `radius={2}` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ completely square. Every `rounded-*` utility resolves to a `--radius-*` variable, so this reshapes inputs, buttons, cards, dialogs and tables system-wide with no per-component changes. @default 0 (no override, Tailwind defaults) */
+  radius?: number;
+  /** Global shadow strength level. `0` ⇒ no shadows, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. Shadows are injected as `--shadow-*`/`.shadow-*` overrides so cards, dropdowns and dialogs follow the level. @default 2 (keeps current default when omitted) */
+  shadow?: number;
 }

package/src/components/theme-provider/themeProvider.stories.tsx

@@ -1,14 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ITThemeProvider from './themeProvider';
-import ITCard from '../card/card';
-import ITButton from '../button/button';
-import ITText from '../text/text';
+import ITCard from '@/components/molecules/card/card';
+import ITButton from '@/components/atoms/button/button';
+import ITText from '@/components/atoms/text/text';
 
 const meta = {
   title: 'Components/System/ITThemeProvider',
   component: ITThemeProvider,
   parameters: { layout: 'centered' },
-  tags: ['autodocs'],
   argTypes: {
     theme: { control: false, description: 'Custom theme palette to override defaults' },
     children: { control: false, description: 'App content wrapped by the theme context' },