npm - @sofya-ds/react - Versions diffs - 1.1.2 → 1.1.4 - Mend

@sofya-ds/react 1.1.2 → 1.1.4

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 (4) hide show

package/dist/index.js CHANGED Viewed

@@ -585,7 +585,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,
@@ -595,8 +595,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__ */ jsx4(
@@ -697,7 +701,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,
@@ -717,12 +721,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"
       })
     }
   );
@@ -738,10 +737,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"
       })
     }
   );
@@ -1434,13 +1430,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"
       })
     }
   );
@@ -1453,10 +1443,7 @@ function CardDescription({
   return /* @__PURE__ */ jsx9("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 }) {
@@ -1556,12 +1543,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,
@@ -1573,10 +1555,7 @@ var Checkbox = React8.forwardRef(
                 children: renderTextContent(description, {
                   as: "span",
                   className: "text-muted-foreground",
-                  size: "body",
-                  style: {
-                    lineHeight: "20px"
-                  }
+                  size: "body"
                 })
               }
             ) : null
@@ -1607,7 +1586,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)]",
@@ -1741,12 +1720,7 @@ function Dropdown({
             children: isLanguageVariant ? null : /* @__PURE__ */ jsx11("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"
             }) })
           }
         ) }),
@@ -1777,7 +1751,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
@@ -1795,11 +1769,7 @@ function Dropdown({
                             /* @__PURE__ */ jsx11("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__ */ jsx11(
                               "span",
@@ -1817,11 +1787,7 @@ function Dropdown({
                           /* @__PURE__ */ jsx11("span", { className: "truncate", children: renderTextContent(item.label, {
                             as: "span",
                             className: "block truncate text-inherit",
-                            size: "body",
-                            style: {
-                              fontWeight: 400,
-                              lineHeight: "22px"
-                            }
+                            size: "body"
                           }) })
                         ] }),
                         /* @__PURE__ */ jsx11(
@@ -1885,12 +1851,12 @@ var DialogContent = React10.forwardRef(
     };
     return /* @__PURE__ */ jsxs7(DialogPortal, { children: [
       /* @__PURE__ */ jsx12(DialogOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx12("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx12(
         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,
@@ -1898,7 +1864,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,
@@ -1919,7 +1888,7 @@ var DialogContent = React10.forwardRef(
             }
           )
         }
-      )
+      ) })
     ] });
   }
 );
@@ -1952,13 +1921,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"
     })
   }
 ));
@@ -1972,10 +1935,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"
     })
   }
 ));
@@ -2021,10 +1981,7 @@ function EmptyTitle({ children, className, ...props }) {
       children: renderTextContent(children, {
         as: "span",
         className: "block text-foreground",
-        size: "h2",
-        style: {
-          letterSpacing: "-0.02em"
-        }
+        size: "h2"
       })
     }
   );
@@ -2042,10 +1999,7 @@ function EmptyDescription({
       children: renderTextContent(children, {
         as: "span",
         className: "inline-block whitespace-nowrap text-muted-foreground",
-        size: "body",
-        style: {
-          lineHeight: "24px"
-        }
+        size: "body"
       })
     }
   );
@@ -2296,7 +2250,7 @@ function InputShell({
   if (!label && !containerClassName) {
     return control;
   }
-  return /* @__PURE__ */ jsxs10("div", { className: cn("grid w-full gap-4", containerClassName), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("grid w-full gap-2", containerClassName), children: [
     label ? /* @__PURE__ */ jsx15(
       "label",
       {
@@ -2308,11 +2262,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
           }
         })
       }
@@ -2344,19 +2296,13 @@ function UploadInputShell({
             className: "text-[color:var(--sofya-text-default)]",
             size: "body",
             style: {
-              fontWeight: 700,
-              lineHeight: "normal",
-              letterSpacing: "-0.02em"
+              fontWeight: 700
             }
           }),
           optionalLabel ? /* @__PURE__ */ jsx15("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
         ]
       }
@@ -2711,20 +2657,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__ */ jsx15("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
         ]
       }
@@ -2755,9 +2694,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__ */ jsx15("p", { className: "mt-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(
@@ -2767,12 +2704,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"
                 }
               ) })
             ] }),
@@ -2956,7 +2888,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,
@@ -2995,9 +2927,7 @@ var Label = React14.forwardRef(
           className: "block text-foreground",
           size: "body",
           style: {
-            fontSize: "14px",
-            fontWeight: 500,
-            lineHeight: 1
+            fontWeight: 500
           }
         })
       }
@@ -3223,8 +3153,16 @@ Logo.displayName = "Logo";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { cva as cva7 } from "class-variance-authority";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var inheritTypographyStyle = {
+  color: "inherit",
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  fontWeight: "inherit",
+  letterSpacing: "inherit",
+  lineHeight: "inherit"
+};
 var paginationLinkVariants = cva7(
-  "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: {
@@ -3348,11 +3286,7 @@ function PaginationPrevious({
           as: "span",
           className: "block text-inherit",
           size: "body",
-          style: {
-            fontWeight: 500,
-            lineHeight: 1,
-            letterSpacing: "0.01em"
-          }
+          style: inheritTypographyStyle
         }) })
       ]
     }
@@ -3374,11 +3308,7 @@ function PaginationNext({
           as: "span",
           className: "block text-inherit",
           size: "body",
-          style: {
-            fontWeight: 500,
-            lineHeight: 1,
-            letterSpacing: "0.01em"
-          }
+          style: inheritTypographyStyle
         }) }),
         /* @__PURE__ */ jsx19(PaginationChevronRight, {})
       ]
@@ -3394,7 +3324,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,
@@ -3402,12 +3332,8 @@ function PaginationEllipsis({
         /* @__PURE__ */ jsx19("span", { children: renderTextContent("...", {
           as: "span",
           className: "block text-inherit",
-          size: "h4",
-          style: {
-            fontSize: "18px",
-            fontWeight: 400,
-            lineHeight: 1
-          }
+          size: "h5",
+          style: inheritTypographyStyle
         }) }),
         /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "More pages" })
       ]
@@ -3459,12 +3385,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"
       })
     }
   );
@@ -3481,10 +3402,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"
       })
     }
   );
@@ -3627,12 +3545,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,
@@ -3644,10 +3557,7 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
               children: renderTextContent(description, {
                 as: "span",
                 className: "text-muted-foreground",
-                size: "body",
-                style: {
-                  lineHeight: "20px"
-                }
+                size: "body"
               })
             }
           ) : null
@@ -3733,6 +3643,14 @@ ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
 import * as React21 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { jsx as jsx24, jsxs as jsxs14 } from "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;
@@ -3766,7 +3684,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,
@@ -3876,7 +3794,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,
@@ -3885,9 +3803,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__ */ jsx24(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx24("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ jsx24(Icon, { name: "check", size: 14 }) }) })
       ]
@@ -4460,7 +4376,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
@@ -4487,13 +4403,7 @@ function Tabs({
                       /* @__PURE__ */ jsx31("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"
                       }) })
                     ] })
                   ]
@@ -4546,7 +4456,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,
@@ -4559,7 +4469,7 @@ var Textarea = React29.forwardRef(
     if (!label && !containerClassName) {
       return control;
     }
-    return /* @__PURE__ */ jsxs17("div", { className: cn("grid w-full gap-4", containerClassName), children: [
+    return /* @__PURE__ */ jsxs17("div", { className: cn("grid w-full gap-2", containerClassName), children: [
       label ? /* @__PURE__ */ jsx32(
         "label",
         {
@@ -4571,11 +4481,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
             }
           })
         }
@@ -4609,9 +4517,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
         }
       })
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sofya-ds/react",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Sofya React design system with official brand tokens, provider and UI components.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -58,7 +58,7 @@
     "motion": "^12.38.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "@sofya-ds/tokens": "1.1.2"
+    "@sofya-ds/tokens": "1.1.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",