@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/Tabs/Tabs.css

@@ -8,6 +8,36 @@
     font-family: var(--umds-semantic-font-family-base);
 }
 
+/* ============================
+   Barra: o tablist e, com onAdd, o botão "+" (fora do tablist)
+   ============================ */
+.umds-tabs__bar {
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+}
+
+.umds-tabs__bar .umds-tabs__list {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* Com "+", a lista não estica: o botão fica logo depois da última aba. */
+.umds-tabs__bar--com-add .umds-tabs__list {
+    flex: 0 1 auto;
+}
+
+/* Envoltório de cada aba (presentation). Sem × é transparente para o layout;
+   com × vira a âncora do botão de fechar. */
+.umds-tabs__item {
+    display: contents;
+}
+
+.umds-tabs__item--closable {
+    display: flex;
+    position: relative;
+}
+
 /* ============================
    Tab List (tablist)
    ============================ */
@@ -150,3 +180,105 @@
 .umds-tabs-content {
     width: 100%;
 }
+
+/* ============================
+   Contador em pílula (count)
+   Cinza nas abas inativas, azul na ativa. 18px de altura (16 + 2, dois degraus
+   do DS somados; sem token próprio).
+   ============================ */
+.umds-tabs__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+    min-width: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+    padding: 0 var(--umds-primitive-spacing-quarck);
+    border-radius: var(--umds-primitive-border-radius-pill);
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-down);
+    font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    line-height: 1;
+}
+
+.umds-tabs__tab--selected .umds-tabs__count {
+    background-color: var(--umds-semantic-color-primary-pure);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-tabs__tab--disabled .umds-tabs__count {
+    background-color: var(--umds-semantic-color-neutral-light-up);
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+/* ============================
+   Aba fechável (closable): × em botão próprio, sobre a folga direita da aba
+   ============================ */
+.umds-tabs__tab--closable {
+    /* folga para o ×: 8 de margem + 20 do botão + 4 de respiro */
+    padding-right: var(--umds-primitive-spacing-xs); /* 32px */
+}
+
+.umds-tabs__close {
+    position: absolute;
+    top: 50%;
+    right: var(--umds-primitive-spacing-nano);
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px; /* círculo de 20px: o glifo é de 10px */
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: var(--umds-primitive-border-radius-circular);
+    background: transparent;
+    color: var(--umds-semantic-color-neutral-dark-down);
+    cursor: pointer;
+}
+
+.umds-tabs__close:hover:not(:disabled) {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-tabs__close:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-primary-pure);
+    outline-offset: 1px;
+}
+
+.umds-tabs__close:disabled {
+    cursor: not-allowed;
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+/* ============================
+   Botão "+" (onAdd)
+   ============================ */
+.umds-tabs__add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    flex-shrink: 0;
+    width: var(--umds-primitive-spacing-xs); /* 32px */
+    height: var(--umds-primitive-spacing-xs);
+    margin-left: var(--umds-primitive-spacing-quarck);
+    padding: 0;
+    border: none;
+    border-radius: var(--umds-primitive-border-radius-sm);
+    background: transparent;
+    color: var(--umds-semantic-color-neutral-dark-down);
+    cursor: pointer;
+}
+
+.umds-tabs__add:hover {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-tabs__add:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-primary-pure);
+    outline-offset: 2px;
+}

package/dist/components/Tabs/Tabs.d.ts

@@ -23,6 +23,13 @@ export interface TabsProps {
      * como gerar um id compartilhado automaticamente).
      */
     id?: string;
+    /**
+     * Mostra o botão "+" depois da última aba (abrir nova aba, como no navegador)
+     * e o chama com `onAdd`. O botão fica fora do `tablist`.
+     */
+    onAdd?: (event?: any) => void;
+    /** Nome acessível do botão "+". Troque para traduzir. @default 'Adicionar aba' */
+    addLabel?: string;
     /** Classes CSS adicionais */
     className?: string;
     /** Subcomponentes Tab */

package/dist/components/Tabs/Tabs.js

@@ -1,15 +1,26 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Tabs.css';
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import Icon from "../Icon/Icon";
 import TabsContext from "./tabs.context";
 function Tabs(props) {
     function classes() {
         return ["umds-tabs", props.className].filter(Boolean).join(" ");
     }
+    function barClasses() {
+        return ["umds-tabs__bar", props.onAdd ? "umds-tabs__bar--com-add" : ""]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function handleAdd(event) {
+        if (typeof props.onAdd === "function")
+            props.onAdd(event);
+    }
     return (_jsx(TabsContext.Provider, { value: {
             value: props.value,
             onChange: props.onChange,
             tabsId: props.id,
-        }, children: _jsx("div", { className: classes(), children: _jsx("div", { role: "tablist", className: "umds-tabs__list", "aria-label": props.ariaLabel, children: props.children }) }) }));
+        }, children: _jsx("div", { className: classes(), children: _jsxs("div", { className: barClasses(), children: [_jsx("div", { role: "tablist", className: "umds-tabs__list", "aria-label": props.ariaLabel, children: props.children }), props.onAdd ? (_jsx("button", { type: "button", className: "umds-tabs__add", "aria-label": props.addLabel || "Adicionar aba", onClick: (event) => handleAdd(event), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: faPlus }) })) : null] }) }) }));
 }
 export default Tabs;

package/dist/components/Tag/Tag.css

@@ -1,7 +1,8 @@
 /* ============================================
    Tag Component
-   Aparências (appearance): outlined, solid
-   Tamanhos: sm, md, lg
+   Aparências (appearance): outlined, solid, soft
+   Tamanhos: xs, sm, md, lg
+   Modificador: pill
    ============================================ */
 
 .umds-tag {
@@ -84,6 +85,26 @@
 
 /* ── Tamanhos ── */
 
+/* xs: 18px de altura (12 de fonte com line-height 1 + 2 + 2 de padding + 2 de
+   borda). O alvo de toque do × e dos ícones clicáveis continua em 24px, mas a
+   margem negativa devolve o excesso, então a tag não cresce. */
+.umds-tag--xs {
+    gap: var(--umds-primitive-spacing-quarck);
+    padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano);
+    border-radius: var(--umds-primitive-border-radius-sm);
+    font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+    line-height: 1;
+}
+
+.umds-tag--xs .umds-icon {
+    font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+.umds-tag--xs .umds-tag__close,
+.umds-tag--xs .umds-tag__icon--clickable {
+    margin: calc(-1 * var(--umds-primitive-spacing-nano)) 0;
+}
+
 .umds-tag--sm {
     gap: var(--umds-primitive-spacing-quarck);
     padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 3px: candidato a novo token */
@@ -132,6 +153,38 @@
     border-color: var(--umds-semantic-color-primary-dark);
 }
 
+/* ── Aparência: Soft (fundo claro da cor, sem contorno) ── */
+.umds-tag--soft {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    border-color: transparent;
+    color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-tag--soft.umds-tag--primary {
+    background-color: var(--umds-semantic-color-primary-light);
+    color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-tag--soft.umds-tag--positive {
+    background-color: var(--umds-semantic-color-feedback-positive-light);
+    color: var(--umds-semantic-color-feedback-positive-dark);
+}
+
+.umds-tag--soft.umds-tag--negative {
+    background-color: var(--umds-semantic-color-feedback-negative-light);
+    color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-tag--soft.umds-tag--info {
+    background-color: var(--umds-semantic-color-feedback-info-light);
+    color: var(--umds-semantic-color-feedback-info-dark);
+}
+
+/* ── Formato pílula (depois dos tamanhos, para vencer o raio deles) ── */
+.umds-tag--pill {
+    border-radius: var(--umds-primitive-border-radius-pill);
+}
+
 /* ── Variantes semânticas (paridade com o Badge) ──
    neutral (default) não gera classe — visual histórico intacto. */
 .umds-tag--outlined.umds-tag--primary {
@@ -174,6 +227,36 @@
 
 /* solid+primary = visual default do solid (primary-pure) — sem regra extra. */
 
+/* ── Variante new (novidade, amarelo) ──
+   O DS não tem token semântico de amarelo: usa os primitivos de amarelo e o
+   cinza escuro, fixos nos temas (candidato a token semântico de destaque). */
+.umds-tag--new {
+    font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+.umds-tag--outlined.umds-tag--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    border-color: var(--umds-primitive-yellow-pure);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    color: var(--umds-primitive-yellow-dark);
+}
+
+.umds-tag--solid.umds-tag--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    background-color: var(--umds-primitive-yellow-medium);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    border-color: var(--umds-primitive-yellow-medium);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- par fixo do amarelo: o semântico inverte no tema escuro e perderia o contraste */
+    color: var(--umds-primitive-gray-darkest);
+}
+
+.umds-tag--soft.umds-tag--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    background-color: var(--umds-primitive-yellow-light);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    color: var(--umds-primitive-yellow-dark);
+}
+
 /* ── Disabled ── */
 .umds-tag--disabled {
     opacity: 0.5;

package/dist/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import './Tag.css';
 /**
  * Componente Tag para exibir rótulos, categorias e seleções.
- * Suporta aparências outlined/solid, 3 tamanhos e ícones opcionais.
+ * Suporta aparências outlined/solid/soft, 4 tamanhos, formato pílula e ícones opcionais.
  * Ideal para uso em multi-select, filtros e categorização.
  * @quandoUsar Rótulo ESTÁTICO que classifica ou dá status a um item: categoria de um processo, estado ("Em andamento"), prioridade. É leitura, não controle.
  * @quandoNaoUsar Quando o usuário pode remover o item ou alternar a seleção — use `Chips`. Para contagem numérica sobreposta a um ícone, use `Badge`.
@@ -16,22 +16,29 @@ export interface TagProps {
      */
     label?: string;
     /**
-     * Estilo visual da tag.
+     * Estilo visual da tag. `soft` é o fundo claro da cor da variante, sem
+     * contorno (setores, perfil, "Publicado", "Dado simulado").
      * @default 'outlined'
      */
-    appearance?: "outlined" | "solid";
+    appearance?: "outlined" | "solid" | "soft";
+    /**
+     * Formato de pílula (cantos totalmente arredondados).
+     * @default false
+     */
+    pill?: boolean;
     /**
      * Variante semântica de cor (paridade com o Badge) — para tag de STATUS
      * (achado mobile/prefeitura: sem isso, status exigia trocar para Badge).
      * 'neutral' mantém o visual atual.
      * @default 'neutral'
      */
-    variant?: "neutral" | "primary" | "positive" | "negative" | "info";
+    variant?: "neutral" | "primary" | "positive" | "negative" | "info" | "new";
     /**
-     * Tamanho da tag.
+     * Tamanho da tag. `xs` é a compacta de 18px (`line-height: 1`), para linha
+     * de lista e card; `sm` continua com 27px.
      * @default 'md'
      */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /**
      * Ícone Font Awesome exibido à esquerda do label.
      */

package/dist/components/Tag/Tag.js

@@ -13,6 +13,7 @@ function Tag(props) {
             props.variant && props.variant !== "neutral"
                 ? `umds-tag--${props.variant}`
                 : "",
+            props.pill ? "umds-tag--pill" : "",
             props.disabled ? "umds-tag--disabled" : "",
             props.className,
         ]

package/dist/components/Text/Text.js

@@ -77,7 +77,7 @@ function Text(props) {
             .filter(Boolean)
             .join(" ");
     }
-    function style() {
+    function estiloInline() {
         const styles = {};
         if (props.maxLines) {
             styles["--umds-text-max-lines"] = String(props.maxLines);
@@ -98,6 +98,6 @@ function Text(props) {
         }
         return out;
     }
-    return (_jsxs(_Fragment, { children: [elementTag() === "h1" ? (_jsx("h1", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h2" ? (_jsx("h2", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h3" ? (_jsx("h3", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h4" ? (_jsx("h4", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h5" ? (_jsx("h5", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h6" ? (_jsx("h6", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "p" ? (_jsx("p", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "span" ? (_jsx("span", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "label" ? (_jsx("label", { htmlFor: props.forId, id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "div" ? (_jsx("div", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: props.children })) : null] }));
+    return (_jsxs(_Fragment, { children: [elementTag() === "h1" ? (_jsx("h1", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h2" ? (_jsx("h2", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h3" ? (_jsx("h3", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h4" ? (_jsx("h4", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h5" ? (_jsx("h5", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "h6" ? (_jsx("h6", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "p" ? (_jsx("p", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "span" ? (_jsx("span", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "label" ? (_jsx("label", { htmlFor: props.forId, id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null, elementTag() === "div" ? (_jsx("div", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: props.children })) : null] }));
 }
 export default Text;

package/dist/components/Textarea/Textarea.css

@@ -128,6 +128,14 @@
     resize: none;
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-textarea--readonly .umds-textarea__control::placeholder {
+    color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* Footer (Helper/Error + Counter) */
 .umds-textarea__footer {
     display: flex;

package/dist/components/TimePicker/TimePicker.css

@@ -297,6 +297,14 @@
   border-color: var(--umds-semantic-field-border-default);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-timepicker--readonly .umds-timepicker__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Alto contraste ──
    O traço do painel é neutral-light-medium — #5A5A5A neste tema, 3:1 sobre o
    preto. As superfícies flutuantes do tema usam a borda branca

package/dist/components/Tooltip/Tooltip.css

@@ -153,6 +153,31 @@
   bottom: 12px;
 }
 
+/* ── variant="dark": balão compacto escuro ──
+   background-dark é a superfície invertida do tema (azul-marinho no claro, claro
+   no escuro, branco no alto contraste) e neutral-light-pure o texto sobre ela.
+   Fonte de 12px (a escala do DS não tem o 11px do CrisDoc). */
+.umds-tooltip__floating--dark {
+  max-width: 220px; /* quebra do CrisDoc; maxWidth sobrescreve */
+}
+
+.umds-tooltip__bubble--dark {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano);
+  border-radius: var(--umds-primitive-border-radius-xs); /* 4px */
+  background-color: var(--umds-semantic-color-background-dark);
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-tooltip__bubble--dark .umds-tooltip__title,
+.umds-tooltip__bubble--dark .umds-tooltip__content {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-tooltip__bubble--dark .umds-tooltip__arrow {
+  background-color: var(--umds-semantic-color-background-dark);
+  border-color: var(--umds-semantic-color-background-dark);
+}
+
 /* ── Alto contraste ──
    O balão usa neutral-light-pure, que neste tema é preto como a página, e a
    sombra não aparece: sem traço o balão some. Outline para dentro (não

package/dist/components/Tooltip/Tooltip.d.ts

@@ -13,6 +13,17 @@ export interface TooltipProps {
     side?: "top" | "bottom" | "left" | "right";
     /** Alinhamento no eixo cruzado: "center" usa só o `side`; "start"/"end" viram placements compostos (`top-start`, `right-end`…). */
     align?: "start" | "center" | "end";
+    /**
+     * Aparência do balão. `dark` é o compacto escuro (fundo `background-dark`,
+     * texto `neutral-light-pure`, padding 4/8, raio 4, no máximo 220px de
+     * largura): o balão de ícone, sigla e botão de barra de ferramentas. Os dois
+     * tokens são o par invertido do tema, então o contraste vale nos claros,
+     * escuro e alto contraste.
+     * @default 'default'
+     */
+    variant?: "default" | "dark";
+    /** Largura máxima do balão, qualquer valor CSS (`"220px"`, `"20rem"`). Vence o teto de cada variante (280px no padrão, 220px no dark). */
+    maxWidth?: string;
     sideOffset?: number;
     delayDuration?: number;
     disabled?: boolean;

package/dist/components/Tooltip/Tooltip.js

@@ -241,13 +241,28 @@ function Tooltip(props) {
         closeNow();
     }
     function floatingStyle() {
-        return {
+        const estilo = {
             transform: "translate(" + posX + "px, " + posY + "px)",
             visibility: positioned ? "visible" : "hidden",
         };
+        if (props.maxWidth)
+            estilo.maxWidth = props.maxWidth;
+        return estilo;
+    }
+    function floatingClasses() {
+        return [
+            "umds-tooltip__floating",
+            props.variant === "dark" ? "umds-tooltip__floating--dark" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
     }
     function bubbleClasses() {
-        return ["umds-tooltip__bubble", open ? "umds-tooltip__bubble--open" : ""]
+        return [
+            "umds-tooltip__bubble",
+            props.variant === "dark" ? "umds-tooltip__bubble--dark" : "",
+            open ? "umds-tooltip__bubble--open" : "",
+        ]
             .filter(Boolean)
             .join(" ");
     }
@@ -300,6 +315,6 @@ function Tooltip(props) {
             stopKeydownWatch();
         };
     }, []);
-    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsxs("span", { className: "umds-tooltip__descricao", "aria-hidden": "true", id: descIdText(), children: [props.title ? _jsx(_Fragment, { children: tituloDescrito() }) : null, props.content ? _jsx(_Fragment, { children: props.content }) : null] }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-tooltip__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleIdText(), "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses() })] }) })) : null })] }));
+    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsxs("span", { className: "umds-tooltip__descricao", "aria-hidden": "true", id: descIdText(), children: [props.title ? _jsx(_Fragment, { children: tituloDescrito() }) : null, props.content ? _jsx(_Fragment, { children: props.content }) : null] }), _jsx(Portal, { children: mounted ? (_jsx("span", { ref: floatingRef, className: floatingClasses(), style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleIdText(), "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses() })] }) })) : null })] }));
 }
 export default Tooltip;

package/dist/index.d.ts

@@ -1,10 +1,14 @@
 export * from "./utils/theme";
 export * from "./utils/toast";
 export * from "./utils/density";
+export * from "./utils/paleta-de-cores";
 export { library } from "@fortawesome/fontawesome-svg-core";
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as AILabel } from "./components/AILabel/AILabel";
 export { default as AIContent } from "./components/AIContent/AIContent";
+export { default as Calendar } from "./components/Calendar/Calendar";
+export { default as Coachmark } from "./components/Coachmark/Coachmark";
+export { default as CodeBlock } from "./components/CodeBlock/CodeBlock";
 export { default as ConfirmAIAction } from "./components/ConfirmAIAction/ConfirmAIAction";
 export { default as Alert } from "./components/Alert/Alert";
 export { default as AppHeader } from "./components/AppHeader/AppHeader";
@@ -26,11 +30,13 @@ export { default as Button } from "./components/Button/Button";
 export { default as Card } from "./components/Card/Card";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as Chips } from "./components/Chips/Chips";
+export { default as ColorPicker } from "./components/ColorPicker/ColorPicker";
 export { default as Combobox } from "./components/Combobox/Combobox";
 export { default as ConfirmDialog } from "./components/ConfirmDialog/ConfirmDialog";
 export { default as Container } from "./components/Container/Container";
 export { default as DataTable } from "./components/DataTable/DataTable";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as DescriptionList } from "./components/DescriptionList/DescriptionList";
 export { default as Divider } from "./components/Divider/Divider";
 export { default as DonutChart } from "./components/Chart/DonutChart";
 export { default as Drawer } from "./components/Drawer/Drawer";
@@ -39,15 +45,21 @@ export { default as EmptyState } from "./components/EmptyState/EmptyState";
 export { default as FileInput } from "./components/FileInput/FileInput";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as Icon } from "./components/Icon/Icon";
+export { default as IconPicker } from "./components/IconPicker/IconPicker";
 export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";
+export { default as List } from "./components/List/List";
+export { default as ListItem } from "./components/List/ListItem";
 export { default as Logo } from "./components/Logo/Logo";
 export { default as Modal } from "./components/Modal/Modal";
 export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+export { default as OrgChart } from "./components/OrgChart/OrgChart";
+export { default as OtpInput } from "./components/OtpInput/OtpInput";
 export { default as PageHeader } from "./components/PageHeader/PageHeader";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as PhoneInput } from "./components/PhoneInput/PhoneInput";
@@ -55,6 +67,7 @@ export { default as Podium } from "./components/Podium/Podium";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/Radio/RadioGroup";
+export { default as RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { default as SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
 export { default as Select } from "./components/Select/Select";
 export { default as SidePanel } from "./components/SidePanel/SidePanel";
@@ -85,6 +98,9 @@ export { default as Tree } from "./components/Tree/Tree";
 export type * from "./components/Accordion/Accordion";
 export type * from "./components/AILabel/AILabel";
 export type * from "./components/AIContent/AIContent";
+export type * from "./components/Calendar/Calendar";
+export type * from "./components/Coachmark/Coachmark";
+export type * from "./components/CodeBlock/CodeBlock";
 export type * from "./components/ConfirmAIAction/ConfirmAIAction";
 export type * from "./components/Alert/Alert";
 export type * from "./components/AppHeader/AppHeader";
@@ -106,11 +122,13 @@ export type * from "./components/Button/Button";
 export type * from "./components/Card/Card";
 export type * from "./components/Checkbox/Checkbox";
 export type * from "./components/Chips/Chips";
+export type * from "./components/ColorPicker/ColorPicker";
 export type * from "./components/Combobox/Combobox";
 export type * from "./components/ConfirmDialog/ConfirmDialog";
 export type * from "./components/Container/Container";
 export type * from "./components/DataTable/DataTable";
 export type * from "./components/DatePicker/DatePicker";
+export type * from "./components/DescriptionList/DescriptionList";
 export type * from "./components/Divider/Divider";
 export type * from "./components/Chart/DonutChart";
 export type * from "./components/Drawer/Drawer";
@@ -119,15 +137,21 @@ export type * from "./components/EmptyState/EmptyState";
 export type * from "./components/FileInput/FileInput";
 export type * from "./components/Grid/Grid";
 export type * from "./components/Icon/Icon";
+export type * from "./components/IconPicker/IconPicker";
 export type * from "./components/Input/Input";
 export type * from "./components/Kanban/Kanban";
 export type * from "./components/Kanban/KanbanCard";
 export type * from "./components/Kanban/KanbanColumn";
+export type * from "./components/Kbd/Kbd";
 export type * from "./components/Link/Link";
 export type * from "./components/Chart/LineChart";
+export type * from "./components/List/List";
+export type * from "./components/List/ListItem";
 export type * from "./components/Logo/Logo";
 export type * from "./components/Modal/Modal";
 export type * from "./components/MultiSelect/MultiSelect";
+export type * from "./components/OrgChart/OrgChart";
+export type * from "./components/OtpInput/OtpInput";
 export type * from "./components/PageHeader/PageHeader";
 export type * from "./components/Pagination/Pagination";
 export type * from "./components/PhoneInput/PhoneInput";
@@ -135,6 +159,7 @@ export type * from "./components/Podium/Podium";
 export type * from "./components/ProgressBar/ProgressBar";
 export type * from "./components/Radio/Radio";
 export type * from "./components/Radio/RadioGroup";
+export type * from "./components/RichTextEditor/RichTextEditor";
 export type * from "./components/SegmentedControl/SegmentedControl";
 export type * from "./components/Select/Select";
 export type * from "./components/SidePanel/SidePanel";