@jirawatpyk/aura-react 5.51.0 → 5.52.0

package/dist/server/index.cjs

@@ -43,6 +43,7 @@ __export(server_exports, {
   Stat: () => ServerStat,
   StatusPill: () => ServerStatusPill,
   StatusTile: () => ServerStatusTile,
+  TableSkeleton: () => TableSkeleton,
   TileGrid: () => TileGrid,
   brandScale: () => scale,
   breakpoints: () => breakpoints,
@@ -640,14 +641,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h6 = String(hex).trim().replace("#", "");
-  if (h6.length === 3)
-    h6 = h6.split("").map(function(c) {
+  let h7 = String(hex).trim().replace("#", "");
+  if (h7.length === 3)
+    h7 = h7.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h6)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h7)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h6.slice(i, i + 2), 16) / 255;
+    return parseInt(h7.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1439,10 +1440,171 @@ var Container = React4.forwardRef(function Container2(props, ref) {
   );
 });
 
-// src/PageHeader.tsx
+// src/TableSkeleton.tsx
 var React5 = __toESM(require("react"), 1);
 var h4 = React5.createElement;
-var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+function inertProps() {
+  return { inert: parseInt(React5.version, 10) >= 19 ? true : "", "aria-hidden": true };
+}
+function widthOf(w) {
+  return w == null || w === "" ? void 0 : typeof w === "number" ? w + "px" : w;
+}
+function skeletonColgroup(cols) {
+  return h4(
+    "colgroup",
+    null,
+    cols.map(function(c, i) {
+      const w = widthOf(c.width);
+      return h4("col", { key: i, style: w ? { width: w } : void 0 });
+    })
+  );
+}
+function placeholder(c) {
+  const s = c.skeleton || {};
+  if (s.kind === "pill") return h4("span", { className: "aura-skel aura-skel--pill" });
+  if (s.kind === "action") return h4("span", { className: cx("aura-skel aura-skel--action", s.touch && "is-touch") });
+  if (s.lines === 2)
+    return h4(
+      "span",
+      { className: "aura-skel-lines" },
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "100%" } }),
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "60%" } })
+    );
+  return h4("span", { className: "aura-skel aura-skel--text", style: { width: "80%" } });
+}
+function cellCls(base, c) {
+  const align = c.align || (c.numeric ? "end" : void 0);
+  return cx(base, align === "end" && "is-end", align === "center" && "is-center", c.numeric && "is-numeric");
+}
+function skeletonBody(cols, n3, stacked) {
+  const rows = [];
+  for (let r2 = 0; r2 < n3; r2++)
+    rows.push(
+      h4(
+        "tr",
+        { key: r2, className: "aura-tbl__row aura-tbl__row--skeleton", role: stacked ? "row" : void 0 },
+        cols.map(function(c, i) {
+          const slot = stacked && (c.card === "title" || c.card === "action") ? c.card : void 0;
+          return h4(
+            "td",
+            {
+              key: i,
+              className: cellCls("aura-tbl__td", c),
+              role: stacked ? "cell" : void 0,
+              "data-label": stacked && !slot && c.label ? c.label : void 0,
+              "data-card": slot
+            },
+            placeholder(c)
+          );
+        })
+      )
+    );
+  return h4(
+    "tbody",
+    { key: "aura-skeleton", className: "aura-tbl__body", role: stacked ? "rowgroup" : void 0 },
+    rows
+  );
+}
+function tableWrapClass(p) {
+  return cx(
+    "aura-tbl-wrap",
+    p.stackBelow && "is-stackable",
+    p.bordered === false && "is-flush",
+    p.bleed && "aura-bleed-frame",
+    p.bleed && !p.cards && "aura-bleed",
+    p.bleed && p.bleedEnd && !p.cards && "aura-bleed-end"
+  );
+}
+function tableClass(p) {
+  return cx(
+    "aura-tbl",
+    p.stackBelow && "aura-tbl--stack-" + p.stackBelow,
+    (p.align === "middle" || p.rowHeight === "density" && p.align !== "top") && "aura-tbl--middle",
+    p.rowHeight === "density" && "aura-tbl--row-density",
+    p.cards && "aura-tbl--cards",
+    p.className
+  );
+}
+function cardsFrame(el, p) {
+  return p.cards ? h4(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + p.stackBelow,
+        p.bleed && "aura-bleed",
+        p.bleed && p.bleedEnd && "aura-bleed-end"
+      )
+    },
+    el
+  ) : el;
+}
+function TableSkeleton(props) {
+  const cols = props.columns || [];
+  const n3 = props.rows != null ? Math.max(0, props.rows) : 5;
+  const stacked = !!props.stackBelow;
+  const cards = stacked && props.stackStyle === "cards";
+  const head = h4(
+    "thead",
+    { className: "aura-tbl__head", role: stacked ? "rowgroup" : void 0 },
+    h4(
+      "tr",
+      { className: "aura-tbl__row", role: stacked ? "row" : void 0 },
+      cols.map(function(c, i) {
+        return h4(
+          "th",
+          { key: i, scope: "col", className: cellCls("aura-tbl__th", c), role: stacked ? "columnheader" : void 0 },
+          c.label
+        );
+      })
+    )
+  );
+  const table = h4(
+    "div",
+    Object.assign(
+      {
+        className: tableWrapClass({
+          stackBelow: props.stackBelow,
+          bordered: props.bordered,
+          bleed: props.bleed,
+          bleedEnd: props.bleedEnd,
+          cards
+        }),
+        "data-density": props.density || "comfortable"
+      },
+      inertProps()
+    ),
+    h4(
+      "table",
+      {
+        className: cx(
+          tableClass({
+            stackBelow: props.stackBelow,
+            align: props.align,
+            rowHeight: props.rowHeight,
+            cards,
+            className: props.className
+          }),
+          "aura-tbl--skeleton"
+        ),
+        role: stacked ? "table" : void 0
+      },
+      skeletonColgroup(cols),
+      head,
+      skeletonBody(cols, n3, stacked)
+    )
+  );
+  return cardsFrame(table, {
+    stackBelow: props.stackBelow,
+    bleed: props.bleed,
+    bleedEnd: props.bleedEnd,
+    cards
+  });
+}
+
+// src/PageHeader.tsx
+var React6 = __toESM(require("react"), 1);
+var h5 = React6.createElement;
+var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
     if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
@@ -1458,7 +1620,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const heading = h4(
+  const heading = h5(
     "h" + level,
     {
       className: "aura-page-header__title",
@@ -1470,7 +1632,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   );
   const hasActions = props.actions != null && props.actions !== false;
   const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
-  return h4(
+  return h5(
     "div",
     Object.assign(attrs2, {
       ref,
@@ -1487,32 +1649,32 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       ),
       style: props.style
     }),
-    h4(
+    h5(
       "div",
       { className: "aura-page-header__text" },
-      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      shown(eyebrow) ? plainEyebrow ? h4("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h4("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
-      shown(props.titleAddon) ? h4(
+      props.breadcrumb != null && props.breadcrumb !== false ? h5("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
+      shown(eyebrow) ? plainEyebrow ? h5("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h5("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h5(
         "div",
         { className: "aura-page-header__title-row" },
         heading,
-        h4("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+        h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
-      shown(props.subtitle) ? h4("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+      shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
+      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h4(
+    props.actions != null && props.actions !== false ? h5(
       "div",
       { className: "aura-page-header__actions" },
-      bar && props.actionsStatus != null && props.actionsStatus !== false ? h4("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
+      bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
       props.actions
     ) : null
   );
 });
 
 // src/tiles.tsx
-var React6 = __toESM(require("react"), 1);
-var h5 = React6.createElement;
+var React7 = __toESM(require("react"), 1);
+var h6 = React7.createElement;
 var STATUS_ICON = {
   down: IconCircleAlert,
   problem: IconTriangleAlert,
@@ -1545,7 +1707,7 @@ function attrs(props) {
   });
   return out;
 }
-var comma = h5("span", { className: "aura-status-tile__sep" }, ",");
+var comma = h6("span", { className: "aura-status-tile__sep" }, ",");
 function statusTileElement(props, ref, Link, t, titleRef) {
   const status = STATUS_ICON[props.status] ? props.status : "unknown";
   if (status !== props.status)
@@ -1561,43 +1723,43 @@ function statusTileElement(props, ref, Link, t, titleRef) {
   };
   const hasValue = has(props.value), hasMeta = has(props.meta);
   const Tag = props.href ? Link : "div";
-  return h5(
+  return h6(
     Tag,
     Object.assign(attrs(props), {
       ref,
       href: props.href,
       className: cx("aura-status-tile", "aura-status-tile--" + status, props.href && "is-interactive", props.className)
     }),
-    h5(
+    h6(
       "span",
       { className: "aura-status-tile__head" },
-      h5(Icon, { name: h5(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h5("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
-      h5("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
-      hasValue ? h5(
+      h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
+      hasValue ? h6(
         "span",
         { className: cx("aura-status-tile__value", "is-" + valueTone) },
         props.value,
         hasMeta || markers.length ? comma : null
       ) : null
     ),
-    hasMeta || markers.length ? h5(
+    hasMeta || markers.length ? h6(
       "span",
       { className: "aura-status-tile__foot" },
-      hasMeta ? h5("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
-      markers.length ? h5(
+      hasMeta ? h6("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
+      markers.length ? h6(
         "span",
         { className: "aura-status-tile__markers" },
         markers.map(function(m, i) {
-          return h5(
+          return h6(
             "span",
             {
               key: i,
               className: cx("aura-status-tile__marker", "is-" + (m.tone || "neutral")),
               "data-aura-tip": m.label
             },
-            h5(Icon, { name: m.icon, size: 14 }),
-            h5("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
+            h6(Icon, { name: m.icon, size: 14 }),
+            h6("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
           );
         })
       ) : null
@@ -1607,13 +1769,13 @@ function statusTileElement(props, ref, Link, t, titleRef) {
 function ServerStatusTile(props) {
   return statusTileElement(props, void 0, props.linkComponent || "a", STRINGS.en);
 }
-var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
+var TileGrid = React7.forwardRef(function TileGrid2(props, ref) {
   const style = Object.assign(
     {},
     respVars("aura-grid-cols", props.columns == null ? { base: 2, md: 3 } : props.columns),
     props.style
   );
-  return h5(
+  return h6(
     "ul",
     Object.assign(attrs(props), {
       ref,
@@ -1623,16 +1785,16 @@ var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
     }),
     /* toArray drops null and booleans and keys each element; a Fragment's children are items too. */
     flat(props.children).map(function(c, i) {
-      return h5("li", { key: React6.isValidElement(c) && c.key != null ? c.key : i }, c);
+      return h6("li", { key: React7.isValidElement(c) && c.key != null ? c.key : i }, c);
     })
   );
 });
 function flat(children) {
   const out = [];
-  React6.Children.toArray(children).forEach(function(c) {
-    if (React6.isValidElement(c) && c.type === React6.Fragment)
+  React7.Children.toArray(children).forEach(function(c) {
+    if (React7.isValidElement(c) && c.type === React7.Fragment)
       flat(c.props.children).forEach(function(x) {
-        out.push(React6.isValidElement(x) ? React6.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
+        out.push(React7.isValidElement(x) ? React7.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
       });
     else if (c !== "") out.push(c);
   });
@@ -1646,7 +1808,7 @@ function r(n3) {
 function num(v) {
   return typeof v === "number" && isFinite(v) ? v : null;
 }
-var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
+var Sparkline = React7.forwardRef(function Sparkline2(props, ref) {
   const wh = SIZES2[props.size || "sm"] || SIZES2.sm;
   const W = wh[0], H = wh[1];
   const data = (props.data || []).map(num);
@@ -1676,7 +1838,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
   data.forEach(function(v, i) {
     if (v == null) return;
     const prev = i > 0 && data[i - 1] != null, next = i < n3 - 1 && data[i + 1] != null;
-    if (!prev && !next) dots.push(h5("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
+    if (!prev && !next) dots.push(h6("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
     else d += (prev ? "L" : "M") + r(x(i)) + " " + r(y(v));
   });
   const mode = props.failures || "none";
@@ -1686,10 +1848,10 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       if (!props.failed[i]) return;
       if (mode === "band") {
         const w = Math.max(2, step || W), left = Math.max(0, x(i) - w / 2), right = Math.min(W, x(i) + w / 2);
-        fails.push(h5("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
+        fails.push(h6("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
       } else
         fails.push(
-          h5("rect", {
+          h6("rect", {
             key: "f" + i,
             x: r(Math.max(0, Math.min(W - 1.5, x(i) - 0.75))),
             y: H - 6,
@@ -1699,7 +1861,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
         );
     });
   const named = !!props.label;
-  return h5(
+  return h6(
     "svg",
     Object.assign(attrs(props), {
       ref,
@@ -1712,9 +1874,9 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       "aria-hidden": named ? void 0 : true,
       focusable: "false"
     }),
-    fails.length && mode === "band" ? h5("g", { className: "aura-sparkline__band" }, fails) : null,
-    d ? h5("path", { className: "aura-sparkline__line", d }) : null,
-    dots.length ? h5("g", { className: "aura-sparkline__dots" }, dots) : null,
-    fails.length && mode === "ticks" ? h5("g", { className: "aura-sparkline__ticks" }, fails) : null
+    fails.length && mode === "band" ? h6("g", { className: "aura-sparkline__band" }, fails) : null,
+    d ? h6("path", { className: "aura-sparkline__line", d }) : null,
+    dots.length ? h6("g", { className: "aura-sparkline__dots" }, dots) : null,
+    fails.length && mode === "ticks" ? h6("g", { className: "aura-sparkline__ticks" }, fails) : null
   );
 });

package/dist/server/index.d.cts

@@ -117,6 +117,43 @@ export type DataAttributes = {
 };
 export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+/** 5.52 (Chamber-OS 164): what a loading column's placeholder cell looks like. */
+export interface TableSkeletonHint {
+	/** Text lines: 2 for a value over its caption. Default 1. */
+	lines?: 1 | 2 | undefined;
+	/** `text` (default) bars, a status `pill`, or an `action` block as tall as a small Button (44px on a phone card or a
+	 * touch screen with `touch`). */
+	kind?: "text" | "pill" | "action" | undefined;
+	/** An `action` block 44px below 640px and on a coarse pointer, as `touchHeight` buttons are. */
+	touch?: boolean | undefined;
+}
+/** 5.52 (Chamber-OS 164): one column of a `TableSkeleton` — the same facts a header cell gives a loading Table. */
+export interface TableSkeletonColumn {
+	/** Header text (and the stacked card's field label). */
+	label?: string | undefined;
+	/** Column width: a share such as `'22%'`, or px. Columns without one split what is left evenly. */
+	width?: string | number | undefined;
+	align?: "start" | "center" | "end" | undefined;
+	numeric?: boolean | undefined;
+	/** Its place in a stacked row: `title`, `action` or `field` (default), as on a Td. */
+	card?: "title" | "action" | "field" | undefined;
+	skeleton?: TableSkeletonHint | undefined;
+}
+/** 5.52 (Chamber-OS 164): a loading Table for Server Components. Same frame, density, stacking and cards as Table. */
+export interface TableSkeletonProps {
+	columns: TableSkeletonColumn[];
+	/** Placeholder rows (default 5). */
+	rows?: number | undefined;
+	density?: "comfortable" | "compact" | undefined;
+	stackBelow?: "sm" | "md" | undefined;
+	stackStyle?: "list" | "cards" | undefined;
+	bordered?: boolean | undefined;
+	bleed?: boolean | undefined;
+	bleedEnd?: boolean | undefined;
+	rowHeight?: "density" | undefined;
+	align?: "top" | "middle" | undefined;
+	className?: string | undefined;
+}
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -487,6 +524,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** A loading Table (5.52, Chamber-OS 164), for Server Components — e.g. a route's loading.tsx. `aria-hidden` and
+ * `inert`: announce the load in the page's own status line. */
+export declare function TableSkeleton(props: TableSkeletonProps): React$1.ReactElement;
 /** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
  * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
  * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from

package/dist/server/index.d.ts

@@ -117,6 +117,43 @@ export type DataAttributes = {
 };
 export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+/** 5.52 (Chamber-OS 164): what a loading column's placeholder cell looks like. */
+export interface TableSkeletonHint {
+	/** Text lines: 2 for a value over its caption. Default 1. */
+	lines?: 1 | 2 | undefined;
+	/** `text` (default) bars, a status `pill`, or an `action` block as tall as a small Button (44px on a phone card or a
+	 * touch screen with `touch`). */
+	kind?: "text" | "pill" | "action" | undefined;
+	/** An `action` block 44px below 640px and on a coarse pointer, as `touchHeight` buttons are. */
+	touch?: boolean | undefined;
+}
+/** 5.52 (Chamber-OS 164): one column of a `TableSkeleton` — the same facts a header cell gives a loading Table. */
+export interface TableSkeletonColumn {
+	/** Header text (and the stacked card's field label). */
+	label?: string | undefined;
+	/** Column width: a share such as `'22%'`, or px. Columns without one split what is left evenly. */
+	width?: string | number | undefined;
+	align?: "start" | "center" | "end" | undefined;
+	numeric?: boolean | undefined;
+	/** Its place in a stacked row: `title`, `action` or `field` (default), as on a Td. */
+	card?: "title" | "action" | "field" | undefined;
+	skeleton?: TableSkeletonHint | undefined;
+}
+/** 5.52 (Chamber-OS 164): a loading Table for Server Components. Same frame, density, stacking and cards as Table. */
+export interface TableSkeletonProps {
+	columns: TableSkeletonColumn[];
+	/** Placeholder rows (default 5). */
+	rows?: number | undefined;
+	density?: "comfortable" | "compact" | undefined;
+	stackBelow?: "sm" | "md" | undefined;
+	stackStyle?: "list" | "cards" | undefined;
+	bordered?: boolean | undefined;
+	bleed?: boolean | undefined;
+	bleedEnd?: boolean | undefined;
+	rowHeight?: "density" | undefined;
+	align?: "top" | "middle" | undefined;
+	className?: string | undefined;
+}
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -487,6 +524,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** A loading Table (5.52, Chamber-OS 164), for Server Components — e.g. a route's loading.tsx. `aria-hidden` and
+ * `inert`: announce the load in the page's own status line. */
+export declare function TableSkeleton(props: TableSkeletonProps): React$1.ReactElement;
 /** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
  * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
  * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from