siesa-ui-kit 1.0.4 → 1.0.6

package/src/components/POSLocationButton/POSLocationButton.tsx

@@ -1,247 +0,0 @@
-import React from 'react';
-import type { POSLocationButtonProps } from './POSLocationButton.types';
-import { CheckIcon, XMarkIcon, CalendarIcon, NoSymbolIcon, UsersIcon } from './icons';
-
-/**
- * POSLocationButton del sistema de diseño Siesa
- *
- * Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad
- * de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.
- *
- * **Estados de disponibilidad (status):**
- * - `available`: Disponible (verde/lime) con icono ✓
- * - `occupied`: Ocupada (naranja/yellow) con icono ✗
- * - `reserved`: Reservada (morado/purple) con icono 📅
- * - `outOfService`: Fuera de servicio (gris/zinc) con icono 🚫
- *
- * **Estados visuales (state):**
- * - `enabled`: Estado normal con fondo blanco/dark
- * - `actived`: Estado seleccionado con fondo coloreado
- *
- * **Características:**
- * - Ancho flexible: por defecto ocupa el 100% del contenedor (fullWidth=true)
- * - Altura fija: 68px (optimizado para interfaces POS)
- * - Muestra nombre de ubicación y capacidad (ej: "1/8 mesas")
- * - Badge visual con icono y texto del estado
- * - Dark mode completo en todos los estados
- * - Focus ring adaptativo
- * - Transiciones suaves
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * // Ubicación disponible
- * <POSLocationButton
- *   locationName="Antejardín"
- *   status="available"
- *   capacity={{ current: 1, total: 8 }}
- *   onClick={() => console.log('Seleccionado')}
- * />
- *
- * // Ubicación ocupada y seleccionada
- * <POSLocationButton
- *   locationName="Terraza"
- *   status="occupied"
- *   state="actived"
- *   capacity={{ current: 5, total: 8 }}
- * />
- *
- * // Ubicación reservada
- * <POSLocationButton
- *   locationName="Salón Principal"
- *   status="reserved"
- *   capacity={{ current: 3, total: 12 }}
- * />
- *
- * // Fuera de servicio
- * <POSLocationButton
- *   locationName="Bar"
- *   status="outOfService"
- *   disabled
- * />
- * ```
- */
-export const POSLocationButton: React.FC<POSLocationButtonProps> = ({
-  locationName,
-  status = 'available',
-  state = 'enabled',
-  capacity,
-  onClick,
-  disabled = false,
-  className = '',
-  ariaLabel,
-  fullWidth = true,
-}) => {
-  // ===== CONFIGURACIÓN DE COLORES POR STATUS =====
-  // Mapeo de colores según especificaciones de Figma (pixel-perfect)
-  const statusConfig = {
-    available: {
-      // Azul Primary Custom (según Figma: #0e79fd)
-      textColor: 'text-primary-custom-600 dark:text-primary-custom-600',
-      badgeBg: 'bg-primary-custom-100 dark:bg-blue-900/30',
-      badgeText: 'text-primary-custom-600 dark:text-blue-400',
-      activedBg: 'bg-primary-custom-100 dark:bg-blue-900/30',
-      icon: CheckIcon,
-      badgeLabel: 'Disponible',
-    },
-    occupied: {
-      // Naranja/Yellow (según Figma: #af460e para texto, #fcedc9 para fondo)
-      textColor: 'text-[#af460e] dark:text-orange-400',
-      badgeBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',
-      badgeText: 'text-[#af460e] dark:text-orange-400',
-      activedBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',
-      icon: XMarkIcon,
-      badgeLabel: 'Ocupada',
-    },
-    reserved: {
-      // Morado/Purple (según Figma: #7e22ce para texto, #f3e8ff para fondo)
-      textColor: 'text-[#7e22ce] dark:text-fuchsia-400',
-      badgeBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',
-      badgeText: 'text-[#7e22ce] dark:text-purple-400',
-      activedBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',
-      icon: CalendarIcon,
-      badgeLabel: 'Reservada',
-    },
-    outOfService: {
-      // Gris/Zinc (según Figma: #3f3f46 para texto, #f4f4f5 para fondo)
-      textColor: 'text-[#3f3f46] dark:text-zinc-400',
-      badgeBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',
-      badgeText: 'text-content-tertiary dark:text-zinc-400',
-      activedBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',
-      icon: NoSymbolIcon,
-      badgeLabel: 'F. de Servicio',
-    },
-  };
-
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
-
-  // ===== CLASES DE FONDO SEGÚN STATE =====
-  const backgroundClasses =
-    state === 'actived'
-      ? config.activedBg // Fondo coloreado cuando está activo
-      : 'bg-white dark:bg-dark-bg-primary'; // Fondo blanco/dark cuando está enabled
-
-  // ===== CLASES DE ANCHO =====
-  const widthClasses = fullWidth ? 'w-full' : 'w-[189px]';
-
-  // ===== CLASES BASE =====
-  const baseClasses = `
-    flex
-    flex-col
-    items-stretch
-    justify-between
-    ${widthClasses}
-    h-[68px]
-    p-2
-    rounded-lg
-    cursor-pointer
-    transition-all
-    duration-150
-    focus:outline-none
-    focus:ring-2
-    focus:ring-primary-custom-400
-    focus:ring-offset-2
-    dark:focus:ring-dark-border-custom
-    dark:focus:ring-offset-dark-bg-primary
-    hover:shadow-md
-    active:scale-[0.98]
-    disabled:opacity-50
-    disabled:cursor-not-allowed
-    disabled:pointer-events-none
-  `;
-
-  // ===== COMBINAR CLASES =====
-  const buttonClasses = [baseClasses, backgroundClasses, className]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== FORMATEAR TEXTO DE CAPACIDAD =====
-  const capacityText = capacity
-    ? `${capacity.current}/${capacity.total} mesas`
-    : null;
-
-  return (
-    <button
-      className={buttonClasses}
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={ariaLabel || `${locationName} - ${config.badgeLabel}`}
-      type="button"
-    >
-      {/* ===== TÍTULO (Nombre de ubicación) ===== */}
-      <div
-        className={`
-          text-base
-          font-bold
-          leading-6
-          ${config.textColor}
-        `
-          .replace(/\s+/g, ' ')
-          .trim()}
-      >
-        {locationName}
-      </div>
-
-      {/* ===== CONTENIDO (Capacidad + Badge) ===== */}
-      <div className="flex items-center justify-between">
-        {/* Capacidad (izquierda) */}
-        {capacityText && (
-          <div className="flex items-center gap-1">
-            <UsersIcon className={config.textColor} />
-            <span
-              className={`
-                text-[10px]
-                leading-[12px]
-                ${config.textColor}
-              `
-                .replace(/\s+/g, ' ')
-                .trim()}
-            >
-              {capacityText}
-            </span>
-          </div>
-        )}
-
-        {/* Badge (derecha) */}
-        <div
-          className={`
-            inline-flex
-            items-center
-            gap-1
-            px-1.5
-            py-1
-            rounded-md
-            ${config.badgeBg}
-          `
-            .replace(/\s+/g, ' ')
-            .trim()}
-        >
-          <StatusIcon className={config.badgeText} />
-          <span
-            className={`
-              text-xs
-              leading-4
-              ${config.badgeText}
-            `
-              .replace(/\s+/g, ' ')
-              .trim()}
-          >
-            {config.badgeLabel}
-          </span>
-        </div>
-      </div>
-    </button>
-  );
-};

package/src/components/POSLocationButton/POSLocationButton.types.ts

@@ -1,87 +0,0 @@
-import type { MouseEvent } from 'react';
-
-/**
- * Estado de disponibilidad de la ubicación POS
- * - available: Disponible (verde/lime)
- * - occupied: Ocupada (naranja/yellow)
- * - reserved: Reservada (morado/purple)
- * - outOfService: Fuera de servicio (gris/zinc)
- */
-export type POSLocationStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
-
-/**
- * Estado visual del botón
- * - enabled: Estado normal (fondo blanco/dark-bg-primary)
- * - actived: Estado activo/seleccionado (fondo con color del badge)
- */
-export type POSLocationState = 'enabled' | 'actived';
-
-/**
- * Información de capacidad de la ubicación
- */
-export interface POSLocationCapacity {
-  /**
-   * Número actual de mesas/espacios ocupados
-   */
-  current: number;
-
-  /**
-   * Total de mesas/espacios disponibles
-   */
-  total: number;
-}
-
-/**
- * Props del componente POSLocationButton
- */
-export interface POSLocationButtonProps {
-  /**
-   * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Salón Principal")
-   */
-  locationName: string;
-
-  /**
-   * Estado de disponibilidad de la ubicación
-   * @default 'available'
-   */
-  status?: POSLocationStatus;
-
-  /**
-   * Estado visual del botón (enabled o actived)
-   * @default 'enabled'
-   */
-  state?: POSLocationState;
-
-  /**
-   * Información de capacidad (mesas ocupadas/total)
-   * Ejemplo: { current: 1, total: 8 } → "1/8 mesas"
-   */
-  capacity?: POSLocationCapacity;
-
-  /**
-   * Función a ejecutar al hacer clic en el botón
-   */
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-
-  /**
-   * Si el botón está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Label para accesibilidad (ARIA)
-   */
-  ariaLabel?: string;
-
-  /**
-   * Si el botón ocupa todo el ancho disponible del contenedor padre
-   * @default true
-   */
-  fullWidth?: boolean;
-}

package/src/components/POSLocationButton/README.md

@@ -1,253 +0,0 @@
-# POSLocationButton
-
-Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.
-
-## 📋 Características
-
-- ✅ **4 estados de disponibilidad**: Available, Occupied, Reserved, Out of Service
-- ✅ **2 estados visuales**: Enabled (normal) y Actived (seleccionado)
-- ✅ **Información de capacidad**: Muestra mesas ocupadas/total
-- ✅ **Iconos visuales**: Cada estado tiene su icono distintivo
-- ✅ **Dark mode completo**: Todos los estados adaptados para modo oscuro
-- ✅ **Tamaño fijo**: 189x68px optimizado para interfaces POS
-- ✅ **Accesibilidad**: ARIA labels y estados semánticos
-- ✅ **TypeScript**: Type safety completo
-
-## 🎨 Estados de Disponibilidad
-
-| Status | Color | Icono | Uso |
-|--------|-------|-------|-----|
-| `available` | Verde/Lime | ✓ | Ubicación disponible para asignar |
-| `occupied` | Naranja/Yellow | ✗ | Ubicación actualmente en uso |
-| `reserved` | Morado/Purple | 📅 | Ubicación reservada para uso futuro |
-| `outOfService` | Gris/Zinc | 🚫 | Ubicación fuera de servicio temporalmente |
-
-## 🔧 Estados Visuales
-
-| State | Descripción | Uso |
-|-------|-------------|-----|
-| `enabled` | Estado normal con fondo blanco/dark | Vista por defecto |
-| `actived` | Estado seleccionado con fondo coloreado | Ubicación actualmente seleccionada en la interfaz |
-
-## 📦 Instalación
-
-```tsx
-import { POSLocationButton } from '@/components/POSLocationButton';
-```
-
-## 🚀 Uso Básico
-
-```tsx
-// Ubicación disponible
-<POSLocationButton
-  locationName="Antejardín"
-  status="available"
-  capacity={{ current: 1, total: 8 }}
-  onClick={() => console.log('Seleccionado')}
-/>
-```
-
-## 📖 Ejemplos
-
-### Dashboard de Restaurante
-
-```tsx
-<div className="grid grid-cols-2 gap-3">
-  <POSLocationButton
-    locationName="Antejardín"
-    status="available"
-    capacity={{ current: 1, total: 8 }}
-  />
-  <POSLocationButton
-    locationName="Terraza"
-    status="occupied"
-    capacity={{ current: 5, total: 8 }}
-  />
-  <POSLocationButton
-    locationName="Salón Principal"
-    status="reserved"
-    capacity={{ current: 3, total: 12 }}
-  />
-  <POSLocationButton
-    locationName="Bar"
-    status="outOfService"
-    disabled
-  />
-</div>
-```
-
-### Ubicación Seleccionada
-
-```tsx
-// Estado normal
-<POSLocationButton
-  locationName="Terraza"
-  status="available"
-  capacity={{ current: 2, total: 10 }}
-/>
-
-// Estado seleccionado (actived)
-<POSLocationButton
-  locationName="Salón VIP"
-  status="available"
-  state="actived"
-  capacity={{ current: 1, total: 6 }}
-/>
-```
-
-### Sin Información de Capacidad
-
-```tsx
-<POSLocationButton
-  locationName="Área de Espera"
-  status="available"
-/>
-```
-
-### Ubicación Deshabilitada
-
-```tsx
-<POSLocationButton
-  locationName="Bar"
-  status="outOfService"
-  disabled
-/>
-```
-
-## 🎯 Props
-
-### POSLocationButtonProps
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `locationName` | `string` | **requerido** | Nombre de la ubicación (ej: "Antejardín", "Terraza") |
-| `status` | `POSLocationStatus` | `'available'` | Estado de disponibilidad |
-| `state` | `POSLocationState` | `'enabled'` | Estado visual del botón |
-| `capacity` | `POSLocationCapacity` | `undefined` | Información de capacidad (mesas ocupadas/total) |
-| `onClick` | `(event) => void` | `undefined` | Función a ejecutar al hacer clic |
-| `disabled` | `boolean` | `false` | Si el botón está deshabilitado |
-| `className` | `string` | `''` | Clases CSS adicionales |
-| `ariaLabel` | `string` | `undefined` | Label para accesibilidad (ARIA) |
-
-### POSLocationStatus
-
-```typescript
-type POSLocationStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
-```
-
-### POSLocationState
-
-```typescript
-type POSLocationState = 'enabled' | 'actived';
-```
-
-### POSLocationCapacity
-
-```typescript
-interface POSLocationCapacity {
-  current: number;  // Número actual de mesas/espacios ocupados
-  total: number;    // Total de mesas/espacios disponibles
-}
-```
-
-## 🎨 Especificaciones de Diseño
-
-### Tamaños
-
-- **Ancho**: 189px (fijo)
-- **Alto**: 68px (fijo)
-- **Padding**: 8px
-- **Border radius**: 8px (rounded-lg)
-
-### Tipografía
-
-- **Título (locationName)**: 16px Bold (text-base font-bold), line-height 24px
-- **Capacidad**: 10px Regular, line-height 12px
-- **Badge**: 12px Regular (text-xs), line-height 16px
-
-### Colores (Light Mode)
-
-| Status | Texto | Badge Fondo | Badge Texto |
-|--------|-------|-------------|-------------|
-| `available` | `#4d7c0f` (lime-700) | `#ecfccb` (lime-100) | `#4d7c0f` (lime-700) |
-| `occupied` | `#af460e` (orange-700) | `#fcedc9` (yellow-100) | `#af460e` (orange-700) |
-| `reserved` | `#7e22ce` (purple-700) | `#f3e8ff` (purple-100) | `#7e22ce` (purple-700) |
-| `outOfService` | `#3f3f46` (zinc-700) | `#f4f4f5` (zinc-100) | `#71717a` (zinc-500) |
-
-### Colores (Dark Mode)
-
-| Status | Texto | Badge Fondo | Badge Texto |
-|--------|-------|-------------|-------------|
-| `available` | `#4d7c0f` (lime-700) | `lime-900/30` | `#a3e635` (lime-400) |
-| `occupied` | `#af460e` (orange-700) | `yellow-900/30` | `#facc15` (yellow-400) |
-| `reserved` | `#7e22ce` (purple-700) | `purple-900/30` | `#c084fc` (purple-400) |
-| `outOfService` | `#3f3f46` (zinc-700) | `zinc-800/30` | `#a1a1aa` (zinc-400) |
-
-## ♿ Accesibilidad
-
-- **ARIA labels**: Cada botón incluye un aria-label descriptivo por defecto
-- **Estados semánticos**: Los estados disabled y actived son accesibles
-- **Contraste**: Todos los colores cumplen con WCAG AA
-- **Focus ring**: Anillo de enfoque visible y adaptativo
-
-## 🌓 Dark Mode
-
-El componente se adapta automáticamente al modo oscuro usando la estrategia `class` de Tailwind CSS. Todos los colores tienen variantes dark optimizadas para mantener la legibilidad y el contraste.
-
-## 🔗 Archivos Relacionados
-
-- `POSLocationButton.tsx` - Componente principal
-- `POSLocationButton.types.ts` - TypeScript types
-- `POSLocationButton.stories.tsx` - Stories de Storybook
-- `icons.tsx` - Iconos del componente
-- `index.ts` - Exports
-
-## 📚 Referencias
-
-- **Figma**: [POSLocationButton Specs](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-30644)
-- **Documentación**: `docs/colors.md`, `docs/typography.md`, `docs/spacing.md`
-- **Referencia**: `src/components/Button/` - Patrón de implementación
-
-## ✅ Checklist de Implementación
-
-- [x] Componente con JSDoc completo
-- [x] Dark mode en todos los estados
-- [x] TypeScript types estrictos
-- [x] 4 estados de disponibilidad (available, occupied, reserved, outOfService)
-- [x] 2 estados visuales (enabled, actived)
-- [x] Información de capacidad opcional
-- [x] Iconos visuales distintivos
-- [x] Focus rings adaptativos
-- [x] Stories de Storybook completas
-- [x] README con ejemplos
-- [x] Accesibilidad (ARIA)
-- [x] Validación con build
-
-## 🎯 Casos de Uso
-
-### ✅ Ideal para:
-
-- Sistemas POS de restaurantes
-- Gestión de mesas y ubicaciones
-- Dashboards de disponibilidad
-- Interfaces de asignación de recursos
-- Aplicaciones de reservas
-
-### ❌ No usar para:
-
-- Botones de acción genéricos (usar `Button` en su lugar)
-- Navegación principal (usar `NavigationBar` o `NavigationRail`)
-- Formularios (usar `Button` estándar)
-
-## 📝 Notas
-
-- El componente tiene un tamaño fijo de 189x68px optimizado para interfaces POS
-- Si no se proporciona `capacity`, solo se muestra el nombre y el estado
-- El estado `actived` es puramente visual y debe ser manejado por el componente padre
-- Para interfaces responsive, considera usar un grid adaptativo para organizar múltiples botones
-
----
-
-**Versión**: 1.0.0
-**Última actualización**: 2025-11-24
-**Mantenido por**: Equipo Siesa UI Kit

package/src/components/POSLocationButton/icons.tsx

@@ -1,120 +0,0 @@
-import React from 'react';
-
-/**
- * Icono Check (✓) para estado Available
- * Tamaño: 12x12px
- */
-export const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M10 3L4.5 8.5L2 6"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-/**
- * Icono X Mark para estado Occupied
- * Tamaño: 12x12px
- */
-export const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M9 3L3 9M3 3L9 9"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-/**
- * Icono Calendar para estado Reserved
- * Tamaño: 12x12px
- */
-export const CalendarIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M10.5 5H1.5M8.5 1V3M3.5 1V3M3.25 11H8.75C9.57843 11 10.25 10.3284 10.25 9.5V3.5C10.25 2.67157 9.57843 2 8.75 2H3.25C2.42157 2 1.75 2.67157 1.75 3.5V9.5C1.75 10.3284 2.42157 11 3.25 11Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-/**
- * Icono No Symbol (Prohibido) para estado Out of Service
- * Tamaño: 12x12px
- */
-export const NoSymbolIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M10.5 6C10.5 8.48528 8.48528 10.5 6 10.5C3.51472 10.5 1.5 8.48528 1.5 6C1.5 3.51472 3.51472 1.5 6 1.5C8.48528 1.5 10.5 3.51472 10.5 6Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M9.18198 2.81802L2.81802 9.18198"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-/**
- * Icono de Usuario/Personas para mostrar capacidad
- * Tamaño: 13x10px (según especificaciones de Figma)
- */
-export const UsersIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    width="13"
-    height="10"
-    viewBox="0 0 13 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M9.25 9V8C9.25 6.89543 8.35457 6 7.25 6H2.75C1.64543 6 0.75 6.89543 0.75 8V9M12.25 9V8C12.25 6.89543 11.3546 6 10.25 6H9.75M7 2.5C7 3.60457 6.10457 4.5 5 4.5C3.89543 4.5 3 3.60457 3 2.5C3 1.39543 3.89543 0.5 5 0.5C6.10457 0.5 7 1.39543 7 2.5ZM10 2C10 2.82843 9.32843 3.5 8.5 3.5C7.67157 3.5 7 2.82843 7 2C7 1.17157 7.67157 0.5 8.5 0.5C9.32843 0.5 10 1.17157 10 2Z"
-      stroke="currentColor"
-      strokeWidth="1"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);