Crie um quadro de planejamento de tarefas com tokens semânticos da Atlassian, uma escala de espaçamento de oito pixels, APIs reais de Button, Lozenge e Toggle, além da configuração necessária de estilos Compiled. Inspecione uma tarefa, filtre o quadro e mova um item de trabalho local sem confundir seleção com status.
Interpretação de HTML/CSS com valores de espaçamento e formas verificados, paleta de cores ilustrativa e fontes alternativas do sistema; não é um runtime do Jira nem do Atlaskit nativo. · Referência de implementação
02
Referência de design sistema de design Atlassian
Use no código os nomes exatos dos tokens semânticos. A referência oficial apresenta aliases de paleta de cores que variam entre os temas claro e escuro; por isso, estas linhas preservam os aliases em vez de inventar um valor hexadecimal estável. Os valores numéricos de espaçamento e raio vêm das escalas documentadas. As cores hexadecimais da prévia são ilustrativas, não uma exportação de tokens.
Sistema de design Atlassian Pacotes públicos do ADS e os requisitos reais de estilo
Importar um componente não é suficiente para a integração
Os componentes Atlassian Design System são publicados em @atlaskit, mas o catálogo mais amplo do Atlaskit também inclui pacotes específicos de aplicativos. Este exemplo escolhe três primitivos documentados: Button, Lozenge e Toggle, além de tokens e do reset CSS. O modelo de dados é intencionalmente local. Nenhuma dessas importações fornece permissões de issues do Jira, lógica de sprint ou um backend.
A referência atual de configuração exige a integração com Compiled para aplicativos que consomem pacotes da plataforma, mesmo que não criem estilos com Compiled. Por isso, a configuração fornecida para Parcel faz parte do exemplo. Copiar uma importação de Button sem configurar o empacotador pode resultar em estilos incompletos ou na ordem incorreta — um problema funcional de integração, não um detalhe meramente estético.
Sistema de design Atlassian Use tokens semânticos em vez de escolher cores da paleta por aproximação
Um token descreve uma função
token("color.text") é a cor principal do primeiro plano, enquanto token("color.text.subtle") é usado para informações secundárias. O texto selecionado tem uma função distinta da do texto de alerta. O quadro usa elevation.surface na região principal e elevation.surface.sunken em uma área de agrupamento. Essas escolhas continuam claras quando o tema muda, pois seus nomes expressam a finalidade.
O catálogo oficial fornece aliases da paleta clara e escura para essas funções. A tabela de referência mantém essas informações, em vez de prometer um valor hexadecimal permanente. O exemplo incorporado usa uma paleta ilustrativa e está identificado como tal. As cores tornam o exemplo local legível, mas não substituem a fonte oficial para um tema Atlaskit de produção.
Sistema de design Atlassian Uma base de oito pixels com incrementos fracionários deliberados
Interprete o sufixo como uma porcentagem
space.100 equivale a 8px; space.200, a 16px; space.025, a 2px. A escala inclui incrementos fracionários porque pequenos intervalos e alinhamentos ópticos exigem mais precisão do que unidades inteiras de oito pixels. O quadro usa space.300 ao redor do conteúdo principal e space.150 entre os elementos locais. Uma chamada de token retorna um valor CSS compatível com o tema, não um número para fazer cálculos JavaScript arbitrários.
Use o mesmo espaçamento para relações equivalentes. A distância entre a chave de uma issue e seu título deve ser menor do que o espaço que separa a lista de issues do painel de inspeção. Existem tokens de espaçamento negativo, mas o layout comum do quadro não precisa deles. Uma área de trabalho densa deve ganhar espaço por meio da composição, não sobrepondo elementos sem relação entre si.
Sistema de design Atlassian Os tokens de tipografia são declarações completas de fontes
Não use font.body em font-size
O catálogo define explicitamente tokens compostos de fonte para a propriedade CSS font. O exemplo atribui font.heading.large ao título da página e font.heading.medium ao título dos detalhes. Usar um desses tokens como fontSize descartaria o contrato previsto. A função body é adequada a resumos curtos de issues, enquanto descrições longas podem usar font.body.large quando o layout ao redor favorecer a leitura.
As fontes atuais do aplicativo são Atlassian Sans e Atlassian Mono. A Sans deriva de Inter Variable; a Mono, de JetBrains Mono. Essa identidade é importante ao descrever o sistema, mas esta prévia independente não redistribui essas fontes. Ela usa uma fonte substituta do sistema e informa isso. Uma adoção em produção deve usar os meios de disponibilização de fontes e licenciamento compatíveis, em vez de renomear uma fonte qualquer.
Sistema de design Atlassian Use forma e elevação para explicar a área de trabalho
Um cartão é elevado porque é um objeto
A referência diferencia uma superfície rebaixada de agrupamento, cartões elevados e superfícies de sobreposição. Conceitualmente, um item de trabalho móvel pertence à camada elevada, enquanto uma coluna do quadro agrupa esses itens. Um painel de inspeção que faça parte da página normal não precisa automaticamente de sombra de sobreposição. Combine funções de superfície e sombra quando a elevação realmente for importante.
Os nomes de forma atuais incluem radius.xsmall em 2px, radius.small em 4px e radius.medium em 6px. Eles não correspondem à nomenclatura antiga border.radius que um desenvolvedor talvez conheça de outro sistema. A tabela mantém os nomes exatos. Controles nativos devem usar os estilos fornecidos; contêineres externos personalizados podem adotar a função relevante sem substituir classes geradas privadas.
Sistema de design Atlassian Selecionar um botão é diferente de fazer uma transição de issue
Escolha deliberadamente a aparência e o estado
A importação verificada de Button é @atlaskit/button/default/button. appearance="primary" destaca uma ação principal; isSelected indica a issue atual neste exemplo nativo compacto. Clicar nela altera apenas a issue em inspeção. Um controle separado edita o estado do fluxo de trabalho. Essa separação impede que selecionar uma linha inicie ou conclua o trabalho silenciosamente.
API também inclui isLoading, isDisabled, spacing="compact" e shouldFitContainer. O estado de carregamento representa uma operação em andamento, não um status permanente da issue. Uma ação desativada precisa ter um motivo compreensível, pois controles desativados podem ser ignorados na navegação por teclado. Por isso, o quadro independente mantém disponíveis os controles de inspeção e permite que o usuário consulte diretamente o estado local atual.
Sistema de design Atlassian Lozenge e Toggle comunicam tipos diferentes de estado
Status não é um modo de interação
As aparências de Lozenge incluem informação, perigo e sucesso, que o exemplo associa a Em andamento, Bloqueado e Concluído. As palavras transmitem o significado; a cor é redundante. Um item bloqueado continua bloqueado quando é selecionado. O filtro por responsável usa Toggle com isChecked e onChange, porque esse valor booleano afeta o que o quadro exibe, em vez de alterar qualquer item.
O seletor de estado local é intencionalmente simples e não implica um modelo real de permissões. Uma transição de item em produção pode exigir um motivo, uma função ou uma resposta do serviço. Mantenha essa lógica de autorização fora de Lozenge e mostre o resultado confirmado somente depois que o serviço o estabelecer.
A seleção identifica o item que está sendo inspecionado.
O estado do fluxo de trabalho descreve o próprio item de trabalho.
O filtro por responsável altera o conjunto visível sem mudar a atribuição.
Sistema de design Atlassian Inicialize o tema antes de renderizar superfícies com tokens personalizados
O carregamento do tema global é assíncrono
setGlobalTheme atualiza os atributos do tema no documento e carrega o tema selecionado CSS. A entrada aguarda essa operação antes de renderizar o quadro. Ela seleciona explicitamente os temas claro e escuro, com o modo claro ativo inicialmente. Um controle de preferências real pode atualizar colorMode pela mesma API, em vez de substituir as cores por valores aleatórios em linha.
As opções atuais de marca personalizada estão marcadas como alpha e usam um API UNSAFE. Este guia não adota esse caminho instável apenas para recolorir o exemplo. Primeiro, mantenha o contrato estável de tema semântico; depois, avalie a personalização experimental como uma decisão de dependência separada.
Sistema de design Atlassian Valide uma interação real de leitura de itens
Use os arquivos fornecidos em conjunto
O exemplo nativo precisa da entrada JSX, da importação do reset CSS e dos dois arquivos de configuração do Parcel. Ele inclui a coleção de itens, a seleção, o filtro por responsável, o mapeamento de status e uma mensagem de resultado atualizada em tempo real. A prévia independente amplia a composição com colunas e um painel de inspeção, mas continua sendo uma interpretação explicitamente identificada como HTML. Nenhum dos exemplos afirma se conectar ao Jira.
Quando um filtro exclui o item selecionado, o exemplo nativo mantém deliberadamente os detalhes dele. Assim, a pessoa ainda pode inspecionar o item, sem ser levada silenciosamente a outro. Um design de produção pode escolher outra política, mas deve explicá-la e preservar um foco significativo. Verifique o comportamento em uma tela estreita e também com todas as colunas visíveis.
Inspecione WEB-18 e, em seguida, selecione outro item sem mudar o estado do fluxo de trabalho.
Ative o filtro por responsável e confira quais itens continuam visíveis.
Mude o estado local selecionado do item e verifique se o texto do status corresponde à coluna.
Retorne ao quadro sem filtros e confirme que a identidade do mesmo item e o estado atualizado foram preservados.
Sistema de design Atlassian Exemplos de componentes do sistema de design
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação HTML/CSS com valores verificados de espaçamento e formas, paleta de cores ilustrativa e fontes do sistema como alternativa; não é um runtime do Jira nem do Atlaskit nativo.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Issue board — Atlassian interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#172b4d;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit}button{cursor:pointer}header{padding:16px 24px;border-bottom:1px solid #dfe1e6;display:flex;align-items:center;justify-content:space-between;gap:16px}header strong{font-size:18px}.logo{color:#0c66e4;margin-right:12px}button{border:0;border-radius:4px;background:#f1f2f4;color:#172b4d;padding:8px 12px}button:hover{background:#dcdfe4}button:focus-visible,select:focus-visible{outline:3px solid #0c66e4;outline-offset:2px}.primary{background:#0c66e4;color:white}.primary:hover{background:#0055cc}main{padding:24px}.crumb{color:#626f86;font-size:12px}h1{font-size:24px;line-height:32px;margin:8px 0 16px}.tools{display:flex;align-items:center;gap:12px;margin-bottom:24px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.column{background:#f7f8f9;min-height:280px;padding:8px;border-radius:6px}.column h2{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#626f86;margin:8px 4px 16px}.issue{text-align:left;background:white;box-shadow:0 1px 2px #091e4240;width:100%;margin-bottom:8px;padding:12px;display:block;border:2px solid transparent}.issue[aria-pressed=true]{border-color:#0c66e4}.issue:hover{background:#fff;border-color:#85b8ff}.issue strong{display:block;font-weight:500;min-height:46px}.meta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:11px;color:#626f86}.avatar{display:inline-grid;place-items:center;width:24px;height:24px;background:#dfe1e6;border-radius:50%;font-weight:600}.tag{font-size:11px;line-height:18px;padding:1px 5px;font-weight:700;border-radius:3px;display:inline-block;background:#dfe1e6}.tag[data-status="In progress"]{background:#e9f2ff;color:#0055cc}.tag[data-status=Blocked]{background:#ffedeb;color:#ae2a19}.tag[data-status=Done]{background:#dcfff1;color:#216e4e}aside{border-left:1px solid #dfe1e6;padding-left:24px}aside h2{font-size:18px;line-height:26px;margin:12px 0 24px}dl{margin:0}dt{font-weight:600;margin:20px 0 8px}dd{margin:0}select{padding:8px;border:1px solid #8590a2;border-radius:4px;background:white;color:#172b4d;max-width:100%}.empty{padding:12px;color:#626f86;font-size:12px}footer{border-top:1px solid #dfe1e6;padding:16px 24px;color:#626f86;font-size:11px}#announcement{min-height:20px;color:#44546f;margin-top:16px}@media(max-width:720px){main{padding:16px}.layout{grid-template-columns:1fr}.board{grid-template-columns:1fr}.column{min-height:100px}aside{border-left:0;border-top:1px solid #dfe1e6;padding:16px 0 0}.issue strong{min-height:0}header{padding:16px}.tools{flex-wrap:wrap}}
</style><header><strong><span class="logo">▲</span>Product delivery</strong><span class="tag">LOCAL DEMO</span></header><main><div class="crumb">Projects / Website / Board</div><h1>Website release</h1><div class="tools"><label><input type="checkbox" id="mine"> Only Maya’s issues</label><button id="reset">Reset board</button></div><div class="layout"><section class="board" aria-label="Issues by status" id="board"></section><aside aria-label="Selected issue"><span id="key" class="crumb"></span><h2 id="title"></h2><span id="badge" class="tag"></span><dl><dt>Assignee</dt><dd id="owner"></dd><dt>Description</dt><dd id="description"></dd><dt><label for="status">Move issue to</label></dt><dd><select id="status"><option>To do</option><option>In progress</option><option>Blocked</option><option>Done</option></select></dd></dl><p id="announcement" role="status"></p></aside></div></main><footer>Independent HTML/CSS interpretation of Atlassian spacing, semantic status and persistent issue selection. System font and sample colors; no Jira connection.</footer><script>
const initial=[{id:'WEB-18',title:'Audit navigation labels',owner:'Maya Chen',status:'To do',description:'Review the wording of top-level links and check that each label describes its destination.'},{id:'WEB-21',title:'Connect locale switcher',owner:'Theo Park',status:'In progress',description:'Keep the current resource selected when a reader switches between supported languages.'},{id:'WEB-24',title:'Resolve missing image credits',owner:'Maya Chen',status:'Blocked',description:'The launch requires confirmation of the source and permitted use of two editorial images.'}];let issues=structuredClone(initial),selected='WEB-21';const board=document.querySelector('#board'),status=document.querySelector('#status');
function render(){board.replaceChildren();for(const state of ['To do','In progress','Blocked / Done']){const col=document.createElement('section');col.className='column';const entries=issues.filter(x=>(state==='Blocked / Done'?['Blocked','Done'].includes(x.status):x.status===state)&&(!document.querySelector('#mine').checked||x.owner==='Maya Chen'));const h=document.createElement('h2');h.textContent=state+' · '+entries.length;col.append(h);for(const issue of entries){const b=document.createElement('button');b.className='issue';b.setAttribute('aria-pressed',String(selected===issue.id));const t=document.createElement('strong');t.textContent=issue.title;const meta=document.createElement('span');meta.className='meta';meta.textContent=issue.id;const av=document.createElement('span');av.className='avatar';av.textContent=issue.owner.split(' ').map(x=>x[0]).join('');av.title=issue.owner;meta.append(av);b.append(t,meta);b.onclick=()=>{selected=issue.id;render();document.querySelector('#announcement').textContent='Selected '+issue.id};col.append(b)}if(!entries.length){const p=document.createElement('p');p.className='empty';p.textContent='No matching issues';col.append(p)}board.append(col)}const item=issues.find(x=>x.id===selected);document.querySelector('#key').textContent=item.id;document.querySelector('#title').textContent=item.title;document.querySelector('#owner').textContent=item.owner;document.querySelector('#description').textContent=item.description;const badge=document.querySelector('#badge');badge.textContent=item.status;badge.dataset.status=item.status;status.value=item.status}
status.onchange=()=>{const i=issues.find(x=>x.id===selected);i.status=status.value;render();document.querySelector('#announcement').textContent=i.id+' moved to '+i.status+' in this local board.'};document.querySelector('#mine').onchange=render;document.querySelector('#reset').onclick=()=>{issues=structuredClone(initial);selected='WEB-21';document.querySelector('#mine').checked=false;render();document.querySelector('#announcement').textContent='Board reset.'};render();
</script></html>
As transições dos itens afetam apenas o quadro de exemplo. Esta entrada HTML não exercita a configuração de build do Compiled exigida pela implementação separada do Atlaskit.
Entrada da implementação nativa completa
A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
A lógica completa do quadro React e os trechos de configuração obrigatórios abaixo. Use Parcel com integração do Compiled; importar apenas o reset CSS não é suficiente para os pacotes atuais. Não se afirma que a compilação do pacote nativo tenha sido feita neste protótipo local.
O Parcel precisa processar os estilos Compiled distribuídos
Crie .parcelrc na raiz do projeto. Inicie o Parcel usando a entrada HTML depois de instalar as dependências listadas na configuração.
openIssueDetail é o manipulador do aplicativo; a configuração completa demonstra o estado da seleção.
Não faça o rótulo de status parecer um menu, a menos que ele realmente ofereça uma interação para mudar o status.
04
Sistema de design Atlassian Configuração do agente de IA
Ponto de partida para implementação
A lógica completa do quadro React e os trechos de configuração obrigatórios abaixo. Use Parcel com integração do Compiled; importar apenas o reset CSS não é suficiente para os pacotes atuais. Não se afirma que a compilação do pacote nativo tenha sido feita neste protótipo local.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
Um prompt para seu projeto
Prompt para agente de IA
Crie o exemplo fornecido de quadro com 18 itens do Atlassian React usando tokens @atlaskit, o reset CSS e a integração documentada do Compiled com Parcel. Use chamadas de tokens semânticos, funções tipográficas abreviadas e as importações verificadas de Button/Lozenge/Toggle. Mantenha independentes a seleção, o filtro por responsável e o estado do fluxo de trabalho. Preserve o contexto do item selecionado, anuncie as mudanças locais e não afirme haver conexão com o Jira nem permissões reais.
05
Sistema de design Atlassian Fontes e escopo
Estudo OpenDesign dos pacotes públicos do Atlassian Design System React, conferido com a documentação vinculada em outubro de 2026. O quadro incorporado é uma interpretação HTML/CSS com valores de paleta ilustrativos e itens fictícios, não é o Jira nem um runtime nativo do Atlaskit. O acesso público aos pacotes não implica direitos irrestritos ao uso da marca Atlassian nem o mesmo suporte disponível internamente.
