@persona/design-system 0.1.9 → 0.2.0

package/dist/types2.d.mts

@@ -1,2 +1,2 @@
-import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-mb3woqzE.mjs";
 export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, TopLevelFilterRule };

package/dist/types3.d.mts

@@ -1,2 +1,2 @@
-import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import { t as ValueControlProps } from "./types-BKEwt0uq.mjs";
 export { ValueControlProps };

package/dist/types4.d.mts

@@ -1,2 +1,2 @@
-import { t as PaginationParams } from "./types-TV9nVfSe.mjs";
+import { t as PaginationParams } from "./types-DVsBRqjZ.mjs";
 export { PaginationParams };

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { p as FooterAction } from "./ComboboxBase-BsPf8BZh.mjs";
+import { p as FooterAction } from "./ComboboxBase-B8evOZpf.mjs";
 import { KeyboardEvent } from "react";
 
 //#region components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useFilterStateV2-DCQghouq.d.mts → useFilterStateV2-CGzRyv0i.d.mts}

@@ -1,5 +1,5 @@
-import { f as FilterStateV2, l as FilterRule, n as CompoundExpression } from "./types-D58IoRx6.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import { f as FilterStateV2, l as FilterRule, n as CompoundExpression } from "./types-mb3woqzE.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.d.ts
 interface UseFilterStateV2Options {
@@ -90,4 +90,4 @@ interface UseFilterStateV2Result {
 declare function useFilterStateV2(options: UseFilterStateV2Options): UseFilterStateV2Result;
 //#endregion
 export { UseFilterStateV2Result as n, useFilterStateV2 as r, UseFilterStateV2Options as t };
-//# sourceMappingURL=useFilterStateV2-DCQghouq.d.mts.map
+//# sourceMappingURL=useFilterStateV2-CGzRyv0i.d.mts.map

package/dist/useFilterStateV2.d.mts

@@ -1,2 +1,2 @@
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DCQghouq.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-CGzRyv0i.mjs";
 export { UseFilterStateV2Options, UseFilterStateV2Result, useFilterStateV2 };

package/dist/{useFormField-D8mLsiQc.d.mts → useFormField-DhwEi45-.d.mts}

@@ -1,4 +1,4 @@
-import { t as ErrorProps } from "./ErrorProps-CN2XjaOX.mjs";
+import { t as ErrorProps } from "./ErrorProps-DX50vo-U.mjs";
 import * as _$react from "react";
 
 //#region components/FormControl/useFormField.d.ts
@@ -27,4 +27,4 @@ declare const useFormField: (props: Partial<FormControlContextProps>) => {
 };
 //#endregion
 export { FormControlContextProps as n, useFormField as r, FormControlContext as t };
-//# sourceMappingURL=useFormField-D8mLsiQc.d.mts.map
+//# sourceMappingURL=useFormField-DhwEi45-.d.mts.map

package/dist/useFormField.d.mts

@@ -1,2 +1,2 @@
-import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField-D8mLsiQc.mjs";
+import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField-DhwEi45-.mjs";
 export { FormControlContext, FormControlContextProps, useFormField as default };

package/dist/{useTableBoxDragAndDrop-BMo-iaUF.d.mts → useTableBoxDragAndDrop-CsnN52lx.d.mts}

@@ -66,4 +66,4 @@ declare const useTableBoxDragAndDrop: <T extends object>({
 }: UseTableBoxDragAndDropArgs<T>) => UseTableBoxDragAndDropResult;
 //#endregion
 export { ReorderConfig as n, useTableBoxDragAndDrop as r, DragDirection as t };
-//# sourceMappingURL=useTableBoxDragAndDrop-BMo-iaUF.d.mts.map
+//# sourceMappingURL=useTableBoxDragAndDrop-CsnN52lx.d.mts.map

package/dist/useTableBoxDragAndDrop.d.mts

@@ -1,2 +1,2 @@
-import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-BMo-iaUF.mjs";
+import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-CsnN52lx.mjs";
 export { DragDirection, ReorderConfig, useTableBoxDragAndDrop };

package/dist/{useToggle-Bo3yd14Y.mjs → useToggle-3k3EkV8V.mjs}

@@ -18,4 +18,4 @@ function useToggle(initialValue = false) {
 //#endregion
 export { useToggle as t };
 
-//# sourceMappingURL=useToggle-Bo3yd14Y.mjs.map
+//# sourceMappingURL=useToggle-3k3EkV8V.mjs.map

package/dist/{useToggle-Bo3yd14Y.mjs.map → useToggle-3k3EkV8V.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useToggle-Bo3yd14Y.mjs","names":[],"sources":["../lib/useToggle.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\ninterface UseToggleCallbacks {\n  set: (value: boolean) => void;\n  toggle: () => void;\n  enable: () => void;\n  disable: () => void;\n}\n\n/**\n * useToggle\n *\n * Boolean state hook that provides callbacks for enabling, disabling, flipping\n * and setting state.\n */\nexport default function useToggle(initialValue = false): [boolean, UseToggleCallbacks] {\n  const [value, setValue] = useState<boolean>(!!initialValue);\n  const set = useCallback((newValue: boolean) => setValue(newValue), []);\n  const toggle = useCallback(() => setValue(!value), [value]);\n  const enable = useCallback(() => setValue(true), []);\n  const disable = useCallback(() => setValue(false), []);\n  return [value, { set, toggle, enable, disable }];\n}\n"],"mappings":";;;;;;;;AAeA,SAAwB,UAAU,eAAe,OAAsC;CACrF,MAAM,CAAC,OAAO,YAAY,SAAkB,CAAC,CAAC,aAAa;AAK3D,QAAO,CAAC,OAAO;EAAE,KAJL,aAAa,aAAsB,SAAS,SAAS,EAAE,EAAE,CAIjD;EAAE,QAHP,kBAAkB,SAAS,CAAC,MAAM,EAAE,CAAC,MAAM,CAG9B;EAAE,QAFf,kBAAkB,SAAS,KAAK,EAAE,EAAE,CAEf;EAAE,SADtB,kBAAkB,SAAS,MAAM,EAAE,EAAE,CACR;EAAE,CAAC"}
+{"version":3,"file":"useToggle-3k3EkV8V.mjs","names":[],"sources":["../lib/useToggle.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\ninterface UseToggleCallbacks {\n  set: (value: boolean) => void;\n  toggle: () => void;\n  enable: () => void;\n  disable: () => void;\n}\n\n/**\n * useToggle\n *\n * Boolean state hook that provides callbacks for enabling, disabling, flipping\n * and setting state.\n */\nexport default function useToggle(initialValue = false): [boolean, UseToggleCallbacks] {\n  const [value, setValue] = useState<boolean>(!!initialValue);\n  const set = useCallback((newValue: boolean) => setValue(newValue), []);\n  const toggle = useCallback(() => setValue(!value), [value]);\n  const enable = useCallback(() => setValue(true), []);\n  const disable = useCallback(() => setValue(false), []);\n  return [value, { set, toggle, enable, disable }];\n}\n"],"mappings":";;;;;;;;AAeA,SAAwB,UAAU,eAAe,OAAsC;CACrF,MAAM,CAAC,OAAO,YAAY,SAAkB,CAAC,CAAC,aAAa;AAK3D,QAAO,CAAC,OAAO;EAAE,KAJL,aAAa,aAAsB,SAAS,SAAS,EAAE,EAAE,CAIjD;EAAE,QAHP,kBAAkB,SAAS,CAAC,MAAM,EAAE,CAAC,MAAM,CAG9B;EAAE,QAFf,kBAAkB,SAAS,KAAK,EAAE,EAAE,CAEf;EAAE,SADtB,kBAAkB,SAAS,MAAM,EAAE,EAAE,CACR;EAAE,CAAC"}

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-BsPf8BZh.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-B8evOZpf.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/dist/{utilities-BO_95qFA.d.mts → utilities-DnSIlR1i.d.mts}

@@ -6,4 +6,4 @@
 type RequireOneOf<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys];
 //#endregion
 export { RequireOneOf as t };
-//# sourceMappingURL=utilities-BO_95qFA.d.mts.map
+//# sourceMappingURL=utilities-DnSIlR1i.d.mts.map

package/dist/utilities.d.mts

@@ -1,2 +1,2 @@
-import { t as RequireOneOf } from "./utilities-BO_95qFA.mjs";
+import { t as RequireOneOf } from "./utilities-DnSIlR1i.mjs";
 export { RequireOneOf };

package/dist/utils/storybook.mjs

@@ -1,4 +1,4 @@
-import { n as Stack } from "../Stack-Bl54WmhY.mjs";
+import { n as Stack } from "../Stack-ckRN7LrP.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region utils/storybook.tsx
 const withStack = (Story) => {

package/dist/utils/testing.d.mts

@@ -1,6 +1,6 @@
+import { ReactElement } from "react";
 import * as _$_testing_library_react0 from "@testing-library/react";
 import { RenderOptions, screen } from "@testing-library/react";
-import { ReactElement } from "react";
 import * as _$_testing_library_dom_types_queries0 from "@testing-library/dom/types/queries";
 
 //#region utils/testing.d.ts

package/dist/utils/testing.mjs

@@ -1,7 +1,7 @@
 import PDSProvider from "../lib/PDSProvider.mjs";
+import { RouterProvider } from "react-aria-components";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
-import { RouterProvider } from "react-aria-components";
 import { RouterProvider as RouterProvider$1, createMemoryRouter } from "react-router-dom";
 //#region utils/testing.tsx
 const AllTheProviders = ({ children, includeRouter = false }) => {

package/dist/utils.d.mts

@@ -1,4 +1,4 @@
-import { u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { u as FilterRuleValue } from "./types-mb3woqzE.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/utils.d.ts
 /**

package/dist/{validation-vLh3t2dk.d.mts → validation-BdP2vajF.d.mts}

@@ -1,5 +1,5 @@
-import { f as FilterStateV2, l as FilterRule } from "./types-D58IoRx6.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import { f as FilterStateV2, l as FilterRule } from "./types-mb3woqzE.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/validation.d.ts
 /**
@@ -48,4 +48,4 @@ declare function pruneToRegistry(state: FilterStateV2, registry: FieldRegistry |
 declare function hasCompleteValue(rule: FilterRule, registry: FieldRegistry): boolean;
 //#endregion
 export { isFilterStateV2 as n, pruneToRegistry as r, hasCompleteValue as t };
-//# sourceMappingURL=validation-vLh3t2dk.d.mts.map
+//# sourceMappingURL=validation-BdP2vajF.d.mts.map

package/dist/validation.d.mts

@@ -1,2 +1,2 @@
-import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-vLh3t2dk.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-BdP2vajF.mjs";
 export { hasCompleteValue, isFilterStateV2, pruneToRegistry };

package/dist/{value-control-resolver-CE-bqdAl.d.mts → value-control-resolver-CiGEHQAc.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-mb3woqzE.mjs";
 import { ReactNode } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.d.ts
@@ -43,4 +43,4 @@ type ValueControlResolver = (opts: ResolveValueControlOptions) => ReactNode | un
 declare function resolveValueControl(opts: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
 //#endregion
 export { ValueControlResolver as n, resolveValueControl as r, ResolveValueControlOptions as t };
-//# sourceMappingURL=value-control-resolver-CE-bqdAl.d.mts.map
+//# sourceMappingURL=value-control-resolver-CiGEHQAc.d.mts.map

package/dist/value-control-resolver.d.mts

@@ -1,2 +1,2 @@
-import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-CE-bqdAl.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-CiGEHQAc.mjs";
 export { ResolveValueControlOptions, ValueControlResolver, resolveValueControl };

package/llms.txt

@@ -0,0 +1,43 @@
+# @persona/design-system
+
+> React components and layouts for Persona UI. Design tokens (`Color`, `Spacing`, `Typography`) come from the companion package `@persona/design-tokens`.
+
+Agent guidance ships inside this package. Before reading `dist/` bundles or reverse-engineering
+component APIs, read the skills below — they cover component selection, props, and common
+pitfalls. In a repo with TanStack Intent, run `yarn intent list` / `yarn intent load
+@persona/design-system#ui-authoring`. Without Intent, read the same files directly from
+`node_modules/@persona/design-system/skills/`.
+
+For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`, e.g.
+`dist/components/Table/index.d.mts`) over the minified `*.mjs` bundles.
+
+## Skills
+
+- [ui-authoring](skills/ui-authoring/SKILL.md): component-first table (which component for which need), design tokens, table guidelines (DataTable vs TableBox vs TableLayout), loading/empty states, forms, testing, Storybook, charts
+- [Components reference](skills/ui-authoring/COMPONENTS.md): props + patterns for ConfigFormGroup, ListBox, TableBox, Card, Modal, form state hook
+- [Examples](skills/ui-authoring/EXAMPLES.md): copy-paste patterns (Buttons, Forms, Modals, DataTable, TabBar, Tooltip, Spinner, Banner, Sticker, Stack, Text)
+- [Token reference](skills/ui-authoring/REFERENCE.md): full Color / Spacing / Typography catalog
+
+## Imports
+
+Import from subpaths, not the package root — e.g.
+`import { Button } from '@persona/design-system/components/Button'`.
+The full export map is in `package.json#exports`; components live under
+`./components/<Name>`, patterns under `./patterns/<Name>`, mixins/variables/utils under
+their own subpaths.
+
+## Common components
+
+- Layout: `Stack` / `HStack` (components/Stack), `Spacer`
+- Text: `Heading`, `Paragraph`, `Label` (components/Text)
+- Tables: `DataTable` (data views w/ pagination + sorting), `TableBox` (editable form tables), `TableLayout` + `Table`/`TableRow`/`TableCell`/`TableHeaderCell` primitives (components/Table) — `TableLayout` has built-in `isLoading`/`isEmpty`/`nullState`/`showHeader` handling
+- Page chrome: `PageHeader` (title or breadcrumbs variant), `Breadcrumbs`, `TabBar`
+- Feedback: `Spinner`, `Banner`, `Toast`, `LoadingShimmer`, `ProgressBar`
+- Overlays: `Modal`, `Popover`, `Tooltip` / `TextUnderlineTooltip`, `DropdownMenu`
+- Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`
+- Status: `Sticker` (status badges), `Badge` (counts), `StatusIndicator`
+
+## Testing
+
+Use `dsRender` from `@persona/design-system/utils/testing` (wraps ThemeProvider); prefer
+role/label/text queries over test IDs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -10,7 +10,8 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "skills"
+    "skills",
+    "llms.txt"
   ],
   "types": "./dist/index.d.mts",
   "exports": {
@@ -71,7 +72,6 @@
     "./components/Toast": "./dist/components/Toast/index.mjs",
     "./components/Toggle": "./dist/components/Toggle/index.mjs",
     "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
-    "./layouts/LayoutLoadingShimmer": "./dist/layouts/LayoutLoadingShimmer/index.mjs",
     "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
     "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
     "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
@@ -97,6 +97,8 @@
     "./mixins/menuItem": "./dist/mixins/menuItem.mjs",
     "./mixins/print": "./dist/mixins/print/index.mjs",
     "./mixins/text": "./dist/mixins/text.mjs",
+    "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
+    "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
     "./theme": "./dist/theme.mjs",
     "./utils/storybook": "./dist/utils/storybook.mjs",
     "./utils/testing": "./dist/utils/testing.mjs",
@@ -169,7 +171,7 @@
     "csstype": "^3.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.30.1",
+    "react-router-dom": "^6.30.5",
     "styled-components": "^5.3.5",
     "tsdown": "^0.21.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2"
@@ -249,7 +251,6 @@
       "./components/Toast": "./dist/components/Toast/index.mjs",
       "./components/Toggle": "./dist/components/Toggle/index.mjs",
       "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
-      "./layouts/LayoutLoadingShimmer": "./dist/layouts/LayoutLoadingShimmer/index.mjs",
       "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
       "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
       "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
@@ -275,6 +276,8 @@
       "./mixins/menuItem": "./dist/mixins/menuItem.mjs",
       "./mixins/print": "./dist/mixins/print/index.mjs",
       "./mixins/text": "./dist/mixins/text.mjs",
+      "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
+      "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
       "./theme": "./dist/theme.mjs",
       "./utils/storybook": "./dist/utils/storybook.mjs",
       "./utils/testing": "./dist/utils/testing.mjs",

package/skills/ui-authoring/SKILL.md

@@ -3,7 +3,7 @@ name: ui-authoring
 description: Use when implementing UI, styling React components, working with design tokens, or making frontend changes, or when file paths include design-system/components/ or styled-components.
 metadata:
   library: '@persona/design-system'
-  library_version: '0.1.8'
+  library_version: '0.2.0'
 ---
 
 # UI Authoring
@@ -42,7 +42,10 @@ import { Color, Spacing, Typography } from '@persona/design-tokens';
 | Alert / notification | `Banner` | `@persona/design-system/components/Banner` |
 | Standalone tooltip | `Tooltip` | `@persona/design-system/components/Tooltip` |
 | Tooltip on a label | `TextUnderlineTooltip` | `@persona/design-system/components/Tooltip` |
+| Page title bar | `PageHeader` | `@persona/design-system/components/PageHeader` |
+| Page shell | `Container`, `Section`, `Backdrop` | `@persona/design-system/patterns/PageLayout` |
 | Data table | `DataTable` | `@persona/design-system/components/DataTable` |
+| Table with loading/empty states | `TableLayout` + `Table` primitives | `@persona/design-system/components/Table` |
 | Editable / form table | `TableBox`, `TableBoxField` | `@persona/design-system/components/TableBox`, `FormField` |
 
 ## Tooltip on Labels
@@ -72,6 +75,7 @@ Never hand-roll `<table>`, `<thead>`, `<th>`, or `<td>`. Pick the component by u
 
 - **`DataTable`** (`@persona/design-system/components/DataTable`) — data views with pagination, sorting, and server-side data.
 - **`TableBox`** (`@persona/design-system/components/TableBox`) / **`TableBoxField`** (`FormField`) — small, form-adjacent tables in config editors: inline editing, row add/delete, drag-drop reorder. See [COMPONENTS.md — Editable Table (TableBox)](COMPONENTS.md#editable-table-tablebox).
+- **`TableLayout`** (`@persona/design-system/components/Table`, named export `TableLayout`) — lower-level table shell with built-in loading and empty states; use it when composing rows manually from `Table` primitives (`TableRow`, `TableCell`, `TableHeaderCell`).
 
 ### DataTable
 
@@ -80,6 +84,28 @@ Never hand-roll `<table>`, `<thead>`, `<th>`, or `<td>`. Pick the component by u
 - **Status cells**: use `renderCell: ({ cellValue, row }) => <Sticker ...>` in the column config.
 - **Body cell text**: use `size='md'`, not `size='sm'` (sm is for timestamps and captions only).
 
+### TableLayout loading & empty behavior
+
+```tsx
+import { TableLayout, TableHeaderCell, TableRow, TableCell } from '@persona/design-system/components/Table';
+
+<TableLayout
+  headerTR={<><TableHeaderCell>Name</TableHeaderCell><TableHeaderCell>Status</TableHeaderCell></>}
+  isLoading={isLoading}
+  isEmpty={rows.length === 0}
+  nullState={<EmptyState />}
+  showHeader   // keep header + column layout visible while empty/loading
+  stickyHeader
+>
+  {rows.map((row) => <TableRow key={row.id}>…</TableRow>)}
+</TableLayout>
+```
+
+- `isLoading` + rows (or `showHeader`): renders the table with an animated top progress bar and a white overlay — no layout shift.
+- `isLoading` + `isEmpty` **without** `showHeader`: renders only a large centered `Spinner` (`data-loading-indicator='true'`), no table at all. Pass `showHeader` to keep the table header visible during initial load.
+- `isEmpty` + not loading: renders `nullState` (below the header when `showHeader` is set).
+- Other props: `headerTR` (required, the `<th>` row contents), `size` (`'sm' | 'md'`), `containerMaxHeight`, `containerScrollsHorizontally`, `dataTest`.
+
 ## Anti-Patterns
 
 ```tsx

package/dist/Breadcrumbs-W8hIhdHD.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumbs-W8hIhdHD.mjs","names":["Input"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon, EditIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport Input from 'design-system/components/Input';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type BreadcrumbSize = 'md' | 'lg';\n\nexport type BreadcrumbHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nconst COPY_TOOLTIP_LABEL = 'Copy ID';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\n\nexport type BreadcrumbProps = {\n  label: string;\n  size?: BreadcrumbSize;\n  current?: boolean;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  showCopyAction?: boolean;\n  copyValue?: string;\n  copyTooltipLabel?: string;\n  /** Internal dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. */\n  href?: string;\n  /**\n   * Activates a non-current crumb without a route change, for trails that navigate in-place (e.g.\n   * a control panel drilling into a sub-panel). Ignored when `href` is set.\n   */\n  onClick?: () => void;\n  onEdit?: (newLabel: string) => void;\n  editMaxLength?: number;\n  onCopy?: () => void;\n};\n\nconst LABEL_ACTION_GAP = Spacing[2];\nconst ACTION_BUTTON_GAP = Spacing[1];\n\nconst CrumbRow = styled(HStack)`\n  align-items: center;\n  min-width: 0;\n`;\n\nconst crumbLayoutStyles = (size: BreadcrumbSize) => css`\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  min-height: ${({ theme }) => theme.element.height.xs};\n  ${\n    size === 'lg'\n      ? css`\n        font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};\n        line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};\n      `\n      : css``\n  };\n`;\n\nconst editInputTextStyles = (size: BreadcrumbSize, current: boolean) => {\n  if (current) {\n    return size === 'lg' ? paragraphMixins.lgBold : paragraphMixins.mdBold;\n  }\n  return size === 'lg' ? paragraphMixins.lg : paragraphMixins.md;\n};\n\nconst ancestorCrumbStyles = css<{ $size: BreadcrumbSize }>`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => theme.color.text.secondary};\n  text-decoration: none;\n  transition: color ${TransitionDuration.ExtraFast} ease-out;\n  ${focusOutline}\n  ${({ $size }) => crumbLayoutStyles($size)}\n\n  &:hover {\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n`;\n\nconst AncestorNavLink = styled(Link)<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n`;\n\nconst AncestorNavButton = styled.button<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n`;\n\nconst InlineEditInput = styled(Input)<{\n  $size: BreadcrumbSize;\n  $current: boolean;\n  $editMinWidth?: number;\n}>`\n  margin: 0;\n  padding: 2px 10px;\n  width: auto;\n  max-width: 100%;\n  min-width: ${({ $editMinWidth }) => ($editMinWidth != null ? `${$editMinWidth}px` : '0')};\n  field-sizing: content;\n  display: inline-block;\n  ${({ $size, $current }) => editInputTextStyles($size, $current)};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n\n  &:not(:focus) {\n    border-color: transparent;\n  }\n\n  &:hover:not(:disabled) {\n    border-style: solid;\n  }\n`;\n\nconst CurrentLabel = styled(Paragraph)<{ $size: BreadcrumbSize }>`\n  margin: 0;\n  ${({ $size }) => crumbLayoutStyles($size)}\n`;\n\nconst copyToClipboard = async (value: string): Promise<boolean> => {\n  try {\n    if (navigator.clipboard?.writeText == null) {\n      return false;\n    }\n\n    await navigator.clipboard.writeText(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nconst BreadcrumbCopyButton = ({\n  copyValue,\n  copyTooltipLabel = COPY_TOOLTIP_LABEL,\n  onCopy,\n}: {\n  copyValue: string;\n  copyTooltipLabel?: string;\n  onCopy?: () => void;\n}) => {\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    const success = await copyToClipboard(copyValue);\n    if (!success) {\n      return;\n    }\n\n    setCopied(true);\n    setTooltipOpen(true);\n    onCopy?.();\n\n    window.setTimeout(() => {\n      setTooltipOpen(false);\n      window.setTimeout(() => setCopied(false), 200);\n    }, 1000);\n  };\n\n  const handleMouseEnter = () => {\n    if (!copied) {\n      setTooltipOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    if (!copied) {\n      setTooltipOpen(false);\n    }\n  };\n\n  const trigger = (\n    <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <IconButton\n        type='button'\n        size='sm'\n        aria-label={`Copy ${copyValue}`}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          void handleCopy();\n        }}\n      >\n        <CopyIcon />\n      </IconButton>\n    </span>\n  );\n\n  return (\n    <Tooltip\n      trigger={trigger}\n      open={tooltipOpen}\n      side='top'\n      sideOffset={4}\n      size='sm'\n      contentAlignment='center'\n      interactive={false}\n      hideArrow\n      portal={false}\n    >\n      {copied ? 'Copied!' : copyTooltipLabel}\n    </Tooltip>\n  );\n};\n\nconst Breadcrumb = ({\n  label,\n  size = 'md',\n  current = false,\n  headingAs = 'h1',\n  showCopyAction = false,\n  copyValue,\n  copyTooltipLabel,\n  href,\n  onClick,\n  onEdit,\n  editMaxLength = DEFAULT_EDIT_MAX_LENGTH,\n  onCopy,\n}: BreadcrumbProps) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState(label);\n  const [editMinWidth, setEditMinWidth] = useState<number | undefined>();\n  const editInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditValue(label);\n    }\n  }, [isEditing, label]);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditMinWidth(undefined);\n      return;\n    }\n\n    const input = editInputRef.current;\n    if (input == null) {\n      return;\n    }\n\n    setEditMinWidth(input.offsetWidth);\n    input.focus();\n    input.select();\n  }, [isEditing]);\n\n  const commitEdit = () => {\n    if (!isEditing) {\n      return;\n    }\n\n    setIsEditing(false);\n    if (editValue !== label) {\n      onEdit?.(editValue);\n    }\n  };\n\n  const inlineActions = !isEditing && (showCopyAction || onEdit) && (\n    <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n      {onEdit && (\n        <IconButton\n          type='button'\n          size='sm'\n          aria-label={`Edit ${label}`}\n          onClick={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            setIsEditing(true);\n          }}\n        >\n          <EditIcon />\n        </IconButton>\n      )}\n      {showCopyAction && copyValue != null && (\n        <BreadcrumbCopyButton\n          copyValue={copyValue}\n          copyTooltipLabel={copyTooltipLabel}\n          onCopy={onCopy}\n        />\n      )}\n    </HStack>\n  );\n\n  if (isEditing) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <InlineEditInput\n          ref={editInputRef}\n          $size={size}\n          $current={current}\n          $editMinWidth={editMinWidth}\n          size='md'\n          aria-label={`Edit ${label}`}\n          maxLength={editMaxLength}\n          value={editValue}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => setEditValue(event.target.value)}\n          onBlur={commitEdit}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              commitEdit();\n            }\n            if (event.key === 'Escape') {\n              setEditValue(label);\n              setIsEditing(false);\n            }\n          }}\n        />\n      </CrumbRow>\n    );\n  }\n\n  if (current) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <CurrentLabel\n          $size={size}\n          size={size === 'lg' ? 'lg' : 'md'}\n          weight='bold'\n          color='primary'\n          as={headingAs}\n        >\n          {label}\n        </CurrentLabel>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  if (href == null && onClick != null) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <AncestorNavButton type='button' onClick={onClick} $size={size}>\n          {label}\n        </AncestorNavButton>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  return (\n    <CrumbRow spacing={LABEL_ACTION_GAP}>\n      <AncestorNavLink to={href ?? ''} $size={size}>\n        {label}\n      </AncestorNavLink>\n      {inlineActions}\n    </CrumbRow>\n  );\n};\n\nexport default Breadcrumb;\n","import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nimport Breadcrumb, {\n  type BreadcrumbHeadingAs,\n  type BreadcrumbProps,\n  type BreadcrumbSize,\n} from './Breadcrumb';\n\nexport type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' | 'current' | 'headingAs'>;\n\nexport type BreadcrumbsProps = {\n  items: BreadcrumbsItemProps[];\n  size?: BreadcrumbSize;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  'aria-label'?: string;\n  className?: string;\n};\n\nconst BreadcrumbList = styled.ol`\n  max-width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n`;\n\nconst BreadcrumbListItem = styled.li`\n  display: flex;\n  align-items: center;\n  min-width: 0;\n`;\n\nconst Separator = styled.span<{ $size: BreadcrumbSize }>`\n  padding: 0 ${Spacing[2]};\n  color: ${({ theme }) => theme.color.text.tertiary};\n  user-select: none;\n  ${({ $size }) => ($size === 'lg' ? paragraphMixins.lg : paragraphMixins.md)};\n`;\n\nexport const Breadcrumbs = ({\n  items,\n  size = 'md',\n  headingAs = 'h1',\n  'aria-label': ariaLabel = 'Breadcrumbs',\n  className,\n}: BreadcrumbsProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const crumbNodes = items.map((item, index) => {\n    const isCurrent = index === items.length - 1;\n\n    return (\n      <BreadcrumbListItem\n        key={`${item.label}-${index}`}\n        aria-current={isCurrent ? 'page' : undefined}\n      >\n        <Breadcrumb {...item} size={size} current={isCurrent} headingAs={headingAs} />\n      </BreadcrumbListItem>\n    );\n  });\n\n  const listItems = intersperse(crumbNodes, (separatorIndex: number) => (\n    <BreadcrumbListItem key={`separator-${separatorIndex}`} aria-hidden='true'>\n      <Separator $size={size}>/</Separator>\n    </BreadcrumbListItem>\n  ));\n\n  return (\n    <nav aria-label={ariaLabel} className={className}>\n      <BreadcrumbList>{listItems}</BreadcrumbList>\n    </nav>\n  );\n};\n\nexport default Breadcrumbs;\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,qBAAqB;AAC3B,MAAM,0BAA0B;AA0BhC,MAAM,mBAAmB,QAAQ;AACjC,MAAM,oBAAoB,QAAQ;AAElC,MAAM,WAAW,OAAO,OAAO;;;;AAK/B,MAAM,qBAAqB,SAAyB,GAAG;;;;iBAItC,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;IAEnD,SAAS,OACL,GAAG;sBACW,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,SAAS;wBAC7C,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,WAAW;UAEjE,GAAG,GACR;;AAGH,MAAM,uBAAuB,MAAsB,YAAqB;AACtE,KAAI,QACF,QAAO,SAAS,OAAO,gBAAgB,SAAS,gBAAgB;AAElE,QAAO,SAAS,OAAO,gBAAgB,KAAK,gBAAgB;;AAG9D,MAAM,sBAAsB,GAA8B;IACtD,gBAAgB,GAAG;YACX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;8BAEF;IAC/C,aAAa;KACZ,EAAE,YAAY,kBAAkB,MAAM,CAAC;;;cAG9B,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;AAIrD,MAAM,kBAAkB,OAAO,KAAK;IAChC,oBAAoB;;AAGxB,MAAM,oBAAoB,OAAO,MAAiC;IAC9D,oBAAoB;;;;;;AAOxB,MAAM,kBAAkB,OAAOA,cAAM;;;;;gBASrB,EAAE,oBAAqB,iBAAiB,OAAO,GAAG,cAAc,MAAM,IAAK;;;KAGtF,EAAE,OAAO,eAAe,oBAAoB,OAAO,SAAS,CAAC;uBAC3C,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;YACxD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;AAWnD,MAAM,eAAe,OAAO,UAAU;;KAEjC,EAAE,YAAY,kBAAkB,MAAM,CAAC;;AAG5C,MAAM,kBAAkB,OAAO,UAAoC;AACjE,KAAI;AACF,MAAI,UAAU,WAAW,aAAa,KACpC,QAAO;AAGT,QAAM,UAAU,UAAU,UAAU,MAAM;AAC1C,SAAO;SACD;AACN,SAAO;;;AAIX,MAAM,wBAAwB,EAC5B,WACA,mBAAmB,oBACnB,aAKI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAM,aAAa,YAAY;AAE7B,MAAI,CAAC,MADiB,gBAAgB,UAAU,CAE9C;AAGF,YAAU,KAAK;AACf,iBAAe,KAAK;AACpB,YAAU;AAEV,SAAO,iBAAiB;AACtB,kBAAe,MAAM;AACrB,UAAO,iBAAiB,UAAU,MAAM,EAAE,IAAI;KAC7C,IAAK;;CAGV,MAAM,yBAAyB;AAC7B,MAAI,CAAC,OACH,gBAAe,KAAK;;CAIxB,MAAM,yBAAyB;AAC7B,MAAI,CAAC,OACH,gBAAe,MAAM;;AAqBzB,QACE,oBAAC,SAAD;EACE,SAAS,oBAlBV,QAAD;GAAM,cAAc;GAAkB,cAAc;aAClD,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,cAAY,QAAQ;IACpB,UAAU,UAAU;AAClB,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;AAClB,iBAAY;;cAGnB,oBAAC,UAAD,EAAY,CAAA;IACD,CAAA;GACR,CAKW;EAChB,MAAM;EACN,MAAK;EACL,YAAY;EACZ,MAAK;EACL,kBAAiB;EACjB,aAAa;EACb,WAAA;EACA,QAAQ;YAEP,SAAS,YAAY;EACd,CAAA;;AAId,MAAM,cAAc,EAClB,OACA,OAAO,MACP,UAAU,OACV,YAAY,MACZ,iBAAiB,OACjB,WACA,kBACA,MACA,SACA,QACA,gBAAgB,yBAChB,aACqB;CACrB,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,cAAc,mBAAmB,UAA8B;CACtE,MAAM,eAAe,OAAyB,KAAK;AAEnD,iBAAgB;AACd,MAAI,CAAC,UACH,cAAa,MAAM;IAEpB,CAAC,WAAW,MAAM,CAAC;AAEtB,iBAAgB;AACd,MAAI,CAAC,WAAW;AACd,mBAAgB,KAAA,EAAU;AAC1B;;EAGF,MAAM,QAAQ,aAAa;AAC3B,MAAI,SAAS,KACX;AAGF,kBAAgB,MAAM,YAAY;AAClC,QAAM,OAAO;AACb,QAAM,QAAQ;IACb,CAAC,UAAU,CAAC;CAEf,MAAM,mBAAmB;AACvB,MAAI,CAAC,UACH;AAGF,eAAa,MAAM;AACnB,MAAI,cAAc,MAChB,UAAS,UAAU;;CAIvB,MAAM,gBAAgB,CAAC,cAAc,kBAAkB,WACrD,qBAAC,QAAD;EAAQ,SAAS;EAAmB,OAAM;YAA1C,CACG,UACC,oBAAC,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAY,QAAQ;GACpB,UAAU,UAAU;AAClB,UAAM,gBAAgB;AACtB,UAAM,iBAAiB;AACvB,iBAAa,KAAK;;aAGpB,oBAAC,UAAD,EAAY,CAAA;GACD,CAAA,EAEd,kBAAkB,aAAa,QAC9B,oBAAC,sBAAD;GACa;GACO;GACV;GACR,CAAA,CAEG;;AAGX,KAAI,UACF,QACE,oBAAC,UAAD;EAAU,SAAS;YACjB,oBAAC,iBAAD;GACE,KAAK;GACL,OAAO;GACP,UAAU;GACV,eAAe;GACf,MAAK;GACL,cAAY,QAAQ;GACpB,WAAW;GACX,OAAO;GACP,WAAW,UAAyC,aAAa,MAAM,OAAO,MAAM;GACpF,QAAQ;GACR,YAAY,UAAU;AACpB,QAAI,MAAM,QAAQ,SAAS;AACzB,WAAM,gBAAgB;AACtB,iBAAY;;AAEd,QAAI,MAAM,QAAQ,UAAU;AAC1B,kBAAa,MAAM;AACnB,kBAAa,MAAM;;;GAGvB,CAAA;EACO,CAAA;AAIf,KAAI,QACF,QACE,qBAAC,UAAD;EAAU,SAAS;YAAnB,CACE,oBAAC,cAAD;GACE,OAAO;GACP,MAAM,SAAS,OAAO,OAAO;GAC7B,QAAO;GACP,OAAM;GACN,IAAI;aAEH;GACY,CAAA,EACd,cACQ;;AAIf,KAAI,QAAQ,QAAQ,WAAW,KAC7B,QACE,qBAAC,UAAD;EAAU,SAAS;YAAnB,CACE,oBAAC,mBAAD;GAAmB,MAAK;GAAkB;GAAS,OAAO;aACvD;GACiB,CAAA,EACnB,cACQ;;AAIf,QACE,qBAAC,UAAD;EAAU,SAAS;YAAnB,CACE,oBAAC,iBAAD;GAAiB,IAAI,QAAQ;GAAI,OAAO;aACrC;GACe,CAAA,EACjB,cACQ;;;;;AC7Uf,MAAM,iBAAiB,OAAO,EAAE;;;;;;;;;;AAWhC,MAAM,qBAAqB,OAAO,EAAE;;;;;AAMpC,MAAM,YAAY,OAAO,IAA+B;eACzC,QAAQ,GAAG;YACd,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;KAE/C,EAAE,YAAa,UAAU,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;;AAG9E,MAAa,eAAe,EAC1B,OACA,OAAO,MACP,YAAY,MACZ,cAAc,YAAY,eAC1B,gBACsB;AACtB,KAAI,MAAM,WAAW,EACnB,QAAO;AAsBT,QACE,oBAAC,OAAD;EAAK,cAAY;EAAsB;YACrC,oBAAC,gBAAD,EAAA,UARc,YAbC,MAAM,KAAK,MAAM,UAAU;GAC5C,MAAM,YAAY,UAAU,MAAM,SAAS;AAE3C,UACE,oBAAC,oBAAD;IAEE,gBAAc,YAAY,SAAS,KAAA;cAEnC,oBAAC,YAAD;KAAY,GAAI;KAAY;KAAM,SAAS;KAAsB;KAAa,CAAA;IAC3D,EAJd,GAAG,KAAK,MAAM,GAAG,QAIH;IAIe,GAAG,mBACzC,oBAAC,oBAAD;GAAwD,eAAY;aAClE,oBAAC,WAAD;IAAW,OAAO;cAAM;IAAa,CAAA;GAClB,EAFI,aAAa,iBAEjB,CAKO,EAAkB,CAAA;EACxC,CAAA"}