prime-ui-kit 0.14.0 → 0.16.0

package/src/components/dropdown/examples/context-menu.tsx

@@ -0,0 +1,75 @@
+/** A right-click on a deal opens its menu at the pointer, and Escape or a pick returns focus to that row — `anchorPoint`, `Dropdown.Anchor`. */
+import { Card, Dropdown, Icon, List } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const DEALS = [
+  { id: "d-1042", title: "Поставка оборудования", client: "ООО «Гранит»" },
+  { id: "d-1043", title: "Годовое обслуживание", client: "АО «Северсталь-Сервис»" },
+  { id: "d-1044", title: "Пилотный проект", client: "ИП Козлов" },
+];
+
+export default function DropdownContextMenuExample() {
+  const [menu, setMenu] = React.useState<{ id: string; x: number; y: number } | null>(null);
+
+  return (
+    <Card.Root className={styles.column}>
+      <Card.Body>
+        <List.Root aria-label="Сделки">
+          {DEALS.map((deal) => {
+            const open = menu?.id === deal.id;
+            return (
+              <Dropdown.Root
+                key={deal.id}
+                open={open}
+                onOpenChange={(next) => {
+                  if (!next) setMenu(null);
+                }}
+                anchorPoint={open ? menu : null}
+              >
+                <Dropdown.Anchor>
+                  <List.Item
+                    onContextMenu={(event) => {
+                      event.preventDefault();
+                      const box = event.currentTarget.getBoundingClientRect();
+                      setMenu({
+                        id: deal.id,
+                        x: event.clientX - box.left,
+                        y: event.clientY - box.top,
+                      });
+                    }}
+                  >
+                    <List.ItemText>{deal.title}</List.ItemText>
+                    <List.ItemDescription>{deal.client}</List.ItemDescription>
+                  </List.Item>
+                </Dropdown.Anchor>
+                <Dropdown.Content>
+                  <Dropdown.Item>
+                    <Dropdown.ItemIcon>
+                      <Icon name="action.edit" />
+                    </Dropdown.ItemIcon>
+                    Переименовать
+                  </Dropdown.Item>
+                  <Dropdown.Item>
+                    <Dropdown.ItemIcon>
+                      <Icon name="action.copy" />
+                    </Dropdown.ItemIcon>
+                    Дублировать
+                  </Dropdown.Item>
+                  <Dropdown.Separator />
+                  <Dropdown.Item tone="danger">
+                    <Dropdown.ItemIcon>
+                      <Icon name="action.delete" />
+                    </Dropdown.ItemIcon>
+                    Удалить
+                  </Dropdown.Item>
+                </Dropdown.Content>
+              </Dropdown.Root>
+            );
+          })}
+        </List.Root>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/src/components/dropdown/examples/examples.module.css

@@ -1,6 +1,6 @@
 /* Layout of the Dropdown scenarios: semantic tokens only. */
 
-/* match-trigger-width.tsx: a column with a full-width button. */
+/* match-trigger-width.tsx, context-menu.tsx: a column of a full-width button or of rows. */
 .column {
   display: flex;
   flex-direction: column;
@@ -8,15 +8,11 @@
   max-width: calc(var(--prime-space-24) * 3);
 }
 
-/* overview.tsx: a list row — the record on the left, its actions button at the end. */
+/* overview.tsx: the record on the left, its actions button at the end. */
 .row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--prime-space-4);
   width: min(100%, calc(var(--prime-space-24) * 4));
-  padding-block: var(--prime-space-1);
-  padding-inline: var(--prime-space-4) var(--prime-space-1);
-  border-radius: var(--prime-radius-l);
-  background: var(--prime-color-layer-nested);
 }

package/src/components/dropdown/examples/sizes.tsx

@@ -1,43 +1,48 @@
-/** Every size tier with icons, key hints and a destructive item; the menu takes the tier of its trigger — `size`. */
-import { Button, Dropdown, Icon } from "prime-ui-kit";
+/** Every size tier with icons, key hints and a destructive item; the tier is the menu's own, set on `Dropdown.Content`, not taken from its trigger — `size`. */
+import { Button, Dropdown, Icon, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function DropdownSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <Dropdown.Root key={size}>
-          <Dropdown.Trigger>
-            <Button.Root variant="soft" tone="neutral" size={size}>
-              {size}
-            </Button.Root>
-          </Dropdown.Trigger>
-          <Dropdown.Content size={size}>
-            <Dropdown.Item>
-              <Dropdown.ItemIcon>
-                <Icon name="action.copy" />
-              </Dropdown.ItemIcon>
-              Дублировать
-              <Dropdown.ItemShortcut>⌘D</Dropdown.ItemShortcut>
-            </Dropdown.Item>
-            <Dropdown.Item>
-              <Dropdown.ItemIcon>
-                <Icon name="action.download" />
-              </Dropdown.ItemIcon>
-              Скачать
-              <Dropdown.ItemShortcut>⌘S</Dropdown.ItemShortcut>
-            </Dropdown.Item>
-            <Dropdown.Separator />
-            <Dropdown.Item tone="danger">
-              <Dropdown.ItemIcon>
-                <Icon name="action.delete" />
-              </Dropdown.ItemIcon>
-              Удалить
-            </Dropdown.Item>
-          </Dropdown.Content>
-        </Dropdown.Root>
+        <div key={size}>
+          <Dropdown.Root>
+            <Dropdown.Trigger>
+              <Button.Root variant="soft" tone="neutral" size={size}>
+                Документ
+              </Button.Root>
+            </Dropdown.Trigger>
+            <Dropdown.Content size={size}>
+              <Dropdown.Item>
+                <Dropdown.ItemIcon>
+                  <Icon name="action.copy" />
+                </Dropdown.ItemIcon>
+                Дублировать
+                <Dropdown.ItemShortcut>⌘D</Dropdown.ItemShortcut>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <Dropdown.ItemIcon>
+                  <Icon name="action.download" />
+                </Dropdown.ItemIcon>
+                Скачать
+                <Dropdown.ItemShortcut>⌘S</Dropdown.ItemShortcut>
+              </Dropdown.Item>
+              <Dropdown.Separator />
+              <Dropdown.Item tone="danger">
+                <Dropdown.ItemIcon>
+                  <Icon name="action.delete" />
+                </Dropdown.ItemIcon>
+                Удалить
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+        </div>
       ))}
-    </>
+    </div>
   );
 }

package/src/components/dropdown/examples/states.tsx

@@ -1,35 +1,43 @@
 /** A regular, a disabled and a destructive item; arrow keys skip the disabled one — `disabled`, `tone`. */
-import { Button, Dropdown, Icon } from "prime-ui-kit";
+import { Button, Dropdown, Icon, Typography } from "prime-ui-kit";
 
 export default function DropdownStatesExample() {
   return (
-    <Dropdown.Root>
-      <Dropdown.Trigger>
-        <Button.Root variant="soft" tone="neutral">
-          Документ
-        </Button.Root>
-      </Dropdown.Trigger>
-      <Dropdown.Content>
-        <Dropdown.Item>
-          <Dropdown.ItemIcon>
-            <Icon name="action.copy" />
-          </Dropdown.ItemIcon>
-          Дублировать
-        </Dropdown.Item>
-        <Dropdown.Item disabled>
-          <Dropdown.ItemIcon>
-            <Icon name="status.locked" />
-          </Dropdown.ItemIcon>
-          Архивировать — нет прав
-        </Dropdown.Item>
-        <Dropdown.Separator />
-        <Dropdown.Item tone="danger">
-          <Dropdown.ItemIcon>
-            <Icon name="action.delete" />
-          </Dropdown.ItemIcon>
-          Удалить
-        </Dropdown.Item>
-      </Dropdown.Content>
-    </Dropdown.Root>
+    <div>
+      <div>
+        <Dropdown.Root>
+          <Dropdown.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              Документ
+            </Button.Root>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon>
+                <Icon name="action.copy" />
+              </Dropdown.ItemIcon>
+              Дублировать
+            </Dropdown.Item>
+            <Dropdown.Item disabled>
+              <Dropdown.ItemIcon>
+                <Icon name="status.locked" />
+              </Dropdown.ItemIcon>
+              Архивировать
+              <Dropdown.ItemDescription>Доступно владельцу документа</Dropdown.ItemDescription>
+            </Dropdown.Item>
+            <Dropdown.Separator />
+            <Dropdown.Item tone="danger">
+              <Dropdown.ItemIcon>
+                <Icon name="action.delete" />
+              </Dropdown.ItemIcon>
+              Удалить
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          disabled · tone="danger"
+        </Typography>
+      </div>
+    </div>
   );
 }

package/src/components/empty-page/COMPONENT.md

@@ -40,7 +40,7 @@ EmptyPage.Root               centered column; size, layout, tone (role="alert" w
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Icon tile, title type and padding; given to the controls inside. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Icon tile, title type and padding; given to the controls inside. Without it the tier of its host, else `m`. |
 | `layout` | `"default" \| "fill" \| "compact"` | `"default"` | `default` sizes by content; `fill` stretches to the parent's height and centers; `compact` — a quiet state inside a menu or list: smaller text and icon, no entrance motion. |
 | `tone` | `"neutral" \| "danger"` | `"neutral"` | `neutral` — nothing here (yet); `danger` — the region failed to load: the icon tile turns danger and the root is `role="alert"` unless you pass a `role`. |
 | `labels` | `Partial<EmptyPageLabels>` | — | Built-in strings, see Labels. |
@@ -51,15 +51,22 @@ EmptyPage.Root               centered column; size, layout, tone (role="alert" w
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `tone` | `"neutral" \| "accent" \| "danger"` | `the root's `tone`` | `neutral` — no data yet, `accent` — a first run and a call to start, `danger` — a failed load. |
+| `tone` | `"neutral" \| "accent" \| "danger"` | the root's `tone` | `neutral` — no data yet, `accent` — a first run and a call to start, `danger` — a failed load. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (the icon), `className` and the other div attributes. |
 
-### EmptyPage.Title · EmptyPage.Description
-`ref` → the element. `<h2>` (or `as`) and `<p>`, both capped at the reading width.
+### EmptyPage.Title
+`ref` → the element. An `<h2>` (or `as`) capped at the reading width.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `"h2" \| "h3" \| "h4" \| "p"` | `"h2"` | Tag that fits the outline; the look does not change. `p` inside menus, lists and table cells. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `id` (for `aria-labelledby`), `className` and the other attributes. |
+
+### EmptyPage.Description
+`ref` → `HTMLParagraphElement`. A `<p>` capped at the reading width.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `as` | `"h2" \| "h3" \| "h4" \| "p"` | `"h2"` | Title: tag that fits the outline; the look does not change. `p` inside menus, lists and table cells. |
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `id` (for `aria-labelledby`), `className` and the other attributes. |
 
 ### EmptyPage.Actions
@@ -124,15 +131,19 @@ EmptyPage.Root               centered column; size, layout, tone (role="alert" w
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Enter` · `Space` | On `EmptyPage.RetryButton`: retry the load; while the retry runs the button is loading and ignores presses. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `tone="danger"` makes the root `role="alert"`, so the failure is announced when it appears; a `role` you pass replaces it.
 - The title is an `<h2>` (`as` picks `h3` / `h4` by the outline, `p` inside menus, lists and table cells); link the root to it with `aria-labelledby` when the empty state replaces a whole region.
 - In a filtered menu or list set `role="status"`, so screen readers announce «Ничего не найдено».
-- The icon is decorative: pass it with `aria-hidden`.
+- `EmptyPage.Icon` is `aria-hidden`: the tile is decorative, the title says what the state is.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -148,12 +159,12 @@ EmptyPage.Root               centered column; size, layout, tone (role="alert" w
 | [variants.tsx](examples/variants.tsx) | The tone tells why the area is empty: no data yet, a first run, or a failed load with a retry — `tone`, `EmptyPage.RetryButton`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier changes the icon tile, the title and the padding; buttons in Actions take the same size — `size`. |
 | [data-region.tsx](examples/data-region.tsx) | An empty data region: the empty state stretches over the rest of a card with a header — `layout`. |
-| [region-error.tsx](examples/region-error.tsx) | A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`. |
-| [compact.tsx](examples/compact.tsx) | The quiet empty state of a search panel: no entrance motion, smaller text, a paragraph title, one action — `layout`, `as`. |
-| [narrow.tsx](examples/narrow.tsx) | In a 320 px side panel the text wraps under the tile and the actions wrap to a second line. |
+| [region-error.tsx](examples/region-error.tsx) | A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in; its text comes from labels — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`, `labels`. |
+| [compact.tsx](examples/compact.tsx) | The quiet empty state of a search popover: no entrance motion, smaller text, a paragraph title, one action — `layout`, `as`. |
+| [narrow.tsx](examples/narrow.tsx) | In a 320 px side panel the text wraps under the tile and the actions wrap to a second line — `EmptyPage.Actions`. |
 
 ## Mistakes
-- Buttons in a non-`m` EmptyPage without `size` → they take the root's tier from context; do not pass another one.
+- A `size` on the Buttons of a sized EmptyPage → leave it out: they take the root's tier from context.
 - A failed load drawn as a neutral empty state → `tone="danger"` on the root; the icon follows.
 - A hand-made «Повторить» with its own pending flag → `EmptyPage.RetryButton` with an async `onRetry`.
 - Clearing the error the moment the retry starts → keep the error state until the retry settles; the button shows the wait.

package/src/components/empty-page/examples/compact.tsx

@@ -1,23 +1,33 @@
-/** The quiet empty state of a search panel: no entrance motion, smaller text, a paragraph title, one action — `layout`, `as`. */
-import { Button, EmptyPage, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** The quiet empty state of a search popover: no entrance motion, smaller text, a paragraph title, one action — `layout`, `as`. */
+import { Button, EmptyPage, Icon, Popover } from "prime-ui-kit";
 
 export default function EmptyPageCompactExample() {
   return (
-    <div className={styles.panel}>
-      <EmptyPage.Root layout="compact" size="s" role="status">
-        <EmptyPage.Icon>
-          <Icon name="action.search" />
-        </EmptyPage.Icon>
-        <EmptyPage.Title as="p">Ничего не найдено</EmptyPage.Title>
-        <EmptyPage.Description>Нет клиентов с названием «Северный»</EmptyPage.Description>
-        <EmptyPage.Actions>
-          <Button.Root variant="soft" tone="neutral" size="s">
-            Сбросить поиск
-          </Button.Root>
-        </EmptyPage.Actions>
-      </EmptyPage.Root>
-    </div>
+    <Popover.Root>
+      <Popover.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          <Button.Icon>
+            <Icon name="action.search" />
+          </Button.Icon>
+          Клиенты по запросу «Северный»
+        </Button.Root>
+      </Popover.Trigger>
+      <Popover.Content size="s" aria-label="Клиенты по запросу «Северный»">
+        <EmptyPage.Root layout="compact" role="status">
+          <EmptyPage.Icon>
+            <Icon name="action.search" />
+          </EmptyPage.Icon>
+          <EmptyPage.Title as="p">Ничего не найдено</EmptyPage.Title>
+          <EmptyPage.Description>Нет клиентов с названием «Северный»</EmptyPage.Description>
+          <EmptyPage.Actions>
+            <Popover.Close>
+              <Button.Root variant="soft" tone="neutral">
+                Сбросить поиск
+              </Button.Root>
+            </Popover.Close>
+          </EmptyPage.Actions>
+        </EmptyPage.Root>
+      </Popover.Content>
+    </Popover.Root>
   );
 }

package/src/components/empty-page/examples/examples.module.css

@@ -1,53 +1,10 @@
 /* Layout of the EmptyPage scenarios: semantic tokens only. */
 
-/* sizes.tsx, variants.tsx: cells of 16rem that wrap; an odd last cell stays centered. */
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-.grid > * {
-  flex: 0 1 calc(var(--prime-space-16) * 4);
-  min-width: 0;
-}
-
 /* data-region.tsx, region-error.tsx: the Card's minimum height that the state fills. */
 .region {
   min-height: calc(var(--prime-space-24) * 3);
 }
 
-/* region-error.tsx: the loaded rows — client and amount at the two ends. */
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-3);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.row {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--prime-space-4);
-  min-width: 0;
-}
-
-/* compact.tsx: a floating panel (menu / listbox) the compact empty state sits in. */
-.panel {
-  box-sizing: border-box;
-  width: min(100%, var(--prime-panel-min-width));
-  padding: var(--prime-panel-padding);
-  border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-layer-floating-bg);
-  box-shadow: var(--prime-shadow-overlay);
-}
-
 /* narrow.tsx: a 320px side panel (the Card's width). */
 .narrow {
   width: min(100%, calc(var(--prime-space-20) * 4));

package/src/components/empty-page/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** In a 320 px side panel the text wraps under the tile and the actions wrap to a second line. */
+/** In a 320 px side panel the text wraps under the tile and the actions wrap to a second line — `EmptyPage.Actions`. */
 import { Button, Card, EmptyPage, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -15,10 +15,10 @@ export default function EmptyPageNarrowExample() {
           Под выбранные регион и категорию никто не подходит. Ослабьте фильтры.
         </EmptyPage.Description>
         <EmptyPage.Actions>
-          <Button.Root variant="outline" tone="neutral" size="s">
+          <Button.Root variant="outline" tone="neutral">
             Сбросить фильтры
           </Button.Root>
-          <Button.Root size="s">Пригласить поставщика</Button.Root>
+          <Button.Root>Пригласить поставщика</Button.Root>
         </EmptyPage.Actions>
       </EmptyPage.Root>
     </Card.Root>

package/src/components/empty-page/examples/region-error.tsx

@@ -1,5 +1,5 @@
-/** A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`. */
-import { Button, Card, Crossfade, EmptyPage, Icon, Skeleton, Typography } from "prime-ui-kit";
+/** A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in; its text comes from labels — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`, `labels`. */
+import { Button, Card, Crossfade, DescriptionList, EmptyPage, Icon, Skeleton } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -53,7 +53,13 @@ export default function EmptyPageRegionErrorExample() {
           {state === "loading" ? (
             <Skeleton lines={3} />
           ) : state === "error" ? (
-            <EmptyPage.Root layout="fill" size="s" tone="danger" aria-labelledby="invoices-error">
+            <EmptyPage.Root
+              layout="fill"
+              size="s"
+              tone="danger"
+              labels={{ retry: "Загрузить снова" }}
+              aria-labelledby="invoices-error"
+            >
               <EmptyPage.Icon>
                 <Icon name="status.offline" />
               </EmptyPage.Icon>
@@ -66,18 +72,13 @@ export default function EmptyPageRegionErrorExample() {
               </EmptyPage.Actions>
             </EmptyPage.Root>
           ) : (
-            <ul className={styles.list}>
+            <DescriptionList.Root align="end">
               {INVOICES.map((invoice) => (
-                <li key={invoice.id} className={styles.row}>
-                  <Typography as="span" variant="body-m">
-                    {invoice.client}
-                  </Typography>
-                  <Typography as="span" variant="body-m" tone="secondary">
-                    {invoice.amount}
-                  </Typography>
-                </li>
+                <DescriptionList.Item key={invoice.id} label={invoice.client}>
+                  {invoice.amount}
+                </DescriptionList.Item>
               ))}
-            </ul>
+            </DescriptionList.Root>
           )}
         </Crossfade>
       </Card.Body>

package/src/components/empty-page/examples/sizes.tsx

@@ -1,24 +1,24 @@
 /** Every tier changes the icon tile, the title and the padding; buttons in Actions take the same size — `size`. */
 import { Button, EmptyPage, Icon } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function EmptyPageSizesExample() {
   return (
-    <div className={styles.grid}>
+    <div>
       {SIZES.map((size) => (
-        <EmptyPage.Root key={size} size={size} aria-labelledby={`empty-size-${size}`}>
-          <EmptyPage.Icon>
-            <Icon name="object.document" />
-          </EmptyPage.Icon>
-          <EmptyPage.Title id={`empty-size-${size}`}>Счетов нет · {size}</EmptyPage.Title>
-          <EmptyPage.Description>Выставленные счета появятся здесь.</EmptyPage.Description>
-          <EmptyPage.Actions>
-            <Button.Root size={size}>Выставить счёт</Button.Root>
-          </EmptyPage.Actions>
-        </EmptyPage.Root>
+        <div key={size}>
+          <EmptyPage.Root size={size} aria-labelledby={`empty-size-${size}`}>
+            <EmptyPage.Icon>
+              <Icon name="object.document" />
+            </EmptyPage.Icon>
+            <EmptyPage.Title id={`empty-size-${size}`}>Счетов нет · {size}</EmptyPage.Title>
+            <EmptyPage.Description>Выставленные счета появятся здесь.</EmptyPage.Description>
+            <EmptyPage.Actions>
+              <Button.Root>Выставить счёт</Button.Root>
+            </EmptyPage.Actions>
+          </EmptyPage.Root>
+        </div>
       ))}
     </div>
   );

package/src/components/empty-page/examples/variants.tsx

@@ -1,43 +1,47 @@
 /** The tone tells why the area is empty: no data yet, a first run, or a failed load with a retry — `tone`, `EmptyPage.RetryButton`. */
 import { Button, EmptyPage, Icon } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 /** A retry that answers after a second, as a slow server would. */
 const retryInbox = () => new Promise<void>((resolve) => window.setTimeout(resolve, 1000));
 
 export default function EmptyPageVariantsExample() {
   return (
-    <div className={styles.grid}>
-      <EmptyPage.Root size="s" aria-labelledby="tone-neutral">
-        <EmptyPage.Icon>
-          <Icon name="object.inbox" />
-        </EmptyPage.Icon>
-        <EmptyPage.Title id="tone-neutral">Входящих нет</EmptyPage.Title>
-        <EmptyPage.Description>Новые заявки появятся здесь.</EmptyPage.Description>
-      </EmptyPage.Root>
+    <div>
+      <div>
+        <EmptyPage.Root size="s" aria-labelledby="tone-neutral">
+          <EmptyPage.Icon>
+            <Icon name="object.inbox" />
+          </EmptyPage.Icon>
+          <EmptyPage.Title id="tone-neutral">Входящих нет</EmptyPage.Title>
+          <EmptyPage.Description>Новые заявки появятся здесь.</EmptyPage.Description>
+        </EmptyPage.Root>
+      </div>
 
-      <EmptyPage.Root size="s" aria-labelledby="tone-accent">
-        <EmptyPage.Icon tone="accent">
-          <Icon name="object.rocket" />
-        </EmptyPage.Icon>
-        <EmptyPage.Title id="tone-accent">Создайте первый проект</EmptyPage.Title>
-        <EmptyPage.Description>Проекты объединяют задачи, файлы и команду.</EmptyPage.Description>
-        <EmptyPage.Actions>
-          <Button.Root>Создать проект</Button.Root>
-        </EmptyPage.Actions>
-      </EmptyPage.Root>
+      <div>
+        <EmptyPage.Root size="s" aria-labelledby="tone-accent">
+          <EmptyPage.Icon tone="accent">
+            <Icon name="object.rocket" />
+          </EmptyPage.Icon>
+          <EmptyPage.Title id="tone-accent">Создайте первый проект</EmptyPage.Title>
+          <EmptyPage.Description>Проекты объединяют задачи, файлы и команду.</EmptyPage.Description>
+          <EmptyPage.Actions>
+            <Button.Root>Создать проект</Button.Root>
+          </EmptyPage.Actions>
+        </EmptyPage.Root>
+      </div>
 
-      <EmptyPage.Root size="s" tone="danger" aria-labelledby="tone-danger">
-        <EmptyPage.Icon>
-          <Icon name="status.offline" />
-        </EmptyPage.Icon>
-        <EmptyPage.Title id="tone-danger">Не удалось загрузить</EmptyPage.Title>
-        <EmptyPage.Description>Сервер не ответил. Проверьте соединение.</EmptyPage.Description>
-        <EmptyPage.Actions>
-          <EmptyPage.RetryButton onRetry={retryInbox} />
-        </EmptyPage.Actions>
-      </EmptyPage.Root>
+      <div>
+        <EmptyPage.Root size="s" tone="danger" aria-labelledby="tone-danger">
+          <EmptyPage.Icon>
+            <Icon name="status.offline" />
+          </EmptyPage.Icon>
+          <EmptyPage.Title id="tone-danger">Не удалось загрузить</EmptyPage.Title>
+          <EmptyPage.Description>Сервер не ответил. Проверьте соединение.</EmptyPage.Description>
+          <EmptyPage.Actions>
+            <EmptyPage.RetryButton onRetry={retryInbox} />
+          </EmptyPage.Actions>
+        </EmptyPage.Root>
+      </div>
     </div>
   );
 }