@sofya-ds/react 1.7.0 → 1.9.0

package/dist/index.js

@@ -118,6 +118,7 @@ import {
   IconChevronLeft,
   IconChevronDown,
   IconChevronUp,
+  IconCopy,
   IconEdit,
   IconFile,
   IconFolders,
@@ -133,6 +134,7 @@ import {
   IconSearch,
   IconSquareToggle,
   IconSparkles,
+  IconStar,
   IconUser,
   IconUserFilled,
   IconUserCircle,
@@ -161,6 +163,7 @@ var tablerIconRegistry = {
   IconChevronLeft,
   IconChevronDown,
   IconChevronUp,
+  IconCopy,
   IconEdit,
   IconFile,
   IconFolders,
@@ -176,6 +179,7 @@ var tablerIconRegistry = {
   IconSearch,
   IconSquareToggle,
   IconSparkles,
+  IconStar,
   IconUser,
   IconUserFilled,
   IconUserCircle,
@@ -232,7 +236,9 @@ var legacyIconToTablerNameMap = {
   "caret-up": "IconChevronUp",
   "caret-left": "IconChevronLeft",
   "caret-right": "IconChevronRight",
+  "copy": "IconCopy",
   "logout": "IconLogout",
+  "star": "IconStar",
   "users-group": "IconUsersGroup",
   "archive": "IconArchive",
   "folder": "IconFolder",
@@ -393,19 +399,49 @@ Icon.displayName = "Icon";
 
 // src/components/text.tsx
 import * as React3 from "react";
+import {
+  sofyaTextStyleNames
+} from "@sofya-ds/tokens";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var textSizeOptions = ["h1", "h2", "h3", "h4", "h5", "body", "tiny", "extra-tiny"];
+var textSizeOptions = sofyaTextStyleNames;
 var textVariantOptions = ["default", "gradient", "shiny", "split"];
 var textSplitTypeOptions = ["chars", "words", "words, chars"];
 var defaultElements = {
+  "display-xl": "h1",
+  "display-lg": "h1",
+  "heading-xl": "h1",
+  "heading-lg": "h2",
+  "heading-md": "h3",
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
+  "encounter-title": "h1",
+  "title-md": "h3",
+  "title-sm": "h4",
+  "body-lg": "p",
+  "body-md": "p",
+  "body-sm": "p",
   body: "p",
+  "label-md": "span",
+  "section-label": "span",
+  "eyebrow-md": "span",
+  "overline-md": "span",
+  "sidebar-title": "span",
+  "sidebar-title-regular": "span",
+  "sidebar-title-strong": "span",
+  "sidebar-label": "span",
+  "sidebar-label-strong": "span",
+  "sidebar-body": "span",
+  "sidebar-tag": "span",
+  "encounter-chip": "span",
+  "encounter-history": "span",
+  caption: "span",
+  eyebrow: "span",
   tiny: "span",
-  "extra-tiny": "span"
+  "extra-tiny": "span",
+  "code-sm": "code"
 };
 var textSizeStyles = Object.fromEntries(
   textSizeOptions.map((size) => [
@@ -1555,27 +1591,26 @@ Button.displayName = "Button";
 // src/components/surface.tsx
 import * as React9 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";
-var surfaceStyles = {
-  card: {
-    backgroundColor: "hsl(var(--sofya-surface-card-background))",
-    borderColor: "hsl(var(--sofya-surface-card-border-color))",
-    borderWidth: "var(--sofya-surface-card-border-width)",
-    borderStyle: "solid",
-    borderRadius: "var(--sofya-surface-card-radius)",
-    "--sofya-surface-shadow-base": "var(--sofya-surface-card-shadow)",
-    boxShadow: "var(--sofya-surface-shadow-override, var(--sofya-surface-shadow-base))"
-  },
-  focus: {
-    backgroundColor: "hsl(var(--sofya-surface-focus-background))",
-    borderColor: "hsl(var(--sofya-surface-focus-border-color))",
-    borderWidth: "var(--sofya-surface-focus-border-width)",
+var surfaceVariantOptions = sofyaSurfaceNames;
+function toCssTokenName(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function getSurfaceStyle(variant) {
+  const cssName = toCssTokenName(variant);
+  return {
+    backgroundColor: `hsl(var(--sofya-surface-${cssName}-background))`,
+    borderColor: `hsl(var(--sofya-surface-${cssName}-border-color))`,
+    borderWidth: `var(--sofya-surface-${cssName}-border-width)`,
     borderStyle: "solid",
-    borderRadius: "var(--sofya-surface-card-radius)",
-    "--sofya-surface-shadow-base": "var(--sofya-surface-focus-shadow)",
+    borderRadius: `var(--sofya-surface-${cssName}-radius)`,
+    "--sofya-surface-shadow-base": `var(--sofya-surface-${cssName}-shadow)`,
     boxShadow: "var(--sofya-surface-shadow-override, var(--sofya-surface-shadow-base))"
-  }
-};
+  };
+}
 function SurfaceComponent({ as, asChild = false, variant = "card", className, style, ...props }, ref) {
   const Component = asChild ? Slot2 : as ?? "div";
   return /* @__PURE__ */ jsx9(
@@ -1584,7 +1619,7 @@ function SurfaceComponent({ as, asChild = false, variant = "card", className, st
       ref,
       "data-surface-variant": variant,
       className: cn("relative text-foreground", className),
-      style: { ...surfaceStyles[variant], ...style },
+      style: { ...getSurfaceStyle(variant), ...style },
       ...props
     }
   );
@@ -1661,13 +1696,13 @@ var selectionControlLabelTextBaseClasses = "text-[color:var(--sofya-text-default
 var selectionControlDescriptionTextBaseClasses = "text-muted-foreground";
 var selectionControlControlBaseClasses = "border border-[color:var(--sofya-border-strong)] bg-card transition-[background-color,border-color,box-shadow,color] duration-sofya ease-sofya disabled:cursor-not-allowed disabled:opacity-50";
 function selectionControlContainerClasses({
-  alignClassName,
+  alignClassName: alignClassName2,
   className,
   disabled
 }) {
   return cn(
     selectionControlContainerBaseClasses,
-    alignClassName,
+    alignClassName2,
     disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
     className
   );
@@ -1691,13 +1726,13 @@ var Checkbox = React10.forwardRef(
     const generatedId = React10.useId();
     const resolvedId = id ?? generatedId;
     const descriptionId = description ? `${resolvedId}-description` : void 0;
-    const alignClassName = description ? "items-start" : "items-center";
+    const alignClassName2 = description ? "items-start" : "items-center";
     return /* @__PURE__ */ jsxs4(
       "label",
       {
         htmlFor: resolvedId,
         className: selectionControlContainerClasses({
-          alignClassName,
+          alignClassName: alignClassName2,
           className,
           disabled
         }),
@@ -3426,13 +3461,16 @@ var DialogContent = React19.forwardRef(
     className,
     children,
     cardClassName,
+    cardStyle,
     overlayClassName,
     showCloseButton = true,
+    surfaceShadow = "var(--sofya-shadow-lg)",
     variant = "card",
     ...props
   }, ref) => {
     const dialogCardStyle = {
-      "--sofya-surface-shadow-override": "var(--sofya-shadow-lg)"
+      "--sofya-surface-shadow-override": surfaceShadow,
+      ...cardStyle
     };
     return /* @__PURE__ */ jsx20(DialogInternalContext.Provider, { value: { showCloseButton }, children: /* @__PURE__ */ jsxs11(DialogPortal, { children: [
       /* @__PURE__ */ jsx20(DialogOverlay, { className: overlayClassName }),
@@ -3538,10 +3576,73 @@ var DialogDescription = React19.forwardRef(({ children, className, ...props }, r
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-// src/components/empty.tsx
+// 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(
+  ({
+    actions,
+    className,
+    description,
+    leading,
+    meta,
+    selected = false,
+    title,
+    ...props
+  }, ref) => {
+    const gridTemplateClassName = cn(
+      leading && actions && "grid-cols-[auto_minmax(0,1fr)_auto]",
+      leading && !actions && "grid-cols-[auto_minmax(0,1fr)]",
+      !leading && actions && "grid-cols-[minmax(0,1fr)_auto]",
+      !leading && !actions && "grid-cols-[minmax(0,1fr)]"
+    );
+    return /* @__PURE__ */ jsxs12(
+      Surface,
+      {
+        ref,
+        "aria-selected": selected,
+        "data-slot": "document-card",
+        "data-state": selected ? "selected" : "idle",
+        variant: selected ? "documentCardSelected" : "documentCard",
+        className: cn(
+          "grid min-h-[var(--sofya-control-height-lg)] items-center gap-[var(--sofya-gap-default)] px-[var(--sofya-space-4)] py-[var(--sofya-space-3)]",
+          gridTemplateClassName,
+          className
+        ),
+        ...props,
+        children: [
+          leading ? /* @__PURE__ */ jsx21(
+            "span",
+            {
+              "data-slot": "document-card-leading",
+              className: "flex size-[var(--sofya-icon-button-size-sm)] shrink-0 items-center justify-center text-primary",
+              children: leading
+            }
+          ) : 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
+          ] }),
+          actions ? /* @__PURE__ */ jsx21(
+            "span",
+            {
+              "data-slot": "document-card-actions",
+              className: "flex shrink-0 items-center gap-[var(--sofya-gap-compact)]",
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+DocumentCard.displayName = "DocumentCard";
+
+// src/components/empty.tsx
+import * as React21 from "react";
 import { cva as cva5 } from "class-variance-authority";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, 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",
@@ -3557,11 +3658,11 @@ var emptyMediaVariants = cva5(
     }
   }
 );
-var EmptyMedia = React20.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
-  return /* @__PURE__ */ jsx21("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
+var EmptyMedia = React21.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
+  return /* @__PURE__ */ jsx22("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
 });
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: cn("flex max-w-[34rem] flex-col items-center gap-4 text-center", className),
@@ -3570,7 +3671,7 @@ function EmptyHeader({ className, ...props }) {
   );
 }
 function EmptyTitle({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "h2",
     {
       className: cn("text-foreground", className),
@@ -3588,7 +3689,7 @@ function EmptyDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "p",
     {
       className: cn("max-w-full text-muted-foreground whitespace-nowrap", className),
@@ -3602,7 +3703,7 @@ function EmptyDescription({
   );
 }
 function EmptyContent({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: cn("flex flex-wrap items-center justify-center gap-4 text-center", className),
@@ -3613,9 +3714,9 @@ function EmptyContent({ children, className, ...props }) {
     }
   );
 }
-var Empty = React20.forwardRef(function Empty2({ children, className, content, description, media, title, ...props }, ref) {
-  const hasCustomChildren = React20.Children.count(children) > 0;
-  return /* @__PURE__ */ jsx21(
+var Empty = React21.forwardRef(function Empty2({ children, className, content, description, media, title, ...props }, ref) {
+  const hasCustomChildren = React21.Children.count(children) > 0;
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       ref,
@@ -3624,13 +3725,13 @@ var Empty = React20.forwardRef(function Empty2({ children, className, content, d
         className
       ),
       ...props,
-      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs12(Fragment3, { children: [
-        /* @__PURE__ */ jsxs12(EmptyHeader, { children: [
-          media ?? /* @__PURE__ */ jsx21(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx21(Icon, { name: "folders", size: 28 }) }),
-          /* @__PURE__ */ jsx21(EmptyTitle, { children: title ?? "Nada por aqui" }),
-          /* @__PURE__ */ jsx21(EmptyDescription, { children: description ?? "Quando houver conte\xFAdo dispon\xEDvel, ele aparecer\xE1 aqui." })
+      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." })
         ] }),
-        content !== void 0 && content !== null ? /* @__PURE__ */ jsx21(EmptyContent, { children: content }) : null
+        content !== void 0 && content !== null ? /* @__PURE__ */ jsx22(EmptyContent, { children: content }) : null
       ] })
     }
   );
@@ -3643,11 +3744,11 @@ EmptyDescription.displayName = "EmptyDescription";
 EmptyContent.displayName = "EmptyContent";
 
 // src/components/label.tsx
-import * as React21 from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Label = React21.forwardRef(
+import * as React22 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Label = React22.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "label",
       {
         ref,
@@ -3670,11 +3771,109 @@ var Label = React21.forwardRef(
 );
 Label.displayName = "Label";
 
+// src/components/layout.tsx
+import * as React23 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var alignClassName = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var justifyClassName = {
+  start: "justify-start",
+  center: "justify-center",
+  between: "justify-between",
+  end: "justify-end"
+};
+function getGapStyle(gap) {
+  return {
+    "--sofya-layout-gap": `var(--sofya-gap-${gap})`
+  };
+}
+var Stack = React23.forwardRef(
+  ({ className, gap = "default", style, ...props }, ref) => /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref,
+      "data-slot": "stack",
+      className: cn("flex min-w-0 flex-col gap-[var(--sofya-layout-gap)]", className),
+      style: { ...getGapStyle(gap), ...style },
+      ...props
+    }
+  )
+);
+Stack.displayName = "Stack";
+var Cluster = React23.forwardRef(
+  ({
+    align = "center",
+    className,
+    gap = "default",
+    justify = "start",
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref,
+      "data-slot": "cluster",
+      className: cn(
+        "flex min-w-0 flex-wrap gap-[var(--sofya-layout-gap)]",
+        alignClassName[align],
+        justifyClassName[justify],
+        className
+      ),
+      style: { ...getGapStyle(gap), ...style },
+      ...props
+    }
+  )
+);
+Cluster.displayName = "Cluster";
+var Inline = React23.forwardRef(
+  ({ align = "center", className, gap = "compact", style, ...props }, ref) => /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref,
+      "data-slot": "inline",
+      className: cn(
+        "inline-flex min-w-0 gap-[var(--sofya-layout-gap)]",
+        alignClassName[align],
+        className
+      ),
+      style: { ...getGapStyle(gap), ...style },
+      ...props
+    }
+  )
+);
+Inline.displayName = "Inline";
+var Container = React23.forwardRef(
+  ({ className, measure = "reading", style, ...props }, ref) => {
+    const measureStyle = measure === "none" ? void 0 : {
+      "--sofya-layout-measure": `var(--sofya-measure-${measure})`
+    };
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        ref,
+        "data-slot": "container",
+        className: cn(
+          "mx-auto w-full min-w-0",
+          measure !== "none" && "max-w-[var(--sofya-layout-measure)]",
+          className
+        ),
+        style: { ...measureStyle, ...style },
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
 // src/components/link.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva6 } from "class-variance-authority";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } 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",
   {
@@ -3689,9 +3888,9 @@ var linkVariants = cva6(
     }
   }
 );
-var Link = React22.forwardRef(function Link2({ asChild = false, children, className, variant = "default", ...props }, ref) {
+var Link = React24.forwardRef(function Link2({ asChild = false, children, className, variant = "default", ...props }, ref) {
   const Component = asChild ? Slot3 : "a";
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     Component,
     {
       ref,
@@ -3709,7 +3908,7 @@ var Link = React22.forwardRef(function Link2({ asChild = false, children, classN
 Link.displayName = "Link";
 
 // src/components/logo.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 
 // src/components/logo-data.ts
 var logoAssets = {
@@ -3806,7 +4005,7 @@ var logoAssets = {
 };
 
 // src/components/logo.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var logoVariants = ["mono", "default", "text", "full"];
 var logoSizeOptions = ["sm", "md", "lg", "xl", "2xl"];
 var logoSizeScale = {
@@ -3842,7 +4041,7 @@ function resolveLogoDimensions(variant, size, width, height) {
     height: resolvedHeight
   };
 }
-var Logo = React23.forwardRef(function Logo2({
+var Logo = React25.forwardRef(function Logo2({
   variant = "full",
   size = "lg",
   width,
@@ -3853,10 +4052,10 @@ var Logo = React23.forwardRef(function Logo2({
   ...props
 }, ref) {
   const asset = logoAssets[variant];
-  const titleId = React23.useId();
+  const titleId = React25.useId();
   const dimensions = resolveLogoDimensions(variant, size, width, height);
   const monoFill = variant === "mono" ? monoColor ?? "currentColor" : void 0;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "svg",
     {
       ref,
@@ -3871,8 +4070,8 @@ var Logo = React23.forwardRef(function Logo2({
       focusable: "false",
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsx24("title", { id: titleId, children: title }) : null,
-        asset.paths.map((path, index) => /* @__PURE__ */ jsx24(
+        title ? /* @__PURE__ */ jsx26("title", { id: titleId, children: title }) : null,
+        asset.paths.map((path, index) => /* @__PURE__ */ jsx26(
           "path",
           {
             d: path.d,
@@ -3904,7 +4103,7 @@ var inheritedTypographyStyle = {
 };
 
 // src/components/pagination.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, 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",
   {
@@ -3925,7 +4124,7 @@ var paginationLinkVariants = cva7(
   }
 );
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "nav",
     {
       "aria-label": "Pagination",
@@ -3938,7 +4137,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "ul",
     {
       className: cn(
@@ -3950,7 +4149,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx25("li", { className: cn("list-none", className), ...props });
+  return /* @__PURE__ */ jsx27("li", { className: cn("list-none", className), ...props });
 }
 function PaginationLink({
   asChild = false,
@@ -3960,7 +4159,7 @@ function PaginationLink({
   ...props
 }) {
   const Component = asChild ? Slot4 : "a";
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     Component,
     {
       "aria-current": isActive ? "page" : void 0,
@@ -3970,25 +4169,25 @@ function PaginationLink({
   );
 }
 function PaginationChevronLeft() {
-  return /* @__PURE__ */ jsx25(IconChevronLeft2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
+  return /* @__PURE__ */ jsx27(IconChevronLeft2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
 }
 function PaginationChevronRight() {
-  return /* @__PURE__ */ jsx25(IconChevronRight2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
+  return /* @__PURE__ */ jsx27(IconChevronRight2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
 }
 function PaginationPrevious({
   className,
   text = "Previous",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
       className: cn("gap-2 px-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx25(PaginationChevronLeft, {}),
-        /* @__PURE__ */ jsx25("span", { className: "hidden sm:block", children: renderTextContent(text, {
+        /* @__PURE__ */ jsx27(PaginationChevronLeft, {}),
+        /* @__PURE__ */ jsx27("span", { className: "hidden sm:block", children: renderTextContent(text, {
           as: "span",
           className: "block text-inherit",
           size: "body",
@@ -4003,20 +4202,20 @@ function PaginationNext({
   text = "Next",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     PaginationLink,
     {
       "aria-label": "Go to next page",
       className: cn("gap-2 px-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx25("span", { className: "hidden sm:block", children: renderTextContent(text, {
+        /* @__PURE__ */ jsx27("span", { className: "hidden sm:block", children: renderTextContent(text, {
           as: "span",
           className: "block text-inherit",
           size: "body",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ jsx25(PaginationChevronRight, {})
+        /* @__PURE__ */ jsx27(PaginationChevronRight, {})
       ]
     }
   );
@@ -4025,7 +4224,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "span",
     {
       "aria-hidden": "true",
@@ -4035,22 +4234,90 @@ function PaginationEllipsis({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx25("span", { children: renderTextContent("...", {
+        /* @__PURE__ */ jsx27("span", { children: renderTextContent("...", {
           as: "span",
           className: "block text-inherit",
           size: "h5",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx27("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";
+var proseDialogMaxWidth = "min(var(--sofya-layout-prose-dialog-width), calc(100vw - var(--sofya-space-8)))";
+var ProseDialogContent = React26.forwardRef(
+  ({
+    cardClassName,
+    cardStyle: incomingCardStyle,
+    className,
+    style,
+    surfaceShadow = "none",
+    variant = "proseDialog",
+    ...props
+  }, ref) => {
+    const dialogStyle = {
+      ...style,
+      maxWidth: proseDialogMaxWidth
+    };
+    const cardStyle = {
+      ...incomingCardStyle,
+      maxWidth: proseDialogMaxWidth
+    };
+    return /* @__PURE__ */ jsx28(
+      DialogContent,
+      {
+        ref,
+        className,
+        cardClassName: [
+          "gap-[var(--sofya-rhythm-section-content)] p-[var(--sofya-space-6)] sm:p-[var(--sofya-space-12)]",
+          cardClassName
+        ].filter(Boolean).join(" "),
+        cardStyle,
+        "data-slot": "prose-dialog-content",
+        style: dialogStyle,
+        surfaceShadow,
+        variant,
+        ...props
+      }
+    );
+  }
+);
+ProseDialogContent.displayName = "ProseDialogContent";
+function ProseDialogHeader(props) {
+  return /* @__PURE__ */ jsx28(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 }));
+ProseDialogTitle.displayName = "ProseDialogTitle";
+var ProseDialogDescription = React26.forwardRef((props, ref) => /* @__PURE__ */ jsx28(DialogDescription, { ref, "data-slot": "prose-dialog-description", ...props }));
+ProseDialogDescription.displayName = "ProseDialogDescription";
+var ProseDialogBody = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+  "div",
+  {
+    ref,
+    "data-slot": "prose-dialog-body",
+    className: [
+      "flex flex-col",
+      "max-w-[var(--sofya-measure-wide)] gap-[var(--sofya-rhythm-paragraph-flow)]",
+      "[&_p]:m-0 [&_p]:text-[length:var(--sofya-text-body-md-font-size)]",
+      "[&_p]:font-[var(--sofya-text-body-md-font-weight)] [&_p]:leading-[var(--sofya-text-body-md-line-height)]",
+      "[&_section]:flex [&_section]:flex-col [&_section]:gap-[var(--sofya-rhythm-title-to-body)]",
+      className
+    ].filter(Boolean).join(" "),
+    ...props
+  }
+));
+ProseDialogBody.displayName = "ProseDialogBody";
+
 // src/components/progress.tsx
-import * as React24 from "react";
+import * as React27 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var progressSizeOptions = ["sm", "default", "lg"];
 function clampProgressValue(value, max) {
   if (Number.isNaN(value)) {
@@ -4058,7 +4325,7 @@ function clampProgressValue(value, max) {
   }
   return Math.min(Math.max(value, 0), max);
 }
-var Progress = React24.forwardRef(function Progress2({
+var Progress = React27.forwardRef(function Progress2({
   className,
   indicatorClassName,
   max = 100,
@@ -4069,7 +4336,7 @@ var Progress = React24.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__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     ProgressPrimitive.Root,
     {
       ref,
@@ -4082,7 +4349,7 @@ var Progress = React24.forwardRef(function Progress2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx29(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
@@ -4099,19 +4366,19 @@ var Progress = React24.forwardRef(function Progress2({
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/radio-group.tsx
-import * as React25 from "react";
+import * as React28 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var radioGroupOrientationOptions = ["horizontal", "vertical"];
 var radioGroupVariantOptions = ["default", "pill", "option"];
-var RadioGroupContext = React25.createContext({
+var RadioGroupContext = React28.createContext({
   variant: "default"
 });
-var RadioGroupOptionContext = React25.createContext(
+var RadioGroupOptionContext = React28.createContext(
   {}
 );
-var RadioGroupRoot = React25.forwardRef(function RadioGroup2({ className, variant = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx27(RadioGroupContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx27(
+var RadioGroupRoot = React28.forwardRef(function RadioGroup2({ className, variant = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx30(RadioGroupContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx30(
     RadioGroupPrimitive.Root,
     {
       ref,
@@ -4127,7 +4394,7 @@ var RadioGroupRoot = React25.forwardRef(function RadioGroup2({ className, varian
   ) });
 });
 RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
+var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
   className,
   controlClassName,
   description,
@@ -4139,14 +4406,14 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
   labelClassName,
   ...props
 }, ref) {
-  const { variant } = React25.useContext(RadioGroupContext);
-  const generatedId = React25.useId();
+  const { variant } = React28.useContext(RadioGroupContext);
+  const generatedId = React28.useId();
   const resolvedId = id ?? generatedId;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const descriptionId = description ? `${resolvedId}-description` : void 0;
-  const alignClassName = description ? "items-start" : "items-center";
+  const alignClassName2 = description ? "items-start" : "items-center";
   if (variant === "pill") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx30(
       RadioGroupPrimitive.Item,
       {
         ref,
@@ -4161,8 +4428,8 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
           className
         ),
         ...props,
-        children: label || description ? /* @__PURE__ */ jsxs15("span", { className: "grid justify-items-center gap-1 text-center", children: [
-          label ? /* @__PURE__ */ jsx27(
+        children: label || description ? /* @__PURE__ */ jsxs16("span", { className: "grid justify-items-center gap-1 text-center", children: [
+          label ? /* @__PURE__ */ jsx30(
             "span",
             {
               id: labelId,
@@ -4177,7 +4444,7 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
               })
             }
           ) : null,
-          description ? /* @__PURE__ */ jsx27(
+          description ? /* @__PURE__ */ jsx30(
             "span",
             {
               id: descriptionId,
@@ -4196,16 +4463,16 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "label",
     {
       className: selectionControlContainerClasses({
-        alignClassName,
+        alignClassName: alignClassName2,
         className,
         disabled
       }),
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           RadioGroupPrimitive.Item,
           {
             ref,
@@ -4221,7 +4488,7 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
               controlClassName
             ),
             ...props,
-            children: /* @__PURE__ */ jsx27(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx30(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx30(
               "span",
               {
                 "data-slot": "radio-group-indicator",
@@ -4233,8 +4500,8 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
             ) })
           }
         ),
-        label || description ? /* @__PURE__ */ jsxs15("span", { className: selectionControlContentBaseClasses, children: [
-          label ? /* @__PURE__ */ jsx27(
+        label || description ? /* @__PURE__ */ jsxs16("span", { className: selectionControlContentBaseClasses, children: [
+          label ? /* @__PURE__ */ jsx30(
             "span",
             {
               id: labelId,
@@ -4249,7 +4516,7 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
               })
             }
           ) : null,
-          description ? /* @__PURE__ */ jsx27(
+          description ? /* @__PURE__ */ jsx30(
             "span",
             {
               id: descriptionId,
@@ -4270,7 +4537,7 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-var RadioGroupOptionAvatar = React25.forwardRef(function RadioGroupOptionAvatar2({
+var RadioGroupOptionAvatar = React28.forwardRef(function RadioGroupOptionAvatar2({
   alt,
   avatarClassName,
   avatarProps,
@@ -4280,7 +4547,7 @@ var RadioGroupOptionAvatar = React25.forwardRef(function RadioGroupOptionAvatar2
   src,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       ref,
@@ -4290,7 +4557,7 @@ var RadioGroupOptionAvatar = React25.forwardRef(function RadioGroupOptionAvatar2
         className
       ),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx27(
+      children: children ?? /* @__PURE__ */ jsx30(
         Avatar,
         {
           ...avatarProps,
@@ -4307,9 +4574,9 @@ var RadioGroupOptionAvatar = React25.forwardRef(function RadioGroupOptionAvatar2
   );
 });
 RadioGroupOptionAvatar.displayName = "RadioGroupOptionAvatar";
-var RadioGroupOptionLabel = React25.forwardRef(function RadioGroupOptionLabel2({ children, className, ...props }, ref) {
-  const { labelId } = React25.useContext(RadioGroupOptionContext);
-  return /* @__PURE__ */ jsx27(
+var RadioGroupOptionLabel = React28.forwardRef(function RadioGroupOptionLabel2({ children, className, ...props }, ref) {
+  const { labelId } = React28.useContext(RadioGroupOptionContext);
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       ref,
@@ -4329,9 +4596,9 @@ var RadioGroupOptionLabel = React25.forwardRef(function RadioGroupOptionLabel2({
   );
 });
 RadioGroupOptionLabel.displayName = "RadioGroupOptionLabel";
-var RadioGroupOptionDescription = React25.forwardRef(function RadioGroupOptionDescription2({ children, className, ...props }, ref) {
-  const { descriptionId } = React25.useContext(RadioGroupOptionContext);
-  return /* @__PURE__ */ jsx27(
+var RadioGroupOptionDescription = React28.forwardRef(function RadioGroupOptionDescription2({ children, className, ...props }, ref) {
+  const { descriptionId } = React28.useContext(RadioGroupOptionContext);
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       ref,
@@ -4350,8 +4617,8 @@ var RadioGroupOptionDescription = React25.forwardRef(function RadioGroupOptionDe
   );
 });
 RadioGroupOptionDescription.displayName = "RadioGroupOptionDescription";
-var RadioGroupOptionIndicator = React25.forwardRef(function RadioGroupOptionIndicator2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx27(
+var RadioGroupOptionIndicator = React28.forwardRef(function RadioGroupOptionIndicator2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       ref,
@@ -4361,7 +4628,7 @@ var RadioGroupOptionIndicator = React25.forwardRef(function RadioGroupOptionIndi
         className
       ),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx27(
+      children: children ?? /* @__PURE__ */ jsx30(
         "svg",
         {
           "aria-hidden": "true",
@@ -4369,7 +4636,7 @@ var RadioGroupOptionIndicator = React25.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__ */ jsx27(
+          children: /* @__PURE__ */ jsx30(
             "path",
             {
               d: "M9.55 17.6537L4.2155 12.3192L5.2845 11.25L9.55 15.5155L18.7155 6.35L19.7845 7.41925L9.55 17.6537Z",
@@ -4383,14 +4650,14 @@ var RadioGroupOptionIndicator = React25.forwardRef(function RadioGroupOptionIndi
 });
 RadioGroupOptionIndicator.displayName = "RadioGroupOptionIndicator";
 function isOptionChild(child, component) {
-  return React25.isValidElement(child) && child.type === component;
+  return React28.isValidElement(child) && child.type === component;
 }
-var RadioGroupOption = React25.forwardRef(function RadioGroupOption2({ children, className, disabled, id, ...props }, ref) {
-  const generatedId = React25.useId();
+var RadioGroupOption = React28.forwardRef(function RadioGroupOption2({ children, className, disabled, id, ...props }, ref) {
+  const generatedId = React28.useId();
   const resolvedId = id ?? generatedId;
   const labelId = `${resolvedId}-label`;
   const descriptionId = `${resolvedId}-description`;
-  const childArray = React25.Children.toArray(children);
+  const childArray = React28.Children.toArray(children);
   const leadingChildren = [];
   const contentChildren = [];
   let indicatorChild = null;
@@ -4405,7 +4672,7 @@ var RadioGroupOption = React25.forwardRef(function RadioGroupOption2({ children,
     }
     contentChildren.push(child);
   }
-  return /* @__PURE__ */ jsx27(RadioGroupOptionContext.Provider, { value: { descriptionId, labelId }, children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx30(RadioGroupOptionContext.Provider, { value: { descriptionId, labelId }, children: /* @__PURE__ */ jsxs16(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -4425,7 +4692,7 @@ var RadioGroupOption = React25.forwardRef(function RadioGroupOption2({ children,
       ...props,
       children: [
         leadingChildren,
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           "span",
           {
             "data-slot": "radio-group-option-content",
@@ -4433,7 +4700,7 @@ var RadioGroupOption = React25.forwardRef(function RadioGroupOption2({ children,
             children: contentChildren
           }
         ),
-        indicatorChild ?? /* @__PURE__ */ jsx27(RadioGroupOptionIndicator, {})
+        indicatorChild ?? /* @__PURE__ */ jsx30(RadioGroupOptionIndicator, {})
       ]
     }
   ) });
@@ -4449,13 +4716,37 @@ var RadioGroup3 = Object.assign(RadioGroupRoot, {
   OptionLabel: RadioGroupOptionLabel
 });
 
+// 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,
+    {
+      ref,
+      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
+    }
+  )
+);
+RightRailAction.displayName = "RightRailAction";
+
 // src/components/scroll-area.tsx
-import * as React26 from "react";
+import * as React30 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var scrollAreaOrientationOptions = ["horizontal", "vertical"];
-var ScrollArea = React26.forwardRef(function ScrollArea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx28(
+var ScrollArea = React30.forwardRef(function ScrollArea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx32(
     ScrollAreaPrimitive.Root,
     {
       ref,
@@ -4466,8 +4757,8 @@ var ScrollArea = React26.forwardRef(function ScrollArea2({ className, ...props }
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollAreaViewport = React26.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx28(
+var ScrollAreaViewport = React30.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx32(
     ScrollAreaPrimitive.Viewport,
     {
       ref,
@@ -4481,8 +4772,8 @@ var ScrollAreaViewport = React26.forwardRef(function ScrollAreaViewport2({ class
   );
 });
 ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
-var ScrollAreaScrollbar = React26.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
-  return /* @__PURE__ */ jsx28(
+var ScrollAreaScrollbar = React30.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
+  return /* @__PURE__ */ jsx32(
     ScrollAreaPrimitive.Scrollbar,
     {
       ref,
@@ -4493,7 +4784,7 @@ var ScrollAreaScrollbar = React26.forwardRef(function ScrollAreaScrollbar2({ cla
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx32(
         ScrollAreaPrimitive.Thumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -4507,8 +4798,8 @@ var ScrollAreaScrollbar = React26.forwardRef(function ScrollAreaScrollbar2({ cla
   );
 });
 ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
-var ScrollAreaCorner = React26.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx28(
+var ScrollAreaCorner = React30.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx32(
     ScrollAreaPrimitive.Corner,
     {
       ref,
@@ -4521,19 +4812,19 @@ var ScrollAreaCorner = React26.forwardRef(function ScrollAreaCorner2({ className
 ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
 
 // src/components/select.tsx
-import * as React27 from "react";
+import * as React31 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 jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var selectSizeOptions = ["default", "sm"];
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
-var SelectValue = React27.forwardRef(function SelectValue2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx29(
+var SelectValue = React31.forwardRef(function SelectValue2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
     Text,
     {
       ref,
@@ -4542,13 +4833,13 @@ var SelectValue = React27.forwardRef(function SelectValue2({ className, ...props
       className: cn("block truncate text-inherit", className),
       size: "tiny",
       style: inheritedTypographyStyle,
-      children: /* @__PURE__ */ jsx29(SelectPrimitive.Value, { className: "block truncate", ...props })
+      children: /* @__PURE__ */ jsx33(SelectPrimitive.Value, { className: "block truncate", ...props })
     }
   );
 });
 SelectValue.displayName = SelectPrimitive.Value.displayName;
-var SelectTrigger = React27.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsxs16(
+var SelectTrigger = React31.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsxs17(
     SelectPrimitive.Trigger,
     {
       ref,
@@ -4562,7 +4853,7 @@ var SelectTrigger = React27.forwardRef(function SelectTrigger2({ className, chil
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx29(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx33(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx33(
           Icon,
           {
             name: "caret-down",
@@ -4575,8 +4866,8 @@ var SelectTrigger = React27.forwardRef(function SelectTrigger2({ className, chil
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React27.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx29(
+var SelectScrollUpButton = React31.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
     SelectPrimitive.ScrollUpButton,
     {
       ref,
@@ -4586,13 +4877,13 @@ var SelectScrollUpButton = React27.forwardRef(function SelectScrollUpButton2({ c
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx29(Icon, { name: "caret-up", size: 12 })
+      children: /* @__PURE__ */ jsx33(Icon, { name: "caret-up", size: 12 })
     }
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx29(
+var SelectScrollDownButton = React31.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
     SelectPrimitive.ScrollDownButton,
     {
       ref,
@@ -4602,13 +4893,13 @@ var SelectScrollDownButton = React27.forwardRef(function SelectScrollDownButton2
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx29(Icon, { name: "caret-down", size: 12 })
+      children: /* @__PURE__ */ jsx33(Icon, { name: "caret-down", size: 12 })
     }
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React27.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
-  return /* @__PURE__ */ jsx29(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs16(
+var SelectContent = React31.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
+  return /* @__PURE__ */ jsx33(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs17(
     SelectPrimitive.Content,
     {
       ref,
@@ -4621,8 +4912,8 @@ var SelectContent = React27.forwardRef(function SelectContent2({ className, chil
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx29(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx33(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx33(
           SelectPrimitive.Viewport,
           {
             "data-slot": "select-viewport",
@@ -4630,14 +4921,14 @@ var SelectContent = React27.forwardRef(function SelectContent2({ className, chil
             children
           }
         ),
-        /* @__PURE__ */ jsx29(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx33(SelectScrollDownButton, {})
       ]
     }
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React27.forwardRef(function SelectLabel2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx29(
+var SelectLabel = React31.forwardRef(function SelectLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
     SelectPrimitive.Label,
     {
       ref,
@@ -4659,8 +4950,8 @@ var SelectLabel = React27.forwardRef(function SelectLabel2({ className, ...props
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React27.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs16(
+var SelectItem = React31.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs17(
     SelectPrimitive.Item,
     {
       ref,
@@ -4671,20 +4962,20 @@ var SelectItem = React27.forwardRef(function SelectItem2({ className, children,
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx29(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
+        /* @__PURE__ */ jsx33(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
           as: "span",
           className: "block truncate text-[color:var(--sofya-text-default)]",
           size: "tiny",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ jsx29(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx29("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ jsx29(Icon, { name: "check", size: 14 }) }) })
+        /* @__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 }) }) })
       ]
     }
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React27.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx29(
+var SelectSeparator = React31.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx33(
     SelectPrimitive.Separator,
     {
       ref,
@@ -4697,11 +4988,11 @@ var SelectSeparator = React27.forwardRef(function SelectSeparator2({ className,
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/separator.tsx
-import * as React28 from "react";
+import * as React32 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Separator2 = React28.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Separator2 = React32.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
+  return /* @__PURE__ */ jsx34(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -4720,8 +5011,8 @@ var Separator2 = React28.forwardRef(function Separator3({ className, decorative
 Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/slider.tsx
-import * as React29 from "react";
-import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import * as React33 from "react";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 function clampSliderValue(value, min, max) {
   if (Number.isNaN(value)) {
     return min;
@@ -4746,7 +5037,7 @@ function resolveSliderMeasurement(value, fallback) {
 function isTextValue(value) {
   return typeof value === "string" || typeof value === "number";
 }
-var Slider = React29.forwardRef(function Slider2({
+var Slider = React33.forwardRef(function Slider2({
   className,
   defaultValue,
   formatValue,
@@ -4769,7 +5060,7 @@ var Slider = React29.forwardRef(function Slider2({
   valueClassName,
   ...props
 }, ref) {
-  const resolvedId = React29.useId();
+  const resolvedId = React33.useId();
   const inputId = id ?? resolvedId;
   const safeMin = min;
   const safeMax = resolveSliderMax(safeMin, max);
@@ -4778,7 +5069,7 @@ var Slider = React29.forwardRef(function Slider2({
     onChange: onValueChange,
     value
   });
-  React29.useEffect(() => {
+  React33.useEffect(() => {
     if (value !== void 0) {
       return;
     }
@@ -4825,14 +5116,14 @@ var Slider = React29.forwardRef(function Slider2({
     setControllableValue(nextValue);
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       "data-slot": "slider",
       className: cn("grid w-full gap-2", className),
       children: [
-        label || showValue ? /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between gap-4", children: [
-          label ? /* @__PURE__ */ jsx31(
+        label || showValue ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-4", children: [
+          label ? /* @__PURE__ */ jsx35(
             FieldLabel,
             {
               htmlFor: inputId,
@@ -4843,8 +5134,8 @@ var Slider = React29.forwardRef(function Slider2({
               textClassName: "block min-w-0 text-[color:var(--sofya-text-default)]",
               children: label
             }
-          ) : /* @__PURE__ */ jsx31("span", {}),
-          showValue ? /* @__PURE__ */ jsx31(
+          ) : /* @__PURE__ */ jsx35("span", {}),
+          showValue ? /* @__PURE__ */ jsx35(
             "div",
             {
               className: cn(
@@ -4862,7 +5153,7 @@ var Slider = React29.forwardRef(function Slider2({
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           "div",
           {
             "data-slot": "slider-control",
@@ -4872,7 +5163,7 @@ var Slider = React29.forwardRef(function Slider2({
             ),
             style: controlStyle,
             children: [
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx35(
                 "input",
                 {
                   ...props,
@@ -4889,7 +5180,7 @@ var Slider = React29.forwardRef(function Slider2({
                   style: inputBoundsStyle
                 }
               ),
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   "data-slot": "slider-track",
@@ -4900,7 +5191,7 @@ var Slider = React29.forwardRef(function Slider2({
                   style: trackBoundsStyle
                 }
               ),
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   "data-slot": "slider-range",
@@ -4911,7 +5202,7 @@ var Slider = React29.forwardRef(function Slider2({
                   style: rangeStyle
                 }
               ),
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   "data-slot": "slider-thumb",
@@ -4932,10 +5223,10 @@ var Slider = React29.forwardRef(function Slider2({
 Slider.displayName = "Slider";
 
 // src/components/skeleton.tsx
-import * as React30 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var Skeleton = React30.forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx32(
+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(
     "div",
     {
       ref,
@@ -4950,18 +5241,18 @@ var Skeleton = React30.forwardRef(function Skeleton2({ className, ...props }, re
 Skeleton.displayName = "Skeleton";
 
 // src/components/sonner.tsx
-import * as React31 from "react";
+import * as React35 from "react";
 import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var notificationVariantOptions = ["default", "success", "error", "warning"];
 function ToastStatusIcon({
   iconName,
   className
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx37(
     "span",
     {
       "aria-hidden": "true",
@@ -4969,7 +5260,7 @@ function ToastStatusIcon({
         "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-sofya-sm",
         className
       ),
-      children: /* @__PURE__ */ jsx33(Icon, { name: iconName, size: 16 })
+      children: /* @__PURE__ */ jsx37(Icon, { name: iconName, size: 16 })
     }
   );
 }
@@ -4990,35 +5281,35 @@ var defaultToastClassNames = {
   loading: "border-border bg-card text-foreground"
 };
 var defaultToastIcons = {
-  success: /* @__PURE__ */ jsx33(
+  success: /* @__PURE__ */ jsx37(
     ToastStatusIcon,
     {
       iconName: "check",
       className: "border-success/15 bg-success/12 text-success"
     }
   ),
-  error: /* @__PURE__ */ jsx33(
+  error: /* @__PURE__ */ jsx37(
     ToastStatusIcon,
     {
       iconName: "x",
       className: "border-destructive/15 bg-destructive/12 text-destructive"
     }
   ),
-  warning: /* @__PURE__ */ jsx33(
+  warning: /* @__PURE__ */ jsx37(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-warning/20 bg-warning/15 text-foreground"
     }
   ),
-  info: /* @__PURE__ */ jsx33(
+  info: /* @__PURE__ */ jsx37(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-primary/15 bg-primary/10 text-primary"
     }
   ),
-  close: /* @__PURE__ */ jsx33(Icon, { name: "x", size: 12 })
+  close: /* @__PURE__ */ jsx37(Icon, { name: "x", size: 12 })
 };
 function mergeToastClassNames(overrides) {
   return {
@@ -5026,7 +5317,7 @@ function mergeToastClassNames(overrides) {
     ...overrides
   };
 }
-var Toaster = React31.forwardRef(
+var Toaster = React35.forwardRef(
   function Toaster2({
     className,
     closeButton = true,
@@ -5038,7 +5329,7 @@ var Toaster = React31.forwardRef(
     visibleToasts = 5,
     ...props
   }, ref) {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx37(
       SonnerToaster,
       {
         ref,
@@ -5068,9 +5359,9 @@ var Toaster = React31.forwardRef(
 Toaster.displayName = "Toaster";
 
 // src/components/switch.tsx
-import * as React32 from "react";
+import * as React36 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 var switchSizeOptions = ["default", "sm"];
 var switchRootSizeClasses = {
   default: "h-6 w-11",
@@ -5080,7 +5371,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 = React32.forwardRef(
+var Switch = React36.forwardRef(
   ({
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -5095,16 +5386,16 @@ var Switch = React32.forwardRef(
     size,
     ...props
   }, ref) => {
-    const generatedId = React32.useId();
+    const generatedId = React36.useId();
     const resolvedId = id ?? generatedId;
     const labelId = label ? `${resolvedId}-label` : void 0;
     const descriptionId = description ? `${resolvedId}-description` : void 0;
     const hasTextContent = label !== void 0 || description !== void 0;
     const resolvedSize = size ?? (hasTextContent ? "sm" : "default");
-    const alignClassName = description ? "items-start" : "items-center";
+    const alignClassName2 = description ? "items-start" : "items-center";
     const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
     const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;
-    const switchControl = /* @__PURE__ */ jsx34(
+    const switchControl = /* @__PURE__ */ jsx38(
       SwitchPrimitives.Root,
       {
         id: resolvedId,
@@ -5119,7 +5410,7 @@ var Switch = React32.forwardRef(
         "data-size": resolvedSize,
         ...props,
         ref,
-        children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx38(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -5133,19 +5424,19 @@ var Switch = React32.forwardRef(
     if (!hasTextContent) {
       return switchControl;
     }
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         "data-slot": "switch-container",
         className: selectionControlContainerClasses({
-          alignClassName,
+          alignClassName: alignClassName2,
           className: containerClassName,
           disabled
         }),
         children: [
           switchControl,
-          /* @__PURE__ */ jsxs18("span", { className: selectionControlContentBaseClasses, children: [
-            label ? /* @__PURE__ */ jsx34("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsxs19("span", { className: selectionControlContentBaseClasses, children: [
+            label ? /* @__PURE__ */ jsx38("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx38(
               "span",
               {
                 id: labelId,
@@ -5160,7 +5451,7 @@ var Switch = React32.forwardRef(
                 })
               }
             ) }) : null,
-            description ? /* @__PURE__ */ jsx34(
+            description ? /* @__PURE__ */ jsx38(
               "span",
               {
                 id: descriptionId,
@@ -5185,17 +5476,18 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
 import { cva as cva8 } from "class-variance-authority";
-import * as React33 from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import * as React37 from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var tableCellVariantOptions = ["default", "primary", "muted"];
 var tableStatusToneOptions = [
   "active",
   "inactive",
+  "info",
   "warning"
 ];
 var tableActionToneOptions = ["primary", "neutral", "danger"];
 var tableCellVariants = cva8(
-  "px-2 py-6 align-middle [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-normal leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]",
+  "px-4 py-5 align-middle [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-normal leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]",
   {
     variants: {
       variant: {
@@ -5214,6 +5506,7 @@ var tableStatusBadgeVariants = cva8("normal-case", {
     tone: {
       active: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
       inactive: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-text-subtle)]",
+      info: "border-transparent bg-primary/10 text-primary",
       warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]"
     }
   },
@@ -5222,7 +5515,7 @@ var tableStatusBadgeVariants = cva8("normal-case", {
   }
 });
 var tableActionButtonVariants = cva8(
-  "text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] shadow-none motion-safe:active:scale-[0.97] focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:opacity-40 [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+  "h-8 w-8 text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] shadow-none motion-safe:active:scale-[0.97] focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:opacity-40 [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
   {
     variants: {
       tone: {
@@ -5236,19 +5529,19 @@ var tableActionButtonVariants = cva8(
     }
   }
 );
-var Table = React33.forwardRef(function Table2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var Table = React37.forwardRef(function Table2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx39(
         "table",
         {
           "data-slot": "table",
           ref,
           className: cn(
-            "w-full min-w-[1040px] caption-bottom border-collapse bg-card",
+            "w-full min-w-[1040px] caption-bottom border-separate border-spacing-0 bg-card",
             className
           ),
           ...props
@@ -5257,33 +5550,33 @@ var Table = React33.forwardRef(function Table2({ className, ...props }, ref) {
     }
   );
 });
-var TableHeader = React33.forwardRef(function TableHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableHeader = React37.forwardRef(function TableHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "thead",
     {
       "data-slot": "table-header",
       ref,
       className: cn(
-        "[&_tr]:border-b [&_tr]:border-[color:var(--sofya-border-strong)] [&_tr:hover]:bg-transparent",
+        "[&_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)]",
         className
       ),
       ...props
     }
   );
 });
-var TableBody = React33.forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableBody = React37.forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "tbody",
     {
       "data-slot": "table-body",
       ref,
-      className: cn("[&_tr:last-child]:border-0", className),
+      className: cn("[&_tr:last-child>td]:border-0", className),
       ...props
     }
   );
 });
-var TableFooter = React33.forwardRef(function TableFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableFooter = React37.forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "tfoot",
     {
       "data-slot": "table-footer",
@@ -5296,28 +5589,28 @@ var TableFooter = React33.forwardRef(function TableFooter2({ className, ...props
     }
   );
 });
-var TableRow = React33.forwardRef(function TableRow2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableRow = React37.forwardRef(function TableRow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "tr",
     {
       "data-slot": "table-row",
       ref,
       className: cn(
-        "border-b border-[color:var(--sofya-border-soft)] transition-colors duration-sofya ease-sofya hover:bg-[color:var(--sofya-tone-default-background)] data-[state=selected]:bg-[color:var(--sofya-tone-default-background)]",
+        "border-b border-[color:var(--sofya-border-soft)] transition-colors duration-sofya ease-sofya hover:bg-[color:var(--sofya-tone-default-background)] data-[state=selected]:bg-[color:var(--sofya-tone-default-background)] [&>td]:border-b [&>td]:border-[color:var(--sofya-border-soft)]",
         className
       ),
       ...props
     }
   );
 });
-var TableHead = React33.forwardRef(function TableHead2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableHead = React37.forwardRef(function TableHead2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "th",
     {
       "data-slot": "table-head",
       ref,
       className: cn(
-        "whitespace-nowrap px-2 py-8 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.12em] text-[color:var(--sofya-text-default)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+        "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",
         className
       ),
       ...props,
@@ -5330,9 +5623,9 @@ var TableHead = React33.forwardRef(function TableHead2({ className, children, ..
     }
   );
 });
-var TableCell = React33.forwardRef(
+var TableCell = React37.forwardRef(
   function TableCell2({ className, variant, truncate, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx39(
       "td",
       {
         "data-slot": "table-cell",
@@ -5356,8 +5649,8 @@ var TableCell = React33.forwardRef(
     );
   }
 );
-var TableCaption = React33.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableCaption = React37.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "caption",
     {
       "data-slot": "table-caption",
@@ -5376,13 +5669,53 @@ var TableCaption = React33.forwardRef(function TableCaption2({ className, childr
     }
   );
 });
+var TableCellTitle = React37.forwardRef(function TableCellTitle2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
+    "span",
+    {
+      "data-slot": "table-cell-title",
+      ref,
+      className: cn(
+        "block font-medium text-[color:var(--sofya-text-default)]",
+        className
+      ),
+      ...props,
+      children: renderTextContent(children, {
+        as: "span",
+        className: "block text-inherit",
+        size: "body",
+        style: inheritedTypographyStyle
+      })
+    }
+  );
+});
+var TableCellDescription = React37.forwardRef(function TableCellDescription2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
+    "span",
+    {
+      "data-slot": "table-cell-description",
+      ref,
+      className: cn(
+        "mt-1 block text-[color:var(--sofya-text-subtle)]",
+        className
+      ),
+      ...props,
+      children: renderTextContent(children, {
+        as: "span",
+        className: "block text-inherit",
+        size: "tiny",
+        style: inheritedTypographyStyle
+      })
+    }
+  );
+});
 function TableStatusBadge({
   className,
   tone,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx39(
     Badge,
     {
       variant: "pill",
@@ -5397,8 +5730,8 @@ function TableStatusBadge({
     }
   );
 }
-var TableActionButton = React33.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableActionButton = React37.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     Button,
     {
       ref,
@@ -5416,8 +5749,8 @@ var TableActionButton = React33.forwardRef(function TableActionButton2({ classNa
     }
   );
 });
-var TableActions = React33.forwardRef(function TableActions2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+var TableActions = React37.forwardRef(function TableActions2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       ref,
@@ -5434,14 +5767,16 @@ TableRow.displayName = "TableRow";
 TableHead.displayName = "TableHead";
 TableCell.displayName = "TableCell";
 TableCaption.displayName = "TableCaption";
+TableCellTitle.displayName = "TableCellTitle";
+TableCellDescription.displayName = "TableCellDescription";
 TableActionButton.displayName = "TableActionButton";
 TableActions.displayName = "TableActions";
 
 // src/components/tabs.tsx
-import * as React34 from "react";
+import * as React38 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { motion as motion3 } from "motion/react";
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
 function resolveDefaultValue(items, defaultValue) {
   if (defaultValue) {
     return defaultValue;
@@ -5465,13 +5800,13 @@ function Tabs({
     onChange: onValueChange,
     value
   });
-  const indicatorLayoutId = React34.useId();
-  React34.useEffect(() => {
+  const indicatorLayoutId = React38.useId();
+  React38.useEffect(() => {
     if (value === void 0) {
       setUncontrolledCurrentValue(resolvedDefaultValue);
     }
   }, [resolvedDefaultValue, setUncontrolledCurrentValue, value]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -5479,7 +5814,7 @@ function Tabs({
       value: currentValue,
       ...props,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx40(
           TabsPrimitive.List,
           {
             "aria-label": "Subtelas navegaveis",
@@ -5490,7 +5825,7 @@ function Tabs({
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
-              return /* @__PURE__ */ jsxs19(
+              return /* @__PURE__ */ jsxs20(
                 TabsPrimitive.Trigger,
                 {
                   value: item.value,
@@ -5502,7 +5837,7 @@ function Tabs({
                     item.triggerClassName
                   ),
                   children: [
-                    isActive ? /* @__PURE__ */ jsx36(
+                    isActive ? /* @__PURE__ */ jsx40(
                       motion3.span,
                       {
                         "aria-hidden": "true",
@@ -5512,15 +5847,15 @@ function Tabs({
                         transition: { duration: 0.25, ease: "easeInOut" }
                       }
                     ) : null,
-                    /* @__PURE__ */ jsxs19("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
-                      item.loading ? /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsxs20("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+                      item.loading ? /* @__PURE__ */ jsx40(
                         "span",
                         {
                           "aria-hidden": "true",
                           className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
                         }
                       ) : null,
-                      /* @__PURE__ */ jsx36("span", { children: renderTextContent(item.label, {
+                      /* @__PURE__ */ jsx40("span", { children: renderTextContent(item.label, {
                         as: "span",
                         className: "block text-inherit",
                         size: "body"
@@ -5534,7 +5869,7 @@ function Tabs({
           }
         ),
         items.map(
-          (item) => item.content !== void 0 ? /* @__PURE__ */ jsx36(
+          (item) => item.content !== void 0 ? /* @__PURE__ */ jsx40(
             TabsPrimitive.Content,
             {
               value: item.value,
@@ -5557,9 +5892,9 @@ function Tabs({
 Tabs.displayName = "Tabs";
 
 // src/components/textarea.tsx
-import * as React35 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var Textarea = React35.forwardRef(
+import * as React39 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var Textarea = React39.forwardRef(
   ({
     className,
     containerClassName,
@@ -5569,10 +5904,10 @@ var Textarea = React35.forwardRef(
     rows = 5,
     ...props
   }, ref) => {
-    const generatedId = React35.useId();
+    const generatedId = React39.useId();
     const resolvedId = id ?? generatedId;
     const ariaLabel = props["aria-label"] ?? (typeof label === "string" ? label : void 0);
-    const control = /* @__PURE__ */ jsx37(
+    const control = /* @__PURE__ */ jsx41(
       "textarea",
       {
         className: cn(
@@ -5586,7 +5921,7 @@ var Textarea = React35.forwardRef(
         "aria-label": ariaLabel
       }
     );
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx41(
       FieldShell,
       {
         control,
@@ -5601,10 +5936,10 @@ var Textarea = React35.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/toggle.tsx
-import * as React36 from "react";
+import * as React40 from "react";
 import * as SwitchPrimitives2 from "@radix-ui/react-switch";
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
-var Toggle = React36.forwardRef(function Toggle2({
+import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+var Toggle = React40.forwardRef(function Toggle2({
   "aria-describedby": ariaDescribedBy,
   "aria-labelledby": ariaLabelledBy,
   className,
@@ -5617,15 +5952,15 @@ var Toggle = React36.forwardRef(function Toggle2({
   labelClassName,
   ...props
 }, ref) {
-  const generatedId = React36.useId();
+  const generatedId = React40.useId();
   const resolvedId = id ?? generatedId;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const descriptionId = description ? `${resolvedId}-description` : void 0;
   const hasTextContent = label !== void 0 || description !== void 0;
-  const alignClassName = description ? "items-start" : "items-center";
+  const alignClassName2 = description ? "items-start" : "items-center";
   const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
   const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;
-  const toggleControl = /* @__PURE__ */ jsx38(
+  const toggleControl = /* @__PURE__ */ jsx42(
     SwitchPrimitives2.Root,
     {
       id: resolvedId,
@@ -5639,7 +5974,7 @@ var Toggle = React36.forwardRef(function Toggle2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx42(
         SwitchPrimitives2.Thumb,
         {
           "data-slot": "toggle-thumb",
@@ -5651,19 +5986,19 @@ var Toggle = React36.forwardRef(function Toggle2({
   if (!hasTextContent) {
     return toggleControl;
   }
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       "data-slot": "toggle-container",
       className: selectionControlContainerClasses({
-        alignClassName,
+        alignClassName: alignClassName2,
         className: containerClassName,
         disabled
       }),
       children: [
         toggleControl,
-        /* @__PURE__ */ jsxs20("span", { className: selectionControlContentBaseClasses, children: [
-          label ? /* @__PURE__ */ jsx38("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsxs21("span", { className: selectionControlContentBaseClasses, children: [
+          label ? /* @__PURE__ */ jsx42("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx42(
             "span",
             {
               id: labelId,
@@ -5675,7 +6010,7 @@ var Toggle = React36.forwardRef(function Toggle2({
               })
             }
           ) }) : null,
-          description ? /* @__PURE__ */ jsx38(
+          description ? /* @__PURE__ */ jsx42(
             "span",
             {
               id: descriptionId,
@@ -5698,14 +6033,14 @@ var Toggle = React36.forwardRef(function Toggle2({
 Toggle.displayName = "Toggle";
 
 // src/components/tooltip.tsx
-import * as React37 from "react";
+import * as React41 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React37.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx39(
+var TooltipContent = React41.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx43(
     TooltipPrimitive.Content,
     {
       ref,
@@ -5729,13 +6064,13 @@ var TooltipContent = React37.forwardRef(function TooltipContent2({ className, si
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/theme/provider.tsx
-import * as React38 from "react";
+import * as React42 from "react";
 import {
   createWhitelabelTheme,
   defaultTheme,
   themeToCssVariables
 } from "@sofya-ds/tokens";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var SOFYA_FONT_LINKS = [
   {
     id: "preconnect-googleapis",
@@ -5755,7 +6090,7 @@ var SOFYA_FONT_LINKS = [
   }
 ];
 function useSofyaFontLinks() {
-  React38.useEffect(() => {
+  React42.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -5788,7 +6123,7 @@ function SofyaProvider({
   useSofyaFontLinks();
   const theme = createWhitelabelTheme(overrides ?? {}, preset);
   const cssVariables = themeToCssVariables(theme);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       "data-sofya-theme": theme.name,
@@ -5813,9 +6148,13 @@ import {
   resolveTheme,
   sofyaBrandPalette,
   sofyaColorPalette,
+  sofyaGapNames,
+  sofyaMeasureNames,
+  sofyaRhythmNames,
   sofyaSemanticColorHex,
-  sofyaSurfaceNames,
-  sofyaTextStyleNames,
+  sofyaSpaceNames,
+  sofyaSurfaceNames as sofyaSurfaceNames2,
+  sofyaTextStyleNames as sofyaTextStyleNames2,
   themePresetNames,
   themePresets,
   themeToCssVariables as themeToCssVariables2
@@ -5838,6 +6177,8 @@ export {
   CardHeader,
   CardTitle,
   Checkbox,
+  Cluster,
+  Container,
   Dialog,
   DialogBody,
   DialogCancel,
@@ -5850,6 +6191,7 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DocumentCard,
   Dropdown,
   DropdownSearch,
   Empty,
@@ -5859,6 +6201,7 @@ export {
   EmptyMedia,
   EmptyTitle,
   Icon,
+  Inline,
   Input,
   InputOTP,
   InputOTPGroup,
@@ -5883,6 +6226,11 @@ export {
   PopoverTitle,
   PopoverTrigger,
   Progress,
+  ProseDialogBody,
+  ProseDialogContent,
+  ProseDialogDescription,
+  ProseDialogHeader,
+  ProseDialogTitle,
   REGEXP_ONLY_DIGITS,
   RadioGroup3 as RadioGroup,
   RadioGroupItem,
@@ -5891,6 +6239,7 @@ export {
   RadioGroupOptionDescription,
   RadioGroupOptionIndicator,
   RadioGroupOptionLabel,
+  RightRailAction,
   ScrollArea,
   ScrollAreaCorner,
   ScrollAreaScrollbar,
@@ -5910,6 +6259,7 @@ export {
   Slider,
   SofyaProvider,
   Spinner,
+  Stack,
   Surface,
   Switch,
   Table,
@@ -5918,6 +6268,8 @@ export {
   TableBody,
   TableCaption,
   TableCell,
+  TableCellDescription,
+  TableCellTitle,
   TableFooter,
   TableHead,
   TableHeader,
@@ -5980,10 +6332,15 @@ export {
   selectSizeOptions,
   sofyaBrandPalette,
   sofyaColorPalette,
+  sofyaGapNames,
+  sofyaMeasureNames,
+  sofyaRhythmNames,
   sofyaSemanticColorHex,
-  sofyaSurfaceNames,
-  sofyaTextStyleNames,
+  sofyaSpaceNames,
+  sofyaSurfaceNames2 as sofyaSurfaceNames,
+  sofyaTextStyleNames2 as sofyaTextStyleNames,
   spinnerSizeOptions,
+  surfaceVariantOptions,
   switchSizeOptions,
   tableActionToneOptions,
   tableCellVariantOptions,