xertica-ui 2.7.0 → 2.9.6

package/dist/VerifyEmailPage-D2ShbuEN.cjs

@@ -0,0 +1,3333 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const button = require('./button-DVhloDtr.cjs');
+const input = require('./input-Dqyj7Hdw.cjs');
+const alertDialog = require('./alert-dialog--qdlmB5i.cjs');
+const ThemeToggle = require('./ThemeToggle-D2Wzm5bn.cjs');
+const MarketingFooter = require('./MarketingFooter-DCwf78Q4.cjs');
+const reactI18next = require('react-i18next');
+const lucideReact = require('lucide-react');
+const reactRouterDom = require('react-router-dom');
+const sidebar = require('./sidebar-CuzYeOSz.cjs');
+const skeleton = require('./skeleton-DBYtjaZW.cjs');
+const ImageWithFallback = require('./ImageWithFallback-CBrkAEo3.cjs');
+require('clsx');
+require('tailwind-merge');
+const IsotypeDiagonal = require('./IsotypeDiagonal-eNcOXRAc.cjs');
+const LayoutContext = require('./LayoutContext-BEq_-n98.cjs');
+const LanguageContext = require('./LanguageContext-CChcIHIG.cjs');
+const reactQuery = require('@tanstack/react-query');
+const xerticaAssistant = require('./xertica-assistant-DN2J_sQQ.cjs');
+const i18n = require('i18next');
+const IsotypeFrames = require('./IsotypeFrames-BcWtyAWp.cjs');
+const avatar = require('./avatar-Gy0_Xu9i.cjs');
+const richTextEditor = require('./rich-text-editor-B3jLP2bm.cjs');
+const select = require('./select-B6PygS38.cjs');
+const slider = require('./slider-B_lUjFNa.cjs');
+const sonner = require('sonner');
+const ThemeContext = require('./ThemeContext-CEY9pCn-.cjs');
+const zustand = require('zustand');
+
+function ForgotPasswordPage() {
+  const navigate = reactRouterDom.useNavigate();
+  const { t } = reactI18next.useTranslation();
+  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(
+    MarketingFooter.AuthPageShell,
+    {
+      imageSrc: "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop&auto=format",
+      imageAlt: t("forgotPassword.heroImageAlt"),
+      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(ThemeToggle.XerticaLogo, { className: "h-12 w-auto text-primary dark:text-foreground", variant: "theme" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm text-muted-foreground", children: t("forgotPassword.heading") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: t("forgotPassword.subheading") })
+        ] }),
+        /* @__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(alertDialog.Label, { htmlFor: "email", children: t("forgotPassword.emailLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.Input,
+              {
+                id: "email",
+                name: "email",
+                type: "email",
+                required: true,
+                className: "w-full",
+                placeholder: t("forgotPassword.emailPlaceholder"),
+                value: email,
+                onChange: (e) => setEmail(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("forgotPassword.submitting") : t("forgotPassword.submit") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              button.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" }),
+                  t("forgotPassword.backToLogin")
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarketingFooter.SocialLoginButtons, { onSocialLogin: handleSocialLogin })
+      ]
+    }
+  );
+}
+
+const SIDEBAR_COLLAPSED_WIDTH = 80;
+
+const t = (key, options) => i18n.t(key, options);
+const MOCK_TEAM_MEMBERS = [
+  {
+    id: "1",
+    name: "Ana Silva",
+    email: "ana.silva@example.com",
+    role: "Developer",
+    status: "active"
+  },
+  {
+    id: "2",
+    name: "Bruno Costa",
+    email: "bruno.costa@example.com",
+    role: "Designer",
+    status: "active"
+  },
+  {
+    id: "3",
+    name: "Carla Oliveira",
+    email: "carla.oliveira@example.com",
+    role: "Manager",
+    status: "away"
+  },
+  {
+    id: "4",
+    name: "Diego Santos",
+    email: "diego.santos@example.com",
+    role: "Analyst",
+    status: "inactive"
+  }
+];
+async function fetchTeamMembers() {
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  return MOCK_TEAM_MEMBERS;
+}
+async function fetchFeatureCards() {
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  return [
+    {
+      id: "template-cli",
+      title: t("home.templateCliTitle"),
+      description: t("home.templateCliDescription"),
+      badge: t("home.templateClibadge"),
+      href: "/template"
+    }
+  ];
+}
+
+function useTeamMembers() {
+  const { language } = LanguageContext.useLanguage();
+  return reactQuery.useQuery({
+    // Language is part of the key so each locale has its own cache slot.
+    queryKey: ["home", "team-members", language],
+    queryFn: fetchTeamMembers,
+    staleTime: 2 * 60 * 1e3
+    // 2 min
+  });
+}
+
+function useFeatureCards() {
+  const { language } = LanguageContext.useLanguage();
+  return reactQuery.useQuery({
+    // Language is part of the key so each locale has its own cache slot.
+    queryKey: ["home", "feature-cards", language],
+    queryFn: fetchFeatureCards,
+    staleTime: 10 * 60 * 1e3
+    // 10 min — feature list is fairly static
+  });
+}
+
+const useDashboardStore = zustand.create((set) => ({
+  // Filters
+  activeTab: "overview",
+  setActiveTab: (tab) => set({ activeTab: tab }),
+  // UI toggles
+  statsExpanded: true,
+  toggleStats: () => set((state) => ({ statsExpanded: !state.statsExpanded })),
+  // Showcase controls
+  progress: 45,
+  setProgress: (value) => set({ progress: value }),
+  sliderValue: [50],
+  setSliderValue: (value) => set({ sliderValue: value }),
+  switchEnabled: false,
+  toggleSwitch: () => set((state) => ({ switchEnabled: !state.switchEnabled }))
+}));
+
+function isDev() {
+  return false;
+}
+function SectionErrorFallback({ error, reset }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "alert",
+      className: "flex flex-col items-center justify-center gap-3 p-6 rounded-[var(--radius-lg)] border border-destructive/30 bg-destructive/5 text-center",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-destructive shrink-0",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Não foi possível carregar este conteúdo" }),
+          isDev()
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: reset,
+            className: "inline-flex items-center px-3 py-1.5 text-xs rounded-[var(--radius-button)] border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+            children: "Tentar novamente"
+          }
+        )
+      ]
+    }
+  );
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+    this.reset = this.reset.bind(this);
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  componentDidUpdate(prevProps) {
+    if (!this.state.hasError) return;
+    const { resetKeys } = this.props;
+    if (!resetKeys?.length) return;
+    const prevKeys = prevProps.resetKeys ?? [];
+    const changed = resetKeys.some((key, i) => key !== prevKeys[i]);
+    if (changed) this.reset();
+  }
+  reset() {
+    this.setState({ hasError: false, error: null });
+  }
+  render() {
+    const { hasError, error } = this.state;
+    const { children, fallback: Fallback } = this.props;
+    if (hasError && error) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Fallback, { error, reset: this.reset });
+    }
+    return children;
+  }
+}
+function SectionErrorBoundary({ children, onError, resetKeys }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { fallback: SectionErrorFallback, onError, resetKeys, children });
+}
+
+function HomeContent() {
+  const { t } = reactI18next.useTranslation();
+  const layout = LayoutContext.useOptionalLayout();
+  const sidebarExpanded = layout?.sidebarExpanded ?? false;
+  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const navigate = reactRouterDom.useNavigate();
+  const { data: featureCards = [], isLoading } = useFeatureCards();
+  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(
+          sidebar.Header,
+          {
+            showThemeToggle: true,
+            showLanguageSelector: true,
+            breadcrumbs: [{ label: t("nav.designSystem"), href: "/home" }, { label: t("nav.home") }],
+            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("div", { className: "h-full", style: { overflowY: "auto", overflowX: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 sm:p-4 md:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IsotypeDiagonal.IsotypeDiagonal, { className: "w-14 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.PageHeader,
+              {
+                title: t("home.welcome"),
+                subtitle: t("home.subtitle"),
+                className: "flex-1"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SectionErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MarketingFooter.FeatureCardSkeleton, { showAction: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(MarketingFooter.FeatureCardSkeleton, { showAction: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(MarketingFooter.FeatureCardSkeleton, { showAction: true })
+          ] }) : featureCards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs(
+            skeleton.Card,
+            {
+              className: "hover:shadow-xl transition-shadow duration-200 flex flex-col h-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.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(skeleton.CardTitle, { className: "text-sm", children: t(`home.${card.id.replace(/-/g, "")}Title`, {
+                      defaultValue: card.title
+                    }) }),
+                    card.badge && /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "default", className: "text-xs", children: t(`home.${card.id.replace(/-/g, "")}badge`, {
+                      defaultValue: card.badge
+                    }) })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: t(`home.${card.id.replace(/-/g, "")}Description`, {
+                  defaultValue: card.description
+                }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "outline",
+                    className: "w-full",
+                    onClick: () => navigate(card.href),
+                    children: t("common.view")
+                  }
+                ) })
+              ]
+            },
+            card.id
+          )) }) })
+        ] }) }) }) })
+      ]
+    }
+  );
+}
+
+const routes = [
+  { path: "/home", label: "Home", icon: lucideReact.Home },
+  { path: "/template", label: "Template", icon: lucideReact.FileText }
+];
+
+const AuthContext = React.createContext(null);
+function useAuth() {
+  const ctx = React.useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within <AuthProvider>");
+  return ctx;
+}
+
+async function fetchAssistantConfig() {
+  await new Promise((resolve) => setTimeout(resolve, 150));
+  const t = (key) => i18n.t(key);
+  return {
+    suggestions: [
+      { id: "1", text: t("assistant.suggestions.whatCanIAsk") },
+      { id: "2", text: t("assistant.suggestions.whatDoYouDo") },
+      { id: "3", text: t("assistant.suggestions.whichProjects") },
+      { id: "4", text: t("assistant.suggestions.nextProject") }
+    ],
+    richSuggestions: [
+      { id: "rich-1", text: t("assistant.richSuggestions.viewPerformance") },
+      { id: "rich-2", text: t("assistant.richSuggestions.generateReport") },
+      { id: "rich-3", text: t("assistant.richSuggestions.createDocument") },
+      { id: "rich-4", text: t("assistant.richSuggestions.generatePodcast") }
+    ],
+    feedbackOptions: [
+      t("assistant.feedback.notWhatIWanted"),
+      t("assistant.feedback.incorrectInfo"),
+      t("assistant.feedback.incompleteAnswer")
+    ]
+  };
+}
+function getMockRichSuggestions() {
+  return [
+    { id: "rich-1", text: i18n.t("assistant.richSuggestions.viewPerformance") },
+    { id: "rich-2", text: i18n.t("assistant.richSuggestions.generateReport") },
+    { id: "rich-3", text: i18n.t("assistant.richSuggestions.createDocument") },
+    { id: "rich-4", text: i18n.t("assistant.richSuggestions.generatePodcast") }
+  ];
+}
+function getMockFeedbackOptions() {
+  return [
+    i18n.t("assistant.feedback.notWhatIWanted"),
+    i18n.t("assistant.feedback.incorrectInfo"),
+    i18n.t("assistant.feedback.incompleteAnswer")
+  ];
+}
+
+function useAssistantConfig() {
+  const { language } = LanguageContext.useLanguage();
+  return reactQuery.useQuery({
+    // Language is part of the key so each locale has its own cache slot.
+    queryKey: ["assistant", "config", language],
+    queryFn: fetchAssistantConfig,
+    staleTime: 30 * 60 * 1e3
+    // 30 min — config rarely changes
+  });
+}
+
+function HomePage() {
+  const { user, logout } = useAuth();
+  const layout = LayoutContext.useOptionalLayout();
+  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
+  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
+  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
+  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
+  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded((value) => !value));
+  const toggleAssistente = layout?.toggleAssistente ?? (() => setLocalAssistantExpanded((value) => !value));
+  const location = reactRouterDom.useLocation();
+  const navigate = reactRouterDom.useNavigate();
+  const { data: assistantConfig } = useAssistantConfig();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-screen flex bg-muted overflow-hidden relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      sidebar.Sidebar,
+      {
+        expanded: sidebarExpanded,
+        width: sidebarWidth,
+        onToggle: toggleSidebar,
+        user: {
+          ...user,
+          name: "Ariel Santos",
+          avatar: "https://github.com/shadcn.png"
+        },
+        onLogout: logout,
+        onSettingsClick: () => navigate("/settings"),
+        location,
+        navigate,
+        routes
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(HomeContent, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      xerticaAssistant.XerticaAssistant,
+      {
+        isExpanded: assistenteExpanded,
+        onToggle: toggleAssistente,
+        defaultTab: "chat",
+        demoMode: true,
+        responseGenerator: xerticaAssistant.gerarResposta,
+        suggestions: assistantConfig?.suggestions,
+        richSuggestions: assistantConfig?.richSuggestions ?? getMockRichSuggestions(),
+        feedbackOptions: assistantConfig?.feedbackOptions ?? getMockFeedbackOptions(),
+        onEvaluation: () => {
+        }
+      }
+    )
+  ] });
+}
+
+function LandingPage() {
+  const { t } = reactI18next.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full overflow-y-auto bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.MarketingNavbar,
+      {
+        logo: /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle.XerticaLogo, { className: "h-8 w-auto text-primary dark:text-foreground", variant: "theme" }),
+        links: [
+          { label: t("landing.nav.product"), href: "#" },
+          { label: t("landing.nav.resources"), href: "#" },
+          { label: t("landing.nav.pricing"), href: "#" },
+          { label: t("landing.nav.contact"), href: "#" }
+        ],
+        cta: { label: t("landing.nav.login"), href: "#" },
+        openMenuLabel: t("landing.nav.openMenu"),
+        closeMenuLabel: t("landing.nav.closeMenu")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.Hero,
+      {
+        decorative: true,
+        eyebrow: { label: t("landing.hero.eyebrow"), icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, {}) },
+        title: t("landing.hero.title"),
+        description: t("landing.hero.description"),
+        primaryCta: { label: t("landing.hero.primaryCta"), href: "#" },
+        secondaryCta: { label: t("landing.hero.secondaryCta"), href: "#" },
+        visual: /* @__PURE__ */ jsxRuntime.jsx(IsotypeDiagonal.IsotypeDiagonal, { className: "mx-auto w-full max-w-md" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "space-y-6 pt-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg leading-relaxed text-foreground", children: [
+          "“",
+          t("landing.testimonial.quote"),
+          "”"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(avatar.Avatar, { children: /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { children: "MF" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: t("landing.testimonial.authorName") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t("landing.testimonial.authorRole") })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MarketingFooter.StatBand,
+        {
+          stats: [
+            { value: "80+", label: t("landing.stats.components"), color: "primary" },
+            { value: "10", label: t("landing.stats.themes"), color: "chart-2" },
+            { value: "25k+", label: t("landing.stats.downloads"), color: "chart-4" }
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24", children: /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.ServiceCardGrid,
+      {
+        variant: "card",
+        columns: 4,
+        items: [
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, {}),
+            color: "primary",
+            title: t("landing.pillars.tokens.title"),
+            description: t("landing.pillars.tokens.description"),
+            className: "border"
+          },
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, {}),
+            color: "chart-2",
+            title: t("landing.pillars.accessible.title"),
+            description: t("landing.pillars.accessible.description"),
+            className: "border"
+          },
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Blocks, {}),
+            color: "chart-1",
+            title: t("landing.pillars.blocks.title"),
+            description: t("landing.pillars.blocks.description"),
+            className: "border"
+          },
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Terminal, {}),
+            color: "chart-4",
+            title: t("landing.pillars.cli.title"),
+            description: t("landing.pillars.cli.description"),
+            className: "border"
+          }
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.FeatureRow,
+      {
+        eyebrow: t("landing.features.theming.eyebrow"),
+        title: t("landing.features.theming.title"),
+        description: t("landing.features.theming.description"),
+        bullets: [
+          t("landing.features.theming.bullet1"),
+          t("landing.features.theming.bullet2"),
+          t("landing.features.theming.bullet3")
+        ],
+        visual: /* @__PURE__ */ jsxRuntime.jsx(IsotypeFrames.IsotypeFrames, { variant: "blue-magenta", className: "mx-auto w-full max-w-md" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.FeatureRow,
+      {
+        tone: "muted",
+        reverse: true,
+        eyebrow: t("landing.features.composition.eyebrow"),
+        title: t("landing.features.composition.title"),
+        description: t("landing.features.composition.description"),
+        bullets: [
+          t("landing.features.composition.bullet1"),
+          t("landing.features.composition.bullet2"),
+          t("landing.features.composition.bullet3")
+        ],
+        visual: /* @__PURE__ */ jsxRuntime.jsx(IsotypeDiagonal.IsotypeDiagonal, { className: "mx-auto w-full max-w-md" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.FeatureRow,
+      {
+        reverse: true,
+        eyebrow: t("landing.features.onboarding.eyebrow"),
+        title: t("landing.features.onboarding.title"),
+        description: t("landing.features.onboarding.description"),
+        bullets: [
+          t("landing.features.onboarding.bullet1"),
+          t("landing.features.onboarding.bullet2"),
+          t("landing.features.onboarding.bullet3")
+        ],
+        visual: /* @__PURE__ */ jsxRuntime.jsx(IsotypeFrames.IsotypeFrames, { variant: "magenta-yellow", className: "mx-auto w-full max-w-md" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "bg-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 max-w-2xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("landing.ecosystem.eyebrow") }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mt-2 text-2xl font-bold text-foreground md:text-3xl", children: t("landing.ecosystem.title") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MarketingFooter.ServiceCardGrid,
+        {
+          variant: "card",
+          columns: 4,
+          items: [
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Figma, {}),
+              color: "primary",
+              title: t("landing.ecosystem.figma.title"),
+              description: t("landing.ecosystem.figma.description"),
+              bullets: [
+                t("landing.ecosystem.figma.bullet1"),
+                t("landing.ecosystem.figma.bullet2")
+              ]
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode2, {}),
+              color: "chart-1",
+              title: t("landing.ecosystem.vscode.title"),
+              description: t("landing.ecosystem.vscode.description"),
+              bullets: [
+                t("landing.ecosystem.vscode.bullet1"),
+                t("landing.ecosystem.vscode.bullet2")
+              ]
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Component, {}),
+              color: "chart-5",
+              title: t("landing.ecosystem.storybook.title"),
+              description: t("landing.ecosystem.storybook.description"),
+              bullets: [
+                t("landing.ecosystem.storybook.bullet1"),
+                t("landing.ecosystem.storybook.bullet2")
+              ]
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Github, {}),
+              color: "chart-2",
+              title: t("landing.ecosystem.github.title"),
+              description: t("landing.ecosystem.github.description"),
+              bullets: [
+                t("landing.ecosystem.github.bullet1"),
+                t("landing.ecosystem.github.bullet2")
+              ]
+            }
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "bg-sidebar text-sidebar-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8 md:py-24", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 max-w-2xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-sidebar-foreground/70", children: t("landing.methodology.eyebrow") }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mt-2 text-2xl font-bold md:text-3xl", children: t("landing.methodology.title") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MarketingFooter.EvidenceTimeline,
+        {
+          items: [
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SwatchBook, {}),
+              title: t("landing.methodology.tokensFirst.title"),
+              description: t("landing.methodology.tokensFirst.description"),
+              color: "chart-1"
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, {}),
+              title: t("landing.methodology.primitives.title"),
+              description: t("landing.methodology.primitives.description"),
+              color: "chart-2"
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, {}),
+              title: t("landing.methodology.compositionBlocks.title"),
+              description: t("landing.methodology.compositionBlocks.description"),
+              color: "chart-3"
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareTerminal, {}),
+              title: t("landing.methodology.cliTemplates.title"),
+              description: t("landing.methodology.cliTemplates.description"),
+              color: "chart-4"
+            }
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 max-w-2xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("landing.useCases.eyebrow") }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mt-2 text-2xl font-bold text-foreground md:text-3xl", children: t("landing.useCases.title") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MarketingFooter.ServiceCardGrid,
+        {
+          variant: "card",
+          columns: 3,
+          items: [
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShoppingCart, {}),
+              color: "chart-2",
+              title: t("landing.useCases.ecommerce.title"),
+              description: t("landing.useCases.ecommerce.description"),
+              checklist: [
+                t("landing.useCases.ecommerce.check1"),
+                t("landing.useCases.ecommerce.check2")
+              ],
+              className: "border"
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {}),
+              color: "primary",
+              title: t("landing.useCases.saas.title"),
+              description: t("landing.useCases.saas.description"),
+              checklist: [t("landing.useCases.saas.check1"), t("landing.useCases.saas.check2")],
+              className: "border"
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Landmark, {}),
+              color: "chart-4",
+              title: t("landing.useCases.fintech.title"),
+              description: t("landing.useCases.fintech.description"),
+              checklist: [
+                t("landing.useCases.fintech.check1"),
+                t("landing.useCases.fintech.check2")
+              ],
+              className: "border"
+            }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "mx-auto max-w-7xl space-y-12 px-4 py-16 sm:px-6 lg:px-8 md:py-24", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MarketingFooter.ComplianceBadgeRow,
+        {
+          badges: [
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, {}),
+              label: t("landing.compliance.wcag.label"),
+              description: t("landing.compliance.wcag.description")
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, {}),
+              label: t("landing.compliance.typescript.label"),
+              description: t("landing.compliance.typescript.description")
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, {}),
+              label: t("landing.compliance.treeShakeable.label"),
+              description: t("landing.compliance.treeShakeable.description")
+            },
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, {}),
+              label: t("landing.compliance.themeable.label"),
+              description: t("landing.compliance.themeable.description")
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MarketingFooter.StatBand,
+        {
+          columns: 3,
+          stats: [
+            { value: "99.9%", label: t("landing.stats.docsUptime"), color: "success" },
+            { value: "<24h", label: t("landing.stats.avgResponseTime"), color: "info" },
+            { value: "100%", label: t("landing.stats.typedComponents"), color: "chart-5" }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:px-8 md:pb-24", children: /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.CTASection,
+      {
+        title: t("landing.cta.title"),
+        description: t("landing.cta.description"),
+        cta: { label: t("landing.cta.primary"), href: "#" },
+        secondaryCta: { label: t("landing.cta.secondary"), href: "#" }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MarketingFooter.MarketingFooter,
+      {
+        logo: /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle.XerticaLogo, { className: "h-8 w-auto text-primary dark:text-foreground", variant: "theme" }),
+        tagline: t("landing.footer.tagline"),
+        columns: [
+          {
+            heading: t("landing.footer.product.heading"),
+            links: [
+              { label: t("landing.footer.product.components"), href: "#" },
+              { label: t("landing.footer.product.blocks"), href: "#" },
+              { label: t("landing.footer.product.themes"), href: "#" }
+            ]
+          },
+          {
+            heading: t("landing.footer.resources.heading"),
+            links: [
+              { label: t("landing.footer.resources.docs"), href: "#" },
+              { label: t("landing.footer.resources.cli"), href: "#" },
+              { label: t("landing.footer.resources.changelog"), href: "#" }
+            ]
+          },
+          {
+            heading: t("landing.footer.company.heading"),
+            links: [
+              { label: t("landing.footer.company.about"), href: "#" },
+              { label: t("landing.footer.company.contact"), href: "#" },
+              { label: t("landing.footer.company.careers"), href: "#" }
+            ]
+          }
+        ],
+        copyright: t("landing.footer.copyright")
+      }
+    )
+  ] });
+}
+
+function LoginPage({ onLogin }) {
+  const navigate = reactRouterDom.useNavigate();
+  const { t } = reactI18next.useTranslation();
+  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(t("login.errorFillFields"));
+    }
+    setIsLoading(false);
+  };
+  const handleSocialLogin = (_provider) => {
+    onLogin("social@user.com", "social-auth");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(MarketingFooter.AuthPageShell, { leftPanel: "isotype", 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(ThemeToggle.XerticaLogo, { className: "h-12 w-auto text-primary dark:text-foreground", variant: "theme" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm text-muted-foreground", children: t("login.heading") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "email", children: t("login.emailLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            id: "email",
+            name: "email",
+            type: "email",
+            required: true,
+            className: "w-full",
+            placeholder: t("login.emailPlaceholder"),
+            value: email,
+            onChange: (e) => setEmail(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "password", children: t("login.passwordLabel") }),
+        /* @__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(button.Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("login.submitting") : t("login.submit") }),
+      /* @__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: t("login.forgotPassword")
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(MarketingFooter.SocialLoginButtons, { onSocialLogin: handleSocialLogin })
+  ] });
+}
+
+function ResetPasswordPage() {
+  const navigate = reactRouterDom.useNavigate();
+  const { t } = reactI18next.useTranslation();
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const passwordStrength = MarketingFooter.usePasswordStrength(password);
+  const handlePasswordChange = (value) => {
+    setPassword(value);
+    setError("");
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (password.length < 6) {
+      setError(t("resetPassword.errorMinLength"));
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError(t("resetPassword.errorMismatch"));
+      return;
+    }
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    navigate("/login", { state: { resetSuccess: true } });
+    setIsLoading(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MarketingFooter.AuthPageShell,
+    {
+      imageSrc: "https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=1200&h=800&fit=crop&auto=format",
+      imageAlt: t("resetPassword.heroImageAlt"),
+      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: t("resetPassword.backToLogin") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle.XerticaLogo, { className: "h-12 w-auto text-primary dark:text-foreground", variant: "theme" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm text-muted-foreground", children: t("resetPassword.heading") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: t("resetPassword.subheading") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "password", children: t("resetPassword.newPasswordLabel") }),
+            /* @__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)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(MarketingFooter.PasswordStrengthMeter, { strength: passwordStrength })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "confirmPassword", children: t("resetPassword.confirmPasswordLabel") }),
+            /* @__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: t("resetPassword.requirements") }),
+            /* @__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: t("resetPassword.requirementMinChars") })
+              ] }),
+              /* @__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: t("resetPassword.requirementMatch") })
+              ] })
+            ] })
+          ] }),
+          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(button.Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("resetPassword.submitting") : t("resetPassword.submit") })
+        ] })
+      ]
+    }
+  );
+}
+
+function createLucideIconSvg(iconName) {
+  const iconPaths = {
+    utensils: '<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path>',
+    hotel: '<path d="M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"></path><path d="M8 6h8"></path><path d="M8 10h8"></path><path d="M8 14h8"></path><path d="M8 18h8"></path>',
+    landmark: '<path d="m3 21 18-18"></path><path d="M9 15V6h6v9"></path><path d="M12 3v3"></path><path d="M3 15h18"></path><path d="M6 21v-6"></path><path d="M18 21v-6"></path>',
+    shopping: '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path><path d="M3 6h18"></path><path d="M16 10a4 4 0 0 1-8 0"></path>',
+    coffee: '<path d="M17 8h1a4 4 0 1 1 0 8h-1"></path><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"></path><line x1="6" x2="6" y1="2" y2="4"></line><line x1="10" x2="10" y1="2" y2="4"></line><line x1="14" x2="14" y1="2" y2="4"></line>'
+  };
+  const path = iconPaths[iconName] || "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
+}
+const markerGroups = {
+  restaurant: {
+    id: "restaurant",
+    name: "Restaurantes",
+    color: "var(--destructive)",
+    // red
+    iconColor: "#FFFFFF",
+    // white para contraste
+    iconName: "utensils",
+    icon: lucideReact.Utensils
+  },
+  hotel: {
+    id: "hotel",
+    name: "Hotéis",
+    color: "var(--info)",
+    // blue
+    iconColor: "#FFFFFF",
+    iconName: "hotel",
+    icon: lucideReact.Hotel
+  },
+  landmark: {
+    id: "landmark",
+    name: "Pontos Turísticos",
+    color: "var(--success)",
+    // green
+    iconColor: "#FFFFFF",
+    iconName: "landmark",
+    icon: lucideReact.Landmark
+  },
+  shopping: {
+    id: "shopping",
+    name: "Compras",
+    color: "var(--warning)",
+    // orange
+    iconColor: "#FFFFFF",
+    iconName: "shopping",
+    icon: lucideReact.ShoppingBag
+  },
+  cafe: {
+    id: "cafe",
+    name: "Cafeterias",
+    color: "var(--primary)",
+    // purple
+    iconColor: "#FFFFFF",
+    iconName: "coffee",
+    icon: lucideReact.Coffee
+  }
+};
+const sampleLocations = [
+  // Restaurantes
+  {
+    position: { lat: -23.5505, lng: -46.6333 },
+    title: "Restaurante Italiano",
+    info: "Melhor pizza da cidade",
+    group: "restaurant"
+  },
+  {
+    position: { lat: -23.5485, lng: -46.635 },
+    title: "Sushi Bar",
+    info: "Comida japonesa autêntica",
+    group: "restaurant"
+  },
+  {
+    position: { lat: -23.552, lng: -46.631 },
+    title: "Churrascaria Premium",
+    info: "Rodízio tradicional brasileiro",
+    group: "restaurant"
+  },
+  // Hotéis
+  {
+    position: { lat: -23.5475, lng: -46.6361 },
+    title: "Hotel Luxo",
+    info: "5 estrelas - Vista panorâmica",
+    group: "hotel"
+  },
+  {
+    position: { lat: -23.553, lng: -46.634 },
+    title: "Hotel Boutique",
+    info: "Design moderno e aconchegante",
+    group: "hotel"
+  },
+  // Pontos Turísticos
+  {
+    position: { lat: -23.5613, lng: -46.6563 },
+    title: "Parque Ibirapuera",
+    info: "Maior parque urbano da cidade",
+    group: "landmark"
+  },
+  {
+    position: { lat: -23.5558, lng: -46.6396 },
+    title: "MASP",
+    info: "Museu de Arte de São Paulo",
+    group: "landmark"
+  },
+  {
+    position: { lat: -23.5489, lng: -46.6388 },
+    title: "Avenida Paulista",
+    info: "Centro financeiro e cultural",
+    group: "landmark"
+  },
+  // Shopping
+  {
+    position: { lat: -23.5465, lng: -46.64 },
+    title: "Shopping Center",
+    info: "Mais de 300 lojas",
+    group: "shopping"
+  },
+  {
+    position: { lat: -23.554, lng: -46.638 },
+    title: "Galeria de Arte",
+    info: "Arte contemporânea e design",
+    group: "shopping"
+  },
+  // Cafeterias
+  {
+    position: { lat: -23.5495, lng: -46.6345 },
+    title: "Café Artesanal",
+    info: "Café especial e brunch",
+    group: "cafe"
+  },
+  {
+    position: { lat: -23.551, lng: -46.637 },
+    title: "Coffee House",
+    info: "Café gourmet e wi-fi",
+    group: "cafe"
+  },
+  {
+    position: { lat: -23.5525, lng: -46.6355 },
+    title: "Café Cultural",
+    info: "Livros e café",
+    group: "cafe"
+  }
+];
+function FilterableMapExample({ apiKey }) {
+  const [activeFilters, setActiveFilters] = React.useState(
+    new Set(Object.keys(markerGroups))
+  );
+  const [showFilters, setShowFilters] = React.useState(true);
+  const filteredLocations = React.useMemo(() => {
+    return sampleLocations.filter((location) => activeFilters.has(location.group));
+  }, [activeFilters]);
+  const toggleFilter = (groupId) => {
+    setActiveFilters((prev) => {
+      const newFilters = new Set(prev);
+      if (newFilters.has(groupId)) {
+        newFilters.delete(groupId);
+      } else {
+        newFilters.add(groupId);
+      }
+      return newFilters;
+    });
+  };
+  const toggleAll = () => {
+    if (activeFilters.size === Object.keys(markerGroups).length) {
+      setActiveFilters(/* @__PURE__ */ new Set());
+    } else {
+      setActiveFilters(new Set(Object.keys(markerGroups)));
+    }
+  };
+  const markersWithCustomization = filteredLocations.map((location) => ({
+    ...location,
+    customColor: markerGroups[location.group].color,
+    iconSvg: createLucideIconSvg(markerGroups[location.group].iconName),
+    iconColor: markerGroups[location.group].iconColor
+  }));
+  const getGroupCount = (groupId) => {
+    return sampleLocations.filter((loc) => loc.group === groupId).length;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__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: [
+        filteredLocations.length,
+        " de ",
+        sampleLocations.length,
+        " locais"
+      ] })
+    ] }),
+    /* @__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(
+        alertDialog.Map,
+        {
+          center: { lat: -23.5505, lng: -46.6333 },
+          zoom: 14,
+          markers: markersWithCustomization,
+          height: "500px",
+          zoomControl: true,
+          fullscreenControl: true,
+          apiKey
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: button.cn(
+            "absolute top-4 left-4 z-10 transition-all duration-300",
+            showFilters ? "translate-x-0" : "-translate-x-full"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2.5 rounded-lg shadow-[var(--shadow-elevation-sm)] bg-card border border-border max-w-[220px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2 gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-3.5 h-3.5 text-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: "Filtros" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: () => setShowFilters(false),
+                  className: "h-5 w-5 p-0",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+                }
+              )
+            ] }),
+            /* @__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(
+                  alertDialog.Checkbox,
+                  {
+                    id: "filter-all",
+                    checked: activeFilters.size === Object.keys(markerGroups).length,
+                    onCheckedChange: toggleAll
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  alertDialog.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 })
+                    ]
+                  }
+                )
+              ] }),
+              Object.entries(markerGroups).map(([id, group]) => {
+                const groupId = id;
+                const Icon = group.icon;
+                const isActive = activeFilters.has(groupId);
+                const count = getGroupCount(groupId);
+                return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 py-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    alertDialog.Checkbox,
+                    {
+                      id: `filter-${id}`,
+                      checked: isActive,
+                      onCheckedChange: () => toggleFilter(groupId)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    alertDialog.Label,
+                    {
+                      htmlFor: `filter-${id}`,
+                      className: "flex items-center gap-1.5 cursor-pointer text-sm",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-3.5 h-3.5", style: { color: group.color } }),
+                        /* @__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 })
+                      ]
+                    }
+                  )
+                ] }, id);
+              })
+            ] })
+          ] })
+        }
+      ),
+      !showFilters && /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          size: "sm",
+          onClick: () => setShowFilters(true),
+          className: "absolute top-4 left-4 z-10 h-8 bg-primary text-primary-foreground",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-3.5 h-3.5 mr-1.5" }),
+            "Filtros"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3 justify-center pt-2 border-t border-border", children: Object.entries(markerGroups).map(([id, group]) => {
+      const Icon = group.icon;
+      const count = getGroupCount(id);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1 rounded-lg bg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3 h-3 rounded-full", style: { backgroundColor: group.color } }),
+        /* @__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 })
+      ] }, id);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-3 rounded-lg bg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Total de Locais" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl text-foreground", children: sampleLocations.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-3 rounded-lg bg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Visíveis" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl text-primary", children: filteredLocations.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-3 rounded-lg bg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Categorias" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl text-foreground", children: Object.keys(markerGroups).length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-3 rounded-lg bg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Filtros Ativos" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl text-chart-2", children: activeFilters.size })
+      ] })
+    ] })
+  ] });
+}
+
+function DrawingMapExample({ apiKey }) {
+  const [mapInstance, setMapInstance] = React.useState(null);
+  const [selectedMode, setSelectedMode] = React.useState(null);
+  const [shapes, setShapes] = React.useState([]);
+  const [showSaveDialog, setShowSaveDialog] = React.useState(false);
+  const [savedData, setSavedData] = React.useState("");
+  const [isDrawingPolygon, setIsDrawingPolygon] = React.useState(false);
+  const tempPolylineRef = React.useRef(null);
+  const polygonPathRef = React.useRef([]);
+  const mapListenersRef = React.useRef([]);
+  const colors = {
+    fill: "#2C275B",
+    // Primary do CSS
+    stroke: "#2C275B",
+    fillOpacity: 0.2,
+    strokeWeight: 2,
+    editable: true,
+    draggable: true
+  };
+  const addMarker = React.useCallback(
+    (position) => {
+      if (!mapInstance) return;
+      const marker = new google.maps.marker.AdvancedMarkerElement({
+        position,
+        map: mapInstance,
+        gmpDraggable: true,
+        // Propriedade correta para AdvancedMarkerElement
+        title: "Marcador"
+      });
+      marker.addListener("dragend", () => {
+        sonner.toast.info("Posição do marcador atualizada");
+      });
+      const newShape = { type: "marker", overlay: marker };
+      setShapes((prev) => [...prev, newShape]);
+      sonner.toast.success("Marcador adicionado");
+    },
+    [mapInstance]
+  );
+  const addCircle = React.useCallback(
+    (center) => {
+      if (!mapInstance) return;
+      const circle = new google.maps.Circle({
+        map: mapInstance,
+        center,
+        radius: 500,
+        fillColor: colors.fill,
+        fillOpacity: colors.fillOpacity,
+        strokeColor: colors.stroke,
+        strokeWeight: colors.strokeWeight,
+        editable: true,
+        draggable: true
+      });
+      const newShape = { type: "circle", overlay: circle };
+      setShapes((prev) => [...prev, newShape]);
+      sonner.toast.success("Círculo adicionado");
+    },
+    [mapInstance, colors]
+  );
+  const addRectangle = React.useCallback(
+    (center) => {
+      if (!mapInstance) return;
+      const offset = 5e-3;
+      const bounds = {
+        north: center.lat() + offset,
+        south: center.lat() - offset,
+        east: center.lng() + offset,
+        west: center.lng() - offset
+      };
+      const rectangle = new google.maps.Rectangle({
+        map: mapInstance,
+        bounds,
+        fillColor: colors.fill,
+        fillOpacity: colors.fillOpacity,
+        strokeColor: colors.stroke,
+        strokeWeight: colors.strokeWeight,
+        editable: true,
+        draggable: true
+      });
+      const newShape = { type: "rectangle", overlay: rectangle };
+      setShapes((prev) => [...prev, newShape]);
+      sonner.toast.success("Retângulo adicionado");
+    },
+    [mapInstance, colors]
+  );
+  const cancelPolygonDrawing = React.useCallback(() => {
+    if (tempPolylineRef.current) {
+      tempPolylineRef.current.setMap(null);
+      tempPolylineRef.current = null;
+    }
+    polygonPathRef.current = [];
+    setIsDrawingPolygon(false);
+  }, []);
+  const finishPolygon = React.useCallback(() => {
+    if (!mapInstance || polygonPathRef.current.length < 3) {
+      if (polygonPathRef.current.length < 3 && polygonPathRef.current.length > 0) {
+        sonner.toast.error("Polígono precisa de pelo menos 3 pontos.");
+      }
+      return;
+    }
+    const polygon = new google.maps.Polygon({
+      map: mapInstance,
+      paths: polygonPathRef.current,
+      fillColor: colors.fill,
+      fillOpacity: colors.fillOpacity,
+      strokeColor: colors.stroke,
+      strokeWeight: colors.strokeWeight,
+      editable: true,
+      draggable: true
+    });
+    const newShape = { type: "polygon", overlay: polygon };
+    setShapes((prev) => [...prev, newShape]);
+    cancelPolygonDrawing();
+    sonner.toast.success("Polígono criado com sucesso!");
+  }, [mapInstance, colors, cancelPolygonDrawing]);
+  const addPolygonPoint = React.useCallback(
+    (point) => {
+      if (!mapInstance) return;
+      if (!isDrawingPolygon) {
+        setIsDrawingPolygon(true);
+        polygonPathRef.current = [point];
+        tempPolylineRef.current = new google.maps.Polyline({
+          map: mapInstance,
+          path: polygonPathRef.current,
+          strokeColor: colors.stroke,
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          geodesic: true,
+          clickable: false
+          // Importante: não capturar cliques para não atrapalhar o mapa
+        });
+        sonner.toast.info("Clique para adicionar pontos. Duplo clique ou botão check para fechar.", {
+          duration: 4e3
+        });
+      } else {
+        polygonPathRef.current.push(point);
+        tempPolylineRef.current?.setPath(polygonPathRef.current);
+      }
+    },
+    [mapInstance, isDrawingPolygon, colors]
+  );
+  const clearListeners = () => {
+    mapListenersRef.current.forEach((listener) => google.maps.event.removeListener(listener));
+    mapListenersRef.current = [];
+  };
+  React.useEffect(() => {
+    if (!mapInstance) return;
+    clearListeners();
+    if (!selectedMode) {
+      mapInstance.setOptions({ draggableCursor: "grab", clickableIcons: true });
+      return;
+    }
+    mapInstance.setOptions({
+      draggableCursor: "crosshair",
+      clickableIcons: false
+    });
+    const clickListener = mapInstance.addListener("click", (e) => {
+      if (!e.latLng) return;
+      switch (selectedMode) {
+        case "marker":
+          addMarker(e.latLng);
+          break;
+        case "circle":
+          addCircle(e.latLng);
+          break;
+        case "rectangle":
+          addRectangle(e.latLng);
+          break;
+        case "polygon":
+          addPolygonPoint(e.latLng);
+          break;
+      }
+    });
+    mapListenersRef.current.push(clickListener);
+    if (selectedMode === "polygon") {
+      const dblClickListener = mapInstance.addListener("dblclick", (e) => {
+        if (e.domEvent) e.domEvent.stopPropagation();
+        finishPolygon();
+      });
+      mapListenersRef.current.push(dblClickListener);
+    }
+    return () => {
+      clearListeners();
+    };
+  }, [
+    mapInstance,
+    selectedMode,
+    addMarker,
+    addCircle,
+    addRectangle,
+    addPolygonPoint,
+    finishPolygon
+  ]);
+  const handleModeChange = (mode) => {
+    if (isDrawingPolygon) {
+      cancelPolygonDrawing();
+    }
+    setSelectedMode(mode);
+  };
+  const clearAll = () => {
+    shapes.forEach((shape) => {
+      if ("setMap" in shape.overlay) shape.overlay.setMap(null);
+      else shape.overlay.map = null;
+    });
+    setShapes([]);
+    if (isDrawingPolygon) cancelPolygonDrawing();
+    sonner.toast.info("Mapa limpo");
+  };
+  const undoLast = () => {
+    if (isDrawingPolygon) {
+      if (polygonPathRef.current.length > 0) {
+        polygonPathRef.current.pop();
+        tempPolylineRef.current?.setPath(polygonPathRef.current);
+        if (polygonPathRef.current.length === 0) {
+          cancelPolygonDrawing();
+        }
+      }
+      return;
+    }
+    if (shapes.length === 0) return;
+    const lastShape = shapes[shapes.length - 1];
+    if ("setMap" in lastShape.overlay) lastShape.overlay.setMap(null);
+    else lastShape.overlay.map = null;
+    setShapes((prev) => prev.slice(0, prev.length - 1));
+  };
+  const handleSave = () => {
+    if (shapes.length === 0) {
+      sonner.toast.error("Adicione desenhos ao mapa antes de salvar.");
+      return;
+    }
+    const exportData = shapes.map((s) => {
+      let data = {};
+      if (s.type === "marker") {
+        const marker = s.overlay;
+        const pos = marker.position;
+        if (pos) {
+          const lat = typeof pos.lat === "function" ? pos.lat() : pos.lat;
+          const lng = typeof pos.lng === "function" ? pos.lng() : pos.lng;
+          data = { lat, lng };
+        }
+      } else if (s.type === "circle") {
+        const circle = s.overlay;
+        data = {
+          center: { lat: circle.getCenter()?.lat(), lng: circle.getCenter()?.lng() },
+          radius: circle.getRadius()
+        };
+      } else if (s.type === "rectangle") {
+        const rect = s.overlay;
+        const bounds = rect.getBounds();
+        data = {
+          north: bounds?.getNorthEast().lat(),
+          south: bounds?.getSouthWest().lat(),
+          east: bounds?.getNorthEast().lng(),
+          west: bounds?.getSouthWest().lng()
+        };
+      } else if (s.type === "polygon") {
+        const poly = s.overlay;
+        const path = poly.getPath();
+        data = path.getArray().map((coord) => ({ lat: coord.lat(), lng: coord.lng() }));
+      }
+      return { type: s.type, data };
+    });
+    setSavedData(JSON.stringify(exportData, null, 2));
+    setShowSaveDialog(true);
+  };
+  const ToolButton = ({
+    active,
+    onClick,
+    icon: Icon,
+    label
+  }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    button.Button,
+    {
+      variant: active ? "default" : "ghost",
+      className: `w-full justify-start gap-3 ${active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: label })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: "h-full border-0 shadow-none md:border md:shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.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(skeleton.CardTitle, { children: "Ferramentas de Desenho" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { className: "mt-1", children: "Crie geometrias personalizadas no mapa" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ImageWithFallback.Badge, { variant: "outline", className: "h-6", children: [
+        shapes.length,
+        " ",
+        shapes.length === 1 ? "elemento" : "elementos"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.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(richTextEditor.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: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2", children: "Ferramentas" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToolButton,
+                {
+                  active: selectedMode === null,
+                  onClick: () => handleModeChange(null),
+                  icon: lucideReact.MousePointer2,
+                  label: "Navegar"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToolButton,
+                {
+                  active: selectedMode === "marker",
+                  onClick: () => handleModeChange("marker"),
+                  icon: lucideReact.MapPin,
+                  label: "Marcador"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToolButton,
+                {
+                  active: selectedMode === "circle",
+                  onClick: () => handleModeChange("circle"),
+                  icon: lucideReact.Circle,
+                  label: "Círculo"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToolButton,
+                {
+                  active: selectedMode === "rectangle",
+                  onClick: () => handleModeChange("rectangle"),
+                  icon: lucideReact.Square,
+                  label: "Retângulo"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToolButton,
+                {
+                  active: selectedMode === "polygon",
+                  onClick: () => handleModeChange("polygon"),
+                  icon: lucideReact.Hexagon,
+                  label: "Polígono"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.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: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "outline",
+                  onClick: undoLast,
+                  disabled: shapes.length === 0 && !isDrawingPolygon,
+                  className: "w-full",
+                  title: "Desfazer último",
+                  "aria-label": "Desfazer último",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo, { className: "h-4 w-4 mr-2" }),
+                    "Desfazer"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "destructive",
+                  onClick: clearAll,
+                  disabled: shapes.length === 0 && !isDrawingPolygon,
+                  className: "w-full bg-destructive/10 text-destructive hover:bg-destructive hover:text-destructive-foreground border-0 shadow-none",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4 mr-2" }),
+                    "Limpar"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              button.Button,
+              {
+                variant: "default",
+                onClick: handleSave,
+                disabled: shapes.length === 0,
+                className: "w-full mt-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4 mr-2" }),
+                  "Salvar GeoJSON"
+                ]
+              }
+            )
+          ] })
+        ] }) }),
+        isDrawingPolygon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-primary/5 border-t border-primary/10", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2 text-primary text-xs font-medium", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
+            ] }),
+            "Desenhando Polígono..."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              button.Button,
+              {
+                size: "sm",
+                className: "w-full bg-green-600 hover:bg-green-700 text-white",
+                onClick: finishPolygon,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 mr-1" }),
+                  " Concluir"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              button.Button,
+              {
+                size: "sm",
+                variant: "outline",
+                className: "w-full",
+                onClick: cancelPolygonDrawing,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 mr-1" }),
+                  " Cancelar"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative bg-muted/5 min-h-[400px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          alertDialog.Map,
+          {
+            className: "h-full w-full rounded-none md:rounded-br-lg",
+            center: { lat: -23.5505, lng: -46.6333 },
+            zoom: 13,
+            height: "100%",
+            mapContainerClassName: "h-full w-full rounded-none md:rounded-br-lg",
+            disableDefaultUI: true,
+            zoomControl: true,
+            onMapLoad: setMapInstance,
+            apiKey
+          }
+        ),
+        selectedMode && !isDrawingPolygon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-background/90 backdrop-blur border px-4 py-2 rounded-full shadow-sm text-xs font-medium text-muted-foreground pointer-events-none z-10", children: [
+          selectedMode === "marker" && "Clique no mapa para adicionar um marcador",
+          selectedMode === "circle" && "Clique no mapa para definir o centro do círculo",
+          selectedMode === "rectangle" && "Clique no mapa para criar um retângulo",
+          selectedMode === "polygon" && "Clique sequencialmente para desenhar a área"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.Dialog, { open: showSaveDialog, onOpenChange: setShowSaveDialog, children: /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.DialogContent, { className: "max-w-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.DialogHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.DialogTitle, { children: "Dados Geográficos (GeoJSON)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.DialogDescription, { children: "Copie os dados das formas desenhadas abaixo." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-4 rounded-lg bg-muted overflow-auto max-h-[300px] text-xs font-mono scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent", children: savedData }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => setShowSaveDialog(false), children: "Fechar" }) })
+      ] }) })
+    ] })
+  ] });
+}
+
+function MapShowcase() {
+  const [activeTab, setActiveTab] = React.useState("simple");
+  const [isTransitioning, setIsTransitioning] = React.useState(false);
+  const [apiKey, setApiKey] = React.useState("");
+  const [inputApiKey, setInputApiKey] = React.useState("");
+  const [showTraffic, setShowTraffic] = React.useState(false);
+  const [showTransit, setShowTransit] = React.useState(false);
+  const [showBicycling, setShowBicycling] = React.useState(false);
+  const [showZoomControl, setShowZoomControl] = React.useState(true);
+  const [showMapTypeControl, setShowMapTypeControl] = React.useState(false);
+  const [showStreetViewControl, setShowStreetViewControl] = React.useState(false);
+  const [showFullscreenControl, setShowFullscreenControl] = React.useState(true);
+  const handleTabChange = (value) => {
+    if (value === activeTab) return;
+    setIsTransitioning(true);
+    setTimeout(() => {
+      setActiveTab(value);
+      setIsTransitioning(false);
+    }, 50);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      alertDialog.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" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Configuração da API Key" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Insira sua Google Maps API Key para renderizar os mapas abaixo." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-md items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            type: "password",
+            placeholder: "Cole sua Google Maps API Key aqui",
+            "aria-label": "Google Maps API Key",
+            value: inputApiKey,
+            onChange: (e) => setInputApiKey(e.target.value),
+            className: "max-w-md h-10"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => setApiKey(inputApiKey), children: "Salvar" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.Tabs, { value: activeTab, onValueChange: handleTabChange, className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.TabsList, { className: "grid w-full grid-cols-4 mb-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "simple", children: "Mapas Simples" }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "markers", children: "Marcadores" }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "controls", children: "Controles" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.TabsTrigger, { value: "drawing", className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "w-3 h-3" }),
+          " Desenho"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsContent, { value: "simple", className: "space-y-8", children: !isTransitioning && activeTab === "simple" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Mapa Padrão" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Configuração básica do mapa centralizado em uma coordenada específica." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            alertDialog.Map,
+            {
+              center: { lat: -23.5505, lng: -46.6333 },
+              zoom: 13,
+              height: "400px",
+              apiKey
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Camadas (Layers)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Sobreposição de informações como tráfego, transporte público e ciclovias." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.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(alertDialog.Switch, { id: "traffic", checked: showTraffic, onCheckedChange: setShowTraffic }),
+                /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.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(alertDialog.Switch, { id: "transit", checked: showTransit, onCheckedChange: setShowTransit }),
+                /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.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(
+                  alertDialog.Switch,
+                  {
+                    id: "bicycling",
+                    checked: showBicycling,
+                    onCheckedChange: setShowBicycling
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.Label, { htmlFor: "bicycling", className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { className: "w-4 h-4" }),
+                  " Ciclovias"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.Map,
+              {
+                center: { lat: -23.5505, lng: -46.6333 },
+                zoom: 12,
+                height: "500px",
+                layers: {
+                  traffic: showTraffic,
+                  transit: showTransit,
+                  bicycling: showBicycling
+                },
+                apiKey
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { className: "text-sm", children: "São Paulo" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.Map,
+              {
+                center: { lat: -23.5505, lng: -46.6333 },
+                zoom: 11,
+                height: "200px",
+                disableDefaultUI: true,
+                apiKey
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { className: "text-sm", children: "Rio de Janeiro" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.Map,
+              {
+                center: { lat: -22.9068, lng: -43.1729 },
+                zoom: 11,
+                height: "200px",
+                disableDefaultUI: true,
+                apiKey
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { className: "text-sm", children: "New York" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.Map,
+              {
+                center: { lat: 40.7128, lng: -74.006 },
+                zoom: 11,
+                height: "200px",
+                disableDefaultUI: true,
+                apiKey
+              }
+            ) })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsContent, { value: "markers", className: "space-y-8", children: !isTransitioning && activeTab === "markers" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Marcadores e Pins" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Exemplos de marcadores personalizados com diferentes cores e informações." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            alertDialog.Map,
+            {
+              center: { lat: -23.5505, lng: -46.6333 },
+              zoom: 13,
+              height: "500px",
+              apiKey,
+              markers: [
+                {
+                  position: { lat: -23.5505, lng: -46.6333 },
+                  title: "Principal",
+                  info: "Marcador padrão",
+                  customColor: "#4F46E5"
+                },
+                {
+                  position: { lat: -23.54, lng: -46.64 },
+                  title: "Secundário",
+                  info: "Marcador de alerta",
+                  customColor: "#EF4444",
+                  icon: "!"
+                },
+                {
+                  position: { lat: -23.56, lng: -46.62 },
+                  title: "Loja",
+                  info: "Ponto de venda",
+                  customColor: "#10B981",
+                  icon: "S"
+                }
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Marcador com Ações" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Marcador interativo que exibe conteúdo rico (texto, imagem, botões) ao ser clicado." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            alertDialog.Map,
+            {
+              center: { lat: -23.5505, lng: -46.6333 },
+              zoom: 13,
+              height: "500px",
+              apiKey,
+              markers: [
+                {
+                  position: { lat: -23.5505, lng: -46.6333 },
+                  label: "🏢",
+                  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.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" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-white font-medium", children: "Office View" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-3 leading-relaxed", children: "Sede principal em São Paulo. Espaço moderno para reuniões e eventos." }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "sm", className: "w-full h-8 text-xs shadow-sm", children: "Navegar" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        button.Button,
+                        {
+                          size: "sm",
+                          variant: "outline",
+                          className: "w-full h-8 text-xs bg-background",
+                          children: "Detalhes"
+                        }
+                      )
+                    ] })
+                  ] })
+                }
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Áreas e Zonas" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Delimitação de áreas geográficas usando círculos e polígonos." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            alertDialog.Map,
+            {
+              center: { lat: -23.5505, lng: -46.6333 },
+              zoom: 12,
+              height: "500px",
+              apiKey,
+              markers: [
+                {
+                  position: { lat: -23.5505, lng: -46.6333 },
+                  title: "Centro da Zona",
+                  info: "Raio de 3km",
+                  customColor: "#6366F1"
+                }
+              ],
+              circle: {
+                center: { lat: -23.5505, lng: -46.6333 },
+                radius: 3e3,
+                fillColor: "#6366F1",
+                strokeColor: "#4F46E5"
+              },
+              polygon: {
+                paths: [
+                  [
+                    { lat: -23.52, lng: -46.6 },
+                    { lat: -23.52, lng: -46.66 },
+                    { lat: -23.58, lng: -46.66 },
+                    { lat: -23.58, lng: -46.6 }
+                  ]
+                ],
+                fillColor: "#10B981",
+                strokeColor: "#059669"
+              }
+            }
+          ) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsContent, { value: "controls", className: "space-y-8", children: !isTransitioning && activeTab === "controls" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Controles do Mapa" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Personalize a interface do mapa ativando ou desativando controles nativos." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.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(
+                  alertDialog.Checkbox,
+                  {
+                    id: "zoom",
+                    checked: showZoomControl,
+                    onCheckedChange: (c) => setShowZoomControl(!!c)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "zoom", children: "Zoom Control" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  alertDialog.Checkbox,
+                  {
+                    id: "maptype",
+                    checked: showMapTypeControl,
+                    onCheckedChange: (c) => setShowMapTypeControl(!!c)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "maptype", children: "Map Type" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  alertDialog.Checkbox,
+                  {
+                    id: "streetview",
+                    checked: showStreetViewControl,
+                    onCheckedChange: (c) => setShowStreetViewControl(!!c)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "streetview", children: "Street View" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  alertDialog.Checkbox,
+                  {
+                    id: "fullscreen",
+                    checked: showFullscreenControl,
+                    onCheckedChange: (c) => setShowFullscreenControl(!!c)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "fullscreen", children: "Fullscreen" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.Map,
+              {
+                center: { lat: -23.5505, lng: -46.6333 },
+                zoom: 13,
+                height: "400px",
+                apiKey,
+                zoomControl: showZoomControl,
+                mapTypeControl: showMapTypeControl,
+                streetViewControl: showStreetViewControl,
+                fullscreenControl: showFullscreenControl
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: "Filtros Interativos" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: "Exemplo avançado de mapa com controles customizados para filtragem de marcadores." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(FilterableMapExample, { apiKey }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.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: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm", children: "Documentação" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Verifique ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { children: "MAP_SETUP.md" }),
+          " para configuração inicial e requisitos de API."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm", children: "Performance" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Utiliza carregamento assíncrono e AdvancedMarkerElement para melhor desempenho." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm", children: "Design System" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Componentes seguem estritamente as variáveis de tokens do ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { children: "globals.css" }),
+          "."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+function TemplateContent() {
+  const { t } = reactI18next.useTranslation();
+  const layout = LayoutContext.useOptionalLayout();
+  const { disableDarkMode } = ThemeContext.useTheme();
+  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
+  const [localSidebarWidth, setLocalSidebarWidth] = React.useState(280);
+  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
+  const sidebarWidth = layout?.sidebarWidth ?? localSidebarWidth;
+  const setSidebarWidth = layout?.setSidebarWidth ?? setLocalSidebarWidth;
+  layout?.toggleSidebar ?? (() => setLocalSidebarExpanded((value) => !value));
+  reactRouterDom.useNavigate();
+  const { data: teamMembers = [], isLoading: teamLoading } = useTeamMembers();
+  const progress = useDashboardStore((s) => s.progress);
+  const setProgress = useDashboardStore((s) => s.setProgress);
+  const sliderValue = useDashboardStore((s) => s.sliderValue);
+  const setSliderValue = useDashboardStore((s) => s.setSliderValue);
+  const switchEnabled = useDashboardStore((s) => s.switchEnabled);
+  const toggleSwitch = useDashboardStore((s) => s.toggleSwitch);
+  const [showSidebarUser, setShowSidebarUser] = React.useState(true);
+  const [showSidebarSettings, setShowSidebarSettings] = React.useState(true);
+  const [showSidebarLogout, setShowSidebarLogout] = React.useState(true);
+  const [showHeaderActions, setShowHeaderActions] = React.useState(true);
+  const [showHeaderBreadcrumbs, setShowHeaderBreadcrumbs] = React.useState(true);
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    sonner.toast.success(t("templates.formSubmitSuccess"));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex-1 flex flex-col overflow-hidden transition-all duration-300",
+      style: {
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : "80px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          sidebar.Header,
+          {
+            showThemeToggle: true,
+            showLanguageSelector: true,
+            breadcrumbs: [
+              { label: t("nav.designSystem"), href: "/home", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "w-4 h-4" }) },
+              { label: t("templates.breadcrumb") }
+            ],
+            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("div", { className: "h-full", style: { overflowY: "auto", overflowX: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 sm:p-4 md:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.PageHeader, { title: t("templates.title"), subtitle: t("templates.subtitle") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.headerWithBreadcrumbs.sectionTitle") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.headerWithBreadcrumbs.cardTitle") }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.headerWithBreadcrumbs.cardDescription") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "p-0 border-t bg-background overflow-hidden rounded-b-[var(--radius-lg)]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  sidebar.Header,
+                  {
+                    className: "border-b",
+                    breadcrumbs: [
+                      {
+                        label: t("templates.headerWithBreadcrumbs.breadcrumbs.dashboard"),
+                        href: "#",
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "w-4 h-4" })
+                      },
+                      {
+                        label: t("templates.headerWithBreadcrumbs.breadcrumbs.settings"),
+                        href: "#",
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "w-4 h-4" })
+                      },
+                      {
+                        label: t("templates.headerWithBreadcrumbs.breadcrumbs.users"),
+                        href: "#",
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "w-4 h-4" })
+                      },
+                      { label: t("templates.headerWithBreadcrumbs.breadcrumbs.accessProfile") }
+                    ],
+                    showLanguageSelector: true,
+                    showThemeToggle: true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 min-h-[200px]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-semibold mb-2", children: t("templates.headerWithBreadcrumbs.exampleContentTitle") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
+                    t("templates.headerWithBreadcrumbs.exampleContentDescriptionPart1"),
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Header" }),
+                    t("templates.headerWithBreadcrumbs.exampleContentDescriptionPart2")
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.sections.alerts") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Alert, { variant: "info", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertTitle, { children: t("templates.alerts.infoTitle") }),
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertDescription, { children: t("templates.alerts.infoDescription") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Alert, { variant: "destructive", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertTitle, { children: t("templates.alerts.errorTitle") }),
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertDescription, { children: t("templates.alerts.errorDescription") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Alert, { variant: "success", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertTitle, { children: t("templates.alerts.successTitle") }),
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertDescription, { children: t("templates.alerts.successDescription") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Alert, { variant: "warning", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertTitle, { children: t("templates.alerts.warningTitle") }),
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertDescription, { children: t("templates.alerts.warningDescription") })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.sections.cardsAndTabs") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.Tabs, { defaultValue: "overview", className: "w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.TabsList, { className: "grid w-full grid-cols-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "overview", children: t("templates.tabs.overview") }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "forms", children: t("templates.tabs.forms") }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "data", children: t("templates.tabs.data") }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "settings", children: t("templates.tabs.settings") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.TabsContent, { value: "overview", className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("stats.totalUsers") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("stats.last30Days") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(skeleton.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.jsxs(skeleton.Card, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("stats.totalRevenue") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("stats.currentMonth") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(skeleton.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.jsxs(skeleton.Card, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("stats.conversionRate") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("stats.currentWeek") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(skeleton.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.jsxs(skeleton.Card, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.overview.progressTitle") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.overview.progressDescription") })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(skeleton.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(alertDialog.Label, { children: t("templates.overview.projectProgress") }),
+                        /* @__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.jsxs("div", { className: "flex gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          button.Button,
+                          {
+                            size: "sm",
+                            onClick: () => setProgress(Math.max(0, progress - 10)),
+                            children: "-10%"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          button.Button,
+                          {
+                            size: "sm",
+                            onClick: () => setProgress(Math.min(100, progress + 10)),
+                            children: "+10%"
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.overview.volume") }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "[font-size:var(--text-small)] text-muted-foreground", children: [
+                          sliderValue[0],
+                          "%"
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        slider.Slider,
+                        {
+                          value: sliderValue,
+                          onValueChange: setSliderValue,
+                          min: 0,
+                          max: 100,
+                          step: 1,
+                          className: "w-full",
+                          "aria-label": t("templates.overview.volume")
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsContent, { value: "forms", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.forms.registrationTitle") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.forms.registrationDescription") })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.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(alertDialog.Label, { htmlFor: "firstName", children: t("templates.forms.firstName") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        input.Input,
+                        {
+                          id: "firstName",
+                          placeholder: t("templates.forms.firstNamePlaceholder")
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "lastName", children: t("templates.forms.lastName") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        input.Input,
+                        {
+                          id: "lastName",
+                          placeholder: t("templates.forms.lastNamePlaceholder")
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "email", children: t("templates.forms.email") }),
+                    /* @__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: t("templates.forms.emailPlaceholder"),
+                          className: "pl-10"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "phone", children: t("templates.forms.phone") }),
+                    /* @__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: t("templates.forms.phonePlaceholder"),
+                          className: "pl-10"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "role", children: t("templates.forms.role") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { id: "role", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: t("templates.forms.rolePlaceholder") }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "developer", children: t("templates.forms.roles.developer") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "designer", children: t("templates.forms.roles.designer") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "manager", children: t("templates.forms.roles.manager") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "analyst", children: t("templates.forms.roles.analyst") })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "bio", children: t("templates.forms.bio") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      richTextEditor.Textarea,
+                      {
+                        id: "bio",
+                        placeholder: t("templates.forms.bioPlaceholder"),
+                        rows: 4
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h4", { children: t("templates.forms.preferences") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Checkbox, { id: "newsletter" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "newsletter", className: "font-normal", children: t("templates.forms.newsletter") })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Checkbox, { id: "notifications" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "notifications", className: "font-normal", children: t("templates.forms.pushNotifications") })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Checkbox, { id: "updates" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "updates", className: "font-normal", children: t("templates.forms.featureUpdates") })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.forms.accountType") }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        alertDialog.RadioGroup,
+                        {
+                          defaultValue: "personal",
+                          "aria-label": t("templates.forms.accountType"),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.RadioGroupItem, { value: "personal", id: "personal" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "personal", className: "font-normal", children: t("templates.forms.accountPersonal") })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.RadioGroupItem, { value: "business", id: "business" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "business", className: "font-normal", children: t("templates.forms.accountBusiness") })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.RadioGroupItem, { value: "enterprise", id: "enterprise" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "enterprise", className: "font-normal", children: t("templates.forms.accountEnterprise") })
+                            ] })
+                          ]
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardFooter, { className: "flex justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", children: t("templates.forms.cancel") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: handleFormSubmit, children: t("templates.forms.createAccount") })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsContent, { value: "data", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(SectionErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.data.title") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.data.description") })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.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(
+                      input.Input,
+                      {
+                        placeholder: t("templates.data.searchPlaceholder"),
+                        "aria-label": t("templates.data.searchPlaceholder"),
+                        className: "pl-10"
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[var(--radius-lg)] border border-border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Table, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.TableRow, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableHead, { children: t("team.name") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableHead, { children: t("team.email") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableHead, { children: t("team.role") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableHead, { children: t("team.status") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableHead, { className: "text-right", children: t("team.actions") })
+                    ] }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableBody, { children: teamLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.TableRow, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-8 rounded-full shrink-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-28" })
+                      ] }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-36" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-20" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-16 rounded-full" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-7 w-14 ml-auto" }) })
+                    ] }, i)) }) : teamMembers.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.TableRow, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: member.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: member.email }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: t(`team.roles.${member.role}`) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ImageWithFallback.Badge,
+                        {
+                          variant: member.status === "active" ? "default" : member.status === "away" ? "secondary" : "outline",
+                          children: t(`common.${member.status}`)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "sm", children: t("common.edit") }) })
+                    ] }, member.id)) })
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardFooter, { className: "flex justify-between items-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: t("team.showing", {
+                    count: teamMembers.length,
+                    total: teamMembers.length
+                  }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", children: t("common.previous") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", children: t("common.next") })
+                  ] })
+                ] })
+              ] }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsContent, { value: "settings", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.settings.title") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.settings.description") })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "space-y-6", children: [
+                  !disableDarkMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "dark-mode", children: t("templates.settings.darkMode") }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: t("templates.settings.darkModeDescription") })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        alertDialog.Switch,
+                        {
+                          id: "dark-mode",
+                          checked: switchEnabled,
+                          onCheckedChange: toggleSwitch
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {})
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "email-notifications", children: t("templates.settings.emailNotifications") }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: t("templates.settings.emailNotificationsDescription") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Switch, { id: "email-notifications", defaultChecked: true })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "push-notifications", children: t("templates.settings.pushNotifications") }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: t("templates.settings.pushNotificationsDescription") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Switch, { id: "push-notifications" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.settings.language") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { defaultValue: "pt-br", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { "aria-label": t("templates.settings.language"), children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "pt-br", children: t("templates.settings.languages.ptBR") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "en", children: t("templates.settings.languages.en") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "es", children: t("templates.settings.languages.es") })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.settings.timezone") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { defaultValue: "america-sao-paulo", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { "aria-label": t("templates.settings.timezone"), children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "america-sao-paulo", children: t("templates.settings.timezones.saoPaulo") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "america-new-york", children: t("templates.settings.timezones.newYork") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "europe-london", children: t("templates.settings.timezones.london") })
+                      ] })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardFooter, { className: "flex justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", children: t("templates.settings.restoreDefaults") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(button.Button, { children: t("templates.settings.saveChanges") })
+                ] })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.sections.buttons") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.buttons.title") }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.buttons.description") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "space-y-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.buttons.variants") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "default", children: "Default" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "secondary", children: "Secondary" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", children: "Outline" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", children: "Ghost" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "link", children: "Link" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "destructive", children: "Destructive" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.buttons.sizes") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "sm", children: "Small" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "default", children: "Default" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "lg", children: "Large" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "icon", "aria-label": t("nav.settings"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" }) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.buttons.withIcons") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "mr-2 h-4 w-4" }),
+                      t("templates.buttons.profile")
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "secondary", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "mr-2 h-4 w-4" }),
+                      t("templates.buttons.messages")
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "outline", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "mr-2 h-4 w-4" }),
+                      t("templates.buttons.schedule")
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { children: t("templates.buttons.states") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { disabled: true, children: t("templates.buttons.disabled") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", disabled: true, children: t("templates.buttons.outlineDisabled") })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.sections.badges") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.badges.title") }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.badges.description") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "default", children: "Default" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "secondary", children: "Secondary" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "outline", children: "Outline" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "destructive", children: "Destructive" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { className: "bg-success text-success-foreground", children: "Success" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { className: "bg-warning text-warning-foreground", children: "Warning" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { className: "bg-info text-info-foreground", children: "Info" })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.sections.dialogs") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.dialogs.dialogTitle") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.dialogs.dialogDescription") })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.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(button.Button, { variant: "outline", children: t("templates.dialogs.editProfile") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.DialogContent, { className: "sm:max-w-[425px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.DialogHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.DialogTitle, { children: t("templates.dialogs.editProfile") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.DialogDescription, { children: t("templates.dialogs.editProfileDescription") })
+                    ] }),
+                    /* @__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(alertDialog.Label, { htmlFor: "name", className: "text-right", children: t("templates.dialogs.name") }),
+                        /* @__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(alertDialog.Label, { htmlFor: "username", className: "text-right", children: t("templates.dialogs.username") }),
+                        /* @__PURE__ */ jsxRuntime.jsx(input.Input, { id: "username", defaultValue: "@johndoe", className: "col-span-3" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.DialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", children: t("templates.dialogs.update") }) })
+                  ] })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.dialogs.alertDialogTitle") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.dialogs.alertDialogDescription") })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "flex justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialog, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "destructive", children: t("templates.dialogs.deleteAccount") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { className: "sm:max-w-[425px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: t("templates.dialogs.areYouSure") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: t("templates.dialogs.deleteWarning") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: t("templates.dialogs.cancel") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogAction, { className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: t("templates.dialogs.continue") })
+                    ] })
+                  ] })
+                ] }) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("section", { children: /* @__PURE__ */ jsxRuntime.jsx(MapShowcase, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.headerVariations.sectionTitle") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.headerVariations.cardTitle") }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.headerVariations.cardDescription") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.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: t("templates.headerVariations.visibleElements") }),
+                  /* @__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(
+                        alertDialog.Switch,
+                        {
+                          id: "header-actions",
+                          checked: showHeaderActions,
+                          onCheckedChange: setShowHeaderActions
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "header-actions", className: "cursor-pointer", children: t("templates.headerVariations.actionButtons") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        alertDialog.Switch,
+                        {
+                          id: "header-bread",
+                          checked: showHeaderBreadcrumbs,
+                          onCheckedChange: setShowHeaderBreadcrumbs
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "header-bread", className: "cursor-pointer", children: t("templates.headerVariations.breadcrumbsLabel") })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative border rounded-[var(--radius-lg)] bg-muted/10 overflow-hidden shadow-inner", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-background/50 border-b text-xs font-mono text-muted-foreground", children: t("templates.headerVariations.preview") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    sidebar.Header,
+                    {
+                      title: !showHeaderBreadcrumbs ? t("templates.headerVariations.currentPage") : void 0,
+                      breadcrumbs: showHeaderBreadcrumbs ? [
+                        {
+                          label: t("templates.headerVariations.breadcrumbBrand"),
+                          href: "#",
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "w-4 h-4" })
+                        },
+                        {
+                          label: t("templates.headerVariations.breadcrumbSettings"),
+                          href: "#"
+                        },
+                        { label: t("templates.headerVariations.breadcrumbProfile") }
+                      ] : void 0,
+                      actions: showHeaderActions ? [
+                        {
+                          id: "notify",
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "w-5 h-5" }),
+                          onClick: () => sonner.toast(t("templates.headerVariations.notificationsOpenedToast"))
+                        },
+                        {
+                          id: "mail",
+                          label: t("templates.headerVariations.messagesLabel"),
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "w-5 h-5" }),
+                          onClick: () => sonner.toast(t("templates.headerVariations.messagesOpenedToast"))
+                        }
+                      ] : void 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-32 flex items-center justify-center text-muted-foreground text-sm italic", children: t("templates.headerVariations.contentArea") })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4", children: t("templates.sections.sidebarVariations") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.sidebar.title") }),
+                /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.sidebar.description") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.Tabs, { defaultValue: "assistant", className: "w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.TabsList, { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "assistant", children: t("templates.sidebar.assistantMode") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(alertDialog.TabsTrigger, { value: "default", children: t("templates.sidebar.defaultMode") })
+                ] }),
+                /* @__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: t("templates.sidebarControls.footerSettings") }),
+                  /* @__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(
+                        alertDialog.Switch,
+                        {
+                          id: "show-user",
+                          checked: showSidebarUser,
+                          onCheckedChange: setShowSidebarUser
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "show-user", className: "cursor-pointer", children: t("templates.sidebarControls.userProfile") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        alertDialog.Switch,
+                        {
+                          id: "show-settings",
+                          checked: showSidebarSettings,
+                          onCheckedChange: setShowSidebarSettings
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "show-settings", className: "cursor-pointer", children: t("templates.sidebarControls.settings") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        alertDialog.Switch,
+                        {
+                          id: "show-logout",
+                          checked: showSidebarLogout,
+                          onCheckedChange: setShowSidebarLogout
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Label, { htmlFor: "show-logout", className: "cursor-pointer", children: t("templates.sidebarControls.logoutButton") })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 pt-6 border-t", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold", children: t("templates.sidebarControls.sidebarWidthDesktop") }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-mono bg-muted px-2 py-1 rounded", children: [
+                        sidebarWidth,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground w-12 text-right", children: "240px" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        slider.Slider,
+                        {
+                          value: [sidebarWidth],
+                          onValueChange: (val) => setSidebarWidth(val[0]),
+                          min: 240,
+                          max: 450,
+                          step: 10,
+                          className: "flex-1",
+                          "aria-label": t("templates.sidebarControls.sidebarWidthAriaLabel")
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground w-12", children: "450px" })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.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(
+                        sidebar.Sidebar,
+                        {
+                          expanded: true,
+                          width: sidebarWidth,
+                          onToggle: () => {
+                          },
+                          user: { email: "admin@xertica.com" },
+                          onLogout: () => sonner.toast(t("templates.sidebar.logoutToast")),
+                          location: { pathname: "/assistant/current" },
+                          navigate: () => {
+                          },
+                          variant: "assistant",
+                          search: {
+                            show: true,
+                            placeholder: t("templates.sidebar.searchTopicsPlaceholder"),
+                            filter: {
+                              show: true,
+                              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: t("templates.sidebarControls.filterByStatus") }),
+                                /* @__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: t("templates.sidebarControls.filterActive") }),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    ImageWithFallback.Badge,
+                                    {
+                                      variant: "outline",
+                                      className: "text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10",
+                                      children: t("templates.sidebarControls.filterArchived")
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    ImageWithFallback.Badge,
+                                    {
+                                      variant: "outline",
+                                      className: "text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10",
+                                      children: t("templates.sidebarControls.filterPending")
+                                    }
+                                  )
+                                ] })
+                              ] })
+                            }
+                          },
+                          fixedArea: {
+                            show: true,
+                            content: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { className: "w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4 mr-2" }),
+                              t("templates.sidebar.newConversation")
+                            ] })
+                          },
+                          navigationGroups: [
+                            {
+                              id: "recent",
+                              label: t("templates.sidebar.recent"),
+                              icon: lucideReact.Clock,
+                              items: [
+                                {
+                                  path: "/assistant/refatoracao",
+                                  label: t("templates.sidebar.items.sidebarRefactor"),
+                                  description: t(
+                                    "templates.sidebar.items.sidebarRefactorDescription"
+                                  ),
+                                  actions: [
+                                    {
+                                      label: t("templates.sidebar.actions.rename"),
+                                      icon: lucideReact.FileEdit,
+                                      onClick: () => sonner.toast(t("templates.sidebar.actions.renameToast"))
+                                    },
+                                    {
+                                      label: t("templates.sidebar.actions.move"),
+                                      icon: lucideReact.ArrowRightLeft,
+                                      children: [
+                                        {
+                                          label: t("templates.sidebar.actions.moveActive"),
+                                          onClick: () => sonner.toast(t("templates.sidebar.actions.moveActiveToast"))
+                                        },
+                                        {
+                                          label: t("templates.sidebar.actions.moveMonitoring"),
+                                          onClick: () => sonner.toast(
+                                            t("templates.sidebar.actions.moveMonitoringToast")
+                                          )
+                                        },
+                                        {
+                                          label: t("templates.sidebar.actions.moveArchive"),
+                                          onClick: () => sonner.toast(
+                                            t("templates.sidebar.actions.moveArchiveToast")
+                                          )
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      label: t("templates.sidebar.actions.clear"),
+                                      icon: lucideReact.Trash2,
+                                      onClick: () => sonner.toast(t("templates.sidebar.actions.clearToast")),
+                                      variant: "destructive"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              id: "projects",
+                              label: t("templates.sidebar.constructionMonitoring"),
+                              icon: lucideReact.Map,
+                              actions: [
+                                {
+                                  label: t("templates.sidebar.actions.newCategory"),
+                                  icon: lucideReact.Plus,
+                                  onClick: () => sonner.toast(t("templates.sidebar.actions.newCategoryToast"))
+                                },
+                                {
+                                  label: t("templates.sidebar.actions.archiveGroup"),
+                                  icon: lucideReact.Archive,
+                                  onClick: () => sonner.toast(t("templates.sidebar.actions.archiveGroupToast"))
+                                }
+                              ],
+                              items: [
+                                {
+                                  path: "/assistant/br163",
+                                  label: t("templates.sidebar.items.br163Restoration"),
+                                  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.jsxs("div", { className: "flex justify-between items-center text-[10px] text-sidebar-foreground/60", children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("templates.sidebar.items.br163Location") }),
+                                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "67%" })
+                                    ] })
+                                  ] })
+                                }
+                              ]
+                            }
+                          ],
+                          footer: {
+                            showUser: showSidebarUser,
+                            showSettings: showSidebarSettings,
+                            showLogout: showSidebarLogout
+                          }
+                        }
+                      ),
+                      /* @__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: t("templates.sidebar.assistantContent") })
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.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(
+                        sidebar.Sidebar,
+                        {
+                          expanded: true,
+                          width: sidebarWidth,
+                          onToggle: () => {
+                          },
+                          user: {
+                            name: "Ariel Santos",
+                            email: "admin@xertica.com",
+                            avatar: "https://github.com/shadcn.png"
+                          },
+                          onLogout: () => sonner.toast(t("templates.sidebar.logoutToast")),
+                          onSettingsClick: () => sonner.toast(t("templates.sidebar.settingsClickedToast")),
+                          location: { pathname: "/home" },
+                          navigate: () => {
+                          },
+                          variant: "default",
+                          routes: [
+                            {
+                              path: "/home",
+                              label: t("templates.sidebar.routes.home"),
+                              icon: lucideReact.Home
+                            },
+                            {
+                              path: "/dashboard",
+                              label: t("templates.sidebar.routes.dashboard"),
+                              icon: lucideReact.Users
+                            },
+                            {
+                              path: "/settings",
+                              label: t("templates.sidebar.routes.settings"),
+                              icon: lucideReact.Settings
+                            }
+                          ],
+                          footer: {
+                            showUser: showSidebarUser,
+                            showSettings: showSidebarSettings,
+                            showLogout: showSidebarLogout
+                          }
+                        }
+                      ),
+                      /* @__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: t("templates.sidebar.defaultContent") })
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(alertDialog.Separator, { className: "my-8" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: "mt-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: t("templates.footer.title") }),
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { children: t("templates.footer.subtitle") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
+                t("templates.footer.descriptionPart1"),
+                /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]", children: "xertica-ui" }),
+                t("templates.footer.descriptionPart2")
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.Alert, { variant: "info", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(richTextEditor.AlertTitle, { children: t("templates.footer.tipTitle") }),
+                /* @__PURE__ */ jsxRuntime.jsxs(richTextEditor.AlertDescription, { children: [
+                  t("templates.footer.tipDescriptionPart1"),
+                  /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-muted px-1 rounded", children: "styles/xertica/tokens.css" }),
+                  t("templates.footer.tipDescriptionPart2")
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }) }) }) })
+      ]
+    }
+  );
+}
+
+function TemplatePage() {
+  const { user, logout } = useAuth();
+  const layout = LayoutContext.useOptionalLayout();
+  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
+  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
+  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
+  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
+  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded((value) => !value));
+  const toggleAssistente = layout?.toggleAssistente ?? (() => setLocalAssistantExpanded((value) => !value));
+  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(
+      sidebar.Sidebar,
+      {
+        expanded: sidebarExpanded,
+        width: sidebarWidth,
+        onToggle: toggleSidebar,
+        user: {
+          ...user,
+          name: "Ariel Santos",
+          avatar: "https://github.com/shadcn.png"
+        },
+        onLogout: logout,
+        onSettingsClick: () => navigate("/settings"),
+        location,
+        navigate,
+        routes
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TemplateContent, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      xerticaAssistant.XerticaAssistant,
+      {
+        isExpanded: assistenteExpanded,
+        onToggle: toggleAssistente,
+        onEvaluation: () => {
+        }
+      }
+    )
+  ] });
+}
+
+function VerifyEmailPage() {
+  const navigate = reactRouterDom.useNavigate();
+  const location = reactRouterDom.useLocation();
+  const { t } = reactI18next.useTranslation();
+  const email = location.state?.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(
+    MarketingFooter.AuthPageShell,
+    {
+      imageSrc: "https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format",
+      imageAlt: t("verifyEmail.heroImageAlt"),
+      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(ThemeToggle.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: t("verifyEmail.heading") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: t("verifyEmail.instructionsSent") }),
+          /* @__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: t("verifyEmail.instructions") }),
+          /* @__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: t("verifyEmail.checkSpam") })
+          ] })
+        ] }),
+        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: t("verifyEmail.resentSuccess") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-muted-foreground", children: t("verifyEmail.notReceived") }),
+          /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", className: "w-full", onClick: handleResend, disabled: isResending, children: isResending ? t("verifyEmail.resending") : t("verifyEmail.resend") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            button.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" }),
+                t("verifyEmail.backToLogin")
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarketingFooter.SocialLoginButtons, { onSocialLogin: handleSocialLogin })
+      ]
+    }
+  );
+}
+
+exports.ForgotPasswordPage = ForgotPasswordPage;
+exports.HomeContent = HomeContent;
+exports.HomePage = HomePage;
+exports.LandingPage = LandingPage;
+exports.LoginPage = LoginPage;
+exports.ResetPasswordPage = ResetPasswordPage;
+exports.TemplateContent = TemplateContent;
+exports.TemplatePage = TemplatePage;
+exports.VerifyEmailPage = VerifyEmailPage;