@sofya-ds/react 1.1.2 → 1.1.4

package/dist/index.cjs

@@ -780,7 +780,7 @@ var AccordionTrigger = React4.forwardRef(({ className, children, indicator, ...p
   {
     ref,
     className: cn(
-      "sofya-accordion-trigger flex flex-1 items-center justify-between gap-4 py-4 text-left text-[14px] font-medium leading-6 text-foreground transition-colors duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+      "sofya-accordion-trigger flex flex-1 items-center justify-between gap-4 py-4 text-left [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-foreground transition-colors duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
       className
     ),
     ...props,
@@ -790,8 +790,12 @@ var AccordionTrigger = React4.forwardRef(({ className, children, indicator, ...p
         className: "block text-foreground",
         size: "body",
         style: {
-          fontWeight: 500,
-          lineHeight: "24px"
+          color: "inherit",
+          fontFamily: "inherit",
+          fontSize: "inherit",
+          fontWeight: "inherit",
+          letterSpacing: "inherit",
+          lineHeight: "inherit"
         }
       }) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -892,7 +896,7 @@ var Alert = React5.forwardRef(function Alert2({
           "span",
           {
             "data-slot": "alert-icon",
-            className: "mt-0 inline-flex h-4 w-4 shrink-0 items-center justify-center text-current [&>svg]:h-4 [&>svg]:w-4",
+            className: "mt-2 inline-flex h-4 w-4 shrink-0 items-center justify-center text-current [&>svg]:h-4 [&>svg]:w-4",
             children: resolvedIcon
           }
         ) : null,
@@ -912,12 +916,7 @@ var AlertTitle = React5.forwardRef(function AlertTitle2({ children, className, .
       children: renderTextContent(children, {
         as: "span",
         className: "block text-current",
-        size: "h4",
-        style: {
-          fontWeight: 500,
-          lineHeight: "22px",
-          letterSpacing: "-0.02em"
-        }
+        size: "h4"
       })
     }
   );
@@ -933,10 +932,7 @@ var AlertDescription = React5.forwardRef(function AlertDescription2({ children,
       children: renderTextContent(children, {
         as: "span",
         className: "block text-current/80",
-        size: "body",
-        style: {
-          lineHeight: "24px"
-        }
+        size: "body"
       })
     }
   );
@@ -1629,13 +1625,7 @@ function CardTitle({ children, className, ...props }) {
       children: renderTextContent(children, {
         as: "span",
         className: "block text-card-foreground",
-        size: "h4",
-        style: {
-          fontSize: "1.25rem",
-          fontWeight: 600,
-          lineHeight: "1.75rem",
-          letterSpacing: "-0.025em"
-        }
+        size: "h4"
       })
     }
   );
@@ -1648,10 +1638,7 @@ function CardDescription({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cn("text-muted-foreground", className), ...props, children: renderTextContent(children, {
     as: "span",
     className: "block text-muted-foreground",
-    size: "body",
-    style: {
-      lineHeight: "20px"
-    }
+    size: "body"
   }) });
 }
 function CardContent({ children, className, ...props }) {
@@ -1751,12 +1738,7 @@ var Checkbox = React8.forwardRef(
                 children: renderTextContent(label, {
                   as: "span",
                   className: "text-[color:var(--sofya-text-default)]",
-                  size: "h4",
-                  style: {
-                    fontWeight: 400,
-                    lineHeight: "22px",
-                    letterSpacing: "-0.02em"
-                  }
+                  size: "body"
                 })
               }
             ) : null,
@@ -1768,10 +1750,7 @@ var Checkbox = React8.forwardRef(
                 children: renderTextContent(description, {
                   as: "span",
                   className: "text-muted-foreground",
-                  size: "body",
-                  style: {
-                    lineHeight: "20px"
-                  }
+                  size: "body"
                 })
               }
             ) : null
@@ -1802,7 +1781,7 @@ var dropdownTriggerClasses = {
   card: "h-12 rounded-[20px] px-6 py-2 text-primary",
   panel: "h-12 rounded-[10px] px-6 py-2 text-foreground",
   language: "",
-  selected: "h-10 w-full rounded-[10px] border-[color:var(--sofya-border-strong)] px-4 py-2 text-[14px] font-normal leading-[22px] tracking-[-0.02em]"
+  selected: "h-10 w-full rounded-[10px] border-[color:var(--sofya-border-strong)] px-4 py-2 [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)]"
 };
 var dropdownContentClasses = {
   card: "rounded-[20px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
@@ -1936,12 +1915,7 @@ function Dropdown({
             children: isLanguageVariant ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "min-w-0 truncate", children: renderTextContent(triggerLabel, {
               as: "span",
               className: "block min-w-0 truncate text-inherit",
-              size: "body",
-              style: {
-                fontWeight: 400,
-                lineHeight: "22px",
-                letterSpacing: isSelectedVariant ? "-0.02em" : 0
-              }
+              size: "body"
             }) })
           }
         ) }),
@@ -1972,7 +1946,7 @@ function Dropdown({
                       value: item.value,
                       disabled: item.disabled,
                       className: cn(
-                        "flex w-full cursor-pointer items-center rounded-[4px] text-[14px] font-normal leading-[normal] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+                        "flex w-full cursor-pointer items-center rounded-[4px] [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-[22px] tracking-[var(--sofya-text-body-letter-spacing)] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
                         usesDefaultListStyle ? "px-0 py-0 data-[highlighted]:bg-transparent [&[data-highlighted]_span[data-dropdown-item-body]]:bg-[color:var(--sofya-surface-selected)]" : "px-2 py-2 data-[highlighted]:bg-[color:var(--sofya-surface-hover)]",
                         dropdownItemClasses[variant],
                         itemClassName
@@ -1990,11 +1964,7 @@ function Dropdown({
                             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate", children: renderTextContent(item.label, {
                               as: "span",
                               className: "block truncate text-inherit",
-                              size: "body",
-                              style: {
-                                fontWeight: 400,
-                                lineHeight: "22px"
-                              }
+                              size: "body"
                             }) }),
                             isSelected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                               "span",
@@ -2012,11 +1982,7 @@ function Dropdown({
                           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate", children: renderTextContent(item.label, {
                             as: "span",
                             className: "block truncate text-inherit",
-                            size: "body",
-                            style: {
-                              fontWeight: 400,
-                              lineHeight: "22px"
-                            }
+                            size: "body"
                           }) })
                         ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2080,12 +2046,12 @@ var DialogContent = React10.forwardRef(
     };
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DialogPortal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         DialogPrimitive.Content,
         {
           ref,
           className: cn(
-            "sofya-dialog-content fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-[min(680px,calc(100%-2rem))] -translate-x-1/2 -translate-y-1/2 outline-none",
+            "sofya-dialog-content relative flex w-full max-w-[680px] max-h-[calc(100vh-2rem)] outline-none",
             className
           ),
           ...props,
@@ -2093,7 +2059,10 @@ var DialogContent = React10.forwardRef(
             Card,
             {
               variant: cardVariant,
-              className: cn("relative w-full overflow-hidden border-border bg-card", cardClassName),
+              className: cn(
+                "relative flex max-h-[inherit] min-h-0 w-full flex-col overflow-y-auto overflow-x-hidden border-border bg-card",
+                cardClassName
+              ),
               style: dialogCardStyle,
               children: [
                 children,
@@ -2114,7 +2083,7 @@ var DialogContent = React10.forwardRef(
             }
           )
         }
-      )
+      ) })
     ] });
   }
 );
@@ -2147,13 +2116,7 @@ var DialogTitle = React10.forwardRef(({ children, className, ...props }, ref) =>
     children: renderTextContent(children, {
       as: "span",
       className: "block text-card-foreground",
-      size: "h4",
-      style: {
-        fontSize: "1.25rem",
-        fontWeight: 600,
-        lineHeight: "1.75rem",
-        letterSpacing: "-0.025em"
-      }
+      size: "h4"
     })
   }
 ));
@@ -2167,10 +2130,7 @@ var DialogDescription = React10.forwardRef(({ children, className, ...props }, r
     children: renderTextContent(children, {
       as: "span",
       className: "block text-muted-foreground",
-      size: "body",
-      style: {
-        lineHeight: "24px"
-      }
+      size: "body"
     })
   }
 ));
@@ -2216,10 +2176,7 @@ function EmptyTitle({ children, className, ...props }) {
       children: renderTextContent(children, {
         as: "span",
         className: "block text-foreground",
-        size: "h2",
-        style: {
-          letterSpacing: "-0.02em"
-        }
+        size: "h2"
       })
     }
   );
@@ -2237,10 +2194,7 @@ function EmptyDescription({
       children: renderTextContent(children, {
         as: "span",
         className: "inline-block whitespace-nowrap text-muted-foreground",
-        size: "body",
-        style: {
-          lineHeight: "24px"
-        }
+        size: "body"
       })
     }
   );
@@ -2487,7 +2441,7 @@ function InputShell({
   if (!label && !containerClassName) {
     return control;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("grid w-full gap-4", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("grid w-full gap-2", containerClassName), children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "label",
       {
@@ -2499,11 +2453,9 @@ function InputShell({
         children: renderTextContent(label, {
           as: "span",
           className: "block text-[color:var(--sofya-text-default)]",
-          size: "h4",
+          size: "body",
           style: {
-            fontWeight: 500,
-            lineHeight: "22px",
-            letterSpacing: "-0.02em"
+            fontWeight: 500
           }
         })
       }
@@ -2535,19 +2487,13 @@ function UploadInputShell({
             className: "text-[color:var(--sofya-text-default)]",
             size: "body",
             style: {
-              fontWeight: 700,
-              lineHeight: "normal",
-              letterSpacing: "-0.02em"
+              fontWeight: 700
             }
           }),
           optionalLabel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(optionalLabel, {
             as: "span",
             className: "text-[color:var(--sofya-text-subtle)]",
-            size: "tiny",
-            style: {
-              fontWeight: 400,
-              lineHeight: "normal"
-            }
+            size: "tiny"
           }) }) : null
         ]
       }
@@ -2902,20 +2848,13 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
             className: "block text-[color:var(--sofya-text-default)]",
             size: "body",
             style: {
-              fontWeight: 500,
-              lineHeight: "normal",
-              letterSpacing: "-0.02em"
+              fontWeight: 500
             }
           }) }),
           resolvedDescription ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[color:var(--sofya-text-subtle)]", children: renderTextContent(resolvedDescription, {
             as: "span",
             className: "block text-[color:var(--sofya-text-subtle)]",
-            size: "tiny",
-            style: {
-              fontWeight: 500,
-              lineHeight: "normal",
-              letterSpacing: "-0.02em"
-            }
+            size: "tiny"
           }) }) : null
         ]
       }
@@ -2946,9 +2885,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
                 className: "block truncate text-[color:var(--sofya-text-default)]",
                 size: "body",
                 style: {
-                  fontWeight: 500,
-                  lineHeight: "normal",
-                  letterSpacing: "-0.02em"
+                  fontWeight: 500
                 }
               }) }),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(
@@ -2958,12 +2895,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
                 {
                   as: "span",
                   className: "block text-[color:var(--sofya-text-subtle)]",
-                  size: "tiny",
-                  style: {
-                    fontWeight: 500,
-                    lineHeight: "normal",
-                    letterSpacing: "-0.02em"
-                  }
+                  size: "tiny"
                 }
               ) })
             ] }),
@@ -3147,7 +3079,7 @@ var Input = React13.forwardRef((props, ref) => {
       ref,
       type: resolvedType,
       className: cn(
-        "flex h-10 w-full rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 py-2 text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus:border-transparent 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",
+        "flex h-10 w-full rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 py-2 [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 placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus:border-transparent 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",
         className
       ),
       ...nativeProps,
@@ -3186,9 +3118,7 @@ var Label = React14.forwardRef(
           className: "block text-foreground",
           size: "body",
           style: {
-            fontSize: "14px",
-            fontWeight: 500,
-            lineHeight: 1
+            fontWeight: 500
           }
         })
       }
@@ -3414,8 +3344,16 @@ Logo.displayName = "Logo";
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var inheritTypographyStyle = {
+  color: "inherit",
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  fontWeight: "inherit",
+  letterSpacing: "inherit",
+  lineHeight: "inherit"
+};
 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 text-[14px] font-medium leading-none tracking-[0.01em] text-[color:var(--sofya-text-soft)] no-underline transition-[transform,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
+  "inline-flex h-10 min-w-10 items-center justify-center rounded-full border border-transparent px-4 [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-medium leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-soft)] no-underline transition-[transform,background-color,border-color,color,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",
   {
     variants: {
       isActive: {
@@ -3539,11 +3477,7 @@ function PaginationPrevious({
           as: "span",
           className: "block text-inherit",
           size: "body",
-          style: {
-            fontWeight: 500,
-            lineHeight: 1,
-            letterSpacing: "0.01em"
-          }
+          style: inheritTypographyStyle
         }) })
       ]
     }
@@ -3565,11 +3499,7 @@ function PaginationNext({
           as: "span",
           className: "block text-inherit",
           size: "body",
-          style: {
-            fontWeight: 500,
-            lineHeight: 1,
-            letterSpacing: "0.01em"
-          }
+          style: inheritTypographyStyle
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaginationChevronRight, {})
       ]
@@ -3585,7 +3515,7 @@ function PaginationEllipsis({
     {
       "aria-hidden": "true",
       className: cn(
-        "flex h-10 w-10 items-center justify-center rounded-full text-[18px] leading-none text-[color:var(--sofya-text-subtle)]",
+        "flex h-10 w-10 items-center justify-center rounded-full [font-family:var(--sofya-text-h5-font-family)] text-[length:var(--sofya-text-h5-font-size)] [font-weight:var(--sofya-text-h5-font-weight)] leading-[var(--sofya-text-h5-line-height)] tracking-[var(--sofya-text-h5-letter-spacing)] text-[color:var(--sofya-text-subtle)]",
         className
       ),
       ...props,
@@ -3593,12 +3523,8 @@ function PaginationEllipsis({
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: renderTextContent("...", {
           as: "span",
           className: "block text-inherit",
-          size: "h4",
-          style: {
-            fontSize: "18px",
-            fontWeight: 400,
-            lineHeight: 1
-          }
+          size: "h5",
+          style: inheritTypographyStyle
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: "More pages" })
       ]
@@ -3650,12 +3576,7 @@ var PopoverTitle = React17.forwardRef(function PopoverTitle2({ children, classNa
       children: renderTextContent(children, {
         as: "span",
         className: "block text-[hsl(var(--sofya-popover-foreground))]",
-        size: "h4",
-        style: {
-          fontWeight: 600,
-          lineHeight: "24px",
-          letterSpacing: "-0.025em"
-        }
+        size: "h4"
       })
     }
   );
@@ -3672,10 +3593,7 @@ var PopoverDescription = React17.forwardRef(function PopoverDescription2({ child
       children: renderTextContent(children, {
         as: "span",
         className: "block text-muted-foreground",
-        size: "body",
-        style: {
-          lineHeight: "24px"
-        }
+        size: "body"
       })
     }
   );
@@ -3818,12 +3736,7 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
               children: renderTextContent(label, {
                 as: "span",
                 className: "text-[color:var(--sofya-text-default)]",
-                size: "h4",
-                style: {
-                  fontWeight: 400,
-                  lineHeight: "22px",
-                  letterSpacing: "-0.02em"
-                }
+                size: "body"
               })
             }
           ) : null,
@@ -3835,10 +3748,7 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
               children: renderTextContent(description, {
                 as: "span",
                 className: "text-muted-foreground",
-                size: "body",
-                style: {
-                  lineHeight: "20px"
-                }
+                size: "body"
               })
             }
           ) : null
@@ -3924,6 +3834,14 @@ ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
 var React21 = __toESM(require("react"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var inheritTypographyStyle2 = {
+  color: "inherit",
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  fontWeight: "inherit",
+  letterSpacing: "inherit",
+  lineHeight: "inherit"
+};
 var selectSizeOptions = ["default", "sm"];
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
@@ -3957,7 +3875,7 @@ var SelectTrigger = React21.forwardRef(function SelectTrigger2({ className, chil
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "flex w-full items-center justify-between gap-4 rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 text-left text-[16px] font-normal leading-[22px] tracking-[-0.02em] 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)] data-[size=default]:h-10 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-2 data-[size=sm]:text-[14px] data-[size=sm]:leading-5 [&>span]:line-clamp-1 [&>span]:flex-1",
+        "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)] data-[size=default]:h-10 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-2 data-[size=sm]:text-[14px] data-[size=sm]:leading-5 [&>span]:line-clamp-1 [&>span]:flex-1",
         className
       ),
       ...props,
@@ -4067,7 +3985,7 @@ var SelectItem = React21.forwardRef(function SelectItem2({ className, children,
       ref,
       "data-slot": "select-item",
       className: cn(
-        "relative flex min-w-0 cursor-pointer select-none items-center self-stretch rounded-[8px] px-4 py-2 pr-8 text-[14px] font-normal leading-5 text-[color:var(--sofya-text-default)] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-[color:var(--sofya-surface-hover)] data-[highlighted]:text-[color:var(--sofya-text-default)] data-[state=checked]:bg-[color:var(--sofya-surface-selected)]",
+        "relative flex min-w-0 cursor-pointer select-none items-center self-stretch rounded-[8px] px-4 py-2 pr-8 [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)] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-[color:var(--sofya-surface-hover)] data-[highlighted]:text-[color:var(--sofya-text-default)] data-[state=checked]:bg-[color:var(--sofya-surface-selected)]",
         className
       ),
       ...props,
@@ -4076,9 +3994,7 @@ var SelectItem = React21.forwardRef(function SelectItem2({ className, children,
           as: "span",
           className: "block truncate text-[color:var(--sofya-text-default)]",
           size: "body",
-          style: {
-            lineHeight: "20px"
-          }
+          style: inheritTypographyStyle2
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "check", size: 14 }) }) })
       ]
@@ -4648,7 +4564,7 @@ function Tabs({
                   value: item.value,
                   disabled: isUnavailable,
                   className: cn(
-                    "relative inline-flex min-h-[76px] shrink-0 items-center justify-center px-8 pb-4 pt-6 text-[18px] font-semibold leading-none tracking-[-0.01em] text-[color:var(--sofya-text-subtle)] transition-[color,opacity] duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:pointer-events-none disabled:text-[color:var(--sofya-text-placeholder)] data-[state=active]:text-primary",
+                    "relative inline-flex min-h-[76px] shrink-0 items-center justify-center px-8 pb-4 pt-6 [font-family:var(--sofya-text-h5-font-family)] text-[length:var(--sofya-text-h5-font-size)] [font-weight:var(--sofya-text-h5-font-weight)] leading-[var(--sofya-text-h5-line-height)] tracking-[var(--sofya-text-h5-letter-spacing)] text-[color:var(--sofya-text-subtle)] transition-[color,opacity] duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:pointer-events-none disabled:text-[color:var(--sofya-text-placeholder)] data-[state=active]:text-primary",
                     item.loading && "disabled:text-[color:var(--sofya-text-soft)]",
                     triggerClassName,
                     item.triggerClassName
@@ -4675,13 +4591,7 @@ function Tabs({
                       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: renderTextContent(item.label, {
                         as: "span",
                         className: "block text-inherit",
-                        size: "h4",
-                        style: {
-                          fontSize: "18px",
-                          fontWeight: 600,
-                          lineHeight: "18px",
-                          letterSpacing: "-0.01em"
-                        }
+                        size: "h5"
                       }) })
                     ] })
                   ]
@@ -4734,7 +4644,7 @@ var Textarea = React29.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-[120px] w-full resize-y rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 py-2 text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus: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-[color:var(--sofya-border-hover)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
+          "flex min-h-[120px] w-full resize-y rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 py-2 [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 placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus: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-[color:var(--sofya-border-hover)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
           className
         ),
         id: resolvedId,
@@ -4747,7 +4657,7 @@ var Textarea = React29.forwardRef(
     if (!label && !containerClassName) {
       return control;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("grid w-full gap-4", containerClassName), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("grid w-full gap-2", containerClassName), children: [
       label ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "label",
         {
@@ -4759,11 +4669,9 @@ var Textarea = React29.forwardRef(
           children: renderTextContent(label, {
             as: "span",
             className: "block text-[color:var(--sofya-text-default)]",
-            size: "h4",
+            size: "body",
             style: {
-              fontWeight: 500,
-              lineHeight: "22px",
-              letterSpacing: "-0.02em"
+              fontWeight: 500
             }
           })
         }
@@ -4797,9 +4705,7 @@ var TooltipContent = React30.forwardRef(function TooltipContent2({ className, si
         className: "block text-[color:var(--sofya-tooltip-foreground)]",
         size: "tiny",
         style: {
-          fontWeight: 500,
-          lineHeight: "16px",
-          letterSpacing: "0.01em"
+          fontWeight: 500
         }
       })
     }