\n
\n \n );\n}\n"
},
{
"path": "bloques/login/mobile/dimensions.ts",
"type": "registry:file",
"target": "bloques/login/mobile/dimensions.ts",
"content": "/**\n * Dimensiones del bloque Login (mobile) — módulo plano sin \"use client\".\n * Los Server Components y los Viewers pueden importar estas constantes\n * sin cruzar la barrera \"use client\" → undefined → NaN.\n */\n\nexport const LOGIN_MOBILE_WIDTH = 420;\nexport const LOGIN_MOBILE_HEIGHT = 944;\n"
},
{
"path": "bloques/login/mobile/LoginMobile.tsx",
"type": "registry:file",
"target": "bloques/login/mobile/LoginMobile.tsx",
"content": "\"use client\";\n\n/**\n * LoginMobile — Bloque de Concorde (Voyager DS)\n *\n * Página de login · mobile (420 de ancho):\n * · Header 420×64 (guest, \"Ingresa\")\n * · Card de login 388×576 — solo el formulario (LoginForm), sin el panel\n * de registro de la versión desktop (no hay espacio para 2 columnas)\n * · Banner \"Compra Subaspass\" (placeholder, 388×120)\n * · Centro de ayuda banner (placeholder, 388×120)\n */\n\nimport { useState } from \"react\";\nimport type { CSSProperties, JSX } from \"react\";\nimport AppHeader from \"../../header/desktop/Header\";\nimport { LoginForm } from \"../desktop/Login\";\nimport SidebarMobile, { SidebarMenuButton } from \"../../sidebar/mobile/SidebarMobile\";\nimport { LOGIN_MOBILE_WIDTH, LOGIN_MOBILE_HEIGHT } from \"./dimensions\";\n\nexport { LOGIN_MOBILE_WIDTH, LOGIN_MOBILE_HEIGHT } from \"./dimensions\";\n\nexport interface LoginMobileProps {\n className?: string;\n /** Alto del marco para previsualizaciones (px). En producción se omite. Ver `SidebarMobile`. */\n frameHeight?: number;\n}\n\nconst PLACEHOLDER_BANNER: CSSProperties = {\n width: 388,\n height: 120,\n boxSizing: \"border-box\",\n borderRadius: 8,\n background: \"#E9EAEC\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: 13,\n fontWeight: 600,\n letterSpacing: \"0.06em\",\n color: \"#9AA1AC\",\n};\n\nconst STYLE_ID = \"concorde-login-mobile-styles\";\n\nconst CARD_STYLES = `\n.login-card-mobile {\n width: 388px;\n min-height: 576px;\n box-sizing: border-box;\n background: #ffffff;\n border-radius: 8px;\n box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n display: flex;\n padding: 16px;\n}\n`;\n\nlet _stylesInjected = false;\n\nexport default function LoginMobile({ className = \"\", frameHeight }: LoginMobileProps): JSX.Element {\n const [menuOpen, setMenuOpen] = useState(false);\n\n if (typeof document !== \"undefined\" && !_stylesInjected) {\n if (!document.getElementById(STYLE_ID)) {\n const el = document.createElement(\"style\");\n el.id = STYLE_ID;\n el.textContent = CARD_STYLES;\n document.head.appendChild(el);\n }\n _stylesInjected = true;\n }\n\n const page = (\n \n\n {/* Card 766×589 — 2 columnas */}\n
\n \n
\n\n {/* Centro de ayuda banner */}\n Banner
\n CENTRO DE AYUDA
\n ![\"VMC](\"/logo-preview.png\"){kind=logo}
\n \n }\n />\n\n \n
\n \n );\n\n return (\n \n
\n\n {/* Banner \"Compra Subaspass\" — placeholder por ahora */}\n COMPRA SUBASPASS
\n\n {/* Centro de ayuda banner */}\n CENTRO DE AYUDA
\n \n
\n \n );\n});\n\nexport default Input;\n"
},
{
"path": "components/EyeIcon.tsx",
"type": "registry:file",
"target": "components/EyeIcon.tsx",
"content": "/**\n * EyeIcon — Generado por Concorde\n *\n * Ícono de mostrar/ocultar contraseña: ojo abierto (contraseña oculta) u ojo\n * tachado (contraseña visible). Usado por los campos de contraseña de Login\n * y PersonalDataCard — antes duplicado en ambos, ahora un solo componente.\n */\n\nimport type { JSX } from \"react\";\n\nexport interface EyeIconProps {\n /** true = ícono de \"ojo tachado\" (la contraseña está visible; click para ocultarla) */\n off?: boolean;\n size?: number;\n className?: string;\n}\n\nexport default function EyeIcon({ off = false, size = 20, className = \"\" }: EyeIconProps): JSX.Element {\n if (off) {\n return (\n \n );\n }\n return (\n \n );\n}\n"
},
{
"path": "bloques/header/desktop/dimensions.ts",
"type": "registry:file",
"target": "bloques/header/desktop/dimensions.ts",
"content": "/**\n * Dimensiones del bloque Header — módulo PLANO (sin \"use client\") para que los\n * Server Components (catálogo /blocks, páginas de bloque) puedan importar estas\n * constantes sin que se evalúen a undefined → NaN en los cálculos de escala.\n */\n\nexport const HEADER_WIDTH = 798;\nexport const HEADER_HEIGHT = 64;\n"
},
{
"path": "bloques/header/desktop/Header.tsx",
"type": "registry:file",
"target": "bloques/header/desktop/Header.tsx",
"content": "/**\n * Header — Bloque de Concorde (Voyager DS)\n *\n * Barra superior 798 × 64 con fondo vault (#2E0F70). A la derecha lleva el\n * Button «Ingresa» (variante sm-guest, con UserIcon), a 16px del borde y\n * centrado verticalmente — igual que el export de Figma (1312:4674).\n *\n * Si se pasa `username`, el CTA cambia a la variante logueada: «Bienvenido,\n * {username}» (Button sm-logged-in) — usado p.ej. en la Zona de usuario.\n */\n\n\"use client\";\n\nimport type { JSX, ReactNode } from \"react\";\nimport Button, { UserIcon } from \"../../../components/Button\";\nimport { HEADER_WIDTH, HEADER_HEIGHT } from \"./dimensions\";\n\nexport interface HeaderProps {\n /** Ancho de la barra. Por defecto HEADER_WIDTH (798, desktop); 420 en mobile. */\n width?: number | string;\n /** Logo a la izquierda (slot). En desktop no se usa (el logo va en el Sidebar);\n * en mobile se pasa el logo de la marca. */\n logo?: ReactNode;\n /** Usuario logueado. Si se pasa, el CTA muestra «Bienvenido, {username}»\n * (variante sm-logged-in) en vez de «Ingresa» (sm-guest). */\n username?: string;\n /** En mobile el ancho es 420 y el botón «Bienvenido, {username}» no entra junto\n * al logo+hamburguesa: con `compact` se muestra solo el ícono de usuario. */\n compact?: boolean;\n className?: string;\n}\n\nexport default function Header({ width = HEADER_WIDTH, logo, username, compact = false, className = \"\" }: HeaderProps): JSX.Element {\n return (\n \n
\n {showMsg ? {errorMessage}
: null}\n\n
\n \n \n \n \n );\n}\n"
},
{
"path": "components/TodayIcon.tsx",
"type": "registry:file",
"target": "components/TodayIcon.tsx",
"content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface TodayIconProps {\n size?: number;\n /** Controlled visual state — omit to let the icon track its own hover/active */\n state?: \"default\" | \"hover\" | \"active\";\n title?: string;\n className?: string;\n}\n\nexport default function TodayIcon({ size = 24, state: controlled, title, className = \"\" }: TodayIconProps): JSX.Element {\n const uid = useId().replace(/:/g, \"-\");\n const [hovered, setHovered] = useState(false);\n const [pressed, setPressed] = useState(false);\n\n const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n const isActive = resolved === \"active\";\n const isHover = resolved === \"hover\";\n const paint = isActive ? \"white\" : `url(#${uid}g)`;\n\n const handlers = controlled ? {} : {\n onMouseEnter: () => setHovered(true),\n onMouseLeave: () => { setHovered(false); setPressed(false); },\n onMouseDown: () => setPressed(true),\n onMouseUp: () => setPressed(false),\n };\n\n return (\n \n {logo ?? (\n // eslint-disable-next-line @next/next/no-img-element\n
\n \n \n );\n}\n"
},
{
"path": "bloques/sidebar/desktop/SidebarIcon.tsx",
"type": "registry:file",
"target": "bloques/sidebar/desktop/SidebarIcon.tsx",
"content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport type SidebarIconType = \"today\" | \"service-center\" | \"business\" | \"category\" | \"offer\";\n\nexport interface SidebarIconProps {\n type: SidebarIconType;\n size?: number;\n /** Controlled state — omit to use built-in hover/active tracking */\n state?: \"default\" | \"hover\" | \"active\";\n}\n\nconst STYLE_ID = \"concorde-sbicon-styles\";\nconst STYLES = `.sb-icon-wrap { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; user-select: none; }`;\n\nlet _injected = false;\n\nexport default function SidebarIcon({ type, size = 24, state: controlled }: SidebarIconProps): JSX.Element {\n const uid = useId().replace(/:/g, \"-\");\n const [hovered, setHovered] = useState(false);\n const [pressed, setPressed] = useState(false);\n\n if (typeof document !== \"undefined\" && !_injected) {\n if (!document.getElementById(STYLE_ID)) {\n const el = document.createElement(\"style\");\n el.id = STYLE_ID;\n el.textContent = STYLES;\n document.head.appendChild(el);\n }\n _injected = true;\n }\n\n const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n const isActive = resolved === \"active\";\n const isHover = resolved === \"hover\";\n\n // fill / stroke value — active → white, otherwise → gradient url\n const paint = isActive ? \"white\" : `url(#${uid}g)`;\n\n const handlers = controlled ? {} : {\n onMouseEnter: () => setHovered(true),\n onMouseLeave: () => { setHovered(false); setPressed(false); },\n onMouseDown: () => setPressed(true),\n onMouseUp: () => setPressed(false),\n };\n\n return (\n <>\n \n \n \n \n \n );\n}\n"
},
{
"path": "bloques/sidebar/desktop/SidebarItem.tsx",
"type": "registry:file",
"target": "bloques/sidebar/desktop/SidebarItem.tsx",
"content": "\"use client\";\n\n/**\n * SidebarItem — nav pill 216×48 del sidebar\n * Fuente: Figma VOYAGER · \"SideBarDefault\" — State=Default/Hover/Active SVGs\n *\n * Estados del pill:\n * default — glass gradient + subtle white border + shadow morado\n * hover — fondo #8460E5 38% + borde blanco 44%\n * active — naranja gradient + VYStrokes1 border + orange glow\n *\n * Subitems: expanden abajo con animación max-height cuando isActive=true y hay subitems\n */\n\nimport { useId, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport SidebarSubItem, { type SidebarSubItemDef } from \"./SidebarSubItem\";\n\nconst STYLE_ID = \"concorde-sbi-styles\";\nconst STYLES = `\n.sbi-item {\n width: 100%;\n height: 48px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 14px;\n box-sizing: border-box;\n cursor: pointer;\n user-select: none;\n outline: none;\n border: 1.5px solid transparent;\n /* Glass fill (paint0: white 0.28 → 0.1 → 0.04) sobre base oscura #0A002E (simula\n el \"behind transparent areas\" de Figma: la sombra se ve a través del glass) +\n borde VYStrokes3 (white 0.1 → 0 @55%) */\n background:\n linear-gradient(105deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.04) 100%) padding-box,\n linear-gradient(rgba(10,0,46,0.34), rgba(10,0,46,0.34)) padding-box,\n linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%) border-box;\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n /* Drop #0A002E (0,12,36,-4) reforzado + inner top white 22% + inner bottom black 30% */\n box-shadow:\n 0px 12px 36px -4px rgba(10,0,46,0.7),\n 0px 4px 14px -2px rgba(10,0,46,0.5),\n inset 0px 1px 0px rgba(255,255,255,0.22),\n inset 0px -1px 6px rgba(0,0,0,0.3);\n transition: box-shadow 0.15s, background 0.12s, border-color 0.12s, padding 0.28s cubic-bezier(0.4,0,0.2,1), gap 0.28s cubic-bezier(0.4,0,0.2,1);\n}\n.sbi-item--collapsed {\n padding: 0;\n gap: 0;\n justify-content: center;\n}\n/* Hover — fill #8460E5 38% (sobre base oscura) + borde white 44% + drop #0A0026 55%\n (0,6,18,-6) + inner top white 60% (0,1,4) */\n.sbi-item--hover {\n border: 1px solid rgba(255,255,255,0.44);\n background:\n rgba(132,96,229,0.38) padding-box,\n linear-gradient(rgba(10,0,38,0.32), rgba(10,0,38,0.32)) padding-box;\n box-shadow:\n 0px 6px 18px -6px rgba(10,0,38,0.55),\n inset 0px 1px 4px rgba(255,255,255,0.6);\n}\n/* Pressed/Active — VYGradientOrange1 + borde gradiente + drop #ED8936 (0,2,25,-2)\n + background blur 10 */\n.sbi-item--active {\n border: 1.5px solid transparent;\n background:\n linear-gradient(180deg, #FF9639 0%, #EF852E 40%, #BE3D00 100%) padding-box,\n linear-gradient(143deg, #FFFFFF 0%, #F4AC59 22.1%, #8460E5 74.5%, #FFFFFF 100%) border-box;\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(10px);\n box-shadow: 0px 2px 25px -2px rgba(237,137,54,0.55);\n}\n.sbi-item:focus-visible {\n outline: 2px solid rgba(255,255,255,0.5);\n outline-offset: 2px;\n}\n.sbi-trailing {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 0;\n overflow: hidden;\n opacity: 1;\n max-width: 200px;\n transition: opacity 0.18s ease, max-width 0.28s cubic-bezier(0.4,0,0.2,1);\n}\n.sbi-item--collapsed .sbi-trailing {\n opacity: 0;\n max-width: 0;\n flex: 0;\n}\n.sbi-label {\n flex: 1;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.01em;\n color: #D1D5DC;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n.sbi-item--active .sbi-label {\n color: #FFFFFF;\n}\n.sbi-sep {\n height: 1px;\n background: rgba(255,255,255,0.4);\n margin: 4px 14px;\n flex-shrink: 0;\n}\n.sbi-subitems {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 0 0 0 8px;\n margin-top: 0;\n transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;\n}\n.sbi-subitems--open {\n max-height: 400px;\n opacity: 1;\n margin-top: 4px;\n}\n@media (prefers-reduced-motion: reduce) {\n .sbi-item, .sbi-subitems { transition: none; }\n}\n`;\n\nlet _injected = false;\n\n// ── Tipos públicos ────────────────────────────────────────────────────────────\n\nexport interface SidebarNavItem {\n id: string;\n /** Función que recibe el estado visual y retorna el icono correspondiente */\n icon: (state: \"default\" | \"hover\" | \"active\") => ReactNode;\n label: string;\n /** Número mostrado en el badge circular (normalmente = subitems.length) */\n count?: number;\n /** Subitems expandibles — diseño passed via props */\n subitems?: SidebarSubItemDef[];\n}\n\ninterface SidebarItemProps extends SidebarNavItem {\n isActive?: boolean;\n collapsed?: boolean;\n onClick?: (id: string) => void;\n}\n\n// ── Badge de conteo ───────────────────────────────────────────────────────────\n\nfunction SidebarBadge({ count, active, uid }: { count: number; active: boolean; uid: string }): JSX.Element {\n return (\n \n );\n}\n\n// ── Separador primary / secondary ─────────────────────────────────────────────\n\nexport function SidebarSeparator(): JSX.Element {\n return ;\n}\n\n// ── Componente principal ──────────────────────────────────────────────────────\n\nexport default function SidebarItem({\n id,\n icon,\n label,\n count,\n subitems,\n isActive = false,\n collapsed = false,\n onClick,\n}: SidebarItemProps): JSX.Element {\n const uid = useId().replace(/:/g, \"-\");\n const [hovered, setHovered] = useState(false);\n const [activeSubId, setActiveSubId] = useState\n {/* Pill principal */}\n onClick?.(id)}\n onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); onClick?.(id); } }}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n aria-current={isActive ? \"page\" : undefined}\n aria-expanded={hasSubitems ? subitemsOpen : undefined}\n aria-label={count != null ? `${label}, ${count} subitems` : label}\n title={collapsed ? label : undefined}\n >\n {icon(iconState)}\n
\n\n {/* Subitems expandibles */}\n {hasSubitems && (\n \n {label}\n {count != null &&
\n \n {subitems.map((sub) => (\n setActiveSubId(sid)}\n />\n ))}\n
\n )}\n \n \n );\n}\n"
},
{
"path": "bloques/sidebar/desktop/SidebarSubItem.tsx",
"type": "registry:file",
"target": "bloques/sidebar/desktop/SidebarSubItem.tsx",
"content": "\"use client\";\n\n/**\n * SidebarSubItem — subitem expandible 201×48 del SidebarItem\n * Fuente: Figma VOYAGER · \"SideBarDefault\" — State=Default/Hover/Active (subitems)\n *\n * El gradient border se hace con ::before + mask-composite:exclude porque\n * el fondo es rgba(255,255,255,0.06) — casi transparente. Con el truco\n * padding-box/border-box el gradiente se filtra a través del fondo.\n * La técnica de máscara dibuja el gradiente SOLO en el anillo del borde.\n */\n\nimport { useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface SidebarSubItemDef {\n id: string;\n label: string;\n count?: number;\n}\n\ninterface SidebarSubItemProps extends SidebarSubItemDef {\n isActive?: boolean;\n onClick?: (id: string) => void;\n}\n\nconst STYLE_ID = \"concorde-sbsi-styles\";\nconst STYLES = `\n.sbsi-item {\n width: 100%;\n height: 48px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n padding: 0 14px;\n box-sizing: border-box;\n cursor: pointer;\n user-select: none;\n outline: none;\n position: relative;\n background: rgba(255,255,255,0.10);\n transition: box-shadow 0.15s;\n}\n/* Hover — borde VYGradientOrange0 (::before) + drop #0A002E 60% (0,6,20,-4) */\n.sbsi-item--hover {\n box-shadow: 0px 6px 20px -4px rgba(10,0,46,0.6);\n}\n/* Press/Active — borde VYStrokes1 (::before) + drop #0A002E 60% (0,12,36,-4) */\n.sbsi-item--active {\n box-shadow: 0px 12px 36px -4px rgba(10,0,46,0.6);\n}\n/* Anillo de borde gradiente — solo visible en la franja del borde */\n.sbsi-item--hover::before,\n.sbsi-item--active::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 16px;\n pointer-events: none;\n}\n.sbsi-item--hover::before {\n padding: 1px;\n /* VYGradientOrange0 — dirección exacta del SVG (vector 94.42,127.15 → 143deg) */\n background: linear-gradient(143deg, #FF9639 0%, #EF852E 50%, #BE3D00 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask-composite: exclude;\n}\n.sbsi-item--active::before {\n padding: 1.5px;\n /* VYStrokes1 — dirección exacta del SVG (vector 94.42,127.15 → 143deg) */\n background: linear-gradient(143deg, #FFFFFF 0%, #F4AC59 22.1%, #8460E5 74.5%, #FFFFFF 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask-composite: exclude;\n}\n.sbsi-item:focus-visible {\n outline: 2px solid rgba(255,255,255,0.5);\n outline-offset: 2px;\n}\n.sbsi-label {\n flex: 1;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.01em;\n color: #D1D5DC;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n position: relative;\n z-index: 1;\n}\n.sbsi-count {\n font-size: 12px;\n font-weight: 500;\n color: rgba(255,255,255,0.7);\n white-space: nowrap;\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n .sbsi-item { transition: none; }\n}\n`;\n\nlet _injected = false;\n\nexport default function SidebarSubItem({\n id,\n label,\n count,\n isActive = false,\n onClick,\n}: SidebarSubItemProps): JSX.Element {\n const [hovered, setHovered] = useState(false);\n const [pressed, setPressed] = useState(false);\n\n if (typeof document !== \"undefined\" && !_injected) {\n if (!document.getElementById(STYLE_ID)) {\n const el = document.createElement(\"style\");\n el.id = STYLE_ID;\n el.textContent = STYLES;\n document.head.appendChild(el);\n }\n _injected = true;\n }\n\n const showActive = isActive || pressed;\n const cls = `sbsi-item${showActive ? \" sbsi-item--active\" : hovered ? \" sbsi-item--hover\" : \"\"}`;\n\n return (\n <>\n \n \n setOpen(false)}\n onItemClick={handleItemClick}\n onBannerCta={onBannerCta}\n />\n
\n \n \n \n );\n}\n\nconst MENU_BTN_STYLE_ID = \"concorde-sidebar-menu-button-styles\";\nconst MENU_BTN_STYLES = `\n.sbm-menu-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n border: none;\n border-radius: 10px;\n background: transparent;\n cursor: pointer;\n transition: background 0.15s, transform 0.15s;\n}\n.sbm-menu-btn:hover { background: rgba(255,255,255,0.10); }\n.sbm-menu-btn:active { transform: scale(0.92); }\n.sbm-menu-btn:focus-visible { outline: 2px solid #8460E5; outline-offset: 2px; }\n`;\n\nlet _menuBtnInjected = false;\n\nexport interface SidebarMenuButtonProps {\n /** Se invoca al pulsar el botón (normalmente abre el drawer). */\n onClick: () => void;\n /** Estado abierto del drawer, para `aria-expanded`. */\n expanded?: boolean;\n}\n\n/**\n * Botón hamburguesa autocontenido para abrir el drawer desde la cabecera de la app.\n * Incluye el ícono, los estados (hover/active/focus) y la etiqueta accesible.\n */\nexport function SidebarMenuButton({ onClick, expanded = false }: SidebarMenuButtonProps): JSX.Element {\n if (typeof document !== \"undefined\" && !_menuBtnInjected) {\n if (!document.getElementById(MENU_BTN_STYLE_ID)) {\n const el = document.createElement(\"style\");\n el.id = MENU_BTN_STYLE_ID;\n el.textContent = MENU_BTN_STYLES;\n document.head.appendChild(el);\n }\n _menuBtnInjected = true;\n }\n\n return (\n <>\n \n \n \n );\n}\n\n/** Ícono hamburguesa con el gradiente lila del sistema. Úsalo en el botón que abre el drawer. */\nexport function HamburgerIcon({ size = 24 }: { size?: number }): JSX.Element {\n const gid = `sbm-hamburger-${useId().replace(/:/g, \"\")}`;\n return (\n \n );\n}\n"
}
]
}