@onpe/ui 1.1.7 → 1.2.1

package/dist/cli.esm.js

@@ -6075,16 +6075,21 @@ var COMPONENTS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main
 var ICONS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/icons";
 function addComponent(componentName) {
     return __awaiter(this, void 0, void 0, function () {
-        var isIcon, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
+        var isIcon, isHook, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableHooks, availableIcons, componentFile, availableItems, itemType, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, itemType, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     isIcon = componentName.toLowerCase().startsWith("icon-");
+                    isHook = componentName.toLowerCase().startsWith("use-");
                     isModalComponent = componentName.toLowerCase().startsWith("modal") && componentName !== "modal";
                     if (isIcon) {
                         iconCategory = getIconCategory(componentName);
                         componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "icons", iconCategory);
                     }
+                    else if (isHook) {
+                        // Los hooks van en src/hooks/
+                        componentPath = path$d.join(process.cwd(), "src", "hooks");
+                    }
                     else if (isModalComponent) {
                         // Los modales específicos van en src/components/onpe/modals/
                         componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "modals");
@@ -6099,10 +6104,14 @@ function addComponent(componentName) {
                     // Crear directorio si no existe
                     _a.sent();
                     componentDependencies = {
+                        // Modales especializados
                         "modal-browser-incompatible": ["modal", "icon-warning", "icon-chrome-color", "icon-safari-color", "icon-mozilla-color", "icon-edge-color"],
                         "modal-system-incompatible": ["modal", "icon-warning", "icon-window", "icon-android", "icon-apple"],
                         "modal-confirm": ["modal"],
                         "modal-loading": ["modal"],
+                        // Componentes complejos - ORDEN IMPORTANTE: primero las dependencias, luego el componente principal
+                        "browser-recommended": ["icon-chrome", "icon-safari", "icon-mozilla", "icon-edge"],
+                        footer: ["browser-recommended", "icon-info", "use-toggle"],
                     };
                     availableComponents = {
                         // Componentes básicos
@@ -6111,6 +6120,8 @@ function addComponent(componentName) {
                         overlay: "Overlay/Overlay.tsx",
                         portal: "Portal/Portal.tsx",
                         show: "Show/Show.tsx",
+                        footer: "Footer/Footer.tsx",
+                        "browser-recommended": "BrowserRecommended/BrowserRecommended.tsx",
                         // Componentes de ErrorHandling
                         "modal-system-incompatible": "ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.tsx",
                         "modal-browser-incompatible": "ErrorHandling/ModalBrowserIncompatible/ModalBrowserIncompatible.tsx",
@@ -6118,6 +6129,11 @@ function addComponent(componentName) {
                         "modal-confirm": "Feedback/ModalConfirm/ModalConfirm.tsx",
                         "modal-loading": "Feedback/ModalLoading/ModalLoading.tsx",
                     };
+                    availableHooks = {
+                        "use-toggle": "useToggle/useToggle.ts",
+                        "use-debounce": "useDebounce/useDebounce.ts",
+                        "use-local-storage": "useLocalStorage/useLocalStorage.ts",
+                    };
                     availableIcons = {
                         "icon-check": "Actions/IconCheck/IconCheck.tsx",
                         "icon-close": "Actions/IconClose/IconClose.tsx",
@@ -6125,6 +6141,7 @@ function addComponent(componentName) {
                         "icon-spinner-desktop": "Actions/IconSpinnerDesktop/IconSpinnerDesktop.tsx",
                         "icon-spinner-mobile": "Actions/IconSpinnerMobile/IconSpinnerMobile.tsx",
                         "icon-home": "Actions/IconHome/IconHome.tsx",
+                        "icon-info": "Actions/IconInfo/IconInfo.tsx",
                         "icon-chrome": "Browsers/IconChrome/IconChrome.tsx",
                         "icon-chrome-color": "Browsers/IconChromeColor/IconChromeColor.tsx",
                         "icon-edge": "Browsers/IconEdge/IconEdge.tsx",
@@ -6139,15 +6156,36 @@ function addComponent(componentName) {
                         "icon-apple": "OperatingSystems/IconApple/IconApple.tsx",
                         "icon-window": "OperatingSystems/IconWindow/IconWindow.tsx",
                     };
-                    componentFile = isIcon ? availableIcons[componentName.toLowerCase()] : availableComponents[componentName.toLowerCase()];
+                    if (isIcon) {
+                        componentFile = availableIcons[componentName.toLowerCase()];
+                    }
+                    else if (isHook) {
+                        componentFile = availableHooks[componentName.toLowerCase()];
+                    }
+                    else {
+                        componentFile = availableComponents[componentName.toLowerCase()];
+                    }
                     if (!componentFile) {
-                        availableItems = isIcon ? Object.keys(availableIcons) : Object.keys(availableComponents);
-                        throw new Error("".concat(isIcon ? "Icono" : "Componente", " '").concat(componentName, "' no encontrado. ").concat(isIcon ? "Iconos" : "Componentes", " disponibles: ").concat(availableItems.join(", ")));
+                        availableItems = void 0;
+                        itemType = void 0;
+                        if (isIcon) {
+                            availableItems = Object.keys(availableIcons);
+                            itemType = "Icono";
+                        }
+                        else if (isHook) {
+                            availableItems = Object.keys(availableHooks);
+                            itemType = "Hook";
+                        }
+                        else {
+                            availableItems = Object.keys(availableComponents);
+                            itemType = "Componente";
+                        }
+                        throw new Error("".concat(itemType, " '").concat(componentName, "' no encontrado. ").concat(itemType, "s disponibles: ").concat(availableItems.join(", ")));
                     }
                     _a.label = 2;
                 case 2:
                     _a.trys.push([2, 17, , 18]);
-                    if (!(!isIcon && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
+                    if (!(!isIcon && !isHook && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
                     dependencies = componentDependencies[componentName.toLowerCase()];
                     console.log("\uD83D\uDD17 Instalando dependencias: ".concat(dependencies.join(", ")));
                     _i = 0, dependencies_1 = dependencies;
@@ -6158,9 +6196,11 @@ function addComponent(componentName) {
                     _a.label = 4;
                 case 4:
                     _a.trys.push([4, 6, , 7]);
+                    console.log("   \uD83D\uDCE6 Instalando: ".concat(dependency));
                     return [4 /*yield*/, addComponent(dependency)];
                 case 5:
                     _a.sent();
+                    console.log("   \u2705 ".concat(dependency, " instalado correctamente"));
                     return [3 /*break*/, 7];
                 case 6:
                     depError_1 = _a.sent();
@@ -6170,7 +6210,16 @@ function addComponent(componentName) {
                     _i++;
                     return [3 /*break*/, 3];
                 case 8:
-                    downloadUrl = isIcon ? "".concat(ICONS_URL, "/").concat(componentFile) : "".concat(COMPONENTS_URL, "/").concat(componentFile);
+                    downloadUrl = void 0;
+                    if (isIcon) {
+                        downloadUrl = "".concat(ICONS_URL, "/").concat(componentFile);
+                    }
+                    else if (isHook) {
+                        downloadUrl = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/hooks/".concat(componentFile);
+                    }
+                    else {
+                        downloadUrl = "".concat(COMPONENTS_URL, "/").concat(componentFile);
+                    }
                     return [4 /*yield*/, fetch(downloadUrl)];
                 case 9:
                     response = _a.sent();
@@ -6181,12 +6230,13 @@ function addComponent(componentName) {
                 case 10:
                     componentCode = _a.sent();
                     personalizedCode = personalizeComponent(componentCode, componentName);
-                    fileName = "".concat(convertToPascalCase(componentName), ".tsx");
+                    fileName = isHook ? "".concat(convertToPascalCase(componentName), ".ts") : "".concat(convertToPascalCase(componentName), ".tsx");
                     filePath = path$d.join(componentPath, fileName);
                     return [4 /*yield*/, lib.writeFile(filePath, personalizedCode)];
                 case 11:
                     _a.sent();
-                    console.log("\uD83D\uDCC1 ".concat(isIcon ? "Icono" : "Componente", " guardado en: ").concat(filePath));
+                    itemType = isIcon ? "Icono" : isHook ? "Hook" : "Componente";
+                    console.log("\uD83D\uDCC1 ".concat(itemType, " guardado en: ").concat(filePath));
                     _a.label = 12;
                 case 12:
                     _a.trys.push([12, 15, , 16]);
@@ -6206,7 +6256,7 @@ function addComponent(componentName) {
                 case 16:
                     // Mostrar instrucciones
                     console.log("\n📋 Próximos pasos:");
-                    console.log("1. Importa el ".concat(isIcon ? "icono" : "componente", ":"));
+                    console.log("1. Importa el ".concat(itemType.toLowerCase(), ":"));
                     componentNamePascal = convertToPascalCase(componentName);
                     // Mostrar opciones de importación
                     if (isIcon) {
@@ -6218,6 +6268,12 @@ function addComponent(componentName) {
                         console.log("   // Opci\u00F3n 3: Importaci\u00F3n desde ra\u00EDz");
                         console.log("   import { ".concat(componentNamePascal, " } from '../onpe';"));
                     }
+                    else if (isHook) {
+                        console.log("   // Opci\u00F3n 1: Importaci\u00F3n directa");
+                        console.log("   import { ".concat(componentNamePascal, " } from '../hooks/").concat(componentNamePascal, "';"));
+                        console.log("   // Opci\u00F3n 2: Importaci\u00F3n con barril (recomendado)");
+                        console.log("   import { ".concat(componentNamePascal, " } from '../hooks';"));
+                    }
                     else {
                         if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
                             console.log("   // Opci\u00F3n 1: Importaci\u00F3n directa");
@@ -6237,7 +6293,7 @@ function addComponent(componentName) {
                         }
                     }
                     // Mostrar dependencias si las hay
-                    if (!isIcon && componentDependencies[componentName.toLowerCase()]) {
+                    if (!isIcon && !isHook && componentDependencies[componentName.toLowerCase()]) {
                         dependencies = componentDependencies[componentName.toLowerCase()];
                         console.log("2. Tambi\u00E9n se instalaron las dependencias:");
                         dependencies.forEach(function (dep) {
@@ -6245,22 +6301,30 @@ function addComponent(componentName) {
                             var depPath;
                             if (dep.startsWith("icon-")) {
                                 var iconCategory = getIconCategory(dep);
-                                depPath = "../onpe-icons-".concat(iconCategory, "/").concat(depPascal);
+                                depPath = "../onpe/icons/".concat(iconCategory, "/").concat(depPascal);
+                            }
+                            else if (dep.startsWith("use-")) {
+                                depPath = "../hooks/".concat(depPascal);
                             }
                             else if (dep.startsWith("modal") && dep !== "modal") {
-                                depPath = "../onpe-modals/".concat(depPascal);
+                                depPath = "../onpe/modals/".concat(depPascal);
                             }
                             else {
-                                depPath = "../onpe-ui/".concat(depPascal);
+                                depPath = "../onpe/ui/".concat(depPascal);
                             }
                             console.log("   import { ".concat(depPascal, " } from '").concat(depPath, "'"));
                         });
-                        console.log("3. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
+                        console.log("3. Usa el ".concat(itemType.toLowerCase(), ":"));
+                    }
+                    else {
+                        console.log("2. Usa el ".concat(itemType.toLowerCase(), ":"));
+                    }
+                    if (isHook) {
+                        console.log("   const [state, toggle, open, close] = ".concat(componentNamePascal, "();"));
                     }
                     else {
-                        console.log("2. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
+                        console.log("   <".concat(componentNamePascal, " />"));
                     }
-                    console.log("   <".concat(componentNamePascal, " />"));
                     return [3 /*break*/, 18];
                 case 17:
                     error_1 = _a.sent();
@@ -6318,6 +6382,8 @@ function personalizeComponent(code, componentName) {
         Portal: "../onpe/ui/Portal",
         Show: "../onpe/ui/Show",
         Modal: "../onpe/ui/Modal",
+        Footer: "../onpe/ui/Footer",
+        BrowserRecommended: "../onpe/ui/BrowserRecommended",
         // Modales especializados - van en onpe/modals/
         ModalConfirm: "../onpe/modals/ModalConfirm",
         ModalLoading: "../onpe/modals/ModalLoading",
@@ -6407,6 +6473,22 @@ function personalizeComponent(code, componentName) {
     if (!componentName.toLowerCase().startsWith("icon-") && !componentName.toLowerCase().startsWith("modal")) {
         personalizedCode = personalizedCode.replace(/from "\.\.\/onpe\/ui\/([^"]+)"/g, function (match, component) { return "from \"./".concat(component, "\""); });
     }
+    // Para Footer que importa BrowserRecommended
+    if (componentName.toLowerCase() === "footer") {
+        // Arreglar importación de BrowserRecommended
+        personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
+        personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
+        // Arreglar importación de IconInfo
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
+        // Arreglar importación de useToggle
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle\/useToggle"/g, "from \"../../hooks/useToggle\"");
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle"/g, "from \"../../hooks/useToggle\"");
+    }
+    // Para BrowserRecommended que importa iconos
+    if (componentName.toLowerCase() === "browser-recommended") {
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Browsers\/([^"]+)"/g, function (match, icon) { return "from \"../icons/browsers/".concat(icon, "\""); });
+    }
     // Para modales que importan componentes UI
     if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
         // Arreglar importación de Modal específicamente

package/dist/cli.js

@@ -6075,16 +6075,21 @@ var COMPONENTS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main
 var ICONS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/icons";
 function addComponent(componentName) {
     return __awaiter(this, void 0, void 0, function () {
-        var isIcon, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
+        var isIcon, isHook, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableHooks, availableIcons, componentFile, availableItems, itemType, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, itemType, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     isIcon = componentName.toLowerCase().startsWith("icon-");
+                    isHook = componentName.toLowerCase().startsWith("use-");
                     isModalComponent = componentName.toLowerCase().startsWith("modal") && componentName !== "modal";
                     if (isIcon) {
                         iconCategory = getIconCategory(componentName);
                         componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "icons", iconCategory);
                     }
+                    else if (isHook) {
+                        // Los hooks van en src/hooks/
+                        componentPath = path$d.join(process.cwd(), "src", "hooks");
+                    }
                     else if (isModalComponent) {
                         // Los modales específicos van en src/components/onpe/modals/
                         componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "modals");
@@ -6099,10 +6104,14 @@ function addComponent(componentName) {
                     // Crear directorio si no existe
                     _a.sent();
                     componentDependencies = {
+                        // Modales especializados
                         "modal-browser-incompatible": ["modal", "icon-warning", "icon-chrome-color", "icon-safari-color", "icon-mozilla-color", "icon-edge-color"],
                         "modal-system-incompatible": ["modal", "icon-warning", "icon-window", "icon-android", "icon-apple"],
                         "modal-confirm": ["modal"],
                         "modal-loading": ["modal"],
+                        // Componentes complejos - ORDEN IMPORTANTE: primero las dependencias, luego el componente principal
+                        "browser-recommended": ["icon-chrome", "icon-safari", "icon-mozilla", "icon-edge"],
+                        footer: ["browser-recommended", "icon-info", "use-toggle"],
                     };
                     availableComponents = {
                         // Componentes básicos
@@ -6111,6 +6120,8 @@ function addComponent(componentName) {
                         overlay: "Overlay/Overlay.tsx",
                         portal: "Portal/Portal.tsx",
                         show: "Show/Show.tsx",
+                        footer: "Footer/Footer.tsx",
+                        "browser-recommended": "BrowserRecommended/BrowserRecommended.tsx",
                         // Componentes de ErrorHandling
                         "modal-system-incompatible": "ErrorHandling/ModalSystemIncompatible/ModalSystemIncompatible.tsx",
                         "modal-browser-incompatible": "ErrorHandling/ModalBrowserIncompatible/ModalBrowserIncompatible.tsx",
@@ -6118,6 +6129,11 @@ function addComponent(componentName) {
                         "modal-confirm": "Feedback/ModalConfirm/ModalConfirm.tsx",
                         "modal-loading": "Feedback/ModalLoading/ModalLoading.tsx",
                     };
+                    availableHooks = {
+                        "use-toggle": "useToggle/useToggle.ts",
+                        "use-debounce": "useDebounce/useDebounce.ts",
+                        "use-local-storage": "useLocalStorage/useLocalStorage.ts",
+                    };
                     availableIcons = {
                         "icon-check": "Actions/IconCheck/IconCheck.tsx",
                         "icon-close": "Actions/IconClose/IconClose.tsx",
@@ -6125,6 +6141,7 @@ function addComponent(componentName) {
                         "icon-spinner-desktop": "Actions/IconSpinnerDesktop/IconSpinnerDesktop.tsx",
                         "icon-spinner-mobile": "Actions/IconSpinnerMobile/IconSpinnerMobile.tsx",
                         "icon-home": "Actions/IconHome/IconHome.tsx",
+                        "icon-info": "Actions/IconInfo/IconInfo.tsx",
                         "icon-chrome": "Browsers/IconChrome/IconChrome.tsx",
                         "icon-chrome-color": "Browsers/IconChromeColor/IconChromeColor.tsx",
                         "icon-edge": "Browsers/IconEdge/IconEdge.tsx",
@@ -6139,15 +6156,36 @@ function addComponent(componentName) {
                         "icon-apple": "OperatingSystems/IconApple/IconApple.tsx",
                         "icon-window": "OperatingSystems/IconWindow/IconWindow.tsx",
                     };
-                    componentFile = isIcon ? availableIcons[componentName.toLowerCase()] : availableComponents[componentName.toLowerCase()];
+                    if (isIcon) {
+                        componentFile = availableIcons[componentName.toLowerCase()];
+                    }
+                    else if (isHook) {
+                        componentFile = availableHooks[componentName.toLowerCase()];
+                    }
+                    else {
+                        componentFile = availableComponents[componentName.toLowerCase()];
+                    }
                     if (!componentFile) {
-                        availableItems = isIcon ? Object.keys(availableIcons) : Object.keys(availableComponents);
-                        throw new Error("".concat(isIcon ? "Icono" : "Componente", " '").concat(componentName, "' no encontrado. ").concat(isIcon ? "Iconos" : "Componentes", " disponibles: ").concat(availableItems.join(", ")));
+                        availableItems = void 0;
+                        itemType = void 0;
+                        if (isIcon) {
+                            availableItems = Object.keys(availableIcons);
+                            itemType = "Icono";
+                        }
+                        else if (isHook) {
+                            availableItems = Object.keys(availableHooks);
+                            itemType = "Hook";
+                        }
+                        else {
+                            availableItems = Object.keys(availableComponents);
+                            itemType = "Componente";
+                        }
+                        throw new Error("".concat(itemType, " '").concat(componentName, "' no encontrado. ").concat(itemType, "s disponibles: ").concat(availableItems.join(", ")));
                     }
                     _a.label = 2;
                 case 2:
                     _a.trys.push([2, 17, , 18]);
-                    if (!(!isIcon && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
+                    if (!(!isIcon && !isHook && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
                     dependencies = componentDependencies[componentName.toLowerCase()];
                     console.log("\uD83D\uDD17 Instalando dependencias: ".concat(dependencies.join(", ")));
                     _i = 0, dependencies_1 = dependencies;
@@ -6158,9 +6196,11 @@ function addComponent(componentName) {
                     _a.label = 4;
                 case 4:
                     _a.trys.push([4, 6, , 7]);
+                    console.log("   \uD83D\uDCE6 Instalando: ".concat(dependency));
                     return [4 /*yield*/, addComponent(dependency)];
                 case 5:
                     _a.sent();
+                    console.log("   \u2705 ".concat(dependency, " instalado correctamente"));
                     return [3 /*break*/, 7];
                 case 6:
                     depError_1 = _a.sent();
@@ -6170,7 +6210,16 @@ function addComponent(componentName) {
                     _i++;
                     return [3 /*break*/, 3];
                 case 8:
-                    downloadUrl = isIcon ? "".concat(ICONS_URL, "/").concat(componentFile) : "".concat(COMPONENTS_URL, "/").concat(componentFile);
+                    downloadUrl = void 0;
+                    if (isIcon) {
+                        downloadUrl = "".concat(ICONS_URL, "/").concat(componentFile);
+                    }
+                    else if (isHook) {
+                        downloadUrl = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/hooks/".concat(componentFile);
+                    }
+                    else {
+                        downloadUrl = "".concat(COMPONENTS_URL, "/").concat(componentFile);
+                    }
                     return [4 /*yield*/, fetch(downloadUrl)];
                 case 9:
                     response = _a.sent();
@@ -6181,12 +6230,13 @@ function addComponent(componentName) {
                 case 10:
                     componentCode = _a.sent();
                     personalizedCode = personalizeComponent(componentCode, componentName);
-                    fileName = "".concat(convertToPascalCase(componentName), ".tsx");
+                    fileName = isHook ? "".concat(convertToPascalCase(componentName), ".ts") : "".concat(convertToPascalCase(componentName), ".tsx");
                     filePath = path$d.join(componentPath, fileName);
                     return [4 /*yield*/, lib.writeFile(filePath, personalizedCode)];
                 case 11:
                     _a.sent();
-                    console.log("\uD83D\uDCC1 ".concat(isIcon ? "Icono" : "Componente", " guardado en: ").concat(filePath));
+                    itemType = isIcon ? "Icono" : isHook ? "Hook" : "Componente";
+                    console.log("\uD83D\uDCC1 ".concat(itemType, " guardado en: ").concat(filePath));
                     _a.label = 12;
                 case 12:
                     _a.trys.push([12, 15, , 16]);
@@ -6206,7 +6256,7 @@ function addComponent(componentName) {
                 case 16:
                     // Mostrar instrucciones
                     console.log("\n📋 Próximos pasos:");
-                    console.log("1. Importa el ".concat(isIcon ? "icono" : "componente", ":"));
+                    console.log("1. Importa el ".concat(itemType.toLowerCase(), ":"));
                     componentNamePascal = convertToPascalCase(componentName);
                     // Mostrar opciones de importación
                     if (isIcon) {
@@ -6218,6 +6268,12 @@ function addComponent(componentName) {
                         console.log("   // Opci\u00F3n 3: Importaci\u00F3n desde ra\u00EDz");
                         console.log("   import { ".concat(componentNamePascal, " } from '../onpe';"));
                     }
+                    else if (isHook) {
+                        console.log("   // Opci\u00F3n 1: Importaci\u00F3n directa");
+                        console.log("   import { ".concat(componentNamePascal, " } from '../hooks/").concat(componentNamePascal, "';"));
+                        console.log("   // Opci\u00F3n 2: Importaci\u00F3n con barril (recomendado)");
+                        console.log("   import { ".concat(componentNamePascal, " } from '../hooks';"));
+                    }
                     else {
                         if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
                             console.log("   // Opci\u00F3n 1: Importaci\u00F3n directa");
@@ -6237,7 +6293,7 @@ function addComponent(componentName) {
                         }
                     }
                     // Mostrar dependencias si las hay
-                    if (!isIcon && componentDependencies[componentName.toLowerCase()]) {
+                    if (!isIcon && !isHook && componentDependencies[componentName.toLowerCase()]) {
                         dependencies = componentDependencies[componentName.toLowerCase()];
                         console.log("2. Tambi\u00E9n se instalaron las dependencias:");
                         dependencies.forEach(function (dep) {
@@ -6245,22 +6301,30 @@ function addComponent(componentName) {
                             var depPath;
                             if (dep.startsWith("icon-")) {
                                 var iconCategory = getIconCategory(dep);
-                                depPath = "../onpe-icons-".concat(iconCategory, "/").concat(depPascal);
+                                depPath = "../onpe/icons/".concat(iconCategory, "/").concat(depPascal);
+                            }
+                            else if (dep.startsWith("use-")) {
+                                depPath = "../hooks/".concat(depPascal);
                             }
                             else if (dep.startsWith("modal") && dep !== "modal") {
-                                depPath = "../onpe-modals/".concat(depPascal);
+                                depPath = "../onpe/modals/".concat(depPascal);
                             }
                             else {
-                                depPath = "../onpe-ui/".concat(depPascal);
+                                depPath = "../onpe/ui/".concat(depPascal);
                             }
                             console.log("   import { ".concat(depPascal, " } from '").concat(depPath, "'"));
                         });
-                        console.log("3. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
+                        console.log("3. Usa el ".concat(itemType.toLowerCase(), ":"));
+                    }
+                    else {
+                        console.log("2. Usa el ".concat(itemType.toLowerCase(), ":"));
+                    }
+                    if (isHook) {
+                        console.log("   const [state, toggle, open, close] = ".concat(componentNamePascal, "();"));
                     }
                     else {
-                        console.log("2. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
+                        console.log("   <".concat(componentNamePascal, " />"));
                     }
-                    console.log("   <".concat(componentNamePascal, " />"));
                     return [3 /*break*/, 18];
                 case 17:
                     error_1 = _a.sent();
@@ -6318,6 +6382,8 @@ function personalizeComponent(code, componentName) {
         Portal: "../onpe/ui/Portal",
         Show: "../onpe/ui/Show",
         Modal: "../onpe/ui/Modal",
+        Footer: "../onpe/ui/Footer",
+        BrowserRecommended: "../onpe/ui/BrowserRecommended",
         // Modales especializados - van en onpe/modals/
         ModalConfirm: "../onpe/modals/ModalConfirm",
         ModalLoading: "../onpe/modals/ModalLoading",
@@ -6407,6 +6473,22 @@ function personalizeComponent(code, componentName) {
     if (!componentName.toLowerCase().startsWith("icon-") && !componentName.toLowerCase().startsWith("modal")) {
         personalizedCode = personalizedCode.replace(/from "\.\.\/onpe\/ui\/([^"]+)"/g, function (match, component) { return "from \"./".concat(component, "\""); });
     }
+    // Para Footer que importa BrowserRecommended
+    if (componentName.toLowerCase() === "footer") {
+        // Arreglar importación de BrowserRecommended
+        personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
+        personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
+        // Arreglar importación de IconInfo
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
+        // Arreglar importación de useToggle
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle\/useToggle"/g, "from \"../../hooks/useToggle\"");
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle"/g, "from \"../../hooks/useToggle\"");
+    }
+    // Para BrowserRecommended que importa iconos
+    if (componentName.toLowerCase() === "browser-recommended") {
+        personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Browsers\/([^"]+)"/g, function (match, icon) { return "from \"../icons/browsers/".concat(icon, "\""); });
+    }
     // Para modales que importan componentes UI
     if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
         // Arreglar importación de Modal específicamente

package/dist/components/BrowserRecommended/BrowserRecommended.d.ts

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

package/dist/components/BrowserRecommended/index.d.ts

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

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+export interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    showBrowserInfo?: boolean;
+    showContactInfo?: boolean;
+    showVersionInfo?: ReactNode;
+    isDevelopment?: boolean;
+    showFooterContent?: boolean;
+}
+export declare const Footer: ({ showBrowserInfo, showContactInfo, showVersionInfo, showFooterContent, isDevelopment, ...props }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;
+//# sourceMappingURL=Footer.d.ts.map

package/dist/components/Footer/index.d.ts

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

package/dist/components/index.d.ts

@@ -1,3 +1,7 @@
 export { Button } from "./Button";
 export type { ButtonProps } from "./Button";
+export { Footer } from "./Footer";
+export type { FooterProps } from "./Footer";
+export { BrowserRecommended } from "./BrowserRecommended";
+export type { BrowserRecommendedProps } from "./BrowserRecommended";
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useLocalStorage } from "./useLocalStorage";
 export { useDebounce } from "./useDebounce";
+export { useToggle } from "./useToggle";
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/useToggle/index.d.ts

@@ -0,0 +1,2 @@
+export { useToggle } from "./useToggle";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useToggle/useToggle.d.ts

@@ -0,0 +1,2 @@
+export declare const useToggle: (initialValue?: boolean) => readonly [boolean, () => void, () => void, () => void];
+//# sourceMappingURL=useToggle.d.ts.map

package/dist/icons/Actions/IconInfo/IconInfo.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from "react";
+export declare const IconInfo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default IconInfo;
+//# sourceMappingURL=IconInfo.d.ts.map

package/dist/icons/Actions/IconInfo/index.d.ts

@@ -0,0 +1,2 @@
+export { IconInfo } from "./IconInfo";
+//# sourceMappingURL=index.d.ts.map

package/dist/icons.d.ts

@@ -3,6 +3,7 @@ export { IconWarning } from "./icons/Actions/IconWarning/IconWarning";
 export { IconCheck } from "./icons/Actions/IconCheck/IconCheck";
 export { IconSpinnerDesktop } from "./icons/Actions/IconSpinnerDesktop/IconSpinnerDesktop";
 export { IconSpinnerMobile } from "./icons/Actions/IconSpinnerMobile/IconSpinnerMobile";
+export { IconInfo } from "./icons/Actions/IconInfo/IconInfo";
 export { IconChromeColor } from "./icons/Browsers/IconChromeColor/IconChromeColor";
 export { IconChrome } from "./icons/Browsers/IconChrome/IconChrome";
 export { IconSafariColor } from "./icons/Browsers/IconSafariColor/IconSafariColor";

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-red-100:oklch(93.6% 0.032 17.717);--color-red-500:oklch(63.7% 0.237 25.331);--color-red-600:oklch(57.7% 0.245 27.325);--color-red-800:oklch(44.4% 0.177 26.899);--color-orange-500:oklch(70.5% 0.213 47.604);--color-yellow-50:oklch(98.7% 0.026 102.212);--color-yellow-700:oklch(55.4% 0.135 66.442);--color-yellow-900:oklch(42.1% 0.095 57.708);--color-green-50:oklch(98.2% 0.018 155.826);--color-green-100:oklch(96.2% 0.044 156.743);--color-green-500:oklch(72.3% 0.219 149.579);--color-green-600:oklch(62.7% 0.194 149.214);--color-green-700:oklch(52.7% 0.154 150.069);--color-green-800:oklch(44.8% 0.119 151.328);--color-green-900:oklch(39.3% 0.095 152.535);--color-blue-50:oklch(97% 0.014 254.604);--color-blue-100:oklch(93.2% 0.032 255.585);--color-blue-500:oklch(62.3% 0.214 259.815);--color-blue-600:oklch(54.6% 0.245 262.881);--color-blue-700:oklch(48.8% 0.243 264.376);--color-blue-900:oklch(37.9% 0.146 265.522);--color-purple-500:oklch(62.7% 0.265 303.9);--color-purple-600:oklch(55.8% 0.288 302.321);--color-gray-50:oklch(98.5% 0.002 247.839);--color-gray-100:oklch(96.7% 0.003 264.542);--color-gray-200:oklch(92.8% 0.006 264.531);--color-gray-300:oklch(87.2% 0.01 258.338);--color-gray-500:oklch(55.1% 0.027 264.364);--color-gray-600:oklch(44.6% 0.03 256.802);--color-gray-700:oklch(37.3% 0.034 259.733);--color-gray-900:oklch(21% 0.034 264.665);--color-white:#fff;--spacing:0.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-7xl:80rem;--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-3xl:1.875rem;--text-3xl--line-height:1.2;--text-4xl:2.25rem;--text-4xl--line-height:1.11111;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:0.05em;--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:#003770;--color-onpe-ui-skyblue:#0073cf;--color-onpe-ui-skyblue-light:#69b2e8;--color-onpe-ui-yellow:#ffb81c;--color-onpe-ui-light-skyblue:#aaeff6;--color-onpe-ui-gray:#bcbcbc;--color-onpe-ui-gray-light:#bdbdbd;--color-onpe-ui-gray-extra-light:#f2f2f2;--color-onpe-ui-red:#e3002b;--color-onpe-ui-dark-gray:#4f4f4f;--color-onpe-ui-green:#76bd43;--color-onpe-ui-yellow-light:#fff1d2}}@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-1{margin-bottom:calc(var(--spacing)*1)}.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)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.-ml-1{margin-left:calc(var(--spacing)*-1)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.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-12{width:calc(var(--spacing)*12)}.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-7xl{max-width:var(--container-7xl)}.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}.min-w-full{min-width:100%}.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-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.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-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*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-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-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))}}.space-x-8{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}}.divide-y{:where(&>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-bottom-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse))}}.divide-gray-200{:where(&>:not(:last-child)){border-color:var(--color-gray-200)}}.overflow-x-auto{overflow-x:auto}.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{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-onpe-ui-blue{border-color:var(--color-onpe-ui-blue)}.border-transparent{border-color:transparent}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-blue\/80{background-color:color-mix(in srgb,#003770 80%,transparent);@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{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-dark-gray\/80{background-color:color-mix(in srgb,#4f4f4f 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-gray-extra-light\/80{background-color:color-mix(in srgb,#f2f2f2 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-light\/80{background-color:color-mix(in srgb,#bdbdbd 80%,transparent);@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:color-mix(in srgb,#bcbcbc 80%,transparent);@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{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-green\/80{background-color:color-mix(in srgb,#76bd43 80%,transparent);@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{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-light-skyblue\/80{background-color:color-mix(in srgb,#aaeff6 80%,transparent);@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{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-red\/80{background-color:color-mix(in srgb,#e3002b 80%,transparent);@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{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-skyblue-light\/80{background-color:color-mix(in srgb,#69b2e8 80%,transparent);@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:color-mix(in srgb,#0073cf 80%,transparent);@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{background-color:var(--color-onpe-ui-yellow-light)}.bg-onpe-ui-yellow-light\/80{background-color:color-mix(in srgb,#fff1d2 80%,transparent);@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:color-mix(in srgb,#ffb81c 80%,transparent);@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-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.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)}}.bg-yellow-50{background-color:var(--color-yellow-50)}.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-2{padding-inline:calc(var(--spacing)*2)}.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{padding-block:calc(var(--spacing)*1)}.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-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.pt-4{padding-top:calc(var(--spacing)*4)}.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-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--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)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-900{color:var(--color-blue-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.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-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-900{color:var(--color-yellow-900)}.uppercase{text-transform:uppercase}.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))}.shadow-sm{--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));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.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\:border-gray-300{&:hover{@media (hover:hover){border-color:var(--color-gray-300)}}}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 30%,transparent)}}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 80%,transparent);@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-dark-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#4f4f4f 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 30%,transparent)}}}}.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-extra-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#f2f2f2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bdbdbd 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 80%,transparent);@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\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 30%,transparent)}}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 80%,transparent);@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-light-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#aaeff6 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 30%,transparent)}}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 80%,transparent);@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-onpe-ui-skyblue-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#69b2e8 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#0073cf 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff1d2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#ffb81c 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 30%,transparent)}}}}.hover\:bg-purple-600{&:hover{@media (hover:hover){background-color:var(--color-purple-600)}}}.hover\:text-gray-700{&:hover{@media (hover:hover){color:var(--color-gray-700)}}}.hover\:text-onpe-ui-blue{&:hover{@media (hover:hover){color:var(--color-onpe-ui-blue)}}}.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-blue-500{&:focus{--tw-ring-color:var(--color-blue-500)}}.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)}}}}.lg\:flex-row,.lg\:grid-cols-4,.lg\:max-w-\[576px\],.lg\:mt-16,.lg\:mt-20,.lg\:mt-4,.lg\:px-5,.lg\:px-8,.lg\:py-16,.lg\:text-2xl,.lg\:text-lg,.lg\:w-\[1024px\],.lg\:w-\[200px\],.md\:block,.md\:gap-12,.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4,.md\:h-\[48px\],.md\:hidden,.md\:mt-20,.md\:text-2xl,.md\:text-\[64px\],.md\:text-lg,.md\:w-\[48px\],.md\:w-\[500px\],.sm\:px-6,.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-divide-y-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-tracking{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-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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}}}
+/*! 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-red-100:oklch(93.6% 0.032 17.717);--color-red-500:oklch(63.7% 0.237 25.331);--color-red-600:oklch(57.7% 0.245 27.325);--color-red-800:oklch(44.4% 0.177 26.899);--color-orange-500:oklch(70.5% 0.213 47.604);--color-yellow-50:oklch(98.7% 0.026 102.212);--color-yellow-700:oklch(55.4% 0.135 66.442);--color-yellow-900:oklch(42.1% 0.095 57.708);--color-green-50:oklch(98.2% 0.018 155.826);--color-green-100:oklch(96.2% 0.044 156.743);--color-green-500:oklch(72.3% 0.219 149.579);--color-green-600:oklch(62.7% 0.194 149.214);--color-green-700:oklch(52.7% 0.154 150.069);--color-green-800:oklch(44.8% 0.119 151.328);--color-green-900:oklch(39.3% 0.095 152.535);--color-blue-50:oklch(97% 0.014 254.604);--color-blue-100:oklch(93.2% 0.032 255.585);--color-blue-500:oklch(62.3% 0.214 259.815);--color-blue-600:oklch(54.6% 0.245 262.881);--color-blue-700:oklch(48.8% 0.243 264.376);--color-blue-900:oklch(37.9% 0.146 265.522);--color-purple-500:oklch(62.7% 0.265 303.9);--color-purple-600:oklch(55.8% 0.288 302.321);--color-gray-50:oklch(98.5% 0.002 247.839);--color-gray-100:oklch(96.7% 0.003 264.542);--color-gray-200:oklch(92.8% 0.006 264.531);--color-gray-300:oklch(87.2% 0.01 258.338);--color-gray-500:oklch(55.1% 0.027 264.364);--color-gray-600:oklch(44.6% 0.03 256.802);--color-gray-700:oklch(37.3% 0.034 259.733);--color-gray-800:oklch(27.8% 0.033 256.848);--color-gray-900:oklch(21% 0.034 264.665);--color-white:#fff;--spacing:0.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-7xl:80rem;--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-3xl:1.875rem;--text-3xl--line-height:1.2;--text-4xl:2.25rem;--text-4xl--line-height:1.11111;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:0.05em;--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:#003770;--color-onpe-ui-skyblue:#0073cf;--color-onpe-ui-skyblue-light:#69b2e8;--color-onpe-ui-yellow:#ffb81c;--color-onpe-ui-light-skyblue:#aaeff6;--color-onpe-ui-gray:#bcbcbc;--color-onpe-ui-gray-light:#bdbdbd;--color-onpe-ui-gray-extra-light:#f2f2f2;--color-onpe-ui-red:#e3002b;--color-onpe-ui-dark-gray:#4f4f4f;--color-onpe-ui-green:#76bd43;--color-onpe-ui-yellow-light:#fff1d2}}@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)}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-6{bottom:calc(var(--spacing)*6)}.left-1\/2{left:50%}.-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-1{margin-bottom:calc(var(--spacing)*1)}.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)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.-ml-1{margin-left:calc(var(--spacing)*-1)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.h-0{height:calc(var(--spacing)*0)}.h-3{height:calc(var(--spacing)*3)}.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-\[93px\]{height:93px}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.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-7xl{max-width:var(--container-7xl)}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-\[1400px\]{max-width:1400px}.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}.min-w-full{min-width:100%}.-translate-x-1\/2{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.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-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.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-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*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-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-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))}}.space-x-8{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}}.divide-y{:where(&>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-bottom-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse))}}.divide-gray-200{:where(&>:not(:last-child)){border-color:var(--color-gray-200)}}.overflow-x-auto{overflow-x:auto}.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-t-4{border-top-style:var(--tw-border-style);border-top-width:4px}.border-r-4{border-right-style:var(--tw-border-style);border-right-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-onpe-ui-blue{border-color:var(--color-onpe-ui-blue)}.border-transparent{border-color:transparent}.border-t-onpe-ui-blue{border-top-color:var(--color-onpe-ui-blue)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-blue\/80{background-color:color-mix(in srgb,#003770 80%,transparent);@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{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-dark-gray\/80{background-color:color-mix(in srgb,#4f4f4f 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-gray-extra-light\/80{background-color:color-mix(in srgb,#f2f2f2 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-light\/80{background-color:color-mix(in srgb,#bdbdbd 80%,transparent);@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:color-mix(in srgb,#bcbcbc 80%,transparent);@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{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-green\/80{background-color:color-mix(in srgb,#76bd43 80%,transparent);@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{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-light-skyblue\/80{background-color:color-mix(in srgb,#aaeff6 80%,transparent);@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{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-red\/80{background-color:color-mix(in srgb,#e3002b 80%,transparent);@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{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-skyblue-light\/80{background-color:color-mix(in srgb,#69b2e8 80%,transparent);@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\/15{background-color:color-mix(in srgb,#0073cf 15%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 15%,transparent)}}.bg-onpe-ui-skyblue\/80{background-color:color-mix(in srgb,#0073cf 80%,transparent);@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{background-color:var(--color-onpe-ui-yellow-light)}.bg-onpe-ui-yellow-light\/75{background-color:color-mix(in srgb,#fff1d2 75%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 75%,transparent)}}.bg-onpe-ui-yellow-light\/80{background-color:color-mix(in srgb,#fff1d2 80%,transparent);@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:color-mix(in srgb,#ffb81c 80%,transparent);@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-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.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)}}.bg-yellow-50{background-color:var(--color-yellow-50)}.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-2{padding-inline:calc(var(--spacing)*2)}.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{padding-block:calc(var(--spacing)*1)}.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-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.py-14{padding-block:calc(var(--spacing)*14)}.pt-3{padding-top:calc(var(--spacing)*3)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-5{padding-top:calc(var(--spacing)*5)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pb-24\.5{padding-bottom:calc(var(--spacing)*24.5)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--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)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-900{color:var(--color-blue-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.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-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-900{color:var(--color-yellow-900)}.uppercase{text-transform:uppercase}.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))}.shadow-sm{--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));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.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\:border-gray-300{&:hover{@media (hover:hover){border-color:var(--color-gray-300)}}}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 30%,transparent)}}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 80%,transparent);@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-dark-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#4f4f4f 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 30%,transparent)}}}}.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-extra-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#f2f2f2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bdbdbd 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 80%,transparent);@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\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 30%,transparent)}}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 80%,transparent);@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-light-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#aaeff6 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 30%,transparent)}}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 80%,transparent);@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-onpe-ui-skyblue-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#69b2e8 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#0073cf 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff1d2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#ffb81c 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 30%,transparent)}}}}.hover\:bg-purple-600{&:hover{@media (hover:hover){background-color:var(--color-purple-600)}}}.hover\:text-gray-700{&:hover{@media (hover:hover){color:var(--color-gray-700)}}}.hover\:text-onpe-ui-blue{&:hover{@media (hover:hover){color:var(--color-onpe-ui-blue)}}}.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-blue-500{&:focus{--tw-ring-color:var(--color-blue-500)}}.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)}}}}.lg\:block,.lg\:flex-row,.lg\:gap-8,.lg\:grid-cols-3,.lg\:grid-cols-4,.lg\:h-\[46px\],.lg\:hidden,.lg\:max-w-\[576px\],.lg\:mt-16,.lg\:mt-20,.lg\:mt-4,.lg\:pb-\[18px\],.lg\:pt-\[15px\],.lg\:px-5,.lg\:px-8,.lg\:py-16,.lg\:text-2xl,.lg\:text-center,.lg\:text-lg,.lg\:w-\[1024px\],.lg\:w-\[200px\],.md\:block,.md\:gap-12,.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4,.md\:h-\[48px\],.md\:hidden,.md\:mt-20,.md\:py-2,.md\:text-2xl,.md\:text-\[64px\],.md\:text-lg,.md\:w-\[48px\],.md\:w-\[500px\],.sm\:px-6,.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-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@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-divide-y-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-tracking{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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--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-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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}}}

package/dist/index.d.ts

@@ -161,6 +161,8 @@ declare const IconSpinnerDesktop: (props: SVGProps<SVGSVGElement>) => react_jsx_
 
 declare const IconSpinnerMobile: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
+declare const IconInfo: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
 declare const IconChromeColor: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
 declare const IconChrome: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
@@ -189,5 +191,5 @@ declare const IconElectionsGeneral: (props: SVGProps<SVGSVGElement>) => react_js
 
 declare const ElectionsIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
-export { APIClient, Button, ElectionsIcon, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconMozilla, IconMozillaColor, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
+export { APIClient, Button, ElectionsIcon, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconInfo, IconMozilla, IconMozillaColor, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
 export type { ButtonProps, ModalBrowserIncompatibleProps, ModalConfirmProps, ModalLoadingProps, ModalProps, ModalSystemIncompatibleProps, OverlayProps, PortalProps, ShowProps };

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-red-100:oklch(93.6% 0.032 17.717);--color-red-500:oklch(63.7% 0.237 25.331);--color-red-600:oklch(57.7% 0.245 27.325);--color-red-800:oklch(44.4% 0.177 26.899);--color-orange-500:oklch(70.5% 0.213 47.604);--color-yellow-50:oklch(98.7% 0.026 102.212);--color-yellow-700:oklch(55.4% 0.135 66.442);--color-yellow-900:oklch(42.1% 0.095 57.708);--color-green-50:oklch(98.2% 0.018 155.826);--color-green-100:oklch(96.2% 0.044 156.743);--color-green-500:oklch(72.3% 0.219 149.579);--color-green-600:oklch(62.7% 0.194 149.214);--color-green-700:oklch(52.7% 0.154 150.069);--color-green-800:oklch(44.8% 0.119 151.328);--color-green-900:oklch(39.3% 0.095 152.535);--color-blue-50:oklch(97% 0.014 254.604);--color-blue-100:oklch(93.2% 0.032 255.585);--color-blue-500:oklch(62.3% 0.214 259.815);--color-blue-600:oklch(54.6% 0.245 262.881);--color-blue-700:oklch(48.8% 0.243 264.376);--color-blue-900:oklch(37.9% 0.146 265.522);--color-purple-500:oklch(62.7% 0.265 303.9);--color-purple-600:oklch(55.8% 0.288 302.321);--color-gray-50:oklch(98.5% 0.002 247.839);--color-gray-100:oklch(96.7% 0.003 264.542);--color-gray-200:oklch(92.8% 0.006 264.531);--color-gray-300:oklch(87.2% 0.01 258.338);--color-gray-500:oklch(55.1% 0.027 264.364);--color-gray-600:oklch(44.6% 0.03 256.802);--color-gray-700:oklch(37.3% 0.034 259.733);--color-gray-900:oklch(21% 0.034 264.665);--color-white:#fff;--spacing:0.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-7xl:80rem;--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-3xl:1.875rem;--text-3xl--line-height:1.2;--text-4xl:2.25rem;--text-4xl--line-height:1.11111;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:0.05em;--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:#003770;--color-onpe-ui-skyblue:#0073cf;--color-onpe-ui-skyblue-light:#69b2e8;--color-onpe-ui-yellow:#ffb81c;--color-onpe-ui-light-skyblue:#aaeff6;--color-onpe-ui-gray:#bcbcbc;--color-onpe-ui-gray-light:#bdbdbd;--color-onpe-ui-gray-extra-light:#f2f2f2;--color-onpe-ui-red:#e3002b;--color-onpe-ui-dark-gray:#4f4f4f;--color-onpe-ui-green:#76bd43;--color-onpe-ui-yellow-light:#fff1d2}}@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-1{margin-bottom:calc(var(--spacing)*1)}.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)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.-ml-1{margin-left:calc(var(--spacing)*-1)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.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-12{width:calc(var(--spacing)*12)}.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-7xl{max-width:var(--container-7xl)}.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}.min-w-full{min-width:100%}.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-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.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-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*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-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-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))}}.space-x-8{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}}.divide-y{:where(&>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-bottom-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse))}}.divide-gray-200{:where(&>:not(:last-child)){border-color:var(--color-gray-200)}}.overflow-x-auto{overflow-x:auto}.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{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-onpe-ui-blue{border-color:var(--color-onpe-ui-blue)}.border-transparent{border-color:transparent}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-blue\/80{background-color:color-mix(in srgb,#003770 80%,transparent);@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{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-dark-gray\/80{background-color:color-mix(in srgb,#4f4f4f 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-gray-extra-light\/80{background-color:color-mix(in srgb,#f2f2f2 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-light\/80{background-color:color-mix(in srgb,#bdbdbd 80%,transparent);@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:color-mix(in srgb,#bcbcbc 80%,transparent);@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{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-green\/80{background-color:color-mix(in srgb,#76bd43 80%,transparent);@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{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-light-skyblue\/80{background-color:color-mix(in srgb,#aaeff6 80%,transparent);@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{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-red\/80{background-color:color-mix(in srgb,#e3002b 80%,transparent);@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{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-skyblue-light\/80{background-color:color-mix(in srgb,#69b2e8 80%,transparent);@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:color-mix(in srgb,#0073cf 80%,transparent);@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{background-color:var(--color-onpe-ui-yellow-light)}.bg-onpe-ui-yellow-light\/80{background-color:color-mix(in srgb,#fff1d2 80%,transparent);@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:color-mix(in srgb,#ffb81c 80%,transparent);@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-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.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)}}.bg-yellow-50{background-color:var(--color-yellow-50)}.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-2{padding-inline:calc(var(--spacing)*2)}.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{padding-block:calc(var(--spacing)*1)}.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-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.pt-4{padding-top:calc(var(--spacing)*4)}.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-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--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)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-900{color:var(--color-blue-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.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-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-900{color:var(--color-yellow-900)}.uppercase{text-transform:uppercase}.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))}.shadow-sm{--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));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.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\:border-gray-300{&:hover{@media (hover:hover){border-color:var(--color-gray-300)}}}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 30%,transparent)}}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 80%,transparent);@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-dark-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#4f4f4f 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 30%,transparent)}}}}.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-extra-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#f2f2f2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bdbdbd 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 80%,transparent);@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\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 30%,transparent)}}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 80%,transparent);@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-light-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#aaeff6 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 30%,transparent)}}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 80%,transparent);@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-onpe-ui-skyblue-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#69b2e8 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#0073cf 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff1d2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#ffb81c 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 30%,transparent)}}}}.hover\:bg-purple-600{&:hover{@media (hover:hover){background-color:var(--color-purple-600)}}}.hover\:text-gray-700{&:hover{@media (hover:hover){color:var(--color-gray-700)}}}.hover\:text-onpe-ui-blue{&:hover{@media (hover:hover){color:var(--color-onpe-ui-blue)}}}.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-blue-500{&:focus{--tw-ring-color:var(--color-blue-500)}}.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)}}}}.lg\:flex-row,.lg\:grid-cols-4,.lg\:max-w-\[576px\],.lg\:mt-16,.lg\:mt-20,.lg\:mt-4,.lg\:px-5,.lg\:px-8,.lg\:py-16,.lg\:text-2xl,.lg\:text-lg,.lg\:w-\[1024px\],.lg\:w-\[200px\],.md\:block,.md\:gap-12,.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4,.md\:h-\[48px\],.md\:hidden,.md\:mt-20,.md\:text-2xl,.md\:text-\[64px\],.md\:text-lg,.md\:w-\[48px\],.md\:w-\[500px\],.sm\:px-6,.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-divide-y-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-tracking{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-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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}}}
+/*! 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-red-100:oklch(93.6% 0.032 17.717);--color-red-500:oklch(63.7% 0.237 25.331);--color-red-600:oklch(57.7% 0.245 27.325);--color-red-800:oklch(44.4% 0.177 26.899);--color-orange-500:oklch(70.5% 0.213 47.604);--color-yellow-50:oklch(98.7% 0.026 102.212);--color-yellow-700:oklch(55.4% 0.135 66.442);--color-yellow-900:oklch(42.1% 0.095 57.708);--color-green-50:oklch(98.2% 0.018 155.826);--color-green-100:oklch(96.2% 0.044 156.743);--color-green-500:oklch(72.3% 0.219 149.579);--color-green-600:oklch(62.7% 0.194 149.214);--color-green-700:oklch(52.7% 0.154 150.069);--color-green-800:oklch(44.8% 0.119 151.328);--color-green-900:oklch(39.3% 0.095 152.535);--color-blue-50:oklch(97% 0.014 254.604);--color-blue-100:oklch(93.2% 0.032 255.585);--color-blue-500:oklch(62.3% 0.214 259.815);--color-blue-600:oklch(54.6% 0.245 262.881);--color-blue-700:oklch(48.8% 0.243 264.376);--color-blue-900:oklch(37.9% 0.146 265.522);--color-purple-500:oklch(62.7% 0.265 303.9);--color-purple-600:oklch(55.8% 0.288 302.321);--color-gray-50:oklch(98.5% 0.002 247.839);--color-gray-100:oklch(96.7% 0.003 264.542);--color-gray-200:oklch(92.8% 0.006 264.531);--color-gray-300:oklch(87.2% 0.01 258.338);--color-gray-500:oklch(55.1% 0.027 264.364);--color-gray-600:oklch(44.6% 0.03 256.802);--color-gray-700:oklch(37.3% 0.034 259.733);--color-gray-800:oklch(27.8% 0.033 256.848);--color-gray-900:oklch(21% 0.034 264.665);--color-white:#fff;--spacing:0.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-7xl:80rem;--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-3xl:1.875rem;--text-3xl--line-height:1.2;--text-4xl:2.25rem;--text-4xl--line-height:1.11111;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:0.05em;--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:#003770;--color-onpe-ui-skyblue:#0073cf;--color-onpe-ui-skyblue-light:#69b2e8;--color-onpe-ui-yellow:#ffb81c;--color-onpe-ui-light-skyblue:#aaeff6;--color-onpe-ui-gray:#bcbcbc;--color-onpe-ui-gray-light:#bdbdbd;--color-onpe-ui-gray-extra-light:#f2f2f2;--color-onpe-ui-red:#e3002b;--color-onpe-ui-dark-gray:#4f4f4f;--color-onpe-ui-green:#76bd43;--color-onpe-ui-yellow-light:#fff1d2}}@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)}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-6{bottom:calc(var(--spacing)*6)}.left-1\/2{left:50%}.-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-1{margin-bottom:calc(var(--spacing)*1)}.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)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.-ml-1{margin-left:calc(var(--spacing)*-1)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.h-0{height:calc(var(--spacing)*0)}.h-3{height:calc(var(--spacing)*3)}.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-\[93px\]{height:93px}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.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-7xl{max-width:var(--container-7xl)}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-\[1400px\]{max-width:1400px}.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}.min-w-full{min-width:100%}.-translate-x-1\/2{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.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-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.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-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*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-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-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))}}.space-x-8{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}}.divide-y{:where(&>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-bottom-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse))}}.divide-gray-200{:where(&>:not(:last-child)){border-color:var(--color-gray-200)}}.overflow-x-auto{overflow-x:auto}.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-t-4{border-top-style:var(--tw-border-style);border-top-width:4px}.border-r-4{border-right-style:var(--tw-border-style);border-right-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-onpe-ui-blue{border-color:var(--color-onpe-ui-blue)}.border-transparent{border-color:transparent}.border-t-onpe-ui-blue{border-top-color:var(--color-onpe-ui-blue)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-blue\/80{background-color:color-mix(in srgb,#003770 80%,transparent);@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{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-dark-gray\/80{background-color:color-mix(in srgb,#4f4f4f 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-gray-extra-light\/80{background-color:color-mix(in srgb,#f2f2f2 80%,transparent);@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{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-light\/80{background-color:color-mix(in srgb,#bdbdbd 80%,transparent);@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:color-mix(in srgb,#bcbcbc 80%,transparent);@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{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-green\/80{background-color:color-mix(in srgb,#76bd43 80%,transparent);@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{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-light-skyblue\/80{background-color:color-mix(in srgb,#aaeff6 80%,transparent);@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{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-red\/80{background-color:color-mix(in srgb,#e3002b 80%,transparent);@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{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-skyblue-light\/80{background-color:color-mix(in srgb,#69b2e8 80%,transparent);@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\/15{background-color:color-mix(in srgb,#0073cf 15%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 15%,transparent)}}.bg-onpe-ui-skyblue\/80{background-color:color-mix(in srgb,#0073cf 80%,transparent);@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{background-color:var(--color-onpe-ui-yellow-light)}.bg-onpe-ui-yellow-light\/75{background-color:color-mix(in srgb,#fff1d2 75%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 75%,transparent)}}.bg-onpe-ui-yellow-light\/80{background-color:color-mix(in srgb,#fff1d2 80%,transparent);@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:color-mix(in srgb,#ffb81c 80%,transparent);@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-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.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)}}.bg-yellow-50{background-color:var(--color-yellow-50)}.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-2{padding-inline:calc(var(--spacing)*2)}.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{padding-block:calc(var(--spacing)*1)}.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-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.py-14{padding-block:calc(var(--spacing)*14)}.pt-3{padding-top:calc(var(--spacing)*3)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-5{padding-top:calc(var(--spacing)*5)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pb-24\.5{padding-bottom:calc(var(--spacing)*24.5)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--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)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-900{color:var(--color-blue-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.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-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-900{color:var(--color-yellow-900)}.uppercase{text-transform:uppercase}.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))}.shadow-sm{--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));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.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\:border-gray-300{&:hover{@media (hover:hover){border-color:var(--color-gray-300)}}}.hover\:bg-onpe-ui-blue{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-blue)}}}.hover\:bg-onpe-ui-blue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-blue) 30%,transparent)}}}}.hover\:bg-onpe-ui-blue\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#003770 80%,transparent);@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-dark-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#4f4f4f 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-dark-gray) 30%,transparent)}}}}.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-extra-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#f2f2f2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-extra-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bdbdbd 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-gray) 30%,transparent)}}}}.hover\:bg-onpe-ui-gray\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#bcbcbc 80%,transparent);@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\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-green) 30%,transparent)}}}}.hover\:bg-onpe-ui-green\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#76bd43 80%,transparent);@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-light-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#aaeff6 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-light-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-red{&:hover{@media (hover:hover){background-color:var(--color-onpe-ui-red)}}}.hover\:bg-onpe-ui-red\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-red) 30%,transparent)}}}}.hover\:bg-onpe-ui-red\/80{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#e3002b 80%,transparent);@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-onpe-ui-skyblue-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#69b2e8 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-skyblue\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#0073cf 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-skyblue) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow-light\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff1d2 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow-light) 30%,transparent)}}}}.hover\:bg-onpe-ui-yellow\/30{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#ffb81c 30%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-onpe-ui-yellow) 30%,transparent)}}}}.hover\:bg-purple-600{&:hover{@media (hover:hover){background-color:var(--color-purple-600)}}}.hover\:text-gray-700{&:hover{@media (hover:hover){color:var(--color-gray-700)}}}.hover\:text-onpe-ui-blue{&:hover{@media (hover:hover){color:var(--color-onpe-ui-blue)}}}.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-blue-500{&:focus{--tw-ring-color:var(--color-blue-500)}}.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)}}}}.lg\:block,.lg\:flex-row,.lg\:gap-8,.lg\:grid-cols-3,.lg\:grid-cols-4,.lg\:h-\[46px\],.lg\:hidden,.lg\:max-w-\[576px\],.lg\:mt-16,.lg\:mt-20,.lg\:mt-4,.lg\:pb-\[18px\],.lg\:pt-\[15px\],.lg\:px-5,.lg\:px-8,.lg\:py-16,.lg\:text-2xl,.lg\:text-center,.lg\:text-lg,.lg\:w-\[1024px\],.lg\:w-\[200px\],.md\:block,.md\:gap-12,.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4,.md\:h-\[48px\],.md\:hidden,.md\:mt-20,.md\:py-2,.md\:text-2xl,.md\:text-\[64px\],.md\:text-lg,.md\:w-\[48px\],.md\:w-\[500px\],.sm\:px-6,.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-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@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-divide-y-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-tracking{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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--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-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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}}}

package/dist/index.esm.js

@@ -474,6 +474,8 @@ var StorageManager = /** @class */ (function () {
     return StorageManager;
 }());
 
+var IconInfo = 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: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z", fill: "currentColor" }) }))); };
+
 var IconChrome = function (props) { return (jsxs("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { clipPath: "url(#clip2_4460_12124)", children: [jsx("path", { d: "M4.00488 3.44051C6.20217 1.58479 9.04983 0.560425 12.0001 0.564465C14.1846 0.563653 16.3279 1.12509 18.1987 2.18821C20.0696 3.25133 21.597 4.77577 22.6161 6.59708H12.0001C10.8956 6.5969 9.81579 6.90448 8.89627 7.48114C7.97674 8.0578 7.25859 8.87781 6.83208 9.8381L4.00488 3.44051Z", fill: "currentColor" }), jsx("path", { d: "M2.79194 4.62109C1.53583 6.03815 0.666731 7.72344 0.260475 9.5299C-0.145781 11.3364 -0.0768467 13.2091 0.461263 14.9846C0.999374 16.7602 1.99031 18.3847 3.34759 19.7163C4.70487 21.0478 6.38726 22.0461 8.24794 22.6239L12.7471 17.1071C11.3631 17.2831 9.95915 16.9654 8.81071 16.2163C7.66226 15.4671 6.85212 14.3407 6.53914 13.0577C6.50797 13.0141 6.48169 12.9676 6.46074 12.919L2.79194 4.62109Z", fill: "currentColor" }), jsx("path", { d: "M9.94385 23.0208C12.0087 23.3602 14.1319 23.1838 16.102 22.5093C18.0721 21.8347 19.8204 20.6856 21.1728 19.1761C22.5252 17.6667 23.4346 15.8497 23.8105 13.906C24.1864 11.9624 24.0155 9.95977 23.315 8.09766C23.2769 8.10277 23.2384 8.10529 23.1998 8.1052H15.9198C16.4526 8.59622 16.8757 9.18278 17.1642 9.83031C17.4527 10.4778 17.6009 11.1733 17.5998 11.8756C17.6033 13.2244 17.0569 14.5229 16.0734 15.5027L9.94385 23.0208Z", fill: "currentColor" }), jsx("path", { d: "M8 11.8759C8 10.8759 8.42143 9.91687 9.17157 9.20979C9.92172 8.5027 10.9391 8.10547 12 8.10547C13.0609 8.10547 14.0783 8.5027 14.8284 9.20979C15.5786 9.91687 16 10.8759 16 11.8759C16 12.8758 15.5786 13.8348 14.8284 14.5419C14.0783 15.249 13.0609 15.6462 12 15.6462C10.9391 15.6462 9.92172 15.249 9.17157 14.5419C8.42143 13.8348 8 12.8758 8 11.8759Z", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip2_4460_12124", children: jsx("rect", { width: 24, height: 22.6223, fill: "white", transform: "translate(0 0.564453)" }) }) })] }))); };
 
 var IconSafari = function (props) { return (jsxs("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { clipPath: "url(#clip0_7500_5262)", children: [jsx("path", { d: "M7.93359 16.068L10.9832 10.9832L16.068 7.93359L13.0184 13.0184L7.93359 16.068Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12ZM19.0864 6.0112C19.1782 5.85821 19.2162 5.67893 19.1944 5.50185C19.1726 5.32477 19.0923 5.16006 18.9661 5.0339C18.8399 4.90774 18.6752 4.82737 18.4982 4.80557C18.3211 4.78378 18.1418 4.8218 17.9888 4.9136L9.8176 9.8176L4.912 17.9888C4.8202 18.1418 4.78218 18.3211 4.80397 18.4982C4.82577 18.6752 4.90614 18.8399 5.0323 18.9661C5.15845 19.0923 5.32317 19.1726 5.50025 19.1944C5.67733 19.2162 5.85661 19.1782 6.0096 19.0864L14.1808 14.1824L19.0864 6.0112Z", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_7500_5262", children: jsx("rect", { width: 24, height: 24, fill: "white" }) }) })] }))); };
@@ -488,5 +490,5 @@ var IconElectionsGeneral = function (props) { return (jsxs("svg", __assign({ wid
 
 var ElectionsIcon = function (props) { return (jsxs("svg", __assign({ width: 350, height: 70, viewBox: "0 0 350 70", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx("path", { d: "M130.62 9.46469V11.413H134.423V13.933H130.62V16.0797H134.925V18.728H127.307V6.80469H134.925V9.45302H130.62V9.46469Z", fill: "#1D3B6D" }), jsx("path", { d: "M139.872 6.21875V18.7254H136.559V6.21875H139.872Z", fill: "#1D3B6D" }), jsx("path", { d: "M150.768 14.6472H144.503C144.538 15.1605 144.678 15.5455 144.935 15.8022C145.191 16.0589 145.506 16.1872 145.903 16.1872C146.451 16.1872 146.848 15.9422 147.081 15.4405H150.616C150.465 16.0939 150.185 16.6772 149.765 17.1905C149.345 17.7039 148.808 18.1005 148.166 18.4039C147.525 18.7072 146.813 18.8472 146.043 18.8472C145.11 18.8472 144.281 18.6489 143.546 18.2522C142.823 17.8555 142.251 17.2955 141.843 16.5605C141.435 15.8255 141.225 14.9622 141.225 13.9705C141.225 12.9789 141.423 12.1272 141.831 11.3922C142.24 10.6689 142.8 10.1089 143.535 9.71219C144.258 9.31552 145.098 9.11719 146.043 9.11719C146.988 9.11719 147.805 9.30385 148.528 9.68885C149.251 10.0739 149.811 10.6222 150.22 11.3339C150.628 12.0455 150.826 12.8855 150.826 13.8539C150.826 14.1105 150.815 14.3672 150.78 14.6355L150.768 14.6472ZM147.443 13.0489C147.443 12.6405 147.303 12.3255 147.035 12.0922C146.766 11.8589 146.428 11.7422 146.02 11.7422C145.611 11.7422 145.285 11.8472 145.028 12.0689C144.771 12.2905 144.596 12.6172 144.526 13.0372H147.443V13.0489Z", fill: "#1D3B6D" })] }))); };
 
-export { APIClient, Button, ElectionsIcon, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconMozilla, IconMozillaColor, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
+export { APIClient, Button, ElectionsIcon, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconInfo, IconMozilla, IconMozillaColor, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.js

@@ -474,6 +474,8 @@ var StorageManager = /** @class */ (function () {
     return StorageManager;
 }());
 
+var IconInfo = 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: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z", fill: "currentColor" }) }))); };
+
 var IconChrome = function (props) { return (jsxs("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { clipPath: "url(#clip2_4460_12124)", children: [jsx("path", { d: "M4.00488 3.44051C6.20217 1.58479 9.04983 0.560425 12.0001 0.564465C14.1846 0.563653 16.3279 1.12509 18.1987 2.18821C20.0696 3.25133 21.597 4.77577 22.6161 6.59708H12.0001C10.8956 6.5969 9.81579 6.90448 8.89627 7.48114C7.97674 8.0578 7.25859 8.87781 6.83208 9.8381L4.00488 3.44051Z", fill: "currentColor" }), jsx("path", { d: "M2.79194 4.62109C1.53583 6.03815 0.666731 7.72344 0.260475 9.5299C-0.145781 11.3364 -0.0768467 13.2091 0.461263 14.9846C0.999374 16.7602 1.99031 18.3847 3.34759 19.7163C4.70487 21.0478 6.38726 22.0461 8.24794 22.6239L12.7471 17.1071C11.3631 17.2831 9.95915 16.9654 8.81071 16.2163C7.66226 15.4671 6.85212 14.3407 6.53914 13.0577C6.50797 13.0141 6.48169 12.9676 6.46074 12.919L2.79194 4.62109Z", fill: "currentColor" }), jsx("path", { d: "M9.94385 23.0208C12.0087 23.3602 14.1319 23.1838 16.102 22.5093C18.0721 21.8347 19.8204 20.6856 21.1728 19.1761C22.5252 17.6667 23.4346 15.8497 23.8105 13.906C24.1864 11.9624 24.0155 9.95977 23.315 8.09766C23.2769 8.10277 23.2384 8.10529 23.1998 8.1052H15.9198C16.4526 8.59622 16.8757 9.18278 17.1642 9.83031C17.4527 10.4778 17.6009 11.1733 17.5998 11.8756C17.6033 13.2244 17.0569 14.5229 16.0734 15.5027L9.94385 23.0208Z", fill: "currentColor" }), jsx("path", { d: "M8 11.8759C8 10.8759 8.42143 9.91687 9.17157 9.20979C9.92172 8.5027 10.9391 8.10547 12 8.10547C13.0609 8.10547 14.0783 8.5027 14.8284 9.20979C15.5786 9.91687 16 10.8759 16 11.8759C16 12.8758 15.5786 13.8348 14.8284 14.5419C14.0783 15.249 13.0609 15.6462 12 15.6462C10.9391 15.6462 9.92172 15.249 9.17157 14.5419C8.42143 13.8348 8 12.8758 8 11.8759Z", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip2_4460_12124", children: jsx("rect", { width: 24, height: 22.6223, fill: "white", transform: "translate(0 0.564453)" }) }) })] }))); };
 
 var IconSafari = function (props) { return (jsxs("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { clipPath: "url(#clip0_7500_5262)", children: [jsx("path", { d: "M7.93359 16.068L10.9832 10.9832L16.068 7.93359L13.0184 13.0184L7.93359 16.068Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12ZM19.0864 6.0112C19.1782 5.85821 19.2162 5.67893 19.1944 5.50185C19.1726 5.32477 19.0923 5.16006 18.9661 5.0339C18.8399 4.90774 18.6752 4.82737 18.4982 4.80557C18.3211 4.78378 18.1418 4.8218 17.9888 4.9136L9.8176 9.8176L4.912 17.9888C4.8202 18.1418 4.78218 18.3211 4.80397 18.4982C4.82577 18.6752 4.90614 18.8399 5.0323 18.9661C5.15845 19.0923 5.32317 19.1726 5.50025 19.1944C5.67733 19.2162 5.85661 19.1782 6.0096 19.0864L14.1808 14.1824L19.0864 6.0112Z", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_7500_5262", children: jsx("rect", { width: 24, height: 24, fill: "white" }) }) })] }))); };
@@ -488,5 +490,5 @@ var IconElectionsGeneral = function (props) { return (jsxs("svg", __assign({ wid
 
 var ElectionsIcon = function (props) { return (jsxs("svg", __assign({ width: 350, height: 70, viewBox: "0 0 350 70", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx("path", { d: "M130.62 9.46469V11.413H134.423V13.933H130.62V16.0797H134.925V18.728H127.307V6.80469H134.925V9.45302H130.62V9.46469Z", fill: "#1D3B6D" }), jsx("path", { d: "M139.872 6.21875V18.7254H136.559V6.21875H139.872Z", fill: "#1D3B6D" }), jsx("path", { d: "M150.768 14.6472H144.503C144.538 15.1605 144.678 15.5455 144.935 15.8022C145.191 16.0589 145.506 16.1872 145.903 16.1872C146.451 16.1872 146.848 15.9422 147.081 15.4405H150.616C150.465 16.0939 150.185 16.6772 149.765 17.1905C149.345 17.7039 148.808 18.1005 148.166 18.4039C147.525 18.7072 146.813 18.8472 146.043 18.8472C145.11 18.8472 144.281 18.6489 143.546 18.2522C142.823 17.8555 142.251 17.2955 141.843 16.5605C141.435 15.8255 141.225 14.9622 141.225 13.9705C141.225 12.9789 141.423 12.1272 141.831 11.3922C142.24 10.6689 142.8 10.1089 143.535 9.71219C144.258 9.31552 145.098 9.11719 146.043 9.11719C146.988 9.11719 147.805 9.30385 148.528 9.68885C149.251 10.0739 149.811 10.6222 150.22 11.3339C150.628 12.0455 150.826 12.8855 150.826 13.8539C150.826 14.1105 150.815 14.3672 150.78 14.6355L150.768 14.6472ZM147.443 13.0489C147.443 12.6405 147.303 12.3255 147.035 12.0922C146.766 11.8589 146.428 11.7422 146.02 11.7422C145.611 11.7422 145.285 11.8472 145.028 12.0689C144.771 12.2905 144.596 12.6172 144.526 13.0372H147.443V13.0489Z", fill: "#1D3B6D" })] }))); };
 
-export { APIClient, Button, ElectionsIcon, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconMozilla, IconMozillaColor, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
+export { APIClient, Button, ElectionsIcon, IconAndroid, IconApple, IconCheck, IconChrome, IconChromeColor, IconClose, IconEdge, IconEdgeColor, IconElectionsGeneral, IconInfo, IconMozilla, IconMozillaColor, IconSafari, IconSafariColor, IconSpinnerDesktop, IconSpinnerMobile, IconVotoDigital, IconWarning, IconWindow, Modal, ModalBrowserIncompatible, ModalConfirm, ModalLoading, ModalSystemIncompatible, Overlay, Portal, Show, StorageManager, apiClient, formatDate, useDebounce, useLocalStorage, validateEmail };
 //# sourceMappingURL=index.js.map

package/package.json

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