export declare const siteGateComponentTemplate = "\"use client\";\nimport { useState, type FormEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Input, ThemeToggle } from \"cherry-styled-components\";\nimport { Lock } from \"lucide-react\";\nimport { Theme } from \"@/app/theme\";\nimport { Button } from \"@/components/layout/Button\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { config } from \"@/utils/config\";\n\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  min-height: 100dvh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  background: ${({ theme }) => theme.colors.light};\n`;\n\nconst StyledInner = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  max-width: 380px;\n`;\n\nconst StyledFooter = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n`;\n\nconst StyledBranding = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 14px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  & a {\n    color: ${({ theme }) => theme.colors.accent};\n    font-weight: 700;\n    text-decoration: none;\n    transition: all 0.3s ease;\n  }\n\n  & a:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 40px 32px;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  text-align: center;\n`;\n\nconst StyledIcon = styled.div<{ theme: Theme }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: ${({ theme }) => theme.colors.accent};\n  background: ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    width: 22px;\n    height: 22px;\n  }\n`;\n\nconst StyledTitle = styled.h1<{ theme: Theme }>`\n  margin: 0;\n  font-size: 22px;\n  color: ${({ theme }) => theme.colors.accent};\n`;\n\nconst StyledLede = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 15px;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledForm = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  width: 100%;\n`;\n\nconst StyledAlert = styled.div`\n  width: 100%;\n  text-align: left;\n`;\n\nexport function SiteGate({ hideBranding }: { hideBranding?: boolean }) {\n  const [password, setPassword] = useState(\"\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"error\">(\"idle\");\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (!password || status === \"loading\") return;\n\n    setStatus(\"loading\");\n    try {\n      const res = await fetch(\"/api/gate\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ password }),\n      });\n      if (res.ok) {\n        window.location.reload();\n        return;\n      }\n      setStatus(\"error\");\n    } catch {\n      setStatus(\"error\");\n    }\n  }\n\n  return (\n    <StyledWrapper>\n      <StyledInner>\n        <StyledCard>\n          <StyledIcon>\n            <Lock />\n          </StyledIcon>\n          <StyledTitle>{config.name || \"Documentation\"}</StyledTitle>\n          <StyledLede>This site is password protected.</StyledLede>\n          <StyledForm onSubmit={handleSubmit} noValidate>\n            <Input\n              type=\"password\"\n              name=\"password\"\n              autoComplete=\"current-password\"\n              placeholder=\"Enter password\"\n              aria-label=\"Password\"\n              autoFocus\n              value={password}\n              $error={status === \"error\"}\n              $fullWidth\n              onChange={(e) => {\n                setPassword(e.target.value);\n                if (status === \"error\") setStatus(\"idle\");\n              }}\n            />\n            <Button\n              type=\"submit\"\n              fullWidth\n              disabled={status === \"loading\" || !password}\n            >\n              {status === \"loading\" ? \"Unlocking...\" : \"Enter\"}\n            </Button>\n          </StyledForm>\n          {status === \"error\" && (\n            <StyledAlert>\n              <Callout type=\"danger\">\n                <p>Incorrect password. Try again.</p>\n              </Callout>\n            </StyledAlert>\n          )}\n        </StyledCard>\n        <StyledFooter>\n          <ThemeToggle $shortcut />\n          {!hideBranding && (\n            <StyledBranding>\n              Powered by{\" \"}\n              <a\n                href=\"https://doccupine.com\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                Doccupine\n              </a>\n            </StyledBranding>\n          )}\n        </StyledFooter>\n      </StyledInner>\n    </StyledWrapper>\n  );\n}\n";