@sofya-ds/react 1.7.0 → 1.8.0

package/dist/index.cjs

@@ -47,6 +47,8 @@ __export(index_exports, {
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
   Checkbox: () => Checkbox,
+  Cluster: () => Cluster,
+  Container: () => Container,
   Dialog: () => Dialog,
   DialogBody: () => DialogBody,
   DialogCancel: () => DialogCancel,
@@ -59,6 +61,7 @@ __export(index_exports, {
   DialogPortal: () => DialogPortal,
   DialogTitle: () => DialogTitle,
   DialogTrigger: () => DialogTrigger,
+  DocumentCard: () => DocumentCard,
   Dropdown: () => Dropdown,
   DropdownSearch: () => DropdownSearch,
   Empty: () => Empty,
@@ -68,6 +71,7 @@ __export(index_exports, {
   EmptyMedia: () => EmptyMedia,
   EmptyTitle: () => EmptyTitle,
   Icon: () => Icon,
+  Inline: () => Inline,
   Input: () => Input,
   InputOTP: () => InputOTP,
   InputOTPGroup: () => InputOTPGroup,
@@ -92,6 +96,11 @@ __export(index_exports, {
   PopoverTitle: () => PopoverTitle,
   PopoverTrigger: () => PopoverTrigger,
   Progress: () => Progress,
+  ProseDialogBody: () => ProseDialogBody,
+  ProseDialogContent: () => ProseDialogContent,
+  ProseDialogDescription: () => ProseDialogDescription,
+  ProseDialogHeader: () => ProseDialogHeader,
+  ProseDialogTitle: () => ProseDialogTitle,
   REGEXP_ONLY_DIGITS: () => import_input_otp.REGEXP_ONLY_DIGITS,
   RadioGroup: () => RadioGroup3,
   RadioGroupItem: () => RadioGroupItem,
@@ -100,6 +109,7 @@ __export(index_exports, {
   RadioGroupOptionDescription: () => RadioGroupOptionDescription,
   RadioGroupOptionIndicator: () => RadioGroupOptionIndicator,
   RadioGroupOptionLabel: () => RadioGroupOptionLabel,
+  RightRailAction: () => RightRailAction,
   ScrollArea: () => ScrollArea,
   ScrollAreaCorner: () => ScrollAreaCorner,
   ScrollAreaScrollbar: () => ScrollAreaScrollbar,
@@ -119,6 +129,7 @@ __export(index_exports, {
   Slider: () => Slider,
   SofyaProvider: () => SofyaProvider,
   Spinner: () => Spinner,
+  Stack: () => Stack,
   Surface: () => Surface,
   Switch: () => Switch,
   Table: () => Table,
@@ -152,21 +163,21 @@ __export(index_exports, {
   badgePillVariants: () => badgePillVariants,
   badgeVariantOptions: () => badgeVariantOptions,
   badgeVariants: () => badgeVariants,
-  brandPaletteToCssVariables: () => import_tokens2.brandPaletteToCssVariables,
+  brandPaletteToCssVariables: () => import_tokens4.brandPaletteToCssVariables,
   buttonLanguageLocaleOptions: () => buttonLanguageLocaleOptions,
   buttonSizeOptions: () => buttonSizeOptions,
   buttonVariantOptions: () => buttonVariantOptions,
   buttonVariants: () => buttonVariants,
   cardVariants: () => cardVariants,
-  createWhitelabelTheme: () => import_tokens2.createWhitelabelTheme,
-  defaultTheme: () => import_tokens2.defaultTheme,
+  createWhitelabelTheme: () => import_tokens4.createWhitelabelTheme,
+  defaultTheme: () => import_tokens4.defaultTheme,
   dropdownAppearanceOptions: () => dropdownAppearanceOptions,
   dropdownLanguageItems: () => dropdownLanguageItems,
   dropdownTriggerSizeOptions: () => dropdownTriggerSizeOptions,
   dropdownVariantOptions: () => dropdownVariantOptions,
   emptyMediaVariantOptions: () => emptyMediaVariantOptions,
-  gradientToCss: () => import_tokens2.gradientToCss,
-  hexToHslChannels: () => import_tokens2.hexToHslChannels,
+  gradientToCss: () => import_tokens4.gradientToCss,
+  hexToHslChannels: () => import_tokens4.hexToHslChannels,
   iconColorOptions: () => iconColorOptions,
   iconNames: () => iconNames,
   iconSizeMap: () => iconSizeMap,
@@ -175,24 +186,29 @@ __export(index_exports, {
   isTextContent: () => isTextContent,
   logoSizeOptions: () => logoSizeOptions,
   logoVariants: () => logoVariants,
-  mergeTheme: () => import_tokens2.mergeTheme,
+  mergeTheme: () => import_tokens4.mergeTheme,
   notificationVariantOptions: () => notificationVariantOptions,
   paginationLinkVariants: () => paginationLinkVariants,
   progressSizeOptions: () => progressSizeOptions,
   radioGroupOrientationOptions: () => radioGroupOrientationOptions,
   radioGroupVariantOptions: () => radioGroupVariantOptions,
   renderTextContent: () => renderTextContent,
-  resolveSurfaceToken: () => import_tokens2.resolveSurfaceToken,
-  resolveTextStyle: () => import_tokens2.resolveTextStyle,
-  resolveTheme: () => import_tokens2.resolveTheme,
+  resolveSurfaceToken: () => import_tokens4.resolveSurfaceToken,
+  resolveTextStyle: () => import_tokens4.resolveTextStyle,
+  resolveTheme: () => import_tokens4.resolveTheme,
   scrollAreaOrientationOptions: () => scrollAreaOrientationOptions,
   selectSizeOptions: () => selectSizeOptions,
-  sofyaBrandPalette: () => import_tokens2.sofyaBrandPalette,
-  sofyaColorPalette: () => import_tokens2.sofyaColorPalette,
-  sofyaSemanticColorHex: () => import_tokens2.sofyaSemanticColorHex,
-  sofyaSurfaceNames: () => import_tokens2.sofyaSurfaceNames,
-  sofyaTextStyleNames: () => import_tokens2.sofyaTextStyleNames,
+  sofyaBrandPalette: () => import_tokens4.sofyaBrandPalette,
+  sofyaColorPalette: () => import_tokens4.sofyaColorPalette,
+  sofyaGapNames: () => import_tokens4.sofyaGapNames,
+  sofyaMeasureNames: () => import_tokens4.sofyaMeasureNames,
+  sofyaRhythmNames: () => import_tokens4.sofyaRhythmNames,
+  sofyaSemanticColorHex: () => import_tokens4.sofyaSemanticColorHex,
+  sofyaSpaceNames: () => import_tokens4.sofyaSpaceNames,
+  sofyaSurfaceNames: () => import_tokens4.sofyaSurfaceNames,
+  sofyaTextStyleNames: () => import_tokens4.sofyaTextStyleNames,
   spinnerSizeOptions: () => spinnerSizeOptions,
+  surfaceVariantOptions: () => surfaceVariantOptions,
   switchSizeOptions: () => switchSizeOptions,
   tableActionToneOptions: () => tableActionToneOptions,
   tableCellVariantOptions: () => tableCellVariantOptions,
@@ -200,9 +216,9 @@ __export(index_exports, {
   textSizeOptions: () => textSizeOptions,
   textSplitTypeOptions: () => textSplitTypeOptions,
   textVariantOptions: () => textVariantOptions,
-  themePresetNames: () => import_tokens2.themePresetNames,
-  themePresets: () => import_tokens2.themePresets,
-  themeToCssVariables: () => import_tokens2.themeToCssVariables,
+  themePresetNames: () => import_tokens4.themePresetNames,
+  themePresets: () => import_tokens4.themePresets,
+  themeToCssVariables: () => import_tokens4.themeToCssVariables,
   toast: () => import_sonner.toast,
   uploadKindOptions: () => uploadKindOptions
 });
@@ -561,19 +577,47 @@ Icon.displayName = "Icon";
 
 // src/components/text.tsx
 var React3 = __toESM(require("react"), 1);
+var import_tokens = require("@sofya-ds/tokens");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var textSizeOptions = ["h1", "h2", "h3", "h4", "h5", "body", "tiny", "extra-tiny"];
+var textSizeOptions = import_tokens.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) => [
@@ -1723,27 +1767,24 @@ Button.displayName = "Button";
 // src/components/surface.tsx
 var React9 = __toESM(require("react"), 1);
 var import_react_slot2 = require("@radix-ui/react-slot");
+var import_tokens2 = require("@sofya-ds/tokens");
 var import_jsx_runtime9 = require("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 = import_tokens2.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 ? import_react_slot2.Slot : as ?? "div";
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1752,7 +1793,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
     }
   );
@@ -1829,13 +1870,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
   );
@@ -1859,13 +1900,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__ */ (0, import_jsx_runtime11.jsxs)(
       "label",
       {
         htmlFor: resolvedId,
         className: selectionControlContainerClasses({
-          alignClassName,
+          alignClassName: alignClassName2,
           className,
           disabled
         }),
@@ -3585,13 +3626,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__ */ (0, import_jsx_runtime20.jsx)(DialogInternalContext.Provider, { value: { showCloseButton }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogPortal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogOverlay, { className: overlayClassName }),
@@ -3697,10 +3741,73 @@ var DialogDescription = React19.forwardRef(({ children, className, ...props }, r
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-// src/components/empty.tsx
+// src/components/document-card.tsx
 var React20 = __toESM(require("react"), 1);
-var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime21.jsxs)(
+      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__ */ (0, import_jsx_runtime21.jsx)(
+            "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__ */ (0, import_jsx_runtime21.jsxs)("span", { "data-slot": "document-card-content", className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { as: "span", size: "label-md", className: "block truncate text-foreground", children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { as: "span", size: "caption", className: "block truncate text-muted-foreground", children: description }) : null,
+            meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { as: "span", size: "caption", className: "block truncate text-muted-foreground", children: meta }) : null
+          ] }),
+          actions ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "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
+var React21 = __toESM(require("react"), 1);
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var emptyMediaVariantOptions = ["default", "icon"];
 var emptyMediaVariants = (0, import_class_variance_authority5.cva)(
   "inline-flex shrink-0 items-center justify-center transition-[background-color,border-color,color,box-shadow] duration-sofya ease-sofya",
@@ -3716,11 +3823,11 @@ var emptyMediaVariants = (0, import_class_variance_authority5.cva)(
     }
   }
 );
-var EmptyMedia = React20.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
+var EmptyMedia = React21.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
 });
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: cn("flex max-w-[34rem] flex-col items-center gap-4 text-center", className),
@@ -3729,7 +3836,7 @@ function EmptyHeader({ className, ...props }) {
   );
 }
 function EmptyTitle({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "h2",
     {
       className: cn("text-foreground", className),
@@ -3747,7 +3854,7 @@ function EmptyDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "p",
     {
       className: cn("max-w-full text-muted-foreground whitespace-nowrap", className),
@@ -3761,7 +3868,7 @@ function EmptyDescription({
   );
 }
 function EmptyContent({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: cn("flex flex-wrap items-center justify-center gap-4 text-center", className),
@@ -3772,9 +3879,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__ */ (0, import_jsx_runtime21.jsx)(
+var Empty = React21.forwardRef(function Empty2({ children, className, content, description, media, title, ...props }, ref) {
+  const hasCustomChildren = React21.Children.count(children) > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref,
@@ -3783,13 +3890,13 @@ var Empty = React20.forwardRef(function Empty2({ children, className, content, d
         className
       ),
       ...props,
-      children: hasCustomChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(EmptyHeader, { children: [
-          media ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "folders", size: 28 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EmptyTitle, { children: title ?? "Nada por aqui" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EmptyDescription, { children: description ?? "Quando houver conte\xFAdo dispon\xEDvel, ele aparecer\xE1 aqui." })
+      children: hasCustomChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(EmptyHeader, { children: [
+          media ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "folders", size: 28 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyTitle, { children: title ?? "Nada por aqui" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyDescription, { children: description ?? "Quando houver conte\xFAdo dispon\xEDvel, ele aparecer\xE1 aqui." })
         ] }),
-        content !== void 0 && content !== null ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EmptyContent, { children: content }) : null
+        content !== void 0 && content !== null ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyContent, { children: content }) : null
       ] })
     }
   );
@@ -3802,11 +3909,11 @@ EmptyDescription.displayName = "EmptyDescription";
 EmptyContent.displayName = "EmptyContent";
 
 // src/components/label.tsx
-var React21 = __toESM(require("react"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Label = React21.forwardRef(
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Label = React22.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "label",
       {
         ref,
@@ -3829,11 +3936,109 @@ var Label = React21.forwardRef(
 );
 Label.displayName = "Label";
 
+// src/components/layout.tsx
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime24 = require("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__ */ (0, import_jsx_runtime24.jsx)(
+    "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__ */ (0, import_jsx_runtime24.jsx)(
+    "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__ */ (0, import_jsx_runtime24.jsx)(
+    "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__ */ (0, import_jsx_runtime24.jsx)(
+      "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
-var React22 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var linkVariants = (0, import_class_variance_authority6.cva)(
   "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",
   {
@@ -3848,9 +4053,9 @@ var linkVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-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 ? import_react_slot3.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Component,
     {
       ref,
@@ -3868,7 +4073,7 @@ var Link = React22.forwardRef(function Link2({ asChild = false, children, classN
 Link.displayName = "Link";
 
 // src/components/logo.tsx
-var React23 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 
 // src/components/logo-data.ts
 var logoAssets = {
@@ -3965,7 +4170,7 @@ var logoAssets = {
 };
 
 // src/components/logo.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var logoVariants = ["mono", "default", "text", "full"];
 var logoSizeOptions = ["sm", "md", "lg", "xl", "2xl"];
 var logoSizeScale = {
@@ -4001,7 +4206,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,
@@ -4012,10 +4217,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__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "svg",
     {
       ref,
@@ -4030,8 +4235,8 @@ var Logo = React23.forwardRef(function Logo2({
       focusable: "false",
       ...props,
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("title", { id: titleId, children: title }) : null,
-        asset.paths.map((path, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("title", { id: titleId, children: title }) : null,
+        asset.paths.map((path, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "path",
           {
             d: path.d,
@@ -4063,7 +4268,7 @@ var inheritedTypographyStyle = {
 };
 
 // src/components/pagination.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var paginationLinkVariants = (0, import_class_variance_authority7.cva)(
   "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",
   {
@@ -4084,7 +4289,7 @@ var paginationLinkVariants = (0, import_class_variance_authority7.cva)(
   }
 );
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "nav",
     {
       "aria-label": "Pagination",
@@ -4097,7 +4302,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "ul",
     {
       className: cn(
@@ -4109,7 +4314,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: cn("list-none", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { className: cn("list-none", className), ...props });
 }
 function PaginationLink({
   asChild = false,
@@ -4119,7 +4324,7 @@ function PaginationLink({
   ...props
 }) {
   const Component = asChild ? import_react_slot4.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Component,
     {
       "aria-current": isActive ? "page" : void 0,
@@ -4129,25 +4334,25 @@ function PaginationLink({
   );
 }
 function PaginationChevronLeft() {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_react6.IconChevronLeft, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons_react6.IconChevronLeft, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
 }
 function PaginationChevronRight() {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons_react6.IconChevronRight, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons_react6.IconChevronRight, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
 }
 function PaginationPrevious({
   className,
   text = "Previous",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
       className: cn("gap-2 px-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PaginationChevronLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hidden sm:block", children: renderTextContent(text, {
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PaginationChevronLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hidden sm:block", children: renderTextContent(text, {
           as: "span",
           className: "block text-inherit",
           size: "body",
@@ -4162,20 +4367,20 @@ function PaginationNext({
   text = "Next",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to next page",
       className: cn("gap-2 px-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hidden sm:block", children: renderTextContent(text, {
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hidden sm:block", children: renderTextContent(text, {
           as: "span",
           className: "block text-inherit",
           size: "body",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PaginationChevronRight, {})
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PaginationChevronRight, {})
       ]
     }
   );
@@ -4184,7 +4389,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "span",
     {
       "aria-hidden": "true",
@@ -4194,22 +4399,90 @@ function PaginationEllipsis({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: renderTextContent("...", {
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: renderTextContent("...", {
           as: "span",
           className: "block text-inherit",
           size: "h5",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
+// src/components/prose-dialog.tsx
+var React26 = __toESM(require("react"), 1);
+var import_jsx_runtime28 = require("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__ */ (0, import_jsx_runtime28.jsx)(
+      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__ */ (0, import_jsx_runtime28.jsx)(DialogHeader, { "data-slot": "prose-dialog-header", ...props });
+}
+ProseDialogHeader.displayName = "ProseDialogHeader";
+var ProseDialogTitle = React26.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogTitle, { ref, "data-slot": "prose-dialog-title", ...props }));
+ProseDialogTitle.displayName = "ProseDialogTitle";
+var ProseDialogDescription = React26.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogDescription, { ref, "data-slot": "prose-dialog-description", ...props }));
+ProseDialogDescription.displayName = "ProseDialogDescription";
+var ProseDialogBody = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  "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
-var React24 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var progressSizeOptions = ["sm", "default", "lg"];
 function clampProgressValue(value, max) {
   if (Number.isNaN(value)) {
@@ -4217,7 +4490,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,
@@ -4228,7 +4501,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__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     ProgressPrimitive.Root,
     {
       ref,
@@ -4241,7 +4514,7 @@ var Progress = React24.forwardRef(function Progress2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
@@ -4258,19 +4531,19 @@ var Progress = React24.forwardRef(function Progress2({
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/radio-group.tsx
-var React25 = __toESM(require("react"), 1);
+var React28 = __toESM(require("react"), 1);
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("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__ */ (0, import_jsx_runtime27.jsx)(RadioGroupContext.Provider, { value: { variant }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var RadioGroupRoot = React28.forwardRef(function RadioGroup2({ className, variant = "default", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioGroupContext.Provider, { value: { variant }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     RadioGroupPrimitive.Root,
     {
       ref,
@@ -4286,7 +4559,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,
@@ -4298,14 +4571,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__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RadioGroupPrimitive.Item,
       {
         ref,
@@ -4320,8 +4593,8 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
           className
         ),
         ...props,
-        children: label || description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "grid justify-items-center gap-1 text-center", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        children: label || description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "grid justify-items-center gap-1 text-center", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "span",
             {
               id: labelId,
@@ -4336,7 +4609,7 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
               })
             }
           ) : null,
-          description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "span",
             {
               id: descriptionId,
@@ -4355,16 +4628,16 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "label",
     {
       className: selectionControlContainerClasses({
-        alignClassName,
+        alignClassName: alignClassName2,
         className,
         disabled
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           RadioGroupPrimitive.Item,
           {
             ref,
@@ -4380,7 +4653,7 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
               controlClassName
             ),
             ...props,
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "span",
               {
                 "data-slot": "radio-group-indicator",
@@ -4392,8 +4665,8 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
             ) })
           }
         ),
-        label || description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        label || description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "span",
             {
               id: labelId,
@@ -4408,7 +4681,7 @@ var RadioGroupItem = React25.forwardRef(function RadioGroupItem2({
               })
             }
           ) : null,
-          description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "span",
             {
               id: descriptionId,
@@ -4429,7 +4702,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,
@@ -4439,7 +4712,7 @@ var RadioGroupOptionAvatar = React25.forwardRef(function RadioGroupOptionAvatar2
   src,
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       ref,
@@ -4449,7 +4722,7 @@ var RadioGroupOptionAvatar = React25.forwardRef(function RadioGroupOptionAvatar2
         className
       ),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Avatar,
         {
           ...avatarProps,
@@ -4466,9 +4739,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__ */ (0, import_jsx_runtime27.jsx)(
+var RadioGroupOptionLabel = React28.forwardRef(function RadioGroupOptionLabel2({ children, className, ...props }, ref) {
+  const { labelId } = React28.useContext(RadioGroupOptionContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       ref,
@@ -4488,9 +4761,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__ */ (0, import_jsx_runtime27.jsx)(
+var RadioGroupOptionDescription = React28.forwardRef(function RadioGroupOptionDescription2({ children, className, ...props }, ref) {
+  const { descriptionId } = React28.useContext(RadioGroupOptionContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       ref,
@@ -4509,8 +4782,8 @@ var RadioGroupOptionDescription = React25.forwardRef(function RadioGroupOptionDe
   );
 });
 RadioGroupOptionDescription.displayName = "RadioGroupOptionDescription";
-var RadioGroupOptionIndicator = React25.forwardRef(function RadioGroupOptionIndicator2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var RadioGroupOptionIndicator = React28.forwardRef(function RadioGroupOptionIndicator2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       ref,
@@ -4520,7 +4793,7 @@ var RadioGroupOptionIndicator = React25.forwardRef(function RadioGroupOptionIndi
         className
       ),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "svg",
         {
           "aria-hidden": "true",
@@ -4528,7 +4801,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__ */ (0, import_jsx_runtime27.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "path",
             {
               d: "M9.55 17.6537L4.2155 12.3192L5.2845 11.25L9.55 15.5155L18.7155 6.35L19.7845 7.41925L9.55 17.6537Z",
@@ -4542,14 +4815,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;
@@ -4564,7 +4837,7 @@ var RadioGroupOption = React25.forwardRef(function RadioGroupOption2({ children,
     }
     contentChildren.push(child);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioGroupOptionContext.Provider, { value: { descriptionId, labelId }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioGroupOptionContext.Provider, { value: { descriptionId, labelId }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -4584,7 +4857,7 @@ var RadioGroupOption = React25.forwardRef(function RadioGroupOption2({ children,
       ...props,
       children: [
         leadingChildren,
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "span",
           {
             "data-slot": "radio-group-option-content",
@@ -4592,7 +4865,7 @@ var RadioGroupOption = React25.forwardRef(function RadioGroupOption2({ children,
             children: contentChildren
           }
         ),
-        indicatorChild ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioGroupOptionIndicator, {})
+        indicatorChild ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioGroupOptionIndicator, {})
       ]
     }
   ) });
@@ -4608,13 +4881,37 @@ var RadioGroup3 = Object.assign(RadioGroupRoot, {
   OptionLabel: RadioGroupOptionLabel
 });
 
+// src/components/right-rail-action.tsx
+var React29 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var RightRailAction = React29.forwardRef(
+  ({ active = false, className, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    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
-var React26 = __toESM(require("react"), 1);
+var React30 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var scrollAreaOrientationOptions = ["horizontal", "vertical"];
-var ScrollArea = React26.forwardRef(function ScrollArea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var ScrollArea = React30.forwardRef(function ScrollArea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ScrollAreaPrimitive.Root,
     {
       ref,
@@ -4625,8 +4922,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__ */ (0, import_jsx_runtime28.jsx)(
+var ScrollAreaViewport = React30.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ScrollAreaPrimitive.Viewport,
     {
       ref,
@@ -4640,8 +4937,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__ */ (0, import_jsx_runtime28.jsx)(
+var ScrollAreaScrollbar = React30.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ScrollAreaPrimitive.Scrollbar,
     {
       ref,
@@ -4652,7 +4949,7 @@ var ScrollAreaScrollbar = React26.forwardRef(function ScrollAreaScrollbar2({ cla
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         ScrollAreaPrimitive.Thumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -4666,8 +4963,8 @@ var ScrollAreaScrollbar = React26.forwardRef(function ScrollAreaScrollbar2({ cla
   );
 });
 ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
-var ScrollAreaCorner = React26.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var ScrollAreaCorner = React30.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ScrollAreaPrimitive.Corner,
     {
       ref,
@@ -4680,19 +4977,19 @@ var ScrollAreaCorner = React26.forwardRef(function ScrollAreaCorner2({ className
 ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
 
 // src/components/select.tsx
-var React27 = __toESM(require("react"), 1);
+var React31 = __toESM(require("react"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
 
 // 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
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("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__ */ (0, import_jsx_runtime29.jsx)(
+var SelectValue = React31.forwardRef(function SelectValue2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Text,
     {
       ref,
@@ -4701,13 +4998,13 @@ var SelectValue = React27.forwardRef(function SelectValue2({ className, ...props
       className: cn("block truncate text-inherit", className),
       size: "tiny",
       style: inheritedTypographyStyle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectPrimitive.Value, { className: "block truncate", ...props })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(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__ */ (0, import_jsx_runtime29.jsxs)(
+var SelectTrigger = React31.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     SelectPrimitive.Trigger,
     {
       ref,
@@ -4721,7 +5018,7 @@ var SelectTrigger = React27.forwardRef(function SelectTrigger2({ className, chil
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Icon,
           {
             name: "caret-down",
@@ -4734,8 +5031,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__ */ (0, import_jsx_runtime29.jsx)(
+var SelectScrollUpButton = React31.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     SelectPrimitive.ScrollUpButton,
     {
       ref,
@@ -4745,13 +5042,13 @@ var SelectScrollUpButton = React27.forwardRef(function SelectScrollUpButton2({ c
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "caret-up", size: 12 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "caret-up", size: 12 })
     }
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var SelectScrollDownButton = React31.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     SelectPrimitive.ScrollDownButton,
     {
       ref,
@@ -4761,13 +5058,13 @@ var SelectScrollDownButton = React27.forwardRef(function SelectScrollDownButton2
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "caret-down", size: 12 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(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__ */ (0, import_jsx_runtime29.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+var SelectContent = React31.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     SelectPrimitive.Content,
     {
       ref,
@@ -4780,8 +5077,8 @@ var SelectContent = React27.forwardRef(function SelectContent2({ className, chil
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           SelectPrimitive.Viewport,
           {
             "data-slot": "select-viewport",
@@ -4789,14 +5086,14 @@ var SelectContent = React27.forwardRef(function SelectContent2({ className, chil
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectScrollDownButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectScrollDownButton, {})
       ]
     }
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React27.forwardRef(function SelectLabel2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var SelectLabel = React31.forwardRef(function SelectLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     SelectPrimitive.Label,
     {
       ref,
@@ -4818,8 +5115,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__ */ (0, import_jsx_runtime29.jsxs)(
+var SelectItem = React31.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     SelectPrimitive.Item,
     {
       ref,
@@ -4830,20 +5127,20 @@ var SelectItem = React27.forwardRef(function SelectItem2({ className, children,
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
           as: "span",
           className: "block truncate text-[color:var(--sofya-text-default)]",
           size: "tiny",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "check", size: 14 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "check", size: 14 }) }) })
       ]
     }
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React27.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var SelectSeparator = React31.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     SelectPrimitive.Separator,
     {
       ref,
@@ -4856,11 +5153,11 @@ var SelectSeparator = React27.forwardRef(function SelectSeparator2({ className,
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/separator.tsx
-var React28 = __toESM(require("react"), 1);
+var React32 = __toESM(require("react"), 1);
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Separator2 = React28.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Separator2 = React32.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -4879,8 +5176,8 @@ var Separator2 = React28.forwardRef(function Separator3({ className, decorative
 Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/slider.tsx
-var React29 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var React33 = __toESM(require("react"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function clampSliderValue(value, min, max) {
   if (Number.isNaN(value)) {
     return min;
@@ -4905,7 +5202,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,
@@ -4928,7 +5225,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);
@@ -4937,7 +5234,7 @@ var Slider = React29.forwardRef(function Slider2({
     onChange: onValueChange,
     value
   });
-  React29.useEffect(() => {
+  React33.useEffect(() => {
     if (value !== void 0) {
       return;
     }
@@ -4984,14 +5281,14 @@ var Slider = React29.forwardRef(function Slider2({
     setControllableValue(nextValue);
     onChange?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       "data-slot": "slider",
       className: cn("grid w-full gap-2", className),
       children: [
-        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             FieldLabel,
             {
               htmlFor: inputId,
@@ -5002,8 +5299,8 @@ var Slider = React29.forwardRef(function Slider2({
               textClassName: "block min-w-0 text-[color:var(--sofya-text-default)]",
               children: label
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", {}),
-          showValue ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", {}),
+          showValue ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {
               className: cn(
@@ -5021,7 +5318,7 @@ var Slider = React29.forwardRef(function Slider2({
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             "data-slot": "slider-control",
@@ -5031,7 +5328,7 @@ var Slider = React29.forwardRef(function Slider2({
             ),
             style: controlStyle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "input",
                 {
                   ...props,
@@ -5048,7 +5345,7 @@ var Slider = React29.forwardRef(function Slider2({
                   style: inputBoundsStyle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "div",
                 {
                   "data-slot": "slider-track",
@@ -5059,7 +5356,7 @@ var Slider = React29.forwardRef(function Slider2({
                   style: trackBoundsStyle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "div",
                 {
                   "data-slot": "slider-range",
@@ -5070,7 +5367,7 @@ var Slider = React29.forwardRef(function Slider2({
                   style: rangeStyle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "div",
                 {
                   "data-slot": "slider-thumb",
@@ -5091,10 +5388,10 @@ var Slider = React29.forwardRef(function Slider2({
 Slider.displayName = "Slider";
 
 // src/components/skeleton.tsx
-var React30 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Skeleton = React30.forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var React34 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Skeleton = React34.forwardRef(function Skeleton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       ref,
@@ -5109,15 +5406,15 @@ var Skeleton = React30.forwardRef(function Skeleton2({ className, ...props }, re
 Skeleton.displayName = "Skeleton";
 
 // src/components/sonner.tsx
-var React31 = __toESM(require("react"), 1);
+var React35 = __toESM(require("react"), 1);
 var import_sonner = require("sonner");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var notificationVariantOptions = ["default", "success", "error", "warning"];
 function ToastStatusIcon({
   iconName,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "span",
     {
       "aria-hidden": "true",
@@ -5125,7 +5422,7 @@ function ToastStatusIcon({
         "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-sofya-sm",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: iconName, size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: iconName, size: 16 })
     }
   );
 }
@@ -5146,35 +5443,35 @@ var defaultToastClassNames = {
   loading: "border-border bg-card text-foreground"
 };
 var defaultToastIcons = {
-  success: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  success: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     ToastStatusIcon,
     {
       iconName: "check",
       className: "border-success/15 bg-success/12 text-success"
     }
   ),
-  error: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  error: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     ToastStatusIcon,
     {
       iconName: "x",
       className: "border-destructive/15 bg-destructive/12 text-destructive"
     }
   ),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  warning: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-warning/20 bg-warning/15 text-foreground"
     }
   ),
-  info: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  info: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-primary/15 bg-primary/10 text-primary"
     }
   ),
-  close: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "x", size: 12 })
+  close: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "x", size: 12 })
 };
 function mergeToastClassNames(overrides) {
   return {
@@ -5182,7 +5479,7 @@ function mergeToastClassNames(overrides) {
     ...overrides
   };
 }
-var Toaster = React31.forwardRef(
+var Toaster = React35.forwardRef(
   function Toaster2({
     className,
     closeButton = true,
@@ -5194,7 +5491,7 @@ var Toaster = React31.forwardRef(
     visibleToasts = 5,
     ...props
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_sonner.Toaster,
       {
         ref,
@@ -5224,9 +5521,9 @@ var Toaster = React31.forwardRef(
 Toaster.displayName = "Toaster";
 
 // src/components/switch.tsx
-var React32 = __toESM(require("react"), 1);
+var React36 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var switchSizeOptions = ["default", "sm"];
 var switchRootSizeClasses = {
   default: "h-6 w-11",
@@ -5236,7 +5533,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,
@@ -5251,16 +5548,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__ */ (0, import_jsx_runtime34.jsx)(
+    const switchControl = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       SwitchPrimitives.Root,
       {
         id: resolvedId,
@@ -5275,7 +5572,7 @@ var Switch = React32.forwardRef(
         "data-size": resolvedSize,
         ...props,
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -5289,19 +5586,19 @@ var Switch = React32.forwardRef(
     if (!hasTextContent) {
       return switchControl;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         "data-slot": "switch-container",
         className: selectionControlContainerClasses({
-          alignClassName,
+          alignClassName: alignClassName2,
           className: containerClassName,
           disabled
         }),
         children: [
           switchControl,
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
-            label ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
+            label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "span",
               {
                 id: labelId,
@@ -5316,7 +5613,7 @@ var Switch = React32.forwardRef(
                 })
               }
             ) }) : null,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "span",
               {
                 id: descriptionId,
@@ -5341,8 +5638,8 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
-var React33 = __toESM(require("react"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var React37 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var tableCellVariantOptions = ["default", "primary", "muted"];
 var tableStatusToneOptions = [
   "active",
@@ -5392,13 +5689,13 @@ var tableActionButtonVariants = (0, import_class_variance_authority8.cva)(
     }
   }
 );
-var Table = React33.forwardRef(function Table2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var Table = React37.forwardRef(function Table2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "table",
         {
           "data-slot": "table",
@@ -5413,8 +5710,8 @@ var Table = React33.forwardRef(function Table2({ className, ...props }, ref) {
     }
   );
 });
-var TableHeader = React33.forwardRef(function TableHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableHeader = React37.forwardRef(function TableHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "thead",
     {
       "data-slot": "table-header",
@@ -5427,8 +5724,8 @@ var TableHeader = React33.forwardRef(function TableHeader2({ className, ...props
     }
   );
 });
-var TableBody = React33.forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableBody = React37.forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "tbody",
     {
       "data-slot": "table-body",
@@ -5438,8 +5735,8 @@ var TableBody = React33.forwardRef(function TableBody2({ className, ...props },
     }
   );
 });
-var TableFooter = React33.forwardRef(function TableFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableFooter = React37.forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "tfoot",
     {
       "data-slot": "table-footer",
@@ -5452,8 +5749,8 @@ var TableFooter = React33.forwardRef(function TableFooter2({ className, ...props
     }
   );
 });
-var TableRow = React33.forwardRef(function TableRow2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableRow = React37.forwardRef(function TableRow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "tr",
     {
       "data-slot": "table-row",
@@ -5466,8 +5763,8 @@ var TableRow = React33.forwardRef(function TableRow2({ className, ...props }, re
     }
   );
 });
-var TableHead = React33.forwardRef(function TableHead2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableHead = React37.forwardRef(function TableHead2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "th",
     {
       "data-slot": "table-head",
@@ -5486,9 +5783,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__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "td",
       {
         "data-slot": "table-cell",
@@ -5512,8 +5809,8 @@ var TableCell = React33.forwardRef(
     );
   }
 );
-var TableCaption = React33.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableCaption = React37.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "caption",
     {
       "data-slot": "table-caption",
@@ -5538,7 +5835,7 @@ function TableStatusBadge({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Badge,
     {
       variant: "pill",
@@ -5553,8 +5850,8 @@ function TableStatusBadge({
     }
   );
 }
-var TableActionButton = React33.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableActionButton = React37.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Button,
     {
       ref,
@@ -5572,8 +5869,8 @@ var TableActionButton = React33.forwardRef(function TableActionButton2({ classNa
     }
   );
 });
-var TableActions = React33.forwardRef(function TableActions2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var TableActions = React37.forwardRef(function TableActions2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       ref,
@@ -5594,10 +5891,10 @@ TableActionButton.displayName = "TableActionButton";
 TableActions.displayName = "TableActions";
 
 // src/components/tabs.tsx
-var React34 = __toESM(require("react"), 1);
+var React38 = __toESM(require("react"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
 var import_react3 = require("motion/react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function resolveDefaultValue(items, defaultValue) {
   if (defaultValue) {
     return defaultValue;
@@ -5621,13 +5918,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__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -5635,7 +5932,7 @@ function Tabs({
       value: currentValue,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           TabsPrimitive.List,
           {
             "aria-label": "Subtelas navegaveis",
@@ -5646,7 +5943,7 @@ function Tabs({
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
-              return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                 TabsPrimitive.Trigger,
                 {
                   value: item.value,
@@ -5658,7 +5955,7 @@ function Tabs({
                     item.triggerClassName
                   ),
                   children: [
-                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       import_react3.motion.span,
                       {
                         "aria-hidden": "true",
@@ -5668,15 +5965,15 @@ function Tabs({
                         transition: { duration: 0.25, ease: "easeInOut" }
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
-                      item.loading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+                      item.loading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                         "span",
                         {
                           "aria-hidden": "true",
                           className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
                         }
                       ) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: renderTextContent(item.label, {
+                      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: renderTextContent(item.label, {
                         as: "span",
                         className: "block text-inherit",
                         size: "body"
@@ -5690,7 +5987,7 @@ function Tabs({
           }
         ),
         items.map(
-          (item) => item.content !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          (item) => item.content !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             TabsPrimitive.Content,
             {
               value: item.value,
@@ -5713,9 +6010,9 @@ function Tabs({
 Tabs.displayName = "Tabs";
 
 // src/components/textarea.tsx
-var React35 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Textarea = React35.forwardRef(
+var React39 = __toESM(require("react"), 1);
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Textarea = React39.forwardRef(
   ({
     className,
     containerClassName,
@@ -5725,10 +6022,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__ */ (0, import_jsx_runtime37.jsx)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "textarea",
       {
         className: cn(
@@ -5742,7 +6039,7 @@ var Textarea = React35.forwardRef(
         "aria-label": ariaLabel
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       FieldShell,
       {
         control,
@@ -5757,10 +6054,10 @@ var Textarea = React35.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/toggle.tsx
-var React36 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var Toggle = React36.forwardRef(function Toggle2({
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var Toggle = React40.forwardRef(function Toggle2({
   "aria-describedby": ariaDescribedBy,
   "aria-labelledby": ariaLabelledBy,
   className,
@@ -5773,15 +6070,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__ */ (0, import_jsx_runtime38.jsx)(
+  const toggleControl = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     SwitchPrimitives2.Root,
     {
       id: resolvedId,
@@ -5795,7 +6092,7 @@ var Toggle = React36.forwardRef(function Toggle2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         SwitchPrimitives2.Thumb,
         {
           "data-slot": "toggle-thumb",
@@ -5807,19 +6104,19 @@ var Toggle = React36.forwardRef(function Toggle2({
   if (!hasTextContent) {
     return toggleControl;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       "data-slot": "toggle-container",
       className: selectionControlContainerClasses({
-        alignClassName,
+        alignClassName: alignClassName2,
         className: containerClassName,
         disabled
       }),
       children: [
         toggleControl,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "span",
             {
               id: labelId,
@@ -5831,7 +6128,7 @@ var Toggle = React36.forwardRef(function Toggle2({
               })
             }
           ) }) : null,
-          description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "span",
             {
               id: descriptionId,
@@ -5854,14 +6151,14 @@ var Toggle = React36.forwardRef(function Toggle2({
 Toggle.displayName = "Toggle";
 
 // src/components/tooltip.tsx
-var React37 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("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__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TooltipContent = React41.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -5885,9 +6182,9 @@ var TooltipContent = React37.forwardRef(function TooltipContent2({ className, si
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/theme/provider.tsx
-var React38 = __toESM(require("react"), 1);
-var import_tokens = require("@sofya-ds/tokens");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var React42 = __toESM(require("react"), 1);
+var import_tokens3 = require("@sofya-ds/tokens");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var SOFYA_FONT_LINKS = [
   {
     id: "preconnect-googleapis",
@@ -5907,7 +6204,7 @@ var SOFYA_FONT_LINKS = [
   }
 ];
 function useSofyaFontLinks() {
-  React38.useEffect(() => {
+  React42.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -5930,7 +6227,7 @@ function useSofyaFontLinks() {
   }, []);
 }
 function SofyaProvider({
-  preset = import_tokens.defaultTheme,
+  preset = import_tokens3.defaultTheme,
   overrides,
   className,
   style,
@@ -5938,9 +6235,9 @@ function SofyaProvider({
   ...props
 }) {
   useSofyaFontLinks();
-  const theme = (0, import_tokens.createWhitelabelTheme)(overrides ?? {}, preset);
-  const cssVariables = (0, import_tokens.themeToCssVariables)(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const theme = (0, import_tokens3.createWhitelabelTheme)(overrides ?? {}, preset);
+  const cssVariables = (0, import_tokens3.themeToCssVariables)(theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       "data-sofya-theme": theme.name,
@@ -5953,7 +6250,7 @@ function SofyaProvider({
 }
 
 // src/index.ts
-var import_tokens2 = require("@sofya-ds/tokens");
+var import_tokens4 = require("@sofya-ds/tokens");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -5973,6 +6270,8 @@ var import_tokens2 = require("@sofya-ds/tokens");
   CardHeader,
   CardTitle,
   Checkbox,
+  Cluster,
+  Container,
   Dialog,
   DialogBody,
   DialogCancel,
@@ -5985,6 +6284,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DocumentCard,
   Dropdown,
   DropdownSearch,
   Empty,
@@ -5994,6 +6294,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   EmptyMedia,
   EmptyTitle,
   Icon,
+  Inline,
   Input,
   InputOTP,
   InputOTPGroup,
@@ -6018,6 +6319,11 @@ var import_tokens2 = require("@sofya-ds/tokens");
   PopoverTitle,
   PopoverTrigger,
   Progress,
+  ProseDialogBody,
+  ProseDialogContent,
+  ProseDialogDescription,
+  ProseDialogHeader,
+  ProseDialogTitle,
   REGEXP_ONLY_DIGITS,
   RadioGroup,
   RadioGroupItem,
@@ -6026,6 +6332,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   RadioGroupOptionDescription,
   RadioGroupOptionIndicator,
   RadioGroupOptionLabel,
+  RightRailAction,
   ScrollArea,
   ScrollAreaCorner,
   ScrollAreaScrollbar,
@@ -6045,6 +6352,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   Slider,
   SofyaProvider,
   Spinner,
+  Stack,
   Surface,
   Switch,
   Table,
@@ -6115,10 +6423,15 @@ var import_tokens2 = require("@sofya-ds/tokens");
   selectSizeOptions,
   sofyaBrandPalette,
   sofyaColorPalette,
+  sofyaGapNames,
+  sofyaMeasureNames,
+  sofyaRhythmNames,
   sofyaSemanticColorHex,
+  sofyaSpaceNames,
   sofyaSurfaceNames,
   sofyaTextStyleNames,
   spinnerSizeOptions,
+  surfaceVariantOptions,
   switchSizeOptions,
   tableActionToneOptions,
   tableCellVariantOptions,