@sofya-ds/react 1.12.0 → 1.13.1

package/README.md

@@ -1,45 +1,45 @@
-# @sofya-ds/react
-
-React design system package for Sofya.
-
-## Install
-
-```bash
-pnpm add @sofya-ds/react
-```
-
-Se voce tambem quiser consumir os tokens diretamente no app, instale o pacote complementar:
-
-```bash
-pnpm add @sofya-ds/tokens
-```
-
-## Usage
-
-```tsx
-import "@sofya-ds/react/styles.css";
-import { Button, DocumentCard, Logo, SofyaProvider, Stack, Text } from "@sofya-ds/react";
-
-export function App() {
-  return (
-    <SofyaProvider>
-      <Logo variant="mono" size={52} monoColor="#08194D" />
-      <Button>Entrar</Button>
-      <Text size="h2" variant="gradient">
-        Titulo com gradiente oficial da marca
-      </Text>
-      <Stack gap="compact">
-        <Text size="encounter-title">Encontro clinico</Text>
-        <DocumentCard title="Resumo clinico" description="Documento salvo" />
-      </Stack>
-    </SofyaProvider>
-  );
-}
-```
-
-## Includes
-
-- Components like `Button`, `Badge`, `Card`, `Checkbox`, `DocumentCard`, `Icon`, `Input`, `InputOTP`, `Link`, `Logo`, `ProseDialogContent`, `RightRailAction`, `Surface` and `Text`
-- Layout primitives like `Stack`, `Cluster`, `Inline` and `Container` backed by shared spacing tokens
-- `SofyaProvider` for theme application
-- Distributed stylesheet at `@sofya-ds/react/styles.css`
+# @sofya-ds/react
+
+React design system package for Sofya.
+
+## Install
+
+```bash
+pnpm add @sofya-ds/react
+```
+
+Se voce tambem quiser consumir os tokens diretamente no app, instale o pacote complementar:
+
+```bash
+pnpm add @sofya-ds/tokens
+```
+
+## Usage
+
+```tsx
+import "@sofya-ds/react/styles.css";
+import { Button, DocumentCard, Logo, SofyaProvider, Stack, Text } from "@sofya-ds/react";
+
+export function App() {
+  return (
+    <SofyaProvider>
+      <Logo variant="mono" size={52} monoColor="#08194D" />
+      <Button>Entrar</Button>
+      <Text size="h2" variant="gradient">
+        Titulo com gradiente oficial da marca
+      </Text>
+      <Stack gap="compact">
+        <Text size="encounter-title">Encontro clinico</Text>
+        <DocumentCard title="Resumo clinico" description="Documento salvo" />
+      </Stack>
+    </SofyaProvider>
+  );
+}
+```
+
+## Includes
+
+- Components like `Button`, `Badge`, `Card`, `Checkbox`, `DocumentCard`, `Icon`, `Input`, `InputOTP`, `Link`, `Logo`, `ProseDialogContent`, `RightRailAction`, `Surface` and `Text`
+- Layout primitives like `Stack`, `Cluster`, `Inline` and `Container` backed by shared spacing tokens
+- `SofyaProvider` for theme application
+- Distributed stylesheet at `@sofya-ds/react/styles.css`

package/dist/index.cjs

@@ -134,7 +134,11 @@ __export(index_exports, {
   SelectValue: () => SelectValue,
   Separator: () => Separator2,
   SettingsNavItem: () => SettingsNavItem,
+  SidebarNav: () => SidebarNav,
   SidebarNavItem: () => SidebarNavItem,
+  SidebarNavSection: () => SidebarNavSection,
+  SidebarNavSectionItems: () => SidebarNavSectionItems,
+  SidebarNavSectionLabel: () => SidebarNavSectionLabel,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
   SofyaProvider: () => SofyaProvider,
@@ -657,6 +661,9 @@ var defaultElements = {
   "heading-xl": "h1",
   "heading-lg": "h2",
   "heading-md": "h3",
+  "settings-page-title": "h1",
+  "home-inline-encounter-title": "h1",
+  "home-inline-encounter-action": "span",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -670,6 +677,7 @@ var defaultElements = {
   "body-sm": "p",
   body: "p",
   "label-md": "span",
+  "settings-section-title": "span",
   "section-label": "span",
   "eyebrow-md": "span",
   "overline-md": "span",
@@ -696,7 +704,8 @@ var textSizeStyles = Object.fromEntries(
       fontSize: `var(--sofya-text-${size}-font-size)`,
       fontWeight: `var(--sofya-text-${size}-font-weight)`,
       lineHeight: `var(--sofya-text-${size}-line-height)`,
-      letterSpacing: `var(--sofya-text-${size}-letter-spacing)`
+      letterSpacing: `var(--sofya-text-${size}-letter-spacing)`,
+      ...size === "settings-section-title" ? { textTransform: "uppercase" } : {}
     }
   ])
 );
@@ -1190,6 +1199,7 @@ var buttonRippleVariantClasses = {
   icon: "bg-[hsl(var(--sofya-primary)/0.34)]",
   language: "bg-[hsl(var(--sofya-background)/0.76)] mix-blend-screen",
   secondary: "bg-[hsl(var(--sofya-primary)/0.30)]",
+  "auth-outline": "bg-[hsl(var(--sofya-primary)/0.24)]",
   outline: "bg-[hsl(var(--sofya-primary)/0.32)]",
   ghost: "bg-[hsl(var(--sofya-primary)/0.28)]",
   destructive: "bg-[hsl(var(--sofya-destructive-foreground)/0.78)] mix-blend-screen"
@@ -1198,6 +1208,8 @@ var buttonRippleBaseSize = {
   default: 20,
   sm: 18,
   lg: 22,
+  toolbar: 20,
+  auth: 22,
   icon: 18
 };
 function useButtonRippleState({
@@ -1450,11 +1462,12 @@ var buttonVariantOptions = [
   "icon",
   "language",
   "secondary",
+  "auth-outline",
   "outline",
   "ghost",
   "destructive"
 ];
-var buttonSizeOptions = ["default", "sm", "lg", "icon"];
+var buttonSizeOptions = ["default", "sm", "lg", "toolbar", "auth", "icon"];
 var buttonVariants = (0, import_class_variance_authority2.cva)(
   "relative isolate inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full font-medium tracking-[0.025em] transform-gpu transition-[width,transform,filter,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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none data-[disabled=true]:cursor-not-allowed",
   {
@@ -1468,6 +1481,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
         icon: "border-0 bg-transparent text-[color:var(--sofya-text-soft)] shadow-none hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] data-[disabled=true]:bg-transparent data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:shadow-none",
         language: "border-0 bg-muted bg-cover bg-center bg-no-repeat text-primary-foreground shadow-none hover:brightness-[1.03]",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85 data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
+        "auth-outline": "rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card text-[color:var(--sofya-text-default)] shadow-none hover:border-[color:var(--sofya-border-strong)] hover:bg-card active:bg-card data-[disabled=true]:border-[color:var(--sofya-border-soft)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
         outline: "border border-primary/15 bg-background text-foreground hover:border-primary/30 hover:bg-background active:bg-background data-[disabled=true]:border-[color:var(--sofya-border-soft)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
         ghost: "bg-transparent text-foreground hover:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
         destructive: "bg-destructive text-destructive-foreground hover:brightness-[1.04] data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]"
@@ -1476,6 +1490,8 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
         default: "h-11 px-10",
         sm: "h-10 px-6",
         lg: "h-12 px-12",
+        toolbar: "h-[42px] px-7",
+        auth: "h-[46px] px-6",
         icon: "h-11 w-11"
       }
     },
@@ -1489,12 +1505,16 @@ var loadingSpinnerSizeClasses = {
   default: "h-4 w-4",
   sm: "h-3.5 w-3.5",
   lg: "h-[18px] w-[18px]",
+  toolbar: "h-4 w-4",
+  auth: "h-4 w-4",
   icon: "h-4 w-4"
 };
 var languageButtonSizeClasses = {
   default: "h-11 w-11 rounded-full p-0",
   sm: "h-10 w-10 rounded-full p-0",
   lg: "h-12 w-12 rounded-full p-0",
+  toolbar: "h-[42px] w-[42px] rounded-full p-0",
+  auth: "h-[46px] w-[46px] rounded-full p-0",
   icon: "h-11 w-11 rounded-full p-0"
 };
 function ButtonSpinner({
@@ -1538,6 +1558,7 @@ var Button = React7.forwardRef(
     const resolvedSize = size ?? (isIconOnly ? "icon" : "default");
     const resolvedVariant = variant ?? "default";
     const isLanguageButton = variant === "language";
+    const textSize = resolvedVariant === "auth-outline" ? "body-md" : "tiny";
     const resolvedLanguageLocale = isLanguageButton ? languageLocale ?? "en-US" : void 0;
     const resolvedLanguageFlagSrc = resolvedLanguageLocale ? buttonLanguageFlagSrc[resolvedLanguageLocale] : void 0;
     const resolvedLanguageLabel = resolvedLanguageLocale ? buttonLanguageLabels[resolvedLanguageLocale] : void 0;
@@ -1596,7 +1617,7 @@ var Button = React7.forwardRef(
       hasChildren ? renderTextContent(children, {
         as: "span",
         className: "inline-flex items-center text-current",
-        size: "tiny",
+        size: textSize,
         style: {
           fontWeight: "inherit",
           letterSpacing: "inherit"
@@ -3264,6 +3285,7 @@ InputOTPSeparator.displayName = "InputOTPSeparator";
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var inputVariantOptions = [
   "default",
+  "auth-login",
   "search",
   "otp",
   "upload"
@@ -3396,6 +3418,7 @@ var Input = React16.forwardRef((props, ref) => {
     ...nativeProps
   } = props;
   const isSearch = variant === "search";
+  const isAuthLogin = variant === "auth-login";
   const resolvedType = type ?? (isSearch ? "search" : void 0);
   const ariaLabel = nativeProps["aria-label"] ?? (typeof label === "string" ? label : isSearch ? "Search" : void 0);
   const nativeControl = isSearch ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex h-[88px] w-full items-center gap-6 rounded-full border border-[color:var(--sofya-border-strong)] bg-card px-8 shadow-none transition-[border-color,box-shadow,background-color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] hover:ring-2 hover:ring-[color:var(--sofya-focus-ring-soft)] focus-within:border-transparent focus-within:ring-2 focus-within:ring-[color:var(--sofya-focus-ring-soft)] has-[:active]:border-transparent has-[:active]:ring-2 has-[:active]:ring-[color:var(--sofya-focus-ring-soft)]", children: [
@@ -3431,7 +3454,8 @@ var Input = React16.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 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] [font-weight:var(--sofya-text-tiny-font-weight)] leading-[var(--sofya-text-tiny-line-height)] tracking-[var(--sofya-text-tiny-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",
+        "flex w-full rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card 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",
+        isAuthLogin ? "h-[46px] px-6 py-3 [font-family:var(--sofya-text-tiny-font-family)] text-[14px] [font-weight:500] leading-[24px] tracking-[var(--sofya-text-tiny-letter-spacing)] placeholder:font-medium" : "h-10 px-4 py-2 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] [font-weight:var(--sofya-text-tiny-font-weight)] leading-[var(--sofya-text-tiny-line-height)] tracking-[var(--sofya-text-tiny-letter-spacing)]",
         className
       ),
       ...nativeProps,
@@ -3441,10 +3465,12 @@ var Input = React16.forwardRef((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     FieldShell,
     {
-      containerClassName,
+      containerClassName: cn(isAuthLogin ? "gap-2.5" : void 0, containerClassName),
       control: nativeControl,
       label: isSearch ? void 0 : label,
       labelClassName: isSearch ? void 0 : labelClassName,
+      labelTextSize: isAuthLogin ? "body-md" : void 0,
+      labelTextStyle: isAuthLogin ? { fontWeight: 500 } : void 0,
       labelHtmlFor: isSearch ? void 0 : resolvedId
     }
   );
@@ -5453,8 +5479,88 @@ Separator2.displayName = SeparatorPrimitive.Root.displayName;
 // src/components/sidebar-nav-item.tsx
 var React36 = __toESM(require("react"), 1);
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var sidebarNavItemAppearanceClassNames = {
+  settings: "rounded-[var(--sofya-radius-md)] py-[var(--sofya-space-2)] pl-[var(--sofya-space-3)] pr-[var(--sofya-space-3)] text-[color:var(--sofya-text-soft)] hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] data-[active=true]:bg-[color:var(--sofya-surface-selected)] data-[active=true]:text-[color:var(--sofya-text-default)] data-[active=true]:hover:bg-[color:var(--sofya-surface-selected-strong)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent",
+  workspace: "rounded-[var(--sofya-radius-sm)] bg-transparent px-0 py-0 text-[color:var(--sofya-text-subtle)] hover:bg-transparent hover:text-[color:var(--sofya-text-default)] data-[active=true]:bg-transparent data-[active=true]:text-primary data-[active=true]:hover:bg-transparent data-[active=true]:hover:text-primary data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent"
+};
+var sidebarNavItemIconClassNames = {
+  settings: "flex h-5 w-5 shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+  workspace: "flex h-[var(--sofya-text-sidebar-title-font-size)] w-[var(--sofya-text-sidebar-title-font-size)] shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0"
+};
+var sidebarNavItemTextSize = {
+  settings: "sidebar-title",
+  workspace: "sidebar-title-regular"
+};
+var SidebarNav = React36.forwardRef(
+  ({ as, className, ...props }, ref) => {
+    const Comp = as ?? "nav";
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      Comp,
+      {
+        ref,
+        "data-slot": "sidebar-nav",
+        className: cn("flex w-full min-w-0 flex-col gap-[var(--sofya-rhythm-group)]", className),
+        ...props
+      }
+    );
+  }
+);
+SidebarNav.displayName = "SidebarNav";
+var SidebarNavSection = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-nav-section",
+      className: cn("flex min-w-0 flex-col gap-[var(--sofya-rhythm-group)]", className),
+      ...props
+    }
+  )
+);
+SidebarNavSection.displayName = "SidebarNavSection";
+var SidebarNavSectionLabel = React36.forwardRef(
+  ({ as, className, children, ...props }, ref) => {
+    const Comp = as ?? "h5";
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      Comp,
+      {
+        ref,
+        "data-slot": "sidebar-nav-section-label",
+        className: cn("m-0 min-w-0 text-muted-foreground uppercase", className),
+        ...props,
+        children: renderTextContent(children, {
+          as: "span",
+          className: "block min-w-0 truncate text-inherit",
+          size: "sidebar-title"
+        })
+      }
+    );
+  }
+);
+SidebarNavSectionLabel.displayName = "SidebarNavSectionLabel";
+var SidebarNavSectionItems = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-nav-section-items",
+      className: cn("flex min-w-0 flex-col gap-[var(--sofya-gap-comfortable)]", className),
+      ...props
+    }
+  )
+);
+SidebarNavSectionItems.displayName = "SidebarNavSectionItems";
 var SidebarNavItem = React36.forwardRef(
-  function SidebarNavItem2({ as, active = false, disabled = false, icon, className, children, ...props }, ref) {
+  function SidebarNavItem2({
+    as,
+    active = false,
+    appearance = "settings",
+    disabled = false,
+    icon,
+    className,
+    children,
+    ...props
+  }, ref) {
     const Comp = as ?? (props.href ? "a" : "button");
     const isNativeButton = Comp === "button";
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
@@ -5468,19 +5574,17 @@ var SidebarNavItem = React36.forwardRef(
         "aria-disabled": disabled || void 0,
         ...isNativeButton ? { type: "button", disabled } : {},
         className: cn(
-          "group relative flex w-full items-center gap-[var(--sofya-gap-compact)] rounded-[var(--sofya-radius-md)] py-[var(--sofya-space-2)] pl-[var(--sofya-space-3)] pr-[var(--sofya-space-3)] text-left no-underline outline-none",
+          "group relative flex w-full items-center gap-[var(--sofya-gap-compact)] text-left no-underline outline-none",
           "[font-family:var(--sofya-text-sidebar-title-font-family)] text-[length:var(--sofya-text-sidebar-title-font-size)] [font-weight:var(--sofya-text-sidebar-title-font-weight)] leading-[var(--sofya-text-sidebar-title-line-height)] tracking-[var(--sofya-text-sidebar-title-letter-spacing)]",
-          "text-[color:var(--sofya-text-soft)] transition-colors duration-sofya ease-sofya",
-          "hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)]",
+          "transition-colors duration-sofya ease-sofya",
           "focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
-          "data-[active=true]:bg-[color:var(--sofya-surface-selected)] data-[active=true]:text-[color:var(--sofya-text-default)]",
-          "data-[active=true]:hover:bg-[color:var(--sofya-surface-selected-strong)]",
-          "data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent",
+          "data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+          sidebarNavItemAppearanceClassNames[appearance],
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          appearance === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -5490,12 +5594,19 @@ var SidebarNavItem = React36.forwardRef(
                 active ? "opacity-100" : "opacity-0"
               )
             }
-          ),
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0", children: icon }) : null,
+          ) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            "span",
+            {
+              "data-slot": "sidebar-nav-item-icon",
+              className: sidebarNavItemIconClassNames[appearance],
+              children: icon
+            }
+          ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(children, {
             as: "span",
             className: "block min-w-0 truncate text-inherit",
-            size: "sidebar-title"
+            size: sidebarNavItemTextSize[appearance]
           }) })
         ]
       }
@@ -6300,7 +6411,8 @@ var Table = React43.forwardRef(function Table2({ className, density = "default",
           "data-slot": "table",
           ref,
           className: cn(
-            "w-full min-w-[1040px] caption-bottom border-separate border-spacing-0 bg-card",
+            "w-full min-w-[1040px] caption-bottom border-separate border-spacing-x-0 bg-card",
+            density === "compact" ? "border-spacing-y-2" : "border-spacing-y-0",
             className
           ),
           ...props
@@ -6380,7 +6492,7 @@ var TableHead = React43.forwardRef(function TableHead2({ className, children, ..
       ref,
       className: cn(
         "whitespace-nowrap px-4 text-left align-middle [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-medium uppercase leading-4 tracking-[0.08em] text-[color:var(--sofya-text-default)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
-        headerDensity === "compact" ? "py-2.5" : "py-4",
+        headerDensity === "compact" ? "h-[45px] py-0" : "py-4",
         className
       ),
       ...props,
@@ -6586,10 +6698,11 @@ var tagVariants = (0, import_class_variance_authority9.cva)(
       variant: {
         neutral: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
         organization: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
-        // Brand/content label: same primary-tinted pill as `organization`, but
-        // semantically named so consumers don't borrow `organization` for
-        // non-org content (e.g. a clinical-domain label).
-        brand: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
+        // Brand/content label (e.g. a clinical-domain pill): a soft
+        // secondary-tinted fill (`--sofya-secondary` @ 10%) with primary text.
+        // Distinct from `organization`'s primary-tinted info look, and roomier
+        // padding (16/4) to match the content-label spec. Borderless filled pill.
+        brand: "border-[color:var(--sofya-tone-brand-border)] bg-[color:var(--sofya-tone-brand-background)] text-[color:var(--sofya-tone-brand-foreground)] px-[var(--sofya-space-4)] py-[var(--sofya-space-1)]",
         privacy: "border-transparent bg-[color:var(--sofya-surface-muted)] text-[color:var(--sofya-text-subtle)]",
         status: ""
       }
@@ -6732,7 +6845,11 @@ var TemplateCard = React45.forwardRef(
     const titleNode = renderTextContent(title, {
       as: "span",
       className: "block min-w-0 truncate font-semibold text-[color:var(--sofya-text-default)]",
-      size: "title-sm"
+      size: "title-sm",
+      // Selectable rows use the exact picker-title ramp (15/26, semibold). The
+      // size tokens are applied via inline style by `Text`, so the precise
+      // values must be passed as `style` to win over the `title-sm` defaults.
+      style: selectable ? { fontSize: "15px", lineHeight: "26px", fontWeight: 600 } : void 0
     });
     const hasInlineTitleExtras = showInlineStar || showInlineMeta;
     const titleRow = hasInlineTitleExtras ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex min-w-0 items-center gap-[var(--sofya-gap-tight)]", children: [
@@ -6752,10 +6869,17 @@ var TemplateCard = React45.forwardRef(
       description ? renderTextContent(description, {
         as: "span",
         className: cn(
-          "block min-w-0 text-[color:var(--sofya-text-soft)]",
+          "block min-w-0",
+          // Selectable rows use the full foreground tone (not the softer
+          // ramp) to match the picker spec.
+          selectable ? "text-[color:var(--sofya-text-default)]" : "text-[color:var(--sofya-text-soft)]",
           (isList || selectable) && "truncate"
         ),
-        size: descriptionSize
+        size: descriptionSize,
+        // Exact picker-description ramp (14/18, regular). Passed as inline
+        // style so it wins over the line-height/weight applied by `Text`,
+        // independent of which size ramp `descriptionSize` resolves to.
+        style: selectable ? { fontSize: "14px", lineHeight: "18px", fontWeight: 400 } : void 0
       }) : null
     ] });
     const blockMeta = showBlockMeta ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -6799,8 +6923,12 @@ var TemplateCard = React45.forwardRef(
         className: cn(
           "group rounded-[var(--sofya-radius-md)] border border-[color:var(--sofya-border-soft)] bg-card transition-colors duration-sofya ease-sofya",
           "hover:border-[color:var(--sofya-border-strong)] hover:bg-[color:var(--sofya-surface-hover)]",
-          "data-[selected=true]:border-primary data-[selected=true]:bg-[color:var(--sofya-surface-selected)]",
-          selectable ? "flex cursor-pointer items-center gap-[var(--sofya-gap-default)] p-[var(--sofya-space-4)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0" : isList ? "flex items-center gap-[var(--sofya-gap-default)] px-[var(--sofya-space-4)] py-[var(--sofya-space-3)]" : "flex flex-col gap-[var(--sofya-space-3)] p-[var(--sofya-space-4)]",
+          "data-[selected=true]:bg-[color:var(--sofya-surface-selected)]",
+          // In card/list usage the selected state also strengthens the border.
+          // Selectable picker rows are distinguished by the fill alone and keep
+          // the same soft border in every state.
+          !selectable && "data-[selected=true]:border-primary",
+          selectable ? "flex cursor-pointer items-center gap-[var(--sofya-space-6)] rounded-[var(--sofya-radius-sm)] p-[var(--sofya-space-4)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0" : isList ? "flex items-center gap-[var(--sofya-gap-default)] px-[var(--sofya-space-4)] py-[var(--sofya-space-3)]" : "flex flex-col gap-[var(--sofya-space-3)] p-[var(--sofya-space-4)]",
           className
         ),
         ...props,
@@ -7280,7 +7408,11 @@ var import_tokens4 = require("@sofya-ds/tokens");
   SelectValue,
   Separator,
   SettingsNavItem,
+  SidebarNav,
   SidebarNavItem,
+  SidebarNavSection,
+  SidebarNavSectionItems,
+  SidebarNavSectionLabel,
   Skeleton,
   Slider,
   SofyaProvider,