@plumile/ui 0.1.134 → 0.1.142

package/lib/esm/components/dashboard/activity_card/ActivityCard.js

@@ -1,15 +1,15 @@
 import { RelativeTimeText as e } from "../../../atomic/atoms/relative-time-text/RelativeTimeText.js";
-import { PanelShell as t } from "../../layout/PanelShell.js";
-import { StatusBadge as n } from "../../../backoffice/atoms/status_badge/StatusBadge.js";
+import { StatusBadge as t } from "../../../backoffice/atoms/status_badge/StatusBadge.js";
+import { PanelShell as n } from "../../layout/PanelShell.js";
 import { root as r, title as i, top as a } from "./ActivityCard.css.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/dashboard/activity_card/ActivityCard.tsx
 var c = ({ className: c, details: l, status: u, statusTone: d, summary: f, timestamp: p, title: m }) => {
 	let h = null;
-	return u != null && d != null && (h = /* @__PURE__ */ o(n, {
+	return u != null && d != null && (h = /* @__PURE__ */ o(t, {
 		tone: d,
 		children: u
-	})), /* @__PURE__ */ o(t, {
+	})), /* @__PURE__ */ o(n, {
 		className: c,
 		children: /* @__PURE__ */ s("div", {
 			className: r,

package/lib/esm/components/dashboard/dashboard_metric_group/DashboardMetricGroup.css.js

@@ -0,0 +1,9 @@
+/* empty css                                      */
+/* empty css                                               */
+/* empty css                                    */
+//#region src/components/dashboard/dashboard_metric_group/DashboardMetricGroup.css.ts
+var e = "_10ljcs10 txvbqbi1f txvbqbe8", t = "_10ljcs12 _1izwgn61 _1izwgn60 txvbqb196b txvbqb17u txvbqb2gm txvbqb2et txvbqb1uy _10ljcs11 txvbqbi1f txvbqb7g txvbqb76 txvbqb7t", n = "_10ljcs15 _10ljcs13 txvbqb198h txvbqbdr8 txvbqb3f txvbqb17w0 txvbqb7p txvbqb76 txvbqb7t qbwcue6 txvbqb1d2y txvbqb1d37 qbwcue0 txvbqb1cb0 txvbqb1cws _10ljcs14 txvbqb2gm";
+//#endregion
+export { t as card, e as group, n as link };
+
+//# sourceMappingURL=DashboardMetricGroup.css.js.map

package/lib/esm/components/dashboard/dashboard_metric_group/DashboardMetricGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardMetricGroup.css.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_metric_group/DashboardMetricGroup.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { focusRing, liftOnHover } from '../../../theme/styleRecipes.css.js';\nimport { panel } from '../dashboard_panel/DashboardPanel.css.js';\n\nexport const group = sprinkles({\n  height: 'full',\n  alignItems: 'stretch',\n});\n\nexport const card = style([\n  panel,\n  sprinkles({\n    height: 'full',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n]);\n\nexport const link = style([\n  sprinkles({\n    color: 'inherit',\n    display: 'flex',\n    textDecoration: 'none',\n    width: 'full',\n    transitionProperty: 'transform',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  liftOnHover,\n  focusRing,\n  sprinkles({ borderRadius: 'lg' }),\n]);\n"],"mappings":""}

package/lib/esm/components/dashboard/dashboard_metric_group/DashboardMetricGroup.js

@@ -0,0 +1,30 @@
+import { MetricCard as e } from "../metric_card/MetricCard.js";
+import { MetricTileGroup as t } from "../metric_tile_group/MetricTileGroup.js";
+import { card as n, group as r, link as i } from "./DashboardMetricGroup.css.js";
+import { Fragment as a, jsx as o } from "react/jsx-runtime";
+import s from "@plumile/router/routing/Link.js";
+//#region src/components/dashboard/dashboard_metric_group/DashboardMetricGroup.tsx
+var c = ({ density: c = "comfortable", emptyState: l = null, metrics: u }) => u.length === 0 ? /* @__PURE__ */ o(a, { children: l }) : /* @__PURE__ */ o(t, {
+	className: r,
+	density: c,
+	children: u.map((t, r) => {
+		let a = `${t.id}-${r}`, l = /* @__PURE__ */ o(e, {
+			className: n,
+			label: t.label,
+			value: t.value,
+			hint: t.hint,
+			tone: t.tone,
+			density: c,
+			copyValue: t.copyValue
+		}, a);
+		return t.href == null ? l : /* @__PURE__ */ o(s, {
+			to: t.href,
+			className: i,
+			children: l
+		}, a);
+	})
+});
+//#endregion
+export { c as DashboardMetricGroup, c as default };
+
+//# sourceMappingURL=DashboardMetricGroup.js.map

package/lib/esm/components/dashboard/dashboard_metric_group/DashboardMetricGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardMetricGroup.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_metric_group/DashboardMetricGroup.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\n\nimport { MetricCard, type MetricTone } from '../metric_card/MetricCard.js';\nimport { MetricTileGroup } from '../metric_tile_group/MetricTileGroup.js';\nimport * as styles from './DashboardMetricGroup.css.js';\n\nexport type DashboardMetricItem = {\n  id: string;\n  label: ReactNode;\n  value: ReactNode;\n  hint?: ReactNode;\n  href?: string;\n  tone?: MetricTone;\n  copyValue?: string;\n};\n\nexport type DashboardMetricGroupProps = {\n  metrics: readonly DashboardMetricItem[];\n  emptyState?: ReactNode;\n  density?: 'compact' | 'comfortable';\n};\n\nexport const DashboardMetricGroup = ({\n  density = 'comfortable',\n  emptyState = null,\n  metrics,\n}: DashboardMetricGroupProps): JSX.Element => {\n  if (metrics.length === 0) {\n    return <>{emptyState}</>;\n  }\n\n  return (\n    <MetricTileGroup className={styles.group} density={density}>\n      {metrics.map((metric, index) => {\n        const key = `${metric.id}-${index}`;\n        const card = (\n          <MetricCard\n            key={key}\n            className={styles.card}\n            label={metric.label}\n            value={metric.value}\n            hint={metric.hint}\n            tone={metric.tone}\n            density={density}\n            copyValue={metric.copyValue}\n          />\n        );\n\n        if (metric.href == null) {\n          return card;\n        }\n\n        return (\n          <Link key={key} to={metric.href} className={styles.link}>\n            {card}\n          </Link>\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default DashboardMetricGroup;\n"],"mappings":";;;;;;AAuBA,IAAa,KAAwB,EACnC,aAAU,eACV,gBAAa,MACb,iBAEI,EAAQ,WAAW,IACd,kBAAA,GAAA,EAAA,UAAG,GAAc,CAAA,GAIxB,kBAAC,GAAD;CAAiB,WAAW;CAAuB;WAChD,EAAQ,KAAK,GAAQ,MAAU;EAC9B,IAAM,IAAM,GAAG,EAAO,GAAG,GAAG,KACtB,IACJ,kBAAC,GAAD;GAEE,WAAW;GACX,OAAO,EAAO;GACd,OAAO,EAAO;GACd,MAAM,EAAO;GACb,MAAM,EAAO;GACJ;GACT,WAAW,EAAO;GAClB,EARK,EAQL;EAOJ,OAJI,EAAO,QAAQ,OACV,IAIP,kBAAC,GAAD;GAAgB,IAAI,EAAO;GAAM,WAAW;aACzC;GACI,EAFI,EAEJ;GAET;CACc,CAAA"}

package/lib/esm/components/dashboard/dashboard_panel/DashboardPanel.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                              */
+//#region src/components/dashboard/dashboard_panel/DashboardPanel.css.ts
+var e = "_1izwgn61 _1izwgn60 txvbqb196b txvbqb17u txvbqb2gm txvbqb2et txvbqb1uy";
+//#endregion
+export { e as panel };
+
+//# sourceMappingURL=DashboardPanel.css.js.map

package/lib/esm/components/dashboard/dashboard_panel/DashboardPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPanel.css.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_panel/DashboardPanel.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const panel = style([\n  sprinkles({\n    backgroundColor: 'surface',\n    borderColor: 'borderSubtle',\n    borderRadius: 'lg',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n  }),\n  {\n    minHeight: '100%',\n    boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    selectors: {\n      '&&': {\n        backgroundColor: vars.colors.surface,\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/dashboard/dashboard_panel/DashboardPanel.js

@@ -0,0 +1,16 @@
+import { cx as e } from "../../../theme/tools.js";
+import { InfoTile as t } from "../../tile/InfoTile.js";
+import { panel as n } from "./DashboardPanel.css.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/dashboard/dashboard_panel/DashboardPanel.tsx
+var i = ({ actions: i, children: a, className: o, subtitle: s, title: c }) => /* @__PURE__ */ r(t, {
+	title: c,
+	subtitle: s,
+	actions: i,
+	className: e(n, o),
+	children: a
+});
+//#endregion
+export { i as DashboardPanel, i as default };
+
+//# sourceMappingURL=DashboardPanel.js.map

package/lib/esm/components/dashboard/dashboard_panel/DashboardPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPanel.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_panel/DashboardPanel.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { InfoTile } from '../../tile/InfoTile.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './DashboardPanel.css.js';\n\nexport type DashboardPanelProps = {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  actions?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n};\n\nexport const DashboardPanel = ({\n  actions,\n  children,\n  className,\n  subtitle,\n  title,\n}: DashboardPanelProps): JSX.Element => {\n  return (\n    <InfoTile\n      title={title}\n      subtitle={subtitle}\n      actions={actions}\n      className={cx(styles.panel, className)}\n    >\n      {children}\n    </InfoTile>\n  );\n};\n\nexport default DashboardPanel;\n"],"mappings":";;;;;AAcA,IAAa,KAAkB,EAC7B,YACA,aACA,cACA,aACA,eAGE,kBAAC,GAAD;CACS;CACG;CACD;CACT,WAAW,EAAG,GAAc,EAAU;CAErC;CACQ,CAAA"}

package/lib/esm/components/dashboard/dashboard_quick_actions/DashboardQuickActions.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                     */
+//#region src/components/dashboard/dashboard_quick_actions/DashboardQuickActions.css.ts
+var e = "_1r54rox0 txvbqbdrl txvbqbff6 txvbqbh34 txvbqbh2s", t = "_1r54rox1 txvbqbh2r", n = "_1r54rox2 txvbqbh2r", r = "_1r54rox5 qbwcued qbwcueb txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqb196b txvbqb19c9 txvbqbv txvbqb7g txvbqb76 txvbqb7t qbwcuec txvbqb1aey txvbqb1ayi txvbqb1bsa txvbqb1b7e qbwcue4 txvbqb1c2w txvbqb1c9c qbwcue0 txvbqb1cb0 txvbqb1cws _1r54rox3 txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqbdr8 txvbqbsdd txvbqb196d txvbqb19bj txvbqbfd0 txvbqb3f _1r54rox4 txvbqb1adm";
+//#endregion
+export { r as action, e as grid, t as gridSingle, n as gridStack };
+
+//# sourceMappingURL=DashboardQuickActions.css.js.map

package/lib/esm/components/dashboard/dashboard_quick_actions/DashboardQuickActions.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardQuickActions.css.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_quick_actions/DashboardQuickActions.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { interactiveControlSurface } from '../../../theme/styleRecipes.css.js';\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gap: 2,\n  gridTemplateColumns: {\n    base: 2,\n    sm: 1,\n  },\n});\n\nexport const gridSingle = sprinkles({\n  gridTemplateColumns: 1,\n});\n\nexport const gridStack = sprinkles({\n  gridTemplateColumns: 1,\n});\n\nexport const action = style([\n  interactiveControlSurface,\n  sprinkles({\n    display: 'flex',\n    minHeight: 10,\n    paddingX: 3,\n    paddingY: 2,\n    backgroundColor: 'surfaceSecondary',\n    color: 'primary',\n    fontWeight: 'semibold',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    backgroundColor: { hoverNotDisabled: 'primaryLight' },\n  }),\n]);\n"],"mappings":""}

package/lib/esm/components/dashboard/dashboard_quick_actions/DashboardQuickActions.js

@@ -0,0 +1,27 @@
+import { cx as e } from "../../../theme/tools.js";
+import { action as t, grid as n, gridSingle as r, gridStack as i } from "./DashboardQuickActions.css.js";
+import { Fragment as a, jsx as o } from "react/jsx-runtime";
+import s from "@plumile/router/routing/Link.js";
+//#region src/components/dashboard/dashboard_quick_actions/DashboardQuickActions.tsx
+var c = ({ actions: c, emptyState: l = null, layout: u = "grid" }) => {
+	if (c.length === 0) return /* @__PURE__ */ o(a, { children: l });
+	let d = c.length === 1;
+	return /* @__PURE__ */ o("div", {
+		className: e(n, {
+			[i]: u === "stack",
+			[r]: d
+		}),
+		children: c.map((e, n) => {
+			let r = `${e.id}-${n}`;
+			return /* @__PURE__ */ o(s, {
+				to: e.href,
+				className: t,
+				children: e.label
+			}, r);
+		})
+	});
+};
+//#endregion
+export { c as DashboardQuickActions, c as default };
+
+//# sourceMappingURL=DashboardQuickActions.js.map

package/lib/esm/components/dashboard/dashboard_quick_actions/DashboardQuickActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardQuickActions.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_quick_actions/DashboardQuickActions.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './DashboardQuickActions.css.js';\n\nexport type DashboardQuickAction = {\n  id: string;\n  label: ReactNode;\n  href: string;\n};\n\nexport type DashboardQuickActionsProps = {\n  actions: readonly DashboardQuickAction[];\n  emptyState?: ReactNode;\n  layout?: 'grid' | 'stack';\n};\n\nexport const DashboardQuickActions = ({\n  actions,\n  emptyState = null,\n  layout = 'grid',\n}: DashboardQuickActionsProps): JSX.Element => {\n  if (actions.length === 0) {\n    return <>{emptyState}</>;\n  }\n\n  const isSingleAction = actions.length === 1;\n\n  return (\n    <div\n      className={cx(styles.grid, {\n        [styles.gridStack]: layout === 'stack',\n        [styles.gridSingle]: isSingleAction,\n      })}\n    >\n      {actions.map((action, index) => {\n        const key = `${action.id}-${index}`;\n        return (\n          <Link key={key} to={action.href} className={styles.action}>\n            {action.label}\n          </Link>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default DashboardQuickActions;\n"],"mappings":";;;;;AAkBA,IAAa,KAAyB,EACpC,YACA,gBAAa,MACb,YAAS,aACoC;CAC7C,IAAI,EAAQ,WAAW,GACrB,OAAO,kBAAA,GAAA,EAAA,UAAG,GAAc,CAAA;CAG1B,IAAM,IAAiB,EAAQ,WAAW;CAE1C,OACE,kBAAC,OAAD;EACE,WAAW,EAAG,GAAa;IACxB,IAAmB,MAAW;IAC9B,IAAoB;GACtB,CAAC;YAED,EAAQ,KAAK,GAAQ,MAAU;GAC9B,IAAM,IAAM,GAAG,EAAO,GAAG,GAAG;GAC5B,OACE,kBAAC,GAAD;IAAgB,IAAI,EAAO;IAAM,WAAW;cACzC,EAAO;IACH,EAFI,EAEJ;IAET;EACE,CAAA"}

package/lib/esm/components/dashboard/dashboard_status_list/DashboardStatusList.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                   */
+//#region src/components/dashboard/dashboard_status_list/DashboardStatusList.css.ts
+var e = "_1275m880 txvbqbdr8 txvbqbf6i txvbqbfet", t = "_1275m881 txvbqbyo5 txvbqbzlq txvbqb10jb txvbqbvve txvbqbdr8 txvbqbey txvbqbjus txvbqbffj txvbqb2g9 txvbqb19c9", n = "_1275m883 qbwcueg qbwcuee txvbqb2g9 txvbqb19c9 txvbqb3f txvbqb7g txvbqb76 txvbqb7t qbwcuef txvbqb1aep txvbqb1b29 qbwcue0 txvbqb1cb0 txvbqb1cws _1275m881 txvbqbyo5 txvbqbzlq txvbqb10jb txvbqbvve txvbqbdr8 txvbqbey txvbqbjus txvbqbffj _1275m882 txvbqb1bpd", r = "_1275m884 txvbqbt9i txvbqb19cb txvbqbutu", i = "_1275m885 txvbqbf7y txvbqbfd0 txvbqb19c9 txvbqbf9r txvbqb18xk";
+//#endregion
+export { t as item, n as itemLink, r as label, e as list, i as value };
+
+//# sourceMappingURL=DashboardStatusList.css.js.map

package/lib/esm/components/dashboard/dashboard_status_list/DashboardStatusList.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardStatusList.css.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_status_list/DashboardStatusList.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { interactiveLinkSurface } from '../../../theme/styleRecipes.css.js';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nconst rowBase = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  paddingY: 2,\n  paddingX: 2,\n  borderRadius: 'md',\n  color: 'text',\n});\n\nexport const item = rowBase;\n\nexport const itemLink = style([\n  interactiveLinkSurface,\n  rowBase,\n  stateSprinkles({\n    color: { hover: 'primary' },\n  }),\n]);\n\nexport const label = sprinkles({\n  minWidth: 0,\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n\nexport const value = sprinkles({\n  flexShrink: 0,\n  fontWeight: 'semibold',\n  color: 'text',\n  fontVariantNumeric: 'tabular-nums',\n  whiteSpace: 'nowrap',\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/dashboard_status_list/DashboardStatusList.js

@@ -0,0 +1,28 @@
+import { item as e, itemLink as t, label as n, list as r, value as i } from "./DashboardStatusList.css.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@plumile/router/routing/Link.js";
+//#region src/components/dashboard/dashboard_status_list/DashboardStatusList.tsx
+var l = ({ emptyState: l = null, items: u }) => u.length === 0 ? /* @__PURE__ */ o(a, { children: l }) : /* @__PURE__ */ o("div", {
+	className: r,
+	children: u.map((r, l) => {
+		let u = `${r.id}-${l}`, d = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", {
+			className: n,
+			children: r.label
+		}), /* @__PURE__ */ o("span", {
+			className: i,
+			children: r.value
+		})] });
+		return r.href == null ? /* @__PURE__ */ o("div", {
+			className: e,
+			children: d
+		}, u) : /* @__PURE__ */ o(c, {
+			to: r.href,
+			className: t,
+			children: d
+		}, u);
+	})
+});
+//#endregion
+export { l as DashboardStatusList, l as default };
+
+//# sourceMappingURL=DashboardStatusList.js.map

package/lib/esm/components/dashboard/dashboard_status_list/DashboardStatusList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardStatusList.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_status_list/DashboardStatusList.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\n\nimport * as styles from './DashboardStatusList.css.js';\n\nexport type DashboardStatusItem = {\n  id: string;\n  label: ReactNode;\n  value: ReactNode;\n  href?: string;\n};\n\nexport type DashboardStatusListProps = {\n  items: readonly DashboardStatusItem[];\n  emptyState?: ReactNode;\n};\n\nexport const DashboardStatusList = ({\n  emptyState = null,\n  items,\n}: DashboardStatusListProps): JSX.Element => {\n  if (items.length === 0) {\n    return <>{emptyState}</>;\n  }\n\n  return (\n    <div className={styles.list}>\n      {items.map((item, index) => {\n        const key = `${item.id}-${index}`;\n        const content = (\n          <>\n            <span className={styles.label}>{item.label}</span>\n            <span className={styles.value}>{item.value}</span>\n          </>\n        );\n\n        if (item.href == null) {\n          return (\n            <div key={key} className={styles.item}>\n              {content}\n            </div>\n          );\n        }\n\n        return (\n          <Link key={key} to={item.href} className={styles.itemLink}>\n            {content}\n          </Link>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default DashboardStatusList;\n"],"mappings":";;;;AAiBA,IAAa,KAAuB,EAClC,gBAAa,MACb,eAEI,EAAM,WAAW,IACZ,kBAAA,GAAA,EAAA,UAAG,GAAc,CAAA,GAIxB,kBAAC,OAAD;CAAK,WAAW;WACb,EAAM,KAAK,GAAM,MAAU;EAC1B,IAAM,IAAM,GAAG,EAAK,GAAG,GAAG,KACpB,IACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW;aAAe,EAAK;GAAa,CAAA,EAClD,kBAAC,QAAD;GAAM,WAAW;aAAe,EAAK;GAAa,CAAA,CACjD,EAAA,CAAA;EAWL,OARI,EAAK,QAAQ,OAEb,kBAAC,OAAD;GAAe,WAAW;aACvB;GACG,EAFI,EAEJ,GAKR,kBAAC,GAAD;GAAgB,IAAI,EAAK;GAAM,WAAW;aACvC;GACI,EAFI,EAEJ;GAET;CACE,CAAA"}

package/lib/esm/components/dashboard/metric_card/MetricCard.css.js

@@ -1,8 +1,36 @@
 /* empty css                                      */
 /* empty css                          */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/dashboard/metric_card/MetricCard.css.ts
-var e = "_177uje60 txvbqbdr8 txvbqbf6i txvbqbffj", t = "_177uje61 txvbqbdr8 txvbqbel txvbqbjus txvbqbffj", n = "_177uje62 txvbqbm9g txvbqb9j txvbqb19cb", r = "_177uje63 txvbqbm9g txvbqbaz txvbqbbe txvbqbfdd txvbqb19c9", i = "_177uje64 txvbqbm9g txvbqb9j txvbqb19cb", a = "_177uje65 txvbqbdsb txvbqbey txvbqbjtp txvbqb19cb";
+var t = e({
+	defaultClassName: "_177uje61 _177uje60 txvbqbt9i",
+	variantClassNames: { tone: {
+		neutral: "_177uje62",
+		info: "_177uje63",
+		success: "_177uje64",
+		warning: "_177uje65",
+		danger: "_177uje66"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), n = e({
+	defaultClassName: "_177uje6a _177uje67 txvbqbdr8 txvbqbf6i",
+	variantClassNames: { density: {
+		comfortable: "_177uje6b _177uje68 txvbqbffj",
+		compact: "_177uje6c _177uje69 txvbqbff6"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), r = "_177uje6d txvbqbdr8 txvbqbel txvbqbjus txvbqbffj", i = "_177uje6e txvbqbm9g txvbqb9j txvbqb19cb", a = "_177uje6f txvbqbm9g txvbqbfdd txvbqb19c9", o = e({
+	defaultClassName: "_177uje6i",
+	variantClassNames: { density: {
+		comfortable: "_177uje6j _177uje6g txvbqbaz txvbqbbe",
+		compact: "_177uje6k _177uje6h txvbqbam txvbqbb1"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), s = "_177uje6l txvbqbdr8 txvbqbey txvbqbff6", c = "_177uje6m _177uje6l txvbqbdr8 txvbqbey txvbqbff6", l = "_177uje6n txvbqbm9g txvbqb9j txvbqb19cb", u = "_177uje6o txvbqbdsb txvbqbey txvbqbjtp txvbqb19cb";
 //#endregion
-export { i as hint, a as icon, n as label, e as root, t as top, r as value };
+export { t as card, l as hint, u as icon, i as label, n as root, r as top, a as value, s as valueContent, c as valueContentInline, o as valueDensity };
 
 //# sourceMappingURL=MetricCard.css.js.map

package/lib/esm/components/dashboard/metric_card/MetricCard.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.css.js","names":[],"sources":["../../../../../src/components/dashboard/metric_card/MetricCard.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const top = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 3,\n});\n\nexport const label = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const value = sprinkles({\n  margin: 0,\n  fontSize: { base: '2xl', md: '3xl' },\n  fontWeight: 'bold',\n  color: 'text',\n});\n\nexport const hint = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const icon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: 'textSecondary',\n});\n"],"mappings":""}
+{"version":3,"file":"MetricCard.css.js","names":[],"sources":["../../../../../src/components/dashboard/metric_card/MetricCard.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const card = recipe({\n  base: sprinkles({\n    minWidth: 0,\n  }),\n  variants: {\n    tone: {\n      neutral: {\n        backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${vars.colors.primaryLight} 26%, transparent), transparent 58%)`,\n        boxShadow: `inset 3px 0 0 color-mix(in srgb, ${vars.colors.primary} 42%, transparent)`,\n      },\n      info: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors.infoLight}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.info}`,\n      },\n      success: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors.successLight}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.success}`,\n      },\n      warning: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors.warningLight}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.warning}`,\n      },\n      danger: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors['error-8']}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.error}`,\n      },\n    },\n  },\n});\n\nconst rootBase = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const root = recipe({\n  base: rootBase,\n  variants: {\n    density: {\n      comfortable: sprinkles({\n        gap: 3,\n      }),\n      compact: sprinkles({\n        gap: 2,\n      }),\n    },\n  },\n});\n\nexport const top = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 3,\n});\n\nexport const label = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const value = sprinkles({\n  margin: 0,\n  fontWeight: 'bold',\n  color: 'text',\n});\n\nexport const valueDensity = recipe({\n  variants: {\n    density: {\n      comfortable: sprinkles({\n        fontSize: { base: '2xl', md: '3xl' },\n      }),\n      compact: sprinkles({\n        fontSize: { base: 'xl', md: '2xl' },\n      }),\n    },\n  },\n});\n\nexport const valueContent = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const valueContentInline = style([\n  valueContent,\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const hint = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const icon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: 'textSecondary',\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/metric_card/MetricCard.js

@@ -1,31 +1,45 @@
-import { PanelShell as e } from "../../layout/PanelShell.js";
-import { label as t, root as n, top as r, value as i } from "./MetricCard.css.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cx as e } from "../../../theme/tools.js";
+import { PanelShell as t } from "../../layout/PanelShell.js";
+import { CopyableText as n } from "../../../backoffice/atoms/copyable_text/CopyableText.js";
+import { card as r, label as i, root as a, top as o, value as s, valueContentInline as c, valueDensity as l } from "./MetricCard.css.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/dashboard/metric_card/MetricCard.tsx
-var s = ({ actions: s, className: c, hint: l, icon: u, label: d, value: f }) => /* @__PURE__ */ a(e, {
-	actions: s,
-	className: c,
-	children: /* @__PURE__ */ o("div", {
-		className: n,
-		children: [/* @__PURE__ */ o("div", {
-			className: r,
-			children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
-				className: t,
-				children: d
-			}), /* @__PURE__ */ a("p", {
-				className: i,
-				children: f
-			})] }), u != null && /* @__PURE__ */ a("div", {
-				className: "_177uje65 txvbqbdsb txvbqbey txvbqbjtp txvbqb19cb",
-				children: u
+var f = ({ actions: f, className: p, copiedLabel: m, copyLabel: h, copyValue: g, density: _ = "comfortable", hint: v, icon: y, label: b, tone: x, value: S }) => {
+	let C = S;
+	return g != null && g !== "" && (C = /* @__PURE__ */ u(n, {
+		value: g,
+		copyValue: g,
+		truncate: !1,
+		copyLabel: h,
+		copiedLabel: m
+	})), /* @__PURE__ */ u(t, {
+		actions: f,
+		className: e(r({ tone: x }), p),
+		children: /* @__PURE__ */ d("div", {
+			className: a({ density: _ }),
+			children: [/* @__PURE__ */ d("div", {
+				className: o,
+				children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+					className: i,
+					children: b
+				}), /* @__PURE__ */ u("p", {
+					className: e(s, l({ density: _ })),
+					children: /* @__PURE__ */ u("span", {
+						className: c,
+						children: C
+					})
+				})] }), y != null && /* @__PURE__ */ u("div", {
+					className: "_177uje6o txvbqbdsb txvbqbey txvbqbjtp txvbqb19cb",
+					children: y
+				})]
+			}), v != null && /* @__PURE__ */ u("p", {
+				className: "_177uje6n txvbqbm9g txvbqb9j txvbqb19cb",
+				children: v
 			})]
-		}), l != null && /* @__PURE__ */ a("p", {
-			className: "_177uje64 txvbqbm9g txvbqb9j txvbqb19cb",
-			children: l
-		})]
-	})
-});
+		})
+	});
+};
 //#endregion
-export { s as MetricCard, s as default };
+export { f as MetricCard, f as default };
 
 //# sourceMappingURL=MetricCard.js.map

package/lib/esm/components/dashboard/metric_card/MetricCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../../src/components/dashboard/metric_card/MetricCard.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { PanelShell } from '../../layout/PanelShell.js';\nimport * as styles from './MetricCard.css.js';\n\nexport type MetricCardProps = {\n  label: ReactNode;\n  value: ReactNode;\n  hint?: ReactNode;\n  icon?: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n};\n\nexport const MetricCard = ({\n  actions,\n  className,\n  hint,\n  icon,\n  label,\n  value,\n}: MetricCardProps): JSX.Element => {\n  return (\n    <PanelShell actions={actions} className={className}>\n      <div className={styles.root}>\n        <div className={styles.top}>\n          <div>\n            <p className={styles.label}>{label}</p>\n            <p className={styles.value}>{value}</p>\n          </div>\n          {icon != null && <div className={styles.icon}>{icon}</div>}\n        </div>\n        {hint != null && <p className={styles.hint}>{hint}</p>}\n      </div>\n    </PanelShell>\n  );\n};\n\nexport default MetricCard;\n"],"mappings":";;;;AAcA,IAAa,KAAc,EACzB,YACA,cACA,MAAA,GACA,MAAA,GACA,OAAA,GACA,OAAA,QAGE,kBAAC,GAAD;CAAqB;CAAoB;WACvC,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;IAAG,WAAW;cAAe;IAAU,CAAA,EACvC,kBAAC,KAAD;IAAG,WAAW;cAAe;IAAU,CAAA,CACnC,EAAA,CAAA,EACL,KAAQ,QAAQ,kBAAC,OAAD;IAAK,WAAW;cAAc;IAAW,CAAA,CACtD;MACL,KAAQ,QAAQ,kBAAC,KAAD;GAAG,WAAW;aAAc;GAAS,CAAA,CAClD;;CACK,CAAA"}
+{"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../../src/components/dashboard/metric_card/MetricCard.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { CopyableText } from '../../../backoffice/atoms/copyable_text/CopyableText.js';\nimport { PanelShell } from '../../layout/PanelShell.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './MetricCard.css.js';\n\nexport type MetricTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\nexport type MetricCardProps = {\n  label: ReactNode;\n  value: ReactNode;\n  hint?: ReactNode;\n  icon?: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n  tone?: MetricTone;\n  density?: 'compact' | 'comfortable';\n  copyValue?: string;\n  copyLabel?: string;\n  copiedLabel?: string;\n};\n\nexport const MetricCard = ({\n  actions,\n  className,\n  copiedLabel,\n  copyLabel,\n  copyValue,\n  density = 'comfortable',\n  hint,\n  icon,\n  label,\n  tone,\n  value,\n}: MetricCardProps): JSX.Element => {\n  let valueNode = value;\n  if (copyValue != null && copyValue !== '') {\n    valueNode = (\n      <CopyableText\n        value={copyValue}\n        copyValue={copyValue}\n        truncate={false}\n        copyLabel={copyLabel}\n        copiedLabel={copiedLabel}\n      />\n    );\n  }\n\n  return (\n    <PanelShell\n      actions={actions}\n      className={cx(styles.card({ tone }), className)}\n    >\n      <div className={styles.root({ density })}>\n        <div className={styles.top}>\n          <div>\n            <p className={styles.label}>{label}</p>\n            <p className={cx(styles.value, styles.valueDensity({ density }))}>\n              <span className={styles.valueContentInline}>{valueNode}</span>\n            </p>\n          </div>\n          {icon != null && <div className={styles.icon}>{icon}</div>}\n        </div>\n        {hint != null && <p className={styles.hint}>{hint}</p>}\n      </div>\n    </PanelShell>\n  );\n};\n\nexport default MetricCard;\n"],"mappings":";;;;;;AAuBA,IAAa,KAAc,EACzB,YACA,cACA,gBACA,cACA,cACA,aAAU,eACV,MAAA,GACA,MAAA,GACA,OAAA,GACA,SACA,OAAA,QACkC;CAClC,IAAI,IAAY;CAahB,OAZI,KAAa,QAAQ,MAAc,OACrC,IACE,kBAAC,GAAD;EACE,OAAO;EACI;EACX,UAAU;EACC;EACE;EACb,CAAA,GAKJ,kBAAC,GAAD;EACW;EACT,WAAW,EAAG,EAAY,EAAE,SAAM,CAAC,EAAE,EAAU;YAE/C,kBAAC,OAAD;GAAK,WAAW,EAAY,EAAE,YAAS,CAAC;aAAxC,CACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAW;eAAe;KAAU,CAAA,EACvC,kBAAC,KAAD;KAAG,WAAW,EAAG,GAAc,EAAoB,EAAE,YAAS,CAAC,CAAC;eAC9D,kBAAC,QAAD;MAAM,WAAW;gBAA4B;MAAiB,CAAA;KAC5D,CAAA,CACA,EAAA,CAAA,EACL,KAAQ,QAAQ,kBAAC,OAAD;KAAK,WAAW;eAAc;KAAW,CAAA,CACtD;OACL,KAAQ,QAAQ,kBAAC,KAAD;IAAG,WAAW;cAAc;IAAS,CAAA,CAClD;;EACK,CAAA"}

package/lib/esm/components/dashboard/metric_tile_group/MetricTileGroup.css.js

@@ -1,8 +1,29 @@
 /* empty css                                      */
 /* empty css                               */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/dashboard/metric_tile_group/MetricTileGroup.css.ts
-var e = "_1p0u7xj0 txvbqbdrl txvbqbffj txvbqb17w0 txvbqbhf1";
+var t = e({
+	defaultClassName: "_1p0u7xjb _1p0u7xj0 txvbqbdrl txvbqb17w0",
+	variantClassNames: {
+		density: {
+			comfortable: "_1p0u7xjc _1p0u7xj1 txvbqbffj",
+			compact: "_1p0u7xjd _1p0u7xj2 txvbqbff6"
+		},
+		minColumn: {
+			min160: "_1p0u7xje _1p0u7xj3 txvbqbhdy",
+			min180: "_1p0u7xjf _1p0u7xj4 txvbqbheb",
+			min200: "_1p0u7xjg _1p0u7xj5 txvbqbheo",
+			min220: "_1p0u7xjh _1p0u7xj6 txvbqbhf1",
+			min240: "_1p0u7xji _1p0u7xj7 txvbqbhfe",
+			min260: "_1p0u7xjj _1p0u7xj8 txvbqbhfr",
+			min280: "_1p0u7xjk _1p0u7xj9 txvbqbhg4",
+			min320: "_1p0u7xjl _1p0u7xja txvbqbhgh"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+});
 //#endregion
-export { e as root };
+export { t as root };
 
 //# sourceMappingURL=MetricTileGroup.css.js.map

package/lib/esm/components/dashboard/metric_tile_group/MetricTileGroup.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricTileGroup.css.js","names":[],"sources":["../../../../../src/components/dashboard/metric_tile_group/MetricTileGroup.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'grid',\n  gap: 3,\n  width: 'full',\n  gridTemplateColumns: 'autoFitMinmax220',\n});\n"],"mappings":""}
+{"version":3,"file":"MetricTileGroup.css.js","names":[],"sources":["../../../../../src/components/dashboard/metric_tile_group/MetricTileGroup.css.ts"],"sourcesContent":["import { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport type MetricTileGroupMinColumn =\n  | '160'\n  | '180'\n  | '200'\n  | '220'\n  | '240'\n  | '260'\n  | '280'\n  | '320';\n\nexport const root = recipe({\n  base: sprinkles({\n    display: 'grid',\n    width: 'full',\n  }),\n  variants: {\n    density: {\n      comfortable: sprinkles({\n        gap: 3,\n      }),\n      compact: sprinkles({\n        gap: 2,\n      }),\n    },\n    minColumn: {\n      min160: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax160',\n      }),\n      min180: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax180',\n      }),\n      min200: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax200',\n      }),\n      min220: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax220',\n      }),\n      min240: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax240',\n      }),\n      min260: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax260',\n      }),\n      min280: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax280',\n      }),\n      min320: sprinkles({\n        gridTemplateColumns: 'autoFitMinmax320',\n      }),\n    },\n  },\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/metric_tile_group/MetricTileGroup.js

@@ -2,11 +2,23 @@ import { cx as e } from "../../../theme/tools.js";
 import { root as t } from "./MetricTileGroup.css.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/dashboard/metric_tile_group/MetricTileGroup.tsx
-var r = ({ children: r, className: i }) => /* @__PURE__ */ n("div", {
-	className: e(t, i),
-	children: r
+var r = {
+	160: "min160",
+	180: "min180",
+	200: "min200",
+	220: "min220",
+	240: "min240",
+	260: "min260",
+	280: "min280",
+	320: "min320"
+}, i = ({ children: i, className: a, density: o = "comfortable", minColumn: s = "220" }) => /* @__PURE__ */ n("div", {
+	className: e(t({
+		density: o,
+		minColumn: r[s]
+	}), a),
+	children: i
 });
 //#endregion
-export { r as MetricTileGroup, r as default };
+export { i as MetricTileGroup, i as default };
 
 //# sourceMappingURL=MetricTileGroup.js.map

package/lib/esm/components/dashboard/metric_tile_group/MetricTileGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricTileGroup.js","names":[],"sources":["../../../../../src/components/dashboard/metric_tile_group/MetricTileGroup.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './MetricTileGroup.css.js';\n\nexport type MetricTileGroupProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport const MetricTileGroup = ({\n  children,\n  className,\n}: MetricTileGroupProps): JSX.Element => {\n  return <div className={cx(styles.root, className)}>{children}</div>;\n};\n\nexport default MetricTileGroup;\n"],"mappings":";;;;AAUA,IAAa,KAAmB,EAC9B,aACA,mBAEO,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAa,EAAU;CAAG;CAAe,CAAA"}
+{"version":3,"file":"MetricTileGroup.js","names":[],"sources":["../../../../../src/components/dashboard/metric_tile_group/MetricTileGroup.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './MetricTileGroup.css.js';\nimport type { MetricTileGroupMinColumn } from './MetricTileGroup.css.js';\n\nexport type MetricTileGroupProps = {\n  children: ReactNode;\n  className?: string;\n  density?: 'compact' | 'comfortable';\n  minColumn?: MetricTileGroupMinColumn;\n};\n\nconst minColumnVariants: Record<\n  MetricTileGroupMinColumn,\n  `min${MetricTileGroupMinColumn}`\n> = {\n  160: 'min160',\n  180: 'min180',\n  200: 'min200',\n  220: 'min220',\n  240: 'min240',\n  260: 'min260',\n  280: 'min280',\n  320: 'min320',\n};\n\nexport const MetricTileGroup = ({\n  children,\n  className,\n  density = 'comfortable',\n  minColumn = '220',\n}: MetricTileGroupProps): JSX.Element => {\n  return (\n    <div\n      className={cx(\n        styles.root({ density, minColumn: minColumnVariants[minColumn] }),\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default MetricTileGroup;\n"],"mappings":";;;;AAaA,IAAM,IAGF;CACF,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN,EAEY,KAAmB,EAC9B,aACA,cACA,aAAU,eACV,eAAY,YAGV,kBAAC,OAAD;CACE,WAAW,EACT,EAAY;EAAE;EAAS,WAAW,EAAkB;EAAY,CAAC,EACjE,EACD;CAEA;CACG,CAAA"}

package/lib/esm/components/dashboard/status_summary_panel/StatusSummaryPanel.js

@@ -1,11 +1,11 @@
 import { RelativeTimeText as e } from "../../../atomic/atoms/relative-time-text/RelativeTimeText.js";
-import { PanelShell as t } from "../../layout/PanelShell.js";
-import { StatusBadge as n } from "../../../backoffice/atoms/status_badge/StatusBadge.js";
+import { StatusBadge as t } from "../../../backoffice/atoms/status_badge/StatusBadge.js";
+import { PanelShell as n } from "../../layout/PanelShell.js";
 import { BackofficeKeyValueList as r } from "../../../backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js";
 import { root as i, row as a } from "./StatusSummaryPanel.css.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/dashboard/status_summary_panel/StatusSummaryPanel.tsx
-var c = ({ className: c, help: l, items: u = [], status: d, statusLabel: f, statusTone: p, title: m, updatedAt: h }) => /* @__PURE__ */ o(t, {
+var c = ({ className: c, help: l, items: u = [], status: d, statusLabel: f, statusTone: p, title: m, updatedAt: h }) => /* @__PURE__ */ o(n, {
 	title: m,
 	className: c,
 	children: /* @__PURE__ */ s("div", {
@@ -13,7 +13,7 @@ var c = ({ className: c, help: l, items: u = [], status: d, statusLabel: f, stat
 		children: [
 			/* @__PURE__ */ s("div", {
 				className: a,
-				children: [/* @__PURE__ */ o("span", { children: f ?? d }), /* @__PURE__ */ o(n, {
+				children: [/* @__PURE__ */ o("span", { children: f ?? d }), /* @__PURE__ */ o(t, {
 					tone: p,
 					children: d
 				})]

package/lib/esm/components/dashboard/timeline_event_row/TimelineEventRow.css.js

@@ -1,8 +1,20 @@
 /* empty css                                      */
 /* empty css                                */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/dashboard/timeline_event_row/TimelineEventRow.css.ts
-var e = "_1664kmj0 txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqbuy6 txvbqbdr8 txvbqbf6i txvbqbff6 txvbqb196l", t = "_1664kmj1 txvbqb96 txvbqb19cb", n = "_1664kmj2 txvbqb9j txvbqb19c9", r = "_1664kmj3 txvbqbdr8 txvbqbf91 txvbqbff6 txvbqb96 txvbqb19cb";
+var t = e({
+	defaultClassName: "_1664kmj1 _1664kmj0 txvbqb1uy txvbqb2et txvbqb2g9 txvbqbuy6 txvbqbdr8 txvbqbf6i txvbqbff6 txvbqb196l txvbqbt9i",
+	variantClassNames: { tone: {
+		neutral: "_1664kmj2",
+		info: "_1664kmj3",
+		success: "_1664kmj4",
+		warning: "_1664kmj5",
+		danger: "_1664kmj6"
+	} },
+	defaultVariants: { tone: "neutral" },
+	compoundVariants: []
+}), n = "_1664kmj7 txvbqbdr8 txvbqbjus txvbqbfo txvbqbff6 txvbqbf91", r = "_1664kmj8 txvbqb96 txvbqb19cb txvbqbf9r", i = "_1664kmj9 txvbqb9j txvbqbfd0 txvbqb19c9", a = "_1664kmja txvbqb9j txvbqb19cb", o = "_1664kmjb txvbqb96 txvbqb19cb", s = "_1664kmjc txvbqbdr8 txvbqbf91 txvbqbff6", c = "_1664kmjd txvbqbyo5 txvbqbzlq txvbqb10iy txvbqbvv1 txvbqbdsb txvbqbfo txvbqbfet txvbqb96 txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9", l = "_1664kmje txvbqb19cb", u = "_1664kmjf txvbqb19c9 txvbqbfd0", d = "_1664kmjh _1664kmjg txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqbuxt txvbqb196j txvbqb96 txvbqb19cb txvbqbuvn";
 //#endregion
-export { r as metrics, e as root, n as summary, t as timestamp };
+export { a as description, d as details, n as header, o as meta, c as metric, l as metricLabel, u as metricValue, s as metrics, t as root, r as timestamp, i as title };
 
 //# sourceMappingURL=TimelineEventRow.css.js.map

package/lib/esm/components/dashboard/timeline_event_row/TimelineEventRow.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineEventRow.css.js","names":[],"sources":["../../../../../src/components/dashboard/timeline_event_row/TimelineEventRow.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  borderRadius: 'md',\n  padding: 3,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  backgroundColor: 'backgroundSecondary',\n});\n\nexport const timestamp = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n});\n\nexport const summary = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n});\n\nexport const metrics = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  fontSize: 'xs',\n  color: 'textSecondary',\n});\n"],"mappings":""}
+{"version":3,"file":"TimelineEventRow.css.js","names":[],"sources":["../../../../../src/components/dashboard/timeline_event_row/TimelineEventRow.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nconst rootBase = sprinkles({\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderRadius: 'md',\n  padding: 3,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  backgroundColor: 'backgroundSecondary',\n  minWidth: 0,\n});\n\nexport const root = recipe({\n  base: rootBase,\n  variants: {\n    tone: {\n      neutral: { borderColor: vars.colors.borderSubtle },\n      info: {\n        borderColor: vars.colors.info,\n        boxShadow: `inset 3px 0 0 ${vars.colors.info}`,\n      },\n      success: {\n        borderColor: vars.colors.success,\n        boxShadow: `inset 3px 0 0 ${vars.colors.success}`,\n      },\n      warning: {\n        borderColor: vars.colors.warning,\n        boxShadow: `inset 3px 0 0 ${vars.colors.warning}`,\n      },\n      danger: {\n        borderColor: vars.colors.error,\n        boxShadow: `inset 3px 0 0 ${vars.colors.error}`,\n      },\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'baseline',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const timestamp = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  fontVariantNumeric: 'tabular-nums',\n});\n\nexport const title = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const meta = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n});\n\nexport const metrics = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const metric = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'baseline',\n  gap: 1,\n  fontSize: 'xs',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  borderRadius: 'md',\n  paddingY: 1,\n  paddingX: 2,\n});\n\nexport const metricLabel = sprinkles({\n  color: 'textSecondary',\n});\n\nexport const metricValue = sprinkles({\n  color: 'text',\n  fontWeight: 'semibold',\n});\n\nexport const details = style([\n  sprinkles({\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    borderRadius: 'md',\n    padding: 2,\n    backgroundColor: 'background',\n    fontSize: 'xs',\n    color: 'textSecondary',\n    overflowX: 'auto',\n  }),\n  {\n    overflowWrap: 'anywhere',\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/dashboard/timeline_event_row/TimelineEventRow.js

@@ -1,31 +1,52 @@
 import { cx as e } from "../../../theme/tools.js";
 import { RelativeTimeText as t } from "../../../atomic/atoms/relative-time-text/RelativeTimeText.js";
-import { root as n, timestamp as r } from "./TimelineEventRow.css.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { header as n, root as r, title as i } from "./TimelineEventRow.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/dashboard/timeline_event_row/TimelineEventRow.tsx
-var o = ({ className: o, details: s, metrics: c = [], summary: l, timestamp: u }) => /* @__PURE__ */ a("article", {
-	className: e(n, o),
-	children: [
-		/* @__PURE__ */ i("span", {
-			className: r,
-			children: /* @__PURE__ */ i(t, { value: u })
-		}),
-		l != null && /* @__PURE__ */ i("div", {
-			className: "_1664kmj2 txvbqb9j txvbqb19c9",
-			children: l
-		}),
-		c.length > 0 && /* @__PURE__ */ i("div", {
-			className: "_1664kmj3 txvbqbdr8 txvbqbf91 txvbqbff6 txvbqb96 txvbqb19cb",
-			children: c.map((e) => /* @__PURE__ */ a("span", { children: [
-				e.label,
-				": ",
-				e.value
-			] }, e.id))
-		}),
-		s
-	]
-});
+var s = ({ className: s, description: c, details: l, meta: u, metrics: d = [], time: f, title: p, timestamp: m, tone: h = "neutral" }) => {
+	let g = f ?? null;
+	return g == null && m != null && (g = /* @__PURE__ */ a(t, { value: m })), /* @__PURE__ */ o("article", {
+		className: e(r({ tone: h }), s),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: n,
+				children: [/* @__PURE__ */ a("div", {
+					className: i,
+					children: p
+				}), g != null && /* @__PURE__ */ a("span", {
+					className: "_1664kmj8 txvbqb96 txvbqb19cb txvbqbf9r",
+					children: g
+				})]
+			}),
+			c != null && /* @__PURE__ */ a("div", {
+				className: "_1664kmja txvbqb9j txvbqb19cb",
+				children: c
+			}),
+			u != null && /* @__PURE__ */ a("div", {
+				className: "_1664kmjb txvbqb96 txvbqb19cb",
+				children: u
+			}),
+			d.length > 0 && /* @__PURE__ */ a("div", {
+				className: "_1664kmjc txvbqbdr8 txvbqbf91 txvbqbff6",
+				children: d.map((e) => /* @__PURE__ */ o("span", {
+					className: "_1664kmjd txvbqbyo5 txvbqbzlq txvbqb10iy txvbqbvv1 txvbqbdsb txvbqbfo txvbqbfet txvbqb96 txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9",
+					children: [/* @__PURE__ */ a("span", {
+						className: "_1664kmje txvbqb19cb",
+						children: e.label
+					}), /* @__PURE__ */ a("span", {
+						className: "_1664kmjf txvbqb19c9 txvbqbfd0",
+						children: e.value
+					})]
+				}, e.id))
+			}),
+			l != null && /* @__PURE__ */ a("div", {
+				className: "_1664kmjh _1664kmjg txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqbuxt txvbqb196j txvbqb96 txvbqb19cb txvbqbuvn",
+				children: l
+			})
+		]
+	});
+};
 //#endregion
-export { o as TimelineEventRow, o as default };
+export { s as TimelineEventRow, s as default };
 
 //# sourceMappingURL=TimelineEventRow.js.map

package/lib/esm/components/dashboard/timeline_event_row/TimelineEventRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineEventRow.js","names":[],"sources":["../../../../../src/components/dashboard/timeline_event_row/TimelineEventRow.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { RelativeTimeText } from '../../../atomic/atoms/relative-time-text/RelativeTimeText.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './TimelineEventRow.css.js';\n\nexport type TimelineEventRowMetric = {\n  id: string;\n  label: ReactNode;\n  value: ReactNode;\n};\n\nexport type TimelineEventRowProps = {\n  timestamp: string | Date;\n  summary?: ReactNode;\n  metrics?: readonly TimelineEventRowMetric[];\n  details?: ReactNode;\n  className?: string;\n};\n\nexport const TimelineEventRow = ({\n  className,\n  details,\n  metrics = [],\n  summary,\n  timestamp,\n}: TimelineEventRowProps): JSX.Element => {\n  return (\n    <article className={cx(styles.root, className)}>\n      <span className={styles.timestamp}>\n        <RelativeTimeText value={timestamp} />\n      </span>\n      {summary != null && <div className={styles.summary}>{summary}</div>}\n      {metrics.length > 0 && (\n        <div className={styles.metrics}>\n          {metrics.map((metric) => {\n            return (\n              <span key={metric.id}>\n                {metric.label}: {metric.value}\n              </span>\n            );\n          })}\n        </div>\n      )}\n      {details}\n    </article>\n  );\n};\n\nexport default TimelineEventRow;\n"],"mappings":";;;;;AAoBA,IAAa,KAAoB,EAC/B,cACA,YACA,SAAA,IAAU,EAAE,EACZ,SAAA,GACA,WAAA,QAGE,kBAAC,WAAD;CAAS,WAAW,EAAG,GAAa,EAAU;WAA9C;EACE,kBAAC,QAAD;GAAM,WAAW;aACf,kBAAC,GAAD,EAAkB,OAAO,GAAa,CAAA;GACjC,CAAA;EACN,KAAW,QAAQ,kBAAC,OAAD;GAAK,WAAW;aAAiB;GAAc,CAAA;EAClE,EAAQ,SAAS,KAChB,kBAAC,OAAD;GAAK,WAAW;aACb,EAAQ,KAAK,MAEV,kBAAC,QAAD,EAAA,UAAA;IACG,EAAO;IAAM;IAAG,EAAO;IACnB,EAAA,EAFI,EAAO,GAEX,CAET;GACE,CAAA;EAEP;EACO"}
+{"version":3,"file":"TimelineEventRow.js","names":[],"sources":["../../../../../src/components/dashboard/timeline_event_row/TimelineEventRow.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { RelativeTimeText } from '../../../atomic/atoms/relative-time-text/RelativeTimeText.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './TimelineEventRow.css.js';\n\nexport type TimelineEventRowMetric = {\n  id: string;\n  label: ReactNode;\n  value: ReactNode;\n};\n\nexport type TimelineEventRowTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type TimelineEventRowProps = {\n  title: ReactNode;\n  timestamp?: string | Date;\n  time?: ReactNode;\n  description?: ReactNode;\n  meta?: ReactNode;\n  metrics?: readonly TimelineEventRowMetric[];\n  details?: ReactNode;\n  tone?: TimelineEventRowTone;\n  className?: string;\n};\n\nexport const TimelineEventRow = ({\n  className,\n  description,\n  details,\n  meta,\n  metrics = [],\n  time,\n  title,\n  timestamp,\n  tone = 'neutral',\n}: TimelineEventRowProps): JSX.Element => {\n  let timeNode = time ?? null;\n  if (timeNode == null && timestamp != null) {\n    timeNode = <RelativeTimeText value={timestamp} />;\n  }\n\n  return (\n    <article className={cx(styles.root({ tone }), className)}>\n      <div className={styles.header}>\n        <div className={styles.title}>{title}</div>\n        {timeNode != null && (\n          <span className={styles.timestamp}>{timeNode}</span>\n        )}\n      </div>\n      {description != null && (\n        <div className={styles.description}>{description}</div>\n      )}\n      {meta != null && <div className={styles.meta}>{meta}</div>}\n      {metrics.length > 0 && (\n        <div className={styles.metrics}>\n          {metrics.map((metric) => {\n            return (\n              <span key={metric.id} className={styles.metric}>\n                <span className={styles.metricLabel}>{metric.label}</span>\n                <span className={styles.metricValue}>{metric.value}</span>\n              </span>\n            );\n          })}\n        </div>\n      )}\n      {details != null && <div className={styles.details}>{details}</div>}\n    </article>\n  );\n};\n\nexport default TimelineEventRow;\n"],"mappings":";;;;;AA+BA,IAAa,KAAoB,EAC/B,cACA,aAAA,GACA,SAAA,GACA,MAAA,GACA,SAAA,IAAU,EAAE,EACZ,SACA,OAAA,GACA,WAAA,GACA,UAAO,gBACiC;CACxC,IAAI,IAAW,KAAQ;CAKvB,OAJI,KAAY,QAAQ,KAAa,SACnC,IAAW,kBAAC,GAAD,EAAkB,OAAO,GAAa,CAAA,GAIjD,kBAAC,WAAD;EAAS,WAAW,EAAG,EAAY,EAAE,SAAM,CAAC,EAAE,EAAU;YAAxD;GACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAW;eAAe;KAAY,CAAA,EAC1C,KAAY,QACX,kBAAC,QAAD;KAAM,WAAW;eAAmB;KAAgB,CAAA,CAElD;;GACL,KAAe,QACd,kBAAC,OAAD;IAAK,WAAW;cAAqB;IAAkB,CAAA;GAExD,KAAQ,QAAQ,kBAAC,OAAD;IAAK,WAAW;cAAc;IAAW,CAAA;GACzD,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;cACb,EAAQ,KAAK,MAEV,kBAAC,QAAD;KAAsB,WAAW;eAAjC,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAqB,EAAO;MAAa,CAAA,EAC1D,kBAAC,QAAD;MAAM,WAAW;gBAAqB,EAAO;MAAa,CAAA,CACrD;OAHI,EAAO,GAGX,CAET;IACE,CAAA;GAEP,KAAW,QAAQ,kBAAC,OAAD;IAAK,WAAW;cAAiB;IAAc,CAAA;GAC3D"}