siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSLocationButton/POSLocationButton.tsx

@@ -0,0 +1,247 @@
+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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,253 @@
+# 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

@@ -0,0 +1,120 @@
+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>
+);