@onpe/ui 1.0.3 → 1.0.5

package/README.md

@@ -15,7 +15,17 @@ Librería completa de componentes de interfaz de usuario para aplicaciones de la
 
 ```bash
 npm install @onpe/ui
-`` ` esolo logica verdad ?
+```
+
+## ⚠️ Importante sobre TailwindCSS
+
+Esta librería **NO requiere** que instales TailwindCSS en tu proyecto. Los estilos ya están compilados y optimizados. Solo necesitas importar los estilos:
+
+```css
+@import "@onpe/ui/styles";
+```
+
+Si quieres extender los estilos con tus propias clases de TailwindCSS, entonces sí necesitarías instalar TailwindCSS en tu proyecto.
 
 ## 📖 Uso Básico
 
@@ -33,12 +43,8 @@ import { Button } from '@onpe/ui/components';
 function App() {
   return (
     <div>
-      <Button variant="primary" size="md">
-        Votar Ahora
-      </Button>
-      <Button variant="outline" size="lg">
-        Ver Resultados
-      </Button>
+      <Button color="primary" title="Votar Ahora" size="normal" />
+      <Button color="skyblue" title="Ver Resultados" size="large" />
     </div>
   );
 }
@@ -67,36 +73,152 @@ function App() {
 
 ### Button
 
+Botón versátil con múltiples colores y tamaños.
+
 Botón versátil con múltiples variantes y tamaños.
 
 ```tsx
 import { Button } from '@onpe/ui/components';
 
-// Variantes
-<Button variant="primary">Primario</Button>
-<Button variant="secondary">Secundario</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
+// Colores disponibles
+<Button color="primary" title="Primario" />
+<Button color="blue" title="Azul" />
+<Button color="skyblue" title="Sky Blue" />
+<Button color="green" title="Verde" />
+<Button color="yellow" title="Amarillo" />
+<Button color="red" title="Rojo" />
 
 // Tamaños
-<Button size="sm">Pequeño</Button>
-<Button size="md">Mediano</Button>
-<Button size="lg">Grande</Button>
+<Button color="primary" title="Pequeño" size="small" />
+<Button color="primary" title="Mediano" size="normal" />
+<Button color="primary" title="Grande" size="large" />
 
 // Estados
-<Button loading>Cargando...</Button>
-<Button disabled>Deshabilitado</Button>
+<Button color="primary" title="Deshabilitado" disabled />
 ```
 
 ### Props del Button
 
 | Prop | Tipo | Default | Descripción |
 |------|------|---------|-------------|
-| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | Estilo del botón |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del botón |
-| `loading` | `boolean` | `false` | Estado de carga |
+| `color` | `'primary' \| 'blue' \| 'skyblue' \| 'skyblue-light' \| 'yellow' \| 'light-skyblue' \| 'gray' \| 'gray-light' \| 'gray-extra-light' \| 'red' \| 'dark-gray' \| 'green' \| 'yellow-light'` | `'primary'` | Color del botón |
+| `title` | `string` | - | Texto del botón (requerido) |
+| `size` | `'small' \| 'normal' \| 'large'` | `'normal'` | Tamaño del botón |
 | `disabled` | `boolean` | `false` | Estado deshabilitado |
-| `children` | `ReactNode` | - | Contenido del botón |
+| `className` | `string` | - | Clases CSS adicionales |
+
+### Modal
+
+Componente modal para mostrar contenido en overlay.
+
+```tsx
+import { Modal } from '@onpe/ui/components';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  return (
+    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+      <h2>Contenido del Modal</h2>
+      <p>Este es el contenido del modal.</p>
+    </Modal>
+  );
+}
+```
+
+### Overlay
+
+Componente overlay para superponer contenido.
+
+```tsx
+import { Overlay } from '@onpe/ui/components';
+
+function App() {
+  return (
+    <Overlay>
+      <div>Contenido superpuesto</div>
+    </Overlay>
+  );
+}
+```
+
+### Portal
+
+Componente portal para renderizar fuera del DOM padre.
+
+```tsx
+import { Portal } from '@onpe/ui/components';
+
+function App() {
+  return (
+    <Portal>
+      <div>Contenido renderizado en portal</div>
+    </Portal>
+  );
+}
+```
+
+### Show
+
+Componente condicional para mostrar/ocultar contenido.
+
+```tsx
+import { Show } from '@onpe/ui/components';
+
+function App() {
+  const [visible, setVisible] = useState(true);
+  
+  return (
+    <Show when={visible}>
+      <div>Contenido visible</div>
+    </Show>
+  );
+}
+```
+
+### ModalConfirm
+
+Modal de confirmación para acciones importantes.
+
+```tsx
+import { ModalConfirm } from '@onpe/ui/components';
+
+function App() {
+  const [showConfirm, setShowConfirm] = useState(false);
+  
+  return (
+    <ModalConfirm
+      isOpen={showConfirm}
+      onClose={() => setShowConfirm(false)}
+      onConfirm={() => {
+        // Acción a confirmar
+        setShowConfirm(false);
+      }}
+      title="Confirmar acción"
+      message="¿Estás seguro de realizar esta acción?"
+    />
+  );
+}
+```
+
+### ModalLoading
+
+Modal de carga para mostrar estados de procesamiento.
+
+```tsx
+import { ModalLoading } from '@onpe/ui/components';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+  
+  return (
+    <ModalLoading
+      isOpen={loading}
+      message="Procesando información..."
+    />
+  );
+}
+```
 
 ## 🎯 Hooks Disponibles
 
@@ -145,6 +267,45 @@ function SettingsComponent() {
 }
 ```
 
+## 🎨 Iconos Disponibles
+
+La librería incluye una colección completa de iconos organizados por categorías:
+
+### Iconos de Acciones
+- Iconos para acciones comunes (editar, eliminar, guardar, etc.)
+
+### Iconos de Navegadores
+- Iconos de navegadores web (Chrome, Firefox, Safari, Edge, etc.)
+
+### Iconos de Sistemas Operativos
+- Iconos de sistemas operativos (Windows, macOS, Linux, etc.)
+
+### Iconos ONPE
+- Iconos específicos de la institución ONPE
+
+### Logos
+- Logotipos oficiales y marcas
+
+```tsx
+import { 
+  IconChrome, 
+  IconFirefox, 
+  IconSafari,
+  IconWindows,
+  IconMacOS 
+} from '@onpe/ui/icons';
+
+function App() {
+  return (
+    <div>
+      <IconChrome className="w-6 h-6" />
+      <IconFirefox className="w-6 h-6" />
+      <IconSafari className="w-6 h-6" />
+    </div>
+  );
+}
+```
+
 ## 🛠️ Utilidades
 
 ### formatDate
@@ -217,6 +378,13 @@ La librería incluye breakpoints personalizados para ONPE:
 .bg-gray-extra-light /* Fondo gris muy claro */
 ```
 
+## 📋 Versiones
+
+- **v1.0.4** - Versión actual
+- Compatible con React 16.8+
+- TailwindCSS v4
+- TypeScript 5.3+
+
 ## 🔧 Desarrollo
 
 ### Requisitos
@@ -258,6 +426,7 @@ MIT © ONPE - Oficina Nacional de Procesos Electorales
 - 🐛 Issues: [GitHub Issues](https://github.com/ricardosv46/onpe-ui/issues)
 - 📖 Documentación: [Storybook](https://onpe-ui-components.netlify.app)
 - 🔗 Repositorio: [GitHub](https://github.com/ricardosv46/onpe-ui)
+- 📦 NPM: [@onpe/ui](https://www.npmjs.com/package/@onpe/ui)
 
 ---
 

package/dist/components/ErrorHandling/BrowserIncompatible/BrowserIncompatible.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserIncompatible.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorHandling/BrowserIncompatible/BrowserIncompatible.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAe1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC"}
+{"version":3,"file":"BrowserIncompatible.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorHandling/BrowserIncompatible/BrowserIncompatible.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAe1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC"}

package/dist/components/ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.d.ts

@@ -0,0 +1,8 @@
+export interface ModalSystemIncompatibleProps {
+    isOpen: boolean;
+    onClose: () => void;
+    className?: string;
+}
+export declare const ModalSystemIncompatible: ({ isOpen, onClose, className }: ModalSystemIncompatibleProps) => import("react/jsx-runtime").JSX.Element;
+export default ModalSystemIncompatible;
+//# sourceMappingURL=ModalSystemIncompatible.d.ts.map

package/dist/components/ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalSystemIncompatible.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,GAAI,gCAAwD,4BAA4B,4CAoB3H,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.stories.d.ts

@@ -0,0 +1,9 @@
+import { ModalSystemIncompatible } from "./ModalSystemIncompatible";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<typeof ModalSystemIncompatible>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Interactive: Story;
+export declare const CustomStyling: Story;
+//# sourceMappingURL=ModalSystemIncompatible.stories.d.ts.map

package/dist/components/ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalSystemIncompatible.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,uBAAuB,CAe9C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC"}

package/dist/components/ErrorHandling/ModalSystemIncompatible/index.d.ts

@@ -0,0 +1,3 @@
+export { ModalSystemIncompatible } from "./ModalSystemIncompatible";
+export type { ModalSystemIncompatibleProps } from "./ModalSystemIncompatible";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ErrorHandling/ModalSystemIncompatible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorHandling/ModalSystemIncompatible/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/Feedback/ModalConfirm/ModalConfirm.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalConfirm.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Feedback/ModalConfirm/ModalConfirm.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAsBnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgDzB,CAAC"}
+{"version":3,"file":"ModalConfirm.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Feedback/ModalConfirm/ModalConfirm.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAsBnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAuBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqDzB,CAAC"}

package/dist/components/Feedback/ModalLoading/ModalLoading.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalLoading.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Feedback/ModalLoading/ModalLoading.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAkBnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoCzB,CAAC"}
+{"version":3,"file":"ModalLoading.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Feedback/ModalLoading/ModalLoading.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAkBnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0CzB,CAAC"}

package/dist/components/Modal/Modal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,SAAS,CAAC;AAI5B,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAoC5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA2BzB,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,SAAS,CAAC;AAI5B,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAoC5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyB7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA2BzB,CAAC"}

package/dist/components.d.ts

@@ -71,12 +71,12 @@ interface ModalLoadingProps {
 }
 declare const ModalLoading: ({ isOpen, onClose, message, className }: ModalLoadingProps) => react_jsx_runtime.JSX.Element;
 
-interface ModalDeviceIncompatibleProps {
+interface ModalSystemIncompatibleProps {
     isOpen: boolean;
     onClose: () => void;
     className?: string;
 }
-declare const ModalDeviceIncompatible: ({ isOpen, onClose, className }: ModalDeviceIncompatibleProps) => react_jsx_runtime.JSX.Element;
+declare const ModalSystemIncompatible: ({ isOpen, onClose, className }: ModalSystemIncompatibleProps) => react_jsx_runtime.JSX.Element;
 
-export { BrowserIncompatible, Button, Modal, ModalConfirm, ModalDeviceIncompatible, ModalLoading, Overlay, Portal, Show };
-export type { BrowserIncompatibleProps, ButtonProps, ModalConfirmProps, ModalDeviceIncompatibleProps, ModalLoadingProps, ModalProps, OverlayProps, PortalProps, ShowProps };
+export { BrowserIncompatible, Button, Modal, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show };
+export type { BrowserIncompatibleProps, ButtonProps, ModalConfirmProps, ModalLoadingProps, ModalProps, ModalSystemIncompatibleProps, OverlayProps, PortalProps, ShowProps };

package/dist/components.esm.js

@@ -219,10 +219,10 @@ var IconEdgeColor = function (props) { return (jsxs("svg", __assign({ width: 48,
 
 var BrowserIncompatible = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
-    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "max-w-[680px] pt-5 pb-8 ".concat(className), closeButton: true, children: [jsx("div", { className: "flex justify-center items-center", children: jsx(IconWarning, { className: "w-22 h-22 text-skyblue" }) }), jsx("p", { className: "text-sm md:text-2xl text-center mt-6 text-skyblue font-medium", children: "Navegador no recomendado" }), jsx("p", { className: "text-sm md:text-lg text-center mt-6", children: "Para una mejor experiencia y mayor seguridad, debes ingresar con los siguientes navegadores:" }), jsxs("div", { className: "flex justify-center items-center gap-8 md:gap-12 mt-5", children: [jsx(IconChromeColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconSafariColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconMozillaColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconEdgeColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" })] })] }));
+    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "max-w-[680px] pt-5 pb-8 ".concat(className), closeButton: true, closeDisabled: true, children: [jsx("div", { className: "flex justify-center items-center", children: jsx(IconWarning, { className: "w-22 h-22 text-skyblue" }) }), jsx("p", { className: "text-sm md:text-2xl text-center mt-6 text-skyblue font-medium", children: "Navegador no recomendado" }), jsx("p", { className: "text-sm md:text-lg text-center mt-6", children: "Para una mejor experiencia y mayor seguridad, debes ingresar con los siguientes navegadores:" }), jsxs("div", { className: "flex justify-center items-center gap-8 md:gap-12 mt-5", children: [jsx(IconChromeColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconSafariColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconMozillaColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconEdgeColor, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" })] })] }));
 };
 
-var IconCheck = function (props) { return (jsx("svg", __assign({ width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "currentColor" }) }))); };
+var IconCheck = function (props) { return (jsx("svg", __assign({ width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mt-10 lg:mt-16" }, props, { children: jsx("path", { d: "M28.2673 44.2663L47.0673 25.4663L43.334 21.733L28.2673 36.7997L20.6673 29.1997L16.934 32.933L28.2673 44.2663ZM32.0007 58.6663C28.3118 58.6663 24.8451 57.9659 21.6007 56.565C18.3562 55.1641 15.534 53.2646 13.134 50.8663C10.734 48.4663 8.83443 45.6441 7.43532 42.3997C6.03621 39.1552 5.33576 35.6886 5.33398 31.9997C5.33398 28.3108 6.03443 24.8441 7.43532 21.5997C8.83621 18.3552 10.7358 15.533 13.134 13.133C15.534 10.733 18.3562 8.83345 21.6007 7.43434C24.8451 6.03523 28.3118 5.33479 32.0007 5.33301C35.6895 5.33301 39.1562 6.03345 42.4007 7.43434C45.6451 8.83523 48.4673 10.7348 50.8673 13.133C53.2673 15.533 55.1678 18.3552 56.5686 21.5997C57.9695 24.8441 58.6691 28.3108 58.6673 31.9997C58.6673 35.6886 57.9669 39.1552 56.566 42.3997C55.1651 45.6441 53.2655 48.4663 50.8673 50.8663C48.4673 53.2663 45.6451 55.1668 42.4007 56.5677C39.1562 57.9686 35.6895 58.6681 32.0007 58.6663ZM32.0007 53.333C37.9562 53.333 43.0006 51.2663 47.134 47.133C51.2673 42.9997 53.334 37.9552 53.334 31.9997C53.334 26.0441 51.2673 20.9997 47.134 16.8663C43.0006 12.733 37.9562 10.6663 32.0007 10.6663C26.0451 10.6663 21.0007 12.733 16.8673 16.8663C12.734 20.9997 10.6673 26.0441 10.6673 31.9997C10.6673 37.9552 12.734 42.9997 16.8673 47.133C21.0007 51.2663 26.0451 53.333 32.0007 53.333Z", fill: "currentColor" }) }))); };
 
 var ModalConfirm = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, _f = _a.onCancel, onCancel = _f === void 0 ? function () { } : _f, _g = _a.textButtonConfirm, textButtonConfirm = _g === void 0 ? "Confirmar" : _g, _h = _a.textButtonCancel, textButtonCancel = _h === void 0 ? "Cancelar" : _h, _j = _a.twoButtons, twoButtons = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? "" : _k;
@@ -243,7 +243,7 @@ var ModalConfirm = function (_a) {
         onCancel();
         onClose();
     };
-    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "max-w-[680px] pt-5 pb-8 ".concat(className), closeButton: true, topAbsolute: true, children: [jsxs("div", { className: "flex items-center justify-center", children: [icon === "warning" && jsx(IconWarning, { className: "w-16 h-16 text-skyblue" }), icon === "success" && jsx(IconCheck, { className: "w-16 h-16 text-skyblue" })] }), jsx("p", { className: "mt-3 text-lg font-medium text-center lg:mt-4 lg:text-2xl text-skyblue", children: title }), jsx("p", { className: "mt-7 text-sm lg:text-lg text-center max-w-full lg:max-w-[576px]", children: message }), jsxs("div", { className: "flex flex-col-reverse items-center justify-center w-full gap-5 mt-11 lg:mt-20 lg:flex-row", children: [twoButtons && jsx(Button, { className: "w-full max-w-[200px] lg:w-[200px]", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "w-full max-w-[200px] lg:w-[200px]", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
+    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "max-w-[680px] pt-5 pb-8 ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "flex items-center justify-center", children: [icon === "warning" && jsx(IconWarning, { className: "w-16 h-16 text-skyblue" }), icon === "success" && jsx(IconCheck, { className: "w-16 h-16 text-skyblue" })] }), jsx("p", { className: "mt-3 text-lg font-medium text-center lg:mt-4 lg:text-2xl text-skyblue", children: title }), jsx("p", { className: "mt-7 text-sm lg:text-lg text-center max-w-full lg:max-w-[576px]", children: message }), jsxs("div", { className: "flex flex-col-reverse items-center justify-center w-full gap-5 mt-11 lg:mt-20 lg:flex-row", children: [twoButtons && jsx(Button, { className: "w-full max-w-[200px] lg:w-[200px]", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "w-full max-w-[200px] lg:w-[200px]", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
 };
 
 var IconSpinnerDesktop = function (props) { return (jsx("svg", __assign({ width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M50.9999 3.08313C23.9241 3.08208 3.08296 24.6456 3.08325 51C3.08354 75.4375 22.453 98.9167 50.9999 98.9167C77.5573 98.9167 98.9166 77.3542 98.9166 51", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
@@ -252,7 +252,7 @@ var IconSpinnerMobile = function (props) { return (jsx("svg", __assign({ width:
 
 var ModalLoading = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.message, message = _d === void 0 ? "Cargando..." : _d, _e = _a.className, className = _e === void 0 ? "" : _e;
-    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: className, whitoutBackground: true, children: [jsx(IconSpinnerDesktop, { className: "hidden text-white animate-spin md:block" }), jsx(IconSpinnerMobile, { className: "block text-white animate-spin md:hidden" }), jsx("p", { className: "text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20", children: message })] }));
+    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: className, closeDisabled: true, whitoutBackground: true, children: [jsx(IconSpinnerDesktop, { className: "hidden text-white animate-spin md:block" }), jsx(IconSpinnerMobile, { className: "block text-white animate-spin md:hidden" }), jsx("p", { className: "text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20", children: message })] }));
 };
 
 var IconWindow = function (props) { return (jsx("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M21.7629 3.14219C21.8365 3.20154 21.8958 3.27659 21.9365 3.36184C21.9773 3.44709 21.9985 3.54039 21.9985 3.63489V11.8676H11.866V5.02304L21.2322 3.01427C21.3247 2.99429 21.4205 2.9953 21.5126 3.01722C21.6046 3.03914 21.6906 3.08141 21.7642 3.14093M10.5994 5.29409L3.50029 6.81523C3.35863 6.84566 3.23169 6.92374 3.14065 7.03646C3.0496 7.14917 2.99996 7.28969 3 7.43458V11.8676H10.5994V5.29409ZM3 13.1341V18.8337C3.00002 18.9863 3.05513 19.1337 3.1552 19.2489C3.25526 19.3641 3.39355 19.4393 3.54462 19.4606L10.5994 20.4688V13.1341H3ZM11.866 20.6499L21.2766 21.9938C21.3663 22.0065 21.4577 21.9997 21.5447 21.974C21.6316 21.9484 21.712 21.9043 21.7804 21.8449C21.8489 21.7854 21.9038 21.712 21.9414 21.6295C21.979 21.547 21.9985 21.4575 21.9985 21.3668V13.1341H11.866V20.6499Z", fill: "currentColor" }) }))); };
@@ -261,10 +261,10 @@ var IconAndroid = function (props) { return (jsx("svg", __assign({ width: 24, he
 
 var IconApple = function (props) { return (jsx("svg", __assign({ stroke: "currentColor", fill: "currentColor", width: 24, height: 24, strokeWidth: 0, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" }) }))); };
 
-var ModalDeviceIncompatible = function (_a) {
+var ModalSystemIncompatible = function (_a) {
     var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
-    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "max-w-[680px] pt-10 pb-24.5 ".concat(className), closeButton: true, children: [jsx("div", { className: "flex justify-center items-center", children: jsx(IconWarning, { className: "w-22 h-22 text-skyblue" }) }), jsx("p", { className: "text-sm md:text-2xl text-center mt-6 text-skyblue font-medium", children: "Sistema Operativo no recomendado" }), jsx("p", { className: "text-sm md:text-lg mt-10 text-center xl:px-12", children: "Para descargar e instalar el ONPEID utiliza un dispositivo con sistema operativo Windows, macOS, Android o iOS." }), jsxs("div", { className: "flex justify-center items-center gap-8 md:gap-12 mt-5 text-skyblue", children: [jsx(IconWindow, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconAndroid, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconApple, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" })] })] }));
+    return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "max-w-[680px] pt-10 pb-24.5 ".concat(className), closeButton: true, closeDisabled: true, children: [jsx("div", { className: "flex justify-center items-center", children: jsx(IconWarning, { className: "w-22 h-22 text-skyblue" }) }), jsx("p", { className: "text-sm md:text-2xl text-center mt-6 text-skyblue font-medium", children: "Sistema Operativo no recomendado" }), jsx("p", { className: "text-sm md:text-lg mt-10 text-center xl:px-12", children: "Para descargar e instalar el ONPEID utiliza un dispositivo con sistema operativo Windows, macOS, Android o iOS." }), jsxs("div", { className: "flex justify-center items-center gap-8 md:gap-12 mt-5 text-skyblue", children: [jsx(IconWindow, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconAndroid, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" }), jsx(IconApple, { className: "md:w-[48px] md:h-[48px] w-[32px] h-[32px]" })] })] }));
 };
 
-export { BrowserIncompatible, Button, Modal, ModalConfirm, ModalDeviceIncompatible, ModalLoading, Overlay, Portal, Show };
+export { BrowserIncompatible, Button, Modal, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show };
 //# sourceMappingURL=components.esm.js.map