xertica-ui 2.0.2 → 2.0.4

package/dist/index.cjs.js

@@ -8,18 +8,18 @@ const header = require("./header-Dux00SI4.cjs");
 const React = require("react");
 const tooltip = require("./tooltip-Ded96neP.cjs");
 const input = require("./input-DWANSKGb.cjs");
-const ImageWithFallback = require("./ImageWithFallback-CGtidP6B.cjs");
+const useMobile = require("./use-mobile-DMOvImGQ.cjs");
 const select = require("./select-Bkbr0f-Z.cjs");
 const richTextEditor = require("./rich-text-editor-D6H84OcX.cjs");
 const lucideReact = require("lucide-react");
 const slider = require("./slider-N7hFFj6X.cjs");
 const sonner$1 = require("sonner");
 const LayoutContext = require("./LayoutContext-BvK-ggDa.cjs");
+const LanguageSelector = require("./LanguageSelector-D6uacAIM.cjs");
 const breadcrumb = require("./breadcrumb-m9Hb2_XN.cjs");
 const dropdownMenu = require("./dropdown-menu-BDB5CmQs.cjs");
 const sonner = require("./sonner-DeUIj0Zg.cjs");
 const googleMapsLoader = require("./google-maps-loader-eS3uQ5TA.cjs");
-const LanguageSelector = require("./LanguageSelector-D6uacAIM.cjs");
 const XerticaOrbe = require("./XerticaOrbe-KL1RBHzw.cjs");
 const AudioPlayer = require("./AudioPlayer-BZ7bibzU.cjs");
 function createLucideIconSvg(iconName) {
@@ -207,7 +207,7 @@ function FilterableMapExample({ apiKey }) {
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "w-5 h-5 text-primary" }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Filtro por Categorias" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Badge, { variant: "secondary", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Badge, { variant: "secondary", children: [
         filteredLocations.length,
         " de ",
         sampleLocations.length,
@@ -217,7 +217,7 @@ function FilterableMapExample({ apiKey }) {
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Use os filtros compactos no canto superior esquerdo do mapa para visualizar marcadores por categoria" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ImageWithFallback.Map,
+        useMobile.Map,
         {
           center: { lat: -23.5505, lng: -46.6333 },
           zoom: 14,
@@ -259,17 +259,17 @@ function FilterableMapExample({ apiKey }) {
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 py-0.5", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      ImageWithFallback.Checkbox,
+                      useMobile.Checkbox,
                       {
                         id: "filter-all",
                         checked: activeFilters.size === Object.keys(markerGroups).length,
                         onCheckedChange: toggleAll
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Label, { htmlFor: "filter-all", className: "flex items-center gap-1.5 cursor-pointer text-sm", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Label, { htmlFor: "filter-all", className: "flex items-center gap-1.5 cursor-pointer text-sm", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "w-3.5 h-3.5" }),
                       "Todos",
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "secondary", className: "text-xs h-4 px-1", children: sampleLocations.length })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "secondary", className: "text-xs h-4 px-1", children: sampleLocations.length })
                     ] })
                   ] }),
                   Object.entries(markerGroups).map(([id, group]) => {
@@ -279,7 +279,7 @@ function FilterableMapExample({ apiKey }) {
                     const count = getGroupCount(groupId);
                     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 py-0.5", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        ImageWithFallback.Checkbox,
+                        useMobile.Checkbox,
                         {
                           id: `filter-${id}`,
                           checked: isActive,
@@ -287,7 +287,7 @@ function FilterableMapExample({ apiKey }) {
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsxs(
-                        ImageWithFallback.Label,
+                        useMobile.Label,
                         {
                           htmlFor: `filter-${id}`,
                           className: "flex items-center gap-1.5 cursor-pointer text-sm",
@@ -300,7 +300,7 @@ function FilterableMapExample({ apiKey }) {
                               }
                             ),
                             /* @__PURE__ */ jsxRuntime.jsx("span", { className: isActive ? "text-foreground" : "text-muted-foreground", children: group.name }),
-                            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", className: "text-xs h-4 px-1", children: count })
+                            /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "outline", className: "text-xs h-4 px-1", children: count })
                           ]
                         }
                       )
@@ -342,7 +342,7 @@ function FilterableMapExample({ apiKey }) {
             ),
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4", style: { color: group.color } }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--foreground)" }, children: group.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "secondary", className: "text-xs h-5", children: count })
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "secondary", className: "text-xs h-5", children: count })
           ]
         },
         id
@@ -630,19 +630,19 @@ function DrawingMapExample({ apiKey }) {
       ]
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { className: "h-full border-0 shadow-none md:border md:shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardHeader, { className: "border-b bg-muted/20 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { className: "h-full border-0 shadow-none md:border md:shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardHeader, { className: "border-b bg-muted/20 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Ferramentas de Desenho" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { className: "mt-1", children: "Crie geometrias personalizadas no mapa" })
+        /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Ferramentas de Desenho" }),
+        /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { className: "mt-1", children: "Crie geometrias personalizadas no mapa" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Badge, { variant: "outline", className: "h-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Badge, { variant: "outline", className: "h-6", children: [
         shapes.length,
         " ",
         shapes.length === 1 ? "elemento" : "elementos"
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "p-0 flex flex-col md:flex-row h-[600px] bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "p-0 flex flex-col md:flex-row h-[600px] bg-background", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full md:w-64 border-b md:border-b-0 md:border-r bg-muted/10 flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx(input.ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-6", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
@@ -695,7 +695,7 @@ function DrawingMapExample({ apiKey }) {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2", children: "Ações" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
@@ -782,7 +782,7 @@ function DrawingMapExample({ apiKey }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative bg-muted/5 min-h-[400px]", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          ImageWithFallback.Map,
+          useMobile.Map,
           {
             className: "h-full w-full rounded-none md:rounded-br-lg",
             center: { lat: -23.5505, lng: -46.6333 },
@@ -835,19 +835,19 @@ function MapShowcase() {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      ImageWithFallback.PageHeader,
+      useMobile.PageHeader,
       {
         title: "Mapas",
         subtitle: "Biblioteca de componentes de mapa para visualização de dados geoespaciais. Utiliza a API do Google Maps com estilização personalizada do Xertica UI.",
-        actions: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { children: "Design System" })
+        actions: /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { children: "Design System" })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Configuração da API Key" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Insira sua Google Maps API Key para renderizar os mapas abaixo." })
+    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Configuração da API Key" }),
+        /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Insira sua Google Maps API Key para renderizar os mapas abaixo." })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-md items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-md items-center space-x-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           input.Input,
           {
@@ -862,24 +862,24 @@ function MapShowcase() {
         /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { onClick: () => setApiKey(inputApiKey), children: "Salvar" })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Tabs, { value: activeTab, onValueChange: handleTabChange, className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.TabsList, { className: "grid w-full grid-cols-4 mb-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "simple", children: "Mapas Simples" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "markers", children: "Marcadores" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "controls", children: "Controles" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.TabsTrigger, { value: "drawing", className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Tabs, { value: activeTab, onValueChange: handleTabChange, className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useMobile.TabsList, { className: "grid w-full grid-cols-4 mb-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "simple", children: "Mapas Simples" }),
+        /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "markers", children: "Marcadores" }),
+        /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "controls", children: "Controles" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.TabsTrigger, { value: "drawing", className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "w-3 h-3" }),
           " Desenho"
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "simple", className: "space-y-8", children: !isTransitioning && activeTab === "simple" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Mapa Padrão" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Configuração básica do mapa centralizado em uma coordenada específica." })
+      /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "simple", className: "space-y-8", children: !isTransitioning && activeTab === "simple" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Mapa Padrão" }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Configuração básica do mapa centralizado em uma coordenada específica." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            ImageWithFallback.Map,
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            useMobile.Map,
             {
               center: { lat: -23.5505, lng: -46.6333 },
               zoom: 13,
@@ -888,58 +888,58 @@ function MapShowcase() {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Camadas (Layers)" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Sobreposição de informações como tráfego, transporte público e ciclovias." })
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Camadas (Layers)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Sobreposição de informações como tráfego, transporte público e ciclovias." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "space-y-4", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-6 p-4 border rounded-lg bg-muted/50", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ImageWithFallback.Switch,
+                  useMobile.Switch,
                   {
                     id: "traffic",
                     checked: showTraffic,
                     onCheckedChange: setShowTraffic
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Label, { htmlFor: "traffic", className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Label, { htmlFor: "traffic", className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { className: "w-4 h-4" }),
                   " Trânsito"
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ImageWithFallback.Switch,
+                  useMobile.Switch,
                   {
                     id: "transit",
                     checked: showTransit,
                     onCheckedChange: setShowTransit
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Label, { htmlFor: "transit", className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Label, { htmlFor: "transit", className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { className: "w-4 h-4" }),
                   " Transporte"
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ImageWithFallback.Switch,
+                  useMobile.Switch,
                   {
                     id: "bicycling",
                     checked: showBicycling,
                     onCheckedChange: setShowBicycling
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Label, { htmlFor: "bicycling", className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Label, { htmlFor: "bicycling", className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { className: "w-4 h-4" }),
                   " Ciclovias"
                 ] })
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              ImageWithFallback.Map,
+              useMobile.Map,
               {
                 center: { lat: -23.5505, lng: -46.6333 },
                 zoom: 12,
@@ -955,10 +955,10 @@ function MapShowcase() {
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-3 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { className: "text-sm", children: "São Paulo" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ImageWithFallback.Map,
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { className: "text-sm", children: "São Paulo" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              useMobile.Map,
               {
                 center: { lat: -23.5505, lng: -46.6333 },
                 zoom: 11,
@@ -968,10 +968,10 @@ function MapShowcase() {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { className: "text-sm", children: "Rio de Janeiro" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ImageWithFallback.Map,
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { className: "text-sm", children: "Rio de Janeiro" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              useMobile.Map,
               {
                 center: { lat: -22.9068, lng: -43.1729 },
                 zoom: 11,
@@ -981,10 +981,10 @@ function MapShowcase() {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { className: "text-sm", children: "New York" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ImageWithFallback.Map,
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { className: "text-sm", children: "New York" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              useMobile.Map,
               {
                 center: { lat: 40.7128, lng: -74.006 },
                 zoom: 11,
@@ -996,14 +996,14 @@ function MapShowcase() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "markers", className: "space-y-8", children: !isTransitioning && activeTab === "markers" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Marcadores e Pins" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Exemplos de marcadores personalizados com diferentes cores e informações." })
+      /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "markers", className: "space-y-8", children: !isTransitioning && activeTab === "markers" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Marcadores e Pins" }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Exemplos de marcadores personalizados com diferentes cores e informações." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            ImageWithFallback.Map,
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            useMobile.Map,
             {
               center: { lat: -23.5505, lng: -46.6333 },
               zoom: 13,
@@ -1034,13 +1034,13 @@ function MapShowcase() {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Marcador com Ações" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Marcador interativo que exibe conteúdo rico (texto, imagem, botões) ao ser clicado." })
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Marcador com Ações" }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Marcador interativo que exibe conteúdo rico (texto, imagem, botões) ao ser clicado." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            ImageWithFallback.Map,
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            useMobile.Map,
             {
               center: { lat: -23.5505, lng: -46.6333 },
               zoom: 13,
@@ -1053,7 +1053,7 @@ function MapShowcase() {
                   richContent: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 max-w-[260px]", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-base", children: "Xertica HQ" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", className: "text-[10px] h-5", children: "Open" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "outline", className: "text-[10px] h-5", children: "Open" })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-32 bg-muted rounded-md mb-3 overflow-hidden relative", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" }),
@@ -1070,13 +1070,13 @@ function MapShowcase() {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Áreas e Zonas" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Delimitação de áreas geográficas usando círculos e polígonos." })
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Áreas e Zonas" }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Delimitação de áreas geográficas usando círculos e polígonos." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            ImageWithFallback.Map,
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            useMobile.Map,
             {
               center: { lat: -23.5505, lng: -46.6333 },
               zoom: 12,
@@ -1112,61 +1112,61 @@ function MapShowcase() {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "controls", className: "space-y-8", children: !isTransitioning && activeTab === "controls" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Controles do Mapa" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Personalize a interface do mapa ativando ou desativando controles nativos." })
+      /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "controls", className: "space-y-8", children: !isTransitioning && activeTab === "controls" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Controles do Mapa" }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Personalize a interface do mapa ativando ou desativando controles nativos." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "space-y-4", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border rounded-lg bg-muted/50", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ImageWithFallback.Checkbox,
+                  useMobile.Checkbox,
                   {
                     id: "zoom",
                     checked: showZoomControl,
                     onCheckedChange: (c) => setShowZoomControl(!!c)
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "zoom", children: "Zoom Control" })
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "zoom", children: "Zoom Control" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ImageWithFallback.Checkbox,
+                  useMobile.Checkbox,
                   {
                     id: "maptype",
                     checked: showMapTypeControl,
                     onCheckedChange: (c) => setShowMapTypeControl(!!c)
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "maptype", children: "Map Type" })
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "maptype", children: "Map Type" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ImageWithFallback.Checkbox,
+                  useMobile.Checkbox,
                   {
                     id: "streetview",
                     checked: showStreetViewControl,
                     onCheckedChange: (c) => setShowStreetViewControl(!!c)
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "streetview", children: "Street View" })
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "streetview", children: "Street View" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ImageWithFallback.Checkbox,
+                  useMobile.Checkbox,
                   {
                     id: "fullscreen",
                     checked: showFullscreenControl,
                     onCheckedChange: (c) => setShowFullscreenControl(!!c)
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "fullscreen", children: "Fullscreen" })
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "fullscreen", children: "Fullscreen" })
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              ImageWithFallback.Map,
+              useMobile.Map,
               {
                 center: { lat: -23.5505, lng: -46.6333 },
                 zoom: 13,
@@ -1180,15 +1180,15 @@ function MapShowcase() {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Filtros Interativos" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Exemplo avançado de mapa com controles customizados para filtragem de marcadores." })
+        /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Filtros Interativos" }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Exemplo avançado de mapa com controles customizados para filtragem de marcadores." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(FilterableMapExample, { apiKey }) })
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(FilterableMapExample, { apiKey }) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "drawing", className: "space-y-8", children: !isTransitioning && activeTab === "drawing" && /* @__PURE__ */ jsxRuntime.jsx(DrawingMapExample, { apiKey }) })
+      /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "drawing", className: "space-y-8", children: !isTransitioning && activeTab === "drawing" && /* @__PURE__ */ jsxRuntime.jsx(DrawingMapExample, { apiKey }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-3 gap-6 pt-8 border-t", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
@@ -1251,7 +1251,7 @@ function TemplateContent({ user, onLogout, onSettings }) {
         ),
         /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(input.ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 sm:p-4 md:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            ImageWithFallback.PageHeader,
+            useMobile.PageHeader,
             {
               title: "Página de Template",
               subtitle: "Template completo com componentes do Design System"
@@ -1259,12 +1259,12 @@ function TemplateContent({ user, onLogout, onSettings }) {
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Header with Breadcrumbs" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Main Header" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Example of Header with 4-level breadcrumbs" })
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Main Header" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Example of Header with 4-level breadcrumbs" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "p-0 border-t bg-background overflow-hidden rounded-b-[var(--radius-lg)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "p-0 border-t bg-background overflow-hidden rounded-b-[var(--radius-lg)]", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   header.Header,
                   {
@@ -1290,95 +1290,95 @@ function TemplateContent({ user, onLogout, onSettings }) {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Alertas" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Alert, { variant: "info", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertTitle, { children: "Informação" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDescription, { children: "Este é um exemplo de alerta informativo usando os componentes do Design System." })
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Alert, { variant: "info", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertTitle, { children: "Informação" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDescription, { children: "Este é um exemplo de alerta informativo usando os componentes do Design System." })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Alert, { variant: "destructive", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertTitle, { children: "Erro" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDescription, { children: "Ocorreu um erro ao processar sua solicitação." })
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Alert, { variant: "destructive", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertTitle, { children: "Erro" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDescription, { children: "Ocorreu um erro ao processar sua solicitação." })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Alert, { variant: "success", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertTitle, { children: "Sucesso" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDescription, { children: "Operação realizada com sucesso!" })
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Alert, { variant: "success", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertTitle, { children: "Sucesso" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDescription, { children: "Operação realizada com sucesso!" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Alert, { variant: "warning", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertTitle, { children: "Aviso" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDescription, { children: "Atenção: Esta ação não pode ser desfeita." })
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Alert, { variant: "warning", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertTitle, { children: "Aviso" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDescription, { children: "Atenção: Esta ação não pode ser desfeita." })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Cards & Abas" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Tabs, { defaultValue: "overview", className: "w-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.TabsList, { className: "grid w-full grid-cols-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "overview", children: "Visão Geral" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "forms", children: "Formulários" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "data", children: "Dados" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "settings", children: "Configurações" })
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Tabs, { defaultValue: "overview", className: "w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.TabsList, { className: "grid w-full grid-cols-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "overview", children: "Visão Geral" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "forms", children: "Formulários" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "data", children: "Dados" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "settings", children: "Configurações" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.TabsContent, { value: "overview", className: "space-y-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.TabsContent, { value: "overview", className: "space-y-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Total de Usuários" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Últimos 30 dias" })
+                  /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Total de Usuários" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Últimos 30 dias" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]", children: "1,234" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "default", className: "ml-2", children: "+12%" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "default", className: "ml-2", children: "+12%" })
                     ] }) })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Receita Total" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Mês atual" })
+                  /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Receita Total" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Mês atual" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]", children: "$ 45.2k" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "secondary", className: "ml-2", children: "+8%" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "secondary", className: "ml-2", children: "+8%" })
                     ] }) })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Taxa de Conversão" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Semana atual" })
+                  /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Taxa de Conversão" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Semana atual" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]", children: "3.2%" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", className: "ml-2", children: "-2%" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "outline", className: "ml-2", children: "-2%" })
                     ] }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Progresso & Sliders" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Exemplo de componentes de progresso" })
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Progresso & Sliders" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Exemplo de componentes de progresso" })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "space-y-6", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "space-y-6", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "Progresso do Projeto" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "Progresso do Projeto" }),
                         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "[font-size:var(--text-small)] text-muted-foreground", children: [
                           progress,
                           "%"
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Progress, { value: progress, className: "w-full" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Progress, { value: progress, className: "w-full" }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { size: "sm", onClick: () => setProgress(Math.max(0, progress - 10)), children: "-10%" }),
                         /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { size: "sm", onClick: () => setProgress(Math.min(100, progress + 10)), children: "+10%" })
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "Volume" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "Volume" }),
                         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "[font-size:var(--text-small)] text-muted-foreground", children: [
                           sliderValue[0],
                           "%"
@@ -1400,38 +1400,38 @@ function TemplateContent({ user, onLogout, onSettings }) {
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "forms", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Formulário de Cadastro" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Preencha os campos abaixo para criar uma nova conta" })
+              /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "forms", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Formulário de Cadastro" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Preencha os campos abaixo para criar uma nova conta" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleFormSubmit, className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleFormSubmit, className: "space-y-4", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "firstName", children: "Nome" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "firstName", children: "Nome" }),
                       /* @__PURE__ */ jsxRuntime.jsx(input.Input, { id: "firstName", placeholder: "João" })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "lastName", children: "Sobrenome" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "lastName", children: "Sobrenome" }),
                       /* @__PURE__ */ jsxRuntime.jsx(input.Input, { id: "lastName", placeholder: "Silva" })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "email", children: "E-mail" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "email", children: "E-mail" }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "absolute left-3 top-3 h-4 w-4 text-muted-foreground" }),
                       /* @__PURE__ */ jsxRuntime.jsx(input.Input, { id: "email", type: "email", placeholder: "john@example.com", className: "pl-10" })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "phone", children: "Telefone" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "phone", children: "Telefone" }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { className: "absolute left-3 top-3 h-4 w-4 text-muted-foreground" }),
                       /* @__PURE__ */ jsxRuntime.jsx(input.Input, { id: "phone", type: "tel", placeholder: "(11) 99999-9999", className: "pl-10" })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "role", children: "Função" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "role", children: "Função" }),
                     /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { id: "role", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Selecione uma função" }) }),
                       /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
@@ -1443,7 +1443,7 @@ function TemplateContent({ user, onLogout, onSettings }) {
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "bio", children: "Biografia" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "bio", children: "Biografia" }),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       richTextEditor.Textarea,
                       {
@@ -1453,54 +1453,54 @@ function TemplateContent({ user, onLogout, onSettings }) {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "Preferências" }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Checkbox, { id: "newsletter" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "newsletter", className: "font-normal", children: "Receber newsletter por e-mail" })
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Checkbox, { id: "newsletter" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "newsletter", className: "font-normal", children: "Receber newsletter por e-mail" })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Checkbox, { id: "notifications" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "notifications", className: "font-normal", children: "Ativar notificações push" })
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Checkbox, { id: "notifications" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "notifications", className: "font-normal", children: "Ativar notificações push" })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Checkbox, { id: "updates" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "updates", className: "font-normal", children: "Receber atualizações sobre novos recursos" })
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Checkbox, { id: "updates" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "updates", className: "font-normal", children: "Receber atualizações sobre novos recursos" })
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "Tipo de Conta" }),
-                      /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.RadioGroup, { defaultValue: "personal", "aria-label": "Tipo de Conta", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "Tipo de Conta" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(useMobile.RadioGroup, { defaultValue: "personal", "aria-label": "Tipo de Conta", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.RadioGroupItem, { value: "personal", id: "personal" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "personal", className: "font-normal", children: "Pessoal" })
+                          /* @__PURE__ */ jsxRuntime.jsx(useMobile.RadioGroupItem, { value: "personal", id: "personal" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "personal", className: "font-normal", children: "Pessoal" })
                         ] }),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.RadioGroupItem, { value: "business", id: "business" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "business", className: "font-normal", children: "Empresarial" })
+                          /* @__PURE__ */ jsxRuntime.jsx(useMobile.RadioGroupItem, { value: "business", id: "business" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "business", className: "font-normal", children: "Empresarial" })
                         ] }),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.RadioGroupItem, { value: "enterprise", id: "enterprise" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "enterprise", className: "font-normal", children: "Corporativo" })
+                          /* @__PURE__ */ jsxRuntime.jsx(useMobile.RadioGroupItem, { value: "enterprise", id: "enterprise" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "enterprise", className: "font-normal", children: "Corporativo" })
                         ] })
                       ] })
                     ] })
                   ] })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardFooter, { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardFooter, { className: "flex justify-between", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "outline", children: "Cancelar" }),
                   /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { onClick: handleFormSubmit, children: "Criar Conta" })
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "data", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Lista de Usuários" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Gerenciar usuários do sistema" })
+              /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "data", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Lista de Usuários" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Gerenciar usuários do sistema" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-3 h-4 w-4 text-muted-foreground" }),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1525,34 +1525,34 @@ function TemplateContent({ user, onLogout, onSettings }) {
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Ana Silva" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "ana.silva@example.com" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Developer" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "default", children: "Active" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "default", children: "Active" }) }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "sm", children: "Edit" }) })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.TableRow, { children: [
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Bruno Costa" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "bruno.costa@example.com" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Designer" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "default", children: "Active" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "default", children: "Active" }) }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "sm", children: "Edit" }) })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.TableRow, { children: [
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Carla Oliveira" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "carla.oliveira@example.com" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Manager" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "secondary", children: "Away" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "secondary", children: "Away" }) }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "sm", children: "Edit" }) })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.TableRow, { children: [
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Diego Santos" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "diego.santos@example.com" }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: "Analyst" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", children: "Inactive" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "outline", children: "Inactive" }) }),
                         /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "sm", children: "Edit" }) })
                       ] })
                     ] })
                   ] }) })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardFooter, { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardFooter, { className: "flex justify-between items-center", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Showing 4 of 127 users" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "outline", size: "sm", children: "Previous" }),
@@ -1560,38 +1560,38 @@ function TemplateContent({ user, onLogout, onSettings }) {
                   ] })
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "settings", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Configurações do Sistema" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Gerenciar configurações gerais" })
+              /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "settings", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Configurações do Sistema" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Gerenciar configurações gerais" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "space-y-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "space-y-6", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "dark-mode", children: "Dark Mode" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "dark-mode", children: "Dark Mode" }),
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Enable dark theme in the interface" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "dark-mode", checked: switchEnabled, onCheckedChange: setSwitchEnabled })
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "dark-mode", checked: switchEnabled, onCheckedChange: setSwitchEnabled })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "email-notifications", children: "Email Notifications" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "email-notifications", children: "Email Notifications" }),
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Receive important updates by email" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "email-notifications", defaultChecked: true })
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "email-notifications", defaultChecked: true })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "push-notifications", children: "Push Notifications" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "push-notifications", children: "Push Notifications" }),
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Receive instant notifications in the browser" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "push-notifications" })
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "push-notifications" })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "Language" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "Language" }),
                     /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { defaultValue: "pt-br", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { "aria-label": "Idioma do sistema", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
                       /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
@@ -1601,9 +1601,9 @@ function TemplateContent({ user, onLogout, onSettings }) {
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "Time Zone" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "Time Zone" }),
                     /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { defaultValue: "america-sao-paulo", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { "aria-label": "Fuso horário", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
                       /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
@@ -1614,24 +1614,24 @@ function TemplateContent({ user, onLogout, onSettings }) {
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardFooter, { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardFooter, { className: "flex justify-between", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "outline", children: "Restaurar Padrões" }),
                   /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { children: "Salvar Alterações" })
                 ] })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Botões" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Variações de Botão" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Diferentes estilos e tamanhos de botões" })
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Variações de Botão" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Diferentes estilos e tamanhos de botões" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "space-y-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "space-y-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "Variants" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "Variants" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "default", children: "Default" }),
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "secondary", children: "Secondary" }),
@@ -1641,9 +1641,9 @@ function TemplateContent({ user, onLogout, onSettings }) {
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "destructive", children: "Destructive" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "Sizes" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "Sizes" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { size: "sm", children: "Small" }),
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { size: "default", children: "Default" }),
@@ -1651,9 +1651,9 @@ function TemplateContent({ user, onLogout, onSettings }) {
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { size: "icon", "aria-label": "Configurações", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "With Icons" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "With Icons" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Button, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "mr-2 h-4 w-4" }),
@@ -1669,9 +1669,9 @@ function TemplateContent({ user, onLogout, onSettings }) {
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, {}),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { children: "States" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { children: "States" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { disabled: true, children: "Disabled" }),
                     /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "outline", disabled: true, children: "Outline Disabled" })
@@ -1680,35 +1680,35 @@ function TemplateContent({ user, onLogout, onSettings }) {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Badges" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Variações de Badge" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Estilos diferentes de badge para status e tags" })
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Variações de Badge" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Estilos diferentes de badge para status e tags" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "default", children: "Padrão" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "secondary", children: "Secundário" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", children: "Contorno" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "destructive", children: "Destrutivo" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { className: "bg-success text-success-foreground", children: "Sucesso" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { className: "bg-warning text-warning-foreground", children: "Aviso" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { className: "bg-info text-info-foreground", children: "Info" })
+              /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "default", children: "Padrão" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "secondary", children: "Secundário" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "outline", children: "Contorno" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "destructive", children: "Destrutivo" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { className: "bg-success text-success-foreground", children: "Sucesso" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { className: "bg-warning text-warning-foreground", children: "Aviso" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { className: "bg-info text-info-foreground", children: "Info" })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Diálogos" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Diálogo" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Um modal interativo básico" })
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Diálogo" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Um modal interativo básico" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { className: "flex justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Dialog, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { className: "flex justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Dialog, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "outline", children: "Editar Perfil" }) }),
                   /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.DialogContent, { className: "sm:max-w-[425px]", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.DialogHeader, { children: [
@@ -1717,11 +1717,11 @@ function TemplateContent({ user, onLogout, onSettings }) {
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 py-4", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "name", className: "text-right", children: "Nome" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "name", className: "text-right", children: "Nome" }),
                         /* @__PURE__ */ jsxRuntime.jsx(input.Input, { id: "name", defaultValue: "John Doe", className: "col-span-3" })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "username", className: "text-right", children: "Usuário" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "username", className: "text-right", children: "Usuário" }),
                         /* @__PURE__ */ jsxRuntime.jsx(input.Input, { id: "username", defaultValue: "@johndoe", className: "col-span-3" })
                       ] })
                     ] }),
@@ -1729,48 +1729,48 @@ function TemplateContent({ user, onLogout, onSettings }) {
                   ] })
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Alerta de Diálogo" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Um alerta para decisões importantes" })
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Alerta de Diálogo" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Um alerta para decisões importantes" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { className: "flex justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.AlertDialog, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "destructive", children: "Excluir Conta" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.AlertDialogContent, { className: "sm:max-w-[425px]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.AlertDialogHeader, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDialogTitle, { children: "Você tem certeza absoluta?" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDialogDescription, { children: "Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta e removerá seus dados de nossos servidores." })
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { className: "flex justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs(useMobile.AlertDialog, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "destructive", children: "Excluir Conta" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(useMobile.AlertDialogContent, { className: "sm:max-w-[425px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.AlertDialogHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDialogTitle, { children: "Você tem certeza absoluta?" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDialogDescription, { children: "Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta e removerá seus dados de nossos servidores." })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.AlertDialogFooter, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDialogCancel, { children: "Cancelar" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDialogAction, { className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: "Continuar" })
+                    /* @__PURE__ */ jsxRuntime.jsxs(useMobile.AlertDialogFooter, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDialogCancel, { children: "Cancelar" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDialogAction, { className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: "Continuar" })
                     ] })
                   ] })
                 ] }) })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsx("section", { children: /* @__PURE__ */ jsxRuntime.jsx(MapShowcase, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Variações de Cabeçalho" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Configurações do Cabeçalho Principal" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "O Header é focado em navegação (breadcrumbs) e ações contextuais rápidas." })
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Configurações do Cabeçalho Principal" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "O Header é focado em navegação (breadcrumbs) e ações contextuais rápidas." })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "space-y-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "space-y-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded-[var(--radius-lg)] bg-muted/30", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold mb-4", children: "Elementos Visíveis" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "header-actions", checked: showHeaderActions, onCheckedChange: setShowHeaderActions }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "header-actions", className: "cursor-pointer", children: "Botões de Ação" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "header-actions", checked: showHeaderActions, onCheckedChange: setShowHeaderActions }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "header-actions", className: "cursor-pointer", children: "Botões de Ação" })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "header-bread", checked: showHeaderBreadcrumbs, onCheckedChange: setShowHeaderBreadcrumbs }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "header-bread", className: "cursor-pointer", children: "Breadcrumbs" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "header-bread", checked: showHeaderBreadcrumbs, onCheckedChange: setShowHeaderBreadcrumbs }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "header-bread", className: "cursor-pointer", children: "Breadcrumbs" })
                     ] })
                   ] })
                 ] }),
@@ -1796,33 +1796,33 @@ function TemplateContent({ user, onLogout, onSettings }) {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: "Variações da Sidebar" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Sidebar Modo Assistente vs Padrão" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "A Sidebar suporta flexibilidade através da propriedade variant." })
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Sidebar Modo Assistente vs Padrão" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "A Sidebar suporta flexibilidade através da propriedade variant." })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Tabs, { defaultValue: "assistant", className: "w-full", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.TabsList, { className: "mb-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "assistant", children: "Modo Assistente" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsTrigger, { value: "default", children: "Modo Padrão" })
+              /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Tabs, { defaultValue: "assistant", className: "w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(useMobile.TabsList, { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "assistant", children: "Modo Assistente" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsTrigger, { value: "default", children: "Modo Padrão" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-4 border rounded-[var(--radius-lg)] bg-muted/30", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold mb-4", children: "Configurações do Rodapé" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-6 mt-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "show-user", checked: showSidebarUser, onCheckedChange: setShowSidebarUser }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "show-user", className: "cursor-pointer", children: "Perfil do Usuário" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "show-user", checked: showSidebarUser, onCheckedChange: setShowSidebarUser }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "show-user", className: "cursor-pointer", children: "Perfil do Usuário" })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "show-settings", checked: showSidebarSettings, onCheckedChange: setShowSidebarSettings }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "show-settings", className: "cursor-pointer", children: "Configurações" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "show-settings", checked: showSidebarSettings, onCheckedChange: setShowSidebarSettings }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "show-settings", className: "cursor-pointer", children: "Configurações" })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Switch, { id: "show-logout", checked: showSidebarLogout, onCheckedChange: setShowSidebarLogout }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Label, { htmlFor: "show-logout", className: "cursor-pointer", children: "Botão de Sair" })
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Switch, { id: "show-logout", checked: showSidebarLogout, onCheckedChange: setShowSidebarLogout }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "show-logout", className: "cursor-pointer", children: "Botão de Sair" })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 pt-6 border-t", children: [
@@ -1851,7 +1851,7 @@ function TemplateContent({ user, onLogout, onSettings }) {
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "assistant", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden", style: { transform: "translateZ(0)" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "assistant", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden", style: { transform: "translateZ(0)" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     header.Sidebar,
                     {
@@ -1873,9 +1873,9 @@ function TemplateContent({ user, onLogout, onSettings }) {
                           content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2", children: [
                             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase text-muted-foreground px-2", children: "Filtrar por Status" }),
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 p-1", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { className: "bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30", children: "Ativo" }),
-                              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", className: "text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10", children: "Arquivado" }),
-                              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", className: "text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10", children: "Pendente" })
+                              /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { className: "bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30", children: "Ativo" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "outline", className: "text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10", children: "Arquivado" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "outline", className: "text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10", children: "Pendente" })
                             ] })
                           ] })
                         }
@@ -1927,7 +1927,7 @@ function TemplateContent({ user, onLogout, onSettings }) {
                               label: "Restauração BR-163",
                               icon: () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-yellow-500" }),
                               description: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 min-w-[160px]", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Progress, { value: 67, className: "h-1.5 bg-sidebar-foreground/10" }),
+                                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Progress, { value: 67, className: "h-1.5 bg-sidebar-foreground/10" }),
                                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-[10px] text-sidebar-foreground/60", children: [
                                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Cuiabá, MT" }),
                                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: "67%" })
@@ -1946,7 +1946,7 @@ function TemplateContent({ user, onLogout, onSettings }) {
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300", style: { left: `${sidebarWidth}px` }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-center", children: "Conteúdo do Modo Assistente" }) })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.TabsContent, { value: "default", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden", style: { transform: "translateZ(0)" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.TabsContent, { value: "default", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden", style: { transform: "translateZ(0)" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     header.Sidebar,
                     {
@@ -1982,21 +1982,21 @@ function TemplateContent({ user, onLogout, onSettings }) {
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Separator, { className: "my-8" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Card, { className: "mt-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardHeader, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardTitle, { children: "Template Pronto para CLI" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.CardDescription, { children: "Como usar este template" })
+          /* @__PURE__ */ jsxRuntime.jsx(useMobile.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { className: "mt-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardHeader, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { children: "Template Pronto para CLI" }),
+              /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardDescription, { children: "Como usar este template" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.CardContent, { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(useMobile.CardContent, { className: "space-y-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
                 "Este template está pronto para ser usado como base para novos projetos. Todos os componentes usam as variáveis CSS definidas em ",
                 /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]", children: "/styles/xertica/tokens.css" }),
                 "and follow the Xertica UI CLI-first architecture."
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Alert, { variant: "info", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertTitle, { children: "Dica" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.AlertDescription, { children: "Copie este arquivo como ponto de partida para suas páginas. Todos os componentes são reutilizáveis e customizáveis através de variáveis CSS." })
+              /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Alert, { variant: "info", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertTitle, { children: "Dica" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.AlertDescription, { children: "Copie este arquivo como ponto de partida para suas páginas. Todos os componentes são reutilizáveis e customizáveis através de variáveis CSS." })
               ] })
             ] })
           ] })
@@ -2017,6 +2017,9 @@ const routes = [
     icon: lucideReact.FileText
   }
 ];
+const getRouteByPath = (path) => {
+  return routes.find((route) => route.path === path);
+};
 function TemplatePage({ user, onLogout }) {
   const { sidebarExpanded, sidebarWidth, assistenteExpanded, toggleSidebar, toggleAssistente } = LayoutContext.useLayout();
   const location = reactRouterDom.useLocation();
@@ -2053,11 +2056,751 @@ function TemplatePage({ user, onLogout }) {
       {
         isExpanded: assistenteExpanded,
         onToggle: toggleAssistente,
-        onEvaluation: (id, type, reason) => console.log("Feedback:", id, type, reason)
+        onEvaluation: () => {
+        }
+      }
+    )
+  ] });
+}
+const SIDEBAR_COLLAPSED_WIDTH = 80;
+function HomeContent({ user, onLogout, onSettings }) {
+  const { sidebarExpanded, sidebarWidth, assistenteExpanded } = LayoutContext.useLayout();
+  const location = reactRouterDom.useLocation();
+  const navigate = reactRouterDom.useNavigate();
+  const labelTranslations = {
+    "home": "Início",
+    "template": "Template"
+  };
+  const currentRoute = getRouteByPath(location.pathname);
+  (currentRoute == null ? void 0 : currentRoute.label) ? labelTranslations[currentRoute.label.toLowerCase()] || currentRoute.label : "Início";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : SIDEBAR_COLLAPSED_WIDTH
+      },
+      className: "flex-1 flex flex-col overflow-hidden transition-all duration-300",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          header.Header,
+          {
+            showThemeToggle: true,
+            showLanguageSelector: true,
+            breadcrumbs: [
+              { label: "Design System", href: "/home" },
+              { label: "Início" }
+            ],
+            renderLink: (href, props) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: href, ...props })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(input.ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 sm:p-4 md:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            useMobile.PageHeader,
+            {
+              title: "Bem-vindo ao Design System!",
+              subtitle: "Sua plataforma inteligente para automação e análise de dados"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs(useMobile.Card, { className: "hover:shadow-xl transition-shadow duration-200 flex flex-col h-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-6 h-6 text-[var(--chart-2)]" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardTitle, { className: "text-sm", children: "Template CLI" }),
+                /* @__PURE__ */ jsxRuntime.jsx(useMobile.Badge, { variant: "default", className: "text-xs", children: "Novo" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardContent, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Página de template pronta para uso CLI com todos os componentes configurados." }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              tooltip.Button,
+              {
+                variant: "outline",
+                className: "w-full",
+                onClick: () => navigate("/template"),
+                children: "Visualizar"
+              }
+            ) })
+          ] }) })
+        ] }) }) }) })
+      ]
+    }
+  );
+}
+const richSuggestions = [
+  { id: "chart-1", text: "Ver análise de desempenho" },
+  { id: "table-1", text: "Gerar relatório do projeto" },
+  { id: "doc-1", text: "Criar documento de requisitos" },
+  { id: "pod-1", text: "Gerar podcast de resumo diário" }
+];
+const feedbackOptions = [
+  "Não era o que eu estava procurando",
+  "Informações incorretas",
+  "Resposta incompleta"
+];
+function HomePage({ user, onLogout }) {
+  const { sidebarExpanded, sidebarWidth, assistenteExpanded, toggleSidebar, toggleAssistente, toggleAssistenteWithTab } = LayoutContext.useLayout();
+  const location = reactRouterDom.useLocation();
+  const navigate = reactRouterDom.useNavigate();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-screen flex bg-muted overflow-hidden relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      header.Sidebar,
+      {
+        expanded: sidebarExpanded,
+        width: sidebarWidth,
+        onToggle: toggleSidebar,
+        user: {
+          ...user,
+          name: "Ariel Santos",
+          avatar: "https://github.com/shadcn.png"
+        },
+        onLogout,
+        onSettingsClick: () => navigate("/settings"),
+        location,
+        navigate,
+        routes
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HomeContent,
+      {
+        user,
+        onLogout,
+        onSettings: () => navigate("/settings")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CodeBlock.XerticaAssistant,
+      {
+        isExpanded: assistenteExpanded,
+        onToggle: toggleAssistente,
+        defaultTab: "chat",
+        demoMode: true,
+        responseGenerator: CodeBlock.gerarResposta,
+        richSuggestions,
+        feedbackOptions,
+        onEvaluation: () => {
+        }
       }
     )
   ] });
 }
+function LoginPage({ onLogin }) {
+  const navigate = reactRouterDom.useNavigate();
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 1e3));
+    const success = onLogin(email, password);
+    if (!success) {
+      setError("Por favor, preencha todos os campos");
+    }
+    setIsLoading(false);
+  };
+  const handleSocialLogin = (_provider) => {
+    onLogin("social@user.com", "social-auth");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-1 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        useMobile.ImageWithFallback,
+        {
+          src: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format",
+          alt: "Equipe trabalhando com tecnologia",
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-20", children: /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.LanguageSelector, { variant: "minimal", showIcon: false }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-sm space-y-6 relative z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            LanguageSelector.XerticaLogo,
+            {
+              className: "h-12 w-auto text-primary dark:text-foreground",
+              variant: "theme"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm text-muted-foreground", children: "Acesse sua conta" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "email", children: "E-mail" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.Input,
+              {
+                id: "email",
+                name: "email",
+                type: "email",
+                required: true,
+                className: "w-full",
+                placeholder: "seu@email.com",
+                value: email,
+                onChange: (e) => setEmail(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "password", children: "Senha" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.Input,
+              {
+                id: "password",
+                name: "password",
+                type: "password",
+                required: true,
+                className: "w-full",
+                placeholder: "••••••••",
+                value: password,
+                onChange: (e) => setPassword(e.target.value)
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive text-sm text-center", children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            tooltip.Button,
+            {
+              type: "submit",
+              className: "w-full",
+              disabled: isLoading,
+              children: isLoading ? "Entrando..." : "Entrar"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => navigate("/forgot-password"),
+              className: "text-sm text-primary hover:opacity-80 transition-colors",
+              children: "Esqueceu sua senha?"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t border-border" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted px-2 text-muted-foreground", children: "ou continue com" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center",
+              onClick: () => handleSocialLogin(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-5 h-5 mr-2", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#FBBC05", d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Entrar com Google" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center",
+              onClick: () => handleSocialLogin(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-5 h-5 mr-2 text-[var(--chart-4)]" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Entrar com MT Login" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center font-normal",
+              onClick: () => handleSocialLogin(),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Entrar com ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children: "gov.br" })
+              ] })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ForgotPasswordPage() {
+  const navigate = reactRouterDom.useNavigate();
+  const [email, setEmail] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    navigate("/verify-email", { state: { email } });
+    setIsLoading(false);
+  };
+  const handleSocialLogin = (_provider) => {
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-1 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        useMobile.ImageWithFallback,
+        {
+          src: "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop&auto=format",
+          alt: "Segurança e tecnologia",
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-20", children: /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.LanguageSelector, { variant: "minimal", showIcon: false }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-sm space-y-6 relative z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            LanguageSelector.XerticaLogo,
+            {
+              className: "h-12 w-auto text-primary dark:text-foreground",
+              variant: "theme"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm text-muted-foreground", children: "Recuperar senha" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: "Digite seu e-mail e enviaremos as instruções para redefinir sua senha" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "email", className: "form-label", children: "E-mail" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.Input,
+              {
+                id: "email",
+                name: "email",
+                type: "email",
+                required: true,
+                className: "w-full",
+                placeholder: "seu@email.com",
+                value: email,
+                onChange: (e) => setEmail(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              tooltip.Button,
+              {
+                type: "submit",
+                className: "w-full",
+                disabled: isLoading,
+                children: isLoading ? "Enviando..." : "Enviar instruções"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              tooltip.Button,
+              {
+                type: "button",
+                onClick: () => navigate("/login"),
+                variant: "outline",
+                className: "w-full text-muted-foreground hover:text-foreground",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-4 h-4 mr-2" }),
+                  "Voltar para o login"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t border-border" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted px-2 text-muted-foreground", children: "ou continue com" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center",
+              onClick: () => handleSocialLogin(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-5 h-5 mr-2", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#FBBC05", d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Entrar com Google" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center",
+              onClick: () => handleSocialLogin(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-5 h-5 mr-2 text-[var(--chart-4)]" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Entrar com MT Login" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center font-normal",
+              onClick: () => handleSocialLogin(),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Entrar com ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children: "gov.br" })
+              ] })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function VerifyEmailPage() {
+  var _a;
+  const navigate = reactRouterDom.useNavigate();
+  const location = reactRouterDom.useLocation();
+  const email = ((_a = location.state) == null ? void 0 : _a.email) || "your@email.com";
+  const [isResending, setIsResending] = React.useState(false);
+  const [resendSuccess, setResendSuccess] = React.useState(false);
+  const handleResend = async () => {
+    setIsResending(true);
+    setResendSuccess(false);
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    setIsResending(false);
+    setResendSuccess(true);
+    setTimeout(() => setResendSuccess(false), 3e3);
+  };
+  const handleSocialLogin = (_provider) => {
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-1 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        useMobile.ImageWithFallback,
+        {
+          src: "https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format",
+          alt: "E-mail e comunicação",
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-20", children: /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.LanguageSelector, { variant: "minimal", showIcon: false }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-sm space-y-6 relative z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            LanguageSelector.XerticaLogo,
+            {
+              className: "h-12 w-auto text-primary dark:text-foreground",
+              variant: "theme"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-primary/10 rounded-[var(--radius)]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "w-12 h-12 text-primary" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm text-muted-foreground", children: "Verifique seu e-mail" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: "Enviamos as instruções para redefinir sua senha para:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-primary", children: email })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-accent rounded-[var(--radius)] p-4 space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Siga as instruções no e-mail para redefinir sua senha. O link expira em 24 horas." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-4 h-4 mt-0.5 flex-shrink-0 text-[var(--chart-2)]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Verifique sua pasta de spam se não encontrar o e-mail" })
+          ] })
+        ] }),
+        resendSuccess && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 rounded-[var(--radius)] p-3 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-5 h-5 text-[var(--chart-2)] flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--chart-2)]", children: "E-mail reenviado com sucesso!" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-muted-foreground", children: "Não recebeu o e-mail?" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            tooltip.Button,
+            {
+              variant: "outline",
+              className: "w-full",
+              onClick: handleResend,
+              disabled: isResending,
+              children: isResending ? "Reenviando..." : "Reenviar e-mail"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Button,
+            {
+              type: "button",
+              onClick: () => navigate("/login"),
+              variant: "outline",
+              className: "w-full text-muted-foreground hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-4 h-4 mr-2" }),
+                "Voltar para o login"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t border-border" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted px-2 text-muted-foreground", children: "ou continue com" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center",
+              onClick: () => handleSocialLogin(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-5 h-5 mr-2", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#FBBC05", d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Entrar com Google" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center",
+              onClick: () => handleSocialLogin(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-5 h-5 mr-2 text-[var(--chart-4)]" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Entrar com MT Login" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            tooltip.Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full justify-center font-normal",
+              onClick: () => handleSocialLogin(),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Entrar com ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children: "gov.br" })
+              ] })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ResetPasswordPage() {
+  const navigate = reactRouterDom.useNavigate();
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [passwordStrength, setPasswordStrength] = React.useState(null);
+  const checkPasswordStrength = (pwd) => {
+    if (pwd.length === 0) {
+      setPasswordStrength(null);
+      return;
+    }
+    if (pwd.length < 6) {
+      setPasswordStrength("weak");
+    } else if (pwd.length < 10) {
+      setPasswordStrength("medium");
+    } else {
+      setPasswordStrength("strong");
+    }
+  };
+  const handlePasswordChange = (value) => {
+    setPassword(value);
+    checkPasswordStrength(value);
+    setError("");
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (password.length < 6) {
+      setError("A senha deve ter pelo menos 6 caracteres");
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError("As senhas não coincidem");
+      return;
+    }
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    navigate("/login", { state: { resetSuccess: true } });
+    setIsLoading(false);
+  };
+  const getStrengthColor = () => {
+    switch (passwordStrength) {
+      case "weak":
+        return "text-destructive";
+      case "medium":
+        return "text-[var(--chart-3)]";
+      case "strong":
+        return "text-[var(--chart-2)]";
+      default:
+        return "text-muted-foreground";
+    }
+  };
+  const getStrengthText = () => {
+    switch (passwordStrength) {
+      case "weak":
+        return "Senha fraca";
+      case "medium":
+        return "Senha média";
+      case "strong":
+        return "Senha forte";
+      default:
+        return "";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-1 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        useMobile.ImageWithFallback,
+        {
+          src: "https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=1200&h=800&fit=crop&auto=format",
+          alt: "Segurança e proteção",
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-20", children: /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.LanguageSelector, { variant: "minimal", showIcon: false }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-sm space-y-6 relative z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => navigate("/login"),
+            className: "flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-small", children: "Voltar para o login" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            LanguageSelector.XerticaLogo,
+            {
+              className: "h-12 w-auto text-primary dark:text-foreground",
+              variant: "theme"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm text-muted-foreground", children: "Redefinir senha" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: "Crie uma nova senha segura para sua conta" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "password", children: "Nova senha" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.Input,
+              {
+                id: "password",
+                name: "password",
+                type: "password",
+                required: true,
+                className: "w-full",
+                placeholder: "••••••••",
+                value: password,
+                onChange: (e) => handlePasswordChange(e.target.value)
+              }
+            ),
+            passwordStrength && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `h-full transition-all duration-300 ${passwordStrength === "weak" ? "w-1/3 bg-destructive" : passwordStrength === "medium" ? "w-2/3 bg-[var(--chart-3)]" : "w-full bg-[var(--chart-2)]"}`
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-small ${getStrengthColor()}`, children: getStrengthText() })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useMobile.Label, { htmlFor: "confirmPassword", children: "Confirmar senha" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.Input,
+              {
+                id: "confirmPassword",
+                name: "confirmPassword",
+                type: "password",
+                required: true,
+                className: "w-full",
+                placeholder: "••••••••",
+                value: confirmPassword,
+                onChange: (e) => {
+                  setConfirmPassword(e.target.value);
+                  setError("");
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-accent rounded-[var(--radius)] p-4 space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Requisitos de senha:" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.CheckCircle2,
+                  {
+                    className: `w-4 h-4 ${password.length >= 6 ? "text-[var(--chart-2)]" : "text-muted-foreground"}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Mínimo de 6 caracteres" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.CheckCircle2,
+                  {
+                    className: `w-4 h-4 ${password === confirmPassword && password.length > 0 ? "text-[var(--chart-2)]" : "text-muted-foreground"}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "As senhas coincidem" })
+              ] })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-destructive bg-destructive/10 rounded-[var(--radius)] p-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: error })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            tooltip.Button,
+            {
+              type: "submit",
+              className: "w-full",
+              disabled: isLoading,
+              children: isLoading ? "Redefinindo..." : "Redefinir senha"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
 exports.CodeBlock = CodeBlock.CodeBlock;
 exports.FormattedDocument = CodeBlock.FormattedDocument;
 exports.MarkdownMessage = CodeBlock.MarkdownMessage;
@@ -2081,183 +2824,183 @@ exports.PopoverContent = input.PopoverContent;
 exports.PopoverTrigger = input.PopoverTrigger;
 exports.ScrollArea = input.ScrollArea;
 exports.ScrollBar = input.ScrollBar;
-exports.Accordion = ImageWithFallback.Accordion;
-exports.AccordionContent = ImageWithFallback.AccordionContent;
-exports.AccordionItem = ImageWithFallback.AccordionItem;
-exports.AccordionTrigger = ImageWithFallback.AccordionTrigger;
-exports.Alert = ImageWithFallback.Alert;
-exports.AlertDescription = ImageWithFallback.AlertDescription;
-exports.AlertDialog = ImageWithFallback.AlertDialog;
-exports.AlertDialogAction = ImageWithFallback.AlertDialogAction;
-exports.AlertDialogCancel = ImageWithFallback.AlertDialogCancel;
-exports.AlertDialogContent = ImageWithFallback.AlertDialogContent;
-exports.AlertDialogDescription = ImageWithFallback.AlertDialogDescription;
-exports.AlertDialogFooter = ImageWithFallback.AlertDialogFooter;
-exports.AlertDialogHeader = ImageWithFallback.AlertDialogHeader;
-exports.AlertDialogOverlay = ImageWithFallback.AlertDialogOverlay;
-exports.AlertDialogPortal = ImageWithFallback.AlertDialogPortal;
-exports.AlertDialogTitle = ImageWithFallback.AlertDialogTitle;
-exports.AlertDialogTrigger = ImageWithFallback.AlertDialogTrigger;
-exports.AlertTitle = ImageWithFallback.AlertTitle;
-exports.AspectRatio = ImageWithFallback.AspectRatio;
-exports.AssistantChart = ImageWithFallback.AssistantChart;
-exports.Badge = ImageWithFallback.Badge;
-exports.Calendar = ImageWithFallback.Calendar;
-exports.Card = ImageWithFallback.Card;
-exports.CardAction = ImageWithFallback.CardAction;
-exports.CardContent = ImageWithFallback.CardContent;
-exports.CardDescription = ImageWithFallback.CardDescription;
-exports.CardFooter = ImageWithFallback.CardFooter;
-exports.CardHeader = ImageWithFallback.CardHeader;
-exports.CardTitle = ImageWithFallback.CardTitle;
-exports.Carousel = ImageWithFallback.Carousel;
-exports.CarouselContent = ImageWithFallback.CarouselContent;
-exports.CarouselItem = ImageWithFallback.CarouselItem;
-exports.CarouselNext = ImageWithFallback.CarouselNext;
-exports.CarouselPrevious = ImageWithFallback.CarouselPrevious;
-exports.Checkbox = ImageWithFallback.Checkbox;
-exports.Collapsible = ImageWithFallback.Collapsible;
-exports.CollapsibleContent = ImageWithFallback.CollapsibleContent;
-exports.CollapsibleTrigger = ImageWithFallback.CollapsibleTrigger;
-exports.Command = ImageWithFallback.Command;
-exports.CommandDialog = ImageWithFallback.CommandDialog;
-exports.CommandEmpty = ImageWithFallback.CommandEmpty;
-exports.CommandGroup = ImageWithFallback.CommandGroup;
-exports.CommandInput = ImageWithFallback.CommandInput;
-exports.CommandItem = ImageWithFallback.CommandItem;
-exports.CommandList = ImageWithFallback.CommandList;
-exports.CommandSeparator = ImageWithFallback.CommandSeparator;
-exports.CommandShortcut = ImageWithFallback.CommandShortcut;
-exports.ContextMenu = ImageWithFallback.ContextMenu;
-exports.ContextMenuCheckboxItem = ImageWithFallback.ContextMenuCheckboxItem;
-exports.ContextMenuContent = ImageWithFallback.ContextMenuContent;
-exports.ContextMenuGroup = ImageWithFallback.ContextMenuGroup;
-exports.ContextMenuItem = ImageWithFallback.ContextMenuItem;
-exports.ContextMenuLabel = ImageWithFallback.ContextMenuLabel;
-exports.ContextMenuPortal = ImageWithFallback.ContextMenuPortal;
-exports.ContextMenuRadioGroup = ImageWithFallback.ContextMenuRadioGroup;
-exports.ContextMenuRadioItem = ImageWithFallback.ContextMenuRadioItem;
-exports.ContextMenuSeparator = ImageWithFallback.ContextMenuSeparator;
-exports.ContextMenuShortcut = ImageWithFallback.ContextMenuShortcut;
-exports.ContextMenuSub = ImageWithFallback.ContextMenuSub;
-exports.ContextMenuSubContent = ImageWithFallback.ContextMenuSubContent;
-exports.ContextMenuSubTrigger = ImageWithFallback.ContextMenuSubTrigger;
-exports.ContextMenuTrigger = ImageWithFallback.ContextMenuTrigger;
-exports.Drawer = ImageWithFallback.Drawer;
-exports.DrawerContent = ImageWithFallback.DrawerContent;
-exports.DrawerDescription = ImageWithFallback.DrawerDescription;
-exports.DrawerFooter = ImageWithFallback.DrawerFooter;
-exports.DrawerHandle = ImageWithFallback.DrawerHandle;
-exports.DrawerHeader = ImageWithFallback.DrawerHeader;
-exports.DrawerOverlay = ImageWithFallback.DrawerOverlay;
-exports.DrawerPortal = ImageWithFallback.DrawerPortal;
-exports.DrawerTitle = ImageWithFallback.DrawerTitle;
-exports.DrawerTrigger = ImageWithFallback.DrawerTrigger;
-exports.Empty = ImageWithFallback.Empty;
-exports.EmptyAction = ImageWithFallback.EmptyAction;
-exports.EmptyDescription = ImageWithFallback.EmptyDescription;
-exports.EmptyIcon = ImageWithFallback.EmptyIcon;
-exports.EmptyImage = ImageWithFallback.EmptyImage;
-exports.EmptyTitle = ImageWithFallback.EmptyTitle;
-exports.FileUpload = ImageWithFallback.FileUpload;
-exports.Form = ImageWithFallback.Form;
-exports.FormControl = ImageWithFallback.FormControl;
-exports.FormDescription = ImageWithFallback.FormDescription;
-exports.FormField = ImageWithFallback.FormField;
-exports.FormItem = ImageWithFallback.FormItem;
-exports.FormLabel = ImageWithFallback.FormLabel;
-exports.FormMessage = ImageWithFallback.FormMessage;
-exports.HoverCard = ImageWithFallback.HoverCard;
-exports.HoverCardContent = ImageWithFallback.HoverCardContent;
-exports.HoverCardTrigger = ImageWithFallback.HoverCardTrigger;
-exports.ImageWithFallback = ImageWithFallback.ImageWithFallback;
-exports.InputOTP = ImageWithFallback.InputOTP;
-exports.InputOTPGroup = ImageWithFallback.InputOTPGroup;
-exports.InputOTPSeparator = ImageWithFallback.InputOTPSeparator;
-exports.InputOTPSlot = ImageWithFallback.InputOTPSlot;
-exports.Label = ImageWithFallback.Label;
-exports.Map = ImageWithFallback.Map;
-exports.Menubar = ImageWithFallback.Menubar;
-exports.MenubarCheckboxItem = ImageWithFallback.MenubarCheckboxItem;
-exports.MenubarContent = ImageWithFallback.MenubarContent;
-exports.MenubarGroup = ImageWithFallback.MenubarGroup;
-exports.MenubarItem = ImageWithFallback.MenubarItem;
-exports.MenubarLabel = ImageWithFallback.MenubarLabel;
-exports.MenubarMenu = ImageWithFallback.MenubarMenu;
-exports.MenubarPortal = ImageWithFallback.MenubarPortal;
-exports.MenubarRadioGroup = ImageWithFallback.MenubarRadioGroup;
-exports.MenubarRadioItem = ImageWithFallback.MenubarRadioItem;
-exports.MenubarSeparator = ImageWithFallback.MenubarSeparator;
-exports.MenubarShortcut = ImageWithFallback.MenubarShortcut;
-exports.MenubarSub = ImageWithFallback.MenubarSub;
-exports.MenubarSubContent = ImageWithFallback.MenubarSubContent;
-exports.MenubarSubTrigger = ImageWithFallback.MenubarSubTrigger;
-exports.MenubarTrigger = ImageWithFallback.MenubarTrigger;
-exports.NavigationMenu = ImageWithFallback.NavigationMenu;
-exports.NavigationMenuContent = ImageWithFallback.NavigationMenuContent;
-exports.NavigationMenuIndicator = ImageWithFallback.NavigationMenuIndicator;
-exports.NavigationMenuItem = ImageWithFallback.NavigationMenuItem;
-exports.NavigationMenuLink = ImageWithFallback.NavigationMenuLink;
-exports.NavigationMenuList = ImageWithFallback.NavigationMenuList;
-exports.NavigationMenuTrigger = ImageWithFallback.NavigationMenuTrigger;
-exports.NavigationMenuViewport = ImageWithFallback.NavigationMenuViewport;
-exports.NotificationBadge = ImageWithFallback.NotificationBadge;
-exports.PageHeader = ImageWithFallback.PageHeader;
-exports.PageHeaderDescription = ImageWithFallback.PageHeaderDescription;
-exports.PageHeaderHeading = ImageWithFallback.PageHeaderHeading;
-exports.Pagination = ImageWithFallback.Pagination;
-exports.PaginationContent = ImageWithFallback.PaginationContent;
-exports.PaginationEllipsis = ImageWithFallback.PaginationEllipsis;
-exports.PaginationItem = ImageWithFallback.PaginationItem;
-exports.PaginationLink = ImageWithFallback.PaginationLink;
-exports.PaginationNext = ImageWithFallback.PaginationNext;
-exports.PaginationPrevious = ImageWithFallback.PaginationPrevious;
-exports.Progress = ImageWithFallback.Progress;
-exports.RadioGroup = ImageWithFallback.RadioGroup;
-exports.RadioGroupItem = ImageWithFallback.RadioGroupItem;
-exports.Rating = ImageWithFallback.Rating;
-exports.ResizableHandle = ImageWithFallback.ResizableHandle;
-exports.ResizablePanel = ImageWithFallback.ResizablePanel;
-exports.ResizablePanelGroup = ImageWithFallback.ResizablePanelGroup;
-exports.RouteMap = ImageWithFallback.RouteMap;
-exports.Search = ImageWithFallback.Search;
-exports.Separator = ImageWithFallback.Separator;
-exports.Sheet = ImageWithFallback.Sheet;
-exports.SheetContent = ImageWithFallback.SheetContent;
-exports.SheetDescription = ImageWithFallback.SheetDescription;
-exports.SheetFooter = ImageWithFallback.SheetFooter;
-exports.SheetHeader = ImageWithFallback.SheetHeader;
-exports.SheetPortal = ImageWithFallback.SheetPortal;
-exports.SheetTitle = ImageWithFallback.SheetTitle;
-exports.SheetTrigger = ImageWithFallback.SheetTrigger;
-exports.SimpleMap = ImageWithFallback.SimpleMap;
-exports.Skeleton = ImageWithFallback.Skeleton;
-exports.StatsCard = ImageWithFallback.StatsCard;
-exports.Step = ImageWithFallback.Step;
-exports.Stepper = ImageWithFallback.Stepper;
-exports.Switch = ImageWithFallback.Switch;
-exports.Tabs = ImageWithFallback.Tabs;
-exports.TabsContent = ImageWithFallback.TabsContent;
-exports.TabsList = ImageWithFallback.TabsList;
-exports.TabsTrigger = ImageWithFallback.TabsTrigger;
-exports.Timeline = ImageWithFallback.Timeline;
-exports.TimelineContent = ImageWithFallback.TimelineContent;
-exports.TimelineDescription = ImageWithFallback.TimelineDescription;
-exports.TimelineDot = ImageWithFallback.TimelineDot;
-exports.TimelineHeading = ImageWithFallback.TimelineHeading;
-exports.TimelineItem = ImageWithFallback.TimelineItem;
-exports.TimelineTime = ImageWithFallback.TimelineTime;
-exports.Toggle = ImageWithFallback.Toggle;
-exports.ToggleGroup = ImageWithFallback.ToggleGroup;
-exports.ToggleGroupItem = ImageWithFallback.ToggleGroupItem;
-exports.TreeView = ImageWithFallback.TreeView;
-exports.badgeVariants = ImageWithFallback.badgeVariants;
-exports.navigationMenuTriggerStyle = ImageWithFallback.navigationMenuTriggerStyle;
-exports.toggleVariants = ImageWithFallback.toggleVariants;
-exports.useFormField = ImageWithFallback.useFormField;
-exports.useIsMobile = ImageWithFallback.useIsMobile;
-exports.useMobile = ImageWithFallback.useMobile;
-exports.useStepper = ImageWithFallback.useStepper;
+exports.Accordion = useMobile.Accordion;
+exports.AccordionContent = useMobile.AccordionContent;
+exports.AccordionItem = useMobile.AccordionItem;
+exports.AccordionTrigger = useMobile.AccordionTrigger;
+exports.Alert = useMobile.Alert;
+exports.AlertDescription = useMobile.AlertDescription;
+exports.AlertDialog = useMobile.AlertDialog;
+exports.AlertDialogAction = useMobile.AlertDialogAction;
+exports.AlertDialogCancel = useMobile.AlertDialogCancel;
+exports.AlertDialogContent = useMobile.AlertDialogContent;
+exports.AlertDialogDescription = useMobile.AlertDialogDescription;
+exports.AlertDialogFooter = useMobile.AlertDialogFooter;
+exports.AlertDialogHeader = useMobile.AlertDialogHeader;
+exports.AlertDialogOverlay = useMobile.AlertDialogOverlay;
+exports.AlertDialogPortal = useMobile.AlertDialogPortal;
+exports.AlertDialogTitle = useMobile.AlertDialogTitle;
+exports.AlertDialogTrigger = useMobile.AlertDialogTrigger;
+exports.AlertTitle = useMobile.AlertTitle;
+exports.AspectRatio = useMobile.AspectRatio;
+exports.AssistantChart = useMobile.AssistantChart;
+exports.Badge = useMobile.Badge;
+exports.Calendar = useMobile.Calendar;
+exports.Card = useMobile.Card;
+exports.CardAction = useMobile.CardAction;
+exports.CardContent = useMobile.CardContent;
+exports.CardDescription = useMobile.CardDescription;
+exports.CardFooter = useMobile.CardFooter;
+exports.CardHeader = useMobile.CardHeader;
+exports.CardTitle = useMobile.CardTitle;
+exports.Carousel = useMobile.Carousel;
+exports.CarouselContent = useMobile.CarouselContent;
+exports.CarouselItem = useMobile.CarouselItem;
+exports.CarouselNext = useMobile.CarouselNext;
+exports.CarouselPrevious = useMobile.CarouselPrevious;
+exports.Checkbox = useMobile.Checkbox;
+exports.Collapsible = useMobile.Collapsible;
+exports.CollapsibleContent = useMobile.CollapsibleContent;
+exports.CollapsibleTrigger = useMobile.CollapsibleTrigger;
+exports.Command = useMobile.Command;
+exports.CommandDialog = useMobile.CommandDialog;
+exports.CommandEmpty = useMobile.CommandEmpty;
+exports.CommandGroup = useMobile.CommandGroup;
+exports.CommandInput = useMobile.CommandInput;
+exports.CommandItem = useMobile.CommandItem;
+exports.CommandList = useMobile.CommandList;
+exports.CommandSeparator = useMobile.CommandSeparator;
+exports.CommandShortcut = useMobile.CommandShortcut;
+exports.ContextMenu = useMobile.ContextMenu;
+exports.ContextMenuCheckboxItem = useMobile.ContextMenuCheckboxItem;
+exports.ContextMenuContent = useMobile.ContextMenuContent;
+exports.ContextMenuGroup = useMobile.ContextMenuGroup;
+exports.ContextMenuItem = useMobile.ContextMenuItem;
+exports.ContextMenuLabel = useMobile.ContextMenuLabel;
+exports.ContextMenuPortal = useMobile.ContextMenuPortal;
+exports.ContextMenuRadioGroup = useMobile.ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = useMobile.ContextMenuRadioItem;
+exports.ContextMenuSeparator = useMobile.ContextMenuSeparator;
+exports.ContextMenuShortcut = useMobile.ContextMenuShortcut;
+exports.ContextMenuSub = useMobile.ContextMenuSub;
+exports.ContextMenuSubContent = useMobile.ContextMenuSubContent;
+exports.ContextMenuSubTrigger = useMobile.ContextMenuSubTrigger;
+exports.ContextMenuTrigger = useMobile.ContextMenuTrigger;
+exports.Drawer = useMobile.Drawer;
+exports.DrawerContent = useMobile.DrawerContent;
+exports.DrawerDescription = useMobile.DrawerDescription;
+exports.DrawerFooter = useMobile.DrawerFooter;
+exports.DrawerHandle = useMobile.DrawerHandle;
+exports.DrawerHeader = useMobile.DrawerHeader;
+exports.DrawerOverlay = useMobile.DrawerOverlay;
+exports.DrawerPortal = useMobile.DrawerPortal;
+exports.DrawerTitle = useMobile.DrawerTitle;
+exports.DrawerTrigger = useMobile.DrawerTrigger;
+exports.Empty = useMobile.Empty;
+exports.EmptyAction = useMobile.EmptyAction;
+exports.EmptyDescription = useMobile.EmptyDescription;
+exports.EmptyIcon = useMobile.EmptyIcon;
+exports.EmptyImage = useMobile.EmptyImage;
+exports.EmptyTitle = useMobile.EmptyTitle;
+exports.FileUpload = useMobile.FileUpload;
+exports.Form = useMobile.Form;
+exports.FormControl = useMobile.FormControl;
+exports.FormDescription = useMobile.FormDescription;
+exports.FormField = useMobile.FormField;
+exports.FormItem = useMobile.FormItem;
+exports.FormLabel = useMobile.FormLabel;
+exports.FormMessage = useMobile.FormMessage;
+exports.HoverCard = useMobile.HoverCard;
+exports.HoverCardContent = useMobile.HoverCardContent;
+exports.HoverCardTrigger = useMobile.HoverCardTrigger;
+exports.ImageWithFallback = useMobile.ImageWithFallback;
+exports.InputOTP = useMobile.InputOTP;
+exports.InputOTPGroup = useMobile.InputOTPGroup;
+exports.InputOTPSeparator = useMobile.InputOTPSeparator;
+exports.InputOTPSlot = useMobile.InputOTPSlot;
+exports.Label = useMobile.Label;
+exports.Map = useMobile.Map;
+exports.Menubar = useMobile.Menubar;
+exports.MenubarCheckboxItem = useMobile.MenubarCheckboxItem;
+exports.MenubarContent = useMobile.MenubarContent;
+exports.MenubarGroup = useMobile.MenubarGroup;
+exports.MenubarItem = useMobile.MenubarItem;
+exports.MenubarLabel = useMobile.MenubarLabel;
+exports.MenubarMenu = useMobile.MenubarMenu;
+exports.MenubarPortal = useMobile.MenubarPortal;
+exports.MenubarRadioGroup = useMobile.MenubarRadioGroup;
+exports.MenubarRadioItem = useMobile.MenubarRadioItem;
+exports.MenubarSeparator = useMobile.MenubarSeparator;
+exports.MenubarShortcut = useMobile.MenubarShortcut;
+exports.MenubarSub = useMobile.MenubarSub;
+exports.MenubarSubContent = useMobile.MenubarSubContent;
+exports.MenubarSubTrigger = useMobile.MenubarSubTrigger;
+exports.MenubarTrigger = useMobile.MenubarTrigger;
+exports.NavigationMenu = useMobile.NavigationMenu;
+exports.NavigationMenuContent = useMobile.NavigationMenuContent;
+exports.NavigationMenuIndicator = useMobile.NavigationMenuIndicator;
+exports.NavigationMenuItem = useMobile.NavigationMenuItem;
+exports.NavigationMenuLink = useMobile.NavigationMenuLink;
+exports.NavigationMenuList = useMobile.NavigationMenuList;
+exports.NavigationMenuTrigger = useMobile.NavigationMenuTrigger;
+exports.NavigationMenuViewport = useMobile.NavigationMenuViewport;
+exports.NotificationBadge = useMobile.NotificationBadge;
+exports.PageHeader = useMobile.PageHeader;
+exports.PageHeaderDescription = useMobile.PageHeaderDescription;
+exports.PageHeaderHeading = useMobile.PageHeaderHeading;
+exports.Pagination = useMobile.Pagination;
+exports.PaginationContent = useMobile.PaginationContent;
+exports.PaginationEllipsis = useMobile.PaginationEllipsis;
+exports.PaginationItem = useMobile.PaginationItem;
+exports.PaginationLink = useMobile.PaginationLink;
+exports.PaginationNext = useMobile.PaginationNext;
+exports.PaginationPrevious = useMobile.PaginationPrevious;
+exports.Progress = useMobile.Progress;
+exports.RadioGroup = useMobile.RadioGroup;
+exports.RadioGroupItem = useMobile.RadioGroupItem;
+exports.Rating = useMobile.Rating;
+exports.ResizableHandle = useMobile.ResizableHandle;
+exports.ResizablePanel = useMobile.ResizablePanel;
+exports.ResizablePanelGroup = useMobile.ResizablePanelGroup;
+exports.RouteMap = useMobile.RouteMap;
+exports.Search = useMobile.Search;
+exports.Separator = useMobile.Separator;
+exports.Sheet = useMobile.Sheet;
+exports.SheetContent = useMobile.SheetContent;
+exports.SheetDescription = useMobile.SheetDescription;
+exports.SheetFooter = useMobile.SheetFooter;
+exports.SheetHeader = useMobile.SheetHeader;
+exports.SheetPortal = useMobile.SheetPortal;
+exports.SheetTitle = useMobile.SheetTitle;
+exports.SheetTrigger = useMobile.SheetTrigger;
+exports.SimpleMap = useMobile.SimpleMap;
+exports.Skeleton = useMobile.Skeleton;
+exports.StatsCard = useMobile.StatsCard;
+exports.Step = useMobile.Step;
+exports.Stepper = useMobile.Stepper;
+exports.Switch = useMobile.Switch;
+exports.Tabs = useMobile.Tabs;
+exports.TabsContent = useMobile.TabsContent;
+exports.TabsList = useMobile.TabsList;
+exports.TabsTrigger = useMobile.TabsTrigger;
+exports.Timeline = useMobile.Timeline;
+exports.TimelineContent = useMobile.TimelineContent;
+exports.TimelineDescription = useMobile.TimelineDescription;
+exports.TimelineDot = useMobile.TimelineDot;
+exports.TimelineHeading = useMobile.TimelineHeading;
+exports.TimelineItem = useMobile.TimelineItem;
+exports.TimelineTime = useMobile.TimelineTime;
+exports.Toggle = useMobile.Toggle;
+exports.ToggleGroup = useMobile.ToggleGroup;
+exports.ToggleGroupItem = useMobile.ToggleGroupItem;
+exports.TreeView = useMobile.TreeView;
+exports.badgeVariants = useMobile.badgeVariants;
+exports.navigationMenuTriggerStyle = useMobile.navigationMenuTriggerStyle;
+exports.toggleVariants = useMobile.toggleVariants;
+exports.useFormField = useMobile.useFormField;
+exports.useIsMobile = useMobile.useIsMobile;
+exports.useMobile = useMobile.useMobile;
+exports.useStepper = useMobile.useStepper;
 exports.Select = select.Select;
 exports.SelectContent = select.SelectContent;
 exports.SelectGroup = select.SelectGroup;
@@ -2298,6 +3041,10 @@ exports.Textarea = richTextEditor.Textarea;
 exports.Slider = slider.Slider;
 exports.LayoutProvider = LayoutContext.LayoutProvider;
 exports.useLayout = LayoutContext.useLayout;
+exports.LanguageSelector = LanguageSelector.LanguageSelector;
+exports.ThemeToggle = LanguageSelector.ThemeToggle;
+exports.XerticaLogo = LanguageSelector.XerticaLogo;
+exports.XerticaXLogo = LanguageSelector.XerticaXLogo;
 exports.Avatar = breadcrumb.Avatar;
 exports.AvatarFallback = breadcrumb.AvatarFallback;
 exports.AvatarImage = breadcrumb.AvatarImage;
@@ -2327,12 +3074,14 @@ exports.Toaster = sonner.Toaster;
 exports.GoogleMapsLoaderProvider = googleMapsLoader.GoogleMapsLoaderProvider;
 exports.reloadGoogleMaps = googleMapsLoader.reloadGoogleMaps;
 exports.useGoogleMapsLoader = googleMapsLoader.useGoogleMapsLoader;
-exports.LanguageSelector = LanguageSelector.LanguageSelector;
-exports.ThemeToggle = LanguageSelector.ThemeToggle;
-exports.XerticaLogo = LanguageSelector.XerticaLogo;
-exports.XerticaXLogo = LanguageSelector.XerticaXLogo;
 exports.XerticaOrbe = XerticaOrbe.XerticaOrbe;
 exports.AudioPlayer = AudioPlayer.AudioPlayer;
 exports.FloatingMediaWrapper = AudioPlayer.FloatingMediaWrapper;
 exports.VideoPlayer = AudioPlayer.VideoPlayer;
+exports.ForgotPasswordPage = ForgotPasswordPage;
+exports.HomeContent = HomeContent;
+exports.HomePage = HomePage;
+exports.LoginPage = LoginPage;
+exports.ResetPasswordPage = ResetPasswordPage;
 exports.TemplatePage = TemplatePage;
+exports.VerifyEmailPage = VerifyEmailPage;