@dropi/ui 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -3,70 +3,42 @@
 Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
 Genera componentes reutilizables para Angular, React y Vue desde una única base de código.
 
-- **Paquete npm:** `@dropi/ui` (v0.1.6)
+- **Paquete npm:** `@dropi/ui` (v0.1.15)
 - **React wrappers:** `@dropi/ui-react`
 
 ---
 
-## Instalación
+## ⚡ Quick Start (Recomendado)
 
-| Framework | Paquete a instalar |
-|---|---|
-| React | `npm install @dropi/ui-react` |
-| Angular / Vue / Vanilla | `npm install @dropi/ui` |
-
-> **¿Por qué dos paquetes?**
-> `@dropi/ui` contiene los Web Components puros (estándares del navegador).
-> `@dropi/ui-react` son wrappers React auto-generados por Stencil que los envuelven con props tipadas, eventos estilo React (`onDropiChange`) y autocompletado en VSCode.
-> `@dropi/ui-react` depende internamente de `@dropi/ui` — no necesitas instalar los dos.
-
----
-
-## Setup
-
-### React (`main.tsx`)
-
-Con `@dropi/ui-react` **no necesitas** llamar `defineCustomElements()` — cada wrapper registra su Web Component automáticamente al importarlo.
-
-```typescript
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'  // estilos globales y tokens
-
-// No se necesita defineCustomElements()
-// Solo importa y usa los componentes directamente
-```
+La forma más rápida y segura de integrar la librería es usando nuestro configurador automático.
 
-### Angular (`main.ts`)
+### Con IA (Claude / Cursor / Windsurf)
+Si usas un asistente de IA, simplemente dile:
+> **`/install-dropi-ui`** o **"configura dropi-ui en este proyecto"**
 
-```typescript
-import { defineCustomElements } from '@dropi/ui/loader'
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
-
-defineCustomElements()
-bootstrapApplication(AppComponent, appConfig)
+### Manual (Terminal)
+Ejecuta el siguiente comando en la raíz de tu proyecto:
+```bash
+npx @dropi/ui setup
 ```
+*Este comando detectará tu framework (Angular, React o Vue), instalará las dependencias necesarias y configurará estilos e iconos automáticamente.*
 
-En módulos o componentes Angular que usen tags `<dropi-*>`, agregar el schema:
-
-```typescript
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-
-@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
-// o en standalone:
-@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
-```
+---
 
-### Assets (íconos)
+## 🛠️ Instalación Manual
 
-El componente `<dropi-icon>` requiere el sprite en `/assets/icons/symbol/svg/sprite.css.svg`.
+Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integración Detallada](DROPI_UI_SETUP.md) o sigue estos pasos:
 
-**Angular** — en `angular.json`:
-```json
-"assets": [
-  { "glob": "sprite.css.svg", "input": "node_modules/@dropi/ui/dist/dropi-ui/assets/icons/symbol/svg/", "output": "assets/icons/symbol/svg/" }
-]
-```
+### 1. Paquetes
+| Framework | Paquete a instalar |
+|---|---|
+| React | `npm install @dropi/ui @dropi/ui-react` |
+| Angular / Vue / Vanilla | `npm install @dropi/ui` |
 
-**React/Vite** — copiar a `public/assets/icons/symbol/svg/`.
+### 2. Estilos e Iconos
+- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en tu entry point.
+- **Loader**: Llamar a `defineCustomElements()` de `@dropi/ui/loader`.
+- **Iconos**: El componente `<dropi-icon>` requiere que el sprite SVG esté en `/assets/icons/symbol/svg/sprite.css.svg`.
 
 ---
 

package/scripts/postinstall.js

@@ -10,10 +10,29 @@ const path = require('path');
 
 // Solo mostrar el mensaje si se instala como dependencia, no en desarrollo local
 if (__dirname.includes('node_modules')) {
+  const fs = require('fs');
+  const projectRoot = path.resolve(__dirname, '../../..');
+  const skillsBase = path.join(__dirname, '..', 'skills', 'install-dropi-ui');
+
+  // 1. Copiar Skills para IAs (Claude, Cursor, etc.)
+  const skillTargets = [
+    { editor: 'Claude', src: 'skill.md', dest: path.join(projectRoot, '.claude', 'skills', 'install-dropi-ui', 'skill.md') },
+    { editor: 'Cursor', src: 'cursor.mdc', dest: path.join(projectRoot, '.cursor', 'rules', 'install-dropi-ui.mdc') },
+  ];
+
+  skillTargets.forEach(t => {
+    try {
+      if (fs.existsSync(t.dest)) return;
+      fs.mkdirSync(path.dirname(t.dest), { recursive: true });
+      fs.copyFileSync(path.join(skillsBase, t.src), t.dest);
+    } catch (e) { /* silent fail for skills */ }
+  });
+
   console.log('\x1b[36m%s\x1b[0m', '\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   console.log('\x1b[1m%s\x1b[0m', '  🎨 @dropi/ui instalado exitosamente');
   console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   console.log('\n  Para configurar estilos, iconos y soporte React, ejecuta:');
   console.log('\x1b[33m%s\x1b[0m', '  npx @dropi/ui setup');
+  console.log('\x1b[32m%s\x1b[0m', '  o simplemente pídele a tu IA: "/install-dropi-ui"');
   console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
 }

package/scripts/setup.js

@@ -115,31 +115,60 @@ async function run() {
     }
   }
 
-  // 5. Iconos (Symlink)
+  // 5. Iconos y Lottie (Symlink/Copia de assets)
   const publicDir = isAngular ? 'src/assets' : 'public';
-  const iconDestDir = path.join(projectRoot, publicDir, 'assets', 'icons', 'symbol', 'svg');
-  const spriteName = 'sprite.css.svg';
-  const spriteDest = path.join(iconDestDir, spriteName);
   
-  // Encontrar origen del sprite dentro de node_modules
-  const spriteSrc = path.join(projectRoot, 'node_modules', '@dropi/ui', 'assets', 'icons', 'symbol', 'svg', spriteName);
+  const setupAsset = (srcRelativePath, destRelativePath) => {
+    const src = path.join(projectRoot, 'node_modules', '@dropi/ui', srcRelativePath);
+    const dest = path.join(projectRoot, publicDir, destRelativePath);
+    const destDir = path.dirname(dest);
+
+    if (fs.existsSync(src)) {
+      if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
+      try {
+        if (fs.existsSync(dest)) {
+          // Si es un directorio y existe, no hacemos symlink directo, pero aquí tratamos archivos o carpetas simples
+          if (fs.lstatSync(dest).isSymbolicLink() || fs.existsSync(dest)) fs.unlinkSync(dest);
+        }
+        fs.symlinkSync(src, dest, fs.lstatSync(src).isDirectory() ? 'dir' : 'file');
+        log(`Assets configurados: ${destRelativePath} (Symlink ✅)`, 'ok');
+      } catch (e) {
+        // Fallback a copia recursiva
+        if (fs.lstatSync(src).isDirectory()) {
+          fs.cpSync ? fs.cpSync(src, dest, { recursive: true }) : execSync(`cp -R "${src}" "${dest}"`);
+        } else {
+          fs.copyFileSync(src, dest);
+        }
+        log(`Assets copiados: ${destRelativePath} (Copia ✅)`, 'ok');
+      }
+    }
+  };
 
-  if (fs.existsSync(spriteSrc)) {
-    if (!fs.existsSync(iconDestDir)) fs.mkdirSync(iconDestDir, { recursive: true });
-    
-    try {
-      if (fs.existsSync(spriteDest)) fs.unlinkSync(spriteDest);
-      // Usar symlink para mantenerlo actualizado
-      fs.symlinkSync(spriteSrc, spriteDest, 'file');
-      log(`Portal de iconos configurado en ${publicDir}/assets/... (Symlink ✅)`, 'ok');
-    } catch (e) {
-      // Fallback a copia si falla el symlink (ej. en Windows sin permisos)
-      fs.copyFileSync(spriteSrc, spriteDest);
-      log(`Sprite de iconos copiado a ${publicDir}/assets/... (Copia ✅)`, 'ok');
+  // Sprite de iconos
+  setupAsset('assets/icons/symbol/svg/sprite.css.svg', 'assets/icons/symbol/svg/sprite.css.svg');
+  // Archivos Lottie
+  setupAsset('assets/lottie-files', 'assets/lottie-files');
+
+  // 6. Lottie Player Script (index.html)
+  const lottieScript = '<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>';
+  const htmlFiles = ['index.html', 'src/index.html', 'public/index.html'];
+  const htmlFile = htmlFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
+  
+  if (htmlFile) {
+    const htmlPath = path.join(projectRoot, htmlFile);
+    let content = fs.readFileSync(htmlPath, 'utf8');
+    if (!content.includes('lottie-player.js')) {
+      if (content.includes('</body>')) {
+        content = content.replace('</body>', `  ${lottieScript}\n</body>`);
+      } else {
+        content += `\n${lottieScript}`;
+      }
+      fs.writeFileSync(htmlPath, content);
+      log(`Lottie: Script agregado a ${htmlFile}`, 'ok');
     }
   }
 
-  // 6. Vite Patch (optimizeDeps)
+  // 7. Vite Patch (optimizeDeps)
   const viteFiles = ['vite.config.ts', 'vite.config.js'];
   const viteFile = viteFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
   if (viteFile) {

package/skills/install-dropi-ui/cursor.mdc

@@ -1,10 +1,5 @@
----
-description: Instala y configura automáticamente @dropi/ui en Angular, React o Vue
-globs: ["package.json"]
-alwaysApply: true
----
-
 # @dropi/ui — Configuración pendiente
 
 Este proyecto tiene `@dropi/ui` instalado pero necesita configuración.
-Lee `DROPI_UI_SETUP.md` en la raíz del proyecto y ejecuta los pasos automáticamente.
+Ejecuta el script de instalación oficial: `node node_modules/@dropi/ui/scripts/setup.js`.
+Una vez completado, verifica los estilos y el sprite de iconos en la carpeta public.

package/skills/install-dropi-ui/skill.md

@@ -24,190 +24,42 @@ import { DropiButton } from '@dropi/ui/dist/components'
 
 ---
 
-## Instrucciones
+## Instrucciones de Instalación
 
-### Paso 1 — Detectar framework, bundler y gestor de paquetes
+Para configurar la librería, el asistente de IA debe ejecutar el script de automatización oficial incluido en el paquete. Esto garantiza que la detección de framework y la configuración de iconos/estilos se realicen correctamente según los estándares de Dropi.
 
-Lee `package.json` y determina:
-- **Framework**: Angular (`@angular/core`), React (`react`), Vue (`vue`)
-- **Package manager**: `yarn.lock` → yarn | `pnpm-lock.yaml` → pnpm | `package-lock.json` → npm
-- **Bundler**: existe `vite.config.ts` o `vite.config.js` → es Vite (aplica pasos especiales)
+### 1. Ejecutar el script de Setup
 
-### Paso 2 — Instalar dependencias
+Ejecuta el siguiente comando en la terminal del proyecto:
 
-**Angular / Vue:**
 ```bash
-yarn add @dropi/ui
-# o
-npm install @dropi/ui
+node node_modules/@dropi/ui/scripts/setup.js
 ```
 
-**React:**
-```bash
-yarn add @dropi/ui @dropi/ui-react
-# o
-npm install @dropi/ui @dropi/ui-react
-```
-
-### Paso 3 — Fix obligatorio para Vite (React y Vue) ⚠️
-
-**Sin esto los componentes NO cargan.** Abre `vite.config.ts` y agrega `optimizeDeps`:
-
-```ts
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'  // o vue si aplica
-
-export default defineConfig({
-  plugins: [react()],
-  optimizeDeps: {
-    exclude: ['@dropi/ui/loader', '@dropi/ui'],
-  },
-})
-```
-
-Esto resuelve estos errores:
-- `Failed to fetch dynamically imported module: .../dropi-button.entry.js`
-- `Constructor for "dropi-button#undefined" was not found`
-- `Missing field moduleType` (Vite 6+/8+)
-
-### Paso 4 — Inyectar estilos globales
-
-**Angular** — al inicio de `src/styles.scss`:
-```scss
-@import '@dropi/ui/dist/dropi-ui/dropi-ui.css';
-```
-Verificar también `angular.json` bajo `styles[]`.
-
-**React / Vue** — al inicio de `src/main.tsx` o `src/main.ts`:
-```ts
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
-```
+### 2. Verificación
 
-### Paso 5 — Registrar con lazy loader (OBLIGATORIO, no usar import directo)
-
-**Angular** — en `src/main.ts` o `app.config.ts`:
-```ts
-import { defineCustomElements } from '@dropi/ui/loader'
-defineCustomElements()
-```
-Agregar `CUSTOM_ELEMENTS_SCHEMA` al módulo standalone:
-```ts
-// app.config.ts
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-export const appConfig: ApplicationConfig = {
-  providers: [
-    importProvidersFrom({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
-  ]
-}
-```
-
-**Vue** — en `src/main.ts`:
-```ts
-import { defineCustomElements } from '@dropi/ui/loader'
-defineCustomElements()
-```
-
-**React** — en `src/main.tsx`:
-```tsx
-import { defineCustomElements } from '@dropi/ui/loader'
-import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
-import './index.css'
+Una vez finalizado el script, verifica que:
+- Los iconos carguen correctamente (sin errores 404 en el sprite).
+- Los estilos globales estén inyectados en el punto de entrada principal (`main.tsx`, `main.ts`, etc.).
+- Si es React, el paquete `@dropi/ui-react` esté instalado.
 
-defineCustomElements()  // ← antes del createRoot
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
-```
-
-En los componentes React, importar desde `@dropi/ui-react` (NO del core):
-```tsx
-import { DropiButton, DropiSelect, DropiBadge } from '@dropi/ui-react'
-```
-
-### Paso 6 — Verificar tsconfig.app.json (React + TypeScript)
-
-Asegurarse de que `tsconfig.app.json` tenga `skipLibCheck: true` para evitar errores de tipado de las librerías:
-
-```json
-{
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "target": "ES2023",
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "noEmit": true
-  }
-}
-```
-
-Si `skipLibCheck` no está → agregar. Sin esto pueden aparecer errores de tipos en `node_modules`.
-
-### Paso 7 — Copiar sprite de íconos
-
-**Linux / Mac:**
-```bash
-# Angular
-mkdir -p src/assets/icons/symbol/svg
-cp node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg src/assets/icons/symbol/svg/
-
-# React / Vue (Vite)
-mkdir -p public/assets/icons/symbol/svg
-cp node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg public/assets/icons/symbol/svg/
-```
-
-**Windows (usar Node para compatibilidad):**
-```bash
-# React / Vue (Vite)
-node -e "const fs=require('fs');fs.mkdirSync('public/assets/icons/symbol/svg',{recursive:true});fs.copyFileSync('node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg','public/assets/icons/symbol/svg/sprite.css.svg');console.log('Sprite copiado ✅')"
-
-# Angular
-node -e "const fs=require('fs');fs.mkdirSync('src/assets/icons/symbol/svg',{recursive:true});fs.copyFileSync('node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg','src/assets/icons/symbol/svg/sprite.css.svg');console.log('Sprite copiado ✅')"
-```
-
-### Paso 8 — Validar instalación
-
-```bash
-yarn build   # o npm run build / pnpm build
-```
-
-Errores comunes y solución:
-| Error | Causa | Fix |
-|---|---|---|
-| `Failed to fetch dynamically imported module` | Falta `optimizeDeps.exclude` en vite.config | Paso 3 |
-| `Constructor for "dropi-button#undefined" was not found` | Mismo | Paso 3 |
-| `Missing field moduleType` | Vite 6+/8+ sin optimizeDeps | Paso 3 |
-| Errores de tipos en node_modules | Falta `skipLibCheck: true` | Paso 6 |
-| Íconos no aparecen | Sprite no copiado | Paso 7 |
-
-### Paso 9 — Reporte final
-
-```
-✅ @dropi/ui instalado exitosamente en [FRAMEWORK]
-
-  - Dependencia: @dropi/ui@X.X.X [+ @dropi/ui-react]
-  - vite.config: optimizeDeps.exclude ✓
-  - Estilos: [archivo] ✓
-  - Loader (lazy): defineCustomElements() en [archivo] ✓
-  - Sprite: [ruta destino] ✓
-  - skipLibCheck: true ✓
+---
 
-Prueba rápida (React):
-  import { DropiButton } from '@dropi/ui-react'
-  <DropiButton text="Hola Dropi" type="default" severity="primary" size="normal" />
+## Fallback Manual (Solo si el script falla)
 
-Prueba rápida (Angular/Vue):
-  <dropi-button text="Hola Dropi" type="default" severity="primary" size="normal"></dropi-button>
-```
+> [!WARNING]
+> Usa estos pasos solo si el comando anterior no puede ejecutarse por restricciones del entorno.
 
-## Reglas
+1. **Instalar dependencias**: `npm install @dropi/ui` (y `@dropi/ui-react` si es React).
+2. **Vite Fix**: Agregar `optimizeDeps.exclude: ['@dropi/ui/loader', '@dropi/ui']` en `vite.config`.
+3. **Estilos**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en el entry point.
+4. **Loader**: Llamar a `defineCustomElements()` de `@dropi/ui/loader` antes del renderizado.
+5. **Iconos**: Crear un enlace simbólico del sprite:
+   `ln -sf $(pwd)/node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg public/assets/icons/symbol/svg/sprite.css.svg`
+6. **TS Config**: Asegurar `skipLibCheck: true`.
+7. **Validar**: Ejecutar `npm run build`.
 
-- Lazy loading SIEMPRE via `defineCustomElements` del loader — NUNCA imports directos de componentes
-- NO sobreescribir imports que ya existan
-- En Windows usar el comando `node -e` para operaciones de archivos
+## Reglas Críticas
+- **Lazy Loading**: NUNCA importar componentes directamente. Usar siempre el loader.
+- **Iconos**: El sprite DEBE estar en `public/assets/icons/symbol/svg/sprite.css.svg` para que `<dropi-icon>` funcione.
 - Si el build falla, mostrar el error exacto y resolverlo antes de reportar éxito

package/dist/dropi-ui/p-21abf91a.entry.js

@@ -1 +0,0 @@
-import{r,c as a,h as o}from"./p-DFz-gwFP.js";const e=class{constructor(o){r(this,o),this.dropiClick=a(this,"dropiClick")}type="default";severity="primary";size="normal";state="default";preIcon="";postIcon="";text="";dropiClick;colorMap={default:"Primary-Primary-",success:"Success-Success-",error:"Error-Error-",info:"Info-Info-",legacy:"Secondary-Secondary-",warning:"Warning-Warning-",dropdown:"Gray-Gray-"};get iconSize(){return"large"===this.size?"24px":"small"===this.size?"16px":"18px"}get color(){return(this.colorMap[this.type]??"Primary-Primary-")+("disabled"===this.state?"300":"500")}get fontColor(){return"tertiary"===this.severity?"default"===this.type||"legacy"===this.type?"Gray-Gray-500":this.color:"secondary"===this.severity?this.color:"Neutral-White"}handleClick(r){"disabled"!==this.state&&"loading"!==this.state&&this.dropiClick.emit(r)}renderLoadingSpinner(){return o("svg",{class:"spin",width:this.iconSize,height:this.iconSize,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{d:"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z",fill:`var(--${this.fontColor})`}))}render(){const r="disabled"===this.state||"loading"===this.state,a=""!==this.text,e=""!==this.postIcon||"dropdown"===this.type,n="dropdown"===this.type?"Dropdown-down":this.postIcon;return o("button",{key:"6cde7f2616d1cff9e3304481f2a0c38aabc34192",class:{btn:!0,"without-text":!a,[this.severity]:!0,[this.type]:!0,[this.size]:!0,[this.state]:!0},disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&o("dropi-icon",{key:"769cea8fce2947552462aa2cbbb09d64df952c76",name:this.preIcon,width:this.iconSize,height:this.iconSize,color:this.fontColor}),a&&o("span",{key:"f66ad80283d54f643cf37ea702145127b90d4ce4",class:"text"},this.text),e&&o("dropi-icon",{key:"4fd9c7d7d029c3316bc0492576cda0cca74fa460",name:n,width:this.iconSize,height:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),o("slot",{key:"3280c56a28ea40016d35e186b9997635b8ba881b"}))}};e.style=":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--Size-3, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #fff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #fff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #fff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #fff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #fff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #fff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #fff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #fff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #fff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #fff)}.btn.secondary{background:var(--Neutral-White, #fff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:400;font-size:14px;background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";export{e as dropi_button}

package/dist/dropi-ui/p-6f0aa619.entry.js

@@ -1 +0,0 @@
-import{r as t,a as r,h as e}from"./p-DFz-gwFP.js";const i=class{constructor(r){t(this,r)}get el(){return r(this)}name="";width="24px";height="24px";color="currentColor";colorChanged(){this.applyColor()}componentDidLoad(){this.applyColor()}applyColor(){const t=this.color.startsWith("#")?this.color:"currentColor"===this.color?"currentColor":`var(--${this.color})`;this.el.style.setProperty("--icon-fill",t)}render(){return e("svg",{key:"e71bfb0be9f68882bbd7314d0f6f3fd877fccf07",width:this.width,height:this.height,class:{spin:"Spinner"===this.name},"aria-hidden":"true"},e("use",{key:"e6905c3ba9c68f463db62cde2cd64ce51093c2c0",href:`/assets/icons/symbol/svg/sprite.css.svg#${this.name}`}))}static get watchers(){return{color:[{colorChanged:0}]}}};i.style=":host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor)}svg{fill:inherit}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";export{i as dropi_icon}

package/dist/dropi-ui/p-DFz-gwFP.js

@@ -1,2 +0,0 @@
-const e=()=>{},n=":root{--Primary-Primary-50:#fef8f2;--Primary-Primary-100:#ffecda;--Primary-Primary-200:#fcddbd;--Primary-Primary-300:#f2bc85;--Primary-Primary-400:#f7b46f;--Primary-Primary-500:#f49a3d;--Primary-Primary-600:#e58017;--Primary-Primary-700:#99540f;--Primary-Primary-800:#66380a;--Primary-Primary-900:#331c05;--Secondary-Secondary-50:#f0fafc;--Secondary-Secondary-100:#cee8f2;--Secondary-Secondary-200:#95d0e5;--Secondary-Secondary-300:#62bad9;--Secondary-Secondary-400:#33a4cc;--Secondary-Secondary-500:#008dbf;--Secondary-Secondary-600:#007199;--Secondary-Secondary-700:#005573;--Secondary-Secondary-800:#00384d;--Secondary-Secondary-900:#001c26;--Neutral-White:#ffffff;--Neutral-Black:#000000;--Gray-Gray-50:#f7f8fa;--Gray-Gray-100:#e6eaf2;--Gray-Gray-200:#c3c9d9;--Gray-Gray-300:#a3abbf;--Gray-Gray-400:#858ea6;--Gray-Gray-500:#69738c;--Gray-Gray-600:#475066;--Gray-Gray-700:#32394d;--Gray-Gray-800:#1f2433;--Gray-Gray-900:#0e111a;--Success-Success-50:#e7f8f3;--Success-Success-100:#b3eada;--Success-Success-200:#8ee0c8;--Success-Success-300:#5bd1af;--Success-Success-400:#3bc99f;--Success-Success-500:#0abb87;--Success-Success-600:#09aa7b;--Success-Success-700:#078560;--Success-Success-800:#06674a;--Success-Success-900:#044f39;--Error-Error-50:#fef0f0;--Error-Error-100:#fcd1d1;--Error-Error-200:#fababb;--Error-Error-300:#f89b9c;--Error-Error-400:#f68889;--Error-Error-500:#f46a6b;--Error-Error-600:#de6061;--Error-Error-700:#ad4b4c;--Error-Error-800:#863a3b;--Error-Error-900:#662d2d;--Info-Info-50:#eef6fe;--Info-Info-100:#c9e3fb;--Info-Info-200:#afd6f9;--Info-Info-300:#8ac3f6;--Info-Info-400:#73b7f4;--Info-Info-500:#50a5f1;--Info-Info-600:#4996db;--Info-Info-700:#3975ab;--Info-Info-800:#2c5b85;--Info-Info-900:#224565;--Warning-Warning-50:#fef8ed;--Warning-Warning-100:#fbe8c8;--Warning-Warning-200:#f9ddad;--Warning-Warning-300:#f6cd87;--Warning-Warning-400:#f4c370;--Warning-Warning-500:#f1b44c;--Warning-Warning-600:#dba445;--Warning-Warning-700:#ab8036;--Warning-Warning-800:#85632a;--Warning-Warning-900:#654c20;--Orange-orange-50:#fef5ec;--Orange-orange-500:#f49a3d;--Size-1:4px;--Size-2:8px;--Size-3:12px;--Size-4:16px;--Size-5:24px;--Size-6:32px;--Size-7:40px;--Size-8:48px;--Size-9:56px;--Size-10:64px;--Border-1:4px;--Border-2:8px;--Border-3:12px;--Border-4:24px;--Border-5:32px;--Border-full:9999px;--font-size-xxxxl:36px;--font-size-xxxl:30px;--font-size-xxl:24px;--font-size-xl:20px;--font-size-l:18px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px;--lineheight-simple:110%;--lineheight-large:150%;--font-weight-bold:700;--font-weight-semibold:600;--font-weight-medium:500;--font-weight-regular:400;--font-weight-light:300;--font-family-01:'Inter', sans-serif;--breakpoint-extra-small:576px;--breakpoint-small:600px;--breakpoint-medium:1000px;--breakpoint-large:1200px;--breakpoint-extra-large:1536px;--breakpoint-full-width:1920px;--Shadow-small:0px 0px 12px rgba(0, 0, 0, 0.04);--Shadow-medium:0.5px 4px 8px rgba(0, 0, 0, 0.08);--Shadow-large:0px 4px 16px rgba(0, 0, 0, 0.16);--Shadow-icon:0px 0px 4px rgba(0, 0, 0, 0.16);--Interrapidisimo:#383637;--Domina:#464ffe;--Coordinadora:#2686c5;--Servientrega:#1ba558;--99-minutos:#9cd453;--TCC:#f8dd49;--Veloces:#dc2e76;--Envia:#e7484e;--Restlogix:#90dd92;--Tiui:#0596a5;--Fedex:#4d148c;--Laarcourier:#faf063;--Gintracom:#ff3939;--Blue-express:#1542a3;--Lulu:#f03a3e;--Urbano:#e53237;--Tipsa:#1d3681}@media (max-width: 600px){:root{--font-size-xxxxl:32px;--font-size-xxxl:26px;--font-size-xxl:20px;--font-size-xl:18px;--font-size-l:16px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px}}*{font-family:var(--font-family-01);box-sizing:border-box}h1{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h2{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h3{color:var(--Gray-Gray-700);font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h4{color:var(--Gray-Gray-700);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h5{color:var(--Gray-Gray-700);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Body-L-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-L-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-M-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-M-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-S-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-S-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Caption-M{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Caption-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-L{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-M{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}";function t(e,n,t){const r="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;e&&e!==r;){const r=Object.getOwnPropertyDescriptor(e,n);if(r&&(!t||r.get))return r;e=Object.getPrototypeOf(e)}}var r,o=(e,n)=>{var r;Object.entries(null!=(r=n.o.t)?r:{}).map((([r,[o]])=>{if(31&o||32&o){const o=e[r],i=t(Object.getPrototypeOf(e),r,!0)||Object.getOwnPropertyDescriptor(e,r);i&&Object.defineProperty(e,r,{get(){return i.get.call(this)},set(e){i.set.call(this,e)},configurable:!0,enumerable:!0}),n.i.has(r)?e[r]=n.i.get(r):void 0!==o&&(e[r]=o)}}))},i=e=>{if(e.__stencil__getHostRef)return e.__stencil__getHostRef()},l=(e,n)=>{n&&(e.__stencil__getHostRef=()=>n,n.l=e,512&n.o.u&&o(e,n))},a=(e,n)=>n in e,s=(e,n)=>(0,console.error)(e,n),c=new Map,f=new Map,u=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"],d="undefined"!=typeof window?window:{},h={u:0,h:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,n,t,r)=>e.addEventListener(n,t,r),rel:(e,n,t,r)=>e.removeEventListener(n,t,r),ce:(e,n)=>new CustomEvent(e,n)},p=e=>Promise.resolve(e),y=(()=>{try{return!!d.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(e){}return!1})(),g=!!y&&(()=>!!d.document&&Object.getOwnPropertyDescriptor(d.document.adoptedStyleSheets,"length").writable)(),v=!1,m=[],b=[],x=(e,n)=>t=>{e.push(t),v||(v=!0,n&&4&h.u?z(S):h.raf(S))},w=e=>{for(let n=0;n<e.length;n++)try{e[n](performance.now())}catch(e){s(e)}e.length=0},S=()=>{w(m),w(b),(v=m.length>0)&&h.raf(S)},z=e=>p().then(e),G=x(b,!0);function $(){var e;const t=this.attachShadow({mode:"open"});if(void 0===r&&(r=null!=(e=function(e){if(!y)return;const n=new CSSStyleSheet;return n.replaceSync(e),n}(n))?e:null),r)g?t.adoptedStyleSheets.push(r):t.adoptedStyleSheets=[...t.adoptedStyleSheets,r];else if(!y){const e=document.createElement("style");e.innerHTML=n,t.prepend(e)}}function E(e){var n,t,r;return null!=(r=null==(t=null==(n=e.head)?void 0:n.querySelector('meta[name="csp-nonce"]'))?void 0:t.getAttribute("content"))?r:void 0}var j,O=new WeakMap,P=e=>"sc-"+e.p,k=e=>"object"==(e=typeof e)||"function"===e,W=(e,n,...t)=>{let r=null,o=null,i=!1,l=!1;const a=[],s=n=>{for(let t=0;t<n.length;t++)r=n[t],Array.isArray(r)?s(r):null!=r&&"boolean"!=typeof r&&((i="function"!=typeof e&&!k(r))&&(r+=""),i&&l?a[a.length-1].v+=r:a.push(i?C(null,r):r),l=i)};if(s(t),n){n.key&&(o=n.key);{const e=n.className||n.class;e&&(n.class="object"!=typeof e?e:Object.keys(e).filter((n=>e[n])).join(" "))}}const c=C(e,null);return c.m=n,a.length>0&&(c.S=a),c.G=o,c},C=(e,n)=>({u:0,$:e,v:null!=n?n:null,j:null,S:null,m:null,G:null}),I={},M=(e,n,t)=>null==e||k(e)?e:4&n?(t&&"string"==typeof e||"false"!==e)&&(""===e||!!e):2&n?"string"==typeof e?parseFloat(e):"number"==typeof e?e:NaN:1&n?e+"":e,L=e=>{var n;return null==(n=i(e))?void 0:n.$hostElement$},B=(e,n)=>{const t=L(e);return{emit:e=>R(t,n,{bubbles:!0,composed:!0,cancelable:!0,detail:e})}},R=(e,n,t)=>{const r=h.ce(n,t);return e.dispatchEvent(r),r},N=(e,n,t,r,o,l)=>{if(t===r)return;let s=a(e,n),c=n.toLowerCase();if("class"===n){const n=e.classList,o=A(t);let i=A(r);n.remove(...o.filter((e=>e&&!i.includes(e)))),n.add(...i.filter((e=>e&&!o.includes(e))))}else if("style"===n){for(const n in t)r&&null!=r[n]||(n.includes("-")?e.style.removeProperty(n):e.style[n]="");for(const n in r)t&&r[n]===t[n]||(n.includes("-")?e.style.setProperty(n,r[n]):e.style[n]=r[n])}else if("key"===n);else if("ref"===n)r&&ne(r,e);else if(s||"o"!==n[0]||"n"!==n[1]){if("a"===n[0]&&n.startsWith("attr:")){const t=n.slice(5);let o;{const n=i(e);if(n&&n.o&&n.o.t){const e=n.o.t[t];e&&e[1]&&(o=e[1])}}return o||(o=t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==r||!1===r?!1===r&&""!==e.getAttribute(o)||e.removeAttribute(o):e.setAttribute(o,!0===r?"":r))}if("p"===n[0]&&n.startsWith("prop:")){const t=n.slice(5);try{e[t]=r}catch(e){}return}{const i=k(r);if((s||i&&null!==r)&&!o)try{if(e.tagName.includes("-"))e[n]!==r&&(e[n]=r);else{const o=null==r?"":r;"list"===n?s=!1:null!=t&&e[n]===o||("function"==typeof e.__lookupSetter__(n)?e[n]=o:e.setAttribute(n,o))}}catch(e){}null==r||!1===r?!1===r&&""!==e.getAttribute(n)||e.removeAttribute(n):(!s||4&l||o)&&!i&&1===e.nodeType&&e.setAttribute(n,r=!0===r?"":r)}}else if(n="-"===n[2]?n.slice(3):a(d,c)?c.slice(2):c[2]+n.slice(3),t||r){const o=n.endsWith(D);n=n.replace(U,""),t&&h.rel(e,n,t,o),r&&h.ael(e,n,r,o)}},T=/\s/,A=e=>("object"==typeof e&&e&&"baseVal"in e&&(e=e.baseVal),e&&"string"==typeof e?e.split(T):[]),D="Capture",U=RegExp(D+"$"),H=(e,n,t)=>{const r=11===n.j.nodeType&&n.j.host?n.j.host:n.j,o=e&&e.m||{},i=n.m||{};for(const e of F(Object.keys(o)))e in i||N(r,e,o[e],void 0,t,n.u);for(const e of F(Object.keys(i)))N(r,e,o[e],i[e],t,n.u)};function F(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var V=!1,q=!1,Y=[],Z=[],_=(e,n,t)=>{const r=n.S[t];let o,i,l=0;if(null!=r.v)o=r.j=d.document.createTextNode(r.v);else{if(q||(q="svg"===r.$),!d.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(o=r.j=d.document.createElementNS(q?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",r.$),q&&"foreignObject"===r.$&&(q=!1),H(null,r,q),r.S){const n="template"===r.$?o.content:o;for(l=0;l<r.S.length;++l)i=_(e,r,l),i&&n.appendChild(i)}"svg"===r.$?q=!1:"foreignObject"===o.tagName&&(q=!0)}return o["s-hn"]=j,o},J=(e,n,t,r,o,i)=>{let l,a=e;for(a.shadowRoot&&a.tagName===j&&(a=a.shadowRoot),"template"===t.$&&(a=a.content);o<=i;++o)r[o]&&(l=_(null,t,o),l&&(r[o].j=l,te(a,l,n)))},K=(e,n,t)=>{for(let r=n;r<=t;++r){const n=e[r];if(n){const e=n.j;ee(n),e&&e.remove()}}},Q=(e,n,t=!1)=>e.$===n.$&&(t?(t&&!e.G&&n.G&&(e.G=n.G),!0):e.G===n.G),X=(e,n,t=!1)=>{const r=n.j=e.j,o=e.S,i=n.S,l=n.$,a=n.v;null==a?(q="svg"===l||"foreignObject"!==l&&q,"slot"!==l||V||e.O!==n.O&&(n.j["s-sn"]=n.O||"",(e=>{h.u|=1;const n=e.closest(j.toLowerCase());if(null!=n){const t=Array.from(n.__childNodes||n.childNodes).find((e=>e["s-cr"])),r=Array.from(e.__childNodes||e.childNodes);for(const e of t?r.reverse():r)null!=e["s-sh"]&&(te(n,e,null!=t?t:null),e["s-sh"]=void 0)}h.u&=-2})(n.j.parentElement)),H(e,n,q),null!==o&&null!==i?((e,n,t,r,o=!1)=>{let i,l,a=0,s=0,c=0,f=0,u=n.length-1,d=n[0],h=n[u],p=r.length-1,y=r[0],g=r[p];const v="template"===t.$?e.content:e;for(;a<=u&&s<=p;)if(null==d)d=n[++a];else if(null==h)h=n[--u];else if(null==y)y=r[++s];else if(null==g)g=r[--p];else if(Q(d,y,o))X(d,y,o),d=n[++a],y=r[++s];else if(Q(h,g,o))X(h,g,o),h=n[--u],g=r[--p];else if(Q(d,g,o))X(d,g,o),te(v,d.j,h.j.nextSibling),d=n[++a],g=r[--p];else if(Q(h,y,o))X(h,y,o),te(v,h.j,d.j),h=n[--u],y=r[++s];else{for(c=-1,f=a;f<=u;++f)if(n[f]&&null!==n[f].G&&n[f].G===y.G){c=f;break}c>=0?(l=n[c],l.$!==y.$?i=_(n&&n[s],t,c):(X(l,y,o),n[c]=void 0,i=l.j),y=r[++s]):(i=_(n&&n[s],t,s),y=r[++s]),i&&te(d.j.parentNode,i,d.j)}a>u?J(e,null==r[p+1]?null:r[p+1].j,t,r,s,p):s>p&&K(n,a,u)})(r,o,n,i,t):null!==i?(null!==e.v&&(r.textContent=""),J(r,null,n,i,0,i.length-1)):!t&&null!==o&&K(o,0,o.length-1),q&&"svg"===l&&(q=!1)):e.v!==a&&(r.data=a)},ee=e=>{e.m&&e.m.ref&&Y.push((()=>e.m.ref(null))),e.S&&e.S.map(ee)},ne=(e,n)=>{Z.push((()=>e(n)))},te=(e,n,t)=>e.__insertBefore?e.__insertBefore(n,t):null==e?void 0:e.insertBefore(n,t),re=(e,n)=>{if(n&&!e.P&&n["s-p"]){const t=n["s-p"].push(new Promise((r=>e.P=()=>{n["s-p"].splice(t-1,1),r()})))}},oe=(e,n)=>{if(e.u|=16,4&e.u)return void(e.u|=512);re(e,e.k);const t=()=>ie(e,n);if(!n)return G(t);queueMicrotask((()=>{t()}))},ie=(e,n)=>{const t=e.$hostElement$,r=e.l;if(!r)throw Error(`Can't render component <${t.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let o;return n?(e.u|=256,e.W&&(e.W.map((([e,n])=>de(r,e,n,t))),e.W=void 0),e.C.length&&e.C.forEach((e=>e(t))),o=de(r,"componentWillLoad",void 0,t)):o=de(r,"componentWillUpdate",void 0,t),o=le(o,(()=>de(r,"componentWillRender",void 0,t))),le(o,(()=>se(e,r,n)))},le=(e,n)=>ae(e)?e.then(n).catch((e=>{console.error(e),n()})):n(),ae=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,se=async(e,n,t)=>{var r;const o=e.$hostElement$,i=o["s-rc"];t&&(e=>{const n=e.o,t=e.$hostElement$,r=n.u,o=((e,n)=>{var t,r,o;const i=P(n),l=f.get(i);if(!d.document)return i;if(e=11===e.nodeType?e:d.document,l)if("string"==typeof l){let o,a=O.get(e=e.head||e);if(a||O.set(e,a=new Set),!a.has(i)){o=d.document.createElement("style"),o.textContent=l;const s=null!=(t=h.I)?t:E(d.document);if(null!=s&&o.setAttribute("nonce",s),!(1&n.u))if("HEAD"===e.nodeName){const n=e.querySelectorAll("link[rel=preconnect]"),t=n.length>0?n[n.length-1].nextSibling:e.querySelector("style");e.insertBefore(o,(null==t?void 0:t.parentNode)===e?t:null)}else if("host"in e)if(y){const n=new(null!=(r=e.defaultView)?r:e.ownerDocument.defaultView).CSSStyleSheet;n.replaceSync(l),g?e.adoptedStyleSheets.unshift(n):e.adoptedStyleSheets=[n,...e.adoptedStyleSheets]}else{const n=e.querySelector("style");n?n.textContent=l+n.textContent:e.prepend(o)}else e.append(o);1&n.u&&e.insertBefore(o,null),4&n.u&&(o.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),a&&a.add(i)}}else{let n=O.get(e);if(n||O.set(e,n=new Set),!n.has(i)){const t=null!=(o=e.defaultView)?o:e.ownerDocument.defaultView;let r;if(l.constructor===t.CSSStyleSheet)r=l;else{r=new t.CSSStyleSheet;for(let e=0;e<l.cssRules.length;e++)r.insertRule(l.cssRules[e].cssText,e)}g?e.adoptedStyleSheets.push(r):e.adoptedStyleSheets=[...e.adoptedStyleSheets,r],n.add(i)}}return i})(t.shadowRoot?t.shadowRoot:t.getRootNode(),n);10&r&&(t["s-sc"]=o,t.classList.add(o+"-h"))})(e);ce(e,n,o,t),i&&(i.map((e=>e())),o["s-rc"]=void 0);{const n=null!=(r=o["s-p"])?r:[],t=()=>fe(e);0===n.length?t():(Promise.all(n).then(t).catch(t),e.u|=4,n.length=0)}},ce=(e,n,t,r)=>{try{n=n.render(),e.u&=-17,e.u|=2,((e,n,t=!1)=>{const r=e.$hostElement$,o=e.o,i=e.M||C(null,null),l=(e=>e&&e.$===I)(n)?n:W(null,null,n);if(j=r.tagName,o.L&&(l.m=l.m||{},o.L.forEach((([e,n])=>{l.m[n]=r[e]}))),t&&l.m)for(const e of Object.keys(l.m))r.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(l.m[e]=r[e]);l.$=null,l.u|=4,e.M=l,l.j=i.j=r.shadowRoot||r,V=!(!(1&o.u)||128&o.u),X(i,l,t),Y.forEach((e=>e())),Y.length=0,Z.forEach((e=>e())),Z.length=0})(e,n,r)}catch(n){s(n,e.$hostElement$)}return null},fe=e=>{const n=e.$hostElement$,t=e.l,r=e.k;de(t,"componentDidRender",void 0,n),64&e.u?de(t,"componentDidUpdate",void 0,n):(e.u|=64,he(n),de(t,"componentDidLoad",void 0,n),e.B(n),r||ue()),e.R(n),e.P&&(e.P(),e.P=void 0),512&e.u&&z((()=>oe(e,!1))),e.u&=-517},ue=()=>{z((()=>R(d,"appload",{detail:{namespace:"dropi-ui"}})))},de=(e,n,t,r)=>{if(e&&e[n])try{return e[n](t)}catch(e){s(e,r)}},he=e=>e.classList.add("hydrated"),pe=(e,n,t,r)=>{const o=i(e);if(!o)return;if(!o)throw Error(`Couldn't find host element for "${r.p}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);const l=o.$hostElement$,a=o.i.get(n),c=o.u,f=o.l;if(t=M(t,r.t[n][0],!!(64&r.u)),!(8&c&&void 0!==a||t===a||Number.isNaN(a)&&Number.isNaN(t))){if(o.i.set(n,t),r.N){const e=r.N[n];e&&e.map((e=>{try{const[[r,i]]=Object.entries(e);(128&c||1&i)&&(f?f[r](t,a,n):o.C.push((()=>{o.l[r](t,a,n)})))}catch(e){s(e,l)}}))}if(2&c){if(f.componentShouldUpdate&&!1===f.componentShouldUpdate(t,a,n)&&!(16&c))return;16&c||oe(o,!1)}}},ye=(e,n,r)=>{var o,l;const a=e.prototype;64&n.u&&1&r&&u.forEach((e=>{Object.defineProperty(a,e,{value(...n){var t;const r=i(this),o=null==r?void 0:r.l;if(o){const t=o[e];"function"==typeof t&&t.call(o,...n)}else null==(t=null==r?void 0:r.T)||t.then((t=>{const r=t[e];"function"==typeof r&&r.call(t,...n)}))}})}));{e.watchers&&!n.N&&(n.N=e.watchers),e.deserializers&&!n.A&&(n.A=e.deserializers),e.serializers&&!n.D&&(n.D=e.serializers);const s=Object.entries(null!=(o=n.t)?o:{});if(s.map((([e,[o]])=>{if(31&o||2&r&&32&o){const{get:l,set:s}=t(a,e)||{};l&&(n.t[e][0]|=2048),s&&(n.t[e][0]|=4096),(1&r||!l)&&Object.defineProperty(a,e,{get(){{if(!(2048&n.t[e][0]))return((e,n)=>i(this).i.get(n))(0,e);const t=i(this),r=t?t.l:a;if(!r)return;return r[e]}},configurable:!0,enumerable:!0}),Object.defineProperty(a,e,{set(t){const l=i(this);if(l){if(s)return void 0===(32&o?this[e]:l.$hostElement$[e])&&l.i.get(e)&&(t=l.i.get(e)),s.call(this,M(t,o,!!(64&n.u))),void pe(this,e,t=32&o?this[e]:l.$hostElement$[e],n);{if(!(1&r&&4096&n.t[e][0]))return pe(this,e,t,n),void(1&r&&!l.l&&l.C.push((()=>{4096&n.t[e][0]&&l.l[e]!==l.i.get(e)&&(l.l[e]=t)})));const i=()=>{const r=l.l[e];!l.i.get(e)&&r&&l.i.set(e,r),l.l[e]=M(t,o,!!(64&n.u)),pe(this,e,l.l[e],n)};l.l?i():l.C.push((()=>{i()}))}}}})}else 1&r&&64&o&&Object.defineProperty(a,e,{value(...n){var t;const r=i(this);return null==(t=null==r?void 0:r.U)?void 0:t.then((()=>{var t;return null==(t=r.l)?void 0:t[e](...n)}))}})})),1&r){const t=new Map;a.attributeChangedCallback=function(e,r,o){h.jmp((()=>{var l;const c=t.get(e),f=i(this);if(this.hasOwnProperty(c)&&(o=this[c],delete this[c]),a.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==o)return;if(null==c){const t=null==f?void 0:f.u;if(f&&t&&!(8&t)&&o!==r){const i=f.l,a=null==(l=n.N)?void 0:l[e];null==a||a.forEach((n=>{const[[l,a]]=Object.entries(n);null!=i[l]&&(128&t||1&a)&&i[l].call(i,o,r,e)}))}return}const u=s.find((([e])=>e===c));u&&4&u[1][0]&&(o=null!==o&&"false"!==o);const d=Object.getOwnPropertyDescriptor(a,c);o==this[c]||d.get&&!d.set||(this[c]=o)}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(l=n.N)?l:{}),...s.filter((([e,n])=>31&n[0])).map((([e,r])=>{var o;const i=r[1]||e;return t.set(i,e),512&r[0]&&(null==(o=n.L)||o.push([e,i])),i}))]))}}return e},ge=(e,n)=>{de(e,"connectedCallback",void 0,n)},ve=(e,n)=>{de(e,"disconnectedCallback",void 0,n||e)},me=(e,n={})=>{var t;if(!d.document)return void console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");const r=[],o=n.exclude||[],l=d.customElements,a=d.document.head,u=a.querySelector("meta[charset]"),p=d.document.createElement("style"),g=[];let v,m=!0;if(Object.assign(h,n),h.h=new URL(n.resourcesUrl||"./",d.document.baseURI).href,e.map((e=>{e[1].map((n=>{var t,a,u;const d={u:n[0],p:n[1],t:n[2],H:n[3]};d.t=n[2],d.H=n[3],d.L=[],d.N=null!=(t=n[4])?t:{},d.D=null!=(a=n[5])?a:{},d.A=null!=(u=n[6])?u:{};const p=d.p,b=class extends HTMLElement{"s-p";"s-rc";hasRegisteredEventListeners=!1;constructor(e){if(super(e),((e,n)=>{const t={u:0,$hostElement$:e,o:n,i:new Map,F:new Map};t.U=new Promise((e=>t.R=e)),t.T=new Promise((e=>t.B=e)),e["s-p"]=[],e["s-rc"]=[],t.C=[];const r=t;e.__stencil__getHostRef=()=>r})(e=this,d),1&d.u)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${d.p}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else $.call(e,d)}connectedCallback(){const e=i(this);e&&(this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0,be(this,e,d.H)),v&&(clearTimeout(v),v=null),m?g.push(this):h.jmp((()=>(e=>{if(!(1&h.u)){const n=i(e);if(!n)return;const t=n.o,r=()=>{};if(1&n.u)be(e,n,t.H),(null==n?void 0:n.l)?ge(n.l,e):(null==n?void 0:n.T)&&n.T.then((()=>ge(n.l,e)));else{n.u|=1;{let t=e;for(;t=t.parentNode||t.host;)if(t["s-p"]){re(n,n.k=t);break}}t.t&&Object.entries(t.t).map((([n,[t]])=>{if(31&t&&Object.prototype.hasOwnProperty.call(e,n)){const t=e[n];delete e[n],e[n]=t}})),(async(e,n,t)=>{let r;try{if(!(32&n.u)){if(n.u|=32,t.V){const o=((e,n)=>{const t=e.p.replace(/-/g,"_"),r=e.V;if(!r)return;const o=c.get(r);return o?o[t]:import(`./${r}.entry.js`).then((e=>(c.set(r,e),e[t])),(e=>{s(e,n.$hostElement$)}))
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(t,n);if(o&&"then"in o){const e=()=>{};r=await o,e()}else r=o;if(!r)throw Error(`Constructor for "${t.p}#${n.q}" was not found`);r.isProxied||(t.N=r.watchers,t.D=r.serializers,t.A=r.deserializers,ye(r,t,2),r.isProxied=!0);const i=()=>{};n.u|=8;try{new r(n)}catch(n){s(n,e)}n.u&=-9,n.u|=128,i(),ge(n.l,e)}else r=e.constructor,customElements.whenDefined(e.localName).then((()=>n.u|=128));if(r&&r.style){let e;"string"==typeof r.style&&(e=r.style);const n=P(t);if(!f.has(n)){const r=()=>{};((e,n,t)=>{let r=f.get(e);y&&t?(r=r||new CSSStyleSheet,"string"==typeof r?r=n:r.replaceSync(n)):r=n,f.set(e,r)})(n,e,!!(1&t.u)),r()}}}const o=n.k,i=()=>oe(n,!0);o&&o["s-rc"]?o["s-rc"].push(i):i()}catch(t){s(t,e),n.P&&(n.P(),n.P=void 0),n.B&&n.B(e)}})(e,n,t)}r()}})(this))))}disconnectedCallback(){h.jmp((()=>(async e=>{if(!(1&h.u)){const n=i(e);(null==n?void 0:n.Y)&&(n.Y.map((e=>e())),n.Y=void 0),(null==n?void 0:n.l)?ve(n.l,e):(null==n?void 0:n.T)&&n.T.then((()=>ve(n.l,e)))}O.has(e)&&O.delete(e),e.shadowRoot&&O.has(e.shadowRoot)&&O.delete(e.shadowRoot)})(this))),h.raf((()=>{var e;const n=i(this);if(!n)return;const t=g.findIndex((e=>e===this));t>-1&&g.splice(t,1),(null==(e=null==n?void 0:n.M)?void 0:e.j)instanceof Node&&!n.M.j.isConnected&&delete n.M.j}))}componentOnReady(){var e;return null==(e=i(this))?void 0:e.T}};64&d.u&&(b.formAssociated=!0),d.V=e[0],o.includes(p)||l.get(p)||(r.push(p),l.define(p,ye(b,d,1)))}))})),r.length>0&&(p.textContent+=r.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",p.innerHTML.length)){p.setAttribute("data-styles","");const e=null!=(t=h.I)?t:E(d.document);null!=e&&p.setAttribute("nonce",e),a.insertBefore(p,u?u.nextSibling:a.firstChild)}m=!1,g.length?g.map((e=>e.connectedCallback())):h.jmp((()=>v=setTimeout(ue,30)))},be=(e,n,t)=>{t&&d.document&&t.map((([t,r,o])=>{const i=we(d.document,e,t),l=xe(n,o),a=Se(t);h.ael(i,r,l,a),(n.Y=n.Y||[]).push((()=>h.rel(i,r,l,a)))}))},xe=(e,n)=>t=>{var r;try{256&e.u?null==(r=e.l)||r[n](t):(e.W=e.W||[]).push([n,t])}catch(n){s(n,e.$hostElement$)}},we=(e,n,t)=>4&t?e:n,Se=e=>({passive:!!(1&e),capture:!!(2&e)}),ze=e=>h.I=e;export{L as a,me as b,B as c,e as g,W as h,p,l as r,ze as s}