@onpe/ui 1.0.11 → 1.0.13

package/README.md

@@ -1,433 +1,91 @@
-# 🗳️ ONPE UI
+# 🎨 ONPE UI - Librería de Componentes
 
-Librería completa de componentes de interfaz de usuario para aplicaciones de la Oficina Nacional de Procesos Electorales (ONPE) del Perú.
+## 🚀 **Cómo Usar**
 
-## ✨ Características
+```javascript
+// Importar estilos (con prefijos para evitar conflictos)
+import '@onpe/ui/styles';
 
-- 🎨 **Colores oficiales de ONPE** - Paleta de colores institucional
-- ⚡ **Tailwind CSS v4** - Framework CSS moderno y eficiente
-- 🔧 **TypeScript** - Tipado estático para mejor desarrollo
-- 📱 **Responsive** - Diseño adaptable a todos los dispositivos
-- 🎯 **Accesible** - Componentes que siguen estándares de accesibilidad
-- 📦 **Tree-shakable** - Solo importa lo que necesitas
-
-## 🚀 Instalación
-
-```bash
-npm install @onpe/ui
-```
-
-## ⚠️ 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
-
-### Importar estilos
-
-```css
-@import "@onpe/ui/styles";
-```
-
-### Usar componentes
-
-```tsx
-import { Button } from '@onpe/ui/components';
-
-function App() {
-  return (
-    <div>
-      <Button color="primary" title="Votar Ahora" size="normal" />
-      <Button color="skyblue" title="Ver Resultados" size="large" />
-    </div>
-  );
-}
-```
-
-## 🎨 Paleta de Colores ONPE
-
-### Colores Principales
-- **Azul Principal**: `#003770` - Color institucional principal
-- **Sky Blue**: `#0073cf` - Color secundario
-- **Sky Blue Light**: `#69b2e8` - Color claro
-- **Light Sky Blue**: `#aaeff6` - Color muy claro
-
-### Colores de Acento
-- **Amarillo**: `#ffb81c` - Para alertas y destacados
-- **Verde**: `#76bd43` - Para éxito y confirmaciones
-- **Rojo**: `#e3002b` - Para errores y advertencias
-
-### Escala de Grises
-- **Dark Gray**: `#4f4f4f` - Texto principal
-- **Gray**: `#bcbcbc` - Texto secundario
-- **Gray Light**: `#bdbdbd` - Texto terciario
-- **Gray Extra Light**: `#f2f2f2` - Fondos suaves
-
-## 🧩 Componentes Disponibles
-
-### 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';
-
-// 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 color="primary" title="Pequeño" size="small" />
-<Button color="primary" title="Mediano" size="normal" />
-<Button color="primary" title="Grande" size="large" />
-
-// Estados
-<Button color="primary" title="Deshabilitado" disabled />
-```
-
-### Props del Button
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `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 |
-| `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..."
-    />
-  );
-}
+// Importar componentes
+import { Button, Modal, ModalConfirm } from '@onpe/ui/components';
 ```
 
-## 🎯 Hooks Disponibles
-
-### useDebounce
-
-Hook para retrasar la ejecución de funciones.
+## 🎯 **Componentes Disponibles**
 
-```tsx
-import { useDebounce } from '@onpe/ui/hooks';
-
-function SearchComponent() {
-  const [query, setQuery] = useState('');
-  const debouncedQuery = useDebounce(query, 500);
-  
-  useEffect(() => {
-    // Buscar solo después de 500ms sin cambios
-    searchAPI(debouncedQuery);
-  }, [debouncedQuery]);
-  
-  return (
-    <input 
-      value={query}
-      onChange={(e) => setQuery(e.target.value)}
-      placeholder="Buscar..."
-    />
-  );
-}
+```jsx
+import { 
+  Button, 
+  Modal, 
+  ModalConfirm, 
+  ModalLoading,
+  BrowserIncompatible,
+  Overlay,
+  Portal,
+  Show
+} from '@onpe/ui/components';
 ```
 
-### useLocalStorage
-
-Hook para manejar localStorage de forma reactiva.
+## 🎨 **Ejemplo de Uso**
 
-```tsx
-import { useLocalStorage } from '@onpe/ui/hooks';
+```jsx
+import '@onpe/ui/styles';
+import { Button, ModalConfirm } from '@onpe/ui/components';
 
-function SettingsComponent() {
-  const [theme, setTheme] = useLocalStorage('theme', 'light');
-  
-  return (
-    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
-      <option value="light">Claro</option>
-      <option value="dark">Oscuro</option>
-    </select>
-  );
-}
-```
-
-## 🎨 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() {
+function MyApp() {
   return (
     <div>
-      <IconChrome className="w-6 h-6" />
-      <IconFirefox className="w-6 h-6" />
-      <IconSafari className="w-6 h-6" />
+      <Button color="blue" title="Mi Botón ONPE" />
+      
+      <ModalConfirm 
+        isOpen={true}
+        title="Confirmar"
+        message="¿Estás seguro?"
+        onConfirm={() => console.log('OK')}
+        onCancel={() => console.log('Cancel')}
+      />
     </div>
   );
 }
 ```
 
-## 🛠️ Utilidades
-
-### formatDate
+## 🎨 **Colores Disponibles**
 
-Función para formatear fechas según estándares peruanos.
+- `blue` - Azul principal ONPE
+- `skyblue` - Azul cielo
+- `yellow` - Amarillo ONPE
+- `red` - Rojo ONPE
+- `green` - Verde ONPE
+- `gray` - Gris ONPE
 
-```tsx
-import { formatDate } from '@onpe/ui/utils';
-
-const fecha = new Date('2024-04-14');
-const fechaFormateada = formatDate(fecha, 'dd/mm/yyyy');
-console.log(fechaFormateada); // "14/04/2024"
-```
+## ✅ **Sin Conflictos**
 
-### validateEmail
+Esta librería usa **prefijos** para evitar conflictos con proyectos que ya tienen Tailwind CSS:
 
-Función para validar direcciones de correo electrónico.
+- **Tu proyecto:** Usa clases normales (`bg-blue-500`, `text-white`)
+- **ONPE UI:** Usa clases con prefijo (`onpe-bg-onpe-ui-blue`, `onpe-text-white`)
 
-```tsx
-import { validateEmail } from '@onpe/ui/utils';
+## 🚀 **Desarrollo**
 
-const email = 'usuario@onpe.gob.pe';
-const esValido = validateEmail(email);
-console.log(esValido); // true
-```
-
-## 📱 Breakpoints Responsive
-
-La librería incluye breakpoints personalizados para ONPE:
-
-- `sm`: 640px
-- `md`: 768px  
-- `lg`: 1024px
-- `2lg`: 1200px
-- `xl`: 1280px
-- `2xl`: 1536px
-- `3xl`: 1650px
-
-```css
-/* Ejemplo de uso */
-@media (min-width: 1200px) {
-  .container {
-    max-width: 1200px;
-  }
-}
-```
+```bash
+# Instalar dependencias
+npm install
 
-## 🎨 Clases de Utilidad
+# Desarrollo
+npm run dev
 
-### Colores de Texto
-```css
-.text-onpe-ui-blue          /* Azul principal */
-.text-onpe-ui-skyblue       /* Sky blue */
-.text-onpe-ui-yellow        /* Amarillo */
-.text-onpe-ui-green         /* Verde */
-.text-onpe-ui-red           /* Rojo */
-.text-onpe-ui-gray          /* Gris */
-.text-onpe-ui-dark-gray     /* Gris oscuro */
-```
+# Build
+npm run build
 
-### Colores de Fondo
-```css
-.bg-onpe-ui-blue            /* Fondo azul */
-.bg-onpe-ui-skyblue         /* Fondo sky blue */
-.bg-onpe-ui-yellow          /* Fondo amarillo */
-.bg-onpe-ui-green           /* Fondo verde */
-.bg-onpe-ui-red             /* Fondo rojo */
-.bg-onpe-ui-gray            /* Fondo gris */
-.bg-onpe-ui-gray-light      /* Fondo gris claro */
-.bg-onpe-ui-gray-extra-light /* Fondo gris muy claro */
+# Storybook
+npm run storybook
 ```
 
-## 📋 Versiones
-
-- **v1.0.4** - Versión actual
-- Compatible con React 16.8+
-- TailwindCSS v4
-- TypeScript 5.3+
-
-## 🔧 Desarrollo
-
-### Requisitos
-- Node.js 18+
-- npm 9+
-
-### Instalación para desarrollo
-```bash
-git clone https://github.com/ricardosv46/onpe-ui.git
-cd onpe-ui
-npm install
-```
+## 📦 **Instalación**
 
-### Scripts disponibles
 ```bash
-npm run build          # Construir para producción
-npm run dev            # Desarrollo con watch mode
-npm run storybook      # Ver componentes en Storybook
-npm run lint           # Verificar código
-npm run lint:fix       # Corregir problemas de linting
-npm run type-check     # Verificar tipos TypeScript
+npm install @onpe/ui
 ```
 
-## 📄 Licencia
-
-MIT © ONPE - Oficina Nacional de Procesos Electorales
-
-## 🤝 Contribuir
-
-1. Fork el proyecto
-2. Crea una rama para tu feature (`git checkout -b feature/nueva-funcionalidad`)
-3. Commit tus cambios (`git commit -m 'Agregar nueva funcionalidad'`)
-4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
-5. Abre un Pull Request
-
-## 📞 Soporte
-
-- 📧 Email: desarrollo@onpe.gob.pe
-- 🐛 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)
-
----
+## 🎉 **Resultado**
 
-**Desarrollado con ❤️ para la democracia peruana** 🇵🇪
+¡Puedes usar ONPE UI en cualquier proyecto sin que se afecten los estilos existentes!

package/dist/index.css

@@ -1 +1 @@
-/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-orange-500:oklch(70.5% 0.213 47.604);--color-blue-500:oklch(62.3% 0.214 259.815);--color-purple-500:oklch(62.7% 0.265 303.9);--color-purple-600:oklch(55.8% 0.288 302.321);--color-white:#fff;--spacing:0.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-xl:1.25rem;--text-xl--line-height:1.4;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--text-4xl:2.25rem;--text-4xl--line-height:1.11111;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-normal:1.5;--radius-md:0.375rem;--radius-lg:0.5rem;--ease-in-out:cubic-bezier(0.4,0,0.2,1);--animate-spin:spin 1s linear infinite;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-4{top:calc(var(--spacing)*4)}.right-4{right:calc(var(--spacing)*4)}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-7{margin-top:calc(var(--spacing)*7)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-11{margin-top:calc(var(--spacing)*11)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.-ml-1{margin-left:calc(var(--spacing)*-1)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-14{height:calc(var(--spacing)*14)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-22{height:calc(var(--spacing)*22)}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-16{width:calc(var(--spacing)*16)}.w-22{width:calc(var(--spacing)*22)}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.min-w-\[200px\]{min-width:200px}.min-w-\[320px\]{min-width:320px}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.space-y-1{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*1*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*1*var(--tw-space-y-reverse))}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}}.space-y-4{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*4*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*4*var(--tw-space-y-reverse))}}.space-y-6{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*6*var(--tw-space-y-reverse))}}.space-x-3{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*3*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*3*var(--tw-space-x-reverse))}}.space-x-4{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-blue-500{border-color:var(--color-blue-500)}.bg-onpe-ui-blue,.bg-onpe-ui-blue\/80{background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}.bg-onpe-ui-dark-gray,.bg-onpe-ui-dark-gray\/80{background-color:var(--color-onpe-ui-dark-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 80%,transparent)}}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-extra-light,.bg-onpe-ui-gray-extra-light\/80{background-color:var(--color-onpe-ui-gray-extra-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 80%,transparent)}}.bg-onpe-ui-gray-light,.bg-onpe-ui-gray-light\/80{background-color:var(--color-onpe-ui-gray-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 80%,transparent)}}.bg-onpe-ui-gray\/80{background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}.bg-onpe-ui-green,.bg-onpe-ui-green\/80{background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}.bg-onpe-ui-light-skyblue,.bg-onpe-ui-light-skyblue\/80{background-color:var(--color-onpe-ui-light-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 80%,transparent)}}.bg-onpe-ui-red,.bg-onpe-ui-red\/80{background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light,.bg-onpe-ui-skyblue-light\/80{background-color:var(--color-onpe-ui-skyblue-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 80%,transparent)}}.bg-onpe-ui-skyblue\/80{background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 80%,transparent)}}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-yellow-light,.bg-onpe-ui-yellow-light\/80{background-color:var(--color-onpe-ui-yellow-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 80%,transparent)}}.bg-onpe-ui-yellow\/80{background-color:var(--color-onpe-ui-yellow);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 80%,transparent)}}.bg-purple-500{background-color:var(--color-purple-500)}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:color-mix(in srgb,#fff 20%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-\[7px\]{padding:7px}.px-1{padding-inline:calc(var(--spacing)*1)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-10{padding-block:calc(var(--spacing)*10)}.pt-5{padding-top:calc(var(--spacing)*5)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pb-24\.5{padding-bottom:calc(var(--spacing)*24.5)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.text-onpe-ui-gray{color:var(--color-onpe-ui-gray)}.text-onpe-ui-gray-light{color:var(--color-onpe-ui-gray-light)}.text-onpe-ui-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.text-orange-500{color:var(--color-orange-500)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-25{opacity:25%}.opacity-50{opacity:50%}.opacity-75{opacity:75%}.opacity-100{opacity:100%}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,rgba(0,0,0,.1)),0 1px 2px -1px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow,.shadow-lg{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,rgba(0,0,0,.1)),0 4px 6px -4px var(--tw-shadow-color,rgba(0,0,0,.1))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.duration-300{--tw-duration:300ms;transition-duration:.3s}.duration-500{--tw-duration:500ms;transition-duration:.5s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}}}.hover\:bg-onpe-ui-dark-gray{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-dark-gray)}}}.hover\:bg-onpe-ui-gray-extra-light{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-extra-light)}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}}}.hover\:bg-onpe-ui-green{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green)}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}}}.hover\:bg-onpe-ui-light-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-light-skyblue)}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}}}.hover\:bg-onpe-ui-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue)}}}.hover\:bg-purple-600{&:hover{@media (hover:hover){background-color:var(--color-purple-600)}}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.disabled\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\:bg-onpe-ui-gray{&:disabled{background-color:var(--color-onpe-ui-gray)}}.disabled\:opacity-50{&:disabled{opacity:50%}}.disabled\:hover\:bg-onpe-ui-gray{&:disabled{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray)}}}}.md\:block,.md\:gap-12,.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4,.md\:h-\[48px\],.md\:hidden,.md\:hover\:bg-onpe-ui-blue\/30,.md\:mt-20,.md\:text-2xl,.md\:text-\[64px\],.md\:text-lg,.md\:w-\[48px\],.md\:w-\[500px\]{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-dark-gray\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-dark-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-gray-extra-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-extra-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-gray-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-gray\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-green\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-light-skyblue\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-light-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-red\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-skyblue-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-skyblue\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-yellow-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-yellow-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-yellow\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-yellow);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 30%,transparent)}}}}}.lg\:flex-row,.lg\:grid-cols-4,.lg\:max-w-\[576px\],.lg\:mt-16,.lg\:mt-20,.lg\:mt-4,.lg\:px-5,.lg\:py-16,.lg\:text-2xl,.lg\:text-lg,.lg\:w-\[1024px\],.lg\:w-\[200px\],.xl\:px-12{@media (width >= 80rem){padding-inline:calc(var(--spacing)*12)}}}:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(1turn)}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}
+:root{--onpe-blue:#003770;--onpe-skyblue:#0073cf;--onpe-skyblue-light:#69b2e8;--onpe-yellow:#ffb81c;--onpe-light-skyblue:#aaeff6;--onpe-gray:#bcbcbc;--onpe-gray-light:#bdbdbd;--onpe-gray-extra-light:#f2f2f2;--onpe-red:#e3002b;--onpe-dark-gray:#4f4f4f;--onpe-green:#76bd43;--onpe-yellow-light:#fff1d2}.onpe-bg-onpe-ui-blue{background-color:var(--onpe-blue)}.onpe-bg-onpe-ui-skyblue{background-color:var(--onpe-skyblue)}.onpe-bg-onpe-ui-skyblue-light{background-color:var(--onpe-skyblue-light)}.onpe-bg-onpe-ui-yellow{background-color:var(--onpe-yellow)}.onpe-bg-onpe-ui-light-skyblue{background-color:var(--onpe-light-skyblue)}.onpe-bg-onpe-ui-gray{background-color:var(--onpe-gray)}.onpe-bg-onpe-ui-gray-light{background-color:var(--onpe-gray-light)}.onpe-bg-onpe-ui-gray-extra-light{background-color:var(--onpe-gray-extra-light)}.onpe-bg-onpe-ui-red{background-color:var(--onpe-red)}.onpe-bg-onpe-ui-dark-gray{background-color:var(--onpe-dark-gray)}.onpe-bg-onpe-ui-green{background-color:var(--onpe-green)}.onpe-bg-onpe-ui-yellow-light{background-color:var(--onpe-yellow-light)}.onpe-text-white{color:#fff}.onpe-text-onpe-ui-blue{color:var(--onpe-blue)}.onpe-text-onpe-ui-dark-gray{color:var(--onpe-dark-gray)}.onpe-h-10{height:2.5rem}.onpe-h-12{height:3rem}.onpe-h-14{height:3.5rem}.onpe-text-sm{font-size:.875rem}.onpe-text-base{font-size:1rem}.onpe-text-lg{font-size:1.125rem}.onpe-flex{display:flex}.onpe-justify-center{justify-content:center}.onpe-items-center{align-items:center}.onpe-cursor-pointer{cursor:pointer}.onpe-cursor-not-allowed{cursor:not-allowed}.onpe-font-semibold{font-weight:600}.onpe-min-w-\[200px\]{min-width:200px}.onpe-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-duration-300{transition-duration:.3s}.onpe-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-disabled\:onpe-cursor-not-allowed:disabled{cursor:not-allowed}.onpe-disabled\:hover\:onpe-bg-onpe-ui-gray:disabled:hover,.onpe-disabled\:onpe-bg-onpe-ui-gray:disabled{background-color:var(--onpe-gray)}.onpe-md\:hover\:onpe-bg-onpe-ui-blue\/30:hover{background-color:rgba(0,55,112,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue\/30:hover{background-color:rgba(0,115,207,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue-light\/30:hover{background-color:rgba(105,178,232,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow\/30:hover{background-color:rgba(255,184,28,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-light-skyblue\/30:hover{background-color:rgba(170,239,246,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-light\/30:hover,.onpe-md\:hover\:onpe-bg-onpe-ui-gray\/30:hover{background-color:hsla(0,0%,74%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-extra-light\/30:hover{background-color:hsla(0,0%,95%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-red\/30:hover{background-color:rgba(227,0,43,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-dark-gray\/30:hover{background-color:rgba(79,79,79,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-green\/30:hover{background-color:rgba(118,189,67,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow-light\/30:hover{background-color:rgba(255,241,210,.3)}.onpe-ui-button{cursor:pointer}@keyframes onpe-fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.onpe-ui-fast-blink{animation:onpe-fastBlink .8s ease-in-out infinite}.onpe-ui-container{padding:16px}.onpe-ui-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:16px}.onpe-ui-text-primary{color:var(--onpe-blue)}.onpe-ui-text-secondary{color:var(--onpe-dark-gray)}.onpe-ui-bg-primary{background-color:var(--onpe-blue)}.onpe-ui-bg-secondary{background-color:var(--onpe-skyblue)}

package/dist/index.esm.css

@@ -1 +1 @@
-/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-orange-500:oklch(70.5% 0.213 47.604);--color-blue-500:oklch(62.3% 0.214 259.815);--color-purple-500:oklch(62.7% 0.265 303.9);--color-purple-600:oklch(55.8% 0.288 302.321);--color-white:#fff;--spacing:0.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-xl:1.25rem;--text-xl--line-height:1.4;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--text-4xl:2.25rem;--text-4xl--line-height:1.11111;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-normal:1.5;--radius-md:0.375rem;--radius-lg:0.5rem;--ease-in-out:cubic-bezier(0.4,0,0.2,1);--animate-spin:spin 1s linear infinite;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-4{top:calc(var(--spacing)*4)}.right-4{right:calc(var(--spacing)*4)}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-7{margin-top:calc(var(--spacing)*7)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-11{margin-top:calc(var(--spacing)*11)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.-ml-1{margin-left:calc(var(--spacing)*-1)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-14{height:calc(var(--spacing)*14)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-22{height:calc(var(--spacing)*22)}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-16{width:calc(var(--spacing)*16)}.w-22{width:calc(var(--spacing)*22)}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.min-w-\[200px\]{min-width:200px}.min-w-\[320px\]{min-width:320px}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.space-y-1{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*1*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*1*var(--tw-space-y-reverse))}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}}.space-y-4{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*4*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*4*var(--tw-space-y-reverse))}}.space-y-6{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*6*var(--tw-space-y-reverse))}}.space-x-3{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*3*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*3*var(--tw-space-x-reverse))}}.space-x-4{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-blue-500{border-color:var(--color-blue-500)}.bg-onpe-ui-blue,.bg-onpe-ui-blue\/80{background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}.bg-onpe-ui-dark-gray,.bg-onpe-ui-dark-gray\/80{background-color:var(--color-onpe-ui-dark-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 80%,transparent)}}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-extra-light,.bg-onpe-ui-gray-extra-light\/80{background-color:var(--color-onpe-ui-gray-extra-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 80%,transparent)}}.bg-onpe-ui-gray-light,.bg-onpe-ui-gray-light\/80{background-color:var(--color-onpe-ui-gray-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 80%,transparent)}}.bg-onpe-ui-gray\/80{background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}.bg-onpe-ui-green,.bg-onpe-ui-green\/80{background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}.bg-onpe-ui-light-skyblue,.bg-onpe-ui-light-skyblue\/80{background-color:var(--color-onpe-ui-light-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 80%,transparent)}}.bg-onpe-ui-red,.bg-onpe-ui-red\/80{background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light,.bg-onpe-ui-skyblue-light\/80{background-color:var(--color-onpe-ui-skyblue-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 80%,transparent)}}.bg-onpe-ui-skyblue\/80{background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 80%,transparent)}}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-yellow-light,.bg-onpe-ui-yellow-light\/80{background-color:var(--color-onpe-ui-yellow-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 80%,transparent)}}.bg-onpe-ui-yellow\/80{background-color:var(--color-onpe-ui-yellow);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 80%,transparent)}}.bg-purple-500{background-color:var(--color-purple-500)}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:color-mix(in srgb,#fff 20%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-\[7px\]{padding:7px}.px-1{padding-inline:calc(var(--spacing)*1)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-10{padding-block:calc(var(--spacing)*10)}.pt-5{padding-top:calc(var(--spacing)*5)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pb-24\.5{padding-bottom:calc(var(--spacing)*24.5)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.text-onpe-ui-gray{color:var(--color-onpe-ui-gray)}.text-onpe-ui-gray-light{color:var(--color-onpe-ui-gray-light)}.text-onpe-ui-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.text-orange-500{color:var(--color-orange-500)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-25{opacity:25%}.opacity-50{opacity:50%}.opacity-75{opacity:75%}.opacity-100{opacity:100%}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,rgba(0,0,0,.1)),0 1px 2px -1px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow,.shadow-lg{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,rgba(0,0,0,.1)),0 4px 6px -4px var(--tw-shadow-color,rgba(0,0,0,.1))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.duration-300{--tw-duration:300ms;transition-duration:.3s}.duration-500{--tw-duration:500ms;transition-duration:.5s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 80%,transparent)}}}}.hover\:bg-onpe-ui-dark-gray{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-dark-gray)}}}.hover\:bg-onpe-ui-gray-extra-light{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-extra-light)}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 80%,transparent)}}}}.hover\:bg-onpe-ui-green{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green)}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 80%,transparent)}}}}.hover\:bg-onpe-ui-light-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-light-skyblue)}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 80%,transparent)}}}}.hover\:bg-onpe-ui-skyblue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue)}}}.hover\:bg-purple-600{&:hover{@media (hover:hover){background-color:var(--color-purple-600)}}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.disabled\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\:bg-onpe-ui-gray{&:disabled{background-color:var(--color-onpe-ui-gray)}}.disabled\:opacity-50{&:disabled{opacity:50%}}.disabled\:hover\:bg-onpe-ui-gray{&:disabled{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray)}}}}.md\:block,.md\:gap-12,.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4,.md\:h-\[48px\],.md\:hidden,.md\:hover\:bg-onpe-ui-blue\/30,.md\:mt-20,.md\:text-2xl,.md\:text-\[64px\],.md\:text-lg,.md\:w-\[48px\],.md\:w-\[500px\]{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-dark-gray\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-dark-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-gray-extra-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-extra-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-gray-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-gray\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-gray);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-green\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-green);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-light-skyblue\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-light-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-red\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-skyblue-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-skyblue\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-skyblue);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-yellow-light\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-yellow-light);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 30%,transparent)}}}}}.md\:hover\:bg-onpe-ui-yellow\/30{@media (width >= 48rem){&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-yellow);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 30%,transparent)}}}}}.lg\:flex-row,.lg\:grid-cols-4,.lg\:max-w-\[576px\],.lg\:mt-16,.lg\:mt-20,.lg\:mt-4,.lg\:px-5,.lg\:py-16,.lg\:text-2xl,.lg\:text-lg,.lg\:w-\[1024px\],.lg\:w-\[200px\],.xl\:px-12{@media (width >= 80rem){padding-inline:calc(var(--spacing)*12)}}}:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(1turn)}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}
+:root{--onpe-blue:#003770;--onpe-skyblue:#0073cf;--onpe-skyblue-light:#69b2e8;--onpe-yellow:#ffb81c;--onpe-light-skyblue:#aaeff6;--onpe-gray:#bcbcbc;--onpe-gray-light:#bdbdbd;--onpe-gray-extra-light:#f2f2f2;--onpe-red:#e3002b;--onpe-dark-gray:#4f4f4f;--onpe-green:#76bd43;--onpe-yellow-light:#fff1d2}.onpe-bg-onpe-ui-blue{background-color:var(--onpe-blue)}.onpe-bg-onpe-ui-skyblue{background-color:var(--onpe-skyblue)}.onpe-bg-onpe-ui-skyblue-light{background-color:var(--onpe-skyblue-light)}.onpe-bg-onpe-ui-yellow{background-color:var(--onpe-yellow)}.onpe-bg-onpe-ui-light-skyblue{background-color:var(--onpe-light-skyblue)}.onpe-bg-onpe-ui-gray{background-color:var(--onpe-gray)}.onpe-bg-onpe-ui-gray-light{background-color:var(--onpe-gray-light)}.onpe-bg-onpe-ui-gray-extra-light{background-color:var(--onpe-gray-extra-light)}.onpe-bg-onpe-ui-red{background-color:var(--onpe-red)}.onpe-bg-onpe-ui-dark-gray{background-color:var(--onpe-dark-gray)}.onpe-bg-onpe-ui-green{background-color:var(--onpe-green)}.onpe-bg-onpe-ui-yellow-light{background-color:var(--onpe-yellow-light)}.onpe-text-white{color:#fff}.onpe-text-onpe-ui-blue{color:var(--onpe-blue)}.onpe-text-onpe-ui-dark-gray{color:var(--onpe-dark-gray)}.onpe-h-10{height:2.5rem}.onpe-h-12{height:3rem}.onpe-h-14{height:3.5rem}.onpe-text-sm{font-size:.875rem}.onpe-text-base{font-size:1rem}.onpe-text-lg{font-size:1.125rem}.onpe-flex{display:flex}.onpe-justify-center{justify-content:center}.onpe-items-center{align-items:center}.onpe-cursor-pointer{cursor:pointer}.onpe-cursor-not-allowed{cursor:not-allowed}.onpe-font-semibold{font-weight:600}.onpe-min-w-\[200px\]{min-width:200px}.onpe-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-duration-300{transition-duration:.3s}.onpe-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.onpe-disabled\:onpe-cursor-not-allowed:disabled{cursor:not-allowed}.onpe-disabled\:hover\:onpe-bg-onpe-ui-gray:disabled:hover,.onpe-disabled\:onpe-bg-onpe-ui-gray:disabled{background-color:var(--onpe-gray)}.onpe-md\:hover\:onpe-bg-onpe-ui-blue\/30:hover{background-color:rgba(0,55,112,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue\/30:hover{background-color:rgba(0,115,207,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-skyblue-light\/30:hover{background-color:rgba(105,178,232,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow\/30:hover{background-color:rgba(255,184,28,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-light-skyblue\/30:hover{background-color:rgba(170,239,246,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-light\/30:hover,.onpe-md\:hover\:onpe-bg-onpe-ui-gray\/30:hover{background-color:hsla(0,0%,74%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-gray-extra-light\/30:hover{background-color:hsla(0,0%,95%,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-red\/30:hover{background-color:rgba(227,0,43,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-dark-gray\/30:hover{background-color:rgba(79,79,79,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-green\/30:hover{background-color:rgba(118,189,67,.3)}.onpe-md\:hover\:onpe-bg-onpe-ui-yellow-light\/30:hover{background-color:rgba(255,241,210,.3)}.onpe-ui-button{cursor:pointer}@keyframes onpe-fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.onpe-ui-fast-blink{animation:onpe-fastBlink .8s ease-in-out infinite}.onpe-ui-container{padding:16px}.onpe-ui-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:16px}.onpe-ui-text-primary{color:var(--onpe-blue)}.onpe-ui-text-secondary{color:var(--onpe-dark-gray)}.onpe-ui-bg-primary{background-color:var(--onpe-blue)}.onpe-ui-bg-secondary{background-color:var(--onpe-skyblue)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onpe/ui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
   "main": "dist/index.js",