prime-ui-kit 0.16.0 → 0.18.0

package/src/{components/page-toolbar/examples/narrow.tsx → layout/page/examples/tools.tsx}

@@ -1,8 +1,8 @@
-/** A phone-width column: search and filter on top, the primary action on its own row under them, then the active filters, the sections and the period, every row 12 apart — `PageToolbar.Root`. */
+/** The orders page's tools in its top bar: sections with counts, search and filter, the period, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. */
 import {
   Button,
   Icon,
-  PageToolbar,
+  Page,
   SegmentedControl,
   Select,
   SmartFilter,
@@ -11,17 +11,17 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 const SECTIONS = [
   { value: "all", label: "Все", count: 128 },
   { value: "active", label: "В работе", count: 12 },
   { value: "done", label: "Доставлены", count: 96 },
+  { value: "cancelled", label: "Отменены", count: 20 },
 ];
 
 const PERIODS = [
   { value: "7d", label: "7 дней" },
   { value: "30d", label: "30 дней" },
+  { value: "quarter", label: "Квартал" },
 ];
 
 const FIELDS: SmartFilterField[] = [
@@ -31,38 +31,42 @@ const FIELDS: SmartFilterField[] = [
     options: [
       { value: "msk", label: "Москва" },
       { value: "spb", label: "Санкт-Петербург" },
+      { value: "kzn", label: "Казань" },
+    ],
+  },
+  {
+    key: "payment",
+    label: "Оплата",
+    options: [
+      { value: "card", label: "Картой" },
+      { value: "invoice", label: "По счёту" },
     ],
   },
 ];
 
-export default function PageToolbarNarrowExample() {
+export default function PageToolsExample() {
   const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("7d");
+  const [period, setPeriod] = React.useState("30d");
   const [filter, setFilter] = React.useState<SmartFilterValue>({
     city: { include: ["msk"], exclude: [] },
   });
   const [search, setSearch] = React.useState("");
 
   return (
-    <div className={styles.phone}>
-      <SmartFilter.Root
-        fields={FIELDS}
-        value={filter}
-        onValueChange={setFilter}
-        search={search}
-        onSearchChange={setSearch}
-      >
-        <PageToolbar.Root aria-label="Заказы">
-          <PageToolbar.Tools>
-            <SmartFilter.Toolbar />
-          </PageToolbar.Tools>
-          <PageToolbar.Sections>
-            <SegmentedControl.Root
-              fullWidth
-              value={section}
-              onValueChange={setSection}
-              aria-label="Раздел"
-            >
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root>
+        <Page.TopBar sticky={false}>
+          <Page.Heading>
+            <Page.Title>Заказы</Page.Title>
+          </Page.Heading>
+          <Page.Tools aria-label="Заказы">
+            <SegmentedControl.Root value={section} onValueChange={setSection} aria-label="Раздел">
               {SECTIONS.map((item) => (
                 <SegmentedControl.Item key={item.value} value={item.value}>
                   {item.label}
@@ -70,8 +74,7 @@ export default function PageToolbarNarrowExample() {
                 </SegmentedControl.Item>
               ))}
             </SegmentedControl.Root>
-          </PageToolbar.Sections>
-          <PageToolbar.View>
+            <SmartFilter.Toolbar />
             <Select.Root value={period} onValueChange={setPeriod}>
               <Select.Trigger aria-label="Период">
                 <Select.TriggerIcon>
@@ -87,20 +90,20 @@ export default function PageToolbarNarrowExample() {
                 ))}
               </Select.Content>
             </Select.Root>
-          </PageToolbar.View>
-          <PageToolbar.Actions>
+          </Page.Tools>
+          <Page.Actions>
             <Button.Root>
               <Button.Icon>
                 <Icon name="action.add" />
               </Button.Icon>
               Новый заказ
             </Button.Root>
-          </PageToolbar.Actions>
-          <PageToolbar.Chips>
+          </Page.Actions>
+          <Page.Chips>
             <SmartFilter.Chips />
-          </PageToolbar.Chips>
-        </PageToolbar.Root>
-      </SmartFilter.Root>
-    </div>
+          </Page.Chips>
+        </Page.TopBar>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/src/layout/page/examples/top-bar.tsx

@@ -0,0 +1,85 @@
+/** A nested record in the top bar: the path ending in the title, a line of data, the page's tools and its buttons — `Page.TopBar`, `Page.Heading`, `Page.Tools`, `Page.Actions`. */
+import { Breadcrumb, Button, Icon, Input, Page, SegmentedControl } from "prime-ui-kit";
+import * as React from "react";
+
+const SECTIONS = [
+  { value: "all", label: "Все" },
+  { value: "mine", label: "Мои" },
+  { value: "overdue", label: "Просрочены" },
+];
+
+const VIEWS = [
+  { value: "board", label: "Доска" },
+  { value: "list", label: "Список" },
+];
+
+export default function PageTopBarExample() {
+  const [section, setSection] = React.useState("all");
+  const [view, setView] = React.useState("board");
+  const [query, setQuery] = React.useState("");
+
+  return (
+    <Page.Root>
+      <Page.TopBar sticky={false}>
+        <Page.Heading>
+          <Breadcrumb.Root>
+            <Breadcrumb.Item href="#clients">Клиенты</Breadcrumb.Item>
+            <Breadcrumb.Item href="#north">ООО «Север»</Breadcrumb.Item>
+          </Breadcrumb.Root>
+          <Page.Title>Сделка № 2026-418</Page.Title>
+          <Page.Description>7 в работе · 6,5 млн ₽ · обновлено 9:40</Page.Description>
+        </Page.Heading>
+        <Page.Tools aria-label="Сделка № 2026-418">
+          <SegmentedControl.Root value={section} onValueChange={setSection} aria-label="Раздел">
+            {SECTIONS.map((item) => (
+              <SegmentedControl.Item key={item.value} value={item.value}>
+                {item.label}
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Icon side="start">
+                <Icon name="action.search" tone="secondary" />
+              </Input.Icon>
+              <Input.Field
+                type="search"
+                aria-label="Поиск по задачам"
+                placeholder="Поиск"
+                value={query}
+                onValueChange={setQuery}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+            {VIEWS.map((item) => (
+              <SegmentedControl.Item key={item.value} value={item.value}>
+                {item.label}
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+        </Page.Tools>
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.forward" />
+            </Button.Icon>
+            Поделиться
+          </Button.Root>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Экспорт
+          </Button.Root>
+          <Button.Root>
+            <Button.Icon>
+              <Icon name="action.add" />
+            </Button.Icon>
+            Новая сделка
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+    </Page.Root>
+  );
+}

package/src/{components/page-content → layout/page}/examples/variants.tsx

@@ -1,5 +1,5 @@
-/** The same page column at three caps: the whole main, a wide dashboard column, a reading column — `maxWidth`. */
-import { Card, PageContent, Typography } from "prime-ui-kit";
+/** The same page at three caps: the whole main, a wide dashboard column, a reading column — `maxWidth`. */
+import { Card, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -9,13 +9,13 @@ const WIDTHS = [
   { value: "readable", text: "Условия использования: не шире колонки для чтения, по центру." },
 ] as const;
 
-export default function PageContentVariantsExample() {
+export default function PageVariantsExample() {
   return (
     <>
       {WIDTHS.map(({ value, text }) => (
         <div key={value} className={styles.main}>
-          <PageContent.Root maxWidth={value}>
-            <PageContent.Body>
+          <Page.Root maxWidth={value}>
+            <Page.Body>
               <Card.Root>
                 <Card.Body>
                   <Typography variant="body-s" tone="secondary">
@@ -23,8 +23,8 @@ export default function PageContentVariantsExample() {
                   </Typography>
                 </Card.Body>
               </Card.Root>
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </div>
       ))}
     </>

package/src/layout/sidebar/COMPONENT.md

@@ -89,7 +89,7 @@ useSidebar()                       state hook for custom parts inside Root (useA
 | `onModeChange` | `(mode: SidebarMode) => void` | — | Called with the new mode (Toggle, `useSidebar().setMode`). |
 | `open` | `boolean` | — | Off-canvas panel on narrow viewports (controlled). |
 | `defaultOpen` | `boolean` | `false` | Initial off-canvas state (uncontrolled). |
-| `onOpenChange` | `(open: boolean) => void` | — | Off-canvas open / close: Toggle, the AppHeader menu button, scrim, Escape, an activated item, leaving the narrow viewport. |
+| `onOpenChange` | `(open: boolean) => void` | — | Off-canvas open / close: Toggle, the menu button of `Page.TopBar`, scrim, Escape, an activated item, leaving the narrow viewport. |
 | `offCanvas` | `"auto" \| "always" \| "never"` | `"auto"` | When the rail becomes an off-canvas panel opened by `open`: `auto` — below 768px (viewport); `always` — at any width; `never` — always a rail. |
 | `closeOnOutsideClick` | `boolean` | `true` | A press on the scrim (outside the off-canvas panel) closes the panel. |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the off-canvas panel. |
@@ -294,13 +294,15 @@ The rail width does not depend on `size`.
 | `closeOnEscape` (Root) | Escape closes the off-canvas panel | default; turn off with `closeOnOutsideClick` for a panel only its toggle closes | on |
 | `asChild` (ItemAction) | the row action is the consumer's link with the button look | the action opens a page or `mailto:` | off |
 
-Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header, or `Sidebar.Toggle` in the footer for a rail without a brand. Inside an `AppShell` the Sidebar publishes its navigation to the shell: on phones (`offCanvas="auto"`) or always (`offCanvas="always"`) the `AppHeader` draws the menu button that opens the panel by itself, a `Sidebar.Toggle` outside the rail brings back a hidden one, and other triggers (a BottomNav «Ещё») read `useAppShellNav()`. One current item at a time; give every top-level item an icon when the rail can go compact (child items need none).
+Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header, or `Sidebar.Toggle` in the footer for a rail without a brand. Inside an `AppShell` the Sidebar publishes its navigation to the shell: on phones (`offCanvas="auto"`) or always (`offCanvas="always"`) the page's `Page.TopBar` draws the menu button that opens the panel by itself, a `Sidebar.Toggle` outside the rail brings back a hidden one, and other triggers (a BottomNav «Ещё») read `useAppShellNav()`. One current item at a time; give every top-level item an icon when the rail can go compact (child items need none).
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
+| held | a `Page.Guard` that is `busy` or `dirty` on the page | a press on `Sidebar.Item` or `Sidebar.Brand` stops before it navigates (a router link included) and the panel stays; `dirty` asks first, then repeats it |
 | mode | `mode` / `defaultMode` | Root `data-mode`, `data-panel-mode` (the last visible mode while hidden); `<nav inert>` while hidden |
 | off-canvas | `offCanvas="always"`, or `"auto"` + viewport < 768px | Root `data-off-canvas`, `data-state="open" \| "closed"`; `<nav inert>` while closed; the kit scrim (`role="presentation"`) while open; in an `AppShell` the shell Root `data-off-canvas` |
+| placing | the viewport crossed the off-canvas breakpoint (not a person's choice) | Root `data-placing` for one painted frame: the rail lands at its new width with no motion (no growing from 0, no folding rows, no sliding panel) |
 | dismiss | `closeOnOutsideClick`, `closeOnEscape` | a press on the scrim / Escape closes the open panel, or not |
 | current | `current` or a router's `aria-current` | Item `aria-current="page"`, `data-state="active"` |
 | active path | a child of a Sub (or an item of a Group) is current | SubTrigger (or the `…` row of a folded Group) `data-active-path`; a closed Sub opens, a closed Group opens off the compact rail |
@@ -364,7 +366,7 @@ Leaving the narrow viewport closes the off-canvas panel; activating an item (a l
 - A row action is its own button next to the item (never nested), named by `label` with a tooltip.
 - The account avatar is hidden from screen readers; the name and the muted line name the button.
 - Off-canvas: a decorative scrim (a press on it is a press outside, `closeOnOutsideClick`), focus trap and Escape (`closeOnEscape`); focus returns to the opener.
-- Toggle, the AppHeader menu button and `useAppShellNav` triggers: `aria-expanded`, `aria-controls` → the `<nav>`, label from `labels`.
+- Toggle, the menu button of `Page.TopBar` and `useAppShellNav` triggers: `aria-expanded`, `aria-controls` → the `<nav>`, label from `labels`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -392,7 +394,7 @@ Leaving the narrow viewport closes the off-canvas panel; activating an item (a l
 | [dismiss.tsx](examples/dismiss.tsx) | An off-canvas panel only its own toggle closes: a press on the scrim and Escape leave it open, a picked item still closes it — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the rail mode: expanded, an icon rail with tooltips, or hidden; every switch is one synchronous movement — `mode`, `onModeChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | Navigation behind a menu button at any width: the parent opens the off-canvas panel, the scrim, Escape, the header toggle or a navigation closes it — `offCanvas`, `open`, `onOpenChange`. |
-| [narrow.tsx](examples/narrow.tsx) | Below 768px the rail leaves the layout and slides in over the page from the menu button the header draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. |
+| [narrow.tsx](examples/narrow.tsx) | Below 768px the rail leaves the layout and slides in over the page from the menu button the page top bar draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. |
 
 ## Mistakes
 - `icon={…}` / `badge={…}` props → use the `Sidebar.ItemIcon` and `Sidebar.ItemCount` parts.

package/src/layout/sidebar/examples/dismiss.tsx

@@ -1,5 +1,5 @@
 /** An off-canvas panel only its own toggle closes: a press on the scrim and Escape leave it open, a picked item still closes it — `closeOnOutsideClick`, `closeOnEscape`. */
-import { AppHeader, AppShell, Icon, Sidebar } from "prime-ui-kit";
+import { AppShell, Icon, Page, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -35,12 +35,15 @@ export default function SidebarDismissExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         </AppShell.Nav>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Сборка заказов</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
-        <AppShell.Main />
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Сборка заказов</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+          </Page.Root>
+        </AppShell.Main>
       </AppShell.Root>
     </div>
   );

package/src/layout/sidebar/examples/narrow.tsx

@@ -1,5 +1,5 @@
-/** Below 768px the rail leaves the layout and slides in over the page from the menu button the header draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. */
-import { AppHeader, AppShell, Icon, Sidebar } from "prime-ui-kit";
+/** Below 768px the rail leaves the layout and slides in over the page from the menu button the page top bar draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. */
+import { AppShell, Icon, Page, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -43,12 +43,15 @@ export default function SidebarNarrowExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         </AppShell.Nav>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Сделки</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
-        <AppShell.Main />
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Сделки</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+          </Page.Root>
+        </AppShell.Main>
       </AppShell.Root>
     </div>
   );

package/src/styles/theme-dark.css

@@ -32,6 +32,7 @@
   --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-200);
   --prime-color-chart-scale-fg: var(--prime-ref-color-gray-950);
   --prime-color-control-thumb: var(--prime-ref-color-gray-100);
+  --prime-color-control-thumb-disabled: var(--prime-ref-color-gray-600);
   --prime-color-danger-border: var(--prime-ref-color-red-400);
   --prime-color-danger-hover: var(--prime-ref-color-red-500);
   --prime-color-danger-soft: color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent);
@@ -50,35 +51,35 @@
   --prime-color-layer-0-bg: #0d0f13;
   --prime-color-layer-0-fill: #14161a;
   --prime-color-layer-0-fill-hover: #1a1c21;
-  --prime-color-layer-0-selected: #212428;
+  --prime-color-layer-0-selected: #303237;
   --prime-color-layer-1-bg: #14161a;
   --prime-color-layer-1-fill: #1a1c21;
   --prime-color-layer-1-fill-hover: #212428;
-  --prime-color-layer-1-selected: #292b2f;
+  --prime-color-layer-1-selected: #383a3f;
   --prime-color-layer-2-bg: #1a1c21;
   --prime-color-layer-2-fill: #212428;
   --prime-color-layer-2-fill-hover: #292b2f;
-  --prime-color-layer-2-selected: #303237;
+  --prime-color-layer-2-selected: #3f4247;
   --prime-color-layer-3-bg: #212428;
   --prime-color-layer-3-fill: #292b2f;
   --prime-color-layer-3-fill-hover: #303237;
-  --prime-color-layer-3-selected: #383a3f;
+  --prime-color-layer-3-selected: #474a4f;
   --prime-color-layer-4-bg: #292b2f;
   --prime-color-layer-4-fill: #303237;
   --prime-color-layer-4-fill-hover: #383a3f;
-  --prime-color-layer-4-selected: #3f4247;
+  --prime-color-layer-4-selected: #4f5257;
   --prime-color-layer-floating-bg: #1a1c21;
   --prime-color-layer-floating-fill: #212428;
   --prime-color-layer-floating-fill-hover: #292b2f;
-  --prime-color-layer-floating-selected: #303237;
+  --prime-color-layer-floating-selected: #3f4247;
   --prime-color-layer-floating1-bg: #212328;
   --prime-color-layer-floating1-fill: #282a2f;
   --prime-color-layer-floating1-fill-hover: #303237;
-  --prime-color-layer-floating1-selected: #373a3e;
+  --prime-color-layer-floating1-selected: #47494e;
   --prime-color-layer-floating2-bg: #282a2f;
   --prime-color-layer-floating2-fill: #303237;
   --prime-color-layer-floating2-fill-hover: #373a3e;
-  --prime-color-layer-floating2-selected: #3f4146;
+  --prime-color-layer-floating2-selected: #4f5257;
   --prime-color-message-outgoing-accent: var(--prime-ref-color-white);
   --prime-color-message-outgoing-accent-fg: var(--prime-ref-color-cobalt-700);
   --prime-color-message-outgoing-bg: var(--prime-ref-color-cobalt-700);
@@ -128,6 +129,7 @@
   --prime-color-palette-yellow-soft: color-mix(in srgb, var(--prime-ref-color-yellow-500) 16%, transparent);
   --prime-color-palette-yellow-solid-fg: var(--prime-ref-color-gray-950);
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-300);
+  --prime-color-skeleton-fill: color-mix(in srgb, var(--prime-ref-color-gray-100) 10%, transparent);
   --prime-color-success-default: var(--prime-ref-color-green-400);
   --prime-color-success-fg: var(--prime-ref-color-gray-950);
   --prime-color-success-hover: var(--prime-ref-color-green-300);
@@ -135,8 +137,8 @@
   --prime-color-success-text: var(--prime-ref-color-green-300);
   --prime-color-text-disabled: var(--prime-ref-color-gray-600);
   --prime-color-text-inverse: var(--prime-ref-color-gray-925);
-  --prime-color-text-muted: var(--prime-ref-color-gray-400);
-  --prime-color-text-placeholder: var(--prime-ref-color-gray-400);
+  --prime-color-text-muted: var(--prime-ref-color-gray-350);
+  --prime-color-text-placeholder: var(--prime-ref-color-gray-350);
   --prime-color-text-primary: var(--prime-ref-color-gray-100);
   --prime-color-text-secondary: var(--prime-ref-color-gray-300);
   --prime-color-tooltip-bg: var(--prime-ref-color-gray-100);

package/src/styles/theme-light.css

@@ -97,6 +97,7 @@
   --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-800);
   --prime-color-chart-scale-fg: var(--prime-ref-color-white);
   --prime-color-control-thumb: var(--prime-ref-color-white);
+  --prime-color-control-thumb-disabled: var(--prime-ref-color-white);
   --prime-color-danger-border: var(--prime-ref-color-red-500);
   --prime-color-danger-default: var(--prime-ref-color-red-600);
   --prime-color-danger-fg: var(--prime-ref-color-white);
@@ -203,6 +204,7 @@
   --prime-color-palette-yellow-solid: var(--prime-ref-color-yellow-400);
   --prime-color-palette-yellow-solid-fg: var(--prime-ref-color-gray-925);
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
+  --prime-color-skeleton-fill: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
   --prime-color-success-hover: var(--prime-ref-color-green-800);
@@ -318,6 +320,7 @@
   --prime-focus-offset-inset: -2px;
   --prime-focus-space: 4px;
   --prime-focus-width: 2px;
+  --prime-font-family-key: var(--prime-ref-font-family-key);
   --prime-font-family-mono: var(--prime-ref-font-family-mono);
   --prime-font-family-sans: var(--prime-ref-font-family-sans);
   --prime-font-tracking-normal: var(--prime-ref-font-tracking-normal);
@@ -364,6 +367,7 @@
   --prime-message-padding-x: var(--prime-ref-space-3);
   --prime-message-padding-y: var(--prime-ref-space-2);
   --prime-message-radius: var(--prime-ref-radius-14);
+  --prime-message-sticker: 10rem;
   --prime-message-tail-height: var(--prime-ref-space-4);
   --prime-message-tail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M8 0C8 7 6.5 12.5 0.6 15.3C0.2 15.5 0.3 16 0.8 16H8Z'/%3E%3C/svg%3E");
   --prime-message-tail-width: var(--prime-ref-space-2);

package/src/styles/tokens.css

@@ -28,6 +28,7 @@
   --prime-ref-color-gray-100: #e8eaee;
   --prime-ref-color-gray-150: #e0e3e8;
   --prime-ref-color-gray-300: #b9bec8;
+  --prime-ref-color-gray-350: #a1a8b6;
   --prime-ref-color-gray-400: #949bab;
   --prime-ref-color-gray-50: #f3f4f6;
   --prime-ref-color-gray-500: #636a79;
@@ -100,6 +101,7 @@
   --prime-ref-easing-enter: cubic-bezier(0, 0, 0, 1);
   --prime-ref-easing-exit: cubic-bezier(0.23, 1, 0.32, 1);
   --prime-ref-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --prime-ref-font-family-key: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, system-ui, -apple-system, "Segoe UI Symbol", Menlo, Consolas, monospace;
   --prime-ref-font-family-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --prime-ref-font-family-sans: "Golos Text", "Golos Text Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --prime-ref-font-line-height-12: 0.75rem;
@@ -145,7 +147,7 @@
   --prime-ref-radius-6: 6px;
   --prime-ref-radius-8: 8px;
   --prime-ref-radius-full: 9999px;
-  --prime-ref-space-0: 0;
+  --prime-ref-space-0: 0rem;
   --prime-ref-space-1: 0.25rem;
   --prime-ref-space-10: 2.5rem;
   --prime-ref-space-12: 3rem;