siesa-ui-kit 1.0.2 → 1.0.3

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,810 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Navbar } from './Navbar';
-
-const meta = {
-  title: 'Siesa UI Kit/Navbar',
-  component: Navbar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: `
-Barra de navegación principal del sistema con soporte responsive y dark mode completo.
-
-**Características principales:**
-- 4 variantes: \`responsive\` (default), \`desktop\`, \`tablet\`, \`mobile\`
-- Dark mode completo con tokens del sistema
-- Focus rings adaptativos para accesibilidad
-- Botón de navegación con sombra button-inset
-- Badge de ambiente con componente Badge (color yellow)
-- Badges de notificación con token error-content
-- Dropdown de usuario con avatar, nombre y email
-- Soporte para Logo Siesa en trailing (solo desktop)
-
-**Tamaños según Figma:**
-- Desktop: 1360x64px
-- Tablet: 1024x64px
-- Mobile: 428x40px
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    productName: {
-      control: 'text',
-      description: 'Nombre del producto mostrado después del logo (solo desktop/tablet)',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Nombre Producto' },
-        category: 'Contenido',
-      },
-    },
-    environmentBadge: {
-      control: 'text',
-      description: 'Texto del badge de ambiente (en mobile muestra "Pruebas")',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    variant: {
-      control: 'select',
-      options: ['responsive', 'desktop', 'tablet', 'mobile'],
-      description: 'Modo de visualización del navbar',
-      table: {
-        type: { summary: "'responsive' | 'desktop' | 'tablet' | 'mobile'" },
-        defaultValue: { summary: 'responsive' },
-        category: 'Apariencia',
-      },
-    },
-    userDropdown: {
-      control: 'object',
-      description: 'Datos del dropdown de usuario (avatar, nombre, email)',
-      table: {
-        type: { summary: 'UserDropdownProps' },
-        category: 'Contenido',
-      },
-    },
-    notifications: {
-      control: 'object',
-      description: 'Configuración de badges de notificación (cart: number, bell: boolean)',
-      table: {
-        type: { summary: 'NotificationsProps' },
-        category: 'Estado',
-      },
-    },
-    showBusinessLogo: {
-      control: 'boolean',
-      description: 'Mostrar Business Logo en el leading (lado izquierdo)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Logos',
-      },
-    },
-    showSiesaLogoLeading: {
-      control: 'boolean',
-      description: 'Mostrar Logo de Siesa en el leading (lado izquierdo)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-        category: 'Logos',
-      },
-    },
-    showSiesaLogoTrailing: {
-      control: 'boolean',
-      description: 'Mostrar Logo de Siesa en el trailing (lado derecho)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Logos',
-      },
-    },
-    hideActionButtons: {
-      control: 'boolean',
-      description: 'Ocultar botones de acción (carrito, notificaciones, búsqueda)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Apariencia',
-      },
-    },
-  },
-} satisfies Meta<typeof Navbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Avatar de ejemplo para las stories
-const avatarExample = 'https://i.pravatar.cc/150?img=3';
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    productName: 'Mi Producto',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Juan Pérez',
-      email: 'juan@ejemplo.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'responsive',
-    showBusinessLogo: false,
-    showSiesaLogoLeading: true,
-    showSiesaLogoTrailing: false,
-  },
-};
-
-// ============================================
-// 2. VARIANTES DE DISPOSITIVO
-// ============================================
-export const Desktop: Story = {
-  args: {
-    productName: 'Sistema de Gestión',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'María García',
-      email: 'maria@miempresa.com',
-    },
-    notifications: {
-      cart: 12,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: false,
-    showSiesaLogoLeading: true,
-    showSiesaLogoTrailing: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Versión desktop completa (1360x64px) con Siesa Logo en el leading y nombre de producto.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="min-w-[1360px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-export const Tablet: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Carlos López',
-      email: 'carlos@ejemplo.com',
-    },
-    notifications: {
-      cart: 8,
-      bell: true,
-    },
-    variant: 'tablet',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Versión tablet (1024x64px) con elementos reducidos. Similar a desktop pero sin el logo Siesa en trailing y con tamaños de logo más pequeños.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="w-[1024px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-export const Mobile: Story = {
-  args: {
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Ana Martínez',
-      email: 'ana@ejemplo.com',
-    },
-    notifications: {
-      cart: 99,
-      bell: true,
-    },
-    variant: 'mobile',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Versión mobile (428x40px) simplificada: logo Siesa icono (30x30), badge "Pruebas", botón búsqueda, botones acción, y avatar circular.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="max-w-[428px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. ESTADOS DE NOTIFICACIONES
-// ============================================
-export const ConNotificaciones: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Ana Martínez',
-      email: 'ana@miempresa.com',
-    },
-    notifications: {
-      cart: 25,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con notificaciones activas: cart con número (25) y bell con dot.',
-      },
-    },
-  },
-};
-
-export const SinNotificaciones: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Pedro Sánchez',
-      email: 'pedro@miempresa.com',
-    },
-    notifications: {
-      cart: 0,
-      bell: false,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar sin notificaciones visibles.',
-      },
-    },
-  },
-};
-
-export const MuchasNotificaciones: Story = {
-  args: {
-    productName: 'Sistema de Ventas',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Laura Rodríguez',
-      email: 'laura@ejemplo.com',
-    },
-    notifications: {
-      cart: 150,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Cuando cart > 99, muestra "+99" para mantener el badge compacto.',
-      },
-    },
-  },
-};
-
-// ============================================
-// 4. VARIANTES DE CONTENIDO
-// ============================================
-export const SinBadgeDeAmbiente: Story = {
-  args: {
-    productName: 'Plataforma Corporativa',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Roberto Díaz',
-      email: 'roberto@miempresa.com',
-    },
-    notifications: {
-      cart: 3,
-      bell: false,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar para ambiente de producción sin badge de ambiente.',
-      },
-    },
-  },
-};
-
-export const SoloElementosEsenciales: Story = {
-  args: {
-    productName: 'Portal Web',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Sofía Torres',
-      email: 'sofia@ejemplo.com',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con solo los elementos esenciales: logo, nombre y dropdown.',
-      },
-    },
-  },
-};
-
-export const NombreProductoLargo: Story = {
-  args: {
-    productName: 'Sistema Integrado de Gestión Empresarial Avanzada',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Diego Fernández',
-      email: 'diego@miempresa.com',
-    },
-    notifications: {
-      cart: 7,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo con nombre de producto largo para verificar comportamiento de truncado.',
-      },
-    },
-  },
-};
-
-export const ConRolEnLugarDeEmail: Story = {
-  args: {
-    productName: 'Panel de Administración',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Admin User',
-      role: 'Administrador',
-    },
-    notifications: {
-      cart: 0,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown mostrando rol en lugar de email.',
-      },
-    },
-  },
-};
-
-// ============================================
-// 5. HANDLERS DE EVENTOS
-// ============================================
-export const ConHandlers: Story = {
-  args: {
-    productName: 'Sistema con Handlers',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Test',
-      email: 'test@ejemplo.com',
-      onMenuClick: () => alert('Dropdown de usuario clickeado'),
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    onNavigationClick: () => alert('Botón de navegación clickeado'),
-    onSearchClick: () => alert('Botón de búsqueda clickeado'),
-    onCartClick: () => alert('Carrito clickeado'),
-    onNotificationsClick: () => alert('Notificaciones clickeado'),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con todos los handlers de eventos configurados. Haz click en cada elemento para ver las alertas.',
-      },
-    },
-  },
-};
-
-// ============================================
-// 6. DARK MODE
-// ============================================
-export const DarkMode: Story = {
-  args: {
-    productName: 'Sistema Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'María García',
-      email: 'maria@miempresa.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'responsive',
-  },
-  parameters: {
-    backgrounds: { default: 'dark' },
-    docs: {
-      description: {
-        story: `
-Navbar en dark mode con todos los tokens adaptativos:
-- Fondo: \`dark:bg-dark-bg-primary\`
-- Texto primario: \`dark:text-dark-content-primary\`
-- Texto secundario: \`dark:text-content-secondary\`
-- Bordes: \`dark:bg-dark-border-primary\`
-- Botón navegación: \`dark:bg-dark-bg-inverse\`
-- Hover: \`dark:hover:bg-dark-bg-secondary\`
-- Focus ring: \`dark:focus:ring-dark-border-custom\`
-        `,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="dark">
-        <div className="bg-dark-bg-primary p-6">
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-};
-
-export const DarkModeDesktop: Story = {
-  args: {
-    productName: 'Dashboard Ejecutivo',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Administrador',
-      email: 'admin@miempresa.com',
-    },
-    notifications: {
-      cart: 15,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: true,
-    showSiesaLogoLeading: false,
-    showSiesaLogoTrailing: true,
-  },
-  parameters: {
-    backgrounds: { default: 'dark' },
-    docs: {
-      description: {
-        story: 'Versión desktop con Business Logo en el leading y Siesa Logo en el trailing (dark mode).',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="dark">
-        <div className="bg-dark-bg-primary p-6 min-w-[1360px]">
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-};
-
-export const DarkModeMobile: Story = {
-  args: {
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Mobile',
-      email: 'mobile@ejemplo.com',
-    },
-    notifications: {
-      cart: 10,
-      bell: true,
-    },
-    variant: 'mobile',
-  },
-  parameters: {
-    backgrounds: { default: 'dark' },
-    docs: {
-      description: {
-        story: 'Versión mobile en dark mode.',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="dark">
-        <div className="bg-dark-bg-primary p-6 max-w-[428px]">
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-};
-
-// ============================================
-// 7. COMPARACIÓN VARIANTES
-// ============================================
-export const ComparacionVariantes: Story = {
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Desktop */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Versión Desktop (1360x64px)
-        </h3>
-        <div className="border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden min-w-[1360px]">
-          <Navbar
-            productName="Sistema Empresarial"
-            environmentBadge="Ambiente de Pruebas"
-            userDropdown={{
-              avatar: avatarExample,
-              name: 'Usuario Desktop',
-              email: 'usuario@ejemplo.com',
-            }}
-            notifications={{
-              cart: 10,
-              bell: true,
-            }}
-            variant="desktop"
-            showBusinessLogo={true}
-            showSiesaLogoLeading={false}
-            showSiesaLogoTrailing={true}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Business Logo en leading + Siesa Logo en trailing.
-        </p>
-      </div>
-
-      {/* Tablet */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Versión Tablet (1024x64px)
-        </h3>
-        <div className="w-[1024px] border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
-          <Navbar
-            productName="Sistema Empresarial"
-            environmentBadge="Ambiente de Pruebas"
-            userDropdown={{
-              avatar: avatarExample,
-              name: 'Usuario Tablet',
-              email: 'usuario@ejemplo.com',
-            }}
-            notifications={{
-              cart: 10,
-              bell: true,
-            }}
-            variant="tablet"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Similar a desktop pero con logos más pequeños y sin logo Siesa trailing.
-        </p>
-      </div>
-
-      {/* Mobile */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Versión Mobile (428x40px)
-        </h3>
-        <div className="max-w-[428px] border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
-          <Navbar
-            productName="Sistema Empresarial"
-            environmentBadge="Ambiente de Pruebas"
-            userDropdown={{
-              avatar: avatarExample,
-              name: 'Usuario Mobile',
-              email: 'usuario@ejemplo.com',
-            }}
-            notifications={{
-              cart: 10,
-              bell: true,
-            }}
-            variant="mobile"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Versión compacta: logo icono (30x30px), badge "Pruebas", botón búsqueda y avatar circular.
-        </p>
-      </div>
-
-      {/* Consejos */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <p className="text-xs text-content-primary dark:text-dark-content-primary">
-          <strong>Especificaciones Figma:</strong>
-          <br />• Desktop: 1360x64px - Todos los elementos visibles
-          <br />• Tablet: 1024x64px - Sin logo Siesa trailing
-          <br />• Mobile: 428x40px - Logo icono, badge corto, avatar circular
-          <br />• Variante responsive se adapta automáticamente usando breakpoints md: y lg:
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 8. ESTADOS DE FOCUS
-// ============================================
-export const EstadosFocus: Story = {
-  render: () => (
-    <div className="space-y-6 p-6">
-      <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-        Estados de Focus Adaptativos
-      </h3>
-      <div className="border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
-        <Navbar
-          productName="Plataforma de Gestión"
-          environmentBadge="Ambiente de Pruebas"
-          userDropdown={{
-            avatar: avatarExample,
-            name: 'Juan Pérez',
-            email: 'juan@ejemplo.com',
-          }}
-          notifications={{
-            cart: 3,
-            bell: true,
-          }}
-        />
-      </div>
-      <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-        <p className="text-xs text-content-primary dark:text-dark-content-primary">
-          <strong>Focus States:</strong>
-          <br />• Usa Tab para navegar por los elementos interactivos
-          <br />• Todos los botones tienen focus rings adaptativos:
-          <br />  - Light: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">focus:ring-primary-custom-400</code>
-          <br />  - Dark: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">dark:focus:ring-dark-border-custom</code>
-          <br />• Focus ring-offset respeta el color de fondo:
-          <br />  - Light: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">focus:ring-offset-2</code>
-          <br />  - Dark: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">dark:focus:ring-offset-dark-bg-primary</code>
-          <br />• Active state con <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">scale-95</code> para feedback visual
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 9. EJEMPLO COMPLETO CON LAYOUT
-// ============================================
-export const EjemploCompleto: Story = {
-  render: () => (
-    <div className="min-h-screen bg-background-secondary dark:bg-dark-bg-primary">
-      {/* Navbar fijo */}
-      <div className="sticky top-0 z-50 bg-background-primary dark:bg-dark-bg-primary border-b border-border-primary dark:border-dark-border-primary">
-        <Navbar
-          productName="Dashboard Ejecutivo"
-          environmentBadge="Ambiente de Pruebas"
-          userDropdown={{
-            avatar: avatarExample,
-            name: 'Administrador',
-            email: 'admin@miempresa.com',
-          }}
-          notifications={{
-            cart: 15,
-            bell: true,
-          }}
-        />
-      </div>
-
-      {/* Contenido de ejemplo */}
-      <div className="max-w-7xl mx-auto p-6">
-        <div className="bg-background-primary dark:bg-dark-bg-primary p-6 rounded-2xl border border-border-primary dark:border-dark-border-primary shadow-base">
-          <h2 className="text-content-primary dark:text-dark-content-primary font-bold text-2xl mb-4">
-            Contenido Principal
-          </h2>
-          <p className="text-content-secondary dark:text-content-secondary mb-4">
-            Este es un ejemplo de cómo el Navbar se integra con el resto de la aplicación.
-            La barra de navegación se mantiene fija en la parte superior y el contenido
-            fluye naturalmente debajo de ella.
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
-            {[1, 2, 3].map((i) => (
-              <div
-                key={i}
-                className="p-4 rounded-lg border border-border-primary dark:border-dark-border-primary bg-background-secondary dark:bg-dark-bg-secondary"
-              >
-                <h3 className="font-bold text-content-primary dark:text-dark-content-primary mb-2">
-                  Card {i}
-                </h3>
-                <p className="text-sm text-content-secondary dark:text-content-secondary">
-                  Contenido de ejemplo para demostrar la integración.
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 10. CON BUSINESS LOGO (Siesa Logo va al trailing)
-// ============================================
-export const ConBusinessLogo: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Test',
-      email: 'test@ejemplo.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: true,
-    showSiesaLogoLeading: false,
-    showSiesaLogoTrailing: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con Business Logo en el leading y Siesa Logo en el trailing. Usa esta configuración cuando quieras mostrar el logo del cliente/negocio.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="min-w-[1360px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 11. CON BUSINESS LOGO + SIESA LOGO EN LEADING
-// ============================================
-export const ConBusinessLogoYSiesaLeading: Story = {
-  args: {
-    productName: '',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Test',
-      email: 'test@ejemplo.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: true,
-    showSiesaLogoLeading: true,
-    showSiesaLogoTrailing: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con Botón + Business Logo + Siesa Logo en el leading. Esta variante muestra ambos logos juntos en el lado izquierdo.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="min-w-[1360px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};