@sofya-ds/react 1.10.0 → 1.11.0

package/dist/index.js

@@ -107,14 +107,27 @@ import * as React2 from "react";
 // src/components/icon-data.ts
 import {
   IconAdjustmentsHorizontalFilled,
+  IconAlignCenter,
+  IconAlignJustified,
+  IconAlignLeft,
+  IconAlignRight,
   IconArrowUp,
   IconArchive,
+  IconBold,
   IconBuildingHospital,
   IconBooks,
   IconBulb,
   IconChartBar,
   IconCheck,
   IconChecklist,
+  IconCode,
+  IconItalic,
+  IconLink,
+  IconList,
+  IconListNumbers,
+  IconQuote,
+  IconStrikethrough,
+  IconUnderline,
   IconChevronLeft,
   IconChevronDown,
   IconChevronUp,
@@ -152,14 +165,27 @@ import {
 } from "@tabler/icons-react";
 var tablerIconRegistry = {
   IconAdjustmentsHorizontalFilled,
+  IconAlignCenter,
+  IconAlignJustified,
+  IconAlignLeft,
+  IconAlignRight,
   IconArrowUp,
   IconArchive,
+  IconBold,
   IconBuildingHospital,
   IconBooks,
   IconBulb,
   IconChartBar,
   IconCheck,
   IconChecklist,
+  IconCode,
+  IconItalic,
+  IconLink,
+  IconList,
+  IconListNumbers,
+  IconQuote,
+  IconStrikethrough,
+  IconUnderline,
   IconChevronLeft,
   IconChevronDown,
   IconChevronUp,
@@ -252,7 +278,20 @@ var legacyIconToTablerNameMap = {
   "remove": "IconTrashX",
   "lixeira": "IconTrash",
   "settings": "IconSettings",
-  "edit": "IconEdit"
+  "edit": "IconEdit",
+  "bold": "IconBold",
+  "italic": "IconItalic",
+  "underline": "IconUnderline",
+  "strikethrough": "IconStrikethrough",
+  "list-bullet": "IconList",
+  "list-numbers": "IconListNumbers",
+  "link": "IconLink",
+  "quote": "IconQuote",
+  "code": "IconCode",
+  "align-left": "IconAlignLeft",
+  "align-center": "IconAlignCenter",
+  "align-right": "IconAlignRight",
+  "align-justify": "IconAlignJustified"
 };
 var iconNames = Object.keys(legacyIconToTablerNameMap);
 var iconRegistry = Object.fromEntries(
@@ -405,7 +444,13 @@ import {
 import { jsx as jsx3 } from "react/jsx-runtime";
 var textSizeOptions = sofyaTextStyleNames;
 var textVariantOptions = ["default", "gradient", "shiny", "split"];
+var textToneOptions = ["default", "soft", "subtle"];
 var textSplitTypeOptions = ["chars", "words", "words, chars"];
+var textToneClassNames = {
+  default: "text-[color:var(--sofya-text-default)]",
+  soft: "text-[color:var(--sofya-text-soft)]",
+  subtle: "text-[color:var(--sofya-text-subtle)]"
+};
 var defaultElements = {
   "display-xl": "h1",
   "display-lg": "h1",
@@ -509,6 +554,7 @@ var Text = React3.forwardRef(function Text2({
   splitThreshold = 0.1,
   splitType = "chars",
   style,
+  tone = "default",
   variant = "default",
   weight,
   ...props
@@ -631,16 +677,17 @@ var Text = React3.forwardRef(function Text2({
       ref: setRefs,
       "data-text-size": size,
       "data-text-variant": variant,
+      "data-text-tone": tone,
       "aria-label": shouldSplit ? props["aria-label"] ?? splitText ?? void 0 : props["aria-label"],
-      className: cn("m-0 text-foreground", textVariantClassNames[variant], className),
+      className: cn("m-0", textToneClassNames[tone], textVariantClassNames[variant], className),
       style: { ...textSizeStyles[size], ...textVariantStyles[variant], ...weight != null && { fontWeight: weight }, ...style },
       ...props,
       children: shouldSplit ? renderSplitChildren() : children
     }
   );
 });
-function renderTextContent(children, { as, className, size = "body", style, variant = "default", weight } = {}) {
-  return isTextContent(children) ? /* @__PURE__ */ jsx3(Text, { as, className, size, style, variant, weight, children }) : children;
+function renderTextContent(children, { as, className, size = "body", style, tone = "default", variant = "default", weight } = {}) {
+  return isTextContent(children) ? /* @__PURE__ */ jsx3(Text, { as, className, size, style, tone, variant, weight, children }) : children;
 }
 
 // src/components/accordion.tsx
@@ -797,193 +844,17 @@ var AccordionContent = React4.forwardRef(({ className, children, contentClassNam
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 // src/components/alert.tsx
-import * as React5 from "react";
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var alertToneOptions = [
-  "default",
-  "info",
-  "success",
-  "warning",
-  "destructive"
-];
-var alertSizeOptions = ["sm", "default", "lg"];
-var alertVariants = cva2("flex w-full items-start border", {
-  variants: {
-    size: {
-      sm: "gap-2 rounded-[14px] px-4 py-2",
-      default: "gap-4 rounded-[16px] px-4 py-4",
-      lg: "gap-4 rounded-[18px] px-6 py-4"
-    },
-    tone: {
-      default: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
-      info: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
-      success: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
-      warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]",
-      destructive: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
-    }
-  },
-  defaultVariants: {
-    size: "default",
-    tone: "default"
-  }
-});
-var toneIconMap = {
-  info: "lightbulb",
-  success: "check",
-  warning: "question",
-  destructive: "x"
-};
-var Alert = React5.forwardRef(function Alert2({
-  children,
-  className,
-  icon,
-  role,
-  showToneIcon = true,
-  size,
-  tone,
-  ...props
-}, ref) {
-  const resolvedSize = size ?? "default";
-  const resolvedTone = tone ?? "default";
-  const resolvedRole = role ?? (resolvedTone === "warning" || resolvedTone === "destructive" ? "alert" : "status");
-  const toneIconName = resolvedTone !== "default" ? toneIconMap[resolvedTone] : void 0;
-  const resolvedIcon = icon ?? (showToneIcon && toneIconName ? /* @__PURE__ */ jsx5(Icon, { name: toneIconName, size: 16, "aria-hidden": "true" }) : null);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ref,
-      "data-size": resolvedSize,
-      "data-slot": "alert",
-      "data-tone": resolvedTone,
-      role: resolvedRole,
-      className: cn(
-        alertVariants({ size: resolvedSize, tone: resolvedTone }),
-        className
-      ),
-      ...props,
-      children: [
-        resolvedIcon ? /* @__PURE__ */ jsx5(
-          "span",
-          {
-            "data-slot": "alert-icon",
-            className: "mt-2 inline-flex h-4 w-4 shrink-0 items-center justify-center text-current [&>svg]:h-4 [&>svg]:w-4",
-            children: resolvedIcon
-          }
-        ) : null,
-        /* @__PURE__ */ jsx5("div", { "data-slot": "alert-content", className: "flex min-w-0 flex-1 flex-col", children })
-      ]
-    }
-  );
-});
-var AlertTitle = React5.forwardRef(function AlertTitle2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-title",
-      className: cn("text-current", className),
-      ...props,
-      children: renderTextContent(children, {
-        as: "span",
-        className: "block text-current",
-        size: "h4"
-      })
-    }
-  );
-});
-var AlertDescription = React5.forwardRef(function AlertDescription2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-description",
-      className: cn("[&:not(:first-child)]:mt-2 text-current/80", className),
-      ...props,
-      children: renderTextContent(children, {
-        as: "span",
-        className: "block text-current/80",
-        size: "tiny"
-      })
-    }
-  );
-});
-Alert.displayName = "Alert";
-AlertTitle.displayName = "AlertTitle";
-AlertDescription.displayName = "AlertDescription";
-
-// src/components/badge.tsx
+import * as React9 from "react";
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var badgeVariantOptions = [
-  "default",
-  "secondary",
-  "outline",
-  "success",
-  "warning",
-  "destructive",
-  "pill"
-];
-var badgeAlertOptions = ["default", "medium", "high"];
-var badgePillToneOptions = ["neutral", "danger"];
-var badgeVariants = cva3(
-  "inline-flex min-h-[34px] items-center justify-center whitespace-nowrap rounded-[5px] px-4 py-2 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-semibold uppercase leading-none tracking-[0.08em] transition-colors duration-sofya ease-sofya",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-accent/10 text-accent",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        outline: "border border-border bg-background text-foreground",
-        success: "border-transparent bg-success/10 text-success",
-        warning: "border-transparent bg-warning/10 text-warning",
-        destructive: "border-transparent bg-destructive/10 text-destructive",
-        pill: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var badgeAlertVariants = cva3(
-  "inline-flex min-h-[34px] items-center justify-center whitespace-nowrap rounded-[5px] px-4 py-2 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-semibold uppercase leading-none tracking-[0.08em] transition-colors duration-sofya ease-sofya",
-  {
-    variants: {
-      alert: {
-        default: "border-transparent bg-accent/10 text-accent",
-        medium: "border-transparent bg-[color:var(--sofya-tone-warning-background)] text-warning",
-        high: "border-transparent bg-[color:var(--sofya-tone-destructive-background)] text-destructive"
-      }
-    },
-    defaultVariants: {
-      alert: "default"
-    }
-  }
-);
-var badgePillVariants = cva3(
-  "inline-flex h-[30px] items-center justify-center whitespace-nowrap rounded-full border px-4 py-2 [font-family:var(--sofya-text-extra-tiny-font-family)] text-[length:var(--sofya-text-extra-tiny-font-size)] font-semibold leading-none tracking-normal transition-colors duration-sofya ease-sofya",
-  {
-    variants: {
-      tone: {
-        neutral: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
-        danger: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
-      }
-    },
-    defaultVariants: {
-      tone: "neutral"
-    }
-  }
-);
-function Badge({ className, variant, alert, pillTone, ...props }) {
-  const badgeClassName = variant === "pill" ? badgePillVariants({ tone: pillTone }) : alert ? badgeAlertVariants({ alert }) : badgeVariants({ variant });
-  return /* @__PURE__ */ jsx6("div", { className: cn(badgeClassName, className), ...props });
-}
 
-// src/components/button.tsx
+// src/components/close-button.tsx
 import * as React8 from "react";
+
+// src/components/button.tsx
+import * as React7 from "react";
 import { IconLoader2 } from "@tabler/icons-react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva as cva4 } from "class-variance-authority";
+import { cva as cva2 } from "class-variance-authority";
 
 // src/components/button-language-flags.ts
 function createFlagDataUri(svg) {
@@ -1108,9 +979,9 @@ var dropdownLanguageFlagSrc = {
 };
 
 // src/components/button-ripple.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 import { motion, useReducedMotion } from "motion/react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var MAX_ACTIVE_RIPPLES = 3;
 var buttonRippleVariantClasses = {
   default: "bg-[hsl(var(--sofya-primary-foreground)/0.82)] mix-blend-screen",
@@ -1137,15 +1008,15 @@ function useButtonRippleState({
   variant
 }) {
   const prefersReducedMotion = Boolean(useReducedMotion());
-  const [ripples, setRipples] = React6.useState([]);
-  const rippleIdRef = React6.useRef(0);
-  const lastRippleAtRef = React6.useRef(0);
-  const handleRippleComplete = React6.useCallback((rippleId) => {
+  const [ripples, setRipples] = React5.useState([]);
+  const rippleIdRef = React5.useRef(0);
+  const lastRippleAtRef = React5.useRef(0);
+  const handleRippleComplete = React5.useCallback((rippleId) => {
     setRipples(
       (currentRipples) => currentRipples.filter((currentRipple) => currentRipple.id !== rippleId)
     );
   }, []);
-  const createRipple = React6.useCallback(
+  const createRipple = React5.useCallback(
     (currentTarget, clientX, clientY) => {
       const now = performance.now();
       if (now - lastRippleAtRef.current < 48) {
@@ -1184,7 +1055,7 @@ function useButtonRippleState({
     },
     [size]
   );
-  const handlePointerDown = React6.useCallback(
+  const handlePointerDown = React5.useCallback(
     (event) => {
       onPointerDown?.(event);
       if (event.defaultPrevented || disabled) {
@@ -1203,7 +1074,7 @@ function useButtonRippleState({
     },
     [createRipple, disabled, onPointerDown, prefersReducedMotion]
   );
-  const handleClick = React6.useCallback(
+  const handleClick = React5.useCallback(
     (event) => {
       if (!disabled && !prefersReducedMotion && event.detail === 0) {
         createRipple(event.currentTarget);
@@ -1230,12 +1101,12 @@ function ButtonRippleLayer({
   if (ripples.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx5(
     "span",
     {
       "aria-hidden": "true",
       className: "pointer-events-none absolute inset-0 z-[1] overflow-hidden rounded-[inherit]",
-      children: ripples.map((ripple) => /* @__PURE__ */ jsx7(
+      children: ripples.map((ripple) => /* @__PURE__ */ jsx5(
         motion.span,
         {
           className: cn(
@@ -1267,7 +1138,7 @@ function ButtonRippleLayer({
 }
 
 // src/components/button-loading-state.ts
-import * as React7 from "react";
+import * as React6 from "react";
 var BUTTON_SEQUENCE_MS = 250;
 function useButtonLoadingState({
   buttonRef,
@@ -1276,15 +1147,15 @@ function useButtonLoadingState({
   loading,
   rightIcon
 }) {
-  const expandedWidthRef = React7.useRef(void 0);
-  const previousLoadingRef = React7.useRef(loading);
-  const timeoutsRef = React7.useRef([]);
-  const frameRef = React7.useRef(null);
-  const [animatedWidth, setAnimatedWidth] = React7.useState(void 0);
-  const [loadingPhase, setLoadingPhase] = React7.useState(
+  const expandedWidthRef = React6.useRef(void 0);
+  const previousLoadingRef = React6.useRef(loading);
+  const timeoutsRef = React6.useRef([]);
+  const frameRef = React6.useRef(null);
+  const [animatedWidth, setAnimatedWidth] = React6.useState(void 0);
+  const [loadingPhase, setLoadingPhase] = React6.useState(
     loading ? "loading" : "idle"
   );
-  const clearAnimationTimers = React7.useCallback(() => {
+  const clearAnimationTimers = React6.useCallback(() => {
     for (const timeoutId of timeoutsRef.current) {
       window.clearTimeout(timeoutId);
     }
@@ -1294,7 +1165,7 @@ function useButtonLoadingState({
       frameRef.current = null;
     }
   }, []);
-  React7.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     const element = buttonRef.current;
     if (element && loadingPhase === "idle" && !loading) {
       expandedWidthRef.current = element.offsetWidth;
@@ -1303,12 +1174,12 @@ function useButtonLoadingState({
       setAnimatedWidth(element.offsetHeight);
     }
   }, [animatedWidth, buttonRef, loading, loadingPhase, children, leftIcon, rightIcon]);
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     return () => {
       clearAnimationTimers();
     };
   }, [clearAnimationTimers]);
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
       return;
@@ -1371,7 +1242,7 @@ function useButtonLoadingState({
 }
 
 // src/components/button.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariantOptions = [
   "default",
   "gradient",
@@ -1384,20 +1255,22 @@ var buttonVariantOptions = [
   "destructive"
 ];
 var buttonSizeOptions = ["default", "sm", "lg", "icon"];
-var buttonVariants = cva4(
-  "relative isolate inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full font-medium tracking-[0.025em] transform-gpu transition-[width,transform,filter,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+var buttonVariants = cva2(
+  "relative isolate inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full font-medium tracking-[0.025em] transform-gpu transition-[width,transform,filter,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none data-[disabled=true]:cursor-not-allowed",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:brightness-[1.04]",
-        gradient: "sofya-gradient-motion [--sofya-gradient-motion-duration:4s] bg-[linear-gradient(90deg,hsl(var(--sofya-button-gradient-from))_0%,hsl(var(--sofya-button-gradient-to))_100%)] text-primary-foreground hover:brightness-[1.05]",
-        dropdown: "justify-between border border-[color:var(--sofya-border-strong)] bg-card font-normal tracking-normal text-primary shadow-none hover:bg-card hover:border-[color:var(--sofya-border-strong)]",
-        icon: "border-0 bg-primary/10 text-primary shadow-sofya-sm hover:bg-primary/15",
+        default: "bg-primary text-primary-foreground hover:brightness-[1.04] data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:shadow-none",
+        gradient: "sofya-gradient-motion [--sofya-gradient-motion-duration:4s] bg-[linear-gradient(90deg,hsl(var(--sofya-button-gradient-from))_0%,hsl(var(--sofya-button-gradient-to))_100%)] text-primary-foreground hover:brightness-[1.05] data-[disabled=true]:bg-none data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
+        dropdown: "justify-between border border-[color:var(--sofya-border-strong)] bg-card font-normal tracking-normal text-primary shadow-none hover:bg-card hover:border-[color:var(--sofya-border-strong)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:bg-muted",
+        // Flat/ghost by default — same contract as `IconButton` so icon-only
+        // actions never paint a box/background or shadow on light surfaces.
+        icon: "border-0 bg-transparent text-[color:var(--sofya-text-soft)] shadow-none hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] data-[disabled=true]:bg-transparent data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:shadow-none",
         language: "border-0 bg-muted bg-cover bg-center bg-no-repeat text-primary-foreground shadow-none hover:brightness-[1.03]",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85",
-        outline: "border border-primary/15 bg-background text-foreground hover:border-primary/30 hover:bg-background active:bg-background",
-        ghost: "bg-transparent text-foreground hover:bg-muted",
-        destructive: "bg-destructive text-destructive-foreground hover:brightness-[1.04]"
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85 data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
+        outline: "border border-primary/15 bg-background text-foreground hover:border-primary/30 hover:bg-background active:bg-background data-[disabled=true]:border-[color:var(--sofya-border-soft)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
+        ghost: "bg-transparent text-foreground hover:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
+        destructive: "bg-destructive text-destructive-foreground hover:brightness-[1.04] data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]"
       },
       size: {
         default: "h-11 px-10",
@@ -1427,7 +1300,7 @@ var languageButtonSizeClasses = {
 function ButtonSpinner({
   size
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx6(
     IconLoader2,
     {
       "aria-hidden": "true",
@@ -1438,7 +1311,7 @@ function ButtonSpinner({
     }
   );
 }
-var Button = React8.forwardRef(
+var Button = React7.forwardRef(
   ({
     active = false,
     disabled,
@@ -1457,9 +1330,9 @@ var Button = React8.forwardRef(
     style,
     ...props
   }, ref) => {
-    const buttonRef = React8.useRef(null);
+    const buttonRef = React7.useRef(null);
     const Component = asChild ? Slot : "button";
-    const hasChildren = React8.Children.count(children) > 0;
+    const hasChildren = React7.Children.count(children) > 0;
     const isIconOnly = !hasChildren && Boolean(leftIcon || rightIcon);
     const isIconOnlyAction = variant === "icon" && isIconOnly;
     const resolvedSize = size ?? (isIconOnly ? "icon" : "default");
@@ -1478,13 +1351,14 @@ var Button = React8.forwardRef(
       rightIcon
     });
     const isDisabled = disabled || loadingPhase !== "idle";
+    const showDisabledTreatment = Boolean(disabled) && !loading;
     const resolvedWidthStyle = animatedWidth === void 0 ? style?.width : `${animatedWidth}px`;
     const isCompactPhase = loadingPhase === "collapsing" || loadingPhase === "loading" || loadingPhase === "hiding-spinner";
     const hideContent = loadingPhase === "hiding-content" || loadingPhase === "collapsing" || loadingPhase === "loading" || loadingPhase === "hiding-spinner" || loadingPhase === "expanding";
     const showSpinner = loadingPhase === "loading";
     const iconOnlyActionClassName = isIconOnlyAction ? cn(
-      "h-10 w-10 rounded-[10px] border-0 p-2 text-primary shadow-none",
-      active ? "bg-[color:var(--sofya-surface-selected)] hover:bg-[color:var(--sofya-surface-selected)]" : "bg-background hover:bg-background"
+      "h-10 w-10 rounded-[10px] border-0 p-2 shadow-none",
+      active ? "bg-[color:var(--sofya-surface-selected)] text-primary hover:bg-[color:var(--sofya-surface-selected)]" : "bg-transparent text-[color:var(--sofya-text-soft)] hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)]"
     ) : void 0;
     const languageButtonClassName = isLanguageButton ? cn(
       "min-w-0 overflow-hidden border-0 text-primary-foreground shadow-none",
@@ -1513,12 +1387,12 @@ var Button = React8.forwardRef(
       size: resolvedSize,
       variant: resolvedVariant
     });
-    React8.useImperativeHandle(
+    React7.useImperativeHandle(
       ref,
       () => buttonRef.current
     );
-    const buttonContent = isLanguageButton ? null : isIconOnly ? /* @__PURE__ */ jsx8("span", { className: iconSlotClassName, children: iconOnlyNode }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-      leftIcon ? /* @__PURE__ */ jsx8("span", { className: iconSlotClassName, children: leftIcon }) : null,
+    const buttonContent = isLanguageButton ? null : isIconOnly ? /* @__PURE__ */ jsx6("span", { className: iconSlotClassName, children: iconOnlyNode }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      leftIcon ? /* @__PURE__ */ jsx6("span", { className: iconSlotClassName, children: leftIcon }) : null,
       hasChildren ? renderTextContent(children, {
         as: "span",
         className: "inline-flex items-center text-current",
@@ -1528,9 +1402,9 @@ var Button = React8.forwardRef(
           letterSpacing: "inherit"
         }
       }) : null,
-      rightIcon ? /* @__PURE__ */ jsx8("span", { className: iconSlotClassName, children: rightIcon }) : null
+      rightIcon ? /* @__PURE__ */ jsx6("span", { className: iconSlotClassName, children: rightIcon }) : null
     ] });
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs2(
       Component,
       {
         className: cn(
@@ -1543,6 +1417,7 @@ var Button = React8.forwardRef(
         "aria-label": props["aria-label"] ?? (isLanguageButton ? resolvedLanguageLabel : void 0),
         "aria-pressed": isIconOnlyAction ? active : props["aria-pressed"],
         "aria-busy": loading,
+        "data-disabled": showDisabledTreatment ? "true" : void 0,
         disabled: asChild ? void 0 : isDisabled,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -1551,7 +1426,7 @@ var Button = React8.forwardRef(
         style: { ...resolvedButtonStyle, width: resolvedWidthStyle },
         ...props,
         children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx6(
             ButtonRippleLayer,
             {
               onAnimationComplete: handleRippleComplete,
@@ -1560,7 +1435,7 @@ var Button = React8.forwardRef(
               ripples
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               className: cn(
@@ -1570,7 +1445,7 @@ var Button = React8.forwardRef(
               children: buttonContent
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               "aria-hidden": "true",
@@ -1578,23 +1453,248 @@ var Button = React8.forwardRef(
                 "pointer-events-none absolute inset-0 z-[2] flex items-center justify-center transition-opacity duration-sofya ease-sofya",
                 showSpinner ? "opacity-100" : "opacity-0"
               ),
-              children: /* @__PURE__ */ jsx8(ButtonSpinner, { size: resolvedSize })
+              children: /* @__PURE__ */ jsx6(ButtonSpinner, { size: resolvedSize })
             }
           )
         ]
       }
-    );
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/close-button.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CloseButton = React8.forwardRef(
+  function CloseButton2({
+    className,
+    iconSize = 18,
+    label = "Fechar",
+    size = "icon",
+    type = "button",
+    ...props
+  }, ref) {
+    const ariaLabel = props["aria-label"] ?? label;
+    return /* @__PURE__ */ jsx7(
+      Button,
+      {
+        ref,
+        type,
+        variant: "ghost",
+        size,
+        "data-slot": "close-button",
+        "aria-label": ariaLabel,
+        leftIcon: /* @__PURE__ */ jsx7(Icon, { name: "x", size: iconSize }),
+        className: cn(
+          "h-8 w-8 shrink-0 rounded-full bg-transparent text-[color:var(--sofya-text-soft)] hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CloseButton.displayName = "CloseButton";
+
+// src/components/alert.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var alertToneOptions = [
+  "default",
+  "info",
+  "success",
+  "warning",
+  "destructive"
+];
+var alertSizeOptions = ["sm", "default", "lg"];
+var alertVariants = cva3("flex w-full items-start border", {
+  variants: {
+    size: {
+      sm: "gap-2 rounded-[14px] px-4 py-2",
+      default: "gap-4 rounded-[16px] px-4 py-4",
+      lg: "gap-4 rounded-[18px] px-6 py-4"
+    },
+    tone: {
+      default: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
+      info: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
+      success: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
+      warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]",
+      destructive: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    tone: "default"
+  }
+});
+var toneIconMap = {
+  info: "lightbulb",
+  success: "check",
+  warning: "question",
+  destructive: "x"
+};
+var Alert = React9.forwardRef(function Alert2({
+  children,
+  className,
+  dismissLabel = "Dispensar",
+  icon,
+  onDismiss,
+  role,
+  showToneIcon = true,
+  size,
+  tone,
+  ...props
+}, ref) {
+  const resolvedSize = size ?? "default";
+  const resolvedTone = tone ?? "default";
+  const resolvedRole = role ?? (resolvedTone === "warning" || resolvedTone === "destructive" ? "alert" : "status");
+  const toneIconName = resolvedTone !== "default" ? toneIconMap[resolvedTone] : void 0;
+  const resolvedIcon = icon ?? (showToneIcon && toneIconName ? /* @__PURE__ */ jsx8(Icon, { name: toneIconName, size: 16, "aria-hidden": "true" }) : null);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref,
+      "data-size": resolvedSize,
+      "data-slot": "alert",
+      "data-tone": resolvedTone,
+      role: resolvedRole,
+      className: cn(
+        alertVariants({ size: resolvedSize, tone: resolvedTone }),
+        className
+      ),
+      ...props,
+      children: [
+        resolvedIcon ? /* @__PURE__ */ jsx8(
+          "span",
+          {
+            "data-slot": "alert-icon",
+            className: "mt-2 inline-flex h-4 w-4 shrink-0 items-center justify-center text-current [&>svg]:h-4 [&>svg]:w-4",
+            children: resolvedIcon
+          }
+        ) : null,
+        /* @__PURE__ */ jsx8("div", { "data-slot": "alert-content", className: "flex min-w-0 flex-1 flex-col", children }),
+        onDismiss ? /* @__PURE__ */ jsx8(
+          CloseButton,
+          {
+            label: dismissLabel,
+            onClick: onDismiss,
+            iconSize: 16,
+            className: "-mr-1 -mt-1 text-current hover:text-current"
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var AlertTitle = React9.forwardRef(function AlertTitle2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-title",
+      className: cn("text-current", className),
+      ...props,
+      children: renderTextContent(children, {
+        as: "span",
+        className: "block text-current",
+        size: "h4"
+      })
+    }
+  );
+});
+var AlertDescription = React9.forwardRef(function AlertDescription2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-description",
+      className: cn("[&:not(:first-child)]:mt-2 text-current/80", className),
+      ...props,
+      children: renderTextContent(children, {
+        as: "span",
+        className: "block text-current/80",
+        size: "tiny"
+      })
+    }
+  );
+});
+Alert.displayName = "Alert";
+AlertTitle.displayName = "AlertTitle";
+AlertDescription.displayName = "AlertDescription";
+
+// src/components/badge.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var badgeVariantOptions = [
+  "default",
+  "secondary",
+  "outline",
+  "success",
+  "warning",
+  "destructive",
+  "pill"
+];
+var badgeAlertOptions = ["default", "medium", "high"];
+var badgePillToneOptions = ["neutral", "danger"];
+var badgeVariants = cva4(
+  "inline-flex min-h-[34px] items-center justify-center whitespace-nowrap rounded-[5px] px-4 py-2 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-semibold uppercase leading-none tracking-[0.08em] transition-colors duration-sofya ease-sofya",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-accent/10 text-accent",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "border border-border bg-background text-foreground",
+        success: "border-transparent bg-success/10 text-success",
+        warning: "border-transparent bg-warning/10 text-warning",
+        destructive: "border-transparent bg-destructive/10 text-destructive",
+        pill: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var badgeAlertVariants = cva4(
+  "inline-flex min-h-[34px] items-center justify-center whitespace-nowrap rounded-[5px] px-4 py-2 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-semibold uppercase leading-none tracking-[0.08em] transition-colors duration-sofya ease-sofya",
+  {
+    variants: {
+      alert: {
+        default: "border-transparent bg-accent/10 text-accent",
+        medium: "border-transparent bg-[color:var(--sofya-tone-warning-background)] text-warning",
+        high: "border-transparent bg-[color:var(--sofya-tone-destructive-background)] text-destructive"
+      }
+    },
+    defaultVariants: {
+      alert: "default"
+    }
   }
 );
-Button.displayName = "Button";
+var badgePillVariants = cva4(
+  "inline-flex h-[30px] items-center justify-center whitespace-nowrap rounded-full border px-4 py-2 [font-family:var(--sofya-text-extra-tiny-font-family)] text-[length:var(--sofya-text-extra-tiny-font-size)] font-semibold leading-none tracking-normal transition-colors duration-sofya ease-sofya",
+  {
+    variants: {
+      tone: {
+        neutral: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
+        danger: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+function Badge({ className, variant, alert, pillTone, ...props }) {
+  const badgeClassName = variant === "pill" ? badgePillVariants({ tone: pillTone }) : alert ? badgeAlertVariants({ alert }) : badgeVariants({ variant });
+  return /* @__PURE__ */ jsx9("div", { className: cn(badgeClassName, className), ...props });
+}
 
 // src/components/surface.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import {
   sofyaSurfaceNames
 } from "@sofya-ds/tokens";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var surfaceVariantOptions = sofyaSurfaceNames;
 function toCssTokenName(name) {
   return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -1613,7 +1713,7 @@ function getSurfaceStyle(variant) {
 }
 function SurfaceComponent({ as, asChild = false, variant = "card", className, style, ...props }, ref) {
   const Component = asChild ? Slot2 : as ?? "div";
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Component,
     {
       ref,
@@ -1624,16 +1724,16 @@ function SurfaceComponent({ as, asChild = false, variant = "card", className, st
     }
   );
 }
-var SurfaceBase = React9.forwardRef(SurfaceComponent);
+var SurfaceBase = React10.forwardRef(SurfaceComponent);
 SurfaceBase.displayName = "Surface";
 var Surface = SurfaceBase;
 
 // src/components/card.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var cardVariants = ["card", "focus"];
 function Card({ className, variant = "card", ...props }) {
   const hasHoverShadow = variant === "card";
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Surface,
     {
       variant,
@@ -1647,10 +1747,10 @@ function Card({ className, variant = "card", ...props }) {
   );
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col gap-2 p-6", className), ...props });
+  return /* @__PURE__ */ jsx11("div", { className: cn("flex flex-col gap-2 p-6", className), ...props });
 }
 function CardTitle({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "h3",
     {
       className: cn("text-card-foreground", className),
@@ -1668,26 +1768,26 @@ function CardDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10("p", { className: cn("text-muted-foreground", className), ...props, children: renderTextContent(children, {
+  return /* @__PURE__ */ jsx11("p", { className: cn("text-muted-foreground", className), ...props, children: renderTextContent(children, {
     as: "span",
     className: "block text-muted-foreground",
     size: "body"
   }) });
 }
 function CardContent({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx10("div", { className: cn("p-6 pt-0", className), ...props, children: renderTextContent(children, {
+  return /* @__PURE__ */ jsx11("div", { className: cn("p-6 pt-0", className), ...props, children: renderTextContent(children, {
     as: "span"
   }) });
 }
 function CardFooter({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx10("div", { className: cn("flex items-center gap-4 p-6 pt-0", className), ...props, children: renderTextContent(children, {
+  return /* @__PURE__ */ jsx11("div", { className: cn("flex items-center gap-4 p-6 pt-0", className), ...props, children: renderTextContent(children, {
     as: "span"
   }) });
 }
 
 // src/components/checkbox.tsx
-import * as React10 from "react";
-import { IconCheck as IconCheck2 } from "@tabler/icons-react";
+import * as React11 from "react";
+import { IconCheck as IconCheck2, IconMinus } from "@tabler/icons-react";
 
 // src/lib/selection-control-classes.ts
 var selectionControlContainerBaseClasses = "flex w-fit gap-4";
@@ -1709,8 +1809,8 @@ function selectionControlContainerClasses({
 }
 
 // src/components/checkbox.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var Checkbox = React10.forwardRef(
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var Checkbox = React11.forwardRef(
   function Checkbox2({
     checked,
     className,
@@ -1718,15 +1818,24 @@ var Checkbox = React10.forwardRef(
     description,
     descriptionClassName,
     disabled,
+    error = false,
     id,
+    indeterminate = false,
     label,
     labelClassName,
     ...props
   }, ref) {
-    const generatedId = React10.useId();
+    const generatedId = React11.useId();
     const resolvedId = id ?? generatedId;
     const descriptionId = description ? `${resolvedId}-description` : void 0;
     const alignClassName2 = description ? "items-start" : "items-center";
+    const innerRef = React11.useRef(null);
+    React11.useImperativeHandle(ref, () => innerRef.current);
+    React11.useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate, checked]);
     return /* @__PURE__ */ jsxs4(
       "label",
       {
@@ -1737,34 +1846,58 @@ var Checkbox = React10.forwardRef(
           disabled
         }),
         children: [
-          /* @__PURE__ */ jsx11(
-            "input",
-            {
-              ref,
-              id: resolvedId,
-              type: "checkbox",
-              className: "peer sr-only",
-              checked,
-              defaultChecked,
-              disabled,
-              "aria-describedby": descriptionId,
-              ...props
-            }
-          ),
-          /* @__PURE__ */ jsx11(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px] text-transparent",
-                selectionControlControlBaseClasses,
-                "peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground peer-focus-visible:ring-2 peer-focus-visible:ring-[color:var(--sofya-focus-ring-soft)] peer-focus-visible:ring-offset-0"
-              ),
-              children: /* @__PURE__ */ jsx11(IconCheck2, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", stroke: 2.4 })
-            }
-          ),
+          /* @__PURE__ */ jsxs4("span", { className: "relative inline-flex h-5 w-5 shrink-0", children: [
+            /* @__PURE__ */ jsx12(
+              "input",
+              {
+                ref: innerRef,
+                id: resolvedId,
+                type: "checkbox",
+                className: "peer sr-only",
+                checked,
+                defaultChecked,
+                disabled,
+                "aria-invalid": error || void 0,
+                "aria-describedby": descriptionId,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-error": error ? "true" : void 0,
+                className: cn(
+                  "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px]",
+                  selectionControlControlBaseClasses,
+                  // Visible resting border on light surfaces (token-based, ~3.5:1).
+                  "border-muted-foreground",
+                  "peer-checked:border-primary peer-checked:bg-primary peer-indeterminate:border-primary peer-indeterminate:bg-primary",
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-[color:var(--sofya-focus-ring-soft)] peer-focus-visible:ring-offset-0",
+                  // Error state overrides the border/ring with destructive tokens.
+                  "data-[error=true]:border-destructive peer-focus-visible:data-[error=true]:ring-[color:var(--sofya-tone-destructive-border)]"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              IconCheck2,
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 text-primary-foreground opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0",
+                stroke: 2.4
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              IconMinus,
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 text-primary-foreground opacity-0 peer-indeterminate:opacity-100",
+                stroke: 2.4
+              }
+            )
+          ] }),
           label || description ? /* @__PURE__ */ jsxs4("span", { className: selectionControlContentBaseClasses, children: [
-            label ? /* @__PURE__ */ jsx11(
+            label ? /* @__PURE__ */ jsx12(
               "span",
               {
                 className: cn(
@@ -1778,7 +1911,7 @@ var Checkbox = React10.forwardRef(
                 })
               }
             ) : null,
-            description ? /* @__PURE__ */ jsx11(
+            description ? /* @__PURE__ */ jsx12(
               "span",
               {
                 id: descriptionId,
@@ -1802,20 +1935,20 @@ var Checkbox = React10.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // src/components/dropdown.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 // src/lib/use-controllable-state.ts
-import * as React11 from "react";
+import * as React12 from "react";
 function useControllableState({
   defaultValue,
   onChange,
   value
 }) {
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React11.useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = React12.useState(defaultValue);
   const currentValue = isControlled ? value : uncontrolledValue;
-  const setValue = React11.useCallback(
+  const setValue = React12.useCallback(
     (nextValue) => {
       if (!isControlled) {
         setUncontrolledValue(nextValue);
@@ -1828,7 +1961,7 @@ function useControllableState({
 }
 
 // src/components/dropdown.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var dropdownVariantOptions = [
   "card",
   "language",
@@ -1921,11 +2054,11 @@ function resolveAccessibleText(node) {
   if (typeof node === "string" || typeof node === "number") {
     return String(node);
   }
-  const parts = React12.Children.toArray(node).map((child) => {
+  const parts = React13.Children.toArray(node).map((child) => {
     if (typeof child === "string" || typeof child === "number") {
       return String(child);
     }
-    if (React12.isValidElement(child)) {
+    if (React13.isValidElement(child)) {
       return resolveAccessibleText(child.props.children);
     }
     return void 0;
@@ -1935,7 +2068,7 @@ function resolveAccessibleText(node) {
 }
 function DefaultDropdownTriggerIcon({ variant }) {
   if (variant === "selected") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Icon,
       {
         name: "caret-down",
@@ -1943,16 +2076,16 @@ function DefaultDropdownTriggerIcon({ variant }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx12("span", { className: "flex h-8 w-8 items-center justify-center rounded-[6px]", children: /* @__PURE__ */ jsx12(Icon, { name: "caret-down", className: "!h-4 !w-4" }) });
+  return /* @__PURE__ */ jsx13("span", { className: "flex h-8 w-8 items-center justify-center rounded-[6px]", children: /* @__PURE__ */ jsx13(Icon, { name: "caret-down", className: "!h-4 !w-4" }) });
 }
 function DefaultDropdownItemIndicator() {
-  return /* @__PURE__ */ jsx12(Icon, { name: "check", size: 16 });
+  return /* @__PURE__ */ jsx13(Icon, { name: "check", size: 16 });
 }
 function DefaultDropdownInlineCheck() {
-  return /* @__PURE__ */ jsx12(Icon, { name: "check", size: 14 });
+  return /* @__PURE__ */ jsx13(Icon, { name: "check", size: 14 });
 }
 function LanguageFlagIcon({ locale }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "img",
     {
       alt: "",
@@ -1992,7 +2125,7 @@ function Dropdown({
   const resolvedAppearance = resolveDropdownAppearance({ appearance, variant });
   const triggerSizeFamily = isIconOnlyTrigger ? "action" : resolveDropdownTriggerSizeFamily(variant);
   const usesDefaultListStyle = !isLanguageVariant && !isActionVariant;
-  const resolvedItems = React12.useMemo(
+  const resolvedItems = React13.useMemo(
     () => isLanguageVariant ? items && items.length > 0 ? items : dropdownLanguageItems : items ?? [],
     [isLanguageVariant, items]
   );
@@ -2002,14 +2135,14 @@ function Dropdown({
     onChange: onValueChange,
     value
   });
-  const [subValues, setSubValues] = React12.useState({});
+  const [subValues, setSubValues] = React13.useState({});
   const radioValue = selectedValue ?? "";
   const selectedItem = resolvedItems.find(
     (item) => item.value === selectedValue
   );
   const hasSelectedItem = selectedItem !== void 0;
   const selectedLanguageLocale = resolveItemLanguageLocale(selectedItem);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (value !== void 0) {
       return;
     }
@@ -2024,7 +2157,7 @@ function Dropdown({
     setUncontrolledSelectedValue,
     value
   ]);
-  const resolvedTriggerIcon = isLanguageVariant || isActionVariant || isIconOnlyTrigger ? void 0 : triggerIcon === void 0 ? /* @__PURE__ */ jsx12(DefaultDropdownTriggerIcon, { variant }) : triggerIcon;
+  const resolvedTriggerIcon = isLanguageVariant || isActionVariant || isIconOnlyTrigger ? void 0 : triggerIcon === void 0 ? /* @__PURE__ */ jsx13(DefaultDropdownTriggerIcon, { variant }) : triggerIcon;
   const triggerLabel = selectedItem?.triggerLabel ?? selectedItem?.label ?? placeholder;
   const iconOnlyAriaLabel = isIconOnlyTrigger ? resolveAccessibleText(triggerLabel) : void 0;
   const selectedTriggerToneClassName = isSelectedVariant ? hasSelectedItem ? "text-foreground" : "text-[color:var(--sofya-text-soft)]" : void 0;
@@ -2036,7 +2169,7 @@ function Dropdown({
       onOpenChange,
       open,
       children: [
-        /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx13(
           Button,
           {
             type: "button",
@@ -2054,16 +2187,16 @@ function Dropdown({
               isIconOnlyTrigger && "flex items-center justify-center",
               triggerClassName
             ),
-            leftIcon: isActionVariant || isIconOnlyTrigger ? iconTriggerSize !== void 0 ? /* @__PURE__ */ jsx12("span", { style: { fontSize: iconTriggerSize }, children: iconTrigger }) : iconTrigger : void 0,
+            leftIcon: isActionVariant || isIconOnlyTrigger ? iconTriggerSize !== void 0 ? /* @__PURE__ */ jsx13("span", { style: { fontSize: iconTriggerSize }, children: iconTrigger }) : iconTrigger : void 0,
             rightIcon: resolvedTriggerIcon,
-            children: isLanguageVariant || isActionVariant || isIconOnlyTrigger ? null : /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate", children: renderTextContent(triggerLabel, {
+            children: isLanguageVariant || isActionVariant || isIconOnlyTrigger ? null : /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: renderTextContent(triggerLabel, {
               as: "span",
               className: "block min-w-0 truncate text-inherit",
               size: "tiny"
             }) })
           }
         ) }),
-        /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(
           DropdownMenuPrimitive.Content,
           {
             align,
@@ -2075,7 +2208,7 @@ function Dropdown({
               dropdownAppearanceClasses[resolvedAppearance].content,
               contentClassName
             ),
-            children: /* @__PURE__ */ jsx12(
+            children: /* @__PURE__ */ jsx13(
               DropdownMenuPrimitive.RadioGroup,
               {
                 value: radioValue,
@@ -2084,8 +2217,8 @@ function Dropdown({
                 children: resolvedItems.map((item) => {
                   const isSelected = item.value === selectedValue;
                   const itemLanguageLocale = resolveItemLanguageLocale(item);
-                  const indicator = item.indicator ?? /* @__PURE__ */ jsx12(DefaultDropdownItemIndicator, {});
-                  const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */ jsx12(LanguageFlagIcon, { locale: itemLanguageLocale }) : null);
+                  const indicator = item.indicator ?? /* @__PURE__ */ jsx13(DefaultDropdownItemIndicator, {});
+                  const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */ jsx13(LanguageFlagIcon, { locale: itemLanguageLocale }) : null);
                   if (isActionVariant && item.subItems && item.subItems.length > 0) {
                     const currentSubValue = subValues[item.value];
                     return /* @__PURE__ */ jsxs5(DropdownMenuPrimitive.Sub, { children: [
@@ -2100,17 +2233,17 @@ function Dropdown({
                             itemClassName
                           ),
                           children: [
-                            itemIcon && /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }),
-                            /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(item.label, {
+                            itemIcon && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }),
+                            /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(item.label, {
                               as: "span",
                               className: "block truncate text-inherit",
                               size: "tiny"
                             }) }),
-                            /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center text-[color:var(--sofya-text-subtle)]", children: /* @__PURE__ */ jsx12(Icon, { name: "caret-right", size: 12 }) })
+                            /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center text-[color:var(--sofya-text-subtle)]", children: /* @__PURE__ */ jsx13(Icon, { name: "caret-right", size: 12 }) })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(
                         DropdownMenuPrimitive.SubContent,
                         {
                           sideOffset: 4,
@@ -2118,7 +2251,7 @@ function Dropdown({
                             "sofya-dropdown-content z-50 w-[224px] min-w-[224px] overflow-hidden border bg-card p-2 outline-none",
                             "rounded-[20px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]"
                           ),
-                          children: /* @__PURE__ */ jsx12(
+                          children: /* @__PURE__ */ jsx13(
                             DropdownMenuPrimitive.RadioGroup,
                             {
                               value: currentSubValue ?? "",
@@ -2142,13 +2275,13 @@ function Dropdown({
                                       "data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40"
                                     ),
                                     children: [
-                                      subItem.icon && /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: subItem.icon }),
-                                      /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(subItem.label, {
+                                      subItem.icon && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center", children: subItem.icon }),
+                                      /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(subItem.label, {
                                         as: "span",
                                         className: "block truncate text-inherit",
                                         size: "tiny"
                                       }) }),
-                                      /* @__PURE__ */ jsx12(
+                                      /* @__PURE__ */ jsx13(
                                         "span",
                                         {
                                           "aria-hidden": "true",
@@ -2156,7 +2289,7 @@ function Dropdown({
                                             "flex h-4 w-4 shrink-0 items-center justify-center text-primary transition-opacity duration-sofya ease-sofya",
                                             isSubSelected ? "opacity-100" : "opacity-0"
                                           ),
-                                          children: /* @__PURE__ */ jsx12(DefaultDropdownItemIndicator, {})
+                                          children: /* @__PURE__ */ jsx13(DefaultDropdownItemIndicator, {})
                                         }
                                       )
                                     ]
@@ -2173,7 +2306,7 @@ function Dropdown({
                   if (usesDefaultListStyle && item.subItems && item.subItems.length > 0) {
                     const currentSubValue = subValues[item.value];
                     return /* @__PURE__ */ jsxs5(DropdownMenuPrimitive.Sub, { children: [
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         DropdownMenuPrimitive.SubTrigger,
                         {
                           disabled: item.disabled,
@@ -2189,19 +2322,19 @@ function Dropdown({
                               "data-dropdown-item-body": true,
                               className: "inline-flex min-w-0 items-center gap-2 rounded-full px-4 py-2 transition-colors duration-sofya ease-sofya bg-transparent",
                               children: [
-                                itemIcon ? /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
-                                /* @__PURE__ */ jsx12("span", { className: "truncate", children: renderTextContent(item.label, {
+                                itemIcon ? /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
+                                /* @__PURE__ */ jsx13("span", { className: "truncate", children: renderTextContent(item.label, {
                                   as: "span",
                                   className: "block truncate text-inherit",
                                   size: "tiny"
                                 }) }),
-                                /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center text-[color:var(--sofya-text-subtle)]", children: /* @__PURE__ */ jsx12(Icon, { name: "caret-right", size: 12 }) })
+                                /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center text-[color:var(--sofya-text-subtle)]", children: /* @__PURE__ */ jsx13(Icon, { name: "caret-right", size: 12 }) })
                               ]
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(
                         DropdownMenuPrimitive.SubContent,
                         {
                           sideOffset: 4,
@@ -2209,7 +2342,7 @@ function Dropdown({
                             "sofya-dropdown-content z-50 w-auto min-w-[var(--radix-dropdown-menu-trigger-width)] max-w-[224px] overflow-hidden border bg-card p-2 outline-none",
                             "rounded-[20px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]"
                           ),
-                          children: /* @__PURE__ */ jsx12(
+                          children: /* @__PURE__ */ jsx13(
                             DropdownMenuPrimitive.RadioGroup,
                             {
                               value: currentSubValue ?? "",
@@ -2223,7 +2356,7 @@ function Dropdown({
                               className: "grid gap-1",
                               children: item.subItems.map((subItem) => {
                                 const isSubSelected = subItem.value === currentSubValue;
-                                return /* @__PURE__ */ jsx12(
+                                return /* @__PURE__ */ jsx13(
                                   DropdownMenuPrimitive.RadioItem,
                                   {
                                     value: subItem.value,
@@ -2241,18 +2374,18 @@ function Dropdown({
                                           isSubSelected ? "bg-[color:var(--sofya-surface-selected)]" : "bg-transparent"
                                         ),
                                         children: [
-                                          subItem.icon ? /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: subItem.icon }) : null,
-                                          /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate", children: renderTextContent(subItem.label, {
+                                          subItem.icon ? /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center", children: subItem.icon }) : null,
+                                          /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: renderTextContent(subItem.label, {
                                             as: "span",
                                             className: "block truncate text-inherit",
                                             size: "tiny"
                                           }) }),
-                                          isSubSelected ? /* @__PURE__ */ jsx12(
+                                          isSubSelected ? /* @__PURE__ */ jsx13(
                                             "span",
                                             {
                                               "aria-hidden": "true",
                                               className: "flex h-[14px] w-[14px] shrink-0 items-center justify-center",
-                                              children: /* @__PURE__ */ jsx12(DefaultDropdownInlineCheck, {})
+                                              children: /* @__PURE__ */ jsx13(DefaultDropdownInlineCheck, {})
                                             }
                                           ) : null
                                         ]
@@ -2281,13 +2414,13 @@ function Dropdown({
                           itemClassName
                         ),
                         children: [
-                          itemIcon && /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }),
-                          /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(item.label, {
+                          itemIcon && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }),
+                          /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(item.label, {
                             as: "span",
                             className: "block truncate text-inherit",
                             size: "tiny"
                           }) }),
-                          /* @__PURE__ */ jsx12(
+                          /* @__PURE__ */ jsx13(
                             "span",
                             {
                               "aria-hidden": "true",
@@ -2303,7 +2436,7 @@ function Dropdown({
                       item.value
                     );
                   }
-                  return /* @__PURE__ */ jsx12(
+                  return /* @__PURE__ */ jsx13(
                     DropdownMenuPrimitive.RadioItem,
                     {
                       value: item.value,
@@ -2323,18 +2456,18 @@ function Dropdown({
                             isSelected ? "bg-[color:var(--sofya-surface-selected)]" : "bg-transparent"
                           ),
                           children: [
-                            itemIcon ? /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
-                            /* @__PURE__ */ jsx12("span", { className: "truncate", children: renderTextContent(item.label, {
+                            itemIcon ? /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
+                            /* @__PURE__ */ jsx13("span", { className: "truncate", children: renderTextContent(item.label, {
                               as: "span",
                               className: "block truncate text-inherit",
                               size: "tiny"
                             }) }),
-                            isSelected ? /* @__PURE__ */ jsx12(
+                            isSelected ? /* @__PURE__ */ jsx13(
                               "span",
                               {
                                 "aria-hidden": "true",
                                 className: "flex h-[14px] w-[14px] shrink-0 items-center justify-center",
-                                children: /* @__PURE__ */ jsx12(DefaultDropdownInlineCheck, {})
+                                children: /* @__PURE__ */ jsx13(DefaultDropdownInlineCheck, {})
                               }
                             ) : null
                           ]
@@ -2354,14 +2487,14 @@ function Dropdown({
 }
 
 // src/components/dropdown-search.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 
 // src/components/input.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { REGEXP_ONLY_DIGITS as REGEXP_ONLY_DIGITS2 } from "input-otp";
 
 // src/lib/field-shell.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function FieldLabel({
   children,
   className,
@@ -2376,7 +2509,7 @@ function FieldLabel({
     return null;
   }
   const Component = htmlFor ? "label" : "div";
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Component,
     {
       className: cn("text-[color:var(--sofya-text-default)]", className),
@@ -2404,7 +2537,7 @@ function FieldShell({
     return control;
   }
   return /* @__PURE__ */ jsxs6("div", { className: cn("grid w-full gap-2", containerClassName), children: [
-    label ? /* @__PURE__ */ jsx13(
+    label ? /* @__PURE__ */ jsx14(
       FieldLabel,
       {
         className: labelClassName,
@@ -2420,7 +2553,7 @@ function FieldShell({
 }
 
 // src/components/input-upload.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import {
   IconFileText,
   IconPhoto,
@@ -2428,7 +2561,7 @@ import {
   IconVideo
 } from "@tabler/icons-react";
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var uploadKindOptions = ["document", "image", "video"];
 var uploadAcceptByKind = {
   document: ".pdf,.doc,.docx,.txt,.rtf,.odt,.jpg,.jpeg,.png,.webp,.gif",
@@ -2522,7 +2655,7 @@ function resolveUploadFileVisualKind(file, fallbackKind) {
   return "document";
 }
 function UploadGlyph({ className }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     IconUpload,
     {
       "aria-hidden": "true",
@@ -2535,7 +2668,7 @@ function UploadFileTypeGlyph({
   kind
 }) {
   if (kind === "image") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       IconPhoto,
       {
         "aria-hidden": "true",
@@ -2544,7 +2677,7 @@ function UploadFileTypeGlyph({
     );
   }
   if (kind === "video") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       IconVideo,
       {
         "aria-hidden": "true",
@@ -2552,7 +2685,7 @@ function UploadFileTypeGlyph({
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     IconFileText,
     {
       "aria-hidden": "true",
@@ -2560,7 +2693,7 @@ function UploadFileTypeGlyph({
     }
   );
 }
-var UploadInputControl = React13.forwardRef(function UploadInputControl2({
+var UploadInputControl = React14.forwardRef(function UploadInputControl2({
   accept,
   "aria-label": ariaLabel,
   className,
@@ -2574,17 +2707,17 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
   resolvedId,
   ...uploadProps
 }, ref) {
-  const inputRef = React13.useRef(null);
-  const [isDragActive, setIsDragActive] = React13.useState(false);
-  const [selectedFiles, setSelectedFiles] = React13.useState([]);
+  const inputRef = React14.useRef(null);
+  const [isDragActive, setIsDragActive] = React14.useState(false);
+  const [selectedFiles, setSelectedFiles] = React14.useState([]);
   const resolvedMultiple = multiple ?? true;
   const prefersReducedMotion = useReducedMotion2();
-  React13.useImperativeHandle(ref, () => inputRef.current);
+  React14.useImperativeHandle(ref, () => inputRef.current);
   const resolvedAccept = accept ?? uploadAcceptByKind[uploadKind];
   const resolvedAriaLabel = ariaLabel ?? uploadAriaLabelByKind[uploadKind];
   const resolvedTitle = uploadTitle ?? "Arraste arquivos aqui ou clique para selecionar";
   const resolvedDescription = uploadDescription ?? uploadDescriptionByKind[uploadKind];
-  const syncSelectedFiles = React13.useCallback(
+  const syncSelectedFiles = React14.useCallback(
     (files) => {
       const normalizedFiles = resolvedMultiple ? files : files.slice(0, 1);
       setSelectedFiles(normalizedFiles);
@@ -2592,7 +2725,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
     },
     [onFilesChange, resolvedMultiple]
   );
-  const applyFilesToInput = React13.useCallback((files) => {
+  const applyFilesToInput = React14.useCallback((files) => {
     const inputElement = inputRef.current;
     if (!inputElement || typeof DataTransfer === "undefined") {
       return false;
@@ -2611,7 +2744,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
       return false;
     }
   }, []);
-  const handleInputChange = React13.useCallback(
+  const handleInputChange = React14.useCallback(
     (event) => {
       const nextFiles = mergeUploadFiles(
         selectedFiles,
@@ -2630,12 +2763,12 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
       syncSelectedFiles
     ]
   );
-  const openPicker = React13.useCallback(() => {
+  const openPicker = React14.useCallback(() => {
     if (!disabled) {
       inputRef.current?.click();
     }
   }, [disabled]);
-  const handleKeyDown = React13.useCallback(
+  const handleKeyDown = React14.useCallback(
     (event) => {
       if (disabled) {
         return;
@@ -2647,7 +2780,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
     },
     [disabled, openPicker]
   );
-  const handleDragEnter = React13.useCallback(
+  const handleDragEnter = React14.useCallback(
     (event) => {
       event.preventDefault();
       if (!disabled) {
@@ -2656,7 +2789,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
     },
     [disabled]
   );
-  const handleDragLeave = React13.useCallback(
+  const handleDragLeave = React14.useCallback(
     (event) => {
       if (disabled) {
         return;
@@ -2669,7 +2802,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
     },
     [disabled]
   );
-  const handleDragOver = React13.useCallback(
+  const handleDragOver = React14.useCallback(
     (event) => {
       event.preventDefault();
       if (disabled) {
@@ -2680,7 +2813,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
     },
     [disabled]
   );
-  const handleDrop = React13.useCallback(
+  const handleDrop = React14.useCallback(
     (event) => {
       event.preventDefault();
       if (disabled) {
@@ -2713,7 +2846,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
       syncSelectedFiles
     ]
   );
-  const handleRemoveFile = React13.useCallback(
+  const handleRemoveFile = React14.useCallback(
     (fileIndex) => {
       if (disabled) {
         return;
@@ -2725,7 +2858,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
     [applyFilesToInput, disabled, selectedFiles, syncSelectedFiles]
   );
   return /* @__PURE__ */ jsxs7("div", { className: "grid w-full gap-4", children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "input",
       {
         ...uploadProps,
@@ -2760,8 +2893,8 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
         onDrop: handleDrop,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsx14("span", { className: "flex size-10 items-center justify-center rounded-[6px] p-2 text-[color:var(--sofya-text-default)]", children: /* @__PURE__ */ jsx14(UploadGlyph, { className: "size-[18px]" }) }),
-          /* @__PURE__ */ jsx14("span", { className: "text-[color:var(--sofya-text-default)]", children: renderTextContent(resolvedTitle, {
+          /* @__PURE__ */ jsx15("span", { className: "flex size-10 items-center justify-center rounded-[6px] p-2 text-[color:var(--sofya-text-default)]", children: /* @__PURE__ */ jsx15(UploadGlyph, { className: "size-[18px]" }) }),
+          /* @__PURE__ */ jsx15("span", { className: "text-[color:var(--sofya-text-default)]", children: renderTextContent(resolvedTitle, {
             as: "span",
             className: "block text-[color:var(--sofya-text-default)]",
             size: "tiny",
@@ -2769,7 +2902,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
               fontWeight: 500
             }
           }) }),
-          resolvedDescription ? /* @__PURE__ */ jsx14("span", { className: "text-[color:var(--sofya-text-subtle)]", children: renderTextContent(resolvedDescription, {
+          resolvedDescription ? /* @__PURE__ */ jsx15("span", { className: "text-[color:var(--sofya-text-subtle)]", children: renderTextContent(resolvedDescription, {
             as: "span",
             className: "block text-[color:var(--sofya-text-subtle)]",
             size: "extra-tiny"
@@ -2777,9 +2910,9 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
         ]
       }
     ),
-    /* @__PURE__ */ jsx14("div", { role: "list", className: "grid gap-4 overflow-hidden", children: /* @__PURE__ */ jsx14(AnimatePresence, { initial: false, children: selectedFiles.map((file, index) => {
+    /* @__PURE__ */ jsx15("div", { role: "list", className: "grid gap-4 overflow-hidden", children: /* @__PURE__ */ jsx15(AnimatePresence, { initial: false, children: selectedFiles.map((file, index) => {
       const fileKey = resolveUploadFileSignature(file);
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx15(
         motion2.div,
         {
           role: "listitem",
@@ -2789,7 +2922,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
           exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -6 },
           transition: uploadListItemTransition,
           children: /* @__PURE__ */ jsxs7(Card, { variant: "card", className: "flex items-center gap-4 p-4", children: [
-            /* @__PURE__ */ jsx14("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[color:var(--sofya-surface-hover)] text-primary", children: /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[color:var(--sofya-surface-hover)] text-primary", children: /* @__PURE__ */ jsx15(
               UploadFileTypeGlyph,
               {
                 className: "size-[18px]",
@@ -2797,7 +2930,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
               }
             ) }),
             /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx14("p", { className: "truncate text-[color:var(--sofya-text-default)]", children: renderTextContent(file.name, {
+              /* @__PURE__ */ jsx15("p", { className: "truncate text-[color:var(--sofya-text-default)]", children: renderTextContent(file.name, {
                 as: "span",
                 className: "block truncate text-[color:var(--sofya-text-default)]",
                 size: "tiny",
@@ -2805,7 +2938,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
                   fontWeight: 500
                 }
               }) }),
-              /* @__PURE__ */ jsx14("p", { className: "mt-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(
+              /* @__PURE__ */ jsx15("p", { className: "mt-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(
                 `${resolveUploadFileBadge(
                   file
                 )} \xB7 ${formatUploadFileSize(file.size)}`,
@@ -2816,7 +2949,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 "aria-label": `Remover ${file.name}`,
@@ -2828,7 +2961,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
                   event.stopPropagation();
                   handleRemoveFile(index);
                 },
-                children: /* @__PURE__ */ jsx14(
+                children: /* @__PURE__ */ jsx15(
                   Icon,
                   {
                     "aria-hidden": "true",
@@ -2849,15 +2982,15 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
 UploadInputControl.displayName = "UploadInputControl";
 
 // src/components/input-otp.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import {
   OTPInput,
   OTPInputContext,
   REGEXP_ONLY_DIGITS
 } from "input-otp";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-var InputOTP = React14.forwardRef(({ className, containerClassName, ...props }, ref) => {
-  return /* @__PURE__ */ jsx15(
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var InputOTP = React15.forwardRef(({ className, containerClassName, ...props }, ref) => {
+  return /* @__PURE__ */ jsx16(
     OTPInput,
     {
       ref,
@@ -2871,8 +3004,8 @@ var InputOTP = React14.forwardRef(({ className, containerClassName, ...props },
   );
 });
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React14.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx15(
+var InputOTPGroup = React15.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref,
@@ -2885,12 +3018,12 @@ var InputOTPGroup = React14.forwardRef(({ className, ...props }, ref) => {
   );
 });
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React14.forwardRef(
+var InputOTPSlot = React15.forwardRef(
   ({ className, index, ...props }, ref) => {
-    const otpContext = React14.useContext(OTPInputContext);
+    const otpContext = React15.useContext(OTPInputContext);
     const slot = otpContext.slots[index];
     if (!slot) {
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         "div",
         {
           ref,
@@ -2914,15 +3047,15 @@ var InputOTPSlot = React14.forwardRef(
         ...props,
         children: [
           slot.char ?? null,
-          slot.hasFakeCaret ? /* @__PURE__ */ jsx15("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx15("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-primary shadow-[var(--sofya-shadow-caret-glow)]" }) }) : null
+          slot.hasFakeCaret ? /* @__PURE__ */ jsx16("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx16("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-primary shadow-[var(--sofya-shadow-caret-glow)]" }) }) : null
         ]
       }
     );
   }
 );
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React14.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx15(
+var InputOTPSeparator = React15.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref,
@@ -2932,22 +3065,22 @@ var InputOTPSeparator = React14.forwardRef(({ className, ...props }, ref) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "." })
+      children: /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "." })
     }
   );
 });
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/input.tsx
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var inputVariantOptions = [
   "default",
   "search",
   "otp",
   "upload"
 ];
-var Input = React15.forwardRef((props, ref) => {
-  const generatedId = React15.useId();
+var Input = React16.forwardRef((props, ref) => {
+  const generatedId = React16.useId();
   const resolvedId = props.id ?? generatedId;
   const variant = props.variant ?? "default";
   if (variant === "otp") {
@@ -2988,7 +3121,7 @@ var Input = React15.forwardRef((props, ref) => {
         containerClassName: className2,
         ...otpProps,
         children: [
-          /* @__PURE__ */ jsx16(InputOTPGroup, { className: otpGroupClassName, children: Array.from({ length: resolvedSplitIndex }, (_, index) => /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(InputOTPGroup, { className: otpGroupClassName, children: Array.from({ length: resolvedSplitIndex }, (_, index) => /* @__PURE__ */ jsx17(
             InputOTPSlot,
             {
               className: otpSlotClassName,
@@ -2996,10 +3129,10 @@ var Input = React15.forwardRef((props, ref) => {
             },
             `otp-leading-${index}`
           )) }),
-          hasTrailingGroup ? otpSeparator ?? /* @__PURE__ */ jsx16(InputOTPSeparator, { className: otpSeparatorClassName }) : null,
-          hasTrailingGroup ? /* @__PURE__ */ jsx16(InputOTPGroup, { className: otpGroupClassName, children: Array.from(
+          hasTrailingGroup ? otpSeparator ?? /* @__PURE__ */ jsx17(InputOTPSeparator, { className: otpSeparatorClassName }) : null,
+          hasTrailingGroup ? /* @__PURE__ */ jsx17(InputOTPGroup, { className: otpGroupClassName, children: Array.from(
             { length: resolvedLength - resolvedSplitIndex },
-            (_, index) => /* @__PURE__ */ jsx16(
+            (_, index) => /* @__PURE__ */ jsx17(
               InputOTPSlot,
               {
                 className: otpSlotClassName,
@@ -3011,7 +3144,7 @@ var Input = React15.forwardRef((props, ref) => {
         ]
       }
     );
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       FieldShell,
       {
         containerClassName: containerClassName2,
@@ -3030,7 +3163,7 @@ var Input = React15.forwardRef((props, ref) => {
       variant: _variant2,
       ...uploadProps
     } = props;
-    const uploadControl = /* @__PURE__ */ jsx16(
+    const uploadControl = /* @__PURE__ */ jsx17(
       UploadInputControl,
       {
         ...uploadProps,
@@ -3047,13 +3180,13 @@ var Input = React15.forwardRef((props, ref) => {
           fontWeight: 700
         }
       }),
-      uploadOptionalLabel ? /* @__PURE__ */ jsx16("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(uploadOptionalLabel, {
+      uploadOptionalLabel ? /* @__PURE__ */ jsx17("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(uploadOptionalLabel, {
         as: "span",
         className: "text-[color:var(--sofya-text-subtle)]",
         size: "tiny"
       }) }) : null
     ] }) : void 0;
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       FieldShell,
       {
         containerClassName: containerClassName2,
@@ -3077,7 +3210,7 @@ var Input = React15.forwardRef((props, ref) => {
   const resolvedType = type ?? (isSearch ? "search" : void 0);
   const ariaLabel = nativeProps["aria-label"] ?? (typeof label === "string" ? label : isSearch ? "Search" : void 0);
   const nativeControl = isSearch ? /* @__PURE__ */ jsxs9("div", { className: "flex h-[88px] w-full items-center gap-6 rounded-full border border-[color:var(--sofya-border-strong)] bg-card px-8 shadow-none transition-[border-color,box-shadow,background-color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] hover:ring-2 hover:ring-[color:var(--sofya-focus-ring-soft)] focus-within:border-transparent focus-within:ring-2 focus-within:ring-[color:var(--sofya-focus-ring-soft)] has-[:active]:border-transparent has-[:active]:ring-2 has-[:active]:ring-[color:var(--sofya-focus-ring-soft)]", children: [
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       Icon,
       {
         "aria-hidden": "true",
@@ -3086,7 +3219,7 @@ var Input = React15.forwardRef((props, ref) => {
         size: 32
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "input",
       {
         id: resolvedId,
@@ -3102,7 +3235,7 @@ var Input = React15.forwardRef((props, ref) => {
         placeholder: nativeProps.placeholder ?? "Search"
       }
     )
-  ] }) : /* @__PURE__ */ jsx16(
+  ] }) : /* @__PURE__ */ jsx17(
     "input",
     {
       id: resolvedId,
@@ -3116,7 +3249,7 @@ var Input = React15.forwardRef((props, ref) => {
       "aria-label": ariaLabel
     }
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     FieldShell,
     {
       containerClassName,
@@ -3130,22 +3263,33 @@ var Input = React15.forwardRef((props, ref) => {
 Input.displayName = "Input";
 
 // src/components/popover.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverPortal = PopoverPrimitive.Portal;
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React16.forwardRef(function PopoverContent2({
+var PopoverCloseButton = React17.forwardRef(function PopoverCloseButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx18(PopoverPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx18(
+    CloseButton,
+    {
+      ref,
+      className: cn("absolute right-2 top-2", className),
+      ...props
+    }
+  ) });
+});
+PopoverCloseButton.displayName = "PopoverCloseButton";
+var PopoverContent = React17.forwardRef(function PopoverContent2({
   align = "center",
   className,
   collisionPadding = 8,
   sideOffset = 8,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx18(
     PopoverPrimitive.Content,
     {
       ref,
@@ -3162,8 +3306,8 @@ var PopoverContent = React16.forwardRef(function PopoverContent2({
   ) });
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var PopoverTitle = React16.forwardRef(function PopoverTitle2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx17(
+var PopoverTitle = React17.forwardRef(function PopoverTitle2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx18(
     "h4",
     {
       ref,
@@ -3179,8 +3323,8 @@ var PopoverTitle = React16.forwardRef(function PopoverTitle2({ children, classNa
   );
 });
 PopoverTitle.displayName = "PopoverTitle";
-var PopoverDescription = React16.forwardRef(function PopoverDescription2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx17(
+var PopoverDescription = React17.forwardRef(function PopoverDescription2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx18(
     "p",
     {
       ref,
@@ -3198,11 +3342,11 @@ var PopoverDescription = React16.forwardRef(function PopoverDescription2({ child
 PopoverDescription.displayName = "PopoverDescription";
 
 // src/components/spinner.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { IconLoader2 as IconLoader22 } from "@tabler/icons-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var spinnerSizeOptions = ["sm", "default", "lg"];
-var Spinner = React17.forwardRef(function Spinner2({
+var Spinner = React18.forwardRef(function Spinner2({
   "aria-label": ariaLabelProp,
   "aria-labelledby": ariaLabelledby,
   className,
@@ -3211,7 +3355,7 @@ var Spinner = React17.forwardRef(function Spinner2({
   ...props
 }, ref) {
   const ariaLabel = ariaLabelProp ?? (ariaLabelledby ? void 0 : "Loading");
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     IconLoader22,
     {
       ref,
@@ -3231,8 +3375,8 @@ var Spinner = React17.forwardRef(function Spinner2({
 Spinner.displayName = "Spinner";
 
 // src/components/dropdown-search.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
-var DropdownSearch = React18.forwardRef(
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var DropdownSearch = React19.forwardRef(
   function DropdownSearch2({
     className,
     containerClassName,
@@ -3250,8 +3394,8 @@ var DropdownSearch = React18.forwardRef(
     query: queryProp,
     value: valueProp
   }, ref) {
-    const listboxId = React18.useId();
-    const [open, setOpen] = React18.useState(false);
+    const listboxId = React19.useId();
+    const [open, setOpen] = React19.useState(false);
     const [query, setQuery] = useControllableState({
       defaultValue: defaultQuery,
       onChange: onQueryChange,
@@ -3262,9 +3406,9 @@ var DropdownSearch = React18.forwardRef(
       onChange,
       value: valueProp
     });
-    const inputRef = React18.useRef(null);
-    const listRef = React18.useRef(null);
-    const setInputRef = React18.useCallback(
+    const inputRef = React19.useRef(null);
+    const listRef = React19.useRef(null);
+    const setInputRef = React19.useCallback(
       (node) => {
         inputRef.current = node;
         if (typeof ref === "function") {
@@ -3326,7 +3470,7 @@ var DropdownSearch = React18.forwardRef(
       setOpen(false);
     }
     return /* @__PURE__ */ jsxs10(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx19(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx19("div", { className: cn("w-full", containerClassName), children: /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx20("div", { className: cn("w-full", containerClassName), children: /* @__PURE__ */ jsx20(
         Input,
         {
           ref: setInputRef,
@@ -3347,7 +3491,7 @@ var DropdownSearch = React18.forwardRef(
           onKeyDown: handleInputKeyDown
         }
       ) }) }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         PopoverContent,
         {
           align: "start",
@@ -3358,7 +3502,7 @@ var DropdownSearch = React18.forwardRef(
               e.preventDefault();
             }
           },
-          children: loading ? /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx19(Spinner, { size: "sm" }) }) : options.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "px-3 py-4 text-center", children: /* @__PURE__ */ jsx19(
+          children: loading ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx20(Spinner, { size: "sm" }) }) : options.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "px-3 py-4 text-center", children: /* @__PURE__ */ jsx20(
             Text,
             {
               as: "span",
@@ -3366,7 +3510,7 @@ var DropdownSearch = React18.forwardRef(
               className: "text-[color:var(--sofya-text-subtle)]",
               children: emptyMessage
             }
-          ) }) : /* @__PURE__ */ jsx19(
+          ) }) : /* @__PURE__ */ jsx20(
             "ul",
             {
               ref: listRef,
@@ -3374,7 +3518,7 @@ var DropdownSearch = React18.forwardRef(
               role: "listbox",
               "aria-label": typeof label === "string" ? label : "Options",
               className: "flex flex-col gap-0.5",
-              children: options.map((option) => /* @__PURE__ */ jsx19(
+              children: options.map((option) => /* @__PURE__ */ jsx20(
                 "li",
                 {
                   role: "option",
@@ -3398,8 +3542,8 @@ var DropdownSearch = React18.forwardRef(
                       onKeyDown: (e) => handleItemKeyDown(e, option),
                       children: [
                         /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                          /* @__PURE__ */ jsx19(Text, { as: "span", size: "tiny", className: "truncate", children: option.label }),
-                          option.description ? /* @__PURE__ */ jsx19(
+                          /* @__PURE__ */ jsx20(Text, { as: "span", size: "tiny", className: "truncate", children: option.label }),
+                          option.description ? /* @__PURE__ */ jsx20(
                             Text,
                             {
                               as: "span",
@@ -3409,7 +3553,7 @@ var DropdownSearch = React18.forwardRef(
                             }
                           ) : null
                         ] }),
-                        value === option.value ? /* @__PURE__ */ jsx19(
+                        value === option.value ? /* @__PURE__ */ jsx20(
                           Icon,
                           {
                             "aria-hidden": "true",
@@ -3434,17 +3578,17 @@ var DropdownSearch = React18.forwardRef(
 DropdownSearch.displayName = "DropdownSearch";
 
 // src/components/dialog.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogInternalContext = React19.createContext({
+var DialogInternalContext = React20.createContext({
   showCloseButton: true
 });
-var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+var DialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -3456,7 +3600,7 @@ var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React19.forwardRef(
+var DialogContent = React20.forwardRef(
   ({
     className,
     children,
@@ -3472,9 +3616,9 @@ var DialogContent = React19.forwardRef(
       "--sofya-surface-shadow-override": surfaceShadow,
       ...cardStyle
     };
-    return /* @__PURE__ */ jsx20(DialogInternalContext.Provider, { value: { showCloseButton }, children: /* @__PURE__ */ jsxs11(DialogPortal, { children: [
-      /* @__PURE__ */ jsx20(DialogOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ jsx20("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(DialogInternalContext.Provider, { value: { showCloseButton }, children: /* @__PURE__ */ jsxs11(DialogPortal, { children: [
+      /* @__PURE__ */ jsx21(DialogOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsx21("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx21(
         DialogPrimitive.Content,
         {
           ref,
@@ -3483,7 +3627,7 @@ var DialogContent = React19.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ jsx20(
+          children: /* @__PURE__ */ jsx21(
             Card,
             {
               variant,
@@ -3502,31 +3646,21 @@ var DialogContent = React19.forwardRef(
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 function DialogHeader({ className, children, ...props }) {
-  const { showCloseButton } = React19.useContext(DialogInternalContext);
+  const { showCloseButton } = React20.useContext(DialogInternalContext);
   return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cn("flex w-full items-start justify-between gap-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx20("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-left", children }),
-        showCloseButton ? /* @__PURE__ */ jsx20(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx20(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "icon",
-            "aria-label": "Close",
-            leftIcon: /* @__PURE__ */ jsx20(Icon, { name: "x", size: 18 }),
-            className: "shrink-0 text-muted-foreground hover:text-foreground"
-          }
-        ) }) : null
+        /* @__PURE__ */ jsx21("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-left", children }),
+        showCloseButton ? /* @__PURE__ */ jsx21(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx21(CloseButton, { label: "Fechar" }) }) : null
       ]
     }
   );
 }
 function DialogBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn("flex flex-col gap-4", className),
@@ -3535,7 +3669,7 @@ function DialogBody({ className, ...props }) {
   );
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn("flex items-center justify-end gap-2", className),
@@ -3543,11 +3677,11 @@ function DialogFooter({ className, ...props }) {
     }
   );
 }
-var DialogCancel = React19.forwardRef(
-  ({ type = "button", variant = "ghost", ...props }, ref) => /* @__PURE__ */ jsx20(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx20(Button, { ref, type, variant, ...props }) })
+var DialogCancel = React20.forwardRef(
+  ({ type = "button", variant = "ghost", ...props }, ref) => /* @__PURE__ */ jsx21(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx21(Button, { ref, type, variant, ...props }) })
 );
 DialogCancel.displayName = "DialogCancel";
-var DialogTitle = React19.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx20(
+var DialogTitle = React20.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx21(
   DialogPrimitive.Title,
   {
     ref,
@@ -3561,7 +3695,7 @@ var DialogTitle = React19.forwardRef(({ children, className, ...props }, ref) =>
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React19.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx20(
+var DialogDescription = React20.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx21(
   DialogPrimitive.Description,
   {
     ref,
@@ -3577,9 +3711,9 @@ var DialogDescription = React19.forwardRef(({ children, className, ...props }, r
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/document-card.tsx
-import * as React20 from "react";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
-var DocumentCard = React20.forwardRef(
+import * as React21 from "react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var DocumentCard = React21.forwardRef(
   ({
     actions,
     className,
@@ -3611,7 +3745,7 @@ var DocumentCard = React20.forwardRef(
         ),
         ...props,
         children: [
-          leading ? /* @__PURE__ */ jsx21(
+          leading ? /* @__PURE__ */ jsx22(
             "span",
             {
               "data-slot": "document-card-leading",
@@ -3620,11 +3754,11 @@ var DocumentCard = React20.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxs12("span", { "data-slot": "document-card-content", className: "min-w-0", children: [
-            /* @__PURE__ */ jsx21(Text, { as: "span", size: "label-md", className: "block truncate text-foreground", children: title }),
-            description ? /* @__PURE__ */ jsx21(Text, { as: "span", size: "caption", className: "block truncate text-muted-foreground", children: description }) : null,
-            meta ? /* @__PURE__ */ jsx21(Text, { as: "span", size: "caption", className: "block truncate text-muted-foreground", children: meta }) : null
+            /* @__PURE__ */ jsx22(Text, { as: "span", size: "label-md", className: "block truncate text-foreground", children: title }),
+            description ? /* @__PURE__ */ jsx22(Text, { as: "span", size: "caption", className: "block truncate text-muted-foreground", children: description }) : null,
+            meta ? /* @__PURE__ */ jsx22(Text, { as: "span", size: "caption", className: "block truncate text-muted-foreground", children: meta }) : null
           ] }),
-          actions ? /* @__PURE__ */ jsx21(
+          actions ? /* @__PURE__ */ jsx22(
             "span",
             {
               "data-slot": "document-card-actions",
@@ -3640,9 +3774,9 @@ var DocumentCard = React20.forwardRef(
 DocumentCard.displayName = "DocumentCard";
 
 // src/components/empty.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { cva as cva5 } from "class-variance-authority";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 var emptyMediaVariantOptions = ["default", "icon"];
 var emptyMediaVariants = cva5(
   "inline-flex shrink-0 items-center justify-center transition-[background-color,border-color,color,box-shadow] duration-sofya ease-sofya",
@@ -3658,11 +3792,11 @@ var emptyMediaVariants = cva5(
     }
   }
 );
-var EmptyMedia = React21.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
-  return /* @__PURE__ */ jsx22("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
+var EmptyMedia = React22.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
+  return /* @__PURE__ */ jsx23("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
 });
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn("flex max-w-[34rem] flex-col items-center gap-4 text-center", className),
@@ -3671,7 +3805,7 @@ function EmptyHeader({ className, ...props }) {
   );
 }
 function EmptyTitle({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "h2",
     {
       className: cn("text-foreground", className),
@@ -3689,7 +3823,7 @@ function EmptyDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "p",
     {
       className: cn("max-w-full text-muted-foreground whitespace-nowrap", className),
@@ -3703,7 +3837,7 @@ function EmptyDescription({
   );
 }
 function EmptyContent({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn("flex flex-wrap items-center justify-center gap-4 text-center", className),
@@ -3714,9 +3848,9 @@ function EmptyContent({ children, className, ...props }) {
     }
   );
 }
-var Empty = React21.forwardRef(function Empty2({ children, className, content, description, media, title, ...props }, ref) {
-  const hasCustomChildren = React21.Children.count(children) > 0;
-  return /* @__PURE__ */ jsx22(
+var Empty = React22.forwardRef(function Empty2({ children, className, content, description, media, title, ...props }, ref) {
+  const hasCustomChildren = React22.Children.count(children) > 0;
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       ref,
@@ -3727,11 +3861,11 @@ var Empty = React21.forwardRef(function Empty2({ children, className, content, d
       ...props,
       children: hasCustomChildren ? children : /* @__PURE__ */ jsxs13(Fragment3, { children: [
         /* @__PURE__ */ jsxs13(EmptyHeader, { children: [
-          media ?? /* @__PURE__ */ jsx22(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(Icon, { name: "folders", size: 28 }) }),
-          /* @__PURE__ */ jsx22(EmptyTitle, { children: title ?? "Nada por aqui" }),
-          /* @__PURE__ */ jsx22(EmptyDescription, { children: description ?? "Quando houver conte\xFAdo dispon\xEDvel, ele aparecer\xE1 aqui." })
+          media ?? /* @__PURE__ */ jsx23(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(Icon, { name: "folders", size: 28 }) }),
+          /* @__PURE__ */ jsx23(EmptyTitle, { children: title ?? "Nada por aqui" }),
+          /* @__PURE__ */ jsx23(EmptyDescription, { children: description ?? "Quando houver conte\xFAdo dispon\xEDvel, ele aparecer\xE1 aqui." })
         ] }),
-        content !== void 0 && content !== null ? /* @__PURE__ */ jsx22(EmptyContent, { children: content }) : null
+        content !== void 0 && content !== null ? /* @__PURE__ */ jsx23(EmptyContent, { children: content }) : null
       ] })
     }
   );
@@ -3743,12 +3877,58 @@ EmptyTitle.displayName = "EmptyTitle";
 EmptyDescription.displayName = "EmptyDescription";
 EmptyContent.displayName = "EmptyContent";
 
+// src/components/icon-button.tsx
+import * as React23 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var iconButtonVariantOptions = [
+  "ghost",
+  "subtle",
+  "solid",
+  "destructive"
+];
+var iconButtonSizeOptions = ["sm", "md", "lg"];
+var iconButtonSizeClasses = {
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-12"
+};
+var iconButtonVariantClasses = {
+  ghost: "bg-transparent text-[color:var(--sofya-text-soft)] shadow-none hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] data-[selected=true]:bg-[color:var(--sofya-surface-selected)] data-[selected=true]:text-primary",
+  subtle: "bg-[color:var(--sofya-surface-muted)] text-[color:var(--sofya-text-default)] shadow-none hover:bg-[color:var(--sofya-surface-hover-strong)] data-[selected=true]:bg-[color:var(--sofya-surface-selected)] data-[selected=true]:text-primary",
+  solid: "bg-primary text-primary-foreground shadow-none hover:brightness-[1.04] data-[selected=true]:bg-primary",
+  destructive: "bg-transparent text-[color:var(--sofya-text-soft)] shadow-none hover:bg-[color:var(--sofya-surface-destructive)] hover:text-destructive"
+};
+var IconButton = React23.forwardRef(
+  function IconButton2({ className, icon, selected, size = "sm", variant = "ghost", ...props }, ref) {
+    return /* @__PURE__ */ jsx24(
+      Button,
+      {
+        ref,
+        "data-slot": "icon-button",
+        "data-selected": selected ? "true" : void 0,
+        "aria-pressed": selected === void 0 ? void 0 : selected,
+        variant: "ghost",
+        size: "icon",
+        leftIcon: icon,
+        className: cn(
+          "rounded-[var(--sofya-radius-md)] p-0 shadow-none",
+          iconButtonSizeClasses[size],
+          iconButtonVariantClasses[variant],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
 // src/components/label.tsx
-import * as React22 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var Label = React22.forwardRef(
+import * as React24 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Label = React24.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx25(
       "label",
       {
         ref,
@@ -3772,8 +3952,8 @@ var Label = React22.forwardRef(
 Label.displayName = "Label";
 
 // src/components/layout.tsx
-import * as React23 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import * as React25 from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var alignClassName = {
   start: "items-start",
   center: "items-center",
@@ -3791,8 +3971,8 @@ function getGapStyle(gap) {
     "--sofya-layout-gap": `var(--sofya-gap-${gap})`
   };
 }
-var Stack = React23.forwardRef(
-  ({ className, gap = "default", style, ...props }, ref) => /* @__PURE__ */ jsx24(
+var Stack = React25.forwardRef(
+  ({ className, gap = "default", style, ...props }, ref) => /* @__PURE__ */ jsx26(
     "div",
     {
       ref,
@@ -3804,7 +3984,7 @@ var Stack = React23.forwardRef(
   )
 );
 Stack.displayName = "Stack";
-var Cluster = React23.forwardRef(
+var Cluster = React25.forwardRef(
   ({
     align = "center",
     className,
@@ -3812,7 +3992,7 @@ var Cluster = React23.forwardRef(
     justify = "start",
     style,
     ...props
-  }, ref) => /* @__PURE__ */ jsx24(
+  }, ref) => /* @__PURE__ */ jsx26(
     "div",
     {
       ref,
@@ -3829,8 +4009,8 @@ var Cluster = React23.forwardRef(
   )
 );
 Cluster.displayName = "Cluster";
-var Inline = React23.forwardRef(
-  ({ align = "center", className, gap = "compact", style, ...props }, ref) => /* @__PURE__ */ jsx24(
+var Inline = React25.forwardRef(
+  ({ align = "center", className, gap = "compact", style, ...props }, ref) => /* @__PURE__ */ jsx26(
     "div",
     {
       ref,
@@ -3846,12 +4026,12 @@ var Inline = React23.forwardRef(
   )
 );
 Inline.displayName = "Inline";
-var Container = React23.forwardRef(
+var Container = React25.forwardRef(
   ({ className, measure = "reading", style, ...props }, ref) => {
     const measureStyle = measure === "none" ? void 0 : {
       "--sofya-layout-measure": `var(--sofya-measure-${measure})`
     };
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
         ref,
@@ -3870,10 +4050,10 @@ var Container = React23.forwardRef(
 Container.displayName = "Container";
 
 // src/components/link.tsx
-import * as React24 from "react";
+import * as React26 from "react";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva6 } from "class-variance-authority";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var linkVariants = cva6(
   "inline bg-[linear-gradient(currentColor,currentColor)] bg-[position:0_100%] bg-no-repeat pb-0 text-primary no-underline transition-[color,background-size,box-shadow] duration-sofya ease-sofya hover:text-[color:var(--sofya-link-hover)] focus-visible:rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
   {
@@ -3888,9 +4068,9 @@ var linkVariants = cva6(
     }
   }
 );
-var Link = React24.forwardRef(function Link2({ asChild = false, children, className, variant = "default", ...props }, ref) {
+var Link = React26.forwardRef(function Link2({ asChild = false, children, className, variant = "default", ...props }, ref) {
   const Component = asChild ? Slot3 : "a";
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     Component,
     {
       ref,
@@ -3908,7 +4088,7 @@ var Link = React24.forwardRef(function Link2({ asChild = false, children, classN
 Link.displayName = "Link";
 
 // src/components/logo.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 
 // src/components/logo-data.ts
 var logoAssets = {
@@ -4005,7 +4185,7 @@ var logoAssets = {
 };
 
 // src/components/logo.tsx
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var logoVariants = ["mono", "default", "text", "full"];
 var logoSizeOptions = ["sm", "md", "lg", "xl", "2xl"];
 var logoSizeScale = {
@@ -4041,7 +4221,7 @@ function resolveLogoDimensions(variant, size, width, height) {
     height: resolvedHeight
   };
 }
-var Logo = React25.forwardRef(function Logo2({
+var Logo = React27.forwardRef(function Logo2({
   variant = "full",
   size = "lg",
   width,
@@ -4052,7 +4232,7 @@ var Logo = React25.forwardRef(function Logo2({
   ...props
 }, ref) {
   const asset = logoAssets[variant];
-  const titleId = React25.useId();
+  const titleId = React27.useId();
   const dimensions = resolveLogoDimensions(variant, size, width, height);
   const monoFill = variant === "mono" ? monoColor ?? "currentColor" : void 0;
   return /* @__PURE__ */ jsxs14(
@@ -4070,8 +4250,8 @@ var Logo = React25.forwardRef(function Logo2({
       focusable: "false",
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsx26("title", { id: titleId, children: title }) : null,
-        asset.paths.map((path, index) => /* @__PURE__ */ jsx26(
+        title ? /* @__PURE__ */ jsx28("title", { id: titleId, children: title }) : null,
+        asset.paths.map((path, index) => /* @__PURE__ */ jsx28(
           "path",
           {
             d: path.d,
@@ -4103,14 +4283,15 @@ var inheritedTypographyStyle = {
 };
 
 // src/components/pagination.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 var paginationLinkVariants = cva7(
-  "inline-flex h-10 min-w-10 items-center justify-center rounded-full border border-transparent px-4 [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-medium leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-soft)] no-underline transition-[transform,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
+  "inline-flex h-10 min-w-10 items-center justify-center rounded-full border border-transparent px-4 [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-medium leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-soft)] no-underline transition-[transform,background-color,border-color,color] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent",
   {
     variants: {
       isActive: {
-        true: "border-[color:var(--sofya-border-strong)] bg-card text-primary shadow-sofya-sm",
-        false: "hover:border-[color:var(--sofya-border-soft)] hover:bg-card hover:text-primary"
+        // Flat, neutral, clearly current — no shadow, no decorative glow.
+        true: "bg-[color:var(--sofya-surface-selected)] font-semibold text-primary",
+        false: "hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)]"
       },
       size: {
         default: "px-4",
@@ -4124,7 +4305,7 @@ var paginationLinkVariants = cva7(
   }
 );
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     "nav",
     {
       "aria-label": "Pagination",
@@ -4137,7 +4318,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     "ul",
     {
       className: cn(
@@ -4149,7 +4330,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx27("li", { className: cn("list-none", className), ...props });
+  return /* @__PURE__ */ jsx29("li", { className: cn("list-none", className), ...props });
 }
 function PaginationLink({
   asChild = false,
@@ -4159,7 +4340,7 @@ function PaginationLink({
   ...props
 }) {
   const Component = asChild ? Slot4 : "a";
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     Component,
     {
       "aria-current": isActive ? "page" : void 0,
@@ -4169,10 +4350,10 @@ function PaginationLink({
   );
 }
 function PaginationChevronLeft() {
-  return /* @__PURE__ */ jsx27(IconChevronLeft2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
+  return /* @__PURE__ */ jsx29(IconChevronLeft2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
 }
 function PaginationChevronRight() {
-  return /* @__PURE__ */ jsx27(IconChevronRight2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
+  return /* @__PURE__ */ jsx29(IconChevronRight2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
 }
 function PaginationPrevious({
   className,
@@ -4186,8 +4367,8 @@ function PaginationPrevious({
       className: cn("gap-2 px-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx27(PaginationChevronLeft, {}),
-        /* @__PURE__ */ jsx27("span", { className: "hidden sm:block", children: renderTextContent(text, {
+        /* @__PURE__ */ jsx29(PaginationChevronLeft, {}),
+        /* @__PURE__ */ jsx29("span", { className: "hidden sm:block", children: renderTextContent(text, {
           as: "span",
           className: "block text-inherit",
           size: "body",
@@ -4209,13 +4390,13 @@ function PaginationNext({
       className: cn("gap-2 px-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx27("span", { className: "hidden sm:block", children: renderTextContent(text, {
+        /* @__PURE__ */ jsx29("span", { className: "hidden sm:block", children: renderTextContent(text, {
           as: "span",
           className: "block text-inherit",
           size: "body",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ jsx27(PaginationChevronRight, {})
+        /* @__PURE__ */ jsx29(PaginationChevronRight, {})
       ]
     }
   );
@@ -4234,23 +4415,23 @@ function PaginationEllipsis({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx27("span", { children: renderTextContent("...", {
+        /* @__PURE__ */ jsx29("span", { children: renderTextContent("...", {
           as: "span",
           className: "block text-inherit",
           size: "h5",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/prose-dialog.tsx
-import * as React26 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var proseDialogMaxWidth = "min(var(--sofya-layout-prose-dialog-width), calc(100vw - var(--sofya-space-8)))";
-var ProseDialogContent = React26.forwardRef(
+var ProseDialogContent = React28.forwardRef(
   ({
     cardClassName,
     cardStyle: incomingCardStyle,
@@ -4268,7 +4449,7 @@ var ProseDialogContent = React26.forwardRef(
       ...incomingCardStyle,
       maxWidth: proseDialogMaxWidth
     };
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx30(
       DialogContent,
       {
         ref,
@@ -4289,14 +4470,14 @@ var ProseDialogContent = React26.forwardRef(
 );
 ProseDialogContent.displayName = "ProseDialogContent";
 function ProseDialogHeader(props) {
-  return /* @__PURE__ */ jsx28(DialogHeader, { "data-slot": "prose-dialog-header", ...props });
+  return /* @__PURE__ */ jsx30(DialogHeader, { "data-slot": "prose-dialog-header", ...props });
 }
 ProseDialogHeader.displayName = "ProseDialogHeader";
-var ProseDialogTitle = React26.forwardRef((props, ref) => /* @__PURE__ */ jsx28(DialogTitle, { ref, "data-slot": "prose-dialog-title", ...props }));
+var ProseDialogTitle = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx30(DialogTitle, { ref, "data-slot": "prose-dialog-title", ...props }));
 ProseDialogTitle.displayName = "ProseDialogTitle";
-var ProseDialogDescription = React26.forwardRef((props, ref) => /* @__PURE__ */ jsx28(DialogDescription, { ref, "data-slot": "prose-dialog-description", ...props }));
+var ProseDialogDescription = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx30(DialogDescription, { ref, "data-slot": "prose-dialog-description", ...props }));
 ProseDialogDescription.displayName = "ProseDialogDescription";
-var ProseDialogBody = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var ProseDialogBody = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
   "div",
   {
     ref,
@@ -4315,9 +4496,9 @@ var ProseDialogBody = React26.forwardRef(({ className, ...props }, ref) => /* @_
 ProseDialogBody.displayName = "ProseDialogBody";
 
 // src/components/progress.tsx
-import * as React27 from "react";
+import * as React29 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var progressSizeOptions = ["sm", "default", "lg"];
 function clampProgressValue(value, max) {
   if (Number.isNaN(value)) {
@@ -4325,7 +4506,7 @@ function clampProgressValue(value, max) {
   }
   return Math.min(Math.max(value, 0), max);
 }
-var Progress = React27.forwardRef(function Progress2({
+var Progress = React29.forwardRef(function Progress2({
   className,
   indicatorClassName,
   max = 100,
@@ -4336,7 +4517,7 @@ var Progress = React27.forwardRef(function Progress2({
   const safeMax = max > 0 ? max : 100;
   const resolvedValue = typeof value === "number" ? clampProgressValue(value, safeMax) : null;
   const progressScale = resolvedValue === null ? void 0 : Number((resolvedValue / safeMax).toFixed(4));
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     ProgressPrimitive.Root,
     {
       ref,
@@ -4349,7 +4530,7 @@ var Progress = React27.forwardRef(function Progress2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx31(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
@@ -4366,19 +4547,19 @@ var Progress = React27.forwardRef(function Progress2({
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/radio-group.tsx
-import * as React28 from "react";
+import * as React30 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 var radioGroupOrientationOptions = ["horizontal", "vertical"];
 var radioGroupVariantOptions = ["default", "pill", "option"];
-var RadioGroupContext = React28.createContext({
+var RadioGroupContext = React30.createContext({
   variant: "default"
 });
-var RadioGroupOptionContext = React28.createContext(
+var RadioGroupOptionContext = React30.createContext(
   {}
 );
-var RadioGroupRoot = React28.forwardRef(function RadioGroup2({ className, variant = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx30(RadioGroupContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx30(
+var RadioGroupRoot = React30.forwardRef(function RadioGroup2({ className, variant = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx32(RadioGroupContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx32(
     RadioGroupPrimitive.Root,
     {
       ref,
@@ -4394,7 +4575,7 @@ var RadioGroupRoot = React28.forwardRef(function RadioGroup2({ className, varian
   ) });
 });
 RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
+var RadioGroupItem = React30.forwardRef(function RadioGroupItem2({
   className,
   controlClassName,
   description,
@@ -4406,14 +4587,14 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
   labelClassName,
   ...props
 }, ref) {
-  const { variant } = React28.useContext(RadioGroupContext);
-  const generatedId = React28.useId();
+  const { variant } = React30.useContext(RadioGroupContext);
+  const generatedId = React30.useId();
   const resolvedId = id ?? generatedId;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const descriptionId = description ? `${resolvedId}-description` : void 0;
   const alignClassName2 = description ? "items-start" : "items-center";
   if (variant === "pill") {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx32(
       RadioGroupPrimitive.Item,
       {
         ref,
@@ -4429,7 +4610,7 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
         ),
         ...props,
         children: label || description ? /* @__PURE__ */ jsxs16("span", { className: "grid justify-items-center gap-1 text-center", children: [
-          label ? /* @__PURE__ */ jsx30(
+          label ? /* @__PURE__ */ jsx32(
             "span",
             {
               id: labelId,
@@ -4444,7 +4625,7 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
               })
             }
           ) : null,
-          description ? /* @__PURE__ */ jsx30(
+          description ? /* @__PURE__ */ jsx32(
             "span",
             {
               id: descriptionId,
@@ -4472,7 +4653,7 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
         disabled
       }),
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(
           RadioGroupPrimitive.Item,
           {
             ref,
@@ -4488,7 +4669,7 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
               controlClassName
             ),
             ...props,
-            children: /* @__PURE__ */ jsx30(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx32(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx32(
               "span",
               {
                 "data-slot": "radio-group-indicator",
@@ -4501,7 +4682,7 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
           }
         ),
         label || description ? /* @__PURE__ */ jsxs16("span", { className: selectionControlContentBaseClasses, children: [
-          label ? /* @__PURE__ */ jsx30(
+          label ? /* @__PURE__ */ jsx32(
             "span",
             {
               id: labelId,
@@ -4516,7 +4697,7 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
               })
             }
           ) : null,
-          description ? /* @__PURE__ */ jsx30(
+          description ? /* @__PURE__ */ jsx32(
             "span",
             {
               id: descriptionId,
@@ -4537,7 +4718,7 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-var RadioGroupOptionAvatar = React28.forwardRef(function RadioGroupOptionAvatar2({
+var RadioGroupOptionAvatar = React30.forwardRef(function RadioGroupOptionAvatar2({
   alt,
   avatarClassName,
   avatarProps,
@@ -4547,7 +4728,7 @@ var RadioGroupOptionAvatar = React28.forwardRef(function RadioGroupOptionAvatar2
   src,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       ref,
@@ -4557,7 +4738,7 @@ var RadioGroupOptionAvatar = React28.forwardRef(function RadioGroupOptionAvatar2
         className
       ),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx30(
+      children: children ?? /* @__PURE__ */ jsx32(
         Avatar,
         {
           ...avatarProps,
@@ -4574,9 +4755,9 @@ var RadioGroupOptionAvatar = React28.forwardRef(function RadioGroupOptionAvatar2
   );
 });
 RadioGroupOptionAvatar.displayName = "RadioGroupOptionAvatar";
-var RadioGroupOptionLabel = React28.forwardRef(function RadioGroupOptionLabel2({ children, className, ...props }, ref) {
-  const { labelId } = React28.useContext(RadioGroupOptionContext);
-  return /* @__PURE__ */ jsx30(
+var RadioGroupOptionLabel = React30.forwardRef(function RadioGroupOptionLabel2({ children, className, ...props }, ref) {
+  const { labelId } = React30.useContext(RadioGroupOptionContext);
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       ref,
@@ -4596,9 +4777,9 @@ var RadioGroupOptionLabel = React28.forwardRef(function RadioGroupOptionLabel2({
   );
 });
 RadioGroupOptionLabel.displayName = "RadioGroupOptionLabel";
-var RadioGroupOptionDescription = React28.forwardRef(function RadioGroupOptionDescription2({ children, className, ...props }, ref) {
-  const { descriptionId } = React28.useContext(RadioGroupOptionContext);
-  return /* @__PURE__ */ jsx30(
+var RadioGroupOptionDescription = React30.forwardRef(function RadioGroupOptionDescription2({ children, className, ...props }, ref) {
+  const { descriptionId } = React30.useContext(RadioGroupOptionContext);
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       ref,
@@ -4617,8 +4798,8 @@ var RadioGroupOptionDescription = React28.forwardRef(function RadioGroupOptionDe
   );
 });
 RadioGroupOptionDescription.displayName = "RadioGroupOptionDescription";
-var RadioGroupOptionIndicator = React28.forwardRef(function RadioGroupOptionIndicator2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var RadioGroupOptionIndicator = React30.forwardRef(function RadioGroupOptionIndicator2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       ref,
@@ -4628,7 +4809,7 @@ var RadioGroupOptionIndicator = React28.forwardRef(function RadioGroupOptionIndi
         className
       ),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx30(
+      children: children ?? /* @__PURE__ */ jsx32(
         "svg",
         {
           "aria-hidden": "true",
@@ -4636,7 +4817,7 @@ var RadioGroupOptionIndicator = React28.forwardRef(function RadioGroupOptionIndi
           className: "h-6 w-6 opacity-0 transition-opacity duration-sofya ease-sofya group-data-[state=checked]/radio-option:opacity-100",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx30(
+          children: /* @__PURE__ */ jsx32(
             "path",
             {
               d: "M9.55 17.6537L4.2155 12.3192L5.2845 11.25L9.55 15.5155L18.7155 6.35L19.7845 7.41925L9.55 17.6537Z",
@@ -4650,14 +4831,14 @@ var RadioGroupOptionIndicator = React28.forwardRef(function RadioGroupOptionIndi
 });
 RadioGroupOptionIndicator.displayName = "RadioGroupOptionIndicator";
 function isOptionChild(child, component) {
-  return React28.isValidElement(child) && child.type === component;
+  return React30.isValidElement(child) && child.type === component;
 }
-var RadioGroupOption = React28.forwardRef(function RadioGroupOption2({ children, className, disabled, id, ...props }, ref) {
-  const generatedId = React28.useId();
+var RadioGroupOption = React30.forwardRef(function RadioGroupOption2({ children, className, disabled, id, ...props }, ref) {
+  const generatedId = React30.useId();
   const resolvedId = id ?? generatedId;
   const labelId = `${resolvedId}-label`;
   const descriptionId = `${resolvedId}-description`;
-  const childArray = React28.Children.toArray(children);
+  const childArray = React30.Children.toArray(children);
   const leadingChildren = [];
   const contentChildren = [];
   let indicatorChild = null;
@@ -4672,7 +4853,7 @@ var RadioGroupOption = React28.forwardRef(function RadioGroupOption2({ children,
     }
     contentChildren.push(child);
   }
-  return /* @__PURE__ */ jsx30(RadioGroupOptionContext.Provider, { value: { descriptionId, labelId }, children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx32(RadioGroupOptionContext.Provider, { value: { descriptionId, labelId }, children: /* @__PURE__ */ jsxs16(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -4692,7 +4873,7 @@ var RadioGroupOption = React28.forwardRef(function RadioGroupOption2({ children,
       ...props,
       children: [
         leadingChildren,
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(
           "span",
           {
             "data-slot": "radio-group-option-content",
@@ -4700,7 +4881,7 @@ var RadioGroupOption = React28.forwardRef(function RadioGroupOption2({ children,
             children: contentChildren
           }
         ),
-        indicatorChild ?? /* @__PURE__ */ jsx30(RadioGroupOptionIndicator, {})
+        indicatorChild ?? /* @__PURE__ */ jsx32(RadioGroupOptionIndicator, {})
       ]
     }
   ) });
@@ -4716,22 +4897,92 @@ var RadioGroup3 = Object.assign(RadioGroupRoot, {
   OptionLabel: RadioGroupOptionLabel
 });
 
+// src/components/rich-text-toolbar.tsx
+import * as React31 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var RichTextToolbar = React31.forwardRef(
+  function RichTextToolbar2({ className, editorFocused = false, role = "toolbar", ...props }, ref) {
+    return /* @__PURE__ */ jsx33(
+      "div",
+      {
+        ref,
+        role,
+        "aria-label": props["aria-label"] ?? "Formata\xE7\xE3o de texto",
+        "aria-orientation": "horizontal",
+        "data-slot": "rich-text-toolbar",
+        "data-editor-focused": editorFocused ? "true" : void 0,
+        className: cn(
+          "inline-flex flex-wrap items-center gap-[var(--sofya-gap-tight)] rounded-[var(--sofya-radius-md)] border border-[color:var(--sofya-border-soft)] bg-card p-[var(--sofya-space-1)] transition-[border-color,box-shadow] duration-sofya ease-sofya",
+          "focus-within:border-[color:var(--sofya-border-hover)]",
+          "data-[editor-focused=true]:border-[color:var(--sofya-border-hover)] data-[editor-focused=true]:ring-2 data-[editor-focused=true]:ring-[color:var(--sofya-focus-ring-soft)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+RichTextToolbar.displayName = "RichTextToolbar";
+var RichTextToolbarGroup = React31.forwardRef(function RichTextToolbarGroup2({ className, role = "group", ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
+    "div",
+    {
+      ref,
+      role,
+      "data-slot": "rich-text-toolbar-group",
+      className: cn(
+        "flex items-center gap-[var(--sofya-space-0-5)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+RichTextToolbarGroup.displayName = "RichTextToolbarGroup";
+var RichTextToolbarSeparator = React31.forwardRef(function RichTextToolbarSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      "data-slot": "rich-text-toolbar-separator",
+      className: cn(
+        "mx-[var(--sofya-space-1)] h-5 w-px shrink-0 bg-[color:var(--sofya-border-soft)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+RichTextToolbarSeparator.displayName = "RichTextToolbarSeparator";
+var RichTextToolbarButton = React31.forwardRef(function RichTextToolbarButton2({ active = false, ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
+    IconButton,
+    {
+      ref,
+      "data-slot": "rich-text-toolbar-button",
+      variant: "ghost",
+      selected: active,
+      ...props
+    }
+  );
+});
+RichTextToolbarButton.displayName = "RichTextToolbarButton";
+
 // src/components/right-rail-action.tsx
-import * as React29 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var RightRailAction = React29.forwardRef(
-  ({ active = false, className, icon, ...props }, ref) => /* @__PURE__ */ jsx31(
-    Button,
+import * as React32 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var RightRailAction = React32.forwardRef(
+  ({ active = false, className, icon, ...props }, ref) => /* @__PURE__ */ jsx34(
+    IconButton,
     {
       ref,
-      active,
+      icon,
+      variant: "ghost",
+      selected: active,
       "data-slot": "right-rail-action",
-      leftIcon: icon,
-      size: "icon",
-      variant: "icon",
       className: cn(
         "size-[var(--sofya-icon-button-size-md)] rounded-[var(--sofya-radius-md)] shadow-none",
-        active && "bg-[color:var(--sofya-surface-selected)]",
         className
       ),
       ...props
@@ -4741,12 +4992,12 @@ var RightRailAction = React29.forwardRef(
 RightRailAction.displayName = "RightRailAction";
 
 // src/components/scroll-area.tsx
-import * as React30 from "react";
+import * as React33 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var scrollAreaOrientationOptions = ["horizontal", "vertical"];
-var ScrollArea = React30.forwardRef(function ScrollArea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx32(
+var ScrollArea = React33.forwardRef(function ScrollArea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx35(
     ScrollAreaPrimitive.Root,
     {
       ref,
@@ -4757,8 +5008,8 @@ var ScrollArea = React30.forwardRef(function ScrollArea2({ className, ...props }
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollAreaViewport = React30.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx32(
+var ScrollAreaViewport = React33.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx35(
     ScrollAreaPrimitive.Viewport,
     {
       ref,
@@ -4772,8 +5023,8 @@ var ScrollAreaViewport = React30.forwardRef(function ScrollAreaViewport2({ class
   );
 });
 ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
-var ScrollAreaScrollbar = React30.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
-  return /* @__PURE__ */ jsx32(
+var ScrollAreaScrollbar = React33.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
+  return /* @__PURE__ */ jsx35(
     ScrollAreaPrimitive.Scrollbar,
     {
       ref,
@@ -4784,7 +5035,7 @@ var ScrollAreaScrollbar = React30.forwardRef(function ScrollAreaScrollbar2({ cla
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx35(
         ScrollAreaPrimitive.Thumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -4798,8 +5049,8 @@ var ScrollAreaScrollbar = React30.forwardRef(function ScrollAreaScrollbar2({ cla
   );
 });
 ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
-var ScrollAreaCorner = React30.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx32(
+var ScrollAreaCorner = React33.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx35(
     ScrollAreaPrimitive.Corner,
     {
       ref,
@@ -4812,19 +5063,19 @@ var ScrollAreaCorner = React30.forwardRef(function ScrollAreaCorner2({ className
 ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
 
 // src/components/select.tsx
-import * as React31 from "react";
+import * as React34 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 // src/lib/form-control-classes.ts
 var formControlBaseClasses = "flex w-full items-center justify-between gap-4 rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 text-left [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] [font-weight:var(--sofya-text-body-font-weight)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus:ring-destructive/20 data-[placeholder]:text-[color:var(--sofya-text-placeholder)]";
 
 // src/components/select.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
 var selectSizeOptions = ["default", "sm"];
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
-var SelectValue = React31.forwardRef(function SelectValue2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+var SelectValue = React34.forwardRef(function SelectValue2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx36(
     Text,
     {
       ref,
@@ -4833,12 +5084,12 @@ var SelectValue = React31.forwardRef(function SelectValue2({ className, ...props
       className: cn("block truncate text-inherit", className),
       size: "tiny",
       style: inheritedTypographyStyle,
-      children: /* @__PURE__ */ jsx33(SelectPrimitive.Value, { className: "block truncate", ...props })
+      children: /* @__PURE__ */ jsx36(SelectPrimitive.Value, { className: "block truncate", ...props })
     }
   );
 });
 SelectValue.displayName = SelectPrimitive.Value.displayName;
-var SelectTrigger = React31.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
+var SelectTrigger = React34.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
   return /* @__PURE__ */ jsxs17(
     SelectPrimitive.Trigger,
     {
@@ -4853,7 +5104,7 @@ var SelectTrigger = React31.forwardRef(function SelectTrigger2({ className, chil
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx33(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx36(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx36(
           Icon,
           {
             name: "caret-down",
@@ -4866,8 +5117,8 @@ var SelectTrigger = React31.forwardRef(function SelectTrigger2({ className, chil
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React31.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+var SelectScrollUpButton = React34.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx36(
     SelectPrimitive.ScrollUpButton,
     {
       ref,
@@ -4877,13 +5128,13 @@ var SelectScrollUpButton = React31.forwardRef(function SelectScrollUpButton2({ c
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx33(Icon, { name: "caret-up", size: 12 })
+      children: /* @__PURE__ */ jsx36(Icon, { name: "caret-up", size: 12 })
     }
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React31.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+var SelectScrollDownButton = React34.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx36(
     SelectPrimitive.ScrollDownButton,
     {
       ref,
@@ -4893,13 +5144,13 @@ var SelectScrollDownButton = React31.forwardRef(function SelectScrollDownButton2
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx33(Icon, { name: "caret-down", size: 12 })
+      children: /* @__PURE__ */ jsx36(Icon, { name: "caret-down", size: 12 })
     }
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React31.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
-  return /* @__PURE__ */ jsx33(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs17(
+var SelectContent = React34.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
+  return /* @__PURE__ */ jsx36(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs17(
     SelectPrimitive.Content,
     {
       ref,
@@ -4912,8 +5163,8 @@ var SelectContent = React31.forwardRef(function SelectContent2({ className, chil
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx33(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx36(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx36(
           SelectPrimitive.Viewport,
           {
             "data-slot": "select-viewport",
@@ -4921,14 +5172,14 @@ var SelectContent = React31.forwardRef(function SelectContent2({ className, chil
             children
           }
         ),
-        /* @__PURE__ */ jsx33(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx36(SelectScrollDownButton, {})
       ]
     }
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React31.forwardRef(function SelectLabel2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+var SelectLabel = React34.forwardRef(function SelectLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx36(
     SelectPrimitive.Label,
     {
       ref,
@@ -4950,7 +5201,7 @@ var SelectLabel = React31.forwardRef(function SelectLabel2({ className, ...props
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React31.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
+var SelectItem = React34.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs17(
     SelectPrimitive.Item,
     {
@@ -4962,20 +5213,20 @@ var SelectItem = React31.forwardRef(function SelectItem2({ className, children,
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx33(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
+        /* @__PURE__ */ jsx36(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
           as: "span",
           className: "block truncate text-[color:var(--sofya-text-default)]",
           size: "tiny",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ jsx33(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx33("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ jsx33(Icon, { name: "check", size: 14 }) }) })
+        /* @__PURE__ */ jsx36(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx36("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ jsx36(Icon, { name: "check", size: 14 }) }) })
       ]
     }
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React31.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+var SelectSeparator = React34.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx36(
     SelectPrimitive.Separator,
     {
       ref,
@@ -4988,11 +5239,11 @@ var SelectSeparator = React31.forwardRef(function SelectSeparator2({ className,
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/separator.tsx
-import * as React32 from "react";
+import * as React35 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var Separator2 = React32.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
-  return /* @__PURE__ */ jsx34(
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Separator2 = React35.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
+  return /* @__PURE__ */ jsx37(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -5010,9 +5261,64 @@ var Separator2 = React32.forwardRef(function Separator3({ className, decorative
 });
 Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
+// src/components/sidebar-nav-item.tsx
+import * as React36 from "react";
+import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+var SidebarNavItem = React36.forwardRef(
+  function SidebarNavItem2({ as, active = false, disabled = false, icon, className, children, ...props }, ref) {
+    const Comp = as ?? (props.href ? "a" : "button");
+    const isNativeButton = Comp === "button";
+    return /* @__PURE__ */ jsxs18(
+      Comp,
+      {
+        ref,
+        "data-slot": "sidebar-nav-item",
+        "data-active": active ? "true" : void 0,
+        "data-disabled": disabled ? "true" : void 0,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": disabled || void 0,
+        ...isNativeButton ? { type: "button", disabled } : {},
+        className: cn(
+          "group relative flex w-full items-center gap-[var(--sofya-gap-compact)] rounded-[var(--sofya-radius-md)] py-[var(--sofya-space-2)] pl-[var(--sofya-space-3)] pr-[var(--sofya-space-3)] text-left no-underline outline-none",
+          "[font-family:var(--sofya-text-sidebar-title-font-family)] text-[length:var(--sofya-text-sidebar-title-font-size)] [font-weight:var(--sofya-text-sidebar-title-font-weight)] leading-[var(--sofya-text-sidebar-title-line-height)] tracking-[var(--sofya-text-sidebar-title-letter-spacing)]",
+          "text-[color:var(--sofya-text-soft)] transition-colors duration-sofya ease-sofya",
+          "hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)]",
+          "focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
+          "data-[active=true]:bg-[color:var(--sofya-surface-selected)] data-[active=true]:text-[color:var(--sofya-text-default)]",
+          "data-[active=true]:hover:bg-[color:var(--sofya-surface-selected-strong)]",
+          "data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx38(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "sidebar-nav-indicator",
+              className: cn(
+                "pointer-events-none absolute left-0 top-1/2 h-[60%] w-[3px] -translate-y-1/2 rounded-full bg-primary transition-opacity duration-sofya ease-sofya",
+                active ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          icon ? /* @__PURE__ */ jsx38("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0", children: icon }) : null,
+          /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(children, {
+            as: "span",
+            className: "block min-w-0 truncate text-inherit",
+            size: "sidebar-title"
+          }) })
+        ]
+      }
+    );
+  }
+);
+SidebarNavItem.displayName = "SidebarNavItem";
+var SettingsNavItem = SidebarNavItem;
+
 // src/components/slider.tsx
-import * as React33 from "react";
-import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import * as React37 from "react";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
 function clampSliderValue(value, min, max) {
   if (Number.isNaN(value)) {
     return min;
@@ -5037,7 +5343,7 @@ function resolveSliderMeasurement(value, fallback) {
 function isTextValue(value) {
   return typeof value === "string" || typeof value === "number";
 }
-var Slider = React33.forwardRef(function Slider2({
+var Slider = React37.forwardRef(function Slider2({
   className,
   defaultValue,
   formatValue,
@@ -5060,7 +5366,7 @@ var Slider = React33.forwardRef(function Slider2({
   valueClassName,
   ...props
 }, ref) {
-  const resolvedId = React33.useId();
+  const resolvedId = React37.useId();
   const inputId = id ?? resolvedId;
   const safeMin = min;
   const safeMax = resolveSliderMax(safeMin, max);
@@ -5069,7 +5375,7 @@ var Slider = React33.forwardRef(function Slider2({
     onChange: onValueChange,
     value
   });
-  React33.useEffect(() => {
+  React37.useEffect(() => {
     if (value !== void 0) {
       return;
     }
@@ -5116,14 +5422,14 @@ var Slider = React33.forwardRef(function Slider2({
     setControllableValue(nextValue);
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       "data-slot": "slider",
       className: cn("grid w-full gap-2", className),
       children: [
-        label || showValue ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-4", children: [
-          label ? /* @__PURE__ */ jsx35(
+        label || showValue ? /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
+          label ? /* @__PURE__ */ jsx39(
             FieldLabel,
             {
               htmlFor: inputId,
@@ -5134,8 +5440,8 @@ var Slider = React33.forwardRef(function Slider2({
               textClassName: "block min-w-0 text-[color:var(--sofya-text-default)]",
               children: label
             }
-          ) : /* @__PURE__ */ jsx35("span", {}),
-          showValue ? /* @__PURE__ */ jsx35(
+          ) : /* @__PURE__ */ jsx39("span", {}),
+          showValue ? /* @__PURE__ */ jsx39(
             "div",
             {
               className: cn(
@@ -5153,7 +5459,7 @@ var Slider = React33.forwardRef(function Slider2({
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs19(
           "div",
           {
             "data-slot": "slider-control",
@@ -5163,7 +5469,7 @@ var Slider = React33.forwardRef(function Slider2({
             ),
             style: controlStyle,
             children: [
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx39(
                 "input",
                 {
                   ...props,
@@ -5180,7 +5486,7 @@ var Slider = React33.forwardRef(function Slider2({
                   style: inputBoundsStyle
                 }
               ),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx39(
                 "div",
                 {
                   "data-slot": "slider-track",
@@ -5191,7 +5497,7 @@ var Slider = React33.forwardRef(function Slider2({
                   style: trackBoundsStyle
                 }
               ),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx39(
                 "div",
                 {
                   "data-slot": "slider-range",
@@ -5202,7 +5508,7 @@ var Slider = React33.forwardRef(function Slider2({
                   style: rangeStyle
                 }
               ),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx39(
                 "div",
                 {
                   "data-slot": "slider-thumb",
@@ -5223,10 +5529,10 @@ var Slider = React33.forwardRef(function Slider2({
 Slider.displayName = "Slider";
 
 // src/components/skeleton.tsx
-import * as React34 from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var Skeleton = React34.forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx36(
+import * as React38 from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var Skeleton = React38.forwardRef(function Skeleton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       ref,
@@ -5241,75 +5547,78 @@ var Skeleton = React34.forwardRef(function Skeleton2({ className, ...props }, re
 Skeleton.displayName = "Skeleton";
 
 // src/components/sonner.tsx
-import * as React35 from "react";
+import * as React39 from "react";
 import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var notificationVariantOptions = ["default", "success", "error", "warning"];
 function ToastStatusIcon({
   iconName,
   className
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx41(
     "span",
     {
       "aria-hidden": "true",
       className: cn(
-        "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-sofya-sm",
+        "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-none",
         className
       ),
-      children: /* @__PURE__ */ jsx37(Icon, { name: iconName, size: 16 })
+      children: /* @__PURE__ */ jsx41(Icon, { name: iconName, size: 16 })
     }
   );
 }
 var defaultToastClassNames = {
-  toast: "group pointer-events-auto relative flex w-full items-start gap-4 overflow-hidden rounded-[24px] border px-4 py-4 text-foreground shadow-sofya-lg",
-  content: "grid gap-2 pr-8",
+  // Flat surface, soft (neutral) elevation, long-text safe content padding so
+  // the message never sits under the single close button.
+  toast: "group pointer-events-auto relative flex w-full items-start gap-4 overflow-hidden rounded-[24px] border px-4 py-4 text-foreground shadow-[var(--sofya-shadow-soft)]",
+  content: "grid min-w-0 gap-2 pr-8",
   title: "font-display text-[15px] font-semibold leading-5 tracking-tight text-foreground",
-  description: "text-sm leading-5 text-muted-foreground",
+  description: "text-sm leading-5 text-[color:var(--sofya-text-subtle)]",
   icon: "mt-0",
-  closeButton: "absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground transition-[background-color,border-color,color] duration-sofya ease-sofya hover:border-border hover:bg-muted hover:text-foreground",
+  closeButton: "absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent bg-transparent text-[color:var(--sofya-text-soft)] transition-[background-color,border-color,color] duration-sofya ease-sofya hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)]",
   actionButton: "inline-flex h-9 shrink-0 items-center justify-center rounded-full bg-primary px-4 text-sm font-medium text-primary-foreground transition-[filter,transform] duration-sofya ease-sofya hover:brightness-[1.04]",
   cancelButton: "inline-flex h-9 shrink-0 items-center justify-center rounded-full bg-secondary px-4 text-sm font-medium text-secondary-foreground transition-[background-color,transform] duration-sofya ease-sofya hover:bg-secondary/85",
   default: "data-[type=default]:border-border data-[type=default]:bg-card data-[type=default]:text-foreground",
-  success: "border-success/20 bg-[linear-gradient(135deg,hsl(var(--sofya-success)/0.14)_0%,hsl(var(--sofya-card))_100%)] text-foreground",
-  error: "border-destructive/20 bg-[linear-gradient(135deg,hsl(var(--sofya-destructive)/0.14)_0%,hsl(var(--sofya-card))_100%)] text-foreground",
-  warning: "border-warning/25 bg-[linear-gradient(135deg,hsl(var(--sofya-warning)/0.18)_0%,hsl(var(--sofya-card))_100%)] text-foreground",
-  info: "border-primary/20 bg-[linear-gradient(135deg,hsl(var(--sofya-primary)/0.12)_0%,hsl(var(--sofya-card))_100%)] text-foreground",
+  // Flat semantic surfaces — no decorative gradients.
+  success: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-foreground",
+  error: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-foreground",
+  warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-foreground",
+  info: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-foreground",
   loading: "border-border bg-card text-foreground"
 };
 var defaultToastIcons = {
-  success: /* @__PURE__ */ jsx37(
+  success: /* @__PURE__ */ jsx41(
     ToastStatusIcon,
     {
       iconName: "check",
       className: "border-success/15 bg-success/12 text-success"
     }
   ),
-  error: /* @__PURE__ */ jsx37(
+  error: /* @__PURE__ */ jsx41(
     ToastStatusIcon,
     {
       iconName: "x",
       className: "border-destructive/15 bg-destructive/12 text-destructive"
     }
   ),
-  warning: /* @__PURE__ */ jsx37(
+  warning: /* @__PURE__ */ jsx41(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-warning/20 bg-warning/15 text-foreground"
     }
   ),
-  info: /* @__PURE__ */ jsx37(
+  info: /* @__PURE__ */ jsx41(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-primary/15 bg-primary/10 text-primary"
     }
   ),
-  close: /* @__PURE__ */ jsx37(Icon, { name: "x", size: 12 })
+  close: /* @__PURE__ */ jsx41(Icon, { name: "x", size: 12 })
 };
 function mergeToastClassNames(overrides) {
   return {
@@ -5317,7 +5626,7 @@ function mergeToastClassNames(overrides) {
     ...overrides
   };
 }
-var Toaster = React35.forwardRef(
+var Toaster = React39.forwardRef(
   function Toaster2({
     className,
     closeButton = true,
@@ -5329,7 +5638,7 @@ var Toaster = React35.forwardRef(
     visibleToasts = 5,
     ...props
   }, ref) {
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx41(
       SonnerToaster,
       {
         ref,
@@ -5357,11 +5666,257 @@ var Toaster = React35.forwardRef(
   }
 );
 Toaster.displayName = "Toaster";
+function resolveToastId(message, options) {
+  if (options?.id !== void 0) {
+    return options.id;
+  }
+  if (options?.key !== void 0) {
+    return `sofya-toast:${options.key}`;
+  }
+  if (typeof message === "string" || typeof message === "number") {
+    return `sofya-toast:${String(message)}`;
+  }
+  return void 0;
+}
+function withDedupId(message, options) {
+  const { key: _key, ...rest } = options ?? {};
+  return { ...rest, id: resolveToastId(message, options) };
+}
+var notify = ((message, options) => toast(message, withDedupId(message, options)));
+notify.success = (message, options) => toast.success(message, withDedupId(message, options));
+notify.error = (message, options) => toast.error(message, withDedupId(message, options));
+notify.warning = (message, options) => toast.warning(message, withDedupId(message, options));
+notify.info = (message, options) => toast.info(message, withDedupId(message, options));
+notify.message = (message, options) => toast.message(message, withDedupId(message, options));
+notify.loading = (message, options) => toast.loading(message, withDedupId(message, options));
+notify.dismiss = toast.dismiss;
+notify.promise = toast.promise;
+
+// src/components/status-indicator.tsx
+import * as React41 from "react";
+
+// src/components/tooltip.tsx
+import * as React40 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var tooltipToneOptions = [
+  "default",
+  "info",
+  "success",
+  "warning",
+  "destructive"
+];
+var tooltipToneClassNames = {
+  default: "border-transparent bg-[color:var(--sofya-tooltip-background)] text-[color:var(--sofya-tooltip-foreground)]",
+  info: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
+  success: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
+  warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]",
+  destructive: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
+};
+var TooltipContent = React40.forwardRef(function TooltipContent2({ className, sideOffset = 8, align = "center", tone = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx42(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx42(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      align,
+      "data-tone": tone,
+      className: cn(
+        "sofya-tooltip-content z-[60] max-w-[260px] overflow-hidden rounded-[12px] border px-4 py-2 shadow-[var(--sofya-shadow-tooltip)]",
+        tooltipToneClassNames[tone],
+        className
+      ),
+      ...props,
+      children: renderTextContent(props.children, {
+        as: "span",
+        className: "block",
+        size: "tiny",
+        style: {
+          color: "currentColor",
+          fontWeight: 500
+        }
+      })
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var StatusTooltip = React40.forwardRef(function StatusTooltip2({
+  children,
+  label,
+  status = "default",
+  side = "right",
+  align = "center",
+  sideOffset = 10,
+  disabled = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 120,
+  className
+}, ref) {
+  if (disabled) {
+    return /* @__PURE__ */ jsx42(Fragment4, { children });
+  }
+  return /* @__PURE__ */ jsx42(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs20(Tooltip, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx42(
+      TooltipContent,
+      {
+        ref,
+        side,
+        align,
+        sideOffset,
+        tone: status,
+        "data-status": status,
+        className,
+        children: label
+      }
+    )
+  ] }) });
+});
+StatusTooltip.displayName = "StatusTooltip";
+
+// src/components/status-indicator.tsx
+import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
+var workflowStatusOptions = [
+  "draft",
+  "in_progress",
+  "completed",
+  "cancelled",
+  "error",
+  "warning"
+];
+var workflowStatusDescriptors = {
+  draft: { tone: "default", label: "Rascunho" },
+  in_progress: { tone: "info", label: "Em curso" },
+  completed: { tone: "success", label: "Finalizada" },
+  cancelled: { tone: "default", label: "Cancelada" },
+  error: { tone: "destructive", label: "Erro" },
+  warning: { tone: "warning", label: "Aten\xE7\xE3o" }
+};
+var workflowStatusAliases = {
+  draft: "draft",
+  rascunho: "draft",
+  in_progress: "in_progress",
+  "in-progress": "in_progress",
+  inprogress: "in_progress",
+  em_curso: "in_progress",
+  "em-curso": "in_progress",
+  em_andamento: "in_progress",
+  completed: "completed",
+  complete: "completed",
+  done: "completed",
+  finalizada: "completed",
+  finalizado: "completed",
+  concluida: "completed",
+  cancelled: "cancelled",
+  canceled: "cancelled",
+  cancelada: "cancelled",
+  cancelado: "cancelled",
+  error: "error",
+  errored: "error",
+  failed: "error",
+  erro: "error",
+  falha: "error",
+  warning: "warning",
+  warn: "warning",
+  atencao: "warning",
+  aviso: "warning"
+};
+function humanize(value) {
+  const text = value.replace(/[_-]+/g, " ").trim();
+  return text ? text.charAt(0).toUpperCase() + text.slice(1) : value;
+}
+function resolveWorkflowStatus(status, options) {
+  const normalized = String(status).trim().toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
+  const canonical = workflowStatusAliases[normalized];
+  if (canonical) {
+    const descriptor = workflowStatusDescriptors[canonical];
+    return {
+      status: canonical,
+      tone: descriptor.tone,
+      label: options?.label ?? descriptor.label
+    };
+  }
+  return {
+    status: null,
+    tone: "default",
+    label: options?.label ?? humanize(String(status))
+  };
+}
+var toneDotClassName = {
+  default: "bg-[color:var(--sofya-text-subtle)]",
+  info: "bg-[color:var(--sofya-tone-info-foreground)]",
+  success: "bg-[color:var(--sofya-tone-success-foreground)]",
+  warning: "bg-[color:var(--sofya-tone-warning-foreground)]",
+  destructive: "bg-[color:var(--sofya-tone-destructive-foreground)]"
+};
+var toneTextClassName = {
+  default: "text-[color:var(--sofya-text-soft)]",
+  info: "text-[color:var(--sofya-tone-info-foreground)]",
+  success: "text-[color:var(--sofya-tone-success-foreground)]",
+  warning: "text-[color:var(--sofya-tone-warning-foreground)]",
+  destructive: "text-[color:var(--sofya-tone-destructive-foreground)]"
+};
+var StatusIndicator = React41.forwardRef(
+  function StatusIndicator2({
+    className,
+    label,
+    showLabel = false,
+    side = "right",
+    status,
+    tooltip = true,
+    ...props
+  }, ref) {
+    const resolved = resolveWorkflowStatus(status, { label });
+    const indicator = /* @__PURE__ */ jsxs21(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": resolved.label,
+        "data-slot": "status-indicator",
+        "data-status": resolved.status ?? "unknown",
+        "data-tone": resolved.tone,
+        className: cn(
+          "inline-flex items-center gap-[var(--sofya-space-2)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx43(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "h-2 w-2 shrink-0 rounded-full",
+                toneDotClassName[resolved.tone]
+              )
+            }
+          ),
+          showLabel ? renderTextContent(resolved.label, {
+            as: "span",
+            className: cn("text-inherit", toneTextClassName[resolved.tone]),
+            size: "sidebar-body"
+          }) : null
+        ]
+      }
+    );
+    if (!tooltip) {
+      return indicator;
+    }
+    return /* @__PURE__ */ jsx43(StatusTooltip, { status: resolved.tone, label: resolved.label, side, children: indicator });
+  }
+);
+StatusIndicator.displayName = "StatusIndicator";
 
 // src/components/switch.tsx
-import * as React36 from "react";
+import * as React42 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs22 } from "react/jsx-runtime";
 var switchSizeOptions = ["default", "sm"];
 var switchRootSizeClasses = {
   default: "h-6 w-11",
@@ -5371,7 +5926,7 @@ var switchThumbSizeClasses = {
   default: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
   sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
 };
-var Switch = React36.forwardRef(
+var Switch = React42.forwardRef(
   ({
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -5386,7 +5941,7 @@ var Switch = React36.forwardRef(
     size,
     ...props
   }, ref) => {
-    const generatedId = React36.useId();
+    const generatedId = React42.useId();
     const resolvedId = id ?? generatedId;
     const labelId = label ? `${resolvedId}-label` : void 0;
     const descriptionId = description ? `${resolvedId}-description` : void 0;
@@ -5395,7 +5950,7 @@ var Switch = React36.forwardRef(
     const alignClassName2 = description ? "items-start" : "items-center";
     const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
     const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;
-    const switchControl = /* @__PURE__ */ jsx38(
+    const switchControl = /* @__PURE__ */ jsx44(
       SwitchPrimitives.Root,
       {
         id: resolvedId,
@@ -5410,7 +5965,7 @@ var Switch = React36.forwardRef(
         "data-size": resolvedSize,
         ...props,
         ref,
-        children: /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx44(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -5424,7 +5979,7 @@ var Switch = React36.forwardRef(
     if (!hasTextContent) {
       return switchControl;
     }
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs22(
       "div",
       {
         "data-slot": "switch-container",
@@ -5435,8 +5990,8 @@ var Switch = React36.forwardRef(
         }),
         children: [
           switchControl,
-          /* @__PURE__ */ jsxs19("span", { className: selectionControlContentBaseClasses, children: [
-            label ? /* @__PURE__ */ jsx38("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsxs22("span", { className: selectionControlContentBaseClasses, children: [
+            label ? /* @__PURE__ */ jsx44("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx44(
               "span",
               {
                 id: labelId,
@@ -5451,7 +6006,7 @@ var Switch = React36.forwardRef(
                 })
               }
             ) }) : null,
-            description ? /* @__PURE__ */ jsx38(
+            description ? /* @__PURE__ */ jsx44(
               "span",
               {
                 id: descriptionId,
@@ -5476,8 +6031,8 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
 import { cva as cva8 } from "class-variance-authority";
-import * as React37 from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import * as React43 from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var tableDensityOptions = ["default", "compact"];
 var tableCellVariantOptions = ["default", "primary", "muted"];
 var tableStatusToneOptions = [
@@ -5487,9 +6042,10 @@ var tableStatusToneOptions = [
   "warning"
 ];
 var tableActionToneOptions = ["primary", "neutral", "danger"];
-var TableDensityContext = React37.createContext("default");
+var TableDensityContext = React43.createContext("default");
+var TableHeaderDensityContext = React43.createContext("default");
 function useTableDensity(density) {
-  const inheritedDensity = React37.useContext(TableDensityContext);
+  const inheritedDensity = React43.useContext(TableDensityContext);
   return density ?? inheritedDensity;
 }
 var tableCellVariants = cva8(
@@ -5545,13 +6101,13 @@ var tableActionButtonVariants = cva8(
     }
   }
 );
-var Table = React37.forwardRef(function Table2({ className, density = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx39(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx39(
+var Table = React43.forwardRef(function Table2({ className, density = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx45(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx45(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsx45(
         "table",
         {
           "data-density": density,
@@ -5567,22 +6123,25 @@ var Table = React37.forwardRef(function Table2({ className, density = "default",
     }
   ) });
 });
-var TableHeader = React37.forwardRef(function TableHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(TableDensityContext.Provider, { value: "default", children: /* @__PURE__ */ jsx39(
+var TableHeader = React43.forwardRef(function TableHeader2({ className, density, ...props }, ref) {
+  const tableDensity = useTableDensity();
+  const headerDensity = density ?? tableDensity;
+  return /* @__PURE__ */ jsx45(TableHeaderDensityContext.Provider, { value: headerDensity, children: /* @__PURE__ */ jsx45(TableDensityContext.Provider, { value: "default", children: /* @__PURE__ */ jsx45(
     "thead",
     {
       "data-slot": "table-header",
+      "data-header-density": headerDensity,
       ref,
       className: cn(
-        "[&_tr]:border-0 [&_tr:hover]:bg-transparent [&_th]:bg-[color:var(--sofya-tone-default-background)] [&_th:first-child]:rounded-tl-[var(--sofya-radius-md)] [&_th:last-child]:rounded-tr-[var(--sofya-radius-md)]",
+        "[&_tr]:border-0 [&_tr:hover]:bg-transparent [&_th]:bg-background [&_th:first-child]:rounded-tl-[var(--sofya-radius-md)] [&_th:last-child]:rounded-tr-[var(--sofya-radius-md)]",
         className
       ),
       ...props
     }
-  ) });
+  ) }) });
 });
-var TableBody = React37.forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
+var TableBody = React43.forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx45(
     "tbody",
     {
       "data-slot": "table-body",
@@ -5592,24 +6151,24 @@ var TableBody = React37.forwardRef(function TableBody2({ className, ...props },
     }
   );
 });
-var TableFooter = React37.forwardRef(function TableFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
+var TableFooter = React43.forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx45(
     "tfoot",
     {
       "data-slot": "table-footer",
       ref,
       className: cn(
-        "border-t border-[color:var(--sofya-border-strong)] bg-[color:var(--sofya-tone-default-background)] font-medium [&>tr:last-child]:border-0",
+        "border-t border-[color:var(--sofya-border-strong)] bg-background font-medium [&>tr:last-child]:border-0",
         className
       ),
       ...props
     }
   );
 });
-var TableRow = React37.forwardRef(
+var TableRow = React43.forwardRef(
   function TableRow2({ className, density, ...props }, ref) {
     const resolvedDensity = useTableDensity(density);
-    return /* @__PURE__ */ jsx39(TableDensityContext.Provider, { value: resolvedDensity, children: /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx45(TableDensityContext.Provider, { value: resolvedDensity, children: /* @__PURE__ */ jsx45(
       "tr",
       {
         "data-density": resolvedDensity,
@@ -5625,14 +6184,17 @@ var TableRow = React37.forwardRef(
     ) });
   }
 );
-var TableHead = React37.forwardRef(function TableHead2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
+var TableHead = React43.forwardRef(function TableHead2({ className, children, ...props }, ref) {
+  const headerDensity = React43.useContext(TableHeaderDensityContext);
+  return /* @__PURE__ */ jsx45(
     "th",
     {
       "data-slot": "table-head",
+      "data-density": headerDensity,
       ref,
       className: cn(
-        "whitespace-nowrap px-4 py-4 text-left align-middle [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-medium uppercase leading-4 tracking-[0.08em] text-[color:var(--sofya-text-default)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+        "whitespace-nowrap px-4 text-left align-middle [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-medium uppercase leading-4 tracking-[0.08em] text-[color:var(--sofya-text-default)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+        headerDensity === "compact" ? "py-2.5" : "py-4",
         className
       ),
       ...props,
@@ -5645,10 +6207,10 @@ var TableHead = React37.forwardRef(function TableHead2({ className, children, ..
     }
   );
 });
-var TableCell = React37.forwardRef(
+var TableCell = React43.forwardRef(
   function TableCell2({ className, density, variant, truncate, children, ...props }, ref) {
     const resolvedDensity = useTableDensity(density);
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx45(
       "td",
       {
         "data-density": resolvedDensity,
@@ -5673,8 +6235,8 @@ var TableCell = React37.forwardRef(
     );
   }
 );
-var TableCaption = React37.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
+var TableCaption = React43.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx45(
     "caption",
     {
       "data-slot": "table-caption",
@@ -5693,12 +6255,12 @@ var TableCaption = React37.forwardRef(function TableCaption2({ className, childr
     }
   );
 });
-var TableCellTitle = React37.forwardRef(
+var TableCellTitle = React43.forwardRef(
   function TableCellTitle2({ className, children, size, ...props }, ref) {
     const density = useTableDensity();
     const resolvedSize = size ?? (density === "compact" ? "compact" : "default");
     const textSize = resolvedSize === "compact" ? "label-md" : "body";
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx45(
       "span",
       {
         "data-slot": "table-cell-title",
@@ -5718,11 +6280,11 @@ var TableCellTitle = React37.forwardRef(
     );
   }
 );
-var TableCellDescription = React37.forwardRef(function TableCellDescription2({ className, children, size, ...props }, ref) {
+var TableCellDescription = React43.forwardRef(function TableCellDescription2({ className, children, size, ...props }, ref) {
   const density = useTableDensity();
   const resolvedSize = size ?? (density === "compact" ? "compact" : "default");
   const textSize = resolvedSize === "compact" ? "body-sm" : "tiny";
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx45(
     "span",
     {
       "data-slot": "table-cell-description",
@@ -5750,7 +6312,7 @@ function TableStatusBadge({
   ...props
 }) {
   const resolvedDensity = useTableDensity(density);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx45(
     Badge,
     {
       "data-density": resolvedDensity,
@@ -5769,8 +6331,8 @@ function TableStatusBadge({
     }
   );
 }
-var TableActionButton = React37.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
+var TableActionButton = React43.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
+  return /* @__PURE__ */ jsx45(
     Button,
     {
       ref,
@@ -5788,12 +6350,15 @@ var TableActionButton = React37.forwardRef(function TableActionButton2({ classNa
     }
   );
 });
-var TableActions = React37.forwardRef(function TableActions2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
+var TableActions = React43.forwardRef(function TableActions2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
-      className: cn("flex items-center gap-[0.2rem]", className),
+      className: cn(
+        "flex shrink-0 items-center justify-end gap-[0.2rem] whitespace-nowrap",
+        className
+      ),
       ...props
     }
   );
@@ -5811,11 +6376,212 @@ TableCellDescription.displayName = "TableCellDescription";
 TableActionButton.displayName = "TableActionButton";
 TableActions.displayName = "TableActions";
 
+// src/components/tag.tsx
+import { cva as cva9 } from "class-variance-authority";
+import * as React44 from "react";
+import { jsx as jsx46, jsxs as jsxs23 } from "react/jsx-runtime";
+var tagVariantOptions = [
+  "neutral",
+  "organization",
+  "privacy",
+  "status"
+];
+var tagStatusToneOptions = [
+  "info",
+  "success",
+  "warning",
+  "destructive"
+];
+var tagVariants = cva9(
+  "inline-flex max-w-full items-center gap-[var(--sofya-space-1)] rounded-full border px-[var(--sofya-space-2-5)] py-[var(--sofya-space-0-5)] [font-family:var(--sofya-text-sidebar-tag-font-family)] text-[length:var(--sofya-text-sidebar-tag-font-size)] [font-weight:var(--sofya-text-sidebar-tag-font-weight)] leading-[var(--sofya-text-sidebar-tag-line-height)] tracking-[var(--sofya-text-sidebar-tag-letter-spacing)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        neutral: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
+        organization: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
+        privacy: "border-transparent bg-[color:var(--sofya-surface-muted)] text-[color:var(--sofya-text-subtle)]",
+        status: ""
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+var tagStatusToneClasses = {
+  info: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
+  success: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
+  warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]",
+  destructive: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
+};
+var Tag = React44.forwardRef(function Tag2({ children, className, icon, tone = "info", truncate = false, variant, ...props }, ref) {
+  const resolvedVariant = variant ?? "neutral";
+  return /* @__PURE__ */ jsxs23(
+    "span",
+    {
+      ref,
+      "data-slot": "tag",
+      "data-variant": resolvedVariant,
+      className: cn(
+        tagVariants({ variant: resolvedVariant }),
+        resolvedVariant === "status" && tagStatusToneClasses[tone],
+        truncate ? "min-w-0" : "whitespace-nowrap",
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx46("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon }) : null,
+        renderTextContent(children, {
+          as: "span",
+          className: cn("text-inherit", truncate && "min-w-0 truncate"),
+          size: "sidebar-tag"
+        })
+      ]
+    }
+  );
+});
+Tag.displayName = "Tag";
+var privacyLevelOptions = [
+  "private",
+  "organization",
+  "public"
+];
+var privacyDefaultLabels = {
+  private: "Privado",
+  organization: "Minha organiza\xE7\xE3o",
+  public: "P\xFAblico"
+};
+var PrivacyLabel = React44.forwardRef(
+  function PrivacyLabel2({ appearance = "text", className, icon, label, privacy, ...props }, ref) {
+    const content = label ?? privacyDefaultLabels[privacy];
+    if (appearance === "tag") {
+      return /* @__PURE__ */ jsx46(
+        Tag,
+        {
+          ref,
+          variant: privacy === "organization" ? "organization" : "privacy",
+          icon,
+          "data-privacy": privacy,
+          className,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs23(
+      "span",
+      {
+        ref,
+        "data-slot": "privacy-label",
+        "data-privacy": privacy,
+        className: cn(
+          "inline-flex items-center gap-[var(--sofya-space-1)] text-[color:var(--sofya-text-soft)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+          className
+        ),
+        ...props,
+        children: [
+          icon ? /* @__PURE__ */ jsx46("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon }) : null,
+          renderTextContent(content, {
+            as: "span",
+            className: "text-inherit",
+            size: "sidebar-body"
+          })
+        ]
+      }
+    );
+  }
+);
+PrivacyLabel.displayName = "PrivacyLabel";
+
+// src/components/template-card.tsx
+import * as React45 from "react";
+import { Fragment as Fragment5, jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
+var templateCardLayoutOptions = ["card", "list"];
+var TemplateCard = React45.forwardRef(
+  function TemplateCard2({
+    className,
+    description,
+    favoriteLabel = "Favoritar",
+    favorited,
+    layout = "card",
+    meta,
+    onToggleFavorite,
+    overflow,
+    selected = false,
+    title,
+    ...props
+  }, ref) {
+    const isList = layout === "list";
+    const descriptionSize = isList ? "caption" : "body-sm";
+    const actions = onToggleFavorite || favorited !== void 0 || overflow ? /* @__PURE__ */ jsxs24("div", { className: "flex shrink-0 items-center gap-[var(--sofya-gap-tight)]", children: [
+      onToggleFavorite || favorited !== void 0 ? /* @__PURE__ */ jsx47(
+        IconButton,
+        {
+          "aria-label": favoriteLabel,
+          selected: Boolean(favorited),
+          onClick: onToggleFavorite,
+          icon: /* @__PURE__ */ jsx47(Icon, { name: "star", size: 18 })
+        }
+      ) : null,
+      overflow
+    ] }) : null;
+    const heading = /* @__PURE__ */ jsxs24("div", { className: "flex min-w-0 flex-col gap-[var(--sofya-space-1)]", children: [
+      renderTextContent(title, {
+        as: "span",
+        className: "block min-w-0 truncate font-semibold text-[color:var(--sofya-text-default)]",
+        size: "title-sm"
+      }),
+      description ? renderTextContent(description, {
+        as: "span",
+        className: cn(
+          "block min-w-0 text-[color:var(--sofya-text-soft)]",
+          isList && "truncate"
+        ),
+        size: descriptionSize
+      }) : null
+    ] });
+    return /* @__PURE__ */ jsx47(
+      "div",
+      {
+        ref,
+        "data-slot": "template-card",
+        "data-layout": layout,
+        "data-selected": selected ? "true" : void 0,
+        "data-favorited": favorited ? "true" : void 0,
+        className: cn(
+          "group rounded-[var(--sofya-radius-md)] border border-[color:var(--sofya-border-soft)] bg-card transition-colors duration-sofya ease-sofya",
+          "hover:border-[color:var(--sofya-border-strong)] hover:bg-[color:var(--sofya-surface-hover)]",
+          "data-[selected=true]:border-primary data-[selected=true]:bg-[color:var(--sofya-surface-selected)]",
+          isList ? "flex items-center gap-[var(--sofya-gap-default)] px-[var(--sofya-space-4)] py-[var(--sofya-space-3)]" : "flex flex-col gap-[var(--sofya-space-3)] p-[var(--sofya-space-4)]",
+          className
+        ),
+        ...props,
+        children: isList ? /* @__PURE__ */ jsxs24(Fragment5, { children: [
+          /* @__PURE__ */ jsx47("div", { className: "min-w-0 flex-1", children: heading }),
+          meta ? /* @__PURE__ */ jsx47("div", { className: "flex shrink-0 items-center gap-[var(--sofya-gap-compact)] text-[color:var(--sofya-text-subtle)]", children: meta }) : null,
+          actions
+        ] }) : /* @__PURE__ */ jsxs24(Fragment5, { children: [
+          /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-[var(--sofya-gap-compact)]", children: [
+            heading,
+            actions
+          ] }),
+          meta ? /* @__PURE__ */ jsx47("div", { className: "flex flex-wrap items-center gap-[var(--sofya-gap-compact)] text-[color:var(--sofya-text-subtle)]", children: meta }) : null
+        ] })
+      }
+    );
+  }
+);
+TemplateCard.displayName = "TemplateCard";
+var TemplateListItem = React45.forwardRef(function TemplateListItem2(props, ref) {
+  return /* @__PURE__ */ jsx47(TemplateCard, { ref, layout: "list", ...props });
+});
+TemplateListItem.displayName = "TemplateListItem";
+
 // src/components/tabs.tsx
-import * as React38 from "react";
+import * as React46 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { motion as motion3 } from "motion/react";
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 function resolveDefaultValue(items, defaultValue) {
   if (defaultValue) {
     return defaultValue;
@@ -5839,13 +6605,13 @@ function Tabs({
     onChange: onValueChange,
     value
   });
-  const indicatorLayoutId = React38.useId();
-  React38.useEffect(() => {
+  const indicatorLayoutId = React46.useId();
+  React46.useEffect(() => {
     if (value === void 0) {
       setUncontrolledCurrentValue(resolvedDefaultValue);
     }
   }, [resolvedDefaultValue, setUncontrolledCurrentValue, value]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs25(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -5853,7 +6619,7 @@ function Tabs({
       value: currentValue,
       ...props,
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx48(
           TabsPrimitive.List,
           {
             "aria-label": "Subtelas navegaveis",
@@ -5864,7 +6630,7 @@ function Tabs({
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
-              return /* @__PURE__ */ jsxs20(
+              return /* @__PURE__ */ jsxs25(
                 TabsPrimitive.Trigger,
                 {
                   value: item.value,
@@ -5876,7 +6642,7 @@ function Tabs({
                     item.triggerClassName
                   ),
                   children: [
-                    isActive ? /* @__PURE__ */ jsx40(
+                    isActive ? /* @__PURE__ */ jsx48(
                       motion3.span,
                       {
                         "aria-hidden": "true",
@@ -5886,15 +6652,15 @@ function Tabs({
                         transition: { duration: 0.25, ease: "easeInOut" }
                       }
                     ) : null,
-                    /* @__PURE__ */ jsxs20("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
-                      item.loading ? /* @__PURE__ */ jsx40(
+                    /* @__PURE__ */ jsxs25("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+                      item.loading ? /* @__PURE__ */ jsx48(
                         "span",
                         {
                           "aria-hidden": "true",
                           className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
                         }
                       ) : null,
-                      /* @__PURE__ */ jsx40("span", { children: renderTextContent(item.label, {
+                      /* @__PURE__ */ jsx48("span", { children: renderTextContent(item.label, {
                         as: "span",
                         className: "block text-inherit",
                         size: "body"
@@ -5908,7 +6674,7 @@ function Tabs({
           }
         ),
         items.map(
-          (item) => item.content !== void 0 ? /* @__PURE__ */ jsx40(
+          (item) => item.content !== void 0 ? /* @__PURE__ */ jsx48(
             TabsPrimitive.Content,
             {
               value: item.value,
@@ -5931,9 +6697,9 @@ function Tabs({
 Tabs.displayName = "Tabs";
 
 // src/components/textarea.tsx
-import * as React39 from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var Textarea = React39.forwardRef(
+import * as React47 from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var Textarea = React47.forwardRef(
   ({
     className,
     containerClassName,
@@ -5943,10 +6709,10 @@ var Textarea = React39.forwardRef(
     rows = 5,
     ...props
   }, ref) => {
-    const generatedId = React39.useId();
+    const generatedId = React47.useId();
     const resolvedId = id ?? generatedId;
     const ariaLabel = props["aria-label"] ?? (typeof label === "string" ? label : void 0);
-    const control = /* @__PURE__ */ jsx41(
+    const control = /* @__PURE__ */ jsx49(
       "textarea",
       {
         className: cn(
@@ -5960,7 +6726,7 @@ var Textarea = React39.forwardRef(
         "aria-label": ariaLabel
       }
     );
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx49(
       FieldShell,
       {
         control,
@@ -5975,10 +6741,10 @@ var Textarea = React39.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/toggle.tsx
-import * as React40 from "react";
+import * as React48 from "react";
 import * as SwitchPrimitives2 from "@radix-ui/react-switch";
-import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
-var Toggle = React40.forwardRef(function Toggle2({
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
+var Toggle = React48.forwardRef(function Toggle2({
   "aria-describedby": ariaDescribedBy,
   "aria-labelledby": ariaLabelledBy,
   className,
@@ -5991,7 +6757,7 @@ var Toggle = React40.forwardRef(function Toggle2({
   labelClassName,
   ...props
 }, ref) {
-  const generatedId = React40.useId();
+  const generatedId = React48.useId();
   const resolvedId = id ?? generatedId;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const descriptionId = description ? `${resolvedId}-description` : void 0;
@@ -5999,7 +6765,7 @@ var Toggle = React40.forwardRef(function Toggle2({
   const alignClassName2 = description ? "items-start" : "items-center";
   const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
   const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;
-  const toggleControl = /* @__PURE__ */ jsx42(
+  const toggleControl = /* @__PURE__ */ jsx50(
     SwitchPrimitives2.Root,
     {
       id: resolvedId,
@@ -6013,7 +6779,7 @@ var Toggle = React40.forwardRef(function Toggle2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx50(
         SwitchPrimitives2.Thumb,
         {
           "data-slot": "toggle-thumb",
@@ -6025,7 +6791,7 @@ var Toggle = React40.forwardRef(function Toggle2({
   if (!hasTextContent) {
     return toggleControl;
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       "data-slot": "toggle-container",
@@ -6036,8 +6802,8 @@ var Toggle = React40.forwardRef(function Toggle2({
       }),
       children: [
         toggleControl,
-        /* @__PURE__ */ jsxs21("span", { className: selectionControlContentBaseClasses, children: [
-          label ? /* @__PURE__ */ jsx42("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsxs26("span", { className: selectionControlContentBaseClasses, children: [
+          label ? /* @__PURE__ */ jsx50("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx50(
             "span",
             {
               id: labelId,
@@ -6049,7 +6815,7 @@ var Toggle = React40.forwardRef(function Toggle2({
               })
             }
           ) }) : null,
-          description ? /* @__PURE__ */ jsx42(
+          description ? /* @__PURE__ */ jsx50(
             "span",
             {
               id: descriptionId,
@@ -6071,45 +6837,14 @@ var Toggle = React40.forwardRef(function Toggle2({
 });
 Toggle.displayName = "Toggle";
 
-// src/components/tooltip.tsx
-import * as React41 from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var TooltipProvider = TooltipPrimitive.Provider;
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React41.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
-  return /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx43(
-    TooltipPrimitive.Content,
-    {
-      ref,
-      sideOffset,
-      className: cn(
-        "sofya-tooltip-content z-50 max-w-[260px] overflow-hidden rounded-[12px] border border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tooltip-background)] px-4 py-2 text-[color:var(--sofya-tooltip-foreground)] shadow-[var(--sofya-shadow-tooltip)]",
-        className
-      ),
-      ...props,
-      children: renderTextContent(props.children, {
-        as: "span",
-        className: "block text-[color:var(--sofya-tooltip-foreground)]",
-        size: "tiny",
-        style: {
-          fontWeight: 500
-        }
-      })
-    }
-  ) });
-});
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
 // src/theme/provider.tsx
-import * as React42 from "react";
+import * as React49 from "react";
 import {
   createWhitelabelTheme,
   defaultTheme,
   themeToCssVariables
 } from "@sofya-ds/tokens";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var SOFYA_FONT_LINKS = [
   {
     id: "preconnect-googleapis",
@@ -6129,7 +6864,7 @@ var SOFYA_FONT_LINKS = [
   }
 ];
 function useSofyaFontLinks() {
-  React42.useEffect(() => {
+  React49.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -6162,7 +6897,7 @@ function SofyaProvider({
   useSofyaFontLinks();
   const theme = createWhitelabelTheme(overrides ?? {}, preset);
   const cssVariables = themeToCssVariables(theme);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       "data-sofya-theme": theme.name,
@@ -6216,6 +6951,7 @@ export {
   CardHeader,
   CardTitle,
   Checkbox,
+  CloseButton,
   Cluster,
   Container,
   Dialog,
@@ -6240,6 +6976,7 @@ export {
   EmptyMedia,
   EmptyTitle,
   Icon,
+  IconButton,
   Inline,
   Input,
   InputOTP,
@@ -6259,11 +6996,13 @@ export {
   Popover,
   PopoverAnchor,
   PopoverClose,
+  PopoverCloseButton,
   PopoverContent,
   PopoverDescription,
   PopoverPortal,
   PopoverTitle,
   PopoverTrigger,
+  PrivacyLabel,
   Progress,
   ProseDialogBody,
   ProseDialogContent,
@@ -6278,6 +7017,10 @@ export {
   RadioGroupOptionDescription,
   RadioGroupOptionIndicator,
   RadioGroupOptionLabel,
+  RichTextToolbar,
+  RichTextToolbarButton,
+  RichTextToolbarGroup,
+  RichTextToolbarSeparator,
   RightRailAction,
   ScrollArea,
   ScrollAreaCorner,
@@ -6294,11 +7037,15 @@ export {
   SelectTrigger,
   SelectValue,
   Separator2 as Separator,
+  SettingsNavItem,
+  SidebarNavItem,
   Skeleton,
   Slider,
   SofyaProvider,
   Spinner,
   Stack,
+  StatusIndicator,
+  StatusTooltip,
   Surface,
   Switch,
   Table,
@@ -6315,6 +7062,9 @@ export {
   TableRow,
   TableStatusBadge,
   Tabs,
+  Tag,
+  TemplateCard,
+  TemplateListItem,
   Text,
   Textarea,
   Toaster,
@@ -6349,6 +7099,8 @@ export {
   emptyMediaVariantOptions,
   gradientToCss,
   hexToHslChannels,
+  iconButtonSizeOptions,
+  iconButtonVariantOptions,
   iconColorOptions,
   iconNames,
   iconSizeMap,
@@ -6359,7 +7111,9 @@ export {
   logoVariants,
   mergeTheme,
   notificationVariantOptions,
+  notify,
   paginationLinkVariants,
+  privacyLevelOptions,
   progressSizeOptions,
   radioGroupOrientationOptions,
   radioGroupVariantOptions,
@@ -6367,6 +7121,7 @@ export {
   resolveSurfaceToken,
   resolveTextStyle,
   resolveTheme,
+  resolveWorkflowStatus,
   scrollAreaOrientationOptions,
   selectSizeOptions,
   sofyaBrandPalette,
@@ -6385,12 +7140,18 @@ export {
   tableCellVariantOptions,
   tableDensityOptions,
   tableStatusToneOptions,
+  tagStatusToneOptions,
+  tagVariantOptions,
+  templateCardLayoutOptions,
   textSizeOptions,
   textSplitTypeOptions,
+  textToneOptions,
   textVariantOptions,
   themePresetNames,
   themePresets,
   themeToCssVariables2 as themeToCssVariables,
   toast,
-  uploadKindOptions
+  tooltipToneOptions,
+  uploadKindOptions,
+  workflowStatusOptions
 };