siesa-ui-kit 1.0.5 → 1.0.7

package/src/components/POSProductSidebarItems/POSProductSidebarItems.tsx

@@ -1,332 +0,0 @@
-import React from 'react';
-import type { POSProductSidebarItemsProps } from './POSProductSidebarItems.types';
-import { Quantity } from '../Quantity/Quantity';
-import { TrashIcon } from './icons';
-
-/**
- * POSProductSidebarItems - Componente de item de producto para sidebar POS
- *
- * Componente pixel-perfect basado en Figma (node 4507-28013) para mostrar
- * productos en el sidebar de un sistema POS con soporte completo para dark mode.
- *
- * **Características:**
- * - Badge de categoría con 19 colores configurables
- * - Referencia del producto (text-[10px]/leading-3)
- * - Precio total (text-xs/font-bold)
- * - Nombre del producto (text-xs/font-bold)
- * - Descripción con items opcionales (fondo terciario)
- * - Control de cantidad integrado (Quantity component)
- * - Botón de eliminar con color de error
- *
- * **Especificaciones de Figma:**
- * - Ancho base: 272px
- * - Spacing: gap-1 (4px) entre elementos del producto, gap-2 (8px) entre secciones
- * - Badge: rounded-md (6px), px-1.5, py-1, text-xs/leading-4
- * - Description section: bg-background-tertiary, p-2, rounded-lg
- * - Delete icon: 24x24px, color red-700
- *
- * **Dark Mode:**
- * Los colores se adaptan automáticamente en dark mode:
- * - Textos principales: text-content-primary → dark:text-dark-content-primary
- * - Description background: bg-background-tertiary → dark:bg-zinc-700
- * - Badge colores: Mantienen contraste en ambos modos
- * - Delete button: text-red-700 → dark:text-red-500
- *
- * **Orden de modificadores:** {responsive}:{dark}:{state}:{utility}
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013 - Diseño Figma
- *
- * @example
- * ```tsx
- * <POSProductSidebarItems
- *   categoryLabel="Entradas"
- *   productRef="00147258369"
- *   price="$ 40,000.00"
- *   productName="Nombre producto"
- *   descriptionItems={[
- *     { description: "Papas limón mediana", price: "$ 40,000.00" },
- *     { description: "Papas limón mediana", price: "$ 40,000.00" },
- *   ]}
- *   quantity={0}
- *   onQuantityChange={(qty) => console.log(qty)}
- *   onDelete={() => console.log('Eliminar')}
- * />
- * ```
- */
-export const POSProductSidebarItems: React.FC<POSProductSidebarItemsProps> = ({
-  categoryLabel,
-  categoryColor = 'lime',
-  productRef,
-  price,
-  productName,
-  descriptionItems = [],
-  showDescription = true,
-  quantity = 0,
-  minQuantity = 0,
-  maxQuantity,
-  onQuantityChange,
-  onDelete,
-  disabled = false,
-  className = '',
-  deleteIcon,
-}) => {
-  // ===== MAPA DE COLORES PARA BADGES =====
-  // Basado en Figma node 4507-28432: bg lime-100 (#ecfccb) y text lime-700 (#4d7c0f)
-  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
-  const categoryColorClasses: Record<string, { bg: string; text: string }> = {
-    lime: {
-      bg: 'bg-lime-100 dark:bg-lime-900/40',
-      text: 'text-lime-700 dark:text-lime-300'
-    },
-    red: {
-      bg: 'bg-red-100 dark:bg-red-900/40',
-      text: 'text-red-700 dark:text-red-300'
-    },
-    orange: {
-      bg: 'bg-orange-100 dark:bg-orange-900/40',
-      text: 'text-orange-700 dark:text-orange-300'
-    },
-    amber: {
-      bg: 'bg-amber-100 dark:bg-amber-900/40',
-      text: 'text-amber-700 dark:text-amber-300'
-    },
-    yellow: {
-      bg: 'bg-yellow-100 dark:bg-yellow-900/40',
-      text: 'text-yellow-700 dark:text-yellow-300'
-    },
-    green: {
-      bg: 'bg-green-100 dark:bg-green-900/40',
-      text: 'text-green-700 dark:text-green-300'
-    },
-    emerald: {
-      bg: 'bg-emerald-100 dark:bg-emerald-900/40',
-      text: 'text-emerald-700 dark:text-emerald-300'
-    },
-    teal: {
-      bg: 'bg-teal-100 dark:bg-teal-900/40',
-      text: 'text-teal-700 dark:text-teal-300'
-    },
-    cyan: {
-      bg: 'bg-cyan-100 dark:bg-cyan-900/40',
-      text: 'text-cyan-700 dark:text-cyan-300'
-    },
-    sky: {
-      bg: 'bg-sky-100 dark:bg-sky-900/40',
-      text: 'text-sky-700 dark:text-sky-300'
-    },
-    blue: {
-      bg: 'bg-blue-100 dark:bg-blue-900/40',
-      text: 'text-blue-700 dark:text-blue-300'
-    },
-    indigo: {
-      bg: 'bg-indigo-100 dark:bg-indigo-900/40',
-      text: 'text-indigo-700 dark:text-indigo-300'
-    },
-    violet: {
-      bg: 'bg-violet-100 dark:bg-violet-900/40',
-      text: 'text-violet-700 dark:text-violet-300'
-    },
-    purple: {
-      bg: 'bg-purple-100 dark:bg-purple-900/40',
-      text: 'text-purple-700 dark:text-purple-300'
-    },
-    fuchsia: {
-      bg: 'bg-fuchsia-100 dark:bg-fuchsia-900/40',
-      text: 'text-fuchsia-700 dark:text-fuchsia-300'
-    },
-    pink: {
-      bg: 'bg-pink-100 dark:bg-pink-900/40',
-      text: 'text-pink-700 dark:text-pink-300'
-    },
-    rose: {
-      bg: 'bg-rose-100 dark:bg-rose-900/40',
-      text: 'text-rose-700 dark:text-rose-300'
-    },
-    zinc: {
-      bg: 'bg-zinc-100 dark:bg-zinc-800/50',
-      text: 'text-zinc-600 dark:text-zinc-300'
-    },
-    primary: {
-      bg: 'bg-primary-custom-100 dark:bg-primary-custom-600/30',
-      text: 'text-primary-custom-600 dark:text-primary-custom-300'
-    },
-  };
-
-  const colors = categoryColorClasses[categoryColor] || categoryColorClasses.lime;
-
-  // Handler para cambio de cantidad
-  const handleQuantityChange = (newQuantity: number) => {
-    if (!disabled && onQuantityChange) {
-      onQuantityChange(newQuantity);
-    }
-  };
-
-  // Handler para eliminar
-  const handleDelete = () => {
-    if (!disabled && onDelete) {
-      onDelete();
-    }
-  };
-
-  return (
-    <div
-      className={`
-        flex
-        flex-col
-        gap-2
-        w-full
-        ${disabled ? 'opacity-50 pointer-events-none' : ''}
-        ${className}
-      `.trim().replace(/\s+/g, ' ')}
-      data-component="POSProductSidebarItems"
-    >
-      {/* ===== BODY SECTION ===== */}
-      <div className="flex flex-col gap-2 w-full">
-        {/* ===== PRODUCT INFO ===== */}
-        <div className="flex flex-col gap-1 w-full">
-          {/* Row: Badge + Ref + Price - Figma node 4507:28398 */}
-          <div className="flex items-center gap-1 w-full">
-            {/* Col: Badge + Ref - Figma node 4507:28399 */}
-            <div className="flex items-center gap-2 flex-1 min-w-0">
-              {/* Category Badge - Figma node 4507:28432 */}
-              <div
-                className={`
-                  inline-flex
-                  items-center
-                  px-1.5
-                  py-1
-                  rounded-md
-                  transition-colors
-                  duration-150
-                  ${colors.bg}
-                `.trim().replace(/\s+/g, ' ')}
-              >
-                <span
-                  className={`
-                    text-xs
-                    leading-4
-                    font-normal
-                    text-center
-                    whitespace-nowrap
-                    ${colors.text}
-                  `.trim().replace(/\s+/g, ' ')}
-                >
-                  {categoryLabel}
-                </span>
-              </div>
-
-              {/* Product Reference - Figma node 4507:28401 - Paragraph/XXSmall 10px */}
-              <span className="text-[10px] leading-3 font-normal text-content-primary dark:text-dark-content-primary whitespace-nowrap">
-                {productRef}
-              </span>
-            </div>
-
-            {/* Col: Price - Figma node 4507:28450 - Label/Tiny 12px Bold */}
-            <div className="flex items-center shrink-0">
-              <span className="text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right">
-                {price}
-              </span>
-            </div>
-          </div>
-
-          {/* Row: Product Name - Figma node 4507:28404 - Label/Tiny 12px Bold */}
-          <div className="flex items-start w-full">
-            <span className="text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary flex-1 min-w-0">
-              {productName}
-            </span>
-          </div>
-        </div>
-
-        {/* ===== DESCRIPTION SECTION ===== */}
-        {/* Figma node 4507:28405 - Background tertiary con items de descripción */}
-        {showDescription && descriptionItems.length > 0 && (
-          <div
-            className={`
-              flex
-              flex-col
-              gap-2
-              p-2
-              rounded-lg
-              bg-background-secondary
-              dark:bg-zinc-700
-              w-full
-              transition-colors
-              duration-150
-            `.trim().replace(/\s+/g, ' ')}
-          >
-            {descriptionItems.map((item, index) => (
-              <div
-                key={index}
-                className="flex items-center gap-1 w-full"
-              >
-                {/* Description text - Figma Body/Small 12px Regular */}
-                <span className="flex-1 min-w-0 text-xs leading-3 font-normal text-content-primary dark:text-dark-content-primary">
-                  {item.description}
-                </span>
-                {/* Price - Figma Body/Small Bold 12px */}
-                <span className="text-xs leading-3 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right shrink-0">
-                  {item.price}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* ===== ACTIONS SECTION ===== */}
-      {/* Figma node 4507:28412 - Quantity control + Delete button */}
-      <div className="flex items-center justify-between w-full">
-        {/* Quantity Control - Figma width: 118px */}
-        <div className="w-[118px]">
-          <Quantity
-            value={quantity}
-            min={minQuantity}
-            max={maxQuantity}
-            onChange={handleQuantityChange}
-            disabled={disabled}
-          />
-        </div>
-
-        {/* Delete Button - Figma node 4514:28258 - 24x24px, color red-700 (#b91c1c) */}
-        <button
-          type="button"
-          onClick={handleDelete}
-          disabled={disabled}
-          className={`
-            flex
-            items-center
-            justify-center
-            w-6
-            h-6
-            rounded-md
-            text-red-700
-            dark:text-red-500
-            hover:text-red-800
-            dark:hover:text-red-400
-            hover:bg-red-50
-            dark:hover:bg-red-900/20
-            focus:outline-none
-            focus:ring-2
-            focus:ring-red-500/50
-            dark:focus:ring-red-400/50
-            focus:ring-offset-1
-            focus:ring-offset-white
-            dark:focus:ring-offset-dark-bg-primary
-            active:scale-95
-            transition-all
-            duration-150
-            ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
-          `.trim().replace(/\s+/g, ' ')}
-          aria-label="Eliminar producto"
-        >
-          {deleteIcon || <TrashIcon className="w-[18px] h-[21px]" />}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-POSProductSidebarItems.displayName = 'POSProductSidebarItems';

package/src/components/POSProductSidebarItems/POSProductSidebarItems.types.ts

@@ -1,119 +0,0 @@
-import type { ReactNode } from 'react';
-
-/**
- * Item de descripción del producto
- */
-export interface DescriptionItem {
-  /**
-   * Descripción del item (ej: "Papas limón mediana")
-   */
-  description: string;
-  /**
-   * Precio del item (ej: "$ 40,000.00")
-   */
-  price: string;
-}
-
-/**
- * Props del componente POSProductSidebarItems
- */
-export interface POSProductSidebarItemsProps {
-  /**
-   * Etiqueta de categoría del producto (ej: "Entradas")
-   */
-  categoryLabel: string;
-
-  /**
-   * Color de la categoría (badge)
-   * @default 'lime'
-   */
-  categoryColor?:
-    | 'lime'
-    | 'red'
-    | 'orange'
-    | 'amber'
-    | 'yellow'
-    | 'green'
-    | 'emerald'
-    | 'teal'
-    | 'cyan'
-    | 'sky'
-    | 'blue'
-    | 'indigo'
-    | 'violet'
-    | 'purple'
-    | 'fuchsia'
-    | 'pink'
-    | 'rose'
-    | 'zinc'
-    | 'primary';
-
-  /**
-   * Referencia del producto (ej: "00147258369")
-   */
-  productRef: string;
-
-  /**
-   * Precio total del producto (ej: "$ 40,000.00")
-   */
-  price: string;
-
-  /**
-   * Nombre del producto (ej: "Nombre producto")
-   */
-  productName: string;
-
-  /**
-   * Lista de items de descripción (opcional)
-   */
-  descriptionItems?: DescriptionItem[];
-
-  /**
-   * Si se muestra la sección de descripción
-   * @default true
-   */
-  showDescription?: boolean;
-
-  /**
-   * Cantidad actual del producto
-   * @default 0
-   */
-  quantity?: number;
-
-  /**
-   * Cantidad mínima permitida
-   * @default 0
-   */
-  minQuantity?: number;
-
-  /**
-   * Cantidad máxima permitida
-   */
-  maxQuantity?: number;
-
-  /**
-   * Handler cuando cambia la cantidad
-   */
-  onQuantityChange?: (quantity: number) => void;
-
-  /**
-   * Handler cuando se hace clic en eliminar
-   */
-  onDelete?: () => void;
-
-  /**
-   * Si el componente está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Icono personalizado para el botón de eliminar
-   */
-  deleteIcon?: ReactNode;
-}

package/src/components/POSProductSidebarItems/README.md

@@ -1,198 +0,0 @@
-# POSProductSidebarItems
-
-Componente pixel-perfect de item de producto para sidebar de sistema POS (Point of Sale).
-
-## Descripción
-
-Basado en [Figma node 4507-28013](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013&m=dev), este componente muestra información detallada de un producto en el sidebar de un sistema de punto de venta, incluyendo:
-
-- Badge de categoría con 19 colores configurables
-- Referencia del producto (text-[10px]/leading-3)
-- Precio total (text-xs/font-bold)
-- Nombre del producto (text-xs/font-bold)
-- Descripción con items opcionales (fondo terciario)
-- Control de cantidad integrado (Quantity component)
-- Botón de eliminar con estados hover/focus
-
-## Especificaciones de Figma
-
-| Propiedad | Valor |
-|-----------|-------|
-| Ancho base | 272px |
-| Spacing interno | gap-1 (4px), gap-2 (8px) |
-| Badge | rounded-md, px-1.5, py-1, text-xs |
-| Description | bg-background-secondary, p-2, rounded-lg |
-| Delete icon | 24x24px, color red-700 |
-
-## Uso Básico
-
-```tsx
-import { POSProductSidebarItems } from './components/POSProductSidebarItems';
-
-function App() {
-  const [quantity, setQuantity] = useState(1);
-
-  return (
-    <POSProductSidebarItems
-      categoryLabel="Entradas"
-      categoryColor="lime"
-      productRef="00147258369"
-      price="$ 40,000.00"
-      productName="Hamburguesa clásica"
-      descriptionItems={[
-        { description: 'Papas limón mediana', price: '$ 40,000.00' },
-        { description: 'Gaseosa 400ml', price: '$ 5,000.00' },
-      ]}
-      showDescription={true}
-      quantity={quantity}
-      onQuantityChange={(qty) => setQuantity(qty)}
-      onDelete={() => console.log('Eliminar producto')}
-    />
-  );
-}
-```
-
-## Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `categoryLabel` | `string` | - | Etiqueta de categoría del producto |
-| `categoryColor` | `CategoryColor` | `'lime'` | Color del badge de categoría (19 opciones) |
-| `productRef` | `string` | - | Referencia del producto |
-| `price` | `string` | - | Precio total del producto |
-| `productName` | `string` | - | Nombre del producto |
-| `descriptionItems` | `DescriptionItem[]` | `[]` | Lista de items de descripción |
-| `showDescription` | `boolean` | `true` | Si se muestra la sección de descripción |
-| `quantity` | `number` | `0` | Cantidad actual del producto |
-| `minQuantity` | `number` | `0` | Cantidad mínima permitida |
-| `maxQuantity` | `number` | - | Cantidad máxima permitida |
-| `onQuantityChange` | `(quantity: number) => void` | - | Handler cuando cambia la cantidad |
-| `onDelete` | `() => void` | - | Handler cuando se hace clic en eliminar |
-| `disabled` | `boolean` | `false` | Si el componente está deshabilitado |
-| `className` | `string` | `''` | Clases CSS adicionales |
-| `deleteIcon` | `ReactNode` | - | Icono personalizado para el botón de eliminar |
-
-## Colores de Categoría
-
-El componente soporta los siguientes colores para el badge de categoría:
-
-| Color | Light Mode | Dark Mode |
-|-------|------------|-----------|
-| `lime` (default) | bg-lime-100, text-lime-700 | bg-lime-900/40, text-lime-300 |
-| `red` | bg-red-100, text-red-700 | bg-red-900/40, text-red-300 |
-| `orange` | bg-orange-100, text-orange-700 | bg-orange-900/40, text-orange-300 |
-| `amber` | bg-amber-100, text-amber-700 | bg-amber-900/40, text-amber-300 |
-| `yellow` | bg-yellow-100, text-yellow-700 | bg-yellow-900/40, text-yellow-300 |
-| `green` | bg-green-100, text-green-700 | bg-green-900/40, text-green-300 |
-| `emerald` | bg-emerald-100, text-emerald-700 | bg-emerald-900/40, text-emerald-300 |
-| `teal` | bg-teal-100, text-teal-700 | bg-teal-900/40, text-teal-300 |
-| `cyan` | bg-cyan-100, text-cyan-700 | bg-cyan-900/40, text-cyan-300 |
-| `sky` | bg-sky-100, text-sky-700 | bg-sky-900/40, text-sky-300 |
-| `blue` | bg-blue-100, text-blue-700 | bg-blue-900/40, text-blue-300 |
-| `indigo` | bg-indigo-100, text-indigo-700 | bg-indigo-900/40, text-indigo-300 |
-| `violet` | bg-violet-100, text-violet-700 | bg-violet-900/40, text-violet-300 |
-| `purple` | bg-purple-100, text-purple-700 | bg-purple-900/40, text-purple-300 |
-| `fuchsia` | bg-fuchsia-100, text-fuchsia-700 | bg-fuchsia-900/40, text-fuchsia-300 |
-| `pink` | bg-pink-100, text-pink-700 | bg-pink-900/40, text-pink-300 |
-| `rose` | bg-rose-100, text-rose-700 | bg-rose-900/40, text-rose-300 |
-| `zinc` | bg-zinc-100, text-zinc-600 | bg-zinc-800/50, text-zinc-300 |
-| `primary` | bg-primary-custom-100, text-primary-custom-600 | bg-primary-custom-600/30, text-primary-custom-300 |
-
-## Ejemplos
-
-### Sin descripción
-
-```tsx
-<POSProductSidebarItems
-  categoryLabel="Bebidas"
-  categoryColor="cyan"
-  productRef="00258369147"
-  price="$ 5,000.00"
-  productName="Gaseosa 400ml"
-  showDescription={false}
-  quantity={2}
-  onQuantityChange={(qty) => setQuantity(qty)}
-  onDelete={() => handleDelete()}
-/>
-```
-
-### Con múltiples items de descripción
-
-```tsx
-<POSProductSidebarItems
-  categoryLabel="Combos"
-  categoryColor="blue"
-  productRef="00147258369"
-  price="$ 120,000.00"
-  productName="Combo mega familiar"
-  descriptionItems={[
-    { description: 'Hamburguesa doble x4', price: '$ 80,000.00' },
-    { description: 'Papas familiares x2', price: '$ 20,000.00' },
-    { description: 'Gaseosa 1.5L x2', price: '$ 12,000.00' },
-    { description: 'Postre brownie x4', price: '$ 8,000.00' },
-  ]}
-  showDescription={true}
-  quantity={1}
-  onQuantityChange={(qty) => setQuantity(qty)}
-  onDelete={() => handleDelete()}
-/>
-```
-
-### Deshabilitado
-
-```tsx
-<POSProductSidebarItems
-  categoryLabel="Entradas"
-  productRef="00147258369"
-  price="$ 40,000.00"
-  productName="Producto no disponible"
-  showDescription={false}
-  quantity={0}
-  disabled={true}
-  onQuantityChange={() => {}}
-  onDelete={() => {}}
-/>
-```
-
-## Dark Mode
-
-El componente tiene soporte completo para dark mode. Los colores se adaptan automáticamente cuando se activa la clase `dark` en el elemento raíz de la aplicación.
-
-### Tokens de Color (Dark Mode)
-
-| Elemento | Light Mode | Dark Mode |
-|----------|------------|-----------|
-| Texto principal | `text-content-primary` | `dark:text-dark-content-primary` |
-| Description background | `bg-background-secondary` | `dark:bg-zinc-700` |
-| Delete button | `text-red-700` | `dark:text-red-500` |
-| Delete hover | `hover:text-red-800` | `dark:hover:text-red-400` |
-| Delete hover bg | `hover:bg-red-50` | `dark:hover:bg-red-900/20` |
-| Focus ring | `focus:ring-red-500/50` | `dark:focus:ring-red-400/50` |
-
-## Accesibilidad
-
-- El botón de eliminar tiene `aria-label="Eliminar producto"`
-- Focus rings adaptativos con suficiente contraste en ambos modos
-- El componente soporta navegación por teclado (Tab)
-- Estados disabled aplicados correctamente con opacity 50%
-
-## Dependencias Internas
-
-Este componente utiliza:
-
-- `Quantity` - Control de cantidad integrado
-- `TrashIcon` - Icono de papelera (exportado desde `./icons.tsx`)
-
-## Referencias
-
-- **Figma**: [Ver diseño](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013&m=dev)
-- **docs/colors.md**: Sistema de colores
-- **docs/typography.md**: Sistema tipográfico
-- **docs/spacing.md**: Sistema de espaciado
-
-## Historial de Cambios
-
-| Versión | Fecha | Cambios |
-|---------|-------|---------|
-| 1.1.0 | 2025-12-02 | Dark mode completo, focus rings adaptativos, tokens del sistema |
-| 1.0.0 | - | Versión inicial |

package/src/components/POSProductSidebarItems/icons.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-/**
- * TrashIcon - Icono de papelera para eliminar items
- * Basado en Heroicons Micro (16x16px)
- */
-export const TrashIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path
-      fillRule="evenodd"
-      d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);