siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSProductSidebarItems/POSProductSidebarItems.tsx

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

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

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

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

package/{dist/components/POSProductSidebarItems/index.d.ts → src/components/POSProductSidebarItems/index.ts}

@@ -1,4 +1,3 @@
-export { POSProductSidebarItems } from './POSProductSidebarItems';
-export type { POSProductSidebarItemsProps, DescriptionItem } from './POSProductSidebarItems.types';
-export { TrashIcon } from './icons';
-//# sourceMappingURL=index.d.ts.map
+export { POSProductSidebarItems } from './POSProductSidebarItems';
+export type { POSProductSidebarItemsProps, DescriptionItem } from './POSProductSidebarItems.types';
+export { TrashIcon } from './icons';