npm - @sofya-ds/react - Versions diffs - 1.1.1 → 1.1.3 - Mend

@sofya-ds/react 1.1.1 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.cjs CHANGED Viewed

@@ -549,7 +549,7 @@ Icon.displayName = "Icon";
 // src/components/text.tsx
 var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var textSizeOptions = ["h1", "h2", "h3", "h4", "body", "tiny"];
+var textSizeOptions = ["h1", "h2", "h3", "h4", "h5", "body", "tiny"];
 var textVariantOptions = ["default", "gradient", "shiny", "split"];
 var textSplitTypeOptions = ["chars", "words", "words, chars"];
 var defaultElements = {
@@ -557,6 +557,7 @@ var defaultElements = {
   h2: "h2",
   h3: "h3",
   h4: "h4",
+  h5: "h5",
   body: "p",
   tiny: "span"
 };
@@ -779,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,
@@ -789,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)(
@@ -891,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,
@@ -911,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"
       })
     }
   );
@@ -932,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"
       })
     }
   );
@@ -1628,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"
       })
     }
   );
@@ -1647,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 }) {
@@ -1750,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,
@@ -1767,10 +1750,7 @@ var Checkbox = React8.forwardRef(
                 children: renderTextContent(description, {
                   as: "span",
                   className: "text-muted-foreground",
-                  size: "body",
-                  style: {
-                    lineHeight: "20px"
-                  }
+                  size: "body"
                 })
               }
             ) : null
@@ -1801,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)]",
@@ -1935,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"
             }) })
           }
         ) }),
@@ -1971,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
@@ -1989,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",
@@ -2011,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)(
@@ -2146,13 +2113,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"
     })
   }
 ));
@@ -2166,10 +2127,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"
     })
   }
 ));
@@ -2215,10 +2173,7 @@ function EmptyTitle({ children, className, ...props }) {
       children: renderTextContent(children, {
         as: "span",
         className: "block text-foreground",
-        size: "h2",
-        style: {
-          letterSpacing: "-0.02em"
-        }
+        size: "h2"
       })
     }
   );
@@ -2236,10 +2191,7 @@ function EmptyDescription({
       children: renderTextContent(children, {
         as: "span",
         className: "inline-block whitespace-nowrap text-muted-foreground",
-        size: "body",
-        style: {
-          lineHeight: "24px"
-        }
+        size: "body"
       })
     }
   );
@@ -2486,7 +2438,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",
       {
@@ -2498,11 +2450,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
           }
         })
       }
@@ -2534,19 +2484,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
         ]
       }
@@ -2901,20 +2845,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
         ]
       }
@@ -2945,9 +2882,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(
@@ -2957,12 +2892,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"
                 }
               ) })
             ] }),
@@ -3146,7 +3076,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,
@@ -3185,9 +3115,7 @@ var Label = React14.forwardRef(
           className: "block text-foreground",
           size: "body",
           style: {
-            fontSize: "14px",
-            fontWeight: 500,
-            lineHeight: 1
+            fontWeight: 500
           }
         })
       }
@@ -3413,8 +3341,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: {
@@ -3538,11 +3474,7 @@ function PaginationPrevious({
           as: "span",
           className: "block text-inherit",
           size: "body",
-          style: {
-            fontWeight: 500,
-            lineHeight: 1,
-            letterSpacing: "0.01em"
-          }
+          style: inheritTypographyStyle
         }) })
       ]
     }
@@ -3564,11 +3496,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, {})
       ]
@@ -3584,7 +3512,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,
@@ -3592,12 +3520,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" })
       ]
@@ -3649,12 +3573,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"
       })
     }
   );
@@ -3671,10 +3590,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"
       })
     }
   );
@@ -3817,12 +3733,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,
@@ -3834,10 +3745,7 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
               children: renderTextContent(description, {
                 as: "span",
                 className: "text-muted-foreground",
-                size: "body",
-                style: {
-                  lineHeight: "20px"
-                }
+                size: "body"
               })
             }
           ) : null
@@ -3923,6 +3831,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;
@@ -3956,7 +3872,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,
@@ -4066,7 +3982,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,
@@ -4075,9 +3991,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 }) }) })
       ]
@@ -4647,7 +4561,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
@@ -4674,13 +4588,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"
                       }) })
                     ] })
                   ]
@@ -4733,7 +4641,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,
@@ -4746,7 +4654,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",
         {
@@ -4758,11 +4666,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
             }
           })
         }
@@ -4796,9 +4702,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
         }
       })
     }