@lobehub/ui 5.58.0 → 5.60.0

package/es/dashboard/MetricStrip/MetricStrip.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { styles } from "../Surface/style.mjs";
+import { useSurfaceCardClassName } from "../Surface/link.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import MetricCell from "./MetricCell.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/MetricStrip/MetricStrip.tsx
+/**
+* Peer metrics. `joined` shares one card divided into cells; `split` gives each item its own card,
+* identical to StatCard.
+*/
+const MetricStrip = ({ items, loading, renderLink, variant = "joined" }) => {
+	const cardClassName = useSurfaceCardClassName();
+	if (variant === "split") return /* @__PURE__ */ jsx("div", {
+		className: styles$1.split,
+		children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+			className: cx(styles$1.card, cardClassName, styles.clip),
+			children: /* @__PURE__ */ jsx(MetricCell, {
+				item,
+				loading,
+				renderLink
+			})
+		}, index))
+	});
+	return /* @__PURE__ */ jsx(Surface, {
+		className: styles.clip,
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles$1.frame,
+			children: /* @__PURE__ */ jsx("div", {
+				className: styles$1.grid,
+				children: items.map((item, index) => /* @__PURE__ */ jsx(MetricCell, {
+					seam: true,
+					item,
+					loading,
+					renderLink
+				}, index))
+			})
+		})
+	});
+};
+MetricStrip.displayName = "MetricStrip";
+//#endregion
+export { MetricStrip as default };
+
+//# sourceMappingURL=MetricStrip.mjs.map

package/es/dashboard/MetricStrip/MetricStrip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricStrip.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/MetricStrip/MetricStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport MetricCell from './MetricCell';\nimport { styles } from './style';\nimport type { MetricStripProps } from './type';\n\n/**\n * Peer metrics. `joined` shares one card divided into cells; `split` gives each item its own card,\n * identical to StatCard.\n */\nconst MetricStrip = ({ items, loading, renderLink, variant = 'joined' }: MetricStripProps) => {\n  const cardClassName = useSurfaceCardClassName();\n\n  if (variant === 'split') {\n    return (\n      <div className={styles.split}>\n        {items.map((item, index) => (\n          <div className={cx(styles.card, cardClassName, surfaceStyles.clip)} key={index}>\n            <MetricCell item={item} loading={loading} renderLink={renderLink} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <Surface className={surfaceStyles.clip}>\n      <div className={styles.frame}>\n        <div className={styles.grid}>\n          {items.map((item, index) => (\n            <MetricCell seam item={item} key={index} loading={loading} renderLink={renderLink} />\n          ))}\n        </div>\n      </div>\n    </Surface>\n  );\n};\n\nMetricStrip.displayName = 'MetricStrip';\n\nexport default MetricStrip;\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,eAAe,EAAE,OAAO,SAAS,YAAY,UAAU,eAAiC;CAC5F,MAAM,gBAAgB,wBAAwB;CAE9C,IAAI,YAAY,SACd,OACE,oBAAC,OAAD;EAAK,WAAWA,SAAO;EACpB,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,OAAD;GAAK,WAAW,GAAGA,SAAO,MAAM,eAAeC,OAAc,IAAI;GAC/D,UAAA,oBAAC,YAAD;IAAkB;IAAe;IAAqB;GAAa,CAAA;EAChE,GAFoE,KAEpE,CACN;CACE,CAAA;CAIT,OACE,oBAAC,SAAD;EAAS,WAAWA,OAAc;EAChC,UAAA,oBAAC,OAAD;GAAK,WAAWD,SAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAWA,SAAO;IACpB,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,YAAD;KAAY,MAAA;KAAW;KAA2B;KAAqB;IAAa,GAAlD,KAAkD,CACrF;GACE,CAAA;EACF,CAAA;CACE,CAAA;AAEb;AAEA,YAAY,cAAc"}

package/es/dashboard/MetricStrip/index.d.mts

@@ -0,0 +1,3 @@
+import { MetricItem, MetricStripProps } from "./type.mjs";
+import MetricStrip from "./MetricStrip.mjs";
+export { type MetricItem, type MetricStripProps, MetricStrip as default };

package/es/dashboard/MetricStrip/style.mjs

@@ -0,0 +1,161 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/MetricStrip/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	cell: css`
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    min-inline-size: 0;
+    padding-block: 16px;
+    padding-inline: 20px;
+
+    background: transparent;
+  `,
+	/** Joined strip only: the divider on the cell's trailing and bottom edges. */
+	cellSeam: css`
+    box-shadow:
+      inset -1px 0 0 var(--metric-seam),
+      inset 0 -1px 0 var(--metric-seam);
+  `,
+	/** Split strip and StatCard: one card per item. */
+	card: css`
+    display: grid;
+    min-inline-size: 0;
+  `,
+	head: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    box-sizing: border-box;
+    min-inline-size: 0;
+    block-size: 32px;
+  `,
+	headCopy: css`
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    min-inline-size: 0;
+  `,
+	mark: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 24px;
+    block-size: 24px;
+    border: 1px solid ${cssVar.colorFillSecondary};
+    border-radius: ${cssVar.borderRadiusSM};
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	split: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+  `,
+	delta: css`
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.4;
+  `,
+	deltaDown: css`
+    color: ${cssVar.colorError};
+  `,
+	deltaFlat: css`
+    color: ${cssVar.colorTextSecondary};
+  `,
+	deltaUp: css`
+    color: ${cssVar.colorSuccess};
+  `,
+	foot: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: baseline;
+  `,
+	/**
+	* Clips the seam that would otherwise sit on the card's trailing and bottom
+	* edges. A short last row used to show the seam color across the empty
+	* track, which reads louder than the cells.
+	*/
+	frame: css`
+    --metric-seam: ${cssVar.colorFillSecondary};
+
+    overflow: hidden;
+    border-radius: inherit;
+    background: transparent;
+  `,
+	grid: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+
+    inline-size: calc(100% + 1px);
+    margin-block-end: -1px;
+
+    background: transparent;
+  `,
+	hint: css`
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	label: css`
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	link: css`
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	press: css`
+    cursor: pointer;
+
+    border: none;
+
+    font: inherit;
+    color: inherit;
+    text-align: start;
+
+    &:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	/** Grid cell around a rendered link, so the link fills it. */
+	slot: css`
+    display: grid;
+    min-inline-size: 0;
+  `,
+	value: css`
+    overflow: hidden;
+
+    font-size: ${cssVar.fontSizeHeading3};
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.15;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	valueDanger: css`
+    color: ${cssVar.colorError};
+  `,
+	valueWarning: css`
+    color: ${cssVar.colorWarning};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/dashboard/MetricStrip/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: transparent;\n  `,\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: css`\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  /** Split strip and StatCard: one card per item. */\n  card: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n     without header controls line up across a split strip or a row of StatCards. */\n  head: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-inline-size: 0;\n    block-size: 32px;\n  `,\n  headCopy: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-inline-size: 0;\n  `,\n  mark: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 24px;\n    block-size: 24px;\n    border: 1px solid ${cssVar.colorFillSecondary};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  split: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\n  `,\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: css`\n    --metric-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n    background: transparent;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: transparent;\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;;CAM7C,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}

package/es/dashboard/MetricStrip/type.d.mts

@@ -0,0 +1,37 @@
+import { IconProps } from "../../Icon/type.mjs";
+import "../../Icon/index.mjs";
+import { SurfaceRenderLink } from "../Surface/type.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/MetricStrip/type.d.ts
+interface MetricItem {
+  /** Control on the label row, such as a menu. */
+  action?: ReactNode;
+  delta?: ReactNode;
+  direction?: 'up' | 'down' | 'flat';
+  hint?: ReactNode;
+  href?: string;
+  label: ReactNode;
+  /** This cell only. Cells fed by different queries arrive at different times. */
+  loading?: boolean;
+  /** Corner glyph. Hidden from assistive tech so it does not repeat the label. */
+  mark?: IconProps['icon'];
+  onClick?: () => void;
+  value: ReactNode;
+  /** Color the figure when the number itself is the thing to act on. */
+  valueTone?: 'danger' | 'warning';
+}
+interface MetricStripProps {
+  items: MetricItem[];
+  /** First load only: values become placeholders, labels stay. */
+  loading?: boolean;
+  renderLink?: SurfaceRenderLink;
+  /**
+   * `joined`: one card divided into cells. `split`: every item is its own card (the StatCard look)
+   * on a responsive grid with a gap.
+   * @default 'joined'
+   */
+  variant?: 'joined' | 'split';
+}
+//#endregion
+export { MetricItem, MetricStripProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/PageSkeleton/PageSkeleton.mjs

@@ -1,7 +1,7 @@
 "use client";
 import Skeleton from "../../base-ui/Skeleton/index.mjs";
-import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { useSurfaceCardClassName } from "../Surface/link.mjs";
+import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dashboard/PageSkeleton/PageSkeleton.tsx
 const bone = {
@@ -17,7 +17,7 @@ const lineWidths = [
 function LoadingAnnouncer({ label }) {
 	return /* @__PURE__ */ jsx("output", {
 		"aria-live": "polite",
-		className: styles$1.srOnly,
+		className: styles.srOnly,
 		children: label
 	});
 }
@@ -25,43 +25,44 @@ LoadingAnnouncer.displayName = "LoadingAnnouncer";
 function PageHeaderSkeleton({ action = true }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		className: styles$1.header,
+		className: styles.header,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: styles$1.headerCopy,
+			className: styles.headerCopy,
 			children: [/* @__PURE__ */ jsx(Skeleton, {
-				className: styles$1.title,
+				className: styles.title,
 				style: bone
 			}), /* @__PURE__ */ jsx(Skeleton.Text, {
 				fontSize: 14,
 				width: "46%"
 			})]
 		}), action ? /* @__PURE__ */ jsx(Skeleton, {
-			className: styles$1.action,
+			className: styles.action,
 			style: bone
 		}) : null]
 	});
 }
 PageHeaderSkeleton.displayName = "PageHeaderSkeleton";
 function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
+	const cardClassName = useSurfaceCardClassName();
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		className: framed ? `${styles$1.table} ${styles.card}` : styles$1.table,
+		className: framed ? `${styles.table} ${cardClassName}` : styles.table,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: styles$1.thead,
+			className: styles.thead,
 			children: [
 				96,
 				72,
 				64,
 				48
 			].map((width, index) => /* @__PURE__ */ jsx(Skeleton, {
-				className: styles$1.theadCell,
+				className: styles.theadCell,
 				style: {
 					...bone,
 					width
 				}
 			}, index))
 		}), Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", {
-			className: styles$1.row,
+			className: styles.row,
 			children: [
 				leading === "avatar" ? /* @__PURE__ */ jsx(Skeleton.Avatar, {
 					shape: "circle",
@@ -72,7 +73,7 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 					size: 24
 				}) : null,
 				/* @__PURE__ */ jsx("div", {
-					className: styles$1.copy,
+					className: styles.copy,
 					children: /* @__PURE__ */ jsx(Skeleton.Text, {
 						fontSize: 14,
 						rows: 2,
@@ -80,11 +81,11 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 					})
 				}),
 				/* @__PURE__ */ jsx(Skeleton, {
-					className: styles$1.tag,
+					className: styles.tag,
 					style: bone
 				}),
 				/* @__PURE__ */ jsx(Skeleton, {
-					className: styles$1.cell,
+					className: styles.cell,
 					style: bone
 				})
 			]
@@ -93,16 +94,17 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 }
 TableSkeleton.displayName = "TableSkeleton";
 function StatCardSkeleton() {
+	const cardClassName = useSurfaceCardClassName();
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		className: `${styles$1.stat} ${styles.card}`,
+		className: `${styles.stat} ${cardClassName}`,
 		children: [
 			/* @__PURE__ */ jsx(Skeleton.Text, {
 				fontSize: 14,
 				width: 72
 			}),
 			/* @__PURE__ */ jsx(Skeleton, {
-				className: styles$1.statValue,
+				className: styles.statValue,
 				style: bone
 			}),
 			/* @__PURE__ */ jsx(Skeleton.Text, {
@@ -116,13 +118,13 @@ StatCardSkeleton.displayName = "StatCardSkeleton";
 function PageLoading({ header = true, label = "Loading", stats = 4 }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-busy": "true",
-		className: styles$1.page,
+		className: styles.page,
 		children: [
 			/* @__PURE__ */ jsx(LoadingAnnouncer, { label }),
 			header ? /* @__PURE__ */ jsx(PageHeaderSkeleton, {}) : null,
 			/* @__PURE__ */ jsx("section", {
 				"aria-hidden": true,
-				className: styles$1.statGrid,
+				className: styles.statGrid,
 				children: Array.from({ length: stats }, (_, index) => /* @__PURE__ */ jsx(StatCardSkeleton, {}, index))
 			}),
 			/* @__PURE__ */ jsx(TableSkeleton, {})

package/es/dashboard/PageSkeleton/PageSkeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageSkeleton.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PageSkeleton/PageSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type {\n  LoadingAnnouncerProps,\n  PageHeaderSkeletonProps,\n  PageLoadingProps,\n  TableSkeletonProps,\n} from './type';\n\nconst bone = { height: undefined, width: undefined };\nconst lineWidths = [\n  ['68%', '36%'],\n  ['52%', '28%'],\n  ['76%', '42%'],\n  ['58%', '32%'],\n] as const;\n\nfunction LoadingAnnouncer({ label }: LoadingAnnouncerProps) {\n  return (\n    <output aria-live=\"polite\" className={styles.srOnly}>\n      {label}\n    </output>\n  );\n}\n\nLoadingAnnouncer.displayName = 'LoadingAnnouncer';\n\nfunction PageHeaderSkeleton({ action = true }: PageHeaderSkeletonProps) {\n  return (\n    <div aria-hidden className={styles.header}>\n      <div className={styles.headerCopy}>\n        <Skeleton className={styles.title} style={bone} />\n        <Skeleton.Text fontSize={14} width=\"46%\" />\n      </div>\n      {action ? <Skeleton className={styles.action} style={bone} /> : null}\n    </div>\n  );\n}\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nfunction TableSkeleton({ framed = true, leading = 'text', rows = 6 }: TableSkeletonProps) {\n  const head = [96, 72, 64, 48];\n  return (\n    <div aria-hidden className={framed ? `${styles.table} ${surfaceStyles.card}` : styles.table}>\n      <div className={styles.thead}>\n        {head.map((width, index) => (\n          <Skeleton className={styles.theadCell} key={index} style={{ ...bone, width }} />\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, index) => (\n        <div className={styles.row} key={index}>\n          {leading === 'avatar' ? <Skeleton.Avatar shape=\"circle\" size={24} /> : null}\n          {leading === 'icon' ? <Skeleton.Avatar shape=\"square\" size={24} /> : null}\n          <div className={styles.copy}>\n            <Skeleton.Text\n              fontSize={14}\n              rows={2}\n              width={[...lineWidths[index % lineWidths.length]]}\n            />\n          </div>\n          <Skeleton className={styles.tag} style={bone} />\n          <Skeleton className={styles.cell} style={bone} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nTableSkeleton.displayName = 'TableSkeleton';\n\nfunction StatCardSkeleton() {\n  return (\n    <div aria-hidden className={`${styles.stat} ${surfaceStyles.card}`}>\n      <Skeleton.Text fontSize={14} width={72} />\n      <Skeleton className={styles.statValue} style={bone} />\n      <Skeleton.Text fontSize={14} width=\"68%\" />\n    </div>\n  );\n}\n\nStatCardSkeleton.displayName = 'StatCardSkeleton';\n\nfunction PageLoading({ header = true, label = 'Loading', stats = 4 }: PageLoadingProps) {\n  return (\n    <div aria-busy=\"true\" className={styles.page}>\n      <LoadingAnnouncer label={label} />\n      {header ? <PageHeaderSkeleton /> : null}\n      <section aria-hidden className={styles.statGrid}>\n        {Array.from({ length: stats }, (_, index) => (\n          <StatCardSkeleton key={index} />\n        ))}\n      </section>\n      <TableSkeleton />\n    </div>\n  );\n}\n\nPageLoading.displayName = 'PageLoading';\n\nexport { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton };\nexport default PageLoading;\n"],"mappings":"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"}
+{"version":3,"file":"PageSkeleton.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/PageSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles } from './style';\nimport type {\n  LoadingAnnouncerProps,\n  PageHeaderSkeletonProps,\n  PageLoadingProps,\n  TableSkeletonProps,\n} from './type';\n\nconst bone = { height: undefined, width: undefined };\nconst lineWidths = [\n  ['68%', '36%'],\n  ['52%', '28%'],\n  ['76%', '42%'],\n  ['58%', '32%'],\n] as const;\n\nfunction LoadingAnnouncer({ label }: LoadingAnnouncerProps) {\n  return (\n    <output aria-live=\"polite\" className={styles.srOnly}>\n      {label}\n    </output>\n  );\n}\n\nLoadingAnnouncer.displayName = 'LoadingAnnouncer';\n\nfunction PageHeaderSkeleton({ action = true }: PageHeaderSkeletonProps) {\n  return (\n    <div aria-hidden className={styles.header}>\n      <div className={styles.headerCopy}>\n        <Skeleton className={styles.title} style={bone} />\n        <Skeleton.Text fontSize={14} width=\"46%\" />\n      </div>\n      {action ? <Skeleton className={styles.action} style={bone} /> : null}\n    </div>\n  );\n}\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nfunction TableSkeleton({ framed = true, leading = 'text', rows = 6 }: TableSkeletonProps) {\n  const cardClassName = useSurfaceCardClassName();\n  const head = [96, 72, 64, 48];\n  return (\n    <div aria-hidden className={framed ? `${styles.table} ${cardClassName}` : styles.table}>\n      <div className={styles.thead}>\n        {head.map((width, index) => (\n          <Skeleton className={styles.theadCell} key={index} style={{ ...bone, width }} />\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, index) => (\n        <div className={styles.row} key={index}>\n          {leading === 'avatar' ? <Skeleton.Avatar shape=\"circle\" size={24} /> : null}\n          {leading === 'icon' ? <Skeleton.Avatar shape=\"square\" size={24} /> : null}\n          <div className={styles.copy}>\n            <Skeleton.Text\n              fontSize={14}\n              rows={2}\n              width={[...lineWidths[index % lineWidths.length]]}\n            />\n          </div>\n          <Skeleton className={styles.tag} style={bone} />\n          <Skeleton className={styles.cell} style={bone} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nTableSkeleton.displayName = 'TableSkeleton';\n\nfunction StatCardSkeleton() {\n  const cardClassName = useSurfaceCardClassName();\n  return (\n    <div aria-hidden className={`${styles.stat} ${cardClassName}`}>\n      <Skeleton.Text fontSize={14} width={72} />\n      <Skeleton className={styles.statValue} style={bone} />\n      <Skeleton.Text fontSize={14} width=\"68%\" />\n    </div>\n  );\n}\n\nStatCardSkeleton.displayName = 'StatCardSkeleton';\n\nfunction PageLoading({ header = true, label = 'Loading', stats = 4 }: PageLoadingProps) {\n  return (\n    <div aria-busy=\"true\" className={styles.page}>\n      <LoadingAnnouncer label={label} />\n      {header ? <PageHeaderSkeleton /> : null}\n      <section aria-hidden className={styles.statGrid}>\n        {Array.from({ length: stats }, (_, index) => (\n          <StatCardSkeleton key={index} />\n        ))}\n      </section>\n      <TableSkeleton />\n    </div>\n  );\n}\n\nPageLoading.displayName = 'PageLoading';\n\nexport { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton };\nexport default PageLoading;\n"],"mappings":"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"}

package/es/dashboard/PageSkeleton/style.mjs

@@ -52,7 +52,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     min-block-size: 54px;
     padding-block: 12px;
     padding-inline: 16px;
-    border-block-end: 1px solid ${cssVar.colorBorder};
+    border-block-end: 1px solid ${cssVar.colorFillSecondary};
 
     &:last-child {
       border-block-end: none;

package/es/dashboard/PageSkeleton/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    flex: none;\n    inline-size: 96px;\n    block-size: 32px;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n      block-size: 44px;\n    }\n  `,\n  cell: css`\n    flex: none;\n    inline-size: 88px;\n    block-size: 14px;\n  `,\n  copy: css`\n    flex: 1;\n    min-inline-size: 0;\n  `,\n  header: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  headerCopy: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 8px;\n\n    min-inline-size: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 54px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorder};\n\n    &:last-child {\n      border-block-end: none;\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  statGrid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  stat: css`\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n  `,\n  statValue: css`\n    inline-size: 42%;\n    block-size: ${cssVar.fontSizeHeading2};\n    margin-block: 6px 14px;\n  `,\n  table: css`\n    overflow: hidden;\n    min-inline-size: 0;\n  `,\n  tag: css`\n    flex: none;\n    inline-size: 72px;\n    block-size: 22px;\n    border-radius: ${cssVar.borderRadiusSM};\n  `,\n  thead: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 39px;\n    padding-block: 10px;\n    padding-inline: 16px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  theadCell: css`\n    flex: none;\n    block-size: 12px;\n  `,\n  title: css`\n    inline-size: 220px;\n    max-inline-size: 70%;\n    block-size: ${cssVar.fontSizeHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,QAAQ,GAAG;;;;;MAKP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;CAKT,MAAM,GAAG;;;;CAIT,QAAQ,GAAG;;;;;;MAMP,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;;;;;CAQf,MAAM,GAAG;;;;;CAKT,KAAK,GAAG;;;;;;;;kCAQwB,OAAO,YAAY;;;;;;CAMnD,QAAQ,GAAG;;;;;;;;;;;;CAYX,UAAU,GAAG;;;;;CAKb,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;kBAEE,OAAO,iBAAiB;;;CAGxC,OAAO,GAAG;;;;CAIV,KAAK,GAAG;;;;qBAIW,OAAO,eAAe;;CAEzC,OAAO,GAAG;;;;;;;;;kBASM,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;kBAGM,OAAO,iBAAiB;;AAE1C,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    flex: none;\n    inline-size: 96px;\n    block-size: 32px;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n      block-size: 44px;\n    }\n  `,\n  cell: css`\n    flex: none;\n    inline-size: 88px;\n    block-size: 14px;\n  `,\n  copy: css`\n    flex: 1;\n    min-inline-size: 0;\n  `,\n  header: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  headerCopy: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 8px;\n\n    min-inline-size: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 54px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n\n    &:last-child {\n      border-block-end: none;\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  statGrid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  stat: css`\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n  `,\n  statValue: css`\n    inline-size: 42%;\n    block-size: ${cssVar.fontSizeHeading2};\n    margin-block: 6px 14px;\n  `,\n  table: css`\n    overflow: hidden;\n    min-inline-size: 0;\n  `,\n  tag: css`\n    flex: none;\n    inline-size: 72px;\n    block-size: 22px;\n    border-radius: ${cssVar.borderRadiusSM};\n  `,\n  thead: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 39px;\n    padding-block: 10px;\n    padding-inline: 16px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  theadCell: css`\n    flex: none;\n    block-size: 12px;\n  `,\n  title: css`\n    inline-size: 220px;\n    max-inline-size: 70%;\n    block-size: ${cssVar.fontSizeHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,QAAQ,GAAG;;;;;MAKP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;CAKT,MAAM,GAAG;;;;CAIT,QAAQ,GAAG;;;;;;MAMP,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;;;;;CAQf,MAAM,GAAG;;;;;CAKT,KAAK,GAAG;;;;;;;;kCAQwB,OAAO,mBAAmB;;;;;;CAM1D,QAAQ,GAAG;;;;;;;;;;;;CAYX,UAAU,GAAG;;;;;CAKb,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;kBAEE,OAAO,iBAAiB;;;CAGxC,OAAO,GAAG;;;;CAIV,KAAK,GAAG;;;;qBAIW,OAAO,eAAe;;CAEzC,OAAO,GAAG;;;;;;;;;kBASM,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;kBAGM,OAAO,iBAAiB;;AAE1C,EAAE"}

package/es/dashboard/PageToolbar/PageToolbar.d.mts

@@ -0,0 +1,10 @@
+import { PageToolbarProps } from "./type.mjs";
+//#region src/dashboard/PageToolbar/PageToolbar.d.ts
+/** Filters start at the left edge; actions hold the right edge, also after wrapping. */
+declare const PageToolbar: {
+  ({ actions, children, className }: PageToolbarProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { PageToolbar as default };
+//# sourceMappingURL=PageToolbar.d.mts.map

package/es/dashboard/PageToolbar/PageToolbar.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/PageToolbar/PageToolbar.tsx
+/** Filters start at the left edge; actions hold the right edge, also after wrapping. */
+const PageToolbar = ({ actions, children, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.root, className),
+	children: [children ? /* @__PURE__ */ jsx("div", {
+		className: styles.filters,
+		children
+	}) : null, actions ? /* @__PURE__ */ jsx("div", {
+		className: styles.actions,
+		children: actions
+	}) : null]
+});
+PageToolbar.displayName = "PageToolbar";
+//#endregion
+export { PageToolbar as default };
+
+//# sourceMappingURL=PageToolbar.mjs.map

package/es/dashboard/PageToolbar/PageToolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageToolbar.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/PageToolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { PageToolbarProps } from './type';\n\n/** Filters start at the left edge; actions hold the right edge, also after wrapping. */\nconst PageToolbar = ({ actions, children, className }: PageToolbarProps) => (\n  <div className={cx(styles.root, className)}>\n    {children ? <div className={styles.filters}>{children}</div> : null}\n    {actions ? <div className={styles.actions}>{actions}</div> : null}\n  </div>\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nexport default PageToolbar;\n"],"mappings":";;;;;;AAQA,MAAM,eAAe,EAAE,SAAS,UAAU,gBACxC,qBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAzC,UAAA,CACG,WAAW,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU;CAAc,CAAA,IAAI,MAC9D,UAAU,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU,UAAA;CAAa,CAAA,IAAI,IAC1D;;AAGP,YAAY,cAAc"}

package/es/dashboard/PageToolbar/index.d.mts

@@ -0,0 +1,3 @@
+import { PageToolbarProps } from "./type.mjs";
+import PageToolbar from "./PageToolbar.mjs";
+export { type PageToolbarProps, PageToolbar as default };

package/es/dashboard/PageToolbar/style.mjs

@@ -0,0 +1,34 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PageToolbar/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	actions: css`
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+
+    margin-inline-start: auto;
+  `,
+	filters: css`
+    display: flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+
+    min-inline-size: 0;
+  `,
+	root: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: center;
+
+    min-inline-size: 0;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/dashboard/PageToolbar/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  actions: css`\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    margin-inline-start: auto;\n  `,\n  filters: css`\n    display: flex;\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  root: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 12px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,SAAS,GAAG;;;;;;;;;CASZ,SAAS,GAAG;;;;;;;;;CASZ,MAAM,GAAG;;;;;;;;AAQX,EAAE"}

package/es/dashboard/PageToolbar/type.d.mts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/dashboard/PageToolbar/type.d.ts
+interface PageToolbarProps {
+  /** Right side: refresh, export, the page's own buttons. */
+  actions?: ReactNode;
+  /** Left side: range, scope, search, whatever narrows the page. */
+  children?: ReactNode;
+  className?: string;
+}
+//#endregion
+export { PageToolbarProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/PanelSurface/PanelSurface.d.mts

@@ -0,0 +1,10 @@
+import { PanelSurfaceProps } from "./type.mjs";
+//#region src/dashboard/PanelSurface/PanelSurface.d.ts
+/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */
+declare const PanelSurface: {
+  ({ title, description, extra, href, loading, renderLink, size, className, style, children }: PanelSurfaceProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { PanelSurface as default };
+//# sourceMappingURL=PanelSurface.d.mts.map

package/es/dashboard/PanelSurface/PanelSurface.mjs

@@ -0,0 +1,39 @@
+"use client";
+import Spin from "../../base-ui/Spin/Spin.mjs";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { styles } from "../Surface/style.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/PanelSurface/PanelSurface.tsx
+/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */
+const PanelSurface = ({ title, description, extra, href, loading, renderLink, size = "default", className, style, children }) => /* @__PURE__ */ jsx(Surface, {
+	className,
+	description,
+	extra: loading && children ? /* @__PURE__ */ jsx(Spin, {
+		size: "small",
+		variant: "network"
+	}) : extra,
+	href,
+	padded: false,
+	renderLink,
+	style,
+	title,
+	children: loading && !children ? /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		className: styles$1.loadingBody,
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			height: 220,
+			radius: 8
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: cx(size === "small" ? styles$1.bodySmall : styles$1.body, styles.tableBleed),
+		children
+	})
+});
+PanelSurface.displayName = "PanelSurface";
+//#endregion
+export { PanelSurface as default };
+
+//# sourceMappingURL=PanelSurface.mjs.map

package/es/dashboard/PanelSurface/PanelSurface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSurface.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { PanelSurfaceProps } from './type';\n\n/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */\nconst PanelSurface = ({\n  title,\n  description,\n  extra,\n  href,\n  loading,\n  renderLink,\n  size = 'default',\n  className,\n  style,\n  children,\n}: PanelSurfaceProps) => (\n  <Surface\n    className={className}\n    description={description}\n    extra={loading && children ? <Spin size=\"small\" variant=\"network\" /> : extra}\n    href={href}\n    padded={false}\n    renderLink={renderLink}\n    style={style}\n    title={title}\n  >\n    {loading && !children ? (\n      <div aria-busy=\"true\" className={styles.loadingBody}>\n        <Skeleton height={220} radius={8} />\n      </div>\n    ) : (\n      <div\n        className={cx(size === 'small' ? styles.bodySmall : styles.body, surfaceStyles.tableBleed)}\n      >\n        {children}\n      </div>\n    )}\n  </Surface>\n);\n\nPanelSurface.displayName = 'PanelSurface';\n\nexport default PanelSurface;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,OACA,aACA,OACA,MACA,SACA,YACA,OAAO,WACP,WACA,OACA,eAEA,oBAAC,SAAD;CACa;CACE;CACb,OAAO,WAAW,WAAW,oBAAC,MAAD;EAAM,MAAK;EAAQ,SAAQ;CAAW,CAAA,IAAI;CACjE;CACN,QAAQ;CACI;CACL;CACA;CAEN,UAAA,WAAW,CAAC,WACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAWA,SAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL,oBAAC,OAAD;EACE,WAAW,GAAG,SAAS,UAAUA,SAAO,YAAYA,SAAO,MAAMC,OAAc,UAAU;EAExF;CACE,CAAA;AAEA,CAAA;AAGX,aAAa,cAAc"}

package/es/dashboard/PanelSurface/index.d.mts

@@ -0,0 +1,3 @@
+import { PanelSurfaceProps } from "./type.mjs";
+import PanelSurface from "./PanelSurface.mjs";
+export { type PanelSurfaceProps, PanelSurface as default };

package/es/dashboard/PanelSurface/style.mjs

@@ -0,0 +1,24 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PanelSurface/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	body: css`
+    --surface-pad-inline: 16px;
+    --surface-pad-block: 16px;
+
+    padding: 16px;
+  `,
+	bodySmall: css`
+    --surface-pad-inline: 16px;
+    --surface-pad-block: 12px;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+  `,
+	loadingBody: css`
+    padding-block: 4px 8px;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/dashboard/PanelSurface/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PanelSurface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  body: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 16px;\n\n    padding: 16px;\n  `,\n  bodySmall: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 12px;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n  loadingBody: css`\n    padding-block: 4px 8px;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;;;;CAOd,aAAa,GAAG;;;AAGlB,EAAE"}