neogestify-ui-components 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neogestify-ui-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Biblioteca de componentes UI reutilizables con React, Tailwind y SweetAlert",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -29,7 +29,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "tsup",

package/src/components/alerts/alerta.ts

@@ -0,0 +1,91 @@
+import Swal from "sweetalert2";
+
+interface AlertaOptions {
+    title: string;
+    text: string;
+    icon: 'success' | 'error' | 'warning' | 'info' | 'question';
+    confirmButtonText?: string;
+    showCancelButton?: boolean;
+    cancelButtonText?: string;
+    showDenyButton?: boolean;
+    denyButtonText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onDeny?: () => void;
+    toast?: boolean;
+    timer?: number;
+    position?: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    input?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'range' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url';
+    inputLabel?: string;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    inputValidator?: (value: unknown) => string | null | Promise<string | null>;
+    inputAttributes?: Record<string, string>;
+}
+
+export async function Alerta(options: AlertaOptions) {
+    const theme = localStorage.getItem('theme');
+
+    const isDark = theme === 'dark';
+
+    const result = await Swal.fire({
+        title: options.title,
+        text: options.text,
+        icon: options.icon,
+        confirmButtonText: options.confirmButtonText || 'Aceptar',
+        showCancelButton: options.showCancelButton || false,
+        cancelButtonText: options.cancelButtonText || 'Cancelar',
+        showDenyButton: options.showDenyButton || false,
+        denyButtonText: options.denyButtonText || 'No',
+        background: isDark ? '#1f2937' : '#f9fafb',
+        color: isDark ? '#f9fafb' : '#1f2937',
+        customClass: {
+            popup: isDark ? 'swal-dark-popup' : 'swal-light-popup',
+            title: isDark ? 'swal-dark-title' : 'swal-light-title',
+            confirmButton: isDark ? 'swal-dark-confirm' : 'swal-light-confirm',
+            cancelButton: isDark ? 'swal-dark-cancel' : 'swal-light-cancel',
+            denyButton: isDark ? 'swal-dark-deny' : 'swal-light-deny'
+        },
+        toast: options.toast || false,
+        timer: options.timer,
+        position: options.position || 'center',
+        showConfirmButton: !options.toast && !options.timer,
+        timerProgressBar: options.toast || !!options.timer,
+        allowOutsideClick: options.allowOutsideClick !== false, // Por defecto true
+        allowEscapeKey: options.allowEscapeKey !== false, // Por defecto true
+        input: options.input,
+        inputLabel: options.inputLabel,
+        inputPlaceholder: options.inputPlaceholder,
+        inputValue: options.inputValue,
+        inputValidator: options.inputValidator,
+        inputAttributes: options.inputAttributes
+    });
+
+    if (result.isConfirmed && options.onConfirm) {
+        options.onConfirm();
+    } else if (result.isDenied && options.onDeny) {
+        options.onDeny();
+    } else if (result.isDismissed && options.onCancel) {
+        options.onCancel();
+    }
+
+    return result;
+}
+
+// Funciones de conveniencia para casos comunes
+export const AlertaExito = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'success', confirmButtonText: 'Aceptar', onConfirm, ...options });
+
+export const AlertaError = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'error', confirmButtonText: 'Aceptar', onConfirm, ...options });
+
+export const AlertaAdvertencia = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'warning', confirmButtonText: 'Sí, continuar', cancelButtonText: 'Cancelar', showCancelButton: true, onConfirm, onCancel, ...options });
+
+export const AlertaConfirmacion = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'question', confirmButtonText: 'Sí', cancelButtonText: 'No', showCancelButton: true, onConfirm, onCancel, ...options });
+
+export const AlertaToast = (title: string, text: string, icon: 'success' | 'error' | 'warning' | 'info' = 'info', timer: number = 3000, position: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end' = 'top-end') =>
+    Alerta({ title, text, icon, toast: true, timer, position });

package/src/components/alerts/index.ts

@@ -0,0 +1 @@
+export * from './alerta';

package/src/components/html/Button.tsx

@@ -0,0 +1,72 @@
+import { AnimateSpin } from '../icons/icons';
+import { type ButtonHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle';
+  children: ReactNode;
+  isLoading?: boolean;
+  loadingText?: string;
+  isActive?: boolean;
+}
+
+export const Button: FC<ButtonProps> = ({
+  variant = 'primary',
+  children,
+  isLoading = false,
+  loadingText,
+  isActive = false,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const baseClasses = 'transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed hover:cursor-pointer';
+
+  const variantClasses = {
+    primary: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    secondary: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    icon: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    danger: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    success: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    outline: 'py-2 px-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    nav: 'w-full flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 hover:scale-105 text-gray-700 dark:text-gray-300 dark:hover:text-white hover:shadow-lg',
+    custom: "",
+    link: 'text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors duration-200',
+    warning: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    toggle: 'px-2 py-2 rounded-lg font-medium transition-all duration-200 disabled:cursor-not-allowed border-2 focus:outline-none focus:ring-2 focus:ring-indigo-500'
+  };
+
+  let classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
+
+  if (variant === 'nav' && isActive) {
+    classes += ' bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105';
+  }
+
+  if (variant === 'nav' && !isActive) {
+    classes += ' hover:bg-white dark:hover:bg-gray-700 hover:shadow-lg';
+  }
+
+  if (variant === 'toggle') {
+    if (isActive) {
+      classes += ' bg-indigo-600 text-white border-indigo-500 hover:bg-indigo-700';
+    } else {
+      classes += ' bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 hover:border-gray-400 dark:hover:border-gray-500';
+    }
+  }
+
+  return (
+    <button
+      className={classes}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <>
+          <AnimateSpin className="h-5 w-5 mr-2 inline-block text-current" />
+          {loadingText || 'Cargando...'}
+        </>
+      ) : (
+        children
+      )}
+    </button>
+  );
+};

package/src/components/html/Form.tsx

@@ -0,0 +1,40 @@
+import { type FormHTMLAttributes, type FC, type FormEvent, type ReactNode } from 'react';
+
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    children: ReactNode;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
+}
+
+export const Form: FC<FormProps> = ({ onSubmit, children, variant = 'default', className = '', ...props }) => {
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(e);
+        }
+    };
+
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'modal':
+                return 'flex-1 px-6 py-4 overflow-y-auto';
+            case 'card':
+                return 'p-6 space-y-6';
+            case 'inline':
+                return 'flex flex-wrap gap-4 items-end';
+            case 'compact':
+                return 'space-y-3';
+            case 'default':
+            default:
+                return 'space-y-4';
+        }
+    };
+
+    const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+
+    return (
+        <form onSubmit={handleSubmit} className={combinedClassName} {...props}>
+            {children}
+        </form>
+    );
+};

package/src/components/html/Input.tsx

@@ -0,0 +1,91 @@
+import { type InputHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string | ReactNode;
+  error?: string;
+  helperText?: string;
+}
+
+export const Input: FC<InputProps> = ({
+  label,
+  error,
+  helperText,
+  className = '',
+  id,
+  type,
+  ...props
+}) => {
+  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
+  const baseClasses = 'appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
+
+  const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : 'border-gray-300 dark:border-gray-600';
+
+  const classes = `${baseClasses} ${errorClasses} ${className}`;
+
+  if (type === 'checkbox') {
+    return (
+      <div className="space-y-1 w-full">
+        <div className="flex items-center space-x-2">
+          <input
+            id={inputId}
+            type="checkbox"
+            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+            {...props}
+          />
+          {label && typeof label === 'string' ? (
+            <label
+              htmlFor={inputId}
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              {label}
+            </label>
+          ) : (
+            label
+          )}
+        </div>
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1 w-full">
+      {label && typeof label === 'string' ? (
+        <label
+          htmlFor={inputId}
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          {label}
+        </label>
+      ) : (
+        label
+      )}
+      <input
+        id={inputId}
+        className={classes}
+        type={type}
+        {...props}
+      />
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+          {error}
+        </p>
+      )}
+      {helperText && !error && (
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/html/Modal.tsx

@@ -0,0 +1,80 @@
+import { Button } from './Button';
+import { CloseIcon } from '../icons/icons';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+
+interface ModalProps {
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    maxWidth?: string;
+    showCloseButton?: boolean;
+    zIndex?: number;
+}
+
+export interface ModalRef {
+    handleClose: () => void;
+}
+
+export const Modal = forwardRef<ModalRef, ModalProps>(({
+    onClose,
+    title,
+    children,
+    footer,
+    maxWidth = 'max-w-2xl',
+    showCloseButton = true,
+    zIndex = 50
+}, ref) => {
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        setShow(true);
+    }, []);
+
+    const handleClose = () => {
+        setShow(false);
+        setTimeout(() => {
+            onClose();
+        }, 300);
+    };
+
+    useImperativeHandle(ref, () => ({
+        handleClose
+    }));
+
+    return (
+        <dialog
+            open={show}
+            className={`fixed inset-0 w-full h-full flex items-center justify-center p-4 ${show && 'opacity-100'} transition-opacity opacity-0 duration-300 bg-gray-900/60 backdrop-blur-sm`}
+            style={{ zIndex: zIndex - 10 }}
+        >
+            <article
+                className={`relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${maxWidth} max-h-[90vh] flex flex-col overflow-hidden`}
+                style={{ zIndex }}
+            >
+                <header className="shrink-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between">
+                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h2>
+                    {showCloseButton && (
+                        <Button
+                            variant='icon'
+                            onClick={handleClose}
+                            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                        >
+                            <CloseIcon className="w-5 h-5" />
+                        </Button>
+                    )}
+                </header>
+                <div className="flex-1 overflow-y-auto p-6">
+                    {children}
+                </div>
+                {footer && (
+                    <footer className="shrink-0 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-end gap-3">
+                        {footer}
+                    </footer>
+                )}
+            </article>
+        </dialog>
+    );
+});
+
+Modal.displayName = 'Modal';

package/src/components/html/Select.tsx

@@ -0,0 +1,77 @@
+import { type SelectHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface Option {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  selected?: boolean;
+}
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  options: Option[];
+  placeholder?: string;
+  variant?: 'default' | 'small';
+  error?: boolean;
+  helperText?: string;
+  label?: string | ReactNode;
+}
+
+export const Select: FC<SelectProps> = ({
+  options,
+  placeholder,
+  variant = 'default',
+  error = false,
+  helperText,
+  label,
+  className = '',
+  id,
+  ...props
+}) => {
+  const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
+
+  const getVariantClasses = () => {
+    const baseClasses = 'w-full bg-white dark:bg-gray-700 border rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-colors';
+
+    if (variant === 'small') {
+      return `${baseClasses} px-2.5 py-1.5 text-sm border-gray-300 dark:border-gray-600`;
+    }
+
+    return `${baseClasses} px-3 py-2 border-gray-300 dark:border-gray-600 ${error ? 'border-red-300 dark:border-red-600 focus:ring-red-500' : ''}`;
+  };
+
+  const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+
+  return (
+    <div className="space-y-1 w-full">
+      {label && typeof label === 'string' ? (
+        <label htmlFor={selectId} className="block text-xs font-normal text-gray-700 dark:text-gray-300">
+          {label}
+        </label>
+      ) : (
+        label
+      )}
+      <select id={selectId} className={combinedClassName} {...props}>
+        {placeholder && placeholder.trim() && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            selected={option.selected}
+          >
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {helperText && (
+        <p className={`mt-1 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400'}`}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/html/Table.tsx

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+
+interface TableProps {
+    headers: ReactNode[];
+    rows: ReactNode[][];
+    variant?: 'default' | 'custom';
+    className?: string;
+    thClassName?: string;
+    tdClassName?: string;
+}
+
+export function Table({
+    headers,
+    rows,
+    variant = 'default',
+    className = '',
+    thClassName = '',
+    tdClassName = ''
+}: TableProps) {
+    const baseTableClass = variant === 'default'
+        ? 'w-full table-auto border-collapse border border-gray-300 dark:border-gray-600 min-w-full'
+        : '';
+
+    const baseThClass = variant === 'default'
+        ? 'border border-gray-300 dark:border-gray-600 px-4 py-2 text-left text-gray-900 dark:text-white'
+        : '';
+
+    const baseTdClass = variant === 'default'
+        ? 'border border-gray-300 dark:border-gray-600 px-4 py-2 text-gray-900 dark:text-white'
+        : '';
+
+    const tableClass = `${baseTableClass} ${className}`.trim();
+    const thClass = `${baseThClass} ${thClassName}`.trim();
+    const tdClass = `${baseTdClass} ${tdClassName}`.trim();
+
+    return (
+        <div className="overflow-x-auto w-full">
+            <table className={tableClass}>
+                <thead>
+                    <tr className={variant === 'default' ? 'bg-gray-100 dark:bg-gray-700' : ''}>
+                        {headers.map((header, index) => (
+                            <th key={index} className={thClass}>
+                                {header}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {rows.map((row, rowIndex) => (
+                        <tr key={rowIndex} className={variant === 'default' ? 'hover:bg-gray-50 dark:hover:bg-gray-600' : ''}>
+                            {row.map((cell, cellIndex) => (
+                                <td key={cellIndex} className={tdClass}>
+                                    {cell}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}

package/src/components/html/index.ts

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export { Input } from './Input';
+export { Form } from './Form';
+export { Select } from './Select';
+export { Table } from './Table';
+export { Modal, type ModalRef } from './Modal';

package/src/components/icons/icons.tsx

@@ -0,0 +1,547 @@
+import type { Props } from "../../types/types";
+
+// Spinner de carga animado
+export function SpinnerIcon({ className = "" }: { className?: string }) {
+    return (
+        <svg className={`animate-spin h-8 w-8 text-indigo-600 mx-auto mb-4 ${className}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+        </svg>
+    );
+}
+
+export function AnimateSpin({ className }: Props) {
+    return (
+        <svg
+            className={`animate-spin ${className}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"
+        >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+        </svg>
+    )
+}
+export function GearIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
+        >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+    )
+}
+
+export function CheckIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+    )
+}
+
+export function BackIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+        </svg>
+    )
+}
+
+export function NotFoundIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+    )
+}
+
+export function BoxIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+    )
+}
+
+export function ChartIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+            />
+        </svg>
+    )
+}
+
+export function UsersIcon({ className }: Props) {
+    return (
+        <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 2a5 5 0 1 0 5 5a5 5 0 0 0-5-5m0 8a3 3 0 1 1 3-3a3 3 0 0 1-3 3m9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z" />
+        </svg>
+    )
+}
+
+export function DocumentIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+        </svg>
+    )
+}
+
+export function LogoutIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+            />
+        </svg>
+    )
+}
+
+export function TruckIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+            />
+        </svg>
+    )
+}
+
+export function HomeIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+            />
+        </svg>
+    )
+}
+
+export function BuildingIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+            />
+        </svg>
+    )
+}
+
+export function CashIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
+            />
+        </svg>
+    )
+}
+
+export function MenuIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+            />
+        </svg>
+    )
+}
+
+export function CloseIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+            />
+        </svg>
+    )
+}
+
+export function AddIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+    )
+}
+
+export function SearchIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+            />
+        </svg>
+    )
+}
+
+export function SaveIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+            />
+        </svg>
+    )
+}
+
+export function CancelIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+            />
+        </svg>
+    )
+}
+
+export function DeleteIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+        </svg>
+    )
+}
+
+export function EditIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+            />
+        </svg>
+    )
+}
+
+export function CategorieIcon({ className }: Props) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24"><path fill="currentColor" d="M11.15 3.4L7.43 9.48c-.41.66.07 1.52.85 1.52h7.43c.78 0 1.26-.86.85-1.52L12.85 3.4a.993.993 0 0 0-1.7 0" /><circle cx="17.5" cy="17.5" r="4.5" fill="currentColor" /><path fill="currentColor" d="M4 21.5h6c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1" /></svg>
+    )
+}
+
+export function FolderIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+            />
+        </svg>
+    )
+}
+
+export function ArrowIcon({ className }: Props) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24"><path fill="currentColor" d="M17.77 3.77L16 2L6 12l10 10l1.77-1.77L9.54 12z" /></svg>
+    )
+}
+
+export function FilterIcon({ className }: Props) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.36 20.213L9 21v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12m0 6a3 3 0 1 0 6 0a3 3 0 1 0-6 0m5.2 2.2L22 22" /></svg>
+    )
+}
+
+export function QuestionIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    )
+}
+
+export function LocationIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+    )
+}
+
+export function CalendarIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+    )
+}
+
+export function InfoIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    )
+}
+
+export function MoonIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+    )
+}
+
+export function SunIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+    )
+}
+
+export function CamaraIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+    )
+}
+
+export function ArrowLeftIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+    )
+}
+
+export function ArrowRightIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+    )
+}
+
+export function TrashIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        </svg>
+    )
+}
+
+export function MinusIcon({ className }: { className?: string }) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+        </svg>
+    );
+}
+
+export function MoneyIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    )
+}
+
+export function PercentIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        </svg>
+    )
+}
+
+export function StackIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7h16M4 12h16M4 17h16" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 3v18M17 3v18" />
+        </svg>
+    )
+}
+
+export function ClockIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    )
+}
+
+export function CheckCircleIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    )
+}
+
+export function CajasIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+        </svg>
+    )
+}
+
+export function PrinterIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+        </svg>
+    )
+}
+
+export function NetworkIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+        </svg>
+    )
+}
+
+export function TestIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+        </svg>
+    )
+}
+
+export function FacturacionIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 6l4 4" />
+            <text x="12" y="16" fontSize="8" fill="currentColor" textAnchor="middle">$</text>
+        </svg>
+    )
+}
+
+export function WhatsAppIcon({ className }: Props) {
+    return (
+        <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488" />
+        </svg>
+    )
+}
+
+export function ArchiveIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+        </svg>
+    )
+}
+
+export function CopyIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+    )
+}
+
+export function PasteIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+        </svg>
+    )
+}
+
+export function RestaurantMenuIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3v18h18V3H3zm16 16H5V5h14v14zM7 8h10v2H7V8zm0 4h10v2H7v-2zm0 4h7v2H7v-2z" />
+        </svg>
+    )
+}
+
+export function CloudIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+        </svg>
+    )
+}
+
+export function ShieldIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+    )
+}
+
+export function BarsChartsIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+        </svg>
+    )
+}
+
+export function LightingIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+    )
+}
+
+export function LifeGuardIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+    )
+}

package/src/components/icons/index.ts

@@ -0,0 +1 @@
+export * from './icons';

package/src/index.ts

@@ -0,0 +1,4 @@
+// Export all modules for convenience
+export * from './components/html/index';
+export * from './components/icons/index';
+export * from './components/alerts/index';

package/src/types/types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+    className?: string;
+}