this.gui 1.3.41 → 1.3.42

package/src/gui/Theme/styles/theme.tokens.ts

@@ -0,0 +1,108 @@
+//themes/styles/theme.tokens.ts
+export const themeTokens = {
+  description: "Unified base design tokens for This.GUI — used as foundation for all themes and modes.",
+  radius: {
+    md: {
+      type: "radius",
+      value: "10px"
+    }
+  },
+  spacing: {
+    base: {
+      type: "spacing",
+      value: "8"
+    }
+  },
+  border: {
+    default: {
+      type: "color",
+      value: "rgba(0, 0, 0, 0.08)"
+    }
+  },
+  font: {
+    family: {
+      type: "fontFamily",
+      value: "Roboto, sans-serif"
+    },
+    weightBold: {
+      type: "fontWeight",
+      value: "700"
+    },
+    weightSemibold: {
+      type: "fontWeight",
+      value: "600"
+    },
+    sizeBase: {
+      type: "fontSize",
+      value: "16"
+    },
+    letterTight: {
+      type: "letterSpacing",
+      value: "-0.01em"
+    }
+  },
+  color: {
+    description: "Extended semantic colors, gradients, overlays",
+    success: { type: "color", value: "#4caf50" },
+    warning: { type: "color", value: "#ff9800" },
+    error: { type: "color", value: "#f44336" },
+    info: { type: "color", value: "#2196f3" },
+    gradientPrimary: { type: "gradient", value: "linear-gradient(135deg, #00aa96 0%, #008c7d 100%)" }
+  },
+  insets: {
+    description: "Offsets reserved for permanent drawers",
+    type: "object",
+    left: {
+      type: "size",
+      value: "0px"
+    },
+    right: {
+      type: "size",
+      value: "0px"
+    }
+  },
+  shadows: {
+    description: "Consistent elevation levels, AR/3D ready",
+    sm: { type: "shadow", value: "0px 1px 2px rgba(0, 0, 0, 0.05)" },
+    md: { type: "shadow", value: "0px 3px 6px rgba(0, 0, 0, 0.1)" },
+    lg: { type: "shadow", value: "0px 8px 16px rgba(0, 0, 0, 0.15)" }
+  },
+  zIndex: {
+    description: "Advanced layering control",
+    nav: { type: "number", value: 1100 },
+    modal: { type: "number", value: 1300 },
+    tooltip: { type: "number", value: 1500 }
+  },
+  breakpoints: {
+    description: "Declarative responsive interfaces",
+    xs: { type: "breakpoint", value: "0px" },
+    sm: { type: "breakpoint", value: "600px" },
+    md: { type: "breakpoint", value: "900px" },
+    lg: { type: "breakpoint", value: "1200px" },
+    xl: { type: "breakpoint", value: "1536px" }
+  },
+  motion: {
+    description: "Animation and transition tokens",
+    durationFast: { type: "duration", value: "150ms" },
+    durationBase: { type: "duration", value: "300ms" },
+    easingStandard: { type: "easing", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+  },
+  opacity: {
+    description: "Universal interaction effects",
+    disabled: { type: "opacity", value: "0.38" },
+    hover: { type: "opacity", value: "0.08" },
+    focus: { type: "opacity", value: "0.12" }
+  },
+  icon: {
+    description: "Scalable icon sizes for generated GUIs",
+    sm: { type: "size", value: "16px" },
+    md: { type: "size", value: "24px" },
+    lg: { type: "size", value: "32px" }
+  },
+  lineHeight: {
+    description: "Better typographic control",
+    tight: { type: "lineHeight", value: "1.1" },
+    base: { type: "lineHeight", value: "1.5" },
+    relaxed: { type: "lineHeight", value: "1.75" }
+  }
+};

package/src/gui/Theme/utils/catalog.ts

@@ -0,0 +1,61 @@
+// src/themes/catalog/catalog.ts
+// A collection of theme manifests
+// and their associated modes (light/dark) with token paths.
+// It also provides utility functions to access and manipulate the theme catalog.
+import neuronsManifest from '../catalog/neurons/manifest';
+import ghostShellManifest from '../catalog/GhostShell/manifest';
+import PrinceOfDarknessManifest from '../catalog/PrinceOfDarkness/manifest';
+import muiManifest from '../catalog/MUI/manifest';
+import lunaManifest from '../catalog/LunaHex/manifest';
+import cherryByteManifest from '../catalog/CherryByte/manifest';
+import SeafoamManifest from '../catalog/Seafoam/manifest';
+import { FlatGuiTheme } from '@/types/theme'; //definiciones de tipos
+export const GuiThemes = [neuronsManifest, ghostShellManifest, PrinceOfDarknessManifest, muiManifest, lunaManifest, cherryByteManifest, SeafoamManifest];
+/*
+ FlatGuiThemes (plano)
+	•	Es un array plano de modos individuales.
+	•	Cada GuiTheme en esta lista representa una única combinación de:
+	•	themeId
+	•	themeName
+	•	mode (light o dark)
+	•	tokens
+	•	manifest
+	•	Esto es útil para renderizar selects, listas visuales, previews, etc.
+  */
+export const FlatGuiThemes = GuiThemes.flatMap((manifest) => {
+  return (['light', 'dark'] as const).flatMap((mode) => {
+    return [{
+      themeId: manifest.themeId ?? '',
+      themeName: manifest.themeName ?? '',
+      description: manifest.description,
+      author: manifest.author,
+      version: manifest.version,
+      license: manifest.license,
+      homepage: manifest.homepage,
+      tags: manifest.tags,
+      createdAt: manifest.createdAt,
+      updatedAt: manifest.updatedAt,
+      badgeUrl: manifest.badgeUrl,
+      mode,
+      // Si los tokens ya están cargados/resueltos en este punto:
+      tokens: manifest.mode?.[mode] ?? {},
+    }];
+  });
+});
+/*
+	•	Representa la colección de temas, donde cada tema tiene dos modos (light y dark).
+	•	Es decir, el theme completo, tal como viene en el manifest.*/
+
+
+export function getGuiThemes() {
+  return GuiThemes;
+}
+export function getGuiTheme(themeId: string) {
+  return GuiThemes.find(theme => theme.themeId === themeId);
+}
+export function getFlatGuiThemes(): FlatGuiTheme[] {
+  return FlatGuiThemes;
+}
+export function getFlatGuiTheme(themeId: string, mode: 'light' | 'dark') {
+  return FlatGuiThemes.find(theme => theme.themeId === themeId && theme.mode === mode);
+}

package/src/gui/Theme/utils/persistence.ts

@@ -0,0 +1,66 @@
+//src/themes/utils/persistence.ts
+// Utility to persist user's themeId using localStorage.
+import { useState, useEffect } from 'react';
+/**
+ * Retrieves the initial themeId from localStorage.
+ * Falls back to the provided default if not found or on error.
+ *
+ * @param fallback - The fallback themeId to use if none is stored.
+ * @returns The stored themeId or the fallback value.
+ */
+export function getInitialThemeId(fallback: string): string {
+  try {
+    return localStorage.getItem('this.gui:themeId') || fallback;
+  } catch {
+    return fallback;
+  }
+}
+/**
+ * React hook to persist and manage the themeId using localStorage.
+ * Returns a [themeId, setThemeId] tuple just like useState.
+ *
+ * @param fallback - The fallback themeId if no previous value is stored.
+ * @returns A tuple [themeId, setThemeId] that syncs with localStorage.
+ */
+export function usePersistentThemeId(
+  fallback: string
+): [string, React.Dispatch<React.SetStateAction<string>>] {
+  const [themeId, setThemeId] = useState<string>(() => getInitialThemeId(fallback));
+  useEffect(() => {
+    try {
+      localStorage.setItem('this.gui:themeId', themeId);
+    } catch {
+      // fail silently
+    }
+  }, [themeId]);
+  return [themeId, setThemeId];
+}
+
+/**
+ * React hook to persist and manage the theme mode (light/dark) using localStorage.
+ * Returns a [mode, setMode] tuple just like useState.
+ *
+ * @param fallback - The fallback mode if no previous value is stored.
+ * @returns A tuple [mode, setMode] that syncs with localStorage.
+ */
+export function usePersistentThemeMode(
+  fallback: 'light' | 'dark'
+): ['light' | 'dark', React.Dispatch<React.SetStateAction<'light' | 'dark'>>] {
+  const [mode, setMode] = useState<'light' | 'dark'>(() => {
+    try {
+      const stored = localStorage.getItem('this.gui:themeMode');
+      if (stored === 'dark' || stored === 'light') return stored;
+      return fallback;
+    } catch {
+      return fallback;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem('this.gui:themeMode', mode);
+    } catch {
+      // fail silently
+    }
+  }, [mode]);
+  return [mode, setMode];
+}

package/src/gui/Theme/utils/themeUtils.ts

@@ -0,0 +1,34 @@
+//src/themes/utils/themeUtils.ts
+import { Theme } from '@mui/material/styles';
+export type Insets = { left: number; right: number; top: number; bottom: number };
+// Helper to get CSS variable from theme
+export const getCssVar = (theme: Theme, name: string) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`) || theme.palette?.[name as keyof typeof theme.palette];
+};
+
+// Generates a string of CSS custom properties based on theme.palette
+export const generatePaletteCssVars = (theme: Theme, prefix = '--palette') => {
+  const cssVars: Record<string, string> = {};
+  Object.entries(theme.palette).forEach(([key, value]) => {
+    if (!value || typeof value === 'function') return;
+    if (typeof value === 'object') {
+      Object.entries(value).forEach(([subKey, subVal]) => {
+        const varName = `${prefix}-${key}-${subKey}`;
+        cssVars[varName] = String(subVal);
+      });
+    } else {
+      const varName = `${prefix}-${key}`;
+      cssVars[varName] = String(value);
+    }
+  });
+  return cssVars;
+};
+
+// Appends generated CSS variables to the document root
+export const applyThemeCssVars = (theme: Theme) => {
+  const cssVars = generatePaletteCssVars(theme);
+  const root = document.documentElement;
+  Object.entries(cssVars).forEach(([key, val]) => {
+    root.style.setProperty(key, val);
+  });
+};

package/src/gui/components/atoms/AppBar/AppBar.resolver.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+// (types not needed in resolver)
+import AppBar from './AppBar';
+import type { RegistryEntry } from '@/gui/registry/types';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import type { AppBarResolverSpec as AppBarSpec } from './AppBar.types';
+
+/**
+ * AppBarResolver
+ * - Maps a JSON-friendly spec to <AppBar /> props.
+ * - Keeps MUI polymorphism intact (`component` passthrough).
+ * - Allows `sx`, ids and className for styling & targeting.
+ */
+const AppBarResolver: RegistryEntry = {
+  type: 'AppBar',
+  resolve(spec: AppBarSpec) {
+    const p = spec.props ?? {};
+    const variant = typeof (p as any).variant === 'string' ? (p as any).variant : 'mui';
+    const rootProps: any = {
+      // semantic preset
+      variant,
+
+      // defaults depend on variant
+      position: p.position ?? (variant === 'glass' ? 'fixed' : 'fixed'),
+      color: p.color ?? (variant === 'glass' ? 'transparent' : 'default'),
+      elevation: p.elevation ?? (variant === 'glass' ? 0 : undefined),
+      enableColorOnDark: p.enableColorOnDark,
+      sx: p.sx,
+      id: ensureNodeId('appbar', p.id),
+      className: p.className,
+      'data-testid': p['data-testid'],
+    };
+
+    if (p.component) {
+      rootProps.component = p.component;
+    }
+
+    return (
+      <AppBar {...rootProps}>
+        {p.children}
+      </AppBar>
+    );
+  },
+};
+
+export default AppBarResolver;

package/src/gui/components/atoms/AppBar/AppBar.stories.tsx

@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppBar, Toolbar, Typography, Box, Button } from '@/gui/components/atoms';
+
+// ======================= Meta =======================
+const meta: Meta<typeof AppBar> = {
+  title: 'Atoms/Containers/AppBar',
+  component: AppBar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+        <div style={{ padding: 0, minHeight: 240 }}>
+          <Story />
+        </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The **AppBar** atom is a thin wrapper around MUI's \`AppBar\` that keeps the original API while letting you style it with \`sx\` and use it declaratively through the **resolver**.
+
+---
+## Features
+- Positions: \`fixed\`, \`absolute\`, \`sticky\`, \`static\`, \`relative\`.
+- Colors: \`default\`, \`inherit\`, \`primary\`, \`secondary\`, \`transparent\`. AppBar **only supports** these colors for the \`color\` prop.
+- Note: \`success\`, \`info\`, \`warning\`, and \`error\` are **not supported** by the \`color\` prop. Use \`sx={{ bgcolor: '...' }}\` for these colors.
+- Additional theme colors can be applied via \`sx={{ bgcolor: 'success.main' }}\` etc.
+- Elevation & dark-mode override with \`enableColorOnDark\`.
+- Accepts any children (e.g., \`<Toolbar/>\`, actions, brand, etc.).
+- Fully themeable via **This.GUI** tokens and \`sx\`.
+- Variant semantic presets: \`mui\` (default) behaves like MUI AppBar, \`glass\` for floating blurred panel style.
+
+---
+## Key Props
+- \`variant?: 'mui' | 'glass'\` — semantic preset.
+- \`position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'\`.
+- \`color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'transparent'\` — AppBar **only supports** these values.
+- \`success\`, \`info\`, \`warning\`, and \`error\` are **not supported** by \`color\`; use \`sx={{ bgcolor: '...' }}\` instead.
+- \`elevation?: number\`.
+- \`enableColorOnDark?: boolean\`.
+- \`sx?: object\` — granular styling via the system.
+
+---
+## Basic usage (React)
+~~~tsx
+import { AppBar, Toolbar, Typography, Button, Box } from '@/gui/atoms';
+
+<AppBar position="fixed" color="default" sx={{ borderBottom: '1px solid', borderColor: 'divider' }}>
+  <Toolbar variant="dense">
+    <Typography variant="h6" sx={{ flexGrow: 1 }}>My App</Typography>
+    <Button variant="text">Login</Button>
+  </Toolbar>
+</AppBar>
+~~~
+
+---
+## Declarative JSON / Config usage
+This GUI's **resolver** lets you describe an app bar via a config object. Example payload for the \`AppBarResolver\`:
+
+~~~json
+{
+  "type": "AppBar",
+  "props": {
+    "position": "fixed",
+    "color": "default",
+    "sx": { "borderBottom": "1px solid", "borderColor": "divider" },
+    "children": {
+      "type": "Toolbar",
+      "props": {
+        "variant": "dense",
+        "children": [
+          { "type": "Typography", "props": { "variant": "h6", "sx": { "flexGrow": 1 }, "children": "My App" } },
+          { "type": "Button", "props": { "variant": "text", "children": "Login" } }
+        ]
+      }
+    }
+  }
+}
+~~~
+
+> The resolver maps this spec to real React elements, preserving polymorphism and \`sx\` styling.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['mui', 'glass'],
+      description: 'Semantic preset. mui (default): behaves like MUI AppBar. glass: floating blurred panel style.',
+    },
+    position: {
+      control: { type: 'select' },
+      options: ['fixed', 'absolute', 'sticky', 'static', 'relative'],
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'inherit', 'primary', 'secondary', 'transparent'],
+    },
+    elevation: { control: { type: 'number' } },
+    enableColorOnDark: { control: { type: 'boolean' } },
+    // component polymorphism is supported but not exposed as a control in SB
+    component: { table: { disable: true } },
+  },
+  args: {
+    variant: undefined,
+    position: 'fixed',
+    elevation: 0,
+    enableColorOnDark: false,
+    sx: { borderBottom: '1px solid', borderColor: 'divider' },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof AppBar>;
+
+// ======================= Stories =======================
+export const Playground: Story = {
+  render: (args) => (
+    <AppBar {...args}>
+      <Toolbar variant="dense">
+        <Typography variant="h6" sx={{ flexGrow: 1 }}>Playground</Typography>
+        <Button variant="text">Action</Button>
+      </Toolbar>
+    </AppBar>
+  ),
+};
+
+export const Positions: Story = {
+  render: (args) => (
+    <div style={{ display: 'grid', gap: 16 }}>
+      {(['fixed', 'absolute', 'sticky', 'static', 'relative'] as const).map((pos) => (
+        <AppBar key={pos} {...args} position={pos}>
+          <Toolbar variant="dense">
+            <Typography variant="subtitle1" sx={{ flexGrow: 1 }}>
+              position = {pos}
+            </Typography>
+            <Button variant="text">Action</Button>
+          </Toolbar>
+        </AppBar>
+      ))}
+    </div>
+  ),
+};
+
+export const Colors: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `
+The AppBar component only supports the following values for the \`color\` prop: \`default\`, \`inherit\`, \`primary\`, \`secondary\`, and \`transparent\`.
+For colors like \`success\`, \`info\`, \`warning\`, and \`error\`, use the \`sx\` prop with \`bgcolor\` instead, e.g. \`sx={{ bgcolor: 'success.main' }}\`.
+        `,
+      },
+    },
+  },
+  args: { position: 'static' },
+  render: (args) => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      {(['default', 'inherit', 'primary', 'secondary', 'transparent'] as const).map((c) => (
+        <AppBar key={c} {...args} color={c}>
+          <Toolbar variant="dense">
+            <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>color = {c}</Typography>
+            <Button variant="text">Action</Button>
+          </Toolbar>
+        </AppBar>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The AppBar component does not support 'success', 'info', 'warning', or 'error' as values for the color prop.
+ * To use these colors, apply them via the sx prop with bgcolor instead.
+ */
+export const CustomColorsWithSx: Story = {
+  args: { position: 'static' },
+  render: (args) => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      {(['success.main', 'info.main', 'warning.main', 'error.main'] as const).map((bgcolor) => (
+        <AppBar key={bgcolor} {...args} sx={{ bgcolor }}>
+          <Toolbar variant="dense">
+            <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>{`sx.bgcolor = ${bgcolor}`}</Typography>
+            <Button variant="text">Action</Button>
+          </Toolbar>
+        </AppBar>
+      ))}
+    </div>
+  ),
+};
+
+export const WithToolbar: Story = {
+  args: { position: 'static', color: 'default' },
+  render: (args) => (
+    <AppBar {...args} sx={{ px: 2, borderBottom: '1px solid', borderColor: 'divider' }}>
+      <Toolbar variant="dense">
+        <Typography variant="h6" sx={{ flexGrow: 1 }}>With Toolbar</Typography>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button variant="text">Login</Button>
+          <Button variant="contained" color="primary">Sign up</Button>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  ),
+};
+
+export const Elevation: Story = {
+  args: { position: 'static', color: 'default' },
+  render: (args) => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      {[0, 1, 2, 4, 8].map((elev) => (
+        <AppBar key={elev} {...args} elevation={elev}>
+          <Toolbar variant="dense">
+            <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>elevation = {elev}</Typography>
+            <Button variant="text">Action</Button>
+          </Toolbar>
+        </AppBar>
+      ))}
+    </div>
+  ),
+};
+
+export const EnableColorOnDark: Story = {
+  args: { position: 'static', color: 'primary', enableColorOnDark: true },
+  render: (args) => (
+    <AppBar {...args}>
+      <Toolbar variant="dense">
+        <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>enableColorOnDark = true</Typography>
+        <Button variant="text">Action</Button>
+      </Toolbar>
+    </AppBar>
+  ),
+};
+
+export const Variants: Story = {
+  args: { position: 'static', color: 'default', variant: undefined },
+  render: (args) => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      {(['mui', 'glass'] as const).map((v) => (
+        <AppBar key={v} {...args} variant={v as any}>
+          <Toolbar variant="dense">
+            <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>
+              variant = {v}
+            </Typography>
+            <Button variant="text">Action</Button>
+          </Toolbar>
+        </AppBar>
+      ))}
+    </div>
+  ),
+};

package/src/gui/components/atoms/AppBar/AppBar.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import MuiAppBar from '@mui/material/AppBar';
+import type { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import type { SxProps, Theme } from '@mui/material/styles';
+
+// Keep your local AppBarProps, but allow us to extend it safely at runtime.
+// If ./AppBar.types.js already defines AppBarProps, we can widen it here.
+import type { AppBarProps as LocalAppBarProps } from './AppBar.types.js';
+
+export type AppBarVariant = 'mui' | 'glass';
+
+export type AppBarProps = LocalAppBarProps & {
+  /**
+   * Semantic preset.
+   * - `mui` (default): behaves exactly like MUI AppBar.
+   * - `glass`: a floating “welcome” topbar style (blurred panel), suitable for quick links.
+   */
+  variant?: AppBarVariant;
+
+  /**
+   * Where to dock the AppBar when using the `glass` variant.
+   */
+  dock?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  /**
+   * Pixel offsets for the `glass` variant.
+   */
+  offset?: number;
+};
+
+const glassDockSx = (dock: NonNullable<AppBarProps['dock']>, offset: number): SxProps<Theme> => {
+  const o = `${offset}px`;
+  switch (dock) {
+    case 'top-left':
+      return { top: o, left: o };
+    case 'top-right':
+      return { top: o, right: o };
+    case 'bottom-left':
+      return { bottom: o, left: o };
+    case 'bottom-right':
+      return { bottom: o, right: o };
+    default:
+      return { top: o, right: o };
+  }
+};
+
+const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
+  const {
+    variant = 'mui',
+    dock = 'top-right',
+    offset = 16,
+    sx,
+    position,
+    elevation,
+    ...rest
+  } = props;
+
+  if (variant === 'mui') {
+    // Default behavior: pass-through to MUI.
+    return (
+      <MuiAppBar
+        ref={ref}
+        sx={sx as any}
+        position={position}
+        elevation={elevation}
+        {...(rest as any)}
+      />
+    );
+  }
+
+  // Glass/floating preset
+  return (
+    <MuiAppBar
+      ref={ref}
+      // Force floating positioning
+      position="fixed"
+      elevation={0}
+      sx={(
+        [
+          {
+            zIndex: (theme: Theme) => (theme as any)?.zIndex?.modal ?? 1300,
+            width: 'auto',
+            borderRadius: 999,
+            overflow: 'hidden',
+            background: 'rgba(10, 10, 10, 0.55)',
+            color: '#fff',
+            border: '1px solid rgba(255,255,255,0.12)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+            boxShadow: '0 6px 30px rgba(0,0,0,0.25)',
+            padding: '10px 14px',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 12,
+            ...glassDockSx(dock, offset),
+          },
+          // allow user overrides last
+          sx as any,
+        ]
+      ) as any}
+      {...(rest as any)}
+    />
+  );
+});
+
+AppBar.displayName = 'AppBar';
+export default AppBar;